/**
 * Home 3 — replica of the 10pearls.com homepage layout.
 *
 * Built from the client-supplied source download. Structure, geometry, type
 * scale, motion and palette follow the original: dark translucent 76px header,
 * full-viewport slick hero with vertical progress counter and an expertise bar
 * pinned to its lower edge, indigo sticky anchor bar, 5-up logo grid, 520px
 * case-study slider with an 8px tab indicator, difference grid, awards,
 * insights, team strip, map and Let's-talk steps.
 *
 * Palette: the reference's indigo scheme has been replaced with Inabia ember.
 * The whole page resolves through four tokens on .page-home3 --
 * --h3-brand / --h3-brand-dark / --h3-brand-subtle / --h3-brand-surface --
 * so re-skinning is a four-line change. The reference's lime hover accent is
 * likewise replaced (--h3-hover). Only the neutrals are kept as measured:
 * near-black #010101 and void #171616.
 *
 * Namespaced `.h3-` and loaded only on /home3/ via the conditional enqueue and
 * `page-home3` body class in functions.php, so it cannot affect any other
 * template. Imagery is generated CSS/SVG — no downloaded file is referenced —
 * and the original's named clients, awards and headcount are replaced with
 * Inabia's own, since those are factual claims about a different company.
 *
 * @package Inabia
 */

.page-home3{
  --h3-black:#010101;
  --h3-void:#171616;

  /* Brand scheme — swap these four and the whole page follows: buttons, the
     anchor bar, the CONTACT pill, tab indicators, stats, links and icons all
     resolve through them. */
  --h3-brand:#F78F1B;
  --h3-brand-dark:#D9650A;
  --h3-brand-subtle:#FFE2BF;
  --h3-brand-surface:#FFF6EC;

  /* Legacy aliases so existing rules keep resolving. */
  --h3-indigo:var(--h3-brand);
  --h3-indigo-deep:var(--h3-brand-dark);
  --h3-peri:var(--h3-brand-subtle);
  /* Hover/active pop. The reference used lime #D4FF27 here; swapped to the
     bright ember tint so it stays on-brand. */
  --h3-hover:#FFAE45;
  --h3-ink:#0A0A0A;
  --h3-body:#666666;
  --h3-paper:#FFFFFF;
  --h3-paper-2:#FAFAFA;
  --h3-line:#E6E6E6;
  --h3-line-d:rgba(255,255,255,.16);
  --h3-head-h:88px;

  background:var(--h3-paper);
  color:var(--h3-ink);
  font-family:'Figtree',sans-serif;
}
.page-home3 #nav,
.page-home3 .site-footer{display:none !important;}

.h3-inner{max-width:1280px;width:100%;margin:0 auto;padding:0 60px;}
.h3-sec{padding:88px 0;}
.h3-alt{background:var(--h3-paper-2);}

.h3-h2{font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-.5px;}
.h3-sub{font-size:16px;line-height:26px;color:var(--h3-body);margin-top:14px;}
.h3-center{text-align:center;}
/* Visually hidden, still in the accessibility tree: for a heading the layout
   does not need to show but the document outline does. */
.h3-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
.h3-center .h3-sub{margin-left:auto;margin-right:auto;max-width:720px;}
.h3-glow{color:var(--h3-peri) !important;text-shadow:0 0 42px rgba(208,209,251,.35);}

/* Buttons — gradient fill, lime on hover/active (as the original) --------- */
.h3-btn{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;border-radius:8px;cursor:pointer;transition:all .25s ease;width:fit-content;
  white-space:nowrap;font-family:inherit;line-height:1;}
.h3-btn--filled{background:linear-gradient(270deg,var(--h3-brand) 0%,var(--h3-brand-dark) 100%);color:#fff;padding:14px 24px;border:1px solid transparent;}
.h3-btn--outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.65);padding:13px 24px;}
.h3-btn--dark{background:transparent;color:var(--h3-ink);border:1px solid var(--h3-ink);padding:13px 24px;}
.h3-btn--filled:hover,.h3-btn--outline:hover,.h3-btn--dark:hover,
.h3-btn--filled:active,.h3-btn--outline:active{background:var(--h3-hover);border-color:var(--h3-hover);color:#171616;text-decoration:none;}
.h3-btn .btn-arrow{display:inline-flex;align-items:center;flex-shrink:0;}

/* The hero CTA carries the ember fill straight from .h3-btn--filled above — no
   scoped override, so it hovers the same way every other primary CTA does. The
   white-on-dark treatment it used to have now lives on the header button. */
.h3-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:#fff;}
.h3-link svg{flex-shrink:0;}
.h3-link-dark{color:var(--h3-indigo);}

/* ==========================================================================
   HEADER — matched to the reference: 88px void-black bar, 48px logo hard left,
   19px capitalized nav with a brand underline on hover, a filled CONTACT pill
   in brand-subtle, and a search glyph at the far right.
   ========================================================================== */
.h3-head{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--h3-head-h);
  background:var(--h3-void);backdrop-filter:blur(6px);}
.h3-head-in{max-width:1750px;margin:0 auto;padding:0 56px;height:100%;display:flex;align-items:center;}
.h3-logo img{height:66px;width:auto;display:block;}
.h3-nav{display:flex;align-items:center;margin-left:auto;}
.h3-nav>a{color:#fff;font-size:19px;font-weight:400;text-transform:capitalize;white-space:nowrap;
  padding:10px 22px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s;}
.h3-nav>a:hover{border-bottom-color:var(--h3-brand);}
/* Panel-only link: shown by the mobile nav block, absent from the desktop bar. */
.h3-nav-contact{display:none;}
.h3-head-cta{display:flex;align-items:center;gap:22px;margin-left:22px;}
/* Filled with the brand gradient and sized up so it reads as the bar's one
   unmissable, solid object against the dark translucent header — everything
   else in the bar (nav links, search glyph) is a thin outline or a glyph, so
   this is deliberately the heaviest thing in it. A visible resting glow keeps
   it lit even before hover; hover deepens the fill, widens the glow and lifts
   the button to confirm interactivity. */
/* The one conversion control in the header, so it is allowed to be the
   loudest thing on the bar: a halo ring separates it from the dark ground, a
   slow sheen crosses it every few seconds to catch peripheral vision, and the
   arrow gives the eye somewhere to go. */
.h3-contact-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;
  color:#fff;background:linear-gradient(270deg,var(--h3-brand) 0%,var(--h3-brand-dark) 100%);
  font-size:12.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
  padding:11px 21px;border-radius:9px;
  white-space:nowrap;border:1px solid rgba(255,255,255,.24);
  box-shadow:0 8px 22px -6px rgba(217,101,10,.8),0 0 0 3px rgba(247,143,27,.13);
  transition:background .25s,box-shadow .25s,transform .2s;}
.h3-contact-btn>span,.h3-contact-btn>svg{position:relative;z-index:1;}
/* Sheen: transform-only, so it stays on the compositor. Idle for most of the
   cycle, then one pass -- a repeating glint would be noise, not a cue. */
.h3-contact-btn::before{content:'';position:absolute;top:0;bottom:0;left:0;width:42%;z-index:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.40) 50%,rgba(255,255,255,0) 100%);
  transform:translateX(-240%) skewX(-18deg);
  animation:h3CtaSheen 5.5s ease-in-out infinite;}
@keyframes h3CtaSheen{
  0%,68%{transform:translateX(-240%) skewX(-18deg);}
  100%{transform:translateX(330%) skewX(-18deg);}
}
.h3-contact-arrow{width:14px;height:14px;flex:0 0 14px;
  transition:transform .25s cubic-bezier(.4,0,.2,1);}
.h3-contact-btn:hover{background:linear-gradient(270deg,var(--h3-brand-dark) 0%,var(--h3-brand-dark) 100%);
  box-shadow:0 13px 30px -6px rgba(217,101,10,1),0 0 0 4px rgba(247,143,27,.22);
  transform:translateY(-2px);}
.h3-contact-btn:hover .h3-contact-arrow{transform:translateX(4px);}
.h3-contact-btn:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.h3-contact-btn:active{transform:translateY(0);
  box-shadow:0 5px 14px -6px rgba(217,101,10,.75),0 0 0 3px rgba(247,143,27,.13);}
.h3-search{background:none;border:none;color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;
  width:24px;height:24px;transition:opacity .2s;}
.h3-search:hover{opacity:.7;}
.h3-search svg{width:19px;height:19px;}
/* Search overlay — sits over the bar itself rather than pushing a panel below
   it, so the header height never changes when it opens. */
.h3-searchbar{position:absolute;inset:0;z-index:6;background:var(--h3-void);
  display:flex;align-items:center;gap:18px;padding:0 56px;}
/* Beats the UA [hidden] rule, which display:flex above would otherwise win over. */
.h3-searchbar[hidden]{display:none;}
.h3-searchbar form{flex:1;min-width:0;}
.h3-searchbar input{width:100%;background:none;border:none;outline:none;padding:0;
  color:#fff;font-family:inherit;font-size:22px;font-weight:400;}
.h3-searchbar input::placeholder{color:rgba(255,255,255,.5);}
.h3-searchbar input::-webkit-search-cancel-button{display:none;}
.h3-search-close{background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;
  width:28px;height:28px;display:grid;place-items:center;color:#fff;transition:opacity .2s;}
.h3-search-close:hover{opacity:.7;}
.h3-search-close svg{width:22px;height:22px;}
.h3-burger{display:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.08);color:#fff;align-items:center;justify-content:center;cursor:pointer;}
.h3-burger svg{width:18px;height:18px;}

/* ==========================================================================
   HERO — full viewport, slider + counter + expertise bar
   ========================================================================== */
.h3-herowrap{height:100dvh;min-height:830px;overflow:hidden;position:relative;background:var(--h3-black);}
.h3-hero{height:100%;width:100%;position:relative;}
.h3-slider{height:100%;position:relative;}
.h3-slide{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity .8s ease,visibility .8s ease;}
.h3-slide.is-active{opacity:1;visibility:visible;}
.h3-slide-bg{position:absolute;inset:0;top:var(--h3-head-h);z-index:0;background-size:cover;background-position:center;}
/* Light scrim. The client rejected the near-opaque black left column, so the
   photograph now stays visible edge to edge: a slate-navy left-side wash (max
   ~72%, tinted rather than pure black) that clears by 58% of the frame, plus a
   short fade up from the bottom
   for the expertise bar. Copy legibility is carried by the text-shadow on the
   slide copy below rather than by blacking out the image. */
/* Per-slide colour: --h3-shade (scrim) and --h3-lift (screen wash) are
   space-separated RGB triplets. js/home3.js samples the left side of each
   slide's photograph and sets both to a dark / mid tone of that image's own
   colour, so the shade reads as part of the picture rather than a fixed slate.
   A slide's 'shade' in page-home3.php pins them instead. The defaults below
   are the previous slate, used until the image has been sampled. */
.h3-slide{--h3-shade:18 24 36;--h3-lift:112 124 148;}
.h3-slide-bg::after{content:'';position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgb(var(--h3-shade) / .6) 0%,rgb(var(--h3-shade) / .22) 22%,rgb(var(--h3-shade) / 0) 40%),
    linear-gradient(90deg,rgb(var(--h3-shade) / .72) 0%,rgb(var(--h3-shade) / .6) 24%,rgb(var(--h3-shade) / .34) 40%,rgb(var(--h3-shade) / .1) 52%,rgb(var(--h3-shade) / 0) 58%);}
/* Light lift. Some photographs (AWS) are near-black on the left in the image
   itself, so the lighter scrim alone still read as a dark panel. This layer sits
   above the scrim and screen-blends a cool slate wash over the left side: screen
   raises dark pixels to a soft haze but barely moves pixels that are already
   bright, so well-lit photos are left almost untouched. */
.h3-slide-bg::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgb(var(--h3-lift) / .3) 0%,rgb(var(--h3-lift) / .22) 28%,rgb(var(--h3-lift) / .08) 42%,rgb(var(--h3-lift) / 0) 50%);}

/* Slide photography. TEMPORARY placeholders - see assets/home3-tmp/README.txt

   The art fades up out of the wrapper's black rather than cross-dissolving
   into the next photograph: parked at opacity 0 over a scaled-up frame, then
   faded in behind a short beat while the outgoing image is already on its way
   out, so there is a moment of clean black between two very differently lit
   slides. It keeps drifting back to 1:1 across the slide's ten seconds, which
   gives the still frame some life without ever reading as a pan. */
/* Zoomed in and anchored right: several photographs are flat near-black down
   their left third, so the frame is enlarged from the right edge to push that
   dead area out past the left side and bring the subject across under the copy.
   The settle-in drift runs 1.42 -> 1.3 around the same right-hand origin. */
.h3-slide-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.42);transform-origin:right center;transition:opacity .45s ease;}
.h3-slide.is-active .h3-slide-bg img{animation:h3HeroBgIn 10.6s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes h3HeroBgIn{
  0%{opacity:0;transform:scale(1.42);}
  4%{opacity:0;}
  16%{opacity:1;}
  100%{opacity:1;transform:scale(1.3);}
}

/* Foreground product shot, layered over a slide's art (slide 5 -- the Kymera
   phone over the light-streams ground). z-index 1 puts it above .h3-slide-bg
   and its scrim but below the copy at z-index 2, and it is confined to the
   right-hand band the 60%-wide copy column leaves free. Bottom clears the
   expertise bar by the same 200px the copy column uses, so the two agree.
   object-fit:contain -- this one must never be cropped. */
.h3-slide-fg{position:absolute;z-index:1;right:4%;top:var(--h3-head-h);bottom:170px;width:42%;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  /* Parked off the right edge; slides in when its slide becomes active and
     holds there until the slide fades out, at which point it resets for the
     next time round. The .18s delay lets the slide's own crossfade start
     first, so the phone arrives onto a settled frame rather than racing it.
     140% of a 34% column clears the viewport whatever the width, and
     .h3-slide's overflow:hidden means the parked state can never widen the
     page. */
  transform:translateX(140%);opacity:0;
  transition:transform .9s cubic-bezier(.22,.61,.36,1) .18s,opacity .6s ease .18s;}
.h3-slide.is-active .h3-slide-fg{transform:translateX(0);opacity:1;}
/* 80%, not 100%: at full height the phone met the header at the top of its
   band. Capping it here rather than padding the box keeps it centred, so the
   20% comes off as equal clearance above and below at every viewport size. */
.h3-slide-fg img{max-width:100%;max-height:80%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.6));}

/* Centred in the band between the fixed header and the expertise bar pinned to
   the hero's lower edge, rather than pushed down from the top — the copy is now
   tall enough that a fixed top offset ran it underneath that bar. */
.h3-slide .h3-inner{position:relative;z-index:2;height:100%;display:flex;align-items:center;
  padding-top:var(--h3-head-h);padding-bottom:200px;}
.h3-slide-contents{max-width:60%;display:flex;flex-direction:column;gap:18px;}

/* The eyebrows are full phrases now ("Software Engineering | Technology
   Consulting | Enterprise Platforms"), so the pill has to wrap rather than
   push the layout wide. */
.h3-tag{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(255,255,255,.45);border-radius:50px;
  padding:7px 22px;width:fit-content;max-width:100%;background:transparent;}
.h3-tag .tag-label{font-size:12px;font-weight:600;letter-spacing:1.6px;color:#fff;text-transform:uppercase;line-height:1.5;}

/* Platform lockup on the enterprise-platform slides, between the pill and the
   headline. Heights are set per vendor rather than shared: the wordmarks run
   from 1.4:1 (the Salesforce cloud) to 7.5:1 (Oracle), so one common height
   would make the wide ones read far larger than the tall one. The widths that
   come out of these are all 160-195px, which is the match the eye wants.
   Microsoft and ServiceNow are white marks, so the shadow is what keeps them
   legible where the slide art goes pale. */
.h3-slide-logo{display:block;line-height:0;margin:-2px 0;}
.h3-slide-logo img{display:block;width:auto;max-width:100%;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));}
.h3-slide-logo--microsoft img{height:34px;}
.h3-slide-logo--servicenow img{height:26px;}
.h3-slide-logo--salesforce img{height:78px;}
.h3-slide-logo--aws img{height:50px;}
.h3-slide-logo--oracle img{height:26px;}

/* Sized for the client's sentence-length headlines rather than the short
   two-line ones the layout originally carried. */
.h3-slide-contents h1,.h3-slide-contents h2{font-family:'Figtree',sans-serif;font-weight:700;line-height:1.16;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45),0 2px 22px rgba(0,0,0,.55);}
.h3-slide-contents p,.h3-slide-claims span{text-shadow:0 1px 2px rgba(0,0,0,.55),0 1px 14px rgba(0,0,0,.6);}
.h3-slide-contents h1{font-size:36px;}
.h3-slide-contents h2{font-size:36px;}
.h3-slide-contents p{font-size:17px;line-height:27px;color:rgba(255,255,255,.85);max-width:640px;}

/* Trust claims on slide 1. Three across on desktop, which needs a wider box
   than the two-up version had -- at 540px the third column squeezed the
   supporting labels ("Enterprise technology experience") into three lines. */
.h3-slide-claims{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 32px;
  max-width:720px;list-style:none;margin:4px 0 0;padding:0;}
.h3-slide-claims li{display:flex;flex-direction:column;gap:2px;}
.h3-slide-claims b{font-size:24px;font-weight:700;line-height:1;color:var(--h3-peri);
  text-transform:uppercase;letter-spacing:.4px;}
.h3-slide-claims span{font-size:13px;line-height:1.4;color:rgba(255,255,255,.78);}

/* --------------------------------------------------------------------------
   Slide copy entrance. Each part of the block arrives on its own line of
   motion rather than the whole column fading as one: the pill swings in from
   the left, the vendor lockup and the CTA zoom up, and the headline, body and
   claims rise. Keyed off .is-active as an animation (not a transition) so the
   run also happens for the slide that is already active at first paint, and
   replays every time a slide comes back round.

   The parked rules carry a transition as well: when .is-active is dropped the
   animation is removed, and the return to the parked state then eases out over
   .45s underneath the slide's own .8s crossfade instead of the copy blinking
   off the moment the fade begins.
   -------------------------------------------------------------------------- */
.h3-slide-contents>*{transition:opacity .45s ease,transform .45s ease;}
.h3-slide-contents .h3-tag{opacity:0;transform:translateX(-56px);}
.h3-slide-contents .h3-slide-logo{opacity:0;transform:scale(.84);}
.h3-slide-contents h1,
.h3-slide-contents h2,
.h3-slide-contents p{opacity:0;transform:translateY(32px);}
.h3-slide-contents .h3-slide-claims li{opacity:0;transform:translateY(22px);
  transition:opacity .45s ease,transform .45s ease;}
.h3-slide-contents .h3-slide-action{opacity:0;transform:scale(.7);}

.h3-slide.is-active .h3-tag{animation:h3HeroLeft .7s cubic-bezier(.22,.68,.24,1) .18s forwards;}
.h3-slide.is-active .h3-slide-logo{animation:h3HeroZoom .7s cubic-bezier(.22,.68,.24,1) .3s forwards;}
.h3-slide.is-active .h3-slide-contents h1,
.h3-slide.is-active .h3-slide-contents h2{animation:h3HeroUp .78s cubic-bezier(.2,.7,.2,1) .34s forwards;}
.h3-slide.is-active .h3-slide-contents p{animation:h3HeroUp .78s cubic-bezier(.2,.7,.2,1) .48s forwards;}
.h3-slide.is-active .h3-slide-claims li{animation:h3HeroUp .68s cubic-bezier(.2,.7,.2,1) forwards;}
.h3-slide.is-active .h3-slide-claims li:nth-child(1){animation-delay:.58s;}
.h3-slide.is-active .h3-slide-claims li:nth-child(2){animation-delay:.66s;}
.h3-slide.is-active .h3-slide-claims li:nth-child(3){animation-delay:.74s;}
/* The CTA overshoots a touch on the way in -- it is the one element on the
   slide meant to be reached for, and it lands last. */
.h3-slide.is-active .h3-slide-action{animation:h3HeroPop .62s cubic-bezier(.34,1.4,.5,1) .7s forwards;}

@keyframes h3HeroLeft{to{opacity:1;transform:none;}}
@keyframes h3HeroZoom{to{opacity:1;transform:none;}}
@keyframes h3HeroUp{to{opacity:1;transform:none;}}
@keyframes h3HeroPop{60%{opacity:1;transform:scale(1.05);}100%{opacity:1;transform:none;}}

/* Vertical counter, right edge */
.h3-counter{position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:10;display:flex;
  flex-direction:row;align-items:center;gap:10px;}
/* Every part of the counter sits directly on slide art, which runs from near
   black to near white between slides, so contrast can't come from opacity
   alone -- each element carries its own dark ground and a shadow. */
.h3-counter-num{font-size:14px;font-weight:600;color:#fff;letter-spacing:1px;line-height:1;
  text-shadow:0 1px 6px rgba(0,0,0,.75);}
.h3-counter-line{width:3px;height:80px;background:rgba(255,255,255,.3);border-radius:3px;position:relative;
  overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.28),0 1px 6px rgba(0,0,0,.4);}
.h3-counter-progress{position:absolute;top:0;left:0;width:100%;height:0;background:#fff;border-radius:3px;}
.h3-counter-progress.animating{height:100%;transition:height 10s linear;}
/* Positioned against .h3-counter (not the line, which clips its overflow):
   right:0 + a negative margin of half the button width centres it on the line. */
.h3-slide-nav{width:38px;height:38px;background-color:rgba(1,1,1,.55);border-radius:100%;position:absolute;
  right:0;margin-right:-17.5px;cursor:pointer;border:1px solid rgba(255,255,255,.55);display:grid;
  place-items:center;color:#fff;padding:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 12px rgba(0,0,0,.45);transition:background-color .2s,border-color .2s,transform .2s;}
.h3-slide-nav:hover,.h3-slide-nav:focus-visible{background-color:var(--h3-brand);border-color:var(--h3-brand);
  transform:scale(1.08);}
.h3-slide-nav svg{width:15px;height:15px;}
.h3-slide-nav-prev{top:-52px;}
.h3-slide-nav-next{bottom:-52px;}

/* ---- Expertise rail, pinned to the hero's lower edge --------------------
   The panel is the point: six links sitting bare on slide art were legible
   on the dark slides and washed out on the pale ones. A blurred dark pane
   gives them a constant ground, and lets the section read as one deliberate
   object rather than a row of loose captions.
   Cells are divided by hairlines instead of spaced by gaps, so the six read
   as a single instrument; the ember wipe on hover is the only motion. */
.h3-expertise{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:0 0 40px;}
.h3-exp-rail{background:linear-gradient(180deg,rgba(10,9,8,.76),rgba(1,1,1,.88));
  -webkit-backdrop-filter:blur(16px) saturate(125%);backdrop-filter:blur(16px) saturate(125%);
  border:1px solid rgba(255,255,255,.13);border-radius:16px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.42);}

/* Head strip: eyebrow on its own hairline-separated row inside the panel. */
.h3-exp-head{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.92);font-size:12px;
  font-weight:700;letter-spacing:2.4px;text-transform:uppercase;padding:13px 22px;
  border-bottom:1px solid rgba(255,255,255,.1);}
.h3-exp-head-dot{width:6px;height:6px;border-radius:50%;background:var(--h3-brand);flex-shrink:0;
  box-shadow:0 0 0 3px rgba(247,143,27,.22);}

.h3-exp-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;margin:0;padding:0;}
/* Hairline dividers via border-left, cleared on the first cell of each row --
   the mobile breakpoints re-clear it for their own column counts. */
.h3-exp-item{min-width:0;border-left:1px solid rgba(255,255,255,.1);}
.h3-exp-item:first-child{border-left:0;}
.h3-exp-item a{position:relative;display:flex;flex-direction:column;gap:14px;height:100%;
  padding:18px 16px 20px;color:#fff;text-decoration:none;isolation:isolate;}
/* Ember wipe: a tint that grows from the cell's foot on hover. z-index:-1 puts
   it behind the content within the link's own stacking context. */
.h3-exp-item a::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(247,143,27,.20),rgba(247,143,27,0));
  transform:scaleY(0);transform-origin:bottom;transition:transform .32s cubic-bezier(.4,0,.2,1);}
.h3-exp-item a::after{content:'';position:absolute;inset:auto 0 0 0;height:2px;
  background:linear-gradient(90deg,var(--h3-brand),var(--h3-hover));
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.4,0,.2,1);}
.h3-exp-item a:hover::before,.h3-exp-item a:focus-visible::before{transform:scaleY(1);}
.h3-exp-item a:hover::after,.h3-exp-item a:focus-visible::after{transform:scaleX(1);}

/* Top row: icon left, index right. The index and the arrow share one grid
   slot and cross-fade, which buys the affordance for no extra height -- and
   height is the scarce thing in a bar pinned inside the hero. */
.h3-exp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.h3-exp-ico{display:block;height:28px;width:28px;color:rgba(255,255,255,.9);
  transition:color .25s ease,transform .25s ease;}
.h3-exp-ico svg{width:100%;height:100%;}
.h3-exp-item a:hover .h3-exp-ico,.h3-exp-item a:focus-visible .h3-exp-ico{color:var(--h3-brand);
  transform:translateY(-2px);}
.h3-exp-meta{position:relative;display:grid;place-items:center;width:22px;height:18px;flex-shrink:0;}
.h3-exp-num,.h3-exp-go{grid-area:1/1;transition:opacity .25s ease,transform .25s ease;}
.h3-exp-num{font-size:11px;font-weight:700;letter-spacing:1px;color:rgba(255,255,255,.38);line-height:1;}
.h3-exp-go{display:grid;place-items:center;color:var(--h3-brand);opacity:0;transform:translateX(-5px);}
.h3-exp-go svg{width:16px;height:16px;}
.h3-exp-item a:hover .h3-exp-num,.h3-exp-item a:focus-visible .h3-exp-num{opacity:0;transform:translateX(5px);}
.h3-exp-item a:hover .h3-exp-go,.h3-exp-item a:focus-visible .h3-exp-go{opacity:1;transform:translateX(0);}

/* Labels run to six words, so they wrap to three lines in a sixth-width
   column. Sentence case at a tighter size reads better at that length than
   the all-caps this row used to carry, and the underline is gone -- the
   hairline grid and the hover wipe carry the affordance now.
   margin-top:auto bottom-aligns every label, so the row keeps a common
   baseline whether a cell wraps to two lines or four. */
.h3-exp-item p{font-size:13.5px;font-weight:600;letter-spacing:.1px;color:rgba(255,255,255,.88);
  line-height:1.4;margin:auto 0 0;transition:color .25s ease;}
.h3-exp-item a:hover p,.h3-exp-item a:focus-visible p{color:#fff;}
.h3-exp-item a:focus-visible{outline:2px solid var(--h3-brand);outline-offset:-2px;}

/* ==========================================================================
   ANCHOR BAR — indigo, 52px, sticky under the header
   ========================================================================== */
.h3-anchor{background-color:var(--h3-brand);height:52px;position:sticky;top:var(--h3-head-h);width:100%;z-index:95;}
/* Jump targets clear the sticky header + the 52px anchor bar, otherwise the
   section heading lands underneath the bar you just clicked. */
#expertise,#case-studies,#ai-workflow-automation,#servicenow,
#selected-experience,#advantages,#how-we-engage{scroll-margin-top:calc(var(--h3-head-h) + 62px);}
/* Zero-height alias at the top of #expertise, so "/#services" lands on the same spot. */
.h3-jump{display:block;height:0;scroll-margin-top:calc(var(--h3-head-h) + 62px);}
/* justify-content:center on a scroll container clips the overflow on BOTH
   sides and makes the start unreachable. margin:auto on the list centres it
   while it fits and lets it scroll from item one once it does not. */
.h3-anchor-in{display:flex;justify-content:flex-start;align-items:center;height:100%;overflow-x:auto;scrollbar-width:none;}
.h3-anchor-in::-webkit-scrollbar{display:none;}
/* Collapsed control is phone-only; the desktop bar shows the chips directly. */
.h3-anchor-toggle{display:none;}
.h3-anchor-menu{padding:0;margin:0 auto;list-style:none;display:flex;}
.h3-anchor-menu li a{display:flex;align-items:center;gap:5px;padding:14px 20px 14px 0;margin-right:12px;
  font-size:16px;font-family:'Figtree',sans-serif;font-weight:700;text-transform:uppercase;color:#fff;
  height:52px;cursor:pointer;text-decoration:none;white-space:nowrap;}
.h3-anchor-menu li a svg{width:10px;height:10px;transition:transform .25s;}
.h3-anchor-menu li a.is-on svg{transform:rotate(180deg);}

/* ==========================================================================
   LOGO SECTION — auto-scrolling marquee on a dark band.

   The static 4-up grid this replaced is gone; the marquee (previously mobile
   only) now runs at every width, held to .h3-inner's content width with a
   gradient fade at each edge so logos dissolve rather than clip.

   The band is dark because every file in assets/clients/ is a knockout (white)
   variant: on a white ground the "amazon", "AT&T", "Microsoft" and "Seattle"
   wordmarks disappear and only the coloured glyph survives. /home ships these
   same files on --ink for exactly this reason. One token drives the ground and
   both edge fades, so re-skinning the band stays a one-line change — and if
   full-colour logo files ever land, flipping --h3-logoband back to #fff is all
   that's needed.

   Note the wrapper also carries .h3-rev, whose reveal animates `transform` —
   so nothing here may set a transform of its own; the motion lives entirely on
   the inner track.
   ========================================================================== */
.h3-logosec{--h3-logoband:var(--h3-void);width:100%;padding:3.6rem 0;background:var(--h3-logoband);}
.h3-logo-h{text-align:center;margin-bottom:34px;}
/* Held to a reading measure and balanced, so the claim breaks into two even
   lines instead of running the full band and dropping one short word. */
.h3-logosec .h3-h2{color:#fff;max-width:34ch;margin:0 auto;text-wrap:balance;}
.h3-logo-marq{display:block;overflow:hidden;width:100%;position:relative;}
.h3-logo-marq::before,.h3-logo-marq::after{content:'';position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none;}
.h3-logo-marq::before{left:0;background:linear-gradient(to right,var(--h3-logoband),transparent);}
.h3-logo-marq::after{right:0;background:linear-gradient(to left,var(--h3-logoband),transparent);}
.h3-logo-track{display:flex;align-items:center;gap:72px;width:max-content;animation:h3Marquee 46s linear infinite;}
/* Let a reader stop the belt to look at a logo. */
.h3-logo-marq:hover .h3-logo-track{animation-play-state:paused;}
.h3-logo-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:1.6rem 0;}
.h3-logo-track img{max-width:170px;max-height:60px;width:auto;height:auto;object-fit:contain;
  transition:transform .3s ease;}
.h3-logo-item:hover img{transform:scale(1.06);}
@keyframes h3Marquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ==========================================================================
   CASE STUDIES — 520px slider + 8px tab indicator
   ========================================================================== */
.h3-cs-head{margin-bottom:34px;text-align:center;}
/* Held to a measure that splits the headline into two even lines rather
   than one very long one. */
.h3-cs-head .h3-h2{max-width:34ch;margin:0 auto;text-wrap:balance;}
.h3-cs-head .h3-sub{max-width:66ch;margin-left:auto;margin-right:auto;}
.h3-cs-wrap{position:relative;}
.h3-cs-slider{display:block;border-radius:26px;overflow:hidden;position:relative;height:520px;}
.h3-cs-slide{position:absolute;inset:0;height:520px;display:flex;align-items:stretch;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s ease;}
.h3-cs-slide.is-active{opacity:1;visibility:visible;}
.h3-cs-bg{position:absolute;top:0;right:0;width:100%;height:100%;z-index:0;}
/* Cropped from the top-right: the copy sits low-left, so that is the corner
   of the artwork worth keeping when the frame is narrower than the image. */
.h3-cs-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:100% 0;}
/* Same colour-matched shade as the hero slider: js/home3.js samples the left
   side of each case-study photograph and sets --h3-shade / --h3-lift on the
   slide (RGB triplets), so the scrim takes the image's own hue instead of flat
   black. Stops stay deeper than the hero's on the copy side -- the proof points
   and stats sit left where these photographs are busiest -- then clear across
   the right so the product shot stays visible. Defaults are used until sampled. */
.h3-cs-slide{--h3-shade:18 24 36;--h3-lift:112 124 148;}
.h3-cs-bg::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgb(var(--h3-shade) / .88) 0%,rgb(var(--h3-shade) / .74) 38%,rgb(var(--h3-shade) / .34) 64%,rgb(var(--h3-shade) / .08) 84%,rgb(var(--h3-shade) / 0) 100%);}
/* Screen-blended wash above the scrim: lifts near-black areas to a soft haze of
   the image's colour on the copy side without flattening bright pixels. */
.h3-cs-bg::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgb(var(--h3-lift) / .24) 0%,rgb(var(--h3-lift) / .16) 35%,rgb(var(--h3-lift) / .05) 56%,rgb(var(--h3-lift) / 0) 70%);}
/* Slow drift on the active slide only — enough to feel alive, small enough not
   to pull focus from the copy. */
.h3-cs-bg img{transform:scale(1.02);transform-origin:100% 0;transition:transform 9s linear;}
.h3-cs-slide.is-active .h3-cs-bg img{transform:scale(1.09);}
.h3-cs-slide .h3-inner{position:relative;z-index:2;width:100%;display:flex;align-items:center;
  padding-top:60px;padding-bottom:60px;}
.h3-cs-content{max-width:60%;display:flex;flex-direction:column;gap:18px;}

/* Eyebrow as a chip, matching the solution band's treatment. */
.h3-cs-cat{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;
  padding:7px 15px 7px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#fff;line-height:1;}
.h3-cs-cat::before{content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--h3-brand);box-shadow:0 0 0 3px rgba(247,143,27,.26);}
.h3-cs-eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--h3-brand-dark);margin-bottom:12px;}
.h3-cs-title{font-size:32px;font-weight:700;line-height:1.2;color:#fff;letter-spacing:-.4px;
  text-shadow:0 2px 18px rgba(0,0,0,.45);}
.h3-cs-content p{font-size:16px;line-height:26px;color:rgba(255,255,255,.88);max-width:64ch;
  text-shadow:0 1px 12px rgba(0,0,0,.45);}
.h3-cs-divider{width:100%;height:1px;flex-shrink:0;
  background:linear-gradient(90deg,rgba(247,143,27,.85) 0%,rgba(255,255,255,.30) 32%,rgba(255,255,255,0) 100%);}

/* Proof points: each sits under its own rule so three uneven values still read
   as one row. */
/* Service and product cards list a scope instead of proof points. Chips rather
   than the figure columns: these are capabilities of equal weight, with no
   number to lead on. */
.h3-cs-scope{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0;}
.h3-cs-scope li{padding:8px 15px;border-radius:999px;font-size:13px;font-weight:600;
  line-height:1.3;color:#fff;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  transition:border-color .25s ease,background .25s ease;}
.h3-cs-slide.is-active .h3-cs-scope li:hover{border-color:var(--h3-brand);
  background:rgba(247,143,27,.18);}
.h3-cs-stats{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0;}
/* One rule above the row (.h3-cs-divider) is the separator; the columns are
   divided from each other vertically. A top border per column drew a second
   broken line under the first, which read as a mistake -- especially on a card
   with only two proof points, where it looked like one rule with a gap in it. */
.h3-cs-stat{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;
  padding:2px 0 2px 0;transition:color .3s ease;}
.h3-cs-stat + .h3-cs-stat{padding-left:22px;border-left:1px solid rgba(255,255,255,.20);}
.h3-cs-slide.is-active .h3-cs-stat:hover b{color:var(--h3-brand);}
/* Every value occupies the same band and sits on its floor, so a 40px numeral
   and a two-line word label both hand off to their caption at the same height —
   otherwise the third column's text starts higher than its neighbours. */
.h3-cs-stat b{display:flex;align-items:flex-end;min-height:44px;
  font-size:40px;font-weight:700;line-height:1;color:#fff;letter-spacing:-1px;
  transition:color .3s ease;}
.h3-cs-stat span{font-size:13.5px;line-height:19px;color:rgba(255,255,255,.78);}
/* Qualifier sits inline ahead of the figure and bottom-aligns with it, so all
   three numerals share one line and one baseline across the row. Stacking it
   above pushed its own column's numeral down out of line with the others. */
.h3-cs-stat-pre{font-style:normal;font-size:13px;font-weight:700;line-height:1;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--h3-brand);
  margin-right:7px;padding-bottom:4px;flex-shrink:0;}
/* Word-based proof points ("Audit-ready") are labels, not figures: at the 40px
   numeral size they overflow their column and collide with the neighbouring
   stat. Doubled class keeps this above the numeral rule regardless of order. */
.h3-cs-stat.h3-cs-stat--word b{font-size:15px;line-height:1.3;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--h3-brand-subtle);padding-bottom:3px;}
/* Flex items default to min-width:auto, so a long word refuses to shrink and
   spills over its neighbour instead of wrapping. The figure is the exception:
   overflow-wrap:anywhere broke "90%" into 9 / 0 / % down three lines once the
   column got narrow. Only the word proof points ("Audit-ready") need it. */
.h3-cs-stat span{overflow-wrap:anywhere;}
.h3-cs-stat b{overflow-wrap:normal;white-space:nowrap;}
.h3-cs-stat.h3-cs-stat--word b{overflow-wrap:anywhere;white-space:normal;}

/* CTA reads as a button on the photograph, where a bare text link disappears. */
.h3-cs-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;
  margin-top:4px;padding:13px 24px;border-radius:999px;border:1px solid transparent;
  /* Same ember gradient the filled buttons carry, so every CTA on the page
     reads as one family. */
  background:linear-gradient(270deg,var(--h3-brand) 0%,var(--h3-brand-dark) 100%);
  font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#fff;
  box-shadow:0 10px 26px rgba(217,101,10,.30);
  text-decoration:none;transition:background .28s ease,border-color .28s ease,color .28s ease,transform .28s ease,box-shadow .28s ease;}
.h3-cs-cta:hover,.h3-cs-cta:focus-visible{background:var(--h3-hover);border-color:var(--h3-hover);
  color:#171616;transform:translateY(-2px);box-shadow:0 14px 30px rgba(217,101,10,.38);text-decoration:none;}
.h3-cs-cta .btn-arrow{display:inline-flex;transition:transform .28s ease;}
.h3-cs-cta:hover .btn-arrow{transform:translateX(4px);}

/* Staggered entrance, replayed each time a slide becomes active. */
.h3-cs-content>*{opacity:0;transform:translateY(16px);}
.h3-cs-slide.is-active .h3-cs-content>*{animation:h3CsIn .62s cubic-bezier(.2,.7,.2,1) forwards;}
.h3-cs-slide.is-active .h3-cs-content>:nth-child(1){animation-delay:.06s;}
.h3-cs-slide.is-active .h3-cs-content>:nth-child(2){animation-delay:.14s;}
.h3-cs-slide.is-active .h3-cs-content>:nth-child(3){animation-delay:.22s;}
.h3-cs-slide.is-active .h3-cs-content>:nth-child(4){animation-delay:.30s;}
.h3-cs-slide.is-active .h3-cs-content>:nth-child(5){animation-delay:.36s;}
.h3-cs-slide.is-active .h3-cs-content>:nth-child(6){animation-delay:.44s;}
@keyframes h3CsIn{to{opacity:1;transform:none;}}
.h3-cs-ctrl{width:36px;height:36px;background:#fff;border:none;border-radius:100%;position:absolute;top:50%;
  margin-top:-18px;box-shadow:0 0 10px rgba(0,0,0,.2);cursor:pointer;transition:all .3s linear;
  display:grid;place-items:center;color:var(--h3-indigo);z-index:5;}
.h3-cs-ctrl:hover{box-shadow:0 0 10px rgba(0,0,0,.5);}
.h3-cs-ctrl svg{width:10px;height:10px;}
.h3-cs-ctrl-prev{left:-18px;}
.h3-cs-ctrl-next{right:-18px;}
.h3-cs-nav{background:#fff;padding-top:8px;display:flex;align-items:stretch;}
.h3-cs-tab{flex:1;position:relative;padding:18px 20px 16px;cursor:pointer;transition:background .2s;
  line-height:16px;background:#fff;border:none;text-align:left;font-family:inherit;}
.h3-cs-tab:hover{background:#f9f9f9;}
.h3-cs-tab.is-on{background:var(--h3-paper-2);}
.h3-cs-tab .tab-title{font-size:13px;font-weight:500;line-height:1.2;color:var(--h3-body);transition:color .2s;display:block;}
.h3-cs-tab.is-on .tab-title{color:#000;font-weight:700;}
.h3-cs-tab .tab-indicator{position:absolute;top:0;left:0;height:8px;width:0;background:var(--h3-indigo);transition:none;}
.h3-cs-tab.is-on .tab-indicator{width:100%;transition:width 10s linear;}
.h3-cs-all{text-align:center;margin-top:38px;}

/* ==========================================================================
   SOLUTION BAND
   ========================================================================== */
/* Full-bleed photograph with a frosted card floating on it. The section itself
   carries the image edge to edge; .h3-inner keeps the card on the page grid. */
.h3-bandsec{position:relative;overflow:hidden;padding:72px 0;}
.h3-band-bg{position:absolute;inset:0;z-index:0;}
.h3-band-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block;}
/* saturate() runs on the blended result, so this one number tunes how strong
   the ember reads. Below ~0.4 it turns muddy brown and stops looking like the
   brand colour at all; 0.55 keeps the hue and drops the vividness. */
.h3-band-bg,
.h3-accel-bg{isolation:isolate;filter:saturate(.55);}
/* Both band photographs arrive in the reference site's purple. Rather than
   re-cutting the artwork, an ember layer in `color` blend mode takes over hue
   and saturation while the photograph keeps its own luminance — so the bokeh,
   strands and network texture survive intact and only the colour changes.
   Both sources sit at 16-22% average luminance, so the result stays dark
   enough for white copy without an extra scrim. */
.h3-band-bg::after,
.h3-accel-bg::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,var(--h3-brand-dark) 0%,var(--h3-brand) 55%,var(--h3-hover) 100%);
  mix-blend-mode:color;}
/* Without blend-mode support the ember layer would paint flat over the photo,
   so drop it and let the original image show instead. */
@supports not (mix-blend-mode:color){
  .h3-band-bg::after,
  .h3-accel-bg::after{display:none;}
}
/* A real photograph keeps its own colour: the ember `color` blend is replaced
   by a dark left-weighted scrim so the white copy still clears contrast. */
.h3-band-bg--photo{filter:none;}
/* The About photograph's faces sit around 35% down the frame; the default
   bottom anchor would crop to the coffee table, so frame on the people. */
.h3-band-bg--about img{object-position:50% 36%;}
/* Red network mesh: square art whose mesh runs through the middle band, so crop
   to centre. It is already ember-toned, so the orange wash is dropped for a
   light dark scrim only. */
.h3-band-bg--mesh img{object-position:50% 52%;}
.h3-band-bg--photo.h3-band-bg--mesh::after{
  background:linear-gradient(100deg,rgba(8,4,2,.34) 0%,rgba(8,4,2,.18) 55%,rgba(8,4,2,.1) 100%);}
/* Dark frosted card over the mesh: a black glass tint plus a strong blur, so
   the lines behind the copy soften into colour while it stays readable. */
.h3-bandsec:has(.h3-band-bg--mesh) .h3-band{
  background:rgba(6,6,8,.5);border-color:rgba(255,255,255,.16);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.15) brightness(.8);
  backdrop-filter:blur(16px) saturate(1.15) brightness(.8);}.h3-band-bg--photo::after{mix-blend-mode:normal;
  /* Two stacked layers: an ember wash for brand warmth over a dark scrim that
     keeps the white copy above 4.5:1. */
  background:
    linear-gradient(115deg,rgba(255,168,71,.22) 0%,rgba(255,205,140,.14) 100%),
    linear-gradient(100deg,rgba(10,8,6,.40) 0%,rgba(10,8,6,.26) 55%,rgba(10,8,6,.16) 100%);}
@supports not (mix-blend-mode:color){
  .h3-band-bg--photo::after{display:block;}
}
/* Same treatment for the closing band's photograph: real people keep their own
   colour, a dark scrim carries the white copy. */
.h3-accel-bg--photo{filter:none;}
.h3-accel-bg--photo::after{mix-blend-mode:normal;
  background:
    linear-gradient(115deg,rgba(255,168,71,.46) 0%,rgba(255,205,140,.32) 100%),
    linear-gradient(100deg,rgba(10,8,6,.46) 0%,rgba(10,8,6,.32) 55%,rgba(10,8,6,.22) 100%);}
@supports not (mix-blend-mode:color){
  .h3-accel-bg--photo::after{display:block;}
}
.h3-bandsec .h3-inner{position:relative;z-index:1;}

.h3-band{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:52px;
  border-radius:20px;padding:44px 48px;color:#fff;border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  /* brightness() darkens the photograph behind the card, so the copy stays
     readable wherever the bokeh happens to land under it. */
  /* Light blur only — enough to settle the photo behind the copy while the
     building stays legible; brightness carries the contrast instead. */
  -webkit-backdrop-filter:blur(7px) brightness(.48) saturate(1.05);
  backdrop-filter:blur(7px) brightness(.48) saturate(1.05);}
/* Without backdrop-filter the card would be near-transparent over a busy photo,
   so fall back to a flat scrim instead. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .h3-band{background:rgba(6,4,12,.74);}
}
/* About photograph (team in VR headsets): the client wants the scene readable
   through the card, so no blur — just a darkening tint behind the card, with
   text-shadow carrying the copy's contrast instead of frosting the photo. */
.h3-bandsec:has(.h3-band-bg--about) .h3-band{
  background:rgba(8,8,10,.52);border-color:rgba(255,255,255,.18);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.55);
  -webkit-backdrop-filter:brightness(.7);backdrop-filter:brightness(.7);}
.h3-bandsec:has(.h3-band-bg--about) .h3-band h2,
.h3-bandsec:has(.h3-band-bg--about) .h3-band p{text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 14px rgba(0,0,0,.55);}
.h3-bandsec:has(.h3-band-bg--about) .h3-band p{color:rgba(255,255,255,.92);}
.h3-bandsec:has(.h3-band-bg--about) .h3-band-chip{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(0,0,0,.28);}
.h3-band-txt{max-width:none;}
/* Eyebrow reads as a chip: pill outline, ember dot, frosted fill so it holds
   up over the photograph behind the card. */
.h3-band-chip{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:7px 14px 7px 12px;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:#fff;line-height:1;}
.h3-band-chip::before{content:'';width:7px;height:7px;border-radius:50%;
  background:var(--h3-brand);box-shadow:0 0 0 3px rgba(247,143,27,.24);flex-shrink:0;}
.h3-band h2{color:#fff;margin-bottom:14px;font-size:34px;line-height:1.2;font-weight:700;letter-spacing:-.4px;}
.h3-band p{color:rgba(255,255,255,.82);font-size:16px;line-height:26px;}
/* Right column: divided from the copy by a hairline rather than boxed. A
   plate here put a card inside a card on top of a photograph -- three layers
   of translucency stacked, which is what made the band look muddy. The rule
   does the same separating job with nothing to see through. */
.h3-band-aside{display:flex;flex-direction:column;align-items:flex-start;gap:28px;
  padding-left:52px;border-left:1px solid rgba(255,255,255,.22);}
/* Set as a statement: larger than the body, full white, opened by a short
   ember rule -- distinct from the paragraph without needing a container. */
.h3-band-lead{margin:0;color:#fff;font-size:19px;line-height:30px;font-weight:600;
  letter-spacing:-.2px;text-shadow:0 1px 12px rgba(0,0,0,.45);}
.h3-band-lead::before{content:'';display:block;width:42px;height:3px;border-radius:2px;
  margin-bottom:18px;background:linear-gradient(90deg,var(--h3-brand),var(--h3-brand-dark));}
.h3-band-cta{flex-shrink:0;}

/* ==========================================================================
   CAPABILITY GRID (Our Expertise)
   Title + tag row per card, deliberately no prose: the tags carry the detail
   so six capabilities stay scannable in one pass.
   ========================================================================== */
/* Cool ground. The earlier ember wash pushed everything here toward sepia;
   a neutral slate lets the one accent colour stay the only warm thing on
   screen, which is what makes it read as an accent at all. */
.h3-capsec{position:relative;overflow:hidden;background:var(--h3-paper);}
.h3-capsec::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#FFFFFF 0%,#F5F6F8 100%);}
.h3-capsec>.h3-inner{position:relative;z-index:1;}

/* Asymmetric head. A centred eyebrow-over-heading-over-lede stack is the most
   common section head on the web; splitting the claim from its qualifier gives
   the section a shape of its own and puts the CTA above the grid where it can
   be read before the six, not only after them. */
.h3-capsec-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:28px 64px;align-items:start;padding-bottom:34px;border-bottom:1px solid var(--h3-line);}
.h3-capsec-eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--h3-brand-dark);margin-bottom:14px;}
.h3-capsec-lead .h3-h2{margin:0;}
.h3-capsec-aside{display:flex;flex-direction:column;align-items:flex-start;gap:22px;}
.h3-capsec-aside p{margin:0;font-size:16px;line-height:1.65;color:var(--h3-body);}

/* ---- Capability cards ---------------------------------------------------
   Cool graphite, not black. Ember over black turns brown, which is what made
   the previous pass read as dated; on a blue-leaning ink the same orange stays
   orange. Structure carries the design here -- a blueprint grid, a hairline,
   a precise accent tab -- rather than glow, which is the thing that muddies.
   Ember is rationed to three small places: the tab, the glyph, the index. */
.h3-capgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;}
.h3-capcell{position:relative;display:flex;flex-direction:column;gap:22px;
  padding:26px 26px 26px;border-radius:16px;overflow:hidden;isolation:isolate;
  background:linear-gradient(163deg,#1C2331 0%,#141A26 52%,#10151F 100%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 12px 28px rgba(16,21,31,.14),0 2px 5px rgba(16,21,31,.10);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,border-color .3s ease;}
/* Blueprint pattern: a 64px major grid over a 16px minor grid, with a dot at
   every major intersection -- the three layers together read as drafting paper
   rather than as a texture, and give the area under a short title something to
   be. Alphas are low but not invisible; the mask fades the whole thing out
   toward the card's foot so the chips never sit on ruled lines. */
.h3-capcell::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(rgba(247,143,27,.22) 1px,transparent 1.6px),
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px,64px 64px,64px 64px,16px 16px,16px 16px;
  background-position:-1px -1px,0 0,0 0,0 0,0 0;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 52%,transparent 88%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 52%,transparent 88%);
  transition:opacity .3s ease;opacity:.9;}
.h3-capcell:hover::before{opacity:1;}
/* Accent tab: a short ember rule at the card's top-left that runs the full
   width on hover. A precise mark, where a glowing full-width bar was mush. */
.h3-capcell::after{content:'';position:absolute;inset:0 auto auto 0;height:2px;width:56px;
  background:linear-gradient(90deg,var(--h3-brand),var(--h3-brand-dark));
  transition:width .38s cubic-bezier(.4,0,.2,1);}
.h3-capcell:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16);
  box-shadow:0 26px 52px rgba(16,21,31,.24),0 3px 8px rgba(16,21,31,.12);}
.h3-capcell:hover::after{width:100%;}

/* Icon and title share one line, so the card spends no vertical run on a row
   that carried only a glyph. The index is gone with it -- six cards in a
   labelled grid don't need to be counted. */
.h3-capcell-head{display:flex;align-items:center;gap:14px;}

.h3-capcell-ico{position:relative;display:grid;place-items:center;width:42px;height:42px;
  border-radius:11px;flex-shrink:0;color:var(--h3-brand);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;}
/* The glyph drifts continuously, not only on hover, staggered per card so six
   icons never move in lockstep. Transform lives on the animation, so the hover
   state changes colour rather than position -- a running animation would
   override any transform set on the same element. */
.h3-capcell-ico svg{width:22px;height:22px;animation:h3IcoFloat 3.8s ease-in-out infinite;}
.h3-capcell:nth-child(2) .h3-capcell-ico svg{animation-delay:-.5s;}
.h3-capcell:nth-child(3) .h3-capcell-ico svg{animation-delay:-1s;}
.h3-capcell:nth-child(4) .h3-capcell-ico svg{animation-delay:-1.6s;}
.h3-capcell:nth-child(5) .h3-capcell-ico svg{animation-delay:-2.2s;}
.h3-capcell:nth-child(6) .h3-capcell-ico svg{animation-delay:-2.8s;}
.h3-capcell:hover .h3-capcell-ico{background:var(--h3-brand);border-color:var(--h3-brand);
  color:#0E131C;}
.h3-capcell:hover .h3-capcell-ico svg{animation-duration:1.5s;}

.h3-capcell-t{font-size:18.5px;line-height:1.34;font-weight:700;letter-spacing:-.2px;margin:0;
  color:#fff;min-width:0;}
/* Chips are filled and legible at rest -- outlined-and-quiet made them recede
   into the card. They still shift to ember on hover, so the card keeps a
   response, but they now read as the second thing in the card rather than the
   last. They sit directly under the title rather than pinned to the card foot:
   every title wraps to two lines, so packing to the top aligns the chip blocks
   across a row by itself, and the slack falls to the card's bottom edge where
   the blueprint grid has already faded out.
   margin-top:auto bottom-aligns the block, so a row keeps a common baseline
   whether its cards carry three tags or seven. */
.h3-capcell-tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0;}
.h3-capcell-tags li{font-size:12.5px;line-height:1;font-weight:600;letter-spacing:.1px;
  color:rgba(255,255,255,.9);padding:8px 13px;border-radius:7px;
  background:rgba(255,255,255,.085);border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);white-space:nowrap;
  transition:background .3s ease,border-color .3s ease,color .3s ease;}
.h3-capcell:hover .h3-capcell-tags li{background:rgba(247,143,27,.16);
  border-color:rgba(247,143,27,.55);color:#FFDDB4;}
/* Sentence-case the tags without touching the rest of the word: capitalize
   would also hit "management" in "program delivery leadership", and uppercase
   would wreck RAG / APIs / MLOps. */
.h3-capcell-tags li::first-letter{text-transform:uppercase;}
/* Capability cards. White on white, so definition comes from a hairline, a
   restrained shadow and an ember accent rule rather than a tinted fill — six
   filled tiles in a row read as decoration, not as a capability set. */
.h3-cap{position:relative;display:flex;flex-direction:column;gap:18px;padding:30px 28px 26px;
  border-radius:18px;background:#fff;border:1px solid var(--h3-line);overflow:hidden;
  box-shadow:0 1px 2px rgba(23,22,22,.04);
  transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease;}
/* Ember rule drawn across the card top on hover. */
.h3-cap::before{content:'';position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--h3-brand-dark),var(--h3-brand));transition:width .38s ease;}
.h3-cap:hover{border-color:rgba(247,143,27,.42);box-shadow:0 18px 42px rgba(23,22,22,.10);transform:translateY(-4px);}
.h3-cap:hover::before{width:100%;}
.h3-cap-top{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.h3-cap-ico{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  flex-shrink:0;background:var(--h3-brand-surface);border:1px solid rgba(247,143,27,.24);
  color:var(--h3-brand-dark);
  transition:background .28s ease,border-color .28s ease,color .28s ease,
             transform .45s cubic-bezier(.34,1.56,.64,1),border-radius .45s ease;}
/* Ember halo that pulses out of the tile on hover. */
.h3-cap-ico::after{content:'';position:absolute;inset:0;border-radius:inherit;
  border:1px solid var(--h3-brand);opacity:0;transform:scale(1);pointer-events:none;}
/* The glyph drifts continuously, not only on hover — a slow float plus a small
   tilt, staggered per card so six icons never move in lockstep. Transform lives
   on the animation here, so the hover tilt is on the tile instead: a running
   animation would override any transform set on the same element. */
.h3-cap-ico svg{width:23px;height:23px;animation:h3IcoFloat 3.8s ease-in-out infinite;}
.h3-sn-grid .h3-cap:nth-child(2) .h3-cap-ico svg{animation-delay:-1.2s;}
.h3-sn-grid .h3-cap:nth-child(3) .h3-cap-ico svg{animation-delay:-2.4s;}
/* Hovering shortens the cycle so the icon quickens under the pointer. */
.h3-cap:hover .h3-cap-ico svg{animation-duration:1.5s;}
@keyframes h3IcoFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  30%{transform:translateY(-2.5px) rotate(-4deg);}
  65%{transform:translateY(1.5px) rotate(3deg);}
}
.h3-cap:hover .h3-cap-ico{background:var(--h3-brand);border-color:var(--h3-brand);color:#fff;
  transform:translateY(-3px) rotate(-6deg);border-radius:50%;}
.h3-cap:hover .h3-cap-ico::after{animation:h3IcoHalo .85s ease-out;}
@keyframes h3IcoHalo{
  0%{opacity:.55;transform:scale(1);}
  100%{opacity:0;transform:scale(1.55);}
}
/* Index gives the six cards a reading order without adding copy. */
.h3-cap-n{font-size:12px;font-weight:800;letter-spacing:1.6px;color:rgba(247,143,27,.55);
  font-variant-numeric:tabular-nums;transition:color .28s ease;}
.h3-cap:hover .h3-cap-n{color:var(--h3-brand-dark);}
.h3-cap-t{font-size:18px;line-height:1.32;font-weight:700;letter-spacing:-.2px;margin:0;}
/* Tags are supporting detail, so they stay neutral until the card is hovered —
   seven ember-bordered chips per card would compete with the title. */
.h3-cap-tags{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:auto 0 0;padding:18px 0 0;
  border-top:1px solid var(--h3-line);}
.h3-cap-tags li{font-size:12px;line-height:1;font-weight:600;color:var(--h3-body);
  padding:7px 11px;border-radius:8px;background:var(--h3-paper-2);
  border:1px solid var(--h3-line);white-space:nowrap;
  transition:background .28s ease,border-color .28s ease,color .28s ease;}
.h3-cap:hover .h3-cap-tags li{background:var(--h3-brand-surface);
  border-color:rgba(247,143,27,.28);color:var(--h3-brand-dark);}
/* Sentence-case the tags without touching the rest of the word: text-transform
   :capitalize would also hit "management" in "program delivery leadership", and
   uppercase would wreck RAG / APIs / MLOps. */
.h3-cap-tags li::first-letter{text-transform:uppercase;}

/* ==========================================================================
   KYMERA (light)
   Copy left, product shot right. Follows the dark experience band, so the
   ground is deliberately paper-white with a soft ember wash.
   ========================================================================== */
.h3-kym{position:relative;overflow:hidden;background:#fff;}
.h3-kym::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(720px 340px at 88% 8%,rgba(247,143,27,.10) 0%,rgba(247,143,27,0) 70%);}
.h3-kym-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.06fr;gap:44px;align-items:center;}
.h3-kym-eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--h3-brand-dark);margin-bottom:12px;}
.h3-kym-txt .h3-h2{max-width:max-content;text-wrap:balance;}
.h3-kym-txt .h3-sub{max-width:56ch;margin-top:14px;}
/* Same ladder as the other section heads: title, then a value line a step down
   in size and weight, then body grey. */
.h3-kym-lead{max-width:48ch;margin:16px 0 0;font-size:20px;line-height:1.55;
  font-weight:500;letter-spacing:-.2px;color:#2B2B2B;}
@media(max-width:1100px){
  .h3-kym-lead{max-width:none;font-size:18px;}
}
@media(max-width:640px){
  .h3-kym-lead{font-size:16.5px;line-height:1.6;}
}
/* Capability titles only — no descriptions, so they read as a checklist. */
.h3-kym-list{list-style:none;display:grid;gap:12px;margin:30px 0 0;padding:0;}
.h3-kym-list li{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;
  background:var(--h3-brand-surface);border:1px solid rgba(247,143,27,.22);
  font-size:15px;font-weight:600;color:var(--h3-ink);line-height:1.35;
  transition:border-color .22s ease,transform .22s ease;}
.h3-kym-list li:hover{border-color:rgba(247,143,27,.5);transform:translateX(3px);}
.h3-kym-tick{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(270deg,var(--h3-brand) 0%,var(--h3-brand-dark) 100%);color:#fff;}
.h3-kym-tick svg{width:14px;height:14px;}
/* Both CTAs sit on one row: the text column takes a touch more width above and
   the pair runs slightly tighter, with wrap kept as the narrow-viewport
   fallback. */
.h3-kym-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.h3-kym-cta .h3-btn{letter-spacing:1.1px;padding-left:18px;padding-right:18px;}
/* Both screens shown together: the review screen sits back and left, the
   document queue overlaps it in front. The wrapper is padded so neither frame's
   shadow is clipped and the offsets have somewhere to go. */
.h3-kym-fig{position:relative;padding:0 0 14% 0;border:none;box-shadow:none;background:none;overflow:visible;}
.h3-kym-frame{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#fff;
  border:1px solid var(--h3-line);box-shadow:0 26px 60px rgba(23,22,22,.18);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease;}
.h3-kym-frame--back{width:88%;margin-left:auto;}
/* The front frame overlaps the back one by pulling up into it, and sits left
   so both headers stay readable. */
.h3-kym-frame--front{width:96%;margin-top:-12%;margin-right:auto;box-shadow:0 34px 74px rgba(23,22,22,.28);}
.h3-kym-fig:hover .h3-kym-frame--back{transform:translate(6px,-6px);}
.h3-kym-fig:hover .h3-kym-frame--front{transform:translate(-6px,6px);}
.h3-kym-chrome{display:flex;align-items:center;gap:7px;padding:9px 12px;
  background:var(--h3-paper-2);border-bottom:1px solid var(--h3-line);}
.h3-kym-dot{width:8px;height:8px;border-radius:50%;background:#D9DDE3;flex-shrink:0;}
.h3-kym-dot:first-child{background:#F2A0A0;}
.h3-kym-dot:nth-child(2){background:#F5CE8B;}
.h3-kym-dot:nth-child(3){background:#A8D9AE;}
.h3-kym-bar{flex:1;height:12px;margin-left:8px;border-radius:6px;background:#EDEFF2;}
.h3-kym-frame img{width:100%;height:auto;display:block;}
/* Kubentic reuses the framed pair, mirrored: its figure sits left of the copy,
   so the back frame hugs the left edge and the front one overlaps towards the
   text. Hover drift is flipped to match. */
.h3-kbn-shots .h3-kym-frame--back{margin-left:0;margin-right:auto;}
.h3-kbn-shots .h3-kym-frame--front{margin-left:auto;margin-right:0;}
.h3-kbn-shots:hover .h3-kym-frame--back{transform:translate(-6px,-6px);}
.h3-kbn-shots:hover .h3-kym-frame--front{transform:translate(6px,6px);}



/* --- Kubentic: now the Kymera band's split layout, mirrored — photo left,
       copy right (Kymera runs copy left, photo right), so the two product
       bands alternate rather than repeat the same side twice in a row. The
       tinted ground keeps it distinct from the white Kymera band above. --- */
/* clip, not hidden: both trim the bleed, but overflow:hidden makes this
   section a scroll container, which silently kills the sticky photo column
   inside it. overflow:clip trims without creating one. */
.h3-kbn{position:relative;overflow:clip;background:var(--h3-paper-2);}
.h3-kbn::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 340px at 14% 0%,rgba(247,143,27,.11) 0%,rgba(247,143,27,0) 70%),
             radial-gradient(700px 320px at 88% 100%,rgba(247,143,27,.08) 0%,rgba(247,143,27,0) 70%);}
.h3-kbn>.h3-inner{position:relative;z-index:1;}
.h3-kbn-grid{display:grid;grid-template-columns:1.06fr 1fr;gap:44px;align-items:center;}
/* The photo column tracks the copy: it pins below the header and anchor bar
   and stays put while the capability list scrolls past, releasing when the
   text column ends. align-self:start keeps the grid area full height so the
   sticky item has room to travel; the grid's align-items:center would
   otherwise size the item to its own content and leave nothing to slide in. */
.h3-kbn-fig{position:sticky;top:calc(var(--h3-head-h) + 76px);align-self:start;}
.h3-kbn-photo{margin:0;border-radius:16px;overflow:hidden;background:var(--h3-black);
  border:1px solid var(--h3-line);box-shadow:0 30px 64px -18px rgba(23,22,22,.30);}
.h3-kbn-photo img{width:100%;height:auto;display:block;}
.h3-kbn-txt .h3-h2{max-width:none;text-wrap:balance;}
/* Title stays on a single line in the half-width column: no wrap, and the size
   eases down with the viewport instead of overflowing. Desktop only -- below
   1100px the column goes full width and normal wrapping takes over again. */
@media(min-width:1101px){
  .h3-kbn-txt .h3-h2{white-space:nowrap;font-size:clamp(26px,2.6vw,36px);}
}
.h3-kbn-txt .h3-sub{max-width:56ch;margin-top:14px;}
/* Same ladder as Kymera: title, value line a step down, body grey. */
.h3-kbn-lead{max-width:none;margin:16px 0 0;font-size:20px;line-height:1.55;
  font-weight:500;letter-spacing:-.2px;color:#2B2B2B;text-wrap:pretty;}
@media(max-width:1100px){
  .h3-kbn-txt .h3-h2{max-width:none;}
  .h3-kbn-lead{max-width:none;font-size:18px;}
  /* Stacked, the photo led and pushed the whole pitch below the fold. It now
     follows the copy and both CTAs, so the section opens on what it is for and
     closes on the picture. Source order is unchanged for desktop, where the
     figure still sits in the left column. */
  .h3-kbn-fig{position:relative;top:auto;order:2;}
  .h3-kbn-txt{order:1;}
}
@media(max-width:640px){
  .h3-kbn-lead{font-size:16.5px;line-height:1.6;}
}
/* Capability list — same tick-and-title row Kymera's list uses (.h3-kym-tick),
   single column now that the column itself is half-width. */
.h3-kbn-list{list-style:none;display:grid;gap:10px;margin:26px 0 0;padding:0;}
.h3-kbn-list li{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:12px;
  background:var(--h3-brand-surface);border:1px solid rgba(247,143,27,.22);
  font-size:15px;font-weight:600;color:var(--h3-ink);line-height:1.35;
  transition:border-color .22s ease,transform .22s ease;}
.h3-kbn-list li:hover{border-color:rgba(247,143,27,.5);transform:translateX(3px);}
.h3-kbn-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}

/* ==========================================================================
   SELECTED EXPERIENCE (dark)
   Photographic ground under a heavy scrim, then discipline/client rows split
   left and right so the client names line up down the band.
   ========================================================================== */
.h3-expsec{position:relative;overflow:hidden;}
.h3-expsec-bg{position:absolute;inset:0;z-index:0;}
.h3-expsec-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  opacity:.58;}
/* Scrim eased so the photograph reads: heaviest behind the head and the row
   labels on the left, lightest on the right where the artwork is. */
.h3-expsec-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,6,.78) 0%,rgba(10,8,6,.56) 50%,rgba(10,8,6,.74) 100%),
             linear-gradient(90deg,rgba(10,8,6,.55) 0%,rgba(10,8,6,.12) 60%,rgba(10,8,6,0) 100%),
             radial-gradient(680px 300px at 82% 108%,rgba(247,143,27,.18) 0%,rgba(247,143,27,0) 70%);}
.h3-expsec>.h3-inner{position:relative;z-index:1;}
.h3-exp2-head{max-width:860px;margin:0 auto;text-align:center;}
.h3-exp2-head .h3-sub{max-width:78ch;margin-left:auto;margin-right:auto;}
.h3-exp2-eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--h3-brand);margin-bottom:12px;}
.h3-exp2-list{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--h3-line-d);}
.h3-exp2-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;
  padding:20px 4px;border-bottom:1px solid var(--h3-line-d);transition:background .25s ease,padding .25s ease;}
.h3-exp2-row:hover{background:rgba(255,255,255,.04);}
.h3-exp2-disc{font-size:17px;font-weight:700;line-height:1.35;color:#fff;letter-spacing:-.1px;}
.h3-exp2-clients{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;}
.h3-exp2-client{font-size:12px;font-weight:700;line-height:1;letter-spacing:.6px;color:rgba(255,255,255,.92);
  padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.07);
  transition:background .25s ease,border-color .25s ease,color .25s ease;}
.h3-exp2-row:hover .h3-exp2-client{border-color:rgba(247,143,27,.55);background:rgba(247,143,27,.14);
  color:#fff;}
.h3-exp2-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:38px;}

/* ==========================================================================
   HOW WE ENGAGE
   Four engagement models. Each card carries what Inabia takes on, then the
   "best when" condition on a tinted footer so the four can be compared down
   the column without reading the whole card.
   ========================================================================== */
/* Shared section header: eyebrow, title, one supporting line, centred. Used by
   the engagement section and by Let's talk, so the two read as one system. */
.h3-eng-head,.h3-tk-head{max-width:820px;margin:0 auto;text-align:center;}
.h3-eng-head .h3-sub,.h3-tk-head .h3-sub{max-width:74ch;margin-left:auto;margin-right:auto;}
.h3-eng-eyebrow,.h3-tk-eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--h3-brand-dark);margin-bottom:12px;}
.h3-eng-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:44px;}
.h3-eng-card{position:relative;display:flex;flex-direction:column;
  padding:30px 28px 0;border-radius:18px;background:#fff;border:1px solid var(--h3-line);
  overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;}
.h3-eng-card:hover{border-color:rgba(247,143,27,.42);box-shadow:0 16px 38px rgba(23,22,22,.09);transform:translateY(-3px);}
.h3-eng-n{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--h3-brand);
  font-variant-numeric:tabular-nums;margin-bottom:12px;}
.h3-eng-t{font-size:20px;line-height:1.28;font-weight:700;letter-spacing:-.2px;margin:0 0 12px;}
.h3-eng-p{font-size:15px;line-height:24px;color:var(--h3-body);margin:0 0 24px;}
/* Full-bleed footer inside the card: pushed to the bottom so the four
   conditions sit on one line across the row. */
.h3-eng-when{margin:auto -28px 0;padding:18px 28px;background:var(--h3-brand-surface);
  border-top:1px solid rgba(247,143,27,.24);font-size:14px;line-height:22px;color:var(--h3-ink);}
.h3-eng-when span{display:block;font-size:11px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--h3-brand-dark);margin-bottom:5px;}
.h3-eng-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px 28px;margin-top:36px;}
.h3-eng-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--h3-brand-dark);text-decoration:none;
  border-bottom:1px solid rgba(247,143,27,.4);padding-bottom:4px;transition:color .25s ease,border-color .25s ease;}
.h3-eng-link:hover{color:var(--h3-ink);border-bottom-color:var(--h3-ink);text-decoration:none;}
.h3-eng-link .btn-arrow{display:inline-flex;transition:transform .25s ease;}
.h3-eng-link:hover .btn-arrow{transform:translateX(3px);}

/* ==========================================================================
   SERVICENOW
   Reuses the capability flip card (.h3-cap) — same component, three items —
   plus a scope chip strip and the CTA pair.
   ========================================================================== */
.h3-snsec{position:relative;overflow:hidden;}
/* Two soft ember washes lift the band off the flat tint without adding an
   image; they sit behind everything and never touch the copy. */
.h3-snsec::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 320px at 12% 0%,rgba(247,143,27,.10) 0%,rgba(247,143,27,0) 70%),
             radial-gradient(680px 300px at 88% 100%,rgba(247,143,27,.08) 0%,rgba(247,143,27,0) 70%);}
.h3-snsec>.h3-inner{position:relative;z-index:1;}

/* --- Platform lockups: the product's own mark opens the section instead of a
       text eyebrow, which is what makes Kymera and ServiceNow read as named
       platforms rather than another paragraph. inline-flex so the lockup hugs
       its contents whether the head is left-aligned (Kymera) or centred
       (ServiceNow). Heights are set per mark: the two artworks have very
       different aspect ratios, so a shared height would leave one of them
       looking half the size of the other. --- */
.h3-plat-lock{display:inline-flex;align-items:center;gap:16px;margin-bottom:22px;}
.h3-plat-logo{display:block;width:auto;max-width:100%;}
.h3-plat-logo--kymera{height:42px;}
.h3-plat-logo--sn{height:30px;}
.h3-plat-logo--k8s{height:32px;}
/* Kubentic lockup: icon + wordmark, matching the brand's own header treatment. */
.h3-plat-kbn{display:inline-flex;align-items:center;gap:10px;}
.h3-plat-logo--kbn{height:40px;}
.h3-plat-kbn-word{font-family:'Figtree',sans-serif;font-size:27px;font-weight:600;line-height:1;
  letter-spacing:.03em;text-transform:uppercase;color:var(--h3-ink);}
.h3-plat-by{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--h3-brand-dark);padding-left:16px;border-left:1px solid rgba(247,143,27,.4);}
@media(max-width:640px){
  .h3-plat-lock{gap:12px;margin-bottom:18px;}
  .h3-plat-logo--kymera{height:34px;}
  .h3-plat-logo--sn{height:24px;}
  .h3-plat-logo--k8s{height:26px;}
  .h3-plat-kbn{gap:8px;}
  .h3-plat-logo--kbn{height:32px;}
  .h3-plat-kbn-word{font-size:22px;}
  .h3-plat-by{font-size:11px;padding-left:12px;}
}
/* Wide enough for the headline to hold one line at 40px; the standfirst keeps
   its own narrower measure so the block still reads as a head. */
.h3-sn-head{max-width:1120px;margin:0 auto;text-align:center;}
.h3-sn-head .h3-h2{text-wrap:balance;}
.h3-sn-head .h3-sub{max-width:74ch;margin-left:auto;margin-right:auto;}
/* Value line between the one-word H2 and the body: larger and in full ink, so
   the section still opens on a claim rather than on the platform name alone. */
.h3-sn-lead{max-width:none;margin:16px auto 0;font-size:24px;line-height:1.4;font-weight:600;
  letter-spacing:-.3px;color:var(--h3-ink);text-wrap:balance;}
@media(max-width:1100px){
  .h3-sn-lead{font-size:20px;}
}
@media(min-width:1101px){
  .h3-sn-head .h3-h2{white-space:nowrap;}
}
/* Plain eyebrow, same treatment as the other section headings. */
.h3-sn-eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--h3-brand-dark);margin-bottom:12px;}

/* --- Cards: same component, restyled for this section --- */
.h3-sn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px;}
/* White on the tinted ground, so figure/ground matches the expertise grid. */
.h3-sn-grid .h3-cap{background:#fff;border-color:var(--h3-line);}
.h3-sn-grid .h3-cap:hover{border-color:rgba(247,143,27,.45);}
.h3-sn-grid .h3-cap-ico{background:var(--h3-brand-surface);width:44px;height:44px;border-radius:12px;}
.h3-sn-top{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.h3-sn-n{font-size:13px;font-weight:800;letter-spacing:1.6px;color:var(--h3-brand);
  font-variant-numeric:tabular-nums;}
/* Optional card art, held behind the content at low opacity. Uses ::after —
   ::before is the card's ember accent rule, whose width:0/height:3px box would
   collapse the artwork to nothing. */
.h3-cap--art{position:relative;overflow:hidden;}
.h3-cap--art::after{content:'';position:absolute;inset:0;z-index:0;opacity:.7;pointer-events:none;
  background-image:var(--sn-art);background-size:cover;background-position:center;}
.h3-cap--art>*{position:relative;z-index:1;}
/* Keep the accent rule above the artwork. */
.h3-cap--art::before{z-index:2;}

.h3-sn-scope{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:26px;
  padding:20px 24px;border-radius:16px;background:#fff;border:1px solid var(--h3-line);
  box-shadow:0 8px 24px rgba(23,22,22,.05);}
.h3-sn-scope-l{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--h3-ink);}
.h3-sn-scope-l::before{content:'';width:20px;height:2px;border-radius:2px;background:var(--h3-brand);}
.h3-sn-scope-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;}
.h3-sn-scope-list li{font-size:12px;font-weight:700;line-height:1;color:var(--h3-brand-dark);
  padding:8px 13px;border-radius:999px;background:var(--h3-brand-surface);
  border:1px solid rgba(247,143,27,.30);transition:background .2s ease,color .2s ease;}
.h3-sn-scope-list li:hover{background:var(--h3-brand);color:#fff;}
.h3-sn-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px;}

/* ==========================================================================
   SHARED SECTION-INTRO ATOMS
   Small pieces both sections below build their own layout around: an eyebrow
   label, and (for the AI workflow intro) a lead paragraph.
   ========================================================================== */
.h3-fde-eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--h3-brand-dark);margin-bottom:12px;}
.h3-fde-lead{font-size:20px;line-height:1.55;font-weight:500;letter-spacing:-.2px;
  color:#2B2B2B;text-wrap:balance;}
@media(max-width:640px){
  .h3-fde-lead{font-size:16.5px;line-height:1.6;}
}

/* ==========================================================================
   AI WORKFLOW AUTOMATION — sticky intro + numbered timeline
   Asymmetric two-column split: the claim and CTAs sit in a sticky left rail,
   the five steps run down the right as a connected vertical timeline. Built
   from different parts than #advantages below it (no carousel, no centered
   head, no card grid) so the two sections read as two ideas, not one
   template reused twice.
   ========================================================================== */
.h3-awf{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:72px;align-items:start;}
.h3-awf-intro{position:sticky;top:calc(var(--h3-head-h) + 48px);}
.h3-awf-intro .h3-h2{margin-top:2px;max-width:18ch;text-wrap:balance;}
.h3-awf-intro .h3-fde-lead{margin-top:18px;}
.h3-awf-intro .h3-sub{margin-top:14px;max-width:44ch;}
.h3-awf-cta{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:32px;}
.h3-awf-cta .h3-btn{width:100%;justify-content:center;}

.h3-awf-steps{list-style:none;margin:0;padding:0;position:relative;}
.h3-awf-step{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);
  column-gap:24px;padding-bottom:40px;}
.h3-awf-step:last-child{padding-bottom:0;}
/* One continuous connector behind every badge, not a rule per row, so the
   steps read as a single path rather than repeated cards. */
.h3-awf-step::before{content:'';position:absolute;left:27px;top:56px;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(247,143,27,.5) 0%,rgba(247,143,27,.12) 100%);}
.h3-awf-step:last-child::before{display:none;}
.h3-awf-n{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;
  border-radius:50%;background:var(--h3-paper-2);border:2px solid var(--h3-brand);
  color:var(--h3-brand-dark);font-size:15px;font-weight:800;letter-spacing:.3px;
  transition:background .25s ease,color .25s ease,transform .25s ease;}
.h3-awf-step:hover .h3-awf-n{background:linear-gradient(270deg,var(--h3-brand) 0%,var(--h3-brand-dark) 100%);
  color:#fff;transform:scale(1.06);}
.h3-awf-body h4{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.2px;margin:0 0 8px;}
.h3-awf-body p{font-size:15px;line-height:24px;color:var(--h3-body);margin:0;}

/* ==========================================================================
   WHY CHOOSE INABIA — a flat, divided numeral strip
   The deliberate opposite of the timeline above: one row, hairline dividers,
   no card backgrounds and no hover-lift — closer to a spec sheet than a set
   of tiles. Head stays centered; the row below runs full width and left-
   aligns its own content.
   ========================================================================== */
.h3-fde-head{max-width:820px;margin:0 auto;text-align:center;}
.h3-fde-head .h3-sub{max-width:74ch;margin:16px auto 0;}
.h3-fde-head .h3-h2{max-width:38ch;margin:0 auto;text-wrap:balance;}
@media(max-width:1100px){
  .h3-fde-head .h3-h2{max-width:24ch;}
}

/* Feature panel: one bordered, elevated frame holding all four
   differentiators, divided by hairlines rather than laid out as free-floating
   circles/cards — reads as a single reference panel. Left-aligned throughout,
   which also keeps it distinct from the vertical, centered-badge timeline in
   #ai-workflow-automation above. */
.h3-adv{display:grid;grid-template-columns:repeat(4,1fr);margin-top:64px;
  background:#fff;border:1px solid var(--h3-line);border-radius:20px;
  box-shadow:0 24px 54px -34px rgba(23,22,22,.22);overflow:hidden;text-align:left;}
.h3-adv-item{padding:38px 32px;border-left:1px solid var(--h3-line);transition:background .25s ease;}
.h3-adv-item:first-child{border-left:none;}
.h3-adv-item:hover{background:var(--h3-brand-surface);}
.h3-adv-ico{display:inline-grid;place-items:center;width:46px;height:46px;
  margin-bottom:22px;border-radius:12px;background:var(--h3-brand-surface);
  border:1px solid rgba(247,143,27,.22);color:var(--h3-brand-dark);
  transition:background .3s ease,border-color .3s ease,color .3s ease;}
.h3-adv-item:hover .h3-adv-ico{background:linear-gradient(270deg,var(--h3-brand) 0%,var(--h3-brand-dark) 100%);
  border-color:transparent;color:#fff;}
.h3-adv-ico svg{width:22px;height:22px;}
.h3-adv-item h3{font-size:17px;font-weight:700;letter-spacing:-.1px;line-height:1.3;margin:0 0 10px;transition:color .25s ease;}
.h3-adv-item:hover h3{color:var(--h3-brand-dark);}
.h3-adv-item p{font-size:14.5px;line-height:23px;color:var(--h3-body);margin:0;}

/* ==========================================================================
   AWARDS — dark
   ========================================================================== */
.h3-awardsec{background:var(--h3-black);color:#fff;}
.h3-awardsec .h3-h2{color:#fff;}
.h3-awardsec .h3-sub{color:rgba(255,255,255,.7);}
/* Certifications ride the same carousel component as insights. On desktop
   five-per-view reproduces the old 5-up grid exactly; the chrome hides itself
   when everything fits (see .is-static below), so nothing changes up there. */
.h3-awards-car{margin-top:48px;}
.h3-awards-car .h3-award{width:100%;}
.h3-awardsec .h3-c-arrow{color:#fff;}
.h3-awardsec .h3-c-arrow:hover{color:var(--h3-brand);}
.h3-awardsec .h3-c-dot{background:#fff;}
.h3-awardsec .h3-c-dot.is-on{background:var(--h3-brand);}
.h3-award{background:#171616;border:1px solid var(--h3-line-d);border-radius:12px;padding:30px 20px;text-align:center;
  transition:transform .3s ease,border-color .3s,background .3s;}
.h3-award:hover{transform:translateY(-5px);border-color:var(--h3-indigo);background:#1d1c2b;}
/* The marks arrive as white knockout artwork on a uniform 800x400 canvas, so no
   filter and no per-logo sizing is needed — one 152x76 box holds all five, with
   object-fit keeping each mark inside its own supplied padding. */
.h3-award-logo{display:grid;place-items:center;height:76px;margin-bottom:16px;}
.h3-award-logo img{max-height:76px;max-width:152px;width:auto;height:auto;object-fit:contain;
  opacity:.92;transition:opacity .3s ease;}
.h3-award:hover .h3-award-logo img{opacity:1;}
.h3-award-cap{display:block;font-size:13px;color:rgba(255,255,255,.6);}
.h3-award-cap b{font-weight:700;color:#fff;}

/* ==========================================================================
   INSIGHTS
   ========================================================================== */
.h3-ins-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:38px;}

/* --------------------------------------------------------------------------
   Generic 3-up carousel (arrows sit outside the track, dots below). Driven by
   js/home3.js via [data-h3-carousel]; slide widths are set in JS from the
   per-view count, so the CSS only owns chrome and the card itself.
   -------------------------------------------------------------------------- */
.h3-carousel{position:relative;padding:0 40px;}
.h3-c-outer{position:relative;overflow:hidden;padding:20px 0;margin:-20px 0;}
.h3-c-track{display:flex;flex-wrap:nowrap;gap:20px;align-items:stretch;will-change:transform;
  transition:transform .5s cubic-bezier(.25,.46,.45,.94);}
.h3-c-slide{flex:0 0 auto;display:flex;}
.h3-c-arrow{position:absolute;top:calc(50% - 30px);transform:translateY(-50%);z-index:10;
  width:24px;height:24px;display:grid;place-items:center;padding:0;cursor:pointer;
  background:none;border:none;color:var(--h3-ink);transition:color .2s,opacity .2s;}
.h3-c-arrow:hover{color:var(--h3-brand);}
.h3-c-arrow[disabled]{opacity:.25;cursor:default;}
.h3-c-prev{left:4px;}
.h3-c-next{right:4px;}
.h3-c-dots{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px;min-height:14px;}
.h3-c-dot{width:10px;height:10px;border-radius:50%;border:none;padding:0;cursor:pointer;flex-shrink:0;
  background:var(--h3-ink);opacity:.25;transition:width .25s,height .25s,opacity .25s,background .25s;}
.h3-c-dot.is-on{width:14px;height:14px;opacity:1;background:var(--h3-brand);}
/* Set by the JS when every slide already fits, so a carousel that cannot move
   does not advertise controls that do nothing. */
.h3-carousel.is-static .h3-c-arrow,
.h3-carousel.is-static .h3-c-dots{display:none;}
/* Grab-and-pull carousels ([data-h3-drag] in the markup): the cursor advertises
   the affordance, touch-action lets the browser keep vertical scrolling while
   the JS takes the horizontal pull, and text selection is suppressed mid-drag
   so pulling across a card does not highlight it. */
.h3-carousel[data-drag] .h3-c-outer{cursor:grab;touch-action:pan-y;}
.h3-carousel[data-drag].is-dragging .h3-c-outer{cursor:grabbing;}
.h3-carousel[data-drag].is-dragging .h3-c-slide{user-select:none;}
.h3-carousel[data-drag].is-dragging .h3-c-slide *{pointer-events:none;}
.h3-carousel.is-static{padding:0;}

/* Insight card. Featured images here run from 4:3 to 21:9, so the two demands
   -- show them uncropped, and keep every card the same height -- can only both
   hold if the band is a fixed shape and the image is fitted inside it rather
   than filling it. Hence 16:9 (where most of these images already sit) plus
   object-fit:contain on a paper-tone ground, so an odd ratio letterboxes into
   the card instead of losing its edges. The card reserves 132px below the band
   for the text bar, which still grows over the image on hover. */
/* The card is a real card at rest -- surface, hairline, radius -- rather than
   a loose image with captions under it. The old version hid the excerpt and
   then grew a panel over the whole image on hover, which meant the picture
   vanished and the text jumped the moment the pointer arrived. Everything is
   visible from the start now and the hover only enriches: lift, warm shadow,
   an ember rule across the body's top edge, a slow push-in on the image, and
   the arrow sliding. Nothing moves that the reader was already reading. */
.h3-ins-card{display:flex;flex-direction:column;width:100%;height:100%;
  border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--h3-line);
  box-shadow:0 1px 2px rgba(23,22,22,.05);
  transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,border-color .3s ease;}
.h3-ins-card:hover,
.h3-ins-card:focus-within{transform:translateY(-6px);border-color:rgba(247,143,27,.42);
  box-shadow:0 24px 46px -14px rgba(23,22,22,.22),0 6px 16px -8px rgba(247,143,27,.24);}

/* These covers are diagrams, not photography -- a crop loses the labels that
   carry the meaning. So: a fixed 16:9 band with object-fit:contain on a paper
   ground, letterboxing an odd ratio rather than cutting into it. */
.h3-ins-cover{display:block;position:relative;width:100%;aspect-ratio:16/9;z-index:1;
  background:var(--h3-paper-2);overflow:hidden;border-bottom:1px solid var(--h3-line);}
.h3-ins-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .55s cubic-bezier(.4,0,.2,1);}
.h3-ins-card:hover .h3-ins-cover img,
.h3-ins-card:focus-within .h3-ins-cover img{transform:scale(1.04);}

.h3-ins-body{position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:10px;
  padding:20px 22px 18px;background:#fff;}
/* Ember rule wiping along the seam between image and text. */
.h3-ins-body::before{content:'';position:absolute;top:-1px;left:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--h3-brand),var(--h3-brand-dark));
  transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.4,0,.2,1);}
.h3-ins-card:hover .h3-ins-body::before,
.h3-ins-card:focus-within .h3-ins-body::before{transform:scaleX(1);}

.h3-ins-tag{font-size:11px;font-weight:700;line-height:1;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--h3-brand-dark);opacity:1;margin:0;}
/* The title clamp is what keeps three cards the same height, now that the
   excerpt is gone -- no fixed body height to maintain per breakpoint. */
.h3-ins-title{font-size:18px;font-weight:700;line-height:1.34;color:var(--h3-ink);margin:0;
  letter-spacing:-.2px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;transition:color .25s ease;}
.h3-ins-title a{color:inherit;text-decoration:none;}
.h3-ins-card:hover .h3-ins-title,
.h3-ins-card:focus-within .h3-ins-title{color:var(--h3-brand-dark);}

.h3-ins-more{display:flex;margin-top:auto;padding-top:16px;}
.h3-ins-more a{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
  letter-spacing:.3px;color:var(--h3-ink);text-decoration:none;border:0;transition:color .25s ease;}
.h3-ins-more .btn-arrow{display:inline-flex;transition:transform .28s ease;}
.h3-ins-more .btn-arrow svg{width:15px;height:15px;}
.h3-ins-card:hover .h3-ins-more a,
.h3-ins-card:focus-within .h3-ins-more a{color:var(--h3-brand-dark);}
.h3-ins-card:hover .h3-ins-more .btn-arrow,
.h3-ins-card:focus-within .h3-ins-more .btn-arrow{transform:translateX(4px);}

/* Posts without a featured image get the same initial-on-ember block the blog
   mega-menu carousel uses, so an empty card still reads as one of the set. */
.h3-ins-fig-fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;font-weight:700;color:#fff;
  background:linear-gradient(150deg,var(--h3-brand),var(--h3-brand-dark));}

/* ==========================================================================
   ACCELERATE BAND — closing call to action over a full-bleed banner.

   Was a rotating service headline mid-page; now the last block before the
   footer, carrying an eyebrow, a two-line headline, body copy and a CTA pair.
   The rotator is gone, so the ember highlight it used to carry moves onto the
   headline's second sentence -- the band keeps its recognisable shape without
   needing the animation.
   ========================================================================== */
.h3-accel{position:relative;overflow:hidden;padding:56px 0;}
.h3-accel-bg{position:absolute;inset:0;z-index:0;}
.h3-accel-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;display:block;}
.h3-accel-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:48px;}
.h3-accel-txt{min-width:0;}
.h3-accel-eyebrow{font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--h3-brand-subtle);margin-bottom:14px;}
.h3-accel-h{color:#fff;font-size:32px;line-height:1.35;font-weight:700;letter-spacing:-.3px;margin:0;}
.h3-accel-lead{display:block;}
/* Inherits the old rotating word's treatment: ember ground, void text (8:1,
   where white-on-brand would be 2.6:1). inline-block so the block hugs the
   sentence instead of running the full column width. */
.h3-accel-mark{display:inline-block;margin-top:8px;background:var(--h3-brand);color:var(--h3-void);
  padding:2px 10px;border-radius:3px;}
.h3-accel-p{color:rgba(255,255,255,.84);font-size:15px;line-height:26px;margin:18px 0 0;max-width:68ch;}
/* Direct contact under the body copy: quieter than the CTA pair beside it, so
   it reads as a fallback rather than a third button. */
.h3-accel-contact{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:16px 0 0;
  font-size:15px;line-height:26px;color:rgba(255,255,255,.84);}
.h3-accel-contact a{color:#fff;font-weight:600;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .25s,color .25s;}
.h3-accel-contact a:hover{color:var(--h3-brand-subtle);border-bottom-color:var(--h3-brand-subtle);}
.h3-accel-dot{color:rgba(255,255,255,.5);}
.h3-accel-actions{flex-shrink:0;display:flex;flex-direction:column;gap:12px;}
/* The rotating slot is a fixed-height stack: every word is absolutely placed on
   the same line and only the active one is visible, so the band never reflows
   as the words change length. Width comes from the widest word via the
   invisible copies still occupying the flow. */
.h3-accel-rot{display:inline-grid;margin-top:6px;perspective:600px;}
/* justify-self:start keeps each highlight hugging its own word, while the grid
   cell still reserves the widest one so the band never reflows mid-rotation. */
/* Dark text, not white: now that the band itself is ember, white-on-brand would
   sit at 2.6:1 against its own highlight. Void on brand is 8:1, and it also
   keeps the highlight from reading as a second white button next to the CTA. */
.h3-accel-word{grid-area:1/1;justify-self:start;background:var(--h3-brand);color:var(--h3-void);
  padding:2px 10px;border-radius:3px;white-space:nowrap;
  opacity:0;transform:rotateX(-90deg);transform-origin:50% 0;
  transition:opacity .24s ease,transform .24s ease;}
/* Delayed in: without it the outgoing and incoming words cross at half opacity
   and both stay legible, stacked on each other, for a fifth of a second. */
.h3-accel-word.is-on{opacity:1;transform:none;transition-delay:.2s;}
.h3-accel-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--h3-brand-dark);
  font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;line-height:1;
  padding:14px 24px;border-radius:8px;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s;}
.h3-accel-cta:hover{background:var(--h3-brand-subtle);color:var(--h3-brand-dark);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.55);text-decoration:none;}
/* Secondary of the pair: outlined, so the primary keeps the solid-white weight. */
.h3-accel-cta--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.6);}
.h3-accel-cta--ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff;}

/* ==========================================================================
   TEAM STRIP
   ========================================================================== */
.h3-teamstrip{overflow:hidden;}

/* LEGACY TEAM STRIP -- styles for the marquee, which is commented out in
   page-home3.php. Retained so the markup can be restored as a pair. */
.h3-team-track{display:flex;gap:0;animation:h3Marquee 110s linear infinite;width:max-content;margin-top:38px;}
.h3-team-tile{flex:0 0 auto;height:300px;position:relative;overflow:hidden;}
.h3-team-tile img{height:100%;width:auto;display:block;object-fit:cover;}

/* --- LEGACY TEAM MOSAIC -- the composed five-tile grid that preceded the
   team reel below. Its markup was removed from page-home3.php; the .h3-tm-head
   and .h3-tm-eyebrow rules here are still used by the reel's heading. --- */
.h3-tm-head{max-width:660px;margin:0 auto;}
.h3-tm-eyebrow{display:block;margin-bottom:14px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--h3-brand);}
.h3-tm-head .h3-h2{margin:0;}

/* 12 columns so the tiles can be placed deliberately. Row height and spans are
   chosen to match each photograph's native ratio -- see the note on
   $h3_team_mosaic in page-home3.php. */
.h3-tm-grid{list-style:none;display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:210px;gap:14px;margin:46px 0 0;padding:0;}
.h3-tm-tile{position:relative;overflow:hidden;border-radius:16px;margin:0;
  border:1px solid rgba(255,255,255,.10);background:#1a1a1c;}
/* The tile's whole surface is the control, so the button fills it and carries
   no chrome of its own. */
.h3-tm-open{display:block;width:100%;height:100%;margin:0;padding:0;border:0;
  background:none;cursor:zoom-in;appearance:none;}
.h3-tm-open:focus-visible{outline:2px solid var(--h3-brand);outline-offset:-4px;}
.h3-tm-tile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.6,.2,1);}
.h3-tm-tile:hover img{transform:scale(1.05);}
/* Affordance: without it nothing says these open. */
.h3-tm-zoom{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;
  width:36px;height:36px;border-radius:11px;color:#fff;
  background:rgba(10,10,10,.55);border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;transform:translateY(-4px);
  transition:opacity .3s ease,transform .3s ease,background-color .3s ease;}
.h3-tm-zoom svg{width:17px;height:17px;}
.h3-tm-tile:hover .h3-tm-zoom,
.h3-tm-open:focus-visible .h3-tm-zoom{opacity:1;transform:translateY(0);}

/* --- Lightbox. Built in JS and appended to the body, so it escapes the
       section's stacking context and any overflow clipping. --- */
/* An author `display` beats the UA sheet's [hidden]{display:none}, so without
   this the closed dialog stays laid out -- an invisible fixed overlay across
   the whole viewport, swallowing every click on the page. */
.h3-lb[hidden]{display:none;}
.h3-lb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:64px 72px;
  background:rgba(8,8,9,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity .28s ease;}
.h3-lb.is-open{opacity:1;}
.h3-lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;
  max-width:100%;max-height:100%;}
.h3-lb-img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;
  border-radius:14px;box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
  opacity:1;transition:opacity .2s ease;}
.h3-lb.is-swapping .h3-lb-img{opacity:0;}
.h3-lb-cap{margin:0;max-width:70ch;text-align:center;font-size:14.5px;line-height:1.55;
  color:rgba(255,255,255,.78);}
.h3-lb-count{margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--h3-brand);font-variant-numeric:tabular-nums;}
.h3-lb-btn{position:absolute;display:grid;place-items:center;width:46px;height:46px;
  padding:0;border-radius:13px;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:background-color .2s ease,border-color .2s ease,transform .2s ease;}
.h3-lb-btn:hover{background:rgba(247,143,27,.16);border-color:rgba(247,143,27,.55);}
.h3-lb-btn:focus-visible{outline:2px solid var(--h3-brand);outline-offset:3px;}
.h3-lb-btn svg{width:20px;height:20px;}
.h3-lb-close{top:24px;right:24px;}
.h3-lb-prev{left:20px;top:50%;margin-top:-23px;}
.h3-lb-next{right:20px;top:50%;margin-top:-23px;}
.h3-lb-prev:hover{transform:translateX(-3px);}
.h3-lb-next:hover{transform:translateX(3px);}
@media(max-width:768px){
  .h3-lb{padding:56px 14px 76px;}
  .h3-lb-img{max-height:64vh;}
  /* Controls move off the image edges, where a thumb would cover the photo. */
  .h3-lb-prev{left:50%;top:auto;bottom:16px;margin:0;transform:translateX(-58px);}
  .h3-lb-next{right:50%;top:auto;bottom:16px;margin:0;transform:translateX(58px);}
  .h3-lb-prev:hover{transform:translateX(-58px);}
  .h3-lb-next:hover{transform:translateX(58px);}
  .h3-lb-cap{font-size:13.5px;}
}
/* Foot scrim gives each tile weight on the black ground and keeps the mosaic
   from reading as five bright rectangles floating in space. */
.h3-tm-tile::after{content:'';position:absolute;inset:auto 0 0 0;height:42%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.55) 100%);}

.h3-tm-tile:nth-child(1){grid-column:1/4;grid-row:1/3;}   /* 3:4 portrait  */
.h3-tm-tile:nth-child(2){grid-column:4/13;grid-row:1/2;}  /* 3.5:1 panorama */
.h3-tm-tile:nth-child(3){grid-column:4/7;grid-row:2/3;}   /* 4:3 */
.h3-tm-tile:nth-child(4){grid-column:7/10;grid-row:2/3;}  /* 4:3 */
.h3-tm-tile:nth-child(5){grid-column:10/13;grid-row:2/3;} /* 4:3 */

/* --- Live team section: TEAM REEL. Two rows of rounded cards drifting in
   opposite directions at different heights and speeds, faded out at both
   edges. Cards keep each photograph's own ratio (--ar from PHP), so nothing is
   cropped hard. Hovering a row pauses it; the card under the pointer lifts and
   captions itself while the rest of that row dims, so any one photograph can
   actually be looked at. --- */
.h3-reel{margin-top:46px;display:flex;flex-direction:column;gap:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);}
.h3-reel-row{--h:300px;--gap:16px;overflow:hidden;}
.h3-reel-row--b{--h:236px;}
/* Right padding equal to the gap makes the doubled track exactly two identical
   halves, so translateX(-50%) lands the loop without a half-gap jump. */
.h3-reel-track{list-style:none;display:flex;gap:var(--gap);width:max-content;margin:0;
  padding:12px var(--gap) 12px 0;animation:h3Reel 64s linear infinite;will-change:transform;}
.h3-reel-row--b .h3-reel-track{animation-duration:52s;animation-direction:reverse;}
@keyframes h3Reel{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.h3-reel-row:hover .h3-reel-track,
.h3-reel-row:focus-within .h3-reel-track{animation-play-state:paused;}

.h3-reel-card{flex:0 0 auto;position:relative;height:var(--h);aspect-ratio:var(--ar,1.333);margin:0;
  border-radius:18px;overflow:hidden;background:#1a1a1c;border:1px solid rgba(255,255,255,.12);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .45s ease,border-color .35s ease,box-shadow .5s ease;}
.h3-reel-open{display:block;width:100%;height:100%;margin:0;padding:0;border:0;
  background:none;cursor:zoom-in;appearance:none;}
.h3-reel-open:focus-visible{outline:2px solid var(--h3-brand);outline-offset:-4px;border-radius:18px;}
.h3-reel-card img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.2,.6,.2,1);}
.h3-reel-card::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,9,0),rgba(8,8,9,.8));opacity:0;transition:opacity .4s ease;}
.h3-reel-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;text-align:left;
  font-size:13.5px;font-weight:500;line-height:1.4;color:#fff;
  opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;}
.h3-reel-cap::before{content:'';display:block;width:26px;height:2px;margin-bottom:8px;
  border-radius:2px;background:var(--h3-brand);}

/* Same specificity as the dim rule, placed after it so the hovered card wins. */
.h3-reel-row:hover .h3-reel-card{filter:brightness(.5) saturate(.75);}
.h3-reel-row .h3-reel-card:hover,
.h3-reel-row .h3-reel-card:focus-within{filter:none;z-index:2;transform:translateY(-6px) scale(1.02);
  border-color:rgba(247,143,27,.7);box-shadow:0 26px 46px -22px rgba(247,143,27,.5);}
.h3-reel-card:hover img{transform:scale(1.06);}
.h3-reel-card:hover::after,
.h3-reel-card:focus-within::after{opacity:1;}
.h3-reel-card:hover .h3-reel-cap,
.h3-reel-card:focus-within .h3-reel-cap{opacity:1;transform:none;}

@media(max-width:1100px){
  .h3-reel-row{--h:250px;}
  .h3-reel-row--b{--h:196px;}
}
@media(max-width:768px){
  .h3-reel{margin-top:34px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);}
  .h3-reel-row{--h:200px;--gap:10px;}
  .h3-reel-row--b{--h:156px;}
  .h3-reel-track{padding-block:8px;}
  .h3-reel-card,.h3-reel-open:focus-visible{border-radius:14px;}
}

/* ==========================================================================
   MAP + STATS
   ========================================================================== */
/* The team strip and the map band are both .h3-dark and sit flush against each
   other, so there is no seam to read the two 88px section paddings against --
   176px of black just looked like a hole. Halved on both sides, and the map's
   own transparent margin adds the rest of the breathing room. */
.h3-teamstrip{padding-bottom:44px;}
.h3-mapsec{padding-top:44px;}
/* Stats lead on the left, map follows on the right. */
.h3-globe{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center;}

/* --- Map: flat dark artwork with live pins over it --- */
.h3-map{position:relative;border-radius:12px;}
.h3-map::before{content:'';position:absolute;left:4%;right:4%;top:8%;bottom:8%;z-index:0;
  background:radial-gradient(60% 60% at 50% 50%,rgba(247,143,27,.14) 0%,rgba(247,143,27,0) 70%);
  filter:blur(26px);}
.h3-map img{position:relative;z-index:1;width:100%;height:auto;display:block;}
/* Routes from the headquarters to each hub. preserveAspectRatio is off so the
   percentage coordinates land on the artwork; non-scaling-stroke keeps the
   line an even weight despite that distortion. The dash travels outward from
   Bellevue, which is what gives the map its sense of direction. */
.h3-map-links{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none;overflow:visible;}
.h3-map-links path{fill:none;stroke:rgba(247,143,27,.5);stroke-width:1.3;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:4 10;opacity:0;}
/* Held until the section scrolls in, so the routes draw as the map arrives
   rather than having already run behind the fold. */
.h3-map.in .h3-map-links path{opacity:1;animation:h3RouteFlow 2.6s linear infinite,h3RouteIn .9s ease .25s forwards;}
.h3-map.in .h3-map-links path:nth-child(2){animation-delay:0s,.45s;}
.h3-map.in .h3-map-links path:nth-child(3){animation-delay:0s,.65s;}
@keyframes h3RouteFlow{to{stroke-dashoffset:-28;}}
@keyframes h3RouteIn{from{opacity:0;}to{opacity:1;}}
.h3-map-pins{position:absolute;inset:0;z-index:2;list-style:none;margin:0;padding:0;}
/* Each pin is placed by percentage, so it tracks the artwork at any width. The
   dot stays put; only the label moves, because the four hubs cluster. */
.h3-map-pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;}
.h3-map-dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:7;
  width:10px;height:10px;border-radius:50%;background:var(--h3-brand);
  box-shadow:0 0 0 2.5px rgba(10,8,6,.85),0 0 0 4px rgba(247,143,27,.4),0 0 14px rgba(247,143,27,.7);
  opacity:0;}
.h3-map.in .h3-map-dot{opacity:1;animation:h3PinDrop .55s cubic-bezier(.2,1.5,.45,1) var(--ed,0ms) both;}
@keyframes h3PinDrop{
  from{opacity:0;transform:translate(-50%,-50%) scale(.2);}
  to{opacity:1;transform:translate(-50%,-50%) scale(1);}
}
/* Ring pulses out of the dot; the per-pin delay keeps the four from firing
   together. */
.h3-map-ping{position:absolute;left:50%;top:50%;width:9px;height:9px;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--h3-brand);
  animation:h3PinPing 2.8s ease-out infinite;animation-delay:var(--pd,0ms);}
@keyframes h3PinPing{
  0%{opacity:.65;transform:translate(-50%,-50%) scale(1);}
  70%,100%{opacity:0;transform:translate(-50%,-50%) scale(4);}
}
/* Label: quiet type on a dark plate, tied back to its dot by a hairline. */
.h3-map-label{position:absolute;z-index:6;white-space:nowrap;
  font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;
  padding:7px 12px;border-radius:6px;background:rgba(8,7,6,.9);
  border:1px solid rgba(247,143,27,.45);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.75);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;}
.h3-map.in .h3-map-label{opacity:1;animation:h3PinFade .5s ease var(--ed,0ms) forwards;}
@keyframes h3PinFade{to{opacity:1;}}
.h3-map-label::before{content:'';position:absolute;background:rgba(247,143,27,.55);pointer-events:none;}
/* Right of the dot. */
.h3-map-pin--r .h3-map-label{left:18px;top:50%;transform:translateY(-50%);}
.h3-map-pin--r .h3-map-label::before{left:-10px;top:50%;width:10px;height:1px;}
/* Left of the dot. */
.h3-map-pin--l .h3-map-label{right:18px;top:50%;transform:translateY(-50%);}
.h3-map-pin--l .h3-map-label::before{right:-10px;top:50%;width:10px;height:1px;}
/* Above the dot, and further above than the other offsets: Karachi is the only
   --t pin and Riyadh's dot sits ~9px higher on the artwork, so a 16px offset
   put this label straight over that dot and stole its hover. The longer leader
   keeps the label tied to its own pin at the greater distance. */
.h3-map-pin--t .h3-map-label{left:50%;bottom:36px;transform:translateX(-50%);}
.h3-map-pin--t .h3-map-label::before{left:50%;bottom:-29px;width:1px;height:29px;}
/* Below the dot. */
.h3-map-pin--b .h3-map-label{left:50%;top:16px;transform:translateX(-50%);}
.h3-map-pin--b .h3-map-label::before{left:50%;top:-9px;width:1px;height:9px;}
/* Headquarters reads louder than the delivery hubs: a larger dot with a solid
   ember ring, and the city set over an ember sub-label. */

.h3-map-pin--hq .h3-map-dot{width:17px;height:17px;
  box-shadow:0 0 0 3.5px rgba(10,8,6,.9),0 0 0 6px var(--h3-brand),0 0 26px rgba(247,143,27,.95);}
.h3-map-pin--hq .h3-map-ping{width:17px;height:17px;border-width:2px;}
/* A second, slower ring so the headquarters keeps a pulse of its own between
   the shared ping beats. */
.h3-map-pin--hq::after{content:'';position:absolute;left:50%;top:50%;width:17px;height:17px;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(247,143,27,.7);
  animation:h3PinPing 2.8s ease-out 1.4s infinite;pointer-events:none;}
.h3-map-pin--hq .h3-map-label{left:26px;padding:10px 16px;line-height:1.3;
  font-size:13.5px;letter-spacing:1.1px;border-color:rgba(247,143,27,.75);
  background:linear-gradient(180deg,rgba(30,17,4,.94),rgba(8,7,6,.94));}
.h3-map.in .h3-map-pin--hq .h3-map-label{
  animation:h3PinFade .5s ease var(--ed,0ms) forwards,h3HqGlow 3.2s ease-in-out .6s infinite;}
.h3-map-pin--hq .h3-map-label em{display:block;margin-top:4px;font-style:normal;
  font-size:10.5px;font-weight:700;letter-spacing:1.5px;color:var(--h3-brand);}
.h3-map-pin--hq .h3-map-label::before{left:-18px;width:18px;height:2px;background:var(--h3-brand);}
/* The plate breathes rather than blinks -- enough to draw the eye on a static
   section without competing with the pin's own ring. */
@keyframes h3HqGlow{
  0%,100%{box-shadow:0 8px 22px -8px rgba(0,0,0,.75),0 0 0 0 rgba(247,143,27,0);}
  50%{box-shadow:0 8px 22px -8px rgba(0,0,0,.75),0 0 22px 2px rgba(247,143,27,.4);}
}

/* Hover card on a pin: street address plus a directions button, matching the
   footer's location cards. The pin itself is a zero-size box, so the card
   hangs off the dot and the whole pin lifts above its neighbours on hover. */
/* Layering, not raising: the address card sits BELOW every dot and label, so
   an open card can never intercept the pointer on its way to a neighbouring
   pin. Raising the hovered pin instead is what trapped the hover in the
   Riyadh/Karachi/India cluster. */
/* Hovering a location lights it up: the dot swells, the plate goes ember and
   the leader thickens, so the pin under the cursor is unmistakable while the
   address card opens. Transforms are declared per placement variant because
   each label is positioned with its own translate. */
.h3-map-dot{transition:width .25s ease,height .25s ease,box-shadow .25s ease;}
.h3-map-pin:hover .h3-map-dot,.h3-map-pin:focus-within .h3-map-dot{
  width:16px;height:16px;
  box-shadow:0 0 0 3px rgba(10,8,6,.9),0 0 0 5px var(--h3-brand),0 0 22px rgba(247,143,27,.95);}
.h3-map-pin--hq:hover .h3-map-dot,.h3-map-pin--hq:focus-within .h3-map-dot{width:21px;height:21px;}
.h3-map-label{cursor:default;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease;}
.h3-map-pin:hover .h3-map-label,.h3-map-pin:focus-within .h3-map-label{
  background:linear-gradient(180deg,rgba(247,143,27,.24),rgba(12,9,6,.94));
  border-color:var(--h3-brand);
  box-shadow:0 10px 26px -8px rgba(0,0,0,.8),0 0 20px rgba(247,143,27,.45);}
.h3-map-label::before{transition:background .25s ease,height .25s ease,width .25s ease;}
.h3-map-pin--r:hover .h3-map-label::before,.h3-map-pin--l:hover .h3-map-label::before{
  height:2px;background:var(--h3-brand);}
.h3-map-pin--t:hover .h3-map-label::before,.h3-map-pin--b:hover .h3-map-label::before{
  width:2px;background:var(--h3-brand);}
/* The glow loop would fight the hover state, so it stands down while hovered. */
.h3-map.in .h3-map-pin--hq:hover .h3-map-label,
.h3-map.in .h3-map-pin--hq:focus-within .h3-map-label{animation:none;}
.h3-map-pop{position:absolute;left:50%;top:20px;z-index:4;width:250px;
  transform:translate(-50%,-6px);
  background:#1b1917;border:1px solid rgba(247,143,27,.35);border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.55);padding:13px 15px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease .2s,transform .18s ease .2s,visibility .18s .2s;}
/* Invisible bridge over the gap between the dot and the card, so travelling
   from the pin down to "Get Directions" never leaves the hover area. */
.h3-map-pop::before{content:'';position:absolute;left:25%;right:25%;top:-24px;height:24px;}
.h3-map-pin:hover .h3-map-pop,.h3-map-pin:focus-within .h3-map-pop{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition-delay:0s;}
.h3-map-addr{display:block;margin-bottom:11px;font-size:13px;line-height:1.6;
  color:rgba(255,255,255,.78);text-transform:none;letter-spacing:0;}
/* Headquarters card opens above its dot as well. Its label sits to the right
   rather than above, so it only has to clear the dot itself -- hence the
   smaller offset than Karachi's. */
.h3-map-pin--hq .h3-map-pop{left:22px;top:auto;bottom:26px;transform:translate(0,6px);}
.h3-map-pin--hq:hover .h3-map-pop,.h3-map-pin--hq:focus-within .h3-map-pop{transform:translate(0,0);}
.h3-map-pin--hq .h3-map-pop::before{left:0;right:25%;top:auto;bottom:-30px;height:30px;}
/* Riyadh: label and card both sit to the left of the dot. */
.h3-map-pin--l .h3-map-pop{left:auto;right:18px;top:20px;transform:translate(0,-6px);}
.h3-map-pin--l:hover .h3-map-pop,.h3-map-pin--l:focus-within .h3-map-pop{transform:translate(0,0);}
/* Its card opens left AND 20px lower than the dot, so the pointer has to cross
   both gaps at once. A side strip alone left the diagonal uncovered, and the
   card closed on the way to it. This band runs along the card's whole top edge
   and out to the right past the dot, covering both. */
.h3-map-pin--l .h3-map-pop::before{left:0;right:-26px;top:-34px;bottom:auto;
  width:auto;height:34px;}
/* Cards that open above their dot. Karachi opens this way -- centred below put
   it straight over India's label and dot -- and clears its own label, which
   also sits above the pin, hence the 74px offset. */
.h3-map-pin--popt .h3-map-pop{left:50%;top:auto;bottom:74px;transform:translate(-50%,6px);}
.h3-map-pin--popt:hover .h3-map-pop,
.h3-map-pin--popt:focus-within .h3-map-pop{transform:translate(-50%,0);}
/* Bridge hangs under the card, spanning the gap down to the label and dot. */
.h3-map-pin--popt .h3-map-pop::before{left:25%;right:25%;top:auto;bottom:-64px;height:64px;}

/* --- Stats: a spec sheet, not a timeline. The ember spine with nodes read as
       a sequence, and these three aren't steps -- they're simultaneous facts
       about one operation. So: figures in a fixed left column that puts all
       three on a single axis, label and qualifier stacked to the right, a
       hairline between rows. Restraint is what makes a figure look verified;
       the previous 60px gradient numerals were doing the opposite. --- */
/* Framed as a panel so the column is an object beside the map rather than
   loose text floating on the black. */
.h3-facts{position:relative;padding:26px 32px 14px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.015) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);}
.h3-facts::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px 200px at 0% 0%,rgba(247,143,27,.10) 0%,rgba(247,143,27,0) 70%);}
.h3-facts>*{position:relative;z-index:1;}
.h3-facts-eyebrow{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--h3-brand);}
.h3-facts-list{margin:0;padding:0;}

/* Term left, figure right, leader rule between -- the two ends of each row sit
   on a shared axis, so the three figures line up without needing a fixed
   numeral column. Note runs full width underneath. */
.h3-fact{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;gap:7px 18px;padding:18px 0;
  border-top:1px solid rgba(255,255,255,.09);}
.h3-fact>*{position:relative;z-index:1;}
/* Tint bleeds past the row's own edges so the highlight reads as a band across
   the panel rather than a box drawn around the text. */
.h3-fact::before{content:'';position:absolute;left:-18px;right:-18px;top:4px;bottom:4px;
  z-index:0;border-radius:12px;background:rgba(247,143,27,.09);
  opacity:0;transition:opacity .32s ease;}
.h3-fact:hover::before{opacity:1;}
.h3-fact:first-of-type{border-top:none;}
.h3-fact-label{grid-column:1;display:flex;align-items:baseline;gap:14px;margin:0;
  font-size:16px;font-weight:700;letter-spacing:-.1px;color:#fff;white-space:nowrap;}
/* The leader: what carries the eye from term to figure, and the detail that
   makes the block read as an index rather than a stat card. */
/* Two stacked layers: the ember rule sits on top at zero width and is drawn
   across on hover by animating background-size, which is cheap and, unlike a
   background-image swap, actually transitions. */
.h3-fact-label::after{content:'';flex:1 1 auto;height:1px;transform:translateY(-4px);
  background-image:linear-gradient(90deg,var(--h3-brand) 0%,var(--h3-brand-dark) 100%),
                   linear-gradient(90deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.05) 100%);
  background-repeat:no-repeat;background-size:0% 100%,100% 100%;
  transition:background-size .5s cubic-bezier(.4,0,.2,1);}
.h3-fact:hover .h3-fact-label::after{background-size:100% 100%,100% 100%;}
/* tabular-nums keeps the column from twitching while the figures count up --
   proportional digits change width on every frame. */
.h3-fact-fig{grid-column:2;margin:0;font-size:29px;line-height:1;font-weight:800;
  letter-spacing:-1.1px;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;
  transform-origin:100% 50%;
  transition:color .3s ease,transform .32s cubic-bezier(.4,0,.2,1),text-shadow .3s ease;}
/* Ember lives on the suffix only, so the figure stays white and the accent
   still reads. */
.h3-fact-suffix{font-style:normal;color:var(--h3-brand);}
.h3-fact-note{grid-column:1/-1;margin:0;font-size:14px;line-height:1.55;
  color:rgba(255,255,255,.62);transition:color .3s ease;}
/* Hover is a read cue, not a control -- these rows are facts, not links -- so
   the row lights up and the leader completes rather than anything behaving like
   a button. Scaling from the right keeps the three figures on their axis. */
.h3-fact:hover .h3-fact-fig{color:var(--h3-hover);transform:scale(1.1);
  text-shadow:0 6px 26px rgba(247,143,27,.45);}
.h3-fact:hover .h3-fact-label{color:#fff;}
.h3-fact:hover .h3-fact-note{color:rgba(255,255,255,.9);}
/* --- Hub strip: a fixed five-column clock rail, not a marquee. Nothing moves
       except the digits, which is the point -- the row is now information the
       reader can scan rather than a loop they have to wait out. --- */
.h3-hubbar{margin-top:56px;border-top:1px solid var(--h3-line);border-bottom:1px solid var(--h3-line);}
.h3-hubbar-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0;}
.h3-hub{display:flex;flex-direction:column;gap:7px;padding:20px 24px;
  border-left:1px solid var(--h3-line);}
.h3-hub:first-child{border-left:0;}
.h3-hub-city{font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--h3-body);}
.h3-hub-time{display:flex;align-items:center;gap:9px;font-size:26px;font-weight:700;line-height:1;
  letter-spacing:-.6px;font-variant-numeric:tabular-nums;color:var(--h3-ink);}
/* Live pip. The only motion left in this band, and it is doing a job: it says
   the figure beside it is current rather than printed. */
.h3-hub-live{width:6px;height:6px;border-radius:50%;background:var(--h3-brand);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(247,143,27,.5);animation:h3HubPulse 2.4s ease-out infinite;}
@keyframes h3HubPulse{
  0%{box-shadow:0 0 0 0 rgba(247,143,27,.5);}
  70%{box-shadow:0 0 0 7px rgba(247,143,27,0);}
  100%{box-shadow:0 0 0 0 rgba(247,143,27,0);}
}
.h3-hub-role{font-size:11px;font-weight:600;letter-spacing:.4px;color:var(--h3-body);}
.h3-hub-role.is-hq{color:var(--h3-brand);font-weight:700;}


/* ==========================================================================
   DARK BANDS — team strip + map/locations
   --------------------------------------------------------------------------
   Both sections sit on near-black, so the neutrals that resolve against
   --h3-paper elsewhere are re-pointed here. Scoped to .h3-dark rather than
   folded into .h3-alt, which the case-study band still needs on paper.
   ========================================================================== */
.h3-dark{background:var(--h3-black);color:#fff;}
.h3-dark .h3-h2{color:#fff;}
.h3-dark .h3-sub,
.h3-dark .h3-hubbar{border-top-color:rgba(255,255,255,.12);border-bottom-color:rgba(255,255,255,.12);}
.h3-dark .h3-hub{border-left-color:rgba(255,255,255,.12);}
.h3-dark .h3-hub-city,
.h3-dark .h3-hub-role{color:rgba(255,255,255,.62);}
.h3-dark .h3-hub-time{color:#fff;}
/* The dot map is drawn at its final values against black, so it needs no
   brightness correction -- the lift the old flat silhouette required would
   wash the ember regions out. */

/* ==========================================================================
   LET'S TALK
   ========================================================================== */
.h3-teamstrip>.h3-inner{text-align:center;}
.h3-teamstrip>.h3-inner .h3-sub{max-width:66ch;margin-left:auto;margin-right:auto;}
.h3-sec>.h3-inner>.h3-h2{text-align:center;}
/* Soft ground with the same ember wash the Kubentic band uses, so the closing
   sequence reads as part of the brand rather than a white gap before the
   footer. clip (not hidden) keeps the sticky column below working. */
/* Deliberately not the portrait-column-plus-numbered-list pattern: the photo
   runs as a wide banner carrying the contact panel, and the three steps
   progress left to right beneath it. */
/* White ground, against the grey the engagement section above it uses -- the
   two shared --h3-paper-2 and merged into one block. The hairline makes the
   boundary explicit, since paper to paper-2 alone is too subtle to read. */
.h3-talk{position:relative;overflow:clip;background:var(--h3-paper);
  border-top:1px solid var(--h3-line);}
.h3-talk::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(760px 340px at 8% 0%,rgba(247,143,27,.10) 0%,rgba(247,143,27,0) 70%),
             radial-gradient(700px 320px at 94% 100%,rgba(247,143,27,.07) 0%,rgba(247,143,27,0) 70%);}
/* Ruled ground: a 28px dot field under a 112px major grid -- the same drafting
   -paper idea the capability cards use, rebuilt in ink rather than white for a
   light section. The radial mask keeps it clear of the centre, so it frames the
   content from the margins instead of sitting behind the reading line. */
.h3-talk::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(247,143,27,.28) 1px,transparent 1.6px),
    linear-gradient(rgba(10,10,10,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,10,10,.05) 1px,transparent 1px);
  background-size:28px 28px,112px 112px,112px 112px;
  -webkit-mask-image:radial-gradient(125% 92% at 50% 46%,transparent 36%,#000 82%);
  mask-image:radial-gradient(125% 92% at 50% 46%,transparent 36%,#000 82%);}
.h3-talk>.h3-inner{position:relative;z-index:1;}

/* Objects. All decorative, all under the content, none of them hoverable. */
.h3-tk-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip;}
.h3-tk-orb{position:absolute;border-radius:50%;}
.h3-tk-orb--a{width:460px;height:460px;top:-150px;left:-130px;
  background:radial-gradient(circle,rgba(247,143,27,.26) 0%,rgba(247,143,27,0) 68%);}
.h3-tk-orb--b{width:400px;height:400px;right:-130px;bottom:-140px;
  background:radial-gradient(circle,rgba(217,101,10,.20) 0%,rgba(217,101,10,0) 68%);}
/* Concentric rings, echoing the round contact icons and the circular marks
   used through the page. Cropped by the section, so only an arc reads. */
.h3-tk-ring{position:absolute;right:-70px;top:70px;width:330px;height:330px;
  border-radius:50%;border:1px solid rgba(247,143,27,.22);}
.h3-tk-ring::after{content:'';position:absolute;inset:56px;border-radius:50%;
  border:1px solid rgba(247,143,27,.16);}
/* Tight ember dot cluster, bottom left, as a counterweight to the rings. */
.h3-tk-dots{position:absolute;left:-16px;bottom:56px;width:190px;height:120px;
  background-image:radial-gradient(rgba(247,143,27,.42) 1.4px,transparent 2px);
  background-size:20px 20px;
  -webkit-mask-image:linear-gradient(115deg,#000 0%,transparent 72%);
  mask-image:linear-gradient(115deg,#000 0%,transparent 72%);}

/* Banner, not a portrait card: a wide letterbox crop framed on the face, with
   the contact panel sitting on it. */
.h3-tk-banner{position:relative;margin-top:44px;border-radius:22px;overflow:hidden;
  aspect-ratio:21/9;background:var(--h3-brand-surface);
  box-shadow:0 30px 70px -26px rgba(23,22,22,.40);}
.h3-tk-banner img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block;}
/* Scrim reads left to right, so the panel has ground to sit on while the right
   half of the photograph stays clean. */
.h3-tk-banner::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,10,10,.52) 0%,rgba(10,10,10,.16) 42%,rgba(10,10,10,0) 68%);}
.h3-tk-panel{position:absolute;left:34px;bottom:34px;z-index:2;max-width:330px;
  padding:20px 24px;border-radius:18px;
  background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -20px rgba(23,22,22,.5);}
.h3-tk-panel-t{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--h3-brand-dark);}
.h3-tk-panel-links{display:grid;gap:2px;}
.h3-tk-contact{display:flex;align-items:center;gap:11px;padding:6px 0;
  font-size:15px;font-weight:600;color:var(--h3-ink);text-decoration:none;transition:color .2s ease;}
.h3-tk-contact:hover{color:var(--h3-brand-dark);}
.h3-tk-contact-ico{display:grid;place-items:center;width:29px;height:29px;flex:0 0 auto;
  border-radius:9px;background:var(--h3-brand-surface);border:1px solid rgba(247,143,27,.28);
  color:var(--h3-brand-dark);}
.h3-tk-contact-ico svg{width:16px;height:16px;}

/* Progression runs across. Each column carries its own rule, which keeps the
   track continuous without punching a rail out behind the numerals. */
.h3-tk-flow{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:44px;margin:52px 0 0;padding:0;}
.h3-tk-step{min-width:0;}
.h3-tk-mark{display:flex;align-items:center;gap:16px;margin-bottom:18px;}
.h3-tk-num{flex:0 0 auto;font-size:34px;font-weight:800;line-height:1;letter-spacing:-1.5px;
  color:var(--h3-brand-dark);font-variant-numeric:tabular-nums;}
.h3-tk-rule{flex:1 1 auto;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(247,143,27,.55) 0%,rgba(247,143,27,.08) 100%);}
.h3-tk-t{margin:0 0 10px;font-size:19px;font-weight:700;line-height:1.3;
  color:var(--h3-ink);text-wrap:balance;}
.h3-tk-p{margin:0;font-size:15px;line-height:25px;color:var(--h3-body);}

.h3-tk-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px;margin-top:52px;padding-top:28px;border-top:1px solid var(--h3-line);}
.h3-tk-note{font-size:14px;line-height:1.5;color:var(--h3-body);}

/* ==========================================================================
   FOOTER — measured from the source: #202022 ground, 89px top padding, three
   columns split 41.67 / 25 / 33.33 with 1px white dividers, and link/location
   lists flowing row-major across two columns.
   ========================================================================== */
/* ==========================================================================
   REVEAL
   ========================================================================== */
.h3-rev{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease;}
.h3-rev.in{opacity:1;transform:none;}
.h3-rev[style*="--d"]{transition-delay:calc(var(--d) * .08s);}

/* ==========================================================================
   RESPONSIVE — breakpoints follow the original (1100 / 768)
   ========================================================================== */
@media(max-width:1100px){
  .h3-awf{grid-template-columns:1fr;gap:36px;}
  .h3-awf-intro{position:static;}
  .h3-awf-intro .h3-h2{max-width:none;}
  .h3-capgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
  .h3-sn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  .h3-capsec-head{grid-template-columns:1fr;gap:20px;align-items:start;}
  .h3-capsec-aside{gap:18px;}
  .h3-slide-fg{right:2%;width:38%;bottom:150px;}
  .h3-inner{padding:0 40px;}
  .h3-slide-contents{max-width:78%;}
  .h3-slide-contents h1{font-size:36px;}
  .h3-slide-contents h2{font-size:34px;}
  .h3-counter{right:24px;}
  .h3-burger{display:inline-flex;}
  /* Mobile nav panel. The burger has always toggled .is-open, but nothing ever
     styled that state, so the menu was unreachable below 1100px. The panel is
     fixed under the bar and scrolls itself when the list is taller than the
     viewport. */
  .h3-nav{display:block;position:fixed;left:0;right:0;top:var(--h3-head-h);
    background:var(--h3-void);border-top:1px solid var(--h3-line-d);padding:6px 0 16px;
    max-height:calc(100dvh - var(--h3-head-h));overflow-y:auto;margin-left:0;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s;}
  .h3-nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
  .h3-nav>a{display:block;font-size:17px;padding:14px 40px;
    border-bottom:1px solid rgba(255,255,255,.08);transition:color .2s;}
  .h3-nav>a:hover{color:var(--h3-brand);border-bottom-color:rgba(255,255,255,.08);}
  .h3-nav>a:last-child{border-bottom:none;}
  .h3-nav-contact{display:block;color:var(--h3-brand);font-weight:600;}

  .h3-adv{grid-template-columns:repeat(2,1fr);}
  .h3-adv-item:nth-child(odd){border-left:none;}
  .h3-adv-item:nth-child(n+3){border-top:1px solid var(--h3-line);}
  .h3-cs-content{max-width:60%;}
  .h3-foot-row{grid-template-columns:1fr;}
  .h3-foot-box{border-right:none;border-bottom:1px solid rgba(255,255,255,.25);padding:20px 0;}
  .h3-foot-locs{padding:20px 0;}
  .h3-foot-locs ul{padding:0;}
  .h3-foot-box:last-child{border-bottom:none;}
}
@media(max-width:768px){
  .h3-sn-cta{flex-direction:column;margin-top:30px;}
  .h3-kym-grid{grid-template-columns:1fr;gap:34px;}
  .h3-kbn-grid{grid-template-columns:1fr;gap:28px;}
  .h3-kbn-cta{flex-direction:column;margin-top:30px;}
  .h3-kbn-cta .h3-btn{width:100%;justify-content:center;}
  .h3-kym-fig{padding-bottom:12%;}
  .h3-kym-frame--back{width:90%;}
  .h3-kym-frame--front{width:98%;margin-top:-11%;}
  .h3-kym-txt .h3-h2{max-width:none;}
  .h3-kym-cta .h3-btn{width:100%;justify-content:center;}
  .h3-exp2-row{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 0;}
  .h3-exp2-list{margin-top:32px;}
  .h3-exp2-cta{flex-direction:column;margin-top:30px;}
  .h3-exp2-cta .h3-btn{width:100%;justify-content:center;}
  .h3-eng-grid{grid-template-columns:1fr;gap:18px;margin-top:32px;}
  .h3-eng-card{padding:24px 22px 0;}
  .h3-eng-when{margin-left:-22px;margin-right:-22px;padding:16px 22px;}
  .h3-eng-foot{flex-direction:column;gap:18px;}
  .h3-eng-foot .h3-btn{width:100%;justify-content:center;}
  .h3-sn-scope{flex-direction:column;align-items:flex-start;padding:18px 20px;}
  .h3-sn-cta .h3-btn{width:100%;justify-content:center;text-align:center;line-height:1.35;}
  .h3-sn-scope{margin-top:26px;}
  .h3-awf-step{grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding-bottom:30px;}
  .h3-awf-n{width:44px;height:44px;font-size:13px;}
  .h3-awf-step::before{left:21px;top:44px;}
  .h3-capgrid{grid-template-columns:1fr;margin-top:32px;gap:16px;}
  .h3-sn-grid{grid-template-columns:1fr;margin-top:34px;}
  .h3-capcell{padding:26px 22px 24px;border-radius:16px;}
  .h3-capsec-head{padding-bottom:26px;}
  .h3-capsec-aside .h3-btn{width:100%;justify-content:center;}
  .h3-cap{padding:24px 20px;}
  /* Copy is full-width here and the scrim runs top-to-bottom, so a right-hand
     product shot would sit underneath the paragraph. */
  .h3-slide-fg{display:none;}
  .h3-inner{padding:0 24px;}
  .h3-sec{padding:56px 0;}
  /* The expertise bar lives inside .h3-herowrap. Making it position:static was
     only half the fix — the wrapper still had a fixed 100svh height and
     overflow:hidden, so the bar was laid out below the fold and clipped away
     entirely. The wrapper now grows to slider + bar, and the slider carries the
     explicit height its absolutely-positioned slides need. */
  .h3-herowrap{height:auto;min-height:0;overflow:visible;}
  .h3-hero{height:auto;}
  /* Height follows whichever slide is showing. A fixed height cannot suit both
     the short slides (dead space beneath the CTA) and the first one, which
     carries three stat blocks and overflowed into the expertise rail below.
     Absolutely positioned slides cannot size their parent, so on mobile the
     active slide goes back into flow and the others are display:none. The
     cross-fade is lost here; correct layout is worth more than the transition
     on a phone. */
  .h3-slider{height:auto;min-height:0;}
  .h3-slide{position:relative;inset:auto;height:auto;
    opacity:1;visibility:visible;transition:none;display:none;}
  .h3-slide.is-active{display:block;}
  .h3-slide-bg{top:0;}
  .h3-slide-bg::after{background:linear-gradient(to bottom,rgb(var(--h3-shade) / .35) 0%,rgb(var(--h3-shade) / .5) 45%,rgb(var(--h3-shade) / .7) 100%);}
  /* Copy spans the full width on mobile, so the lift is an even wash, not a left band. */
  .h3-slide-bg::before{background:rgb(var(--h3-lift) / .16);}
  /* The base rule's padding-bottom:200px still applied here -- that was the
     empty band. The counter is a narrow rail on the right, so the copy is kept
     clear of it with padding-right rather than by reserving 200px of height
     the whole width of the slide. padding-top in % resolved against the slide
     WIDTH, so it also shifted with orientation; it is a fixed offset now. */
  .h3-slide .h3-inner{padding-top:calc(var(--h3-head-h) + 20px);padding-bottom:96px;
    align-items:flex-start;}
  /* Clears the counter rail and its two nav buttons horizontally: the buttons
     sit 34px from the edge and are 38px wide, so the copy stops short of 76px
     rather than reserving that height across the whole slide. */
  .h3-slide-contents{max-width:100%;gap:14px;padding-right:76px;}
  .h3-slide-contents h1,.h3-slide-contents h2{font-size:26px;line-height:1.2;}
  .h3-slide-contents p{font-size:14px;line-height:22px;max-width:100%;}
  .h3-tag{padding:5px 14px;}
  .h3-slide-logo--microsoft img{height:27px;}
  .h3-slide-logo--servicenow img{height:21px;}
  .h3-slide-logo--salesforce img{height:60px;}
  .h3-slide-logo--aws img{height:38px;}
  .h3-slide-logo--oracle img{height:21px;}
  .h3-tag .tag-label{font-size:10px;letter-spacing:1.5px;}
  /* Back to two-up on phones: three columns of a full-width slide leave
     each label about 100px, which breaks every one of them. */
  .h3-slide-claims{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px;gap:12px 26px;}
  .h3-slide-claims b{font-size:20px;}
  .h3-slide-claims span{font-size:12px;}
  /* Slide nav keeps its vertical form, but drops to the foot of the slider:
     the copy is full-width on mobile, so a vertically-centred counter lands on
     top of the supporting paragraph. */
  /* The nav buttons are positioned outside the counter -- next at bottom:-52px,
     prev at top:-52px -- and each is 38px tall, so the counter needs at least
     ~56px of clearance beneath it or the next button hangs off the slide. It
     also sits further in than the buttons' own -17.5px overhang, which is what
     was clipping them against the right edge. */
  .h3-counter{right:34px;top:auto;bottom:60px;transform:none;gap:6px;}
  .h3-counter-line{height:36px;}
  .h3-slide-nav{width:34px;height:34px;margin-right:-15.5px;}
  .h3-slide-nav svg{width:13px;height:13px;}
  .h3-slide-nav-prev{top:-42px;}
  .h3-slide-nav-next{bottom:-42px;}
  /* CTA labels run to five words now ("Explore Forward-Deployed Engineering"),
     which overflowed the screen while the button was still nowrap. */
  .h3-slide-action .h3-btn{white-space:normal;max-width:100%;line-height:1.35;text-align:left;}
  /* Below the hero on phones, so the panel drops its blur and sits on the
     page's own black -- there is no slide art left behind it to separate from,
     and backdrop-filter is the most expensive thing on the page. */
  .h3-expertise{position:static;padding:28px 0 40px;background:var(--h3-black);}
  .h3-exp-rail{-webkit-backdrop-filter:none;backdrop-filter:none;
    background:rgba(255,255,255,.04);box-shadow:none;}
  .h3-exp-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .h3-exp-item:nth-child(odd){border-left:0;}
  .h3-exp-item:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1);}
  .h3-exp-item a{padding:16px 14px 18px;gap:12px;}
  .h3-exp-head{padding:12px 18px;font-size:11px;letter-spacing:2px;}
  .h3-logosec .h3-h2{max-width:22ch;}
  .h3-logo-marq::before,.h3-logo-marq::after{width:60px;}
  .h3-logo-track{gap:40px;animation-duration:30s;}
  .h3-logo-track img{max-width:130px;max-height:46px;}
  .h3-logo-item{padding:1rem 0;}
  /* Compact bar: logo, search, burger — the CONTACT pill moves into the panel,
     which is what was pushing the burger off the right edge on phones. The
     header height token drops with it so the anchor bar and hero follow. */
  .page-home3{--h3-head-h:65px;}
  .h3-head-in{padding:0 20px;}
  .h3-logo img{height:32px;}
  .h3-contact-btn{display:none;}
  .h3-head-cta{gap:16px;margin-left:auto;}
  .h3-burger{width:34px;height:34px;}
  .h3-searchbar{padding:0 20px;gap:14px;}
  .h3-searchbar input{font-size:18px;}
  /* "Go to section" dropdown. A horizontal scroller hides five of the six
     targets behind a gesture nobody discovers, so on phones the bar collapses
     to one labelled control that opens the full list. */
  .h3-anchor{height:auto;}
  .h3-anchor-toggle{display:flex;width:100%;height:44px;align-items:center;justify-content:center;gap:10px;
    background:none;border:none;padding:0;cursor:pointer;color:#fff;font-family:inherit;
    font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
  .h3-anchor-toggle svg{width:12px;height:12px;flex-shrink:0;transition:transform .25s;}
  .h3-anchor-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}
  .h3-anchor-in{display:none;overflow:visible;}
  .h3-anchor.is-open .h3-anchor-in{display:block;}
  .h3-anchor-menu{flex-direction:column;width:100%;padding:0;margin:0;}
  .h3-anchor-menu li{width:100%;border-top:1px solid rgba(255,255,255,.28);}
  .h3-anchor-menu li a{width:100%;height:auto;justify-content:space-between;
    font-size:15px;padding:14px 24px;margin:0;}
  /* Every row keeps a downward caret meaning "jump to". The desktop bar flips
     it to mark the section you are in, which on a vertical list just reads as
     one row pointing the wrong way. */
  .h3-anchor-menu li a svg{width:13px;height:13px;}
  .h3-anchor-menu li a.is-on svg{transform:none;}
  .h3-h2,.h3-band h2{font-size:28px;}
  /* Case studies on phones. The desktop treatment is a crossfading stack of
     full-bleed photo slides with a six-across tab strip — neither survives a
     390px screen. Instead: a scroll-snap track of light cards you can swipe,
     with the tab strip collapsed to a pager showing only the current title.
     The slides stop being absolutely stacked here, so the crossfade is simply
     not in play and the native scroller does the work. */
  /* Centred on phones, as the reference has it — a two-line heading over a
     three-line standfirst reads better centred at this measure. */
  .h3-cs-head{text-align:center;margin-bottom:26px;}
  .h3-cs-wrap{display:flex;flex-direction:column;}
  .h3-cs-slider{order:2;height:auto;min-height:0;border-radius:0;overflow:visible;
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:16px 0 10px;scrollbar-width:none;}
  .h3-cs-slider::-webkit-scrollbar{display:none;}
  .h3-cs-slide{position:relative;inset:auto;height:auto;min-height:0;
    flex:0 0 86%;scroll-snap-align:center;opacity:1;visibility:visible;
    display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
    background:#fff;box-shadow:0 10px 30px -14px rgba(0,0,0,.3);}
  /* The photograph moves from background to a band at the foot of the card, so
     the copy sits on white and the scrim is no longer needed at all. */
  .h3-cs-bg{position:relative;order:2;width:auto;height:190px;flex-shrink:0;
    margin:0 20px 24px;border-radius:10px;overflow:hidden;}
  .h3-cs-bg::after,.h3-cs-bg::before{display:none;}
  .h3-cs-slide .h3-inner{order:1;padding:24px 20px 20px;max-width:none;}
  .h3-cs-content{max-width:100%;gap:14px;}
  /* Phone slides are light cards, so every white-on-photo treatment above has
     to be re-grounded here — and the entrance animation must not run: these
     slides never get .is-active, so the hidden start state would stick. */
  .h3-cs-content>*{opacity:1;transform:none;animation:none;}
  .h3-cs-cat{background:var(--h3-brand-surface);border-color:rgba(247,143,27,.32);
    color:var(--h3-brand-dark);-webkit-backdrop-filter:none;backdrop-filter:none;}
  .h3-cs-title{font-size:24px;color:var(--h3-ink);text-shadow:none;}
  .h3-cs-content p{font-size:15px;line-height:24px;color:var(--h3-body);text-shadow:none;}
  .h3-cs-divider{background:var(--h3-line);}
  .h3-cs-stat + .h3-cs-stat{border-left-color:var(--h3-line);}
  .h3-cs-stat b{font-size:30px;color:var(--h3-ink);}
  .h3-cs-stat.h3-cs-stat--word b{font-size:14px;color:var(--h3-brand-dark);}
  .h3-cs-stat span{color:var(--h3-body);}
  /* Scope chips were the one white-on-photo treatment missed here: white text
     on a 10%-white ground over a white card rendered them invisible, which
     read as a blank band between the copy and the CTA on the slides that
     carry scope instead of stats. Same grounding as .h3-cs-cat. */
  .h3-cs-scope li{color:var(--h3-brand-dark);background:var(--h3-brand-surface);
    border-color:rgba(247,143,27,.32);}
  .h3-cs-cta{width:100%;justify-content:center;}

  /* Pager: only the active tab is rendered, arrows either side of it. */
  .h3-cs-nav{order:1;position:relative;display:grid;
    background:#fff;padding:0;border-radius:8px;overflow:hidden;min-height:62px;}
  /* All six tabs share one grid cell and the inactive ones fade out, rather
     than being display:none. A tab going none -> block has no previous
     computed width for the browser to interpolate from, so the 10s indicator
     transition was skipped entirely and the bar sat at 100%% from the start. */
  .h3-cs-tab{grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;
    background:#fff;padding:20px 46px 16px;text-align:center;transition:opacity .3s ease;}
  .h3-cs-tab.is-on{opacity:1;visibility:visible;pointer-events:auto;}
  .h3-cs-tab.is-on .tab-title{font-size:14px;font-weight:700;color:#000;}
  .h3-cs-tab .tab-indicator{height:4px;}
  /* Anchored to the 62px pager rather than the old vertical centre of the
     whole slider, which on mobile lands in the middle of a card. */
  .h3-cs-ctrl{display:grid;top:31px;z-index:6;box-shadow:none;}
  .h3-cs-ctrl-prev{left:8px;}
  .h3-cs-ctrl-next{right:8px;}
  .h3-carousel{padding:0;}
  .h3-c-arrow{display:none;}
  .h3-accel{padding:66px 0;}
  .h3-accel-in{flex-direction:column;align-items:flex-start;gap:32px;}
  .h3-accel-h{font-size:24px;}
  .h3-accel-actions{width:100%;}
  .h3-accel-p{font-size:14px;line-height:24px;}
  .h3-accel-contact{font-size:14px;gap:8px;}
  .h3-bandsec{padding:44px 0;}
  .h3-band{grid-template-columns:1fr;align-items:flex-start;gap:26px;padding:32px 24px;}
  .h3-globe{grid-template-columns:1fr;gap:28px;}
  .h3-map-label{font-size:11px;padding:5px 9px;letter-spacing:.8px;}
  .h3-map-pin--hq .h3-map-label{font-size:12px;padding:7px 11px;left:20px;}
  .h3-map-pin--hq .h3-map-label em{font-size:9.5px;}
  .h3-map-pin--hq .h3-map-dot,.h3-map-pin--hq .h3-map-ping,
  .h3-map-pin--hq::after{width:13px;height:13px;}
  .h3-map-pop{width:200px;padding:11px 12px;}
  .h3-map-addr{font-size:12px;margin-bottom:9px;}
  .h3-map-dot{width:8px;height:8px;}
  .h3-facts{padding:26px 24px;}
  .h3-fact{padding:16px 0;gap:6px 14px;}
  .h3-fact-fig{font-size:26px;letter-spacing:-.9px;}
  /* The three-across track becomes one column, so each rule stops short
     instead of spanning a full row. */
  .h3-tk-banner{aspect-ratio:16/9;margin-top:32px;}
  /* Rings are sized for the desktop measure and crowd the copy once the
     section narrows; the washes and the ruled ground carry it from here. */
  .h3-tk-ring,.h3-tk-dots{display:none;}
  .h3-talk::after{background-size:24px 24px,96px 96px,96px 96px;}
  .h3-tk-panel{left:24px;bottom:24px;max-width:300px;}
  .h3-tk-flow{grid-template-columns:1fr;gap:30px;margin-top:38px;}
  .h3-tk-rule{max-width:180px;}
  /* The banner is short enough to keep on phones, but the panel comes off
     the photo and sits under it, where it has room to be legible. */
  .h3-tk-banner{aspect-ratio:4/3;border-radius:16px;}
  .h3-tk-banner::after{background:linear-gradient(180deg,rgba(10,10,10,0) 40%,rgba(10,10,10,.30) 100%);}
  .h3-tk-panel{position:static;max-width:none;margin-top:12px;border-radius:16px;
    background:var(--h3-brand-surface);border-color:rgba(247,143,27,.22);box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;}
  .h3-tk-cta{width:100%;justify-content:center;}
  .h3-tk-foot{margin-top:38px;}
  /* One certification at a time on phones, straight on the black band with no
     card around it — the tile chrome only ever existed to separate five of them
     sitting side by side. Arrows sit at the edges, dots below. */
  .h3-awards-car{padding:0 36px;margin-top:34px;}
  .h3-awards-car .h3-c-arrow{display:grid;}
  .h3-award{background:none;border:none;border-radius:0;padding:10px 0;}
  .h3-award:hover{background:none;border-color:transparent;transform:none;}
  /* Larger than the desktop tile: with one mark on screen at a time there is
     no neighbouring card to stay level with, and the 360x180 source has the
     resolution for it. */
  .h3-award-logo{height:116px;margin-bottom:18px;}
  .h3-award-logo img{max-height:116px;max-width:270px;opacity:1;}
  .h3-award-cap{font-size:14px;text-decoration:underline;text-underline-offset:5px;
    text-decoration-color:rgba(255,255,255,.35);}
  .h3-adv{grid-template-columns:1fr;border-radius:16px;}
  .h3-adv-item{border-left:none !important;padding:28px 24px;}
  .h3-adv-item:not(:first-child){border-top:1px solid var(--h3-line);}
  .h3-kbn-grid{grid-template-columns:1fr;}
  .h3-team-tile{height:250px;}
  /* Placement is dropped below the full measure: the panorama keeps the full
     row, the portrait keeps its double height, the rest flow two-up. */
  .h3-tm-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px;margin-top:34px;}
  .h3-tm-tile:nth-child(1){grid-column:auto;grid-row:span 2;}
  .h3-tm-tile:nth-child(2){grid-column:1/-1;grid-row:auto;}
  .h3-tm-tile:nth-child(3),
  .h3-tm-tile:nth-child(4),
  .h3-tm-tile:nth-child(5){grid-column:auto;grid-row:auto;}
  /* One column on phones: a 94px figure gutter leaves the qualifier too
     narrow to sit beside it. Figures go back to the left edge once they are
     no longer sharing a column with anything. */
  /* Narrow: term left, figure right on one row, note underneath. The leader
     has no room to run, so the rule is dropped rather than left as a stub. */
  .h3-fact{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 14px;padding:16px 0;}
  .h3-fact-label{white-space:normal;}
  .h3-fact-label::after{display:none;}
  .h3-fact-fig{grid-column:2;grid-row:1;font-size:26px;text-align:right;}
  .h3-hubbar{margin-top:38px;}
  /* Five clock columns need about 140px each before the times start colliding
     with the role labels; below that the row wraps to a 2x3 grid. */
  .h3-hubbar-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .h3-hub{padding:16px 18px;}
  .h3-hub:nth-child(odd){border-left:0;}
  .h3-hub:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12);}
  .h3-hub-time{font-size:22px;}
  .h3-ins-title{font-size:17px;}
  .h3-tk-t{font-size:17px;}
  .h3-tk-num{font-size:28px;}
  .h3-tk-eyebrow{font-size:11px;}
  .h3-foot-in{padding:0 24px;}
  .h3-foot-brand p{font-size:16px;line-height:26px;}
  .h3-foot-links ul,.h3-foot-locs ul{padding:12px 0;}
  /* Lower bar centres on phones: phone and email stack instead of sitting
     side by side, the social circles centre under them, and Privacy Policy
     drops below rather than being pushed right by margin-left:auto. */
  .h3-foot-lower{flex-direction:column;align-items:center;gap:22px;text-align:center;padding:26px 0 34px;}
  .h3-foot-contact{flex-direction:column;gap:10px;}
  .h3-foot-contact li{margin-right:0;}
  .h3-foot-lower .h3-foot-policy{margin-left:0;}
  .h3-social li{margin:0 10px;}
  .h3-cs-stats{gap:0;}
  .h3-cs-stat + .h3-cs-stat{padding-left:16px;}
  /* "Up to" runs inline with the figure on wide screens, which is what made
     that column the widest of the three. On a phone it takes its own line so
     each numeral keeps a column of its own. */
  .h3-cs-stat b{flex-wrap:wrap;min-height:0;}
  .h3-cs-stat-pre{flex:0 0 100%;padding-bottom:1px;}
  .h3-cs-scope{gap:8px;}
  .h3-cs-scope li{padding:6px 12px;font-size:12px;}
}
/* --------------------------------------------------------------------------
   Small phones. The 768 block handles layout; this one only takes the type and
   the taller fixed-height blocks down a step so nothing overflows a 360px bar.
   -------------------------------------------------------------------------- */
@media(max-width:480px){
  .h3-cap-t{font-size:16px;}
  .h3-cap-tags li{white-space:normal;}
  .h3-inner{padding:0 18px;}
  .h3-h2{font-size:24px;}
  .h3-band h2{font-size:22px;}
  .h3-band-lead{font-size:16.5px;line-height:27px;}
  .h3-band-lead::before{margin-bottom:14px;}
  /* Stacked, so the divider moves above the column. */
  .h3-band-aside{width:100%;gap:22px;padding:26px 0 0;border-left:none;
    border-top:1px solid rgba(255,255,255,.22);}
  .h3-sub{font-size:15px;line-height:24px;}
  .h3-exp-item a{padding:14px 12px 16px;}
  .h3-exp-item p{font-size:12.5px;}
  .h3-exp-ico{height:24px;width:24px;}
  .h3-awards-car{padding:0 30px;}
  .h3-award-logo{height:100px;}
  .h3-award-logo img{max-height:100px;max-width:240px;}
  .h3-ins-body{padding:18px 18px 16px;}
  .h3-accel-h{font-size:20px;}
  .h3-accel-cta,.h3-band-cta{width:100%;justify-content:center;}
  /* "Download our capability statement" is wider than a 360px screen at
     nowrap, so the pair wraps and centres instead of overflowing. */
  .h3-accel-cta{white-space:normal;text-align:center;line-height:1.4;}
  .h3-band{padding:26px 20px;}
  .h3-team-tile{height:215px;}
  .h3-tm-grid{grid-template-columns:1fr;grid-auto-rows:200px;gap:12px;}
  .h3-tm-tile:nth-child(1){grid-row:auto;}
  .h3-tm-eyebrow{font-size:11px;}
  .h3-cs-slide{flex:0 0 88%;}
  .h3-cs-title{font-size:21px;}
  .h3-cs-bg{height:165px;margin:0 16px 20px;}
  .h3-nav>a{padding:13px 24px;}
}

@media(prefers-reduced-motion:reduce){
  .h3-kym-frame{transition:none;}
  .h3-cap-ico{transition:none;transform:none;}
  .h3-cap-ico svg{animation:none;transform:none;}
  .h3-cap:hover .h3-cap-ico{transform:none;border-radius:13px;}
  .h3-cap:hover .h3-cap-ico svg{animation:none;}
  .h3-cap:hover .h3-cap-ico::after{animation:none;}

  .h3-logo-track,.h3-team-track,.h3-reel-track,.h3-map-ping,.h3-hub-live{animation:none;}
  /* The reel stands still, so let each row be scrolled by hand instead. */
  .h3-reel-row{overflow-x:auto;}
  /* The halo and arrow still mark the button out; only the glint goes. */
  .h3-contact-btn::before{animation:none;opacity:0;}
  .h3-contact-arrow{transition:none;}
  .h3-map-ping,.h3-map-pin--hq::after{display:none;}
  /* These animate in from hidden, so they need their end state back. */
  .h3-map-label,.h3-map-links path{opacity:1;animation:none;}
  .h3-fact-fig,.h3-fact-note,.h3-fact::before,.h3-fact-label::after{transition:none;}
  .h3-lb,.h3-lb-img,.h3-lb-btn,.h3-tm-zoom{transition:none;}
  .h3-fact:hover .h3-fact-fig{transform:none;}
  .h3-fact:hover .h3-fact-label::after{background-size:100% 100%,100% 100%;}
  .h3-map-dot{opacity:1;transform:translate(-50%,-50%);animation:none;}
  .h3-map.in .h3-map-label,.h3-map.in .h3-map-dot,
  .h3-map.in .h3-map-pin--hq .h3-map-label,.h3-map.in .h3-map-links path{animation:none;}
  /* A stopped belt hides most of the row, so hand it to the user to scroll. */
  .h3-logo-marq{overflow-x:auto;}
  .h3-logo-marq::before,.h3-logo-marq::after{display:none;}
  .h3-counter-progress.animating,.h3-cs-tab.is-on .tab-indicator{transition:none;}
  .h3-exp-item a::before,.h3-exp-item a::after,.h3-exp-ico,
  .h3-exp-num,.h3-exp-go{transition:none;}
  .h3-capcell-ico svg{animation:none;}
  .h3-capcell::before,.h3-capcell::after,.h3-capcell-ico,
  .h3-capcell-tags li{transition:none;}
  .h3-ins-card,.h3-ins-cover img,.h3-ins-body::before,
  .h3-ins-title,.h3-ins-more a,.h3-ins-more .btn-arrow{transition:none;}
  .h3-rev{opacity:1;transform:none;}
  .h3-cs-content>*{opacity:1;transform:none;animation:none;}
  .h3-cs-slide.is-active .h3-cs-content>*{animation:none;}
  .h3-cs-bg img,.h3-cs-slide.is-active .h3-cs-bg img{transform:none;transition:none;}
  /* Slide copy is simply present: no swing, zoom, rise or pop. */
  .h3-slide-contents>*,
  .h3-slide-contents .h3-slide-claims li{opacity:1;transform:none;transition:none;}
  .h3-slide.is-active .h3-tag,
  .h3-slide.is-active .h3-slide-logo,
  .h3-slide.is-active .h3-slide-contents h1,
  .h3-slide.is-active .h3-slide-contents h2,
  .h3-slide.is-active .h3-slide-contents p,
  .h3-slide.is-active .h3-slide-claims li,
  .h3-slide.is-active .h3-slide-action{animation:none;}
  /* No fade-up or drift: the slide art is simply there, full size. */
  .h3-slide-bg img{opacity:1;transform:scale(1.3);transition:none;}
  .h3-slide.is-active .h3-slide-bg img{animation:none;}
  /* No fly-in: the product shot is simply present for the slide's duration. */
  .h3-slide-fg{transition:none;}
  .h3-slide.is-active .h3-slide-fg{transform:none;}
  .h3-award:hover{transform:none;}
}

/* ==========================================================================
   HEADER NAVIGATION — the site-wide mega menu inside the Home 3 bar.

   The markup is inabia_primary_fallback() (identical to /home), so the panels
   themselves keep their approved cream styling and need no work here. What this
   block does is (a) re-dress the five top-level links for this bar's 88px
   void-black geometry, and (b) re-anchor the panels: .h3-head carries a
   backdrop-filter, which makes it the containing block for fixed descendants,
   so the fixed .mega would resolve against the header instead of the viewport.
   Switching to absolute + top:100% against the header is exact and drops the
   JS's inline top (the !important beats it), rather than fighting it.
   ========================================================================== */
.h3-nav-mega{margin-left:auto;}
.h3-nav-mega>.navlinks{gap:30px;}
/* position:static on the item so the panel resolves against .h3-head, not .navitem. */
.h3-nav-mega .navitem{position:static;}
.h3-nav-mega>.navlinks>.navitem>.navlink{color:#fff;font-size:17px;font-weight:500;
  text-transform:capitalize;white-space:nowrap;padding:10px 0;}
.h3-nav-mega>.navlinks>.navitem>.navlink:hover{color:var(--h3-brand);}
.h3-nav-mega>.navlinks>.navitem>.navlink::after{background:var(--h3-brand);bottom:-4px;}
.page-home3 .mega{position:absolute;top:100% !important;left:0;right:0;}

@media(max-width:1100px) and (min-width:981px){
  /* The mega collapses to its accordion at 980px (main.js's desktop threshold),
     so hold the inline bar — and keep the burger away — down to that width
     rather than the 1100px the old eight-link bar needed. */
  .h3-burger{display:none;}
  .h3-nav-mega{display:flex;position:static;margin-left:auto;padding:0;border-top:none;
    background:none;max-height:none;overflow:visible;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;}
  .h3-nav-mega>.navlinks{gap:22px;}
  .h3-nav-mega>.navlinks>.navitem>.navlink{font-size:15px;}
}

@media(max-width:980px){
  /* Inside the dark drawer the panels are already restyled by the theme's own
     mobile accordion rules; all that's needed is to un-hide the list (it hides
     itself for the standard header, which opens it with .open) and give the
     rows the drawer's 40px gutter. */
  .h3-nav-mega>.navlinks{display:flex;flex-direction:column;position:static;
    background:none;backdrop-filter:none;border:none;padding:0;gap:0;
    align-items:stretch;max-height:none;overflow:visible;}
  .h3-nav-mega>.navlinks>.navitem{border-bottom:1px solid rgba(255,255,255,.08);}
  .h3-nav-mega>.navlinks>.navitem:last-child{border-bottom:none;}
  .h3-nav-mega>.navlinks>.navitem>.navlink{padding:14px 40px;font-size:17px;}
  .h3-nav-mega .mega-inner{padding:4px 40px 14px;}
}

/* ==========================================================================
   TEAM MOSAIC — phone carousel
   Placed last so it wins over the 1100px and 640px grid rules by source order.
   The mosaic's whole point is the relationship between tiles of different
   sizes; at one column that is gone and it becomes a long vertical scroll, so
   on phones it turns into a snap carousel of equal frames instead.
   ========================================================================== */
@media(max-width:768px){
  .h3-tm-grid{display:flex;grid-template-columns:none;grid-auto-rows:auto;
    gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    /* Full-bleed rail: tiles run to the screen edge, with the container's own
       padding holding the first and last in line with the copy above. */
    margin-inline:-20px;padding-inline:20px;}
  .h3-tm-grid::-webkit-scrollbar{display:none;}
  /* 86% leaves a sliver of the next frame showing, which is what tells a
     reader the rail scrolls at all -- no dots needed to say so. */
  .h3-tm-tile{flex:0 0 86%;scroll-snap-align:center;aspect-ratio:4/3;
    grid-column:auto;grid-row:auto;}
  .h3-tm-tile:nth-child(1),
  .h3-tm-tile:nth-child(2),
  .h3-tm-tile:nth-child(3),
  .h3-tm-tile:nth-child(4),
  .h3-tm-tile:nth-child(5){grid-column:auto;grid-row:auto;}
}