/* ==========================================================================
   home2.css · page-local styles for the /home2 homepage study
   --------------------------------------------------------------------------
   WHAT THIS IS
   The rebuilt homepage per the 27 Aug art-direction note: bright high-key
   photography, one Tenthpin 3D language, big typography, far less copy per
   screen. Eleven bands instead of the seventeen the live home carries, and
   no two adjacent bands share a rhythm (split · marquee · 3D canvas ·
   horizontal · huge type · feature · bento · pale 3D · faces · list · globe).

   HOW IT IS SCOPED
   Every rule sits under .h2, the wrapper the page mounts. Nothing here can
   reach the shared header, footer or admin bar, and nothing in tp.css needs
   editing for this study to exist. The page still loads tp.css (the base and
   the primitives .wrap / .logomarq / .logoslot) and premium.css, so this
   sheet only adds the bands and overrides what it must.

   ORDER
   00 tokens · 01 primitives · 02 hero · 03 trust · 04 capabilities ·
   05 journey · 06 scale break · 07 proof · 08 bento · 09 AI · 10 people ·
   11 start · 12 global + CTA · 13 responsive · 14 reduced motion
   ========================================================================== */

/* --- 00 · TOKENS ---------------------------------------------------------
   The white foundation the note asks for, one anchor navy, and a bright
   electric blue that exists ONLY as a highlight: node glow, rules, hover
   states, the active step. It never becomes a fill for body type or a panel. */
.h2{
  --ink:#0D1526;
  --navy:#06156A;
  --elec:#0520F5;
  --cyan:#12B5D6;
  --soft:#48566F;
  --faint:#78849B;
  --paper:#FFFFFF;
  --pale:#F4F7FD;
  --pale2:#E9F0FB;
  --hair:rgba(13,21,38,.09);
  --hair2:rgba(13,21,38,.16);
  --glow:rgba(5,32,245,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --band:clamp(76px,11vh,148px);
  --huge:clamp(44px,9.4vw,150px);
  background:var(--paper);
  color:var(--ink);
  display:block;
  overflow-x:clip;
}

/* --- 01 · PRIMITIVES ----------------------------------------------------- */
.h2-band{padding:var(--band) 0;position:relative}
.h2-band.pale{background:var(--pale)}
.h2-in{max-width:1400px;margin:0 auto;padding:0 clamp(16px,2.6vw,44px);width:100%;position:relative}
/* One message per band: the heading is allowed to be large because it is
   usually the only thing standing in the band head. */
.h2-h{font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:-.03em;line-height:1.03;
  font-size:clamp(30px,4.4vw,62px);margin:16px 0 0;max-width:18ch}
/* the section eyebrow was removed 4 Sep (client direction: no eyebrows in
   prototype 3). Where the heading is now first in its column it no longer
   needs the space the eyebrow used to sit in. */
.h2-h:first-child,.h2 h1:first-child{margin-top:0}
.h2-h em{font-style:normal;color:var(--elec)}
.h2-sub{color:var(--soft);font-size:clamp(15.5px,1.25vw,18px);line-height:1.62;max-width:56ch;margin:18px 0 0}
.h2-head{max-width:900px}
.h2-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;
  font-family:"Inter",sans-serif;font-weight:600;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:16px 28px;border:0;border-radius:0;text-decoration:none;
  box-shadow:0 14px 30px -18px rgba(6,21,106,.7);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s}
.h2-cta:hover{transform:translateY(-2px);background:#0A1C80;box-shadow:0 20px 40px -18px rgba(6,21,106,.8)}
.h2-cta.ghost{background:transparent;color:var(--navy);border:1px solid var(--hair2);box-shadow:none}
.h2-cta.ghost:hover{border-color:var(--elec);color:var(--elec);background:rgba(5,32,245,.05)}
.h2-cue{display:inline-flex;align-items:center;gap:9px;font-family:"Inter",sans-serif;font-weight:600;font-size:10.5px;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--navy);text-decoration:none;transition:color .3s}
.h2-cue b{display:inline-block;transition:transform .35s var(--ease)}
.h2-cue:hover{color:var(--elec)}
.h2-cue:hover b{transform:translateX(5px)}
.h2-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px}
/* The 3D stage. Its canvas is transparent, so the band ground shows through
   and the objects read as glass sitting on the page rather than in a box. */
.h2-stage{position:relative;display:block;margin:0}
.h2-stage canvas{display:block;width:100%;height:100%}

/* --- 02 · HERO · split: type on white, life sciences on the right --------
   Rhythm 1 of 11. Type on white at the left, the photograph bled to the
   right edge, and nothing layered over either. A 3D layer straddling the
   seam was tried and cut on 27 Aug: on a portrait this close it read as
   clutter across the subject rather than as data leaving the plant. The
   3D language starts at band 03. */
.h2-hero{position:relative;min-height:clamp(640px,88svh,960px);display:grid;grid-template-columns:47fr 53fr;align-items:center;
  background:var(--paper);overflow:hidden}
.h2-hero-copy{position:relative;z-index:3;
  padding:132px clamp(24px,4vw,72px) 72px clamp(16px,calc((100vw - 1400px) / 2 + 2.6vw),120px)}
.h2-hero h1{font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(34px,3.6vw,60px);margin:22px 0 0}
.h2-hero h1 span{display:block}
.h2-hero h1 em{font-style:normal;color:var(--elec)}
.h2-hero .h2-sub{margin-top:26px;max-width:44ch}
.h2-hero-shot{position:relative;align-self:stretch;overflow:hidden;background:var(--pale2)}
.h2-hero-shot img,.h2-hero-shot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.h2-hero-shot video{opacity:0;transition:opacity 1.1s ease}
.h2-hero-shot video.ready{opacity:1}
/* A short white feather along the inner edge, so the photograph joins the
   white column instead of butting against it on a hard vertical seam. */
.h2-hero-shot::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.72) 9%,rgba(255,255,255,0) 26%)}
.h2-hero-scroll{position:absolute;z-index:4;left:clamp(16px,calc((100vw - 1400px) / 2 + 2.6vw),120px);bottom:38px;
  font-family:"Inter",sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:11px}
.h2-hero-scroll i{width:26px;height:1px;background:var(--hair2);display:block;position:relative;overflow:hidden}
.h2-hero-scroll i::after{content:"";position:absolute;inset:0;background:var(--elec);animation:h2scroll 2.6s var(--ease) infinite}
@keyframes h2scroll{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* --- 03 · TRUST · one line, four facts, one marquee ----------------------
   Rhythm 2. The live home spends three separate bands (credentials, badges,
   client logos) on this. Compressed to a single screen-third. */
.h2-trust{padding:clamp(46px,6vh,74px) 0 clamp(30px,4vh,44px);border-top:1px solid var(--hair);background:var(--paper)}
.h2-trust-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(26px,4vw,64px);align-items:end}
.h2-trust h2{font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:-.028em;line-height:1.06;
  font-size:clamp(24px,2.9vw,40px);margin:14px 0 0;max-width:15ch}
.h2-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px)}
.h2-fact{position:relative;padding-left:16px}
.h2-fact::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;background:var(--pale2)}
.h2-fact:first-child::before{background:var(--elec)}
.h2-fact b{display:block;font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:-.03em;
  font-size:clamp(30px,3.4vw,50px);line-height:1;color:var(--navy)}
.h2-fact span{display:block;margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--faint);max-width:19ch}
/* the marquee reuses the tp.css .logomarq / .logoslot pair and re-grounds it */
.h2-marq{margin-top:clamp(30px,4vh,52px);overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.h2-marq .logomarq{display:flex;width:max-content}
.h2-marq .logomarq-half{gap:clamp(30px,3.2vw,58px);padding-right:clamp(30px,3.2vw,58px)}
.h2-marq .logoslot{width:clamp(112px,8.6vw,146px);height:70px;flex:0 0 auto;filter:none;border:0;background:none;padding:0}
/* full colour on white: the base .logo-img greys the marks to 72% for the
   dense rows elsewhere, which on a band this short reads as a dead strip */
.h2-marq .logo-img{max-height:40px;max-width:100%;width:auto;object-fit:contain;filter:none;opacity:1}

/* --- 04 · CAPABILITIES · one large 3D ecosystem, four plain lines --------
   Rhythm 3. Replaces the live home's separate routes / services / S4 card
   groups. Hovering a line lights its node in the scene (m20 reads the
   data-node attribute), so the diagram and the list are one control. */
.h2-eco{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,72px);align-items:center;margin-top:clamp(34px,5vh,64px)}
.h2-eco-stage{aspect-ratio:1/.82;min-height:340px;position:relative;z-index:0}
.h2-eco-stage::after{content:"";position:absolute;left:50%;top:56%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--glow),transparent 68%);z-index:-1;pointer-events:none}
.h2-caps{display:flex;flex-direction:column}
.h2-cap{display:block;padding:22px 20px 22px 22px;border-top:1px solid var(--hair);text-decoration:none;color:inherit;
  position:relative;transition:background .35s var(--ease),padding-left .35s var(--ease)}
.h2-cap:last-child{border-bottom:1px solid var(--hair)}
.h2-cap::before{content:"";position:absolute;left:0;top:-1px;bottom:0;width:2px;background:var(--elec);
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.h2-cap:hover,.h2-cap:focus-visible{background:var(--pale);padding-left:30px;outline:0}
.h2-cap:hover::before,.h2-cap:focus-visible::before{transform:scaleY(1)}
.h2-cap b{display:block;font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(18px,1.5vw,22px);
  letter-spacing:-.02em;line-height:1.2}
.h2-cap span{display:block;margin-top:7px;font-size:14px;line-height:1.55;color:var(--soft);max-width:40ch}
.h2-cap i{position:absolute;right:20px;top:24px;font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:10px;
  letter-spacing:.14em;color:var(--elec);opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s var(--ease)}
.h2-cap:hover i,.h2-cap:focus-visible i{opacity:1;transform:translateX(0)}

/* --- 05 · JOURNEY · horizontal storytelling, scroll-driven camera --------
   Rhythm 4. Four stops on one rail. m20 tracks a camera through the three
   3D environments as the band scrolls, and the rail marks the active stop. */
.h2-jrn{background:linear-gradient(180deg,var(--paper) 0%,var(--pale) 34%,var(--pale) 100%)}
.h2-jrn-stage{margin-top:clamp(30px,4.5vh,58px);height:clamp(300px,46vh,480px);position:relative}
.h2-rail{position:relative;margin-top:clamp(24px,3.4vh,42px);border-top:1px solid var(--hair2)}
.h2-rail-fill{position:absolute;left:0;top:-1px;height:2px;background:var(--elec);width:0}
.h2-stops{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,34px)}
.h2-stop{padding:26px 0 0;position:relative}
.h2-stop::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;
  background:var(--paper);border:2px solid var(--hair2);transition:border-color .4s,transform .4s var(--ease)}
.h2-stop.on::before{border-color:var(--elec);transform:scale(1.25)}
.h2-stop em{font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);transition:color .4s}
.h2-stop.on em{color:var(--elec)}
.h2-stop b{display:block;margin-top:10px;font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(17px,1.5vw,23px);line-height:1.18}
.h2-stop span{display:block;margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--soft);max-width:26ch}

/* --- 06 · SCALE BREAK · the deliberately huge moment ---------------------
   Rhythm 5. One band far larger than everything around it, so the page has
   a peak instead of one flat density from top to bottom. */
.h2-scale{position:relative;padding:clamp(90px,15vh,190px) 0;background:var(--navy);color:#fff;overflow:hidden;isolation:isolate}
.h2-scale-viz{position:absolute;left:30%;right:0;top:0;bottom:0;z-index:0;opacity:.62;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%);
  mask-image:linear-gradient(90deg,transparent 0,#000 46%)}
.h2-scale .h2-in{z-index:2}
.h2-scale h2{font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:-.045em;line-height:.92;
  font-size:var(--huge);margin:0;text-transform:uppercase}
.h2-scale h2 span{display:block}
.h2-scale h2 span:nth-child(2){color:#7489FF}
.h2-scale p{margin:clamp(22px,3vh,40px) 0 0;font-family:"Montserrat",sans-serif;font-weight:500;
  font-size:clamp(19px,2.1vw,30px);letter-spacing:-.02em;color:rgba(255,255,255,.72)}

/* --- 07 · PROOF · one feature, two supports -----------------------------
   Rhythm 6. The four dark thumbnails on the live home become one bright
   feature carrying the film, read as Client / Challenge / Result. */
.h2-proof-feat{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(24px,3vw,52px);margin-top:clamp(32px,4.6vh,60px);align-items:stretch}
.h2-film{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--pale2);border:1px solid var(--hair);border-radius:0;margin:0}
.h2-film video,.h2-film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.h2-film-btn{position:absolute;inset:0;display:flex;align-items:flex-end;gap:14px;
  padding:26px;border:0;background:linear-gradient(180deg,rgba(13,21,38,0) 52%,rgba(13,21,38,.62) 100%);
  color:#fff;cursor:pointer;font-family:"Inter",sans-serif;font-weight:600;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;transition:background .4s;text-align:left}
.h2-film-btn:hover{background:linear-gradient(180deg,rgba(13,21,38,.06) 40%,rgba(13,21,38,.72) 100%)}
.h2-film-btn s{text-decoration:none;width:46px;height:46px;border-radius:0;background:#fff;color:var(--navy);
  display:grid;place-items:center;flex:0 0 auto;transition:transform .4s var(--ease)}
.h2-film-btn:hover s{transform:scale(1.08)}
.h2-film-btn svg{width:17px;height:17px}
.h2-film.playing .h2-film-btn{opacity:0;pointer-events:none}
.h2-story{display:flex;flex-direction:column;justify-content:center}
.h2-story-r{padding:20px 0;border-top:1px solid var(--hair)}
.h2-story-r:last-of-type{border-bottom:1px solid var(--hair)}
.h2-story-r em{font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:9.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint)}
.h2-story-r p{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--ink)}
.h2-story-r.out p{color:var(--elec);font-family:"Montserrat",sans-serif;font-weight:500;font-size:19px;letter-spacing:-.02em}
.h2-proof-more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);margin-top:clamp(20px,2.6vh,32px)}
.h2-case{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:18px;border:1px solid var(--hair);
  border-radius:0;background:var(--paper);text-decoration:none;color:inherit;
  transition:border-color .4s,transform .4s var(--ease),box-shadow .4s var(--ease)}
.h2-case:hover{border-color:rgba(5,32,245,.4);transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(13,21,38,.5)}
.h2-case figure{margin:0;width:clamp(90px,10vw,140px);aspect-ratio:1;overflow:hidden;border-radius:0;background:var(--pale2)}
.h2-case img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.h2-case:hover img{transform:scale(1.06)}
.h2-case em{font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:9.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--elec)}
.h2-case b{display:block;margin-top:8px;font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(16px,1.3vw,19px);
  letter-spacing:-.02em;line-height:1.22}
.h2-case span{display:block;margin-top:7px;font-size:13px;line-height:1.5;color:var(--soft)}

/* --- 08 · BENTO · bright tiles, small clean labels, no dark overlay ------
   Rhythm 7. A tall image at the left, two stacked tiles at the right, a
   narrow and a wide tile along the bottom. */
.h2-bento{display:grid;grid-template-columns:repeat(12,1fr);
  grid-template-rows:minmax(160px,23vh) minmax(160px,23vh) minmax(150px,21vh);
  gap:clamp(10px,1.1vw,16px);margin-top:clamp(32px,4.6vh,60px)}
.h2-tile{position:relative;overflow:hidden;border-radius:0;background:var(--pale2);text-decoration:none;color:inherit;display:block}
.h2-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.h2-tile:hover img{transform:scale(1.045)}
/* the label is a small white chip, not a full-bleed scrim: the photograph
   stays bright, which is the whole point of the band */
.h2-tile-lab{position:absolute;left:14px;bottom:14px;z-index:2;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-radius:0;padding:11px 15px;max-width:calc(100% - 28px);
  box-shadow:0 10px 26px -18px rgba(13,21,38,.6);transition:transform .45s var(--ease)}
.h2-tile:hover .h2-tile-lab{transform:translateY(-3px)}
.h2-tile-lab b{display:block;font-family:"Montserrat",sans-serif;font-weight:500;font-size:16px;letter-spacing:-.02em;line-height:1.2}
.h2-tile-lab span{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--soft)}
.h2-tile.lead{grid-column:1 / 8;grid-row:1 / 3}
.h2-tile.lead .h2-tile-lab{left:18px;bottom:18px;padding:15px 19px}
.h2-tile.lead .h2-tile-lab b{font-size:clamp(18px,1.7vw,25px)}
.h2-tile.lead .h2-tile-lab span{max-width:38ch}
.h2-tile.b{grid-column:8 / 13;grid-row:1 / 2}
.h2-tile.c{grid-column:8 / 13;grid-row:2 / 3}
.h2-tile.d{grid-column:1 / 5;grid-row:3 / 4}
.h2-tile.e{grid-column:5 / 13;grid-row:3 / 4}
.h2-bento-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px}
.h2-bento-foot p{margin:0;font-size:13.5px;color:var(--faint)}

/* --- 09 · AI · full-width pale, the engine as the whole subject ----------
   Rhythm 8. This gets a band of its own because it is half the hero
   positioning: Data to Context to Intelligence to Action, drawn not described. */
.h2-ai{background:var(--pale);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.h2-ai-stage{height:clamp(300px,44vh,470px);margin-top:clamp(28px,4vh,52px);position:relative}
.h2-ai-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,30px);margin-top:clamp(22px,3vh,38px);
  border-top:1px solid var(--hair2);padding-top:22px}
.h2-ai-step em{font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:9.5px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--elec)}
.h2-ai-step b{display:block;margin-top:9px;font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:-.02em;
  font-size:clamp(16px,1.35vw,20px);line-height:1.2}
.h2-ai-step span{display:block;margin-top:7px;font-size:13.5px;line-height:1.55;color:var(--soft);max-width:28ch}

/* --- 10 · PEOPLE · one wide photograph, three cards ---------------------- */
.h2-people-shot{position:relative;margin:clamp(30px,4.4vh,58px) 0 0;aspect-ratio:21/8;overflow:hidden;border-radius:0;background:var(--pale2)}
.h2-people-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.h2-roster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px);margin-top:clamp(20px,2.8vh,34px)}
.h2-person{padding:22px 0 0;border-top:2px solid var(--navy)}
.h2-person b{display:block;font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(17px,1.4vw,21px);letter-spacing:-.02em}
.h2-person em{font-style:normal;display:block;margin-top:7px;font-family:"Inter",sans-serif;font-weight:600;font-size:10px;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.h2-person span{display:block;margin-top:11px;font-size:13.5px;line-height:1.55;color:var(--soft)}
.h2-note{margin-top:18px;font-size:12.5px;color:var(--faint)}

/* --- 11 · START · the three assessments, one CTA, FAQ underneath -------- */
.h2-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);margin-top:clamp(30px,4.4vh,56px)}
.h2-pick{position:relative;padding:26px 24px;border:1px solid var(--hair);border-radius:0;background:var(--paper);
  display:flex;flex-direction:column;gap:9px;transition:border-color .4s,box-shadow .45s var(--ease),transform .45s var(--ease)}
.h2-pick:hover{border-color:rgba(5,32,245,.42);transform:translateY(-3px);box-shadow:0 24px 46px -32px rgba(13,21,38,.55)}
.h2-pick em{font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--elec)}
.h2-pick b{font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(19px,1.6vw,24px);letter-spacing:-.022em;line-height:1.18}
.h2-pick p{margin:0;font-size:14px;line-height:1.58;color:var(--soft)}
.h2-pick-t{margin-top:auto;padding-top:16px;font-family:"Inter",sans-serif;font-weight:600;font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.h2-start-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(26px,3.4vh,42px)}
.h2-start-cta p{margin:0;font-size:13.5px;color:var(--faint)}
.h2-faq{margin-top:clamp(40px,6vh,74px);border-top:1px solid var(--hair)}
.h2-fq{border-bottom:1px solid var(--hair)}
.h2-fq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(15.5px,1.25vw,18px);letter-spacing:-.015em;
  transition:color .3s}
.h2-fq summary::-webkit-details-marker{display:none}
.h2-fq summary:hover{color:var(--elec)}
.h2-fq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-6px;
  border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);transform:rotate(45deg);
  transition:transform .35s var(--ease),border-color .3s}
.h2-fq[open] summary::after{transform:rotate(-135deg);border-color:var(--elec)}
.h2-fq p{margin:0 0 22px;font-size:14.5px;line-height:1.65;color:var(--soft);max-width:76ch}

/* --- 12 · GLOBAL + CTA · the closing 3D, then the single action --------- */
.h2-globe{background:var(--paper)}
.h2-globe-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,72px);align-items:center;margin-top:clamp(28px,4vh,52px)}
.h2-globe-stage{aspect-ratio:1/.66;min-height:280px;position:relative}
.h2-cities{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.h2-city{background:var(--paper);padding:22px 20px}
.h2-city b{display:block;font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(16px,1.3vw,20px);letter-spacing:-.02em}
.h2-city span{display:block;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--faint)}
.h2-close{position:relative;background:var(--navy);color:#fff;padding:clamp(64px,9vh,118px) 0;overflow:hidden;isolation:isolate}
.h2-close-viz{position:absolute;left:34%;right:0;top:0;bottom:0;z-index:0;opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 44%);
  mask-image:linear-gradient(90deg,transparent 0,#000 44%)}
.h2-close .h2-in{z-index:2}
.h2-close h2{font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(30px,4.4vw,60px);margin:16px 0 0;max-width:17ch}
.h2-close p{margin:20px 0 0;font-size:clamp(15.5px,1.25vw,18px);line-height:1.62;color:rgba(255,255,255,.72);max-width:52ch}
.h2-close .h2-cta{background:#fff;color:var(--navy)}
.h2-close .h2-cta:hover{background:#EAF0FF}
.h2-close .h2-cta.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.h2-close .h2-cta.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}

/* --- 13 · RESPONSIVE · two tiers only, per the tp.css rebuild note ------ */
@media (max-width:1000px){
  .h2-hero{grid-template-columns:1fr;min-height:auto}
  .h2-hero-copy{padding:118px clamp(16px,4vw,44px) 44px;order:1}
  .h2-hero-shot{order:2;aspect-ratio:16/10}
  .h2-hero-shot::before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,0) 22%)}
  .h2-hero-scroll{display:none}
  .h2-trust-top{grid-template-columns:1fr;align-items:start}
  .h2-facts{grid-template-columns:repeat(2,1fr);gap:22px}
  .h2-eco{grid-template-columns:1fr;gap:26px}
  .h2-eco-stage{aspect-ratio:1/.72;min-height:300px}
  .h2-proof-feat{grid-template-columns:1fr}
  .h2-proof-more{grid-template-columns:1fr}
  .h2-globe-grid{grid-template-columns:1fr}
  .h2-picks{grid-template-columns:1fr}
  .h2-roster{grid-template-columns:1fr}
  .h2-person{padding-top:18px}
  .h2-bento{grid-template-rows:minmax(150px,26vh) minmax(140px,22vh) minmax(140px,22vh)}
  .h2-tile.lead{grid-column:1 / 13;grid-row:1 / 2}
  .h2-tile.b{grid-column:1 / 7;grid-row:2 / 3}
  .h2-tile.c{grid-column:7 / 13;grid-row:2 / 3}
  .h2-tile.d{grid-column:1 / 7;grid-row:3 / 4}
  .h2-tile.e{grid-column:7 / 13;grid-row:3 / 4}
  .h2-ai-flow{grid-template-columns:1fr 1fr;gap:22px}
  .h2-stops{grid-template-columns:1fr 1fr;gap:22px}
}
@media (max-width:640px){
  .h2{--band:clamp(52px,8vh,74px)}
  .h2-facts{grid-template-columns:1fr 1fr;gap:18px}
  .h2-fact span{max-width:none}
  .h2-case{grid-template-columns:1fr;gap:14px}
  .h2-case figure{width:100%;aspect-ratio:16/9}
  .h2-ai-flow{grid-template-columns:1fr}
  .h2-stops{grid-template-columns:1fr}
  .h2-bento{grid-template-rows:repeat(5,minmax(150px,24vh))}
  .h2-tile.lead,.h2-tile.b,.h2-tile.c,.h2-tile.d,.h2-tile.e{grid-column:1 / 13}
  .h2-tile.lead{grid-row:1 / 2}
  .h2-tile.b{grid-row:2 / 3}
  .h2-tile.c{grid-row:3 / 4}
  .h2-tile.d{grid-row:4 / 5}
  .h2-tile.e{grid-row:5 / 6}
  .h2-cities{grid-template-columns:1fr}
  .h2-people-shot{aspect-ratio:4/3}
  .h2-scale h2{letter-spacing:-.035em}
}

/* --- 14 · REDUCED MOTION ------------------------------------------------
   m20 still builds and renders one still frame of every scene, so the page
   keeps its 3D language; only the loops and the CSS animations stop. */
@media (prefers-reduced-motion:reduce){
  .h2-hero-scroll i::after{animation:none;transform:none}
  .h2-tile img,.h2-case img,.h2-tile-lab{transition:none}
  .h2-hero-shot video{display:none}
}


/* 4 Sep 2026: the home loading screen, copied from index-v2.css so the
   loader on this page is styled rather than dumped as text at the top left */
/* --- 4 · was the inline <style> inside <div id="tpLoader"> -------------- */
#tpLoader{position:fixed;inset:0;z-index:99990;background:#F5F7FC;display:flex;align-items:center;justify-content:center;
  transition:transform .72s cubic-bezier(.65,.05,.36,1);will-change:transform}
#tpLoader.done{transform:translateY(-101%)}
#tpLoader.gone{display:none}
.tpl-frame{position:relative;width:min(420px,72vw);padding:46px 38px 40px;border:1px solid rgba(16,22,38,.16)}
.tpl-frame:before,.tpl-frame:after,.tpl-frame b:before,.tpl-frame b:after{content:"";position:absolute;width:14px;height:14px;border:0 solid #101626}
.tpl-frame:before{left:-1px;top:-1px;border-left-width:1.5px;border-top-width:1.5px}
.tpl-frame:after{right:-1px;top:-1px;border-right-width:1.5px;border-top-width:1.5px}
.tpl-frame b:before{left:-1px;bottom:-1px;border-left-width:1.5px;border-bottom-width:1.5px}
.tpl-frame b:after{right:-1px;bottom:-1px;border-right-width:1.5px;border-bottom-width:1.5px}
.tpl-line{position:absolute;left:0;top:-1px;height:1.5px;width:0;background:#06156A;transition:width .18s linear}
.tpl-logo{position:relative;display:block;width:100%;height:auto}
.tpl-logo .fill{position:absolute;inset:0;overflow:hidden;height:100%}
.tpl-logo .fill img{filter:none}
.tpl-mark{position:relative;display:block}
.tpl-mark img{display:block;width:100%;height:auto;opacity:.16}
.tpl-mark .ink{position:absolute;left:0;bottom:0;width:100%;overflow:hidden;height:0%}
.tpl-mark .ink img{position:absolute;left:0;bottom:0;width:100%;opacity:1}
.tpl-sub{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;
  font:700 10px "Inter",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#6B7185}
.tpl-ct{font:700 22px "Inter",sans-serif;letter-spacing:.02em;color:#101626}
@media (prefers-reduced-motion:reduce){#tpLoader{display:none}}


/* --- 4 Sep 2026 · REVIEW PASS (Bazil) ------------------------------------
   Padding follows the viewport, the logo row sits lower, the capability
   list reads left with icons and the scene right, the 3D diagrams carry
   anchored labels, and the sector tiles lose their white label boxes. */
.h2{--band:clamp(56px,7vw,116px)}
.h2-marq{margin-top:clamp(48px,6.5vh,88px)}

/* capabilities: list left, scene right */
.h2-eco{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
.h2-eco-stage{order:2}
.h2-caps{order:1}
.h2-cap{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:18px;align-items:start;padding:24px 22px 24px 22px}
.h2-cap b,.h2-cap span{grid-column:2}
.h2-cap-ic{grid-column:1;grid-row:1 / span 2;width:46px;height:46px;border:1px solid var(--hair2);border-radius:50%;display:grid;place-items:center;color:var(--elec);background:#fff;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.h2-cap-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.h2-cap:hover .h2-cap-ic,.h2-cap:focus-visible .h2-cap-ic{background:var(--elec);border-color:var(--elec);color:#fff}
.h2-cap:hover,.h2-cap:focus-visible{padding-left:26px}

/* anchored scene labels */
.h2-tag{position:absolute;z-index:3;left:0;top:0;pointer-events:none;white-space:nowrap;font:500 13px/1.25 Inter,system-ui,sans-serif;color:var(--navy);letter-spacing:.005em}
.h2-tag i{display:block;font:700 10px/1 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--elec);margin-bottom:5px;font-style:normal}
.h2-tag::before{content:"";position:absolute;background:var(--navy);opacity:.55}
.h2-tag::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--elec)}
.h2-tag[data-side="r"]{transform:translate(0,-50%);padding-left:22px}
.h2-tag[data-side="r"]::before{left:3px;top:50%;width:14px;height:1px}
.h2-tag[data-side="r"]::after{left:-3px;top:50%;margin-top:-3px}
.h2-tag[data-side="l"]{transform:translate(-100%,-50%);padding-right:22px;text-align:right}
.h2-tag[data-side="l"]::before{right:3px;top:50%;width:14px;height:1px}
.h2-tag[data-side="l"]::after{right:-3px;top:50%;margin-top:-3px}
.h2-tag[data-side="t"]{transform:translate(-50%,-100%);padding-bottom:22px;text-align:center}
.h2-tag[data-side="t"]::before{left:50%;bottom:3px;width:1px;height:14px}
.h2-tag[data-side="t"]::after{left:50%;bottom:-3px;margin-left:-3px}
.h2-tag[data-side="b"]{transform:translate(-50%,0);padding-top:22px;text-align:center}
.h2-tag[data-side="b"]::before{left:50%;top:3px;width:1px;height:14px}
.h2-tag[data-side="b"]::after{left:50%;top:-3px;margin-left:-3px}
.h2-scale .h2-tag,.h2-close .h2-tag{color:#fff}
.h2-ai .h2-tag{color:var(--navy)}

/* sector tiles: words on the photograph, no box, a soft fade for legibility */
.h2-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(13,21,38,0) 0%,rgba(13,21,38,.34) 55%,rgba(13,21,38,.62) 100%)}
.h2-tile-lab,.h2-tile.lead .h2-tile-lab{background:none;padding:0;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;left:clamp(18px,1.7vw,30px);right:clamp(18px,1.7vw,30px);bottom:clamp(18px,1.6vw,28px);color:#fff;max-width:none}
.h2-tile-lab::before{content:"";display:block;width:26px;height:2px;background:var(--elec);margin-bottom:11px}
.h2-tile-lab b{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.28)}
.h2-tile-lab span{color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,0,0,.28);max-width:44ch}
.h2-tile.lead .h2-tile-lab b{font-size:clamp(20px,1.9vw,28px)}
.h2-tile:hover .h2-tile-lab{transform:translateY(-4px)}
@media (max-width:1000px){
  .h2-eco-stage{order:1}.h2-caps{order:2}
  .h2-tag{font-size:12px}
}
@media (max-width:640px){
  .h2-cap{grid-template-columns:38px 1fr;column-gap:14px}
  .h2-cap-ic{width:38px;height:38px}.h2-cap-ic svg{width:18px;height:18px}
  .h2-tag i{display:none}.h2-tag{font-size:11px}
}

/* people: hairline instead of the heavy rule, one icon per role */
.h2-person{border-top:1px solid var(--hair2);padding:20px 0 0;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;align-items:start}
.h2-person b,.h2-person em,.h2-person span{grid-column:2}
.h2-person b{margin-top:2px}
.h2-person-ic{grid-column:1;grid-row:1 / span 3;width:44px;height:44px;border:1px solid var(--hair2);border-radius:50%;display:grid;place-items:center;color:var(--elec);background:#fff}
.h2-person-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.h2-people-shot{aspect-ratio:21/9}
.h2-people-shot img{object-position:50% 45%}
@media (max-width:640px){.h2-person{grid-template-columns:38px 1fr;column-gap:12px}.h2-person-ic{width:38px;height:38px}}


/* --- 4 Sep 2026 · REVIEW PASS 2 ------------------------------------------
   Narrower side margins on wide screens, taller sector tiles with icons,
   a premium proof feature, the scale band on white, and the journey as a
   legible four-stage process instead of a tracked 3D set. */
.h2-in{max-width:clamp(1200px,88vw,1720px)}

/* sector tiles */
.h2-bento{grid-template-rows:minmax(230px,32vh) minmax(230px,32vh) minmax(210px,28vh)}
.h2-tile-lab::before{content:none}
.h2-tile-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;margin-bottom:12px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.h2-tile-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* journey: the process */
.h2-lede{margin:clamp(14px,2vh,22px) 0 0;font-size:clamp(15px,1.15vw,17.5px);line-height:1.6;color:var(--soft);max-width:58ch}
.h2-rail{margin-top:clamp(56px,7vh,92px);border-top:1px solid var(--hair2)}
.h2-rail::after{content:"";position:absolute;right:-1px;top:-5px;width:8px;height:8px;border-top:1px solid var(--hair2);border-right:1px solid var(--hair2);transform:rotate(45deg);background:var(--pale)}
.h2-rail-fill{height:2px;top:-1px;transition:width .25s linear}
.h2-stops{gap:clamp(18px,2.4vw,40px)}
.h2-stop{padding:48px 0 0}
.h2-stop::before{content:none}
.h2-stop-n{position:absolute;left:0;top:-25px;width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid var(--hair2);display:grid;place-items:center;color:var(--faint);transition:color .4s,border-color .4s,box-shadow .4s}
.h2-stop-n svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.h2-stop.on .h2-stop-n{color:var(--elec);border-color:var(--elec);box-shadow:0 0 0 6px rgba(5,32,245,.1)}
.h2-stop small{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);font-size:13px;line-height:1.5;color:var(--ink);max-width:28ch}
.h2-stop small strong{display:block;font-family:"Inter",sans-serif;font-weight:600;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}

/* scale: white, typographic */
.h2-scale{background:var(--paper);color:var(--navy);padding:var(--band) 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);overflow:visible}
.h2-scale-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:end}
.h2-scale h2{font-size:clamp(58px,9.2vw,176px);line-height:.9;letter-spacing:-.05em;text-transform:none;color:var(--navy)}
.h2-scale h2 span:nth-child(2){color:var(--elec)}
.h2-scale h2 span.ol{color:transparent;-webkit-text-stroke:2px var(--navy)}
.h2-scale-keys{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair2)}
.h2-scale-keys li{padding:18px 0;border-bottom:1px solid var(--hair2)}
.h2-scale-keys em{display:block;font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--elec)}
.h2-scale-keys b{display:block;margin-top:7px;font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(17px,1.35vw,21px);letter-spacing:-.02em;line-height:1.25;color:var(--navy)}
.h2-scale p{color:var(--soft);margin-top:clamp(28px,4vh,52px)}

/* proof: premium feature */
.h2-proof-feat{grid-template-columns:minmax(0,1.4fr) minmax(0,.7fr);gap:clamp(28px,4vw,72px)}
.h2-film{border:0;box-shadow:0 40px 80px -48px rgba(13,21,38,.55)}
.h2-film-btn{align-items:center;justify-content:center;padding:0;background:linear-gradient(180deg,rgba(13,21,38,0) 55%,rgba(13,21,38,.5) 100%)}
.h2-film-btn s{width:clamp(64px,5.4vw,84px);height:clamp(64px,5.4vw,84px);border-radius:50%;background:#fff;color:var(--navy);box-shadow:0 0 0 10px rgba(255,255,255,.18),0 20px 40px -18px rgba(13,21,38,.6)}
.h2-film-btn svg{width:22px;height:22px;margin-left:3px}
.h2-film-btn span{position:absolute;left:clamp(18px,2vw,30px);bottom:clamp(16px,1.8vw,26px);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.h2-film-btn:hover{background:linear-gradient(180deg,rgba(13,21,38,.04) 45%,rgba(13,21,38,.58) 100%)}
.h2-story-r{padding:22px 0}
.h2-story-r em{color:var(--faint)}
.h2-story-r p{font-size:clamp(15px,1.15vw,17px)}
.h2-story-r.out p{font-size:clamp(24px,2.1vw,34px);line-height:1.12;letter-spacing:-.03em}
.h2-proof-more{margin-top:clamp(22px,3vh,40px)}
.h2-case{display:block;position:relative;aspect-ratio:16/8.4;min-height:240px;padding:0;border:0;overflow:hidden;background:var(--pale2)}
.h2-case:hover{border-color:transparent;transform:translateY(-4px);box-shadow:0 30px 56px -34px rgba(13,21,38,.55)}
.h2-case figure{position:absolute;inset:0;width:auto;aspect-ratio:auto}
.h2-case::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(13,21,38,0) 0%,rgba(13,21,38,.38) 50%,rgba(13,21,38,.7) 100%)}
.h2-case > div{position:absolute;left:clamp(18px,1.8vw,30px);right:clamp(18px,1.8vw,30px);bottom:clamp(18px,1.8vw,28px);z-index:2;color:#fff}
.h2-case em{color:#9DBBFF}
.h2-case b{color:#fff;font-size:clamp(19px,1.6vw,25px);margin-top:9px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.h2-case span{color:rgba(255,255,255,.86);font-size:13.5px;max-width:48ch;text-shadow:0 1px 3px rgba(0,0,0,.3)}

@media (max-width:1000px){
  .h2-scale-grid{grid-template-columns:1fr;gap:26px;align-items:start}
  .h2-scale h2{font-size:clamp(52px,12vw,110px)}
  .h2-stops{grid-template-columns:1fr 1fr;gap:34px 26px}
  .h2-rail{display:none}
  .h2-stop{padding:0 0 0 66px}
  .h2-stop-n{top:-2px}
  .h2-bento{grid-template-rows:minmax(220px,34vh) minmax(190px,28vh) minmax(190px,28vh)}
}
@media (max-width:640px){
  .h2-stops{grid-template-columns:1fr;gap:30px}
  .h2-stop{padding-left:60px}
  .h2-stop-n{width:44px;height:44px}
  .h2-scale h2{font-size:clamp(44px,15vw,80px)}
  .h2-scale h2 span.ol{-webkit-text-stroke:1.5px var(--navy)}
  .h2-case{aspect-ratio:16/10;min-height:220px}
  .h2-film-btn s{width:58px;height:58px}
  .h2-bento{grid-template-rows:repeat(5,minmax(200px,30vh))}
  .h2-tile-ic{width:36px;height:36px}.h2-tile-ic svg{width:17px;height:17px}
  .h2-tile-lab span{max-width:none}
}

/* --- 4 Sep 2026 · ONE EDGE ----------------------------------------------
   The container width, the site header and the hero copy share one edge
   and one gutter, so every band lines up under the logo at every width. */
.h2,body:has(.h2){--h2-w:clamp(1200px,88vw,1720px);--h2-gut:clamp(16px,2.6vw,44px);--h2-edge:calc(max((100vw - var(--h2-w)) / 2, 0px) + var(--h2-gut))}
.h2-in{max-width:var(--h2-w);padding:0 var(--h2-gut)}
body:has(.h2) .nav-in{max-width:var(--h2-w);padding:0 var(--h2-gut)}
.h2-hero-copy{padding-left:var(--h2-edge)}
.h2-hero-scroll{left:var(--h2-edge)}
.h2-scale-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.h2-scale h2{font-size:clamp(52px,6.9vw,142px)}
@media (max-width:1000px){
  .h2-hero-copy{padding-left:var(--h2-gut);padding-right:var(--h2-gut)}
  .h2-scale h2{font-size:clamp(50px,11vw,104px)}
}
@media (max-width:640px){.h2-scale h2{font-size:clamp(42px,14vw,76px)}}

/* the hero edge is measured against the hero's own inline size (cqw), not
   100vw: under the large-display zoom, vw resolves to the unzoomed viewport
   and the copy would drift right of the logo on 2K and 4K screens */
.h2-hero{container-type:inline-size}
.h2-hero-copy{padding-left:calc(max((100cqw - var(--h2-w)) / 2, 0px) + var(--h2-gut))}
.h2-hero-scroll{left:calc(max((100cqw - var(--h2-w)) / 2, 0px) + var(--h2-gut))}
@media (max-width:1000px){.h2-hero-copy{padding-left:var(--h2-gut)}}
@media (max-width:640px){.h2-scale h2{font-size:clamp(38px,11vw,76px)}}

/* mobile: the scale band stacks (the one-edge block above re-set the desktop columns after the media rule) */
@media (max-width:1000px){.h2-scale-grid{grid-template-columns:1fr}}

/* 4 Sep 2026: the white fade on the hero photo was too heavy. A short, soft
   edge blend only, so the photograph keeps its light and colour */
.h2-hero-shot::before{background:linear-gradient(90deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.14) 6%,rgba(255,255,255,0) 13%)}
@media (max-width:1000px){.h2-hero-shot::before{background:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,0) 10%)}}

/* 4 Sep 2026: no line design. The stat rules, the capability dividers and
   the roster hairline go; the icon circles beat the generic span rules */
.h2-fact{padding-left:0}
.h2-fact::before{content:none}
.h2-cap,.h2-cap:last-child{border-top:0;border-bottom:0}
.h2-cap{padding:20px 22px}
.h2-person{border-top:0;padding-top:0}
.h2-cap .h2-cap-ic,.h2-person .h2-person-ic,.h2-stop .h2-stop-n{display:grid;place-items:center;margin:0;font-size:0;line-height:0}
.h2-cap .h2-cap-ic{grid-column:1;grid-row:1 / span 2}
.h2-person .h2-person-ic{grid-column:1;grid-row:1 / span 3}
.h2-stop .h2-stop-n{position:absolute}
.h2-stop small{border-top:0;padding-top:0;margin-top:12px}

/* 4 Sep 2026: the capability cloud replaces the cube ecosystem */
.h2-capmorph{position:relative;aspect-ratio:1/.92;min-height:400px;z-index:0}
.h2-capmorph canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.h2-eco-stage::after{opacity:.55}
.h2-capcap{position:absolute;left:0;bottom:0;z-index:3;max-width:34ch;transition:opacity .26s ease,transform .26s ease}
.h2-capcap.sw{opacity:0;transform:translateY(6px)}
.h2-capcap i{display:block;font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--elec)}
.h2-capcap b{display:block;margin-top:6px;font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(18px,1.5vw,23px);letter-spacing:-.02em;color:var(--navy)}
.h2-capcap span{display:block;margin-top:5px;font-size:13.5px;line-height:1.5;color:var(--soft)}
.h2-cap.lit{background:var(--pale)}
.h2-cap.lit .h2-cap-ic{background:var(--elec);border-color:var(--elec);color:#fff}
figure.h2-cap-ic,figure.h2-person-ic,figure.h2-stop-n{margin:0}
@media (max-width:1000px){.h2-capmorph{aspect-ratio:auto;height:360px;min-height:0}.h2-capcap{max-width:60%}}
@media (max-width:640px){.h2-capmorph{height:320px}}

/* 4 Sep 2026: primary CTA in the heading face, electric blue (Prototype 3) */
.h2-cta{font-family:"Montserrat",sans-serif;font-size:14px;font-weight:600;letter-spacing:.04em;background:var(--elec);box-shadow:0 18px 36px -18px rgba(5,32,245,.7)}
.h2-cta:hover{background:#041BD0;box-shadow:0 22px 44px -18px rgba(5,32,245,.8)}
.h2-cta.ghost{background:transparent;box-shadow:none}
.h2-close .h2-cta{background:#fff;color:var(--navy);box-shadow:none}

/* ═══ 4 SEP 2026 · REVIEW PASS 2 (Bazil, live) ═══════════════════════════
   Hero seam, header at rest, the facts row, the journey flow. */

/* 1 · the hero seam is a long gradient, not a feather. The left column is
   true white and the photograph resolves out of it, so there is no vertical
   edge anywhere in the band. */
.h2-hero-shot::before{
  background:linear-gradient(90deg,
    #fff 0%,rgba(255,255,255,.985) 7%,rgba(255,255,255,.93) 14%,
    rgba(255,255,255,.78) 21%,rgba(255,255,255,.55) 28%,
    rgba(255,255,255,.32) 35%,rgba(255,255,255,.14) 42%,
    rgba(255,255,255,.04) 48%,rgba(255,255,255,0) 54%)}
/* 2 · the subject sits clear of the fade: the crop is anchored left of centre
   so the person reads in the open right half of the frame */
.h2-hero-shot img,.h2-hero-shot video{object-position:26% center}
@media (max-width:1000px){
  .h2-hero-shot::before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.72) 10%,rgba(255,255,255,.26) 20%,rgba(255,255,255,0) 32%)}
  .h2-hero-shot img,.h2-hero-shot video{object-position:50% center}
}

/* 3 · the bar is not there until you move. At rest the hero is the whole
   frame; the header fades in the moment the page scrolls. */
/* !important x2: premium.css L73 sets header.nav background and border-bottom
   with !important and loads after this sheet, so the glass bar would keep
   painting over the top of the hero. The blur goes with it, or the hero
   photograph reads smeared behind an invisible bar. */
body:has(.h2) .nav.attop{background:transparent!important;border-bottom-color:transparent!important;
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body:has(.h2) .nav.attop .nav-in{opacity:0;transform:translateY(-10px);pointer-events:none}
body:has(.h2) .nav .nav-in{transition:opacity .45s var(--ease),transform .45s var(--ease)}

/* 4 · the facts: an animated mark over each number, the label on one line */
.h2-facts{align-items:start}
.h2-fact{display:flex;flex-direction:column;align-items:flex-start}
.h2-fact-ic{margin:0 0 22px;width:38px;height:38px;display:grid;place-items:center;color:var(--elec);
  font-size:0;line-height:0}
.h2-fact-ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.h2-fact span{max-width:24ch}

/* the marks move, slowly */
@keyframes h2fRise{0%,100%{transform:scaleY(.72)}50%{transform:scaleY(1)}}
@keyframes h2fSpin{to{transform:rotate(360deg)}}
@keyframes h2fPing{0%{transform:scale(.35);opacity:.9}70%{opacity:0}100%{transform:scale(1);opacity:0}}
@keyframes h2fDraw{0%{stroke-dashoffset:64}55%,100%{stroke-dashoffset:3.2}}
@keyframes h2fFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
.h2-fic-bar{transform-origin:50% 100%;animation:h2fRise 3.6s var(--ease) infinite}
.h2-fic-bar.b2{animation-delay:.25s}.h2-fic-bar.b3{animation-delay:.5s}
.h2-fic-orb{transform-origin:12px 12px;animation:h2fSpin 16s linear infinite}
.h2-fic-ping{transform-origin:12px 15px;animation:h2fPing 3.2s var(--ease) infinite}
.h2-fic-ping.p2{animation-delay:1.1s}
.h2-fic-pin{transform-origin:12px 15px;animation:h2fFloat 3.4s var(--ease) infinite}
.h2-fic-arc{stroke-dasharray:64;stroke-dashoffset:64;animation:h2fDraw 5.2s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){
  .h2-fic-bar,.h2-fic-orb,.h2-fic-ping,.h2-fic-pin,.h2-fic-arc{animation:none}
  .h2-fic-arc{stroke-dashoffset:3.2}
}
@media (max-width:640px){.h2-fact-ic{margin-bottom:14px;width:30px;height:30px}.h2-fact-ic svg{width:27px;height:27px}}

/* 5 · the capability list starts at the heading, not halfway down the band */
.h2-eco{align-items:start}
.h2-caps{align-self:start;margin-top:-6px}
.h2-eco-stage{align-self:start}

/* 6 · the journey rail carries the work through it. A light pulse leaves the
   first stop every two seconds and runs the length of the rail; each node
   rings as the pulse reaches it, so the band animates the process rather
   than just labelling it. The scroll-driven .h2-rail-fill stays underneath. */
.h2-rail::before{content:"";position:absolute;left:0;top:-3px;height:6px;width:20%;z-index:2;pointer-events:none;
  border-radius:3px;opacity:0;
  background:linear-gradient(90deg,rgba(5,32,245,0) 0%,rgba(5,32,245,.10) 34%,rgba(5,32,245,.55) 68%,rgba(5,32,245,.98) 86%,rgba(255,255,255,.9) 100%);
  animation:h2flow 2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes h2flow{
  0%{transform:translateX(-100%);opacity:0}
  8%{opacity:1}
  86%{opacity:1}
  100%{transform:translateX(500%);opacity:0}}
.h2-stop-n::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--elec);
  opacity:0;animation:h2node 2s cubic-bezier(.4,0,.3,1) infinite}
.h2-stop:nth-child(2) .h2-stop-n::after{animation-delay:.42s}
.h2-stop:nth-child(3) .h2-stop-n::after{animation-delay:.84s}
.h2-stop:nth-child(4) .h2-stop-n::after{animation-delay:1.26s}
@keyframes h2node{0%{transform:scale(1);opacity:0}6%{opacity:.85}55%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}}
@media (prefers-reduced-motion:reduce){.h2-rail::before,.h2-stop-n::after{animation:none;opacity:0}}
@media (max-width:1000px){.h2-rail::before{display:none}}

/* 7 · the journey heading reads on two lines, not three: it is the longest
   heading on the page, so it gets a wider measure and a smaller step. */
.h2-jrn .h2-h{max-width:30ch;font-size:clamp(28px,3.5vw,52px)}
@media (max-width:1000px){.h2-jrn .h2-h{max-width:20ch}}

/* ═══ 4 SEP 2026 · REVIEW PASS 3 (Bazil, live) ═══════════════════════════ */

/* 8 · the facts read as one line each: the mark sits beside the number, not
   over it, at one optical size across the four. The label keeps the number's
   left edge, so the icon column hangs outside the text block. */
.h2-fact{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:26px;align-items:start}
.h2-fact-ic{grid-column:1;grid-row:1;align-self:center;margin:0;width:34px;height:34px}
.h2-fact-ic svg{width:32px;height:32px}
.h2-fact b{grid-column:2;grid-row:1}
.h2-fact span{grid-column:2;grid-row:2;margin-top:9px;max-width:24ch}
@media (max-width:1200px){.h2-fact{column-gap:18px}.h2-fact-ic,.h2-fact-ic svg{width:28px;height:28px}}
@media (max-width:640px){.h2-fact{column-gap:14px}.h2-fact-ic,.h2-fact-ic svg{width:26px;height:26px}}
/* the bars keep most of their height at rest, so the mark never reads smaller
   than the other three mid-animation */
@keyframes h2fRise{0%,100%{transform:scaleY(.86)}50%{transform:scaleY(1)}}

/* 9 · HOYA is a wordmark on a 4:1 box: at the shared 146px slot it was
   width-limited to about 17px of ink while the other marks showed 30 to 40.
   Its viewBox is cropped to the glyphs (assets/clients/hoya.svg) and the slot
   is widened for it alone, so it lands at the same optical weight. */
.h2-marq .logoslot:has(img[src*="hoya"]){width:clamp(140px,11vw,178px)}

/* ═══ 4 SEP 2026 · REVIEW PASS 3 · NO RULES, MARKS AND FLOW ══════════════
   Client direction, three times in one session: no lines. Every hairline
   that was doing a divider's job comes off and is replaced by a mark, a
   space, or a flow. Structural borders (icon rings, the ghost button, the
   film frame) stay: those are objects, not rules. */

/* 10 · the band boundaries and every list divider */
.h2-trust,.h2-ai,.h2-scale{border-top:0;border-bottom:0}
.h2-ai-flow{border-top:0;padding-top:0}
.h2-faq{border-top:0}
.h2-fq{border-bottom:0}
.h2-stop small{border-top:0;padding-top:0;margin-top:12px}
.h2-person{border-top:0}
.h2-scale-keys{border-top:0}
.h2-scale-keys li{border-bottom:0}
.h2-story-r,.h2-story-r:last-of-type{border-top:0;border-bottom:0}

/* 11 · the facts label reads on one line: it spans the icon column too, so
   the number keeps its mark beside it and the caption gets the full width */
.h2-fact span{grid-column:1 / -1;max-width:none}

/* 12 · the three claims carry a mark, not a rule between them */
.h2-scale-keys{display:grid;gap:clamp(18px,2.4vh,30px)}
.h2-scale-keys li{padding:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:start}
.h2-key-ic{grid-column:1;grid-row:1 / span 2;margin:0;width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;background:var(--pale);color:var(--elec);
  transition:background .45s var(--ease),transform .45s var(--ease)}
.h2-key-ic svg{width:26px;height:26px;fill:currentColor;stroke:none}
.h2-scale-keys em{grid-column:2}
.h2-scale-keys b{grid-column:2}
/* the marks answer the pulse: one lifts every two seconds, in order */
@keyframes h2key{0%,72%,100%{transform:translateY(0);background:var(--pale)}
  16%{transform:translateY(-3px);background:#E6EDFF}}
.h2-scale-keys li:nth-child(1) .h2-key-ic{animation:h2key 6s var(--ease) infinite}
.h2-scale-keys li:nth-child(2) .h2-key-ic{animation:h2key 6s var(--ease) infinite 2s}
.h2-scale-keys li:nth-child(3) .h2-key-ic{animation:h2key 6s var(--ease) infinite 4s}

/* 13 · the proof story is a process, top to bottom: a spine, three nodes,
   and a charge that runs client · challenge · result on the same two-second
   clock as the journey rail. */
.h2-story{position:relative;padding-left:36px}
.h2-story::before{content:"";position:absolute;left:10px;top:26px;bottom:26px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--hair2) 0%,var(--pale2) 100%)}
.h2-story::after{content:"";position:absolute;left:10px;top:26px;width:2px;height:30%;border-radius:2px;
  background:linear-gradient(180deg,rgba(5,32,245,0) 0%,var(--elec) 100%);
  animation:h2spine 2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes h2spine{0%{transform:translateY(-40%);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translateY(300%);opacity:0}}
.h2-story-r{position:relative}
.h2-story-r::before{content:"";position:absolute;left:-32px;top:26px;width:11px;height:11px;border-radius:50%;
  background:#fff;box-shadow:inset 0 0 0 2px var(--hair2);z-index:2}
.h2-story-r.out::before{background:var(--elec);box-shadow:inset 0 0 0 2px var(--elec),0 0 0 5px rgba(5,32,245,.12)}
@media (prefers-reduced-motion:reduce){.h2-story::after,.h2-key-ic{animation:none}}

/* 14 · the journey stages animate as the pulse reaches them. Same clock,
   same stagger as the rail and the node ring. */
.h2-stop-n{width:56px;height:56px;top:-28px}
.h2-stop-n svg{width:25px;height:25px}
.h2-stop{padding-top:52px}
@keyframes h2sweep{0%{transform:rotate(0)}70%,100%{transform:rotate(360deg)}}
@keyframes h2blip{0%,42%{opacity:0;transform:scale(.4)}52%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(1)}}
@keyframes h2plate{0%,100%{transform:translateY(0)}44%{transform:translateY(-2.6px)}}
@keyframes h2ring{0%{stroke-dashoffset:57}62%,100%{stroke-dashoffset:0}}
@keyframes h2tick{0%,52%{stroke-dashoffset:14;opacity:0}70%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes h2climb{0%{stroke-dashoffset:30}64%,100%{stroke-dashoffset:0}}
@keyframes h2peak{0%,58%{opacity:0;transform:scale(.3)}74%{opacity:1;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
.h2-sn-sweep{transform-origin:12px 12px;animation:h2sweep 2s cubic-bezier(.45,0,.3,1) infinite}
.h2-sn-blip{transform-origin:16.4px 8.2px;animation:h2blip 2s var(--ease) infinite}
.h2-sn-blip.b2{transform-origin:8.4px 15.6px;animation-delay:.24s}
.h2-sn-plate{animation:h2plate 2s var(--ease) infinite}
.h2-sn-plate.p2{animation-delay:.12s}.h2-sn-plate.p3{animation-delay:.24s}
.h2-sn-ring{stroke-dasharray:57;stroke-dashoffset:57;animation:h2ring 2s var(--ease) infinite}
.h2-sn-tick{stroke-dasharray:14;stroke-dashoffset:14;animation:h2tick 2s var(--ease) infinite}
.h2-sn-climb{stroke-dasharray:30;stroke-dashoffset:30;animation:h2climb 2s var(--ease) infinite}
.h2-sn-peak{transform-origin:20px 6.6px;animation:h2peak 2s var(--ease) infinite}
.h2-stop:nth-child(2) .h2-stop-n [class^="h2-sn-"]{animation-delay:.42s}
.h2-stop:nth-child(3) .h2-stop-n [class^="h2-sn-"]{animation-delay:.84s}
.h2-stop:nth-child(4) .h2-stop-n [class^="h2-sn-"]{animation-delay:1.26s}
@media (prefers-reduced-motion:reduce){.h2-stop-n [class^="h2-sn-"]{animation:none}
  .h2-sn-ring,.h2-sn-tick,.h2-sn-climb{stroke-dashoffset:0}.h2-sn-blip,.h2-sn-peak{opacity:1}}

/* ═══ 4 SEP 2026 · REVIEW PASS 4 ═════════════════════════════════════════ */

/* 15 · one edge, everywhere. The footer ships with the site-wide .in
   container (tp.css L579, --maxw / --gut); on this page that lands its logo
   about 150px right of every band above it. It takes the page's own edge. */
body:has(.h2) .foot .in{max-width:var(--h2-w);padding-left:var(--h2-gut);padding-right:var(--h2-gut)}

/* 16 · the marks in the scale band carry weight: solid glyphs, larger tile */
.h2-key-ic{width:52px;height:52px;border-radius:16px}
.h2-key-ic svg{width:30px;height:30px}

/* 17 · the last rules on the page: the cities grid drew its cells with a 1px
   background bleed. Cells now separate on space alone. */
.h2-cities{background:none;border:0;gap:clamp(14px,2vw,26px)}

/* 18 · the capability scene runs the full height of the band, level with the
   heading, so the graphic and the words start on the same line. .h2-eco is
   display:contents so its two children join the band's own grid. */
#capabilities .h2-in{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  column-gap:clamp(28px,4vw,72px);align-items:start}
#capabilities .h2-eco{display:contents}
#capabilities .h2-head{grid-column:1;grid-row:1;max-width:none}
#capabilities .h2-caps{grid-column:1;grid-row:2;margin-top:clamp(22px,3.4vh,40px);align-self:start}
#capabilities .h2-eco-stage{grid-column:2;grid-row:1 / span 2;align-self:stretch;height:100%;
  aspect-ratio:auto;min-height:clamp(420px,52vh,580px)}
#capabilities .h2-capmorph{aspect-ratio:auto;min-height:0;height:100%}
@media (max-width:1000px){
  #capabilities .h2-in{display:block}
  #capabilities .h2-eco{display:grid}
  #capabilities .h2-eco-stage{min-height:340px;height:360px}
}

/* ═══ 4 SEP 2026 · REVIEW PASS 5 · REAL PICTURES ═════════════════════════ */

/* 19 · PEOPLE: the words hold the left, the photograph the right. */
.h2-people-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  column-gap:clamp(28px,4vw,72px);align-items:center}
.h2-people-copy .h2-head{max-width:none}
.h2-roster{display:grid;gap:clamp(18px,2.6vh,30px);margin-top:clamp(26px,3.6vh,44px);grid-template-columns:1fr}
.h2-people .h2-person{border-top:0;padding:0}
.h2-people-shot{position:relative;margin:0;overflow:hidden;background:var(--pale2);
  aspect-ratio:4/3.1;box-shadow:0 44px 90px -54px rgba(13,21,38,.6)}
.h2-people-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform 1.4s var(--ease)}
.h2-people-shot:hover img{transform:scale(1.06)}
@media (max-width:1000px){
  .h2-people-grid{grid-template-columns:1fr;row-gap:28px}
  .h2-people-shot{order:2;aspect-ratio:16/10}
  .h2-people-copy{order:1}
}

/* 20 · GLOBAL: three delivery centres, photographed, captions under the
   frame rather than over it (client: no boxes over words on photographs) */
.h2-globe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,28px);margin-top:clamp(30px,4.4vh,58px)}
.h2-cityshot{margin:0;position:relative}
.h2-cityshot img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease);will-change:transform}
.h2-cityshot{overflow:hidden}
.h2-cityshot:hover img{transform:scale(1.045)}
.h2-cityshot figcaption{padding:16px 0 0}
.h2-cityshot figcaption b{display:block;font-family:"Montserrat",sans-serif;font-weight:500;
  font-size:clamp(18px,1.5vw,23px);letter-spacing:-.022em;color:var(--navy)}
.h2-cityshot figcaption span{display:block;margin-top:5px;font-size:13.5px;color:var(--soft)}
.h2-cityfoot{margin:clamp(22px,3vh,36px) 0 0;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.h2-cityfoot b{font-family:"Montserrat",sans-serif;font-weight:500;font-size:17px;color:var(--navy)}
.h2-cityfoot span{font-size:13.5px;color:var(--soft)}
@media (max-width:900px){.h2-globe-grid{grid-template-columns:1fr}}

/* 21 · the three ways in each carry the picture of that hour */
.h2-pick{padding:0;border:0;overflow:hidden;background:var(--paper);display:flex;flex-direction:column}
.h2-pick:hover{border-color:transparent;box-shadow:0 30px 56px -34px rgba(13,21,38,.5)}
.h2-pick-shot{margin:0 0 20px;overflow:hidden;background:var(--pale2)}
.h2-pick-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease)}
.h2-pick:hover .h2-pick-shot img{transform:scale(1.05)}
.h2-pick em,.h2-pick b,.h2-pick p,.h2-pick-t{padding-left:2px;padding-right:2px}
.h2-pick-t{padding-bottom:2px}

/* ═══ 4 SEP 2026 · REVIEW PASS 6 ═════════════════════════════════════════ */

/* 22 · the whole made frame reads, TENTHPIN on the glass included: the
   people photograph is shown at its native ratio rather than cropped */
.h2-people-shot{aspect-ratio:16/9}
.h2-people .h2-h{font-size:clamp(30px,3.2vw,50px)}

/* 23 · sector tiles: the mark is the mark. No disc behind it, larger, and it
   answers the hover with a lift and a turn rather than sitting still. */
.h2-tile-ic{width:auto;height:auto;border-radius:0;background:none;border:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;margin-bottom:14px;
  filter:drop-shadow(0 2px 10px rgba(9,14,30,.45));
  transition:transform .5s var(--ease),filter .5s var(--ease)}
.h2-tile-ic svg{width:38px;height:38px;stroke-width:1.35}
.h2-tile.lead .h2-tile-ic svg{width:46px;height:46px}
.h2-tile:hover .h2-tile-ic,.h2-tile:focus-visible .h2-tile-ic{
  transform:translateY(-4px) scale(1.09);filter:drop-shadow(0 6px 18px rgba(9,14,30,.5))}
/* the stroke redraws under the pointer, so the mark is alive rather than a
   sticker: the dash pattern is only applied on hover, never at rest */
@keyframes h2tileDraw{from{stroke-dashoffset:96}to{stroke-dashoffset:0}}
/* 23 Sep 2026: never the acting group. This rule reached .tp-act and
   replaced the object's own action with the draw. */
.h2-tile:hover .h2-tile-ic svg *:not(.tp-act){stroke-dasharray:96;animation:h2tileDraw .95s var(--ease) forwards}
@media (prefers-reduced-motion:reduce){.h2-tile:hover .h2-tile-ic svg *{animation:none;stroke-dasharray:none}}

/* 24 · PROOF: the two supporting cases were cropped through the subjects'
   eyes at this aspect. The crop is anchored above centre so faces sit in
   the frame, and the story column starts at the film's top edge instead of
   floating in the middle of the band. */
.h2-case img{object-position:50% 30%}
.h2-proof-feat{align-items:start}
.h2-story{justify-content:flex-start;padding-top:6px}
.h2-story-r{padding:16px 0 18px}
.h2-story-r:first-child{padding-top:0}
.h2-story-r:first-child::before{top:6px}

/* ═══ 4 SEP 2026 · REVIEW PASS 7 · THE ENGINE ════════════════════════════
   The AI band drew an isometric plane with floating cubes. It read as a toy.
   It is a process diagram now: records out of the ERP, the context ring
   turning around the core, three lanes of finished work leaving. One 2s
   cycle drives every part, so the eye follows the same path the copy below
   describes. SVG and CSS only. */
.h2-engine{margin-top:clamp(28px,4vh,52px);width:100%}
.h2-engine svg{width:100%;height:auto;display:block;overflow:visible}
.h2-eg-lb{font-family:"Inter",sans-serif;font-weight:600;font-size:12px;font-weight:700;letter-spacing:.17em;fill:var(--elec)}
.h2-eg-lb.in{fill:var(--faint)}
.h2-eg-cap{font-family:Inter,system-ui,sans-serif;font-size:14px;fill:var(--soft)}
.h2-eg-cap.in{font-family:"Montserrat",sans-serif;font-size:15px;font-weight:500;fill:#fff;letter-spacing:.01em}

/* the records */
.h2-eg-rec rect{fill:#fff;stroke:var(--hair2);stroke-width:1.4}
.h2-eg-rec path{stroke:var(--hair2);stroke-width:3;stroke-linecap:round;fill:none}
@keyframes h2egRec{0%,64%{opacity:.34}12%{opacity:1}}
.h2-eg-rec{opacity:.34;animation:h2egRec 2s var(--ease) infinite}
.h2-eg-rec.r1{animation-delay:.14s}.h2-eg-rec.r2{animation-delay:.28s}.h2-eg-rec.r3{animation-delay:.42s}

/* the lanes and the packets that run them */
.h2-eg-lane{fill:none;stroke:var(--hair2);stroke-width:1.6}
.h2-eg-pkt rect{fill:var(--elec)}
@keyframes h2egFeed{0%{transform:translateX(0);opacity:0}
  8%{opacity:1}86%{opacity:1}100%{transform:translateX(232px);opacity:0}}
.h2-eg-pkt.f0,.h2-eg-pkt.f1,.h2-eg-pkt.f2{animation:h2egFeed 2s cubic-bezier(.45,0,.5,1) infinite}
.h2-eg-pkt.f1{animation-delay:.22s}.h2-eg-pkt.f2{animation-delay:.44s}

/* the engine itself */
.h2-eg-box{fill:#fff;stroke:var(--hair2);stroke-width:1.4}
.h2-eg-ring,.h2-eg-ring2{fill:none;stroke:var(--elec);stroke-width:1.4;opacity:.42;
  stroke-dasharray:5 11;transform-origin:702px 196px}
@keyframes h2egSpin{to{transform:rotate(360deg)}}
@keyframes h2egSpinB{to{transform:rotate(-360deg)}}
.h2-eg-ring{animation:h2egSpin 18s linear infinite}
.h2-eg-ring2{animation:h2egSpinB 12s linear infinite;opacity:.26}
.h2-eg-grid circle{fill:var(--elec);opacity:.16}
@keyframes h2egGrid{0%,70%,100%{opacity:.16}22%{opacity:.6}}
.h2-eg-grid circle{animation:h2egGrid 2s var(--ease) infinite}
.h2-eg-hex{fill:var(--elec)}
@keyframes h2egCore{0%,72%,100%{transform:scale(1);filter:none}
  26%{transform:scale(1.06);filter:drop-shadow(0 0 18px rgba(5,32,245,.55))}}
.h2-eg-hex{transform-origin:702px 196px;animation:h2egCore 2s var(--ease) infinite}

/* the work that leaves */
@keyframes h2egOut{0%,34%{transform:translate(0,0);opacity:0}
  40%{opacity:1}96%,100%{opacity:0}}
.h2-eg-out.o0 .h2-eg-pkt{animation:h2egOutA 2s cubic-bezier(.4,0,.5,1) infinite}
.h2-eg-out.o1 .h2-eg-pkt{animation:h2egOutB 2s cubic-bezier(.4,0,.5,1) infinite;animation-delay:.1s}
.h2-eg-out.o2 .h2-eg-pkt{animation:h2egOutC 2s cubic-bezier(.4,0,.5,1) infinite;animation-delay:.2s}
@keyframes h2egOutA{0%,36%{transform:translate(0,0);opacity:0}42%{opacity:1}
  92%,100%{transform:translate(84px,-78px);opacity:0}}
@keyframes h2egOutB{0%,36%{transform:translate(0,0);opacity:0}42%{opacity:1}
  92%,100%{transform:translate(84px,0);opacity:0}}
@keyframes h2egOutC{0%,36%{transform:translate(0,0);opacity:0}42%{opacity:1}
  92%,100%{transform:translate(84px,78px);opacity:0}}
.h2-eg-chip{fill:var(--pale);stroke:none}
@keyframes h2egChip{0%,74%,100%{fill:var(--pale)}84%{fill:#E1EAFF}}
.h2-eg-out.o0 .h2-eg-chip{animation:h2egChip 2s var(--ease) infinite}
.h2-eg-out.o1 .h2-eg-chip{animation:h2egChip 2s var(--ease) infinite .1s}
.h2-eg-out.o2 .h2-eg-chip{animation:h2egChip 2s var(--ease) infinite .2s}
.h2-eg-chiptx{font-family:"Montserrat",sans-serif;font-size:16px;font-weight:500;fill:var(--navy)}
@media (prefers-reduced-motion:reduce){
  .h2-eg-rec,.h2-eg-pkt,.h2-eg-ring,.h2-eg-ring2,.h2-eg-grid circle,.h2-eg-hex,.h2-eg-chip{animation:none;opacity:1}
  .h2-eg-pkt{opacity:0}}
@media (max-width:820px){.h2-engine{overflow-x:auto}.h2-engine svg{min-width:760px}}

/* 25 · the client row read at one optical weight. tp.css L900-905 tunes the
   round marks against its own 56px base for the .logorow band; those same
   selectors were leaking into this marquee, where the base is 40px, so BMW
   and Mercedes rendered at 70 and 72 against Novartis at 21. Re-tuned to
   this band's base, and the slot is wider so wide wordmarks stand taller. */
.h2-marq .logoslot{width:clamp(120px,9.4vw,168px)}
.h2-marq .logo-img{max-height:42px}
.h2-marq img[src*="bmw"],.h2-marq img[src*="mercedes"],.h2-marq img[src*="honda"]{max-height:52px}
.h2-marq img[src*="roche"]{max-height:42px}
.h2-marq img[src*="lilly"]{max-height:44px}
.h2-marq img[src*="amgen"]{max-height:32px}

/* ═══ 4 SEP 2026 · REVIEW PASS 8 · THE CLOSE ═════════════════════════════
   The band that asks for the meeting now draws the meeting: the booth and
   the call both run into one hour, the hour settles three things in turn,
   and the written read leaves at the end. 6s cycle, three beats of 2s. */
.h2-close{padding:clamp(96px,13vh,180px) 0}
.h2-close .h2-in{position:relative}
.h2-meet{position:absolute;left:46%;right:0;top:0;bottom:0;z-index:0;pointer-events:none;
  display:grid;place-items:center;padding:clamp(10px,2vh,26px) 0}
.h2-meet svg{width:100%;height:100%;max-height:clamp(380px,54vh,600px);display:block;overflow:visible}
.h2-close h2,.h2-close p,.h2-close .h2-actions{position:relative;z-index:2;max-width:46ch}

.h2-mt-lb{font-family:"Inter",sans-serif;font-weight:600;font-size:15px;font-weight:700;letter-spacing:.2em;
  fill:rgba(255,255,255,.55)}
.h2-mt-lb.in{fill:#8C9EFF}
.h2-mt-panel{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.32);stroke-width:1.5}
.h2-mt-bar{fill:#fff;opacity:.9}
.h2-mt-line{stroke:rgba(255,255,255,.34);stroke-width:2.6;stroke-linecap:round;fill:none}
.h2-mt-fig circle{fill:rgba(255,255,255,.9)}
.h2-mt-fig path{stroke:rgba(255,255,255,.9);stroke-width:3;fill:none;stroke-linecap:round}
.h2-mt-fig.sm circle{fill:rgba(255,255,255,.78)}
.h2-mt-fig.sm path{stroke:rgba(255,255,255,.78);stroke-width:2.4}
.h2-mt-tile{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.26);stroke-width:1.4}
.h2-mt-rail{stroke:rgba(255,255,255,.26);stroke-width:1.6;fill:none}
.h2-mt-dot{fill:#5B8CFF}
.h2-mt-card{fill:rgba(255,255,255,.055);stroke:rgba(255,255,255,.4);stroke-width:1.6}
.h2-mt-tick{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.6}
.h2-mt-check{stroke:#8C9EFF;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:17;stroke-dashoffset:17}
.h2-mt-tx{font-family:Inter,system-ui,sans-serif;font-size:19px;fill:rgba(255,255,255,.62)}
.h2-mt-page{fill:rgba(255,255,255,.07);stroke:rgba(255,255,255,.34);stroke-width:1.5}
.h2-mt-seal{fill:#0520F5}
.h2-mt-sealtick{stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:18;stroke-dashoffset:18}

/* the six second cycle */
@keyframes h2mtA{0%{offset-distance:0%;opacity:0}3%{opacity:1}
  22%{offset-distance:100%;opacity:1}26%,100%{opacity:0;offset-distance:100%}}
@keyframes h2mtB{0%,10%{offset-distance:0%;opacity:0}13%{opacity:1}
  32%{offset-distance:100%;opacity:1}36%,100%{opacity:0;offset-distance:100%}}
.h2-mt-dot.d1{offset-path:path("M215 282v96q0 18 18 18h180");offset-rotate:0deg;cx:0;cy:0;
  animation:h2mtA 6s cubic-bezier(.4,0,.4,1) infinite}
.h2-mt-dot.d2{offset-path:path("M685 302v76q0 18-18 18H487");offset-rotate:0deg;cx:0;cy:0;
  animation:h2mtB 6s cubic-bezier(.4,0,.4,1) infinite}
@keyframes h2mtCard{0%,32%{stroke:rgba(255,255,255,.4);fill:rgba(255,255,255,.055)}
  40%,88%{stroke:rgba(143,182,255,.85);fill:rgba(5,32,245,.10)}
  100%{stroke:rgba(255,255,255,.4);fill:rgba(255,255,255,.055)}}
.h2-mt-card{animation:h2mtCard 6s var(--ease) infinite}
@keyframes h2mtCheck{0%,42%{stroke-dashoffset:17}52%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:17}}
@keyframes h2mtTickRing{0%,42%{stroke:rgba(255,255,255,.3)}52%,92%{stroke:#8C9EFF}100%{stroke:rgba(255,255,255,.3)}}
@keyframes h2mtTx{0%,42%{fill:rgba(255,255,255,.62)}52%,92%{fill:#fff}100%{fill:rgba(255,255,255,.62)}}
.h2-mt-item .h2-mt-check{animation:h2mtCheck 6s var(--ease) infinite}
.h2-mt-item .h2-mt-tick{animation:h2mtTickRing 6s var(--ease) infinite}
.h2-mt-item .h2-mt-tx{animation:h2mtTx 6s var(--ease) infinite}
.h2-mt-item.i1 .h2-mt-check,.h2-mt-item.i1 .h2-mt-tick,.h2-mt-item.i1 .h2-mt-tx{animation-delay:.5s}
.h2-mt-item.i2 .h2-mt-check,.h2-mt-item.i2 .h2-mt-tick,.h2-mt-item.i2 .h2-mt-tx{animation-delay:1s}
@keyframes h2mtDoc{0%,66%{transform:translateY(-26px);opacity:0}
  76%,94%{transform:translateY(0);opacity:1}100%{transform:translateY(-26px);opacity:0}}
.h2-mt-doc{animation:h2mtDoc 6s cubic-bezier(.3,0,.3,1) infinite}
@keyframes h2mtSeal{0%,74%{stroke-dashoffset:18}84%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:18}}
.h2-mt-sealtick{animation:h2mtSeal 6s var(--ease) infinite}
@keyframes h2mtLive{0%,100%{opacity:.35}50%{opacity:1}}
.h2-mt-live{fill:#FF5C6B;animation:h2mtLive 2s var(--ease) infinite}

@media (prefers-reduced-motion:reduce){
  .h2-meet *{animation:none!important}
  .h2-mt-check,.h2-mt-sealtick{stroke-dashoffset:0}
  .h2-mt-doc{opacity:1;transform:none}
  .h2-mt-dot{opacity:0}
}
@media (max-width:1100px){
  .h2-meet{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:38px;
    height:clamp(300px,44vh,420px)}
  .h2-close h2,.h2-close p,.h2-close .h2-actions{max-width:none}
}

/* 26 · the close band's copy and its diagram must not share the same air:
   the headline ran under the booth panel at 1512. The words take the left
   45%, the diagram the right half, and neither crosses the other. */
.h2-close h2{max-width:13ch}
.h2-close p{max-width:40ch}
.h2-close .h2-actions{max-width:none}
.h2-meet{left:50%}
@media (max-width:1280px){.h2-close h2{max-width:15ch}.h2-meet{left:53%}}
@media (max-width:1100px){.h2-close h2{max-width:18ch}.h2-close p{max-width:56ch}}

/* ═══ 4 SEP 2026 · REVIEW PASS 9 · THE CLOSE, WITH REAL FOOTAGE ══════════
   The diagram was right but it was all schematic. The two ways to meet now
   carry real footage inside their frames: booth b-roll in the stand, a call
   in the online window. Everything is HTML and CSS now rather than one SVG,
   so the video sits in the frame at any width and the rails cannot drift
   out of register with it (offset-path on an SVG dot was the fragile part).
   One 6s cycle, three beats of 2s, same clock as the rest of the page. */
.h2-meet{position:absolute;left:50%;right:0;top:0;bottom:0;z-index:0;pointer-events:none;
  display:grid;align-content:center;justify-items:center;gap:0;
  padding:clamp(8px,2vh,22px) 0;container-type:inline-size}
.h2-meet-in{width:min(100%,560px);display:grid;gap:0}

/* the two ways in */
.h2-mt-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3cqw,26px)}
.h2-mt-panel{margin:0;display:grid;gap:9px}
.h2-mt-lb{font-family:"Inter",sans-serif;font-weight:600;font-size:9.5px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.h2-mt-screen{position:relative;overflow:hidden;aspect-ratio:16/10;border-radius:4px;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.h2-mt-screen video,.h2-mt-screen img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
/* the footage sits behind a thin navy veil so it belongs to the band rather
   than punching a bright hole in it */
.h2-mt-screen::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,20,48,.30) 0%,rgba(14,20,48,.52) 100%)}
.h2-mt-panel.b .h2-mt-screen{box-shadow:inset 0 0 0 1px rgba(143,182,255,.4)}
.h2-mt-live{position:absolute;left:10px;top:10px;z-index:3;width:7px;height:7px;border-radius:50%;
  background:#FF5C6B;animation:h2mtLive 2s var(--ease) infinite}
@keyframes h2mtLive{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}

/* the rails: two L-shapes running down into the hour */
.h2-mt-rails{position:relative;height:clamp(38px,7cqw,60px)}
.h2-mt-rails i{position:absolute;top:0;bottom:0;width:50%;
  border-top:0;border-bottom:1px solid rgba(255,255,255,.24)}
.h2-mt-rails i.r1{left:12%;border-left:1px solid rgba(255,255,255,.24);
  border-bottom-left-radius:14px;width:38%}
.h2-mt-rails i.r2{right:12%;border-right:1px solid rgba(255,255,255,.24);
  border-bottom-right-radius:14px;width:38%}
.h2-mt-rails b{position:absolute;width:7px;height:7px;border-radius:50%;background:#5B8CFF;
  box-shadow:0 0 12px rgba(91,140,255,.85)}
.h2-mt-rails b.d1{left:12%;top:0;margin-left:-3px;animation:h2mtRunA 6s cubic-bezier(.45,0,.4,1) infinite}
.h2-mt-rails b.d2{right:12%;top:0;margin-right:-3px;animation:h2mtRunB 6s cubic-bezier(.45,0,.4,1) infinite}
@keyframes h2mtRunA{
  0%{transform:translate(0,0);opacity:0}
  4%{opacity:1}
  16%{transform:translate(0,calc(100% + 34px));opacity:1}
  26%{transform:translate(calc(50cqw - 12% - 3px),calc(100% + 34px));opacity:1}
  30%,100%{transform:translate(calc(50cqw - 12% - 3px),calc(100% + 34px));opacity:0}}
@keyframes h2mtRunB{
  0%,10%{transform:translate(0,0);opacity:0}
  14%{opacity:1}
  26%{transform:translate(0,calc(100% + 34px));opacity:1}
  36%{transform:translate(calc(-50cqw + 12% + 3px),calc(100% + 34px));opacity:1}
  40%,100%{transform:translate(calc(-50cqw + 12% + 3px),calc(100% + 34px));opacity:0}}

/* the hour */
.h2-mt-card{border-radius:8px;padding:clamp(16px,3cqw,24px) clamp(18px,3.4cqw,28px);
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
  animation:h2mtCard 6s var(--ease) infinite}
@keyframes h2mtCard{
  0%,32%{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
  40%,88%{background:rgba(5,32,245,.12);box-shadow:inset 0 0 0 1px rgba(143,182,255,.8),0 24px 60px -30px rgba(5,32,245,.9)}
  100%{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}}
.h2-mt-card .h2-mt-lb{color:#8C9EFF;display:block;margin-bottom:12px}
.h2-mt-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.h2-mt-item{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:center;
  font-size:clamp(12.5px,2.5cqw,14.5px);color:rgba(255,255,255,.6);
  animation:h2mtTx 6s var(--ease) infinite}
.h2-mt-item span{display:block}
.h2-mt-item i{width:17px;height:17px;border-radius:50%;display:block;position:relative;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);animation:h2mtRing 6s var(--ease) infinite}
.h2-mt-item i::after{content:"";position:absolute;left:5px;top:3.4px;width:4px;height:8px;
  border:solid #8C9EFF;border-width:0 1.7px 1.7px 0;transform:rotate(42deg) scale(.4);opacity:0;
  animation:h2mtCheck 6s var(--ease) infinite}
@keyframes h2mtTx{0%,42%{color:rgba(255,255,255,.6)}52%,92%{color:#fff}100%{color:rgba(255,255,255,.6)}}
@keyframes h2mtRing{0%,42%{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}
  52%,92%{box-shadow:inset 0 0 0 1.5px #8C9EFF}100%{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3)}}
@keyframes h2mtCheck{0%,44%{opacity:0;transform:rotate(42deg) scale(.4)}
  54%,92%{opacity:1;transform:rotate(42deg) scale(1)}100%{opacity:0;transform:rotate(42deg) scale(.4)}}
.h2-mt-item.i1,.h2-mt-item.i1 i,.h2-mt-item.i1 i::after{animation-delay:.5s}
.h2-mt-item.i2,.h2-mt-item.i2 i,.h2-mt-item.i2 i::after{animation-delay:1s}

/* the written read */
.h2-mt-doc{margin-top:clamp(12px,2.4cqw,20px);justify-self:center;width:min(74%,300px);
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;
  padding:13px 16px;border-radius:5px;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);
  animation:h2mtDoc 6s cubic-bezier(.3,0,.3,1) infinite}
@keyframes h2mtDoc{0%,66%{transform:translateY(-16px);opacity:0}
  76%,94%{transform:translateY(0);opacity:1}100%{transform:translateY(-16px);opacity:0}}
.h2-mt-doc s{text-decoration:none;display:grid;gap:6px}
.h2-mt-doc s u{text-decoration:none;display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.3)}
.h2-mt-doc s u:last-child{width:58%}
.h2-mt-doc em{font-style:normal;width:24px;height:24px;border-radius:50%;background:#0520F5;
  display:grid;place-items:center;position:relative;flex:none}
.h2-mt-doc em::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(42deg) translate(-1px,-1px)}

@media (prefers-reduced-motion:reduce){
  .h2-meet *{animation:none!important}
  .h2-mt-doc{opacity:1;transform:none}
  .h2-mt-item i::after{opacity:1;transform:rotate(42deg) scale(1)}
  .h2-mt-rails b{opacity:0}
  .h2-mt-screen video{display:none}
}
@media (max-width:1100px){
  .h2-meet{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:38px;
    padding:0;display:block}
  .h2-meet-in{width:100%;max-width:520px;margin:0 auto}
}

/* the fourth delivery line is a card like the other three, not a footnote:
   the client asked for all of the information to be present */
.h2-globe-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.h2-cityshot figcaption b{font-size:clamp(16px,1.25vw,20px)}
@media (max-width:1180px){.h2-globe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.h2-globe-grid{grid-template-columns:1fr}}

/* 27 · the mark on the glass is the real asset, laid over the frosted panel
   in the photograph. Positioned against the panel in the frame; multiply so
   it sits on the glass rather than floating over it. */
.h2-people-shot{isolation:isolate}
.h2-people-mark{position:absolute;z-index:2;left:37.5%;top:36%;width:15.5%;height:auto;
  opacity:.82;mix-blend-mode:multiply;filter:saturate(0) contrast(1.05);pointer-events:none}
@media (max-width:640px){.h2-people-mark{opacity:.9}}

/* 28 · the journey nodes are not clipped and do not drift off the rail.
   The ring and its halo extend 7px past the node, so the band stops
   clipping and the row is inset by that much; the node is anchored to the
   rail in px only, never a viewport unit, so a zoom cannot move it. */
.h2-jrn,.h2-jrn .h2-in{overflow:visible}
.h2-stops{padding-left:8px}
.h2-rail{margin-left:8px}
.h2-stop-n{top:-28px;left:0;transform:none}
.h2-stop{padding-top:52px}

/* 29 · the closing band in the brand blue: the word and the primary action.
   White on navy read as a print ad; the blue is the brand's own. */
.h2-close h2 em{color:#5B7BFF}
.h2-close .h2-cta{background:var(--elec);color:#fff;box-shadow:none}
.h2-close .h2-cta:hover{background:#041BD0}
.h2-close .h2-cta.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.h2-close .h2-cta.ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* 30 · no lighting behind the buttons. premium.css and the h2 CTA both carry
   a coloured glow; on a dark ground it reads as a lit sign. */
.h2-cta,.h2-cta:hover,.foot .cta,.foot .cta:hover,.h2-close .h2-cta,
body:has(.h2) .cta,body:has(.h2) .cta:hover{box-shadow:none!important}

/* 31 · content does not touch the card edge: the three ways in were flush
   left and bottom against the white block. */
.h2-pick{padding:0 0 24px}
.h2-pick-shot{margin-bottom:22px}
.h2-pick em,.h2-pick b,.h2-pick p,.h2-pick-t{padding-left:24px;padding-right:24px}
.h2-pick-t{padding-top:18px}
@media (max-width:640px){.h2-pick em,.h2-pick b,.h2-pick p,.h2-pick-t{padding-left:18px;padding-right:18px}}

/* ═══ 4 SEP 2026 · REVIEW PASS 10 ════════════════════════════════════════ */

/* 32 · the wordmark overlay was inheriting .h2-people-shot img (inset:0,
   height:100%, object-fit:cover), so the logo covered the whole photograph
   and multiplied giant black letterforms over the room. It is a small
   positioned mark now, nothing else. */
.h2-people-shot img.h2-people-mark{
  inset:auto;right:auto;bottom:auto;left:38%;top:36.5%;
  width:14.5%;height:auto;object-fit:contain;
  opacity:.66;mix-blend-mode:multiply}

/* 33 · the AI band: one flow, numbered once, the words at the point of the
   diagram they describe. Replaces the SVG diagram plus its duplicate row. */
.h2-eng{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr) auto minmax(0,1fr);
  gap:clamp(10px,1.6vw,26px);align-items:center;margin-top:clamp(30px,4.4vh,58px)}
.h2-eng-col{display:grid;gap:0;align-content:center}
.h2-eng-lb{font-family:"Inter",sans-serif;font-weight:600;font-size:10px;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--elec);margin-bottom:9px}
.h2-eng-col b{font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:-.022em;
  font-size:clamp(17px,1.45vw,21px);line-height:1.2;color:var(--navy)}
.h2-eng-col p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--soft);max-width:30ch}
.h2-eng-col.b .h2-eng-lb{margin-top:26px}
.h2-eng-col.b .h2-eng-lb:first-of-type{margin-top:0}

/* the records leaving the ERP */
.h2-eng-recs{display:grid;gap:8px;margin-top:22px}
.h2-eng-recs i{display:block;height:34px;border-radius:5px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--hair2);animation:h2engRec 2s var(--ease) infinite}
.h2-eng-recs i:nth-child(2){animation-delay:.14s}
.h2-eng-recs i:nth-child(3){animation-delay:.28s}
.h2-eng-recs i:nth-child(4){animation-delay:.42s}
@keyframes h2engRec{0%,64%{opacity:.4}12%{opacity:1}}

/* the lanes */
.h2-eng-link{position:relative;width:clamp(48px,7vw,110px);height:60px}
.h2-eng-link s{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--hair2);text-decoration:none}
.h2-eng-link b{position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4.5px;border-radius:2px;
  background:var(--elec);animation:h2engPkt 2s cubic-bezier(.45,0,.5,1) infinite}
.h2-eng-link b.p1{animation-delay:.22s}
.h2-eng-link b.p2{animation-delay:.44s}
.h2-eng-link.out b{animation-delay:.5s}
.h2-eng-link.out b.p1{animation-delay:.72s}
.h2-eng-link.out b.p2{animation-delay:.94s}
@keyframes h2engPkt{0%{transform:translateX(0);opacity:0}10%{opacity:1}
  84%{opacity:1}100%{transform:translateX(clamp(39px,6vw,101px));opacity:0}}

/* the engine */
.h2-eng-core{position:relative;margin-bottom:26px}
.h2-eng-core svg{width:100%;max-width:300px;height:auto;display:block;margin:0 auto;overflow:visible}
.h2-eng-ring{fill:none;stroke:var(--elec);stroke-width:1.3;opacity:.4;stroke-dasharray:5 11;
  transform-origin:120px 120px;animation:h2engSpin 18s linear infinite}
.h2-eng-ring.r2{opacity:.25;animation:h2engSpinB 12s linear infinite}
@keyframes h2engSpin{to{transform:rotate(360deg)}}
@keyframes h2engSpinB{to{transform:rotate(-360deg)}}
.h2-eng-grid circle{fill:var(--elec);opacity:.16;animation:h2engGrid 2s var(--ease) infinite}
@keyframes h2engGrid{0%,70%,100%{opacity:.16}22%{opacity:.55}}
.h2-eng-hex{fill:var(--elec);transform-origin:120px 120px;animation:h2engCore 2s var(--ease) infinite}
@keyframes h2engCore{0%,72%,100%{transform:scale(1)}26%{transform:scale(1.05)}}
.h2-eng-core-tx{font-family:"Montserrat",sans-serif;font-size:19px;font-weight:500;fill:#fff}

/* the work that leaves */
.h2-eng-out{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px}
.h2-eng-out li{padding:11px 15px;border-radius:5px;background:var(--pale);font-size:14.5px;
  font-family:"Montserrat",sans-serif;font-weight:500;color:var(--navy);
  animation:h2engOut 2s var(--ease) infinite}
.h2-eng-out li.o1{animation-delay:.1s}
.h2-eng-out li.o2{animation-delay:.2s}
@keyframes h2engOut{0%,74%,100%{background:var(--pale)}84%{background:#E1EAFF}}

@media (prefers-reduced-motion:reduce){.h2-eng *{animation:none!important}.h2-eng-link b{opacity:0}}
@media (max-width:1100px){
  .h2-eng{grid-template-columns:1fr;gap:30px}
  .h2-eng-link{width:100%;height:44px}
  .h2-eng-link s{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}
  .h2-eng-link b{left:50%;top:0;margin-left:-4.5px;margin-top:0;animation-name:h2engPktV}
  @keyframes h2engPktV{0%{transform:translateY(0);opacity:0}10%{opacity:1}84%{opacity:1}100%{transform:translateY(38px);opacity:0}}
  .h2-eng-col p{max-width:52ch}
}

/* 34 · the engine reads across one line: all three graphics share a band of
   the same height at the top, so the lanes connect graphic to graphic and
   every stage's words start on the same baseline underneath. The output
   chips were pale-on-pale against this band's own background: white now. */
.h2-eng{align-items:start}
.h2-eng-art{height:196px;display:grid;align-content:center;margin-bottom:24px}
.h2-eng-core{margin-bottom:0}
.h2-eng-core svg{max-width:240px;max-height:196px}
.h2-eng-recs{margin-top:0}
.h2-eng-out{margin:0}
.h2-eng-out li{background:#fff;box-shadow:inset 0 0 0 1px var(--hair2)}
@keyframes h2engOut{0%,74%,100%{background:#fff;box-shadow:inset 0 0 0 1px var(--hair2)}
  84%{background:#EAF0FF;box-shadow:inset 0 0 0 1px rgba(5,32,245,.5)}}
.h2-eng-link{height:196px;margin-bottom:24px}
.h2-eng-link s,.h2-eng-link b{top:98px}
.h2-eng-link b{margin-top:-4.5px}
@media (max-width:1100px){
  .h2-eng-art{height:auto;margin-bottom:18px}
  .h2-eng-link{height:44px;margin-bottom:0}
  .h2-eng-link s{top:0}
  .h2-eng-link b{top:0;margin-top:0}
}

/* 35 · the records read as records, not as empty fields, and the core is
   sized to sit level with them */
.h2-eng-recs i{position:relative}
.h2-eng-recs i::before,.h2-eng-recs i::after{content:"";position:absolute;left:15px;height:3px;
  border-radius:2px;background:var(--hair2)}
.h2-eng-recs i::before{top:11px;width:54%}
.h2-eng-recs i::after{top:20px;width:32%}
.h2-eng-core svg{max-width:280px}
.h2-eng-core-tx{font-size:17px}

/* 36 · the tighter frame: people large, the timeline legible, the glass left
   blank for the real mark. The overlay moves to that panel. */
.h2-people-shot img.h2-people-mark{left:31.5%;top:31%;width:15%;opacity:.6}

/* ═══ 4 SEP 2026 · REVIEW PASS 11 · RESPONSIVE AND THE LAST TWO BANDS ════ */

/* 37 · the closing diagram is a sibling of .h2-in, not a child, so below
   1100 it had no gutter and bled off both edges, and DOM order put it above
   the headline. The section becomes a column: words first, diagram second,
   both on the page's own gutter. */
@media (max-width:1100px){
  .h2-close{display:flex;flex-direction:column}
  .h2-close .h2-in{order:1}
  .h2-meet{order:2;margin-top:clamp(30px,5vh,48px);padding:0 var(--h2-gut);
    max-width:var(--h2-w);width:100%;margin-left:auto;margin-right:auto}
  .h2-meet-in{max-width:560px;margin:0 auto}
}

/* 38 · sector labels hold on the palest frames. No box, no border: the
   photograph carries a short fade at its own foot, which is where the words
   already sit, so the picture keeps its brightness everywhere else. */
.h2-tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:58%;z-index:1;
  pointer-events:none;background:linear-gradient(180deg,rgba(9,14,30,0) 0%,rgba(9,14,30,.30) 46%,rgba(9,14,30,.72) 100%)}
.h2-tile-lab{z-index:2}
.h2-tile.lead::after{height:52%}

/* 39 · the scale band moves: a slow sheen crosses the two solid lines, six
   seconds apart, and the outlined line is left alone so the stroke stays
   crisp. One pass, not a loop of flashes. */
.h2-scale h2 span:nth-child(1){background-image:linear-gradient(100deg,var(--navy) 0 44%,#8C9EFF 50%,var(--navy) 56% 100%)}
.h2-scale h2 span:nth-child(2){background-image:linear-gradient(100deg,var(--elec) 0 44%,#A9C4FF 50%,var(--elec) 56% 100%)}
.h2-scale h2 span:nth-child(1),.h2-scale h2 span:nth-child(2){
  background-size:280% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:h2sheen 6.5s cubic-bezier(.4,0,.3,1) infinite}
.h2-scale h2 span:nth-child(2){animation-delay:.35s}
@keyframes h2sheen{0%{background-position:150% 0}46%,100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){
  .h2-scale h2 span:nth-child(1),.h2-scale h2 span:nth-child(2){animation:none;background-image:none;
    -webkit-background-clip:border-box;background-clip:border-box}
  .h2-scale h2 span:nth-child(1){color:var(--navy)}
  .h2-scale h2 span:nth-child(2){color:var(--elec)}
}

/* 40 · sector labels, take two. The ::after scrim computes correctly and
   still does not paint over the image in this stack, so the fade goes on
   the label itself: full tile width, transparent at the top, so there is no
   box edge anywhere, only the photograph darkening into its own foot. */
.h2-tile-lab{left:0;right:0;bottom:0;width:auto;padding:52px clamp(16px,1.5vw,22px) clamp(15px,1.4vw,20px);
  background:linear-gradient(180deg,rgba(9,14,30,0) 0%,rgba(9,14,30,.42) 38%,rgba(9,14,30,.72) 72%,rgba(9,14,30,.82) 100%);
  border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.h2-tile.lead .h2-tile-lab{left:0;bottom:0;padding:64px clamp(18px,1.8vw,30px) clamp(18px,1.8vw,26px)}
.h2-tile-lab b,.h2-tile-lab span{text-shadow:0 1px 12px rgba(9,14,30,.45)}
.h2-tile-ic{filter:drop-shadow(0 2px 12px rgba(9,14,30,.55))}

/* 41 · the sheen needs a ground under it. background-clip:text with a
   no-repeat gradient leaves every glyph outside the image unpainted, which
   erased most of SAP. and Life sciences. The base colour is a
   background-color now, so the type is always painted and the gradient only
   passes a highlight across it. */
.h2-scale h2 span:nth-child(1){background-color:var(--navy)}
.h2-scale h2 span:nth-child(2){background-color:var(--elec)}
.h2-scale h2 span:nth-child(1),.h2-scale h2 span:nth-child(2){
  background-clip:text;-webkit-background-clip:text;
  background-size:240% 100%;display:block;width:fit-content}

/* 42 · the last rule on the page: the footer's bottom bar. Scoped to this
   page only, because the footer is shared with the live builds. */
body:has(.h2) .foot-base{border-top:0}

/* ═══ 4 SEP 2026 · REVIEW PASS 12 · WHAT THE VERIFY SWEEP CONFIRMED ══════
   A 65-agent sweep over the built page found 40 real problems. The ones
   below are the confirmed regressions this session caused, plus the class
   of bug behind three of them: an unconditional rule in a later review
   block silently outranking an earlier @media. Every fix here is re-stated
   INSIDE a media query so it cannot happen again from this file. */

/* 43 · the proof band never collapsed on a phone. home2.css:344 stacks it
   at 1000px, but the 4 Sep review block at :522 re-declared the two-column
   grid unconditionally and won, so at 390 the film was 220px wide, the copy
   ran one word per line and the result line was clipped off the right. */
@media (max-width:1000px){
  .h2-proof-feat{grid-template-columns:1fr}
  .h2-proof-more{grid-template-columns:1fr}
  .h2-story{padding-left:30px}
}

/* 44 · the journey nodes sat on top of the intro paragraph at 390 and 768:
   pass 11 anchored them to the desktop rail (top:-28px, left:0) with no
   media guard, which clobbered the mobile inline layout at :548. */
@media (max-width:1000px){
  .h2-stops{padding-left:0}
  .h2-rail{margin-left:0}
  .h2-stop{padding:0 0 0 74px}
  .h2-stop-n{top:-2px;left:0;width:52px;height:52px}
  .h2-stop-n svg{width:23px;height:23px}
}

/* 45 · the invisible header still swallowed the pointer across a 74px band
   over the hero, and its links stayed in the tab order while painted at
   opacity 0. Nothing is behind it today, but a focus ring on an invisible
   control is a real defect. */
body:has(.h2) .nav.attop{pointer-events:none}
body:has(.h2) .nav.attop .nav-in{visibility:hidden}
body:has(.h2) .nav .nav-in{transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s linear .45s}
body:has(.h2) .nav:not(.attop) .nav-in{visibility:visible;transition-delay:0s}

/* 46 · no lines, in the header too: the solid bar paints a full-bleed
   hairline and a zero-blur shadow under itself. */
body:has(.h2) .nav.solid,body:has(.h2) .nav{border-bottom-color:transparent!important;box-shadow:none!important}

/* 47 · the stage marks lost their internal stagger: the pass-3 selector
   [class^="h2-sn-"] set one delay for every element in a node, so stage 2's
   three plates fired as one. The per-plate offsets are re-stated after it. */
.h2-sn-plate.p2{animation-delay:.12s}
.h2-sn-plate.p3{animation-delay:.24s}
.h2-sn-blip.b2{animation-delay:.24s}
.h2-stop:nth-child(2) .h2-sn-plate.p2{animation-delay:.54s}
.h2-stop:nth-child(2) .h2-sn-plate.p3{animation-delay:.66s}
.h2-stop:nth-child(2) .h2-sn-blip.b2{animation-delay:.66s}

/* 48 · the sector mark slid sideways on hover once the disc came off,
   because the label's own hover shift and the mark's transform compounded.
   The mark lifts on its own axis only. */
.h2-tile:hover .h2-tile-ic,.h2-tile:focus-visible .h2-tile-ic{transform:translateY(-4px) scale(1.06)}
.h2-tile-ic{transform-origin:0 100%}

/* 49 · the reduced-motion off-switch for the scale marks lost on
   specificity to .h2-scale-keys li:nth-child(n) .h2-key-ic. */
@media (prefers-reduced-motion:reduce){
  .h2-scale-keys li:nth-child(1) .h2-key-ic,
  .h2-scale-keys li:nth-child(2) .h2-key-ic,
  .h2-scale-keys li:nth-child(3) .h2-key-ic{animation:none;transform:none}
}

/* 50 · an in-page jump landed with the fixed header over the heading. */
.h2 [id]{scroll-margin-top:96px}

/* 51 · the case eyebrow (FINANCE / AUTOMOTIVE) sat on the photograph with
   nothing behind it. */
.h2-case em{text-shadow:0 1px 10px rgba(9,14,30,.6)}

/* 52 · the rail is display:none on a phone, so the gap it carried above the
   stages vanished with it and the first node landed on the lede's last
   line. The stop list carries its own space below 1000px. */
@media (max-width:1000px){.h2-stops{margin-top:clamp(30px,4.6vh,48px)}}

/* 53 · capabilities never stacked on a phone. Pass 4 made .h2-eco
   display:contents so its children could join the band grid; the mobile
   override put display:grid back but inherited the two-column template from
   :424, so the point cloud sat on top of the list at 390 and 768. */
@media (max-width:1000px){
  #capabilities .h2-eco{display:grid;grid-template-columns:1fr;gap:clamp(22px,4vh,34px)}
  #capabilities .h2-head{grid-column:auto;grid-row:auto}
  #capabilities .h2-caps{order:1;grid-column:auto;grid-row:auto;margin-top:clamp(20px,3vh,30px)}
  #capabilities .h2-eco-stage{order:2;grid-column:auto;grid-row:auto;height:330px;min-height:0}
  #capabilities .h2-capmorph{height:330px}
  .h2-capcap{position:static;max-width:none;margin-top:14px}
}


/* ═══ 4 SEP 2026 · REVIEW PASS 12 (Bazil, live) ═══════════════════════════
   Source of truth is tenthpin/assets/pages/home2.css: the build wipes
   react-app/public/assets and re-copies from here (scripts/sync-assets.mjs). */

/* 52 · the scale marks stand on their own: no tile behind the glyph. The
   pulse keeps the lift and drops the background swap. */
.h2-key-ic{background:none;border-radius:0;width:auto;height:auto;min-width:34px;min-height:34px}
.h2-key-ic svg{width:34px;height:34px}
@keyframes h2keyLift{0%,72%,100%{transform:translateY(0)}16%{transform:translateY(-3px)}}
.h2-scale-keys li:nth-child(1) .h2-key-ic{animation:h2keyLift 6s var(--ease) infinite}
.h2-scale-keys li:nth-child(2) .h2-key-ic{animation:h2keyLift 6s var(--ease) infinite 2s}
.h2-scale-keys li:nth-child(3) .h2-key-ic{animation:h2keyLift 6s var(--ease) infinite 4s}
@media (prefers-reduced-motion:reduce){.h2-scale-keys li .h2-key-ic{animation:none}}

/* 53 · the capability list: the blue edge rule on hover and lit rows is off.
   The pale fill and the lit icon carry the state. */
.h2-cap::before{display:none}

/* 54 · the trust headline sets in two lines: "Built for the transformations"
   over "that carry risk." The old cap wrapped it into three. */
.h2-trust h2{max-width:15.2em}
@media (max-width:640px){.h2-trust h2{max-width:none}}

/* 55 · the boardroom photograph: overlays authored in the picture's own
   pixel space (2000 by 1116). .h2-people-ov is scaled by script to the
   rendered cover box, so every child is placed in image pixels and lands
   on the same spot at any crop. The zoom wrapper takes over the hover
   scale the img used to carry, so the overlays move with the picture. */
.h2-people-shot img{transform:none;object-position:50% 50%}
.h2-people-shot img.h2-people-mark{display:none}
.h2-people-zoom{position:absolute;inset:0;transform:scale(1.02);transition:transform 1.4s var(--ease);will-change:transform}
.h2-people-shot:hover .h2-people-zoom{transform:scale(1.06)}
.h2-people-zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.h2-people-ov{position:absolute;left:0;top:0;width:2000px;height:1116px;transform-origin:0 0;pointer-events:none;overflow:hidden}
/* the wordmark on the frosted panel: multiplied into the glass, softened
   the way ink on etched glass reads, and receding with the wall */
.h2-glass-mark{position:absolute;left:0;top:0;width:520px;height:69px;transform-origin:0 0;
  mix-blend-mode:multiply;opacity:.72;filter:blur(.6px) saturate(0)}
.h2-glass-mark img{display:block;width:100%;height:100%}
/* the screen: the presenter and the listener are cut out of the panel by a
   mask painted from the photograph, so the accurate timeline sits behind
   them the way the old one did */
.h2-screen-mask{position:absolute;left:1312px;top:66px;width:688px;height:549px;
  -webkit-mask-image:url(/assets/media/people-boardroom-screenmask.png);mask-image:url(/assets/media/people-boardroom-screenmask.png);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.h2-screen{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;background:#F4F7FD;color:#040F4F;
  font-family:"Montserrat",sans-serif;overflow:hidden}
.h2-screen-in{position:absolute;inset:0;padding:64px 70px}
.h2-screen-eb{display:flex;align-items:center;gap:22px;font-family:"Inter",sans-serif;font-weight:600;font-size:28px;letter-spacing:.14em;text-transform:uppercase;color:#0520F5;font-weight:700}
.h2-screen-eb b{font-family:"Montserrat",sans-serif;font-size:34px;letter-spacing:-.01em;text-transform:none;color:#06156A;font-weight:700}
.h2-screen h3{margin:18px 0 0;font-size:66px;line-height:1.02;letter-spacing:-.025em;font-weight:500;color:#040F4F}
.h2-screen-track{position:relative;margin-top:54px;height:14px;background:#DCE5F7;border-radius:7px}
.h2-screen-track i{position:absolute;left:0;top:0;bottom:0;width:58%;background:linear-gradient(90deg,#0520F5,#06156A);border-radius:7px}
.h2-screen-track em{position:absolute;top:-44px;font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:21px;letter-spacing:.1em;text-transform:uppercase;color:#4C5A76}
.h2-screen-track em.r{right:0}
.h2-screen-ph{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:66px;padding:0}
.h2-screen-ph li{list-style:none;position:relative;margin:0;padding:0}
.h2-screen-ph li span{height:112px;background:var(--c,#0520F5);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:36px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%,26px 50%)}
.h2-screen-ph li:first-child span{clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%)}
.h2-screen-ph li:nth-child(1){--c:#4A86FF}.h2-screen-ph li:nth-child(2){--c:#3776FF}.h2-screen-ph li:nth-child(3){--c:#0520F5}
.h2-screen-ph li:nth-child(4){--c:#041BCC}.h2-screen-ph li:nth-child(5){--c:#1B3F98}.h2-screen-ph li:nth-child(6){--c:#06156A}
.h2-screen-ph li b{display:block;margin:16px 10px 0 30px;font-size:31px;line-height:1.2;font-weight:400;letter-spacing:0;color:#4C5A76;text-align:left}
.h2-screen-ft{position:absolute;left:70px;right:70px;bottom:54px;display:flex;justify-content:space-between;align-items:flex-end;
  font-family:"Inter",sans-serif;font-weight:600;font-size:26px;letter-spacing:.1em;text-transform:uppercase;color:#4C5A76}
.h2-screen-ft b{font-family:"Montserrat",sans-serif;font-size:34px;letter-spacing:-.01em;text-transform:none;color:#06156A;font-weight:500}

/* 56 · 6 Sep 2026: seven office tiles (client-confirmed list). Four across
   from tablet width up so the row breaks 4 + 3 rather than 3 + 3 + 1. */
@media (min-width:901px){.h2-globe-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){.h2-globe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.h2-globe-grid{grid-template-columns:1fr}}

/* 57 · 6 Sep 2026 (Bazil): the hero photograph's fade into the page. The
   old scrim was a short hard band at the picture's edge. It is a long,
   eased run now: solid white at the edge, most of the way clear by the
   middle, fully clear past 70%, so the edge reads as light rather than a
   cut. Mobile keeps its own top-down fade. */
@media (min-width:1001px){
  .h2-hero-shot::before{background:linear-gradient(90deg,
    #fff 0%,rgba(255,255,255,.94) 6%,rgba(255,255,255,.78) 14%,rgba(255,255,255,.55) 24%,
    rgba(255,255,255,.32) 36%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.05) 62%,rgba(255,255,255,0) 72%)}
}

/* 58 · 6 Sep 2026 (Bazil): the scale band. Bigger type, 72px two-tone
   icons with one automated detail each, and the three keys spread to the
   height of the headline beside them (flex, space-between, on a stretched
   grid row). */
@media (min-width:901px){
  .h2-scale-grid{align-items:stretch}
  .h2-scale-keys{display:flex;flex-direction:column;justify-content:space-between;gap:0;align-self:stretch;padding:.06em 0}
}
@media (max-width:900px){.h2-scale-keys{display:grid;gap:28px}}
.h2-scale-keys li{grid-template-columns:72px minmax(0,1fr);column-gap:clamp(18px,1.6vw,26px);align-items:center}
.h2-key-ic{width:72px;height:72px;min-width:72px;min-height:72px;color:var(--elec)}
.h2-key-ic svg{width:72px;height:72px;fill:none;stroke:currentColor;overflow:visible}
.h2-scale-keys em{font-size:12px;letter-spacing:.18em}
.h2-scale-keys b{margin-top:8px;font-size:clamp(20px,1.7vw,27px);line-height:1.22;letter-spacing:-.025em;max-width:22ch}
/* the automated details */
.h2-ki-spin{transform-box:view-box;transform-origin:32px 32px;animation:h2kiSpin 9s linear infinite}
@keyframes h2kiSpin{to{transform:rotate(360deg)}}
.h2-ki-gear{transform-box:view-box;transform-origin:32px 32px;animation:h2kiSpin 14s linear infinite}
.h2-ki-nodes circle{animation:h2kiBlink 3.2s ease-in-out infinite}
.h2-ki-nodes .n2{animation-delay:.8s}.h2-ki-nodes .n3{animation-delay:1.6s}.h2-ki-nodes .n4{animation-delay:2.4s}
@keyframes h2kiBlink{0%,60%,100%{opacity:.35}30%{opacity:1}}
.h2-ki-check{stroke-dasharray:18;stroke-dashoffset:18;animation:h2kiDraw 4.8s var(--ease) infinite}
@keyframes h2kiDraw{0%{stroke-dashoffset:18}25%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:18}}
.h2-ki-smoke{animation:h2kiSmoke 2.6s ease-in-out infinite}
@keyframes h2kiSmoke{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.6;transform:translateY(-1.5px)}}
@media (prefers-reduced-motion:reduce){.h2-ki-spin,.h2-ki-gear,.h2-ki-nodes circle,.h2-ki-check,.h2-ki-smoke{animation:none}.h2-ki-check{stroke-dashoffset:0}}

/* 59 · 6 Sep 2026 (Bazil): the proof story. The spine and dots read as a
   diagram; it is editorial now: a light numeral, a small electric label,
   and the result set large in navy. No rules, no spine. */
.h2-story{padding-left:0;padding-top:0;justify-content:center;gap:clamp(24px,3.2vh,38px)}
.h2-story::before,.h2-story::after,.h2-story-r::before,.h2-story-r:first-child::before{content:none}
.h2-story-r,.h2-story-r:first-child{padding:0;display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:18px;align-items:start}
.h2-story-r i{font-style:normal;font-family:"Montserrat",sans-serif;font-weight:400;font-size:32px;line-height:1;letter-spacing:-.04em;color:var(--faint);opacity:.55;padding-top:3px}
.h2-story-r em{font-size:11px;letter-spacing:.18em;color:var(--faint)}
.h2-story-r p{margin:8px 0 0;font-size:clamp(16px,1.2vw,18px);line-height:1.5;color:var(--ink);max-width:36ch}
.h2-story-r.out i{color:var(--elec);opacity:1}
.h2-story-r.out em{color:var(--elec)}
.h2-story-r.out p{margin-top:6px;font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(28px,2.4vw,40px);line-height:1.08;letter-spacing:-.035em;color:var(--navy);max-width:16ch}
@media (max-width:640px){.h2-story-r,.h2-story-r:first-child{grid-template-columns:44px 1fr;column-gap:12px}.h2-story-r i{font-size:26px}}

/* 60 · 6 Sep 2026 (Bazil, pass 2): no plate behind the glyph. The sector
   marks are isometric objects (src/lib/isoIcons.js) in the on-photo
   palette: white outline, white faces, one electric accent, a white
   halftone shadow on the ground. */
.h2-tile-ic,.h2-tile.lead .h2-tile-ic{width:74px;height:74px;background:none;border:0;border-radius:0;box-shadow:none;display:block;margin:0 0 6px -6px;transition:transform .5s var(--ease)}
.h2-tile.lead .h2-tile-ic{width:98px;height:98px;margin:0 0 8px -8px}
.h2-tile-ic svg,.h2-tile.lead .h2-tile-ic svg{width:100%;height:100%;fill:none;stroke:none;overflow:visible;filter:drop-shadow(0 4px 9px rgba(0,0,0,.22))}
.h2-tile:hover .h2-tile-ic{transform:translateY(-3px)}
.h2-tile.b .tp-iso-g,.h2-tile.b .tp-iso-sh{animation-delay:.7s}.h2-tile.c .tp-iso-g,.h2-tile.c .tp-iso-sh{animation-delay:1.4s}
.h2-tile.d .tp-iso-g,.h2-tile.d .tp-iso-sh{animation-delay:2.1s}.h2-tile.e .tp-iso-g,.h2-tile.e .tp-iso-sh{animation-delay:2.8s}
@media (max-width:640px){.h2-tile-ic,.h2-tile.lead .h2-tile-ic{width:58px;height:58px;margin-left:-3px}}

/* 61 · 6 Sep 2026 (Bazil): the AI flow. Four stages, four columns, one
   line through the numerals. The pulse leaves stage 1 at 0s, reaches 2 at
   .5s, 3 at 1s and 4 at 1.5s, and every art answers on its own beat. */
.h2-eng.v2{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.05fr) auto minmax(0,1fr);column-gap:0;align-items:start}
.h2-eng.v2 .h2-eng-col{display:grid;align-content:start;gap:0}
.h2-eng-step{display:flex;align-items:center;gap:12px;height:44px;margin-bottom:22px}
.h2-eng-step i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--elec);color:#fff;font-style:normal;font-family:"Montserrat",sans-serif;font-weight:600;font-size:20px;letter-spacing:-.02em;animation:h2stepPing 2s var(--ease) infinite}
.h2-eng-col.b2 .h2-eng-step i{animation-delay:.5s}.h2-eng-col.b .h2-eng-step i{animation-delay:1s}.h2-eng-col.c .h2-eng-step i{animation-delay:1.5s}
@keyframes h2stepPing{0%{box-shadow:0 0 0 0 rgba(5,32,245,.36);transform:scale(1)}8%{transform:scale(1.1)}40%,100%{box-shadow:0 0 0 16px rgba(5,32,245,0);transform:scale(1)}}
.h2-eng-step em{font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.h2-eng.v2 .h2-eng-link{width:clamp(26px,4vw,80px);height:44px;margin:0 8px 22px;position:relative}
.h2-eng.v2 .h2-eng-link s{position:absolute;left:-8px;right:-8px;top:21px;height:2px;background:var(--hair2);border-radius:1px;text-decoration:none}
.h2-eng.v2 .h2-eng-link b{position:absolute;top:17px;left:-8px;width:10px;height:10px;margin:0;border-radius:50%;background:var(--elec);box-shadow:0 0 0 4px rgba(5,32,245,.18);opacity:0;animation:h2flowPk 2s linear infinite}
.h2-eng.v2 .h2-eng-link.l2 b{animation-delay:.5s}.h2-eng.v2 .h2-eng-link.l3 b{animation-delay:1s}
@keyframes h2flowPk{0%{left:-8px;opacity:0}4%{opacity:1}21%{opacity:1}25%{left:calc(100% - 2px);opacity:0}100%{left:calc(100% - 2px);opacity:0}}
.h2-eng.v2 .h2-eng-art{height:196px;display:grid;align-content:center;margin-bottom:22px}
.h2-eng.v2 .h2-eng-col b{font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(17px,1.3vw,21px);letter-spacing:-.022em;line-height:1.2;color:var(--navy)}
.h2-eng.v2 .h2-eng-col p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--soft);max-width:30ch}
/* stage 2 · the context, three cards stepping into the engine */
.h2-eng-ctx{position:relative;height:152px;width:min(100%,250px)}
.h2-eng-ctx i{position:absolute;left:0;right:28px;height:44px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair2),0 12px 26px -18px rgba(13,21,38,.4);font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);display:flex;align-items:center;gap:10px;padding:0 15px;animation:h2ctxLit 2s var(--ease) infinite}
.h2-eng-ctx i::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--elec);flex:none}
.h2-eng-ctx i:nth-child(1){top:0;animation-delay:.5s}
.h2-eng-ctx i:nth-child(2){top:54px;left:14px;right:14px;animation-delay:.62s}
.h2-eng-ctx i:nth-child(3){top:108px;left:28px;right:0;animation-delay:.74s}
@keyframes h2ctxLit{0%,28%,100%{box-shadow:inset 0 0 0 1px var(--hair2),0 12px 26px -18px rgba(13,21,38,.4);transform:translateY(0)}8%{box-shadow:inset 0 0 0 1.5px var(--elec),0 14px 28px -16px rgba(5,32,245,.45);transform:translateY(-3px)}}
/* the other arts answer on their beat */
.h2-eng.v2 .h2-eng-hex,.h2-eng.v2 .h2-eng-grid circle{animation-delay:1s}
.h2-eng.v2 .h2-eng-out li{animation-delay:1.5s}.h2-eng.v2 .h2-eng-out li.o1{animation-delay:1.6s}.h2-eng.v2 .h2-eng-out li.o2{animation-delay:1.7s}
@media (max-width:1000px){
  .h2-eng.v2{grid-template-columns:1fr;row-gap:0}
  .h2-eng.v2 .h2-eng-col{padding-left:60px;position:relative}
  .h2-eng.v2 .h2-eng-step{position:absolute;left:0;top:0;margin:0}
  .h2-eng.v2 .h2-eng-step em{position:absolute;left:56px;top:14px;white-space:nowrap}
  .h2-eng.v2 .h2-eng-col b{margin-top:0}
  .h2-eng.v2 .h2-eng-art{height:auto;margin:52px 0 16px}
  .h2-eng.v2 .h2-eng-link{width:100%;height:40px;margin:0}
  .h2-eng.v2 .h2-eng-link s{left:21px;right:auto;top:-6px;bottom:-6px;width:2px;height:auto}
  .h2-eng.v2 .h2-eng-link b{left:17px;top:-8px;animation-name:h2flowPkV}
  @keyframes h2flowPkV{0%{top:-8px;opacity:0}4%{opacity:1}21%{opacity:1}25%{top:calc(100% - 2px);opacity:0}100%{top:calc(100% - 2px);opacity:0}}
}

/* 62 · 6 Sep 2026 (Bazil, pass 2): the isometric icon language, shared by
   the sector tiles and the scale band. Palette as variables so one glyph
   reads on white and on a photograph. */
.tp-iso{--io:#06156A;--if1:#fff;--if2:#E6EDFF;--if3:#C3D3F6;--ia:#0520F5;--ia2:#041BCC;--is:#06156A;overflow:visible;display:block}
.tp-iso .tp-iso-sh{opacity:.22}
.tp-iso.onphoto{--io:#fff;--if1:rgba(255,255,255,.96);--if2:rgba(255,255,255,.72);--if3:rgba(255,255,255,.5);--ia:#0520F5;--ia2:#0317B8;--is:#fff}
.tp-iso .tp-iso-g{animation:tpIsoFloat 4.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.tp-iso .tp-iso-sh{animation:tpIsoSh 4.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes tpIsoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2px)}}
@keyframes tpIsoSh{0%,100%{transform:scale(1);opacity:.22}50%{transform:scale(.9);opacity:.13}}
@media (prefers-reduced-motion:reduce){.tp-iso .tp-iso-g,.tp-iso .tp-iso-sh{animation:none}}
.h2-scale-keys li{grid-template-columns:84px minmax(0,1fr)}
.h2-key-ic{width:84px;height:84px;min-width:84px;min-height:84px;color:var(--elec)}
.h2-key-ic svg{width:84px;height:84px;fill:none;stroke:none;overflow:visible}
.h2-key-ic .tp-iso-w{display:block;width:100%;height:100%}
.h2-scale-keys li:nth-child(1) .h2-key-ic,.h2-scale-keys li:nth-child(2) .h2-key-ic,.h2-scale-keys li:nth-child(3) .h2-key-ic{animation:none;transform:none}
.h2-scale-keys li:nth-child(2) .tp-iso-g,.h2-scale-keys li:nth-child(2) .tp-iso-sh{animation-delay:1.4s}
.h2-scale-keys li:nth-child(3) .tp-iso-g,.h2-scale-keys li:nth-child(3) .tp-iso-sh{animation-delay:2.8s}
@media (max-width:900px){.h2-scale-keys li{grid-template-columns:76px minmax(0,1fr)}.h2-key-ic{width:76px;height:76px;min-width:76px;min-height:76px}.h2-key-ic svg{width:76px;height:76px}}

/* 63 · 6 Sep 2026 (Bazil): the header shows from the first frame. Rules 27
   and 47 hid the bar at the top ("clean hero, no nav until you move");
   reversed. At the top the bar sits on its frosted strip, so the links read
   over the photograph; past 24px it goes solid as before. */
body:has(.h2) .nav.attop .nav-in{opacity:1;transform:none;pointer-events:auto;visibility:visible}
body:has(.h2) .nav.attop::after{opacity:1}

/* 64 · the hero headline scales with the viewport (was capped at 60px,
   which read small in an 860px hero at 1660). */
.h2-hero h1{font-size:clamp(40px,4.7vw,92px);letter-spacing:-.04em;line-height:1}
.h2-hero .h2-lede{font-size:clamp(16px,1.2vw,19.5px);max-width:52ch}

/* 65 · the hero footage rotates: two stacked players crossfade, and a
   caption names the industry on screen. */
.h2-hero-shot video{opacity:0;transition:opacity 1.3s ease}
.h2-hero-shot video.ready{opacity:1}
.h2-hero-shot video.v2{z-index:1}
.h2-hero-cap{position:absolute;right:clamp(18px,2vw,34px);bottom:clamp(18px,2.4vh,30px);z-index:3;margin:0;display:flex;align-items:center;gap:10px;
  font-family:"Inter",sans-serif;font-weight:600;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5);transition:opacity .45s ease,transform .45s ease}
.h2-hero-cap i{font-style:normal;color:rgba(255,255,255,.72)}
.h2-hero-cap b{font-weight:700}
.h2-hero-cap.sw{opacity:0;transform:translateY(4px)}
@media (max-width:1000px){.h2-hero-cap{display:none}}

/* ═══ 7 SEP 2026 · REVIEW BATCH (Bazil) ═══════════════════════════════════ */
/* 66 · the hero fade runs wide: the picture reaches under the copy and
   dissolves into the page across most of its width, so there is no edge. */
@media (min-width:1001px){
  .h2-hero-shot{margin-left:calc(-1 * clamp(160px,28%,520px))}
  .h2-hero-shot::before{background:linear-gradient(90deg,#fff 0%,#fff 24%,rgba(255,255,255,.975) 32%,rgba(255,255,255,.88) 42%,rgba(255,255,255,.66) 54%,rgba(255,255,255,.38) 66%,rgba(255,255,255,.14) 78%,rgba(255,255,255,0) 90%)}
}
/* 67 · the logo row: more air above and below, 6% more between marks */
.h2-marq{margin-top:clamp(60px,8vh,104px);padding:18px 0 20px}
.h2-marq .logomarq-half{gap:clamp(32px,3.4vw,62px);padding-right:clamp(32px,3.4vw,62px)}
/* 68 · people roster and journey nodes carry the isometric objects */
.h2-people .h2-person{grid-template-columns:62px minmax(0,1fr);column-gap:16px}
.h2-person-ic,.h2-person .h2-person-ic{width:62px;height:62px;border:0;border-radius:0;background:none;box-shadow:none}
.h2-person-ic svg{width:100%;height:100%;fill:none;stroke:none;overflow:visible}
.h2-stop-n,.h2-stop .h2-stop-n{width:70px;height:70px;top:-46px;left:-6px;border:0;border-radius:0;background:none;box-shadow:none;transform:none}
.h2-stop-n::after{content:none;animation:none}
.h2-stop-n svg{width:100%;height:100%;fill:none;stroke:none;overflow:visible}
.h2-stop,.h2-stop:nth-child(n){padding-top:44px}
.h2-stop:nth-child(2) .tp-iso-g,.h2-stop:nth-child(2) .tp-iso-sh{animation-delay:1s}
.h2-stop:nth-child(3) .tp-iso-g,.h2-stop:nth-child(3) .tp-iso-sh{animation-delay:2s}
.h2-stop:nth-child(4) .tp-iso-g,.h2-stop:nth-child(4) .tp-iso-sh{animation-delay:3s}
.h2-person:nth-child(2) .tp-iso-g,.h2-person:nth-child(2) .tp-iso-sh{animation-delay:1.4s}
.h2-person:nth-child(3) .tp-iso-g,.h2-person:nth-child(3) .tp-iso-sh{animation-delay:2.8s}
@media (max-width:1000px){.h2-stop-n,.h2-stop .h2-stop-n{top:-6px;left:0;width:60px;height:60px}.h2-stop{padding-left:76px}}
/* 69 · FAQ: a title, an index and an object per question */
.h2-faq-head{display:grid;gap:10px;margin-bottom:clamp(14px,2vh,22px)}
.h2-faq-head h3{margin:0;font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(22px,2vw,30px);letter-spacing:-.025em;line-height:1.15;color:var(--navy)}
.h2-fq summary{display:grid;grid-template-columns:54px 36px minmax(0,1fr);align-items:center;column-gap:12px;padding:14px 44px 14px 0}
.h2-fq-ic{width:54px;height:54px;display:block}
.h2-fq-ic svg{width:100%;height:100%;fill:none;stroke:none;overflow:visible}
.h2-fq-n{font-family:"Inter",sans-serif;font-weight:600;font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--elec)}
.h2-fq p{padding-left:102px}
@media (max-width:640px){.h2-fq summary{grid-template-columns:42px 30px 1fr;column-gap:10px}.h2-fq-ic{width:42px;height:42px}.h2-fq p{padding-left:0}}
/* 70 · the proof story: an object per step and a quiet flow between them */
.h2-story{position:relative}
.h2-story-r,.h2-story-r:first-child{grid-template-columns:60px minmax(0,1fr);column-gap:16px;align-items:start;position:relative;z-index:1}
.h2-story-ic{width:60px;height:60px;display:block}
.h2-story-ic svg{width:100%;height:100%;fill:none;stroke:none;overflow:visible}
.h2-story::before{content:"";position:absolute;left:29px;top:62px;bottom:62px;width:0;border-left:1px dashed var(--hair2)}
.h2-story::after{content:"";position:absolute;left:26px;top:62px;width:7px;height:7px;border-radius:50%;background:var(--elec);opacity:0;animation:h2storyFlow 5.5s var(--ease) infinite}
@keyframes h2storyFlow{0%{top:62px;opacity:0}10%{opacity:1}85%{opacity:1}100%{top:calc(100% - 70px);opacity:0}}
.h2-story-r:nth-child(2) .tp-iso-g,.h2-story-r:nth-child(2) .tp-iso-sh{animation-delay:1.4s}
.h2-story-r:nth-child(3) .tp-iso-g,.h2-story-r:nth-child(3) .tp-iso-sh{animation-delay:2.8s}
@media (prefers-reduced-motion:reduce){.h2-story::after{animation:none}}
/* 71 · the play button: electric disc, white mark, one breathing ring */
.h2-film .h2-film-btn s{width:86px;height:86px;border-radius:50%;background:var(--elec);color:#fff;position:relative;box-shadow:0 22px 44px -18px rgba(5,32,245,.75)}
.h2-film .h2-film-btn s::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);animation:h2playRing 2.8s var(--ease) infinite}
.h2-film .h2-film-btn svg{width:26px;height:26px;margin-left:5px}
.h2-film .h2-film-btn:hover s{transform:scale(1.06)}
@keyframes h2playRing{0%{transform:scale(.9);opacity:.9}70%,100%{transform:scale(1.22);opacity:0}}
@media (prefers-reduced-motion:reduce){.h2-film .h2-film-btn s::before{animation:none;opacity:.5}}
/* 72 · the close band, restructured */
.h2-meet-in.v2{display:grid;gap:16px}
.h2-meet-in.v2 .h2-mt-panel{gap:0}
.h2-meet-in.v2 .h2-mt-panel figcaption{margin-top:12px}
.h2-meet-in.v2 .h2-mt-panel figcaption b{display:block;font-family:"Montserrat",sans-serif;font-weight:500;font-size:16px;letter-spacing:-.01em;color:#fff}
.h2-meet-in.v2 .h2-mt-panel figcaption span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.62)}
.h2-meet-in.v2 .h2-mt-card{margin-top:8px;padding:20px 22px 22px;border:1px solid rgba(255,255,255,.16);border-radius:4px;background:rgba(255,255,255,.04);box-shadow:none}
.h2-meet-in.v2 .h2-mt-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px;margin:12px 0 0;padding:0;list-style:none}
.h2-meet-in.v2 .h2-mt-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:#fff}
@media (max-width:560px){.h2-meet-in.v2 .h2-mt-list{grid-template-columns:1fr}}

/* 73 · the people band on Haydar's room: overlay space is 2880 by 1222, the
   screen mask box sits at (2061, 149), and the frame shows wide so the
   towers and the screen are both in. */
.h2-people-shot{aspect-ratio:2.25}
.h2-people-ov.kl{width:2880px;height:1222px}
.h2-people-ov.kl .h2-screen-mask{left:2061px;top:149px;width:715px;height:514px;-webkit-mask-image:url(/assets/media/team-daylight-screenmask.png);mask-image:url(/assets/media/team-daylight-screenmask.png)}
@media (max-width:1000px){.h2-people-shot{aspect-ratio:16/10}}

/* 74 · fixes from the 7 Sep captures */
.h2-stop-n,.h2-stop .h2-stop-n,.h2-stop.on .h2-stop-n{width:78px;height:78px;top:-52px;left:-8px;border:0;border-radius:0;background:none;box-shadow:none;transform:none;color:inherit}
.h2-stop-n::after,.h2-stop.on .h2-stop-n::after{content:none}
.h2-stop,.h2-stop:nth-child(n){padding-top:46px}
@media (max-width:1000px){.h2-stop-n,.h2-stop .h2-stop-n,.h2-stop.on .h2-stop-n{top:-8px;left:0;width:64px;height:64px}}
.h2-story-r,.h2-story-r:first-child{grid-template-columns:72px minmax(0,1fr);column-gap:14px}
.h2-story-ic{width:72px;height:72px}
.h2-story::before{left:35px;top:70px;bottom:70px}
.h2-story::after{left:32px}
@keyframes h2storyFlow{0%{top:70px;opacity:0}10%{opacity:1}85%{opacity:1}100%{top:calc(100% - 78px);opacity:0}}
.h2-faq-eb{font-family:"Inter",sans-serif;font-weight:600;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--elec)}
.h2-meet-in.v2 .h2-mt-item i{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;border:0;background:var(--elec) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'><path d='M5 9.2l2.6 2.6L13 6.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/18px no-repeat;opacity:1;animation:none;transform:none}
/* 75 · 7 Sep 2026 (Bazil): more vertical distance around the logo row, and
   between the hero and the trust band above it. */
.h2-trust{padding-top:clamp(72px,9vh,124px)}
.h2-marq{margin-top:clamp(96px,12vh,160px);padding:22px 0 26px;margin-bottom:clamp(16px,2.6vh,34px)}
/* 76 · 7 Sep 2026 (Bazil): the journey rail, finer. One hairline, a one
   pixel fill, a two pixel pulse, a small arrow head. */
.h2-rail,.h2-rail:nth-child(n){border-top:1px solid var(--hair2)}
.h2-rail-fill{height:1px;top:-1px}
.h2-rail::before{height:2px;top:-1px;opacity:.75}
.h2-rail::after{width:6px;height:6px;top:-4px}
/* 77 · 7 Sep 2026 (Bazil: "I don't want black on my icons"): the white-band
   palette drops navy. Outline and shadow dots are electric blue; faces stay
   white and pale blue; the accent side is a deeper blue. On photographs the
   white palette is unchanged. */
.tp-iso{--io:#0520F5;--is:#0520F5;--ia2:#0317B8;--if3:#BFD0F5}
.tp-iso.onphoto{--io:#fff;--is:#fff;--ia2:#0317B8;--if3:rgba(255,255,255,.5)}
/* 78 · 7 Sep 2026 (Bazil): the scale rows keep a real distance even when
   the headline beside them is short. */
.h2-scale-keys{gap:clamp(34px,5vh,64px)}
@media (max-width:900px){.h2-scale-keys{gap:32px}}
/* 79 · the objects, more alive and easier to read: a slow glow on the
   accent, a float with a slight tilt, more contrast in the faces, and a
   size up everywhere they appear. */
@property --ia{syntax:'<color>';inherits:true;initial-value:#0520F5}
.tp-iso{--if2:#DCE6FF;--if3:#AFC4F3;animation:tpIsoGlow 3.6s ease-in-out infinite}
.tp-iso.onphoto{--if2:rgba(255,255,255,.74);--if3:rgba(255,255,255,.48)}
@keyframes tpIsoGlow{0%,100%{--ia:#0520F5}50%{--ia:#5B7BFF}}
.tp-iso .tp-iso-g{animation:tpIsoFloat 3.6s ease-in-out infinite}
@keyframes tpIsoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-1.4deg)}}
.tp-iso .tp-iso-sh{animation:tpIsoSh 3.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.tp-iso{animation:none}}
.h2-scale-keys li{grid-template-columns:108px minmax(0,1fr);column-gap:clamp(18px,1.6vw,28px)}
.h2-key-ic{width:108px;height:108px;min-width:108px;min-height:108px}
.h2-key-ic svg{width:108px;height:108px}
@media (max-width:900px){.h2-scale-keys li{grid-template-columns:84px minmax(0,1fr)}.h2-key-ic{width:84px;height:84px;min-width:84px;min-height:84px}.h2-key-ic svg{width:84px;height:84px}}
.h2-stop-n,.h2-stop .h2-stop-n,.h2-stop.on .h2-stop-n{width:88px;height:88px;top:-58px;left:-10px}
.h2-stop,.h2-stop:nth-child(n){padding-top:50px}
.h2-people .h2-person{grid-template-columns:72px minmax(0,1fr)}
.h2-person-ic,.h2-person .h2-person-ic{width:72px;height:72px}
.h2-fq summary{grid-template-columns:62px 36px minmax(0,1fr)}
.h2-fq-ic{width:62px;height:62px}
.h2-fq p{padding-left:110px}
.h2-story-r,.h2-story-r:first-child{grid-template-columns:80px minmax(0,1fr)}
.h2-story-ic{width:80px;height:80px}
.h2-story::before{left:39px}.h2-story::after{left:36px}
.h2-tile-ic,.h2-tile.lead .h2-tile-ic{width:80px;height:80px}
.h2-tile.lead .h2-tile-ic{width:104px;height:104px}
/* 80 · the journey line runs between the objects, not through them: the
   rail is masked out under each node (four windows, one per column). */
.h2-rail{--jg:clamp(18px,2.4vw,40px);--jc:calc((100% - 3 * var(--jg)) / 4);--jw:96px;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0,transparent var(--jw),
    #000 var(--jw),#000 calc(1 * (var(--jc) + var(--jg)) - 12px),
    transparent calc(1 * (var(--jc) + var(--jg)) - 12px),transparent calc(1 * (var(--jc) + var(--jg)) + var(--jw) - 12px),
    #000 calc(1 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(2 * (var(--jc) + var(--jg)) - 12px),
    transparent calc(2 * (var(--jc) + var(--jg)) - 12px),transparent calc(2 * (var(--jc) + var(--jg)) + var(--jw) - 12px),
    #000 calc(2 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(3 * (var(--jc) + var(--jg)) - 12px),
    transparent calc(3 * (var(--jc) + var(--jg)) - 12px),transparent calc(3 * (var(--jc) + var(--jg)) + var(--jw) - 12px),
    #000 calc(3 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 100%);
  mask-image:linear-gradient(90deg,
    transparent 0,transparent var(--jw),
    #000 var(--jw),#000 calc(1 * (var(--jc) + var(--jg)) - 12px),
    transparent calc(1 * (var(--jc) + var(--jg)) - 12px),transparent calc(1 * (var(--jc) + var(--jg)) + var(--jw) - 12px),
    #000 calc(1 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(2 * (var(--jc) + var(--jg)) - 12px),
    transparent calc(2 * (var(--jc) + var(--jg)) - 12px),transparent calc(2 * (var(--jc) + var(--jg)) + var(--jw) - 12px),
    #000 calc(2 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(3 * (var(--jc) + var(--jg)) - 12px),
    transparent calc(3 * (var(--jc) + var(--jg)) - 12px),transparent calc(3 * (var(--jc) + var(--jg)) + var(--jw) - 12px),
    #000 calc(3 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 100%)}

/* ═══ 7 SEP 2026 · PASS 3 (Bazil) ═════════════════════════════════════════ */
/* 81 · the proof story on flat line glyphs */
.h2-story-r,.h2-story-r:first-child{grid-template-columns:44px minmax(0,1fr);column-gap:16px}
.h2-story-ic,.h2-story-ic.flat{width:44px;height:44px;display:grid;place-items:center;color:var(--elec)}
.h2-story-ic.flat svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h2-story::before{left:21px;top:50px;bottom:50px}.h2-story::after{left:18px}
@keyframes h2storyFlow{0%{top:50px;opacity:0}10%{opacity:1}85%{opacity:1}100%{top:calc(100% - 58px);opacity:0}}
/* 82 · scale band: eyebrow and statement closer */
.h2-scale-keys b{margin-top:3px}
/* 83 · vertical rhythm across the page */
.h2{--band:clamp(100px,13vh,180px)}
.h2-head{margin-bottom:clamp(32px,4.4vh,60px)}
@media (max-width:640px){.h2{--band:clamp(64px,9vh,88px)}.h2-head{margin-bottom:26px}}
/* 84 · the AI band, one frame and one loop */
.h2-eng.v3{display:block}
.h2-eng-frame{position:relative;border:1px solid var(--hair2);border-radius:14px;background:#fff;padding:56px 36px 70px}
.h2-eng-frame-lb{position:absolute;left:28px;top:-11px;padding:3px 10px;background:var(--pale);border-radius:4px;font-family:"Inter",sans-serif;font-weight:600;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--elec)}
.h2-eng-line{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative;z-index:1}
.h2-eng-line li{position:relative;display:grid;grid-template-columns:44px 28px minmax(0,1fr);column-gap:12px;align-items:center;padding-right:56px}
.h2-eng-line li .h2-eng-n{width:44px;height:44px;border-radius:50%;background:var(--elec);color:#fff;display:grid;place-items:center;font-style:normal;font-family:"Montserrat",sans-serif;font-weight:600;font-size:19px;animation:h2engPing 8s var(--ease) infinite}
.h2-eng-line .s2 .h2-eng-n{animation-delay:1.12s}.h2-eng-line .s3 .h2-eng-n{animation-delay:2.24s}.h2-eng-line .s4 .h2-eng-n{animation-delay:3.36s}
@keyframes h2engPing{0%{box-shadow:0 0 0 0 rgba(5,32,245,.4)}7%{box-shadow:0 0 0 14px rgba(5,32,245,0)}100%{box-shadow:0 0 0 14px rgba(5,32,245,0)}}
.h2-eng-ic{display:grid;place-items:center;width:28px;height:28px;color:var(--elec)}
.h2-eng-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h2-eng-tx b{display:block;font-family:"Montserrat",sans-serif;font-weight:500;font-size:17px;letter-spacing:-.015em;color:var(--navy);line-height:1.15}
.h2-eng-tx span{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--soft)}
.h2-eng-line li:not(:last-child)::after{content:"";position:absolute;right:14px;top:21px;width:30px;height:2px;background:var(--hair2)}
.h2-eng-line li:not(:last-child)::before{content:"";position:absolute;right:12px;top:17.5px;width:7px;height:7px;border-top:2px solid var(--hair2);border-right:2px solid var(--hair2);transform:rotate(45deg)}
.h2-eng-return{position:absolute;left:calc(36px + 22px);right:calc(36px + 22px + 3 * ((100% - 72px) / 4) * 0);height:0;bottom:28px;border-top:1.5px dashed var(--hair2)}
.h2-eng-return{right:auto;width:calc(3 * ((100% - 72px) / 4))}
.h2-eng-frame::before,.h2-eng-frame::after{content:"";position:absolute;top:104px;bottom:28px;width:0;border-left:1.5px dashed var(--hair2)}
.h2-eng-frame::before{left:calc(36px + 22px)}
.h2-eng-frame::after{left:calc(36px + 22px + 3 * ((100% - 72px) / 4))}
.h2-eng-return em{position:absolute;left:50%;top:-9px;transform:translateX(-50%);padding:0 10px;background:#fff;font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
.h2-eng-pulse{position:absolute;z-index:2;width:10px;height:10px;border-radius:50%;background:var(--elec);box-shadow:0 0 0 4px rgba(5,32,245,.18);left:calc(36px + 17px);top:73px;animation:h2engLoop 8s linear infinite}
@keyframes h2engLoop{0%{left:calc(36px + 17px);top:73px}42%{left:calc(36px + 17px + 3 * ((100% - 72px) / 4));top:73px}50%{left:calc(36px + 17px + 3 * ((100% - 72px) / 4));top:calc(100% - 33px)}92%{left:calc(36px + 17px);top:calc(100% - 33px)}100%{left:calc(36px + 17px);top:73px}}
.h2-eng-notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);margin-top:clamp(28px,4vh,48px);padding:0 36px}
.h2-eng-notes b{display:block;font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(17px,1.3vw,21px);letter-spacing:-.022em;line-height:1.2;color:var(--navy)}
.h2-eng-notes p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:var(--soft);max-width:30ch}
@media (prefers-reduced-motion:reduce){.h2-eng-pulse,.h2-eng-line li .h2-eng-n{animation:none}}
@media (max-width:1000px){
  .h2-eng-frame{padding:40px 22px 30px}
  .h2-eng-line{grid-template-columns:1fr;gap:22px}
  .h2-eng-line li{padding-right:0}
  .h2-eng-line li::before,.h2-eng-line li::after,.h2-eng-return,.h2-eng-pulse,.h2-eng-frame::before,.h2-eng-frame::after{display:none}
  .h2-eng-notes{grid-template-columns:1fr;padding:0;gap:22px}
}
/* 85 · every object acts now and then: the lens searches, the button
   presses, the bars grow, the truck drives, the chimney puffs, the check
   draws, the flag waves, the clock ticks, the people nod. */
.tp-iso .tp-act{transform-box:fill-box;transform-origin:50% 100%}
.tp-iso[data-k="lens"] .tp-act{animation:tpAcSearch 7s ease-in-out infinite}
@keyframes tpAcSearch{0%,56%,100%{transform:translate(0,0)}66%{transform:translate(-5px,-2.5px)}80%{transform:translate(5px,2.5px)}92%{transform:translate(0,0)}}
.tp-iso[data-k="golive"] .tp-act{animation:tpAcPress 7s ease-in-out infinite}
@keyframes tpAcPress{0%,60%,100%{transform:translateY(0)}64%{transform:translateY(3px)}70%{transform:translateY(0)}}
.tp-iso[data-k="stack"] .tp-act,.tp-iso[data-k="engine"] .tp-act,.tp-iso[data-k="medtech"] .tp-act{animation:tpAcLift 7s ease-in-out infinite}
@keyframes tpAcLift{0%,58%,100%{transform:translateY(0)}66%{transform:translateY(-4px)}78%{transform:translateY(0)}}
.tp-iso[data-k="bars"] .tp-act{animation:tpAcGrow 7s ease-in-out infinite}
@keyframes tpAcGrow{0%,56%,100%{transform:scaleY(1)}62%{transform:scaleY(.72)}74%{transform:scaleY(1.08)}82%{transform:scaleY(1)}}
.tp-iso[data-k="migrate"] .tp-act,.tp-iso[data-k="platform"] .tp-act,.tp-iso[data-k="building"] .tp-act{animation:tpAcBlink 7s ease-in-out infinite}
@keyframes tpAcBlink{0%,56%,100%{opacity:1}62%{opacity:.3}68%{opacity:1}74%{opacity:.3}80%{opacity:1}}
.tp-iso[data-k="supply"] .tp-act{animation:tpAcDrive 7s ease-in-out infinite}
@keyframes tpAcDrive{0%,55%,100%{transform:translate(0,0)}70%{transform:translate(6px,3.5px)}86%{transform:translate(0,0)}}
.tp-iso[data-k="mfg"] .tp-act{animation:tpAcPuff 7s ease-out infinite;transform-origin:50% 50%}
@keyframes tpAcPuff{0%,58%,100%{opacity:0;transform:translateY(0) scale(.5)}64%{opacity:.8}80%{opacity:0;transform:translateY(-9px) scale(1.4)}}
.tp-iso[data-k="lab"] .tp-act{animation:tpAcSwirl 7s ease-in-out infinite}
@keyframes tpAcSwirl{0%,56%,100%{transform:rotate(0)}64%{transform:rotate(-4deg)}76%{transform:rotate(4deg)}88%{transform:rotate(0)}}
.tp-iso[data-k="pharma"] .tp-act{animation:tpAcRoll 7s ease-in-out infinite;transform-origin:50% 50%}
@keyframes tpAcRoll{0%,58%,100%{transform:translate(0,0) rotate(0)}70%{transform:translate(3px,1.7px) rotate(3deg)}84%{transform:translate(0,0) rotate(0)}}
.tp-iso[data-k="figure"] .tp-act,.tp-iso[data-k="partners"] .tp-act{animation:tpAcNod 7s ease-in-out infinite}
@keyframes tpAcNod{0%,60%,100%{transform:translateY(0)}65%{transform:translateY(1.8px)}70%{transform:translateY(0)}75%{transform:translateY(1.8px)}80%{transform:translateY(0)}}
.tp-iso[data-k="flag"] .tp-act{animation:tpAcWave 7s ease-in-out infinite;transform-origin:0 50%}
@keyframes tpAcWave{0%,56%,100%{transform:skewY(0)}64%{transform:skewY(-6deg)}76%{transform:skewY(6deg)}88%{transform:skewY(0)}}
.tp-iso[data-k="clock"] .tp-act{animation:tpAcTick 7s steps(1,end) infinite;transform-origin:0 0}
@keyframes tpAcTick{0%,58%{transform:rotate(0)}62%,100%{transform:rotate(30deg)}}
.tp-iso[data-k="unlink"] .tp-act{animation:tpAcApart 7s ease-in-out infinite}
@keyframes tpAcApart{0%,56%,100%{transform:translate(0,0)}66%{transform:translate(4px,2.3px)}84%{transform:translate(0,0)}}
.tp-iso[data-k="industry"] .tp-draw{stroke-dasharray:30;stroke-dashoffset:0;animation:tpAcDraw 7s ease-in-out infinite}
@keyframes tpAcDraw{0%,58%{stroke-dashoffset:0}60%{stroke-dashoffset:30}78%,100%{stroke-dashoffset:0}}
.h2-scale-keys li:nth-child(2) .tp-act,.h2-stop:nth-child(2) .tp-act,.h2-person:nth-child(2) .tp-act,.h2-tile.b .tp-act,.h2-fq:nth-of-type(2) .tp-act{animation-delay:1.4s}
.h2-scale-keys li:nth-child(3) .tp-act,.h2-stop:nth-child(3) .tp-act,.h2-person:nth-child(3) .tp-act,.h2-tile.c .tp-act,.h2-fq:nth-of-type(3) .tp-act{animation-delay:2.8s}
.h2-stop:nth-child(4) .tp-act,.h2-tile.d .tp-act,.h2-fq:nth-of-type(4) .tp-act{animation-delay:4.2s}
.h2-tile.e .tp-act,.h2-fq:nth-of-type(5) .tp-act{animation-delay:5.6s}
@media (prefers-reduced-motion:reduce){.tp-iso .tp-act,.tp-iso .tp-draw{animation:none}}
/* 86 · 7 Sep 2026 (Bazil): at the top the header has no bar. A soft fade
   runs from the top edge into the hero instead of a strip, so the links
   stay readable over the photograph without a box. */
body:has(.h2) .nav.attop::after{opacity:1;height:160%;background:linear-gradient(180deg,rgba(250,251,254,.94) 0%,rgba(250,251,254,.72) 40%,rgba(250,251,254,0) 100%);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
/* 87 · the hero fade, balanced: the white was eating the picture. The
   overlap and the run are shorter, and the right two thirds stay clear. */
@media (min-width:1001px){
  .h2-hero-shot{margin-left:calc(-1 * clamp(120px,20%,380px))}
  .h2-hero-shot::before{background:linear-gradient(90deg,#fff 0%,#fff 12%,rgba(255,255,255,.92) 20%,rgba(255,255,255,.7) 30%,rgba(255,255,255,.42) 41%,rgba(255,255,255,.18) 52%,rgba(255,255,255,.05) 60%,rgba(255,255,255,0) 68%)}
}
/* 88 · the journey flow, refined: bigger objects, a dotted track, one
   pulse that passes behind each object. */
.h2-stop-n,.h2-stop .h2-stop-n,.h2-stop.on .h2-stop-n{width:112px;height:112px;top:-74px;left:-14px}
.h2-stop,.h2-stop:nth-child(n){padding-top:60px}
.h2-rail{--jw:124px;border-top:0;height:1px;margin-top:clamp(70px,9vh,112px);background-image:linear-gradient(90deg,var(--hair2) 0 5px,transparent 5px 11px);background-size:11px 1px;background-repeat:repeat-x}
.h2-rail-fill{height:1px;top:0}
.h2-rail::before{content:"";position:absolute;left:0;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--elec);box-shadow:0 0 0 4px rgba(5,32,245,.16);opacity:0;animation:h2railDot 7s linear infinite;z-index:2}
@keyframes h2railDot{0%{left:0;opacity:0}3%{opacity:1}96%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.h2-rail::after{top:-4px;width:6px;height:6px}
@media (max-width:1000px){.h2-stop-n,.h2-stop .h2-stop-n,.h2-stop.on .h2-stop-n{top:-10px;left:0;width:76px;height:76px}.h2-stop{padding-left:90px}}
@media (prefers-reduced-motion:reduce){.h2-rail::before{animation:none}}
/* 89 · 7 Sep 2026 (Bazil): the story guide runs between the glyphs, never
   through them; the glyph boxes sit on the paper and hide the line. */
.h2-story-ic,.h2-story-ic.flat{background:#fff;position:relative;z-index:2}
.h2-story::before{top:44px;bottom:44px;z-index:0}
.h2-story::after{z-index:1}
/* 90 · three case tiles under the film (four stories with the film) */
.h2-proof-more{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.h2-proof-more{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.h2-proof-more{grid-template-columns:1fr}}
/* 91 · objects answer the pointer: hover lifts the object and runs its
   action at once, on tiles, keys, nodes, rows and questions. */
.tp-iso{transition:transform .5s var(--ease)}
.h2-tile:hover .tp-iso,.h2-scale-keys li:hover .tp-iso,.h2-stop:hover .tp-iso,.h2-person:hover .tp-iso,.h2-fq summary:hover .tp-iso,.h2-cap:hover .tp-iso{transform:translateY(-5px) scale(1.07)}
.h2-tile:hover .tp-act,.h2-scale-keys li:hover .tp-act,.h2-stop:hover .tp-act,.h2-person:hover .tp-act,.h2-fq summary:hover .tp-act,.h2-cap:hover .tp-act{animation-duration:1.6s;animation-delay:-.9s}
.h2-tile:hover .tp-draw,.h2-scale-keys li:hover .tp-draw{animation-duration:1.6s;animation-delay:-.9s}
/* 92 · 7 Sep 2026 (Bazil: "how does each part work"): every AI station
   demonstrates itself as the pulse arrives. The icon moves (records read,
   sliders set, model thinks, arrow posts) and a status line appears, on the
   same 8s loop as the pulse, 1.12s apart. */
.h2-eng-st{display:block;margin-top:6px;font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--elec);opacity:0;transform:translateY(3px);animation:h2engSt 8s var(--ease) infinite}
.h2-eng-line .s2 .h2-eng-st{animation-delay:1.12s}.h2-eng-line .s3 .h2-eng-st{animation-delay:2.24s}.h2-eng-line .s4 .h2-eng-st{animation-delay:3.36s}
@keyframes h2engSt{0%,100%{opacity:0;transform:translateY(3px)}3%{opacity:1;transform:translateY(0)}14%{opacity:1;transform:translateY(0)}20%{opacity:0;transform:translateY(-3px)}}
.h2-eng-ic svg .d1,.h2-eng-ic svg .d2{animation:h2engRead 8s var(--ease) infinite}
.h2-eng-ic svg .d2{animation-delay:.25s}
@keyframes h2engRead{0%,100%{opacity:1;transform:translateY(0)}3%{opacity:.2}8%{opacity:1;transform:translateY(-1.5px)}14%{opacity:1;transform:translateY(0)}}
.h2-eng-ic svg .k1,.h2-eng-ic svg .k2,.h2-eng-ic svg .k3{animation:h2engKnob 8s var(--ease) infinite;animation-delay:1.12s}
.h2-eng-ic svg .k2{animation-name:h2engKnobL}.h2-eng-ic svg .k3{animation-name:h2engKnobR}
@keyframes h2engKnob{0%,100%{transform:translateX(0)}6%{transform:translateX(5px)}14%{transform:translateX(0)}}
@keyframes h2engKnobL{0%,100%{transform:translateX(0)}6%{transform:translateX(-6px)}14%{transform:translateX(0)}}
@keyframes h2engKnobR{0%,100%{transform:translateX(0)}6%{transform:translateX(7px)}14%{transform:translateX(0)}}
.h2-eng-ic svg .sp{transform-box:view-box;transform-origin:12px 12px;animation:h2engSpin 8s var(--ease) infinite;animation-delay:2.24s}
@keyframes h2engSpin{0%,100%{transform:rotate(0) scale(1)}6%{transform:rotate(90deg) scale(1.18)}14%{transform:rotate(180deg) scale(1)}}
.h2-eng-ic svg .ar{animation:h2engPost 8s var(--ease) infinite;animation-delay:3.36s}
@keyframes h2engPost{0%,100%{transform:translateY(0);opacity:1}3%{transform:translateY(-4px);opacity:.5}8%{transform:translateY(3px);opacity:1}14%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.h2-eng-st{animation:none;opacity:1}.h2-eng-ic svg *{animation:none}}
/* 93 · blue flag before each office name */
.h2-city-flag{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:9px;vertical-align:-3px;color:var(--elec)}
.h2-city-flag svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.h2-cityshot figcaption b{display:flex;align-items:center}
/* 94 · the close band: custom glyphs and a flow from the two ways in to
   the written read, one dot running down each path into the card. */
.h2-meet-in.v2 .h2-mt-panel figcaption{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-items:start}
.h2-mt-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(5,32,245,.16);color:#8C9EFF}
.h2-mt-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h2-mt-flow{position:relative;height:34px;margin:-2px 0 -6px}
.h2-mt-flow i{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(255,255,255,.28)}
.h2-mt-flow i.a{left:25%}.h2-mt-flow i.b{left:75%}
.h2-mt-flow b{position:absolute;left:calc(25% - 3px);top:-2px;width:7px;height:7px;border-radius:50%;background:var(--elec);box-shadow:0 0 0 3px rgba(5,32,245,.25);animation:h2mtDrop 4.4s var(--ease) infinite}
.h2-mt-flow::after{content:"";position:absolute;left:calc(75% - 3px);top:-2px;width:7px;height:7px;border-radius:50%;background:var(--elec);box-shadow:0 0 0 3px rgba(5,32,245,.25);animation:h2mtDrop 4.4s var(--ease) infinite;animation-delay:2.2s}
@keyframes h2mtDrop{0%{top:-2px;opacity:0}10%{opacity:1}42%{top:calc(100% - 5px);opacity:1}50%,100%{top:calc(100% - 5px);opacity:0}}
.h2-meet-in.v2 .h2-mt-card{border-color:rgba(143,182,255,.32)}
.h2-meet-in.v2 .h2-mt-item i.h2-mt-li{width:24px;height:24px;border-radius:0;background:none;color:#8C9EFF;display:grid;place-items:center;margin-top:0}
.h2-mt-li svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h2-meet-in.v2 .h2-mt-item{animation:h2mtItem 4.4s var(--ease) infinite}
.h2-meet-in.v2 .h2-mt-item.i1{animation-delay:.35s}.h2-meet-in.v2 .h2-mt-item.i2{animation-delay:.7s}
@keyframes h2mtItem{0%,38%,100%{color:#fff}46%{color:#fff}44%{color:#8C9EFF}}
@media (prefers-reduced-motion:reduce){.h2-mt-flow b,.h2-mt-flow::after,.h2-meet-in.v2 .h2-mt-item{animation:none}}

/* 95 · 7 Sep 2026: the people band is one real photograph, 21 by 9, no
   overlay. Rule 73's overlay box stays defined but nothing uses it. */
.h2-people-shot{aspect-ratio:21/9}
@media (max-width:1000px){.h2-people-shot{aspect-ratio:16/10}}

/* 96 · 7 Sep 2026 (action list 02): five stages on the journey rail. The
   rail mask now cuts five windows. */
.h2-stops{grid-template-columns:repeat(5,minmax(0,1fr))}
.h2-rail{--jc:calc((100% - 4 * var(--jg)) / 5);--jw:118px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent var(--jw),#000 var(--jw),#000 calc(1 * (var(--jc) + var(--jg)) - 12px),transparent calc(1 * (var(--jc) + var(--jg)) - 12px),transparent calc(1 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(1 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(2 * (var(--jc) + var(--jg)) - 12px),transparent calc(2 * (var(--jc) + var(--jg)) - 12px),transparent calc(2 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(2 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(3 * (var(--jc) + var(--jg)) - 12px),transparent calc(3 * (var(--jc) + var(--jg)) - 12px),transparent calc(3 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(3 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(4 * (var(--jc) + var(--jg)) - 12px),transparent calc(4 * (var(--jc) + var(--jg)) - 12px),transparent calc(4 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(4 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,transparent var(--jw),#000 var(--jw),#000 calc(1 * (var(--jc) + var(--jg)) - 12px),transparent calc(1 * (var(--jc) + var(--jg)) - 12px),transparent calc(1 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(1 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(2 * (var(--jc) + var(--jg)) - 12px),transparent calc(2 * (var(--jc) + var(--jg)) - 12px),transparent calc(2 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(2 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(3 * (var(--jc) + var(--jg)) - 12px),transparent calc(3 * (var(--jc) + var(--jg)) - 12px),transparent calc(3 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(3 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(4 * (var(--jc) + var(--jg)) - 12px),transparent calc(4 * (var(--jc) + var(--jg)) - 12px),transparent calc(4 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 calc(4 * (var(--jc) + var(--jg)) + var(--jw) - 12px),#000 100%)}
.h2-stop-n,.h2-stop .h2-stop-n,.h2-stop.on .h2-stop-n{width:104px;height:104px;top:-68px;left:-12px}
.h2-stop:nth-child(5) .tp-iso-g,.h2-stop:nth-child(5) .tp-iso-sh{animation-delay:4s}.h2-stop:nth-child(5) .tp-act{animation-delay:5.6s}
.h2-stop b{font-size:clamp(17px,1.25vw,21px)}
@media (max-width:1000px){.h2-stops{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.h2-stops{grid-template-columns:1fr}}

/* ═══ 7 SEP 2026 · PASS 4 (Bazil) ═════════════════════════════════════════ */
/* 97 · no float on any object; lines finer (0.7 in the generator). The
   actions and the glow stay. */
.tp-iso .tp-iso-g,.tp-iso .tp-iso-sh{animation:none;transform:none}
/* 98 · journey objects sit lower, on the line */
.h2-stop-n,.h2-stop .h2-stop-n,.h2-stop.on .h2-stop-n{top:-54px}
/* 99 · the people photograph, taller */
.h2-people-shot{aspect-ratio:16/10}
.h2-people-zoom img{object-position:50% 42%}
/* 100 · real flags */
.h2-city-flag.real{width:28px;height:19px;border-radius:2px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(13,21,38,.12);margin-right:10px;vertical-align:-3px}
.h2-city-flag.real svg{width:28px;height:19px;display:block;stroke:none}
/* 101 · AI stations show how they work: a persistent demo under each,
   animating on the 8s loop as the pulse arrives (0, 1.12, 2.24, 3.36s). */
.h2-eng-frame{padding-bottom:104px}
.h2-eng-line li{grid-template-rows:auto auto;row-gap:14px}
.h2-eng-demo{grid-column:1 / -1;position:relative;height:46px;display:block}
.h2-eng-demo.d1 i{position:absolute;left:0;height:10px;border-radius:3px;background:#E6EDFF;overflow:hidden}
.h2-eng-demo.d1 i::after{content:"";position:absolute;inset:0;background:var(--elec);transform:scaleX(.35);transform-origin:0 50%;animation:h2dRead 8s var(--ease) infinite}
.h2-eng-demo.d1 i:nth-child(1){top:0;width:78%}.h2-eng-demo.d1 i:nth-child(2){top:16px;width:60%}.h2-eng-demo.d1 i:nth-child(2)::after{animation-delay:.18s}.h2-eng-demo.d1 i:nth-child(3){top:32px;width:88%}.h2-eng-demo.d1 i:nth-child(3)::after{animation-delay:.36s}
@keyframes h2dRead{0%,100%{transform:scaleX(.35)}4%{transform:scaleX(.35)}12%{transform:scaleX(1)}30%{transform:scaleX(1)}36%{transform:scaleX(.35)}}
.h2-eng-demo.d2{display:flex;gap:6px;align-items:center}
.h2-eng-demo.d2 i{font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-radius:4px;border:1px solid var(--hair2);color:var(--soft);background:#fff;animation:h2dRule 8s var(--ease) infinite;animation-delay:1.12s}
.h2-eng-demo.d2 i:nth-child(2){animation-delay:1.36s}.h2-eng-demo.d2 i:nth-child(3){animation-delay:1.6s}
@keyframes h2dRule{0%,100%{color:var(--soft);border-color:var(--hair2);background:#fff}5%,30%{color:#fff;border-color:var(--elec);background:var(--elec)}36%{color:var(--soft);border-color:var(--hair2);background:#fff}}
.h2-eng-demo.d3{height:46px}
.h2-eng-demo.d3 .core{position:absolute;left:12px;top:15px;width:16px;height:16px;border-radius:50%;background:var(--elec);animation:h2dCore 8s var(--ease) infinite;animation-delay:2.24s}
.h2-eng-demo.d3 .ray{position:absolute;left:34px;top:22px;height:2px;width:0;border-radius:1px;background:var(--elec);transform-origin:0 50%;animation:h2dRay 8s var(--ease) infinite;animation-delay:2.24s;opacity:.6}
.h2-eng-demo.d3 .r1{transform:rotate(-38deg)}.h2-eng-demo.d3 .r2{transform:rotate(-12deg);animation-delay:2.34s}.h2-eng-demo.d3 .r3{transform:rotate(12deg);animation-delay:2.44s}.h2-eng-demo.d3 .r4{transform:rotate(38deg);animation-delay:2.54s}
@keyframes h2dCore{0%,100%{box-shadow:0 0 0 0 rgba(5,32,245,.3)}5%{box-shadow:0 0 0 10px rgba(5,32,245,0)}18%{box-shadow:0 0 0 0 rgba(5,32,245,.3)}23%{box-shadow:0 0 0 10px rgba(5,32,245,0)}}
@keyframes h2dRay{0%,100%{width:0}8%{width:48px}28%{width:48px}36%{width:0}}
.h2-eng-demo.d4 .tray{position:absolute;left:0;bottom:0;width:64px;height:14px;border:1.5px solid var(--elec);border-top:0;border-radius:0 0 5px 5px}
.h2-eng-demo.d4 .doc{position:absolute;left:18px;top:0;width:28px;height:22px;border-radius:3px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--elec);animation:h2dDoc 8s var(--ease) infinite;animation-delay:3.36s}
.h2-eng-demo.d4 .doc::after{content:"";position:absolute;left:6px;right:6px;top:7px;height:2px;background:var(--elec);box-shadow:0 5px 0 var(--elec)}
.h2-eng-demo.d4 .ok{position:absolute;left:78px;top:16px;width:18px;height:18px;border-radius:50%;background:var(--elec);opacity:0;animation:h2dOk 8s var(--ease) infinite;animation-delay:3.36s}
.h2-eng-demo.d4 .ok::after{content:"";position:absolute;left:5px;top:4px;width:6px;height:9px;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(45deg)}
@keyframes h2dDoc{0%,100%{transform:translateY(0)}4%{transform:translateY(-6px)}12%{transform:translateY(14px)}30%{transform:translateY(14px)}36%{transform:translateY(0)}}
@keyframes h2dOk{0%,100%{opacity:0;transform:scale(.6)}12%{opacity:0;transform:scale(.6)}16%{opacity:1;transform:scale(1.1)}20%{transform:scale(1)}30%{opacity:1}36%{opacity:0}}
@media (max-width:1000px){.h2-eng-frame{padding-bottom:36px}}
@media (prefers-reduced-motion:reduce){.h2-eng-demo *,.h2-eng-demo *::after{animation:none}}
/* 102 · the close band: icons free of circles, one merge flow into the
   card with a travelling read, the outcomes lighting as it lands. */
.h2-mt-ic{background:none;color:#8C9EFF;width:26px;height:26px}
.h2-mt-ic svg{width:22px;height:22px}
.h2-meet-in.v2 .h2-mt-panel figcaption{grid-template-columns:26px minmax(0,1fr);column-gap:10px}
.h2-mt-flow{height:64px;margin:2px 0 -4px}
.h2-mt-flow i{display:none}
.h2-mt-flow::before{content:"";position:absolute;left:25%;right:25%;top:26px;height:0;border-top:1px dashed rgba(255,255,255,.3)}
.h2-mt-flow b,.h2-mt-flow::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--elec);box-shadow:0 0 0 3px rgba(5,32,245,.25);animation:h2mtRead 5s linear infinite;left:calc(25% - 3px);top:0}
.h2-mt-flow::after{left:calc(75% - 3px);animation-name:h2mtReadB;animation-delay:2.5s}
.h2-mt-flow em{position:absolute;left:50%;top:18px;transform:translateX(-50%);padding:0 8px;background:#040F4F;font:700 9.5px "Inter",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#8C9EFF;white-space:nowrap;font-style:normal}
.h2-mt-flow .v1,.h2-mt-flow .v2,.h2-mt-flow .v3{display:block;position:absolute;width:0;border-left:1px dashed rgba(255,255,255,.3)}
.h2-mt-flow .v1{left:25%;top:0;height:26px}.h2-mt-flow .v2{left:75%;top:0;height:26px}.h2-mt-flow .v3{left:50%;top:26px;bottom:0}
@keyframes h2mtRead{0%{left:calc(25% - 3px);top:0;opacity:0}6%{opacity:1}34%{left:calc(25% - 3px);top:23px}58%{left:calc(50% - 3px);top:23px}86%{left:calc(50% - 3px);top:calc(100% - 6px);opacity:1}92%,100%{left:calc(50% - 3px);top:calc(100% - 6px);opacity:0}}
@keyframes h2mtReadB{0%{left:calc(75% - 3px);top:0;opacity:0}6%{opacity:1}34%{left:calc(75% - 3px);top:23px}58%{left:calc(50% - 3px);top:23px}86%{left:calc(50% - 3px);top:calc(100% - 6px);opacity:1}92%,100%{left:calc(50% - 3px);top:calc(100% - 6px);opacity:0}}
.h2-meet-in.v2 .h2-mt-item{animation:h2mtLand 5s linear infinite}
.h2-meet-in.v2 .h2-mt-item.i1{animation-delay:.25s}.h2-meet-in.v2 .h2-mt-item.i2{animation-delay:.5s}
@keyframes h2mtLand{0%,84%,100%{color:#fff}88%{color:#8C9EFF}}
.h2-meet-in.v2 .h2-mt-item i.h2-mt-li{background:none;border:0}
@media (prefers-reduced-motion:reduce){.h2-mt-flow b,.h2-mt-flow::after,.h2-meet-in.v2 .h2-mt-item{animation:none}}
/* 103 · the model's rays stay partly out between pulses, so the station
   reads at any moment; the pulse extends them. */
.h2-eng-demo.d3 .ray{width:22px;opacity:.45}
@keyframes h2dRay{0%,100%{width:22px;opacity:.45}8%{width:52px;opacity:1}28%{width:52px;opacity:1}36%{width:22px;opacity:.45}}

/* ═══ 7 SEP 2026 · PASS 5 (Bazil) ═════════════════════════════════════════ */
/* 104 · trust stats: numbers only, the small glyphs read cheap */
.h2-fact-ic{display:none}
.h2-fact b{margin-left:0}
/* 105 · the cloud sits without the big halo behind it */
.h2-eco-stage::after{opacity:.22}
/* 106 · the journey: more vertical room and a cleaner column. Object,
   then index, title, copy, and the output as its own electric stack. */
.h2-jrn .h2-lede{margin-bottom:clamp(24px,3vh,40px)}
.h2-rail{margin-top:clamp(96px,12vh,150px)}
.h2-stop,.h2-stop:nth-child(n){padding-top:74px}
.h2-stops{gap:clamp(24px,3vw,56px);margin-top:0}
.h2-stop em{display:block;font-size:10.5px;letter-spacing:.2em}
.h2-stop b{margin-top:12px;line-height:1.18}
.h2-stop span{margin-top:12px;font-size:14px;line-height:1.6;max-width:28ch}
.h2-stop small{margin-top:22px;display:block;font-size:14px;line-height:1.55;color:var(--elec);font-weight:500;max-width:26ch}
.h2-stop small strong{color:var(--elec);opacity:.75;margin-bottom:6px}
.h2-jrn.h2-band,.h2-jrn{padding-bottom:clamp(120px,15vh,200px)}
@media (max-width:1000px){.h2-stop,.h2-stop:nth-child(n){padding-top:0}.h2-stops{gap:36px 28px}}

/* ═══ 7 SEP 2026 · PASS 6 (Bazil) ═════════════════════════════════════════ */
/* 107 · titles bigger on every band */
.h2 .h2-h{font-size:clamp(40px,4.3vw,82px);line-height:1.02}
.h2 .h2-trust h2{font-size:clamp(32px,2.9vw,54px)}
/* 108 · the small labels read: 12px, full colour */
.h2-stop em,.h2-story-r em,.h2-fq-n,.h2-scale-keys em,.h2-capcap i,.h2-hero-cap,.h2-eng-st,.h2-faq-eb,.h2-tile-lab em,.h2-case em,.h2-mt-lb,.h2-cityfoot span{font-size:12px}
.h2-stop small strong,.h2-tag{font-size:11px;opacity:1}
.h2-hero-cap{font-size:12px}
/* 109 · proof: film and story on one grid with the three tiles below:
   the film spans two tile columns, the story the third. */
.h2-proof-feat{display:grid;grid-template-columns:2fr minmax(0,1fr);column-gap:clamp(16px,1.6vw,28px);align-items:start}
.h2-proof-more{gap:clamp(16px,1.6vw,28px);margin-top:clamp(16px,1.6vw,28px)}
.h2-story{padding-left:0;justify-content:flex-start;padding-top:6px}
@media (max-width:1000px){.h2-proof-feat{grid-template-columns:1fr}}
/* 110 · the AI band as one diagram, no frame, taller */
.h2-eng.v4{--g:clamp(24px,3vw,56px);--cw:calc((100% - 3 * var(--g)) / 4);display:block;position:relative;padding:0 30px 74px}
.h2-eng-note{margin:0 0 34px;font-size:16px;line-height:1.5;color:var(--navy);font-weight:500}
.h2-eng-note i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--elec);margin-right:10px;vertical-align:1px}
.h2-eng-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);position:relative;z-index:1}
.h2-eng-flow li{position:relative;display:grid;gap:16px;align-content:start}
.h2-eng-flow .h2-eng-n{width:52px;height:52px;border-radius:50%;background:var(--elec);color:#fff;display:grid;place-items:center;font-style:normal;font-family:"Montserrat",sans-serif;font-weight:600;font-size:22px;animation:h2engPing 8s var(--ease) infinite}
.h2-eng-flow .s2 .h2-eng-n{animation-delay:1.12s}.h2-eng-flow .s3 .h2-eng-n{animation-delay:2.24s}.h2-eng-flow .s4 .h2-eng-n{animation-delay:3.36s}
.h2-eng-flow li:not(:last-child)::after{content:"";position:absolute;top:25px;left:calc(52px + 10px);right:calc(-1 * var(--g) + 10px);height:2px;background:var(--hair2)}
.h2-eng-flow li:not(:last-child)::before{content:"";position:absolute;top:21.5px;right:calc(-1 * var(--g) + 10px);width:8px;height:8px;border-top:2px solid var(--hair2);border-right:2px solid var(--hair2);transform:rotate(45deg)}
.h2-eng-flow h3{margin:6px 0 0;font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(21px,1.6vw,27px);letter-spacing:-.02em;line-height:1.15;color:var(--navy)}
.h2-eng-flow p{margin:0;font-size:15px;line-height:1.55;color:var(--soft);max-width:30ch}
.h2-eng-flow .h2-eng-st{margin-top:2px;font-size:12px}
.h2-eng.v4 .h2-eng-demo{height:74px;margin-top:6px}
.h2-eng.v4 .h2-eng-demo.d1 i{height:14px;border-radius:4px}
.h2-eng.v4 .h2-eng-demo.d1 i:nth-child(2){top:24px}.h2-eng.v4 .h2-eng-demo.d1 i:nth-child(3){top:48px}
.h2-eng.v4 .h2-eng-demo.d2 i{font-size:11px;padding:8px 11px}
.h2-eng.v4 .h2-eng-demo.d3 .core{width:24px;height:24px;left:10px;top:25px}
.h2-eng.v4 .h2-eng-demo.d3 .ray{left:40px;top:36px;height:2.5px}
.h2-eng.v4 .h2-eng-demo.d4 .tray{width:92px;height:20px}
.h2-eng.v4 .h2-eng-demo.d4 .doc{width:40px;height:32px;left:26px}
.h2-eng.v4 .h2-eng-demo.d4 .doc::after{top:10px;left:8px;right:8px;box-shadow:0 7px 0 var(--elec)}
.h2-eng.v4 .h2-eng-demo.d4 .ok{left:110px;top:26px;width:22px;height:22px}
.h2-eng.v4 .h2-eng-demo.d4 .ok::after{left:7px;top:5px;width:6px;height:10px}
/* the loop around the outside, back into station 1 */
.h2-eng-loop{position:absolute;left:0;right:0;top:56px;bottom:0;pointer-events:none;border:1.5px dashed var(--hair2);border-top:0;border-radius:0 0 18px 18px}
.h2-eng-loop::before{content:"";position:absolute;left:-1.5px;top:-32px;height:32px;border-left:1.5px dashed var(--hair2)}
.h2-eng-loop::after{content:"";position:absolute;right:-1.5px;top:-32px;height:32px;border-right:1.5px dashed var(--hair2)}
.h2-eng-loop em{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);padding:0 12px;background:var(--pale);font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);white-space:nowrap}
.h2-eng-pulse.v4{position:absolute;z-index:2;width:12px;height:12px;border-radius:50%;background:var(--elec);box-shadow:0 0 0 4px rgba(5,32,245,.18);left:calc(30px + 20px);top:19px;animation:h2engLoop4 8s linear infinite}
@keyframes h2engLoop4{
  0%{left:calc(30px + 20px);top:19px}
  14%{left:calc(30px + 20px + 1 * (var(--cw) + var(--g)));top:19px}
  28%{left:calc(30px + 20px + 2 * (var(--cw) + var(--g)));top:19px}
  42%{left:calc(30px + 20px + 3 * (var(--cw) + var(--g)));top:19px}
  50%{left:calc(100% - 6px);top:19px}
  58%{left:calc(100% - 6px);top:calc(100% - 6px)}
  86%{left:-6px;top:calc(100% - 6px)}
  94%{left:-6px;top:19px}
  100%{left:calc(30px + 20px);top:19px}}
@media (max-width:1000px){
  .h2-eng.v4{padding:0 0 10px}
  .h2-eng-flow{grid-template-columns:1fr;gap:34px}
  .h2-eng-flow li::before,.h2-eng-flow li::after,.h2-eng-loop,.h2-eng-pulse.v4{display:none}
}
@media (prefers-reduced-motion:reduce){.h2-eng-pulse.v4,.h2-eng-flow .h2-eng-n{animation:none}}

/* ═══ 7 SEP 2026 · PASS 7 (Bazil) ═════════════════════════════════════════ */
/* 111 · the AI loop is one return line under the diagram, not a frame */
.h2-eng-stage{position:relative;padding-bottom:64px}
.h2-eng-loop{position:absolute;left:calc(30px + 26px);width:calc(3 * (var(--cw) + var(--g)));top:auto;bottom:22px;height:0;border:0;border-top:1.5px dashed var(--hair2);border-radius:0}
.h2-eng-loop::before,.h2-eng-loop::after{content:"";position:absolute;top:-16px;height:16px;left:-1px;border-left:1.5px dashed var(--hair2);width:0}
.h2-eng-loop::after{left:auto;right:-1px;border-left:0;border-right:1.5px dashed var(--hair2)}
.h2-eng-loop em{bottom:auto;top:-9px;background:var(--pale)}
.h2-eng-pulse.v4{top:20px;left:calc(30px + 20px);animation:h2engLoop5 8s linear infinite}
@keyframes h2engLoop5{
  0%{left:calc(30px + 20px);top:20px;opacity:1}
  14%{left:calc(30px + 20px + 1 * (var(--cw) + var(--g)));top:20px}
  28%{left:calc(30px + 20px + 2 * (var(--cw) + var(--g)));top:20px}
  42%{left:calc(30px + 20px + 3 * (var(--cw) + var(--g)));top:20px;opacity:1}
  46%{left:calc(30px + 20px + 3 * (var(--cw) + var(--g)));top:20px;opacity:0}
  50%{left:calc(30px + 20px + 3 * (var(--cw) + var(--g)));top:calc(100% - 28px);opacity:0}
  54%{opacity:1}
  88%{left:calc(30px + 20px);top:calc(100% - 28px);opacity:1}
  92%{left:calc(30px + 20px);top:calc(100% - 28px);opacity:0}
  96%{left:calc(30px + 20px);top:20px;opacity:0}
  100%{left:calc(30px + 20px);top:20px;opacity:1}}
/* 112 · the close band, minimal */
.h2-meet-in.v3{display:grid;gap:22px}
.h2-meet-in.v3 .h2-mt-panel{margin:0;display:grid;gap:0}
.h2-meet-in.v3 .h2-mt-panel figcaption{margin-top:14px;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:start}
.h2-meet-in.v3 .h2-mt-ic{width:24px;height:24px;background:none;color:#8C9EFF;display:grid;place-items:center}
.h2-meet-in.v3 .h2-mt-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.h2-meet-in.v3 .h2-mt-panel figcaption b{display:block;font-family:"Montserrat",sans-serif;font-weight:500;font-size:17px;letter-spacing:-.01em;color:#fff}
.h2-meet-in.v3 .h2-mt-panel figcaption span span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.62)}
.h2-mt-leave{position:relative;margin-top:14px;padding-top:22px}
.h2-mt-leave::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.14)}
.h2-mt-write{position:absolute;left:0;top:0;height:1px;width:0;background:var(--elec);animation:h2mtWrite 6s var(--ease) infinite}
@keyframes h2mtWrite{0%{width:0;opacity:1}55%{width:100%;opacity:1}70%{width:100%;opacity:0}100%{width:0;opacity:0}}
.h2-meet-in.v3 .h2-mt-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 22px}
.h2-meet-in.v3 .h2-mt-item{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.45;color:#fff;animation:h2mtLit 6s var(--ease) infinite}
.h2-meet-in.v3 .h2-mt-item.i1{animation-delay:.9s}.h2-meet-in.v3 .h2-mt-item.i2{animation-delay:1.8s}
@keyframes h2mtLit{0%,14%,100%{color:#fff}18%{color:#8C9EFF}30%{color:#fff}}
.h2-meet-in.v3 .h2-mt-li{flex:none;width:22px;height:22px;display:grid;place-items:center;color:#8C9EFF;background:none;border:0;margin-top:1px}
.h2-meet-in.v3 .h2-mt-li svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.h2-meet-in.v3 .h2-mt-list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.h2-mt-write,.h2-meet-in.v3 .h2-mt-item{animation:none}}
/* 113 · 7 Sep 2026 (Bazil: "no icons in a shape"): the capability glyphs
   stand alone. No circle, no fill; the lit row colours the glyph. */
.h2-cap-ic,.h2-cap .h2-cap-ic,.h2-cap:hover .h2-cap-ic,.h2-cap:focus-visible .h2-cap-ic,.h2-cap.lit .h2-cap-ic{width:34px;height:34px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--elec)}
.h2-cap-ic svg{width:28px;height:28px;stroke-width:1.4}
.h2-cap.lit .h2-cap-ic svg,.h2-cap:hover .h2-cap-ic svg{transform:scale(1.08);transition:transform .35s var(--ease)}
.h2-cap{grid-template-columns:34px minmax(0,1fr);column-gap:18px}
/* 114 · 7 Sep 2026 (Bazil): the proof grid aligns to the pixel. The film
   column is exactly two tile columns plus the gap. Case tiles taller, the
   sector eyebrow readable on the photograph. */
.h2-proof-feat{--pg:clamp(16px,1.6vw,28px);grid-template-columns:calc((200% - var(--pg)) / 3) minmax(0,1fr);column-gap:var(--pg)}
.h2-proof-more{gap:var(--pg,clamp(16px,1.6vw,28px))}
.h2-case figure{aspect-ratio:4/3}
.h2-case figure img{height:100%}
.h2-case em{font-size:12px;letter-spacing:.18em;color:#fff;opacity:.92;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.h2-case b{text-shadow:0 1px 8px rgba(0,0,0,.35)}
.h2-case span{color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.h2-case::after{opacity:1}

/* 115 · 7 Sep 2026 (Bazil): AI stations carry a symbol beside the
   numeral, and each connector says what passes along it. */
.h2-eng-head{display:flex;align-items:center;gap:12px;height:52px;position:relative}
.h2-eng-sym{display:grid;place-items:center;width:34px;height:34px;color:var(--elec)}
.h2-eng-sym svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.h2-eng-flow li:not(:last-child)::after{left:calc(52px + 12px + 34px + 14px)}
.h2-eng-pass{position:absolute;right:calc(-1 * var(--g) / 2);top:-14px;transform:translateX(50%);font-style:normal;font-family:"Inter",sans-serif;font-weight:600;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);background:var(--pale);padding:0 6px;white-space:nowrap}
@media (max-width:1000px){.h2-eng-pass{display:none}}
/* 116 · the people title in three lines */
.h2-people .h2-h{font-size:clamp(34px,3.1vw,60px);max-width:17ch}
/* 117 · 7 Sep 2026 (Bazil): the trust heading is two lines, always */
.h2 .h2-trust h2{max-width:none;white-space:nowrap}
@media (max-width:900px){.h2 .h2-trust h2{white-space:normal}.h2-br{display:none}}
/* 118 · 7 Sep 2026 (Bazil: "day after go-live needs to be 1 line, it is
   blue"): an electric phrase inside any title never splits across lines.
   Under 640px the phrase may wrap again, the column is narrower than the
   words at the minimum title size. */
.h2 h1 em,.h2 h2 em,.h2 .h2-h em{white-space:nowrap}
@media (max-width:640px){.h2 h1 em,.h2 h2 em,.h2 .h2-h em{white-space:normal}}
/* 119 · 7 Sep 2026 (Bazil: "remove the excess line at the bottom"): the
   story guide runs glyph centre to glyph centre, one segment per row, so
   nothing hangs below the last glyph. The pulse runs the two segments in
   turn. */
.h2-story{--sg:clamp(24px,3.2vh,38px);gap:var(--sg)}
.h2-story::before,.h2-story::after{content:none}
.h2-story-r:not(:last-child)::before{content:"";position:absolute;left:21px;top:22px;height:calc(100% + var(--sg));width:0;border-left:1px dashed var(--hair2);border-radius:0;background:none;box-shadow:none;z-index:0}
.h2-story-r:not(:last-child)::after{content:"";position:absolute;left:18px;top:22px;width:7px;height:7px;border-radius:50%;background:var(--elec);opacity:0;animation:h2storySeg 5.5s var(--ease) infinite;z-index:3}
.h2-story-r:nth-child(2)::after{animation-delay:2.75s}
@keyframes h2storySeg{0%{top:22px;opacity:0}5%{opacity:1}45%{opacity:1}50%{top:calc(100% + var(--sg));opacity:0}100%{top:calc(100% + var(--sg));opacity:0}}
@media (prefers-reduced-motion:reduce){.h2-story-r::after{animation:none}}
/* 120 · 7 Sep 2026 (Bazil: "make taller"): the three case tiles at 4:3 */
.h2-case,.h2-proof-more .h2-case{aspect-ratio:4/3;min-height:0}
/* 121 · 7 Sep 2026 (Bazil: "make the flow"): the close visual as one flow.
   Captions centred under the frames, two rails merge into the hour, a stem
   runs to a bus, three drops land on the outcomes. Labels sit on the rails
   and mask them with the band colour. No plate, no circle behind glyphs. */
.h2-meet-in.v3.mtflow{gap:12px;--mtbg:var(--navy)}
.h2-meet-in.v3.mtflow .h2-mt-lb{text-align:center}
.h2-meet-in.v3.mtflow .h2-mt-row{gap:24px}
.h2-meet-in.v3.mtflow .h2-mt-panel figcaption{margin-top:12px;display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;row-gap:3px}
.h2-meet-in.v3.mtflow .h2-mt-panel figcaption b{font-size:16px}
.h2-meet-in.v3.mtflow .h2-mt-panel figcaption span{display:block;margin:0;font-size:13px;line-height:1.45;color:rgba(255,255,255,.6);max-width:24ch}
.h2-mt-merge{position:relative;height:clamp(120px,24cqw,150px);margin:2px 0 0}
.h2-mt-merge svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.h2-mt-rail{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.h2-mt-charge{fill:none;stroke:var(--elec);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.h2-mt-charge.c1{animation:h2mtC1 6s var(--ease) infinite}
.h2-mt-charge.c2{animation:h2mtC2 6s var(--ease) infinite}
.h2-mt-charge.c3{animation:h2mtC3 6s var(--ease) infinite}
@keyframes h2mtC1{0%{stroke-dashoffset:1;opacity:1}25%{stroke-dashoffset:0;opacity:1}62%{opacity:1}72%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes h2mtC2{0%,25%{stroke-dashoffset:1;opacity:1}40%{stroke-dashoffset:0;opacity:1}62%{opacity:1}72%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes h2mtC3{0%,40%{stroke-dashoffset:1;opacity:1}55%{stroke-dashoffset:0;opacity:1}62%{opacity:1}72%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
.h2-mt-hour,.h2-mt-bus{position:absolute;left:50%;transform:translate(-50%,-50%);padding:0 10px;background:var(--mtbg);font-family:"Inter",sans-serif;font-weight:600;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap;animation:h2mtLab 6s var(--ease) infinite}
.h2-mt-hour{top:40%}
.h2-mt-bus{top:72%;animation-delay:.9s}
@keyframes h2mtLab{0%,22%,100%{color:rgba(255,255,255,.55)}28%,62%{color:#8C9EFF}72%{color:rgba(255,255,255,.55)}}
.h2-meet-in.v3.mtflow .h2-mt-list{margin:0;gap:0 12px;grid-template-columns:repeat(3,minmax(0,1fr))}
.h2-meet-in.v3.mtflow .h2-mt-item{flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:13.5px;line-height:1.45}
.h2-meet-in.v3.mtflow .h2-mt-item span{max-width:15ch}
.h2-meet-in.v3.mtflow .h2-mt-item.i0{animation-delay:2.2s}.h2-meet-in.v3.mtflow .h2-mt-item.i1{animation-delay:2.35s}.h2-meet-in.v3.mtflow .h2-mt-item.i2{animation-delay:2.5s}
.h2-meet-in.v3.mtflow .h2-mt-li,.h2-meet-in.v3 .h2-mt-li{width:26px;height:26px;margin:0;border-radius:0;box-shadow:none;border:0;background:none;color:#8C9EFF}
.h2-meet-in.v3.mtflow .h2-mt-li svg{width:24px;height:24px}
@media (max-width:560px){.h2-meet-in.v3.mtflow .h2-mt-list{grid-template-columns:repeat(3,minmax(0,1fr))}.h2-meet-in.v3.mtflow .h2-mt-item{font-size:12px}.h2-meet-in.v3.mtflow .h2-mt-item span{max-width:12ch}}
@media (prefers-reduced-motion:reduce){.h2-mt-charge,.h2-mt-hour,.h2-mt-bus{animation:none}.h2-mt-charge{stroke-dashoffset:0;opacity:.7}}
/* 122 · the close flow stacks. The class is mtflow, not flow: tp.css owns
   a global .flow (the method strip) that paints a panel and five columns. */
.h2-meet-in.v3.mtflow{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);justify-items:stretch}
/* 123 · "regulated manufacturing" on one line: the sectors title column
   takes the phrase at the largest size */
#sectors .h2-head{max-width:1000px}
#sectors .h2-h{max-width:none}
/* 124 · 7 Sep 2026 (Bazil): the hero picture sits a little further left and
   the white fade is lighter. */
@media (min-width:1001px){
  .h2-hero-shot{margin-left:calc(-1 * clamp(150px,24%,450px))}
  .h2-hero-shot::before{background:linear-gradient(90deg,#fff 0%,#fff 6%,rgba(255,255,255,.82) 14%,rgba(255,255,255,.58) 24%,rgba(255,255,255,.34) 35%,rgba(255,255,255,.14) 46%,rgba(255,255,255,.04) 55%,rgba(255,255,255,0) 62%)}
}
/* 125 · no pulse dot on the story guide */
.h2-story-r:not(:last-child)::after{content:none}
/* 126 · 7 Sep 2026 (Bazil): the close outcomes in one hairline frame; the
   glyphs carry no ring, square or animation of their own. */
.h2-mt-merge{height:clamp(84px,16cqw,104px)}
.h2-mt-hour{top:40%}
.h2-mt-box{position:relative;border:1px solid rgba(255,255,255,.2);padding:24px 12px 18px;margin-top:-1px}
.h2-mt-boxdraw{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none}
.h2-mt-bus{top:0;left:50%;transform:translate(-50%,-50%)}
.h2-meet-in.v3.mtflow .h2-mt-item i,.h2-meet-in.v3.mtflow .h2-mt-li{box-shadow:none;animation:none;border-radius:0;border:0;background:none;width:26px;height:26px}
/* 127 · the stem meets the frame */
.h2-mt-box{margin-top:-13px}

/* 7 Sep 2026 · actions for the four objects added for About: the peak's
   marker waves, the badge lifts, the cycle turns a third (three identical
   nodes, so the loop restart is invisible), the shield blinks */
.tp-iso[data-k="peak"] .tp-act{transform-origin:0 100%;animation:tpAcWave 7s ease-in-out infinite}
@keyframes tpAcWave{0%,58%,100%{transform:skewY(0)}64%{transform:skewY(-7deg)}72%{transform:skewY(5deg)}80%{transform:skewY(-3deg)}88%{transform:skewY(0)}}
.tp-iso[data-k="badge"] .tp-act{animation:tpAcLift 7s ease-in-out infinite}
.tp-iso[data-k="cycle"] .tp-act{transform-origin:50% 50%;animation:tpAcTurn 7s ease-in-out infinite}
@keyframes tpAcTurn{0%,52%{transform:rotate(0)}70%,100%{transform:rotate(120deg)}}
.tp-iso[data-k="shield"] .tp-act{animation:tpAcBlink 7s ease-in-out infinite}

/* ═══ 7 SEP 2026 · HERO FADE, BALANCED (Bazil: "the transition is too fast") ═
   The photograph dissolves across three fifths of its width on an eased
   curve: solid white under the copy, a long soft middle, full colour only
   in the last third. No band where the picture suddenly switches on. */
.h2-hero-shot::before{background:linear-gradient(90deg,
  #fff 0%,rgba(255,255,255,.99) 8%,rgba(255,255,255,.96) 15%,rgba(255,255,255,.9) 22%,
  rgba(255,255,255,.8) 29%,rgba(255,255,255,.67) 36%,rgba(255,255,255,.52) 43%,
  rgba(255,255,255,.37) 50%,rgba(255,255,255,.23) 57%,rgba(255,255,255,.12) 64%,
  rgba(255,255,255,.05) 71%,rgba(255,255,255,.01) 78%,rgba(255,255,255,0) 86%)}
@media (max-width:1000px){.h2-hero-shot::before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.8) 12%,rgba(255,255,255,.4) 24%,rgba(255,255,255,.1) 36%,rgba(255,255,255,0) 48%)}}

/* ═══ 7 SEP 2026 · HERO FADE, LESS WHITE (Bazil: "too much white") ════════
   Same eased run, the white pulled down through the middle so the
   photograph shows through sooner; only the strip under the copy stays
   solid. */
.h2-hero-shot::before{background:linear-gradient(90deg,
  #fff 0%,rgba(255,255,255,.97) 6%,rgba(255,255,255,.88) 12%,rgba(255,255,255,.72) 18%,
  rgba(255,255,255,.54) 25%,rgba(255,255,255,.38) 32%,rgba(255,255,255,.24) 40%,
  rgba(255,255,255,.13) 48%,rgba(255,255,255,.06) 56%,rgba(255,255,255,.02) 64%,rgba(255,255,255,0) 72%)}


/* ═══ 7 SEP 2026 · PASS 18 (Bazil) ═══════════════════════════════════════ */
/* 1 · the capability composition */
.h2-capnet{position:relative;aspect-ratio:1000/520;min-height:0;height:auto}
.h2-capnet svg{width:100%;height:auto;display:block;overflow:visible}
.h2-cn-l{stroke:rgba(5,32,245,.22);stroke-width:2;transition:stroke .4s}
.h2-cn-link.lit .h2-cn-l{stroke:rgba(5,32,245,.6)}
.h2-cn-p{stroke:var(--elec);stroke-width:3;stroke-linecap:round;stroke-dasharray:.2 1;animation:h2cnPulse 3.5s cubic-bezier(.45,0,.4,1) infinite}
@keyframes h2cnPulse{0%{stroke-dashoffset:1.2;opacity:0}10%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:-.2;opacity:0}}
.h2-cn-core{fill:#fff;stroke:rgba(5,32,245,.35);stroke-width:1.6;filter:drop-shadow(0 18px 40px rgba(6,21,106,.14))}
.h2-cn-core-t{font-family:"Montserrat",sans-serif;font-size:18px;font-weight:500;fill:var(--navy)}
.h2-cn-node circle{fill:#fff;stroke:rgba(5,32,245,.28);stroke-width:1.6;transition:stroke .35s,filter .35s;filter:drop-shadow(0 10px 22px rgba(6,21,106,.1))}
.h2-cn-node.lit circle{stroke:var(--elec);stroke-width:2.4;filter:drop-shadow(0 14px 30px rgba(5,32,245,.28))}
.h2-cn-node .tp-iso{overflow:visible}
.h2-capnet .h2-capcap{position:absolute;left:0;bottom:-6px;max-width:34ch}
#capabilities .h2-eco-stage{min-height:0;height:auto;align-self:center}
@media (max-width:1000px){#capabilities .h2-eco-stage{height:auto}.h2-capnet .h2-capcap{position:static;margin-top:10px}}
/* 2 · AI stations: one object per station in one frame size */
.h2-eng.v4 .h2-eng-obj{display:grid;place-items:center;height:132px;margin:8px 0 14px}
.h2-eng.v4 .h2-eng-obj svg{width:104px;height:104px;display:block}
.h2-eng.v4 .h2-eng-demo{display:none}
/* 3 · sector labels: the object at the left of the words, one word size on every tile */
.h2-tile-lab{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
.h2-tile-ic,.h2-tile.lead .h2-tile-ic{grid-column:1;grid-row:1 / span 2;width:72px;height:72px;margin:0}
.h2-tile-lab b,.h2-tile-lab > span{grid-column:2}
.h2-tile-lab b,.h2-tile.lead .h2-tile-lab b{font-size:clamp(17px,1.35vw,20px);line-height:1.15}
.h2-tile-lab > span{font-size:13px;margin-top:4px}
/* 4 · the case tiles: a navy foot so the words hold on any frame */
.h2-case::after{background:linear-gradient(180deg,rgba(14,27,48,0) 28%,rgba(14,27,48,.52) 58%,rgba(14,27,48,.9) 100%)}
/* 5 · the people photograph runs the height of the roster */
.h2-people-grid{align-items:stretch}
.h2-people-shot{aspect-ratio:auto;height:100%;min-height:420px}

/* 6 · sector labels, the object really at the left: the generic child rule
   had put the object into column 2 with the words */
.h2-tile-lab > span.h2-tile-ic,.h2-tile.lead .h2-tile-lab > span.h2-tile-ic{grid-column:1;grid-row:1 / span 2}
.h2-tile-lab > span:not(.h2-tile-ic){grid-column:2}
/* 7 · FAQ: the big question mark at the left */
.h2-faq{display:grid;grid-template-columns:clamp(160px,18vw,260px) minmax(0,1fr);column-gap:clamp(20px,3vw,48px);align-items:start}
.h2-faq > *:not(.h2-faq-q){grid-column:2}
.h2-faq-q{grid-column:1;grid-row:1 / span 20;position:sticky;top:120px;display:grid;place-items:center;aspect-ratio:1;
  font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(150px,16vw,240px);line-height:1;color:var(--elec);
  background:radial-gradient(circle,rgba(5,32,245,.14) 1.6px,transparent 1.8px) 0 0/12px 12px;border-radius:50%}
.h2-faq-q span{transform:translateY(-4%)}
@media (max-width:900px){.h2-faq{grid-template-columns:1fr}.h2-faq-q{display:none}}
/* 8 · the close: both frames at one height, no rails, no frame, objects on the outcomes */
.h2-meet-in.v3 .h2-mt-screen{aspect-ratio:16/10;height:auto}
.h2-meet-in.v3 .h2-mt-merge svg,.h2-meet-in.v3 .h2-mt-boxdraw{display:none}
.h2-meet-in.v3 .h2-mt-merge{height:auto;padding:clamp(18px,2.6vh,28px) 0 0;text-align:center}
.h2-meet-in.v3 .h2-mt-hour{position:static;display:inline-block;transform:none}
.h2-meet-in.v3 .h2-mt-box{border:0;box-shadow:none;padding:clamp(14px,2vh,22px) 0 0}
.h2-meet-in.v3 .h2-mt-bus{position:static;transform:none;display:block;text-align:center;margin-bottom:14px}
.h2-meet-in.v3 .h2-mt-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.h2-meet-in.v3 .h2-mt-item{display:grid;justify-items:center;text-align:center;gap:8px}
.h2-mt-obj{width:76px;height:76px;display:block}
.h2-mt-obj svg{width:100%;height:100%;display:block}
.h2-meet-in.v3 .h2-mt-item span{font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.86);max-width:20ch}
/* 9 · the capability caption sits under the composition, not on a node */
.h2-capnet .h2-capcap{position:static;margin:14px auto 0;max-width:40ch;text-align:center}
.h2-capnet .h2-capcap b,.h2-capnet .h2-capcap span,.h2-capnet .h2-capcap i{display:block}
/* 10 · the close outcomes stack: object above the words */
.h2-meet-in.v3 .h2-mt-item{grid-template-columns:1fr!important;row-gap:10px}

/* ═══ 7 SEP 2026 · THE LOADER, IN DOTS (Bazil: "better loading screen") ═══
   The screen is the dot field: the wordmark assembles from dots scattered
   across the whole viewport, the counter runs beneath, and the screen
   lifts away. The old frame, ink and line rules are inert without their
   markup. */
#tpLoader{position:fixed;inset:0;z-index:99990;background:#F6F8FC;display:block;
  transition:transform .8s cubic-bezier(.7,0,.2,1)}
#tpLoader.done{transform:translateY(-101%)}
#tpLoader.gone{display:none}
#tpLoader .tpl-dots{position:absolute;inset:0;display:block}
#tpLoader .tpl-foot{position:absolute;left:50%;top:calc(46% + clamp(40px,5vw,70px));transform:translateX(-50%);
  display:flex;align-items:baseline;gap:clamp(18px,3vw,40px);white-space:nowrap}
#tpLoader .tpl-sub{font-family:"Inter",sans-serif;font-weight:600;font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#5A6684}
#tpLoader .tpl-ct{font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;color:#0520F5;font-variant-numeric:tabular-nums}

.tp-iso[data-k="handshake"] .tp-act{animation:tpAcLift 7s ease-in-out infinite}

/* ═══ 8 SEP 2026 · THE HANDSHAKE, CHOREOGRAPHED (Bazil: "should just be hands
   shaking", "fun and awesome"). 7s cycle. 0-14%: the two hands come in from
   each side and meet. 20-42%: three pumps of the clasp with a burst of
   sparks. Then settle and rest until the next round. */
.tp-iso[data-k="handshake"] .tp-act{animation:none}
.tp-iso[data-k="handshake"] .hs-side{transform-box:fill-box}
.tp-iso[data-k="handshake"] .hs-left{animation:hsMeetL 7s cubic-bezier(.4,0,.2,1) infinite}
.tp-iso[data-k="handshake"] .hs-right{animation:hsMeetR 7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes hsMeetL{0%{transform:translateX(-5px)}14%,66%{transform:translateX(0)}78%,100%{transform:translateX(-5px)}}
@keyframes hsMeetR{0%{transform:translateX(5px)}14%,66%{transform:translateX(0)}78%,100%{transform:translateX(5px)}}
.tp-iso[data-k="handshake"] .hs-shake{transform-box:fill-box;transform-origin:50% 60%;animation:hsPump 7s ease-in-out infinite}
@keyframes hsPump{0%,18%{transform:translateY(0) rotate(0)}21%{transform:translateY(-2.6px) rotate(-2.5deg)}25%{transform:translateY(1.2px) rotate(1.5deg)}29%{transform:translateY(-2.6px) rotate(-2.5deg)}33%{transform:translateY(1.2px) rotate(1.5deg)}37%{transform:translateY(-2.6px) rotate(-2.5deg)}43%,100%{transform:translateY(0) rotate(0)}}
.tp-iso[data-k="handshake"] .hs-sp{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:hsSpark 7s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes hsSpark{0%,19%{opacity:0;transform:translate(0,0) scale(.2)}22%{opacity:1;transform:translate(calc(var(--dx) * .35),calc(var(--dy) * .35)) scale(1)}40%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.5)}100%{opacity:0;transform:translate(0,0) scale(.2)}}
.tp-iso[data-k="handshake"] .hs-sp.s0{--dx:-9px;--dy:-7px}.tp-iso[data-k="handshake"] .hs-sp.s1{--dx:8px;--dy:-9px}.tp-iso[data-k="handshake"] .hs-sp.s2{--dx:-4px;--dy:-13px}
.tp-iso[data-k="handshake"] .hs-sp.s3{--dx:6px;--dy:-14px}.tp-iso[data-k="handshake"] .hs-sp.s4{--dx:-12px;--dy:-2px}.tp-iso[data-k="handshake"] .hs-sp.s5{--dx:11px;--dy:-3px}
.tp-iso[data-k="handshake"] .hs-sp.s1,.tp-iso[data-k="handshake"] .hs-sp.s3{animation-delay:.16s}
.tp-iso[data-k="handshake"] .hs-sp.s4,.tp-iso[data-k="handshake"] .hs-sp.s5{animation-delay:.32s}
@media (prefers-reduced-motion:reduce){.tp-iso[data-k="handshake"] *{animation:none!important}}

/* ═══ 8 SEP 2026 · REVIEW PASS 21 (Bazil) ════════════════════════════════ */
/* 130 · FAQ: the question mark beside the title, the questions take the full
   width ("on the left of the FAQ title instead, do not take the left space") */
.h2-faq{display:block}
.h2-faq > *:not(.h2-faq-q){grid-column:auto}
.h2-faq-head.faqhd2{display:flex;align-items:center;gap:clamp(16px,2vw,28px);margin-bottom:6px}
.h2-faq-head.faqhd2 .h2-faq-q{position:static;grid-row:auto;grid-column:auto;display:grid;place-items:center;width:clamp(72px,6vw,96px);height:clamp(72px,6vw,96px);aspect-ratio:1;flex:none;font-size:clamp(40px,3.4vw,54px);top:auto}
.h2-faq-head.faqhd2 .h2-faq-q span{font-size:inherit}
@media (max-width:900px){.h2-faq-head.faqhd2 .h2-faq-q{display:grid;width:60px;height:60px;font-size:34px}}

/* 131 · close band: the three outcomes as flat glyphs that say what they
   are (a route with its ends, the AI spark, the written page) and the three
   stages numbered 1, 2, 3 so the band reads as a process ("process and icons
   that relate are better than these 3D ones") */
.h2-mt-fl{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 12px}
.h2-mt-fl svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.h2-mt-fl svg circle{fill:var(--elec);stroke:none}
.h2-mt-lb b,.h2-mt-hour b,.h2-mt-bus b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--elec);color:#fff;
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:0;margin-right:10px;vertical-align:middle;position:relative;top:-1px}

/* 132 · AI band: number and icon in one capsule, the connectors dotted and
   electric with a head, the pass label sitting on the line, the pulse with
   a glow ("numbers and icon in the same container", "improve the line design
   and transfer so it is premium") */
.h2-eng.v4 .h2-eng-head{position:static;display:inline-flex;align-items:center;gap:10px;height:56px;padding:4px 18px 4px 4px;border-radius:999px;background:#fff;
  border:1px solid rgba(5,32,245,.22);box-shadow:0 10px 24px -16px rgba(6,21,106,.4)}
.h2-eng.v4 .h2-eng-n{width:46px;height:46px;font-size:17px;margin:0}
.h2-eng.v4 .h2-eng-sym{width:30px;height:30px}
.h2-eng.v4 .h2-eng-sym svg{width:26px;height:26px}
.h2-eng.v4 .h2-eng-flow li:not(:last-child)::after{left:126px;right:calc(-1 * var(--g) + 12px);top:27px;height:0;background:none;border-top:2px dotted rgba(5,32,245,.42)}
.h2-eng.v4 .h2-eng-flow li:not(:last-child)::before{top:22.5px;right:calc(-1 * var(--g) + 8px);width:0;height:0;border:0;border-left:8px solid var(--elec);border-top:5px solid transparent;border-bottom:5px solid transparent;transform:none;opacity:.9}
.h2-eng.v4 .h2-eng-pass{top:19px;right:calc(-1 * var(--g) / 2);transform:translateX(50%);padding:2px 9px;background:var(--pale);border-radius:999px;line-height:14px;font-size:10.5px;letter-spacing:.14em;color:var(--elec);white-space:nowrap}
.h2-eng.v4 .h2-eng-pulse{width:14px;height:14px;top:21px;box-shadow:0 0 0 5px rgba(5,32,245,.16),0 0 18px rgba(5,32,245,.55)}
.h2-eng.v4 .h2-eng-loop{border-top-color:rgba(5,32,245,.34)}
.h2-eng.v4 .h2-eng-loop::before,.h2-eng.v4 .h2-eng-loop::after{border-color:rgba(5,32,245,.34)}
.h2-eng.v4 .h2-eng-loop em{color:var(--elec)}
@media (max-width:1000px){.h2-eng.v4 .h2-eng-head{position:relative}}
/* 132b · the capsule is a grid item: it must not stretch to the column */
.h2-eng.v4 .h2-eng-head{justify-self:start}
/* 132c · the pass label sits on the line before the head, never over the
   next capsule; the pulse runs capsule edge to arrowhead, hidden while it
   passes through a station, then down and back along the loop */
.h2-eng.v4 .h2-eng-pass{right:calc(-1 * var(--g) + 28px);transform:none}
.h2-eng.v4 .h2-eng-pulse{animation:h2engLoop6 8s linear infinite}
@keyframes h2engLoop6{
  0%{left:calc(30px + 120px);top:21px;opacity:1}
  12%{left:calc(30px + 1 * (var(--cw) + var(--g)) - 22px);top:21px;opacity:1}
  12.5%{opacity:0}
  14%{left:calc(30px + 120px + 1 * (var(--cw) + var(--g)));top:21px;opacity:0}
  14.5%{opacity:1}
  26%{left:calc(30px + 2 * (var(--cw) + var(--g)) - 22px);top:21px;opacity:1}
  26.5%{opacity:0}
  28%{left:calc(30px + 120px + 2 * (var(--cw) + var(--g)));top:21px;opacity:0}
  28.5%{opacity:1}
  40%{left:calc(30px + 3 * (var(--cw) + var(--g)) - 22px);top:21px;opacity:1}
  40.5%{opacity:0}
  42%{left:calc(30px + 20px + 3 * (var(--cw) + var(--g)));top:21px;opacity:0}
  50%{left:calc(30px + 20px + 3 * (var(--cw) + var(--g)));top:calc(100% - 28px);opacity:0}
  54%{opacity:1}
  88%{left:calc(30px + 20px);top:calc(100% - 28px);opacity:1}
  92%{left:calc(30px + 20px);top:calc(100% - 28px);opacity:0}
  96%{left:calc(30px + 120px);top:21px;opacity:0}
  100%{left:calc(30px + 120px);top:21px;opacity:1}}
/* 133 · no curved corners (Bazil): the AI band capsule, its number and the
   pass label are square; the close band stage numbers too */
.h2-eng.v4 .h2-eng-head,.h2-eng.v4 .h2-eng-n,.h2-eng.v4 .h2-eng-pass{border-radius:0}
.h2-eng.v4 .h2-eng-n::before,.h2-eng.v4 .h2-eng-n::after{border-radius:0}
.h2-mt-lb b,.h2-mt-hour b,.h2-mt-bus b{border-radius:0}
/* 134. 8 Sep 2026, the capability cloud is back (Bazil): the canvas fills the stage, the caption
   sits at its foot, and a line the cloud has chosen reads exactly like a hovered one. */
#capabilities .h2-eco-stage.h2-cloud{aspect-ratio:1/.86;min-height:360px;height:auto;position:relative;align-self:center}   /* the id rule above (min-height 0, height auto) outranked a class pair */
.h2-eco-stage.h2-cloud>canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab;touch-action:pan-y}
.h2-eco-stage.h2-cloud>canvas:active{cursor:grabbing}
.h2-eco-stage.h2-cloud::after{top:50%;width:70%}
.h2-cap.lit{background:var(--pale);padding-left:30px}
.h2-cap.lit::before{transform:scaleY(1)}
.h2-cap.lit i{opacity:1;transform:translateX(0)}
@media(max-width:900px){#capabilities .h2-eco-stage.h2-cloud{aspect-ratio:1/.8;min-height:320px;height:auto}}

/* ═══ 9 SEP 2026 · CAPABILITY DIAGRAMS (Bazil: "what is s4hana, is there
   nothing better to represent the shape and the work of it and also the
   validation. process, structure, build representation, go all out") ═══
   The point cloud is retired. Each capability is a built diagram on a
   1000x860 stage: the S/4HANA data-model collapse, the model inside the
   ERP, the plant-to-enterprise genealogy thread, sources to a decision,
   and the GAMP5 V-model with its traceability matrix. Square corners. */
#capabilities .h2-eco-stage.h2-capviz{aspect-ratio:1000/860;min-height:0;height:auto;position:relative;align-self:center;display:grid;align-content:start}
.h2-capviz .cv-wrap{position:relative;width:100%}
.h2-capviz .cv{width:100%;height:auto;display:block;overflow:visible;animation:cvIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes cvIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.h2-capviz .h2-capcap{position:static;margin-top:6px;max-width:46ch}

/* type inside a diagram */
.cv-t{font-family:"Montserrat",sans-serif;font-weight:500;font-size:26px;letter-spacing:-.02em;fill:var(--ink)}
.cv-t.sm{font-size:19px}
.cv-t.on{fill:#fff}
.cv-t.onNavy{fill:#fff}
.cv-lab{font-family:"Inter",sans-serif;font-weight:600;font-weight:700;font-size:13px;letter-spacing:.14em;fill:var(--faint)}
.cv-lab.on,.cv-lab.onNavy{fill:rgba(255,255,255,.72)}
.cv-rank{font-family:"Inter",sans-serif;font-weight:600;font-weight:700;font-size:13px;fill:var(--elec)}
.cv-rank.onNavy{fill:rgba(255,255,255,.7)}

/* shared parts */
.cv-box{fill:#fff;stroke:rgba(5,32,245,.26);stroke-width:1.4}
.cv-box.on{fill:var(--navy);stroke:none}
.cv-core-r{fill:var(--elec);stroke:none}
.cv-core-hair{stroke:rgba(255,255,255,.34);stroke-width:1.2;fill:none}
.cv-core-n{font-family:"Inter",sans-serif;font-weight:600;font-weight:700;font-size:15px;fill:rgba(255,255,255,.86)}
.cv-found{fill:var(--navy)}
.cv-line{fill:none;stroke:rgba(5,32,245,.4);stroke-width:1.6}
.cv-line.dash{stroke-dasharray:5 6}
.cv-rule{fill:none;stroke:var(--hair2);stroke-width:2}
.cv-rule.on{stroke:var(--elec)}
.cv-dot{fill:var(--elec)}
.cv-dot.alt{fill:var(--navy)}
.cv-gate{fill:#fff;stroke:var(--elec);stroke-width:1.5}
.cv-check{fill:none;stroke:var(--elec);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cv-bound{fill:rgba(5,32,245,.04);stroke:rgba(5,32,245,.34);stroke-width:1.5;stroke-dasharray:7 7}

/* 1 · the legacy tables collapsing into one core */
.cv-tbl-r{fill:#fff;stroke:rgba(6,21,106,.24);stroke-width:1.3}
.cv-tbl-l{stroke:rgba(6,21,106,.16);stroke-width:1.2;fill:none}
.cv-tbl-t{font-family:"Inter",sans-serif;font-weight:600;font-weight:700;font-size:12px;fill:var(--soft)}
.cv-tbl{animation:cvCollapse 9s cubic-bezier(.55,0,.35,1) infinite;animation-delay:calc(var(--i) * .28s);transform-box:view-box}
@keyframes cvCollapse{
  0%,42%{transform:none;opacity:1}
  62%,84%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0}
  86%,100%{transform:none;opacity:1}}

/* 2 · the model inside the boundary */
.cv-ai-ring{fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.4;stroke-dasharray:6 7;animation:cvSpinDash 6s linear infinite}
@keyframes cvSpinDash{to{stroke-dashoffset:-104}}

/* 3 · the plant lane, the rising records, the genealogy thread */
.cv-lane{stroke:var(--hair2);stroke-width:3;fill:none}
.cv-thread{stroke:var(--elec);stroke-width:2;fill:none;opacity:.5}
.cv-rec{fill:var(--elec);animation:cvRise 7s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--i) * 1.5s)}
@keyframes cvRise{0%,6%{transform:none;opacity:0}10%{opacity:1}44%{transform:translateY(-285px);opacity:1}52%,100%{transform:translateY(-285px);opacity:0}}

/* 4 · nothing extra: the sources use the shared line and dot */

/* 5 · the V-model, its signatures and the matrix */
.cv-v{fill:none;stroke:rgba(5,32,245,.34);stroke-width:2}
.cv-trace{fill:none;stroke:rgba(5,32,245,.3);stroke-width:1.4;stroke-dasharray:4 7}
.cv-sign{animation:cvSign 6s ease-out infinite;animation-delay:calc(var(--i) * .5s);transform-box:view-box;opacity:0}
@keyframes cvSign{0%,8%{opacity:0;transform:scale(.6)}16%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
.cv-cell{fill:rgba(5,32,245,.09);animation:cvFill 8s ease-out infinite;animation-delay:calc(var(--i) * .12s)}
@keyframes cvFill{0%,4%{fill:rgba(5,32,245,.09)}14%,86%{fill:var(--elec)}96%,100%{fill:rgba(5,32,245,.09)}}

@media (prefers-reduced-motion:reduce){
  .h2-capviz .cv,.cv-tbl,.cv-rec,.cv-sign,.cv-cell,.cv-ai-ring{animation:none}
  .cv-sign{opacity:1}
}
@media (max-width:1000px){
  /* the viewBox already scales every glyph with the stage: bumping the font
     size here overran the boxes the labels sit in (measured at 390) */
  #capabilities .h2-eco-stage.h2-capviz{order:2}
}

/* ═══ 9 SEP 2026 · REVIEW BATCH (Bazil) ═══════════════════════════════════ */

/* 135 · the objects act, but nothing zooms (Bazil: "all need to animate",
   "don't zoom in zoom out, not professional"). The float and the breathing
   shadow were the zoom: they are off. Each object's own action stays and
   now runs on a shorter cycle so it is visibly alive at a glance. */
.tp-iso .tp-iso-g{animation:none}
.tp-iso .tp-iso-sh{animation:none;opacity:.2}
.tp-iso{animation:none}
.tp-iso .tp-act{animation-duration:4.2s}

/* 136 · sector tiles: the title sits on its line (Bazil: "the title should be
   closer to the description"), and the lead tile's object is the biggest */
.h2-tile-lab > span:not(.h2-tile-ic){margin-top:4px}
.h2-tile-lab b{margin-bottom:0}
.h2-tile-ic,.h2-tile.lead .h2-tile-ic{width:76px;height:76px}
.h2-tile.lead .h2-tile-ic{width:108px;height:108px}

/* 137 · the journey rail runs electric, and a little shorter (Bazil) */
.h2-rail{background:linear-gradient(90deg,rgba(5,32,245,.42) 0,rgba(5,32,245,.42) 100%);
  margin-left:2.5%;margin-right:2.5%}

/* 138 · the proof story: the numeral is a block, not a dotted prefix, and it
   sits tight to its label (Bazil: "don't put a dot after the number, make it
   a bit closer"). The guide between rows is shorter. */
.h2-story-r em{display:flex;align-items:center;gap:8px}
.h2-story-r em b{display:inline-grid;place-items:center;width:19px;height:19px;background:var(--elec);color:#fff;
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:11px;letter-spacing:0;line-height:1}
.h2-story-r em{margin-bottom:2px}
.h2-story-r:not(:last-child)::before{top:30px;height:calc(100% + var(--sg) - 22px)}

/* 139 · the close band gets its flow back (Bazil: "why the bad overlapping
   design, isn't this worse than the flow we had"). Stage 2 had lost its
   rails in pass 18, so its label sat directly on stage 3's. The merge rails
   and the outcome frame are restored, and the three stages are spaced. */
.h2-meet-in.v3 .h2-mt-merge svg,.h2-meet-in.v3 .h2-mt-boxdraw{display:block}
.h2-meet-in.v3 .h2-mt-merge{height:clamp(96px,17cqw,124px);padding:0;text-align:left;position:relative}
.h2-meet-in.v3 .h2-mt-hour{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;
  background:var(--navy);padding:6px 14px;white-space:nowrap}
.h2-meet-in.v3 .h2-mt-box{border:1px solid rgba(255,255,255,.22);box-shadow:none;padding:30px 16px 20px;margin-top:0;position:relative}
.h2-meet-in.v3 .h2-mt-bus{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;
  background:var(--navy);padding:5px 13px;margin:0;white-space:nowrap}
.h2-mt-lb{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px}

/* 140 · one premium hover for anything clickable (Bazil: "a certain effect
   should be there, premium, when hovering on something clickable"): a short
   lift, a shadow that appears from nothing, and the electric accent. Square
   corners, no scale, so it never reads as a zoom. */
.h2-cap,.h2-tile,.h2-case,.h2-person,.h2-fq summary,.h2-city{
  transition:transform .34s cubic-bezier(.2,.7,.2,1),box-shadow .34s cubic-bezier(.2,.7,.2,1),color .24s ease}
.h2-cap:hover,.h2-case:hover,.h2-city:hover{transform:translateY(-3px);box-shadow:0 22px 44px -30px rgba(6,21,106,.5)}
.h2-tile:hover{transform:translateY(-4px);box-shadow:0 28px 54px -32px rgba(6,21,106,.55)}
.h2-cap:hover b,.h2-case:hover b{color:var(--elec)}
.h2-cap:focus-visible,.h2-tile:focus-visible,.h2-case:focus-visible{outline:2px solid var(--elec);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.h2-cap,.h2-tile,.h2-case,.h2-person,.h2-city{transition:none}}

/* 141 · the capabilities stage is WebGL (Bazil: "OpenGL 3D focusing clarity,
   process of each"). The flat diagram rules above stay for lib/capViz.jsx,
   which now serves the deeper pages. */
#capabilities .h2-eco-stage.h2-capgl{aspect-ratio:1/.86;min-height:380px;height:auto;position:relative;align-self:center;display:block}
.h2-capgl > canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.h2-capgl .h2-capcap{position:absolute;left:0;right:0;bottom:-2px;max-width:44ch}
@media (max-width:1000px){
  #capabilities .h2-eco-stage.h2-capgl{order:2;aspect-ratio:1/.8;min-height:320px}
  .h2-capgl .h2-capcap{position:static;margin-top:12px;max-width:none}
}

/* 142 · the capability list starts right under the heading (Bazil: "close to
   the top please"). It sat in the grid's second row carrying its own
   margin-top on top of the heading's margin-bottom, which stacked to about
   100px; the heading keeps a tighter margin in this band only. */
#capabilities .h2-head{margin-bottom:clamp(14px,1.8vh,24px)}
#capabilities .h2-caps{margin-top:0}
@media (max-width:1000px){#capabilities .h2-caps{margin-top:clamp(14px,2vh,22px)}}

/* 143 · the visual takes the whole right column (Bazil: "that's the whole
   visual space"): the stage stretches the full height of the band beside the
   list instead of floating at a fixed aspect in the middle of it. */
#capabilities .h2-eco-stage.h2-cloud{aspect-ratio:auto;height:100%;min-height:clamp(520px,52vh,760px);align-self:stretch}
#capabilities .h2-eco-stage.h2-cloud > canvas{inset:0 0 96px 0;height:auto!important}
.h2-capgl .h2-capcap,.h2-cloud .h2-capcap{bottom:0}
@media (max-width:1000px){
  #capabilities .h2-eco-stage.h2-cloud{height:auto;min-height:340px;aspect-ratio:1/.8}
  #capabilities .h2-eco-stage.h2-cloud > canvas{inset:0;height:100%!important}
}

/* ── 144 · line breaking. 9 Sep 2026 (Bazil: "match the lines correctly it feels
   like out of place like the one word next or the at the end"). Two faults were
   visible in the capability list and the AI band: a last line holding a single
   word ("next."), and a short function word stranded at the end of a line
   ("The", "the"). text-wrap:balance evens the line lengths across the block,
   which removes both. It is capped by the engine at a handful of lines, which
   is all these blocks ever run to. pretty is the fallback where balance is not
   supported: it only protects the last line, but that is the worse of the two
   faults. Titles get it too, so a two-word title never breaks 1 + 1. */
.h2-cap b,.h2-cap span,
.h2-eng-flow h3,.h2-eng-flow p,.h2-eng-note,
.h2-capcap b,.h2-capcap span{text-wrap:pretty}
@supports (text-wrap:balance){
  .h2-cap b,.h2-cap span,
  .h2-eng-flow h3,.h2-eng-flow p,
  .h2-capcap b,.h2-capcap span{text-wrap:balance}
}

/* ── 145 · the AI band showcase. 9 Sep 2026 (Bazil: "remove the 3d isometric
   icon it needs to be process showcase 3d visual showcase not just a 3d
   icon"). The four per-column icons are gone from the markup; one WebGL
   canvas now spans the whole flow above the four columns and carries a record
   through all four stages. It is sized here rather than in the module so the
   band keeps its rhythm when WebGL is unavailable and the canvas stays empty. */
.h2-eng-obj{display:none}
.h2-eng-gl{width:100%;height:clamp(200px,20vw,290px);margin:clamp(6px,1.4vh,16px) 0 clamp(10px,1.6vh,20px);
  position:relative;pointer-events:none}
.h2-eng-gl canvas{display:block;width:100%;height:100%}
@media (max-width:900px){ .h2-eng-gl{height:clamp(160px,30vw,220px)} }
@media (prefers-reduced-motion:reduce){ .h2-eng-gl{height:clamp(170px,19vw,230px)} }
/* the old 2D pulse is superseded by the record inside the 3D scene */
.h2-eng-pulse{display:none}


/* 10 Sep 2026 (QA audit): readability floor. Every label, chip, eyebrow and
   note whose final size sat under 11px now reads at 11px. Media overrides are
   restated inside their own query so the desktop size is untouched. */
.h2-cue,
.h2-hero-scroll,
.h2-cap i,
.h2-ai-step em,
.h2-person em,
.h2-pick em,
.h2-pick-t,
.h2-cap .h2-cap-ic,
.h2-person .h2-person-ic,
.h2-stop .h2-stop-n,
.h2-fact-ic,
.h2-eng-lb,
.h2-eng-return em,
.h2-eng-demo.d2 i,
.h2-eng.v4 .h2-eng-pass{font-size:11px}

/* 10 Sep 2026 (QA audit): the checklist tick pseudo from the retired close-band
   treatment was still painting over the three flat outcome glyphs (the reset
   at the v3 rewrite missed ::after), and the 52px centred icon slot for
   .h2-mt-fl lost to the same reset. */
.h2-meet-in.v3.mtflow .h2-mt-item i::after{content:none;animation:none}
.h2-meet-in.v3.mtflow .h2-mt-item i.h2-mt-fl{width:52px;height:52px;display:grid;place-items:center;overflow:visible}
.h2-meet-in.v3.mtflow .h2-mt-item i.h2-mt-fl svg{width:40px;height:40px}

/* 11 Sep 2026 (QA follow-up, phone pass): the capability caption runs to
   three lines at 390 and the canvas only reserved 96px for it, so the cloud
   drew through the words. The canvas now stops 140px above the stage foot on
   a phone and the caption takes the full width. */
@media (max-width:900px){#capabilities .h2-eco-stage.h2-cloud>canvas{inset:0 0 140px 0}.h2-cloud .h2-capcap{max-width:none}}
/* ... and on a phone the caption used to go static (rule at 1528), which put it
   at the TOP of the stage as the first in-flow child while the absolute canvas
   started at the same top edge. It stays pinned to the foot at every width. */
@media (max-width:1000px){.h2-cloud .h2-capcap{position:absolute;left:0;right:0;bottom:0;margin:0;max-width:none}}
/* the canvas height is fixed with !important further up, which made the
   bottom inset inert; on a phone the height is stated as the stage minus the
   caption band, so the inset and the height agree. */
@media (max-width:900px){#capabilities .h2-eco-stage.h2-cloud>canvas{height:calc(100% - 140px)!important}}

/* 11 Sep 2026 (Bazil: "too messy, all over the place, plan and fix, structure,
   vertical and horizontal spacing"). The close visual is ONE centred axis:
   step 1 above the two frames, a straight bracket from the two captions into
   step 2, a straight stem into step 3, and step 3 sitting on the top edge of
   one complete frame that holds the three outcomes. Every gap on the axis is
   from one scale (10, 14, 18, 24, 30). No curves, no partial edges. */
.h2-meet-in.h2-mt2{display:flex;flex-direction:column;align-items:center;width:min(100%,560px);gap:0}
.h2-mt2-cap{display:inline-flex;align-items:center;gap:10px;font-family:"Inter",sans-serif;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.68);white-space:nowrap}
.h2-mt2-cap b{display:inline-grid;place-items:center;width:22px;height:22px;background:var(--elec);color:#fff;font:700 12px/1 "Montserrat",sans-serif;border-radius:0}
.h2-mt2-row{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;width:100%;margin-top:18px}
.h2-mt2-panel{margin:0}
.h2-mt2-screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:rgba(255,255,255,.06)}
.h2-mt2-screen video{width:100%;height:100%;object-fit:cover;display:block}
.h2-mt2-live{position:absolute;top:10px;left:10px;width:8px;height:8px;border-radius:50%;background:#FF4D5E;box-shadow:0 0 0 3px rgba(255,77,94,.25)}
.h2-mt2-panel figcaption{margin-top:14px;display:grid;justify-items:center;text-align:center;row-gap:4px;min-height:78px}
.h2-mt2-panel figcaption i{display:block;width:20px;height:20px;color:var(--elec)}
.h2-mt2-panel figcaption i svg,.h2-mt2-box li i svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.h2-mt2-panel figcaption b{font-family:"Montserrat",sans-serif;font-weight:500;font-size:16px;letter-spacing:-.01em;color:#fff}
.h2-mt2-panel figcaption span{font-size:13px;line-height:1.45;color:rgba(255,255,255,.62);max-width:24ch}
/* the bracket: a tick down from each caption, one bar between the two frame
   centres, one stem from the bar's middle into step 2 */
.h2-mt2-bracket{position:relative;width:calc(50% + 12px);height:40px;margin-top:10px}
.h2-mt2-bracket::before{content:"";position:absolute;left:0;right:0;top:14px;border-top:1px dotted rgba(255,255,255,.42)}
.h2-mt2-bracket i{position:absolute;top:0;width:0;height:14px;border-left:1px dotted rgba(255,255,255,.42)}
.h2-mt2-bracket i:nth-child(1){left:0}
.h2-mt2-bracket i:nth-child(2){right:0}
.h2-mt2-bracket i:nth-child(3){left:50%;top:14px;height:26px;border-left-style:solid;border-left-color:rgba(5,32,245,.9)}
.h2-mt2-stem{width:0;height:30px;margin-top:10px;border-left:1px solid rgba(5,32,245,.9)}
.h2-mt2-box{position:relative;width:100%;margin-top:11px;border:1px solid rgba(255,255,255,.24);padding:36px 22px 28px;text-align:center}
.h2-mt2-box>.h2-mt2-cap{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);background:var(--navy);padding:0 12px}
.h2-mt2-box ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);column-gap:18px}
.h2-mt2-box li{display:grid;justify-items:center;row-gap:12px;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.88);max-width:18ch;margin:0 auto}
.h2-mt2-box li i{display:block;width:30px;height:30px;color:#fff}
/* one pulse runs the spine: down the bracket stem, then down the lower stem */
.h2-mt2-bracket i:nth-child(3)::after,.h2-mt2-stem::after{content:"";position:absolute;left:-2px;top:0;width:3px;height:9px;background:#fff;opacity:0;animation:h2mt2Run 3.2s linear infinite}
.h2-mt2-stem{position:relative}
.h2-mt2-stem::after{animation-delay:1.1s}
@keyframes h2mt2Run{0%{top:0;opacity:0}8%{opacity:1}30%{top:calc(100% - 9px);opacity:1}38%{opacity:0}100%{top:calc(100% - 9px);opacity:0}}
@media (max-width:640px){
  .h2-mt2-box ul{grid-template-columns:1fr;row-gap:14px}
  .h2-mt2-box li{grid-template-columns:30px 1fr;justify-items:start;text-align:left;column-gap:14px;align-items:center;max-width:none;margin:0}
  .h2-mt2-panel figcaption span{max-width:none}
}
@media (prefers-reduced-motion:reduce){.h2-mt2-bracket i:nth-child(3)::after,.h2-mt2-stem::after{animation:none}}
/* the phone rule at 1088 gave the close panel a fixed 300 to 420px height from
   the earlier diagram; the three-step axis is taller, so the band clipped the
   third outcome at 390. The panel takes its own height. */
@media (max-width:1100px){.h2-meet{height:auto}}

/* 11 Sep 2026 (Bazil: "must be part of the same diagram, maybe an isometric
   animation that makes sense"). The AI band's stage and its four numbered
   captions are one diagram now, so the pieces that kept them apart go:

   1 The canvas sits FLUSH on the capsules. The 14px margin under it was the
     gap the dotted drops could not cross; each drop now lands on the top edge
     of its own numeral.
   2 The return line was 28px to the right of the stations at both ends. It is
     positioned against the stage, which already sits inside the band's 30px
     padding, so `calc(30px + 26px)` counted that padding twice. The first
     numeral centre is 4px of capsule padding plus half of a 46px numeral, so
     27px is the true anchor, and three column pitches reach the fourth.
   3 The numeral carried its own 8s ping on a clock unrelated to the scene's
     9.2s journey. The scene now lights the caption of the station it is
     working at (`li.on`), so there is one clock and one reading order.       */
.h2-eng.v4 .h2-eng-gl{margin-bottom:0}
.h2-eng.v4 .h2-eng-loop{left:27px}
.h2-eng.v4 .h2-eng-flow .h2-eng-n{animation:none}
.h2-eng.v4 .h2-eng-flow li .h2-eng-head,
.h2-eng.v4 .h2-eng-flow li .h2-eng-n,
.h2-eng.v4 .h2-eng-flow li .h2-eng-st{transition:box-shadow .5s var(--e1),color .5s var(--e1)}
.h2-eng.v4 .h2-eng-flow li.on .h2-eng-n{box-shadow:0 0 0 5px rgba(5,32,245,.15)}
.h2-eng.v4 .h2-eng-flow li.on .h2-eng-head{box-shadow:0 10px 30px rgba(6,21,106,.12)}
.h2-eng.v4 .h2-eng-flow li .h2-eng-st{color:var(--faint)}
.h2-eng.v4 .h2-eng-flow li.on .h2-eng-st{color:var(--elec)}
/* below 1000px the captions stack in one column: the return line has nothing
   to run between, and the scene switches its drops off for the same reason */
@media (max-width:1000px){.h2-eng.v4 .h2-eng-loop{display:none}}
@media (prefers-reduced-motion:reduce){
  .h2-eng.v4 .h2-eng-flow li .h2-eng-head,
  .h2-eng.v4 .h2-eng-flow li .h2-eng-n,
  .h2-eng.v4 .h2-eng-flow li .h2-eng-st{transition:none}
}
/* the scene needs 230px, not 290: the extra 58px was dead air between the note
   and the platform, which is what made the band read as two pictures */
.h2-eng.v4 .h2-eng-gl{height:clamp(175px,15vw,220px)}
/* on a phone the objects are governed by the column pitch, so the band is
   only as tall as the scene needs: a taller one is dead air above the floor */
@media (max-width:900px){.h2-eng.v4 .h2-eng-gl{height:clamp(96px,22vw,140px)}}

/* 11 Sep 2026 · the journey rail runs node to node, on the grid's real numbers.
   Three things were wrong with it, all invisible until measured at 1440:

   1 It was inset `margin:0 2.5%`, so the `100%` its column maths resolves
     against was 95% of the stops' width. Every window it cuts for a node was
     computed on a pitch 12px short of the real one and drifted further along
     the run.
   2 Its `--jg` was `clamp(18px,2.4vw,40px)`, the gap the stops used two passes
     ago; the grid has been `clamp(24px,3vw,56px)` since rule 2163. 34.6px
     against a real 43.2px at 1440.
   3 The mask ran black from the last node's window to 100%, so a segment of
     rail carried on past the fifth station and stopped in mid-air.

   Now: full width, so the percentages are the stops' own; the pitch and the
   gap are the grid's; and the line starts at the first object's right edge and
   ends at the last object's left edge, which is what makes five stations read
   as one run rather than a line with things on it. `--jn` is the object's ink
   centre from its column edge (half of the 104px object, less its -12px optical
   nudge) and `--jr` clears the ink either side. */
.h2-jrn .h2-rail{
  --jg:clamp(24px,3vw,56px);
  --jc:calc((100% - 4 * var(--jg)) / 5);
  --jp:calc(var(--jc) + var(--jg));
  --jn:40px; --jr:46px;
  margin-left:0; margin-right:0;
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0,transparent calc(var(--jn) + var(--jr)),
    #000 calc(var(--jn) + var(--jr)),#000 calc(1 * var(--jp) + var(--jn) - var(--jr)),
    transparent calc(1 * var(--jp) + var(--jn) - var(--jr)),transparent calc(1 * var(--jp) + var(--jn) + var(--jr)),
    #000 calc(1 * var(--jp) + var(--jn) + var(--jr)),#000 calc(2 * var(--jp) + var(--jn) - var(--jr)),
    transparent calc(2 * var(--jp) + var(--jn) - var(--jr)),transparent calc(2 * var(--jp) + var(--jn) + var(--jr)),
    #000 calc(2 * var(--jp) + var(--jn) + var(--jr)),#000 calc(3 * var(--jp) + var(--jn) - var(--jr)),
    transparent calc(3 * var(--jp) + var(--jn) - var(--jr)),transparent calc(3 * var(--jp) + var(--jn) + var(--jr)),
    #000 calc(3 * var(--jp) + var(--jn) + var(--jr)),#000 calc(4 * var(--jp) + var(--jn) - var(--jr)),
    transparent calc(4 * var(--jp) + var(--jn) - var(--jr)),transparent 100%);
  mask-image:linear-gradient(90deg,
    transparent 0,transparent calc(var(--jn) + var(--jr)),
    #000 calc(var(--jn) + var(--jr)),#000 calc(1 * var(--jp) + var(--jn) - var(--jr)),
    transparent calc(1 * var(--jp) + var(--jn) - var(--jr)),transparent calc(1 * var(--jp) + var(--jn) + var(--jr)),
    #000 calc(1 * var(--jp) + var(--jn) + var(--jr)),#000 calc(2 * var(--jp) + var(--jn) - var(--jr)),
    transparent calc(2 * var(--jp) + var(--jn) - var(--jr)),transparent calc(2 * var(--jp) + var(--jn) + var(--jr)),
    #000 calc(2 * var(--jp) + var(--jn) + var(--jr)),#000 calc(3 * var(--jp) + var(--jn) - var(--jr)),
    transparent calc(3 * var(--jp) + var(--jn) - var(--jr)),transparent calc(3 * var(--jp) + var(--jn) + var(--jr)),
    #000 calc(3 * var(--jp) + var(--jn) + var(--jr)),#000 calc(4 * var(--jp) + var(--jn) - var(--jr)),
    transparent calc(4 * var(--jp) + var(--jn) - var(--jr)),transparent 100%);
}
/* the stops carry an 8px left pad from an older layout; the rail no longer
   does, so both start on the content edge */
.h2-jrn .h2-stops{padding-left:0}

/* 11 Sep 2026 · the client marquee stops when you reach for it. The pause rule
   in tp.css is scoped to `.hero-trust`, the prototype-2 hero's strip, so on
   this home the row never stopped: a reader could not hold a logo still long
   enough to read it. Keyboard focus stops it too. */
.h2-marq:hover .logomarq-half,
.h2-marq:focus-within .logomarq-half{animation-play-state:paused}

/* 11 Sep 2026 · rule 145 · the capability forms need height on a phone.
   The canvas measured 200px inside a 340px stage because 140px was reserved
   for a caption that needs about 100, so every object was fitted to a 2:1
   letterbox and rendered a third of the size it should. Restated here, at the
   end of the sheet below every appended block, per the house rule that a
   phone stack must be the last word on its own selectors. */
@media (max-width:900px){
  #capabilities .h2-eco-stage.h2-cloud{min-height:430px;aspect-ratio:1/.99}
  #capabilities .h2-eco-stage.h2-cloud>canvas{inset:0 0 112px 0;height:calc(100% - 112px)!important}
}

/* 15 Sep 2026 (one header on every page): the home container matches the
   rest of the site, 1340px with the 18 to 52px gutter, so the wordmark does
   not move between Home and any other page */
.h2,body:has(.h2){--h2-w:1340px;--h2-gut:clamp(18px,3vw,52px)}

/* 15 Sep 2026 (Bazil: "make the scroll icon and animation more consistent to
   the theme"): the cue was mono uppercase beside a sweeping hairline, the two
   things the house language dropped. It is now the site's own motif: a short
   dotted electric rail with a square pulse travelling down it, the way the
   journey and AI rails carry their work, and the word in Inter. Under reduced
   motion the pulse rests at the head of the rail. */
.h2-hero-scroll{font-family:"Inter",sans-serif;font-size:13px;font-weight:500;letter-spacing:.01em;text-transform:none;color:var(--soft);gap:12px;bottom:32px;align-items:center}
.h2-hero-scroll i{width:6px;height:40px;background:radial-gradient(circle,rgba(5,32,245,.34) 1.1px,transparent 1.5px) 50% 0/6px 6px repeat-y;overflow:visible;position:relative}
.h2-hero-scroll i::after{content:"";inset:auto;position:absolute;left:0;top:0;width:6px;height:6px;background:var(--elec);
  box-shadow:0 0 0 3px rgba(5,32,245,.14);animation:h2scrollPulse 2.4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes h2scrollPulse{0%{transform:translateY(0);opacity:0}14%{opacity:1}72%{transform:translateY(34px);opacity:1}100%{transform:translateY(34px);opacity:0}}
@media (prefers-reduced-motion:reduce){.h2-hero-scroll i::after{animation:none;opacity:1;transform:none}}
/* 15 Sep 2026 (Bazil: "gsk too small"): the mark is trimmed to its letters now; its solid capitals fill the whole height, so 34px sits level with Zoetis and Honda */
.h2-marq img[src*="gsk"]{max-height:34px}

/* 15 Sep 2026 · the capability drawings (lib/capGlass.js). Labels are
   projected from the scene: Inter, the navy ink, one small electric square,
   no box and no line, and only the essential ones on a phone. */
#capabilities .h2-eco-stage.h2-cloud>canvas{cursor:default}
.cg-labels{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.cg-lab{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:"Inter",sans-serif;font-size:12.5px;font-weight:500;letter-spacing:.005em;color:#2A3A5E;opacity:0;
  padding-bottom:6px;will-change:transform,opacity;text-shadow:0 0 2px #fff,0 0 6px #fff,0 0 12px #fff}
.cg-lab::before{content:"";width:5px;height:5px;background:var(--elec,#0520F5);flex:0 0 auto}
.cg-lab.sm{font-size:11.5px;font-weight:600;color:#3E62DA;gap:0;padding-bottom:4px}
.cg-lab.sm::before{display:none}
.cg-labels.phone .cg-lab:not(.keep){display:none}
.cg-labels.phone .cg-lab{font-size:11.5px}
.h2-eco-stage.h2-cloud::after{opacity:.18}
.cg-lab.in{padding-bottom:0;text-shadow:none}
.cg-lab.light{color:#fff}
/* 15 Sep 2026: on a phone the stage was 434px wide in a 390px screen.
   aspect-ratio 1/.99 with min-height 430px resolves the WIDTH from the height,
   so the drawing and the caption ran past the right edge and were clipped
   (pass 34 measured the same 425px stage). The column sets the width now. */
@media (max-width:760px){
  #capabilities .h2-eco-stage.h2-cloud{aspect-ratio:auto;width:100%;max-width:100%;height:440px;min-height:0}
}
.cg-lab.side{padding-bottom:0}

/* ── 16 Sep 2026 · the capability visual test page (/cap-test/) ──────────
   Bazil: "put a tab to show 2 types of animation ... v1 v2", then "do 3
   versions", then "make the UI the same and you can just switch between
   version". So the band IS the home band and only the stage contents change:
   V1 the glass canvas, V2 the flat form view, V3 the particle canvas. Each
   engine hangs its own label layer on the stage, so the switch hides the
   layer that does not belong to the version showing. */
.ct .ct-lede{max-width:70ch;margin:14px 0 0;font-size:15.5px;line-height:1.62;color:#4A5B7D}
.ct-tabs{display:flex;gap:10px;margin:0 0 14px;flex-wrap:wrap}
/* the switch rides at the top of the picture: the stage column is a flex
   column holding the switch and then the stage, which takes the rest.
   (.h2-eco is display:contents, so this wrapper IS the grid item.)
   Not scoped to the review page: the HOME band uses the same component. */
#capabilities .ct-col{grid-column:2;grid-row:1 / span 2;align-self:stretch;display:flex;flex-direction:column;
  min-height:clamp(420px,52vh,580px)}
#capabilities .ct-col .h2-eco-stage{grid-column:auto;grid-row:auto;flex:1 1 auto;height:auto;min-height:clamp(380px,46vh,560px)}
/* no caption band under the stage: the lit row in the list names the drawing */
#capabilities .ct-col .h2-eco-stage.h2-cloud>canvas{inset:0!important;height:100%!important}
.ct-tab{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border:1px solid #D7E0F5;background:#fff;
  font:600 13.5px/1 "Inter",sans-serif;color:#2A3A5E;cursor:pointer;transition:.18s ease}
.ct-tab i{font-style:normal;font-weight:700;font-size:12px;letter-spacing:.06em;color:#8DA3D6}
.ct-tab:hover{border-color:#B9CBF0;transform:translateY(-2px);box-shadow:0 10px 24px rgba(6,21,106,.08)}
.ct-tab.on{background:var(--elec,#0520F5);border-color:var(--elec,#0520F5);color:#fff}
.ct-tab.on i{color:rgba(255,255,255,.72)}
.ct-hide{display:none!important}
.ct-form{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:0 6px}
.ct-form .cf-svg{display:block;width:100%;max-height:100%}
@media (max-width:1000px){
  #capabilities .ct-col{grid-column:auto;grid-row:auto;order:1;min-height:0}
  #capabilities .h2-caps{order:2}
}
@media (max-width:760px){
  .ct-tab{padding:11px 15px;font-size:12.5px}
}

/* ── 17 Sep 2026 · three live notes from Bazil ───────────────────────────
   "no dotted line, every 2 second flow, subtle" (the proof story),
   "better and more professional effect when hovering" (the sector tiles),
   "wtf this looks worse, make it clear exciting and amazing, easy to
   visualise and understand" (the AI band). */

/* 1 · the story guide: no dashes. One hairline, and a soft light that runs
   it every two seconds, so the eye is led rather than decorated. */
.h2-story-r:not(:last-child)::before{border-left:0;width:1px;background:linear-gradient(180deg,rgba(5,32,245,.16),rgba(5,32,245,.05))}
.h2-story-r:not(:last-child)::after{width:1px;height:38px;left:21px;border-radius:0;background:linear-gradient(180deg,rgba(5,32,245,0),rgba(5,32,245,.85),rgba(5,32,245,0));
  box-shadow:none;animation:h2storyFlow 2s cubic-bezier(.45,0,.2,1) infinite}
.h2-story-r:nth-child(2)::after{animation-delay:.9s}
@keyframes h2storyFlow{0%{top:10px;opacity:0}12%{opacity:.9}70%{opacity:.9}100%{top:calc(100% + var(--sg) - 24px);opacity:0}}

/* 2 · the sector tiles: no zoom on the photograph (a scaled picture reads
   as a stock-site hover). The chip lifts a little, its rule draws under the
   title, the picture lifts a touch in contrast, and the object brightens. */
.h2-tile img{transition:filter .5s var(--ease),transform .8s var(--ease)}
.h2-tile:hover img,.h2-tile:focus-visible img{transform:none;filter:saturate(1.06) contrast(1.04) brightness(1.02)}
.h2-tile-lab{overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
/* the rule draws under the TITLE, not along the tile's bottom edge, where it
   read as a border rather than as an answer to the pointer */
.h2-tile-lab b{position:relative;display:inline-block}
.h2-tile-lab b::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--elec);transition:width .45s var(--ease)}
.h2-tile:hover .h2-tile-lab,.h2-tile:focus-visible .h2-tile-lab{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(13,21,38,.66)}
/* a fixed 72px, not 100%: an earlier rule keeps the title a block, so a
   percentage ran the rule the whole width of the tile */
.h2-tile:hover .h2-tile-lab b::after,.h2-tile:focus-visible .h2-tile-lab b::after{width:72px}
.h2-tile .tp-iso-w{transition:transform .45s var(--ease),filter .45s var(--ease)}
.h2-tile:hover .tp-iso-w{transform:translateY(-3px);filter:drop-shadow(0 8px 18px rgba(5,32,245,.28))}

/* 3 · the AI band, rebuilt as ONE readable diagram. The WebGL slab is off:
   pale isometric blocks on a navy bar read as clutter at this size. What is
   left is a frame that says "your S/4HANA", four stations inside it, a
   hairline between them with a square of work travelling it, and a return
   line along the foot. No mono, no dotted rules. */
.h2-eng.v4 .h2-eng-gl{display:none}
.h2-eng.v4{position:relative;padding:clamp(26px,3vw,44px) clamp(22px,2.6vw,38px) clamp(64px,6vw,84px);
  border:1px solid rgba(5,32,245,.16);background:linear-gradient(180deg,#FBFCFF,#F5F8FF)}
.h2-eng.v4::before{content:"Your S/4HANA";position:absolute;left:clamp(22px,2.6vw,38px);top:-9px;padding:0 10px;background:#fff;
  font:600 11.5px/18px "Inter",sans-serif;letter-spacing:.02em;color:#5A6B8C;border:1px solid rgba(5,32,245,.16)}
.h2-eng.v4 .h2-eng-note{margin:0 0 clamp(18px,2.2vw,28px)}
.h2-eng.v4 .h2-eng-flow li:not(:last-child)::after{border-top:1px solid rgba(5,32,245,.28);top:27px}
.h2-eng.v4 .h2-eng-pass{text-transform:none;font-family:"Inter",sans-serif;font-weight:500;font-size:11.5px;letter-spacing:.01em;
  background:#fff;border:1px solid rgba(5,32,245,.18);border-radius:0;padding:2px 10px;color:#3E62DA}
.h2-eng.v4 .h2-eng-loop{border-top-style:solid;border-top-color:rgba(5,32,245,.22)}
.h2-eng.v4 .h2-eng-loop::before,.h2-eng.v4 .h2-eng-loop::after{border-style:solid;border-color:rgba(5,32,245,.22)}
.h2-eng.v4 .h2-eng-loop em{text-transform:none;font-family:"Inter",sans-serif;font-weight:500;letter-spacing:.01em;font-size:11.5px;background:#FBFCFF;padding:0 10px}
/* the work travelling the return line, on the same two-second clock */
.h2-eng.v4 .h2-eng-loop i{content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;background:var(--elec);
  animation:h2engBack 2.6s cubic-bezier(.45,0,.2,1) infinite}
@keyframes h2engBack{0%{left:100%;opacity:0}8%{opacity:1}88%{opacity:1}100%{left:0;opacity:0}}
@media (prefers-reduced-motion:reduce){.h2-story-r:not(:last-child)::after,.h2-eng.v4 .h2-eng-loop i{animation:none}}

/* the story eyebrows in the house voice: no mono, no shouting. (House rule:
   no mono anywhere on the client sites.) */
.h2-story-r em{font-family:"Inter",sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8DA3D6}
.h2-story-r.out em{color:var(--elec)}

/* ── 17 Sep 2026 · the phone stack, restated last ────────────────────────
   House rule from pass 27, broken again here: rule 2282 sets the proof grid
   to two columns UNCONDITIONALLY, and it sits after the @media that stacks
   it, so at 390 the story column was 107px wide and read two words to a
   line. Every phone stack has to be restated at the END of the sheet. */
@media (max-width:1000px){
  .h2-proof-feat{grid-template-columns:1fr}
  .h2-proof-more{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .h2-proof-more{grid-template-columns:1fr}
}

/* ── 18 Sep 2026 · Bazil's review batch ──────────────────────────────────
   Stats aligned, journey structured, cases compact, film label plain,
   sector underline off, the AI band rebuilt as one clear panel. */

/* the four numbers sat 26px right of their labels: a two-column grid kept
   an empty icon column after the icons were hidden. One column now. */
.h2-trust .h2-fact{display:flex;flex-direction:column;align-items:flex-start;column-gap:0}
.h2-trust .h2-fact b{margin-left:0}

/* journey: shorter connectors in solid electric ("make the lines in between
   shorter and blue"), no dotted shadow under the objects, no mono labels,
   and every row aligned across the five columns ("align font properly and
   make it structure, no dots please") */
.h2-jrn .h2-rail{background:var(--elec);--jr:74px}
.h2-jrn .tp-iso-sh{display:none}
.h2-jrn .h2-stop em{display:flex;align-items:baseline;gap:9px;font:600 14px/1.3 "Inter",sans-serif;letter-spacing:.01em;text-transform:none;color:var(--elec)}
.h2-jrn .h2-stop em .h2-stop-no{font-style:normal;font-family:"Montserrat",sans-serif;font-weight:600}
.h2-jrn .h2-stop small strong{display:block;font:600 12.5px/1.4 "Inter",sans-serif;letter-spacing:.01em;text-transform:none;opacity:1}
@media (min-width:1001px){
  .h2-jrn .h2-stops{grid-template-rows:repeat(4,auto);row-gap:0}
  .h2-jrn .h2-stop{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start}
}

/* proof: the three case tiles shorter and tighter ("shorter a bit and more
   compact"), the film label without its running time and in the text face */
.h2-case,.h2-proof-more .h2-case{aspect-ratio:16/10}
.h2-case > div{left:clamp(16px,1.5vw,24px);right:clamp(16px,1.5vw,24px);bottom:clamp(14px,1.4vw,22px)}
.h2-case em{font:600 12px/1.3 "Inter",sans-serif;letter-spacing:.06em}
.h2-case b{margin-top:6px;font-size:clamp(17px,1.3vw,21px);line-height:1.22}
.h2-case span{margin-top:6px;font-size:13px;line-height:1.45}
.h2-film .h2-film-btn span{font:600 14px/1.3 "Inter",sans-serif;letter-spacing:.01em;text-transform:none}

/* sector tiles: no underline that grows under the title on hover */
.h2-tile-lab b::after{content:none}

/* the AI band, one panel ("fix this one so it's clearer"). Reading order:
   the framing sentence, four stations with what passes written on each
   arrow, and a bracket that closes under the columns and points back up
   into station 1. Nothing moves. */
.h2-ai5{--g:clamp(28px,3.4vw,64px);position:relative;background:#fff;border:1px solid var(--hair,#E3E9F5);
  padding:clamp(28px,3vw,48px) clamp(24px,3vw,48px) clamp(34px,3.4vw,52px)}
.h2-ai5-note{margin:0 0 clamp(30px,3.2vw,44px);font:500 17px/1.5 "Inter",sans-serif;color:var(--navy)}
.h2-ai5-note span{color:var(--soft);font-weight:400}
.h2-ai5-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g);grid-template-rows:repeat(3,auto)}
.h2-ai5-flow li{position:relative;display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;margin:0;padding:0}
.h2-ai5-head{display:flex;align-items:center;gap:12px;height:44px}
.h2-ai5-head i{display:grid;place-items:center;width:44px;height:44px;background:var(--elec);color:#fff;font:600 18px/1 "Montserrat",sans-serif;font-style:normal}
.h2-ai5-head span{display:grid;place-items:center;width:30px;height:30px;color:var(--elec)}
.h2-ai5-head svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
/* the arrow to the next station, and what it carries written above it */
.h2-ai5-flow li:not(:last-child)::after{content:"";position:absolute;top:21px;left:102px;right:calc(-1 * var(--g) + 14px);height:1.5px;background:var(--elec)}
.h2-ai5-flow li:not(:last-child)::before{content:"";position:absolute;top:16.5px;right:calc(-1 * var(--g) + 6px);border-left:9px solid var(--elec);border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.h2-ai5-pass{position:absolute;top:-4px;left:102px;right:calc(-1 * var(--g) + 6px);text-align:center;font:500 13px/1 "Inter",sans-serif;font-style:normal;color:var(--elec);white-space:nowrap}
.h2-ai5-flow h3{margin:24px 0 0;font:500 clamp(20px,1.6vw,26px)/1.2 "Montserrat",sans-serif;letter-spacing:-.01em;color:var(--navy)}
.h2-ai5-flow p{margin:10px 0 0;font:400 15px/1.6 "Inter",sans-serif;color:var(--soft);max-width:30ch}
/* the return: a bracket from station 4 back to station 1, the arrow at 1 */
.h2-ai5-loop{position:relative;height:30px;margin:clamp(24px,2.6vw,34px) 0 0 21.25px;
  width:calc(3 * ((100% - 3 * var(--g)) / 4 + var(--g)) + 1.5px);border:1.5px solid var(--elec);border-top:0}
.h2-ai5-loop::before{content:"";position:absolute;left:-7.25px;top:-9px;border-bottom:9px solid var(--elec);border-left:5.5px solid transparent;border-right:5.5px solid transparent}
.h2-ai5-loop em{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);padding:0 16px;background:#fff;
  font:500 13px/18px "Inter",sans-serif;font-style:normal;color:var(--elec);white-space:nowrap}
@media (max-width:1000px){
  .h2-ai5-flow{grid-template-columns:1fr 1fr;grid-template-rows:none;row-gap:36px}
  .h2-ai5-flow li{display:block;grid-row:auto}
  .h2-ai5-flow li::after,.h2-ai5-flow li::before,.h2-ai5-pass,.h2-ai5-loop{display:none}
  .h2-ai5-flow h3{margin-top:18px}
}
@media (max-width:640px){
  .h2-ai5-flow{grid-template-columns:1fr;row-gap:28px}
  .h2-ai5-note{font-size:15.5px}
}
/* "go-live" never breaks at its hyphen in a stage title */
.h2-nw{font-style:normal;white-space:nowrap}

/* 18 Sep 2026 · no line animation anywhere (Bazil: "no line animation
   throughout the website"). Lines stay drawn; nothing grows, draws itself,
   sweeps or runs along them. Mechanism dots in diagrams and on the globe
   are kept pending his call. */
/* 23 Sep 2026: the kill spares .tp-act ("why icon not animating when hover").
   The 18 Sep rule stopped EVERY animation in the icon to stop the line draw,
   and took the object's own action with it. The draw stays off; the action
   runs, faster, while the tile is pointed at (see the tail of this sheet). */
.h2-tile:hover .h2-tile-ic svg *:not(.tp-act){animation:none;stroke-dasharray:none}
.tp-iso[data-k="industry"] .tp-draw{animation:none;stroke-dasharray:none}
.h2-rail-fill{display:none}
.h2-rail::before{content:none;animation:none}
.h2-mt2-bracket i:nth-child(3)::after,.h2-mt2-stem::after{content:none;animation:none}

/* ── 19 Sep 2026 · Bazil's review ────────────────────────────────────────
   Capability rows: "no arrows and no shadows and no moving". The lit row
   keeps its tint and electric title; nothing shifts, lifts or scales. */
#capabilities .h2-cap,#capabilities .h2-cap:hover,#capabilities .h2-cap:focus-visible,#capabilities .h2-cap.lit{padding-left:22px;transform:none;box-shadow:none}
#capabilities .h2-cap i{display:none}
#capabilities .h2-cap .h2-cap-ic svg,#capabilities .h2-cap:hover .h2-cap-ic svg,#capabilities .h2-cap.lit .h2-cap-ic svg{transform:none}
/* hero: "The SAP partner" holds one line */
.h2-hero h1 span{white-space:nowrap}
/* journey: the words sit closer under their objects ("move a bit close to their info") */
@media (min-width:1001px){.h2-jrn .h2-stop,.h2-jrn .h2-stop:nth-child(n){padding-top:46px}}
/* case tiles: the eyebrow and a one-line title, no description ("only 1
   line for title", "no need the description") */
.h2-case > div b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(15px,1.3vw,20px)}

/* ── 19 Sep 2026 · second batch ──────────────────────────────────────────
   Sector tiles: the description sits right under its title ("titles are too
   far away from their description"); each sat centred in its own 40px row. */
.h2-tile-lab b{align-self:end}
.h2-tile-lab > span:not(.h2-tile-ic){align-self:start;margin-top:6px}

/* Tiles and case tiles on hover: a blue highlight and a cue to know more,
   no lift, no shadow, no arrow ("highlight a bit blue instead when hovering") */
.h2-tile:hover,.h2-tile:focus-visible,.h2-case:hover,.h2-case:focus-visible{transform:none;box-shadow:none}
.h2-tile:hover .h2-tile-lab,.h2-tile:focus-visible .h2-tile-lab{transform:none;box-shadow:none}
.h2-tile:hover .h2-tile-ic,.h2-tile:focus-visible .h2-tile-ic,.h2-tile:hover .tp-iso,.h2-tile:hover .tp-iso-w{transform:none;filter:none}
.h2-case:hover b,.h2-case:focus-visible b{color:#fff}
.h2-tile::before,.h2-case::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,32,245,.12) 0%,rgba(5,32,245,.4) 100%);opacity:0;transition:opacity .35s var(--ease)}
.h2-tile:hover::before,.h2-tile:focus-visible::before,.h2-case:hover::before,.h2-case:focus-visible::before{opacity:1}
.h2-more{position:absolute;top:clamp(14px,1.4vw,22px);right:clamp(14px,1.4vw,22px);z-index:3;padding:9px 13px;background:var(--elec);color:#fff;
  font:600 12.5px/1 "Inter",sans-serif;letter-spacing:.01em;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.h2-tile:hover .h2-more,.h2-tile:focus-visible .h2-more,.h2-case:hover .h2-more,.h2-case:focus-visible .h2-more{opacity:1}
@media (hover:none){.h2-more{display:none}}

/* AI band: the number and its icon in ONE box ("the icon and number in same
   box"), and a small process drawing under each station so the step reads
   ("add process visual so it makes sense"). Static. */
.h2-ai5-flow{grid-template-rows:repeat(4,auto)}
.h2-ai5-flow li{grid-row:span 4}
.h2-ai5-head{width:max-content;height:46px;gap:12px;padding:0 13px 0 0;border:1px solid #D3DEF7;background:#fff}
.h2-ai5-flow li:not(:last-child)::after{left:116px;top:22.25px}
.h2-ai5-flow li:not(:last-child)::before{top:17.75px}
.h2-ai5-pass{left:116px}
.h2-ai5-viz{display:block;width:100%;max-width:220px;height:auto;margin-top:24px;overflow:visible}
.h2-ai5-viz .pl{fill:#F2F6FF;stroke:#A9C0F4;stroke-width:1.2}
.h2-ai5-viz .fx{fill:var(--elec)}
.h2-ai5-viz .ln{fill:none;stroke:#A9C0F4;stroke-width:1.2}
.h2-ai5-viz .st{fill:none;stroke:var(--elec);stroke-width:1.4}
.h2-ai5-viz .ck{fill:none;stroke:var(--elec);stroke-width:2.2;stroke-linecap:square}
.h2-ai5-flow h3{margin-top:20px}
.h2-ai5-loop{margin-left:22.25px}
@media (max-width:1000px){.h2-ai5-flow{grid-template-rows:none}.h2-ai5-flow li{grid-row:auto}.h2-ai5-viz{max-width:240px}}

/* ── 19 Sep 2026 · third batch ───────────────────────────────────────────
   The know-more cue is plain text in the words, never a box ("don't put
   read the story in a box", "ugly"). */
.h2-more{position:static;display:block;margin-top:8px;padding:0;background:none;color:#fff;
  font:600 13px/1.3 "Inter",sans-serif;letter-spacing:.01em;opacity:0;transition:opacity .3s var(--ease)}
.h2-tile-lab .h2-more{grid-column:2}
@media (hover:none){.h2-more{display:none}}

/* The begin cards: the text face, no mono, no dot ("better fonts") */
.h2-pick em{font:600 12.5px/1.3 "Inter",sans-serif;letter-spacing:.02em;text-transform:none;color:var(--elec)}
.h2-pick-t{font:500 13px/1.4 "Inter",sans-serif;letter-spacing:0;text-transform:none;color:var(--faint)}

/* The meet band, tighter ("a bit more compact in placement and structure"),
   the labels in the text face, and a quiet sequence: each step lights in
   turn, then each thing you leave with. Nothing runs along a line. */
.h2-meet-in.h2-mt2{width:min(100%,520px)}
.h2-mt2-cap{font:600 12.5px/1 "Inter",sans-serif;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.78)}
.h2-mt2-row{margin-top:12px;column-gap:18px}
.h2-mt2-screen{aspect-ratio:16/9;background:#0E1F6E}
.h2-mt2-screen video{background:#0E1F6E}
.h2-mt2-panel figcaption{margin-top:10px;min-height:0;row-gap:2px}
.h2-mt2-bracket{height:26px;margin-top:8px}
.h2-mt2-bracket::before{top:10px}
.h2-mt2-bracket i{height:10px}
.h2-mt2-bracket i:nth-child(3){top:10px;height:16px}
.h2-mt2-stem{height:14px;margin-top:6px}
.h2-mt2-box{margin-top:8px;padding:26px 18px 20px}
.h2-mt2-box li{row-gap:8px}
@keyframes h2mt2Step{0%,100%{filter:none}6%,24%{filter:brightness(1.45)}30%{filter:none}}
@keyframes h2mt2Out{0%,100%{opacity:.5}6%,30%{opacity:1}36%{opacity:.5}}
.h2-mt2-cap b{animation:h2mt2Step 7.5s var(--ease) infinite}
.h2-mt2-row + .h2-mt2-bracket + .h2-mt2-cap b{animation-delay:2.5s}
.h2-mt2-box > .h2-mt2-cap b{animation-delay:5s}
.h2-mt2-box li i{animation:h2mt2Out 7.5s var(--ease) infinite;animation-delay:5.2s}
.h2-mt2-box li:nth-child(2) i{animation-delay:5.7s}
.h2-mt2-box li:nth-child(3) i{animation-delay:6.2s}
@media (prefers-reduced-motion:reduce){.h2-mt2-cap b,.h2-mt2-box li i{animation:none;opacity:1}}

/* The AI band as four cards ("maybe we can make them cards instead"), the
   head as ONE blue box with the number and icon in white ("box can just be
   1 colour, blue, icon white"), and the drawings animated on one 6s loop,
   station by station, so the process plays left to right. */
.h2-ai5{--g:clamp(64px,5.4vw,96px);background:none;border:0;padding:0}
.h2-ai5-note{margin-bottom:clamp(22px,2.4vw,32px)}
.h2-ai5-flow{column-gap:var(--g)}
.h2-ai5-flow li{background:#fff;border:1px solid #DCE5F7;padding:24px 24px 28px}
.h2-ai5-head{background:var(--elec);border-color:var(--elec);gap:6px;padding:0 12px 0 0}
.h2-ai5-head span{color:#fff}
.h2-ai5-flow li:not(:last-child)::after{left:calc(100% + 10px);right:calc(-1 * var(--g) + 14px);top:47.25px}
.h2-ai5-flow li:not(:last-child)::before{right:calc(-1 * var(--g) + 6px);top:42.75px}
.h2-ai5-pass{left:100%;right:calc(-1 * var(--g));top:26px;font-size:12px}
.h2-ai5-viz{max-width:100%}
.h2-ai5-loop{margin-left:46.25px}
.h2-ai5-loop em{background:var(--pale)}
@media (max-width:1000px){.h2-ai5-flow{column-gap:18px;row-gap:18px}}

.h2-ai5-viz .hl{fill:rgba(5,32,245,.16);stroke:var(--elec);stroke-width:1.2;opacity:0;animation:aiHl 6s var(--ease) infinite}
.h2-ai5-viz .hl.h1{animation-delay:.4s}
.h2-ai5-viz .hl.h2{animation-delay:.8s}
@keyframes aiHl{0%{opacity:0}3%,9%{opacity:1}13%,100%{opacity:0}}
.h2-ai5-viz .rec{animation:aiRec2 6s var(--ease) infinite}
@keyframes aiRec2{0%,25%{transform:translateX(0);opacity:1}38%{transform:translateX(64px);opacity:1}42%,94%{transform:translateX(64px);opacity:0}96%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:1}}
.h2-ai5-viz .kn{transform-box:fill-box;transform-origin:center;animation:aiKnob 6s var(--ease) infinite;animation-delay:.1s}
.h2-ai5-viz .kn.k1{animation-delay:.35s}
.h2-ai5-viz .kn.k2{animation-delay:.6s}
@keyframes aiKnob{0%,36%{transform:scale(1)}40%{transform:scale(1.7)}46%,100%{transform:scale(1)}}
.h2-ai5-viz .tok{animation:aiTok 6s var(--ease) infinite}
@keyframes aiTok{0%,48%{transform:translateX(0);opacity:0}50%{transform:translateX(0);opacity:1}58%,62%{transform:translateX(59px);opacity:1}70%{transform:translateX(128px);opacity:1}73%,100%{transform:translateX(128px);opacity:0}}
.h2-ai5-viz .core{animation:aiCore 6s var(--ease) infinite}
@keyframes aiCore{0%,56%{opacity:.35}59%,64%{opacity:1}68%,100%{opacity:.35}}
.h2-ai5-viz .ok{animation:aiOk 6s var(--ease) infinite}
@keyframes aiOk{0%,68%{opacity:0}72%,95%{opacity:1}99%,100%{opacity:0}}
.h2-ai5-viz.v4 .rec{animation:aiRec4 6s var(--ease) infinite}
@keyframes aiRec4{0%,72%{transform:translateX(0);opacity:1}82%{transform:translateX(84px) translateY(34px);opacity:1}85%,96%{transform:translateX(84px) translateY(34px);opacity:0}98%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:1}}
.h2-ai5-viz .nr{animation:aiNr 6s var(--ease) infinite}
.h2-ai5-viz rect.nr:not(.fx){fill:rgba(5,32,245,.12)}
@keyframes aiNr{0%,82%{opacity:0}85%,96%{opacity:1}99%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.h2-ai5-viz *{animation:none!important}.h2-ai5-viz .hl,.h2-ai5-viz .ok,.h2-ai5-viz .nr{opacity:1}.h2-ai5-viz .tok{opacity:0}}

/* ── 19 Sep 2026 · capabilities layout ───────────────────────────────────
   The heading runs the full width on one line ("should fit in one line to
   the right side as well"), the list and the drawing sit under it, and the
   version switch is one short line under the drawing. */
@media (min-width:1001px){
  #capabilities .h2-head{grid-column:1 / -1;grid-row:1;max-width:none}
  #capabilities .h2-head .h2-h{max-width:none;white-space:nowrap;font-size:clamp(34px,3.6vw,68px)}
  #capabilities .ct-col{grid-row:2}
  #capabilities .h2-caps{grid-row:2}
}
.ct-tabs{margin:14px 0 0;flex-wrap:nowrap;gap:8px}
.ct-tab{padding:9px 14px;font-size:13px;gap:8px}
/* the stage carries order:2 from an older rule, which lifted the switch
   above it: the switch is ordered after the stage */
#capabilities .ct-col .ct-tabs{order:3}

/* ── 19 Sep 2026 · the meet band background ("better more premium
   background"): a deep diagonal navy, a soft electric glow behind the
   diagram and a fainter one low on the left, and a fine dot texture that
   fades out toward the edges. Static. */
.h2-close{background:
  radial-gradient(55% 75% at 76% 44%,rgba(5,32,245,.30) 0%,rgba(5,32,245,.10) 45%,rgba(5,32,245,0) 72%),
  radial-gradient(40% 55% at 6% 104%,rgba(5,32,245,.18) 0%,rgba(5,32,245,0) 70%),
  linear-gradient(135deg,#020C49 0%,#06157A 52%,#030F5A 100%)}
.h2-close::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.5px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(62% 80% at 72% 46%,#000 0%,rgba(0,0,0,.35) 45%,transparent 78%);
  mask-image:radial-gradient(62% 80% at 72% 46%,#000 0%,rgba(0,0,0,.35) 45%,transparent 78%)}
.h2-close > .h2-in{position:relative;z-index:1}
/* the outcome frame's label no longer masks the border with a navy patch
   (it would show on the gradient): the top border leaves a gap for it */
.h2-mt2-box{border-top-color:transparent}
.h2-mt2-box::before,.h2-mt2-box::after{content:"";position:absolute;top:-1px;height:1px;background:rgba(255,255,255,.24)}
.h2-mt2-box::before{left:-1px;right:calc(50% + 88px)}
.h2-mt2-box::after{right:-1px;left:calc(50% + 88px)}
.h2-mt2-box > .h2-mt2-cap{background:none}

/* 19 Sep 2026 (Bazil: "expand the visual so more of the picture can be
   seen, cleaner and more suitable for Tenthpin"): the team photograph is the
   client's own frame (client-photos/0914/photo5.jpg) extended to 16:9 by
   Higgsfield outpaint, cropped 16:10 and regraded to the bright set
   (client-team-room.jpg). The frame shows the whole scene now, not a strip. */
.h2-people-shot{aspect-ratio:16/10;height:auto;min-height:0;align-self:center}
/* the version switch is centred under the drawing ("centralize this") */
#capabilities .ct-col .ct-tabs{justify-content:center}

/* ── 19 Sep 2026 · no floating shadows, anywhere (Bazil: "none of this
   floating shadow effect, must be modern and premium, remember"). Frames
   sit flat on the page at rest; a card answers a pointer with a blue edge,
   a light blue wash on its picture and a blue title. Nothing lifts. */
.h2-film,.h2-people-shot,.h2-film:hover,.h2-people-shot:hover{box-shadow:none!important}
.h2-pick,.h2-pick:hover,.h2-pick:focus-within,.h2-city,.h2-city:hover{transform:none!important;box-shadow:none!important}
.h2-pick{outline:1px solid transparent;outline-offset:-1px;transition:outline-color .3s var(--ease)}
.h2-pick:hover,.h2-pick:focus-within{outline-color:var(--elec)}
.h2-pick-shot{position:relative;overflow:hidden}
.h2-pick-shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,32,245,.08) 0%,rgba(5,32,245,.32) 100%);opacity:0;transition:opacity .35s var(--ease)}
.h2-pick:hover .h2-pick-shot::after,.h2-pick:focus-within .h2-pick-shot::after{opacity:1}
.h2-pick b{transition:color .3s var(--ease)}
.h2-pick:hover b,.h2-pick:focus-within b{color:var(--elec)}

/* ── 19 Sep 2026 · the people band, sized properly ("fix the visual, size it
   correctly, remove the weird stuff"). The real frame (client-photos/0914/
   photo5.jpg) cropped round the team, the table cleared of bottles, phone,
   remote and sockets by Higgsfield (people untouched), regraded: client-
   team-v3.jpg. The photograph now runs the full height of the heading and
   the roles beside it, top to bottom, 5:4 at most, flat on the page. */
@media (min-width:1001px){
  .h2-people-grid{align-items:stretch;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,4.4vw,80px)}
  .h2-people-shot{aspect-ratio:auto!important;height:100%!important;min-height:480px!important;align-self:stretch!important;margin:0}
}
.h2-people-zoom{transform:none;transition:none}
.h2-people-shot:hover .h2-people-zoom{transform:none}
.h2-people-zoom img{object-position:56% 34%}
@media (max-width:1000px){.h2-people-shot{aspect-ratio:5/4!important;height:auto!important;min-height:0!important}}

/* ── 19 Sep 2026 · one-line offices title, and a meet band that breathes ──
   "8 offices, one team" on one line. The meet band's glows now live on a
   layer that drifts very slowly (a 38s ease back and forth) while the dot
   texture pans a few pixels ("better moving subtle background"). */
#global .h2-h{white-space:nowrap}
@media (max-width:640px){#global .h2-h{white-space:normal}}
.h2-close{background:linear-gradient(135deg,#020C49 0%,#06157A 52%,#030F5A 100%)}
.h2-close::after{content:"";position:absolute;inset:-18%;z-index:0;pointer-events:none;
  background:radial-gradient(38% 52% at 70% 46%,rgba(5,32,245,.34) 0%,rgba(5,32,245,.11) 46%,rgba(5,32,245,0) 74%),
    radial-gradient(30% 42% at 14% 88%,rgba(5,32,245,.2) 0%,rgba(5,32,245,0) 72%),
    radial-gradient(26% 36% at 46% 10%,rgba(120,160,255,.1) 0%,rgba(120,160,255,0) 70%);
  animation:h2closeGlow 38s ease-in-out infinite alternate}
@keyframes h2closeGlow{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-3.5%,2.5%,0) scale(1.06)}100%{transform:translate3d(2.5%,-2%,0) scale(1.02)}}
.h2-close::before{animation:h2closeDots 60s linear infinite}
@keyframes h2closeDots{from{background-position:0 0}to{background-position:26px 52px}}
.h2-close > .h2-meet{z-index:1}
.h2-close > .h2-in{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.h2-close::after,.h2-close::before{animation:none}}
/* the switch says what it is: a mockup, pick a direction */
.ct-note{align-self:center;margin-right:6px;font:500 12.5px/1.3 "Inter",sans-serif;color:var(--faint,#78849B);white-space:nowrap}
@media (max-width:640px){#capabilities .ct-col .ct-tabs{flex-wrap:wrap}.ct-note{flex-basis:100%;text-align:center;margin:0 0 4px}}

/* ── 19 Sep 2026 · the loading screen, premium (TpLoader.jsx) ────────────
   Letters rise from a baseline one by one, a band of electric light passes
   through them once, a counter runs to 100 under the mark, then a two-tone
   curtain (paper, then electric) lifts to the page. */
#tpLoader{position:fixed;inset:0;z-index:99990;background:none!important;display:block;transform:none!important;transition:none!important;pointer-events:auto}
#tpLoader.gone{display:none}
#tpLoader .tpl-dots{display:none}
#tpLoader .tpl-sheet{position:absolute;inset:0;will-change:transform;transition:transform .95s cubic-bezier(.76,0,.24,1)}
#tpLoader .tpl-sheet-b{background:#0520F5}
#tpLoader .tpl-sheet-a{background:#F7F9FD;display:grid;place-items:center}
#tpLoader.done .tpl-sheet-a{transform:translateY(-101%);transition-delay:.18s}
#tpLoader.done .tpl-sheet-b{transform:translateY(-101%);transition-delay:.34s}
#tpLoader .tpl-field{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(5,32,245,.16) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(46% 42% at 50% 50%,#000 0%,transparent 100%);mask-image:radial-gradient(46% 42% at 50% 50%,#000 0%,transparent 100%);
  opacity:0;transition:opacity 1.2s ease}
#tpLoader.go .tpl-field{opacity:1}
#tpLoader .tpl-center{position:relative;width:min(560px,78vw);transition:transform .7s cubic-bezier(.7,0,.2,1),opacity .5s ease}
#tpLoader.done .tpl-center{transform:translateY(-18px);opacity:0}
#tpLoader .tpl-word{display:block;width:100%;height:auto;overflow:visible}
#tpLoader .tpl-ch{fill:#0B0F17;transform:translateY(26px);transform-box:view-box}
#tpLoader.go .tpl-ch{animation:tplRise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(120ms + var(--k) * 60ms)}
@keyframes tplRise{from{transform:translateY(26px)}to{transform:none}}
#tpLoader .tpl-sheen{transform-box:view-box}
#tpLoader.go .tpl-sheen{animation:tplSheen 1s cubic-bezier(.45,0,.2,1) .95s forwards}
@keyframes tplSheen{from{transform:translateX(0)}to{transform:translateX(270px)}}
#tpLoader .tpl-foot{position:static;transform:none;display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(18px,2.2vw,28px);gap:24px;
  opacity:0;transition:opacity .6s ease .55s}
#tpLoader.go .tpl-foot{opacity:1}
#tpLoader .tpl-sub{font:500 clamp(11.5px,1vw,13px)/1 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#5A6684}
#tpLoader .tpl-ct{font:500 clamp(18px,1.7vw,24px)/1 "Montserrat",sans-serif;letter-spacing:-.01em;color:#0520F5;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){#tpLoader{display:none}}

/* ── 19 Sep 2026 · the AI band as premium cards (.h2-ai6) ────────────────
   A drawing stage over the words in each card; one 8s loop, 2s a station:
   the card in its turn takes a blue top rule and a deeper stage, and its
   drawing acts. No shadows. */
.h2-ai6{--g:clamp(44px,4.4vw,80px);margin-top:clamp(8px,1vw,16px)}
.h2-ai6-note{margin:0 0 clamp(34px,3.6vw,52px);font:500 17px/1.5 "Inter",sans-serif;color:var(--navy)}
.h2-ai6-note span{color:var(--soft);font-weight:400}
.h2-ai6-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g)}
.ai6-c{position:relative;display:flex;flex-direction:column;margin:0;padding:0 0 clamp(26px,2.4vw,36px);background:#fff;border:1px solid #E1E8F6}
.ai6-c::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--elec);transform:scaleX(0);transform-origin:0 50%;opacity:0}
.ai6-stage{position:relative;aspect-ratio:240/170;background:#F4F7FF;
  background-image:radial-gradient(rgba(5,32,245,.13) 1px,transparent 1.3px);background-size:14px 14px;border-bottom:1px solid #E7EDF8}
.ai6-head{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px 0 0;background:var(--elec);z-index:1}
.ai6-head i{display:grid;place-items:center;width:38px;height:38px;color:#fff;font:600 16px/1 "Montserrat",sans-serif;font-style:normal}
.ai6-head span{display:grid;place-items:center;width:22px;height:22px;color:#fff}
.ai6-head svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
.ai6-viz{position:absolute;left:6%;right:6%;bottom:6%;width:88%;height:auto;overflow:visible}
.ai6-c h3{margin:clamp(22px,2vw,28px) clamp(22px,2vw,30px) 0;font:500 clamp(21px,1.7vw,26px)/1.15 "Montserrat",sans-serif;letter-spacing:-.015em;color:var(--navy)}
.ai6-c p{margin:12px clamp(22px,2vw,30px) 0;font:400 15px/1.62 "Inter",sans-serif;color:var(--soft)}
/* the arrow between cards, level with the middle of the stage */
.ai6-c:not(:last-child)::after{content:"";position:absolute;top:calc(35% - 1px);left:calc(100% + 12px);width:calc(var(--g) - 24px);height:1.5px;background:var(--elec);opacity:.9}
.ai6-pass{position:absolute;top:calc(35% - 26px);left:100%;width:var(--g);text-align:center;font:500 12.5px/1 "Inter",sans-serif;font-style:normal;color:var(--elec);white-space:nowrap}
.ai6-pass::after{content:"";position:absolute;right:10px;top:21.5px;border-left:8px solid var(--elec);border-top:5px solid transparent;border-bottom:5px solid transparent}
.h2-ai6-loop{position:relative;height:30px;margin:clamp(22px,2.4vw,32px) 0 0 36px;width:calc(3 * ((100% - 3 * var(--g)) / 4 + var(--g)) + 1.5px);border:1.5px solid rgba(5,32,245,.55);border-top:0}
.h2-ai6-loop::before{content:"";position:absolute;left:-7.25px;top:-9px;border-bottom:9px solid rgba(5,32,245,.8);border-left:5.5px solid transparent;border-right:5.5px solid transparent}
.h2-ai6-loop em{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);padding:0 16px;background:var(--pale);font:500 13px/18px "Inter",sans-serif;font-style:normal;color:var(--elec);white-space:nowrap}

/* the drawings */
.ai6-viz .pl{fill:#fff;stroke:#A9C0F4;stroke-width:1.2}
.ai6-viz .hd{fill:#E6EDFD;stroke:#A9C0F4;stroke-width:1.2}
.ai6-viz .fx{fill:var(--elec)}
.ai6-viz .ln{fill:none;stroke:#B7C9F3;stroke-width:1.4;stroke-linecap:square}
.ai6-viz .st{fill:none;stroke:var(--elec);stroke-width:1.6;stroke-linecap:square}
.ai6-viz .ck{fill:none;stroke:var(--elec);stroke-width:2.4;stroke-linecap:square}
.ai6-viz .hl{fill:rgba(5,32,245,.12);opacity:0}
.ai6-viz .nrb{fill:rgba(5,32,245,.12);stroke:var(--elec);stroke-width:1.2}

/* the turn: 8s loop, station i owns [i*25%, i*25%+25%] */
.ai6-c::before{animation:ai6Rule 8s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--i) * 2s)}
.ai6-stage{animation:ai6Stage 8s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--i) * 2s)}
@keyframes ai6Rule{0%{transform:scaleX(0);opacity:1}6%,22%{transform:scaleX(1);opacity:1}25%,100%{transform:scaleX(1);opacity:0}}
@keyframes ai6Stage{0%,25%,100%{background-color:#F4F7FF}5%,21%{background-color:#E9F0FF}}
/* 1 · the records are read, row by row */
.z1 .hl{animation:ai6Hl 8s ease infinite}
.z1 .hl.h1{animation-delay:.35s}.z1 .hl.h2{animation-delay:.7s}.z1 .hl.h3{animation-delay:1.05s}
@keyframes ai6Hl{0%{opacity:0}3%,8%{opacity:1}12%,100%{opacity:0}}
/* 2 · the record meets the rules and the settings move */
.z2 .rec{animation:ai6Rec 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ai6Rec{0%,26%{transform:translateX(0);opacity:1}36%{transform:translateX(40px);opacity:1}40%,94%{transform:translateX(40px);opacity:0}97%{transform:translateX(0);opacity:0}100%{transform:translateX(0);opacity:1}}
.z2 .kn{transform-box:fill-box;transform-origin:center}
.z2 .k0{animation:ai6K0 8s cubic-bezier(.4,0,.2,1) infinite}
.z2 .k1{animation:ai6K1 8s cubic-bezier(.4,0,.2,1) infinite}
.z2 .k2{animation:ai6K2 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ai6K0{0%,36%{transform:none}44%,92%{transform:translateX(34px)}100%{transform:none}}
@keyframes ai6K1{0%,38%{transform:none}46%,92%{transform:translateX(-28px)}100%{transform:none}}
@keyframes ai6K2{0%,40%{transform:none}48%,92%{transform:translateX(22px)}100%{transform:none}}
/* 3 · a token passes through the engine; the core beats; the decision lands */
.z3 .tok{animation:ai6Tok 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ai6Tok{0%,50%{transform:translateX(0);opacity:0}52%{opacity:1}58%,61%{transform:translateX(92px);opacity:1}64%{transform:translateX(92px);opacity:0}100%{transform:translateX(92px);opacity:0}}
.z3 .core{animation:ai6Core 8s ease infinite}
@keyframes ai6Core{0%,56%{opacity:.3}59%,66%{opacity:1}72%,100%{opacity:.3}}
.z3 .ok{animation:ai6Ok 8s ease infinite}
@keyframes ai6Ok{0%,64%{opacity:0}68%,96%{opacity:1}100%{opacity:0}}
/* 4 · the result is posted as a new row */
.z4 .nr{animation:ai6Nr 8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ai6Nr{0%,75%{transform:translateY(-14px);opacity:0}82%,96%{transform:none;opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.h2-ai6 *{animation:none!important}.ai6-viz .hl{opacity:0}.z3 .ok,.z4 .nr{opacity:1}.z3 .tok{opacity:0}}

@media (max-width:1000px){
  .h2-ai6-flow{grid-template-columns:1fr 1fr;row-gap:22px;column-gap:22px}
  .ai6-c::after,.ai6-pass,.h2-ai6-loop{display:none}
}
@media (max-width:640px){.h2-ai6-flow{grid-template-columns:1fr}}

/* ── 19 Sep 2026 · the people band, editorial (.h2-people-v2) ────────────
   Heading and one line on top, the team as one cinematic frame across the
   band, the three roles as three even columns under it. */
.h2-people-v2{display:grid;row-gap:clamp(36px,4vw,60px)}
.h2-pv2-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(32px,5vw,96px);align-items:end}
.h2-pv2-top .h2-h{margin:0;max-width:none}
.h2-pv2-lede{margin:0;font:400 clamp(16px,1.2vw,18.5px)/1.6 "Inter",sans-serif;color:var(--soft);max-width:40ch;justify-self:end}
.h2-people-v2 .h2-people-shot{position:relative;margin:0;width:100%;height:auto!important;min-height:0!important;aspect-ratio:2.2/1!important;align-self:auto!important;overflow:hidden;box-shadow:none!important}
.h2-people-v2 .h2-people-zoom img{object-position:50% 50%}
.h2-pv2-roles{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,72px);row-gap:28px;margin:0}
.h2-pv2-roles .h2-person{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;row-gap:6px;align-items:start;padding:0;margin:0}
.h2-pv2-roles .h2-person-ic{grid-row:span 2;width:56px;height:56px;margin:0}
.h2-pv2-roles .h2-person b{grid-column:2;font:500 clamp(18px,1.4vw,21px)/1.2 "Montserrat",sans-serif;letter-spacing:-.01em;color:var(--navy)}
.h2-pv2-roles .h2-person span{grid-column:2;font:400 15px/1.6 "Inter",sans-serif;color:var(--soft);max-width:34ch}
@media (max-width:1000px){
  .h2-pv2-top{grid-template-columns:1fr;row-gap:16px}
  .h2-pv2-lede{justify-self:start}
  .h2-people-v2 .h2-people-shot{aspect-ratio:16/9!important}
  .h2-pv2-roles{grid-template-columns:1fr}
}
/* the icon sits on the title's row, so titles and texts line up across the
   three columns whatever the length of each text */
.h2-pv2-roles .h2-person{grid-template-rows:56px auto}
.h2-pv2-roles .h2-person-ic{grid-row:1;grid-column:1;align-self:center;position:static;transform:none}
.h2-pv2-roles .h2-person b{grid-row:1;align-self:center;margin:0}
.h2-pv2-roles .h2-person span{grid-row:2;margin:0}

/* 21 Sep 2026 · the particle loader is back (Bazil: "I like the previous
   logo animation load better, particles, but it needs to be better"). The
   dots draw on a full-screen canvas in the paper sheet; the svg is only the
   mark's measure now; the two-tone curtain exit is unchanged. */
#tpLoader.dots .tpl-canvas{position:absolute;inset:0;display:block;pointer-events:none;z-index:0}
#tpLoader.dots .tpl-center{z-index:1}
#tpLoader.dots .tpl-field{opacity:0!important}
#tpLoader.dots .tpl-word{visibility:hidden}

/* ── 21 Sep 2026 · Bazil's review batch ──────────────────────────────────
   "2 lines only description, close to title, same for all the other UI UX",
   "start from the top", "put the number and title in their own box",
   "have a flow of movement every 3 seconds". */

/* a card's words: the description sits tight under its title, holds to two
   lines, and every card in a row starts from the same top edge */
.h2-pv2-roles{align-items:start}
.h2-pv2-roles .h2-person{grid-template-rows:auto auto;row-gap:4px;align-items:start;align-content:start}
.h2-pv2-roles .h2-person-ic{grid-row:1 / span 2;align-self:start}
.h2-pv2-roles .h2-person b{grid-row:1;align-self:end;padding-top:6px}
.h2-pv2-roles .h2-person span{grid-row:2;max-width:40ch;line-height:1.5;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
/* the same two-line rule wherever a short card description sits under a title */
.h2-mt2-panel figcaption span,.h2-begin-card p,.h2-stop p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

/* the meet band: each step is its own box, number and title together */
.h2-mt2-cap{display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;
  font:600 13px/1 "Inter",sans-serif;letter-spacing:.01em}
.h2-mt2-cap b{display:inline-grid;place-items:center;width:26px;height:26px;margin:0;background:var(--elec,#0520F5);color:#fff;
  font:600 13px/1 "Montserrat",sans-serif}
.h2-mt2-box > .h2-mt2-cap{background:#0A1C7A;padding:5px 14px 5px 5px}

/* one flow of movement down the path every three seconds: in from the two
   ways, through the sixty minutes, into what you leave with */
.h2-mt2-bracket i:nth-child(3)::after,.h2-mt2-stem::after{content:"";position:absolute;left:-1.5px;top:0;width:3px;height:12px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);opacity:0;animation:h2mt2Flow 3s cubic-bezier(.45,0,.2,1) infinite}
.h2-mt2-stem{position:relative}
.h2-mt2-stem::after{animation-delay:.55s}
@keyframes h2mt2Flow{0%{top:0;opacity:0}10%{opacity:.95}46%{top:calc(100% - 12px);opacity:.95}58%,100%{top:calc(100% - 12px);opacity:0}}
.h2-mt2-cap b{animation:h2mt2Step 3s var(--ease) infinite}
.h2-mt2-row + .h2-mt2-bracket + .h2-mt2-cap b{animation-delay:.6s}
.h2-mt2-box > .h2-mt2-cap b{animation-delay:1.2s}
.h2-mt2-box li i{animation:h2mt2Out 3s var(--ease) infinite;animation-delay:1.5s}
@media (prefers-reduced-motion:reduce){.h2-mt2-bracket i:nth-child(3)::after,.h2-mt2-stem::after,.h2-mt2-cap b,.h2-mt2-box li i{animation:none}}
/* the bracket into step 2 is a solid hairline (house rule: no dotted lines) */
.h2-mt2-bracket::before{border-top:1px solid rgba(255,255,255,.3)}
.h2-mt2-bracket i{border-left:1px solid rgba(255,255,255,.3)}

/* ── 22 Sep 2026 · no zoom on hover, anywhere (Bazil: "again remove zoom in
   effects", "I want better than zoom in effect") ─────────────────────────── */
.h2-case:hover img,.h2-tile:hover img,.h2-people-shot:hover img,.h2-cityshot:hover img,.h2-pick:hover .h2-pick-shot img,.h2-people-shot:hover .h2-people-zoom{transform:none!important}
.h2-film-btn:hover s,.h2-film .h2-film-btn:hover s{transform:none!important}
.h2-tile:hover .h2-tile-ic,.h2-tile:focus-visible .h2-tile-ic,.h2-cap.lit .h2-cap-ic svg,.h2-cap:hover .h2-cap-ic svg{transform:none!important}
.h2-tile:hover .tp-iso,.h2-scale-keys li:hover .tp-iso,.h2-stop:hover .tp-iso,.h2-person:hover .tp-iso,.h2-fq summary:hover .tp-iso,.h2-cap:hover .tp-iso{transform:none!important}
/* the three ways in: each card is the link now. The picture holds still and
   a cue rises over its foot, saying what the click does. */
a.h2-pick{text-decoration:none;color:inherit;cursor:pointer}
.h2-pick-go{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 18px;
  background:var(--elec);color:#fff;font:600 13.5px/1 "Inter",sans-serif;letter-spacing:.01em;transform:translateY(101%);transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.h2-pick-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:translateX(-6px);transition:transform .42s cubic-bezier(.2,.7,.2,1) .06s}
.h2-pick:hover .h2-pick-go,.h2-pick:focus-visible .h2-pick-go{transform:none}
.h2-pick:hover .h2-pick-go svg,.h2-pick:focus-visible .h2-pick-go svg{transform:none}
@media (hover:none){.h2-pick-go{display:none}}
@media (prefers-reduced-motion:reduce){.h2-pick-go,.h2-pick-go svg{transition:none}}

/* 23 Sep 2026 (Foosang: "upgrade our photo first before sharing at our web
   sites"): the two meet panels carry Tenthpin's own photographs instead of the
   generated clips, so the picture rule has to cover an img as well. */
.h2-mt2-screen img{width:100%;height:100%;object-fit:cover;display:block}

/* ── 23 Sep 2026 · Bazil's live pass on the home page ─────────────────────
   "put the font more bottom and the read the story appear top left instead,
   maybe in blue colour or line", "watch the transformation must be better
   positioned or coloured", "why icon not animating when hover", "the
   placement can be more at the bottom", "explore only", "I kinda like this
   premium effect, maybe more subtle without outline". */

/* 1 · Case tiles: the words sit lower, and the cue is a line of white type on
   an electric rule at the TOP LEFT, clear of the title. It is a direct child
   of the tile now, so it anchors to the frame and not to the words block. */
.h2-case > div{bottom:clamp(9px,.9vw,15px)}
.h2-case > .h2-more{position:absolute;z-index:3;top:clamp(13px,1.3vw,20px);left:clamp(16px,1.5vw,24px);
  right:auto;bottom:auto;display:inline-block;width:auto;margin:0;padding-bottom:5px;
  color:#fff;font:600 12.5px/1.2 "Inter",sans-serif;letter-spacing:.01em;
  border-bottom:2px solid var(--elec);text-shadow:0 1px 6px rgba(0,0,0,.5);
  opacity:0;transition:opacity .3s var(--ease)}
.h2-case:hover > .h2-more,.h2-case:focus-visible > .h2-more{opacity:1}

/* 2 · The film label off the dark fabric at the foot and onto the clean top
   left, on the same electric rule, so it reads on any frame of the clip. */
.h2-film .h2-film-btn span{top:clamp(15px,1.7vw,24px);bottom:auto;padding-bottom:5px;
  border-bottom:2px solid var(--elec);text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* 3 · The object runs its own action while the tile is pointed at. The 18 Sep
   rule that stopped the line DRAW on hover stopped every animation inside the
   icon, the object's action with it; only the draw is stopped now. */
.h2-tile:hover .h2-tile-ic .tp-draw,.h2-tile:focus-visible .h2-tile-ic .tp-draw{animation:none;stroke-dasharray:none}
.h2-tile:hover .h2-tile-ic .tp-act,.h2-tile:focus-visible .h2-tile-ic .tp-act{animation-duration:1.5s;animation-delay:-.9s}

/* 4 · The sector words sit at the foot of the frame. */
.h2-tile-lab,.h2-tile.lead .h2-tile-lab{padding-bottom:clamp(9px,.9vw,14px)}

/* 5 · One word, at the foot on the right, on the same rule. */
.h2-tile > .h2-more{position:absolute;z-index:3;right:clamp(16px,1.5vw,24px);bottom:clamp(11px,1.1vw,17px);
  left:auto;top:auto;display:inline-block;width:auto;margin:0;padding-bottom:5px;
  color:#fff;font:600 12.5px/1.2 "Inter",sans-serif;letter-spacing:.01em;
  border-bottom:2px solid var(--elec);text-shadow:0 1px 6px rgba(0,0,0,.5);
  opacity:0;transition:opacity .3s var(--ease)}
.h2-tile:hover > .h2-more,.h2-tile:focus-visible > .h2-more{opacity:1}

/* 6 · The assessment cards keep the bar that slides up over the picture, the
   one effect he likes, but the outline goes and the wash is halved. */
.h2-pick,.h2-pick:hover,.h2-pick:focus-within{outline:none!important}
.h2-pick-shot::after{background:linear-gradient(180deg,rgba(5,32,245,0) 0%,rgba(5,32,245,.16) 100%)}
.h2-pick-go{height:40px;padding:0 16px;font-size:13px;background:rgba(5,32,245,.94)}

/* the phone stack, restated last (house rule) */
@media (hover:none){.h2-case > .h2-more,.h2-tile > .h2-more{display:none}}
@media (max-width:640px){
  .h2-case > div{bottom:10px}
  .h2-tile-lab,.h2-tile.lead .h2-tile-lab{padding-bottom:12px}
  .h2-film .h2-film-btn span{top:12px;left:14px}
}

/* 24 Sep 2026 (Bazil: "read story and watch transformation is not clear
   enough, maybe put them in blue boxes when hover"). The cues were white type
   on a thin electric rule, and the film's label sat on the bright top-left of
   the poster where white type disappears. Both are now the solid electric box
   he kept on the assessment cards (.h2-pick-go): the film label is a box at
   rest, since it is the only words that say the frame is a film, and lifts a
   touch on hover; "Read the story" and the sector "Explore" rise into their
   box on hover. Same face, same size, one cue language across the page. */
.h2-film .h2-film-btn span{padding:0 16px;height:40px;border-bottom:0;text-shadow:none;
  background:rgba(5,32,245,.94);color:#fff;font:600 13.5px/40px "Inter",sans-serif;letter-spacing:.01em;
  box-shadow:0 8px 22px -12px rgba(13,21,38,.55);transition:background .25s var(--ease),transform .25s var(--ease)}
.h2-film .h2-film-btn:hover span,.h2-film .h2-film-btn:focus-visible span{background:var(--elec);transform:translateY(-2px)}
.h2-case > .h2-more,.h2-tile > .h2-more{padding:0 14px;height:38px;border-bottom:0;text-shadow:none;
  background:rgba(5,32,245,.94);color:#fff;font:600 13px/38px "Inter",sans-serif;letter-spacing:.01em;
  box-shadow:0 8px 22px -12px rgba(13,21,38,.55);transform:translateY(-6px);
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.h2-tile > .h2-more{transform:translateY(6px)}
.h2-case:hover > .h2-more,.h2-case:focus-visible > .h2-more,.h2-tile:hover > .h2-more,.h2-tile:focus-visible > .h2-more{opacity:1;transform:none}

/* the phone stack, restated last (house rule) */
@media (hover:none){.h2-case > .h2-more,.h2-tile > .h2-more{display:none}}
@media (max-width:640px){
  .h2-film .h2-film-btn span{top:12px;left:14px;height:34px;line-height:34px;padding:0 12px;font-size:12.5px}
}

/* 24 Sep 2026 (Bazil, phone screenshot: "make sure home view looks good, this
   looks off"). The hero photograph carried the DESKTOP fade on a phone: the
   90deg white wash that hides the picture under the copy column on a wide
   screen, which on a phone (copy above, picture below) washed out the left
   third of the frame for no reason. Below 1000px the picture is clean and
   full bleed; the phone stack is restated last, per the house rule. */
@media (max-width:1000px){
  .h2-hero-shot::before{background:none}
  .h2-hero-shot{margin-left:0}
  .h2-hero-shot img,.h2-hero-shot video{object-position:50% center}
}

/* 24 Sep 2026 (Bazil, people band: "align at the top properly the description
   and the title"). The lede sat centred against the two-line title's foot;
   both now start at the top, the lede's first line on the title's first line. */
.h2-pv2-top{align-items:start}
.h2-pv2-lede{padding-top:.42em}
@media (max-width:1000px){.h2-pv2-lede{padding-top:0}}

/* 24 Sep 2026 (Bazil: "the title can be bigger", "a 2 line title"). Two lines
   at 6.4vw. The copy column is only 526px at 1440, so the title is let out of
   it (max-content) and runs to where the photograph's white run is still
   near white: measured 661px for "The SAP partner" at 92px against 764px of
   near-white from the title's left edge at 1440, 693 at 1280, 852 at 1680. */
@media (min-width:1001px){
  .h2-hero h1{font-size:clamp(46px,6.4vw,118px);width:max-content;max-width:none}
  .h2-hero-copy{overflow:visible}
}
@media (max-width:1000px){.h2-hero h1{font-size:clamp(44px,11.5vw,72px)}}

/* 24 Sep 2026, evening (Bazil: "don't cut the P"): the sheen crossing SAP and
   Life sciences read as a slice through whichever letter it was passing. No
   sweep: the two lines are solid navy and electric, the outline line as it was. */
.h2-scale h2 span:nth-child(1),.h2-scale h2 span:nth-child(2){animation:none;background-image:none;background-color:transparent;
  -webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor}
.h2-scale h2 span:nth-child(1){color:var(--navy)}
.h2-scale h2 span:nth-child(2){color:var(--elec)}

/* 26 Sep 2026 (brought in from the live link, 27 Sep) · the meet band holds
   its whole diagram. The diagram was laid absolutely over the band (top:0
   bottom:0) while the band took its height from the words alone, so on wide
   screens the "Two ways in" step sat on the top edge and "You leave with" ran
   out of the bottom, clipped. On desktop the words and the diagram now share
   one grid cell, so the band is as tall as the taller of the two. */
@media (min-width:1101px){
  .h2-close{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
  .h2-close > .h2-in,.h2-close > .h2-meet{grid-area:1 / 1}
  .h2-close > .h2-meet{position:relative;top:auto;bottom:auto;left:auto;right:auto;margin-left:50%;height:auto}
}
@media (min-width:1101px) and (max-width:1280px){
  .h2-close > .h2-meet{margin-left:53%}
}
/* 29 Sep 2026 (Arifee: no case studies until further notice): the proof band
   shows three past events in the case tiles; one link under them to the page */
#proof .h2-proof-all{margin:clamp(24px,3.2vh,36px) 0 0;font:600 15px/1.4 "Inter",sans-serif}
#proof .h2-proof-all a{color:#0D1526;text-decoration:none;transition:color .25s}
#proof .h2-proof-all a b{color:#0520F5;font-weight:600}
#proof .h2-proof-all a:hover{color:#0520F5}

/* ── next-event section under the hero (Midnight + Cosmo) ──────────────
   Reads the events list, so it always shows the next upcoming event. The angled
   Cosmo panel and the outline frame echo the event key visual, in our colours. */
.h2-evb{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:clamp(56px,9vh,104px) 0;
  background:radial-gradient(70% 120% at 10% 0%,rgba(5,32,245,.35) 0%,rgba(5,32,245,0) 60%),linear-gradient(120deg,#030C45 0%,#06156A 55%,#08197A 100%)}
.h2-evb::before{content:"";position:absolute;z-index:-2;top:0;bottom:0;right:0;width:44%;
  background:linear-gradient(160deg,#0520F5 0%,#1A36FF 55%,#3450FF 100%);clip-path:polygon(32% 0,100% 0,100% 100%,0 100%)}
.h2-evb::after{content:"";position:absolute;z-index:-3;inset:0;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.6px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 55%);mask-image:linear-gradient(90deg,#000 0%,transparent 55%)}
.h2-evb-frame{position:absolute;z-index:-1;top:14%;bottom:14%;right:30%;width:min(26vw,380px);border:2px solid rgba(140,158,255,.85);transform:skewX(-32deg);pointer-events:none}
.h2-evb-frame::after{content:"";position:absolute;left:-60%;right:30%;bottom:-2px;height:2px;background:linear-gradient(90deg,rgba(140,158,255,0),rgba(140,158,255,.85))}
.h2-evb-in{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.h2-evb-kick{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0}
.h2-evb-kick span{display:inline-flex;align-items:center;gap:10px;font:600 12px/1.3 "Inter",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8C9EFF}
.h2-evb-kick span::before{content:"";width:8px;height:8px;background:#5B7BFF;animation:h2EvbPulse 2.4s ease-out infinite}
.h2-evb-kick b{padding:5px 11px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);font:600 12px/1.2 "Inter",sans-serif;color:#fff}
.h2-evb-h{margin:18px 0 0;font:600 clamp(36px,4.6vw,68px)/1.02 "Montserrat",sans-serif;letter-spacing:-.025em;color:#fff;text-wrap:balance}
.h2-evb-h em{display:block;margin-top:14px;font-size:.5em;font-style:normal;font-weight:500;line-height:1.15;letter-spacing:-.01em;color:#8C9EFF}
.h2-evb-h::after{content:"";display:block;width:120px;height:3px;margin-top:26px;background:linear-gradient(90deg,#5B7BFF,rgba(91,123,255,0))}
.h2-evb-meta{list-style:none;display:flex;flex-wrap:wrap;gap:10px 28px;margin:22px 0 0;padding:0}
.h2-evb-meta li{display:inline-flex;align-items:center;gap:10px;font:500 15.5px/1.4 "Inter",sans-serif;color:rgba(255,255,255,.88)}
.h2-evb-meta li::before{content:"";width:6px;height:6px;background:#5B7BFF}
.h2-evb-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}
.h2-evb-go{display:inline-flex;align-items:center;gap:8px;padding:16px 24px;background:#fff;color:#06156A;text-decoration:none;font:600 15px/1 "Montserrat",sans-serif;letter-spacing:.02em;transition:background .2s,color .2s}
.h2-evb-go b{transition:transform .2s}
.h2-evb-go:hover{background:#0520F5;color:#fff}
.h2-evb-go:hover b{transform:translateX(3px)}
.h2-evb-more{font:500 15px/1.3 "Inter",sans-serif;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.h2-evb-more:hover{text-decoration-color:#fff}
.h2-evb-go:focus-visible,.h2-evb-more:focus-visible,.h2-evb-next a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.h2-evb-side{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(28px,4vh,44px)}
.h2-evb-badge{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.h2-evb-badge img{display:block;width:clamp(170px,15vw,230px);height:auto}
.h2-evb-rule{display:block;width:clamp(170px,15vw,230px);height:2px;background:rgba(255,255,255,.7)}
.h2-evb-badge b{font:600 clamp(16px,1.6vw,22px)/1.2 "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff;text-align:right}
.h2-evb-next{width:min(100%,340px);padding:18px 20px 8px;background:rgba(3,12,69,.55);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.h2-evb-next p{margin:0 0 6px;font:600 11px/1.3 "Inter",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#C5CEFF}
.h2-evb-next ul{list-style:none;margin:0;padding:0}
.h2-evb-next a{display:grid;grid-template-columns:86px 1fr;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;font:500 14px/1.4 "Inter",sans-serif}
.h2-evb-next time{font-weight:600;font-size:13px;color:#8C9EFF;white-space:nowrap}
.h2-evb-next a:hover span{text-decoration:underline;text-underline-offset:3px}
@keyframes h2EvbPulse{0%{box-shadow:0 0 0 0 rgba(91,123,255,.7)}70%{box-shadow:0 0 0 8px rgba(91,123,255,0)}100%{box-shadow:0 0 0 0 rgba(91,123,255,0)}}
@media (max-width:900px){
  .h2-evb-in{grid-template-columns:1fr}
  .h2-evb::before{width:100%;top:auto;height:58%;clip-path:polygon(0 22%,100% 0,100% 100%,0 100%)}
  .h2-evb-frame{right:-10%;top:auto;bottom:6%;height:30%;width:60vw}
  .h2-evb-side{align-items:flex-start}
  .h2-evb-badge{align-items:flex-start}
  .h2-evb-badge b{text-align:left}
  .h2-evb-next{width:100%}
}
@media (prefers-reduced-motion:reduce){.h2-evb-kick span::before{animation:none}}
.h2-evb-org{display:flex;align-items:center;gap:12px;margin:0 0 22px}
.h2-evb-org span{font:500 12px/1.3 "Inter",sans-serif;letter-spacing:.06em;color:rgba(255,255,255,.66)}
.h2-evb-org img{display:block;height:30px;width:auto}
/* Gold Sponsor in gold, as on the event key visual */
.h2-evb-badge.is-gold .h2-evb-rule{background:#FFCC00}
.h2-evb-badge.is-gold b{color:#FFCC00}
/* SAP Gold Partner badge: top of the right column, on white so the SAP blue stays visible */
.h2-evb-pbadge{display:block}
.h2-evb-pbadge img{display:block;height:clamp(48px,4.2vw,62px);width:auto;filter:drop-shadow(0 6px 14px rgba(3,12,69,.45))}
@media (max-width:900px){.h2-evb-pbadge img{height:40px}}
.h2-evb-badge.is-gold b{font-weight:700;letter-spacing:.16em}
.h2-evb-org img{height:clamp(40px,3.4vw,50px)}
@media (max-width:900px){.h2-evb-org img{height:38px}}

/* client logos in three rows (2 Oct 2026): the middle row runs the other way, each row at
   its own pace so the columns never line up; hovering a row pauses it */
.h2-marq.rows3{display:grid;row-gap:clamp(6px,1.2vh,14px)}
.h2-marq.rows3 .logoslot{height:64px}
.h2-marq.rows3 .logomarq .logomarq-half{animation-duration:72s}
.h2-marq.rows3 .logomarq.rev .logomarq-half{animation-direction:reverse;animation-duration:80s}
.h2-marq.rows3 .logomarq:nth-child(3) .logomarq-half{animation-duration:88s}
.h2-marq.rows3 .logomarq:hover .logomarq-half{animation-play-state:paused}
.h2-marq.rows3 .logo-img{max-height:40px}
.h2-marq.rows3 img[src*="envision"],.h2-marq.rows3 img[src*="hengrui"],.h2-marq.rows3 img[src*="gensci"],.h2-marq.rows3 img[src*="khb"],.h2-marq.rows3 img[src*="wondfo"],.h2-marq.rows3 img[src*="cr-jiangzhong"],.h2-marq.rows3 img[src*="edding"],.h2-marq.rows3 img[src*="innovent"],.h2-marq.rows3 img[src*="fosun"]{max-height:48px}
@media (max-width:760px){.h2-marq.rows3 .logoslot{height:52px}.h2-marq.rows3 .logo-img{max-height:30px}}
.h2-marq.rows3 img[src*="bmw"],.h2-marq.rows3 img[src*="mercedes"],.h2-marq.rows3 img[src*="honda"]{max-height:52px}
/* row spacing as on the reference: about 8.7% of the width between row centres */
.h2-marq.rows3{row-gap:clamp(28px,4.3vw,92px)}
@media (max-width:760px){.h2-marq.rows3{row-gap:22px}}
.h2-marq.rows3 img[src*="tunetalk"]{max-height:54px}
/* revised logos (3 Oct 2026) whose marks are small inside their artwork */
.h2-marq.rows3 img[src*="ascletis"],.h2-marq.rows3 img[src*="cspc"],.h2-marq.rows3 img[src*="mercedes-benz"],.h2-marq.rows3 img[src*="hengrui"]{max-height:52px}
/* client logos in one row (3 Oct 2026): every client in a single slow loop; hover pauses it */
.h2-marq.row1 .logomarq{display:flex;width:max-content}
.h2-marq.row1 .logoslot{height:72px}
.h2-marq.row1 .logomarq-half{animation-duration:140s}
.h2-marq.row1:hover .logomarq-half{animation-play-state:paused}
.h2-marq.row1 .logo-img{max-height:42px}
.h2-marq.row1 img[src*="bmw"],.h2-marq.row1 img[src*="tunetalk"],.h2-marq.row1 img[src*="ascletis"],.h2-marq.row1 img[src*="cspc"],.h2-marq.row1 img[src*="hengrui"],.h2-marq.row1 img[src*="envision"],.h2-marq.row1 img[src*="gensci"],.h2-marq.row1 img[src*="khb"],.h2-marq.row1 img[src*="wondfo"],.h2-marq.row1 img[src*="cr-jiangzhong"],.h2-marq.row1 img[src*="edding"],.h2-marq.row1 img[src*="innovent"],.h2-marq.row1 img[src*="cp-group"],.h2-marq.row1 img[src*="bmc"],.h2-marq.row1 img[src*="zhongsheng"]{max-height:52px}
@media (max-width:760px){.h2-marq.row1 .logoslot{height:56px}.h2-marq.row1 .logo-img{max-height:32px}}
/* equal visual size (5 Oct 2026): every logo is pre-sized to the same ink area on a 200px
   canvas (assets/clients/strip/), so one height fits all and the per-logo tweaks are off */
.h2-marq.row1 .logoslot,.h2-marq.row1 .logoslot:has(img[src*="/strip/"]){width:auto;height:76px}
.h2-marq.row1 .logo-img,.h2-marq.row1 img[src*="/strip/"]{height:72px;max-height:none;width:auto;max-width:none}
@media (max-width:760px){.h2-marq.row1 .logoslot,.h2-marq.row1 .logoslot:has(img[src*="/strip/"]){height:56px}.h2-marq.row1 .logo-img,.h2-marq.row1 img[src*="/strip/"]{height:52px}}
.h2-marq.row1 .logoslot,.h2-marq.row1 .logoslot:has(img[src*="/strip/"]),.ls-marq.row1 .logoslot,.ls-marq.row1 .logoslot:has(img[src*="/strip/"]){height:88px}
.h2-marq.row1 img[src*="/strip/"],.ls-marq.row1 img[src*="/strip/"]{height:84px}
@media (max-width:760px){.h2-marq.row1 .logoslot,.h2-marq.row1 .logoslot:has(img[src*="/strip/"]),.ls-marq.row1 .logoslot,.ls-marq.row1 .logoslot:has(img[src*="/strip/"]){height:62px}.h2-marq.row1 img[src*="/strip/"],.ls-marq.row1 img[src*="/strip/"]{height:58px}}