/* ---- 00-base.css ---- */
/* ==========================================================================
   AAOM Landing — base (shared). Everything is scoped under .aaom-lp.
   Fluid system: clamps over 375→1440 (see CLAMP-RECIPES), container gutter
   55px at 1440 (Figma), floor 24px.
   ========================================================================== */
.aaom-lp{
  --lp-black:#000;
  --lp-white:#fff;
  --lp-bg:#f1f1f1;
  --lp-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --lp-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --lp-gutter:max(24px, 50% - 665px);      /* normal-flow children */
  --lp-gutter-vw:max(24px, 50vw - 665px);  /* full-bleed (100vw) children */
  --lp-dot-light:rgba(51,51,51,.305);   /* shared dot grid = Figma ellipses: hard 2x2 circle, 38x37 pitch; light #333 @~.305 (renders #b7b7b7 on #f1f1f1) */
  --lp-dot-dark:rgba(52,47,47,.88);   /* dark: #342F2F @~.88 (renders #2e2929 on #000) */
  --lp-dot-w:38px;
  --lp-dot-h:37px;
  --lp-dot-pos:calc(50% - 1px) 0px;
  --lp-dot-x:calc(50% - 1px);     /* y phase: --lp-dot-y per layer, set by js/s00.js so every grid continues the previous one */
  --lp-dots-light-img:radial-gradient(circle at 1px 1px,var(--lp-dot-light) 1px,transparent 1.2px);
  --lp-dots-dark-img:radial-gradient(circle at 1px 1px,var(--lp-dot-dark) 1px,transparent 1.2px);
  display:block;
  width:100%;
  overflow-x:clip;
  font-family:var(--lp-sans);
  color:var(--lp-black);
  background:var(--lp-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.aaom-lp *,.aaom-lp *::before,.aaom-lp *::after{box-sizing:border-box}
.aaom-lp :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,blockquote){margin:0;padding:0}
.aaom-lp :where(ul,ol){list-style:none}
.aaom-lp :where(h1,h2,h3,h4,h5,h6){font-family:var(--lp-sans);font-weight:400;color:inherit;text-transform:none;letter-spacing:normal}
.aaom-lp img,.aaom-lp svg{display:block;max-width:100%;height:auto}
.aaom-lp a{color:inherit;text-decoration:none}

/* Section shell: every band is full width (template renders outside the theme container) */
.aaom-lp .lp-section{position:relative;width:100%;isolation:isolate}
.aaom-lp .lp-container{position:relative;margin-inline:var(--lp-gutter);z-index:1}

/* Editorial italic accent (Cormorant Garamond SemiBold Italic) */
.aaom-lp .lp-accent{font-family:var(--lp-serif);font-style:italic;font-weight:600}

/* Dot-grid backgrounds (Figma pattern) */
.aaom-lp .lp-dots-light{background-color:var(--lp-bg);background-image:var(--lp-dots-light-img);background-size:var(--lp-dot-w) var(--lp-dot-h);background-position:var(--lp-dot-x) var(--lp-dot-y,0px)}
.aaom-lp .lp-dots-dark{background-color:var(--lp-black);background-image:var(--lp-dots-dark-img);background-size:var(--lp-dot-w) var(--lp-dot-h);background-position:var(--lp-dot-x) var(--lp-dot-y,0px)}

/* --- BUTTON (pill + circle arrow). Owned by section 01 agent; may be refined here only. ---
   Figma (hero "Watch the Video"): pill 189x46.5 + 47px circle, touching (gap 0), Instrument SemiBold 17.656, ls .01em, arrow glyph ~30% of circle. */
.aaom-lp .lp-btn{display:inline-flex;align-items:center;gap:var(--btn-gap,0px);font-family:var(--lp-sans);font-weight:600;line-height:1.2;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.aaom-lp .lp-btn__label{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h,46px);padding-inline:var(--btn-px,24px);border-radius:999px;background:var(--btn-bg,#000);color:var(--btn-fg,#fff);font-size:var(--btn-fs,16px)}
.aaom-lp .lp-btn__icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--btn-h,46px);height:var(--btn-h,46px);border-radius:50%;background:var(--btn-bg,#000);color:var(--btn-fg,#fff)}
.aaom-lp .lp-btn__icon svg{width:30%;height:30%}
.aaom-lp .lp-btn:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:999px}
.aaom-lp .lp-btn--light{--btn-bg:#fff;--btn-fg:#000}
/* Play-icon variant (hero "Watch the Video": S2_Icon_Play 25px in the 47px circle, optically nudged right) */
.aaom-lp .lp-btn--play .lp-btn__icon svg{width:53%;height:53%;transform:translateX(4%)}
/* --- /BUTTON --- */

.aaom-lp .lp-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Pinned dot grids that move with the scroll (js/s00.js): the grid lives on a child 1 cell taller */
.aaom-lp .is-dotmove{background-image:none !important}
/* The layer is 8 cells taller on each side (integer cells keep the phase) so --so, the stage's soft-pin translateY
   (js/s03.js), can be cancelled here: the rows stay fixed in the document while the stage eases in / out of the pin.
   `translate` = the grid offset, written per frame by the speed-limited rAF (s02, s03). */
.aaom-lp .lp-dotmove{position:absolute;left:0;top:calc(var(--lp-dot-h) * -8);width:100%;height:calc(100% + var(--lp-dot-h) * 17);z-index:-1;pointer-events:none;
  background-size:var(--lp-dot-w) var(--lp-dot-h);background-position:var(--lp-dot-x) var(--lp-dot-y,0px);
  transform:translate3d(0,calc(var(--dm,0px) - var(--so,0px)),0);will-change:transform,translate}
/* s02 (not pinned itself): a clip box the size of the section (clip-path, not overflow, so it doesn't become the
   sticky's scroll container) holding a viewport + 2 cells tall grid that sticks while the section covers the viewport
   (top / bottom margins of -1 cell: it starts 1 cell above the section top, same phase, and keeps sticking until the
   section bottom reaches the viewport bottom; the translate only ever moves it up by < 1 cell). */
.aaom-lp .lp-dotclip{position:absolute;inset:0;clip-path:inset(0);z-index:-1;pointer-events:none}
.aaom-lp .lp-dotclip>.lp-dotmove{position:sticky;display:block;top:calc(var(--lp-dot-h) * -1);margin:calc(var(--lp-dot-h) * -1) 0;
  height:calc(100vh + var(--lp-dot-h) * 2);height:calc(100lvh + var(--lp-dot-h) * 2);transform:none}
/* No elastic bounce at the page top / bottom (trackpad, iOS): the rubber-band drags the pinned / scroll-linked layers
   (sticky stages, dots, footer curtain) out of step with the page. */
html:has(.aaom-lp),html:has(.aaom-lp) body{overscroll-behavior-y:none}

/* ---- s00.css ---- */
/* s00 — Landing's own navbar (<header class="aaom-nav">, markup in sections/s00.html), Figma "Hero" 1962:7853 nav:
   logo 2080:4228 (140x20.55 @x221), links 2080:4224 (Instrument Sans SemiBold 16.494/1.389, ls -0.6598, gap 41.294, black),
   Connect 2080:4237 (black pill 90.08x35.00, r 29.236, 13.156 SemiBold ls .1316, white) + arrow circle 2080:4239 (35.08, touching).
   One row, centred (group 221→1186 in the 1440 frame = centre 703.6, i.e. 16.4px left of the page centre), content centre y=48.5.
   No border, no fill and no chevrons at rest. Figma defines no scrolled/hover/mobile state: scrolled = dark "island" hugging the row
   (rgba(0,0,0,.42) + blur 20.5, radius 60, white content, no border; js/s99.js toggles .is-lp-scrolled), top of the page on desktop =
   the row spread over the viewport (client feedback: logo / Connect at the gutters, links centred), mobile (<=1023px) = logo +
   burger opening a panel (not designed in Figma). The header box is 74.08px (same as the theme bar it replaces) in both states, so
   pins (--lp-pin-top) and the dots strip (--lp-nav-h) never move. The theme's .site-header is hidden on this template only. */
body.page-template-template-aaom-landing{background-color:#f1f1f1}
body.page-template-template-aaom-landing .site-header{display:none!important}

.aaom-lp .lp-section[id]{scroll-margin-top:var(--lp-pin-top,0px)}

.aaom-lp .aaom-nav{
  --nav-fg:#000;
  --nav-cta-bg:#000;
  --nav-cta-fg:#fff;
  --nav-ease:cubic-bezier(.22,1,.36,1);
  --nav-tr:.55s var(--nav-ease);
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  height:74.08px;
  padding:31px 0 0;
  padding-right:min(32.84px,max(0px,calc(100% - 1013.16px))); /* centre shift of the Figma group (-16.4px), gone when there is no room */
  pointer-events:none;
  font-family:var(--lp-sans);
  color:var(--nav-fg);
}
.aaom-lp .aaom-nav.is-lp-scrolled{--nav-fg:#fff;--nav-cta-bg:#fff;--nav-cta-fg:#000}
body.admin-bar .aaom-lp .aaom-nav{top:32px}
@media (max-width:782px){body.admin-bar .aaom-lp .aaom-nav{top:46px}}
@media (max-width:600px){body.admin-bar .aaom-lp .aaom-nav{top:0}}

.aaom-lp .aaom-nav__bar{position:relative;isolation:isolate;display:flex;align-items:center}
/* Island: blur + tint layer behind the row; invisible at rest, grows 8px / 21px around the row when scrolled. */
.aaom-lp .aaom-nav__bar::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border-radius:60px;
  background-color:rgba(0,0,0,.42);
  opacity:0;
  pointer-events:none;
  -webkit-backdrop-filter:blur(0);
  backdrop-filter:blur(0);
  transition:inset var(--nav-tr),opacity var(--nav-tr),-webkit-backdrop-filter var(--nav-tr),backdrop-filter var(--nav-tr);
}
.aaom-lp .aaom-nav.is-lp-scrolled .aaom-nav__bar::before{inset:-8px -8px -8px -21px;opacity:1;-webkit-backdrop-filter:blur(20.5px);backdrop-filter:blur(20.5px)}

.aaom-lp .aaom-nav a,
.aaom-lp .aaom-nav button{pointer-events:auto}
.aaom-lp .aaom-nav__logo{display:block;flex:none;width:200.19px;height:17.08px;margin-right:43px;color:var(--nav-fg);transition:color var(--nav-tr)}
.aaom-lp .aaom-nav__logo svg{width:200.19px;height:17.0833px;max-width:none}
.aaom-lp .aaom-nav__menu{display:flex;align-items:center}
.aaom-lp .aaom-nav__links ul{display:flex;align-items:center;gap:32px;margin-right:42.83px}
.aaom-lp .aaom-nav__links a{
  display:block;
  font-size:13.156px; /* same type as the Connect pill label (client feedback) */
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1316px;
  white-space:nowrap;
  color:var(--nav-fg);
  transition:color var(--nav-tr),opacity .2s ease;
}
.aaom-lp .aaom-nav__links a:hover{opacity:.6}

.aaom-lp .aaom-nav__cta{display:flex;align-items:center;flex:none;color:var(--nav-cta-fg)}
.aaom-lp .aaom-nav__pill{
  display:flex;
  align-items:center;
  height:35.003px;
  padding:0 17.541px;
  border-radius:29.236px;
  background-color:var(--nav-cta-bg);
  color:var(--nav-cta-fg);
  font-size:13.156px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.1316px;
  white-space:nowrap;
  transition:background-color var(--nav-tr),color var(--nav-tr),opacity .2s ease;
}
.aaom-lp .aaom-nav__circle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:35.083px;
  height:35.083px;
  border-radius:50%;
  background-color:var(--nav-cta-bg);
  color:var(--nav-cta-fg);
  transition:background-color var(--nav-tr),color var(--nav-tr),opacity .2s ease;
}
.aaom-lp .aaom-nav__circle svg{width:10.6451px;height:10.6451px;max-width:none;transition:transform .25s ease}
.aaom-lp .aaom-nav__cta:hover .aaom-nav__pill,
.aaom-lp .aaom-nav__cta:hover .aaom-nav__circle{opacity:.85}
.aaom-lp .aaom-nav__cta:hover .aaom-nav__circle svg{transform:rotate(45deg)}

.aaom-lp .aaom-nav a:focus-visible,
.aaom-lp .aaom-nav button:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:4px}
.aaom-lp .aaom-nav__cta:focus-visible{outline-color:var(--nav-cta-bg);border-radius:29px}
.aaom-lp .aaom-nav.is-lp-scrolled .aaom-nav__cta:focus-visible{outline-color:#fff}

.aaom-lp .aaom-nav__burger{display:none}

/* Desktop, top of the page: the row spreads over the viewport (logo / Connect at the gutters, links centred: offsets from
   js/s99.js); scrolled, the offsets drop and the row glides back into the island. Transform only: no layout per frame. */
@media (min-width:1024px){
  .aaom-lp .aaom-nav__logo{transition:color var(--nav-tr),transform var(--nav-tr)}
  .aaom-lp .aaom-nav__links,
  .aaom-lp .aaom-nav__cta{transition:transform var(--nav-tr)}
  .aaom-lp .aaom-nav:not(.is-lp-scrolled) .aaom-nav__logo{transform:translate3d(var(--nav-lx,0px),0,0)}
  .aaom-lp .aaom-nav:not(.is-lp-scrolled) .aaom-nav__links{transform:translate3d(var(--nav-mx,0px),0,0)}
  .aaom-lp .aaom-nav:not(.is-lp-scrolled) .aaom-nav__cta{transform:translate3d(var(--nav-cx,0px),0,0)}
  /* the (invisible) island spans the spread row, so it closes in together with the logo / Connect */
  .aaom-lp .aaom-nav:not(.is-lp-scrolled) .aaom-nav__bar::before{inset:0 calc(-1 * var(--nav-cx,0px)) 0 var(--nav-lx,0px)}
}

@media (max-width:1023px){
  .aaom-lp .aaom-nav{height:65px;padding:0;align-items:center}
  .aaom-lp .aaom-nav__bar{width:100%;height:65px;padding:0 24px;justify-content:space-between}
  .aaom-lp .aaom-nav.is-lp-scrolled .aaom-nav__bar::before{inset:8px 12px}
  .aaom-lp .aaom-nav__logo{margin-right:0}
  .aaom-lp .aaom-nav__burger{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    width:44px;
    height:44px;
    margin-right:-10px;
    padding:0 10px;
    border:0;
    background:none;
    color:var(--nav-fg);
    cursor:pointer;
    transition:color var(--nav-tr);
  }
  .aaom-lp .aaom-nav__burger-line{display:block;width:24px;height:2px;border-radius:1px;background-color:currentColor;transition:transform .3s var(--nav-ease)}
  .aaom-lp .aaom-nav.is-open .aaom-nav__burger-line:first-child{transform:translateY(4px) rotate(45deg)}
  .aaom-lp .aaom-nav.is-open .aaom-nav__burger-line:last-child{transform:translateY(-4px) rotate(-45deg)}
  .aaom-lp .aaom-nav__menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    height:calc(100vh - 65px);
    height:calc(100dvh - 65px);
    padding:16px 24px 24px;
    overflow-y:auto;
    overscroll-behavior:contain;
    background-color:#f1f1f1;
    visibility:hidden;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .3s var(--nav-ease),transform .3s var(--nav-ease),visibility 0s linear .3s;
  }
  .aaom-lp .aaom-nav.is-open .aaom-nav__menu{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
  .aaom-lp .aaom-nav.is-open{--nav-fg:#000;--nav-cta-bg:#000;--nav-cta-fg:#fff}
  .aaom-lp .aaom-nav.is-open .aaom-nav__bar::before{inset:0;border-radius:0;background-color:#f1f1f1;opacity:1;-webkit-backdrop-filter:none;backdrop-filter:none}
  .aaom-lp .aaom-nav__links{width:100%}
  .aaom-lp .aaom-nav__links ul{flex-direction:column;align-items:flex-start;gap:0;margin:0}
  .aaom-lp .aaom-nav__links a{padding:.85rem 0;font-size:16px}
  .aaom-lp .aaom-nav__cta{margin-top:16px}
  .aaom-lp .aaom-nav__pill{height:47px;padding:0 24px;font-size:16px;border-radius:40px}
  .aaom-lp .aaom-nav__circle{width:47px;height:47px}
  .aaom-lp .aaom-nav__circle svg{width:14px;height:14px}
}
@media (prefers-reduced-motion:reduce){
  .aaom-lp .aaom-nav,.aaom-lp .aaom-nav *,.aaom-lp .aaom-nav *::before{transition:none!important}
}
.aaom-lp .aaom-nav.lpn-noanim,.aaom-lp .aaom-nav.lpn-noanim *,.aaom-lp .aaom-nav.lpn-noanim *::before,
.aaom-lp .aaom-nav.lpn-measure,.aaom-lp .aaom-nav.lpn-measure *,.aaom-lp .aaom-nav.lpn-measure *::before{transition:none!important}

/* ---- s01.css ---- */
/* s01 — Hero (Figma v2 1828:13459, 1440x1662). Navbar 1828:13476 intentionally omitted (theme header). */
.aaom-lp .s01{
  --s01-r:clamp(170px, 6.2456rem + 18.6854vw, 369px);  /* light circle radius (Union cut-out): sized for the heading */
  --s01-cy:clamp(40px, 1.7738rem + 3.0986vw, 73px);    /* circle centre / black band top, below the intro heading top */
  container-type:inline-size;
  overflow-x:clip;
  background-color:var(--lp-bg);
  /* Light hero: shared dot grid (code, not an image); covers the whole hero so the dots also show inside the circle bitten out of the black band. */
  background-image:var(--lp-dots-light-img);
  background-size:var(--lp-dot-w) var(--lp-dot-h);
  background-position:var(--lp-dot-x) var(--lp-dot-y,0px);
  padding-top:clamp(40px, 1.7518rem + 3.1925vw, 74px); /* Figma: title 74 under the navbar */
  color:var(--lp-black);
  text-align:center;
}

/* Dots behind the theme nav: the grid continues upward over the header's height (nav sits in flow right above the hero; same cell phase, --lp-dot-y shifted by the layer height) */
.aaom-lp .s01::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:var(--lp-nav-h,74.08px);
  background-image:var(--lp-dots-light-img);background-size:var(--lp-dot-w) var(--lp-dot-h);
  background-position:var(--lp-dot-x) calc(var(--lp-nav-h,74.08px) + var(--lp-dot-y,0px));
  pointer-events:none;
}

/* Intro */
.aaom-lp .s01__intro{display:flex;flex-direction:column;align-items:center}
.aaom-lp .s01__title{
  max-width:9.2em;
  font-size:clamp(40px, 1.6637rem + 3.5681vw, 78px);
  line-height:.9;
  letter-spacing:-.02em;
}
.aaom-lp .s01__title .lp-accent{font-size:1.275em;line-height:.84}
.aaom-lp .s01__sub{
  max-width:31.5em;
  margin-top:clamp(16px, 0.8239rem + 0.7512vw, 24px);
  font-size:clamp(14px, 0.8310rem + 0.1878vw, 16px);
  font-weight:500;
  line-height:1.53;
}
.aaom-lp .s01__cta{
  --btn-h:clamp(40px, 2.3460rem + 0.6573vw, 47px);
  --btn-fs:clamp(15px, 0.8790rem + 0.2494vw, 17.656px);
  margin-top:clamp(32px, 1.4718rem + 2.2535vw, 56px);
}
.aaom-lp .s01__cta:hover{--btn-bg:#222}
/* Play glyph = omc.com/omni's solid rounded triangle (24x24 box in a 57px circle = 42.1%; the path's own x-offset
   is the optical centring, so no extra nudge). Fill follows --btn-fg; omc/omni applies no transition on it. */
.aaom-lp .s01__cta.lp-btn--play .lp-btn__icon svg{width:42.1%;height:42.1%;transform:none}

/* "Watch the Video" -> inline preview (Figma 1950:6183 / 1886:41573). The pill's black fill is .s01__cta-card, a
   323.556x182 (r23) video card clipped down to the pill (189x46.5) at rest; hover/focus/first tap opens the clip
   while the circle slides to the card's right edge and the whole group re-centres. Geometry scales with --btn-h
   (47.083 @1440). --lw (label width) is measured by js/s01.js, which also adds .is-ready; without JS the original
   pill renders untouched. transform/opacity/clip-path only. */
.aaom-lp .s01__cta{
  --pw:calc(var(--btn-h) * 6.872);   /* 323.556 */
  --ph:calc(var(--btn-h) * 3.8655);  /* 182 */
  --pr:calc(var(--btn-h) * .4885);   /* 23 */
  --ease:cubic-bezier(.22,1,.36,1);
  position:relative;
  z-index:3;
  padding:0;
  border:0;
  background:none;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .55s var(--ease);
}
.aaom-lp .s01__cta-card{display:none}
.aaom-lp .s01__cta.is-ready .s01__cta-card{
  display:block;
  position:absolute;
  left:0;
  top:0;
  z-index:0;
  width:var(--pw);
  height:var(--ph);
  overflow:hidden;
  background:var(--btn-bg,#000);
  clip-path:inset(0 calc(var(--pw) - var(--lw, 0px)) calc(var(--ph) - var(--btn-h)) 0 round calc(var(--btn-h) / 2));
  transition:clip-path .55s var(--ease);
  pointer-events:none;
}
.aaom-lp .s01__cta-video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.012);transition:opacity .35s linear}
.aaom-lp .s01__cta.is-ready .lp-btn__label{position:relative;z-index:1;background:none;transition:opacity .2s linear .1s}
.aaom-lp .s01__cta.is-ready .lp-btn__icon{position:relative;z-index:1;transition:transform .55s var(--ease)}
.aaom-lp .s01__cta.is-preview{--btn-bg:#000;transform:translateX(calc((var(--lw, 0px) - var(--pw)) / 2))}
.aaom-lp .s01__cta.is-preview .s01__cta-card{clip-path:inset(0 0 0 0 round var(--pr));pointer-events:auto} /* whole card = hover/click area while open */
.aaom-lp .s01__cta.is-preview .lp-btn__label{opacity:0;transition-delay:0s;transition-duration:.15s}
.aaom-lp .s01__cta.is-preview .lp-btn__icon{transform:translateX(calc(var(--pw) - var(--lw, 0px)))}
.aaom-lp .s01__cta.is-preview.is-playing .s01__cta-video{opacity:1}
.aaom-lp .s01__cta.is-preview .s01__cta-video{opacity:1} /* fallback poster (sizzle 1:01) while the clip buffers */
.aaom-lp .s01__cta.is-preview.has-frame .s01__cta-video{opacity:1;transition:none} /* preloaded: show frame 0 immediately */
/* once the clip covers the card, drop the black fill under it: its anti-aliased edge showed as a dark hairline around the preview */
.aaom-lp .s01__cta.is-preview:is(.is-playing,.has-frame) .s01__cta-card{background:transparent}
.aaom-lp .s01__cta.is-measuring,.aaom-lp .s01__cta.is-measuring *{transition:none!important}
.aaom-lp .s01__cta.is-preview:focus-visible{outline:none}
.aaom-lp .s01__cta.is-preview:focus-visible::after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:calc(var(--pw) + var(--btn-h));
  height:var(--ph);
  border-radius:var(--pr);
  /* clean 2px black ring with a 2px white gap that follows the card's rounded shape (no thick outline, no uneven gap) */
  box-shadow:0 0 0 2px #fff,0 0 0 4px var(--lp-black);
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .aaom-lp .s01__cta,
  .aaom-lp .s01__cta.is-ready .s01__cta-card,
  .aaom-lp .s01__cta.is-ready .lp-btn__label,
  .aaom-lp .s01__cta.is-ready .lp-btn__icon,
  .aaom-lp .s01__cta-video{transition:none}
}

/* Full video (Figma 1838:2819 "Video overlay" over 1838:2818 #212121 @93%): native <dialog> in the top layer.
   Black box 1224.524x650.44 r27 centred in the viewport, 16:9 video 1087.266x611.587 inside; close (26.667, #4a4a4a)
   38.5px above its top-left; control column (52.516 wide) 26.476px right of it: volume pill 223.512 (r39.704) + play
   circle, bottom-aligned with the box. Below 768px the controls move under the box (volume = mute toggle only). */
html.s01-vlock,html.s01-vlock body{overflow:hidden}
.aaom-lp .s01__vmodal{
  --vb-w:min(85vw, 80vh * 16 / 9); /* flush 16:9 video (Figma 2482:698: 1225 of 1440) */
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  background:rgba(16,16,16,.93); /* Figma 2482:697 #101010 @93% */
  -webkit-backdrop-filter:blur(43.35px);backdrop-filter:blur(43.35px);
  color:#fff;
  overflow:hidden;
  overscroll-behavior:contain;
}
.aaom-lp .s01__vmodal[open]{display:grid;place-items:center;animation:s01-vfade .3s linear both}
.aaom-lp .s01__vmodal::backdrop{background:transparent}
.aaom-lp .s01__vmodal.is-closing{animation:s01-vfade .2s linear reverse both}
.aaom-lp .s01__vstage{position:relative;width:var(--vb-w);aspect-ratio:16/9}
.aaom-lp .s01__vmodal[open] .s01__vstage{animation:s01-vrise .5s cubic-bezier(.22,1,.36,1) both}
@keyframes s01-vfade{from{opacity:0}to{opacity:1}}
@keyframes s01-vrise{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.aaom-lp .s01__vbox{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:#000;
}
.aaom-lp .s01__vvideo{display:block;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
.aaom-lp .s01__vmodal :where(button){display:block;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.aaom-lp .s01__vmodal :focus-visible{outline:2px solid #fff;outline-offset:3px}
.aaom-lp .s01__vmodal svg{width:100%;height:100%}
.aaom-lp .s01__vclose{position:absolute;right:0;bottom:calc(100% + 12px);width:38.433px;height:38.433px;padding:6px!important;border-radius:50%;background:#4a4a4a}
.aaom-lp .s01__vctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:20px;padding:40px 24px 20px;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.aaom-lp .s01__vctrl{pointer-events:none} /* the gradient strip lets clicks through to the video */
.aaom-lp .s01__vctrl>*{pointer-events:auto}
.aaom-lp .s01__vstage::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .2s;animation:s01-spin .8s linear infinite}
.aaom-lp .s01__vstage.is-waiting::after{opacity:1;transition-delay:.25s} /* only when the wait is noticeable */
@keyframes s01-spin{to{transform:rotate(1turn)}}
.aaom-lp .s01__vtime{flex:1;position:relative;height:28px;cursor:pointer;touch-action:none}
.aaom-lp .s01__vtrk{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:rgba(255,255,255,.35)}
.aaom-lp .s01__vprog{position:absolute;left:0;top:0;bottom:0;width:calc(var(--vp,0) * 100%);border-radius:3px;background:#fff}
.aaom-lp .s01__vthumb{position:absolute;top:50%;left:calc(var(--vp,0) * 100%);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 4.85px 1.213px rgba(0,0,0,.25)}
.aaom-lp .s01__vplay{position:relative;flex:none;width:52.516px;height:52.516px;border-radius:50%;background:#000}
.aaom-lp .s01__vplay svg{position:absolute;left:calc(50% - 16.011px);top:calc(50% - 16.011px);width:32.022px;height:32.022px}
.aaom-lp .s01__vplay .s01__vi-play{left:calc(50% - 7px);top:calc(50% - 10.5px);width:18px;height:21px} /* 30x35 triangle at 60%, nudged right for optical centre */
.aaom-lp .s01__vplay .s01__vi-play path{fill:#fff}
.aaom-lp .s01__vfs{flex:none;width:52.516px;height:52.516px;border-radius:50%;background:#000}
.aaom-lp .s01__vfs svg{width:26px;height:26px;margin:auto;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.aaom-lp .s01__vfs[hidden]{display:none}
.aaom-lp .s01__vi-pause,.aaom-lp .s01__vplay.is-playing .s01__vi-play{display:none}
.aaom-lp .s01__vplay.is-playing .s01__vi-pause{display:block;left:calc(50% - 16.011px)}
/* Full screen: the stage (video + controls) fills the screen */
.aaom-lp .s01__vstage:fullscreen{width:100%;height:100%;aspect-ratio:auto;background:#000;animation:none}
.aaom-lp .s01__vstage:-webkit-full-screen{width:100%;height:100%;aspect-ratio:auto;background:#000;animation:none}
.aaom-lp .s01__vstage:fullscreen .s01__vclose,.aaom-lp .s01__vstage:-webkit-full-screen .s01__vclose{display:none}
@media (max-width:767px){
  .aaom-lp .s01__vmodal{--vb-w:calc(100vw - 32px)}
  .aaom-lp .s01__vctrl{gap:12px;padding:32px 12px 12px}
  .aaom-lp .s01__vplay,.aaom-lp .s01__vfs{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .aaom-lp .s01__vmodal[open],.aaom-lp .s01__vmodal.is-closing,.aaom-lp .s01__vmodal[open] .s01__vstage{animation:none}
}

/* Photo-strip fan (Figma 1962:7804, 1405x702.5): 9 separate 2x band cut-outs placed in % of the frame.
   --x/--y/--w/--h = band box, --ox/--oy = midpoint of its inner end (the edge facing the fan centre),
   --a/--l = radial axis angle / length (fan units) used by js/s01.js. Each band also carries a pre-rendered
   motion-blurred copy (.s01__blur, padded by --pl/--pt) that is only crossfaded in while the bar is moving. */
/* The circle keeps the radius the heading needs (--s01-r); the bars scale with the fan width but sit on the circle:
   below 1440 the circle is relatively bigger than the Figma fan hole, so every bar is pushed out along its own axis by
   --s01-push (= circle radius - Figma hole), i.e. the fan opens upwards towards the copy (the extra height is added to
   the top margin) and the bars' inner ends stay on the circle like in Figma 1962:4477 (r369, hole 320, centre +39). */
.aaom-lp .s01__fan{
  --s01-fw:min(1405px, 97.57cqw);
  --s01-push:max(0px, var(--s01-r) - var(--s01-fw) * .262680);
  position:relative;
  width:var(--s01-fw);
  aspect-ratio:2/1;
  margin:calc(clamp(40px, 1.7518rem + 3.1925vw, 74px) + var(--s01-push)) 0 calc(var(--s01-fw) * .036299 - var(--s01-cy)); /* Figma: CTA → fan 74, fan → band 51 */
  margin-left:calc(50% - var(--s01-fw) / 2);
  pointer-events:none;
}
.aaom-lp .s01__band{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  transform-origin:var(--ox) var(--oy);
  translate:calc(sin(var(--a)) * var(--s01-push)) calc(cos(var(--a)) * var(--s01-push) * -1);
}
.aaom-lp .s01__band img{position:absolute;max-width:none}
.aaom-lp .s01__crisp{inset:0;width:100%;height:100%;will-change:transform;transform:translateZ(0)}
.aaom-lp .s01__blur{
  left:calc(var(--pl) * -1);
  top:calc(var(--pt) * -1);
  width:calc(100% + var(--pl) * 2);
  height:calc(100% + var(--pt) * 2);
  opacity:0;
}

/* Intro animation (scroll-driven, reversible, omc.com home-ring style): the bars shoot out of the fan centre one
   after another, left to right, stretching along their own axis with a motion-blur streak, and settle crisp; back at
   the top they retract right to left (WAAPI in js/s01.js, transform/opacity only). js/s01.js adds .is-armed
   synchronously (cancels the failsafe below), .is-running while moving and .is-done when fully open. Failsafe: if the script never runs, the bars grow in on their own after 2.5s. Without JS support /
   with reduced motion the fan simply shows its final state. */
@keyframes s01-band-failsafe{from{transform:scale(0)}to{transform:none}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .aaom-lp .s01__band{
    transform:scale(0);
    animation:s01-band-failsafe .9s cubic-bezier(.534,0,.252,1) calc(2.5s + var(--i) * 100ms) both;
  }
  .aaom-lp .s01__fan.is-armed .s01__band{animation:none}
  .aaom-lp .s01__fan.is-running .s01__band{will-change:transform}
  .aaom-lp .s01__fan.is-done .s01__band{transform:none}
}

/* Lower part: light circle bitten out of the dotted black band; heading sits in the circle */
.aaom-lp .s01__lower{
  position:relative;
  z-index:1;
  min-height:calc(var(--s01-cy) + var(--s01-r));
}
.aaom-lp .s01__lower::before{
  content:"";
  position:absolute;
  top:var(--s01-cy);
  inset-inline:0;
  /* 2px under s02 (which paints over it): the masked band and the light section background end at a fractional y and can
     snap differently on phones, leaving a light hairline at the seam — the overlap keeps that row black */
  bottom:-2px;
  z-index:-1;
  background-color:var(--lp-black);
  background-image:var(--lp-dots-dark-img);
  background-size:var(--lp-dot-w) var(--lp-dot-h);
  background-position:var(--lp-dot-x) var(--lp-dot-y2,0px);
  -webkit-mask-image:radial-gradient(circle var(--s01-r) at 50% 0,transparent calc(var(--s01-r) - .5px),#000 calc(var(--s01-r) + .5px));
          mask-image:radial-gradient(circle var(--s01-r) at 50% 0,transparent calc(var(--s01-r) - .5px),#000 calc(var(--s01-r) + .5px));
}
.aaom-lp .s01__intro-title{
  max-width:12.4em;
  margin-inline:auto;
  font-size:clamp(28px, 1.2334rem + 2.2043vw, 51.476px);
  font-weight:700;
  line-height:1.03; /* Figma 1886:58114: 159px / 3 lines */
  letter-spacing:-.02em;
}
@media (max-width:480px){
  .aaom-lp .s01__intro-title{max-width:10em}
}


/* Copy fade in / out (js/s01.js toggles .is-in per line via IO). `translate` (not transform) so the CTA's own
   preview transform is untouched. Failsafe: shows after 2.5s if the script never runs. */
@keyframes s01-fx-failsafe{to{opacity:1;translate:none}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .aaom-lp .s01__fx{opacity:0;translate:0 28px;animation:s01-fx-failsafe .6s ease 2.5s forwards}
  .aaom-lp .s01.is-fx .s01__fx{animation:none;transition:opacity .5s ease, translate .6s cubic-bezier(.2,.7,.2,1)}
  .aaom-lp .s01.is-fx .s01__fx.is-in{opacity:1;translate:none;transition:opacity .9s ease var(--d, 0s), translate 1.1s cubic-bezier(.2,.7,.2,1) var(--d, 0s)}
  /* keep the CTA's preview re-centre transition */
  .aaom-lp .s01.is-fx .s01__cta.s01__fx{transition:opacity .5s ease, translate .6s cubic-bezier(.2,.7,.2,1), transform .55s var(--ease)}
  .aaom-lp .s01.is-fx .s01__cta.s01__fx.is-in{transition:opacity .9s ease var(--d, 0s), translate 1.1s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform .55s var(--ease)}
}
/* YouTube-style: controls + close fade out after a few idle seconds while playing (js/s01.js toggles .is-idle) */
.aaom-lp .s01__vctrl,.aaom-lp .s01__vclose{transition:opacity .2s}
.aaom-lp .s01__vstage.is-idle .s01__vctrl,.aaom-lp .s01__vstage.is-idle .s01__vclose{opacity:0}
.aaom-lp .s01__vstage.is-idle .s01__vctrl>*{pointer-events:none}
.aaom-lp .s01__vstage.is-idle,.aaom-lp .s01__vstage.is-idle .s01__vvideo{cursor:none}

/* ---- s02.css ---- */
/* s02 — Problem space 65/49/64 (Figma 2064:10243 → 2064:8115 → 2064:5987, 1440x1038). Black dot grid; workflow = one SVG
   (images/s02-diagram.svg, Figma 2064:7682, viewBox 0 0 1319.14 404.3, transparent; vector shapes + outlined text, only the
   photos are embedded webp, connectors removed: the animated .s02__wires draw them). Desktop: .s02__lock is a tall wrapper, .s02__stage sticks and
   js/s02.js zooms the diagram out (translate + scale)
   (class .is-pin, added by JS). Short viewports (<640px tall) / reduced motion: no pin, the diagram is a horizontally scrollable strip (scrollbar hidden). */
.aaom-lp .s02{
  background-color:var(--lp-black);
  background-image:var(--lp-dots-dark-img);
  background-size:var(--lp-dot-w) var(--lp-dot-h);
  background-position:var(--lp-dot-x) var(--lp-dot-y,0px);
  color:var(--lp-white);
  text-align:center;
  padding-bottom:clamp(64px, 2.4815rem + 6.4789vw, 133px);
}
.aaom-lp .s02__stage{padding-top:clamp(48px, 2.5819rem + 1.7840vw, 67px)}
.aaom-lp .s02__head{display:flex;flex-direction:column;align-items:center;gap:clamp(20px, 0.9859rem + 1.1268vw, 32px)}
.aaom-lp .s02__title{
  font-size:clamp(36px, 1.7670rem + 2.0608vw, 57.947px);
  line-height:.9;
  letter-spacing:-.02em;
}
.aaom-lp .s02__title .lp-accent{font-size:1.1045em}
.aaom-lp .s02__text{max-width:700px;font-size:14px;font-weight:500;line-height:1.53}

.aaom-lp .s02__flow{
  margin:clamp(48px, 2.4500rem + 2.3474vw, 73px) 0 0 var(--lp-gutter);
  padding-bottom:6px;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
}
.aaom-lp .s02__flow::-webkit-scrollbar{display:none}
.aaom-lp .s02__track{width:clamp(1100px, 100vw, 1320px)}
.aaom-lp .s02__track img{display:block;width:100%;height:auto}
.aaom-lp .s02__flow:focus-visible{outline:2px solid var(--lp-white);outline-offset:4px}

.aaom-lp .s02__pace{
  max-width:19.03em;
  margin-top:clamp(56px, 2.1136rem + 5.9155vw, 119px);
  margin-inline:auto;
  font-size:clamp(24px, 1.2131rem + 1.2242vw, 37.038px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.aaom-lp .s02__pace .lp-accent{font-weight:500;font-size:1.3333em;line-height:.76;letter-spacing:-.01em}

/* Pinned lock (JS adds .is-pin): the stage sticks; the diagram is absolutely placed over the whole stage, under the copy */
.aaom-lp .s02.is-pin .s02__stage{position:sticky;top:var(--lp-pin-top,0px);height:calc(100vh - var(--lp-pin-top,0px));height:calc(100svh - var(--lp-pin-top,0px));box-sizing:border-box;overflow:hidden}
.aaom-lp .s02.is-pin .s02__head{position:relative;z-index:1}
.aaom-lp .s02.is-pin .s02__flow{position:absolute;inset:0;margin:0;padding:0;overflow:hidden;pointer-events:none}
.aaom-lp .s02.is-pin .s02__track{position:absolute;top:0;left:0;transform-origin:0 0}
.aaom-lp .s02__fade{display:none}

@media (max-width:480px){
  .aaom-lp .s02__pace{max-width:12em}
}

/* Build. Wires (connectors) are a graph: each carries its flow depth --d (hops after the Omnicom icon; W0 is d0) and draws on
   the scroll clock --wp:  --k = clamp(0, (--wp * (18 + --len) - --d) / --len, 1)   (18 = deepest piece, --len = 5).
   Image tiles (.s02__rv) do NOT sweep and are NOT scroll-scrubbed: the tiles of one OBJECT (pill+card, stack of rows...)
   share the same --a (wp threshold) and --dur; js/s02.js adds .on when wp >= --a (removes it going back) and the fade plays
   by TIME (opacity transition, --dur 480-900ms), so an object never shows rows at different opacities. Objects start at
   uneven moments and fade at different speeds. Opacity ONLY: no scale / translate on the tiles (any fractional
   transform re-samples the raster and smears the 0.25-0.5px hairlines mid-fade). The icon tile T0 (rv-i, --k:1 inline) is static. js/s02.js sets --wp (share of the
   diagram the zooming camera has revealed, see ahead()). Not pinned / reduced motion: --wp unset (= 1), the plain <img> and
   every connector show static. */
.aaom-lp .s02__track{position:relative;--len:5}
.aaom-lp .s02__track img{position:relative;z-index:1}
.aaom-lp .s02__wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.aaom-lp .s02__w{--k:clamp(0, (var(--wp,1) * (18 + var(--len,5)) - var(--d)) / var(--len,5), 1)}
.aaom-lp .s02__wires path{fill:none;stroke-linecap:round}
.aaom-lp .s02__w-b{stroke:#fff;stroke-width:0.599px;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--k));opacity:clamp(0, var(--k) * 1000, 1)}
.aaom-lp .s02__rvs{display:none}
.aaom-lp .s02.is-pin .s02__rvs{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.aaom-lp .s02.is-pin .s02__track img{opacity:0}
.aaom-lp .s02__rv{
  --u:calc(var(--ws,1) * var(--zs,1) * 1px);
  position:absolute;
  left:calc(var(--x) / 1319.14 * 100%);top:calc(var(--y) / 404.3 * 100%);
  width:calc(var(--w) / 1319.14 * 100%);height:calc(var(--h) / 404.3 * 100%);
  isolation:isolate;contain:layout paint;
  opacity:0;transition:opacity var(--dur,640ms) cubic-bezier(.22,.61,.36,1)
}
.aaom-lp .s02__rv.rv-i{opacity:1;transition:none}
/* Object group: ONE composited layer per object (wrapper = group opacity); inside, a single element with the diagram crop
   masked to the UNION of the object's rects (rects overlap on shared edges -> no interior seam). The wrapper fades; nothing inside has opacity. */
.aaom-lp .s02__grp{
  --u:calc(var(--ws,1) * var(--zs,1) * 1px);
  position:absolute;pointer-events:none;
  left:calc(var(--x) / 1319.14 * 100%);top:calc(var(--y) / 404.3 * 100%);
  width:calc(var(--w) / 1319.14 * 100%);height:calc(var(--h) / 404.3 * 100%);
  isolation:isolate;contain:layout paint;
  opacity:0;transition:opacity var(--dur,640ms) cubic-bezier(.22,.61,.36,1)
}
.aaom-lp .s02__grp.on{opacity:1}
.aaom-lp .s02__gi{
  position:absolute;inset:0;opacity:1;
  background-image:var(--dia);background-repeat:no-repeat;
  background-size:calc(1319.14 / var(--w) * 100%) calc(404.3 / var(--h) * 100%);
  background-position:calc(var(--x) / (1319.14 - var(--w)) * 100%) calc(var(--y) / (404.3 - var(--h)) * 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat
}
@media (prefers-reduced-motion:reduce){.aaom-lp .s02__grp{transition:none}}
/* rv-i: T0 (orange Omnicom icon) draws its own vector (Figma 2064:8102) instead of cropping the diagram SVG */
.aaom-lp .s02__rv.rv-i::after{background-size:100% 100%;background-position:0 0}
.aaom-lp .s02__rv::after{
  content:"";position:absolute;inset:0;
  background-image:var(--dia);background-repeat:no-repeat;
  background-size:calc(1319.14 / var(--w) * 100%) calc(404.3 / var(--h) * 100%);
  background-position:calc(var(--x) / (1319.14 - var(--w)) * 100%) calc(var(--y) / (404.3 - var(--h)) * 100%)
}
/* Not pinned: the plain <img> shows, and only the icon tile (rv-i) sits exactly on top of its diagram copy. */
.aaom-lp .s02:not(.is-pin) .s02__rvs{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.aaom-lp .s02:not(.is-pin) .s02__grp{display:none}
@media (prefers-reduced-motion:reduce){.aaom-lp .s02__grp{display:none!important}.aaom-lp .s02__track img{opacity:1!important}}
/* Pinned: the diagram never runs over the copy (soft cut under the paragraph; js writes --cut). */
.aaom-lp .s02.is-pin .s02__flow{
  -webkit-mask-image:linear-gradient(to bottom, transparent var(--cut,0px), #000 calc(var(--cut,0px) + 64px));
  mask-image:linear-gradient(to bottom, transparent var(--cut,0px), #000 calc(var(--cut,0px) + 64px))
}
/* Mobile pan (<1024px, js/s02.js adds .is-pan with .is-pin): no zoom-out — the pinned scroll pans the diagram left → right.
   Copy + diagram fit the pinned stage (100svh − pin top) together: the diagram is scaled to the height left under the copy,
   and when that gets too small JS steps the copy down (data-fit 1 / 2: tighter padding + gaps, then smaller type; only on
   short viewports). Last resort (e.g. landscape phones): --s02-shift lifts the sticky stage so the copy scrolls away and
   the whole diagram stays in view. */
.aaom-lp .s02.is-pan[data-fit] .s02__stage{padding-top:24px}
.aaom-lp .s02.is-pan[data-fit] .s02__head{gap:14px}
.aaom-lp .s02.is-pan[data-fit="2"] .s02__stage{padding-top:16px}
.aaom-lp .s02.is-pan[data-fit="2"] .s02__head{gap:10px}
.aaom-lp .s02.is-pan[data-fit="2"] .s02__title{font-size:32px}
.aaom-lp .s02.is-pan[data-fit="2"] .s02__text{font-size:13px;line-height:1.45}
.aaom-lp .s02.is-pan .s02__stage{
  top:calc(var(--lp-pin-top,0px) - var(--s02-shift,0px));
  height:calc(100vh - var(--lp-pin-top,0px) + var(--s02-shift,0px));
  height:calc(100svh - var(--lp-pin-top,0px) + var(--s02-shift,0px))
}

/* ---- s03.css ---- */
/* s03 — The Agentic Operating Model (Figma PS-63 1966:29323 → PS-61 1966:25643 → PS-62 1966:27484, 1440x892).
   Ad layout from AAOM Web Updates 2219:46480–46664 (1440x1280 frame), mapped to the 892 stage by the copy centre (y − 388).
   The collage is split into the 8 Figma ads (individual 1x/2x webp exports, blur baked in) on two layers:
   back (Figma groups 800/799, under the copy) and front (group 798, over the copy — "images move on top of it").
   Ads are placed in Figma px: left/top as % of the 1440x892 stage, width × --k (px per Figma px).
   Static (no JS / reduced motion): the stages cover the section and show the PS-61 layout.
   Animated (.is-s03-anim, js/s03.js): the section is a 200svh runway, both full-viewport stages stick at top 0 (navbar over them) while the
   copy scrolls normally through them; JS drifts each ad PS-63 → 61 → 62 and toggles the copy's blur/opacity states. */
.aaom-lp .s03{
  --k:max(.5px, 100vw / 1440);
  display:grid;
  grid-template:minmax(max(640px, 61.9444vw), auto) / 100%; /* 892/1440 */
  background:var(--lp-black);
  color:var(--lp-white);
  text-align:center;
  overflow:clip; /* not hidden: keeps the sticky stages working */
  /* the section's fractional bottom edge can leave a hairline of the light .aaom-lp background (#f1f1f1) against s04 on mobile
     (subpixel snapping / composited layers): overlap the next opaque black section by 2px so no seam can show */
  box-shadow:0 2px 0 var(--lp-black);
}
.aaom-lp .s03 > *{grid-area:1 / 1}
.aaom-lp .s03__stage{
  position:relative;
  overflow:hidden;
  pointer-events:none;
}
.aaom-lp .s03__stage--back{
  z-index:0;
  background-image:var(--lp-dots-dark-img);
  background-size:var(--lp-dot-w) var(--lp-dot-h);
  background-position:var(--lp-dot-x) var(--lp-dot-y,0px);
}
.aaom-lp .s03__stage--front{z-index:0} /* cards always behind the copy (DOM order keeps it over the back stage) */
.aaom-lp .s03__ad{
  position:absolute;
  top:calc(var(--y) * 100% / 892);
  left:calc(var(--x, 0) * 100% / 1440);
  width:calc(var(--w) * var(--k));
  max-width:none;
  height:auto;
  -webkit-user-select:none;user-select:none;
}
.aaom-lp .s03__ad--l{left:0;transform-origin:0 50%}
.aaom-lp .s03__ad--r{left:auto;right:0;transform-origin:100% 50%}
.aaom-lp .s03.is-s03-live :is(.s03__ad, .s03__stage){will-change:transform}

.aaom-lp .s03__body{
  z-index:1;
  align-self:center;
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px, 1.0610rem + 1.1268vw, 32px);
  justify-self:center;
  max-width:551px;
  padding-block:clamp(120px, 7.0599rem + 1.8779vw, 140px) clamp(120px, 5.8935rem + 6.8545vw, 193px);
}
.aaom-lp .s03__title{
  width:min(14.6em, 92vw); max-width:none; /* Figma 1828:14006: 776px, wider than the 551px copy column; breaks after "for" */
  font-size:clamp(32px, min(1.5357rem + 1.9816vw, 5.9534svh), 53.104px); /* also tracks the 892-tall frame on short viewports */
  line-height:.9;
  letter-spacing:-.02em;
}
.aaom-lp .s03__title-line{display:block;line-height:.75;margin-top:.3em} /* keeps the "g" descender clear of the "E" cap */
.aaom-lp .s03__title .lp-accent{font-size:1.2052em;line-height:.75;letter-spacing:-.0166em}
.aaom-lp .s03__text{max-width:min(544px, max(390px, 37.8vw)); /* stay inside the empty centre of the collage */font-size:14px;font-weight:500;line-height:1.53}

/* Animated runway */
.aaom-lp .s03.is-s03-anim{
  /* full viewport like Figma (892 tall frame, navbar floats over it) — not below the header, which cut the top/bottom ads */
  --s03-vh:100vh;
  --s03-vh:100svh;
  grid-template-rows:calc(var(--s03-vh) * 1.4); /* 100svh pin + .4 runway (was 1.65): the copy now leaves while the stage unpins (js/s03.js copy-out r < -0.62), no dead pin before s04 */
}
/* Ads may spill above the stage (over the black end of s02) so they can enter while the section is still scrolling in,
   without a hard cut at the stage top; x stays clipped. The bottom never spills: ads leave before the stage unpins. */
.aaom-lp .s03.is-s03-anim{overflow:visible;overflow-x:clip}
/* The yellow ad (Figma y 690+327 > 892) ends below the section while it rises out: lift the section over the next one (opaque black s04, later in DOM) so that spill isn't painted over / cut flat at the section bottom. */
.aaom-lp .s03.is-s03-anim{position:relative;z-index:1}
.aaom-lp .s03.is-s03-anim .s03__stage{overflow:visible;overflow-x:clip}
.aaom-lp .s03.is-s03-anim .s03__stage{
  position:sticky;
  top:0;
  align-self:start;
  height:var(--s03-vh);
}
/* The copy is part of the scene: it pins (and soft-pins, js/s03.js) centred with the stages instead of scrolling across the cards */
.aaom-lp .s03.is-s03-anim .s03__body{
  position:sticky;top:0;align-self:start;
  height:var(--s03-vh);box-sizing:border-box;
  justify-content:center;
  padding-block:0 calc(var(--s03-vh) * .0617); /* Figma 61/62: copy sits ~27px (of 892) above the centre */
}
/* Ads fade in before the copy (.is-s03-ads-in, js/s03.js) and never fade out: they keep rising with the scroll and leave through the top.
   Their rise is scroll-linked in JS (per depth layer, data-l 0 far → 3 near), so only opacity transitions here. */
.aaom-lp .s03.is-s03-anim .s03__ad{opacity:0;transition:opacity .3s ease}
.aaom-lp .s03.is-s03-anim.is-s03-ads-in .s03__ad{opacity:1;transition:opacity .45s cubic-bezier(.33,0,.2,1)}
.aaom-lp .s03.is-s03-anim.is-s03-ads-in .s03__ad[data-l="1"]{transition-delay:.05s}
.aaom-lp .s03.is-s03-anim.is-s03-ads-in .s03__ad[data-l="2"]{transition-delay:.1s}
.aaom-lp .s03.is-s03-anim.is-s03-ads-in .s03__ad[data-l="3"]{transition-delay:.15s}
/* Copy states (class on .s03__body): none = waiting below (blurred, hidden) · .is-in = PS-63/61 · .is-out = PS-62 */
.aaom-lp .s03.is-s03-anim :is(.s03__title, .s03__text){
  opacity:0;
  filter:blur(12px);
  transition:opacity .9s cubic-bezier(.33,0,.2,1), filter .9s cubic-bezier(.33,0,.2,1);
}
.aaom-lp .s03.is-s03-anim .s03__body.is-in :is(.s03__title, .s03__text){opacity:1;filter:none}
.aaom-lp .s03.is-s03-anim .s03__body.is-in .s03__text{transition-delay:.25s}
.aaom-lp .s03.is-s03-anim .s03__body.is-out :is(.s03__title, .s03__text){opacity:0;filter:blur(6px);transition-duration:.8s}
.aaom-lp .s03.is-s03-live .s03__body :is(.s03__title, .s03__text){will-change:opacity, filter}

@media (max-width:600px){
  .aaom-lp .s03__body{max-width:none}
  .aaom-lp .s03__text{max-width:none}
}
/* Mobile: the copy spans almost the full width, so the ads that drift behind it (--dim) are pushed back into the scene —
   darker + a touch more blur (same depth-of-field language as the baked-blur ads) — the two right ones nudge outward (--xm) and the
   bottom one sits a bit lower (--ym) so it reaches the copy later. */
@media (max-width:767px){
  .aaom-lp .s03__ad[style*="--xm"]{left:calc(var(--xm) * 100% / 1440)}
  .aaom-lp .s03__ad[style*="--ym"]{top:calc(var(--ym) * 100% / 892)}
  .aaom-lp .s03__ad--dim{filter:brightness(.5) blur(1.5px)}
  .aaom-lp .s03__ad--sharp{filter:brightness(.45) blur(2.5px)}
}

/* ---- s04.css ---- */
/* s04 — What is AAOM (Figma v4 frames PS-59 1964:16917 → PS-55 → PS-60 → PS-56 → PS-58 1929:175322, then
   WHAT IS AAOM 1929:157751 / 1937:41979). Static/no-JS layout = final frame PS-58 + closing statements.
   Venn box = 1084x689 (Figma group 1978:43752); circles/rings are CSS, the lens gradient is a 2x webp clipped
   by both circles, logos are SVG. js/s04.js pins the scene (desktop) and scrubs the sequence by scroll position through
   transforms/opacity only; css vars --s04-* below are the mobile/static defaults. */
.aaom-lp .s04{
  /* venn width: Figma 1084 max; on shorter viewports the graphic (.6356 W tall) stays ~2/3 of the height below the header
     (2560x1440 keeps 1084); floor 800 keeps the in-circle copy readable (list font scales with W, see .s04__list) */
  --s04-w:min(1084px, 100% - 2 * var(--lp-gutter), max(800px, (100svh - var(--lp-pin-top, 0px)) * 1.06));
  background:var(--lp-black);
  color:var(--lp-white);
  text-align:center;
}
.aaom-lp .s04__stage{
  position:relative;
  padding-block:clamp(56px, 2.3333rem + 3.7559vw, 92px) clamp(96px, 4.5986rem + 5.2347vw, 142px);
  overflow:clip;
  isolation:isolate;
}
.aaom-lp .s04__dots{
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:var(--lp-dots-dark-img);
  background-size:var(--lp-dot-w) var(--lp-dot-h);
  background-position:var(--lp-dot-x) var(--lp-dot-y,0px);
  pointer-events:none;
}
.aaom-lp .s04__head{display:flex;flex-direction:column;align-items:center;gap:clamp(16px, 0.8680rem + 0.5634vw, 22px)}
.aaom-lp .s04__title{
  max-width:900px;
  font-size:clamp(32px, 1.5745rem + 1.8159vw, 51.339px);
  line-height:.9;
  letter-spacing:-.02em;
}
.aaom-lp .s04__title-line{display:block}
.aaom-lp .s04__title .lp-accent{font-size:1.1045em;letter-spacing:-.01em}
.aaom-lp .s04__text{max-width:592px;font-size:clamp(15px, 0.9155rem + 0.0939vw, 16px);line-height:1.3;letter-spacing:-.01em}

/* Venn (1084x689 box, % of it) */
.aaom-lp .s04__venn{
  position:relative;
  width:var(--s04-w);
  margin:clamp(40px, 0.25rem + 6.25vw, 93.5px) auto calc(var(--s04-w) * .4576); /* line runs 379 + 117 below */
  container-type:inline-size;
  text-align:left;
}
.aaom-lp .s04__graphic{position:relative;aspect-ratio:1084/689}
.aaom-lp .s04__disc,
.aaom-lp .s04__ring,
.aaom-lp .s04__lens{position:absolute;top:0;width:63.4686%;height:100%;border-radius:50%}
.aaom-lp .s04__disc--l,.aaom-lp .s04__ring--l,.aaom-lp .s04__lens{left:0}
.aaom-lp .s04__disc--r,.aaom-lp .s04__ring--r{left:36.5314%}
.aaom-lp .s04__disc{z-index:1;background:#0b0b0b;opacity:var(--s04-fill, 1)}
.aaom-lp .s04__ring{z-index:2;box-shadow:inset 0 0 0 1px #d9d9d9}
.aaom-lp .s04__lens{z-index:3;overflow:hidden;opacity:var(--s04-lens, 1)}
.aaom-lp .s04__lens-r{position:absolute;top:0;left:57.5581%;width:100%;height:100%;border-radius:50%;overflow:hidden}
/* Lens (Figma 1978:43755 raster, 2x webp) = the final 292x561 overlap box in % of the circle, clipped by both circles;
   while the circles join, js/s04.js keeps it centred on the intersection and squeezes it (scaleX) to the overlap width. */
.aaom-lp .s04__lens-img{position:absolute;left:-.1453%;top:9.4994%;width:42.4419%;height:81.4199%;max-width:none}
.aaom-lp .s04__disc--l,.aaom-lp .s04__ring--l,.aaom-lp .s04__lens{transform:translate3d(var(--s04-lx, 0px), var(--s04-y, 0px), 0)}
.aaom-lp .s04__disc--r,.aaom-lp .s04__ring--r{transform:translate3d(var(--s04-rx, 0px), var(--s04-y, 0px), 0)}
.aaom-lp .s04__lens-r{transform:translate3d(var(--s04-dx, 0px), 0, 0)}
.aaom-lp .s04__aom{position:absolute;z-index:4;left:41.8819%;top:45.4282%;width:17.1495%;height:auto}

.aaom-lp .s04__col{position:absolute;z-index:5;top:32.0755%;display:flex;flex-direction:column;align-items:flex-start;gap:1.9373cqi}
.aaom-lp .s04__col--adobe{left:7.4723%;width:27.8598%}
.aaom-lp .s04__col--omnicom{left:68.2657%;width:24.6310%}
.aaom-lp .s04__col-title{margin:0;line-height:0}
.aaom-lp .s04__logo{display:block;height:auto}
.aaom-lp .s04__col--adobe .s04__logo{width:13.0074cqi}
.aaom-lp .s04__col--omnicom .s04__logo{width:21.8635cqi}
.aaom-lp .s04__list{display:flex;flex-direction:column;gap:1.25em;font-size:max(11.5px, 1.476cqi);line-height:1.25;letter-spacing:-.01em} /* 16 @1084: same text/circle ratio at any venn size */
.aaom-lp .s04__list strong{font-weight:700}

/* Connecting line: Figma line 87452 (x720, 682 long from inside the lens, white 0 → 1 gradient) + 16px dot */
.aaom-lp .s04__line{position:absolute;z-index:0;left:calc(50.0923% - 1px);top:56.0232%;width:2px;height:98.9840%;overflow:hidden}
.aaom-lp .s04__line-bar{position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,0) 13.05%,#fff)}
.aaom-lp .s04__dot{position:absolute;z-index:0;left:50.0923%;top:155.0072%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--lp-white)}

/* Closing statements */
.aaom-lp .s04__outro{display:flex;flex-direction:column;align-items:center;gap:clamp(32px, 1.7183rem + 1.2207vw, 42px)}
.aaom-lp .s04__statement{
  max-width:672px;
  font-size:clamp(24px, 1.2036rem + 1.2242vw, 37.038px);
  line-height:1.02;
  letter-spacing:-.02em;
}
.aaom-lp .s04__statement:first-child{max-width:840px}
.aaom-lp .s04__statement:not(:first-child){max-width:851px} /* Figma 1857:2131: breaks after "licenses," / "IP" / accent */
.aaom-lp .s04__statement .lp-accent{font-size:1.296em;line-height:.71;letter-spacing:-.01em}

/* Desktop pin (>=1024px, motion OK; js/s04.js adds .is-s04-pin). .s04__track is the scroll runway (1 + --pin-len viewports),
   .s04__pin sticks below the header for the whole scene: copy appears centred, rises to its place, then the venn is scrubbed in.
   The cord hangs below the pinned box (track margin-bottom = the space the venn used to keep for it). */
@media (min-width:1024px){
  .aaom-lp .s04__statement:not(:first-child) .lp-accent{display:block} /* Figma puts "under your control" on its own line */
  .aaom-lp .s04.is-s04-pin{
    --pin-len:2.5; /* keep in sync with R in js/s04.js (read from the track height, so only this value) */
    --s04-vh:calc(100vh - var(--lp-pin-top, 0px));
    --s04-vh:calc(100svh - var(--lp-pin-top, 0px));
    /* head (~160) + paddings must fit the pinned height: graphic height = .6356 W */
    --s04-w:min(1084px, 100% - 2 * var(--lp-gutter), max(680px, (var(--s04-vh) - 260px) / .6356));
  }
  .aaom-lp .s04.is-s04-pin .s04__stage{padding-top:0}
  .aaom-lp .s04.is-s04-pin .s04__track{position:relative;height:calc(var(--s04-vh) * (1 + var(--pin-len)));margin-bottom:calc(var(--s04-w) * .4576)}
  .aaom-lp .s04.is-s04-pin .s04__pin{position:sticky;top:var(--lp-pin-top, 0px);height:var(--s04-vh);box-sizing:border-box;padding-top:clamp(20px, 4svh, 44px)}
  .aaom-lp .s04.is-s04-pin .s04__venn{margin:clamp(20px, 3.4svh, 48px) auto 0}
  .aaom-lp .s04.is-s04-live .s04__head{will-change:transform}
  /* rings draw over the lens (their arcs outline it) */
  .aaom-lp .s04__ring{z-index:3;box-shadow:0 0 0 3px transparent;border:1px solid #d9d9d9;box-sizing:border-box} /* real border: Safari clips inset box-shadow arcs on composited rounded layers */
  /* transparent outset shadow widens the composited layer bounds: Safari snaps them to whole px and shaved the circles' bottom row */
  .aaom-lp .s04__disc{box-shadow:0 0 0 3px transparent}
  .aaom-lp .s04__lens{z-index:2}
}

/* JS-driven sequence (js/s04.js). Desktop: the pinned scene is scrubbed by scroll (head, circles, lens, logos, lists, AOM),
   then the cord drops and the closing statements rise with the scroll (inline transforms/opacity). Mobile: reveals (below). */
/* Promote only while the section is near the viewport (js toggles .is-s04-live). */
.aaom-lp .s04.is-s04-live :is(.s04__dots,.s04__disc,.s04__ring,.s04__lens,.s04__lens-r,.s04__lens-img,.s04__aom,.s04__col-title,.s04__list,.s04__text,.s04__statement,.s04__line,.s04__line-bar,.s04__dot){will-change:transform,opacity}

/* mobile-only pieces (Figma WHAT IS AAOM — Mobile 2196:4673): raster lens + Adobe/Omnicom marks inside the circles */
.aaom-lp :is(.s04__lens-m,.s04__mark){display:none}
@media (max-width:1023px){
  /* Figma 2196:4673 (390 frame): marks in the circles, the lists stack under the graphic (no cards), 1px cord + 12px dot */
  .aaom-lp .s04{--s04-w:calc(100% - 2 * var(--lp-gutter))}
  .aaom-lp .s04__stage{padding-block:65px 158px} /* Figma box 64; +1 lines the glyphs up with Figma's render */
  .aaom-lp .s04__head{gap:25px}
  .aaom-lp .s04__title{font-size:34px;line-height:1.02}
  .aaom-lp .s04__title .lp-accent{font-size:1.17647em;line-height:1.1165;letter-spacing:-.017em} /* Figma line box 44.66 (headline 114 tall) */
  .aaom-lp .s04__text{font-size:16px;line-height:1.35}
  .aaom-lp .s04__venn{margin:47.6px auto 32px;display:grid;gap:0}
  /* graphic spans the content container (centred when capped at 720) */
  .aaom-lp .s04__graphic{aspect-ratio:335.95/230;width:min(720px, 100%);justify-self:center}
  .aaom-lp .s04__disc,.aaom-lp .s04__ring{width:68.4626%}
  .aaom-lp .s04__disc--r,.aaom-lp .s04__ring--r{left:31.5374%}
  .aaom-lp .s04__disc{background:#0c0c0c}
  .aaom-lp .s04__ring{box-shadow:inset 0 0 0 .5px #a4a4a4} /* Figma .34px #a4a4a4 stroke */
  /* Figma stacking: left circle, right circle (its fill hides the left ring inside it), lens, AOM */
  .aaom-lp .s04__disc--r{z-index:3}
  .aaom-lp .s04__ring--r{z-index:4}
  .aaom-lp .s04__lens{z-index:5}
  .aaom-lp .s04__aom{z-index:6}
  .aaom-lp .s04__lens{left:31.538%;top:5.2157%;width:35.46%;height:89.4872%;border-radius:0;overflow:visible}
  .aaom-lp .s04__lens-r{display:none}
  .aaom-lp .s04__lens-m{display:block;width:100%;height:100%}
  .aaom-lp .s04__mark{display:block;position:absolute;height:auto}
  .aaom-lp .s04__mark--adobe{left:14.3478%;top:42.1739%;width:15.1549%}
  .aaom-lp .s04__mark--omnicom{left:68.7161%;top:40.8696%;width:16.2248%}
  .aaom-lp .s04__aom{left:37.252%;top:43.043%;width:25.737%;filter:invert(1)} /* white AOM on mobile */
  .aaom-lp .s04__col{position:relative;z-index:1;top:auto;left:auto;width:auto;gap:16.6px;padding:0} /* text above the cord */
  .aaom-lp .s04__col--adobe{margin-top:55px;gap:17px}
  .aaom-lp .s04__col--omnicom{margin-top:43.8px}
  .aaom-lp .s04__col--adobe .s04__logo{width:117px}
  .aaom-lp .s04__col--omnicom .s04__logo{width:196.66px}
  .aaom-lp .s04__list{gap:16.596px;font-size:13.277px;line-height:17px} /* Figma 1.3 rounds to 17px lines */
  /* Cord (client ask on top of Figma's 82px connector 2196:5555): born at the lens' lower cusp (circle intersection, 94.38% of
     the graphic, hidden behind the circles), it runs down past both rows (skipping them, see <600 below) to Figma's endpoint
     (49.8 + 82 below the Omnicom row, dot centred on its end). Positioned against the venn box + the in-flow dot. */
  .aaom-lp .s04__line{position:absolute;left:calc(50% - .5px);top:calc(min(720px, 100cqi) * 230 / 335.95 * .9438);bottom:6px;width:1px;height:auto}
  .aaom-lp .s04__line-bar{background:#fff}
  .aaom-lp .s04__dot{position:relative;left:auto;top:auto;justify-self:center;width:12px;height:12px;margin:125.8px 0 0}
  .aaom-lp .s04__statement,.aaom-lp .s04__statement:first-child,.aaom-lp .s04__statement:not(:first-child){max-width:none}
  .aaom-lp .s04__statement{font-size:27px;line-height:29px} /* Figma 1.08 → 29px lines */
  .aaom-lp .s04__statement .lp-accent{line-height:1.145;letter-spacing:-.0154em} /* Figma accent lines run ~11px taller (225/167 tall blocks) */
}
@media (min-width:600px) and (max-width:1023px){
  .aaom-lp .s04__venn{grid-template-columns:1fr 1fr;column-gap:24px}
  .aaom-lp .s04__graphic,.aaom-lp .s04__line,.aaom-lp .s04__dot{grid-column:1 / -1}
  .aaom-lp .s04__col--omnicom{margin-top:55px}
}
/* Single column (<600): the rows sit on the cord's path, so the cord is drawn as 3 gap segments hung off the rows (they follow
   any wrapping): cusp → Adobe (fades out over its last 24px), Adobe → Omnicom (fades in and out, peak mid-gap), Omnicom → dot
   (fades in over 24px). Nothing is drawn behind the rows. The 1-piece .s04__line only serves the 2-column layout. */
@media (max-width:599px){
  .aaom-lp .s04__line{display:none}
  .aaom-lp .s04__col::before,.aaom-lp .s04__col--omnicom::after{content:"";position:absolute;left:calc(50% - .5px);width:1px;pointer-events:none;transform-origin:50% 0}
  .aaom-lp .s04__col--adobe::before{top:calc(-55px - min(720px, 100cqi) * 230 / 335.95 * .0562);bottom:100%;background:linear-gradient(#fff calc(100% - 24px), rgba(255,255,255,0))}
  /* +24px of air so the middle piece clears both inks by ~16px: its visible (>10%) part is centred between the Adobe text's ink
     bottom (descender line above 470px, ~5px over the box bottom; ~2px otherwise) and the OMNICOM logo's top edge */
  .aaom-lp .s04__col--omnicom{margin-top:67.8px}
  .aaom-lp .s04__col--omnicom::before{top:-59px;height:45px;background:linear-gradient(rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0))}
  @media (min-width:471px){.aaom-lp .s04__col--omnicom::before{top:-56px;height:42px}}
  .aaom-lp .s04__col--omnicom::after{top:100%;height:131.8px;background:linear-gradient(rgba(255,255,255,0), #fff 24px)}
  .aaom-lp .s04.is-s04-io .s04__col::before,.aaom-lp .s04.is-s04-io .s04__col--omnicom::after{transform:scaleY(0);transition:transform .3s cubic-bezier(.65,0,.35,1)}
  .aaom-lp .s04.is-s04-io .s04__graphic.is-in ~ .s04__col::before,.aaom-lp .s04.is-s04-io .s04__graphic.is-in ~ .s04__col--omnicom::after{transform:none}
  .aaom-lp .s04.is-s04-io .s04__graphic.is-in ~ .s04__col--adobe::before{transition:transform .35s cubic-bezier(.45,0,.55,1) 1.1s}
  .aaom-lp .s04.is-s04-io .s04__graphic.is-in ~ .s04__col--omnicom::before{transition:transform .25s linear 1.45s}
  .aaom-lp .s04.is-s04-io .s04__graphic.is-in ~ .s04__col--omnicom::after{transition:transform .55s cubic-bezier(.35,0,.35,1) 1.7s}
}
/* first paint after (re)setup (page loaded already past the trigger): no transitions */
.aaom-lp .s04.is-s04-init,.aaom-lp .s04.is-s04-init *{transition:none!important}
/* mobile reveals (revert when scrolled back): .is-s04-io arms them, .is-in (per element) plays them */
.aaom-lp .s04.is-s04-io :is(.s04__head,.s04__col,.s04__statement,.s04__aom,.s04__lens,.s04__dot){opacity:0;transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.aaom-lp .s04.is-s04-io :is(.s04__head,.s04__col,.s04__statement){transform:translate3d(0,40px,0)}
/* circles: same magnet as desktop, by time. In (1.1s): glide in decelerating to 72% of the way (0-.55s), then the pull
   accelerates (x^2.5) to contact at .88s and clicks (+2.2% ≈ 3px overshoot, settles by 1.1s). Out (.6s): hold + 2% squeeze
   for ~.1s, then snap off (ease-out). linear() curves sampled from the js/s04.js magnet profile; cubic-bezier fallback. */
.aaom-lp .s04.is-s04-io .s04__disc--l,.aaom-lp .s04.is-s04-io .s04__ring--l{--s04-lx:-60%;opacity:0;transition:transform .6s cubic-bezier(.4,-.06,.2,1),opacity .6s ease}
.aaom-lp .s04.is-s04-io .s04__disc--r,.aaom-lp .s04.is-s04-io .s04__ring--r{--s04-rx:60%;opacity:0;transition:transform .6s cubic-bezier(.4,-.06,.2,1),opacity .6s ease}
.aaom-lp .s04.is-s04-io .s04__graphic.is-in :is(.s04__disc,.s04__ring){transition:transform 1.1s cubic-bezier(.45,.05,.2,1.12),opacity .8s ease}
@supports (transition-timing-function:linear(0, 1)){
  .aaom-lp .s04.is-s04-io :is(.s04__disc,.s04__ring){transition-timing-function:linear(0, -0.0133 4.2%, -0.0199 8.3%, -0.0164 12.5%, -0.0046 16.7%, 0.1001 20.8%, 0.2349 25%, 0.3554 29.2%, 0.4626 33.3%, 0.5572 37.5%, 0.64 41.7%, 0.7118 45.8%, 0.7733 50%, 0.8254 54.2%, 0.8688 58.3%, 0.9044 62.5%, 0.9328 66.7%, 0.955 70.8%, 0.9717 75%, 0.9836 79.2%, 0.9916 83.3%, 0.9965 87.5%, 0.999 91.7%, 0.9999 95.8%, 1),ease}
  .aaom-lp .s04.is-s04-io .s04__graphic.is-in :is(.s04__disc,.s04__ring){transition-timing-function:linear(0, 0.0651 2.5%, 0.1271 5%, 0.186 7.5%, 0.2419 10%, 0.2947 12.5%, 0.3445 15%, 0.3912 17.5%, 0.4349 20%, 0.4755 22.5%, 0.513 25%, 0.5475 27.5%, 0.5789 30%, 0.6072 32.5%, 0.6325 35%, 0.6548 37.5%, 0.6739 40%, 0.69 42.5%, 0.7031 45%, 0.7131 47.5%, 0.72 50%, 0.7258 52.5%, 0.7332 55%, 0.7429 57.5%, 0.7554 60%, 0.7711 62.5%, 0.7904 65%, 0.8137 67.5%, 0.8413 70%, 0.8734 72.5%, 0.9104 75%, 0.9525 77.5%, 1 80%, 1.0177 82.5%, 1.022 85%, 1.0194 87.5%, 1.0139 90%, 1.0082 92.5%, 1.0037 95%, 1.0009 97.5%, 1),ease}
}
.aaom-lp .s04.is-s04-io .s04__graphic.is-in .s04__ring{opacity:1}
.aaom-lp .s04.is-s04-io .s04__graphic.is-in .s04__disc{opacity:var(--s04-fill,1)}
.aaom-lp .s04.is-s04-io .s04__line-bar{transform:scaleY(0);transform-origin:50% 0;transition:transform .75s cubic-bezier(.65,0,.35,1)}
.aaom-lp .s04.is-s04-io .is-in:is(.s04__head,.s04__col,.s04__statement,.s04__aom,.s04__lens,.s04__dot){opacity:1;transform:none}
.aaom-lp .s04.is-s04-io .s04__graphic.is-in :is(.s04__disc,.s04__ring){--s04-lx:0px;--s04-rx:0px}
.aaom-lp .s04.is-s04-io .s04__graphic.is-in .s04__lens{opacity:1;transition-delay:.45s} /* overlap starts ~.41s */
.aaom-lp .s04.is-s04-io .s04__graphic.is-in .s04__aom{opacity:1;transition-delay:.75s} /* lands with the click (.88s) */
/* cord + dot wait for the circles' join (1.1s) to finish; the cord draws through both rows, the dot lands as it ends */
.aaom-lp .s04.is-s04-io .s04__line.is-in .s04__line-bar{transform:none;transition-duration:1.3s;transition-delay:1.1s}
.aaom-lp .s04.is-s04-io .s04__line.is-in + .s04__dot{opacity:1;transition-delay:2.2s}

/* ---- s05.css ---- */
/* ==== s05 — How it works + Solution: ONE pinned, scroll-driven section (js/s05.js) ====
   Static by default (mobile, reduced motion, short viewports): intro + sphere arc, then a click accordion
   with the active step's visual. The pinned choreography only runs inside the media query at the bottom. */
.aaom-lp .s05{
  --pin-len:5.1; /* pinned scroll length in viewport heights: keep in sync with T.end in js/s05.js */
  overflow:clip;
}
.aaom-lp .s05__anchor{position:absolute;scroll-margin-top:var(--lp-pin-top, 0px);left:0;top:0;width:1px;height:1px;pointer-events:none}
.aaom-lp .s05__intro{position:relative;z-index:1;margin-inline:var(--lp-gutter);padding-block:64px 32px}
.aaom-lp .s05__eyebrow{
  margin:0;
  font-size:clamp(12px, 0.6961rem + 0.2300vw, 14.45px);
  line-height:.9;
  letter-spacing:.48em;
  text-transform:uppercase;
}
.aaom-lp .s05__title{
  margin-top:clamp(16px, 0.8460rem + 0.6573vw, 23px);
  font-size:clamp(34px, 1.7046rem + 1.7938vw, 53.104px);
  line-height:.9;
  letter-spacing:-.02em;
}
.aaom-lp .s05__title .lp-accent{font-size:1.205em;line-height:.75;letter-spacing:-.016em}
.aaom-lp .s05__text{
  max-width:570px;
  margin-top:clamp(20px, 0.9639rem + 1.2207vw, 33px);
  font-size:clamp(15px, 0.9155rem + 0.0939vw, 16px);
  line-height:1.25;
  letter-spacing:-.01em;
}
/* Static: orbs as a horizontal arc under the text (column rotated -90deg) */
.aaom-lp .s05__orbs{position:relative;width:100%;aspect-ratio:834/381;margin-bottom:clamp(32px, 1.6479rem + 1.4085vw, 48px)}
.aaom-lp .s05__arc{
  position:absolute;left:50%;top:50%;
  width:calc(100% * 381 / 834);height:calc(100% * 834 / 381);
  transform:translate(-50%,-50%) rotate(-90deg) scale(.86);
}
.aaom-lp .s05__orb{
  position:absolute;left:calc(var(--x) / 381 * 100%);top:calc(var(--y) / 834 * 100%);
  width:calc(var(--d) / 381 * 100%);aspect-ratio:1;
}
.aaom-lp .s05__orb img,
.aaom-lp .s05__orb-ink{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;border-radius:50%}
.aaom-lp .s05__orb-blur,
.aaom-lp .s05__orb-ink{opacity:0}
.aaom-lp .s05__orb-ink{background:#000}
.aaom-lp .s05__bg,
.aaom-lp .s05__dotsup,
.aaom-lp .s05__fade,
.aaom-lp .s05__veil,
.aaom-lp .s05__lines,
.aaom-lp .s05__rail{display:none}

/* ---- Static solution: step accordion + visual of the open step ---- */
.aaom-lp .s05__sol{position:relative;z-index:1;margin-inline:var(--lp-gutter);padding-block:16px 32px}
.aaom-lp .s05__steps{position:relative;margin:0;padding:0 0 0 44px;list-style:none} /* ring (25px) flush with the container */
.aaom-lp .s05__steps::before{
  content:"";position:absolute;left:12px;top:var(--rail-top, 12.5px);height:var(--rail-h, calc(100% - 31.5px));width:1px;background:#000;
}
.aaom-lp .s05__step{position:relative;margin:0;transition:margin-bottom .45s cubic-bezier(.4,0,.2,1)}
.aaom-lp .s05__step.is-active{margin-bottom:31px}
.aaom-lp .s05__h{margin:0;font:inherit}
.aaom-lp .s05__btn{
  position:relative;display:flex;align-items:center;width:100%;min-height:38px;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
}
.aaom-lp .s05__btn:focus-visible{outline:2px solid #000;outline-offset:4px;border-radius:2px}
.aaom-lp .s05__mark{position:absolute;left:-31.5px;top:19px;width:0;height:0;transition:top .45s cubic-bezier(.4,0,.2,1)}
.aaom-lp .s05__dot,
.aaom-lp .s05__ring{position:absolute;border-radius:50%;font-style:normal}
.aaom-lp .s05__dot{left:-6.5px;top:-6.5px;width:13px;height:13px;background:#000;transition:transform .35s ease}
.aaom-lp .s05__ring{
  left:-12.5px;top:-12.5px;width:25px;height:25px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  border:1px solid #000;background:#fff;
  font-size:12.446px;line-height:1;letter-spacing:-.02em;color:#000;
  opacity:0;transform:scale(.4);transition:opacity .3s ease, transform .45s cubic-bezier(.4,0,.2,1);
}
.aaom-lp .s05__step.is-active .s05__mark{top:12.5px}
.aaom-lp .s05__step.is-active .s05__dot{transform:scale(0)}
.aaom-lp .s05__step.is-active .s05__ring{opacity:1;transform:none}
.aaom-lp .s05__label{font-size:11.25px;font-weight:600;line-height:.9;letter-spacing:-.04em}
.aaom-lp .s05__name{display:none;font-size:clamp(22px, 1.2566rem + 0.5053vw, 27.381px);font-weight:700;line-height:1.07;letter-spacing:-.02em}
.aaom-lp .s05__step.is-active .s05__btn{display:block;min-height:0}
.aaom-lp .s05__step.is-active .s05__label{display:none}
.aaom-lp .s05__step.is-active .s05__name{display:block}
/* copy top = ring top: pull the title up by its cap-top offset (measured, not text-box-trim: no Firefox support) */
.aaom-lp .s05__step.is-active .s05__name{margin-top:-.157em}
.aaom-lp .s05__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1), visibility 0s .45s}
.aaom-lp .s05__step.is-active .s05__panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1)}
.aaom-lp .s05__ptext{
  min-height:0;overflow:hidden;max-width:617px;margin:0;padding-top:14px;
  font-size:clamp(15px, 0.9155rem + 0.0939vw, 16px);line-height:1.43;
}

/* Static visuals: only the open step's group, scaled to the column (1 --u = 1 Figma px of the group) */
.aaom-lp .s05__visuals{position:relative;margin:0 var(--lp-gutter) 48px;pointer-events:none}
/* --wr = width of the group's box that is aligned to the container's right edge (default --w) */
.aaom-lp .s05__vis{
  position:relative;display:none;width:min(calc(var(--wr, var(--w)) * 1px), 100%);aspect-ratio:var(--wr, var(--w))/var(--h);margin-inline:auto 0;
  container-type:inline-size;--u:calc(100cqw / var(--wr, var(--w)));
}
.aaom-lp .s05__vis[data-step="3"]{--wr:778.5} /* the "Senior Copywriter" pill sticks out of the Figma group */
.aaom-lp .s05__vis[data-step="4"]{--wr:796}   /* 2nd post column; the 3rd one bleeds past the container */
.aaom-lp .s05__vis.is-on{display:block;animation:s05-in .5s cubic-bezier(.16,1,.3,1)}
@keyframes s05-in{from{opacity:0;transform:translateX(24px)}}
.aaom-lp .s05__vis img{display:block;max-width:none}
.aaom-lp .s05__abs{position:absolute;left:calc(var(--l) * var(--u));top:calc(var(--t) * var(--u))}
.aaom-lp img.s05__abs{width:calc(var(--cw) * var(--u));height:auto}
.aaom-lp .s05__col{-webkit-mask-image:linear-gradient(transparent, #000 7%, #000 93%, transparent);mask-image:linear-gradient(transparent, #000 7%, #000 93%, transparent)}

/* Step 1 — Insight callout (Figma 2072:36443) */
.aaom-lp .s05__insight{
  width:calc(520 * var(--u));height:calc(311 * var(--u));box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:space-between;padding:calc(32 * var(--u));
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(calc(28 * var(--u)));backdrop-filter:blur(calc(28 * var(--u)));border-radius:calc(32 * var(--u));
  box-shadow:0 calc(24 * var(--u)) calc(48 * var(--u)) rgba(0,0,0,.08), 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.05);
  font-family:var(--lp-sans);
}
.aaom-lp .s05__insight p{margin:0}
.aaom-lp .s05__insight-head{display:flex;align-items:center;gap:calc(16 * var(--u))}
.aaom-lp .s05__insight-ico{display:flex;align-items:center;justify-content:center;flex:none;width:calc(56 * var(--u));height:calc(56 * var(--u));border-radius:50%;background:#e4e4e4}
.aaom-lp .s05__insight-ico img{width:calc(28 * var(--u));height:calc(28 * var(--u))}
.aaom-lp .s05__insight-kicker{margin-bottom:calc(8 * var(--u)) !important;font-size:calc(12 * var(--u));font-weight:500;line-height:1.2;color:#4a4a4a}
.aaom-lp .s05__insight-title{font-size:calc(20 * var(--u));font-weight:700;line-height:1.2;color:#111827}
.aaom-lp .s05__insight-body{font-size:calc(18 * var(--u));line-height:1.5;letter-spacing:calc(-.18 * var(--u));color:#4b5563}
.aaom-lp .s05__insight-foot{display:flex;justify-content:flex-end}
.aaom-lp .s05__insight-btn{
  display:flex;align-items:center;justify-content:center;width:calc(195 * var(--u));height:calc(48 * var(--u));margin-right:calc(-2 * var(--u));
  border-radius:calc(40 * var(--u));background:#1b1b1b;color:#fff;
  font-size:calc(18 * var(--u));font-weight:600;line-height:1.2;letter-spacing:calc(.18 * var(--u));white-space:nowrap;
}
.aaom-lp .s05__insight-arrow{position:relative;flex:none;width:calc(48 * var(--u));height:calc(48 * var(--u));border-radius:50%;background:#1b1b1b}
.aaom-lp .s05__insight-arrow img{position:absolute;left:calc(17.1 * var(--u));top:calc(16.72 * var(--u));width:calc(14.56 * var(--u));height:auto}

/* Step 4 — Launch button (Figma node 2072:45220, "arrow" 2072:45221 + glow 2072:45222 + pill 2072:45230) */
.aaom-lp .s05__launch{width:calc(240 * var(--u));height:calc(79 * var(--u))}
.aaom-lp .s05__launch-glow{
  /* Figma: 110.248×95.214 box, linear-gradient(-33.786deg, #ff5900 17.657%, #3e81fa 83.626%), blur(42.846) */
  position:absolute;left:calc(152.61 * var(--u));top:calc(-9 * var(--u));width:calc(110.248 * var(--u));height:calc(95.214 * var(--u));
  border-radius:calc(17.623 * var(--u));
  background:linear-gradient(-33.786deg, #ff5900 17.657%, #3e81fa 83.626%);
  filter:blur(calc(42.846 * var(--u)));
}
.aaom-lp .s05__launch-pill,
.aaom-lp .s05__launch-ico{
  /* Figma: rgba(0,0,0,.7) fill, white border .769, backdrop blur 19.25. The blur is pre-rendered (page + the story photo
     behind, blurred, under the fill) because a backdrop-filter could not see the photo; the backdrop image keeps it opaque */
  position:absolute;top:calc(4.35 * var(--u));box-sizing:border-box;height:calc(72.3 * var(--u));
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), var(--s05-bd) 0 0/100% 100% no-repeat border-box;
  border:calc(.769 * var(--u)) solid #fff;border-radius:999px;
  color:#fff;
}
.aaom-lp .s05__launch-pill{--s05-bd:url("data:image/webp;base64,UklGRpoAAABXRUJQVlA4II4AAAAQDwCdASpRAZEAPm02mUmkIyKhICgAgA2JaW7hdrEbQAnsA99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOFAAA/v/GgAAAAAAAAAAA");left:0;width:calc(168.38 * var(--u));padding:0;font-size:calc(27.141 * var(--u));font-weight:600;line-height:1.2;letter-spacing:calc(.2714 * var(--u));white-space:nowrap}
.aaom-lp .s05__launch-ico{--s05-bd:url("data:image/webp;base64,UklGRkgBAABXRUJQVlA4IDwBAACQEACdASqRAJEAPm0ylUckMyIhKpLqQmANiWlu3V48q9AfgK8cyIr1TlqVsDaklDy2dac5QrAka3srkQ9p88GG8a3rf0J3lWdfzmlJ92FvEID4E9lHt36vLuXH8VYYy0UW+asWBMx6iWV/6Epo6WBsCbMuez1FDvZtcrOWbNndm3kiHA7Q6nawkYX+2gAA/vnuz8M0b6YlHtHt+GXrzH2gKyDLb+l6PU0/VKm1sDNsCoFm1BvM2NYHP4ftfsDvC+LUmQtngedc6z6O+DUxr45ebJOAgMS7xLLt65IpdsHDawiKBf8Fihj9tGYiUVpLoAkdY5fxHHz8NeFr70Uv2fy92jcXAO+HJKPe3RbFKAwOcIaSAqTl/1UVlYjzcpRQetmDcQCFJrRVNTOPcfpUkRk0mHokaLy4TuPx5AAA");left:calc(167.84 * var(--u));top:calc(4.04 * var(--u));width:calc(72.38 * var(--u));height:calc(72.38 * var(--u))}
.aaom-lp .s05__launch-ico img{width:calc(22 * var(--u));height:auto}

/* Mobile: open step's visual on top (fills the space left, scaled to fit), accordion at the bottom — one screen */
@media (max-width:1023px){
  .aaom-lp .s05__app{
    display:flex;flex-direction:column;box-sizing:border-box;
    height:calc(100vh - var(--lp-pin-top, 0px));height:calc(var(--s05-mvh, 100svh) - var(--lp-pin-top, 0px));min-height:480px; /* static: never follows the toolbar */
    padding-block:8px 4px;
  }
  .aaom-lp .s05__app>.s05__visuals{order:1;flex:1 1 0;min-height:0;margin:0 var(--lp-gutter) 16px;display:flex;align-items:center;justify-content:center;container-type:size} /* 16 + the list's 8px top padding = 24px to its first row */
  .aaom-lp .s05__app>.s05__visuals .s05__vis{width:100cqw;margin-inline:auto} /* width first: container-wide on phones */
  @media (orientation:landscape), (max-width:359px), (min-width:600px){.aaom-lp .s05__app>.s05__visuals .s05__vis{width:min(100cqw, 100cqh * var(--wr, var(--w)) / var(--h))}} /* phone on its side / 320px phones: fit the height */
  /* step 4: the full third post column (785 + 135.5) fits inside the painted box on mobile */
  .aaom-lp .s05__app>.s05__visuals .s05__vis[data-step="4"]{--wr:921}
  .aaom-lp .s05__app>.s05__visuals .s05__vis[data-step="2"]{--wr:656} /* its painted right edge is 2 units inside its box */
  /* step 5: the first prompt pill sticks 37px out of the group's left edge: the box takes it in (pieces shifted by --wl),
     so the painted illustration is centred / inside the gutter like the other steps */
  .aaom-lp .s05__app>.s05__visuals .s05__vis[data-step="5"]{--wl:37;--wr:939.5}
  .aaom-lp .s05__app>.s05__visuals .s05__abs{left:calc((var(--l) + var(--wl, 0)) * var(--u))}
  /* step 4: Launch sits 56 left of the group on desktop (Figma); on mobile it stays at the group edge, over the photo */
  .aaom-lp .s05__app>.s05__visuals .s05__launch{--wl:56}
  .aaom-lp .s05__app>.s05__visuals .s05__launch-pill{--s05-bd:url("data:image/webp;base64,UklGRjYBAABXRUJQVlA4ICoBAAAQFQCdASpRAZEAPm02mEkkOCKhI1OoawANiWlu4XExBDPWAX7J2TsnZOyYq6o06sRmJUAjslxLiXEuJcwZAGfCubM2jf4wMYYwxhjDGJgY8WA5QW1NqbU2ptU9JnBDyUgQLsnZOydqiIRMt7c6IF2TsnZO1RDkhQXgVDOoCBdk7J2TtO0gH8UOIVCNRAzGGMMbLMKRgAY4GYwxhjDGJdRm3RqjIF2TsnZOyrzJC9tUzAAA/v7a4FNzE7KYeLRDyexfKrvroNnv7p/fJSxKkvhW4AXO/4jlK4FKhpyX20GONPOOyjCPsIlpiPIA4ppktjWzDD5nUiZqy0ybSEI+ZhBgIphjh9GxZfVQBn/oks+cDlQsaHuna7x0g0ecp5SzDaF4CTh2z4AYpgAA")}
  .aaom-lp .s05__app>.s05__visuals .s05__launch-ico{--s05-bd:url("data:image/webp;base64,UklGRmwBAABXRUJQVlA4IGABAAAQDwCdASqRAJEAPm0wlkkkMqGhIbM5mlANiWlu4ECZSt4WWKmPB7RMzrMAkQ7kxlyPqj5qDtiFDRBCvB7bqczLb9OUIRPSVWO9QhNTEZURsluw8O2n0y0N1iBkxkPBFvpxPJXyATA+N5WudbO92sPlE7UbI1LLjtpu01fh8XS/QsAA/u1vR3ZzzWjyrVRRan+6P4pHaQm/BRjLvR8/kqmTDHEia4Jl4vsWme9vyjpWrYT/Gto7hR7Oo5uCFLbGVcYvjWBuOhhtKvjNfIZIj1aePSoD8dH77rBNOrurDPc4PzADC+h+5SlST6Qa71NsN3FOvyv+j0DL9qowQMZKCi5zUmmfh6sgOUY6uBiGCg9/UvJ/9GyP44/4Z7Mu1vUL7C7ypMw2XRuZNUGcWRgU+cVsU3FnuaiGpCu5AdLDn/+ORPo6/3umas7MA9NeCYkPVArwhWkaOIpBLCT+volEAAAA")}
  /* the list has one fixed height, its tallest state (--s05-solh, js/s05.js sizeText): the illustration area above it is the
     same for every step and never resizes while the accordion animates; the accordion's reflow stays inside the list */
  .aaom-lp .s05__app>.s05__sol{order:2;flex:none;padding-block:8px 0;box-sizing:border-box;height:var(--s05-solh, auto)}
  .aaom-lp .s05.is-mpin .s05__app>.s05__sol{contain:layout}
  .aaom-lp .s05__app>.s05__sol.is-s05-measure{position:absolute;left:0;top:0;height:auto;visibility:hidden;pointer-events:none;contain:none}
  .aaom-lp .s05__app>.s05__sol.is-s05-measure *{transition:none!important}
  /* compact list (phones): the illustration is sized by WIDTH (container-wide), the list gives up the height it needs:
     closed steps are 18px rail beads (8px dots, 10px apart), the open title is one line, the text 13/1.3 */
  .aaom-lp .s05__app .s05__step{transition:margin .45s cubic-bezier(.4,0,.2,1)}
  .aaom-lp .s05__app .s05__btn{min-height:18px}
  .aaom-lp .s05__app .s05__mark{top:9px}
  .aaom-lp .s05__app .s05__dot{left:-4px;top:-4px;width:8px;height:8px}
  .aaom-lp .s05__app .s05__name{font-size:18px;line-height:1.1}
  .aaom-lp .s05__app .s05__name br{display:none}
  .aaom-lp .s05__app .s05__step:not(.is-active) :is(.s05__label,.s05__name){
    display:block;position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap
  }
  /* the open ring (25px, centred 10px down) pokes 2.5px above its row: the top margin keeps it 10px clear of the bead above */
  .aaom-lp .s05__app .s05__step.is-active{margin-block:7.5px 4px}
  .aaom-lp .s05__app .s05__step.is-active:first-child{margin-top:2.5px}
  .aaom-lp .s05__app .s05__step.is-active .s05__mark{top:10px}
  .aaom-lp .s05__app .s05__ptext{padding-top:0;font-size:13px;line-height:1.3}
  /* the gap above the text lives on the panel so it collapses with it (padding inside a 0fr row would keep 10px per closed step) */
  .aaom-lp .s05__app .s05__panel{padding-top:0;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1), padding-top .45s cubic-bezier(.4,0,.2,1), visibility 0s .45s}
  .aaom-lp .s05__app .s05__step.is-active .s05__panel{padding-top:6px;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1), padding-top .45s cubic-bezier(.4,0,.2,1)}
}
/* Mobile pin: the app screen sticks while the stage's ::after (the scroll track) passes; js maps it to steps */
@media (max-width:1023px) and (prefers-reduced-motion:no-preference){
  /* static geometry: --s05-mvh = the small viewport height in px, measured by js/s05.js only when the WIDTH changes, so a
     toolbar show / hide (height-only resize) never resizes the pinned screen, its illustration or the scroll track */
  .aaom-lp .s05__stage{overflow-anchor:none}
  /* the track is plain bg (no section dots): it only ever shows below the pinned screen, where scrolling dots would drift
     against the screen's still grid (iOS 26 Safari, scrolling down, under the floating toolbar); the app's backing gives the dots */
  .aaom-lp .s05__stage::after{content:"";display:block;height:calc(4 * .6 * var(--s05-mvh, 100svh));background-color:var(--lp-bg)}
  .aaom-lp .s05__app{position:sticky;top:var(--lp-pin-top, 0px);height:calc(var(--s05-mvh, 100svh) - var(--lp-pin-top, 0px));overflow-anchor:none}
  /* the pinned screen carries its own opaque dot grid (also under the floating nav strip above it), so the dots stay
     still while it's pinned; js/s00.js gives it the section's phase at the pin start (the orbs scroll away over it).
     It also runs well past the screen's bottom (static small-viewport height): the area under the browser toolbar would
     otherwise show the section's scrolling grid (drifting, doubled rows). iOS 26 Safari paints page content BELOW 100lvh
     (behind its floating URL pill, svh = lvh there), so the backing goes lvh + safe area + half a viewport further down.
     Below the app is only the section's own track (same phase at the pin start) and s07 (paints over it). */
  .aaom-lp .s05__app::before{
    content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--lp-pin-top, 0px));bottom:0;z-index:-1;pointer-events:none;
    bottom:calc(min(0px, var(--s05-mvh, 100svh) - 100lvh) - env(safe-area-inset-bottom, 0px) - 50lvh);
    background-color:var(--lp-bg);background-image:var(--lp-dots-light-img);background-size:var(--lp-dot-w) var(--lp-dot-h);
    background-position:var(--lp-dot-x) calc(var(--lp-dot-y, 0px) + var(--lp-pin-top, 0px));
  }
  .aaom-lp .s05__orbs{z-index:1}
  /* carousel like desktop: the open visual leaves to the left, the next comes in from the right (reverse going back) */
  .aaom-lp .s05.is-mpin .s05__app>.s05__visuals{position:relative}
  .aaom-lp .s05.is-mpin .s05__vis{
    display:block;position:absolute;left:50%;top:50%;animation:none;opacity:0;visibility:hidden;
    transform:translate3d(calc(-50% + 100cqw),-50%,0);
    transition:transform .8s cubic-bezier(.65,0,.35,1),opacity .5s ease .15s,visibility 0s .8s;
  }
  .aaom-lp .s05.is-mpin .s05__vis.is-past{transform:translate3d(calc(-50% - 100cqw),-50%,0);transition-delay:0s,0s,.8s}
  .aaom-lp .s05.is-mpin .s05__vis.is-on{opacity:1;visibility:visible;transform:translate3d(-50%,-50%,0);transition-delay:0s,.15s,0s}
}

@media (min-width:1024px){
  .aaom-lp .s05__intro{max-width:650px;padding-block:clamp(64px, 0.0167rem + 16.9953vw, 245px) 48px}
  .aaom-lp .s05__orbs{max-width:760px;margin-inline:auto}
  /* static desktop (reduced motion / short viewport): list | visual */
  .aaom-lp .s05__stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}
  .aaom-lp .s05__stage>*,
  .aaom-lp .s05__app>*{grid-column:1/-1}
  .aaom-lp .s05__app{display:contents}
  .aaom-lp .s05__sol{grid-column:1;padding-bottom:64px}
  .aaom-lp .s05__visuals{grid-column:2;margin:0 var(--lp-gutter) 64px 0}
}

/* ==== Pinned choreography (desktop, motion OK). The section is the scroll track; .s05__pin sticks.
   Stage = Figma frame 1440×823 centred in the viewport; 1 --u = 1 Figma px. ==== */
@media (min-width:1024px) and (min-height:560px) and (prefers-reduced-motion:no-preference){
  /* the pin covers the WHOLE viewport (top:0): the sticky nav floats over it; eyebrow 48px / list bottom 77px are measured from the viewport edges */
  .aaom-lp .s05{--vh:100svh;height:calc((var(--pin-len) + 1) * var(--vh));overflow:visible}
  .aaom-lp .s05__anchor{scroll-margin-top:0}
  .aaom-lp .s05__pin{
    position:sticky;top:0;height:var(--vh);overflow:clip;
    container-type:size;
  }
  /* Dot grid as its own static layer pinned with the stage (the step graphics travel over it; still while pinned, js/s00.js sets its phase) */
  .aaom-lp .s05.lp-dots-light{background-image:none}
  .aaom-lp .s05__bg{
    display:block;position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none;
    background-image:var(--lp-dots-light-img);background-size:var(--lp-dot-w) var(--lp-dot-h);background-position:var(--lp-dot-x) var(--lp-dot-y,0px);
  }
  /* Horizontally the stage follows the shared landing container (--lp-gutter, resolved against the pin width):
     Figma x=38 (left edge of the bullet column: the open step's numbered ring) sits on the container's left edge, the
     eyebrow/headline start there too; the step visuals are anchored to its right edge (see .s05__vis).
     Figma container = x 38 → 1386 (1348 px). */
  .aaom-lp .s05__stage{
    --gc:max(24px, 50cqw - 665px);
    /* u = the container fit (as before) ... or, on a TALL pin, the largest scale that lets the 823u frame fill >= 1/1.2 of the
       pin height (never wider than the screen; cap 1.35). Short pins keep the container fit (the max() picks it). */
    --u:max(min((100cqw - 2 * var(--gc)) / 1348, 100cqh / 823, 1.35px), min(100cqh / 988, (100cqw - 48px) / 1348, 1.35px));
    /* the bullet column's left edge: the container edge, pulled in only when the scaled frame needs the room (--cw = 1348u then) */
    --g:max(24px, min(var(--gc), (100cqw - 1348 * var(--u)) / 2));
    --cw:calc(100cqw - 2 * var(--g));
    /* full-height stage: --dyc centres the 823u frame (intro text / spheres), --dyg centres the step graphics between the eyebrow (--eyt) and the
       list's bottom edge (77px above the viewport); the step list itself is bottom-anchored in js/s05.js */
    --dyc:calc((100cqh - 823 * var(--u)) / 2);
    /* eyebrow top (px): Figma y=48 inside the 823u frame centred in the area BELOW the nav (as before the full-height stage), never closer than 102px to the top (nav pill) */
    --eyt:max(calc(48 * var(--u) + var(--dyc) + var(--lp-nav-h, 74.08px) / 2), 102px);
    --dyg:calc((var(--eyt) + 11 * var(--u) + 100cqh - 77px) / 2 - 397 * var(--u));
    position:absolute;left:calc(var(--g) - 38 * var(--u));top:0;
    width:calc(1440 * var(--u));height:100cqh;
    display:block;
  }
  .aaom-lp .s05__stage>*,
  .aaom-lp .s05__app>*{position:absolute;left:0;top:0;margin:0;padding:0}
  .aaom-lp .s05__intro{z-index:3}
  .aaom-lp .s05__eyebrow{
    position:absolute;left:calc(38 * var(--u));top:0;margin:0;white-space:nowrap;
    font-size:calc(14.45 * var(--u));
    transform:translate(calc(3 * var(--u)), calc(245 * var(--u)));
  }
  .aaom-lp .s05__head{position:absolute;left:calc(38 * var(--u));top:calc(281 * var(--u) + var(--dyc));width:calc(600 * var(--u))}
  .aaom-lp .s05__title{margin:0;font-size:calc(53.104 * var(--u))}
  .aaom-lp .s05__text{max-width:calc(570 * var(--u));margin-top:calc(33 * var(--u));font-size:calc(16 * var(--u))}
  .aaom-lp .s05__orbs,
  .aaom-lp .s05__arc{position:absolute;inset:0;width:auto;height:auto;max-width:none;aspect-ratio:auto;margin:0;transform:none}
  .aaom-lp .s05__orb{
    left:0;top:0;width:calc(217 * var(--u));transform-origin:50% 50%;
    transform:translate(calc((var(--fx) - 108.5) * var(--u)), calc((var(--fy) - 108.5) * var(--u))) scale(calc(var(--fd) / 217));
  }
  .aaom-lp .s05__fade{
    display:block;left:auto;right:-50cqw;width:calc(51% + 50cqw);z-index:1;pointer-events:none;
  }
  /* The stage can be shorter/narrower than the pin (it is centred): the fades extend past its edges (solid .8 there) so a
     sphere outside the 1440×823 frame never shows a hard cut. */
  .aaom-lp .s05__fade--top{top:-50cqh;height:calc(36.93% + 50cqh);background:linear-gradient(to bottom,rgba(241,241,241,.8) 50cqh,rgba(241,241,241,0))}
  .aaom-lp .s05__fade--bottom{top:auto;bottom:-50cqh;height:calc(44% + 50cqh);background:linear-gradient(to top,rgba(241,241,241,.8) 50cqh,rgba(241,241,241,0))}
  /* Figma f03: frosted band over the lower part of the frame */
  .aaom-lp .s05__veil{
    display:block;top:calc(440 * var(--u));width:100%;height:calc(420 * var(--u));z-index:1;opacity:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(241,241,241,0),rgba(241,241,241,.85) 22%,rgba(241,241,241,.9));
  }
  /* Dot grid repeated ABOVE the fades/veil (same box + phase as .s05__bg, below the connector/visuals): the frosted
     washes over the spheres no longer hide the dots */
  .aaom-lp .s05__dotsup{
    display:block;left:calc(38 * var(--u) - var(--g));top:0;width:100cqw;height:100cqh;
    z-index:0;pointer-events:none;
    background-image:var(--lp-dots-light-img);background-size:var(--lp-dot-w) var(--lp-dot-h);background-position:var(--lp-dot-x) var(--lp-dot-y,0px);
  }
  /* The spheres sit ABOVE the dot layers (dots are covered wherever a sphere is, visible everywhere else), no per-frame work */
  .aaom-lp .s05__orbs{z-index:1}
  /* Connector box = the whole pin (it bleeds past the stage to the frame edges); the mask is static, so the line fades
     in from the bullet list and out toward the right frame edge while the strip inside slides (js/s05.js) */
  .aaom-lp .s05__lines{
    --fade:linear-gradient(to right,
      transparent calc(var(--g) + 8 * var(--u)), rgba(0,0,0,.4) calc(var(--g) + 220 * var(--u)), #000 calc(var(--g) + 500 * var(--u)),
      #000 calc(100% - var(--g) - 60 * var(--u)), rgba(0,0,0,.3) 100%);
    display:block;left:calc(38 * var(--u) - var(--g));top:0;width:100cqw;height:100cqh;
    z-index:1;pointer-events:none;-webkit-mask-image:var(--fade);mask-image:var(--fade);
  }
  /* the strip's origin = stage x 0 (track coordinates in Figma px; size/path set in measure()) */
  .aaom-lp .s05__track{
    position:absolute;left:calc(var(--g) - 38 * var(--u));top:0;
    display:block;max-width:none;max-height:none;overflow:visible;opacity:0;visibility:hidden;
  }
  .aaom-lp .s05__visuals{inset:0;width:100%;height:100%;margin:0;z-index:5} /* above the copy (.s05__sol z4): graphics pass over it */
  .aaom-lp .s05__vis,
  .aaom-lp .s05__vis.is-on{
    position:absolute;display:block;margin:0;container-type:normal;animation:none;--u:inherit;
    left:calc(var(--cw) + (38 - var(--wr, var(--w))) * var(--u));top:calc(var(--y) * var(--u) + var(--dyg));
    width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));aspect-ratio:auto;
  }
  /* step 4: the cut-off 3rd post column bleeds to the pin edge
     (hidden when the gutter is so wide it would float on its own) */
  .aaom-lp .s05__vis>*{opacity:0}
  /* Illustration pieces are never see-through (the connector runs behind them and would show): soft/translucent
     pixels carry a page-coloured backing baked into the asset itself (4x webp renders of the Figma pieces, pre-flattened
     pixels in s05-s5-cards-bk.webp; glass pieces and the launch pill/circle are opaque inside). No SVG/CSS url()
     filters: WebKit runs those in software at 1x and re-runs them every frame. A "fade" is a lightening toward the page
     colour (--lite, set per layer in js/s05.js), not opacity. The launch glow is left out (it is only a halo).
     A travelling step graphic dissolves as a whole group instead (opacity/blur/scale on .s05__vis, js/s05.js). */
  .aaom-lp .s05__vis img.s05__abs,
  .aaom-lp .s05__launch-pill,
  .aaom-lp .s05__launch-ico{filter:var(--lite,none)}
  /* the insight card: its translucent white over the page colour, as one opaque fill (= .82 white over #f1f1f1) */
  .aaom-lp .s05__insight{background:#fcfcfc;filter:var(--lite,none)}
  .aaom-lp .s05__launch-glow{opacity:var(--glow,1)}
  .aaom-lp .s05__sol{inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
  .aaom-lp .s05__rail{
    display:block;position:absolute;left:calc(50 * var(--u));top:0;width:1px;height:100px;background:#000;
    transform-origin:0 0;transform:scaleY(0);
  }
  .aaom-lp .s05__steps{position:absolute;inset:0;padding:0}
  .aaom-lp .s05__steps::before{display:none}
  .aaom-lp .s05__step,
  .aaom-lp .s05__step.is-active{position:absolute;left:0;top:0;width:calc(720 * var(--u));margin:0;transition:none}
  .aaom-lp .s05__btn,
  .aaom-lp .s05__step.is-active .s05__btn{
    position:absolute;display:block;left:calc(30 * var(--u));top:calc(-12 * var(--u));
    width:calc(600 * var(--u));height:calc(35 * var(--u));min-height:0;pointer-events:auto;
  }
  .aaom-lp .s05__mark,
  .aaom-lp .s05__step.is-active .s05__mark{left:calc(20.5 * var(--u));top:calc(12 * var(--u));transition:none}
  .aaom-lp .s05__dot,
  .aaom-lp .s05__ring{transition:none}
  .aaom-lp .s05__dot{left:calc(-6.5 * var(--u));top:calc(-6.5 * var(--u));width:calc(13 * var(--u));height:calc(13 * var(--u))}
  .aaom-lp .s05__ring{left:calc(-12.5 * var(--u));top:calc(-12.5 * var(--u));width:calc(25 * var(--u));height:calc(25 * var(--u));font-size:calc(12.446 * var(--u))}
  .aaom-lp .s05__label,
  .aaom-lp .s05__name,
  .aaom-lp .s05__step.is-active .s05__label,
  .aaom-lp .s05__step.is-active .s05__name{position:absolute;display:block;left:calc(52 * var(--u));top:calc(12 * var(--u));white-space:nowrap}
  .aaom-lp .s05__label{font-size:max(9px, 11.25 * var(--u))}
  .aaom-lp .s05__name{--fs:max(20px, 27.381 * var(--u));font-size:var(--fs);opacity:0}
  .aaom-lp .s05__name br{display:inline}
  .aaom-lp .s05__panel,
  .aaom-lp .s05__step.is-active .s05__panel{
    position:absolute;display:block;left:calc(82 * var(--u));top:calc(2.14 * max(20px, 27.381 * var(--u)));
    width:calc(617 * var(--u));visibility:visible;opacity:0;transition:none;
  }
  /* width in em of the (floored) font size = Figma's 617 / 16: the line breaks stay the same as in Figma at any viewport, so the
     13px floor makes the block a bit taller (line-height) but never adds lines; the block grows downward (js: top-anchored list) */
  .aaom-lp .s05__ptext{max-width:none;width:38.5625em;padding-top:calc(14 * var(--u));font-size:max(13px, 16 * var(--u));overflow:visible}
  /* copy block top (title cap-top) = numbered ring top: name/panel lifted by 12u + the cap-top offset (.157em) */
  .aaom-lp .s05__name,
  .aaom-lp .s05__step.is-active .s05__name{top:calc(-.5 * var(--u) - .157 * var(--fs));margin-top:0}
  .aaom-lp .s05__panel,
  .aaom-lp .s05__step.is-active .s05__panel{top:calc(2.14 * max(20px, 27.381 * var(--u)) - 12.5 * var(--u) - .157 * max(20px, 27.381 * var(--u)))}
  /* compositor hints only while the pinned section is on screen (js toggles .is-live) */
  .aaom-lp .s05.is-live .s05__orb,
  .aaom-lp .s05.is-live .s05__step,
  .aaom-lp .s05.is-live .s05__rail{will-change:transform}
  .aaom-lp .s05.is-live .s05__track{will-change:transform,opacity}
  .aaom-lp .s05.is-live .s05__vis.is-near>*{will-change:transform,opacity}
  /* every element js animates gets a stable compositor layer (opacity/transform only), so a write never repaints its neighbours */
  .aaom-lp .s05.is-live :is(.s05__name,.s05__panel,.s05__ring,.s05__dot,.s05__label,.s05__mark,.s05__btn,.s05__intro>*){will-change:transform,opacity}
  /* the group's blur is written in a few discrete levels; the transition (compositor) smooths between them */
  .aaom-lp .s05.is-live .s05__vis{transition:filter .14s linear}
  /* no will-change:filter: the blur only exists mid-dissolve, so a settled graphic is a plain transform/opacity layer */
  .aaom-lp .s05.is-live .s05__vis.is-near{will-change:transform,opacity}
}

/* anti-skip gate parked: the dot layers sit at the parked scroll (--s05-dy, set by js/s05.js) instead of following the raw scroll */
.aaom-lp .s05.is-dothold .lp-dotmove{animation:none!important;transform:translate3d(0,var(--s05-dy,0px),0)!important}

/* ---- s07.css ---- */
/* ==== s07 — Human-in-the-loop (orbit rail + 2 people behind live text) ==== */
.aaom-lp .s07{
  display:grid;
  position:relative;
  overflow-x:clip;
  container-type:inline-size;
  --s07-ow:max(560px, 100%);
  --s07-pk:1;
}
.aaom-lp .s07>*{grid-area:1/1}
/* Dot grid on its own layer (same image / cell / phase as .lp-dots-light, painted from the section's top) so only the
   dots fade out over the last 4 rows (148px) into s08, which has none; last row stays faintly visible (~18%). */
.aaom-lp .s07.lp-dots-light{background-image:none}
.aaom-lp .s07::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--lp-dots-light-img);background-size:var(--lp-dot-w) var(--lp-dot-h);background-position:var(--lp-dot-x) var(--lp-dot-y,0px);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 148px),rgba(0,0,0,.78) calc(100% - 111px),rgba(0,0,0,.5) calc(100% - 74px),rgba(0,0,0,.3) calc(100% - 37px),rgba(0,0,0,.18));
  mask-image:linear-gradient(to bottom,#000 calc(100% - 148px),rgba(0,0,0,.78) calc(100% - 111px),rgba(0,0,0,.5) calc(100% - 74px),rgba(0,0,0,.3) calc(100% - 37px),rgba(0,0,0,.18));
}
/* Orbit stage (1440×1166 art box) scales with the viewport; below 560px it keeps 560px and is cropped by the section.
   All inner sizes use --u (1 design px, in cqw of the stage). It stays inside the section (no overlap with the previous one). */
.aaom-lp .s07__orbit{
  position:relative;
  width:var(--s07-ow);
  aspect-ratio:1440/1166;
  margin-inline:min(0px, (100% - var(--s07-ow)) / 2);
  container-type:inline-size;
  pointer-events:none;
}
/* Rings + dots. Only the rail is masked: the top band fades in softly so the outer ring never ends in a hard cut at
   the section edge (the people are never in the faded bands). */
.aaom-lp .s07__rail{
  position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 76%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 20%,#000 76%,transparent 100%);
}
.aaom-lp .s07__rail svg{display:block;width:100%;height:100%;overflow:visible}
/* Each person is anchored at the rail centre (720, 735) and placed by rotate(θ) translateX(r) rotate(-θ): it travels
   along the rail while the avatar + cursor stay upright. Static state = Figma frame 882 (js/s07.js scrubs 838 → 882). */
.aaom-lp .s07__person{
  --u:calc(100cqw / 1440 * var(--s07-pk));
  position:absolute;left:50%;top:63.0360%;
  width:calc(var(--d) * var(--u));aspect-ratio:1;
  margin:calc(var(--d) * var(--u) / -2) 0 0 calc(var(--d) * var(--u) / -2);
  /* --s07-pk < 1 (phones) shrinks the people and pulls them toward the inner ring (28.47cqw) by the same factor */
  transform:rotate(var(--a)) translateX(calc((28.47 + (var(--r) - 28.47) * var(--s07-pk)) * 1cqw)) rotate(calc(var(--a) * -1));
}
.aaom-lp .s07__person--a{--d:114;--r:38.032;--a:-29deg}
.aaom-lp .s07__person--b{--d:105.601;--r:37.726;--a:-198.49deg}
/* Exported avatar art includes the white border + drop shadow, so it overflows the circle box. */
.aaom-lp .s07__avatar{position:absolute;max-width:none;height:auto}
.aaom-lp .s07__person--a .s07__avatar{inset:calc(-38.2155 * var(--u));width:calc(190.431 * var(--u))}
.aaom-lp .s07__person--b .s07__avatar{inset:calc(-27.8315 * var(--u));width:calc(161.264 * var(--u))}
.aaom-lp .s07__cursor{position:absolute;display:block;overflow:visible}
.aaom-lp .s07__person--a .s07__cursor{left:calc(-35 * var(--u));top:calc(-39.5 * var(--u));width:calc(58.5 * var(--u));height:calc(62.5 * var(--u))}
.aaom-lp .s07__person--b .s07__cursor{left:calc(79.41 * var(--u));top:calc(-49.51 * var(--u));width:calc(54.63 * var(--u));height:calc(65.65 * var(--u))}
.aaom-lp .s07__content{
  position:relative;z-index:1;
  /* centred on the rings' centre (720, 735 in the 1440×1166 orbit box; % margin = orbit-width based) */
  align-self:start;justify-self:center;
  display:flex;flex-direction:column;align-items:center;
  width:min(100% - 48px, 659px);
  margin-top:calc(var(--s07-ow) * .51042);translate:0 -50%;
  text-align:center;
}
.aaom-lp .s07__icon{width:clamp(32px, 1.8239rem + 0.7512vw, 40px);height:auto}
.aaom-lp .s07__statement{
  margin-top:clamp(24px, 1.1479rem + 1.5023vw, 40px);
  font-size:clamp(22px, 1.0441rem + 1.4120vw, 37.038px);
  line-height:1.02;
  letter-spacing:-.02em;
  max-width:17.8em;
}
.aaom-lp .s07__statement--2{margin-top:clamp(24px, 1.3019rem + 0.8451vw, 33px)}
.aaom-lp .s07__statement .lp-accent{font-size:1.333em;font-weight:500;line-height:1.02;letter-spacing:-.01em;white-space:nowrap}
/* Mobile/tablet: the stage grows past the viewport (up to 158%) so the inner ring clears the copy by >=12px; the copy
   narrows to fit inside it. --s07-pk shrinks the people and pulls them in toward the inner ring so they stay about
   half visible at the viewport edges. */
@media (max-width:1023.98px){
  .aaom-lp .s07{--s07-ow:max(560px, 100%, min(158%, 960px))}
  /* static (reduced-motion) spots on screen-safe diagonals; js/s07.js keeps the animated people in these bands too */
  .aaom-lp .s07__person--a{--a:-60deg}
  .aaom-lp .s07__person--b{--a:-240deg}
}
@media (min-width:600px) and (max-width:1023.98px){
  .aaom-lp .s07__statement{max-width:min(17.8em, 48vw)}
}
@media (min-width:600px) and (max-width:767.98px){
  .aaom-lp .s07{--s07-pk:.8}
}
@media (max-width:599.98px){
  .aaom-lp .s07{--s07-pk:.55}
  .aaom-lp .s07__content{width:calc(var(--s07-ow) * .42)}
  .aaom-lp .s07__statement{font-size:min(20px, 5.6vw)}
}
/* Desktop: the copy scales with the rings (1 Figma px = 100cqw/1440) below 1440 so it keeps the Figma fit inside the
   inner ring instead of crowding it; capped at the Figma size above 1440. */
@media (min-width:1024px){
  /* Figma 882: the copy block's centre sits 7.5 design px above the rings' centre (498.5 vs 506) */
  .aaom-lp .s07__content{width:min(659px, 45.764cqw);margin-top:calc(100% * .50521)}
  .aaom-lp .s07__icon{width:min(40px, 2.7778cqw)}
  .aaom-lp .s07__statement{margin-top:min(40px, 2.7778cqw);font-size:min(37.038px, 2.5721cqw)}
  .aaom-lp .s07__statement--2{margin-top:min(33px, 2.2917cqw)}
}
/* Cursors: organic hand-like wander in a loop (independent translate + rotate cycles of different lengths, so the
   combined path never visibly repeats). Composited only; paused while the section is off screen (js adds .is-live). */
@keyframes s07-wander-a{
  0%{translate:0 0}18%{translate:calc(9 * var(--u)) calc(-6 * var(--u))}31%{translate:calc(14 * var(--u)) calc(3 * var(--u))}
  47%{translate:calc(4 * var(--u)) calc(11 * var(--u))}63%{translate:calc(-7 * var(--u)) calc(6 * var(--u))}
  79%{translate:calc(-10 * var(--u)) calc(-4 * var(--u))}100%{translate:0 0}
}
@keyframes s07-wander-b{
  0%{translate:0 0}14%{translate:calc(-8 * var(--u)) calc(5 * var(--u))}33%{translate:calc(-13 * var(--u)) calc(-5 * var(--u))}
  52%{translate:calc(-3 * var(--u)) calc(-12 * var(--u))}68%{translate:calc(8 * var(--u)) calc(-7 * var(--u))}
  86%{translate:calc(10 * var(--u)) calc(4 * var(--u))}100%{translate:0 0}
}
@keyframes s07-tilt{0%,100%{rotate:0deg}30%{rotate:-7deg}55%{rotate:4deg}80%{rotate:-3deg}}
@media (prefers-reduced-motion:no-preference){
  .aaom-lp .s07__cursor{transform-origin:0 0;animation:s07-wander-a 6.4s cubic-bezier(.45,.05,.55,.95) infinite, s07-tilt 4.1s ease-in-out infinite;animation-play-state:paused}
  .aaom-lp .s07__person--b .s07__cursor{transform-origin:100% 0;animation-name:s07-wander-b, s07-tilt;animation-duration:7.3s, 4.9s;animation-delay:-2.2s, -1.3s}
  .aaom-lp .s07.is-live .s07__cursor{animation-play-state:running;will-change:translate, rotate}
}

/* ---- s08.css ---- */
/* ==== s08 — Outcomes / Capabilities: pinned lock, vertical scroll scrubs the cards horizontally (js/s08.js adds .is-pin).
   Without JS / reduced motion: native horizontal scroll strip, no pin. ==== */
.aaom-lp .s08{
  padding-block:clamp(56px, 2.4657rem + 4.4131vw, 103px) clamp(48px, 2.6259rem + 1.5962vw, 65px);
  background:var(--lp-bg);
  overflow:clip;
}
.aaom-lp .s08__title{
  font-size:clamp(36px, 1.7670rem + 2.0608vw, 57.947px);
  line-height:.9;
  letter-spacing:-.02em;
}
.aaom-lp .s08__title .lp-accent{font-size:1.275em;line-height:.9;letter-spacing:-.01em}
.aaom-lp .s08__text{
  max-width:540px;
  margin-top:22px;
  font-size:clamp(15px, 0.9155rem + 0.0939vw, 16px);
  font-weight:500;
  line-height:1.53;
}
/* Full-bleed track: card 1 aligns with the container, next cards peek at the right edge */
.aaom-lp .s08__track{
  margin-top:clamp(32px, 1.5158rem + 2.0657vw, 54px);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-padding-inline:var(--lp-gutter-vw);
  scrollbar-width:none;
}
.aaom-lp .s08__track::-webkit-scrollbar{display:none}
.aaom-lp .s08__card:focus-visible{outline:2px solid #000;outline-offset:4px}
.aaom-lp .s08__cards{
  position:relative;
  display:flex;
  gap:clamp(16px, 0.2738rem + 3.0986vw, 49px);
  width:max-content;
  padding-inline:var(--lp-gutter-vw);
}
.aaom-lp .s08__card{
  position:relative;
  flex:none;
  /* height follows the clamped width (never the image's intrinsic size): 264x406 @375 → 520x800 @1440 */
  /* also capped so the card is never taller than ~70% of the viewport (800px cards overflowed laptop screens) */
  width:min(clamp(264px, 10.8662rem + 24.0376vw, 520px), max(264px, 70svh * 0.65));
  aspect-ratio:520/800;
  overflow:hidden;
  border-radius:clamp(18px, 0.9489rem + 0.7512vw, 26px);
  background:#474747;
  color:#fff;
  container-type:inline-size;
}
.aaom-lp .s08__card-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.aaom-lp .s08__card-title{
  /* width in em (= Figma 50cqw at 5.77cqw) so the line breaks match Figma when the font sits on its floor in small cards */
  position:absolute;left:8cqw;top:7.2cqw;width:min(84cqw, 8.666em);
  font-size:clamp(18px, 5.77cqw, 30px);
  font-weight:700;
  line-height:1.07;
  letter-spacing:-.01em;
}
.aaom-lp .s08__card-text{
  position:absolute;left:8cqw;width:min(84cqw, 17.922em);bottom:6.5cqw;
  font-size:clamp(13px, 3.85cqw, 20px);
  font-weight:400;
  line-height:1.16;
}

/* Pinned lock: the stage sticks below the header; --lp-pin-top comes from js/s00.js */
.aaom-lp .s08.is-pin{padding-block:0}
.aaom-lp .s08.is-pin .s08__stage{
  position:sticky;top:var(--lp-pin-top,0px);
  height:calc(100vh - var(--lp-pin-top,0px));height:calc(100svh - var(--lp-pin-top,0px));
  box-sizing:border-box;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(16px, 3svh, 32px);
}
.aaom-lp .s08.is-pin .s08__track{overflow:hidden;margin-top:clamp(20px, 3.4svh, 40px)}
.aaom-lp .s08.is-pin .s08__cards{margin-left:var(--lp-gutter-vw);padding-inline:0;transform:translate3d(0,0,0)}
.aaom-lp .s08.is-pin .s08__card{width:min(clamp(264px, 10.8662rem + 24.0376vw, 520px), max(200px, calc((100svh - var(--lp-pin-top,0px) - 230px) * .65)))}
/* Desktop pin: the whole stage (head 137 + gap 55 + card 800 = 992 Figma px) is fitted to BOTH the viewport width and the
   height left under the header: --k = 1 Figma px. Head type keeps readable floors; the card takes the height that is left.
   At >=1440 wide with >=~1100px of height --k = 1px (Figma 1:1). */
@media (min-width:1024px){
  .aaom-lp .s08.is-pin{
    --s08-pad:clamp(16px, 3svh, 32px);
    --s08-h:calc(100svh - var(--lp-pin-top,0px) - 2 * var(--s08-pad));
    --k:min(1px, 100cqw / 1440, var(--s08-h) / 992);
    container-type:inline-size;
  }
  .aaom-lp .s08.is-pin .s08__stage{padding-block:var(--s08-pad)}
  .aaom-lp .s08.is-pin .s08__title{font-size:clamp(40px, 57.947 * var(--k), 57.947px)}
  .aaom-lp .s08.is-pin .s08__text{max-width:33.75em;margin-top:max(12px, 22 * var(--k));font-size:clamp(14px, 16 * var(--k), 16px)}
  .aaom-lp .s08.is-pin .s08__track{margin-top:clamp(20px, 55 * var(--k), 55px)}
  .aaom-lp .s08.is-pin .s08__card{width:max(200px, min(520 * var(--k), (var(--s08-h) - max(137 * var(--k), 112px) - clamp(20px, 55 * var(--k), 55px)) * .65))}
}

/* ---- s09.css ---- */
@property --p{syntax:'<number>';inherits:false;initial-value:0}
/* s09 — INDUSTRY (Figma INDUSTRY (1) 1937:37586 → REL-58…64 → INDUSTRY (2) 1964:29700).
   Every subsection (intro card + 4 panels) is a full-viewport band (100% x 100svh). The intro card is pinned and its
   clip-path window grows from the container card to full screen; Automotive/Insurance/Pharma scroll with an image
   parallax; Retail is pinned and its window shrinks back to the card. js/s09.js drives --p (0 card .. 1 full screen). */
.aaom-lp .s09{
  --vh:100vh;
  --dv:0px;                                                      /* lvh - svh: mobile toolbar slack, so pinned bands still fill the screen when the bars collapse */
  --pin:var(--lp-pin-top, 0px);
  --g:max(24px, 50cqw - 665px);                                   /* = --lp-gutter (container edge) */
  --cw:calc(100cqw - 2 * var(--g));                              /* card width at --p 0 */
  --ch:min(var(--vh) - var(--pin) - 48px, max(var(--cw) * 706 / 1330, 420px)); /* card height at --p 0 */
  --iy:calc((var(--vh) - var(--pin) - var(--ch)) / 2);           /* vertical window inset, centered below the header */
  --r:clamp(28px, 0.9137rem + 3.5681vw, 66px);
  overflow-x:clip;background:var(--lp-bg)
}
/* the cqw container is the stage (the sticky element itself), never an ancestor of it: containment on a sticky's
   ancestor can break / de-accelerate sticky on iOS. Same width as the section, so cqw values are unchanged. */
.aaom-lp .s09__stage{container-type:inline-size}
@supports (height:100svh){.aaom-lp .s09{--vh:100svh;--dv:calc(100lvh - 100svh)}}

.aaom-lp .s09__panel{
  position:relative;display:flex;width:100%;height:calc(var(--vh) + var(--dv));overflow:hidden;background:#1c1c1a;color:var(--lp-white);
  clip-path:inset(calc((var(--pin) + var(--iy)) * (1 - var(--p))) calc(var(--g) * (1 - var(--p))) calc((var(--iy) + var(--dv)) * (1 - var(--p))) calc(var(--g) * (1 - var(--p))) round calc(var(--r) * (1 - var(--p))))
}
.aaom-lp .s09__panel{--p:1}

/* One pinned stage: card (top) → Insurance → Pharma → Retail stacked underneath. Each layer lifts up like a curtain
   (translateY) revealing the next; Retail finally scales back to the card. js/s09.js drives everything. */
.aaom-lp .s09.is-js .s09__track{position:relative;height:calc(var(--vh) * 4.9 + var(--dv))}
.aaom-lp .s09.is-js .s09__stage{position:sticky;top:0;height:calc(var(--vh) + var(--dv));overflow:hidden}
.aaom-lp .s09.is-js .s09__stage > *{position:absolute;left:0;top:0;width:100%}
.aaom-lp .s09.is-js .s09__card{z-index:4}
.aaom-lp .s09.is-js .s09__panel--insurance{z-index:3}
.aaom-lp .s09.is-js .s09__panel--pharma{z-index:2}
.aaom-lp .s09.is-js .s09__panel--retail{z-index:1}
.aaom-lp .s09.is-js .s09__stage:not(.is-full) > .s09__panel{opacity:.001;pointer-events:none} /* kept painted (decoded + rasterized) so is-full only flips opacity */

/* Intro → Automotive (Figma INDUSTRY (1) 1937:37586 → REL-58 1937:37591): ONE band, one photo. It starts as the
   container card (window + image framed like the Figma card) and converts to a full-screen Automotive panel; the intro
   copy fades out and the Automotive copy fades in over the same image. js/s09.js writes the window (clip-path) and the
   image transform. Static fallback (no JS / reduced motion): full-screen band with both copies stacked. */
.aaom-lp .s09__card{
  position:relative;display:grid;grid-template:1fr / 1fr;width:100%;min-height:var(--vh);overflow:hidden;
  padding:calc(var(--pin) + 48px) var(--g) clamp(32px, 1.0757rem + 3.9437vw, 74px);gap:48px;background:#1c1c1a;color:var(--lp-white)
}
/* Figma INDUSTRY 1853:4019: one flat 20% black scrim over the whole photo (no bottom gradient) */
.aaom-lp .s09__card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2)}
.aaom-lp .s09__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--fx, 50%) 50%;--fx:50%}
.aaom-lp .s09__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:596px;justify-self:center;align-self:center;padding-inline:20px;text-align:center}
.aaom-lp .s09__card-auto{align-self:end;justify-self:start}
.aaom-lp .s09:not(.is-js) .s09__card{grid-template:1fr auto / 1fr}
.aaom-lp .s09.is-js .s09__card{height:calc(var(--vh) + var(--dv));min-height:0;padding:var(--pin) var(--g) var(--dv)}
.aaom-lp .s09.is-js .s09__card > :not(.s09__img){grid-area:1 / 1}
.aaom-lp .s09.is-js .s09__card-auto{margin-bottom:clamp(32px, 1.0757rem + 3.9437vw, 74px)}
.aaom-lp .s09.is-js .s09__img{right:auto;bottom:auto;transform-origin:0 0}
@media (max-width:767px){.aaom-lp .s09__img{--fx:38%}}
/* intro title also tracks the card window height (Figma 58px in a 706px-tall card) so short laptops keep the Figma fit */
.aaom-lp .s09__title{max-width:9.4em;font-size:min(clamp(36px, 1.7659rem + 2.0657vw, 58px), max(36px, var(--ch) * 58 / 706));line-height:.9;letter-spacing:-.02em}
.aaom-lp .s09__title .lp-accent{font-size:1.275em;letter-spacing:-.02em}
.aaom-lp .s09__text{font-size:16px;font-weight:500;line-height:1.53}

/* Industry panels (Figma REL-58/59/60/64, 1443x789): copy bottom-left on the container edge */
.aaom-lp .s09__panel{align-items:flex-end;container-type:inline-size;padding:calc(var(--pin) + 24px) var(--g) calc(clamp(32px, 1.0757rem + 3.9437vw, 74px) + var(--dv))}
.aaom-lp .s09__panel::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2)}
.aaom-lp .s09__panel--insurance::after,.aaom-lp .s09__panel--retail::after{background:rgba(0,0,0,.45)} /* Figma RELEVANCY-54/60: 45% scrim (automotive/pharma stay 20%) */
/* Image is 16% taller than the band so the parallax (±8%) never shows an edge; js writes its transform. */
.aaom-lp .s09__panel-img{position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover;object-position:50% 50%}
.aaom-lp .s09__panel--insurance .s09__panel-img{object-position:50% 50%} /* file = Figma 2243:56052 crop (fill 124.6%, −9.8% / −28.3%) + the parallax room above it */
.aaom-lp .s09__panel--pharma .s09__panel-img{object-position:62% 50%}
.aaom-lp .s09__panel--retail .s09__panel-img{object-position:55% 50%}
.aaom-lp .s09__panel-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;width:min(100%, clamp(280px, 34cqw, 520px))}
.aaom-lp .s09__panel--retail .s09__panel-body{width:min(100%, clamp(280px, 40cqw, 560px))}
.aaom-lp .s09__eyebrow{font-size:clamp(13px, 1.04cqw, 13.8px);font-weight:600;line-height:1.39;letter-spacing:-.06em}
.aaom-lp .s09__panel-title{margin-top:clamp(4px, .5cqw, 8px);font-size:clamp(30px, 2.9cqw, 38.5px);font-weight:600;line-height:1.15;letter-spacing:-.06em}
.aaom-lp .s09__panel-title .lp-accent{font-size:1.345em;line-height:.9;letter-spacing:-.06em}
.aaom-lp .s09__panel-text{margin-top:clamp(12px, 1.1cqw, 15px);font-size:clamp(15px, 1.25cqw, 16.6px);font-weight:400;line-height:1.55}
.aaom-lp .s09__btn{--btn-h:clamp(44px, 3.88cqw, 51.6px);--btn-px:clamp(22px, 1.94cqw, 25.8px);--btn-fs:clamp(16px, 1.46cqw, 19.4px);margin-top:clamp(20px, 2.5cqw, 33px)}

/* Desktop spacing per Figma: intro copy 23.5px (of a 706px card) above the window centre; panel copy sits ~70px above the
   bottom with 28px paragraph lines; copy widths per panel (REL-58 Automotive / REL-64 Pharma / Retail). */
@media (min-width:1024px){
  .aaom-lp .s09__content{margin-bottom:calc(var(--ch) * 47 / 706)}
  .aaom-lp .s09__panel{padding-bottom:calc(min(60px, 4.1667vw) + var(--dv))}
  .aaom-lp .s09.is-js .s09__card-auto{margin-bottom:min(60px, 4.1667vw)}
  .aaom-lp .s09__panel-text{line-height:1.6867}
  .aaom-lp .s09__card-auto{width:min(100%, clamp(280px, 30cqw, 432px))}
  .aaom-lp .s09__panel--pharma .s09__panel-body{width:min(100%, clamp(280px, 38.5cqw, 512px))}
  .aaom-lp .s09__panel--retail .s09__panel-body{width:min(100%, clamp(280px, 37.6cqw, 500px))}
}

/* Figma 2243:56076/56106/56091/56114 (copy restyle; vw because panels are containers with padding, so cqw != viewport): panel copy is centred (text-align + block centred in the band).
   eyebrow 22/1.389 sb; title 53.949 sb lh .81 ls -.06em (accent Cormorant sb italic 1.345em); paragraph 20/28.062 regular,
   gaps 12 (eyebrow→title) and 16 (title→paragraph). Automotive title is 55.875 / lh 1.09 with eyebrow mb -15. Desktop only. */
@media (min-width:1024px){
  .aaom-lp .s09__panel{align-items:center;justify-content:center}
  .aaom-lp .s09__card-auto{align-self:center;justify-self:center}
  .aaom-lp .s09.is-js .s09__card-auto{margin-bottom:0}
  .aaom-lp .s09__panel-body,.aaom-lp .s09__card-auto,.aaom-lp .s09__panel--pharma .s09__panel-body,.aaom-lp .s09__panel--retail .s09__panel-body{align-items:center;text-align:center;width:min(100%, clamp(280px, 40.04vw, 577.8px))}
  .aaom-lp .s09__eyebrow{font-size:clamp(15px, 1.5278vw, 22px);line-height:1.389;letter-spacing:0}
  .aaom-lp .s09__panel-title{margin-top:12px;max-width:100%;font-size:clamp(30px, 3.75vw, 53.949px);line-height:.81;letter-spacing:-.06em}
  .aaom-lp .s09__panel-title .lp-accent{line-height:.81}
  .aaom-lp .s09__card-auto .s09__panel-title{margin-top:-15px;font-size:clamp(30px, 3.88vw, 55.875px);line-height:1.09;letter-spacing:-.056em}
  .aaom-lp .s09__card-auto .s09__panel-title .lp-accent{line-height:1.09;letter-spacing:-.056em}
  .aaom-lp .s09__panel-text{margin-top:16px;width:100%;font-size:clamp(15px, 1.389vw, 20px);line-height:1.403}
  .aaom-lp .s09__card-auto .s09__panel-text,.aaom-lp .s09__panel--insurance .s09__panel-text{max-width:min(100%, 33.75vw)}
  .aaom-lp .s09__panel--pharma .s09__panel-text{max-width:min(100%, 36.53vw)}
  .aaom-lp .s09__panel--retail .s09__panel-text{max-width:min(100%, 36.67vw)}
}

/* Copy fades in/out in place (opacity only, scroll-driven by js); it never travels with the curtain. */
.aaom-lp .s09.is-js .s09__panel-body{opacity:0}

@media (prefers-reduced-motion:reduce){
  .aaom-lp .s09__panel-img{top:0;height:100%}
}

/* Touch / narrow (js/s09.js "free" mode, same query): scrubbed timeline with a plateau per card, so the track is longer
   (U_FREE 5.2 = 6.2 - 1) to keep each curtain close to finger speed. No scroll anchoring inside s09: js absorbs layout
   shifts from above itself (anchoring is inconsistent across mobile browsers). --vh / --dv are px-locked inline by js. */
@media (max-width:1023px), (pointer:coarse){
  .aaom-lp .s09.is-js{overflow-anchor:none}
  .aaom-lp .s09.is-js .s09__track{height:calc(var(--vh) * 6.2 + var(--dv))}
}

/* Mobile / tablet: insurance and pharma swap to their portrait mobile art (<picture> in sections/s09.html), framed centred */
@media (max-width:1023px){
  .aaom-lp .s09__eyebrow{font-size:15px}
  .aaom-lp .s09__panel--insurance .s09__panel-img{object-position:50% 50%}
  .aaom-lp .s09__panel--pharma .s09__panel-img{object-position:100% 50%} /* the hand reaches the art's right edge: anchor there so the parallax overscan crops the left side */
}

/* ---- s10.css ---- */
/* s10 — OUTCOME - 2 (Figma 1754:6380) */
.aaom-lp .s10{background:var(--lp-bg);padding-block:clamp(56px, 2.7518rem + 3.1925vw, 90px) clamp(40px, 2.3019rem + 0.8451vw, 49px)}
.aaom-lp .s10__title{font-size:clamp(36px, 1.7659rem + 2.0657vw, 58px);line-height:.9;letter-spacing:-.02em}
.aaom-lp .s10__title .lp-accent{font-size:1.275em;letter-spacing:-.02em}
.aaom-lp .s10__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,max(220px,calc((100% - 33px) / 4))),1fr));gap:24px 11px;margin-top:clamp(32px, 1.4058rem + 2.5352vw, 59px)}
.aaom-lp .s10__card{display:flex;flex-direction:column;align-items:flex-start;padding:23px 0 45px 0;border-radius:23px}
.aaom-lp .s10__icon{width:clamp(40px, 2.2359rem + 1.1268vw, 52px);height:auto;aspect-ratio:1}
.aaom-lp .s10__card-title{max-width:264px;margin-top:clamp(24px, 1.1479rem + 1.5023vw, 40px);font-size:clamp(26px, 1.4930rem + 0.5634vw, 32px);font-weight:700;line-height:1.155;letter-spacing:-.02em}
.aaom-lp .s10__card-text{max-width:264px;margin-top:16px;font-size:16px;line-height:1.25;letter-spacing:-.01em}
@media (max-width:599px){.aaom-lp .s10__card{padding-bottom:24px}.aaom-lp .s10__card-title,.aaom-lp .s10__card-text{max-width:none}}

/* ---- s11.css ---- */
/* s11 — INSIGHTS - 3 / Adobe MAX banner (Figma 1754:6410) */
.aaom-lp .s11{overflow:hidden;background:#a855e6;color:var(--lp-white)}
.aaom-lp .s11__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.aaom-lp .s11__inner{display:flex;flex-direction:column;align-items:center;padding-block:clamp(64px, 3.6259rem + 1.5962vw, 81px);text-align:center}
.aaom-lp .s11__logo{width:clamp(260px, 9.0055rem + 34.8169vw, 631px);height:auto;aspect-ratio:630.888 / 187.843}
.aaom-lp .s11__text{margin-top:24px;font-size:clamp(17px, 0.9965rem + 0.2817vw, 20px);font-weight:600;line-height:1.53;letter-spacing:-.03em}
.aaom-lp .s11__btn{--btn-h:47px;--btn-px:24px;--btn-fs:18px;margin-top:48px}
.aaom-lp .s11__btn .lp-btn__label{font-weight:600;letter-spacing:.01em}
.aaom-lp .s11__btn .lp-btn__icon svg{width:30%;height:30%}

/* ---- s12.css ---- */
/* s12 — CONTACT FORM - 2 (Figma 1754:6442). TODO: Marketo/backend wiring pending. */
.aaom-lp .s12{background:var(--lp-bg);padding-block:clamp(48px, 2.4058rem + 2.5352vw, 75px) clamp(56px, 2.6637rem + 3.5681vw, 94px)}
.aaom-lp .s12__inner{display:grid;grid-template-columns:minmax(0,489fr) minmax(0,841fr);align-items:start}
.aaom-lp .s12__title{font-size:clamp(36px, 1.7659rem + 2.0657vw, 58px);line-height:.9;letter-spacing:-.02em;white-space:nowrap}
.aaom-lp .s12__title .lp-accent{font-size:1.275em;letter-spacing:-.02em}
.aaom-lp .s12__form{margin-top:12px}
.aaom-lp .s12__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.aaom-lp .s12__field{display:flex;flex-direction:column;gap:10px;min-width:0}
.aaom-lp .s12__field--full{grid-column:1/-1}
.aaom-lp .s12__label{font-size:17px;font-weight:600;line-height:26px;color:var(--lp-black)}
.aaom-lp .s12__label--message{margin-top:5px;line-height:23px}
.aaom-lp .s12__optional{font-weight:400}
.aaom-lp .s12__control{display:block;width:100%;height:54px;margin:0;padding:0 clamp(20px, 1.0299rem + 0.9390vw, 30px);border:1px solid #dadada;border-radius:16px;background:var(--lp-white);color:var(--lp-black);font:600 17px/1.5 var(--lp-sans);box-shadow:none;outline:0;-webkit-appearance:none;appearance:none}
.aaom-lp .s12__control:focus-visible{border-color:var(--lp-black);box-shadow:0 0 0 1px var(--lp-black)}
.aaom-lp .s12__textarea{height:120px;padding-block:14px;font-weight:400;resize:vertical}
.aaom-lp .s12__select-wrap{position:relative}
.aaom-lp .s12__select{padding-right:clamp(48px, 2.7113rem + 0.9390vw, 58px);cursor:pointer;text-overflow:ellipsis}
.aaom-lp .s12__select:has(option[value=""]:checked){color:rgba(0,0,0,.4)}
.aaom-lp .s12__select option{color:var(--lp-black)}
.aaom-lp .s12__chev{position:absolute;top:50%;right:clamp(20px, 1.0974rem + 0.8451vw, 29px);width:14px;height:8px;transform:translateY(-50%);color:var(--lp-black);pointer-events:none}
.aaom-lp .s12__notice{margin-top:40px;font-size:13px;line-height:1.5}
.aaom-lp .s12__notice a{text-decoration:none}
.aaom-lp .s12__notice a:hover{text-decoration:underline}
.aaom-lp .s12__submit{--btn-h:48px;--btn-px:24px;--btn-fs:18px;gap:0;margin-top:40px;padding:0;border:0;background:none;font:inherit;cursor:pointer}
.aaom-lp .s12__submit .lp-btn__label{min-width:195px;font-weight:600;letter-spacing:.01em}
.aaom-lp .s12__submit .lp-btn__icon{margin-left:-2px}
.aaom-lp .s12__submit .lp-btn__icon svg{width:30%;height:30%}
@media (min-width:1024px){.aaom-lp .s12__title{margin-left:-4px}}
@media (max-width:1023px){.aaom-lp .s12__inner{grid-template-columns:minmax(0,1fr);row-gap:32px}.aaom-lp .s12__form{margin-top:0}}
@media (max-width:767px){.aaom-lp .s12__grid{grid-template-columns:minmax(0,1fr)}}
.aaom-lp .s12{scroll-margin-top:var(--lp-pin-top, 0px)}

/* ---- s13.css ---- */
/* s13 — Footer (Figma 2219:50076, 1440x766). Replaces the theme footer on this page. */
body.page-template-template-aaom-landing .site-footer{display:none}
.aaom-lp .s13{
  --l:max(24px, 50% - 655px);  /* 65 @1440 */
  --r:max(24px, 50% - 676px);  /* nav ends at 1396 @1440 */
  position:relative;background:#000;color:#fff;overflow:hidden;
}
.aaom-lp .s13 a{color:inherit;text-decoration:none}
.aaom-lp .s13 a:hover{text-decoration:underline;text-underline-offset:3px}
.aaom-lp .s13 ul{margin:0;padding:0;list-style:none}
.aaom-lp .s13 p{margin:0}
/* top band: kicker y67, nav y68, logo y375 */
.aaom-lp .s13__top{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;padding:67px var(--r) 0 var(--l);min-height:375px}
.aaom-lp .s13__kicker{height:47.948px;font-size:52.908px;font-weight:700;line-height:47.948px;letter-spacing:-2.6454px;white-space:nowrap}
.aaom-lp .s13__kicker .lp-accent{font-size:67.544px;line-height:47.948px;letter-spacing:-3.3772px} /* Figma tracking is -5%: -2.6454px on 52.908, -3.3772px on 67.544 */
/* icons 31.261 at x69 y143, pitch 51.58 (gap 20.319); 44px hit area → -6.37 offsets */
.aaom-lp .s13__social{display:flex;align-items:center;gap:7.58px;margin:21.68px 0 0 -2.37px !important}
.aaom-lp .s13__social-link{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#fff;transition:opacity .2s ease}
.aaom-lp .s13__social-link svg{display:block;width:31.261px;height:31.261px}
.aaom-lp .s13 .s13__social-link:hover{opacity:.6;text-decoration:none}
.aaom-lp .s13__social-link:focus-visible{outline:2px solid #fff;outline-offset:2px}
.aaom-lp .s13__nav{display:flex;align-items:flex-start;gap:46px;margin-top:1px}
.aaom-lp .s13__group{display:flex;flex-direction:column;gap:8px}
.aaom-lp .s13__group:nth-child(1){width:127px} /* Figma widths (106/149/78) x1.2: links are 12px (client feedback), Figma 10px */
.aaom-lp .s13__group:nth-child(2){width:179px}
.aaom-lp .s13__group:nth-child(3){width:94px}
.aaom-lp .s13__title{height:18px;font-size:16px;font-weight:700;line-height:17.037px;letter-spacing:-.32px;color:#fff;white-space:nowrap}
.aaom-lp .s13__links{display:flex;flex-direction:column;gap:4px}
.aaom-lp .s13__links li{height:18px;font-weight:400;font-size:12px;line-height:17.037px;color:#fbfbfb;text-transform:capitalize;white-space:nowrap}
.aaom-lp .s13__brand{display:flex;flex-direction:column;align-items:center;gap:36px}
.aaom-lp .s13__logo{display:block;width:calc(100% * 1444.397 / 1440);max-width:none;height:auto;aspect-ratio:1444.4 / 211.998;margin-left:.4px}
.aaom-lp .s13__agencies{display:block;width:min(762px, 100% * 762 / 1440 * 1.6);height:auto}
/* sub-links: 1320 wide, bottom 33, top 720 @1440 */
.aaom-lp .s13__bottom{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;width:min(1320px, 100% - 48px);margin:70.8px auto 0;padding-bottom:33px;font-size:12px;font-weight:400;line-height:1.1;white-space:nowrap}
.aaom-lp .s13__copy{color:#e1e1e1;opacity:.6}
.aaom-lp .s13__legal{display:flex;align-items:center;gap:24px}

/* No mobile footer in Figma: stack below 1024 and scale the type for touch. */
@media (max-width:1023px){
  .aaom-lp .s13__top{flex-direction:column;gap:48px;padding-top:56px;min-height:0}
  .aaom-lp .s13__nav{flex-wrap:wrap;gap:40px 46px;margin-top:0}
  .aaom-lp .s13__group{gap:12px;width:auto !important}
  .aaom-lp .s13__title{height:auto;line-height:1.2}
  .aaom-lp .s13__links{gap:8px}
  .aaom-lp .s13__links li{height:auto;font-size:14px;line-height:1.4}
  .aaom-lp .s13__brand{margin-top:56px;gap:24px}
  .aaom-lp .s13__agencies{width:min(762px, 100% - 48px)}
  .aaom-lp .s13__bottom{margin-top:40px}
}
@media (max-width:640px){
  .aaom-lp .s13__kicker{height:auto;font-size:40px;line-height:1;letter-spacing:-2px}
  .aaom-lp .s13__kicker .lp-accent{font-size:51px;line-height:1}
  .aaom-lp .s13__social{margin-top:16px !important}
  .aaom-lp .s13__nav{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:40px 24px;width:100%}
  .aaom-lp .s13__group:nth-child(2){grid-column:1/-1;grid-row:2}
  .aaom-lp .s13__bottom{flex-direction:column;align-items:flex-start;white-space:normal}
  .aaom-lp .s13__legal{flex-wrap:wrap;gap:12px 20px}
}

/* Curtain reveal (js/s13.js): footer parked under the contact section, which slides up over it. */
.aaom-lp .lp-curtain-over{position:relative;z-index:1}
.aaom-lp .s13.is-curtain{z-index:0}

/* ---- s99.css ---- */
/* iOS sticky jitter fix ("noclip"): WebKit jitters a sticky element whose ancestor has overflow clip inside a positioned /
   stacking context (bugs 247130, 328074, 208178). While a section is pinned no ancestor of its sticky element clips; the
   sticky element clips itself instead (overflow on the sticky box is fine). Unpinned sections keep their own clip.
   Loaded last so it overrides the per-section clip rules. */
html:has(.aaom-lp) body{overflow-x:clip}
.aaom-lp{overflow-x:visible}
.aaom-lp .s03.is-s03-anim{overflow:visible}
.aaom-lp .s04.is-s04-pin .s04__stage{overflow:visible}
.aaom-lp .s04.is-s04-pin .s04__pin{overflow-x:clip}
.aaom-lp .s05.is-mpin{overflow:visible}
.aaom-lp .s05.is-mpin .s05__app{overflow-x:clip}
.aaom-lp .s08.is-pin{overflow:visible}
.aaom-lp .s09.is-js{overflow-x:visible}