/* ═══════════════════════════════════════════════════════════════
   ProductConsult — ported UI components
   Vanilla adaptations of React Bits CardNav, RotatingText, ProfileCard.
   Brand tokens come from site.css.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────── CardNav ───────────────────────────
   Restructured from the original: both children are in normal flow, so the
   nav sizes itself and the panel animates via max-height. No JS measurement,
   no fixed heights to keep in sync with content.

   Two classes, deliberately separate — a single class cannot do both jobs:
     .open  structural. Flips the panel out of display:none so it has a box.
     .anim  visual. Drives max-height + the per-card reveal.
   They are applied a frame apart (and removed in the reverse order) because
   a transition cannot start from a display:none element — setting both at
   once is exactly what silently killed the animation.                       */
.card-nav-container{
  position:fixed;top:1.25rem;left:50%;transform:translateX(-50%);
  width:min(94%,860px);z-index:9990;box-sizing:border-box}
.card-nav{
  display:block;padding:0;background:var(--paper,#fff);
  border:1px solid var(--grid,#E2E2E6);border-radius:.85rem;
  box-shadow:0 4px 18px -6px rgba(20,20,22,.18);
  position:relative;overflow:hidden;
  max-height:62px;                 /* 60px bar + 1px border top and bottom */
  transition:max-height .45s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.card-nav.anim{max-height:260px}
.card-nav-container.stuck .card-nav{box-shadow:0 10px 34px -12px rgba(20,20,22,.32)}

.card-nav-top{
  height:60px;display:flex;align-items:center;justify-content:space-between;
  padding:.5rem .5rem .5rem 1rem;position:relative;z-index:2}

.hamburger-menu{
  height:40px;width:40px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;cursor:pointer;gap:6px;background:none;border:0;padding:0;
  color:var(--txt,#18181B);border-radius:8px;flex:none}
.hamburger-menu:hover .hamburger-line{opacity:.7}
.hamburger-menu:focus-visible{outline:2px solid var(--coral,#E0505C);outline-offset:2px}
.hamburger-line{
  width:26px;height:2px;background:currentColor;display:block;
  transition:transform .25s ease,opacity .2s ease;transform-origin:50% 50%}
.hamburger-menu.open .hamburger-line:first-child{transform:translateY(4px) rotate(45deg)}
.hamburger-menu.open .hamburger-line:last-child{transform:translateY(-4px) rotate(-45deg)}

.logo-container{
  display:flex;align-items:center;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);text-decoration:none}
.logo-container picture{display:flex}
.logo-container .logo{height:30px;width:auto;display:block}

.card-nav-cta-button{
  background:var(--coral,#E0505C);color:#fff;border:0;border-radius:.5rem;
  padding:0 1.05rem;height:42px;display:inline-flex;align-items:center;
  font:700 14px/1 var(--sans,system-ui);cursor:pointer;text-decoration:none;
  transition:background .25s ease;flex:none;white-space:nowrap}
.card-nav-cta-button:hover{background:var(--coral-d,#C8434F)}

.card-nav-content{
  display:none;align-items:stretch;gap:10px;
  padding:0 .55rem .55rem}
.card-nav.open .card-nav-content{display:flex}

.nav-card{
  flex:1 1 0;min-width:0;border-radius:.6rem;display:flex;flex-direction:column;
  padding:14px 16px;gap:8px;user-select:none;min-height:150px;
  opacity:0;transform:translateY(28px);
  transition:opacity .42s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1)}
.card-nav.anim .nav-card{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .card-nav{transition:none}
  .nav-card{transition:none;opacity:1;transform:none}
}
.nav-card-label{font-weight:500;font-size:20px;letter-spacing:-.02em}
.nav-card-links{margin-top:auto;display:flex;flex-direction:column;gap:3px}
.nav-card-link{
  font-size:14.5px;cursor:pointer;text-decoration:none;color:inherit;
  display:inline-flex;align-items:center;gap:6px;opacity:.85;
  transition:opacity .25s ease,transform .25s ease;border-radius:4px}
.nav-card-link:hover{opacity:1;transform:translateX(2px)}
.nav-card-link[aria-current]{opacity:1;font-weight:700}
.nav-card-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nav-card-link-icon{flex:none}

/* the fixed nav needs breathing room above page content */
/* nav sits at top:1.25rem and is 62px tall, so its lower edge is at 82px */
body{padding-top:116px}
.hero .w{padding-top:clamp(2rem,3.5vw,3rem)}

@media (max-width:768px){
  .card-nav-container{width:94%;top:.85rem}
  body{padding-top:100px}
  .hero .w{padding-top:clamp(1.25rem,3.5vw,2rem)}
  .card-nav.anim{max-height:85vh}
  .card-nav-top{padding:.5rem .5rem .5rem .85rem}
  .logo-container{position:static;transform:none;order:1;margin-right:auto;margin-left:.6rem}
  .hamburger-menu{order:0}
  /* the original hides the CTA here; we keep it — it is the site's only action */
  .card-nav-cta-button{order:2;font-size:13px;padding:0 .85rem;height:38px}
  .card-nav.open .card-nav-content{flex-direction:column;align-items:stretch;gap:8px;max-height:70vh;overflow-y:auto}

  .nav-card{min-height:0;padding:12px 14px}
  .nav-card-label{font-size:17px}
  .nav-card-link{font-size:14px}
}
@media (max-width:400px){
  .card-nav-cta-button{font-size:12px;padding:0 .7rem}
  .logo-container .logo{height:26px}
}

/* ───────────────────────── RotatingText ───────────────────────── */
.rotate-wrap{
  display:inline-flex;align-items:center;vertical-align:baseline;
  background:var(--coral,#E0505C);color:#fff;border-radius:.5rem;
  padding:.05em .38em;overflow:hidden;position:relative}
.rotate-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rotate-line{display:inline-flex;overflow:hidden;padding-bottom:.06em}
.rotate-ch{
  display:inline-block;transform:translateY(110%);opacity:0;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s linear}
.rotate-ch.in{transform:none;opacity:1}
.rotate-ch.out{transform:translateY(-120%);opacity:0;
  transition:transform .38s cubic-bezier(.6,0,.8,.2),opacity .3s linear}
.rotate-sp{white-space:pre}
@media (prefers-reduced-motion:reduce){
  .rotate-ch,.rotate-ch.in,.rotate-ch.out{transition:none;transform:none;opacity:1}
}

/* hero headline hosting the rotating pill */
.hero h1 .rotate-wrap{font-size:.92em;transform:translateY(.06em);margin:0 .06em}
@media (max-width:520px){.hero h1 .rotate-wrap{font-size:.88em}}

/* The rotating word is a different width each cycle, so the headline rewraps
   and the whole hero shifts every few seconds. Reserve the tallest line count
   the word list can produce, in lh units so it tracks the fluid type scale.
   Browsers without lh simply keep the old (jumpy) behaviour.                 */
.hero h1:has(.rotate-wrap){min-height:3.2lh}
@media (max-width:520px){.hero h1:has(.rotate-wrap){min-height:4.2lh}}

/* footer legal links, beside the statutory company disclosure */
.base .legal{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.base .legal a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.base .legal a:hover{color:var(--coral,#E0505C);border-bottom-color:currentColor}
.base .legal i{font-style:normal;opacity:.5}

/* ─────────────────────────── Thoughts posts ─────────────────────────── */
.byline{font-family:var(--mono,monospace);font-size:12px;color:var(--txt-3,#8B8F97);
  margin-top:1rem;letter-spacing:.02em}
.hero .byline{color:#9A9EA6}
/* the lead paragraph an answer engine is most likely to lift */
.answer{
  border-left:3px solid var(--coral,#E0505C);background:var(--coral-t,#FDEDEE);
  padding:1rem 1.15rem;border-radius:0 .5rem .5rem 0;
  font-size:16px;line-height:1.6;max-width:64ch;margin-bottom:clamp(1.4rem,3vw,2rem)}
.answer b{font-weight:700}
.prose h2{margin-top:clamp(1.8rem,3.5vw,2.6rem);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);
  letter-spacing:-.02em}
.prose h2:first-child{margin-top:0}

/* ────────────── Detector event display (/about/ experience) ────────────── */
.exp-split{
  display:grid;grid-template-columns:1fr minmax(260px,400px);
  gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.exp-split .prose{min-width:0}
/* no panel, no border — the canvas paints the page's own white, so the
   tracks read as drawn straight onto the section */
#pp-viz{
  margin:0;position:sticky;top:132px;
  aspect-ratio:1;width:100%;overflow:hidden}
#pp-viz canvas{display:block;width:100%;height:100%}
@media (max-width:900px){
  .exp-split{grid-template-columns:1fr}
  #pp-viz{position:static;max-width:420px;margin-inline:auto}
}

/* ─────────────────────── Calendly scheduler ─────────────────────────
   Plain iframe rather than Calendly's widget.js: the site ships no
   third-party JS, and the only thing the script buys us is auto-resize,
   which a generous fixed height covers.                                 */
.cal{
  border:1px solid var(--grid,#E2E2E6);border-radius:var(--r-lg,1rem);
  overflow:hidden;background:#fff;margin-top:clamp(1.2rem,2.5vw,1.8rem)}
.cal iframe{display:block;width:100%;border:0;height:clamp(700px,80vh,960px)}
@media (max-width:640px){.cal iframe{height:clamp(760px,88vh,1020px)}}

/* ──────────────── Assistant prompt chips (offer page) ──────────────── */
.ask-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1.1rem}
.ask-chips-lab{font:500 11px/1 var(--mono,ui-monospace);letter-spacing:.08em;
  text-transform:uppercase;color:var(--txt-3,#8B8F97);margin-right:.2rem}
.ask-chips button{
  font:inherit;font-size:13.5px;color:var(--txt,#18181B);background:var(--paper,#fff);
  border:1px solid var(--grid,#E2E2E6);border-radius:999px;padding:.5rem .95rem;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.ask-chips button:hover{border-color:var(--coral,#E0505C);color:var(--coral,#E0505C)}
.ask-chips button:focus-visible{outline:2px solid var(--coral,#E0505C);outline-offset:2px}
@media (max-width:560px){
  .ask-chips-lab{width:100%;margin-bottom:.15rem}
  .ask-chips button{font-size:13px;padding:.45rem .8rem}
}

/* ─────────────────── Case cards (tilt + glow) ─────────────────── */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.4rem;margin-top:clamp(1.8rem,4vw,2.6rem)}
/* equal-height cards, so the logo plates and the KPI rows line up across
   the row instead of leaving ragged bottoms */
.cs-card-wrap{position:relative;perspective:600px;touch-action:none;display:flex}
.cs-behind{
  position:absolute;inset:6%;z-index:0;pointer-events:none;border-radius:1.4rem;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%),
    var(--glow,rgba(224,80,92,.55)) 0%,transparent 62%);
  filter:blur(34px) saturate(1.1);opacity:0;transition:opacity .35s ease}
.cs-card-wrap:hover .cs-behind,.cs-card-wrap:focus-within .cs-behind{opacity:.85}

.cs-card{
  position:relative;z-index:1;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--ink-line,#2E2E34);border-radius:1.1rem;overflow:hidden;
  background:var(--ink,#141416);color:#fff;padding:0;
  display:flex;flex-direction:column;font:inherit;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .3s}
.cs-card-wrap.active .cs-card{transition:transform .08s linear}
.cs-card:hover{border-color:#4A4A52}
.cs-card:focus-visible{outline:2px solid var(--coral,#E0505C);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .cs-card{transform:none!important;transition:none}
}
.cs-shine{
  position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(farthest-corner circle at var(--px,50%) var(--py,50%),
    rgba(255,255,255,.16) 8%,rgba(224,80,92,.10) 34%,transparent 70%);
  mix-blend-mode:screen;transition:opacity .35s ease}
.cs-card-wrap:hover .cs-shine,.cs-card-wrap:focus-within .cs-shine{opacity:1}

/* Logo plate. The cards are ink-dark and the awaybase wordmark is near-black,
   so the logo sits on a light plate rather than being recoloured. Every card
   gets one, including the anonymised build, or the grid rows go ragged.      */
.cs-logo{
  position:relative;z-index:3;display:grid;place-items:center;
  height:104px;padding:1rem 1.4rem;
  background:linear-gradient(170deg,#FFF 0%,#F1F2F4 100%);
  border-bottom:1px solid var(--ink-line,#2E2E34);overflow:hidden}
/* picture is inline and shrink-wraps, so a % max-width on the img would
   resolve against the image's own width rather than the plate. Size the
   picture to the plate and keep the img in relative units of that.        */
.cs-logo picture{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%}
.cs-logo img{
  max-width:100%;max-height:58px;width:auto;height:auto;
  object-fit:contain;display:block;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cs-card-wrap:hover .cs-logo img,
.cs-card-wrap:focus-within .cs-logo img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){.cs-logo img{transition:none;transform:none!important}}
/* anonymised client: same plate, no mark to show */
.cs-logo--anon{background:linear-gradient(170deg,#F7F8F9 0%,#E9EAEE 100%)}
.cs-logo--anon span{
  font-family:var(--mono,monospace);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:#8B8F97}

.cs-body{position:relative;z-index:3;padding:1.5rem 1.5rem 1.4rem;
  display:flex;flex-direction:column;gap:.75rem;min-height:270px;flex:1}
.cs-logo{flex:none}
.cs-tag{font-family:var(--mono,monospace);font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--coral-l,#F3A0A8)}
.cs-card h3{font-size:1.18rem;letter-spacing:-.025em;color:#fff;line-height:1.2}
.cs-card p{font-size:14px;color:#A9ADB5;line-height:1.55}
.cs-kpi{margin-top:auto;padding-top:1rem;border-top:1px solid var(--ink-line,#2E2E34);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.cs-kpi .v{font-family:var(--mono,monospace);font-size:1.9rem;font-weight:700;
  letter-spacing:-.05em;line-height:1;color:#fff}
.cs-kpi .v s{text-decoration:none;color:var(--coral,#E0505C)}
.cs-kpi .k{font-size:11.5px;color:#8B8F97;text-align:right;max-width:14ch;line-height:1.35}
.cs-more{font-size:12.5px;font-weight:700;color:var(--coral-l,#F3A0A8);
  display:inline-flex;align-items:center;gap:.35em;margin-top:.2rem}
.cs-card-wrap:hover .cs-more i{transform:translateX(3px)}
.cs-more i{font-style:normal;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.cs-status{position:absolute;top:1rem;right:1rem;z-index:4;font-family:var(--mono,monospace);
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .5rem;border-radius:4px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);color:#C9CDD4}
.cs-status.live{background:rgba(15,122,70,.2);border-color:rgba(15,122,70,.5);color:#7FE0AC}

/* ──────────────────────── Case-study modal ──────────────────────── */
.cs-modal{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  padding:clamp(.75rem,3vw,2rem);opacity:0;pointer-events:none;transition:opacity .3s ease}
.cs-modal.open{opacity:1;pointer-events:auto}
.cs-modal-back{position:absolute;inset:0;background:rgba(10,10,12,.72);backdrop-filter:blur(6px)}
.cs-modal-panel{
  position:relative;background:var(--paper,#fff);color:var(--txt,#18181B);
  border-radius:1rem;max-width:720px;width:100%;max-height:86vh;overflow-y:auto;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55);
  transform:translateY(18px) scale(.98);
  transition:transform .34s cubic-bezier(.16,1,.3,1)}
.cs-modal.open .cs-modal-panel{transform:none}
@media (prefers-reduced-motion:reduce){
  .cs-modal,.cs-modal-panel{transition:none}
}
.cs-modal-head{background:var(--ink,#141416);color:#fff;padding:1.6rem 1.8rem 1.4rem;
  position:sticky;top:0;z-index:2}
.cs-modal-head .cs-tag{margin-bottom:.5rem;display:block}
.cs-modal-head h2{font-size:clamp(1.25rem,1rem + 1.2vw,1.7rem);color:#fff;letter-spacing:-.03em}
.cs-modal-close{position:absolute;top:1rem;right:1rem;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;
  cursor:pointer;font-size:18px;line-height:1;display:grid;place-items:center;transition:.2s}
.cs-modal-close:hover{background:rgba(255,255,255,.16)}
.cs-modal-body{padding:1.6rem 1.8rem 1.9rem}
.cs-modal-body h3{font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  font-family:var(--mono,monospace);color:var(--txt-2,#5C5F66);margin:1.6rem 0 .6rem}
.cs-modal-body h3:first-child{margin-top:0}
.cs-modal-body p{font-size:15px;color:var(--txt-2,#5C5F66);line-height:1.65;margin-bottom:.8rem}
.cs-modal-body p strong{color:var(--txt,#18181B)}
.cs-modal-body ul{margin:0 0 .9rem;padding-left:1.15rem;font-size:15px;color:var(--txt-2,#5C5F66)}
.cs-modal-body li{margin-bottom:.45rem}
.cs-modal-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:var(--grid,#E2E2E6);border:1px solid var(--grid,#E2E2E6);
  border-radius:var(--r,6px);overflow:hidden;margin:1.2rem 0}
.cs-modal-stats div{background:var(--paper,#fff);padding:.9rem 1rem}
.cs-modal-stats .v{font-family:var(--mono,monospace);font-size:1.35rem;font-weight:700;letter-spacing:-.04em}
.cs-modal-stats .v s{text-decoration:none;color:var(--coral,#E0505C)}
.cs-modal-stats .k{font-size:11.5px;color:var(--txt-2,#5C5F66);margin-top:.35rem;line-height:1.4}
.cs-modal-foot{border-top:1px solid var(--grid,#E2E2E6);padding-top:1.3rem;margin-top:1.6rem;
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.cs-modal-note{font-size:12.5px;color:var(--txt-3,#8B8F97);line-height:1.5;margin-top:1rem}
body.cs-locked{overflow:hidden}