/* ABATA liquid glass skin — v2.46
   A pure override layer, loaded AFTER every other stylesheet. Removing this
   one file restores the previous look; nothing else references it.

   The recipe everywhere: translucent gradient fill, heavy backdrop blur with
   a saturation lift, a hairline light border, a specular top edge, and a
   deep soft shadow. Ambient colour blobs behind the page give the blur
   something to refract, otherwise glass over near-black reads as grey. */

/* This stylesheet loads LAST: its arrival is the signal that the page is
   fully styled, so it is the one that reveals the body (see ab-critical). */
body{visibility:visible !important}

/* ---------- ambient light the glass refracts ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 34% at 12% 8%,  rgba(255,255,255,.04), transparent 70%),
    radial-gradient(38% 30% at 88% 18%, rgba(180,180,180,.03), transparent 70%),
    radial-gradient(46% 38% at 70% 92%, rgba(255,255,255,.03), transparent 70%),
    radial-gradient(30% 26% at 25% 75%, rgba(200,200,200,.02), transparent 70%);
}
body>*{position:relative;z-index:1}

/* ---------- shadcn/ui token layer (house system, dark theme) ----------
   Non-React site, so we adopt the tokens + component recipes: neutral
   background/foreground pairs, ONE primary, a shared radius, 1px
   low-contrast borders, and visible focus rings everywhere. */
:root{
  --background:#060909;
  --foreground:#eafff7;
  --muted:#101614;
  --muted-foreground:#9fb8ae;
  --primary:#ffffff;
  --primary-foreground:#060909;
  --border:rgba(255,255,255,.12);
  --ring:rgba(255,255,255,.45);
  --radius:0.75rem;
}

/* ---------------------------------------------------------------------------
   No pink. Anywhere.

   The theme ships a generic reset:

     [type="button"]:focus, [type="button"]:hover, [type="submit"]:focus,
     [type="submit"]:hover, button:focus, button:hover
       { background-color:#CC3366; color:#fff }

   It targets the bare `button` element, so it hit all 34 controls we own —
   every catalogue chip, industry tab, comparison chip, the four step keys,
   the brief's Send and sound toggle, the command-bar keys and the header
   search — turning each one magenta on hover. It fires on :focus too, so a
   keyboard user got it without ever pointing at anything.

   Neutralised at the source rather than by repainting each control: one rule
   that hands background and colour back to `inherit`, so whatever each
   component already defines for itself wins. Our own hover and is-on states
   are defined in abata-home.css and further down this file and are unaffected
   — they set their own background, which beats `inherit` on specificity.

   Scoped to our own chrome and page roots so a genuine Elementor form button
   inside third-party markup keeps the theme's styling. */
.ah button:hover, .ah button:focus,
.al button:hover, .al button:focus,
.as button:hover, .as button:focus,
.ab-header button:hover, .ab-header button:focus,
.ab-cmd button:hover, .ab-cmd button:focus,
.ah [type="button"]:hover, .ah [type="button"]:focus,
.ah [type="submit"]:hover, .ah [type="submit"]:focus,
.al [type="button"]:hover, .al [type="button"]:focus,
.al [type="submit"]:hover, .al [type="submit"]:focus,
.as [type="button"]:hover, .as [type="button"]:focus,
.as [type="submit"]:hover, .as [type="submit"]:focus{
  background-color:inherit;
  color:inherit;
}
/* `inherit` above strips the theme's magenta but also drops the faint fill
   each control carries at rest, so a hovered chip briefly went transparent
   against the page. These put the component's own hover back, one line each,
   after the reset rather than fighting it. */
.ah-step__key:hover{background:rgba(255,255,255,.05)}
.ah-step__key.is-on:hover{background:rgba(255,255,255,.08)}
.ah-chip:hover{background:rgba(255,255,255,.07)}
.ah-chip.is-on:hover{background:#fff;color:#08080C}

/* shadcn focus-visible ring on every interactive element we own */
.ah-opt:focus-visible,.ah-ctl:focus-visible,.ab-nav__link:focus-visible,
.ab-cta:focus-visible,.ab-burger:focus-visible,.ah-brief__form input:focus-visible,
.ah-brief__form button:focus-visible,
.ab-h3rail__cat:focus-visible{
  outline:2px solid var(--ring) !important;outline-offset:2px !important;
}

/* shadcn input recipe: 40px, 1px border, ring on focus */
/* Scoped to the three contact fields only. It used to be `.ah-brief__form
   input`, which also caught #ah-brief-in — and that one now sits INSIDE the
   box, so giving it its own border and fill drew a box within a box. */
.ah-brief__who input{
  height:40px !important;border:1px solid var(--border) !important;
  border-radius:calc(var(--radius) - 2px) !important;
  background:var(--muted) !important;color:var(--foreground) !important;
}
.ah-brief__who input:focus{border-color:var(--ring) !important;box-shadow:0 0 0 3px rgba(255,255,255,.12) !important}

:root{
  --glass-fill:linear-gradient(135deg,rgba(255,255,255,.085),rgba(255,255,255,.028) 42%,rgba(255,255,255,.055));
  --glass-line:rgba(255,255,255,.14);
  --glass-edge:inset 0 1px 0 rgba(255,255,255,.16);
  --glass-shadow:0 22px 60px rgba(0,0,0,.5);

  /* Lifted glass — for surfaces that FLOAT over the page (the command bar and
     its panel). On a near-black ground the blur has nothing to refract, so the
     read comes from the edges: a bright specular top, a dim bottom bounce, a
     dark seat that cuts it from the page, and elevation.
     Use these instead of hand-writing the recipe again. */
  --glass-lift-fill:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 38%,
                                    rgba(255,255,255,.02) 64%,rgba(255,255,255,.075)),
                    rgba(19,23,22,.72);
  --glass-lift-line:rgba(255,255,255,.17);
  --glass-lift-edge:inset 0 1px 0 rgba(255,255,255,.34),
                    inset 0 -1px 0 rgba(255,255,255,.07),
                    0 1px 0 rgba(0,0,0,.55);
  --glass-lift-drop:0 20px 54px rgba(0,0,0,.7);
  --glass-blur:blur(26px) saturate(180%);

  /* ---------- ONE BUTTON SYSTEM ----------
     Every tappable surface on the site — command-bar keys, panel results,
     brief options, chips, CTAs — reads from these. Change a button anywhere
     by changing it HERE, once. Do not write a new background/border/radius
     set for a new control; point it at these instead. */
  --btn-radius:999px;          /* the site speaks in pills */
  --btn-min-h:44px;            /* the touch-target floor */
  --btn-bg:rgba(255,255,255,.04);
  --btn-line:rgba(255,255,255,.10);
  --btn-ink:#D4D4D8;
  --btn-bg-hover:rgba(255,255,255,.09);
  --btn-line-hover:rgba(255,255,255,.20);
  --btn-ink-hover:#ffffff;
  /* the one filled variant: a white pill with dark text */
  --btn-solid-bg:#ffffff;
  --btn-solid-ink:#050505;

  /* ---------- PORTRAIT BUDGET ----------
     ONE set, because there is now one layout: a single centred column with
     the portrait above the brief. Nothing else competes for the height —
     the headline row is gone — so the reserve only has to cover the wrap's
     padding, the card and the gap between them. The second set that used
     to kick in at 981 is deleted, not overridden. */
  --hero-face-vh:62vh;
  --hero-face-max:700px;
  /* The G3 command bar is position:fixed, so it sits OUTSIDE the hero's flow
     and no overflow check can see it — it was quietly covering the bottom
     74px of the brief card at 1080 and 43px at 375. This is the floor it
     occupies, and BOTH the wrap's bottom padding and the portrait's height
     budget subtract it, so the two can never disagree about how much room
     is really left. Zero on desktop, where there is no bar. */
  --cmd-clear:0px;
  /* Phone keyboard height, published by abata-brief.js from visualViewport.
     0 whenever no keyboard is up, which is every desktop, so every budget
     below can subtract it unconditionally. */
  --kbd:0px;
  /* The portrait's smallest allowed height. It is a variable because the
     keyboard case genuinely needs a smaller one: with ~432px of screen left
     there is no room for a 300px face AND the conversation under it. */
  --face-floor:300px;
  /* Measured, not guessed: at 1440x900 the column came to 925px against a
     900px hero, so the reserve was 25px light. 372 = padding 2x63, the
     27px gap and the ~200px card, with a little margin. */
  --hero-reserve:372px;
}
/* The command bar used to sit flush to the bottom edge at 1080 and down, and
   this reserved the floor it occupied. It is parked (see the block further
   down), so nothing stands on the bottom edge at any width and the hero gets
   that space back — which is why the portrait can now run larger on a phone
   than it could before. The variable stays because the bar comes back. */

/* Keyboard up. Roughly half the screen is gone, so something has to give:
   it is the portrait, never the conversation. The visitor has to be able to
   watch the face speak while they type — that is the entire point of it —
   but they cannot type into a field they cannot see, so the field, the line
   and the controls all keep their size and the face takes the cut. */
/* --hero-reserve is everything in the hero that is NOT the portrait. The
   372 is a desktop figure: it counts a headline and a card and generous
   padding. With a keyboard up the hero is only the controls (32), the line
   (~72), the field (48), the gaps and the trimmed padding below — about 280.
   Setting the real number here lets the calc() govern and hands the spare
   room back to the face, instead of the floor doing all the work. */
body.is-kbd{--face-floor:110px;--hero-reserve:280px}
/* Step 5 stacks three contact fields where there was one, growing the card by
   about 140px. --hero-reserve did not know that, so the portrait kept its full
   budget and pushed the Send button off the bottom — measured 51px below the
   fold on a 375x812 phone, at the exact moment the visitor is trying to finish.
   Same lever as the keyboard case, one line: 372 + 140. It is self-limiting —
   on a tall viewport the min() picks --hero-face-vh instead, so nothing moves
   on desktop. */
body:has(.ah-brief.is-contact){--hero-reserve:512px}
body.is-kbd .ah-hero__wrap--new{
  padding-top:clamp(40px,5vh,60px) !important;
  padding-bottom:8px !important;
  gap:10px !important;
}
/* Two-column layout: the portrait sits BESIDE the card, so it competes only
   with the headline and the padding — it can be much larger. One variable set
   per layout; the cap expression itself never changes. */


/* One definition for every floating glass surface — header logo, desktop nav
   pill, the dropdowns, the command bar and its panel. They are one material at
   every width. Add a selector here rather than repeating the four properties
   somewhere new. */
.ab-cmd__bar,.ab-cmd__panel,.ab-nav{
  background:var(--glass-lift-fill);
  border:1px solid var(--glass-lift-line);
  box-shadow:var(--glass-lift-edge),var(--glass-lift-drop);
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
}
/* The square mark keeps the dark disc set in abata-chrome.css — the header
   pill is transparent, so without it page content scrolls straight through
   the logo. Only the footer's wide wordmark goes bare: a pill behind a long
   logo reads as a button rather than a mark. */
.ab-logo--word{padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
/* The footer name logo. It is the artwork itself, not a mark sitting on a
   surface, so it carries no pill: the glass treatment above and the padding
   here are both scoped away from it. Height is the anchor — the file is
   300x44, so the width follows from the aspect ratio. */
.ab-logo--word{padding:0;border:0;background:none;box-shadow:none}
.ab-logo__word-img{display:block;height:26px;width:auto}
/* the header wrapper stays a bare container: the logo, nav and CTA each carry
   their own surface, so an outline here would be a fourth competing edge */
.ab-header__inner{border:0 !important}

/* ---------- header: H3 — logo left, segmented tab pill centre, emerald CTA.
   The outer bar goes transparent; the NAV is the pill. ---------- */
.ab-header{padding:16px 24px 0 !important}
.ab-header__inner{
  background:none !important;border-color:transparent !important;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  /* 8px left held the logo disc hard against the header's edge. 14px gives
     it room without moving the nav, which is centred independently. */
  padding:6px 8px 6px 14px !important;
}
/* surface comes from the shared rule above; this is spacing only */
.ab-nav{
  gap:4px !important;margin-left:auto;margin-right:auto !important;
  border-radius:999px;padding:5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 34px rgba(0,0,0,.35);
}
.ab-nav__link{border-radius:999px !important;padding:8px 16px !important;font-size:12.5px !important}
.ab-nav__link:hover,.ab-nav__item.is-open>.ab-nav__link{background:rgba(255,255,255,.1) !important;color:#fff !important}
.ab-header .ab-cta{background:#ffffff !important;color:#060909 !important;font-weight:700 !important}
/* The nav pill used to take its dark surface ONLY from --scrolled, which
   assumed the page behind it is always dark. On a white page at scroll 0 the
   pill had no background at all and its grey labels sat at roughly 1.5:1
   against white — measured the header as rgba(0,0,0,0) with no backdrop
   filter and links at rgb(138,138,147). The nav simply disappeared.

   The pill now carries its own surface at every scroll position, so the
   header is legible on any background rather than borrowing contrast from
   one. --scrolled still deepens it, which keeps the original intent: the bar
   settling as you move down the page.

   The mobile command bar already solved this the other way, by sampling what
   is behind it and inverting (see is-on-light in abata-chrome.js). That works
   for a small pill over a known page; a full nav needs the simpler guarantee. */
.ab-nav{
  background:linear-gradient(135deg,rgba(20,24,22,.82),rgba(10,12,11,.74));
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
}
.ab-header--scrolled .ab-nav{background:linear-gradient(135deg,rgba(20,24,22,.94),rgba(10,12,11,.9))}

/* The logo's disc is gone: the header shows the uploaded artwork alone, so
   there is no plate here to blur or outline. Sizing lives with the rest of
   .ab-logo__img in abata-chrome.css. */

/* The CTA is already white-on-dark text, which reads on any backdrop, but on
   a white page a white button needs an edge to separate it from the page. */
.ab-header .ab-cta{border:1px solid rgba(0,0,0,.14) !important}

/* ---------- H3 mega: category rail left, links right (rail built by JS) ---------- */
.ab-mega__grid--h3{grid-template-columns:240px minmax(0,1fr) !important;gap:14px !important;padding:14px !important;width:820px}
.ab-h3rail{display:flex;flex-direction:column;gap:4px;border-right:1px solid rgba(255,255,255,.08);padding-right:12px}
.ab-h3rail__cat{display:flex;justify-content:space-between;align-items:center;gap:10px;background:none;border:none;cursor:pointer;
  font:600 13px var(--ab-body);color:#fff;padding:12px 14px;border-radius:10px;text-align:left;transition:background .15s}
.ab-h3rail__cat i{font-style:normal;font-size:12px;color:rgba(255,255,255,.35)}
/* Focus needs no guard here: abata-chrome.css refuses the theme's pink for
   every button in one place. This is just the rail's own look. */
.ab-h3rail__cat:hover{background:rgba(255,255,255,.06)}
.ab-h3rail__cat.is-active{background:#ffffff;color:#060909}
.ab-h3rail__cat.is-active i{color:#060909}
.ab-mega__grid--h3 .ab-mega__col{display:none}
.ab-mega__grid--h3 .ab-mega__col.is-active{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;align-content:start;padding:0 !important}
.ab-mega__grid--h3 .ab-mega__col .ab-mega__head{display:none !important}
.ab-mega__grid--h3 .ab-mega__col>a:not(.ab-mega__head){
  display:flex !important;align-items:center;
  padding:13px 14px !important;border-radius:10px !important;margin:0 !important;
  background:rgba(255,255,255,.03) !important;border:1px solid rgba(255,255,255,.07);
  font-size:13px !important;font-weight:600;color:#fff !important;line-height:1.35 !important;
}
.ab-mega__grid--h3 .ab-mega__col>a:not(.ab-mega__head):hover{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.3)}
@media (max-width:1220px){
  .ab-mega__grid--h3{width:min(720px,92vw)}
  .ab-nav__item--mega .ab-mega{width:auto}
}

/* The drawer's accordion rules were here; the drawer and its JS builder are
   both gone. */
/* THE definition for both dropdowns. Same lifted glass as the command bar, so
   the header, its menus and the bar are one material. Nothing else should set
   these four properties on .ab-mega. */
.ab-mega{
  background:var(--glass-lift-fill) !important;
  border:1px solid var(--glass-lift-line) !important;
  box-shadow:var(--glass-lift-edge),var(--glass-lift-drop) !important;
  backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
}
.ab-mega__foot{background:rgba(255,255,255,.04) !important;border-top-color:rgba(255,255,255,.08) !important}
/* The drawer's own glass treatment was here — a compact card under the
   header. Removed with the drawer; the command panel has its own. */

/* the burger caught the theme's red button background too */
.ab-burger{background:none !important;box-shadow:none !important}
.ab-burger:hover,.ab-burger:focus,.ab-burger[aria-expanded="true"]{background:rgba(255,255,255,.06) !important}

/* ---------- hero: the brief panel, options, controls ---------- */
/* The glass skin moved from the wrapper to the input row when the panel was
   removed: the box is the only bordered thing in the hero now. Kept here
   rather than duplicated in abata-home.css so the glass language still has a
   single home. */
.ah-brief__field{
  border-radius:14px !important;
  background:linear-gradient(140deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 38%,rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),var(--glass-shadow);
}
.ah-brief.is-contact .ah-brief__field{
  background:none !important;border:0 !important;box-shadow:none !important;
}
.ah-opt{
  border-radius:999px !important;      /* Apple-style pill buttons */
  padding:12px 18px !important;
  background:var(--glass-fill) !important;
  border:1px solid var(--glass-line) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.ah-opt:hover{border-color:rgba(255,255,255,.45) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 24px rgba(255,255,255,.06)}

/* ---------- home cards ---------- */
.ah-trap-card,.ah-diff-card,.ah-why__card,.ah-card{
  background:var(--glass-fill) !important;
  border:1px solid var(--glass-line) !important;
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:var(--glass-edge),0 16px 44px rgba(0,0,0,.4);
}
.ah-trap-card:hover,.ah-diff-card:hover,.ah-why__card:hover{
  border-color:rgba(255,255,255,.3) !important;
}

/* ---------- landing pages ---------- */
.al-vcase-card,.al-vstage-card,.al-price-card,.al-phone-card{
  background:var(--glass-fill) !important;
  border:1px solid var(--glass-line) !important;
  backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:var(--glass-edge),0 16px 44px rgba(0,0,0,.4);
}

/* ---------- footer ---------- */
.ab-footer{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015)) !important;
  border-top:1px solid rgba(255,255,255,.1) !important;
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
}

/* ---------- Topee-style dropdown menus ---------- */
.ab-mega{
  border-radius:20px !important;
  /* shadow lives on the single .ab-mega definition above */
  transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1),visibility .22s !important;
}
.ab-mega__head{
  display:flex !important;align-items:center;justify-content:space-between;
  font-size:13px !important;font-weight:600;letter-spacing:-.01em;
  padding:8px 10px !important;border-radius:10px !important;
}
.ab-mega__head::after{
  content:"\2192";font-size:12px;color:rgba(255,255,255,.6);
  opacity:0;transform:translateX(-4px);transition:opacity .18s,transform .18s;
}
.ab-mega__head:hover::after{opacity:1;transform:translateX(0);color:#ffffff}
.ab-mega__col>a:not(.ab-mega__head){
  font-size:12px !important;line-height:1.45 !important;
  color:rgba(255,255,255,.55) !important;
  padding:7px 10px !important;border-radius:8px !important;
}
.ab-mega__col>a:not(.ab-mega__head):hover{color:#fff !important;background:rgba(255,255,255,.06) !important}
.ab-mega__cell{border-radius:12px !important}
.ab-mega__cell b{font-size:13px !important;letter-spacing:-.01em}
.ab-mega__cell span{font-size:12px !important;line-height:1.45 !important;color:rgba(255,255,255,.55) !important}
.ab-mega__foot a{
  font-size:11.5px !important;font-weight:600 !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;transition:color .18s,transform .18s !important;display:inline-block;
}
.ab-mega__foot a:hover{color:#ffffff !important;transform:translateX(3px)}
.ab-mega__foot span{font-size:12px !important;line-height:1.5 !important;color:rgba(255,255,255,.5) !important}

/* The quick-dial block (ported from the Topee header) stood here: 13 rules
   styling a floating contact disc whose markup was hardcoded hidden. Removed
   with that markup and its handler in abata-chrome.js. Note the last rule was
   `@media (max-width:1080px){.ab-qd{display:flex}}` — CSS trying to show an
   element that an inline `style="display:none"` was always going to win
   against, which is the clearest sign it had been dead a while. */

/* ---------- breathing room: the story sections were too dense ---------- */
:root{
  --ab-section-y:clamp(140px,11vw,220px);
  --ab-head-gap:clamp(72px,7vw,120px);
  --ab-block-gap:clamp(24px,3vw,36px);
}
.ah-story-sub{max-width:520px !important}
.ah-trap-card p,.ah-diff-card p,.ah-why__card p{line-height:1.7 !important;color:var(--muted-foreground) !important}

/* ---------- ReactBits: Spotlight Card (vanilla) ---------- */
.rb-spot{position:relative;overflow:hidden}
.rb-spot::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.06),transparent 70%);
}
.rb-spot:hover::before{opacity:1}

/* ---------- ReactBits: Shiny Text on eyebrows and labels ---------- */
.ah-eyebrow,.ah-partners__label{
  background:linear-gradient(120deg,rgba(255,255,255,.45) 40%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.45) 60%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent !important;
  animation:rb-shine 4s linear infinite;
}
@keyframes rb-shine{0%{background-position:180% 0}100%{background-position:-20% 0}}

/* ---------- ReactBits: Aurora — the ambient blobs now drift and breathe ---------- */
body::before{
  animation:rb-aurora 26s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
@keyframes rb-aurora{
  0%{transform:translate3d(0,0,0) scale(1);opacity:1}
  50%{transform:translate3d(-3%,2%,0) scale(1.08);opacity:.85}
  100%{transform:translate3d(3%,-2%,0) scale(1.04);opacity:1}
}

/* ---------- ReactBits: Star Border — a slow light travelling around the
   brief panel's edge (conic gradient on a padded backdrop) ---------- */
.ah-brief{position:relative}
.ah-brief::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from var(--rb-a,0deg),transparent 0 70%,rgba(255,255,255,.7) 82%,rgba(255,255,255,.95) 86%,rgba(255,255,255,.7) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:rb-star 6s linear infinite;
}
@property --rb-a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rb-star{to{--rb-a:360deg}}

/* ---------- ReactBits: Tilted Card + Magnet button (JS drives the vars) ---------- */
.rb-tilt{transform-style:preserve-3d;transition:transform .18s ease-out;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.rb-mag{transition:transform .18s ease-out;transform:translate(var(--tx,0px),var(--ty,0px))}

/* ---------- ReactBits: Decrypted Text runs on .ah-big via JS ---------- */
.rb-decrypt-char{color:#ffffff}

/* ---------- ReactBits: Blur Text reveal on section headings ---------- */
.rb-blur{opacity:0;filter:blur(10px);transform:translateY(14px);
  transition:opacity .9s ease,filter .9s ease,transform .9s ease}
.rb-blur.rb-in{opacity:1;filter:blur(0);transform:none}
@media (prefers-reduced-motion: reduce){
  .rb-blur{opacity:1;filter:none;transform:none;transition:none}
  .ah-eyebrow,.ah-act-badge,.ah-partners__label{animation:none}
}

/* ---------- every page, every device: the same glass system ---------- */
.al-frame,.al-pricing__banner,.al-tech__item,.ah-p2s__row{
  background:var(--glass-fill) !important;border:1px solid var(--glass-line) !important;
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--glass-edge),0 14px 40px rgba(0,0,0,.35);
}
.al-pill:not(.is-active){background:var(--glass-fill) !important;border:1px solid var(--glass-line) !important}
.al-field input,.al-field textarea{
  background:var(--muted) !important;border:1px solid var(--border) !important;
  border-radius:calc(var(--radius) - 2px) !important;color:var(--foreground) !important;
}
.al-field input:focus,.al-field textarea:focus{
  border-color:var(--ring) !important;box-shadow:0 0 0 3px rgba(255,255,255,.1) !important;outline:none;
}
.ah-origin__quote{background:rgba(255,255,255,.04) !important;border-left:3px solid rgba(255,255,255,.3) !important}
.ah-partners{background:transparent !important}

/* ---------- visual-first rebuild: pictogram traps, number band, icon whys ---------- */
.ah-trap-card{text-align:center;align-items:center}
.ah-trap-viz{width:150px;height:100px;margin:6px auto 18px;color:#ffffff;opacity:.7}
.ah-trap-viz svg{width:100%;height:100%}
.ah-trap-viz .tv-line{stroke:#f0716b;opacity:.8}
.ah-trap-viz .tv-x{stroke:#f0716b}
.ah-trap-card h3{font-size:clamp(20px,2vw,26px) !important;margin:14px 0 18px !important}
.ah-trap-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.ah-trap-stat{font-size:12px;color:#9fb8ae;border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.03)}
.ah-trap-stat b{color:#eafff7;font-size:14px;margin-right:4px}

.ah-numbers{
  max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));gap:var(--ab-block-gap);
}
.ah-num{
  text-align:center;padding:36px 16px;border-radius:20px;
  background:var(--glass-fill);border:1px solid var(--glass-line);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--glass-edge),0 14px 40px rgba(0,0,0,.35);
}
.ah-num__val{font:700 clamp(40px,4.6vw,64px)/1 var(--ab-head);color:#ffffff}
.ah-num__val span{font-size:.4em;color:#9fb8ae;margin-left:4px}
.ah-num__label{margin-top:10px;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#9fb8ae}
@media (max-width:768px){.ah-numbers{grid-template-columns:repeat(2, minmax(0, 1fr))}}

.ah-origin__quote--solo .ah-origin__sign{white-space:normal;letter-spacing:.04em;font-size:11px}
.ah-origin__quote--solo{max-width:640px;margin:56px auto 0;text-align:center;overflow:hidden;
  border-left:none !important;border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;font-size:17px !important}

.ah-why__grid .ah-why__card{text-align:center}
.ah-why__ico{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;
  border-radius:14px;color:#ffffff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.ah-why__ico svg{width:26px;height:26px}
.ah-why__card h3{margin:0 !important}

/* ---------- landing polish pass ---------- */
/* Let the aurora show through: story sections drop their solid backgrounds */
.ah-story-problem,.ah-story-solution,.ah-services,.ah-why,.ah-rail,.ah-final{background:transparent !important}

/* Chapter badges: quiet white chip */
.ah-act-badge{
  background:rgba(255,255,255,.07) !important;color:rgba(255,255,255,.65) !important;
  -webkit-text-fill-color:rgba(255,255,255,.65) !important;animation:none !important;
  border:1px solid rgba(255,255,255,.15) !important;border-radius:999px;padding:5px 12px;
}
.ah-act-title{color:rgba(159,184,174,.7)}

/* Trap cards: neutral chips + muted symptom line — one accent per page */
.ah-trap-card__badge{
  background:rgba(255,255,255,.06) !important;color:#eafff7 !important;
  border:1px solid rgba(255,255,255,.14) !important;border-radius:999px !important;
}
.ah-trap-card__cost b{color:#9fb8ae !important}
.ah-trap-card__cost span{color:#5b6f66 !important}

/* Services cells join the glass system */
.ah-cell{
  background:var(--glass-fill) !important;border:1px solid var(--glass-line) !important;
  border-radius:16px !important;
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--glass-edge),0 14px 40px rgba(0,0,0,.35);
}
.ah-cell:hover{border-color:rgba(255,255,255,.3) !important}

/* Final CTA: more air, and the travelling star border on the button */
.ah-final{padding-top:calc(var(--ab-section-y) * 1.1) !important;padding-bottom:calc(var(--ab-section-y) * 1.1) !important}
.ah-final__btn{position:relative;border-radius:999px}
.ah-final__btn::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--rb-a,0deg),transparent 0 70%,rgba(255,255,255,.7) 82%,rgba(255,255,255,.95) 86%,rgba(255,255,255,.7) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:rb-star 6s linear infinite;pointer-events:none;
}

/* Pedigree bar: one quiet glass strip */
.ah-origin-cin{
  background:var(--glass-fill) !important;border:1px solid var(--glass-line) !important;
  border-radius:999px !important;
}
.ah-cin-meta,.ah-cin-meta span{color:rgba(159,184,174,.75) !important}

/* Mobile: lighter blur — stacked backdrop-filters jank low-end phones */
@media (max-width:768px){
  /* two option pills per row: the 5-button column ate the whole viewport */
  .ah-brief__buttons{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
  .ah-opt{padding:11px 10px !important;font-size:12.5px !important}
  .ah-trap-card,.ah-diff-card,.ah-why__card,.ah-card,.ah-cell,
  .al-vcase-card,.al-vstage-card,.al-price-card,.al-phone-card,.ah-brief{
    backdrop-filter:blur(10px) !important;-webkit-backdrop-filter:blur(10px) !important;
  }
  body::before{animation:none}
}

/* ---------- projects rail: glass fill killed the card contrast — restore ---------- */
.ah-card{
  background:radial-gradient(120% 120% at 20% 0%,#131a16 0%,#0a100c 55%,#070a08 100%) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.12) !important;
}
.ah-card:hover{border-color:rgba(255,255,255,.3) !important}
.ah-card h3{color:#eafff7 !important}
.ah-card p{color:#9fb8ae !important}
.ah-card__num,.ah-card__go{color:#9fb8ae !important}
.ah-card--cta{background:#ffffff !important}
.ah-card--cta h3,.ah-card--cta .ah-card__go{color:#060909 !important}

/* ---------- CHAPTER 03: THE SOLUTION — matrix moved out of the hero ---------- */
.ah-solution-sec{padding:var(--ab-section-y) 6vw;background:transparent !important}
.ah-solution-sec .ah-story-head{margin-bottom:var(--ab-head-gap)}
.ah-solution-slot{max-width:960px;margin:0 auto}
.ah-solution-slot .ah-p2s{width:100%;max-width:none}
@media (max-width:768px){.ah-solution-sec{padding:calc(var(--ab-section-y)*.7) 5vw}}

/* process steps in the numbers band */
.ah-num__step{display:block;font-size:10.5px;letter-spacing:.18em;color:rgba(255,255,255,.5);margin-bottom:12px}

/* ---------- hero rebalance: face is the hero, card is the tool ---------- */
/* Face: large, breathing, dominant */
.ah-hero__wrap--center .ah-face{max-width:min(clamp(380px,42vw,580px),60vh) !important}

/* ---- MONOLITH hero: one centred column, at every width ----------------
   The portrait is the centre of attraction and the brief sits directly
   beneath it. There is no headline row and no second column any more, so
   this is the ONLY grid the hero has: the area maps that used to
   re-describe it at 600 and at 1024 are deleted below rather than left to
   override this one. One layout, one definition. */
.ah-hero__wrap--new{
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  grid-template-areas:"face" "card" !important;
  align-items:center !important;justify-items:center !important;
  align-content:center !important;
  gap:clamp(20px,3vh,40px) !important;
}
.ah-hero__wrap--new .ah-hero__stage{grid-area:face;width:100%}
.ah-hero__brief-col{grid-area:card;display:flex;align-items:center;
  justify-content:center;width:100%;padding-top:0}
/* The headline and the eyebrow no longer live in the hero — the portrait
   carries it. Removed outright, not hidden at one breakpoint. */
.ah-hero__wrap--new .ah-hero__left--bottom{display:none !important}
/* Phones keep the same single column; only the spacing tightens. The old
   block here re-declared the grid and capped the portrait at 26vh — both
   were dead weight once the layout stopped changing per breakpoint, and
   the 26vh caps were already being overridden further down the file. */
@media(max-width:600px){
  .ah-hero__wrap--new{
    padding-top:clamp(88px,11vh,120px) !important;
    padding-bottom:calc(clamp(12px,2vh,28px) + var(--cmd-clear)) !important;
    gap:clamp(14px,2.2vh,24px) !important;
    box-sizing:border-box;
  }
  /* the brief's own copy stays left-aligned — it is a chat, not a headline */
  .ah-hero__wrap--new .ah-brief{text-align:left}
}
@media(min-width:601px) and (max-width:1024px){
  .ah-brief{max-width:100% !important}
}

/* ============================================================
   v2.67 — G3 COMMAND BAR (mobile + tablet, <=1080px)
   One glass pill at the bottom: a search key plus four group keys.
   Built on this file's own --glass-* tokens so it belongs to the
   site rather than sitting on top of it.
   ============================================================ */
.ab-cmd{display:none}
@media(max-width:1080px){
  /* v2.97: the command bar is PARKED while its placement is settled — it did
     not read well sitting under the header. The burger and the full-screen
     drawer it had replaced carry navigation again in the meantime, so no
     viewport is ever left without a way around the site.

     Unparking it is these two lines inverted and nothing else: the bar, its
     panel, its search and its page index are all still here and still styled
     below, and it is already repositioned to the top rather than the bottom.
     The drawer's own rules handle open/closed, so it is simply not forced
     hidden any more. */
  /* The PILL stays parked — it read badly under the header — but the
     container comes back, because the panel lives inside it and a hidden
     parent hides the panel too. The header's search key is the only way in
     now, which is the whole point: one control instead of two. */
  .ab-cmd{display:block !important}
  .ab-cmd__bar{display:none !important}
  /* The header has to sit ABOVE the scrim (.ab-cmd is z-index 10000): the key
     that closes the panel lives up there now, and a control dimmed under a
     scrim and unclickable is worse than no control at all. */
  .ab-header{z-index:10001 !important}
  /* margin-left:auto because the thing that used to push it to the far edge
     was .ab-nav, which is hidden at this width — without it the key sits
     glued to the logo. */
  .ab-navsearch{display:flex !important;margin-left:auto}

  /* z-index above .ah-grain (9998) and .ah-cursor (9999): the nav is the only
     interactive chrome here and decorative overlays must never sit over it.

     v2.97: this rode the bottom edge, which is why the pad below cleared the
     iOS home indicator and the Android gesture bar. It now hangs from the top
     instead, under the header, so the inset that matters is the top one and
     the header's own height is what the bar is pushed past. */
  .ab-cmd{display:block;position:fixed;left:0;right:0;top:0;bottom:auto;z-index:10000;
    pointer-events:none;
    padding-top:calc(74px + max(4px,env(safe-area-inset-top,0px)))}
  .ab-cmd > *{pointer-events:auto}

  /* ---- the bar ---- */
  /* Liquid glass on a near-black page reads through its EDGES, not its blur —
     there is nothing bright behind it to refract. So: a bright specular rim
     along the top, a dimmer bounce along the bottom, a crisp dark seat to cut
     it from the page, and real elevation. The blur still does its job when
     content scrolls underneath. */
  /* layout only — the glass comes from the shared rule at the top of the file */
  .ab-cmd__bar{position:relative;z-index:2;
    width:min(346px,calc(100vw - 28px));height:58px;margin:0 auto;
    display:flex;align-items:center;gap:2px;padding:0 5px;box-sizing:border-box;
    border-radius:999px}
  .ab-cmd__key{flex:1 1 0;height:48px;min-width:0;border:0;border-radius:999px;
    background:transparent;color:#B4B4BC;cursor:pointer;padding:0;
    font:600 11.5px var(--ab-body,'Inter',sans-serif);letter-spacing:.01em;
    display:flex;align-items:center;justify-content:center;
    transition:background-color .22s ease,color .22s ease}
  .ab-cmd__key--search{flex:0 0 auto;width:48px;background:rgba(255,255,255,.06)}

  /* The theme's pink is refused once, for every button, in abata-chrome.css —
     so these only need to say what the bar's own colours are. The twelve-line
     state-by-state guard that used to live here went with it. */
  .ab-cmd__key{background:transparent;color:#B4B4BC}
  .ab-cmd__key--search{background:rgba(255,255,255,.06)}
  .ab-cmd__key.is-on{background:#fff;color:#050505}
  /* keyboard focus still gets a visible ring — only the pink fill is refused */
  .ab-cmd .ab-cmd__key:focus-visible{outline:2px solid var(--ab-accent,#F3B41B);outline-offset:2px}

  /* ---- the panel ---- */
  /* The panel no longer scrolls as a whole — the LIST does. That keeps the
     search field pinned while results move, and stops a row being sliced in
     half at the panel's edge. */
  /* Opens downward now that the bar is at the top, so it drops away from the
     bar instead of rising toward it — and the entry slide flips with it. */
  /* Hangs from just under the header now that the pill it used to sit above
     is parked — 74px of header plus a small gap. */
  /* Hangs from the right, under the key that opens it, rather than spanning
     the screen. Full width pushed every chevron to the far edge with a gap of
     dead space between it and its label, and the panel never needed the room:
     a submenu opens in place, so no row is ever wider than its own text. */
  .ab-cmd__panel{position:fixed;left:auto;right:12px;
    width:min(310px,calc(100vw - 24px));
    top:calc(84px + max(4px,env(safe-area-inset-top,0px)));bottom:auto;z-index:2;
    max-height:calc(100svh - 120px);
    display:flex;flex-direction:column;
    box-sizing:border-box;padding:10px 10px 11px;border-radius:20px;
    opacity:0;transform:translateY(-10px) scale(.985);
    transition:opacity .24s ease,transform .24s cubic-bezier(.2,.8,.2,1)}
  .ab-cmd__list{overflow-y:auto;-webkit-overflow-scrolling:touch;
    /* no visible scrollbar — the fade below already says "more here" */
    scrollbar-width:none;-ms-overflow-style:none;
    max-height:min(42vh,340px);
    /* the fade says "more below" instead of looking clipped */
    -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);
    padding-bottom:14px}
  .ab-cmd__list::-webkit-scrollbar{width:0;height:0;display:none}
  .ab-cmd__list:not(.is-scrollable){-webkit-mask-image:none;mask-image:none;padding-bottom:0}
  .ab-cmd__panel[hidden]{display:none}
  .ab-cmd.is-open .ab-cmd__panel{opacity:1;transform:none}

  .ab-cmd__scrim{position:fixed;inset:0;z-index:1;border:0;padding:0;
    background:rgba(5,5,5,.66);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    opacity:0;transition:opacity .24s ease}
  .ab-cmd__scrim[hidden]{display:none}
  .ab-cmd.is-open .ab-cmd__scrim{opacity:1}

  .ab-cmd__search{display:flex;align-items:center;gap:9px;margin:0 0 9px;
    padding:8px 10px 8px 13px;border-radius:999px;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
  .ab-cmd__search-ico{display:flex;color:#C4C4CC;flex:0 0 auto}
  /* Both controls sit on the field's line. Back is bare because it stands
     exactly where the magnifier does — a filled chip there would read as a
     second control rather than one slot changing meaning. */
  .ab-cmd__back,.ab-cmd__close{flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    width:24px;height:24px;padding:0;cursor:pointer;
    border:0;border-radius:50%;background:none;color:#C4C4CC;
    transition:background .2s,color .2s}
  .ab-cmd__close{background:rgba(255,255,255,.09)}
  .ab-cmd__back:hover,.ab-cmd__close:hover{background:rgba(255,255,255,.2);color:#fff}
  .ab-cmd__back:focus-visible,.ab-cmd__close:focus-visible{outline:2px solid var(--ab-accent,#F3B41B);outline-offset:2px}
  .ab-cmd__back[hidden]{display:none}
  /* One slot, two meanings: the magnifier steps aside while Back is showing,
     so the icon never moves — only what it means changes. */
  .ab-cmd__search:has(.ab-cmd__back:not([hidden])) .ab-cmd__search-ico{display:none}
  /* A group row is a <button>, not an <a>: it drills in, it does not navigate.
     These put it back on equal footing with the link rows around it. */
  .ab-cmd__item{width:100%;text-align:left;font:inherit;-webkit-appearance:none;appearance:none;cursor:pointer}
  /* the page count, trailing — keeps a group row to one line */
  .ab-cmd__n{flex:0 0 auto;font:500 11px var(--ab-body,'Inter',sans-serif);color:#5C5C63}
  /* The theme styles bare inputs: 3px radius, a grey 1px border and its own
     padding — drawn INSIDE our pill, so the field read as a square box in a
     rounded one. 0-3-0 and state-complete strips it back; the pill on the
     wrapper is the only shape. */
  .ab-cmd .ab-cmd__input,
  .ab-cmd .ab-cmd__input:hover,
  .ab-cmd .ab-cmd__input:focus,
  .ab-cmd .ab-cmd__input:focus-visible,
  .ab-cmd .ab-cmd__input:active{
    flex:1 1 auto;min-width:0;width:100%;
    background:transparent;border:0;border-radius:999px;
    outline:none;box-shadow:none;padding:0;margin:0;height:auto;line-height:1.4;
    color:#F4F4F5;font:400 13px var(--ab-body,'Inter',sans-serif);
    -webkit-appearance:none;appearance:none}
  .ab-cmd .ab-cmd__input::placeholder{color:#8A8A93;opacity:1}
  .ab-cmd .ab-cmd__input::-webkit-search-cancel-button,
  .ab-cmd .ab-cmd__input::-webkit-search-decoration{-webkit-appearance:none;display:none}
  /* the wrapper carries the whole shape, and lights up when the field has focus */
  .ab-cmd .ab-cmd__search:focus-within{
    border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.1)}

  .ab-cmd__head{font:600 8.5px var(--ab-body,'Inter',sans-serif);letter-spacing:.24em;
    color:#6E6E78;margin:0 4px 6px;text-transform:uppercase}

  /* a result row IS a button — same tokens, same pill, no separate look */
  /* min-height stays at the 44px touch floor — the height came off the
     second line of text, not off the tap target. */
  .ab-cmd__item{display:flex;align-items:center;gap:10px;margin-bottom:5px;
    min-height:var(--btn-min-h);padding:7px 12px;border-radius:var(--btn-radius);
    text-decoration:none;color:var(--btn-ink);
    background:var(--btn-bg);border:1px solid var(--btn-line);
    transition:background-color .2s ease,border-color .2s ease,color .2s ease}
  .ab-cmd__item:hover,.ab-cmd__item:focus-visible{
    background:var(--btn-bg-hover);border-color:var(--btn-line-hover);color:var(--btn-ink-hover)}
  .ab-cmd__tag{flex:0 0 auto;width:26px;height:26px;border-radius:8px;
    background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;
    font:600 8.5px var(--ab-body,'Inter',sans-serif);color:#8A8A93}
  .ab-cmd__txt{display:flex;flex-direction:column;gap:2px;flex-grow:1;min-width:0}
  .ab-cmd__label{font:600 13px var(--ab-body,'Inter',sans-serif);color:#F4F4F5;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ab-cmd__path{font:400 10.5px var(--ab-body,'Inter',sans-serif);color:#7A7A84;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ab-cmd__chev{flex:0 0 auto;color:#5C5C63;font-size:15px;line-height:1}

  /* a page that does not exist yet: visible in the structure, not clickable */
  .ab-cmd__item.is-soon{opacity:.42;cursor:default}
  .ab-cmd__item.is-soon:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.07)}
  .ab-cmd__item.is-soon .ab-cmd__path{color:#6E6E78;font-style:italic}

  .ab-cmd__empty{padding:16px 12px;text-align:center;
    font:400 12.5px var(--ab-body,'Inter',sans-serif);color:#7A7A84}

  .ab-cmd__go{display:block;margin-top:8px;padding:13px;text-align:center;
    background:#fff;color:#050505;border-radius:999px;text-decoration:none;
    font:600 13px var(--ab-body,'Inter',sans-serif)}

  /* C-01: the bar is fixed, so it floated over whatever ended the page — on
     every page that was the copyright/CIN line. Reserve real space at the foot
     of the document so the bar gets its own strip and the last line of content
     sits above it. Padding on .ab-footer (not body) so the footer's own
     background fills that strip rather than leaving a bare band. */
  .ab-footer{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}

  /* C-02: the footer collapsed to ONE column below 980px, which made it very
     tall, and its links were 17px high — under every touch-target guideline.
     Two columns halve the height; the padding takes each link to 44px. */
  .ab-footer__inner{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:26px 20px !important;
    padding:40px 20px 28px !important}
  /* the brand blurb spans both columns and leads */
  .ab-footer__brand{grid-column:1 / -1}
  .ab-footer__brand p{max-width:none;margin-top:12px;font-size:13.5px}
  .ab-footer__col h4{margin:0 0 8px;font-size:11.5px}
  .ab-footer__col a{
    margin-bottom:0;padding-block:13px;line-height:1.25;
    font-size:13.5px;min-height:44px;box-sizing:border-box;
    display:flex;align-items:center}
  /* a hairline between rows keeps the doubled columns readable */
  .ab-footer__col a + a{border-top:1px solid rgba(255,255,255,.055)}

  /* C-03: the legal line was 12.5px and centred under a 2-column grid; give it
     room and a legible size. */
  .ab-footer__bar{padding:18px 20px;font-size:12px;line-height:1.6}

  /* C-03: text below ~11px is hard to read on a dense phone screen. These were
     the measured offenders; letter-spacing is kept so the labels still read as
     eyebrows rather than body copy. */
  .ab-cmd__head{font-size:10.5px !important;letter-spacing:.2em}
  .al-eyebrow,.al-eyebrow--pad{font-size:11.5px !important}
  .al-vturn__time{font-size:11px !important}
  .ah-hero__eyebrow,.ab-cmd__path{font-size:11px !important}
  .ab-cmd__tag{font-size:9.5px !important}   /* a 26px chip; a code, not prose */
  .al-metric span{font-size:11px !important}  /* "diagnosis", "not quarters" */

  /* C-04: the voice-demo play buttons were 293x31 — wide enough, too short to
     hit reliably, and they are the primary control on those sections. */
  .al-vcase-play-pill{min-height:44px;padding-block:11px}

  /* C-05 backstop: the JS guard hides the bar in a frame, but only once it
     runs. Elementor marks framed views, and the iframe is always narrower than
     a real phone, so this catches the paint before JS. */
  /* (the old html.ab-iframed rule is gone — chrome-off is now opt-in via
     ?ab_chrome=off, emitted as an inline style by abata-chrome.php) */

  /* ---- adaptive contrast: the pill over a light backdrop ----------------
     Translucent glass inherits whatever is behind it, so a white CTA
     scrolling under the bar left #B4B4BC labels on near-white — about 1.5:1,
     effectively invisible. JS adds .is-on-light when the backdrop is bright;
     the pill then inverts to dark-on-light, which is what liquid glass does. */
  .ab-cmd.is-on-light .ab-cmd__bar{
    background:linear-gradient(135deg,rgba(0,0,0,.10),rgba(0,0,0,.05) 42%,rgba(0,0,0,.08));
    border-color:rgba(0,0,0,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 44px rgba(0,0,0,.28)}
  /* raised to 0-3-0 so these still beat the theme's [type=button]:focus rule
     (see the pink-key note above) once the backdrop goes light */
  .ab-cmd.is-on-light .ab-cmd__key,
  .ab-cmd.is-on-light .ab-cmd__key:hover,
  .ab-cmd.is-on-light .ab-cmd__key:focus{background:transparent;color:#1A1A1F}
  .ab-cmd.is-on-light .ab-cmd__key--search,
  .ab-cmd.is-on-light .ab-cmd__key--search:hover,
  .ab-cmd.is-on-light .ab-cmd__key--search:focus{background:rgba(0,0,0,.07);color:#1A1A1F}
  /* the active key flips too: dark chip, light text */
  .ab-cmd.is-on-light .ab-cmd__key.is-on,
  .ab-cmd.is-on-light .ab-cmd__key.is-on:hover,
  .ab-cmd.is-on-light .ab-cmd__key.is-on:focus{background:#0A0A0C;color:#fff}
  .ab-cmd.is-on-light .ab-cmd__key svg{color:inherit}
  /* transition the flip so it reads as the glass reacting, not a repaint */
  .ab-cmd__bar,.ab-cmd__key{transition:background-color .28s ease,color .28s ease,border-color .28s ease}

  /* The hero must clear the bar without growing taller than the screen: the
     bar's 76px comes OFF the top pad as well as onto the bottom one, so the
     column still fits and stays optically centred between header and bar. */
  .ah-hero--studio .ah-hero__wrap{
    padding-top:clamp(74px,9vh,98px) !important;
    padding-bottom:88px !important}
  /* the portrait yields first when the bar takes its 76px */
  .ah-hero--studio .ah-hero__brief-col{margin-top:clamp(16px,2.6vh,28px)}
}

/* tablet: wider pill, two-column results so a whole group is visible at once */
@media(min-width:601px) and (max-width:1080px){
  .ab-cmd__bar{width:min(470px,calc(100vw - 40px));height:66px;margin-bottom:26px;gap:3px;padding:0 6px}
  .ab-cmd__key{height:54px;font-size:13px}
  .ab-cmd__key--search{width:54px}
  /* bottom:auto is the fix — this said bottom:104px from when the panel hung
     above the bottom bar, and a fixed element given BOTH a top and a bottom
     stretches to span them. With top:84px that made the box 920px tall on an
     1112px screen while its content ended at 265. It hangs from the top and
     sizes to its content now, slides down like the phone one, and carries the
     same padding and radius. */
  .ab-cmd__panel{left:50%;right:auto;transform:translateX(-50%) translateY(-10px) scale(.985);
    width:min(580px,calc(100vw - 48px));bottom:auto;padding:10px 10px 11px;border-radius:20px}
  .ab-cmd.is-open .ab-cmd__panel{transform:translateX(-50%)}
  .ab-cmd__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ab-cmd__item{margin-bottom:0}
  .ab-cmd__go{grid-column:1 / -1}
}

@media (prefers-reduced-motion:reduce){
  .ab-cmd__panel,.ab-cmd__scrim,.ab-cmd__key,.ab-cmd__item{transition:none}
}

/* ============================================================
   v2.74 — ONE SIZE AUTHORITY FOR THE PORTRAIT
   Every earlier attempt capped the canvas AND its containers with
   separate vh values. Two independent caps can never agree: at
   1024×768 the canvas resolved to 316px inside a 169px cell and
   painted 147px over the headline. So: the containers hug their
   content and hold NO cap, and the canvas alone carries one. The
   box is then always exactly the portrait — overflow is impossible
   at any width, and the grid row grows to fit.
   ============================================================ */
.ah-hero--studio .ah-hero__stage,
.ah-hero--studio .ah-agent,
.ah-hero--studio .ah-face{
  max-height:none !important;min-height:0 !important;height:auto !important;
  display:flex;align-items:center;justify-content:center}
.ah-hero--studio .ah-face__cv{
  /* The single cap, and it budgets against the rest of the column rather than
     guessing. Everything else in the hero is near-fixed: headline ~111,
     badge ~41, card ~223, gaps ~64, padding ~180 — about 620px. So the
     portrait may take whatever is left, bounded by a sane min and max.
       calc()  keeps the whole hero inside the viewport at any height
       38vh    keeps it proportionate on tall screens
       360px   stops it dominating very tall ones
       140px   floor, so it never collapses to nothing
     One expression, no breakpoint-specific overrides. */
  /* The 340px floor matters now that the hero is min-height rather than a
     fixed viewport. On a short screen with the command bar showing (1024x768,
     1080x800) the calc() term alone drove the portrait down to ~270px — a
     thumbnail again. Below 340 the hero simply grows the difference, which
     costs a few pixels of scroll instead of the thing the page is about. */
  /* 300 is the floor the measurements actually allow. It was 140 (a
     thumbnail on short screens) and 340 overshot — at 1024x768 and 360x740
     that pushed the card back under the command bar by 7 and 14px. 300
     clears the bar everywhere with 26px to spare and still keeps the
     portrait at a readable size on the most cramped screens.

     The 300 is now --face-floor so the keyboard case can lower it, and the
     budget subtracts --kbd: with a keyboard up the screen really is that
     much shorter, and a portrait sized to the whole viewport is exactly what
     forces the browser to scroll the face away to reach the field. svh, not
     vh, because vh on a phone counts the space behind the URL bar. */
  max-height:max(var(--face-floor), min(var(--hero-face-vh), var(--hero-face-max), calc(100svh - var(--hero-reserve) - var(--cmd-clear) - var(--kbd)))) !important;
  /* 100% keeps it inside its own column — 88vw measures the viewport, which
     says nothing about how wide the column actually is, so on a phone the
     portrait could out-grow the space it sits in. */
  max-width:min(100%, 92vw, var(--hero-face-max)) !important;
  width:auto !important;height:auto !important;
  display:block;margin:0 auto}

/* ============================================================
   v2.62 — HERO-ONLY LANDING PAGE
   Nothing follows the hero now, so it owns the viewport.
   Desktop and tablet (>=601px) keep the two-column layout: the
   avatar stays in the left area, the question card in the right.
   Each is centred WITHIN its own area, and the pair is centred in
   the viewport. Only mobile (<=600px) centres as a single column.
   ============================================================ */
@media(min-width:601px){
  /* centre the grid block itself in the viewport, vertically. The base
     rule pads the top to clear the fixed header, so mirror it below. */
  .ah-hero--studio .ah-hero__wrap--new{
    align-items:center !important;align-content:center !important;
    /* the header pill is only ~64px, so 80 clears it; 9vh stops tall
       viewports inflating the gap into dead space */
    /* Trimmed from 9vh: that padding was buying dead space at the top and
       bottom while the portrait between them was held to a thumbnail. 7vh
       still clears the ~64px header pill with room to spare. */
    /* Asymmetric on purpose. The TOP pad is what keeps the portrait clear of
       the header pill, so it stays; the BOTTOM pad was pure dead space and
       was the 25px that pushed the card past the fold. Taking it from here
       rather than from the portrait keeps the face at full size. */
    padding-top:clamp(64px,7vh,104px) !important;
    padding-bottom:calc(clamp(28px,3.5vh,56px) + var(--cmd-clear));
    box-sizing:border-box}

  /* left area: avatar centred in its own column */
  .ah-hero--studio .ah-hero__wrap--new .ah-hero__stage{
    justify-content:center;align-items:center;width:100%}

  /* right area: question card centred in its own column, no longer
     top-aligned now that there is no page below to lead into */
  .ah-hero--studio .ah-hero__wrap--new .ah-hero__brief-col{
    align-items:center !important;justify-content:center;
    padding-top:0 !important}

}

/* Brief card: fixed width per viewport — never stretches or shrinks dynamically */
.ah-brief{
  width:400px !important;max-width:400px !important;min-width:400px !important;
  height:auto !important;overflow:visible !important;
  padding:0 !important;gap:8px !important;
  display:flex !important;flex-direction:column !important;
  box-sizing:border-box !important;
}
.ah-brief__thread{display:none !important}
.ah-brief__gate{display:none !important}
.ah-agent{gap:10px !important}
.ah-brief__q{font-size:14px !important;line-height:1.45 !important}
.ah-brief__badge,.ah-brief__step,.ah-brief__sound{font-size:9px !important}
.ah-opt{padding:8px 12px !important;font-size:12px !important}
/* v2.63: the controls moved into the card's top bar and are round 32px
   buttons now, so the old 10px/padding override would shrink them back. */
.ah-brief__ctl{margin-top:0 !important}
.ah-brief__buttons{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}

/* Tablet portrait: 601–1024px */
@media(min-width:601px) and (max-width:1024px){
  .ah-brief{width:320px !important;max-width:320px !important;min-width:320px !important;padding:14px !important}
  .ah-brief__q{font-size:13px !important}
  .ah-opt{font-size:11.5px !important;padding:7px 10px !important}
}

/* Phone: max 600px */
@media(max-width:600px){
  .ah-brief{width:calc(100vw - 32px) !important;max-width:calc(100vw - 32px) !important;min-width:0 !important;padding:14px !important}
  .ah-brief__q{font-size:13px !important}
  .ah-opt{font-size:11.5px !important;padding:7px 10px !important}
}

/* scroll anchoring fights GSAP pins: the browser "helpfully" re-anchors the
   viewport when content above changes height, which reads as the page
   snapping or sections refusing to scroll. Kill it. */
html{overflow-anchor:none}

/* ---------- breathing space, sitewide ---------- */
:root{
  --ab-section-y:clamp(160px,13vw,260px);
  --ab-head-gap:clamp(84px,8vw,140px);
  --ab-block-gap:clamp(28px,3.4vw,44px);
}
.ah-services{padding:var(--ab-section-y) 6vw !important}
.ah-why{padding:var(--ab-section-y) 6vw !important}
.ah-story-problem,.ah-story-solution{padding:var(--ab-section-y) 6vw !important}
.ah-partners{display:none !important}
.ah-rail__head{padding-bottom:clamp(40px,4vw,64px) !important}
.ah-story-head{margin-bottom:var(--ab-head-gap) !important}
.ah-traps__grid,.ah-why__grid{gap:var(--ab-block-gap) !important}
@media (max-width:1024px){
  :root{--ab-section-y:clamp(110px,12vw,160px);--ab-head-gap:clamp(56px,7vw,88px)}
}
@media (max-width:768px){
  :root{--ab-section-y:clamp(88px,14vw,120px);--ab-head-gap:clamp(44px,9vw,64px)}
  .ah-story-problem,.ah-story-solution,.ah-services,.ah-why{padding-left:6vw !important;padding-right:6vw !important}
}

/* ---------- services: separate glass cards, not one welded grid ---------- */
.ah-grid{
  border:none !important;border-radius:0 !important;overflow:visible !important;
  gap:clamp(18px,2vw,28px) !important;margin-top:clamp(40px,4vw,60px) !important;
}
.ah-cell{border:1px solid var(--glass-line) !important;border-radius:18px !important}
@media (max-width:980px){.ah-grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}}
@media (max-width:620px){.ah-grid{grid-template-columns:1fr !important}}

/* ---------- the matrix in its solution chapter, all devices ---------- */
.ah-solution-slot .ah-p2s{display:flex;flex-direction:column;order:0;max-width:100%}
@media (max-width:768px){
  .ah-solution-slot{padding:0}
  .ah-solution-slot .ah-p2s__nav{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
}

/* ---------- work page: interactive live previews — ON by default ---------- */
.al-frame__live{
  margin-left:auto;background:rgba(255,255,255,.08) !important;color:rgba(255,255,255,.65) !important;
  border:1px solid rgba(255,255,255,.18) !important;border-radius:999px;
  font:600 11px var(--ab-body,inherit);letter-spacing:.06em;padding:5px 12px;cursor:pointer;
  box-shadow:none !important;transition:background .15s;
}
.al-frame__live:hover{background:rgba(255,255,255,.14) !important}
/* Always treat frames as live — interactive mode is the default */
.al-frame .al-frame__win{height:min(74vh,680px)}
.al-frame .al-frame__win iframe{
  pointer-events:auto !important;transform:none !important;width:100% !important;height:100% !important;
  animation:none !important;opacity:1 !important;filter:none !important;
}
.al-frame .al-frame__mobile-tap{display:none !important}

/* work-page cards need air too */
.al-vcases-grid{gap:clamp(18px,2vw,28px) !important}

/* ---------- no backdrop-filter: keep it readable ---------- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ab-header__inner,.ab-mega{background:rgba(10,12,11,.94) !important}
  .ah-brief__field{background:rgba(8,14,12,.94) !important}
  .ah-trap-card,.ah-diff-card,.ah-why__card,.ah-card,
  .al-vcase-card,.al-vstage-card,.al-price-card,.al-phone-card{background:rgba(12,14,13,.92) !important}
}