html[data-theme="dark"] section#proof .tb-meter{background:var(--border);}
html[data-theme="dark"] section#proof .tb-fig + .tb-fig{border-left-color:var(--border);}

/* ============================================================
   WHY US ? the honest contrast. Left column is the industry
   default, dimmed; right column is ours, lit. Same beam logic,
   applied to an argument instead of a headline.
   ============================================================ */
/* ============================================================
   THE HOUSE STYLE
   Tekcroft's own headline is "built around one blueprint", so the page
   is set as one: every section is a numbered sheet, every sheet opens
   with the same three-part mark, and every panel carries the corner
   registration ticks a drawing would. Three devices, repeated without
   variation ? that repetition is the identity.
   ============================================================ */

/* The sheet mark, now set in a pill: a brand dot, the sheet number, a short
   rule that still draws itself, then the label. Same three parts as before ?
   they have simply been given an edge to sit inside, which is what makes it
   read as a badge rather than a stray line of small caps. */
.smark{display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
  padding:8px 18px; border:1px solid var(--border); border-radius:30px;
  background:var(--surface); white-space:nowrap;}
.smark::before{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--primary); flex-shrink:0;}
.smark b{font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand-text);}

/* a section head that carries its call to action on the same line */
.sec-bar{display:grid; grid-template-columns:1fr auto; gap:30px 40px; align-items:end;}
.sec-bar .sec-head{max-width:52ch;}

/* the registration ticks ? two corners marked at rest, the frame closing
   in two strokes when the panel is pointed at */
.tick{position:relative; --tick:36px;}
/* Two marks, but not two shapes. Both pseudo-elements are the same complete
   rounded frame; each is simply clipped to the corner it is marking. Opening
   the clip windows reveals the rest of each frame, and because the two are
   pixel-identical they land exactly on top of one another ? there is no seam
   to fall out of line, and the corners are correct by construction. */
.tick::before,.tick::after{content:""; position:absolute; inset:-1px; z-index:2;
  pointer-events:none; border:2px solid var(--primary);
  border-radius:calc(var(--r-lg) + 1px); opacity:.42;
  transition:clip-path .62s var(--pop), opacity .34s var(--ease);}
.tick::before{clip-path:inset(0 calc(100% - var(--tick)) calc(100% - var(--tick)) 0);}
.tick::after{clip-path:inset(calc(100% - var(--tick)) 0 0 calc(100% - var(--tick)));}
.tick:hover::before,.tick:focus-visible::before,
.tick:hover::after,.tick:focus-visible::after{clip-path:inset(0 0 0 0); opacity:1;}
/* the second stroke follows the first, so the frame reads as two moves */
.tick:hover::after,.tick:focus-visible::after{transition-delay:.09s;}

@media (max-width:820px){
  .sec-bar{grid-template-columns:1fr; align-items:start;}
}

/* ============================================================
   SERVICES ? four channels, twelve services. The grouping is the
   information: every service belongs to a channel, and the
   channels are what a client actually buys.
   ============================================================ */
/* ============================================================
   REVIEWS ? one quote at a time, lit by the beam. The rest of
   the page argues; this section lets a client argue instead.
   ============================================================ */
.revs{background:var(--surface); border-block:1px solid var(--border);}
.revs-in{position:relative; z-index:3;}
.quote{max-width:62ch; margin:44px auto 0; text-align:center;}
.stars{display:flex; gap:5px; justify-content:center; margin-bottom:22px;}
.stars svg{width:18px; height:18px; color:var(--accent);}
.quote-slot{position:relative;}
.q{position:absolute; inset:0; opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .55s var(--ease), transform .55s var(--ease);}
.q.on{opacity:1; transform:none; pointer-events:auto; position:relative;}
.q blockquote{margin:0; font-family:var(--font-display); font-size:clamp(19px,2.2vw,27px);
  font-weight:600; line-height:1.42; letter-spacing:-0.028em;}
.q blockquote em{font-style:normal; color:var(--primary);}
.q figcaption{margin-top:24px; display:flex; align-items:center; gap:13px; justify-content:center;}
.q .av{width:42px; height:42px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--primary); color:#fff;
  font-family:var(--font-display); font-size:14px; font-weight:800; letter-spacing:-0.02em;}
.q .who{text-align:left;}
.q .who b{display:block; font-size:14.5px; font-weight:700;}
.q .who span{font-size:12.5px; color:var(--muted);}
.q-nav{display:flex; gap:9px; justify-content:center; margin-top:34px;}
.q-dot{width:32px; height:4px; border-radius:3px; border:none; padding:0;
  background:var(--border); transition:background .25s var(--ease), width .25s var(--ease);}
.q-dot:hover{background:var(--subtle);}
.q-dot.on{background:var(--primary); width:50px;}
.revs-foot{display:flex; gap:14px 44px; justify-content:center; flex-wrap:wrap;
  margin-top:56px; padding-top:30px; border-top:1px solid var(--border);
  font-size:13px; color:var(--muted);}
.revs-foot b{color:var(--text); font-weight:700;}

/* ============================================================
   QUESTIONS BUSINESSES ASK
   Six cards three across, a seventh laid the full width under them,
   and a banner that asks for the meeting. The reference this came from
   is a two-row grid with a short row underneath, and the composition is
   the argument: seven questions read as a set rather than a queue, and
   the one that does not fit the grid is given the width instead of
   being squeezed into a column it was never sized for.

   The reference is red on near-black. This is neither. The palette here
   is the page's ? one blue, the page's surfaces, the page's hairlines ?
   because a section that arrives in a colour nothing else on the site
   uses reads as bought rather than built. Everything else about it is
   kept: the pill between two rules, the two-weight headline, the tinted
   icon disc, the chevron, the banner with its mark on the right.

   The answers are not hidden behind a control. They are the reason the
   section exists, they are what the FAQ schema in the head promises is
   visible, and Google penalises markup that claims otherwise.
   ============================================================ */
.faq{background:var(--bg-alt); border-block:1px solid var(--border);}

/* ---- the head ----
   There is nothing local here at all. The reference opens with a filled
   pill between two rules and a headline whose second line drops to a
   lighter weight in grey ? both good, and neither is this site's. Every
   other section on the page opens with the same three pieces: .smark for
   the eyebrow, an h2 whose em carries the brand, and .sec-lede under it.
   This one now uses those, unchanged, so the page reads as one document
   rather than a set of imported blocks.

   Which also means this section is a good deal shorter than it was to
   maintain: change the heading rule once and it moves here too.
   ---------------------------------------------------------------- */

/* ---- the board ----
   Three across, and the seventh spans all three. Stated by grid-area
   rather than left to the auto-placer, so the odd card is where it is on
   purpose and stays there whatever is added above it. */
.faq-grid{margin-top:clamp(26px,3.4vw,44px);
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);}
.faq-card{position:relative; overflow:hidden; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:14px; row-gap:8px; align-items:start;
  padding:clamp(16px,1.8vw,22px);
  background:var(--surface); border:1px solid var(--border);
  border-radius:clamp(12px,1.3vw,16px);
  box-shadow:0 18px 40px -30px rgba(var(--ink-rgb),.30);
  transition:transform .4s var(--pop), box-shadow .4s var(--ease),
             border-color .4s var(--ease), color .4s var(--ease);}
/* .rv.in sets transform:none at the same weight as this and is written
   further up, so the lift needs the extra class to survive the reveal */
.faq-card.rv:hover{transform:translateY(-4px);}
.faq-card:hover{transform:translateY(-4px);
  border-color:hsl(var(--brand-h) 100% 50% / .40);
  box-shadow:0 26px 54px -30px hsl(var(--brand-h) 100% 34% / .40);}

/* ---- what happens under the answer ----
   A frame comes up behind the card on hover, held under the hero's own
   scrim so it arrives in the same palette as the top of the page rather
   than as a photograph someone dropped in.

   The scrim is the hero's, in the same two layers and the same neutral
   black, with one change: the radial is written in percentages instead
   of the hero's 780x440px. At the top of the page that box is a little
   over half the viewport and the vignette falls off inside the frame; on
   a card this size the same pixels would cover the whole of it and the
   falloff would disappear, leaving a flat wash. In percent it keeps the
   proportion, so the light still gathers behind the question.

   Both layers are absolutely positioned, so neither becomes a grid item
   and the three-column arrangement above is untouched. The frame is only
   fetched when a card is first hovered ? a background-image on a rule
   that nothing matches yet is never requested ? so seven photographs sit
   in the stylesheet without costing the page anything to load. */
.faq-card::before,.faq-card::after{content:""; position:absolute; inset:0;
  z-index:0; opacity:0; pointer-events:none;
  transition:opacity .45s var(--ease);}
/* The case-study frames were the wrong pictures for this: they are
   screenshots of websites, so behind a question they came up as somebody
   else's headline showing through the answer. These are photographs.

   Written as longhands, and with an ink colour under the picture. Both
   are deliberate. `background` as a shorthand would have taken the fill
   down with the image the moment anything about --shot went wrong ? one
   bad url and the whole declaration is dropped, the card stays white,
   and the type has already turned white to meet a frame that never
   arrived. As longhands a missing picture costs the picture and nothing
   else: the card goes to ink, and the answer is still readable on it. */
.faq-card::before{
  background-color:#0b1c2c;
  background-image:var(--shot);
  background-size:cover; background-position:center;
  background-repeat:no-repeat;}
.faq-card::after{background:
    radial-gradient(54% 55% at 50% 48%, rgba(0,0,0,.44) 0%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.52) 42%,
                    rgba(0,0,0,.86) 100%);}
.faq-card:hover::before,.faq-card:hover::after{opacity:1;}
/* the card's own contents are lifted over both, for the same reason the
   button labels are: a positioned element paints above inline content
   that has no z-index of its own */
.faq-card > *{position:relative; z-index:1;}

/* and the type comes up to meet it */
.faq-card:hover h3{color:#fff;}
.faq-card:hover p{color:rgba(255,255,255,.76);}
.faq-card:hover .faq-todo{color:hsl(var(--brand-h) 100% 68%);}
.faq-card:nth-child(7){grid-column:1 / -1;}

.faq-ico{grid-area:1 / 1; display:grid; place-items:center; flex-shrink:0;
  width:clamp(34px,3.4vw,42px); aspect-ratio:1; border-radius:50%;
  background:hsl(var(--brand-h) 100% 50% / .10); color:var(--brand-text);
  transition:background .4s var(--ease), color .4s var(--ease);}
.faq-ico svg{width:47%; height:47%;}
/* on the frame the disc is glass rather than a solid brand plate ? a
   filled circle on a photograph reads as a sticker */
.faq-card:hover .faq-ico{background:rgba(255,255,255,.18); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);}

.faq-card h3{grid-area:1 / 2; align-self:center;
  font-size:var(--h3); letter-spacing:-0.02em; line-height:1.32;}
/* the chevron is an affordance, not a control: the answer is already
   there. It leans toward the reader on hover and that is all it does. */
.faq-card > .faq-arw{grid-area:1 / 3; align-self:center;
  color:var(--subtle); flex-shrink:0;
  transition:transform .4s var(--pop), color .4s var(--ease);}
.faq-card > .faq-arw svg{display:block; width:16px; height:16px;}
.faq-card:hover > .faq-arw{transform:translateX(3px); color:#fff;}

.faq-card p{grid-area:2 / 1 / 3 / -1;
  font-size:var(--body); line-height:1.62; color:var(--muted);}
.faq-card:nth-child(7) p{grid-area:2 / 2 / 3 / 3; max-width:none;}
.faq-todo{font-weight:600; color:var(--brand-text);}

/* ---- the banner ----
   The ask, laid out as a row rather than stacked, because it follows a
   grid of rows and a centred block after all that reads as a second
   section starting. The mark on the right is drawn: three rings, a dot
   and a dart, which is every target ever drawn and needs no file. */
.faq-cta{position:relative; overflow:hidden;
  margin-top:clamp(16px,2vw,26px);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center; gap:clamp(14px,2vw,28px);
  padding:clamp(18px,2.2vw,28px) clamp(20px,2.6vw,34px);
  padding-right:clamp(120px,15vw,220px);
  border-radius:clamp(12px,1.3vw,16px);
  border:1px solid hsl(var(--brand-h) 100% 50% / .28);
  background:
    radial-gradient(70% 160% at 88% 50%, hsl(var(--brand-h) 100% 50% / .16) 0%,
                    transparent 62%),
    linear-gradient(100deg, hsl(var(--brand-h) 100% 50% / .10) 0%,
                    hsl(var(--brand-h) 100% 50% / .04) 58%, transparent 100%),
    var(--surface);}
.faq-cta-ico{display:grid; place-items:center;
  width:clamp(38px,3.8vw,48px); aspect-ratio:1; border-radius:50%;
  background:hsl(var(--brand-h) 100% 50% / .14); color:var(--brand-text);}
.faq-cta-ico svg{width:48%; height:48%;}
.faq-cta b{display:block; font-family:var(--font-display);
  font-size:clamp(15px,1.7vw,19px); font-weight:800; letter-spacing:-0.03em;}
.faq-cta p{margin-top:6px; font-size:var(--body); line-height:1.55;
  color:var(--text-2); max-width:52ch;}
.faq-cta .btn{white-space:nowrap;}

/* the target, drawn: rings, a bullseye and a dart across them */
.faq-target{position:absolute; right:clamp(-10px,1vw,26px); top:50%;
  width:clamp(96px,11vw,150px); aspect-ratio:1;
  transform:translateY(-50%); pointer-events:none; opacity:.9;}
.faq-target span{position:absolute; inset:0; border-radius:50%;
  border:9px solid hsl(var(--brand-h) 100% 50% / .16);}
.faq-target span:nth-child(2){inset:24%;
  border-color:hsl(var(--brand-h) 100% 50% / .30);}
.faq-target span:nth-child(3){inset:41%; border-width:0;
  background:var(--primary);}
.faq-target i{position:absolute; left:34%; top:34%; width:74%; height:2px;
  transform:rotate(-32deg); transform-origin:left center;
  background:linear-gradient(90deg, var(--primary), hsl(var(--brand-h) 100% 62%));
  border-radius:2px;}
.faq-target i::after{content:""; position:absolute; right:-2px; top:-5px;
  border:6px solid transparent; border-left-color:hsl(var(--brand-h) 100% 62%);}

@media (max-width:1000px){
  .faq-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .faq-card:nth-child(7){grid-column:1 / -1;}
  .faq-cta{padding-right:clamp(96px,14vw,160px);}
}
@media (max-width:720px){
  /* One column, and the banner stops pretending to be a row: at this
     width the mark has nowhere to sit that is not on top of the copy, so
     it stands down and the ask stacks. */
  .faq-grid{grid-template-columns:1fr;}
  .faq-cta{grid-template-columns:auto minmax(0,1fr);
    padding-right:clamp(20px,2.6vw,34px);}
  .faq-cta .btn{grid-column:1 / -1; width:100%; margin-top:4px;}
  .faq-target{display:none;}
}
/* Nothing to hover with, so nothing to reveal: on a touch screen the
   frames would either never appear or appear on a tap meant to scroll. */
@media (hover:none){
  .faq-card::before,.faq-card::after{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .faq-card,.faq-ico,.faq-card > .faq-arw,
  .faq-card::before,.faq-card::after{transition:none;}
}

/* ============================================================
   THE REVIEW DIALOG
   Kept out of the render tree until it is asked for, and animated
   with transform and opacity only, so opening it costs a compositor
   frame rather than a re-layout of the page.
   ============================================================ */
.modal[hidden]{display:none !important;}
.modal{position:fixed; inset:0; z-index:250; display:grid; place-items:center;
  padding:18px; overflow:hidden;}
.modal-veil{position:fixed; inset:0; background:var(--overlay); opacity:0;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:opacity .34s var(--ease);}
.modal.on .modal-veil{opacity:1;}

/* ---- the dialog is the button, opened out ----
   Not a shrink. The card is always full size and full resolution; what
   changes is how much of it you can see. A clip window the exact size of
   the button is punched in the middle of the card, the card is carried
   over to sit on the button, and a brand-blue sheet is laid over the top
   ? so at rest the dialog *is* the button, pixel for pixel. Opening lets
   the window out to the card's edges, slides the card home and fades the
   blue off the front. Closing runs the same three back. Nothing is ever
   scaled, so no text is ever soft or squashed mid-flight.
   --tx/--ty  distance from the card's resting centre to the button's
   --cx/--cy  half the difference between card and button, per axis
   --crad     the button's own corner radius                            */
/* The width is written in the same step as everything else, so the dialog
   keeps its proportion as it shrinks. Left as a fixed 880px it stayed wide
   while its contents got smaller, and came out squat. */
.modal-frame{--u:clamp(.84px, min(0.125vh, 0.088vw), 1.08px);
  position:relative; width:min(calc(720 * var(--u)), 100%);
  padding:calc(11 * var(--u));
  border-radius:calc(22 * var(--u));
  border:1px solid transparent; opacity:0; will-change:transform, clip-path;
  transform:translate(var(--tx,0px), var(--ty,26px));
  clip-path:inset(var(--cy,0px) var(--cx,0px) var(--cy,0px) var(--cx,0px)
                  round var(--crad,22px));
  /* on the way out the card stays solid while it folds, and only fades in
     the last breath ? otherwise closing reads as a fade, not a fold */
  transition:opacity .2s var(--ease) .34s,
             transform .58s var(--press),
             clip-path .58s var(--press),
             border-color .3s var(--ease);}
.modal.on .modal-frame{opacity:1;
  transform:translate(0px,0px);
  clip-path:inset(0px 0px 0px 0px round 22px);
  border-color:rgba(255,255,255,.20);
  transition:opacity .14s var(--ease),
             transform .62s var(--pop),
             clip-path .62s var(--pop),
             border-color .35s var(--ease) .3s;}
/* the blue sheet: the button's own fill, sitting in front of the card until
   the card has grown big enough to be worth looking at. It is painted only
   while the dialog is armed to open ? on the way out the card folds away as
   itself, with no blue flashing in behind it. */
.modal-frame::before{content:""; position:absolute; inset:0; z-index:6;
  border-radius:22px; pointer-events:none; background:var(--primary); opacity:0;
  transition:opacity .26s var(--ease) .06s;}
.modal.arm:not(.on) .modal-frame::before{opacity:1; transition:none;}

/* one ripple off the button's own outline, so the click has a source */
.pop-spark{position:fixed; left:0; top:0; z-index:249; pointer-events:none;
  border:1.5px solid var(--primary); opacity:.7;
  animation:sparkOut .68s var(--pop) forwards;}
@keyframes sparkOut{
  from{transform:scale(1);    opacity:.7;}
  to  {transform:scale(1.55); opacity:0;}
}
.modal-card{position:relative; border-radius:calc(16 * var(--u));
  padding:calc(34 * var(--u)) calc(36 * var(--u)) calc(26 * var(--u));
  overflow:hidden; background:var(--surface); color:var(--text);
  box-shadow:0 40px 90px -30px rgba(var(--ink-rgb),.5);}
html[data-theme="dark"] .modal-card{background:var(--n950);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);}

/* The hero can carry a sharp photograph because the only thing over it is one
   headline. A dialog has four fields and a button over it, so the same plate
   is pushed much further back: blurred, and under a scrim that is nearly
   solid by the time it reaches the form. The scrim takes the theme ? white
   glass in the light, near-black in the dark ? so the card belongs to the
   page it opened from. */
.modal-card::before{content:""; position:absolute; inset:-24px; pointer-events:none;
  background-image:var(--shot-2); background-size:cover; background-position:center;
  filter:blur(9px) saturate(.85) brightness(.92);}
html[data-theme="dark"] .modal-card::before{filter:blur(9px) saturate(.85) brightness(.62);}
.modal-card::after{content:""; position:absolute; inset:0; border-radius:16px;
  pointer-events:none;
  background:
    radial-gradient(620px 380px at 76% -10%, hsl(var(--brand-h) 100% 50% / .16),
      transparent 70%),
    linear-gradient(180deg, rgba(250,250,252,.46) 0%, rgba(250,250,252,.62) 38%,
                    rgba(250,250,252,.74) 100%);}
html[data-theme="dark"] .modal-card::after{
  background:
    radial-gradient(620px 380px at 76% -10%, hsl(var(--brand-h) 100% 46% / .22),
      transparent 70%),
    linear-gradient(180deg, rgba(6,10,16,.56) 0%, rgba(6,10,16,.72) 38%,
                    rgba(6,10,16,.86) 100%);}

.modal-x{position:absolute; top:18px; right:18px; z-index:3; width:40px; height:40px;
  border-radius:50%; border:1px solid var(--border); background:var(--surface);
  color:var(--muted); display:grid; place-items:center; opacity:0;
  transition:background .18s var(--ease), border-color .18s var(--ease),
             color .18s var(--ease), transform .18s var(--ease), opacity .2s var(--ease);}
.modal-x:hover{border-color:var(--brand-text); color:var(--brand-text); transform:scale(1.08);}
.modal-x svg{width:16px; height:16px;}
html[data-theme="dark"] .modal-x{background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.26); color:rgba(255,255,255,.8);}
html[data-theme="dark"] .modal-x:hover{background:rgba(255,255,255,.2);
  border-color:#fff; color:#fff;}

/* ---- the header ---- */
/* This lifts the card's contents above the plate and the scrim. It must not
   catch the close button: same specificity, declared later, it was replacing
   that button's position:absolute with relative ? which is why right:18px was
   shifting it eighteen pixels to the LEFT of where it sat in the flow, at the
   top-left corner. */
.modal-card > *:not(.modal-x){position:relative; z-index:2;}
.modal-hero{display:grid; grid-template-columns:1.16fr .84fr;
  gap:calc(22 * var(--u)); align-items:center;}
.modal-card h2,
.modal-card .modal-title{font-family:var(--font-display); font-size:var(--h2);
  font-weight:800; text-transform:uppercase; letter-spacing:-0.035em; line-height:1.06;}
.modal-card h2 em,
.modal-card .modal-title em{display:block; font-style:normal; color:var(--brand-text);}
.modal-eyebrow{margin-bottom:calc(16 * var(--u));}
.modal-intro{font-size:calc(14.8 * var(--u)); line-height:1.58; color:var(--text-2);
  max-width:44ch; margin:calc(13 * var(--u)) 0 0;}
/* the drawing is a sheet of paper, so it keeps light values in either theme */
.modal-art{justify-self:end; width:100%; max-width:calc(200 * var(--u));
  --surface:#FFFFFF; --bg:#F1F3F6; --border:#DEE3E9; --text:#0C1C32;}
.modal-art svg{width:100%; height:auto; display:block;}
.modal-rule{display:none;}

/* ---- the form is a panel, not four boxes floating on a picture ---- */
/* Glass, not a board: the panel frosts what is behind it instead of covering
   it, and the lit top edge is what makes it read as a pane rather than a
   translucent rectangle. */
.modal-form{position:relative; margin-top:calc(22 * var(--u));
  padding:calc(22 * var(--u));
  border-radius:var(--r-lg); overflow:hidden;
  background:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 20px 44px -24px rgba(var(--ink-rgb),.42);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);}
.modal-form::before{content:""; position:absolute; left:12%; right:12%; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);}
/* In the dark the panel goes down, not up. A lighter pane on a dark card sat
   at almost the same value as the card and the two ran together; recessed, it
   reads as a well holding the light fields. */
html[data-theme="dark"] .modal-form{background:rgba(4,7,11,.62);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.8),
             inset 0 1px 0 0 rgba(255,255,255,.06);}
html[data-theme="dark"] .modal-form::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal-form{background:rgba(255,255,255,.9);}
  html[data-theme="dark"] .modal-form{background:rgba(4,7,11,.92);}
}

.mf{display:grid; grid-template-columns:1fr 1fr; gap:calc(15 * var(--u)) calc(18 * var(--u));}
/* ---- the meter and the ticks ----
   Four fields, and the form used to say nothing about how far along you
   were until the button told you what you had got wrong. Now each field
   reports on itself and the meter counts them, so the form answers while
   it is being filled in rather than only afterwards. */
.mf-prog{display:flex; align-items:center; gap:calc(12 * var(--u));
  margin-bottom:calc(16 * var(--u));}
.mf-prog-bar{flex:1; height:4px; border-radius:4px; overflow:hidden;
  background:rgba(var(--ink-rgb),.10);}
.mf-prog-bar i{display:block; width:0; height:100%; border-radius:4px;
  background:var(--primary); transition:width .45s var(--ease);}
.mf-prog-n{font-family:var(--font-display); font-size:calc(11.5 * var(--u));
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums;}
.mf-prog-n b{color:var(--brand-text);}
.field-ok{position:absolute; right:calc(13 * var(--u)); bottom:calc(13 * var(--u));
  display:grid; place-items:center; width:calc(19 * var(--u)); height:calc(19 * var(--u));
  border-radius:50%; background:var(--primary); color:#fff; pointer-events:none;
  opacity:0; transform:scale(.5);
  transition:opacity .26s var(--ease), transform .34s var(--pop);}
.field-ok svg{width:60%; height:60%;}
.field.good .field-ok{opacity:1; transform:none;}
.field.good input,.field.good select{border-color:hsl(var(--brand-h) 80% 62%);
  padding-right:calc(40 * var(--u));}
.field.sel .field-ok{right:calc(38 * var(--u));}   /* clear of the chevron */
.field.sel.good select{padding-right:calc(64 * var(--u));}

/* The button used to sit at 62% opacity until the form was valid, which was
   meant to read as "not ready yet" and read instead as broken: brand blue at
   62% over a dark backdrop is a washed teal, and white at 62% is grey. It is
   the page's button now, at full strength, the same as every other one.

   Nothing is lost by that. The meter above the fields already says how far
   along the form is, and pressing early still marks what is missing ? those
   were always the two things doing the work. */
#modalGo{transition:transform .3s var(--ease), box-shadow .3s var(--ease);}
#modalGo.sending{pointer-events:none;}
#modalGo.sending .arw{animation:mfGo .7s var(--ease) infinite;}
@keyframes mfGo{50%{transform:translateX(6px); opacity:.4;}}
.modal.on .field{animation:mfIn .5s var(--ease) backwards;}
.modal.on .field:nth-child(2){animation-delay:.06s;}
.modal.on .field:nth-child(3){animation-delay:.12s;}
.modal.on .field:nth-child(4){animation-delay:.18s;}
@keyframes mfIn{from{opacity:0; transform:translateY(10px);}}
@media (prefers-reduced-motion:reduce){
  .modal.on .field{animation:none;}
  #modalGo.sending .arw{animation:none;}
}

.field{position:relative; display:grid; grid-template-columns:auto 1fr;
  grid-template-areas:"ic lab" "in in";
  gap:9px; align-items:center; margin:0;}
.field-ic{grid-area:ic; display:grid; place-items:center; color:var(--brand-text);}
.field-ic svg{width:16px; height:16px; display:block;}
.field label{grid-area:lab; font-size:13px; font-weight:600; letter-spacing:0;
  text-transform:none; color:var(--text); margin:0;
  display:flex; align-items:center; gap:9px;}
.field label svg{width:16px; height:16px; color:var(--brand-text); flex-shrink:0;}
.field input,.field select{grid-area:in; width:100%;
  padding:calc(12.5 * var(--u)) calc(15 * var(--u));
  border-radius:calc(12 * var(--u)); font-size:calc(14.5 * var(--u)); font-family:inherit;
  background:rgba(255,255,255,.52); border:1.5px solid rgba(255,255,255,.7);
  color:var(--text);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:border-color .2s var(--ease), background .2s var(--ease),
             box-shadow .2s var(--ease);}
.field input::placeholder{color:var(--n600);}
.field input:hover,.field select:hover{background:rgba(255,255,255,.68);
  border-color:#fff;}
/* on focus the pane goes solid: the one field being filled should not have a
   photograph moving behind the words being typed into it */
.field input:focus,.field select:focus{outline:none; background:var(--n0);
  border-color:var(--primary);
  box-shadow:0 0 0 4px hsl(var(--brand-h) 100% 50% / .20);}
/* the label answers the field it belongs to */
.field:focus-within label{color:var(--brand-text);}

/* in the dark the fields are the light thing on the card, not another dark one */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select{background:var(--n825);
  border-color:var(--n800); color:#fff;}
html[data-theme="dark"] .field input::placeholder{color:var(--n500);}
html[data-theme="dark"] .field input:hover,
html[data-theme="dark"] .field select:hover{background:var(--n850);
  border-color:var(--n700);}
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus{background:var(--n850);
  border-color:var(--primary);}
html[data-theme="dark"] .field label{color:#fff;}
html[data-theme="dark"] .field:focus-within label{color:var(--brand-text);}
html[data-theme="dark"] .modal-card h2,
html[data-theme="dark"] .modal-card .modal-title{color:#fff;}
html[data-theme="dark"] .modal-intro{color:rgba(255,255,255,.82);}
/* a white-on-white-tint pill disappears against a blurred photograph; on the
   brand it has an edge of its own */
html[data-theme="dark"] .modal-eyebrow{background:hsl(var(--brand-h) 100% 50% / .22);
  border-color:hsl(var(--brand-h) 100% 62% / .5); color:#fff;}
html[data-theme="dark"] .modal-eyebrow i{background:hsl(var(--brand-h) 100% 66%);
  box-shadow:0 0 0 3px hsl(var(--brand-h) 100% 50% / .3);}
html[data-theme="dark"] .modal-note{color:rgba(255,255,255,.68);}
html[data-theme="dark"] .modal-note a{color:#fff;}
html[data-theme="dark"] .modal-done p{color:rgba(255,255,255,.82);}

.sel{position:relative;}
.sel select{appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer;}
.sel select option{background:var(--surface); color:var(--text);}
html[data-theme="dark"] .sel select option{background:var(--n825); color:#fff;}
.sel::after{content:""; position:absolute; right:17px; top:auto; bottom:22px;
  width:8px; height:8px; border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg); pointer-events:none;}

/* the invalid state carries no new hue: the brand edge goes solid and the
   ring widens, which reads at a glance without inventing a red */
.field.bad input,.field.bad select{border-color:var(--primary); border-width:2px;
  box-shadow:0 0 0 4px hsl(var(--brand-h) 100% 50% / .22);}
.field.bad label{color:var(--brand-text);}

.modal-card .btn{width:100%; margin-top:calc(22 * var(--u));
  padding:calc(16 * var(--u)) calc(24 * var(--u));
  transition:transform .35s var(--pop), box-shadow .3s var(--ease),
             background .25s var(--ease);}
/* size and width are the dialog's business; the lift is the page's, and it
   was two pixels here against three everywhere else */
.modal-card .btn:active{transform:translateY(0);}
.modal-note{margin-top:calc(13 * var(--u)); font-size:calc(12.4 * var(--u)); color:var(--muted); text-align:center;
  display:flex; align-items:center; justify-content:center; gap:9px;}
.modal-note svg{width:15px; height:15px; color:var(--brand-text); flex-shrink:0;}
.modal-note a{color:var(--text); text-decoration:underline; text-underline-offset:2px;}
.modal-note a:hover{color:var(--brand-text);}

/* the card fills itself in behind the frame's flight, top to bottom */
@keyframes popIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.modal.on .modal-eyebrow{animation:popIn .46s var(--pop) .12s backwards;}
.modal.on #modalTitle  {animation:popIn .46s var(--pop) .17s backwards;}
.modal.on .modal-intro {animation:popIn .46s var(--pop) .22s backwards;}
.modal.on .modal-art   {animation:popIn .52s var(--pop) .24s backwards;}
.modal.on .modal-form  {animation:popIn .5s var(--pop) .3s backwards;}
.modal.on .mf .field:nth-child(1){animation:popIn .46s var(--pop) .36s backwards;}
.modal.on .mf .field:nth-child(2){animation:popIn .46s var(--pop) .41s backwards;}
.modal.on .mf .field:nth-child(3){animation:popIn .46s var(--pop) .46s backwards;}
.modal.on .mf .field:nth-child(4){animation:popIn .46s var(--pop) .51s backwards;}
.modal.on #modalGo     {animation:popIn .46s var(--pop) .57s backwards;}
.modal.on .modal-note  {animation:popIn .46s var(--pop) .62s backwards;}
.modal.on .modal-x{opacity:1; transition:opacity .3s var(--ease) .38s,
  background .18s var(--ease), border-color .18s var(--ease),
  color .18s var(--ease), transform .18s var(--ease);}

.modal-done{display:none; text-align:center; padding:26px 0 14px;}
.modal-done.on{display:block; animation:popIn .45s var(--pop);}
.modal-done.on .ok{animation:okIn .55s var(--pop) .1s backwards;}
@keyframes okIn{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;}}
.modal-done .ok{width:56px; height:56px; border-radius:50%; background:var(--primary);
  color:#fff; display:grid; place-items:center; margin:0 auto 18px;}
.modal-done .ok svg{width:28px; height:28px;}
.modal-done b{display:block; font-family:var(--font-display); font-size:22px; margin-bottom:8px;}
.modal-done p{font-size:14.5px; color:var(--text-2); max-width:44ch; margin:0 auto;}

/* ============================================================
   WHO WE ARE ? VARIANT B : the collage
   Four plates cut into one block, with a bracket behind it and a seal
   where the four meet. The corners are the whole device: each plate is
   square where it meets its neighbours and heavily rounded where it
   meets the outside, so the four read as one shape rather than four
   pictures set side by side.
   ============================================================ */
.bp[data-variant="2"]{background:var(--bg);}
/* the claim on the left, the plates answering on the right ? read left to
   right, what the company is comes before the picture of it */
.cg{display:grid; grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
  gap:clamp(34px,5vw,74px); align-items:center;}

/* ---- the block of plates ---- */
.cg-art{position:relative; padding:clamp(14px,2vw,26px) clamp(14px,2vw,26px)
        clamp(14px,2vw,26px) 0;}
/* the bracket: a rounded corner drawn behind the top-left plate */
.cg-bracket{position:absolute; right:0; top:0; width:46%; height:56%;
  border:clamp(9px,1.1vw,14px) solid var(--primary);
  border-left:0; border-bottom:0;
  border-top-right-radius:clamp(40px,5vw,68px);
  pointer-events:none;}
.cg-grid{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(8px,1vw,12px);}
.cg-shot{background:var(--shot) center/cover; background-color:var(--n200);
  box-shadow:0 20px 44px -28px rgba(var(--ink-rgb),.45);}
/* each plate is square where it meets a neighbour and heavily rounded where
   it meets the outside, so the four read as one shape */
.cg-a{aspect-ratio:1/1.12; border-radius:clamp(34px,4vw,56px) 10px 10px 10px;}
.cg-b{aspect-ratio:1/1.12; border-radius:10px clamp(34px,4vw,56px) 10px 10px;}
.cg-c{aspect-ratio:1/.86; border-radius:10px 10px 10px clamp(34px,4vw,56px);}
.cg-d{aspect-ratio:1/.86; border-radius:10px 10px clamp(34px,4vw,56px) 10px;}

/* the seal where the four meet */
.cg-seal{position:absolute; left:50%; top:50%; z-index:3;
  width:clamp(66px,7.4vw,96px); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; background:var(--primary); color:#fff;
  display:grid; place-items:center; border:5px solid var(--bg);
  box-shadow:0 16px 34px -14px hsl(var(--brand-h) 100% 38% / .9);}
.cg-seal svg{position:absolute; inset:0; width:100%; height:100%;
  animation:cgTurn 22s linear infinite;}
.cg-seal text{font-family:var(--font-display); font-size:8.6px; font-weight:800;
  letter-spacing:.24em; fill:rgba(255,255,255,.9); text-transform:uppercase;}
/* the mark, not a stock glyph. It is the same artwork the favicon and the
   nav are cut from, so the seal cannot drift away from the brand. Painted
   through the mask in currentColor, which the seal has already set to white. */
.cg-seal i{position:relative; width:30%; aspect-ratio:88 / 128;
  background:currentColor;
  -webkit-mask:var(--mark) center / contain no-repeat;
          mask:var(--mark) center / contain no-repeat;}
@keyframes cgTurn{to{transform:rotate(360deg);}}

/* the sparkle, bottom left */
.cg-spark{position:absolute; right:-6px; bottom:8%; z-index:3;
  width:clamp(30px,3.4vw,46px); color:var(--primary);}
.cg-spark svg{width:100%; height:auto; display:block;}

/* ---- the claim ---- */
.cg-say h2{margin-top:4px; font-family:var(--font-display);
  font-weight:800; letter-spacing:-0.042em;
  line-height:1.1; text-transform:none; max-width:18ch;}
.cg-say h2 em{font-style:normal; color:var(--brand-text);}
.cg-say > p{margin-top:18px; font-size:15.2px; line-height:1.7; color:var(--text-2);
  max-width:46ch;}

/* Three cells in one panel: the figures belong to one claim, so they read as
   one row rather than three separate cards. The label leads and the number
   answers it ? a number on its own says nothing until you know what it counts
   ? and the rule beneath fills as the number climbs, so the two land together.
   No icon: the same arrow three times is decoration, not information. */
.cg-figs{display:grid; grid-template-columns:repeat(3,1fr);
  margin-top:clamp(26px,3vw,36px); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border); overflow:hidden;}
.cg-fig{position:relative; padding:clamp(20px,2.2vw,26px) clamp(16px,1.8vw,22px);
  border-left:1px solid var(--border);
  transition:background .3s var(--ease);}
.cg-fig:first-child{border-left:0;}
.cg-fig:hover{background:var(--bg-alt);}
.cg-fig-lab{display:block; font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--subtle);
  transition:color .3s var(--ease);}
.cg-fig:hover .cg-fig-lab{color:var(--brand-text);}
.cg-fig b{display:block; margin-top:12px; font-family:var(--font-display);
  font-size:clamp(30px,3.6vw,44px); font-weight:800; letter-spacing:-0.055em;
  line-height:1; color:var(--text); font-variant-numeric:tabular-nums;}
/* the rule is the cell's floor, not a mark under the number */
.cg-fig s{text-decoration:none; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--border-soft); overflow:hidden;}
.cg-fig s::after{content:""; position:absolute; inset:0; background:var(--primary);
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.4s var(--ease) var(--d,0ms);}
.rv.in .cg-fig s::after{transform:none;}
.cg-fig:nth-child(2) s::after{--d:140ms;}
.cg-fig:nth-child(3) s::after{--d:280ms;}

.cg-say .btn{margin-top:clamp(26px,3vw,36px);}

@media (max-width:1000px){
  .cg{grid-template-columns:1fr; gap:40px;}
  .cg-say h2{max-width:none;}
}
@media (max-width:560px){
  .cg-figs{grid-template-columns:1fr;}
  .cg-fig{border-left:0; border-top:1px solid var(--border);}
  .cg-fig:first-child{border-top:0;}
  .cg-seal{width:64px;}
}
@media (prefers-reduced-motion:reduce){ .cg-seal svg{animation:none;} }

/* ============================================================
   SERVICES ? VARIANT 4 : the console
   A dark index of every service against a light sheet that answers for
   the one chosen. The sheet is laid over the rail rather than set beside
   it, and the chosen row is a brand pill that runs out onto it ? a
   switch thrown, not a link hovered. Everything the sheet holds is
   sized from two custom properties, --cn-over and --cn-lap, so the pill
   can never come to rest on top of the copy it introduces.
   ============================================================ */
.svc{background:var(--bg-alt); border-block:1px solid var(--border);}
.cn{--cn-over:clamp(26px,3vw,44px); --cn-lap:clamp(24px,2.8vw,38px);
  --cn-inset:clamp(8px,1vw,16px);
  /* how far the lit pane reaches past an unlit one: over the sheet's lap,
     past the gap the unlit pills keep, and out by the overhang */
  --cn-reach:calc(var(--cn-lap) + var(--cn-inset) + var(--cn-over));
  position:relative; display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  margin-top:52px; border-radius:30px; overflow:hidden;
  background:var(--ink-plate);
  box-shadow:0 34px 70px -40px rgba(var(--ink-rgb),.5);}
html[data-theme="dark"] .cn{background:var(--n925); border:1px solid var(--border);}

/* ---- the index ---- */
/* Four rows spread across the rail's full height rather than stacked at the
   top of it. Packed to the start they left the whole lower half of the rail
   empty; spread, the column finishes level with the sheet beside it. */
.cn-rail{position:relative; z-index:3; display:grid; align-content:space-evenly;
  padding:clamp(26px,3vw,38px) 0 clamp(26px,3vw,38px) clamp(14px,1.8vw,22px);}
/* two columns, not three: the icon that used to take the first one is gone,
   so the arrow was landing in the middle column right after the name
   instead of in the last one at the end of the pill */
/* Every row is the same pill; the chosen one is that pill lit, not a
   different object. So the shape, the padding and the height are settled
   here once and .on only changes what the pill is filled with. The height
   is set by the disc on the end rather than by the padding, which is why
   the block padding is 5px on both states ? a row cannot change size when
   it is picked. The right margin keeps an unlit pill inside the dark
   plate; the lit one cancels it and runs out onto the sheet. */
.cn-tab{position:relative; display:grid; grid-template-columns:1fr auto;
  gap:14px; align-items:center; text-align:left; cursor:pointer;
  padding:5px 5px 5px clamp(18px,2vw,26px); border:0; border-radius:999px;
  margin-right:calc(var(--cn-lap) + var(--cn-inset));
  z-index:1;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36),
             inset 0 1px 0 0 rgba(255,255,255,.52);
  font-family:var(--font-display); font-size:clamp(14px,1.35vw,15.5px);
  font-weight:700; letter-spacing:-0.028em; line-height:1.25;
  color:rgba(255,255,255,.62);
  /* no hover state on the rail: the pill is the only thing that says which
     row is chosen, and a second highlight following the pointer competes
     with it */
  transition:color .26s var(--ease), background .3s var(--ease),
             box-shadow .3s var(--ease);}
.cn-tab h3{margin:0; font:inherit; font-size:inherit; font-weight:inherit;
  letter-spacing:inherit; line-height:inherit; color:inherit; text-transform:none;}
.cn-tab:focus-visible{outline:2px solid var(--primary); outline-offset:-3px;}

/* The row itself never changes size now. It used to grow by the overhang
   the moment it was picked, which meant picking a service relaid the rail
   ? and a pane cannot glide from one row to another if the rows are
   moving while it travels. The reach is carried by the pane and by the
   disc, both of which are transforms, so nothing here is laid out twice. */
.cn-tab.on{color:#fff; z-index:2;}
.cn-go{width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  color:#fff; flex-shrink:0;
  transition:background .3s var(--ease), box-shadow .3s var(--ease),
             transform .52s var(--pop);}
/* the disc rides out to the end of the pane, and rides back when the row
   is let go */
.cn-tab.on .cn-go{transform:translateX(var(--cn-reach));}

/* ---- the pane that travels ----
   The lit pill is not drawn on the row any more. It is one pane, parked
   over the rail, that moves to whichever row was asked for ? so switching
   a service reads as the same piece of glass being carried down the list
   rather than one blinking out and another blinking on.

   It sits under the rows, so their type and their discs stay on top of
   it, and it is measured in script because only script knows which row
   is next. Nothing about it is laid out: top, height and width are the
   only things that change and all three are transitioned together. */
.cn-lift{position:absolute; left:0; top:0; width:0; height:0; z-index:0;
  border-radius:999px; pointer-events:none; opacity:0;
  /* script sets the width of the row's own column; the overhang past it is
     added here as padding, so the one number script has to know is a
     measurement it can take rather than a clamp() it would have to parse */
  box-sizing:content-box; padding-right:var(--cn-over);
  transition:top .52s var(--pop), height .52s var(--pop),
             width .52s var(--pop), opacity .28s var(--ease);}
.cn-lift.on{opacity:1;}
.cn-go svg{width:19px; height:19px;}

/* ---- the sheet ---- */
.cn-sheet{position:relative; z-index:2; display:grid;
  background:var(--n50); border-radius:40px 0 0 40px;
  margin:0 0 0 calc(-1 * var(--cn-lap));
  padding:clamp(32px,3.6vw,50px) clamp(28px,3.2vw,46px) clamp(32px,3.6vw,50px)
          calc(var(--cn-lap) + var(--cn-over) + clamp(32px,3.4vw,54px));}
html[data-theme="dark"] .cn-sheet{background:var(--n875);}
.cn-card{grid-area:1/1; display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0; align-items:start;
  opacity:0; visibility:hidden;
  transition:opacity .28s var(--ease), visibility 0s linear .28s;}
.cn-card.on{opacity:1; visibility:visible;
  transition:opacity .3s var(--ease) .1s, visibility 0s;}

/* ---- the switch ----
   The card used to arrive as one slab: the whole panel slid up and faded,
   which reads as a page changing rather than as an answer being given. Now
   the card itself only fades, and the things inside it come in on their own
   timing ? the sentence, then the list one line at a time, then the link.

   They arrive from opposite sides. The copy comes in from the left, where
   the rail that was just clicked is, so the answer looks like it came from
   the thing you pressed. The figure comes in from the right to meet it. The
   two halves converge instead of both drifting the same way, which is what
   stops it feeling like a slide deck.

   Everything is an animation rather than a transition, so it replays on
   every switch ? a transition would only run the first time each card is
   opened, and thereafter the card would simply appear. */
@keyframes cnFromL{from{opacity:0; transform:translateX(-20px);}}
@keyframes cnFromR{from{opacity:0; transform:translateX(20px);}}

.cn-card.on .cn-lead,
.cn-card.on .cn-list li,
.cn-card.on .cn-subs li,
.cn-card.on .cn-more{animation:cnFromL .52s var(--ease) backwards;}
.cn-card.on .cn-stat{animation:cnFromR .6s var(--ease) .14s backwards;}

.cn-card.on .cn-lead{animation-delay:.08s;}
.cn-card.on .cn-list li:nth-child(1),
.cn-card.on .cn-subs li:nth-child(1){animation-delay:.16s;}
.cn-card.on .cn-list li:nth-child(2),
.cn-card.on .cn-subs li:nth-child(2){animation-delay:.21s;}
.cn-card.on .cn-list li:nth-child(3),
.cn-card.on .cn-subs li:nth-child(3){animation-delay:.26s;}
.cn-card.on .cn-list li:nth-child(4),
.cn-card.on .cn-subs li:nth-child(4){animation-delay:.31s;}
.cn-card.on .cn-list li:nth-child(5),
.cn-card.on .cn-subs li:nth-child(5){animation-delay:.36s;}
.cn-card.on .cn-subs li:nth-child(6){animation-delay:.40s;}
.cn-card.on .cn-subs li:nth-child(7){animation-delay:.44s;}
.cn-card.on .cn-subs li:nth-child(8){animation-delay:.48s;}
.cn-card.on .cn-more{animation-delay:.52s;}

/* The ring redraws with it. The offset it should rest at is on the element
   as a presentation attribute, and CSS outranks one of those without
   needing !important ? so the closed state parks it at empty and letting
   go of that rule is what draws it back to its own number. */
@media (prefers-reduced-motion:no-preference){
  .cn-card:not(.on) .cn-fill{stroke-dashoffset:276.46;}
}
@media (prefers-reduced-motion:reduce){
  .cn-card.on .cn-lead,.cn-card.on .cn-list li,
  .cn-card.on .cn-subs li,
  .cn-card.on .cn-more,.cn-card.on .cn-stat{animation:none;}
  .cn-dial .cn-fill{transition:none;}
}

/* It is a paragraph, not a heading, so it is not on the heading scale ? this
   is its own size. Brought down a step: at 19px it was competing with the h2
   above it for the same job. */
.cn-lead{
  font-size:var(--body);
  font-weight:700; letter-spacing:-0.022em; line-height:1.5; color:var(--text);
  max-width:38ch;}

.cn-list{margin-top:24px; display:grid; gap:16px;}
.cn-list li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  list-style:none; font-size:14.6px; color:var(--text-2);}
.cn-list svg{width:19px; height:19px; color:var(--primary);}

/* Sub-services under each core tab ? name only, two columns */
.cn-subs{margin-top:22px; list-style:none;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px) clamp(18px,2.4vw,36px);}
.cn-subs li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px;
  align-items:center; list-style:none;}
.cn-subs svg{width:19px; height:19px; color:var(--primary); flex-shrink:0;}
.cn-subs b{display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(14px,1.05vw,15.5px); letter-spacing:-0.022em; color:var(--text);
  line-height:1.3;}
.cn-subs b a{color:inherit; text-decoration:none;
  transition:color .26s var(--ease);}
.cn-subs b a:hover{color:var(--brand-text);}
@media (max-width:720px){
  .cn-subs{grid-template-columns:minmax(0,1fr);}
}

.cn-more{display:inline-block; margin-top:26px; padding-bottom:5px;
  font-family:var(--font-display); font-size:11.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text);
  border-bottom:1.5px solid var(--text);
  transition:color .26s var(--ease), border-color .26s var(--ease);}
.cn-more:hover{color:var(--brand-text); border-color:var(--brand-text);}
.cn-svc-btn{margin-top:26px; align-self:flex-start;}

/* ---- the aside ---- */
.cn-stat{padding:clamp(24px,2.6vw,32px); border-radius:22px; background:var(--surface);
  text-align:center; align-self:start;
  box-shadow:0 18px 40px -28px rgba(var(--ink-rgb),.34);}
.cn-stat p{font-size:12.8px; line-height:1.55; color:var(--muted); max-width:26ch;
  margin:0 auto;}
html[data-theme="dark"] .cn-stat{background:var(--n825);
  box-shadow:0 18px 40px -26px rgba(0,0,0,.8);}
.cn-dial{position:relative; width:min(100%, 168px); margin:0 auto 18px; aspect-ratio:1;}
.cn-dial svg{width:100%; height:100%; transform:rotate(-90deg);}
.cn-dial .cn-track{fill:none; stroke:var(--border); stroke-width:2;}
.cn-dial .cn-fill{fill:none; stroke:var(--primary); stroke-width:2; stroke-linecap:round;
  /* the delay lets the card fade in first, so the ring draws into a panel
     that is already there rather than arriving with it */
  transition:stroke-dashoffset 1.05s var(--ease) .28s;}
.cn-dial b{position:absolute; inset:0; display:grid; place-content:center; gap:2px;
  font-family:var(--font-display); font-size:clamp(26px,2.8vw,34px); font-weight:800;
  letter-spacing:-0.05em; font-variant-numeric:tabular-nums; line-height:1;}
.cn-dial b i{display:block; margin:0 auto; width:13px; height:13px;
  color:var(--brand-text);}
.cn-dial b i svg{width:100%; height:100%; transform:none;}

/* ---- the plate behind the index ----
   The rail is the only part of the block the reader ever sees the
   backing of: the sheet is opaque and lies over the rest.

   There was a photograph here for a long time and it has been taken out.
   Glass is only legible as a difference ? a shape sharp outside the panel
   and the same shape soft inside it ? and a photograph gives that
   difference nowhere to be seen: every part of it is busy, so softening
   one rectangle of it reads as a smudge rather than as a pane.

   What replaces it is a quiet gradient and five drawn shapes. The
   gradient is deep brand, lit from the top left and falling away into
   the corner, and it is smooth on purpose: it is the room, not the
   subject. The shapes are the subject. Each one is a plain disc of the
   one blue with a soft rim, and they are placed down the left so that
   every pill has one crossing underneath it. A disc that runs into a
   pill with a clean edge and comes out of it blurred is the whole
   effect, and it is the only reason any of this reads as glass.
   Below 1040px the block folds and the sheet no longer covers anything,
   so the plate stands down and the flat ink comes back.
   ------------------------------------------------------------------ */
/* The frame is fitted by HEIGHT and pinned left, not covered. Cover would
   scale a portrait picture to the width of the whole block ? the rail and
   the sheet together ? and crop it down to a strip of shoulder. Fitted to
   the height it stands at its own proportion in the one column anyone
   sees, and it happens to come out a shade wider than that column, so
   where it ends is already under the sheet.

   The gradient stays underneath it. On a short block the fitted frame can
   come up narrower than the column, and what shows in the gap is then the
   field this plate used to be rather than a bare edge. */
.cn-plate{position:absolute; inset:0; z-index:0; overflow:hidden;
  border-radius:inherit; pointer-events:none;
  background:
    var(--cn-shot, none) left center / auto 100% no-repeat,
    radial-gradient(120% 96% at 4% -8%, hsl(var(--brand-h) 62% 30%) 0%,
                    transparent 58%),
    radial-gradient(96% 84% at 108% 106%, hsl(var(--brand-h) 78% 15%) 0%,
                    transparent 62%),
    linear-gradient(152deg, #0b1d2e 0%, #0e2537 46%, #061320 100%);
  transition: background-image .35s var(--ease);}
/* The frame is the subject now ? chrome has more edges in one arm than a
   page of drawn discs ? so only two rings are left, low and faint. A ring
   is two edges close together, and two edges is the clearest thing a pane
   can be asked to soften; they are kept as insurance for the rows that
   land on plain sky. */
.cn-plate::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 16% 22%, transparent 0 30px,
                    hsl(var(--brand-h) 96% 84% / .28) 31px 32.5px, transparent 35px),
    radial-gradient(circle at 6% 84%, transparent 0 21px,
                    hsl(var(--brand-h) 96% 84% / .24) 22px 23.5px, transparent 26px);}
/* A floor, and only a floor: enough to hold white type on an unlit row
   wherever a disc happens to sit under it, and nothing more. */
/* The floor was heavy enough that the frame arrived at the panes as a
   flat dark blue, and a pane over something flat has nothing to show. It
   comes down about a fifth: the chrome keeps its highlights, so there are
   edges behind the pills to be softened, and white type on an unlit row
   still holds ? which is the only thing this layer is for. */
.cn-plate::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(4,14,24,.38) 0%,
                             rgba(4,14,24,.30) 46%, rgba(4,14,24,.56) 100%);}

/* ---- glass ----
   Everything the pill does, it does with an edge and a blur. There is no
   halo and no drop shadow on any of these any more: a glow around a pane
   is light the pane is emitting, which glass does not do, and it was the
   loudest thing in the block ? it read as a shadow effect stuck on top
   rather than as a pane resting on something.

   What is left is what an actual pane has: a hairline of light along the
   very top where the bevel catches, a rim of light all the way round so
   the shape has an edge of its own, and a faint bounce off the underside
   which is what gives it thickness. The rim is an inset shadow rather
   than a border, so the pill does not change size when it is picked.
   ------------------------------------------------------------------ */
.cn .cn-tab{color:rgba(255,255,255,.88);}

/* ---- the lit pill ----
   One colour and one only: #0096D5. No gradient, no second shade, no
   deeper blue anywhere on it.

   The fill is thin ? under a third ? because the plate behind it is
   already this blue, so what comes through the pane is the brand rather
   than something the brand has to fight. That is what lets the discs
   behind carry on across the pill instead of stopping at its edge, which
   is the only thing that makes a pane read as a pane.

   The blur is deep for the same reason. A light blur over a shaped
   backdrop looks like a tint; only a heavy one reads as frost. */
.cn .cn-lift{
  /* This pane sits on a dark plate, so it brightens and saturates what it
     takes in ? the opposite of the one on the invitation card, which sits
     on a lit photograph and has to darken. The two had ended up sharing a
     rule and this one was being dimmed for a reason that belongs to the
     other.

     The fill is under a quarter and the blur is deep. Between them that
     is what makes the pane legible AS a pane: thin enough that the frame
     behind carries on across it, blurred enough that it arrives softened
     rather than merely tinted. */
  background:hsl(var(--brand-h) 100% 42% / .24);
  backdrop-filter:blur(26px) saturate(2.1) brightness(1.06);
  -webkit-backdrop-filter:blur(26px) saturate(2.1) brightness(1.06);
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.88),
    inset 0 0 0 1px rgba(255,255,255,.54),
    inset 0 -14px 22px -18px rgba(255,255,255,.34);}
/* the row it is standing on paints nothing of its own, or there would be
   two panes on top of each other wherever the travelling one came to rest */
.cn .cn-tab.on{
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
  text-shadow:0 1px 2px hsl(var(--brand-h) 100% 16% / .40);}

/* The disc used to appear only on the chosen row, which meant three of
   the four rows changed height the moment one was picked. It is on every
   row now. On the lit row it is not a second blue ? it is the same blue,
   thicker: a denser pane set into a thinner one, which is why it sits
   brighter than the pill around it without another colour being used. */
.cn .cn-go{
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.34),
             inset 0 0 0 1px rgba(255,255,255,.24);}
.cn .cn-tab.on .cn-go{
  background:hsl(var(--brand-h) 100% 42% / .52);
  backdrop-filter:blur(20px) saturate(1.9) brightness(1.08);
  -webkit-backdrop-filter:blur(20px) saturate(1.9) brightness(1.08);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.55),
             inset 0 0 0 1px rgba(255,255,255,.40);}

/* The stat card takes the same glass the pill has, because it too sits on
   something worth seeing through. The sheet does NOT, and that was tried:
   frosted, it let the dark photograph through as a grey cast and a panel
   meant to be paper turned into dishwater. Glass needs light behind it. */
.cn .cn-stat{
  background:linear-gradient(180deg,
    hsl(0 0% 100% / .62) 0%, hsl(0 0% 100% / .38) 100%);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 hsl(0 0% 100% / .9),
             inset 0 0 0 1px hsl(0 0% 100% / .5),
             0 22px 44px -26px rgba(var(--ink-rgb),.4);}
html[data-theme="dark"] .cn .cn-stat{
  background:linear-gradient(180deg,
    hsl(0 0% 100% / .09) 0%, hsl(0 0% 100% / .04) 100%);
  box-shadow:inset 0 1px 0 hsl(0 0% 100% / .22),
             inset 0 0 0 1px hsl(0 0% 100% / .10),
             0 22px 44px -26px rgba(0,0,0,.65);}
/* the block's edge softens to match, and its shadow spreads rather than sits */
.cn{border-radius:34px;
  box-shadow:0 44px 90px -46px rgba(var(--ink-rgb),.55),
             0 0 0 1px hsl(0 0% 100% / .10);}

/* Under 1040px the rail cannot stand beside the sheet. Stacking the two
   put the whole index above a single panel, so every choice sent the
   reader looking for its answer further down. Instead the two fold into
   each other: the index becomes an accordion, and the script lifts the
   chosen card out of the sheet and sets it directly under the row that
   asked for it. One open at a time; a second tap shuts it. */
@media (max-width:1040px){
  /* Keep the service photograph visible behind the accordion (previously
     display:none). Cover the full plate — desktop's left/height-fit sizing
     is for the rail column, not a stacked mobile block. */
  .cn-plate{
    background-size:cover, auto, auto, auto;
    background-position:center, 4% -8%, 108% 106%, center;
  }
  .cn{grid-template-columns:1fr; border-radius:26px; padding:10px;
    /* every child carries its own radius here, so the block can keep
       clipping its corners as it does on the wide layout */
    overflow:hidden;}
  .cn-rail{grid-template-columns:1fr; gap:6px; padding:0; align-content:start;}

  /* The pill's right margin is there to keep an unlit row inside the dark
     plate on the wide layout. There is no sheet to stay clear of here, so
     it comes off and the rows run the full width. */
  /* The rows are an accordion here and cards open between them, so a pane
     parked over the rail would have nothing steady to travel along. It
     stands down and the fill goes back on the row. */
  .cn-lift{display:none;}
  .cn-tab{border-radius:18px; padding:15px 12px 15px 16px; gap:12px;
    margin-right:0; font-size:15px; line-height:1.3;
    backdrop-filter:none; -webkit-backdrop-filter:none;}
  .cn-tab.on .cn-go{transform:none;}
  /* The open row sits where it is in the list rather than pinning under the
     bar. Pinning kept it in reach while a long card was read, but it also
     meant a brand pill floating over the copy the whole way down, and it
     read as something stuck rather than something chosen. */
  .cn-tab.on{margin-right:0; padding:15px 12px 15px 16px; border-radius:18px;}
  /* the halo the wide pill throws is a lot of light for a row in a list,
     so here the lit row keeps the fill and takes an ordinary drop shadow.
     Solid brand fill stays — glass over the photo reads poorly on a
     stacked accordion row. */
  .cn .cn-tab.on{
    background:var(--primary);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    box-shadow:
      inset 0 1px 0 0 rgba(255,255,255,.50),
      inset 0 0 0 1px rgba(255,255,255,.30);}

  /* The arrow the wide pill throws onto the sheet has nothing to point at
     here, so the same circle is redrawn as a plus that loses its upright
     when the row opens. No second icon, no markup change.
     Opacity must be forced on: desktop refine hides unlit discs, but here
     every row needs its + / ?. */
  .cn-go{position:relative; width:34px; height:34px;}
  .cn .cn-go{background:var(--primary); color:#fff; opacity:1;
    backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
    transform:none;}
  html[data-theme="dark"] .cn .cn-go{background:rgba(255,255,255,.14);}
  .cn .cn-tab.on .cn-go{background:#fff; color:var(--primary); opacity:1;
    box-shadow:none; transform:none;}
  .cn-tab:not(.on):hover .cn-go,
  .cn-tab:not(.on):focus-visible .cn-go{
    opacity:1; background:var(--primary); transform:none; box-shadow:none;}
  html[data-theme="dark"] .cn-tab:not(.on):hover .cn-go,
  html[data-theme="dark"] .cn-tab:not(.on):focus-visible .cn-go{
    background:rgba(255,255,255,.14);}
  .cn-go svg{display:none;}
  .cn-go::before,.cn-go::after{content:""; position:absolute; top:50%; left:50%;
    background:currentColor; border-radius:2px;
    transform:translate(-50%,-50%);}
  .cn-go::before{width:13px; height:2px;}
  .cn-go::after{width:2px; height:13px;
    transition:transform .3s var(--ease);}
  .cn-tab.on .cn-go::after{transform:translate(-50%,-50%) scaleY(0);}

  /* the sheet is emptied and stood down; its card is now a rail child */
  .cn-sheet{display:none;}
  .cn-rail > .cn-card{grid-area:auto; grid-template-columns:1fr; gap:24px;
    background:var(--n50); border-radius:18px; margin:6px 0 4px;
    padding:clamp(20px,4vw,26px);
    animation:cnOpen .42s var(--pop) both;}
  html[data-theme="dark"] .cn-rail > .cn-card{background:var(--n875);}
  .cn-rail > .cn-card .cn-lead{max-width:none;}
}
@keyframes cnOpen{from{opacity:0; transform:translateY(-8px);}
                  to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){
  .cn-rail > .cn-card{animation:none;}
}
@media (max-width:760px){
  .cn-card{grid-template-columns:1fr; gap:26px;}
  .cn-lead{max-width:none;}
}

/* ============================================================
   SELECTED WORK ? the deck
   A single row of sheets that runs off both edges of the screen, so
   the set reads as longer than the window and the next one is always
   half-visible. The rail is a scroll container, not a transform: it
   snaps, it takes a trackpad swipe, it takes the arrow keys, and if
   the script never runs it still works ? the buttons and the counter
   are the only things JavaScript adds.

   One measurement drives the whole block. --wk-w is the width of a
   sheet; the shot is 16:10 of it, so --wk-shot is its height, and
   that is what puts the two arrows on the middle of the picture at
   any width without measuring anything in script.

   Nothing here carries its own palette. The section is on --bg-alt
   and the page's text tokens, so it is light in light and dark in
   dark like every other section. The only fixed colours are on the
   address pill, which sits on a photograph in both themes.
   ============================================================ */
.wk{background:var(--bg-alt); border-block:1px solid var(--border);
  padding-block:clamp(54px,6vw,84px);
  --wk-w:clamp(276px,40vw,600px);
  --wk-shot:calc(var(--wk-w) / 1.6);
  /* headroom for the centre sheet to grow into, top and bottom. A rail with
     overflow-x:auto clips on the cross axis as well, so without this the
     growth ? and the shadow under it ? would be cut off. */
  --wk-lift:44px;}
.wk .wrap{position:relative; z-index:2;}

/* ---- the head ----
   The section's own two-part head has gone: it is the page's .sec-head.mid
   like every other section, so the eyebrow, the heading and the lede sit on
   the same centre line here as they do above and below. The counter keeps
   its own row underneath, on that same line. */
.wk-count{display:grid; gap:10px; justify-items:center;
  margin-top:clamp(20px,2.4vw,30px);}
.wk-count span{font-family:var(--font-display); font-size:12.5px; font-weight:700;
  letter-spacing:.14em; color:var(--muted); font-variant-numeric:tabular-nums;}
.wk-count b{color:var(--brand-text);}
.wk-bar{display:block; width:130px; height:2px; border-radius:2px;
  background:var(--border); overflow:hidden;}
.wk-bar i{display:block; height:100%; width:0; border-radius:2px;
  background:var(--primary); transition:width .4s var(--ease);}

/* ---- the rail ----
   It breaks out of .wrap to the full width of the section and then puts
   the gutter back as padding, so the first sheet still lines up with the
   heading while the last one is free to run off the edge. */
.wk-deck{position:relative; margin-top:clamp(2px,1vw,12px);
  margin-inline:calc(50% - 50vw);}
.wk-rail{display:flex; gap:clamp(20px,3vw,48px); list-style:none; margin:0;
  /* A gutter of half a sheet let the first one reach the middle, but it
     also meant the middle of the screen sat next to nothing at all at
     either end. The gutter is the page's own margin instead: the sheets
     in the run centre properly, and the two on the ends come to rest
     against the edge with their neighbours still in frame, so there are
     always three sheets on screen. */
  padding:var(--wk-lift) clamp(14px,2vw,30px);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; cursor:grab; -webkit-user-select:none; user-select:none;}
.wk-rail::-webkit-scrollbar{display:none;}
/* dragging state: snap and smoothing both fight a manual drag, so both are
   switched off for as long as the pointer is down (toggled in JS). */
.wk-rail.dragging{cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto;}
.wk-rail.dragging .wk-card{pointer-events:none;}
@media (prefers-reduced-motion:reduce){ .wk-rail{scroll-behavior:auto;} }

.wk-card{position:relative; z-index:1; flex:0 0 var(--wk-w);
  scroll-snap-align:center; transition:transform .45s var(--ease);}
/* The sheet in the middle is the one being shown, so it is the one that
   comes forward: it grows from its own centre, so it stands proud at the
   top and the foot alike, and it grows past the gap on either side so the
   two next to it pass behind rather than beside it. The six around it are
   left exactly as they are ? nothing is dimmed to make this one read.

   Transform and z-index only. Neither changes the layout, so the snap
   positions and the ring's arithmetic are untouched. */
.wk-deck.wired .wk-card.on{transform:scale(1.085); z-index:3;}

/* ---- the sheet ---- */
.wk-shot{position:relative; margin:0; border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface-2); aspect-ratio:16 / 10;
  border:1px solid var(--border);
  box-shadow:0 10px 26px -18px rgba(var(--ink-rgb),.30);
  transition:box-shadow .45s var(--ease), border-color .26s var(--ease);}
/* depth is carried by the shadow alone. The outline is not part of being
   the centre sheet ? it answers the pointer, and it does it by recolouring
   the hairline the picture already has rather than adding a second edge on
   top of it, so nothing shifts by a pixel when it lights up. */
.wk-deck.wired .wk-card.on .wk-shot{
  box-shadow:0 36px 70px -28px rgba(var(--ink-rgb),.52);}
html[data-theme="dark"] .wk-deck.wired .wk-card.on .wk-shot{
  box-shadow:0 36px 70px -26px rgba(0,0,0,.9);}
.wk-card:hover .wk-shot{border-color:var(--primary);}

/* ---- the way in ----
   Only on the sheet in the middle: on the six either side it would be six
   calls to action competing at once. Without the script no sheet is chosen,
   so every button is shown instead of none. */
.wk-visit{position:absolute; right:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 20px; border-radius:999px;
  background:var(--primary); color:#fff;
  font-family:var(--font-display); font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 10px 24px -12px hsl(var(--brand-h) 100% 32% / .7);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             background .22s var(--ease);}
.wk-visit svg{width:14px; height:14px;}
.wk-visit:hover{background:var(--p600);}
.wk-deck.wired .wk-card.on .wk-visit,
.wk-deck:not(.wired) .wk-visit{opacity:1; transform:none; pointer-events:auto;}
.wk-img{position:absolute; inset:0; background-image:var(--cs);
  background-size:cover; background-position:center top;
  transition:transform .6s var(--ease);}
.wk-card:hover .wk-img{transform:scale(1.04);}
/* The one in the middle is shown at full size and the ones either side
   step back, so the centre reads as the sheet being looked at. Only the
   picture is scaled ? the copy under it is faded rather than shrunk, so
   nothing typographic is ever drawn at a fraction of its size. Gated on
   .wired: without the script nothing is chosen, and dimming five of
   seven sheets for no reason would be worse than dimming none. */
/* the address is the proof ? it says the site is live, not a mockup. It is
   the one thing here that keeps fixed colours, because it lies on a
   photograph rather than on the page */
.wk-url{position:absolute; left:14px; top:14px; display:inline-flex;
  align-items:center; gap:8px; padding:7px 14px; border-radius:30px;
  background:rgba(7,19,32,.72); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  font-size:10.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  color:rgba(255,255,255,.9);}
.wk-url::before{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--primary); flex-shrink:0;}

.wk-say{padding-top:clamp(14px,1.6vw,20px);}
.wk-say h3{display:flex; align-items:baseline; gap:12px;
  font-family:var(--font-display);
  font-weight:800; letter-spacing:-0.035em; color:var(--text);}
.wk-say h3 i{font-style:normal; font-size:var(--h3); font-weight:700;
  letter-spacing:.1em; color:var(--subtle); font-variant-numeric:tabular-nums;}
.wk-say p{margin-top:10px; font-size:14px; line-height:1.58; color:var(--text-2);
  max-width:46ch;}

.wk-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;
  list-style:none; padding:0;}
.wk-tags li{padding:6px 13px; border-radius:30px; border:1px solid var(--border);
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);}
.wk-tags li:first-child{border-color:var(--brand-text); color:var(--brand-text);}

/* ---- the arrows ----
   One at each edge of the screen, on the middle line of the picture ?
   which is --wk-shot / 2 down from the top of the rail, whatever the
   sheets happen to be measuring. Added by the script, because without
   it they would be two buttons that do nothing. */
.wk-arws{display:none;}
.wk-deck.wired .wk-arws{display:block;}
.wk-arw{position:absolute; z-index:4; top:calc(var(--wk-lift) + var(--wk-shot) / 2);
  transform:translateY(-50%);
  /* Ink, not paper. On --surface they were a white disc on a near-white
     section and disappeared; solid ink reads on the ground and on every
     screenshot behind them, and inverts by itself in dark mode. */
  width:50px; height:50px; border-radius:50%; display:grid; place-items:center;
  background:var(--text); border:1px solid var(--text); color:var(--bg);
  box-shadow:var(--shadow-lift);
  transition:background .26s var(--ease), border-color .26s var(--ease),
             color .26s var(--ease), opacity .26s var(--ease),
             transform .3s var(--ease);}
.wk-arw[data-wk="-1"]{left:clamp(10px,1.6vw,26px);}
.wk-arw[data-wk="1"] {right:clamp(10px,1.6vw,26px);}
.wk-arw:hover{background:var(--primary); border-color:var(--primary); color:#fff;
  transform:translateY(-50%) scale(1.06);}
.wk-arw svg{width:19px; height:19px;}

.wk-cta{margin-top:clamp(30px,3.4vw,44px); display:flex; justify-content:center;}

@media (max-width:900px){
  .wk{--wk-w:clamp(268px,68vw,420px);}
}
@media (max-width:640px){
  .wk-arws{display:none !important;}
  .wk-cta .btn{width:100%;}
}



/* ---- case studies, variant 2 : the stack ----
   Each sheet pins under the bar and the next one climbs over it, so the
   set is read one at a time without a carousel's sideways travel. Every
   sheet pins at the same line and they are all the same height, so a
   sheet that has arrived covers the one under it completely ? no edge
   of the last one is left showing at the top or at the foot.

   That equal height is why min-height is here and why the picture is
   stretched rather than held to a ratio: the copy is what varies from
   sheet to sheet, so the card is given a floor tall enough for the
   longest of them and the picture fills whatever is left. Without it a
   taller sheet underneath would show below a shorter one on top.

   The cards are in normal flow rather than in a grid, and that is not a
   preference. A sticky element can only travel inside its containing
   block; as a grid item that block is its own row, which is exactly its
   own height, so it would have nowhere to go. In flow the block is the
/* ============================================================
   WHY US ? shared
   ============================================================ */
.why{position:relative; background:var(--bg); border-block:1px solid var(--border);}
.why-head h2 em{font-style:normal; color:var(--brand-text);}

/* ---- VARIANT 3 : the panel ----
   The claim is on the right and the proof of it is on the left, in a panel
   with the tabs sitting on its edge like the tabs on a folder. Each tab
   brings its own instrument ? a line, a ring, a set of bars ? and each is
   drawn from nothing every time it is opened, so the panel is doing the
   thing it is describing rather than showing a picture of it.
   ============================================================ */
.why{background:var(--bg);}
/* the claim on the left, the panel answering on the right: read left to
   right, the argument comes before its evidence */
.wn{display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); gap:clamp(34px,5vw,80px);
  align-items:center; margin-top:14px;}

/* ---- the folder ---- */
/* The tabs fill the panel's width between them. Left to size themselves, the
   last one stops short of the right edge and the panel's rounded corner opens
   up beside it ? a wedge of background where the two should be meeting. */
.wn-tabs{display:flex; gap:2px; padding-left:0; position:relative; z-index:2;}
.wn-tab{position:relative; flex:1 1 0; text-align:center;
  padding:17px clamp(14px,1.8vw,24px) 19px; border:0; cursor:pointer;
  background:transparent; font:inherit; font-family:var(--font-display);
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); border-radius:22px 22px 0 0;
  transition:color .26s var(--ease), background .3s var(--ease);}
.wn-tab:hover{color:var(--text);}
/* the open tab is the panel: same fill, corners turned, and it sits low
   enough to swallow the join rather than leave a hairline on it */
.wn-tab.on{color:var(--text); background:var(--surface-2); margin-bottom:-3px;
  padding-bottom:22px;}
/* The focus ring is drawn on three sides only. A full outline runs along the
   tab's bottom edge as well, and that edge is the join with the panel ? the
   ring cuts the two apart and reads as a gap under the open tab. */
.wn-tab:focus-visible{outline:none;
  box-shadow:inset 0 3px 0 0 var(--primary),
             inset 3px 0 0 0 var(--primary),
             inset -3px 0 0 0 var(--primary);}

/* The panel's radius matches the tab's, so the two meet on the same curve
   instead of one being cut sharper than the other. All four corners are
   round by default; the top-left is squared off only while the first tab is
   the open one, because that is the only time a tab is standing on it. */
.wn-body{position:relative; z-index:1; border-radius:30px;
  background:var(--surface-2); padding:clamp(28px,3.4vw,44px);}
/* a corner is squared off only while a tab is actually standing on it */
.wn-body.first{border-top-left-radius:0;}
.wn-body.last{border-top-right-radius:0;}
.wn-panel{display:none;}
.wn-panel.on{display:block; animation:wnIn .45s var(--pop);}
.wn-panel[hidden]{display:none !important;}
@keyframes wnIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.wn-panel h3{font-family:var(--font-display);
  font-weight:800; letter-spacing:-0.035em; line-height:1.18; max-width:20ch;}
.wn-panel > p{margin-top:12px; font-size:var(--body); line-height:1.65; color:var(--text-2);
  max-width:46ch;}

/* ---- the instrument ---- */
.wn-card{margin-top:26px; padding:22px; border-radius:22px;
  background:var(--surface); border:1px solid var(--border);}
.wn-card-top{display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:16px;}
.wn-card-top b{font-family:var(--font-display); font-size:15px; font-weight:800;
  letter-spacing:-0.028em;}
.wn-pill{padding:6px 12px; border-radius:20px; border:1px solid var(--border);
  font-size:11.5px; font-weight:700; color:var(--muted); display:inline-flex;
  align-items:center; gap:7px;}
.wn-pill svg{width:11px; height:11px;}

/* the line */
.wn-chart{width:100%; height:auto; display:block; overflow:visible;}
.wn-grid line{stroke:var(--border-soft); stroke-width:1; stroke-dasharray:3 4;}
.wn-axis{font-size:8px; fill:var(--subtle); font-weight:700;}
.wn-line{fill:none; stroke:var(--text); stroke-width:2.6; stroke-linecap:round;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,600); stroke-dashoffset:var(--len,600);}
.on .wn-line{transition:stroke-dashoffset 1.5s var(--ease) .1s; stroke-dashoffset:0;}
.wn-fill{fill:hsl(var(--brand-h) 100% 50% / .10); opacity:0;}
.on .wn-fill{opacity:1; transition:opacity .8s var(--ease) .7s;}
.wn-node{fill:var(--primary); stroke:var(--surface); stroke-width:2;
  transform-box:fill-box; transform-origin:center; transform:scale(0);}
.on .wn-node{transform:none; transition:transform .45s var(--pop) var(--d,0ms);}

/* the ring */
.wn-ringwrap{display:grid; grid-template-columns:auto 1fr; gap:clamp(18px,2.4vw,30px);
  align-items:center;}
.wn-donut{width:clamp(118px,13vw,146px); aspect-ratio:1; position:relative;}
.wn-donut svg{width:100%; height:100%; transform:rotate(-90deg);}
.wn-donut .trk{fill:none; stroke:var(--border-soft); stroke-width:11;}
.wn-donut .seg{fill:none; stroke-width:11; stroke-linecap:butt;
  stroke-dasharray:0 999;}
.on .wn-donut .seg{transition:stroke-dasharray 1.1s var(--ease) var(--d,0ms);}
.wn-donut b{position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; font-family:var(--font-display); font-size:20px; font-weight:800;
  letter-spacing:-0.04em; line-height:1.1;}
.wn-donut b span{display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  color:var(--subtle); margin-top:3px;}
.wn-legend{display:grid; grid-template-columns:1fr 1fr; gap:11px 16px;}
.wn-legend div{display:flex; align-items:center; gap:9px; font-size:12.6px;
  color:var(--text-2);}
.wn-legend i{width:9px; height:9px; border-radius:3px; flex-shrink:0;}
.wn-legend s{text-decoration:none; margin-left:auto; font-weight:700; color:var(--text);
  font-variant-numeric:tabular-nums;}

/* the bars */
.wn-bars{display:grid; gap:14px;}
.wn-bar b{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:13px; font-weight:600; color:var(--text-2);}
.wn-bar b s{text-decoration:none; font-family:var(--font-display); font-size:14px;
  font-weight:800; color:var(--brand-text); font-variant-numeric:tabular-nums;}
.wn-bar span{display:block; margin-top:8px; height:7px; border-radius:4px;
  background:var(--border-soft); overflow:hidden;}
.wn-bar i{display:block; height:100%; border-radius:4px; background:var(--primary);
  width:var(--w); transform:scaleX(0); transform-origin:left center;}
.on .wn-bar i{transform:none; transition:transform 1.1s var(--ease) var(--d,0ms);}

/* ---- the claim ---- */
.wn-say h2{letter-spacing:-0.045em; line-height:1.04;}
.wn-say h2 em{font-style:normal; color:var(--brand-text);}
.wn-say p{margin-top:20px; font-size:var(--body); line-height:1.7; color:var(--text-2);
  max-width:44ch;}
.wn-say .btn{margin-top:28px;}

/* Light theme only: white folder on tinted section, so the panel reads as a card.
   Dark theme keeps --surface-2 / --surface as defined on the theme tokens above.
   Inactive tabs stay transparent so the section shows through (flat labels). */
html[data-theme="light"] .wn-tabs{background:transparent;}
html[data-theme="light"] .wn-body{background:#FFFFFF;}
html[data-theme="light"] .wn-tab:not(.on){background:transparent;}
html[data-theme="light"] .wn-tab:not(.on):hover{background:hsl(var(--brand-h) 60% 50% / .08);}
html[data-theme="light"] .wn-tab.on{background:#FFFFFF;}
html[data-theme="light"] .wn-card{background:#E7F4F9;}

@media (max-width:1000px){
  .wn{grid-template-columns:1fr; gap:38px;}
}
@media (max-width:560px){
  .wn-tabs{padding-left:0;}
  .wn-tab{padding:13px 14px 15px; font-size:11px; letter-spacing:.1em;
    border-radius:16px 16px 0 0;}
  .wn-body{border-radius:22px;}
  .wn-card{border-radius:18px;}
  .wn-ringwrap{grid-template-columns:1fr; justify-items:center; text-align:center;}
  .wn-legend{grid-template-columns:1fr;}
}

/* ---- VARIANT 4 : the split ----
   A photograph on one side, the reasons listed on the other. It is the
   plainest arrangement on the page and that is the point of having it ? the
   hub argues with a diagram and the panel argues with instruments, so this
   one is here for when the argument should just be read. The only movement
   is the reasons arriving one after another and the plate settling behind
   its own frame.
   ============================================================ */
/* the drawn ground: wide, slow arcs, kept faint enough to stay ground */

/* stretch, not centre: the plate takes the height the reasons come to, so the
   two columns finish level instead of the picture floating in the middle of
   a taller neighbour */

/* ---- the plate ---- */
/* the frame the plate settles into, offset behind it */

/* ---- the reasons ---- */

@media (max-width:940px){
  /* stacked, there is no neighbour to match, so the plate takes a shape */
}

/* ---- VARIANT 2 : the ledger ----
   The question is comparative, so the layout is too. Two columns of the same
   six rows, one plain and one on the brand ? the argument is made by the
   alignment rather than by adjectives. */
.wl{margin-top:52px; border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface);}
.wl-row{display:grid; grid-template-columns:1fr 1.15fr 1.15fr;
  border-top:1px solid var(--border);}
.wl-row:first-child{border-top:0;}
.wl-cell{padding:20px 24px; font-size:14.4px; line-height:1.6; color:var(--text-2);
  display:flex; align-items:center; gap:12px;}
.wl-cell:nth-child(1){font-family:var(--font-display); font-size:13px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--subtle);}
.wl-cell:nth-child(2){border-left:1px solid var(--border);}
/* the column being argued for carries the brand and a slightly heavier face */
.wl-cell:nth-child(3){border-left:1px solid var(--border);
  background:hsl(var(--brand-h) 100% 50% / .05); color:var(--text); font-weight:500;}
html[data-theme="dark"] .wl-cell:nth-child(3){background:hsl(var(--brand-h) 100% 50% / .09);}
.wl-cell svg{width:18px; height:18px; flex-shrink:0;}
.wl-cell:nth-child(2) svg{color:var(--subtle);}
.wl-cell:nth-child(3) svg{color:var(--primary);}

.wl-head .wl-cell{padding:18px 24px; font-family:var(--font-display); font-weight:800;
  letter-spacing:-0.02em; font-size:16px; color:var(--text); text-transform:none;}
.wl-head .wl-cell:nth-child(1){color:transparent; user-select:none;}
.wl-head .wl-cell:nth-child(2){color:var(--muted);}
.wl-head .wl-cell:nth-child(3){color:var(--brand-text);}
.wl-foot{display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-top:26px;}
.wl-foot p{font-size:14px; color:var(--muted);}

@media (max-width:820px){
  .wl-row{grid-template-columns:1fr;}
  .wl-cell{padding:14px 18px;}
  .wl-cell:nth-child(1){padding-bottom:4px; border-top:1px solid var(--border);}
  .wl-cell:nth-child(2),.wl-cell:nth-child(3){border-left:0;}
  .wl-cell:nth-child(2)::before,.wl-cell:nth-child(3)::before{
    font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--subtle); margin-right:4px;}
  .wl-cell:nth-child(2)::before{content:"Most:";}
  .wl-cell:nth-child(3)::before{content:"Us:"; color:var(--brand-text);}
  .wl-head{display:none;}
  .wl-row:first-child .wl-cell:nth-child(1){border-top:0;}
}

/* ============================================================
   THE INVITATION ? VARIANT 3 : the split
   Where variant 2 empties the panel and stands the ask alone in the
   middle, this one splits it in half: the ask stays left-aligned and
   plain-spoken, and the right half is given over to a small proof ?
   a mock search result showing the brand outranking two placeholders.
   It is a picture of the promise in the headline, not a decoration.
   ============================================================ */
/* ---- the panel ----
   The frame is back inside the panel and the section around it is the
   page's own light ground again. That is the arrangement the block
   started in and it is the right one: this is a card on a page, not a
   band cut across it.

   It does mean the panel cannot be see-through glass any more, and it is
   worth being plain about why. Glass is read as a difference ? the same
   thing sharp outside a pane and soft inside it. With the frame inside
   the panel there is nothing outside it to compare against but white
   paper, so a translucent panel would only be a grey rectangle. What is
   kept is the edge language rather than the trick: a hairline of light
   along the top where a bevel catches, a rim all the way round, a bounce
   off the underside for thickness, and one soft shadow so the card sits
   on the page rather than in it.

   The frame itself is pulled onto the brand ? its own colour taken down
   and a deep brand duotone laid over it ? so it reads as a blue field
   with a photograph's structure in it rather than as a stock product
   shot dropped behind some type.

   The ink underneath is the floor: if the photograph never loads the
   panel is still a finished dark field rather than a hole.
   ------------------------------------------------------------------ */
.cta .cta3{position:relative; overflow:hidden; text-align:center;
  display:grid; justify-items:center;
  padding:clamp(34px,5vw,76px) clamp(20px,4vw,64px);
  border-radius:clamp(22px,2.6vw,32px);
  color:#fff;
  background:var(--cta-shot) 54% 46% / cover no-repeat, #0b1c2c;
  box-shadow:
    inset 0 1px 0 0 rgba(255,255,255,.30),
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 -30px 60px -40px rgba(255,255,255,.16),
    0 46px 100px -56px rgba(var(--ink-rgb),.55);}
/* the duotone, and enough floor under it for white type to hold */
.cta .cta3::after{content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background:
    radial-gradient(72% 62% at 50% 40%, hsl(var(--brand-h) 90% 30% / .26) 0%,
                    transparent 74%),
    linear-gradient(158deg, hsl(var(--brand-h) 78% 18% / .70) 0%,
                    hsl(var(--brand-h) 86% 10% / .80) 54%,
                    hsl(var(--brand-h) 90% 7% / .86) 100%);}
.cta .cta3 > *{position:relative; z-index:1;}
.cta3 h2{color:#fff;}
.cta3 h2 em{font-style:normal; color:var(--primary);}
.cta3 > p{margin-inline:auto; max-width:52ch; color:rgba(255,255,255,.80);}

.cta3-eyebrow{display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-size:11.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-text);}
.cta3-eyebrow::before{content:""; width:7px; height:7px; border-radius:50%;
  background:var(--primary); flex-shrink:0;}

.cta3 h2{margin-top:14px; font-family:var(--font-display);
  font-weight:800; letter-spacing:-0.045em; line-height:1.08;
  max-width:18ch; margin-inline:auto;}
.cta3 > p{margin-top:14px; font-size:var(--lede); line-height:1.6;}

.cta3-eyebrow{justify-content:center;}
.cta3-actions{position:relative;
  display:flex; align-items:center; flex-wrap:wrap; justify-content:center;
  gap:clamp(16px,2.2vw,26px); margin-top:clamp(20px,2.6vw,30px);}
.cta3-actions > *{position:relative; z-index:1;}
/* This was its own button once ? its own fill, its own radius, its own
   hover distance ? and then its own pane of glass on top of that. All of
   it is gone. It is the page's button now, with no local rule at all:
   same fill, same rim, same wipe across it on hover, same label roll,
   same lift. A visitor who has pressed one button on this site should
   not have to learn a second one at the point where they are deciding
   whether to get in touch. */

.cta3-mail{display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:700; color:#FFFFFF;
  border-bottom:1px solid hsl(0 0% 100% / .32); padding-bottom:2px;
  transition:border-color .2s var(--ease), color .2s var(--ease);}
.cta3-mail svg{width:16px; height:16px; flex-shrink:0; color:#FFFFFF; stroke:#FFFFFF;}
.cta3-mail:hover{border-color:#fff;}

@media (max-width:820px){
  /* stacked, the panel is taller than it is wide and a 150% pan no longer
     covers it, so the frame goes back to filling the box */
  .cta3 h2{max-width:none;}
}
@media (max-width:480px){
  .cta3-actions{flex-direction:column; align-items:center;}
}

/* ============================================================
   DOC SECTIONS ? services, logos, differentiators, AI surfaces,
   video reviews, results, team. Everything below reuses the page's
   two hues, its hairline rules and its uppercase display face; the
   only thing that changes section to section is what the structure
   is being asked to say.
   ============================================================ */

/* ---- services: three, because the doc sells three ---- */

/* ---- trust strip: the hero's claim, priced in numbers, before the
   reader has scrolled far enough to be asked for anything ---- */
.tstrip{background:var(--bg-alt); border-bottom:1px solid var(--border);}
.tstrip-in{display:grid; grid-template-columns:repeat(4,1fr);}
.tstrip-cell{padding:clamp(22px,2.6vw,30px) 20px; text-align:center;
  border-left:1px solid var(--border);}
.tstrip-cell:first-child{border-left:none;}
.tstrip-cell b{display:block; font-family:var(--font-display);
  font-size:clamp(21px,2.4vw,29px); font-weight:800; letter-spacing:-0.045em;
  /* The plates are photographs and carry the colours they were drawn in.
     The figures are type, and type on this site is one blue. */
  line-height:1; color:var(--brand-text);
  font-variant-numeric:tabular-nums;}
.tstrip-cell span{display:block; margin-top:8px; font-size:12.6px; color:var(--muted);}
@media (max-width:700px){
  .tstrip-in{grid-template-columns:repeat(2,1fr);}
  .tstrip-cell:nth-child(3){border-left:none;}
  .tstrip-cell:nth-child(n+3){border-top:1px solid var(--border);}
}

.bl-sec{background:var(--bg); border-block:1px solid var(--border);
  padding-block:clamp(46px,4.8vw,64px);}
/* ---- the blueprint ----
   Six stages in one ruled panel, with the numbers sitting on its top edge
   and a dotted line running between them. The line is drawn from the first
   badge to the last rather than edge to edge: badges land on column
   centres, which on six columns are a twelfth and eleven twelfths across,
   so the line is inset by exactly that and lands under them at any width.

   The stage panel and the figures panel are the page's own --surface on
   --border, the accent is the brand hue, and the counts run on the same
   [data-count] observer the rest of the page uses. Nothing new was added
   to the design system to build this.
   ------------------------------------------------------------------ */
.bpx{position:relative; margin-top:clamp(46px,5vw,68px);
  border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow);}

/* the run between the badges, drawn left to right once the panel is in */
.bpx-line{position:absolute; left:8.333%; right:8.333%; top:-1px; height:1px;
  background:repeating-linear-gradient(to right,
    var(--brand-text) 0 4px, transparent 4px 9px);
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1.1s var(--ease) .15s;}
.rv.in .bpx-line{transform:scaleX(1);}

.bpx-row{display:grid; grid-template-columns:repeat(6,minmax(0,1fr));
  list-style:none; margin:0; padding:0;}
.bpx-stage{position:relative; display:grid; justify-items:center; text-align:center;
  padding:clamp(30px,3.2vw,42px) clamp(10px,1.2vw,18px) clamp(22px,2.4vw,32px);
  opacity:0; transform:translateY(14px);
  transition:opacity .55s var(--ease) var(--lay),
             transform .55s var(--ease) var(--lay), background .3s var(--ease);
  --lay:calc(var(--i) * 90ms);}
.rv.in .bpx-stage{opacity:1; transform:none;}
/* the uprights stop short of the panel's own edges */
.bpx-stage + .bpx-stage::before{content:""; position:absolute; left:0;
  top:14%; bottom:14%; width:1px; background:var(--border);}
.rv.in .bpx-stage:hover{transform:translateY(-4px); background:var(--bg-alt);}

/* the badge rides the top edge */
.bpx-n{position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  font-family:var(--font-display); font-size:12px; font-weight:800;
  letter-spacing:.06em; color:var(--muted); font-variant-numeric:tabular-nums;
  transition:border-color .3s var(--ease), color .3s var(--ease),
             box-shadow .3s var(--ease);}
.bpx-stage:hover .bpx-n{border-color:var(--primary); color:var(--brand-text);
  box-shadow:0 0 0 4px hsl(var(--brand-h) 100% 50% / .12);}

.bpx-ico{display:grid; place-items:center; width:clamp(48px,4.6vw,58px);
  aspect-ratio:1; border-radius:50%; background:var(--brand-soft);
  color:var(--brand-text);
  transition:transform .3s var(--ease), background .3s var(--ease),
             color .3s var(--ease);}
.bpx-ico svg{width:44%; height:44%;}
.bpx-stage:hover .bpx-ico{transform:scale(1.07); background:var(--primary); color:#fff;}

.bpx-stage h3{margin-top:clamp(14px,1.6vw,20px); font-family:var(--font-display);
  font-weight:700; letter-spacing:-0.03em;
  color:var(--text);}
.bpx-rule{display:block; width:22px; height:2px; border-radius:2px; margin-top:10px;
  background:var(--border); transform-origin:50% 50%;
  transition:transform .3s var(--ease), background .3s var(--ease);}
.bpx-stage:hover .bpx-rule{background:var(--primary); transform:scaleX(1.7);}
.bpx-stage p{margin-top:clamp(12px,1.4vw,16px); font-size:12.8px; line-height:1.6;
  color:var(--muted); transition:color .3s var(--ease);}
.bpx-stage:hover p{color:var(--text-2);}

/* ---- the figures ---- */
.bpx-metrics{margin-top:clamp(18px,2vw,26px); border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);}
.bpx-metrics ul{display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  list-style:none; margin:0; padding:0;}
.bpx-metrics li{position:relative; display:grid; justify-items:center;
  text-align:center; gap:9px;
  padding:clamp(22px,2.4vw,32px) clamp(6px,1vw,14px);
  opacity:0; transform:translateY(12px);
  transition:opacity .5s var(--ease) var(--lay),
             transform .5s var(--ease) var(--lay), background .3s var(--ease);
  --lay:calc(var(--i) * 70ms);}
.bpx-metrics.in li{opacity:1; transform:none;}
.bpx-metrics.in li:hover{transform:translateY(-4px); background:var(--bg-alt);}
.bpx-metrics li + li::before{content:""; position:absolute; left:0;
  top:20%; bottom:20%; width:1px; background:var(--border);}
.bpx-mico{display:grid; place-items:center; width:clamp(36px,3.4vw,44px);
  aspect-ratio:1; border-radius:50%; background:var(--brand-soft);
  color:var(--brand-text); transition:transform .3s var(--ease);}
.bpx-mico svg{width:44%; height:44%;}
.bpx-metrics li:hover .bpx-mico{transform:scale(1.07);}
.bpx-metrics b{font-family:var(--font-display); font-size:clamp(19px,2.1vw,27px);
  font-weight:800; letter-spacing:-0.045em; line-height:1;
  color:var(--brand-text); font-variant-numeric:tabular-nums;}
.bpx-metrics li > span:last-child{font-size:11.5px; line-height:1.45;
  color:var(--muted); max-width:14ch;}

.bl-cta{margin-top:clamp(26px,3vw,38px); display:flex; justify-content:center;}

/* ---- reflow ----
   Six across becomes three, then a timeline. On one column the run is no
   longer along the top of a row, so it becomes the rail the badges sit on
   and the stages read down it ? which is the same connection, turned. */
@media (max-width:1080px){
  .bpx-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bpx-line{display:none;}
  .bpx-stage:nth-child(3n+1)::before{display:none;}
  .bpx-stage:nth-child(n+4){border-top:1px solid var(--border);}
  .bpx-metrics ul{grid-template-columns:repeat(4,minmax(0,1fr));}
  .bpx-metrics li:nth-child(4n+1)::before{display:none;}
  .bpx-metrics li:nth-child(n+5){border-top:1px solid var(--border);}
  /* five, six and seven across four columns leaves a hole at the end of the
     row, so the seventh takes the two that are left */
  .bpx-metrics li:last-child{grid-column:span 2;}
}
@media (max-width:720px){
  .bpx{background:transparent; border:0; box-shadow:none; padding-left:26px;}
  .bpx-row{grid-template-columns:minmax(0,1fr); gap:14px;}
  /* the rail, and the badges sitting on it */
  .bpx::before{content:""; position:absolute; left:19px; top:22px; bottom:22px;
    width:2px; border-radius:2px;
    background:linear-gradient(180deg, var(--primary), var(--border));}
  .bpx-stage{justify-items:start; text-align:left; border-top:0;
    grid-template-columns:auto 1fr; column-gap:16px;
    padding:clamp(14px,3vw,18px) clamp(14px,3vw,18px) clamp(14px,3vw,18px)
            clamp(14px,3vw,18px);
    border-radius:var(--r-lg); background:var(--surface);
    border:1px solid var(--border); box-shadow:var(--shadow);}
  .bpx-stage::before{display:none;}
  .bpx-n{position:absolute; left:-26px; top:22px; transform:translate(-50%,0);
    width:32px; height:32px; font-size:11px;}
  .bpx-ico{grid-row:1 / span 3;}
  .bpx-stage h3{margin-top:0; align-self:center;}
  .bpx-rule{display:none;}
  .bpx-stage p{grid-column:2; margin-top:6px;}
  .bpx-metrics ul{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bpx-metrics li:nth-child(2n+1)::before{display:none;}
  .bpx-metrics li:nth-child(n+3){border-top:1px solid var(--border);}
  /* the seventh has no pair, so it takes the whole row and centres in it
     rather than sitting in the left half with empty space beside it */
  .bpx-metrics li:last-child{grid-column:1 / -1;}
  .bpx-metrics li:last-child > span:last-child{max-width:none;}
  .bl-cta .btn{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .bpx-stage,.bpx-metrics li{opacity:1; transform:none;}
  .bpx-line{transform:scaleX(1);}
}

/* ---- the client wall ----
   Ten names in a five-by-two panel, ruled into cells. The rules are not
   ten borders: the grid carries a one-pixel gap over a border-coloured
   panel and each cell paints its own surface on top, so every line is the
   same line and none of them can double up at a corner.

   The small lights sit where the middle rule crosses each upright, which
   is the only place a crossing exists ? they are placed on that fraction
   rather than measured, so they stay on the crossing at any width.

   Nothing here is themed by hand. The panel is --surface on --border, the
   accent is the brand hue, and the section carries the page's own dot grid
   and beam, so it is light in light and dark in dark like the rest.
   ------------------------------------------------------------------ */
.clients .wrap{position:relative; z-index:3;}
.cl-shield{width:12px; height:12px; margin-left:2px; color:var(--primary);}


.cl-wall{position:relative; margin-top:clamp(34px,4vw,54px);
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border); background:var(--border);
  box-shadow:var(--shadow-lift);}
.cl-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px; list-style:none; margin:0; padding:0;}
.cl-cell{display:grid; justify-items:center; align-content:center; gap:6px;
  padding:clamp(22px,2.6vw,34px) clamp(10px,1.4vw,18px);
  min-height:clamp(104px,11vw,132px); background:var(--surface); text-align:center;
  transition:background .26s var(--ease);}
.cl-cell:hover{background:var(--bg-alt);}

.cl-ico{display:grid; place-items:center; width:26px; height:26px;
  color:var(--text); transition:color .26s var(--ease);}
.cl-ico svg{width:100%; height:100%;}
.cl-cell:hover .cl-ico{color:var(--brand-text);}
.cl-cell b{font-family:var(--font-display); font-size:clamp(15px,1.5vw,18.5px);
  font-weight:700; letter-spacing:-0.03em; line-height:1.15; color:var(--text);}
.cl-cell span{font-size:9.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);}

/* the light on each crossing of the middle rule */
.cl-star{position:absolute; left:var(--l); top:50%; width:5px; height:5px;
  margin:-2.5px 0 0 -2.5px; border-radius:50%; pointer-events:none;
  background:var(--primary);
  box-shadow:0 0 0 3px hsl(var(--brand-h) 100% 50% / .18),
             0 0 12px 2px hsl(var(--brand-h) 100% 55% / .55);}

/* ---- the line under it ---- */
.cl-foot{display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,1.8vw,22px); margin-top:clamp(22px,2.6vw,34px);}
.cl-seal{display:grid; place-items:center; width:clamp(44px,4.4vw,56px);
  aspect-ratio:1; border-radius:50%; flex-shrink:0;
  background:var(--surface); border:1px solid var(--border);
  color:var(--brand-text); box-shadow:var(--shadow);}
.cl-seal svg{width:46%; height:46%;}
.cl-foot p{font-size:clamp(14.5px,1.35vw,16.5px); line-height:1.6;
  color:var(--text-2);}
.cl-foot p b{font-weight:600; color:var(--brand-text);}

@media (max-width:980px){
  .cl-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* three across leaves one crossing on each rule, and it is not at a fifth */
  .cl-star{display:none;}
}
@media (max-width:620px){
  .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cl-cell{min-height:100px; gap:5px;}
  .cl-foot{flex-direction:column; text-align:center; gap:14px;}
  .cl-foot p br{display:none;}
}

/* ============================================================
   HOW WE APPROACH ? VARIANT 1 : the engine
   A disc on one side holding the count, four cards on the other
   holding the method, and a dotted orbit tying them together. The
   orbit is not decoration: an arc runs along it as far as the step
   that is lit, so the ring is a progress bar bent into a circle.

   Everything that has to line up is attached to the thing it lines
   up with. The dot and its wire belong to the card, so they are level
   with it whatever the copy does to its height; the arc belongs to
   the ring, and its dash lengths are the real arc-lengths between the
   four positions, so its head lands where it should at any width.
   Nothing here is measured in script.

   Nothing here carries its own palette. The section is on the page's
   brand hue and its two typefaces, so a change to either moves this
   with everything else rather than leaving it behind.
   ============================================================ */
/* The section is sized to be read without scrolling it, so it takes its
   own block padding rather than the page's --sec-y, and the disc is
   capped against the viewport as well as against the column ? on a short
   laptop the height is what runs out first, not the width. */
.eg-sec{background:var(--bg-alt); border-block:1px solid var(--border);
  padding-block:clamp(44px,4.6vw,62px);}

.eg{margin-top:clamp(28px,3.2vw,44px);
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  --eg-gap:clamp(30px,3.8vw,60px);
  gap:var(--eg-gap); align-items:center;}

/* ---- the disc ---- */
/* The disc's column is about 510px wide at full width, and the cap was
   holding it at 400 ? a hundred pixels of its own column left unused.
   Raising the cap grows the disc out of that spare room, so the cards
   beside it keep exactly the width they had. The vh cap still decides
   on a short screen, where height runs out before width does. */
.eg-core{position:relative; width:min(100%,480px,52vh); aspect-ratio:1;
  justify-self:center;}
.eg-ring{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.eg-track{fill:none; stroke:var(--border); stroke-width:3.2;
  stroke-linecap:round; stroke-dasharray:0 15;
  transform-origin:50% 50%; animation:egDrift 90s linear infinite;}
@keyframes egDrift{to{transform:rotate(360deg);}}
/* the arc starts where the first node is and grows to the lit one */
.eg-arc{fill:none; stroke:var(--primary); stroke-width:3.6; stroke-linecap:round;
  stroke-dasharray:565.49; stroke-dashoffset:565.49;
  transform:rotate(-55deg); transform-origin:50% 50%;
  transition:stroke-dashoffset .85s var(--ease);}
.eg[data-at="0"] .eg-arc{stroke-dashoffset:563.5;}
.eg[data-at="1"] .eg-arc{stroke-dashoffset:510.5;}
.eg[data-at="2"] .eg-arc{stroke-dashoffset:447.7;}
.eg[data-at="3"] .eg-arc{stroke-dashoffset:392.7;}

/* ---- the disc ----
   A photograph behind the number, held under the hero's own scrim so the
   frame reads the same here as it does at the top of the page. The two
   layers are the hero's, unchanged, with one difference: the radial is
   written in percentages rather than the hero's 780x440px. At the top of
   the page that box is a little over half the viewport and the vignette
   falls off inside the frame; at this size the same pixels would cover the
   whole disc and the falloff would disappear, leaving a flat wash. In
   percent it keeps the same proportion, so the light still gathers behind
   the number and drops away at the rim.

   The photo and the scrim are absolutely positioned, so neither becomes a
   grid item and the centring below is untouched. The type is lifted above
   them for the same reason the wipe needs the button label lifted: a
   positioned element paints over inline content that has no z-index. */
.eg-face{position:absolute; inset:13%; border-radius:50%; overflow:hidden;
  display:grid; place-content:center; text-align:center; padding:11%;
  background:var(--surface);
  box-shadow:0 34px 70px -34px rgba(var(--ink-rgb),.4),
             inset 0 0 0 1px hsl(0 0% 100% / .14);}
.eg-pic{position:absolute; inset:0; z-index:0;
  background:var(--pic) center / cover no-repeat;
  opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease), visibility 0s linear .45s;}
.eg[data-at="0"] .eg-pic:nth-child(1),
.eg[data-at="1"] .eg-pic:nth-child(2),
.eg[data-at="2"] .eg-pic:nth-child(3),
.eg[data-at="3"] .eg-pic:nth-child(4),
.eg:not([data-at]) .eg-pic:nth-child(1){opacity:1; visibility:visible;
  transition-delay:0s;}
.eg-face::after{content:""; position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    radial-gradient(54% 55% at 50% 48%, rgba(0,0,0,.50) 0%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 42%,
                    rgba(0,0,0,.90) 100%);}
.eg-face > *:not(.eg-pic){position:relative; z-index:2;}
/* The disc is the middle of an orbit whose arc is already a progress bar, so
   what belongs in it is position: the stage the light is on. The cards give
   the names, the disc gives the number, and the wire joins the two ? nothing
   is said twice. The four numbers are stacked in one grid cell and the lit
   one is chosen by --at, so this needs no script of its own. */
/* The two lines of small caps were the page's quietest grey, which is a
   reading for paper. On the scrim they take white at the same weight the
   hero's own quiet type does. The number and the rule keep the one blue ?
   it is a bright enough blue to hold on ink, and it is the same blue the
   headings are accented in, so nothing new is introduced. */
.eg-lab,.eg-of{display:block; font-size:11.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.72);}
.eg-num{display:grid; margin:10px 0 0; font-family:var(--font-display);
  font-weight:800; font-size:clamp(52px,6.4vw,86px); line-height:.92;
  letter-spacing:-0.06em; color:var(--brand-text);
  font-variant-numeric:tabular-nums;}
.eg-num i{grid-area:1 / 1; font-style:normal;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .38s var(--ease), transform .48s var(--pop),
             visibility 0s linear .38s;}
.eg[data-at="0"] .eg-num i:nth-child(1),
.eg[data-at="1"] .eg-num i:nth-child(2),
.eg[data-at="2"] .eg-num i:nth-child(3),
.eg[data-at="3"] .eg-num i:nth-child(4){opacity:1; visibility:visible;
  transform:none; transition-delay:0s;}
.eg-rule{display:block; width:64px; height:3px; border-radius:3px; margin:18px auto;
  background:var(--primary);}
/* ---- the four cards ---- */
.eg-list{display:grid; gap:clamp(9px,1.1vw,13px);}
.eg-card{position:relative; display:grid; grid-template-columns:auto 1fr;
  gap:clamp(16px,1.8vw,22px); align-items:start;
  padding:clamp(13px,1.5vw,17px) clamp(16px,1.9vw,22px);
  border-radius:clamp(14px,1.4vw,18px);
  background:var(--surface); border:1px solid var(--border);
  opacity:0; transform:translateX(16px);
  transition:opacity .45s var(--ease) var(--lay),
             transform .55s var(--pop) var(--lay),
             border-color .4s var(--ease), box-shadow .4s var(--ease);
  --lay:calc(var(--i) * 90ms);}
.eg-card.seen{opacity:1; transform:none;}
.eg-card.on{border-color:var(--primary); box-shadow:var(--shadow-lift);}
/* a rail rather than a fill: the card stays readable and the red stays
   a mark of attention instead of becoming the background */
/* ---- the stops, and the lines that leave them ----
   The dots are back where they belong, on the ring at the four angles the
   arc already stops at ? 45% of the disc from its centre, which is the
   track's own radius, so they sit on the line rather than near it.

   Being on a circle they are never level with the cards, which are a stack,
   so the connection is drawn rather than assumed. Both ends move: the disc
   resizes, and a card is as tall as its own copy. So the two points are
   measured and the curve is written from them, with both handles on the
   midpoint ? the line leaves the dot and arrives at the card horizontally
   however far apart they end up. pathLength normalises each path to 100, so
   one dash value draws any of the four whatever length it is. */
.eg-node{position:absolute; width:17px; height:17px; border-radius:50%; z-index:2;
  transform:translate(-50%,-50%); background:var(--surface);
  border:3px solid var(--ink-plate);
  transition:border-color .4s var(--ease), transform .4s var(--pop),
             box-shadow .4s var(--ease);}
html[data-theme="dark"] .eg-node{border-color:var(--n50);}
.eg-node:nth-of-type(1){left:75.8%; top:13.1%;}
.eg-node:nth-of-type(2){left:92.3%; top:34.6%;}
.eg-node:nth-of-type(3){left:92.3%; top:65.4%;}
.eg-node:nth-of-type(4){left:75.8%; top:86.9%;}
.eg[data-at="0"] .eg-node:nth-of-type(1),
.eg[data-at="1"] .eg-node:nth-of-type(2),
.eg[data-at="2"] .eg-node:nth-of-type(3),
.eg[data-at="3"] .eg-node:nth-of-type(4){border-color:var(--primary);
  transform:translate(-50%,-50%) scale(1.16);
  box-shadow:0 0 0 6px hsl(var(--brand-h) 100% 50% / .16);}

.eg-card::before{content:""; position:absolute; left:0; top:16%; bottom:16%;
  width:3px; border-radius:0 3px 3px 0; background:var(--primary);
  transform:scaleY(0); transform-origin:50% 50%;
  transition:transform .45s var(--pop);}
.eg-card.on::before{transform:scaleY(1);}

/* the pointer belongs to the card, so it cannot drift away from it */
.eg-card::after{content:""; position:absolute; left:-7px; top:50%;
  width:14px; height:14px; transform:translateY(-50%) rotate(45deg);
  background:var(--surface); border-left:1px solid var(--border);
  border-bottom:1px solid var(--border); transition:border-color .4s var(--ease);}
.eg-card.on::after{border-color:var(--primary);}

.eg-ico{width:clamp(38px,3.8vw,46px); aspect-ratio:1; border-radius:14px;
  display:grid; place-items:center; background:var(--ink-plate); color:#fff;
  transition:background .4s var(--ease), transform .45s var(--pop);}
html[data-theme="dark"] .eg-ico{background:var(--surface-2);}
.eg-card.on .eg-ico{background:var(--primary); transform:translateY(-2px);}
.eg-ico svg{width:46%; height:46%;}
.eg-card h3{font-family:var(--font-display);
  font-weight:800; letter-spacing:-0.032em; line-height:1.2;}
.eg-card h3 i{font-style:normal; color:var(--subtle); margin-right:9px;
  font-variant-numeric:tabular-nums; transition:color .4s var(--ease);}
.eg-card.on h3 i{color:var(--brand-text);}
.eg-card p{margin-top:6px; font-size:var(--body); line-height:1.55; color:var(--text-2);}

.eg-cta{margin-top:clamp(20px,2.2vw,28px); display:flex; justify-content:center;}

@media (max-width:1000px){
  /* One column: disc on top, one stage card under it. Cards share a
     single grid cell so the list is as tall as the tallest card and the
     page does not jump when the stage changes. */
  .eg{grid-template-columns:1fr; gap:clamp(14px,3.6vw,22px);}
  .eg-core{width:min(78%,292px); justify-self:center;}
  .eg-node{display:none;}
  .eg-num{font-size:clamp(44px,13vw,62px);}
  .eg-lab,.eg-of{font-size:10.5px; letter-spacing:.13em;}
  .eg-rule{width:52px; margin:14px auto;}

  .eg-list{position:relative; display:grid; gap:0; overflow:hidden;}
  .eg-card,.eg-card.seen{grid-area:1 / 1; order:0; --lay:0ms;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(14px);
    transition:opacity .4s var(--ease), transform .5s var(--pop),
               visibility 0s linear .4s;}
  .eg-card.on{opacity:1; visibility:visible; pointer-events:auto;
    transform:none; transition-delay:0s;}
  .eg-card::after{display:none;}
  .eg-cta{justify-content:stretch;}
  .eg-cta .btn{width:100%;}
}
@media (max-width:520px){
  .eg-card{grid-template-columns:1fr;}
  .eg-face{padding:12%;}
}
@media (prefers-reduced-motion:reduce){
  .eg-card{opacity:1; transform:none;}
  .eg-track{animation:none;}
}
@media (max-width:1000px) and (prefers-reduced-motion:reduce){
  /* One card at a time ? global reduce-motion opacity:1 would stack them. */
  .eg-card,.eg-card.seen{
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateX(14px);}
  .eg-card.on{
    opacity:1; visibility:visible; pointer-events:auto; transform:none;}
}


/* ============================================================
   AI ECOSYSTEM ? the hub
   A single claim drawn rather than argued: four places a buyer now
   asks a question, one intelligence in the middle of them, and the
   brand sitting under it as the answer all four give back.

   The composition is fixed and the arrangement is the point, so the
   stage is a three-column grid rather than four floated cards: the
   platform panels are the outer columns, the hub is the middle one,
   and the small chips that carry the wires are positioned against the
   hub itself. Nothing here is placed at an absolute page coordinate,
   which is what lets the whole thing fold to one column without any
   of it having to be re-thought.

   One departure from the reference, and it is deliberate. The
   platform marks are not redrawn. Google's, OpenAI's and Perplexity's
   logos are their trademarks, and putting hand-traced copies of them
   on a client's site ? beside the client's own claims about ranking
   inside them ? is a liability for the sake of decoration. Each
   surface is named in words and given a plain glyph instead, which is
   the same call the section further up this page already makes. If
   the licences are cleared, the glyphs are one span each to replace.
   ============================================================ */
/* The section is meant to be taken in at a glance rather than scrolled
   through, so everything that decides its height is measured against the
   viewport as well as the column: the block padding, the gaps between
   panels, the hub, and the padding inside every card. On a tall screen
   they sit at the sizes they were drawn at; on a laptop they all give a
   little at once, which keeps the proportions instead of shrinking one
   thing to make room for another. */
.ax{position:relative; overflow:hidden;
  padding-block:clamp(28px,4.6vh,var(--sec-y));
  background:
    linear-gradient(180deg, var(--bg) 0%, hsl(var(--brand-h) 60% 97%) 46%,
                    var(--bg) 100%);}
html[data-theme="dark"] .ax{
  background:linear-gradient(180deg, var(--bg) 0%, var(--n950) 46%, var(--bg) 100%);}
/* the ambient light, sat behind the hub and nothing else */
.ax-glow{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(46% 42% at 50% 42%, hsl(var(--brand-h) 100% 46% / .16) 0%,
                    transparent 70%),
    radial-gradient(30% 34% at 78% 26%, hsl(var(--brand-h) 100% 48% / .10) 0%,
                    transparent 72%),
    radial-gradient(28% 32% at 20% 68%, hsl(var(--brand-h) 100% 50% / .10) 0%,
                    transparent 74%);}
.ax .wrap{position:relative; z-index:1;}

/* ---- the head ---- */
.ax-head{max-width:74ch; margin:0 auto; text-align:center;}
.ax-badge{display:inline-flex; align-items:center; gap:9px;
  padding:9px 20px; border-radius:999px;
  background:hsl(var(--brand-h) 100% 50% / .08);
  border:1px solid hsl(var(--brand-h) 100% 50% / .22);
  font-size:11.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand-text);}
.ax-badge svg{width:13px; height:13px; flex-shrink:0;}
.ax-head h2{margin-top:clamp(12px,1.8vh,20px);
  font-size:var(--h2);
  letter-spacing:-0.045em; line-height:1.1;}
.ax-head h2 em{font-style:normal; color:var(--brand-text); display:block;}
.ax-lede{margin:clamp(10px,1.6vh,18px) auto 0; max-width:62ch;
  font-size:clamp(14px,1.15vw,16px); line-height:1.55; color:var(--text-2);}

/* ---- the stage ----
   Three columns: panels, hub, panels. The middle one is given a fixed
   band rather than a fraction, because the hub is a circle and a circle
   that changes size changes every wire attached to it. */
/* The gutters carry the chips and their wires, so they are wide rather
   than tidy: a chip parked in a ten pixel gap has nowhere to be except on
   top of the panel next to it, which is exactly what it did. */
/* The gutter, the chip that stands in it and the two dashed runs either
   side of the chip are one arithmetic problem, so they are declared as
   one set of numbers. The runs are then given exact lengths instead of a
   guess: chip to hub is the chip's own margin, and chip to panel is
   whatever the gutter has left once the chip and that margin are taken
   out of it. That is why they meet things now instead of stopping in
   mid-air. */
.ax{--ax-gap:clamp(24px,5.4vw,104px);
    --ax-node-w:clamp(34px,3.4vw,46px);
    --ax-node-gap:clamp(8px,1.2vw,18px);}
/* Two rows, and the brand card has the second one to itself.

   It used to sit inside the middle column under the hub, which made that
   column much taller than the two beside it ? and because the stage
   centres its columns, the lower panels dropped to the height of the
   brand card. Their chips point inward from the middle of their own
   panel, so both of them were landing on top of it.

   With the card on its own row the middle column is the hub and nothing
   else, the three columns are the same height again, and the lower chips
   point into the hub's own lower half where there is nothing to hit. */
.ax-stage{position:relative; margin-top:clamp(16px,3vh,44px);
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) clamp(260px,34vh,420px) minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:var(--ax-gap); row-gap:clamp(8px,1.2vh,18px);}
.ax-wires{grid-area:auto;}
.ax-col-l{grid-area:1 / 1;}
.ax-core {grid-area:1 / 2;}
.ax-col-r{grid-area:1 / 3;}
/* Only the brand card is centred in its track. Centring them all ? which
   is what a justify-items on the stage does ? takes every column off
   stretch, and the hub is sized as a share of the column it stands in:
   asked to be a share of a track that is now only as wide as its own
   contents, it collapses to the width of the word inside it. */
.ax-stage > .ax-brand{grid-area:2 / 1 / 3 / -1; justify-self:center;
  max-width:clamp(300px,30vw,400px);}
.ax-col{display:grid; gap:clamp(12px,3vh,44px); width:100%;}
/* the lower panel of each pair steps in toward the hub, which is what
   stops the two columns reading as two plain lists */
.ax-col-l{justify-items:start;}
.ax-col-l .ax-card:nth-child(2){margin-left:clamp(20px,3vw,54px);}
.ax-col-r{justify-items:end;}
.ax-col-r .ax-card:nth-child(2){margin-right:clamp(20px,3vw,54px);}

/* ---- a platform panel ---- */
.ax-card{position:relative; width:100%; max-width:370px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:clamp(14px,1.4vw,18px);
  padding:clamp(11px,1.5vh,17px) clamp(13px,1.4vw,17px);
  box-shadow:0 26px 60px -34px hsl(var(--brand-h) 60% 26% / .40),
             0 4px 14px -8px rgba(var(--ink-rgb),.16);
  transition:transform .45s var(--pop), box-shadow .45s var(--ease),
             border-color .45s var(--ease);}
.ax-card:hover{transform:translateY(-5px);
  border-color:hsl(var(--brand-h) 100% 50% / .40);
  box-shadow:0 26px 54px -26px hsl(var(--brand-h) 100% 34% / .40);}
.ax-card-top{display:flex; align-items:center; gap:11px;}
.ax-card-top b{font-family:var(--font-display); font-size:15.5px;
  font-weight:700; letter-spacing:-0.02em;}
/* the glyph plate: one shape, one hue, whichever surface it stands for */
.ax-mark{display:grid; place-items:center; flex-shrink:0;
  width:30px; height:30px; border-radius:50%;
  background:hsl(var(--brand-h) 100% 50% / .10);
  color:var(--brand-text);}
.ax-mark svg{width:16px; height:16px;}

/* ---- the seam for real platform marks ----
   The glyphs in here are ours. If you obtain the official logo files ?
   Google, OpenAI and Perplexity each publish theirs with terms attached ?
   they drop in without touching anything else. Put the file in /assets,
   then on the plate that should carry it add the class and point it at
   the file:

     <span class="ax-mark ax-logo" style="--logo:url(assets/logo-google.svg)">

   The plate then shows the file instead of the glyph. It works the same
   on the three places a mark appears: the panel headers (.ax-mark), the
   chips around the hub (.ax-node) and the row inside the brand card
   (.ax-chips i). The glyph stays in the markup underneath as the
   fallback, so a missing or blocked file leaves a plate rather than a
   hole. Note that a real mark brings its own colours with it, which is
   the one place this section stops being a single hue. */
/* A supplied mark arrives with its own plate ? the sheet these were cut
   from draws each one on its own circle ? so ours steps out of the way
   rather than sitting behind it: no fill, no rim, and the file drawn edge
   to edge. The glyph stays in the markup underneath, so a file that is
   missing or blocked leaves the plate we already had rather than a hole. */
/* The section is on the front of every one of these. The plates that
   carry a mark ? the chips round the hub, the row in the brand card, the
   metric circles ? are all declared further down and all of them set
   `background` as a shorthand, which resets background-image to none. At
   one class each they were quietly wiping the file out again a hundred
   lines after it was set. Two classes puts this above them. */
.ax .ax-logo{background-image:var(--logo); background-size:100% 100%;
  background-position:center; background-repeat:no-repeat;
  background-color:transparent; border-color:transparent;}
.ax .ax-logo svg{display:none;}
/* the metric plates carry their own colour in the file, so the brand fill
   and the brand-tinted shadow under it both come off */
.ax .ax-mico.ax-logo{box-shadow:0 12px 26px -14px rgba(var(--ink-rgb),.42);}
/* a query as it is typed into that surface */
/* A search field is a pill wherever you meet one, and it holds one line:
   a query that wrapped was the query overflowing the box it was typed
   into. Nowrap settles it ? these are four short strings and the panel is
   sized for the longest of them. */
.ax-q{display:flex; align-items:center; gap:9px; margin-top:12px;
  padding:10px 15px; border-radius:999px;
  background:var(--bg); border:1px solid var(--border);
  font-size:12.4px; color:var(--text-2); overflow:hidden;}
.ax-q .ax-type{white-space:nowrap;}
.ax-q svg{width:14px; height:14px; color:var(--muted); flex-shrink:0;
  margin-left:auto;}
/* and the answer it gives back */
/* ---- the queries type themselves ----
   Each field holds the same words twice. The copy you can see is written
   a letter at a time; the copy underneath is the whole string at zero
   opacity, and it is the one that decides how big the field is. That is
   the only reason this is safe: a field that grew as it filled would push
   the card taller mid-animation, and the ChatGPT question runs to two
   lines, so it would have done exactly that.

   Zero opacity rather than hidden, so the sentence is still in the
   accessibility tree and still read out whole. The visible copy is the
   animation and is hidden from it.

   Nothing runs until the script says so: without JavaScript the ghost is
   simply the text, at full opacity, and the field reads as it always did. */
.ax-type{position:relative; display:block; min-width:0;}
.ax-type-live{position:absolute; inset:0; font-style:normal;}
.ax-type-ghost{font-style:normal;}
/* The caret is a real character as far as line-breaking is concerned, so
   the visible copy was wrapping one word before the copy that sets the
   box did ? and the last word fell out of the field. The ghost carries
   the same width at the end of its line, so both break in the same
   place. */
.ax-type-ghost::after{content:""; display:inline-block; width:3px;}
.ax-type.on .ax-type-ghost{opacity:0;}
.ax-caret{display:inline-block; width:1px; height:1em; margin-left:1px;
  vertical-align:-2px; background:var(--brand-text);
  animation:axBlink 1s steps(1) infinite;}
@keyframes axBlink{0%,49%{opacity:1;} 50%,100%{opacity:0;}}

.ax-a{margin-top:11px; font-size:12.6px; line-height:1.62; color:var(--muted);}
.ax-a b{display:block; font-weight:700; color:var(--brand-text); font-size:13px;}
.ax-a .ax-src{display:block; margin-top:8px; font-size:11.5px; color:var(--muted);}
.ax-a .ax-src i{font-style:normal; color:var(--brand-text);}
.ax-bubble{margin-top:11px; padding:10px 12px; border-radius:12px;
  background:var(--bg-alt); border:1px solid var(--border-soft);
  font-size:12.4px; line-height:1.6; color:var(--text-2);}
.ax-bubble + .ax-bubble{background:var(--surface); border-color:var(--border);
  color:var(--muted);}
.ax-stars{display:flex; align-items:center; gap:7px; margin-top:9px;
  font-size:11.8px; color:var(--muted);}
/* The two colours in here that are not the brand are inside the mock
   panels, and they belong to the products those panels are imitating: a
   rating is gold and an opening hour is green wherever you meet them.
   The section's own chrome ? the hub, the numbers, the rule at the foot ?
   stays on the one hue.

   Both are the page's own tokens. They were written here as fresh hex
   values, a shade off the ones the rest of the site already uses, which
   is how a palette quietly turns into two palettes. */
.ax-stars i{font-style:normal; letter-spacing:1px; color:var(--ui-star);}
/* the map thumbnail is drawn, not photographed: two sets of lines and a
   pin, which is all a thumbnail this size ever shows anyway */
.ax-map{display:flex; align-items:center; gap:12px; margin-top:11px;}
.ax-map-fig{position:relative; flex-shrink:0; width:78px; height:64px;
  border-radius:10px; overflow:hidden; border:1px solid var(--border);
  background:
    repeating-linear-gradient(90deg, hsl(var(--brand-h) 20% 88%) 0 1px,
                              transparent 1px 22px),
    repeating-linear-gradient(0deg, hsl(var(--brand-h) 20% 88%) 0 1px,
                              transparent 1px 19px),
    hsl(var(--brand-h) 34% 95%);}
.ax-map-fig::after{content:""; position:absolute; left:50%; top:46%;
  width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:var(--primary);
  box-shadow:0 4px 8px -3px rgba(var(--ink-rgb),.5);}
.ax-map-b{min-width:0; font-size:11.8px; line-height:1.55; color:var(--muted);}
.ax-map-b b{display:block; font-size:13px; color:var(--text);}
.ax-open{color:var(--ui-open); font-weight:600;}
.ax-go{display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  font-size:11.8px; font-weight:600; color:var(--brand-text);}
.ax-go svg{width:13px; height:13px;}

/* ---- the hub ----
   Rings, a core and the label. Everything that moves here moves on
   transform or opacity, so none of it costs a layout, and all of it is
   slow enough to be missed ? the point is that the middle of the
   picture is alive, not that anything is happening. */
.ax-core{position:relative; display:grid; justify-items:center;}
.ax-hub{position:relative; width:min(100%,420px); aspect-ratio:1;
  display:grid; place-items:center;}
.ax-ring{position:absolute; border-radius:50%; pointer-events:none;}
/* The rings are the light around the ball, not another blue object beside
   it ? so they are pale, but they are pale versions of #0096D5 rather
   than of a cyan that happens to sit near it. The third is not a ring at
   all but a soft shell that breathes with the core. */
.ax-r1{inset:0; border:1px solid hsl(var(--brand-h) 100% 62% / .38);
  box-shadow:0 0 30px 6px hsl(var(--brand-h) 100% 52% / .12);
  animation:axSpin 44s linear infinite;}
.ax-r2{inset:7%; border:1px solid hsl(var(--brand-h) 100% 66% / .46);
  animation:axSpin 32s linear infinite reverse;}
.ax-r3{inset:13%;
  background:radial-gradient(circle, transparent 52%,
             hsl(var(--brand-h) 100% 58% / .22) 70%,
             hsl(var(--brand-h) 100% 50% / .10) 82%, transparent 92%);
  animation:axBreathe 7s ease-in-out infinite;}
/* the two marks on the outer ring: they are what makes a slow rotation
   readable at all, since a plain circle turning looks like nothing */
.ax-r1::before,.ax-r1::after{content:""; position:absolute; width:7px;
  height:7px; border-radius:50%; background:hsl(var(--brand-h) 100% 62%);
  box-shadow:0 0 12px 3px hsl(var(--brand-h) 100% 58% / .75);}
.ax-r1::before{top:-4px; left:50%; margin-left:-3.5px;}
.ax-r1::after{bottom:-4px; left:50%; margin-left:-3.5px;}
.ax-r2::before{content:""; position:absolute; top:50%; right:-4px;
  width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:hsl(var(--brand-h) 100% 70%);
  box-shadow:0 0 10px 2px hsl(var(--brand-h) 100% 62% / .6);}
/* ---- the core ----
   Layered from the front backwards, which is the order they are written
   in: four still sparks, then the light, then the body of the sphere.

   The light is the whole thing. One bright source sits high and left and
   falls away by halfway across, a second cooler one answers it low and
   right, and under both the sphere runs from a lit blue at the middle to
   nearly black at the rim. That last stop is what makes it a ball rather
   than a disc ? an edge that stays as bright as the middle reads flat
   however much glow is thrown around it.

   The rim itself is a hairline of near-white blue, drawn inside, with a
   wide bloom inside it and a second bloom thrown outward. Nothing in here
   is a second hue; it is the one blue taken from 88% lightness at the
   spark down to 7% at the edge. */
.ax-disc{position:relative; width:62%; aspect-ratio:1; border-radius:50%;
  display:grid; place-content:center; text-align:center; color:#fff;
  background:
    radial-gradient(circle at 28% 22%, hsl(var(--brand-h) 100% 92% / .9) 0 1.6px,
                    transparent 2.4px),
    radial-gradient(circle at 71% 33%, hsl(var(--brand-h) 100% 88% / .75) 0 1.2px,
                    transparent 2px),
    radial-gradient(circle at 38% 74%, hsl(var(--brand-h) 100% 88% / .65) 0 1.2px,
                    transparent 2px),
    radial-gradient(circle at 78% 66%, hsl(var(--brand-h) 100% 92% / .8) 0 1.5px,
                    transparent 2.3px),
    radial-gradient(circle at 32% 26%, hsl(var(--brand-h) 100% 62%) 0%,
                    hsl(var(--brand-h) 100% 50% / .6) 32%, transparent 56%),
    radial-gradient(circle at 70% 74%, hsl(var(--brand-h) 100% 30% / .8) 0%,
                    transparent 54%),
    radial-gradient(circle, var(--primary) 0%,
                    hsl(var(--brand-h) 100% 32%) 48%,
                    hsl(var(--brand-h) 100% 18%) 80%,
                    hsl(var(--brand-h) 100% 12%) 100%);
  box-shadow:
    inset 0 0 0 1.5px hsl(var(--brand-h) 100% 66% / .80),
    inset 0 0 46px -4px hsl(var(--brand-h) 100% 56% / .40),
    0 0 0 6px hsl(var(--brand-h) 100% 46% / .12),
    0 0 78px -6px hsl(var(--brand-h) 100% 42% / .55);
  animation:axBreathe 7s ease-in-out infinite;}
/* the meridians: eight hairlines across the core, so it reads as a
   sphere rather than a filled circle */
/* Spokes out of the centre and rings around it ? a globe's wireframe, at
   the strength of a watermark. Masked away at the middle so it never
   crosses the label, and away at the rim so it does not end in a hard
   ring of stubs. */
.ax-disc::before{content:""; position:absolute; inset:6%; border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, hsl(0 0% 100% / .20) 0 .3deg,
                             transparent .3deg 30deg),
    repeating-radial-gradient(circle, transparent 0 13px,
                              hsl(0 0% 100% / .09) 13px 14px);
  -webkit-mask-image:radial-gradient(circle, transparent 22%, #000 40%,
                     #000 68%, transparent 86%);
          mask-image:radial-gradient(circle, transparent 22%, #000 40%,
                     #000 68%, transparent 86%);}
.ax-disc b{position:relative; font-family:var(--font-display); font-weight:800;
  font-size:clamp(38px,5.4vw,68px); line-height:1; letter-spacing:-0.04em;
  text-shadow:0 2px 18px hsl(var(--brand-h) 100% 40% / .8);}
.ax-disc em{position:relative; display:block; margin-top:6px; font-style:normal;
  font-size:clamp(9px,1vw,12px); font-weight:600; letter-spacing:.28em;
  color:rgba(255,255,255,.82);}
/* three dots on their own slow orbit */
/* Ten lights on two orbits turning against each other. They are set on
   the circle by angle rather than dropped at loose coordinates, so the
   spacing stays even at any size, and the two rings run at different
   speeds in opposite directions ? which is the only reason a slow
   rotation is legible at all. */
.ax-orb{position:absolute; inset:1%; animation:axSpin 30s linear infinite;}
.ax-orb-b{inset:15%; animation:axSpin 44s linear infinite reverse;}
.ax-orb i{position:absolute; width:6px; height:6px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:hsl(var(--brand-h) 100% 66%);
  box-shadow:0 0 10px 3px hsl(var(--brand-h) 100% 48% / .70);}
.ax-orb-b i{width:4.5px; height:4.5px;
  background:hsl(var(--brand-h) 100% 74%);
  box-shadow:0 0 8px 2px hsl(var(--brand-h) 100% 54% / .55);}
.ax-orb i:nth-child(1){left:100%; top:50%;}
.ax-orb i:nth-child(2){left:75%;  top:93.3%;}
.ax-orb i:nth-child(3){left:25%;  top:93.3%;}
.ax-orb i:nth-child(4){left:0;    top:50%;}
.ax-orb i:nth-child(5){left:25%;  top:6.7%;}
.ax-orb i:nth-child(6){left:75%;  top:6.7%;}
.ax-orb-b i:nth-child(1){left:85.4%; top:14.6%;}
.ax-orb-b i:nth-child(2){left:85.4%; top:85.4%;}
.ax-orb-b i:nth-child(3){left:14.6%; top:85.4%;}
.ax-orb-b i:nth-child(4){left:14.6%; top:14.6%;}
@keyframes axSpin{to{transform:rotate(360deg);}}
@keyframes axBreathe{
  0%,100%{transform:scale(1); filter:brightness(1);}
  50%{transform:scale(1.022); filter:brightness(1.1);}
}

/* ---- the wires ----
   A chip on each diagonal with a dotted run out of it toward the panel
   it belongs to. The run is a gradient rather than a border, so its
   dashes stay the same size whatever the chip does, and its length is
   clamped: it has to cross the column gap at any width without ever
   reaching under a card. */
/* ---- the wires ----
   Each chip belongs to its panel and lives inside it, hung off the inner
   edge and centred on the panel's own height. That is the whole fix: it
   used to hang off the HUB at a percentage of the hub's height, which
   meant the line left at one height and the panel it was for sat at
   another, and the two never met. Now the chip cannot be anywhere but
   level with its own card, whatever the copy does to the card's height.

   The chip sits in the middle of the gutter, so its two dashed runs are
   the same length ? half the gutter less half the chip ? one back to the
   panel's edge and one on toward the hub's column. Both are exact rather
   than guessed, which is why they touch what they are pointing at. */
.ax-node{position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  display:grid; place-items:center;
  width:var(--ax-node-w); aspect-ratio:1; border-radius:50%;
  background:var(--surface); border:1px solid var(--border);
  color:var(--brand-text);
  box-shadow:0 10px 24px -14px rgba(var(--ink-rgb),.45);}
.ax-node svg{width:47%; height:47%;}
/* The short run back to the panel is level with the panel, so it can stay
   a box: one dash of CSS from the chip to the edge it belongs to. */
.ax-node::before{content:""; position:absolute; top:50%;
  height:1px; width:calc((var(--ax-gap) - var(--ax-node-w)) / 2);
  background:repeating-linear-gradient(90deg,
    hsl(var(--brand-h) 100% 50% / .55) 0 3px, transparent 3px 8px);}
.ax-node.l{left:100%;  margin-left:calc((var(--ax-gap) - var(--ax-node-w)) / 2);}
.ax-node.r{right:100%; margin-right:calc((var(--ax-gap) - var(--ax-node-w)) / 2);}
.ax-node.l::before{right:100%;}
.ax-node.r::before{left:100%;}

/* ---- the run to the centre ----
   The other half cannot be a box. A chip sits level with its own panel
   and the hub sits in the middle of the stage, so the line between them
   is on a slant, and every chip's slant is different ? and it changes
   again the moment a card's copy makes that card taller. A rotated
   rectangle would need the angle worked out, which means measuring, and
   once you are measuring you may as well draw the line properly.

   So these four are real lines in an overlay, with both ends worked out
   from the boxes themselves: they start at the chip's rim and stop on
   the hub's outer ring, whatever the layout has done to either. */
.ax-wires{position:absolute; inset:0; z-index:0; pointer-events:none;
  overflow:visible;}
.ax-wire{stroke:hsl(var(--brand-h) 100% 50% / .55); stroke-width:1;
  stroke-dasharray:3 5; stroke-linecap:round;}

/* ---- the brand card ----
   It sits under the hub and is tied to it by one short line, because
   the whole argument of the section is that this is what the middle
   hands back. */
/* In the reference the five marks are a band of their own across the
   foot of the card, not a tail on the end of the sentence ? so the card
   is two rows: who, then where. */
.ax-brand{position:relative; margin-top:clamp(2px,.6vh,10px);
  width:100%; max-width:100%;
  display:grid; gap:clamp(12px,1.4vw,16px);
  padding:clamp(14px,1.5vw,18px);
  background:var(--surface); border:1px solid var(--border);
  border-radius:clamp(14px,1.4vw,18px);
  box-shadow:0 30px 66px -34px hsl(var(--brand-h) 60% 26% / .42),
             0 4px 14px -8px rgba(var(--ink-rgb),.16);
  transition:transform .45s var(--pop), box-shadow .45s var(--ease);}
.ax-brand:hover{transform:translateY(-5px);
  box-shadow:0 30px 58px -26px hsl(var(--brand-h) 100% 34% / .40);}
.ax-brand::before{content:""; position:absolute; left:50%; bottom:100%;
  width:2px; height:clamp(18px,3.4vw,48px); margin-left:-1px;
  background:linear-gradient(180deg, transparent,
             hsl(var(--brand-h) 100% 56% / .8));}
/* The reference puts an initial in here. The brand has an actual mark, so
   the mark goes in ? the white cut of it, laid over the brand plate it
   was drawn to sit on. */
.ax-avatar{display:grid; place-items:center; flex-shrink:0;
  width:clamp(42px,4.4vw,54px); aspect-ratio:1; border-radius:50%;
  background:var(--mark-white) center / 52% no-repeat,
             linear-gradient(160deg, hsl(var(--brand-h) 100% 54%),
             hsl(var(--brand-h) 100% 38%));
  box-shadow:0 10px 22px -10px hsl(var(--brand-h) 100% 40% / .7);
  font-size:0;}
.ax-brand-top{display:flex; align-items:center; gap:14px;}
.ax-brand-b{min-width:0;}
.ax-brand-b b{display:flex; align-items:center; gap:7px;
  font-family:var(--font-display); font-size:clamp(15px,1.7vw,19px);
  font-weight:800; letter-spacing:-0.03em;}
.ax-brand-b b svg{width:15px; height:15px; color:var(--primary); flex-shrink:0;}
.ax-brand-b span{display:block; margin-top:2px; font-size:12.4px;
  font-weight:600; color:var(--brand-text);}
/* The chip row is a span too, and the rule above it ? one class and one
   type ? was outranking a plain .ax-chips and laying the five glyphs out
   as blocks, one under the other. The panel carries this one. */
.ax-brand .ax-chips{display:flex; flex-wrap:wrap;
  gap:clamp(7px,1vw,12px);}
.ax-chips i{display:grid; place-items:center;
  width:clamp(36px,3.6vw,46px); aspect-ratio:1;
  border-radius:50%; background:var(--surface); border:1px solid var(--border);
  color:var(--brand-text);
  box-shadow:0 6px 16px -10px rgba(var(--ink-rgb),.4);}
.ax-chips i svg{width:44%; height:44%;}

/* ---- the numbers ---- */
.ax-metrics{margin-top:clamp(16px,3vh,44px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--surface); border:1px solid var(--border);
  border-radius:clamp(18px,2vw,24px);
  box-shadow:0 22px 50px -30px rgba(var(--ink-rgb),.30);
  overflow:hidden;}
.ax-metric{display:flex; align-items:center; gap:clamp(10px,1.2vw,16px);
  padding:clamp(12px,2.2vh,24px) clamp(12px,1.6vw,22px);
  border-left:1px solid var(--border);}
.ax-metric:first-child{border-left:0;}
.ax-mico{display:grid; place-items:center; flex-shrink:0;
  width:clamp(38px,4vh,52px); aspect-ratio:1; border-radius:50%;
  color:#fff; background:var(--primary);
  box-shadow:0 12px 26px -12px hsl(var(--brand-h) 100% 42% / .8);}
.ax-mico svg{width:46%; height:46%;}
.ax-metric b{display:block; font-family:var(--font-display);
  font-size:clamp(20px,2.4vw,28px); font-weight:800; letter-spacing:-0.04em;
  /* The plates are photographs and carry the colours they were drawn in.
     The figures are type, and type on this site is one blue. */
  line-height:1; color:var(--brand-text);
  font-variant-numeric:tabular-nums;}
.ax-metric span{display:block; margin-top:7px; font-size:12.4px;
  line-height:1.5; color:var(--muted);}

/* ---- the close ---- */
.ax-close{margin-top:clamp(14px,2.6vh,36px); text-align:center;}
.ax-close-a{font-family:var(--font-display);
  font-size:clamp(18px,2.2vw,26px); font-weight:800; letter-spacing:-0.035em;
  line-height:1.25;}
.ax-close-a em{font-style:normal; color:var(--brand-text);}
.ax-close-b{margin-top:10px; font-size:15px; color:var(--text-2);}
.ax-rule{display:block; width:96px; height:3px;
  margin:clamp(11px,1.8vh,20px) auto 0;
  border-radius:3px;
  background:linear-gradient(90deg, transparent,
             var(--primary) 30%, hsl(var(--brand-h) 100% 62%) 70%, transparent);}

@media (max-width:1080px){
  /* The stage is a picture of a thing in the middle with four things
     around it, and there is no width below this where that survives as
     three columns. It folds instead: hub first, because it is what the
     rest is about, then the four surfaces as an ordinary list. The
     chips and their wires stand down ? a wire that crosses nothing is
     just a dash ? and the brand card keeps its short tie to the hub,
     which is the one connection the section cannot do without. */
  .ax-stage{grid-template-columns:1fr; grid-template-rows:none;
    row-gap:clamp(24px,4vw,36px);}
  /* grid areas are a two-column arrangement and there is one column here,
     so the running order is said outright: the hub, the four surfaces,
     then the brand card that answers for all of them */
  .ax-col-l,.ax-core,.ax-col-r,.ax-stage > .ax-brand{grid-area:auto;}
  .ax-core{order:1;}
  .ax-col-l{order:2;}
  .ax-col-r{order:3;}
  .ax-stage > .ax-brand{order:4; max-width:none;}
  .ax-hub{width:min(100%,320px);}
  .ax-node,.ax-wires{display:none;}
  .ax-col{gap:clamp(14px,2.6vw,20px);}
  .ax-col-l,.ax-col-r{justify-items:stretch;}
  .ax-col-l .ax-card:nth-child(2),
  .ax-col-r .ax-card:nth-child(2){margin:0;}
  .ax-card,.ax-brand{max-width:none;}
  .ax-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ax-metric:nth-child(odd){border-left:0;}
  .ax-metric:nth-child(n+3){border-top:1px solid var(--border);}
}
@media (max-width:520px){
  .ax-head h2 em{display:inline;}
  .ax-metric{flex-direction:column; align-items:flex-start; gap:11px;}
  .ax-map-fig{width:64px; height:56px;}
}
@media (prefers-reduced-motion:reduce){
  .ax-r1,.ax-r2,.ax-r3,.ax-orb,.ax-disc{animation:none;}
  .ax-card,.ax-brand{transition:none;}
  .ax-caret{display:none;}
}

/* ============================================================
   THE SHIFT ? four surfaces, read left to right
   The reference for this one is a dark, purple-lit board. The layout is
   copied from it exactly ? centred head, four captioned panels in a row
   with an arrow in each gap, a wide figures band, then a closing claim ?
   but the palette is not, because the page has one hue and its sections
   are light. So the panels are the page's own surfaces, the glow is the
   page's own beam, and the one gradient in here runs between two stops
   of the brand hue rather than between two different colours.

   The four panels are illustrations, not screenshots, and the platform
   marks are deliberately not drawn: each surface is named in words and
   given a plain glyph. Redrawing another company's logo to sit on a
   client site is not a thing worth doing for a decorative panel.
   ============================================================ */
.sh{background:var(--bg-alt); border-block:1px solid var(--border);}
.sh .wrap{position:relative; z-index:3;}
.sh-spark{width:13px; height:13px; margin-left:2px; color:var(--primary);}
.sh .sec-lede{max-width:64ch;}
.sh .sec-lede b{font-weight:600; color:var(--brand-text);}

/* ---- the row ----
   Seven columns: panel, gap, panel, gap, panel, gap, panel. The captions
   are in the first row and the panels in the second, so an arrow set on
   the second row centres on the panels rather than on the whole column ?
   which is the difference between it lining up and nearly lining up. */
.sh-row{display:grid; grid-template-rows:auto 1fr;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto
                        minmax(0,1fr) auto minmax(0,1fr);
  column-gap:clamp(8px,1vw,16px); row-gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(34px,4vw,56px);}

/* placement lives here, not in the markup: the index on each caption and
   panel is the only thing the HTML says about position, and every layout
   reads it. */
.sh-cap{grid-row:1;}
.sh-ui{grid-row:2;}
.sh-go{grid-row:2;}
[data-s="1"]{grid-column:1; --lay:0ms;}   [data-s="2"]{grid-column:3; --lay:150ms;}
[data-s="3"]{grid-column:5; --lay:300ms;} [data-s="4"]{grid-column:7; --lay:450ms;}
.sh-go:nth-of-type(1){grid-column:2; --lay:95ms;}
.sh-go:nth-of-type(2){grid-column:4; --lay:245ms;}
.sh-go:nth-of-type(3){grid-column:6; --lay:395ms;}

/* ---- the row arrives in order ----
   The section's argument is a progression ? a page of links, then a map,
   then an answer, then a conversation ? and it used to appear all at once,
   which says four things happened rather than one thing changing. Each
   caption, panel and arrow now waits its turn, and the arrows land between
   the two panels they join, so the row assembles left to right in the order
   it is meant to be read. The index on each element is what carries the
   delay; nothing counts anything. */
.sh-cap,.sh-ui{opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--ease) var(--lay),
             transform .6s var(--ease) var(--lay);}
.rv.in .sh-cap,.rv.in .sh-ui{opacity:1; transform:none;}
.sh-go i{opacity:0; transform:scale(.5);
  transition:opacity .4s var(--ease) var(--lay), transform .5s var(--pop) var(--lay);}
.rv.in .sh-go i{opacity:1; transform:none;}
.sh-go::before{transform:scaleX(0); transform-origin:0 50%;
  transition:transform .5s var(--ease) var(--lay);}
.rv.in .sh-go::before{transform:scaleX(1);}

.sh-cap{display:grid; grid-template-columns:auto auto 1fr;
  align-items:center; column-gap:10px;}
.sh-cap i{font-style:normal; font-family:var(--font-display); font-size:11px;
  font-weight:800; letter-spacing:.12em; color:var(--subtle);
  font-variant-numeric:tabular-nums;}
.sh-ico{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-text); flex-shrink:0;}
.sh-ico svg{width:15px; height:15px;}
.sh-cap b{font-family:var(--font-display); font-size:clamp(12.5px,1.15vw,14.5px);
  font-weight:700; letter-spacing:-0.02em; color:var(--text); line-height:1.2;}
.sh-cap em{grid-column:2 / -1; font-style:normal; font-size:11px; color:var(--muted);
  margin-top:2px;}

/* ---- the arrows in the gaps ---- */
.sh-go{align-self:center; position:relative;
  display:grid; place-items:center; width:clamp(26px,3vw,40px); height:32px;}
.sh-go::before{content:""; position:absolute; left:-10px; right:-10px; top:50%;
  height:1px; background:repeating-linear-gradient(to right,
    var(--border) 0 4px, transparent 4px 9px);}
.sh-go i{position:relative; width:28px; height:28px; border-radius:50%;
  background:var(--primary); color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 18px -9px hsl(var(--brand-h) 100% 34% / .85);}
.sh-go svg{width:13px; height:13px;}

/* ---- the panels ---- */
.sh-ui{position:relative; display:flex; flex-direction:column;
  min-height:clamp(268px,25vw,326px); overflow:hidden;
  padding:clamp(12px,1.3vw,16px);
  border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow);}
/* the mesh below is a positioned pseudo-element, which would otherwise paint
   over everything in the panel */
.sh-ui > *{position:relative; z-index:1;}

/* ---- the panels get more machine as they go ----
   The section's whole argument is that search moved from a page of links to
   an answer that is generated, so the panels are treated in that order: one
   is paper, two is paper with a map on it, three lifts off the page, and
   four is glass with the light behind it. Read left to right, the surface
   itself is the story ? nothing here says "AI" in words. */
.sh-ui[data-s="3"],.sh-ui[data-s="4"]{
  border-color:hsl(var(--brand-h) 62% 76%);
  background:
    radial-gradient(120% 72% at 50% -12%, hsl(var(--brand-h) 100% 50% / .11), transparent 68%),
    var(--surface);
  box-shadow:var(--shadow), 0 0 0 4px hsl(var(--brand-h) 100% 50% / .05);}
.sh-ui[data-s="4"]{
  background:
    radial-gradient(130% 82% at 50% -16%, hsl(var(--brand-h) 100% 50% / .17), transparent 70%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  box-shadow:var(--shadow-lift), 0 0 0 5px hsl(var(--brand-h) 100% 50% / .07);}
/* a mesh, masked away before it can become a pattern anyone notices */
.sh-ui[data-s="3"]::before,.sh-ui[data-s="4"]::before{content:""; position:absolute;
  inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, hsl(var(--brand-h) 100% 40% / .18) 1px, transparent 1px);
  background-size:15px 15px; opacity:.55;
  -webkit-mask-image:radial-gradient(120% 78% at 50% 0%, #000, transparent 72%);
          mask-image:radial-gradient(120% 78% at 50% 0%, #000, transparent 72%);}

/* 01 ? the results page */
.sh-bar{display:flex; align-items:center; gap:8px; padding:8px 11px;
  border-radius:30px; border:1px solid var(--border); background:var(--bg);
  font-size:10.5px; color:var(--text-2);}
.sh-bar svg{width:12px; height:12px; color:var(--muted); flex-shrink:0;}
/* the one thing on the plain panel that is alive: a cursor, because a search
   box is a thing being typed into */
.sh-caret{width:1.5px; height:11px; margin-left:1px; background:var(--text);
  animation:shCaret 1.1s steps(1) infinite;}
@keyframes shCaret{50%{opacity:0;}}
.sh-tabs{display:flex; gap:11px; margin-top:11px; padding-bottom:8px;
  border-bottom:1px solid var(--border); font-size:9.5px; color:var(--muted);}
.sh-tabs b{color:var(--brand-text); font-weight:700; position:relative;}
.sh-tabs i{font-style:normal;}
.sh-url{margin-top:13px; font-size:10px; color:var(--muted);}
.sh-link{margin-top:3px; font-size:13px; font-weight:600; color:var(--brand-text);
  line-height:1.25;}
.sh-snip{margin-top:5px; font-size:10.5px; line-height:1.5; color:var(--text-2);}
.sh-lines{display:grid; gap:7px; margin-top:auto; padding-top:14px;}
.sh-lines i{position:relative; overflow:hidden; height:6px; border-radius:3px;
  background:var(--border-soft);}
/* on the two generated panels the placeholder lines are still being written */
.sh-ui[data-s="3"] .sh-lines i::after,
.sh-ui[data-s="4"] .sh-lines i::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent,
    hsl(var(--brand-h) 100% 58% / .55), transparent);
  transform:translateX(-100%); animation:shScan 2.8s var(--ease) infinite;}
.sh-ui[data-s="3"] .sh-lines i:nth-child(2)::after,
.sh-ui[data-s="4"] .sh-lines i:nth-child(2)::after{animation-delay:.35s;}
@keyframes shScan{to{transform:translateX(100%);}}

/* ---- what the answer was built from ----
   The cited row is the section's point made small: being in the answer is
   being in this list. Ours is the one wearing brand. */
.sh-cite{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.sh-cite span{display:inline-flex; align-items:center; gap:5px; padding:4px 9px;
  border-radius:20px; border:1px solid var(--border); background:var(--surface);
  font-size:9px; font-weight:600; letter-spacing:.01em; color:var(--muted);}
.sh-cite span::before{content:""; width:4px; height:4px; border-radius:50%;
  background:currentColor; opacity:.55;}
.sh-cite span.us{border-color:var(--primary); color:var(--brand-text);
  background:var(--brand-soft);}

.sh-type{display:inline-flex; gap:5px; margin-top:auto; padding-top:14px;}
.sh-type i{width:5px; height:5px; border-radius:50%; background:var(--primary);
  animation:shDot 1.25s ease-in-out infinite;}
.sh-type i:nth-child(2){animation-delay:.15s;}
.sh-type i:nth-child(3){animation-delay:.3s;}
@keyframes shDot{0%,100%{opacity:.25; transform:translateY(0);}
                 50%{opacity:1; transform:translateY(-3px);}}

/* ---- and what the page of links still shows ---- */
.sh-paa{display:block; margin-top:14px; padding-top:12px;
  border-top:1px solid var(--border);}
.sh-paa b{display:block; font-family:var(--font-display); font-size:10.5px;
  font-weight:700; letter-spacing:-0.01em; color:var(--text);}
.sh-paa em{display:block; height:9px; margin-top:8px; border-radius:3px;
  background:var(--border-soft);}
.sh-paa em:last-child{width:74%;}
.sh-lines i:nth-child(2){width:88%;}
.sh-lines i:nth-child(3){width:72%;}
.sh-lines i:nth-child(4){width:80%;}

/* 02 ? the map */
.sh-map{padding:0;}
/* The map is the only panel whose picture has no content of its own ? the
   plot is an empty box taking whatever height is left over. On the wide
   layout the panel's min-height leaves it plenty; at 680px that min-height
   is dropped so panels can shrink to their copy, and the plot collapsed to
   a stripe with the four pins piled on it. So it carries its own floor:
   the map is a map at every width, and flex:1 still gives it the rest of
   the panel wherever there is more. */
.sh-plot{position:relative; flex:1; min-height:clamp(150px,34vw,210px);
  background:
    repeating-linear-gradient(90deg, transparent 0 26px, var(--border) 26px 27px),
    repeating-linear-gradient(0deg,  transparent 0 24px, var(--border) 24px 25px),
    linear-gradient(150deg, var(--surface-2), var(--bg));}
.sh-pin{position:absolute; width:11px; height:11px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg); background:var(--n400);
  box-shadow:0 3px 6px -2px rgba(var(--ink-rgb),.45);}
.sh-pin.a{left:18%; top:16%;}
.sh-pin.b{left:66%; top:26%;}
.sh-pin.c{left:58%; top:62%;}
/* the one that is the point of the panel */
.sh-pin.me{left:36%; top:44%; width:15px; height:15px; background:var(--primary);
  box-shadow:0 0 0 5px hsl(var(--brand-h) 100% 50% / .18),
             0 4px 8px -2px rgba(var(--ink-rgb),.5);}
/* a ring off the one pin that is the point of the panel ? the same thing a
   live location does on a real map */
.sh-pin.me::after{content:""; position:absolute; inset:-4px; border-radius:inherit;
  border:1.5px solid var(--primary); animation:shPing 2.6s var(--ease) infinite;}
@keyframes shPing{
  0%  {transform:scale(.6); opacity:.9;}
  70% {transform:scale(2.6); opacity:0;}
  100%{transform:scale(2.6); opacity:0;}
}
.sh-biz{display:flex; align-items:center; gap:10px; margin:clamp(9px,1vw,12px);
  padding:10px; border-radius:12px; background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow);}
.sh-biz-say{flex:1; min-width:0;}
.sh-biz b{display:block; font-family:var(--font-display); font-size:11.5px;
  font-weight:700; letter-spacing:-0.02em; color:var(--text);}
.sh-rate{display:block; margin-top:3px; font-size:9.5px; color:var(--muted);}
.sh-rate em{font-style:normal; color:var(--ui-star); letter-spacing:.5px;}
.sh-meta{display:block; margin-top:2px; font-size:9.5px; color:var(--muted);}
.sh-meta em{font-style:normal; color:var(--ui-open); font-weight:600;}
.sh-thumb{width:42px; height:42px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(145deg, var(--surface-2), var(--n300));}

/* 03 ? the overview */
.sh-tag{display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  padding:6px 12px; border-radius:30px; background:var(--brand-soft);
  color:var(--brand-on-soft); font-family:var(--font-display);
  font-size:10.5px; font-weight:700; letter-spacing:.04em;}
.sh-tag svg{width:12px; height:12px; color:var(--primary);}
.sh-ans{margin-top:12px; font-size:11px; line-height:1.62; color:var(--text-2);}

/* 04 ? the conversation */
.sh-chat{gap:9px;}
.sh-q,.sh-a{display:block; padding:11px 13px; border-radius:14px;
  font-size:10.5px; line-height:1.55;}
.sh-q{align-self:flex-end; max-width:92%; background:var(--brand-soft);
  color:var(--brand-on-soft); border-bottom-right-radius:5px;}
.sh-a{background:var(--bg); border:1px solid var(--border); color:var(--text-2);
  border-bottom-left-radius:5px;}

/* ---- the figures band ---- */
.sh-band{display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(18px,2.4vw,36px); align-items:center;
  margin-top:clamp(26px,3vw,40px); padding:clamp(18px,2.2vw,28px);
  border-radius:var(--r-lg); background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow);}
.sh-badge{width:clamp(34px,3.4vw,46px); aspect-ratio:88 / 128;
  background:var(--primary);
  -webkit-mask:var(--mark) center / contain no-repeat;
          mask:var(--mark) center / contain no-repeat;}
.sh-band p{font-size:14.6px; line-height:1.62; color:var(--text-2); max-width:62ch;}
.sh-band p b{font-weight:600; color:var(--brand-text);}
.sh-stats{display:flex; gap:clamp(10px,1.2vw,16px); list-style:none; padding:0; margin:0;}
.sh-stats li{padding:14px 20px; border-radius:14px; background:var(--bg);
  border:1px solid var(--border); white-space:nowrap;}
.sh-stats b{display:block; font-family:var(--font-display);
  font-size:clamp(21px,2.2vw,28px); font-weight:800; letter-spacing:-0.045em;
  /* The plates are photographs and carry the colours they were drawn in.
     The figures are type, and type on this site is one blue. */
  line-height:1; color:var(--brand-text);
  font-variant-numeric:tabular-nums;}
.sh-stats span{display:block; margin-top:5px; font-size:11px; font-weight:600;
  letter-spacing:.08em; color:var(--muted);}

/* ---- the claim ---- */
.sh-close{margin-top:clamp(26px,3vw,40px); max-width:78ch;}
.sh-close h3{font-family:var(--font-display);
  font-weight:800; letter-spacing:-0.035em; color:var(--text);}
.sh-close h3 em{font-style:normal; color:var(--brand-text);}
.sh-close p{margin-top:12px; font-size:15.5px; line-height:1.68; color:var(--text-2);}

/* ---- reflow ----
   Two up, then one. The arrows go with the single row they belonged to;
   the numbers in the captions were carrying the order anyway, which is
   why they are there. */
@media (max-width:1100px){
  .sh-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(14px,2vw,22px); row-gap:clamp(12px,1.6vw,18px);}
  .sh-go{display:none;}
  .sh-ui{min-height:clamp(280px,34vw,326px);}
  .sh-cap[data-s="1"]{grid-area:1 / 1;}  .sh-ui[data-s="1"]{grid-area:2 / 1;}
  .sh-cap[data-s="2"]{grid-area:1 / 2;}  .sh-ui[data-s="2"]{grid-area:2 / 2;}
  .sh-cap[data-s="3"]{grid-area:3 / 1;}  .sh-ui[data-s="3"]{grid-area:4 / 1;}
  .sh-cap[data-s="4"]{grid-area:3 / 2;}  .sh-ui[data-s="4"]{grid-area:4 / 2;}
  .sh-band{grid-template-columns:auto minmax(0,1fr);}
  .sh-stats{grid-column:1 / -1;}
}
@media (prefers-reduced-motion:reduce){
  .sh-lines i::after,.sh-type i,.sh-caret,.sh-pin.me::after{animation:none;}
  .sh-type i{opacity:.55;}
  .sh-pin.me::after{display:none;}
  .sh-cap,.sh-ui{opacity:1; transform:none;}
  .sh-go i{opacity:1; transform:none;}
  .sh-go::before{transform:scaleX(1);}
}
@media (max-width:680px){
  .sh-row{grid-template-columns:minmax(0,1fr);}
  .sh-ui{min-height:0;}
  .sh-cap[data-s="1"]{grid-area:1 / 1;}  .sh-ui[data-s="1"]{grid-area:2 / 1;}
  .sh-cap[data-s="2"]{grid-area:3 / 1;}  .sh-ui[data-s="2"]{grid-area:4 / 1;}
  .sh-cap[data-s="3"]{grid-area:5 / 1;}  .sh-ui[data-s="3"]{grid-area:6 / 1;}
  .sh-cap[data-s="4"]{grid-area:7 / 1;}  .sh-ui[data-s="4"]{grid-area:8 / 1;}
  .sh-band{grid-template-columns:1fr;}
  .sh-stats{flex-wrap:wrap;}
  .sh-stats li{flex:1 1 140px;}
}

/* ---- video reviews ---- */
.vids{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px;}
.vid{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--border);
  background:var(--surface); text-align:left; padding:0; color:inherit; font:inherit;
  transition:border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);}
.vid:hover{border-color:var(--brand-text); transform:translateY(-5px); box-shadow:var(--shadow-lift);}
.vid-shot{position:relative; aspect-ratio:16/10; display:grid; place-items:center;
  background:linear-gradient(155deg, var(--n850), var(--n925));}
.vid-play{width:52px; height:52px; border-radius:50%; background:var(--primary); color:#fff;
  display:grid; place-items:center; transition:transform .25s var(--pop);}
.vid:hover .vid-play{transform:scale(1.12);}
.vid-play svg{width:20px; height:20px; margin-left:3px;}
.vid-len{position:absolute; right:12px; bottom:12px; padding:4px 9px; border-radius:6px;
  background:rgba(0,0,0,.55); color:#fff; font-size:11.5px; font-weight:600;}
.vid-meta{padding:18px 20px 20px;}
.vid-meta b{display:block; font-family:var(--font-display); font-size:15.5px; font-weight:700;
  letter-spacing:-0.025em;}
.vid-meta span{display:block; margin-top:4px; font-size:12.5px; color:var(--muted);}

/* ---- final CTA, simplified to the doc's two lines ---- */

@media (max-width:1000px){
  .vids{grid-template-columns:1fr;}
}
@media (max-width:620px){
}

/* ============================================================
   FOOTER
   ============================================================ */
/* ---- the run above it ----
   The page's own marquee, on ink: the same .marq mask, the same doubled
   track, the same pause on hover the hero ticker uses. It sits outside the
   variant switch so it is there whichever footer is showing.

   The separator is a mask rather than a character. A glyph would be at the
   mercy of whichever font had it, and neither of the two loaded here is
   carrying a four-point star. Painted through a mask it is exactly the
   shape drawn, in whatever colour it is told. */
.ftm{background:var(--bg-alt); border-block:1px solid var(--border);
  padding:clamp(14px,1.6vw,20px) 0;
  /* the gap to the footer belongs to the strip, not to the variant switch
     above it ? the switch is scaffolding and will not be there for ever */
  margin-bottom:clamp(30px,3.8vw,58px);}
/* the track is a flex row of two different things, so it is told to line
   them up rather than left to stretch them to each other's height */
.ftm .marq-track{gap:0; align-items:center; animation-duration:46s;}
.ftm .marq span{display:inline-flex; align-items:center; line-height:1;
  font-family:var(--font-display); font-size:clamp(11px,1.05vw,12.5px);
  font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted);}
.ftm .marq span:hover{color:var(--text);}
.ftm .marq span::before{display:none;}   /* the dot gives way to the star */
.ftm .marq-track i{flex-shrink:0; width:11px; height:11px;
  margin:0 clamp(20px,2.8vw,42px); background:var(--primary);
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.6c.7%205.9%203.8%209%209.7%209.7-5.9.7-9%203.8-9.7%209.7-.7-5.9-3.8-9-9.7-9.7C8.2%2010.6%2011.3%207.5%2012%201.6Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%201.6c.7%205.9%203.8%209%209.7%209.7-5.9.7-9%203.8-9.7%209.7-.7-5.9-3.8-9-9.7-9.7C8.2%2010.6%2011.3%207.5%2012%201.6Z%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;}
.ft{background:var(--bg); border-top:1px solid var(--border); padding:64px 0 0;}
.ft-top{display:grid; grid-template-columns:1.5fr repeat(5,1fr); gap:38px 30px; padding-bottom:48px;}
.ft-brand p{font-size:14px; color:var(--muted); margin:16px 0 20px; max-width:34ch;}
.ft-soc{display:flex; gap:9px;}
.ft-soc a{width:36px; height:36px; border-radius:10px; border:1px solid var(--border);
  display:grid; place-items:center; color:var(--muted);
  transition:border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);}
.ft-soc a:hover{border-color:var(--brand-text); color:var(--brand-text); background:var(--brand-soft);}
.ft-soc svg{width:16px; height:16px;}
.ft-col b{display:block; font-family:var(--font-display); font-size:13px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--subtle); margin-bottom:16px;}
.ft-col a{display:block; padding:6px 0; font-size:14.2px; color:var(--text-2);
  transition:color .18s var(--ease), transform .18s var(--ease);}
.ft-col a:hover{color:var(--brand-text); transform:translateX(3px);}
.ft-bar{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:22px 0 28px; border-top:1px solid var(--border); font-size:13px; color:var(--muted);}
.ft-bar nav{display:flex; gap:22px; flex-wrap:wrap;}
.ft-bar nav a:hover{color:var(--brand-text);}


/* ---- the columns and the socials ----
   These were the card footer's, and the plate borrowed them. The card is
   gone, so they belong to the footer that is left and are named for it. */
.ft-col h4{font-family:var(--font-display); font-size:var(--h4); font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text);
  margin-bottom:16px;}
.ft-col nav{display:grid; gap:11px;}
.ft-col nav a{font-size:14.2px; color:var(--text-2);
  transition:color .22s var(--ease);}
.ft-col nav a:hover{color:var(--brand-text);}

.ft-soc{display:flex; gap:10px;}
.ft-soc a{display:grid; place-items:center; width:38px; height:38px;
  border-radius:50%; background:var(--surface);
  border:1px solid var(--border); color:var(--text-2);
  transition:border-color .22s var(--ease), color .22s var(--ease),
             transform .22s var(--pop);}
.ft-soc a svg{width:16px; height:16px;}
.ft-soc a:hover{border-color:var(--primary); color:var(--brand-text);
  transform:translateY(-2px);}

/* ---- the footer ----
   A pale panel resting on a brand-tinted field. Full width, so the panel
   runs to both edges and the field is only seen as the band above it ?
   which is enough: it is what tells you the panel is resting on something
   rather than being the end of the page. Only the top corners are rounded,
   because those are the only two the field is behind.

   It shares --gut with variant 3, the same expression, so the copy in
   either lines up with every section above it. The column and social rules
   above were the card footer's; the card is gone and they are named for the
   footer that is left.

   The contact column is the same column with icons: the rows are links
   where a link is what they are ? an address is not, so that one is a
   span, and it does not pretend to be clickable. */
.ft4{background:var(--bg); padding-top:clamp(26px,3vw,48px);
  --gut:max(26px, calc(50vw - var(--maxw) / 2 + 26px));}
.ft4-plate{background:var(--surface);
  /* nothing behind it now, so the plate is read off its own edge: the two
     top corners and a hairline, against the page's --bg above */
  border-top:1px solid var(--border);
  border-radius:clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px) 0 0;
  padding:clamp(34px,4vw,56px) var(--gut) clamp(20px,2.2vw,28px);}

.ft4-top{display:grid;
  grid-template-columns:minmax(0,1.45fr) repeat(3,minmax(0,1fr));
  gap:clamp(26px,3.2vw,48px);}
.ft4-brand .logo{margin-bottom:16px; --logo:var(--logo-ink);}
html[data-theme="dark"] .ft4-brand .logo{--logo:var(--logo-white);}
.ft4-brand p{font-size:13.8px; line-height:1.65; color:var(--muted); max-width:32ch;}
.ft4-brand .ft-soc{margin-top:20px;}

.ft4-contact span,.ft4-contact a{display:grid; grid-template-columns:auto 1fr;
  gap:11px; align-items:start; padding:6px 0;
  font-size:14.2px; color:var(--text-2);}
.ft4-contact svg{width:17px; height:17px; margin-top:2px; color:var(--brand-text);}
.ft4-contact i{font-style:normal; line-height:1.5;}
.ft4-contact a:hover{color:var(--brand-text);}

.ft4-bar{display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-top:clamp(28px,3.2vw,44px);
  padding-top:clamp(18px,2vw,24px); border-top:1px solid var(--border);
  font-size:12.8px; color:var(--muted);}
.ft4-bar nav{display:flex; gap:clamp(14px,1.8vw,26px); flex-wrap:wrap;}
.ft4-bar a{color:var(--muted); transition:color .18s var(--ease);}
.ft4-bar a:hover{color:var(--brand-text);}

@media (max-width:980px){
  .ft4-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .ft4-brand{grid-column:1 / -1;}
}
@media (max-width:620px){
  .ft4-top{grid-template-columns:minmax(0,1fr);}
  .ft4-bar{flex-direction:column; align-items:flex-start;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1420px){ .hero-rail{display:none;} }
@media (max-width:1080px){
  /* --sec-y comes from site-consistency spacing tokens */
  .nav-links{display:none;}
  .burger{display:block;}
  .nav{--nav-gap:10px;}
  .nav-in{height:64px;}
  /* the rim light follows the shorter bar's corner */
  .nav-beam rect{rx:32px; ry:32px;}
  /* the notice keeps its link and drops its sentence before it can wrap */
      .why-top{grid-template-columns:1fr; gap:34px; align-items:start;}
    .ft-top{grid-template-columns:repeat(3,1fr); gap:34px 26px;}
  .ft-brand{grid-column:1 / -1;}
}
@media (max-width:760px){
  /* --sec-y / gutters: site-consistency responsive spacing system */
  .wrap{padding:0 var(--wrap-x, 16px);}
  .nav-right > .btn{display:none;}
  .hero{height:auto; min-height:0; padding:calc(var(--nav-h) + var(--hero-pad-top, 26px)) 0 var(--hero-pad-bot, 20px);}
  .hero-in{margin-block:0;}
  .ticker{margin-top:28px;}
  .hero-actions .btn{flex:1 1 auto;}
  .ledger{grid-template-columns:1fr;}
  .col-them{order:2;}
  .why-stats{grid-template-columns:repeat(2,1fr); gap:20px 16px;}
  .why-stat b{font-size:25px;}
  .revs-foot{gap:12px 26px;}
  /* on a phone the step goes back to a pixel and the dialog scrolls, which is
     the right behaviour there ? shrinking further would make it unreadable */
  .modal{overflow-y:auto;}
  .modal-frame{--u:1px;}
  .modal-card{padding:46px 20px 22px;}
  .modal-card h2,
  .modal-card .modal-title{font-size:var(--h2);}
  .modal-hero{grid-template-columns:1fr;}
  .modal-art{display:none;}
  .mf{grid-template-columns:1fr;}
  .ft-top{grid-template-columns:1fr; gap:30px;}
  .ft-bar{flex-direction:column; align-items:flex-start; gap:12px;}
}

@media (prefers-reduced-motion:reduce){
  .tick::before,.tick::after{clip-path:none !important; opacity:1;}
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;}
  .rv{opacity:1; transform:none;}
  .lamp .ln > span{transform:none;}
  .modal-frame{transform:none !important; clip-path:none !important;}
  .modal-frame::before{display:none !important;}
  .pop-spark{display:none !important;}
}




/* ??????????????????????????????????????????????????????????????????????
   SERVICES MEGA MENU
   A hero panel on the left, the four core services beside it. Every colour,
   radius and easing comes from the page's own tokens ? nothing new is
   introduced, so the menu follows the theme and the brand hue on its own.
   ?????????????????????????????????????????????????????????????????????? */
html[data-theme="light"]{ --mm-hover:rgba(16,16,16,.045); }
html[data-theme="dark"]{  --mm-hover:rgba(255,255,255,.06); }

/* ?? the trigger, cut to match the other nav links ?? */
.mm-trigger{display:inline-flex; align-items:center; gap:6px; position:relative;
  text-transform:uppercase; letter-spacing:.04em;
  padding:5px 0; font:inherit; font-size:14.5px; font-weight:500; color:var(--muted);
  background:none; border:0; cursor:pointer; transition:color .18s var(--ease);}
.mm-trigger::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--primary); transition:right .25s var(--ease);}
.mm-trigger:hover,.mm-trigger[aria-expanded="true"]{color:var(--text);}
.mm-trigger:hover::after,.mm-trigger[aria-expanded="true"]::after{right:0;}
.mm-trigger svg{width:13px; height:13px; transition:transform .25s var(--ease);}
.mm-trigger[aria-expanded="true"] svg{transform:rotate(180deg);}
.mm-trigger:focus-visible{outline:2px solid var(--primary); outline-offset:4px;}
.nav:not(.stuck) .mm-trigger{color:rgba(255,255,255,.8);}
.nav:not(.stuck) .mm-trigger:hover,
.nav:not(.stuck) .mm-trigger[aria-expanded="true"]{color:#fff;}

/* ?? the panel ?? */
.mm{position:absolute; left:0; right:0; top:100%; z-index:70; padding-top:12px;
  font-family:var(--font);}
.mm[hidden]{display:none;}
.mm-panel{position:relative; margin:0 auto; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:26px;
  box-shadow:var(--shadow-lift); overflow:hidden; padding:12px 12px 8px;
  animation:mm-in .2s var(--pop);}
@keyframes mm-in{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:none;}}
.mm-caret{position:absolute; top:-1px; left:var(--caret-x,50%); transform:translateX(-50%);
  width:46px; height:2px; background:var(--primary); border-radius:2px; z-index:5;}
.mm h3{font-family:var(--font-display); letter-spacing:-.03em; font-weight:700;}

.mm-hero-grid{display:grid; grid-template-columns:1fr 252px; gap:18px; align-items:stretch;}

/* ?? the hero: a photograph that follows whatever is hovered ?? */
.mm-hero{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:280px; padding:20px 18px; background:#0B1620;
}
.mm-stack{position:absolute; inset:0; z-index:0; pointer-events:none;}
.mm-stack img{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; max-height:none; aspect-ratio:auto;
  object-fit:cover; object-position:center top; display:block;
  opacity:0; transform:scale(1.04);
  transition:opacity .45s var(--ease), transform 7s linear;
}
.mm-stack img[data-on="true"]{opacity:1; transform:scale(1);}
.mm-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(4,14,22,0) 0%,
    rgba(4,14,22,.10) 35%,
    rgba(4,14,22,.62) 62%,
    rgba(4,14,22,.90) 100%);
}
.mm-copy{position:relative; z-index:2; color:#fff; margin-top:auto;}
.mm-copy .mm-title{font-size:var(--h3); line-height:1.24; color:#fff; text-wrap:balance;
  text-shadow:0 1px 3px rgba(0,0,0,.45);}
.mm-copy .mm-note{color:rgba(255,255,255,.88); text-shadow:0 1px 3px rgba(0,0,0,.45);}
.mm-copy p{margin:9px 0 0; font-size:13.5px; line-height:1.5; max-width:30ch;
  color:rgba(255,255,255,.88);}

/* ?? one column per core service ?? */
.mm-svc-cols{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px;
  padding:8px 2px 0;}
.mm-gp{display:block; margin:0 0 2px; padding:4px 9px; font-size:12.5px; font-weight:500;
  color:var(--subtle); text-decoration:none; transition:color .18s var(--ease);}
.mm-gp:hover,.mm-gp:focus-visible{color:var(--primary); outline:none;}
.mm-row{display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:start;
  padding:7px 8px; border-radius:12px; text-decoration:none; color:inherit;
  transition:background .18s var(--ease);}
.mm-row:hover,.mm-row:focus-visible{background:var(--mm-hover); outline:none;}
.mm-dot{width:32px; height:32px; display:grid; place-items:center;
  background:var(--ico-bg); color:var(--ico-fg); border-radius:10px;}
.mm-dot svg{width:15px; height:15px;}
.mm-n{display:block; font-size:13.5px; font-weight:600; line-height:1.3;
  transition:color .18s var(--ease);}
.mm-row:hover .mm-n{color:var(--primary);}
.mm-dsc{display:block; margin-top:1px; font-size:12px; line-height:1.35; color:var(--muted);}

/* ?? the closing bar ?? */
.mm-foot{display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin:10px 4px 0; padding:12px 9px 6px; border-top:1px solid var(--border-soft);}
.mm-foot b{display:block; font-family:var(--font-display); font-size:14px; font-weight:700;
  letter-spacing:-.02em;}
/* Scope muted copy to the footer blurb only — not .mm-cta / .btn-label / .arw spans */
.mm-foot > div > span{display:block; margin-top:1px; font-size:12.5px; color:var(--muted);}
/* the panel carries its own button: the site's label-roll script rebuilds
   every .btn into per-letter spans, which collapses inside a hidden panel */
.mm-cta,.mm-foot .mm-cta2{display:inline-flex; align-items:center; gap:9px; padding:13px 22px; flex:none;
  border:0; border-radius:var(--r-btn); background:var(--primary); color:#fff; cursor:pointer;
  font:inherit; font-family:var(--font); font-size:15px; font-weight:700; letter-spacing:-.005em;
  white-space:nowrap; transition:transform .2s var(--ease), box-shadow .2s var(--ease);}
.mm-cta:hover,.mm-foot .mm-cta2:hover{transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(0,150,213,.7);}
.mm-cta:focus-visible,.mm-foot .mm-cta2:focus-visible{outline:2px solid var(--primary); outline-offset:3px;}
.mm-foot .mm-cta,
.mm-foot .mm-cta2,
.mm-foot .mm-cta .btn-label,
.mm-foot .mm-cta2 .btn-label,
.mm-foot .btn-label{
  color:#fff !important;
  font-size:15px !important;
  font-weight:700 !important;
}
.mm-foot .mm-cta .btn-label,
.mm-foot .mm-cta2 .btn-label,
.mm-foot .btn-label{
  display:inline !important;
  margin-top:0 !important;
}
.mm-foot .mm-cta .arw,
.mm-foot .mm-cta2 .arw,
.mm-foot .arw{
  display:grid; place-items:center; flex-shrink:0;
  width:32px; height:32px; margin:-7px -9px -7px 0;
  border-radius:50%; border:1px solid currentColor; font-size:14px;
  color:#fff !important; transform:rotate(45deg);
  transition:transform .3s linear, background .3s var(--ease),
             color .3s var(--ease), border-color .3s var(--ease);
}
.mm-foot .mm-cta:hover .arw,
.mm-foot .mm-cta2:hover .arw{
  transform:rotate(90deg); background:var(--n0);
  color:var(--ink-plate) !important; border-color:transparent;
}
html[data-theme="dark"] .mm-foot .mm-cta,
html[data-theme="dark"] .mm-foot .mm-cta2,
html[data-theme="dark"] .mm-foot .mm-cta .btn-label,
html[data-theme="dark"] .mm-foot .mm-cta2 .btn-label,
html[data-theme="dark"] .mm-foot .btn-label,
html[data-theme="dark"] .mm-foot .mm-cta .arw,
html[data-theme="dark"] .mm-foot .mm-cta2 .arw,
html[data-theme="dark"] .mm-foot .arw{
  color:#fff !important;
}

@media (max-width:1240px){
  .mm-hero-grid{grid-template-columns:1fr 210px; gap:14px;}
  .mm-hero{min-height:280px; padding:20px 18px;}
  .mm-copy .mm-title{font-size:var(--h3);}
  .mm-dsc{display:none;}
}
/* below this the site switches to the burger, so the panel stands down */
@media (max-width:1080px){ .mm{display:none !important;} }
@media (prefers-reduced-motion:reduce){
  .mm-panel{animation:none;}
  .mm-stack img{transition:opacity .01ms;}
}

/* —— Services inside the burger menu —— */
.mnav > a{
  display:block; width:100%; text-align:left;
}
.mnav .mm-acc{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:11px 0; font:inherit; font-size:15.5px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; text-align:left; color:inherit;
  background:none; border:0; border-bottom:1px solid var(--border-soft); cursor:pointer;
  box-sizing:border-box;
}
.mnav .mm-acc .mm-acc-label{
  flex:1 1 auto; min-width:0; text-align:left; line-height:1.35;
}
.mnav .mm-acc svg{width:16px; height:16px; flex:none; color:var(--primary);
  transition:transform .22s var(--ease);}
.mnav .mm-acc[aria-expanded="true"]{color:var(--primary);}
.mnav .mm-acc[aria-expanded="true"] svg{transform:rotate(180deg);}
/* Local SEO Services: linked heading + chevron toggle (desktop .mm-gp parity).
   Beats html body .mnav .mm-acc{width:100%!important} so the label is not
   squeezed to ~0 (which letter-stacks with overflow-wrap:anywhere). */
.mnav .mm-acc-head,
html body .mnav .mm-acc-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px;
  width:100%;
  box-sizing:border-box;
  border-bottom:1px solid var(--border-soft);
}
.mnav .mm-acc-head .mm-acc-label,
html body .mnav .mm-acc-head .mm-acc-label,
html body .mnav .mm-acc-head a.mm-acc-label{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  padding:11px 0 !important;
  border-bottom:0 !important;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:left !important;
  line-height:1.35;
  color:inherit;
  text-decoration:none;
  white-space:nowrap;
  word-break:normal !important;
  overflow-wrap:normal !important;
  writing-mode:horizontal-tb !important;
}
.mnav .mm-acc-head .mm-acc-only,
html body .mnav .mm-acc-head .mm-acc.mm-acc-only{
  width:auto !important;
  max-width:none !important;
  flex:0 0 auto !important;
  border-bottom:0 !important;
  padding:11px 4px;
}
.mnav .mm-acc-head.is-open .mm-acc-label,
.mnav .mm-acc-head .mm-acc-only[aria-expanded="true"]{color:var(--primary);}
.mnav .mm-accp{display:grid; grid-template-rows:0fr; transition:grid-template-rows .26s var(--ease);}
.mnav .mm-accp[data-open="true"]{grid-template-rows:1fr;}
.mnav .mm-accp > div{overflow:hidden;}
.mnav .mm-accp a{display:block; padding:10px 0 10px 16px; font-size:14px; font-weight:500;
  text-align:left; color:var(--muted); border-bottom:1px solid var(--border-soft);}

/* === MEGA MENU DESIGN LAYERS — .mm-hero full-bleed photo + bottom copy === */
.mm-hero{
  justify-content:flex-end !important;
  background:#0B1620 !important;
}
.mm-hero .mm-copy{
  display:block !important; margin-top:auto !important;
  position:relative !important; z-index:2 !important; color:#fff !important;
}
.mm-stack{position:absolute !important; inset:0 !important; z-index:0 !important;}
.mm-stack img{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  max-width:none !important; max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important; object-position:center top !important;
  display:block !important;
}
.mm-veil{
  position:absolute !important; inset:0 !important; z-index:1 !important;
  pointer-events:none !important;
  background:linear-gradient(180deg,
    rgba(4,14,22,0) 0%,
    rgba(4,14,22,.10) 35%,
    rgba(4,14,22,.62) 62%,
    rgba(4,14,22,.90) 100%) !important;
}
.mm-copy .mm-title,.mm-copy .mm-note{text-shadow:0 1px 3px rgba(0,0,0,.45) !important;}
.mm-copy .mm-note{color:rgba(255,255,255,.88) !important;}
html[data-theme="dark"] .mm-hero{background:#0B1620 !important;}
html[data-theme="dark"] .mm-veil{
  background:linear-gradient(180deg,
    rgba(4,14,22,0) 0%,
    rgba(4,14,22,.10) 35%,
    rgba(4,14,22,.62) 62%,
    rgba(4,14,22,.90) 100%) !important;
}
.mm-row .mm-dsc{display:none !important;}
.mm-row{align-items:center !important;}

/* === mm-core-pills === */
/* core service headings as brand pills */
.mm-svc-col .mm-gp{display:inline-flex !important; align-items:center; gap:7px; width:auto; margin:0 0 10px 8px !important; padding:7px 14px !important; border-radius:99px;
  background:#EAF6FC; color:var(--primary) !important; font-size:12.5px !important; font-weight:800 !important; letter-spacing:.01em; line-height:1.2;
  box-shadow:inset 0 0 0 1px hsl(var(--brand-h) 70% 82%); text-decoration:none; transition:background .2s, color .2s, box-shadow .2s;}
.mm-svc-col .mm-gp::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--primary);}
.mm-svc-col .mm-gp:hover,.mm-svc-col .mm-gp:focus-visible{background:var(--primary); color:#fff !important; box-shadow:none;}
.mm-svc-col .mm-gp:hover::before,.mm-svc-col .mm-gp:focus-visible::before{background:#fff;}
html[data-theme="dark"] .mm-svc-col .mm-gp{background:hsl(var(--brand-h) 60% 16%); box-shadow:inset 0 0 0 1px hsl(var(--brand-h) 60% 30%); color:#5CC8F2 !important;}
html[data-theme="dark"] .mm-svc-col .mm-gp::before{background:#5CC8F2;}
.mm-svc-col .mm-gp{white-space:nowrap; max-width:none; margin-left:0 !important; font-size:11.5px !important; padding:7px 11px !important; gap:6px; letter-spacing:0;}
.mm-svc-col .mm-gp::before{flex:none;}

/* === mm-core-strong === */
/* core services: solid primary pill, sized to its text */
.mm-svc-col .mm-gp{display:inline-flex !important; align-items:center; width:auto !important; min-height:0 !important; white-space:nowrap !important;
  margin:0 0 12px 0 !important; padding:7px 12px !important; border-radius:12px !important; background:var(--primary) !important; color:#fff !important;
  font-family:var(--font-display) !important; font-size:12.2px !important; font-weight:700 !important; letter-spacing:0 !important; line-height:1.2 !important;
  box-shadow:none !important; transform:none !important; transition:background .2s;}
.mm-svc-col .mm-gp::before,.mm-svc-col .mm-gp::after{content:none !important; display:none !important;}
.mm-svc-col .mm-gp:hover,.mm-svc-col .mm-gp:focus-visible{background:var(--primary-ink,#0078AB) !important; transform:none !important; box-shadow:none !important;}
html[data-theme="dark"] .mm-svc-col .mm-gp{background:var(--primary) !important; color:#fff !important; box-shadow:none !important;}
/* sub-services: lighter, smaller */
.mm-svc-col .mm-row{padding:6px 8px !important; gap:10px !important; grid-template-columns:26px 1fr !important;}
.mm-svc-col .mm-row .mm-dot{width:26px !important; height:26px !important; border-radius:8px !important; background:transparent !important; box-shadow:inset 0 0 0 1px hsl(var(--brand-h) 60% 84%);}
.mm-svc-col .mm-row .mm-dot svg{width:14px; height:14px;}
.mm-svc-col .mm-row .mm-n{font-size:13px !important; font-weight:500 !important; color:var(--text-2) !important;}
.mm-svc-col .mm-row:hover .mm-n{color:var(--primary) !important;}
.mm-svc-col .mm-row:hover .mm-dot{background:#EAF6FC !important;}
html[data-theme="dark"] .mm-svc-col .mm-row .mm-dot{box-shadow:inset 0 0 0 1px var(--border);}

/* === mm-spacing === */
/* even rhythm: same gap between the core pill and its first service as between services */
.mm-svc-col{display:flex !important; flex-direction:column; align-items:flex-start; gap:10px;}
.mm-svc-col .mm-gp{margin:0 0 0 8px !important;}
.mm-svc-col .mm-row{width:100%; box-sizing:border-box; margin:0 !important; padding:8px !important;}

/* === mm-core-v3 === */
/* core service = section header: solid icon tile + bold title + hairline rule */
.mm-svc-col .mm-gp{display:flex !important; align-items:center; gap:10px; width:100% !important; box-sizing:border-box; white-space:normal !important;
  margin:0 !important; padding:0 8px 12px !important; border-radius:0 !important; background:none !important; color:var(--text) !important;
  border-bottom:1px solid var(--border-soft,#E6EEF3); font-family:var(--font-display) !important; font-size:15px !important; font-weight:800 !important;
  letter-spacing:-.01em !important; line-height:1.25 !important; box-shadow:none !important; transition:color .2s;}
.mm-svc-col .mm-gp{min-height:52px !important;}
.mm-svc-col .mm-gp .mm-gi{flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--primary); color:#fff;}
.mm-svc-col .mm-gp .mm-gi svg{width:16px; height:16px;}
.mm-svc-col .mm-gp::after{content:"\2192" !important; display:block !important; margin-left:auto; font-size:15px; font-weight:700; color:var(--primary); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s;}
.mm-svc-col .mm-gp::before{content:none !important; display:none !important;}
.mm-svc-col .mm-gp:hover,.mm-svc-col .mm-gp:focus-visible{background:none !important; color:var(--primary) !important;}
.mm-svc-col .mm-gp:hover::after,.mm-svc-col .mm-gp:focus-visible::after{opacity:1; transform:none;}
html[data-theme="dark"] .mm-svc-col .mm-gp{background:none !important; color:var(--text) !important; border-color:var(--border);}
html[data-theme="dark"] .mm-svc-col .mm-gp:hover{color:#5CC8F2 !important;}

/* === mm-core-fit === */
/* keep core headings to 1 line where possible, max 2 */
.mm-svc-col .mm-gp{position:relative; gap:9px !important; padding:0 22px 12px 8px !important; font-size:14px !important; letter-spacing:-.015em !important;}
.mm-svc-col .mm-gp .mm-gi{width:28px !important; height:28px !important; border-radius:9px !important;}
.mm-svc-col .mm-gp .mm-gi svg{width:15px !important; height:15px !important;}
.mm-svc-col .mm-gp::after{position:absolute; right:4px; top:calc(50% - 6px); transform:translate(-4px,-50%) !important; margin:0 !important;}
.mm-svc-col .mm-gp:hover::after,.mm-svc-col .mm-gp:focus-visible::after{transform:translate(0,-50%) !important;}
.mm-svc-col .mm-gp .mm-gt{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* === mm-current === */
/* the page you're on is marked in the menu */
.mm-svc-col .mm-row.is-current{position:relative; background:#EAF6FC !important;}
.mm-svc-col .mm-row.is-current::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--primary);}
.mm-svc-col .mm-row.is-current .mm-n{color:var(--primary) !important; font-weight:700 !important;}
.mm-svc-col .mm-row.is-current .mm-dot{background:var(--primary) !important; color:#fff !important; box-shadow:none !important;}
.mm-svc-col .mm-gp.is-current-parent{color:var(--primary) !important;}
html[data-theme="dark"] .mm-svc-col .mm-row.is-current{background:hsl(var(--brand-h) 60% 16%) !important;}
html[data-theme="dark"] .mm-svc-col .mm-row.is-current .mm-n,html[data-theme="dark"] .mm-svc-col .mm-gp.is-current-parent{color:#5CC8F2 !important;}
#mmTrigger.is-current-parent{color:var(--primary);}





/* ??????????????????????????????????????????????????????????????????????
   REFINEMENTS
   Loaded after the page's own stylesheet, so these rules settle five
   things: one spacing rhythm, an alternating background, no rules between
   sections, a lift under every button, and a real pane of glass on the CTA.
   ?????????????????????????????????????????????????????????????????????? */

/* ?? 1. one rhythm, mobile and desktop ??????????????????????????????????
   --sec-y was 104 / 84 / 68 across three breakpoints, and four sections
   then set their own padding on top of that, so no two gaps matched. One
   fluid value replaces all of it: it scales with the viewport instead of
   stepping, so the rhythm is the same everywhere and never gets airy. */
:root{ --sec-y:clamp(58px, 6vw, 92px); }
.sec{ padding-block:var(--sec-y); }
/* the four that opted out are brought back in */
.sec.ax,.sec.bl-sec,.sec.eg-sec,.sec.revs{ padding-block:var(--sec-y); }

/* ?? 2. sections alternate, and only alternate ?????????????????????????
   White, then the brand tint, all the way down after the hero.
   (Selected work removed — keep the beat without #work.) */
#about,
#why,
#approach,
#reviews,
#faq{ background:var(--surface); }

#services,
#industries,
#ai-ecosystem,
#contact{ background:var(--bg-alt); }

/* leftover / removed section classes ? keep them in the tint lane */
.ax,html[data-theme="dark"] .ax,
#blueprint,#clients{ background:var(--bg-alt); }

/* ?? 3. no rules at the top or foot of a section ?????????????????????? */
.sec,.svc,.wk,.why,.revs,.faq,.bl-sec,.eg-sec,.sh,.ax,.clients,.bp{
  border-top:0; border-bottom:0;
}

/* ?? 4. a lift under every button on hover ?????????????????????????????
   The rise was already there; this is the shadow it should have been
   casting. Brand-tinted under the filled button, neutral under the
   outlined one, so neither reads as a coloured halo. */
.btn-primary:hover{
  box-shadow:0 16px 32px -14px hsl(var(--brand-h) 100% 30% / .62),
             0 4px 10px -6px hsl(var(--brand-h) 100% 30% / .34);}
.btn-line:hover{ box-shadow:0 14px 30px -16px rgba(var(--ink-rgb),.5); }
.on-dark .btn-line:hover{ box-shadow:0 14px 30px -16px rgba(0,0,0,.62); }
.btn-primary:active,.btn-line:active{
  box-shadow:0 6px 14px -8px hsl(var(--brand-h) 100% 30% / .45);}

/* ?? 5. the CTA ????????????????????????????????????????????????????????
   One component, two skins. The photograph, the layout, the type scale and
   the arcs are identical in both modes; only the wash, the type colour and
   the depth treatment change.

   Layers, back to front:
     ::before   the photograph (its own element so it can be transformed)
     ::after    the wash that carries the type
     .cta3-dot  two dotted arcs, brand blue, clipped by the card
     > *        the content
   ------------------------------------------------------------------ */
.cta{ --cta-shot:url("/images/home-cta-v2.webp"); }

.cta{ position:relative; }

/* ---- the band: the photograph, bounded by the page container ----
   Not full bleed. The wrap is the same 1220 the rest of the page uses, so
   the picture stops where every other section stops. */
.cta > .wrap{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:clamp(20px,2.2vw,30px);
  padding:clamp(20px,3vw,44px) clamp(14px,2.6vw,38px);}
.cta > .wrap::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--cta-shot) 58% 45% / cover no-repeat;
  transform:scale(1); transition:transform 1.6s var(--ease);}
.cta > .wrap:hover::before{ transform:scale(1.04); }
/* only enough tint to seat the picture and keep its edges from glaring ?
   the contrast for the type comes from the card, not from here */
.cta > .wrap::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(80% 70% at 50% 45%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.34) 100%),
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.10) 40%,
                    rgba(0,0,0,.30) 100%);}
.cta > .wrap > *{ position:relative; z-index:2; }

/* On a dark page the picture's own edges are the only thing separating the
   block from the background, and they go to nothing at the corners. A rim
   gives it an edge to be read against; light mode has the page's own
   contrast and does not need one. */
html[data-theme="dark"] .cta > .wrap{
  border:1px solid hsl(var(--brand-h) 100% 62% / .20);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.07),
             0 30px 70px -44px rgba(0,0,0,.85);}
html[data-theme="dark"] .cta > .wrap:hover{
  border-color:hsl(var(--brand-h) 100% 64% / .34);}

/* ---- the card: dark glass, centred, well short of the band's width ---- */
.cta .cta3{
  position:relative; isolation:isolate;
  width:min(720px, 100%); margin-inline:auto;
  border-radius:clamp(18px,1.8vw,26px);
  padding:clamp(24px,2.8vw,40px) clamp(18px,2.8vw,40px);
  background:rgba(8,13,20,.50);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  backdrop-filter:blur(16px) saturate(120%);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.18),
             0 30px 64px -34px rgba(0,0,0,.7);
  transition:background .4s var(--ease), border-color .4s var(--ease),
             box-shadow .4s var(--ease);}
.cta .cta3:hover{
  background:rgba(8,13,20,.58);
  border-color:rgba(255,255,255,.24);
  box-shadow:inset 0 1px 0 0 rgba(255,255,255,.26),
             0 36px 76px -34px rgba(0,0,0,.78);}
.cta .cta3::before,.cta .cta3::after{ content:none; }

/* ---- the arcs move out to the band, where there is room for them ---- */
.cta .cta3 .cta3-dot,.cta3-dot{
  position:absolute; z-index:1; pointer-events:none;
  width:clamp(200px,22vw,320px); aspect-ratio:1; color:var(--primary);
  background-image:radial-gradient(circle, currentColor 1.05px, transparent 1.55px);
  background-size:11px 11px; opacity:.34;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, transparent 0 21%,
                     #000 27% 45%, transparent 68%);
  mask-image:radial-gradient(circle at 50% 50%, transparent 0 21%,
             #000 27% 45%, transparent 68%);}
.cta .cta3 .cta3-dot.tr,.cta3-dot.tr{ top:-9%; right:-5%; }
.cta .cta3 .cta3-dot.bl,.cta3-dot.bl{ bottom:-11%; left:-6%; }

/* ---- type: white on the glass, in both modes ---- */
.cta3-eyebrow{ color:var(--primary); }
.cta3 h2,html[data-theme="light"] .cta3 h2{ color:#fff; }
.cta3 h2 em{ color:var(--primary); }
.cta3 > p,html[data-theme="light"] .cta3 > p{ color:rgba(255,255,255,.80); }

/* the card's own vertical rhythm, tightened with the padding */
.cta3 h2{ margin-top:clamp(8px,1vw,12px); }
.cta3 > p{ margin-top:clamp(8px,1vw,12px); }
.cta3-actions{ margin-top:clamp(16px,2vw,26px); }

/* ---- the actions row ---- */
.cta3-actions{ gap:clamp(14px,1.8vw,22px); }
/* the hairline between the button and the address */
.cta3-div{ width:1px; height:30px; flex:none; border-radius:1px; }
html[data-theme="light"] .cta3-div{ background:rgba(var(--ink-rgb),.16); }
html[data-theme="dark"]  .cta3-div{ background:rgba(255,255,255,.20); }

/* the address: no underline in the reference, so the rule goes and the
   hover moves onto the colour instead.
   Always pure white on the dark CTA glass ? theme text color must not win. */
.cta3-mail,
html[data-theme="light"] .cta3-mail,
html[data-theme="dark"] .cta3-mail{
  border-bottom:0; padding-bottom:0; gap:10px;
  color:#FFFFFF;
  -webkit-text-fill-color:#FFFFFF;
  opacity:1;
  filter:none;
  transition:color .2s var(--ease);
}
.cta3-mail svg{
  color:#FFFFFF;
  stroke:#FFFFFF;
  opacity:1;
  filter:none;
  flex-shrink:0;
  transition:color .2s var(--ease), stroke .2s var(--ease), opacity .2s var(--ease);
}
.cta3-mail:hover,
html[data-theme="light"] .cta3-mail:hover,
html[data-theme="dark"] .cta3-mail:hover{
  color:var(--primary);
  -webkit-text-fill-color:var(--primary);
}
.cta3-mail:hover svg{
  color:var(--primary);
  stroke:var(--primary);
  opacity:1;
}

/* ---- the button ----
   It is the page's button; this only adds the throw the reference shows
   under it, which is brand-tinted on dark and restrained on light. */
html[data-theme="light"] .cta3-actions .btn-primary{
  box-shadow:0 12px 26px -12px hsl(var(--brand-h) 100% 34% / .55);}
html[data-theme="dark"] .cta3-actions .btn-primary{
  box-shadow:0 0 0 1px hsl(var(--brand-h) 100% 60% / .35),
             0 16px 38px -14px hsl(var(--brand-h) 100% 46% / .80);}
html[data-theme="light"] .cta3-actions .btn-primary:hover{
  box-shadow:0 18px 36px -14px hsl(var(--brand-h) 100% 34% / .68);}
html[data-theme="dark"] .cta3-actions .btn-primary:hover{
  box-shadow:0 0 0 1px hsl(var(--brand-h) 100% 66% / .55),
             0 22px 52px -14px hsl(var(--brand-h) 100% 50% / .95);}

/* ---- responsive ----
   Not a shrunk desktop: below 640 the row becomes a column, the hairline
   turns horizontal and full width, and the button goes full width so the
   thumb has the whole measure to hit. */
@media (max-width:820px){
  .cta .cta3{ padding:clamp(36px,7vw,56px) clamp(20px,5vw,34px); }
  .cta .cta3 .cta3-dot{ width:clamp(180px,42vw,260px); }
}
@media (max-width:640px){
  .cta3-actions{ flex-direction:column; align-items:stretch; gap:16px; }
  .cta3-actions .btn-primary{ width:100%; justify-content:center; }
  .cta3-div{ width:100%; height:1px; }
  .cta3-mail{ justify-content:center; }
  .cta3 h2{ font-size:var(--h2); }
  .cta3 > p{ font-size:var(--body); }
}
@media (prefers-reduced-motion:reduce){
  .cta .cta3:hover{ transform:none; }
  .cta .cta3:hover::before{ transform:none; }
}


/* ?? 6. the marquee reads as the top of the footer ??????????????????????
   It was a tinted band with a rule top and bottom, floating between the
   CTA and the footer with 58px of air under it. Now it takes the footer
   plate's own surface and corner radius, so the two stack as one unit
   with a 10px seam between them. */
.ftm{
  background:var(--surface);
  border-top:0; border-bottom:0;
  border-radius:clamp(20px,2.2vw,28px) clamp(20px,2.2vw,28px) 0 0;
  padding:clamp(24px,2.8vw,36px) 0;      /* taller than the old 14?20 */
  margin-bottom:10px;}
/* the footer's own top padding would have added to that seam */
.ft4{ padding-top:0; }
.ft4-plate{ border-top:0; }
.ftm .marq span{ font-size:clamp(11.5px,1.1vw,13px); }

/* ?? 7. the three figures line up ??????????????????????????????????????
   "Projects delivered" wraps to two lines while its neighbours sit on one,
   which pushed its number down and left the row looking crooked. The label
   now always reserves two lines, so every number starts at the same height
   whatever the label does. */
.cg-fig{ display:flex; flex-direction:column; }
.cg-fig-lab{ min-height:2.9em; line-height:1.45; }
.cg-fig b{ margin-top:auto; padding-top:12px; }

/* ?? 8. the services rail answers the pointer ??????????????????????????
   The rail had no hover at all, on the reasoning that a second highlight
   would compete with the lit pill. It reads as inert instead. This is the
   smallest thing that says "these are pressable": an unlit row lifts its
   label and its rim, and its disc leans toward the pane. The lit row is
   still the only one carrying brand fill, so nothing competes with it. */
.cn-tab:not(.on):hover,
.cn-tab:not(.on):focus-visible{
  color:rgba(255,255,255,.95);
  background:rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.52),
             inset 0 1px 0 0 rgba(255,255,255,.62);}
.cn-tab:not(.on):hover .cn-go{
  transform:translateX(7px);
  background:rgba(255,255,255,.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);}

/* ?? 9. the services console, without the glass ?????????????????????????
   The rail was a photograph with frosted panes floating on it: translucent
   pills, a blurred disc on every row, a frosted stat card. All of it goes.
   What is left is the arrangement ? dark rail, four rows, one lit pill,
   white sheet ? drawn in flat colour.

   The photograph stays. Only the frosting on top of it goes. */
.cn-plate::before{ display:none; }      /* the two faint rings */
/* The floor was deliberately thin, so the frame kept enough edges behind
   the panes for them to soften. There are no panes now, so it goes back to
   being what it says it is ? and it is the hero's tint, so the rail, the
   menu and the CTA all sit under the same one. */
.cn-plate::after{
  background:
    radial-gradient(780px 440px at 50% 48%, rgba(0,0,0,.50) 0%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 42%,
                    rgba(0,0,0,.90) 100%);}

/* rows: plain type, no pane */
.cn-tab{
  background:transparent;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none;
  color:rgba(255,255,255,.70);}
.cn-tab.on{ color:#fff; }
.cn-tab:not(.on):hover,
.cn-tab:not(.on):focus-visible{
  background:rgba(255,255,255,.07);
  box-shadow:none;
  color:rgba(255,255,255,.92);}

/* the travelling pill is solid brand, with its own soft throw */
.cn .cn-lift{
  background:var(--primary);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:0 14px 30px -14px hsl(var(--brand-h) 100% 34% / .75);}

/* the disc: nothing on an unlit row, ink on the lit one ? desktop only.
   Under 1040 the same disc is the accordion + / ? on every row. */
@media (min-width:1041px){
.cn .cn-go{
  background:transparent; box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  opacity:0; transition:opacity .26s var(--ease),
             transform .52s var(--pop), background .3s var(--ease);}
.cn .cn-tab.on .cn-go{
    opacity:1; background:var(--primary); color:#fff;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none;}
.cn-tab:not(.on):hover .cn-go{ opacity:.55; background:rgba(255,255,255,.10);
  transform:translateX(7px); box-shadow:none; }
}

/* the figure card is paper, not frost */
.cn .cn-stat{
  background:var(--surface);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid var(--border-soft);
  box-shadow:0 12px 30px -20px rgba(var(--ink-rgb),.30);}

/* ?? 12. the brand card sits centred ???????????????????????????????????
   Avatar, name, line and the five platform chips were all packed to the
   left of a card that is otherwise symmetrical. Centring the three rows
   lets the card read as the summary it is. */
.ax-brand .ax-brand-top{ justify-content:center; }
.ax-brand .ax-brand-b{ text-align:center; }
.ax-brand .ax-brand-b b{ justify-content:center; }
.ax-brand .ax-chips{ justify-content:center; }

/* ?? 13. headings in title case ????????????????????????????????????????
   Rendered, not rewritten: the markup keeps its sentence case, so nothing
   is lost if this is ever reverted, and acronyms already in caps (SEO, AI)
   are untouched ? capitalize only ever raises the first letter. */
h1,h2,h3,h4,h5,h6{ text-transform:capitalize; }
/* the few headings that are deliberately not title case */
.mm h3,.cn-tab b,.ax-brand-b b{ text-transform:none; }

/* ?? 14. the + and % in the three-figure card ?????????????????????????
   The counter used to print prefix, number and suffix as one text node,
   so there was nothing to colour. Each affix is its own element now; the
   tint is scoped to this card so the hero rail's white figures are left
   alone. */
.fig-af{ font-style:normal; }
.cg-fig b .fig-af{ color:var(--primary); }

/* ?? 15. the blueprint lights one stage at a time ??????????????????????
   The markup carries data-walk, so the page's existing walker steps through
   the six on a 1600ms timer while the panel is on screen, and stands still
   for prefers-reduced-motion.

   The lit stage is the hovered stage ? the same neutral tint, square to the
   grid, uprights left where they are, and the same small lift. Anything
   else would make watching it and pointing at it two different effects. */
.rv.in .bpx-row .bpx-stage.on{
  background:var(--bg-alt);
  transform:translateY(-4px);}
.bpx-row .bpx-stage.on .bpx-n{
  border-color:var(--primary); color:var(--brand-text);
  box-shadow:0 0 0 4px hsl(var(--brand-h) 100% 50% / .12);}
.bpx-row .bpx-stage.on .bpx-ico{
  transform:scale(1.07); background:var(--primary); color:#fff;}
.bpx-row .bpx-stage.on .bpx-rule{ background:var(--primary); transform:scaleX(1.7); }
.bpx-row .bpx-stage.on p{ color:var(--text-2); }

/* ?? 16. the brand card, centred as a block ???????????????????????????
   The two rows keep their own left alignment ? the name sits against the
   avatar, the line sits under the name ? and it is the rows themselves
   that are centred in the card. justify-items does that on the grid the
   card already is: each row shrinks to its content instead of stretching,
   and lands in the middle. */
.ax-brand{ justify-items:center; text-align:left; }
.ax-brand .ax-brand-top{ justify-content:flex-start; width:auto; }
.ax-brand .ax-brand-b{ text-align:left; }
.ax-brand .ax-brand-b b{ justify-content:flex-start; }
.ax-brand .ax-chips{ justify-content:flex-start; width:auto; }

/* ?? 17. the dialog fits one phone screen ??????????????????????????????
   The mobile block pinned --u to 1px and let the dialog scroll. Almost
   every measurement in the card is written as a multiple of --u, so the
   whole thing can be scaled by that one number instead: --u is tied to the
   viewport's own height, and the card lands at whatever size the screen
   can hold. Two things then have to be reclaimed by hand ? the fields go
   two to a row, and the handful of measurements that were still in pixels
   move onto the same unit. */
@media (max-width:760px){
  .modal{ overflow:hidden; padding:10px; }
  /* 820 is the card's own height in these units with a little headroom,
     so the unit always resolves small enough for the whole thing to fit
     and there is nothing left to scroll. Capped at 1px so it never grows
     past its designed size on a tall screen. */
  .modal-frame{
    --u:min(1px, calc(100dvh / 820));
    width:100%; padding:calc(8 * var(--u));}
  .modal-card{
    padding:calc(38 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
    max-height:none; overflow:hidden;}
  .modal-card h2,
  .modal-card .modal-title{ font-size:var(--h2); line-height:1.14; }
  .modal-intro{ font-size:calc(13.2 * var(--u)); line-height:1.46;
    margin-top:calc(6 * var(--u)); }
  .modal-eyebrow{ font-size:calc(10.6 * var(--u)); }
  .modal-form{ margin-top:calc(15 * var(--u)); padding:calc(14 * var(--u)); }
  .mf-prog{ gap:calc(9 * var(--u)); margin-bottom:calc(11 * var(--u)); }

  /* two to a row: four stacked fields were most of the height */
  .mf{ grid-template-columns:1fr 1fr;
       gap:calc(10 * var(--u)) calc(9 * var(--u)); }
  .field{ gap:calc(6 * var(--u)); }
  .field label{ font-size:calc(12.4 * var(--u)); gap:calc(6 * var(--u)); }
  .field label svg{ width:calc(14 * var(--u)); height:calc(14 * var(--u)); }
  /* the input keeps a real 16px: below that iOS zooms the page on focus,
     which throws the dialog off screen ? exactly what this is fixing */
  .field input,.field select{
    font-size:16px; padding:calc(10 * var(--u)) calc(12 * var(--u));
    border-radius:calc(11 * var(--u));}
  #modalGo{ width:100%; margin-top:calc(12 * var(--u));
    padding:calc(13 * var(--u)) calc(18 * var(--u));
    font-size:calc(14.5 * var(--u)); }
  .modal-note{ margin-top:calc(9 * var(--u)); font-size:calc(11.4 * var(--u)); }
  .modal-x{ width:calc(34 * var(--u)); height:calc(34 * var(--u)); }
}
/* very short screens ? a landscape phone ? give the copy back its room by
   dropping the decorative line rather than squeezing the fields further */
@media (max-width:760px) and (max-height:620px){
  .modal-intro{ display:none; }
  .modal-card h2,
  .modal-card .modal-title{ font-size:var(--h2); }
}

/* ?? 18. the service dropdown's chevron ????????????????????????????????
   It was a bordered square rotated 45?, pinned with `right:17px;
   bottom:22px`. Those two numbers are plain pixels while everything
   around them is written in --u, so as soon as the dialog scaled down on
   a phone the mark stopped sitting on the input and drifted into the
   label ? and the select's right padding, also fixed, no longer matched
   it, so the text ran underneath.

   The mark moves onto the select itself as a background image. Centred
   vertically by `center`, it cannot drift whatever the field's height
   turns out to be, and the padding that clears it is written in the same
   unit as the rest. */
.modal .field.sel::after{ display:none; }
.modal .field.sel select{
  padding-right:calc(40 * var(--u));
  background-repeat:no-repeat;
  background-position:right calc(14 * var(--u)) center;
  background-size:calc(12 * var(--u)) auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7684' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
html[data-theme="dark"] .modal .field.sel select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23A8B0BB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
/* the tick that appears once a field is filled keeps clear of it */
.modal .field.sel .field-ok{ right:calc(40 * var(--u)); }
.modal .field.sel.good select{ padding-right:calc(66 * var(--u)); }




/* ??????????????????????????????????????????????????????????????????????
   FAQ ? a photo card beside a numbered accordion
   The section was a grid of seven cards that each opened on hover. This
   is the reference layout: one column of questions, opened one at a time,
   with a standing invitation beside it.
   ?????????????????????????????????????????????????????????????????????? */
:root{ --faq-shot:url("/images/home-faq-cede35b294.webp"); }

/* Single FAQ aside photo (homepage) */
#faq .faq-pic{position:absolute; inset:0; background:none; opacity:1;}
#faq .faq-pic > img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top; display:block;}

.faq-wrap{
  margin-top:clamp(28px,3.4vw,46px);
  display:grid; grid-template-columns:clamp(280px,27vw,340px) 1fr;
  gap:clamp(20px,2.4vw,34px); align-items:start;}

/* ?? the aside ??????????????????????????????????????????????????????? */
.faq-aside{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:clamp(18px,1.8vw,24px);
  min-height:clamp(400px,42vw,520px);
  padding:clamp(22px,2.2vw,30px);
  display:flex; flex-direction:column; justify-content:flex-end;
  color:#fff;
  box-shadow:0 30px 66px -34px rgba(var(--ink-rgb),.42);}
/* Single-shot fallback when a page has no faq-pics stack */
.faq-aside::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--faq-shot) center / cover no-repeat;
  transform:scale(1); transition:transform 1.6s var(--ease);}
.faq-aside:hover::before{ transform:scale(1.05); }
.faq-aside:has(> .faq-pics)::before{ content:none; }
/* Per-question photo stack (homepage + service pages that opt in) */
.faq-aside > .faq-pics{
  position:absolute; inset:0; z-index:0;
  overflow:hidden; border-radius:inherit; pointer-events:none;
  transition:transform 1.6s var(--ease);}
.faq-aside:hover > .faq-pics{ transform:scale(1.05); }
.faq-pic{
  position:absolute; inset:0;
  background:var(--pic) center / cover no-repeat;
  opacity:0; transition:opacity .55s var(--ease);}
.faq-wrap[data-at="1"] .faq-pic:nth-child(1),
.faq-wrap[data-at="2"] .faq-pic:nth-child(2),
.faq-wrap[data-at="3"] .faq-pic:nth-child(3),
.faq-wrap[data-at="4"] .faq-pic:nth-child(4),
.faq-wrap[data-at="5"] .faq-pic:nth-child(5),
.faq-wrap[data-at="6"] .faq-pic:nth-child(6),
.faq-wrap[data-at="7"] .faq-pic:nth-child(7),
.faq-wrap[data-at="8"] .faq-pic:nth-child(8){ opacity:1; }
.faq-wrap:not([data-at]) .faq-pic:nth-child(1){ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .faq-pic{ transition:none; }
  .faq-aside:hover > .faq-pics{ transform:none; }
}
/* the tint the hero uses, so this frame belongs to the same family */
.faq-aside::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(780px 440px at 50% 48%, rgba(0,0,0,.45) 0%, transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.52) 42%,
                    rgba(0,0,0,.92) 100%);}
.faq-aside > *{ position:relative; z-index:2; }
.faq-aside > .faq-pics{ z-index:0; }
.faq-aside-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:11px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--primary);}
.faq-aside-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--primary); flex:none;}
/* restored */
.mm-copy .mm-title{font-size:var(--h3); font-weight:800; letter-spacing:-.03em;
  line-height:1.22; color:#fff; text-transform:none;}
.faq-aside p{
  margin:10px 0 0; font-size:var(--body); line-height:1.6;
  color:rgba(255,255,255,.78);}
.faq-aside .btn{ margin-top:clamp(16px,1.8vw,22px); align-self:flex-start; }

/* Per-active-FAQ copy stack (homepage) */
.faq-aside-stack{ position:relative; z-index:2; display:grid; }
.faq-aside-panel{
  grid-area:1 / 1; display:flex; flex-direction:column; justify-content:flex-end;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);}
.faq-wrap[data-at="1"] .faq-aside-panel:nth-child(1),
.faq-wrap[data-at="2"] .faq-aside-panel:nth-child(2),
.faq-wrap[data-at="3"] .faq-aside-panel:nth-child(3),
.faq-wrap[data-at="4"] .faq-aside-panel:nth-child(4),
.faq-wrap[data-at="5"] .faq-aside-panel:nth-child(5),
.faq-wrap[data-at="6"] .faq-aside-panel:nth-child(6),
.faq-wrap[data-at="7"] .faq-aside-panel:nth-child(7),
.faq-wrap:not([data-at]) .faq-aside-panel:nth-child(1){
  opacity:1; visibility:visible; pointer-events:auto;}
@media (prefers-reduced-motion:reduce){
  .faq-aside-panel{ transition:none; }
}

/* ?? the accordion ??????????????????????????????????????????????????? */
.faq-list{
  border:1px solid var(--border); border-radius:clamp(16px,1.6vw,20px);
  background:var(--surface); overflow:hidden;}
/* Light theme: keep the list a pure white card on the tinted FAQ section */
html[data-theme="light"] .faq-list{background:#FFFFFF;}
.faq-item + .faq-item{ border-top:1px solid var(--border-soft); }

.faq-q{
  width:100%; display:grid; grid-template-columns:auto 1fr auto;
  align-items:center; gap:clamp(12px,1.4vw,18px);
  padding:clamp(14px,1.5vw,19px) clamp(14px,1.6vw,20px);
  font:inherit; text-align:left; color:var(--text);
  background:transparent; border:0; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);}
.faq-q:hover{ background:var(--mm-hover); }
.faq-q:focus-visible{ outline:2px solid var(--primary); outline-offset:-3px; }

.faq-n{
  font-family:var(--font-display); font-size:11.5px; font-weight:800;
  letter-spacing:.06em; color:var(--brand-text);
  background:var(--brand-soft); border-radius:7px;
  padding:5px 9px; flex:none;
  transition:background .2s var(--ease), color .2s var(--ease);}
.faq-t{
  font-family:var(--font-display); font-size:clamp(14px,1.35vw,15.5px);
  font-weight:700; letter-spacing:-.02em; line-height:1.4;
  text-transform:none;}
.faq-sign{
  width:30px; height:30px; flex:none; display:grid; place-items:center;
  border-radius:50%; color:var(--brand-text); background:var(--brand-soft);
  transition:background .22s var(--ease), color .22s var(--ease),
             transform .28s var(--pop);}
.faq-sign svg{ width:14px; height:14px; }
.faq-sign .x{ display:none; }

/* open state */
.faq-q[aria-expanded="true"]{ background:var(--brand-soft); }
.faq-q[aria-expanded="true"] .faq-t{ color:var(--primary); }
.faq-q[aria-expanded="true"] .faq-n{ background:var(--primary); color:#fff; }
.faq-q[aria-expanded="true"] .faq-sign{
  background:var(--primary); color:#fff; transform:rotate(90deg);}
.faq-q[aria-expanded="true"] .faq-sign .x{ display:block; }
.faq-q[aria-expanded="true"] .faq-sign .plus{ display:none; }

/* FAQ answers ? max-height toggle (more reliable than 0fr/1fr across browsers) */
.faq-a{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .38s var(--ease), opacity .28s var(--ease);
}
.faq-a[data-open="true"],
.faq-a.is-open{
  max-height:720px;
  opacity:1;
}
.faq-a > div{ min-height:0; }
.faq-a p{
  margin:0; padding:2px clamp(16px,1.8vw,24px) clamp(16px,1.6vw,20px)
          clamp(52px,5vw,64px);
  font-size:var(--body); line-height:1.68; color:var(--text-2);
  border-left:2px solid var(--brand-soft); margin-left:clamp(20px,2vw,26px);}
.faq-q{ cursor:pointer; }
/* ?? responsive ?????????????????????????????????????????????????????? */
@media (max-width:940px){
  .faq-wrap{ grid-template-columns:1fr; }
  .faq-aside{ min-height:clamp(280px,44vw,340px); }
}
@media (max-width:560px){
  .faq-q{ grid-template-columns:auto 1fr auto; gap:10px; padding:13px 12px; }
  .faq-n{ padding:4px 7px; font-size:10.5px; }
  .faq-t{ font-size:14px; }
  .faq-a p{ padding-left:14px; margin-left:12px; padding-right:14px; }
  .faq-aside .btn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .faq-a{ transition:none; }
  .faq-aside:hover::before{ transform:none; }
}




/* ??????????????????????????????????????????????????????????????????????
   REVIEWS ? a ratings bar over a row of review cards
   Replaces the single rotating quote. Same three reviews, shown at once.
   ?????????????????????????????????????????????????????????????????????? */
.gr{ margin-top:clamp(26px,3.2vw,42px); }

/* ?? the ratings bar ????????????????????????????????????????????????? */
.gr-bar{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(14px,2vw,26px);
  padding:clamp(18px,2vw,26px) clamp(18px,2.2vw,30px);
  background:var(--surface); border:1px solid var(--border);
  border-radius:clamp(16px,1.6vw,20px); box-shadow:var(--shadow);}
.gr-badge{
  width:clamp(44px,4.4vw,54px); aspect-ratio:1; flex:none;
  display:grid; place-items:center; border-radius:50%;
  background:var(--brand-soft); color:var(--brand-text);}
.gr-badge svg{ width:52%; height:52%; }
.gr-name{
  font-family:var(--font-display); font-size:clamp(14px,1.4vw,15.5px);
  font-weight:700; letter-spacing:-.02em; color:var(--text); text-transform:none;}
.gr-score{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.gr-score b{
  font-family:var(--font-display); font-size:clamp(22px,2.4vw,28px);
  font-weight:800; letter-spacing:-.04em; line-height:1; color:var(--text);}
.gr-src{
  display:inline-block; margin-top:6px; font-size:12.6px; color:var(--muted);
  text-decoration:none; border-bottom:1px solid rgba(var(--ink-rgb),.22);
  transition:color .2s var(--ease), border-color .2s var(--ease);}
.gr-src:hover{ color:var(--primary); border-color:var(--primary); }
.gr-acts{ display:flex; align-items:center; gap:10px; }

/* stars ? one shape, filled to the rating by a clip on the wrapper */
.gr-stars{ display:inline-flex; gap:2px; color:#FBB03B; }
.gr-stars svg{ width:15px; height:15px; }
.gr-stars .off{ color:var(--border); }

/* ?? the cards ??????????????????????????????????????????????????????? */
/* a snap track at every width: three across on the desktop, fewer as the
   room runs out, and the same controls underneath either way */
.gr-track{
  margin-top:clamp(14px,1.6vw,20px);
  display:flex; gap:clamp(14px,1.6vw,20px);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding-bottom:4px;}
.gr-track::-webkit-scrollbar{ display:none; }
.gr-card{ flex:0 0 calc((100% - 2 * clamp(14px,1.6vw,20px)) / 3);
  scroll-snap-align:start; }
.gr-card{
  display:flex; flex-direction:column;
  padding:clamp(16px,1.8vw,22px);
  background:var(--surface); border:1px solid var(--border);
  border-radius:clamp(14px,1.4vw,18px);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease),
             border-color .3s var(--ease);}
.gr-card:hover{
  transform:translateY(-4px); border-color:var(--brand-soft);
  box-shadow:0 22px 44px -26px rgba(var(--ink-rgb),.32);}
.gr-top{ display:grid; grid-template-columns:auto 1fr auto; gap:11px;
  align-items:start; }
.gr-av{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--primary); color:#fff;
  font-family:var(--font-display); font-size:13px; font-weight:800;}
.gr-who b{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-display); font-size:13.8px; font-weight:700;
  letter-spacing:-.02em; color:var(--text);}
.gr-guide{
  font-family:var(--font); font-size:10.5px; font-weight:600; letter-spacing:0;
  color:var(--brand-text); background:var(--brand-soft);
  border-radius:999px; padding:3px 8px; display:inline-flex; align-items:center; gap:5px;}
.gr-guide::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:var(--primary);}
.gr-who span{ display:block; margin-top:2px; font-size:11.8px; color:var(--muted); }
.gr-kebab{ color:var(--subtle); line-height:0; }
.gr-kebab svg{ width:15px; height:15px; }

.gr-meta{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.gr-when{ font-size:11.8px; color:var(--muted); }
.gr-text{
  margin:10px 0 0; font-size:var(--body); line-height:1.62; color:var(--text-2);}
.gr-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.gr-tag{
  font-size:11px; font-weight:600; color:var(--text-2);
  background:var(--bg-alt); border-radius:7px; padding:4px 9px;}
.gr-foot{
  display:flex; align-items:center; gap:18px; margin-top:auto;
  padding-top:13px; border-top:1px solid var(--border-soft);
  font-size:12px; color:var(--muted);}
.gr-foot button{
  display:inline-flex; align-items:center; gap:6px; padding:0;
  font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  transition:color .2s var(--ease);}
.gr-foot button:hover{ color:var(--primary); }
.gr-foot svg{ width:14px; height:14px; }

/* ?? the carousel controls, only where the row cannot fit ???????????? */
.gr-nav{ display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:clamp(16px,1.8vw,22px);}
.gr-arrow{
  width:36px; height:36px; display:grid; place-items:center; flex:none;
  border-radius:50%; background:var(--surface); border:1px solid var(--border);
  color:var(--text); cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease);}
.gr-arrow:hover{ border-color:var(--primary); color:var(--primary); }
.gr-arrow:disabled{ opacity:.4; cursor:default; }
.gr-arrow svg{ width:15px; height:15px; }
.gr-dots{ display:flex; align-items:center; gap:7px; }
.gr-dot{ width:7px; height:7px; border-radius:999px; padding:0; border:0;
  background:var(--border); cursor:pointer;
  transition:width .28s var(--ease), background .28s var(--ease);}
.gr-dot[aria-current="true"]{ width:22px; background:var(--primary); }

.gr-end{ display:flex; justify-content:center; margin-top:clamp(20px,2.4vw,30px); }

/* ?? responsive: below three-up the row becomes a swipe track ???????? */
@media (max-width:1000px){
  .gr-bar{ grid-template-columns:auto 1fr; }
  .gr-acts{ grid-column:1 / -1; justify-content:flex-start; }
  .gr-card{ flex:0 0 calc((100% - clamp(14px,1.6vw,20px)) / 2); }
}
@media (max-width:680px){
  .gr-card{ flex:0 0 min(340px, 84%); }
}
@media (max-width:560px){
  .gr-bar{ grid-template-columns:1fr; text-align:left; }
  .gr-acts{ flex-direction:column; align-items:stretch; }
  .gr-acts .btn{ width:100%; justify-content:center; }
}

/* Console accordion icons ? final win over earlier desktop refine */
@media (max-width:1040px){
  .cn .cn-go,
  .cn-go{
    opacity:1 !important;
    visibility:visible !important;
    background:var(--primary) !important;
    color:#fff !important;
    transform:none !important;
    box-shadow:none !important;}
  html[data-theme="dark"] .cn .cn-go,
  html[data-theme="dark"] .cn-go{
    background:rgba(255,255,255,.14) !important;}
  .cn .cn-tab.on .cn-go,
  .cn-tab.on .cn-go{
    background:#fff !important;
    color:var(--primary) !important;
    opacity:1 !important;
    transform:none !important;}
  .cn-tab:not(.on):hover .cn-go,
  .cn-tab:not(.on):focus-visible .cn-go{
    opacity:1 !important;
    transform:none !important;
    background:var(--primary) !important;}
  html[data-theme="dark"] .cn-tab:not(.on):hover .cn-go,
  html[data-theme="dark"] .cn-tab:not(.on):focus-visible .cn-go{
    background:rgba(255,255,255,.14) !important;}
  .cn-go svg{display:none !important;}
  .cn-go::before,
  .cn-go::after{
    content:"" !important;
    position:absolute !important;
    top:50% !important; left:50% !important;
    background:currentColor !important;
    border-radius:2px !important;
    transform:translate(-50%,-50%) !important;
    display:block !important;
    opacity:1 !important;}
  .cn-go::before{width:13px !important; height:2px !important;}
  .cn-go::after{width:2px !important; height:13px !important;}
  .cn-tab.on .cn-go::after{
    transform:translate(-50%,-50%) scaleY(0) !important;}
}

/* === type-scale lock === */
/*
  Inter reading text = 16px (--body) everywhere.
  Sora = headings only.

  Still smaller on purpose (not reading paragraphs):
  - nav / mega-menu / buttons ? chrome, not body copy
  - eyebrows, badges, step numbers, uppercase track labels ? hierarchy labels
  - form labels, errors, helper notes ? UI chrome
  - footer link lists, map overlay labels ? micro chrome
  - chart legends, review metadata (avatar/date/tag) ? data UI, not prose
*/
h1, h2, h3, h4, h5, h6{
  font-family:var(--font-display);
}
.hs-lede,
.sec-lede,
.hero .lede,
.mp-say > p,
.wy-say > p,
.wc-say > p,
.gw-say > p,
.wn-say p,
.cg-say > p,
.fw1-lede,
.fw2-lede,
.fw2-lede + .fw2-lede,
.av1-copy p,
.eg-sec .sec-lede,
.ct-next-head p,
.cta3 > p,
.pf-head .sec-lede,
.lo-say .sec-lede,
.lp-say .sec-lede,
.hx .sec-lede,
.sh-close p,
.sh-band p,
.faq-a p,
.faq-aside p,
.faq-cta p,
.faq-card p,
.eg-card p,
.eg-exp-head p,
.eg-exp-list p,
.eg-exp-note,
.eg-note,
.lp-note,
.pf-card > p,
.ws-item p,
.gw-block p,
.gw-cta-say p,
.gw-checks li,
.wc-card p,
.wk-say p,
.wc-panel > p,
.wn-panel > p,
#who .wn-card p,
#who .wn-close-t p,
.wy-txt > span,
.wa-note,
.ax-close-b,
.modal-done p,
.pb-d,
.pb-good .pb-d,
.pb-close-t p,
.hx-card p,
.gt-card p,
.sg-item p,
.sp-list div > span,
.fw1-list li,
.lo-strip div > span,
.cn-list li,
.cn-subs em,
.gr-text,
.bpx-stage p,
.bl-note,
.vs-v,
.vs-cta-t > p,
.cl-foot p,
.wl-row:not(.wl-head) .wl-cell:nth-child(2),
.wl-row:not(.wl-head) .wl-cell:nth-child(3),
.wl-foot p,
.tb-wall > p.tb-claim,
.tb-fig .tb-cap,
.hs-done p,
.hs-sub,
.ct-c > p,
.ct-step-d,
.ct-way-v{
  font-family:var(--font);
  font-size:var(--body);
}
.eg-sec h2,
.gw-say h2,
.mp-say h2,
.pf-head h2,
.wy-say h2,
.hx .sec-head h2,
.sg-head h2,
.ct-side h2,
.ct-next-head h2,
.cta3 h2{
  font-family:var(--font-display);
  font-size:var(--h2);
  letter-spacing:-0.04em;
}
.ct-hero h1{
  font-family:var(--font-display);
  font-size:var(--h1);
}
.hs-h1{
  font-family:var(--font-display);
}
.ws-item h3,
.eg-card h3,
.gw-block h3,
.pf-card h3,
.sp-top h3{
  font-family:var(--font-display);
  font-size:var(--h3);
}
@media (max-width:640px){
  .hs-lede,
  .cta3 > p,
  .faq-a p,
  .eg-card p{font-size:var(--body);}
  .cta3 h2{font-size:var(--h2);}
}
@media (max-width:560px){
  .faq-a p{font-size:var(--body);}
}

/* Industries / platforms cards: drop number + arrow, tighten height site-wide */
.pf-n,
.pf-go{ display:none !important; }
.pf-card{
  padding:clamp(14px,1.35vw,18px) !important;
}
.pf-top{
  margin-bottom:clamp(10px,1.1vw,14px) !important;
}
.pf-card > p{
  margin-top:clamp(10px,1.1vw,14px) !important;
  padding-top:clamp(10px,1.1vw,14px) !important;
}

/* Process section step titles ? fixed smaller size site-wide */
#process .eg-card h3{
  font-size:var(--h3);
}

/* Process section ? fit one screen without scrolling (desktop) */
#process.eg-sec,
#process.sec{
  padding-block:var(--sec-y);
}
#process .sec-head{
  margin-bottom:0 !important;
}
#process .sec-head h2,
#process.eg-sec h2{
  font-size:var(--h2);
}
#process .sec-lede,
#process.eg-sec .sec-lede{
  margin-top:8px !important;
  font-size:var(--body);
  line-height:1.45 !important;
  max-width:52ch;
}
#process .eg{
  margin-top:clamp(12px,1.6vh,18px) !important;
  gap:clamp(18px,2.2vw,32px) !important;
  --eg-gap:clamp(18px,2.2vw,32px) !important;
  align-items:center !important;
}
#process .eg-core{
  width:min(100%,340px,38vh) !important;
}
#process .eg-num{
  font-size:clamp(36px,4.2vw,52px) !important;
  margin-top:4px !important;
}
#process .eg-rule{
  margin:8px auto !important;
  width:40px !important;
}
#process .eg-lab,
#process .eg-of{
  font-size:10px !important;
}
#process .eg-list{
  gap:clamp(4px,.55vw,6px) !important;
}
#process .eg-card{
  padding:clamp(7px,.85vw,10px) clamp(10px,1.1vw,14px) !important;
  gap:clamp(8px,1vw,12px) !important;
  border-radius:14px !important;
}
#process .eg-ico{
  width:clamp(28px,2.6vw,32px) !important;
  border-radius:11px !important;
}
#process .eg-card h3{
  line-height:1.18 !important;
}
#process .eg-card h3 i{
  display:none !important;
  margin:0 !important;
}
#process .eg-card p{
  margin-top:2px !important;
  font-size:var(--body);
  line-height:1.4 !important;
}
#process .fw-foot{
  margin-top:clamp(12px,1.6vh,18px) !important;
  padding:clamp(10px,1.2vw,14px) clamp(14px,1.6vw,20px) !important;
  gap:12px !important;
}
#process .fw-foot p{
  font-size:13.5px !important;
  line-height:1.35 !important;
}
#process .fw-foot .btn-lg{
  padding:10px 16px !important;
  font-size:13.5px !important;
}
@media (max-width:1000px){
  #process .eg-core{
    width:min(70%,240px) !important;
  }
}



/* ??????????????????????????????????????????????????????????????????????
   WHY CHOOSE US ? homepage (#why)
   ?????????????????????????????????????????????????????????????????????? */
#why{background:var(--surface); --wy-w:100%;}





#why.wy{--wy-w:100%;}
#why .wy-in{display:grid; gap:clamp(24px,3vw,40px); justify-items:stretch;}


#why .wy-eyebrow{display:inline-flex; align-items:center; gap:8px;
  padding:7px 16px; border-radius:99px;
  background:var(--surface); border:1px solid var(--border);
  font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand-text);}
#why .wy-eyebrow i{width:6px; height:6px; border-radius:50%; background:var(--primary);}

#why .wy-say{text-align:center;}
#why .wy-say h2{margin:clamp(16px,1.9vw,24px) auto 0; max-width:20ch;
  font-size:var(--h2); line-height:1.1; letter-spacing:-0.045em;}
#why .wy-say h2 em{font-style:normal; color:var(--brand-text);}


#why .wy-box{display:grid; gap:clamp(14px,1.6vw,22px);}

#why .wy-rail{width:var(--wy-w); margin-inline:auto;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  gap:6px; padding:6px; border-radius:16px;
  background:var(--surface); border:1px solid var(--border);}
#why .wy-tab{padding:12px 14px; border:0; border-radius:11px; cursor:pointer;
  background:transparent; color:var(--text-2);
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(11.5px,1vw,14px); line-height:1.25; letter-spacing:-0.02em;
  text-align:center;
  transition:background .3s var(--ease), color .3s var(--ease),
             box-shadow .3s var(--ease);}
#why .wy-tab:hover{color:var(--text);}

#why .wy-tab.on{background:var(--primary); color:#fff;
  box-shadow:0 8px 20px -8px hsl(var(--brand-h) 100% 40% / .55);}
#why .wy-tab.on:hover{color:#fff;}
#why .wy-tab:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}


#why .wy-panes{width:var(--wy-w); margin-inline:auto;
  display:grid; padding:clamp(22px,2.6vw,36px);
  background:var(--surface); border:1px solid var(--border);
  border-radius:calc(var(--r-lg) + 8px);
  box-shadow:0 26px 60px -38px rgba(var(--ink-rgb),.4);}


#why .wy-pane{grid-area:1 / 1; visibility:hidden; opacity:0;
  transform:translateY(8px); pointer-events:none;
  display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:clamp(18px,2.4vw,38px); align-items:center;
  transition:opacity .34s var(--ease), transform .34s var(--ease);}
#why .wy-pane.on{visibility:visible; opacity:1; transform:none; pointer-events:auto;}
#why .wy-txt{grid-column:1; align-self:center;}

#why .wy-mark{display:grid; place-items:center;
  width:clamp(40px,3.6vw,48px); aspect-ratio:1; border-radius:13px;
  background:var(--disc); color:var(--primary); margin-bottom:14px;}
#why .wy-mark svg{width:50%; height:50%;}

#why .wy-pane h3{font-family:var(--font-display); font-weight:800;
  font-size:var(--h3); line-height:1.2; letter-spacing:-0.035em;
  color:var(--text);}
#why .wy-pane p{margin:clamp(9px,1vw,13px) 0 0;
  font-size:var(--body); line-height:1.7; color:var(--text-2);}



#why .wy-fig{grid-column:2; align-self:center;
  margin:0; padding:clamp(16px,1.8vw,22px);
  border-radius:var(--r-lg); background:var(--bg-alt);}
#why .wy-fig figcaption{display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:clamp(12px,1.4vw,18px);}
#why .wy-fig figcaption b{font-family:var(--font-display); font-weight:800;
  font-size:clamp(13px,1.1vw,15px); letter-spacing:-0.03em; color:var(--text);}
#why .wy-chip{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:6px 12px; border-radius:99px;
  background:var(--surface); border:1px solid var(--border);
  font-size:11px; font-weight:600; color:var(--text-2);}
#why .wy-chip svg{width:12px; height:12px;}



#why .wyln{width:100%; height:auto; display:block;}
#why .wyln-area{fill:hsl(var(--brand-h) 100% 50% / .10);}
#why .wyln-line{fill:none; stroke:var(--text); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;}
#why .wyln-d{fill:var(--primary);}
#why .wyln-x, #why .wyln-y{fill:var(--muted); font-size:8px; font-family:var(--font);}
#why .wyln-x{text-anchor:middle;} #why .wyln-y{text-anchor:end;}


#why .dn-wrap{display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(14px,1.8vw,26px); align-items:center; position:relative;}
#why .dn{width:clamp(96px,10vw,124px); height:auto; display:block; flex-shrink:0;}
#why .dn-track{fill:none; stroke:var(--border); stroke-width:15;}
#why .dn-s{fill:none; stroke-width:15; stroke-linecap:butt;}
#why .dn-1{stroke:var(--primary);}
#why .dn-2{stroke:hsl(var(--brand-h) 100% 66%);}
#why .dn-3{stroke:hsl(var(--brand-h) 30% 46%);}
#why .dn-4{stroke:var(--border);}
#why .dn-mid{position:absolute; left:clamp(48px,5vw,62px); top:50%;
  transform:translate(-50%,-50%); text-align:center; pointer-events:none;}
#why .dn-mid b{display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(17px,1.6vw,21px); letter-spacing:-0.04em; color:var(--text);}
#why .dn-mid em{display:block; font-style:normal; font-size:8.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);}
#why .dn-key{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px clamp(10px,1.4vw,18px);}
#why .dn-key li{display:flex; align-items:center; gap:7px; font-size:11.5px;
  color:var(--text-2);}
#why .dn-key i{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
#why .dn-key .dn-1 i{background:var(--primary);}
#why .dn-key .dn-2 i{background:hsl(var(--brand-h) 100% 66%);}
#why .dn-key .dn-3 i{background:hsl(var(--brand-h) 30% 46%);}
#why .dn-key .dn-4 i{background:var(--border);}
#why .dn-key b{margin-left:auto; font-family:var(--font-display); font-weight:800;
  font-size:12px; color:var(--text); font-variant-numeric:tabular-nums;}


#why .br{list-style:none; margin:0; padding:0; display:grid; gap:clamp(11px,1.3vw,16px);}
#why .br-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin-bottom:7px;}
#why .br-top span{font-size:12.5px; color:var(--text-2);}
#why .br-top b{font-family:var(--font-display); font-weight:800; font-size:13.5px;
  letter-spacing:-0.03em; color:var(--brand-text); font-variant-numeric:tabular-nums;}
#why .br-rail{display:block; height:6px; border-radius:99px; background:var(--border);
  overflow:hidden;}
#why .br-rail i{display:block; height:100%; width:var(--w); border-radius:99px;
  background:var(--primary); transform:scaleX(0); transform-origin:left center;}
#why .wy-pane.on .br-rail i{transform:none; transition:transform .9s var(--ease) .2s;}


@media (max-width:980px){
  
  #why .wy-pane{grid-template-columns:1fr; gap:clamp(16px,2.4vw,24px);}
  #why .wy-txt, #why .wy-fig{grid-column:1;}
}
@media (max-width:600px){
  #why .wy-rail{grid-auto-flow:row; grid-auto-columns:auto;}
  #why .wy-tab{text-align:left; padding:12px 16px;}
  #why .dn-wrap{grid-template-columns:1fr; justify-items:center;}
  #why .dn-mid{left:50%; top:clamp(48px,14vw,62px);}
  #why .dn-key{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  #why .wy-pane{transition:none;}
  #why .br-rail i{transform:none;}
}


/* ??????????????????????????????????????????????????????????????????????
   SEARCH SPLIT V2 ? homepage AI variant (#search-split)
   ?????????????????????????????????????????????????????????????????????? */
/* ?? spl-styles ????????????????????????????????????????????????? */
/* ??????????????????????????????????????????????????????????????????????
   SEARCH HAS SPLIT ? the copy on the left, and on the right the same
   split drawn once: one query forking into the blue-link lane and the
   AI-answer lane, with the brand sitting in both. Sized to one screen.
   ?????????????????????????????????????????????????????????????????????? */
#search-split{padding-block:clamp(44px,5vw,72px); background:var(--bg-alt); overflow-x:clip;}
.spl-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(28px,4vw,64px); align-items:center;}
.spl-badge{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:99px; background:var(--surface);
  border:1px solid hsl(var(--brand-h) 75% 78%); color:var(--brand-text); font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; box-shadow:0 4px 12px -6px hsl(var(--brand-h) 90% 35% / .28);}
.spl-badge svg{width:14px; height:14px;}
#search-split h2{margin:16px 0 0; font-size:var(--h2); line-height:1.1; letter-spacing:-.035em; text-transform:none;}
#search-split h2 em{font-style:normal; color:var(--brand-text);}
.spl-say p{margin:14px 0 0; font-size:clamp(14.8px,1.15vw,15.8px); line-height:1.68; color:var(--text-2); max-width:60ch;}

.spl-viz{display:flex; flex-direction:column; align-items:stretch;}
.spl-q{align-self:center; padding:7px 16px; border-radius:99px; background:var(--surface); border:1px solid var(--border);
  font-size:12.6px; font-weight:700; color:var(--text);}
.spl-fork{position:relative; height:52px; display:block;}
.spl-fork i{position:absolute; border-color:hsl(var(--brand-h) 70% 74%); border-style:dashed; border-width:0;}
.spl-fork .stem{left:50%; top:0; height:18px; border-left-width:1.5px;}
.spl-fork .br{top:18px; height:24px;}
.spl-fork .br.l{right:50%; left:25%; border-top-width:1.5px; border-left-width:1.5px; border-top-left-radius:14px;}
.spl-fork .br.r{left:50%; right:25%; border-top-width:1.5px; border-right-width:1.5px; border-top-right-radius:14px;}
.spl-fork .tip{top:44px; width:7px; height:7px; border-radius:50%; border:0; background:hsl(var(--brand-h) 70% 74%);
  transform:translateX(-50%);}
.spl-fork .tip.l{left:25%;} .spl-fork .tip.r{left:75%;}
.spl-lanes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:6px;}
.spl-lane{display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:16px; background:var(--surface);
  border:1px solid var(--border); box-shadow:0 14px 30px -26px hsl(var(--brand-h) 90% 25% / .3);}
.spl-lane header{display:flex; flex-wrap:wrap; gap:6px;}
.spl-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 9px 4px 5px; border-radius:99px; background:var(--bg-alt);
  border:1px solid var(--border-soft); font-size:11.4px; font-weight:600; color:var(--text); white-space:nowrap;}
.spl-mk{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--surface); overflow:hidden;}
.spl-logo{background:var(--logo) center/72% no-repeat, var(--surface);}
.spl-ai{color:var(--primary);} .spl-ai svg{width:11px; height:11px;}
.spl-mock{display:flex; flex-direction:column; gap:7px; padding:11px; border-radius:12px; background:var(--bg-alt);
  border:1px solid var(--border-soft); min-height:96px;}
.spl-row{display:block;}
.spl-row b{display:block; height:7px; width:62%; border-radius:6px; background:hsl(var(--brand-h) 45% 76%);}
.spl-row i{display:block; height:5px; width:86%; margin-top:5px; border-radius:6px; background:var(--border);}
.spl-row.is-you b{width:auto; height:auto; font-size:11.6px; font-weight:800; color:var(--brand-text); background:none;}
.spl-row.is-you i{background:hsl(var(--brand-h) 60% 86%);}
.spl-ans b{display:block; height:6px; width:92%; border-radius:6px; background:var(--border);}
.spl-ans i{display:block; height:6px; width:80%; margin-top:6px; border-radius:6px; background:var(--border);}
.spl-ans i.s2{width:58%;}
.spl-cite{display:block; margin-top:9px; font-size:11px; font-weight:600; color:var(--muted);}
.spl-cite em{font-style:normal; color:var(--brand-text); font-weight:700;}
.spl-lane footer{font-size:11.6px; font-weight:600; color:var(--muted);}
.spl-lane.is-ai{border-color:hsl(var(--brand-h) 70% 80%);}
.spl-both{margin-top:12px; display:flex; align-items:center; justify-content:center; gap:9px; padding:11px 16px; border-radius:14px;
  background:var(--primary); color:#fff; font-size:13.4px; font-weight:700;}
.spl-both-dot{width:9px; height:9px; border-radius:3px; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25);}

@media (max-width:1000px){
  .spl-grid{grid-template-columns:minmax(0,1fr); gap:26px;}
  .spl-viz{max-width:620px; width:100%;}
}
@media (max-width:560px){
  .spl-lanes{grid-template-columns:minmax(0,1fr);}
  .spl-fork{height:22px;}
  .spl-fork .br,.spl-fork .tip{display:none;}
  .spl-fork .stem{height:22px;}
}


/* ?? spl-viz2 ????????????????????????????????????????????????? */
/* ??????????????????????????????????????????????????????????????????????
   The split, shown rather than described: one query, then the two lanes
   play through the surfaces they own ? Google's results and map pack on
   the left, the AI answers on the right ? and the brand turns up in every
   one of them. The chips are real tabs: clicking one holds that surface,
   otherwise the lanes cycle on their own.
   ?????????????????????????????????????????????????????????????????????? */
.spl-viz{display:block;}
.spl-stage{display:flex; flex-direction:column;}
.spl-q{align-self:center; display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:99px;
  background:var(--surface); border:1px solid var(--border); font-size:12.6px; font-weight:700; color:var(--text);
  box-shadow:0 10px 24px -20px hsl(var(--brand-h) 90% 25% / .5);}
.spl-q-dot{width:8px; height:8px; border-radius:50%; background:var(--primary); animation:splPing 2.4s ease-out infinite;}
@keyframes splPing{0%{box-shadow:0 0 0 0 hsl(var(--brand-h) 100% 42% / .5);} 70%,100%{box-shadow:0 0 0 8px hsl(var(--brand-h) 100% 42% / 0);}}

.spl-lane{display:flex; flex-direction:column; gap:10px; padding:13px; border-radius:16px; background:var(--surface);
  border:1px solid var(--border); box-shadow:0 16px 34px -28px hsl(var(--brand-h) 90% 25% / .35);
  transition:border-color .45s ease, box-shadow .45s ease, transform .45s ease;}
.spl-lane.is-live{border-color:hsl(var(--brand-h) 75% 72%); box-shadow:0 18px 36px -24px hsl(var(--brand-h) 90% 30% / .4);}
.spl-tabs{display:flex; flex-wrap:wrap; gap:6px;}
.spl-chip{position:relative; display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 5px; border-radius:99px;
  background:var(--bg-alt); border:1px solid var(--border-soft); font:inherit; font-size:11.4px; font-weight:600; color:var(--text);
  white-space:nowrap; cursor:pointer; transition:background .3s ease, border-color .3s ease, color .3s ease;}
.spl-chip:hover{border-color:hsl(var(--brand-h) 70% 76%);}
.spl-chip[aria-selected="true"]{background:var(--surface); border-color:hsl(var(--brand-h) 80% 62%); color:var(--brand-text);}
.spl-chip:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.spl-ring{position:absolute; inset:-1px; border-radius:99px; pointer-events:none; border:1px solid transparent;}
.spl-chip[aria-selected="true"] .spl-ring{border-color:hsl(var(--brand-h) 80% 62% / .45); animation:splRing 3.6s linear;}
@keyframes splRing{from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);}}
.spl-mk{display:grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--surface); overflow:hidden; flex:none;}
.spl-logo{background:var(--logo) center/72% no-repeat, var(--surface);}
.spl-ai{color:var(--primary);} .spl-ai svg{width:11px; height:11px;}

.spl-screen{display:grid;}
.spl-panel{grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(8px); pointer-events:none;
  transition:opacity .45s ease, transform .45s ease, visibility .45s;}
.spl-panel.on{opacity:1; visibility:visible; transform:none; pointer-events:auto;}
.spl-bar{display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:99px; background:var(--bg-alt);
  border:1px solid var(--border-soft); font-size:11.5px; color:var(--text-2);}
.spl-bar-ic{display:grid; place-items:center; width:16px; height:16px; flex:none;}
.spl-typed{white-space:nowrap; overflow:hidden;}
.spl-caret{width:1.5px; height:12px; background:var(--primary); animation:splBlink 1s steps(1) infinite;}
@keyframes splBlink{50%{opacity:0;}}

.spl-res,.spl-map,.spl-ansbox{margin-top:9px; padding:11px; border-radius:12px; background:var(--bg-alt); border:1px solid var(--border-soft);}
.spl-res{display:flex; flex-direction:column; gap:9px;}
.spl-r{display:block; animation:splIn .5s ease both; animation-delay:calc(var(--i) * .18s + .25s);}
.spl-r b{display:block; height:7px; width:58%; border-radius:6px; background:hsl(var(--brand-h) 40% 78%);}
.spl-r i{display:block; height:5px; width:84%; margin-top:5px; border-radius:6px; background:var(--border);}
.spl-r.is-you{padding:8px 10px; margin:-2px -2px; border-radius:10px; background:var(--surface);
  border:1px solid hsl(var(--brand-h) 70% 80%); box-shadow:0 8px 20px -16px hsl(var(--brand-h) 90% 30% / .7);}
.spl-r.is-you em{display:block; font-style:normal; font-size:12.4px; font-weight:800; color:var(--brand-text);}
.spl-r.is-you u{display:block; margin-top:2px; font-size:10.6px; text-decoration:none; color:var(--muted);}
.spl-r.is-you i{width:92%; margin-top:6px; background:hsl(var(--brand-h) 50% 88%);}
@keyframes splIn{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

.spl-map{position:relative; height:104px; overflow:hidden;
  background:
    repeating-linear-gradient(115deg, transparent 0 22px, hsl(var(--brand-h) 40% 88% / .5) 22px 23px),
    repeating-linear-gradient(-15deg, transparent 0 26px, hsl(var(--brand-h) 40% 88% / .5) 26px 27px), var(--bg-alt);}
.spl-pin{position:absolute; width:10px; height:10px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:hsl(var(--brand-h) 60% 72%); left:16%; top:26%; animation:splDrop .5s var(--pop, cubic-bezier(.2,.8,.2,1)) both;
  animation-delay:calc(var(--i) * .16s + .25s);}
.spl-pin.p2{left:64%; top:16%;} .spl-pin.p3{left:80%; top:56%;}
@keyframes splDrop{from{opacity:0; transform:rotate(-45deg) translateY(-10px);} to{opacity:1; transform:rotate(-45deg);}}
.spl-biz{position:absolute; left:10px; bottom:9px; padding:7px 11px; border-radius:10px; background:var(--surface);
  border:1px solid hsl(var(--brand-h) 70% 80%); box-shadow:0 10px 22px -18px hsl(var(--brand-h) 90% 30% / .8);
  animation:splIn .5s ease both; animation-delay:calc(var(--i) * .16s + .25s);}
.spl-biz em{display:block; font-style:normal; font-size:12.2px; font-weight:800; color:var(--brand-text);}
.spl-biz u{display:block; margin-top:1px; font-size:10.4px; text-decoration:none; color:var(--muted);}

.spl-ansbox{display:flex; flex-direction:column; gap:7px; min-height:104px;}
.spl-atag{align-self:flex-start; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:99px;
  background:hsl(var(--brand-h) 80% 94%); color:var(--brand-text); font-size:10.4px; font-weight:700;}
.spl-l{display:block; height:6px; border-radius:6px; background:var(--border); width:0;
  animation:splWrite .5s ease both; animation-delay:calc(var(--i) * .22s + .3s);}
.spl-l{--w:94%;} .spl-l.s2{--w:88%;} .spl-l.s3{--w:62%;}
@keyframes splWrite{from{width:0; opacity:.4;} to{width:var(--w); opacity:1;}}
.spl-cites{display:block; margin-top:2px; font-size:10.8px; font-weight:600; color:var(--muted);
  animation:splIn .5s ease both; animation-delay:calc(var(--i) * .22s + .3s);}
.spl-cites b{display:inline-block; margin-left:4px; padding:2px 8px; border-radius:99px; background:var(--surface);
  border:1px solid hsl(var(--brand-h) 70% 80%); color:var(--brand-text); font-size:10.4px;}
.spl-lane footer{font-size:11.6px; font-weight:600; color:var(--muted);}

.spl-lane:not(.is-live) .spl-panel.on{opacity:.55; filter:saturate(.7);}
.spl-lane:not(.is-live) .spl-caret{opacity:0;}
@media (prefers-reduced-motion:reduce){
  .spl-q-dot,.spl-caret,.spl-chip[aria-selected="true"] .spl-ring{animation:none;}
  .spl-r,.spl-pin,.spl-biz,.spl-l,.spl-cites{animation:none; opacity:1;}
  .spl-l{width:var(--w);}
  .spl-panel{transition:opacity .2s linear;}
}

/* ?? spl-real ????????????????????????????????????????????????? */
/* real result text rather than grey bars: each line writes itself in, the
   brand's own result stays highlighted, and a pulse runs down the fork so
   the query visibly reaches both lanes */
#search-split .spl-r{display:block; animation:splIn .5s ease both; animation-delay:calc(var(--i) * .18s + .2s);}
#search-split .spl-r em{display:block; font-style:normal; font-size:12.4px; font-weight:700; line-height:1.3; color:#1a4fa0;}
html[data-theme="dark"] #search-split .spl-r em{color:hsl(var(--brand-h) 70% 72%);}
#search-split .spl-r u{display:block; margin-top:2px; font-size:10.4px; text-decoration:none; color:var(--muted);}
#search-split .spl-r i{display:block; margin-top:3px; font-style:normal; font-size:10.8px; line-height:1.45; color:var(--text-2);
  background:none; height:auto; width:auto;}
#search-split .spl-r.is-you{padding:9px 10px; margin:0 -2px; border-radius:10px; background:var(--surface);
  border:1px solid hsl(var(--brand-h) 70% 80%); box-shadow:0 8px 20px -16px hsl(var(--brand-h) 90% 30% / .7);}
#search-split .spl-r.is-you em{color:var(--brand-text); font-weight:800;}
#search-split .spl-res{gap:9px;}

#search-split .spl-ansbox .spl-l{display:block; width:auto; height:auto; margin:0; background:none; border-radius:0;
  font-size:11.2px; line-height:1.45; color:var(--text-2);
  animation:splWrite2 .55s ease both; animation-delay:calc(var(--i) * .5s + .3s);}
#search-split .spl-ansbox .spl-l + .spl-l{margin-top:6px;}
@keyframes splWrite2{from{opacity:0; clip-path:inset(0 100% 0 0);} to{opacity:1; clip-path:inset(0 0 0 0);}}
#search-split .spl-ansbox{min-height:0;}


/* the pulse that runs from the query down into each lane */
.spl-fork .pulse{position:absolute; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:var(--primary); box-shadow:0 0 0 4px hsl(var(--brand-h) 100% 42% / .18); border:0;
  animation:splRun 3.2s ease-in-out infinite;}
.spl-fork .pulse.r{animation-delay:.45s;}
@keyframes splRun{
  0%{left:50%; top:0; opacity:0;}
  10%{opacity:1;}
  30%{left:50%; top:18px;}
  58%{top:18px;}
  92%{opacity:1;}
  100%{top:44px; opacity:0;}
}
.spl-fork .pulse.l{animation-name:splRunL;} .spl-fork .pulse.r{animation-name:splRunR;}
@keyframes splRunL{
  0%{left:50%; top:2px; opacity:0;} 12%{opacity:1;}
  34%{left:50%; top:18px;} 62%{left:25%; top:18px;}
  95%{opacity:1;} 100%{left:25%; top:44px; opacity:0;}}
@keyframes splRunR{
  0%{left:50%; top:2px; opacity:0;} 12%{opacity:1;}
  34%{left:50%; top:18px;} 62%{left:75%; top:18px;}
  95%{opacity:1;} 100%{left:75%; top:44px; opacity:0;}}
.spl-fork .tip{animation:splTip 3.2s ease-in-out infinite;}
.spl-fork .tip.r{animation-delay:.45s;}
@keyframes splTip{0%,72%{transform:translateX(-50%) scale(1); box-shadow:0 0 0 0 hsl(var(--brand-h) 100% 42% / .35);}
  84%{transform:translateX(-50%) scale(1.5); box-shadow:0 0 0 7px hsl(var(--brand-h) 100% 42% / 0);}
  100%{transform:translateX(-50%) scale(1);}}
@media (max-width:560px){ .spl-fork .pulse{display:none;} }
@media (prefers-reduced-motion:reduce){
  #search-split .spl-r,#search-split .spl-ansbox .spl-l,.spl-fork .pulse,.spl-fork .tip{animation:none; opacity:1; clip-path:none;}
  .spl-fork .pulse{display:none;}
}

/* ?? spl-fill ????????????????????????????????????????????????? */
/* every surface fills its lane: the shorter ones (the map pack, a short
   answer) stretch instead of leaving a gap above the lane's footer */
#search-split .spl-panel{display:flex; flex-direction:column;}
#search-split .spl-res,#search-split .spl-map,#search-split .spl-ansbox{flex:1 1 auto;}
#search-split .spl-map{height:auto; min-height:120px;}
#search-split .spl-biz{bottom:12px;}
#search-split .spl-ansbox{justify-content:flex-start;}

/* ?? spl-pins ????????????????????????????????????????????????? */
/* the map pins: a proper teardrop with a white centre and a shadow on the
   ground under it, dropping in one after another and then breathing. The
   brand's own pin is the filled blue one, and the rating stars are gold. */
#search-split .spl-pin{width:16px; height:22px; border-radius:0; background:none; transform:none;
  filter:drop-shadow(0 4px 5px hsl(var(--brand-h) 90% 25% / .28));
  animation:splDrop2 .6s var(--pop, cubic-bezier(.2,.8,.2,1)) both, splPinBob 3.4s ease-in-out infinite;
  animation-delay:calc(var(--i) * .16s + .25s), calc(var(--i) * .5s + 1s);}
#search-split .spl-pin::before{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, hsl(var(--brand-h) 80% 66%), hsl(var(--brand-h) 90% 52%));
  -webkit-mask:var(--pin) center/contain no-repeat; mask:var(--pin) center/contain no-repeat;}
#search-split .spl-pin::after{content:""; position:absolute; left:50%; bottom:-5px; width:12px; height:4px;
  transform:translateX(-50%); border-radius:50%; background:hsl(var(--brand-h) 90% 30% / .22);
  animation:splPinShade 3.4s ease-in-out infinite; animation-delay:inherit;}
#search-split .spl-pin.is-you{width:19px; height:26px;}
#search-split .spl-pin.is-you::before{background:linear-gradient(180deg, hsl(var(--brand-h) 85% 58%), hsl(var(--brand-h) 100% 38%));}
/* the teardrop with its centre punched out, so the pin reads as a pin */
#search-split .spl-map{--pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 44'%3E%3Cpath fill-rule='evenodd' d='M16 44s16-18.6 16-28a16 16 0 1 0-32 0c0 9.4 16 28 16 28zM16 21.6a5.6 5.6 0 1 0 0-11.2 5.6 5.6 0 0 0 0 11.2z'/%3E%3C/svg%3E");}
#search-split .spl-pin{position:absolute;}
@keyframes splDrop2{from{opacity:0; transform:translateY(-14px) scale(.85);} to{opacity:1; transform:none;}}
@keyframes splPinBob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);}}
@keyframes splPinShade{0%,100%{opacity:.22; transform:translateX(-50%) scale(1);} 50%{opacity:.12; transform:translateX(-50%) scale(.8);}}

.spl-stars{color:#F5A623; letter-spacing:.5px;}

@media (prefers-reduced-motion:reduce){
  #search-split .spl-pin,#search-split .spl-pin::after{animation:none;}
}

/* stacked review-aid switches: AI above Why */
.vsw[data-vsw="ai"]{bottom:70px;}

/* === home variants: about / industries / nsr (from tekcroft-home) === */
/* --- style-block-6.css --- */

/* ??????????????????????????????????????????????????????????????????????
   WHO WE ARE ? variant 2: the copy on the left, the six-stage blueprint
   on the right, and the figures along the foot. The stage the blueprint
   is on walks forward on its own and follows the pointer.
   ?????????????????????????????????????????????????????????????????????? */
#about-v2{padding-block:clamp(40px,4.6vw,68px); background:var(--surface);}
.bw-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,3.4vw,56px);
  align-items:center;}
.bw-say .smark{margin-bottom:12px;}
#about-v2 h2{margin:0; font-size:var(--h2); line-height:1.08; letter-spacing:-.04em; text-transform:none;}
#about-v2 h2 em{font-style:normal; color:var(--brand-text);}
.bw-say p{margin:16px 0 0; font-size:clamp(14.4px,1.12vw,15.8px); line-height:1.7; color:var(--text-2); max-width:56ch;}
.bw-say .btn{margin-top:clamp(18px,2vw,26px);}

.bw-board{padding:clamp(20px,2.2vw,30px); border-radius:22px; background:var(--bg-alt);
  border:1px solid var(--border);}
#about-v2 .bw-board h3{margin:0; font-family:var(--font-display); font-size:var(--h3);
  font-weight:800; letter-spacing:-.025em; color:var(--text); text-transform:none;}
.bw-board > p{margin:10px 0 clamp(16px,1.8vw,22px); font-size:clamp(13.4px,1.05vw,14.6px); line-height:1.65;
  color:var(--text-2);}
.bw-steps{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.bw-step{position:relative; display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:13px;
  background:var(--surface); border:1px solid var(--border);
  transition:border-color .3s var(--ease), transform .3s var(--ease);}
.bw-step + .bw-step::before{content:""; position:absolute; left:26px; top:-9px; width:1.5px; height:9px;
  background:hsl(var(--brand-h) 60% 80%);}
.bw-step b{font-family:var(--font-display); font-size:clamp(13.4px,1.15vw,15px); font-weight:700;
  letter-spacing:-.02em; color:var(--text);}
.bw-ic{flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:10px;
  background:hsl(var(--brand-h) 85% 95%); color:var(--brand-text);
  transition:background .3s var(--ease), color .3s var(--ease);}
html[data-theme="dark"] .bw-ic{background:hsl(var(--brand-h) 40% 18%);}
.bw-ic svg{width:16px; height:16px;}
.bw-step.on{border-color:var(--primary); transform:translateX(3px);}
.bw-step.on .bw-ic{background:var(--primary); color:#fff;}

.bw-figs{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:clamp(8px,1vw,14px);
  margin-top:clamp(24px,3vw,40px); padding-top:clamp(18px,2vw,26px); border-top:1px solid var(--border);}
.bw-fig b{display:block; font-family:var(--font-display); font-size:clamp(19px,2vw,28px); font-weight:800;
  letter-spacing:-.03em; color:var(--brand-text); line-height:1;}
.bw-fig b em{font-style:normal;}
.bw-fig span{display:block; margin-top:7px; font-size:clamp(11.4px,.95vw,12.6px); line-height:1.35; color:var(--muted);}

@media (max-width:1040px){
  .bw-grid{grid-template-columns:minmax(0,1fr); gap:26px;}
  .bw-figs{grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:18px;}
}
@media (max-width:640px){
  .bw-figs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bw-say .btn{width:100%; justify-content:center;}
  .bw-board{padding:18px;}
}
@media (prefers-reduced-motion:reduce){ .bw-step{transition:none;} }


/* --- style-block-7.css --- */

/* ??????????????????????????????????????????????????????????????????????
   WHO WE ARE ? variant 3: the copy and the figures share the top, and the
   blueprint runs across the foot as a track. The stage it is on moves
   forward on its own, the rail fills behind it, and any stage can be
   picked up with the pointer or the arrow keys.
   ?????????????????????????????????????????????????????????????????????? */
#about-v3{padding-block:clamp(40px,4.6vw,68px); background:var(--surface);}
.bt-top{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(24px,3.4vw,56px);
  align-items:center;}
.bt-say .smark{margin-bottom:12px;}
#about-v3 h2{margin:0; font-size:var(--h2); line-height:1.08; letter-spacing:-.04em; text-transform:none;}
#about-v3 h2 em{font-style:normal; color:var(--brand-text);}
.bt-say p{margin:16px 0 0; font-size:clamp(14.4px,1.12vw,15.8px); line-height:1.7; color:var(--text-2); max-width:56ch;}
.bt-say .btn{margin-top:clamp(18px,2vw,26px);}

/* the figures */
.bt-figs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.2vw,16px);}
.bt-fig{padding:clamp(14px,1.5vw,18px); border-radius:16px; background:var(--bg-alt); border:1px solid var(--border);
  transition:border-color .3s var(--ease), transform .3s var(--ease);}
.bt-fig:hover{border-color:hsl(var(--brand-h) 70% 80%); transform:translateY(-2px);}
.bt-fig:last-child{grid-column:1 / -1;}
.bt-fig b{display:block; font-family:var(--font-display); font-size:clamp(21px,2.1vw,30px); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:var(--brand-text);}
.bt-fig b em{font-style:normal;}
.bt-fig span{display:block; margin-top:7px; font-size:clamp(11.6px,.98vw,13px); color:var(--muted);}

/* the track */
.bt-board{margin-top:clamp(26px,3vw,42px); padding:clamp(20px,2.2vw,30px); border-radius:22px;
  background:var(--bg-alt); border:1px solid var(--border);
  display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(20px,2.6vw,40px); align-items:center;}
#about-v3 .bt-head h3{margin:0; font-family:var(--font-display); font-size:var(--h3); font-weight:800;
  letter-spacing:-.025em; color:var(--text); text-transform:none;}
.bt-head p{margin:9px 0 0; font-size:clamp(13.2px,1.05vw,14.4px); line-height:1.6; color:var(--text-2);}

.bt-track{position:relative; padding-top:6px;}
.bt-rail{position:absolute; left:6%; right:6%; top:29px; height:3px; border-radius:99px;
  background:hsl(var(--brand-h) 55% 88%); overflow:hidden;}
.bt-fill{display:block; height:100%; width:0; background:var(--primary); border-radius:99px;
  transition:width .5s var(--ease);}
.bt-steps{position:relative; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px;}
.bt-step{display:flex; flex-direction:column; align-items:center; gap:9px; padding:0; border:0; background:none;
  font:inherit; cursor:pointer;}
.bt-dot{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--surface);
  border:1px solid var(--border); color:var(--brand-text);
  transition:background .32s var(--ease), border-color .32s var(--ease), color .32s var(--ease), transform .32s var(--pop);}
.bt-dot svg{width:20px; height:20px;}
.bt-step b{font-family:var(--font-display); font-size:clamp(11.6px,1vw,13.4px); font-weight:700;
  letter-spacing:-.015em; color:var(--text-2); transition:color .32s var(--ease);}
.bt-step:hover .bt-dot{border-color:hsl(var(--brand-h) 70% 76%);}
.bt-step.on .bt-dot{background:var(--primary); border-color:var(--primary); color:#fff; transform:scale(1.06);}
.bt-step.on b{color:var(--text);}
.bt-step.done .bt-dot{border-color:hsl(var(--brand-h) 70% 76%);}
.bt-step:focus-visible .bt-dot{outline:2px solid var(--primary); outline-offset:3px;}

@media (max-width:1040px){
  .bt-top{grid-template-columns:minmax(0,1fr); gap:26px;}
  .bt-board{grid-template-columns:minmax(0,1fr); gap:20px;}
}
@media (max-width:640px){
  .bt-figs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bt-steps{grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 4px;}
  .bt-rail{display:none;}
  .bt-say .btn{width:100%; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){ .bt-dot,.bt-fill,.bt-fig{transition:none;} }


/* --- style-block-8.css --- */

/* ??????????????????????????????????????????????????????????????????????
   WHO WE ARE ? variant 4: the blueprint is drawn, not listed. The panel
   holds a plan in brand blue; as the stages advance the route is traced
   and that stage's part of the drawing comes forward. Ticks, pointer and
   arrow keys all steer it.
   ?????????????????????????????????????????????????????????????????????? */
#about-v4{padding-block:clamp(40px,4.6vw,68px); background:var(--surface);}
.bp-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(24px,3.4vw,56px);
  align-items:center;}
.bp-say .smark{margin-bottom:12px;}
#about-v4 h2{margin:0; font-size:var(--h2); line-height:1.08; letter-spacing:-.04em; text-transform:none;}
#about-v4 h2 em{font-style:normal; color:var(--brand-text);}
.bp-say p{margin:16px 0 0; font-size:clamp(14.4px,1.12vw,15.8px); line-height:1.7; color:var(--text-2); max-width:56ch;}
.bp-say .btn{margin-top:clamp(18px,2vw,26px);}

/* the panel */
.bp-panel{position:relative; padding:clamp(20px,2.2vw,28px); border-radius:24px; overflow:hidden;
  background:var(--primary); color:#fff;
  box-shadow:0 30px 60px -38px hsl(var(--brand-h) 95% 30% / .9);}
.bp-panel::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:28px 28px;}
.bp-panel > *{position:relative; z-index:1;}
.bp-panel-top{display:flex; align-items:center; justify-content:space-between; gap:14px;}
#about-v4 .bp-panel-top h3{margin:0; font-family:var(--font-display); font-size:var(--h3);
  font-weight:800; letter-spacing:-.025em; color:#fff; text-transform:none;}
.bp-count{display:inline-flex; align-items:baseline; gap:2px; padding:5px 11px; border-radius:99px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);}
.bp-count b{font-family:var(--font-display); font-size:13px; font-weight:800;}
.bp-count i{font-style:normal; font-size:11px; opacity:.75;}
.bp-lede{margin:10px 0 0; font-size:clamp(12.8px,1.02vw,14px); line-height:1.6; color:rgba(255,255,255,.82); max-width:52ch;}

/* the drawing */
.bp-canvas{position:relative; margin-top:clamp(14px,1.6vw,20px); border-radius:16px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); padding:10px;}
.bp-canvas svg{display:block; width:100%; height:auto;}
.bp-route{fill:none; stroke:rgba(255,255,255,.3); stroke-width:1.6; stroke-dasharray:4 6;}
.bp-route-run{fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:var(--len,700); stroke-dashoffset:var(--off,700); transition:stroke-dashoffset .6s var(--ease);}
.bp-el{fill:none; stroke:rgba(255,255,255,.4); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .4s var(--ease), opacity .4s var(--ease), transform .5s var(--pop);
  transform-box:fill-box; transform-origin:center;}
.bp-el.on{stroke:#fff; opacity:1; transform:scale(1.06);}
.bp-el.past{stroke:rgba(255,255,255,.75);}
.bp-stage{position:absolute; right:14px; bottom:14px; text-align:right;}
.bp-stage em{display:block; font-style:normal; font-size:10.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.7);}
.bp-stage b{display:block; font-family:var(--font-display); font-size:clamp(20px,2.2vw,30px); font-weight:800;
  letter-spacing:-.03em; line-height:1.1;}

.bp-ticks{display:flex; flex-wrap:wrap; gap:6px; margin-top:clamp(14px,1.6vw,18px);}
.bp-tick{padding:6px 12px; border-radius:99px; border:1px solid rgba(255,255,255,.3); background:transparent;
  color:rgba(255,255,255,.82); font:inherit; font-size:11.8px; font-weight:700; cursor:pointer;
  transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);}
.bp-tick:hover{border-color:#fff;}
.bp-tick.on{background:#fff; border-color:#fff; color:var(--brand-text);}
.bp-tick:focus-visible{outline:2px solid #fff; outline-offset:2px;}

/* the figures */
.bp-figs{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:clamp(8px,1vw,14px);
  margin-top:clamp(24px,3vw,40px); padding-top:clamp(18px,2vw,26px); border-top:1px solid var(--border);}
.bp-fig b{display:block; font-family:var(--font-display); font-size:clamp(19px,2vw,28px); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:var(--brand-text);}
.bp-fig b em{font-style:normal;}
.bp-fig span{display:block; margin-top:7px; font-size:clamp(11.2px,.94vw,12.4px); line-height:1.35; color:var(--muted);}

@media (max-width:1040px){
  .bp-grid{grid-template-columns:minmax(0,1fr); gap:26px;}
  .bp-figs{grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:18px;}
}
@media (max-width:640px){
  .bp-figs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bp-say .btn{width:100%; justify-content:center;}
  .bp-stage{position:static; text-align:left; margin-top:10px;}
}
@media (prefers-reduced-motion:reduce){ .bp-el,.bp-route-run,.bp-tick{transition:none;} }


/* --- style-block-9.css --- */

/* ??????????????????????????????????????????????????????????????????????
   WHO WE ARE ? variant 5: the six stages read as a list rather than a
   diagram. A spine runs down beside them and fills as the engagement
   moves; the stage in hand takes the brand colour and its rule draws
   across. Pointer, click and arrow keys all steer it.
   ?????????????????????????????????????????????????????????????????????? */
#about-v5{padding-block:clamp(32px,3.6vw,52px); background:var(--surface);}
.st-grid{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(24px,3.4vw,56px);
  align-items:center;}
.st-say .smark{margin-bottom:12px;}
#about-v5 h2{margin:0; font-size:var(--h2); line-height:1.08; letter-spacing:-.04em; text-transform:none;}
#about-v5 h2 em{font-style:normal; color:var(--brand-text);}
.st-say p{margin:14px 0 0; font-size:clamp(13.8px,1.06vw,15.2px); line-height:1.66; color:var(--text-2); max-width:54ch;}
.st-say .btn{margin-top:18px;}

.st-board{padding:clamp(18px,2vw,26px); border-radius:22px; background:var(--bg-alt); border:1px solid var(--border);}
.st-board-top{display:flex; align-items:center; justify-content:space-between; gap:12px;}
#about-v5 .st-board-top h3{margin:0; font-family:var(--font-display); font-size:var(--h3);
  font-weight:800; letter-spacing:-.025em; color:var(--text); text-transform:none;}
.st-count{display:inline-flex; align-items:baseline; gap:2px; padding:4px 10px; border-radius:99px;
  background:var(--surface); border:1px solid var(--border); color:var(--brand-text);}
.st-count b{font-family:var(--font-display); font-size:12.5px; font-weight:800;}
.st-count i{font-style:normal; font-size:10.5px; opacity:.7;}
.st-lede{margin:9px 0 clamp(12px,1.4vw,18px); font-size:clamp(12.6px,1vw,13.6px); line-height:1.55; color:var(--text-2);}

.st-list{position:relative; padding-left:26px;}
.st-spine{position:absolute; left:9px; top:14px; bottom:14px; width:2px; border-radius:99px;
  background:hsl(var(--brand-h) 55% 88%); overflow:hidden;}
.st-spine i{display:block; width:100%; height:0; background:var(--primary); border-radius:99px;
  transition:height .5s var(--ease);}
.st-row{position:relative; display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center;
  gap:12px; width:100%; padding:9px 4px; border:0; background:none; font:inherit; text-align:left; cursor:pointer;}
.st-row::before{content:""; position:absolute; left:-21px; top:50%; width:9px; height:9px; border-radius:50%;
  transform:translateY(-50%); background:var(--surface); border:2px solid hsl(var(--brand-h) 55% 82%);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--pop);}
.st-row.on::before{background:var(--primary); border-color:var(--primary); transform:translateY(-50%) scale(1.15);}
.st-row.done::before{border-color:var(--primary);}
.st-n{font-family:var(--font-display); font-size:11.5px; font-weight:800; letter-spacing:.06em; color:var(--muted);
  transition:color .3s var(--ease);}
.st-name{font-family:var(--font-display); font-size:clamp(16px,1.6vw,21px); font-weight:800; letter-spacing:-.03em;
  color:var(--text-2); transition:color .3s var(--ease), transform .3s var(--ease);}
.st-rule{display:block; height:1px; background:var(--border); position:relative; overflow:hidden;}
.st-rule i{position:absolute; inset:0 auto 0 0; width:0; background:var(--primary);
  transition:width .45s var(--ease);}
.st-go{font-size:14px; color:var(--brand-text); opacity:0; transform:translateX(-6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);}
.st-row.on .st-n{color:var(--brand-text);}
.st-row.on .st-name{color:var(--text); transform:translateX(2px);}
.st-row.on .st-rule i{width:100%;}
.st-row.on .st-go{opacity:1; transform:none;}
.st-row:hover .st-name{color:var(--text);}
.st-row:focus-visible{outline:2px solid var(--primary); outline-offset:3px; border-radius:10px;}

.st-figs{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:clamp(8px,1vw,14px);
  margin-top:clamp(20px,2.4vw,32px); padding-top:clamp(16px,1.8vw,22px); border-top:1px solid var(--border);}
.st-fig b{display:block; font-family:var(--font-display); font-size:clamp(18px,1.9vw,26px); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:var(--brand-text);}
.st-fig b em{font-style:normal;}
.st-fig span{display:block; margin-top:6px; font-size:clamp(11px,.92vw,12.2px); line-height:1.35; color:var(--muted);}

@media (max-width:1040px){
  .st-grid{grid-template-columns:minmax(0,1fr); gap:24px;}
  .st-figs{grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:16px;}
}
@media (max-width:640px){
  .st-figs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .st-say .btn{width:100%; justify-content:center;}
  .st-name{font-size:17px;}
}
@media (prefers-reduced-motion:reduce){
  .st-spine i,.st-rule i,.st-row::before,.st-name,.st-go{transition:none;}
}


/* --- style-block-10.css --- */

/* ??????????????????????????????????????????????????????????????????????
   WHO WE ARE ? variant 6: the blueprint drawn as a ribbon. Six chevrons
   run left to right, the one in hand lifts into brand blue and the ones
   behind it are already filled, so the row reads as progress. The
   figures sit under the same board.
   ?????????????????????????????????????????????????????????????????????? */
#about-v6{padding-block:clamp(32px,3.6vw,52px); background:var(--surface);}
.cv-head{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(20px,3vw,48px);
  align-items:end; margin-bottom:clamp(20px,2.4vw,30px);}
.cv-say .smark{margin-bottom:12px;}
#about-v6 h2{margin:0; font-size:var(--h2); line-height:1.06; letter-spacing:-.04em; text-transform:none;}
#about-v6 h2 em{display:inline; font-style:normal; color:var(--brand-text);}
.cv-copy p{margin:0 0 12px; font-size:clamp(13.4px,1.04vw,14.8px); line-height:1.62; color:var(--text-2);}
.cv-copy p + p{margin-bottom:14px;}

.cv-board{padding:clamp(18px,2vw,26px); border-radius:24px; background:var(--bg-alt); border:1px solid var(--border);}
.cv-board-top{display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:clamp(14px,2vw,30px);
  align-items:baseline; margin-bottom:clamp(14px,1.8vw,22px);}
#about-v6 .cv-board-top h3{margin:0; font-family:var(--font-display); font-size:var(--h3);
  font-weight:800; letter-spacing:-.025em; color:var(--text); text-transform:none; white-space:nowrap;}
.cv-board-top p{margin:0; font-size:clamp(12.4px,1vw,13.6px); line-height:1.55; color:var(--text-2);}

/* the ribbon */
.cv-ribbon{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px;}
.cv{position:relative; padding:0; border:0; background:none; font:inherit; cursor:pointer;
  filter:drop-shadow(0 12px 22px hsl(var(--brand-h) 90% 30% / .12));}
.cv-in{display:flex; align-items:center; gap:10px; padding:14px 14px 14px 26px; min-height:74px;
  background:var(--surface); border:1px solid var(--border); color:var(--text-2);
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  transition:background .32s var(--ease), color .32s var(--ease), transform .32s var(--pop);}
.cv:first-child .cv-in{clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  padding-left:16px; border-radius:14px 0 0 14px;}
.cv:last-child .cv-in{clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
  border-radius:0 14px 14px 0;}
.cv-ic{flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:10px;
  background:hsl(var(--brand-h) 85% 95%); color:var(--brand-text);
  transition:background .32s var(--ease), color .32s var(--ease);}
html[data-theme="dark"] .cv-ic{background:hsl(var(--brand-h) 40% 18%);}
.cv-ic svg{width:16px; height:16px;}
.cv-t i{display:block; font-style:normal; font-size:10px; font-weight:800; letter-spacing:.1em; opacity:.7;}
.cv-t b{display:block; font-family:var(--font-display); font-size:clamp(12.6px,1.12vw,14.6px); font-weight:800;
  letter-spacing:-.02em; color:var(--text); transition:color .32s var(--ease);}
.cv.done .cv-in{background:hsl(var(--brand-h) 85% 95%);}
.cv.on .cv-in{background:var(--primary); color:#fff; transform:translateY(-3px);}
.cv.on .cv-t b,.cv.on .cv-t i{color:#fff;}
.cv.on .cv-ic{background:rgba(255,255,255,.22); color:#fff;}
.cv:hover .cv-in{transform:translateY(-2px);}
.cv:focus-visible .cv-in{outline:2px solid var(--primary); outline-offset:3px;}

/* the figures, under the same board */
.cv-figs{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:clamp(8px,1vw,14px);
  margin-top:clamp(16px,2vw,24px); padding-top:clamp(14px,1.8vw,20px); border-top:1px solid var(--border);}
.cv-fig b{display:block; font-family:var(--font-display); font-size:clamp(18px,1.9vw,26px); font-weight:800;
  letter-spacing:-.03em; line-height:1; color:var(--brand-text);}
.cv-fig b em{font-style:normal;}
.cv-fig span{display:block; margin-top:6px; font-size:clamp(10.8px,.9vw,12px); line-height:1.35; color:var(--muted);}

@media (max-width:1100px){
  .cv-ribbon{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  .cv .cv-in,.cv:first-child .cv-in,.cv:last-child .cv-in{clip-path:none; border-radius:14px; padding:12px 14px;}
}
@media (max-width:1040px){
  .cv-head{grid-template-columns:minmax(0,1fr); gap:18px; align-items:start;}
  .cv-board-top{grid-template-columns:minmax(0,1fr); gap:8px;}
  .cv-figs{grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:16px;}
}
@media (max-width:640px){
  .cv-ribbon{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cv-figs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cv-copy .btn{width:100%; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){ .cv-in,.cv-ic{transition:none;} }


/* --- style-block-11.css --- */

/* ??????????????????????????????????????????????????????????????????????
   INDUSTRIES ? the heading sits centred, and the list runs underneath in
   three lanes: the middle one travels against the other two. Hovering a
   lane stops it, so a name can be read.
   ?????????????????????????????????????????????????????????????????????? */
#industries{padding-block:var(--sec-y); background:var(--surface); overflow:hidden;}
#industries .sec-head{margin-bottom:clamp(20px,2.4vw,32px);}
#industries h2{text-transform:none; letter-spacing:-.035em;}
#industries h2 em{font-style:normal; color:var(--brand-text);}

.iw-lanes{display:grid; gap:clamp(10px,1.2vw,14px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.iw-lane{overflow:hidden;}
.iw-track{display:flex; gap:clamp(10px,1.2vw,14px); width:max-content;
  animation:iwRun var(--dur,36s) linear infinite;}
.iw-lane.rev .iw-track{animation-direction:reverse;}
.iw-lane:hover .iw-track{animation-play-state:paused;}
@keyframes iwRun{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.iw-chip{display:inline-flex; align-items:center; gap:10px; padding:11px 18px; border-radius:99px;
  background:var(--surface); border:1px solid var(--border); white-space:nowrap;
  font-family:var(--font-display); font-size:clamp(13px,1.1vw,15px); font-weight:700; letter-spacing:-.02em;
  color:var(--text); box-shadow:0 12px 26px -24px hsl(var(--brand-h) 90% 25% / .9);
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);}
.iw-chip i{display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:hsl(var(--brand-h) 85% 95%); color:var(--brand-text); flex:none;
  transition:background .3s var(--ease), color .3s var(--ease);}
html[data-theme="dark"] .iw-chip i{background:hsl(var(--brand-h) 40% 18%);}
.iw-chip i svg{width:16px; height:16px;}
.iw-chip:hover{border-color:hsl(var(--brand-h) 70% 78%); transform:translateY(-2px);}
.iw-chip:hover i{background:var(--primary); color:#fff;}

@media (max-width:640px){
  .iw-chip{padding:9px 14px; font-size:12.4px; gap:8px;}
  .iw-chip i{width:26px; height:26px;} .iw-chip i svg{width:14px; height:14px;}
}
@media (prefers-reduced-motion:reduce){
  .iw-track{animation:none; flex-wrap:wrap; width:auto; justify-content:center;}
  .iw-lanes{-webkit-mask-image:none; mask-image:none;}
}


/* --- style-block-12.css --- */

/* ??????????????????????????????????????????????????????????????????????
   INDUSTRIES ? variant 2: all nineteen on one board, five across, each
   numbered. The last row centres itself, and the closing bar carries the
   line and the call.
   ?????????????????????????????????????????????????????????????????????? */
#industries-v2{padding-block:var(--sec-y); background:var(--surface);}
#industries-v2 .sec-head{margin-bottom:clamp(20px,2.4vw,30px);}
#industries-v2 h2{text-transform:none; letter-spacing:-.035em;}
#industries-v2 h2 em{font-style:normal; color:var(--brand-text);}
#industries-v2 .sec-lede b{color:var(--brand-text); font-weight:700;}

.ig-grid{display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:clamp(10px,1.1vw,14px);}
.ig-card{grid-column:span 2; display:flex; flex-direction:column; gap:10px; padding:clamp(14px,1.5vw,18px);
  border-radius:16px; background:var(--surface); border:1px solid var(--border); text-align:center;
  box-shadow:0 14px 30px -28px hsl(var(--brand-h) 90% 25% / .9);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);}
/* the last four centre themselves under the five above */
.ig-card:nth-child(16){grid-column:2 / span 2;}
.ig-card:hover{border-color:hsl(var(--brand-h) 70% 80%); transform:translateY(-3px);
  box-shadow:0 20px 34px -26px hsl(var(--brand-h) 92% 32% / .95);}
.ig-top{display:flex; align-items:center; justify-content:center; gap:12px;}
.ig-top b{font-family:var(--font-display); font-size:clamp(13px,1.15vw,15px); font-weight:800;
  letter-spacing:.02em; color:var(--brand-text);}
.ig-ic{display:grid; place-items:center; width:clamp(34px,3vw,42px); height:clamp(34px,3vw,42px);
  border-radius:12px; background:hsl(var(--brand-h) 85% 95%); color:var(--brand-text);
  border-left:1px solid var(--border-soft); border-left:0;
  transition:background .3s var(--ease), color .3s var(--ease);}
html[data-theme="dark"] .ig-ic{background:hsl(var(--brand-h) 40% 18%);}
.ig-ic svg{width:50%; height:50%;}
.ig-card:hover .ig-ic{background:var(--primary); color:#fff;}
#industries-v2 .ig-card h3{margin:0; font-family:var(--font-display); font-size:var(--h3);
  font-weight:700; letter-spacing:-.02em; line-height:1.3; color:var(--text); text-transform:none;}

.ig-foot{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:clamp(14px,2vw,28px); margin-top:clamp(18px,2.2vw,28px); padding:clamp(16px,1.8vw,24px);
  border-radius:20px; background:var(--bg-alt); border:1px solid var(--border);}
.ig-foot-ic{display:grid; place-items:center; width:clamp(44px,4vw,56px); height:clamp(44px,4vw,56px);
  border-radius:50%; background:var(--primary); color:#fff;}
.ig-foot-ic svg{width:48%; height:48%;}
.ig-foot p{margin:0; font-size:clamp(13.2px,1.05vw,14.6px); line-height:1.6; color:var(--text-2); max-width:56ch;}
.ig-cta{display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding-left:clamp(14px,2vw,28px);
  border-left:1px solid var(--border);}
.ig-cta b{font-family:var(--font-display); font-size:clamp(14.4px,1.25vw,16.4px); font-weight:800;
  letter-spacing:-.02em; color:var(--text); white-space:nowrap;}

@media (max-width:1100px){
  .ig-grid{grid-template-columns:repeat(8,minmax(0,1fr));}
  .ig-card:nth-child(16){grid-column:span 2;}
}
@media (max-width:860px){
  .ig-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .ig-foot{grid-template-columns:auto minmax(0,1fr); }
  .ig-cta{grid-column:1 / -1; padding-left:0; border-left:0; padding-top:14px; border-top:1px solid var(--border);}
}
@media (max-width:560px){
  .ig-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .ig-cta .btn{width:100%; justify-content:center;}
  .ig-cta{align-items:stretch;}
}
@media (prefers-reduced-motion:reduce){ .ig-card{transition:none;} }


/* --- style-block-13.css --- */

/* ??????????????????????????????????????????????????????????????????????
   INDUSTRIES ? variant 3: the whole list on one board, small enough to
   take in at a glance. A light runs along the chips so the board never
   sits still, and whichever chip you are on holds it.
   ?????????????????????????????????????????????????????????????????????? */
#industries{padding-block:var(--sec-y); background:var(--surface);}
.ix-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(24px,3.2vw,52px);
  align-items:center;}
.ix-say{min-width:0;}
.ix-say .smark{margin-bottom:12px;}
#industries h2{margin:0; font-size:var(--h2); line-height:1.08; letter-spacing:-.04em;
  text-transform:none;}
#industries h2 em{font-style:normal; color:var(--brand-text);}
.ix-say p{margin:14px 0 0; font-size:clamp(13.6px,1.05vw,15px); line-height:1.65; color:var(--text-2); max-width:44ch;}
#industries .ix-say > .btn{
  margin-top:28px;
  width:auto;
  padding:16px 28px;
  font-size:16px;
  box-shadow:0 12px 28px -14px hsl(var(--brand-h) 100% 34% / .55);
}
#industries .ix-say > .btn .arw{color:#fff; border-color:rgba(255,255,255,.92);}

.ix-board{padding:clamp(16px,1.8vw,24px); border-radius:24px; background:var(--bg-alt);
  border:1px solid var(--border); position:relative; overflow:hidden;}
.ix-board::before{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(hsl(var(--brand-h) 70% 62% / .16) 1.2px, transparent 1.3px);
  background-size:18px 18px;}
.ix-cloud{position:relative; display:flex; flex-wrap:wrap; gap:clamp(7px,.8vw,10px); justify-content:center;}
.ix-chip{display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:99px;
  background:var(--surface); border:1px solid var(--border); font:inherit; cursor:default;
  font-family:var(--font-display); font-size:clamp(11.8px,1vw,13.2px); font-weight:700; letter-spacing:-.015em;
  color:var(--text-2); white-space:nowrap;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease),
             transform .3s var(--pop);}
.ix-chip i{display:grid; place-items:center; width:22px; height:22px; border-radius:50%; flex:none;
  background:hsl(var(--brand-h) 85% 95%); color:var(--brand-text);
  transition:background .3s var(--ease), color .3s var(--ease);}
html[data-theme="dark"] .ix-chip i{background:hsl(var(--brand-h) 40% 18%);}
.ix-chip i svg{width:12px; height:12px;}
.ix-chip.on{background:var(--primary); border-color:var(--primary); color:#fff; transform:translateY(-2px);}
.ix-chip.on i{background:rgba(255,255,255,.22); color:#fff;}
.ix-chip:hover{border-color:hsl(var(--brand-h) 70% 78%); color:var(--text);}

@media (max-width:1040px){
  .ix-grid{grid-template-columns:minmax(0,1fr); gap:24px;}
  .ix-say p{max-width:none;}
}
@media (max-width:640px){
  .ix-chip{font-size:11.4px; padding:7px 11px;}
}
@media (max-width:600px){
  #industries .ix-say > .btn{
    margin-top:24px;
    width:100%;
    justify-content:center;
    text-align:center;
  }
}
@media (prefers-reduced-motion:reduce){ .ix-chip{transition:none;} }

/* Industries v3 ? pills become cards (from tekcroft-home (6) ix-cards) */
#industries .ix-cloud{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:clamp(8px,.9vw,12px); justify-content:stretch;}
#industries .ix-chip{flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:clamp(13px,1.4vw,17px) 10px; border-radius:16px; white-space:normal; text-align:center;
  min-height:clamp(104px,10vw,122px);
  box-shadow:0 12px 26px -26px hsl(var(--brand-h) 90% 25% / .9);}
#industries .ix-chip i{width:clamp(38px,3.4vw,44px); height:clamp(38px,3.4vw,44px); border-radius:13px;}
#industries .ix-chip i svg{width:19px; height:19px;}
#industries .ix-chip b{font-size:clamp(12.2px,1.02vw,13.6px); line-height:1.3;
  transition:color .3s var(--ease);}
#industries .ix-chip.on{transform:translateY(-3px);}
#industries .ix-chip.on b,#industries .ix-chip.on:hover b{color:#fff;}
@media (max-width:640px){
  #industries .ix-cloud{grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px;}
  #industries .ix-chip{min-height:96px; padding:12px 8px;}
}

/* sized so all nineteen still hold one screen */
#industries .ix-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);}
#industries .ix-cloud{grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:8px;}
#industries .ix-chip{min-height:88px; padding:11px 8px; gap:8px; border-radius:14px;}
#industries .ix-chip i{width:32px; height:32px; border-radius:11px;}
#industries .ix-chip i svg{width:16px; height:16px;}
#industries .ix-chip b{font-size:11.6px; line-height:1.25;}
#industries .ix-board{padding:clamp(12px,1.3vw,16px);}
@media (max-width:1040px){ #industries .ix-grid{grid-template-columns:minmax(0,1fr);} }
@media (max-width:640px){
  #industries .ix-cloud{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));}
  #industries .ix-chip{min-height:82px;}
}


/* --- style-block-14.css --- */

/* ??????????????????????????????????????????????????????????????????????
   INDUSTRIES ? variant 4: four columns inside one board, travelling in
   opposite directions. No tabs; the list simply runs. Hovering a column
   stops it so a name can be read.
   ?????????????????????????????????????????????????????????????????????? */
#industries-v4{padding-block:var(--sec-y); background:var(--surface);}
.iy-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,3.2vw,52px);
  align-items:center;}
.iy-say .smark{margin-bottom:12px;}
#industries-v4 h2{margin:0; font-size:var(--h2); line-height:1.08; letter-spacing:-.04em; text-transform:none;}
#industries-v4 h2 em{font-style:normal; color:var(--brand-text);}
.iy-say p{margin:14px 0 0; font-size:clamp(13.6px,1.05vw,15px); line-height:1.65; color:var(--text-2); max-width:44ch;}
.iy-meta{display:flex; align-items:center; gap:clamp(14px,1.8vw,24px); margin-top:clamp(16px,2vw,24px); flex-wrap:wrap;}
.iy-count{display:flex; flex-direction:column; padding-right:clamp(14px,1.8vw,24px); border-right:1px solid var(--border);}
.iy-count b{font-family:var(--font-display); font-size:clamp(28px,3vw,40px); font-weight:800; letter-spacing:-.04em;
  line-height:1; color:var(--brand-text);}
.iy-count i{margin-top:5px; font-style:normal; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);}

.iy-board{padding:clamp(14px,1.6vw,20px); border-radius:24px; background:var(--bg-alt); border:1px solid var(--border);}
.iy-lanes{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,1vw,12px);
  height:clamp(300px,32vw,380px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);}
.iy-lane{overflow:hidden;}
.iy-track{display:flex; flex-direction:column; gap:clamp(8px,1vw,12px);
  animation:iyRun var(--dur,24s) linear infinite;}
.iy-lane.down .iy-track{animation-direction:reverse;}
.iy-lane:hover .iy-track{animation-play-state:paused;}
@keyframes iyRun{from{transform:translateY(0);} to{transform:translateY(-50%);}}

.iy-card{display:flex; flex-direction:column; align-items:center; gap:8px; padding:clamp(12px,1.3vw,16px) 10px;
  border-radius:14px; background:var(--surface); border:1px solid var(--border); text-align:center;
  box-shadow:0 12px 26px -26px hsl(var(--brand-h) 90% 25% / .9);
  transition:border-color .3s var(--ease), transform .3s var(--ease);}
.iy-card i{display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  background:hsl(var(--brand-h) 85% 95%); color:var(--brand-text);
  transition:background .3s var(--ease), color .3s var(--ease);}
html[data-theme="dark"] .iy-card i{background:hsl(var(--brand-h) 40% 18%);}
.iy-card i svg{width:17px; height:17px;}
.iy-card b{font-family:var(--font-display); font-size:clamp(11.6px,.98vw,13px); font-weight:700;
  letter-spacing:-.015em; line-height:1.3; color:var(--text);}
.iy-card:hover{border-color:hsl(var(--brand-h) 70% 78%); transform:translateY(-2px);}
.iy-card:hover i{background:var(--primary); color:#fff;}

@media (max-width:1040px){
  .iy-grid{grid-template-columns:minmax(0,1fr); gap:24px;}
  .iy-say p{max-width:none;}
}
@media (max-width:640px){
  .iy-lanes{grid-template-columns:repeat(2,minmax(0,1fr)); height:clamp(280px,70vw,340px);}
  .iy-meta .btn{width:100%; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .iy-track{animation:none;}
  .iy-lanes{height:auto; -webkit-mask-image:none; mask-image:none;}
}


/* --- style-block-19.css --- */

/* ??????????????????????????????????????????????????????????????????????
   THE NEW SEARCH REALITY ? the surfaces people search sit along the top,
   their wires run down into one AI core, and the screens those surfaces
   produce sit under it on a rail the reader can step through.
   ?????????????????????????????????????????????????????????????????????? */
#ai-ecosystem{padding-block:clamp(44px,5vw,76px);}
.nsr-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:clamp(28px,4vw,60px); align-items:center;}

.nsr-eyebrow{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:99px;
  background:var(--surface); border:1px solid hsl(var(--brand-h) 75% 78%); color:var(--brand-text);
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 4px 12px -6px hsl(var(--brand-h) 90% 35% / .3);}
.nsr-eyebrow i{display:grid; place-items:center; width:15px; height:15px;}
.nsr-eyebrow svg{width:15px; height:15px;}
#ai-ecosystem h2{margin:16px 0 0; font-size:var(--h2); line-height:1.08; letter-spacing:-.04em;
  text-transform:none; color:var(--text);}
#ai-ecosystem h2 em{display:block; font-style:normal; color:var(--brand-text);}
.nsr-lede{margin:16px 0 0; max-width:56ch; font-size:clamp(14.8px,1.15vw,16px); line-height:1.7; color:var(--text-2);}
.nsr-box{margin-top:clamp(18px,2vw,26px); display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px;
  padding:clamp(16px,1.8vw,22px); border-radius:18px; background:hsl(var(--brand-h) 85% 96%);
  border:1px solid hsl(var(--brand-h) 70% 88%);}
html[data-theme="dark"] .nsr-box{background:hsl(var(--brand-h) 45% 14%); border-color:hsl(var(--brand-h) 50% 26%);}
.nsr-box-ic{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--primary); color:#fff;}
.nsr-box-ic svg{width:18px; height:18px;}
.nsr-box b{display:block; font-family:var(--font-display); font-size:clamp(16px,1.5vw,19px); font-weight:800;
  letter-spacing:-.02em; color:var(--text);}
.nsr-box p{margin:8px 0 0; font-size:clamp(13.8px,1.05vw,14.8px); line-height:1.65; color:var(--text-2);}

/* ?? the stage: nodes, wires, orb, screens ?? */
.nsr-stage{position:relative;}
.nsr-nodes{position:relative; z-index:2; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(6px,.9vw,12px);}
.nsr-node{position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 6px 10px; border-radius:16px;
  background:var(--surface); border:1px solid var(--border); cursor:pointer; font:inherit;
  box-shadow:0 10px 24px -22px hsl(var(--brand-h) 90% 25% / .8);
  transition:transform .35s var(--ease);}
.nsr-node::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  border:1px solid var(--primary);
  box-shadow:0 16px 30px -22px hsl(var(--brand-h) 95% 35% / .9);
  opacity:0; transition:opacity .35s var(--ease);}
.nsr-node b{font-family:var(--font-display); font-size:11.6px; font-weight:700; letter-spacing:-.01em;
  color:var(--text); text-align:center; line-height:1.25;}
.nsr-node:hover{border-color:hsl(var(--brand-h) 70% 78%);}
.nsr-node.on{border-color:transparent; transform:translateY(-2px);}
.nsr-node.on::after{opacity:1;}
.nsr-node:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.nsr-logo{display:block; width:30px; height:30px; background:var(--logo) center/contain no-repeat;}
.nsr-spark{display:grid; place-items:center; width:30px; height:30px; color:var(--primary);}
.nsr-spark svg{width:22px; height:22px;}
.nsr-spark.sm{width:14px; height:14px;} .nsr-spark.sm svg{width:12px; height:12px;}

.nsr-wires{position:absolute; left:0; right:0; top:62px; width:100%; height:clamp(120px,14vw,168px); z-index:1;}
.nsr-wire{fill:none; stroke:hsl(var(--brand-h) 80% 70%); stroke-width:1.6; stroke-dasharray:5 7; opacity:.75;
  animation:nsrFlow 2.4s linear infinite; animation-delay:calc(var(--i) * -.3s);}
@keyframes nsrFlow{to{stroke-dashoffset:-24;}}
.nsr-spark-dot{fill:var(--primary);}

.nsr-orb{position:relative; z-index:2; display:grid; place-items:center; margin:clamp(96px,11vw,132px) auto clamp(18px,2vw,26px);
  width:clamp(120px,12vw,160px); height:clamp(120px,12vw,160px);}
.nsr-ring{position:absolute; inset:0; border-radius:50%; border:1px solid hsl(var(--brand-h) 80% 70% / .5);}
.nsr-ring.r1{inset:-14px; animation:nsrPulse 3.6s ease-out infinite;}
.nsr-ring.r2{inset:-26px; animation:nsrPulse 3.6s ease-out infinite; animation-delay:1.2s;}
@keyframes nsrPulse{0%{transform:scale(.86); opacity:0;} 30%{opacity:.9;} 100%{transform:scale(1.12); opacity:0;}}
.nsr-ball{display:grid; place-items:center; width:100%; height:100%; border-radius:50%; color:#fff; text-align:center;
  background:radial-gradient(circle at 34% 28%, hsl(var(--brand-h) 95% 72%), hsl(var(--brand-h) 100% 46%) 45%, hsl(var(--brand-h) 100% 30%) 100%);
  box-shadow:0 0 0 10px hsl(var(--brand-h) 90% 60% / .12), 0 26px 50px -24px hsl(var(--brand-h) 95% 35% / .85);
  animation:nsrFloat 5s ease-in-out infinite;}
@keyframes nsrFloat{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
.nsr-ball b{display:block; font-family:var(--font-display); font-size:clamp(26px,2.6vw,34px); font-weight:800; letter-spacing:-.03em; line-height:1;}
.nsr-ball i{display:block; margin-top:4px; font-style:normal; font-size:9px; font-weight:700; letter-spacing:.16em; opacity:.85;}

/* ?? the rail of screens ?? */
.nsr-deck{position:relative; z-index:2; display:flex; align-items:center; gap:8px;
  padding:clamp(12px,1.4vw,18px); border-radius:22px; background:var(--surface);
  border:1px solid var(--border); box-shadow:0 22px 46px -34px hsl(var(--brand-h) 90% 25% / .7);}
.nsr-rail{flex:1; display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:2px;}
.nsr-rail::-webkit-scrollbar{display:none;}
.nsr-card{position:relative; flex:0 0 clamp(150px,17vw,188px); scroll-snap-align:center; padding:11px; border-radius:14px;
  background:var(--surface); border:1px solid var(--border-soft); box-shadow:0 10px 22px -20px hsl(var(--brand-h) 90% 25% / .8);
  transition:transform .35s var(--ease);}
.nsr-card::after{content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  border:1px solid var(--primary);
  box-shadow:0 18px 32px -24px hsl(var(--brand-h) 95% 35% / .9);
  opacity:0; transition:opacity .35s var(--ease);}
.nsr-card.on{border-color:transparent; transform:translateY(-3px);}
.nsr-card.on::after{opacity:1;}
.nsr-card header{display:flex; align-items:center; gap:7px; padding-bottom:9px; border-bottom:1px solid var(--border-soft);}
.nsr-card header b{font-family:var(--font-display); font-size:11px; font-weight:700; color:var(--text);}
.nsr-g{display:grid; place-items:center; width:20px; height:20px;}
.nsr-g .nsr-logo{width:18px; height:18px;}
.nsr-card header .nsr-spark{width:18px; height:18px;} .nsr-card header .nsr-spark svg{width:14px; height:14px;}
.nsr-sbar{flex:1; height:7px; border-radius:99px; background:var(--bg-alt);}
.nsr-body{display:flex; flex-direction:column; gap:7px; padding-top:9px; min-height:112px;}
.nsr-lines{display:flex; flex-direction:column; gap:5px; flex:1;}
.nsr-lines i{display:block; height:5px; width:var(--w); border-radius:6px; background:var(--border);}
.nsr-lines.is-wide i{height:6px; background:hsl(var(--brand-h) 45% 84%);}
.nsr-row{display:flex; gap:8px; align-items:flex-start;}
.nsr-thumb{flex:none; width:34px; height:26px; border-radius:6px; background:hsl(var(--brand-h) 55% 90%);}
.nsr-thumb.sm{width:26px; height:20px;}
.nsr-url{font-size:9.4px; font-weight:600; color:#1a7f37;}
.nsr-mini-map{position:relative; display:block; height:34px; border-radius:8px;
  background:repeating-linear-gradient(115deg, transparent 0 12px, hsl(var(--brand-h) 40% 88%) 12px 13px), var(--bg-alt);}
.nsr-mini-pin{position:absolute; left:52%; top:34%; width:9px; height:12px; background:#e04a3c;
  border-radius:50% 50% 50% 0; transform:rotate(-45deg);}
.nsr-stars{font-size:10px; color:#F5A623; letter-spacing:1px;}
.nsr-chipline{display:flex; align-items:center; gap:6px; font-size:9.6px; font-weight:700; color:var(--brand-text);}
.nsr-chipline em{font-style:normal; padding:3px 8px; border-radius:99px; background:hsl(var(--brand-h) 85% 95%);}
.nsr-sources{display:flex; flex-wrap:wrap; gap:5px;}
.nsr-sources span{display:inline-flex; align-items:center; gap:4px; padding:3px 7px; border-radius:99px;
  background:var(--bg-alt); border:1px solid var(--border-soft); font-size:9px; font-weight:700; color:var(--text-2);}
.nsr-sources .nsr-logo{width:11px; height:11px;}
.nsr-sources i{display:grid; place-items:center; width:11px; height:11px; color:var(--primary);}
.nsr-sources i svg{width:10px; height:10px;}
.nsr-tile{display:block; height:26px; border-radius:8px; background:hsl(var(--brand-h) 55% 92%);}
.nsr-card.is-hero{background:var(--surface);}

.nsr-arw{flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); color:var(--text-2);
  transition:border-color .3s var(--ease), color .3s var(--ease);}
.nsr-arw:hover{border-color:hsl(var(--brand-h) 70% 76%); color:var(--brand-text);}
.nsr-arw:focus-visible,.nsr-dot:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
.nsr-arw svg{width:16px; height:16px;}
.nsr-dots{display:flex; justify-content:center; gap:7px; margin-top:14px;}
.nsr-dot{width:7px; height:7px; border-radius:50%; border:0; padding:0; cursor:pointer; background:var(--border);
  transition:background .3s var(--ease), width .3s var(--ease);}
.nsr-dot.on{width:18px; border-radius:99px; background:var(--primary);}

@media (max-width:1040px){
  .nsr-grid{grid-template-columns:minmax(0,1fr); gap:30px;}
  .nsr-wires{top:58px;}
}
@media (max-width:620px){
  .nsr-nodes{grid-template-columns:repeat(3,minmax(0,1fr));}
  .nsr-wires{display:none;}
  .nsr-orb{margin-top:clamp(20px,6vw,30px);}
}
@media (prefers-reduced-motion:reduce){
  .nsr-wire,.nsr-ball,.nsr-ring{animation:none;}
  .nsr-ring{opacity:.5;}
  .nsr-spark-dot{display:none;}
}





/* variant 3, second pass: the core is flat brand blue with the Tekcroft
   mark on it, the screens carry real result text rather than grey bars,
   and the whole stage matches the height of the copy beside it. */
#ai-ecosystem .nsr-grid{align-items:stretch;}
#ai-ecosystem .nsr-say{display:flex; flex-direction:column; justify-content:center;}
.nsr-stage{display:flex; flex-direction:column; justify-content:space-between; height:100%;}

/* the core */
.nsr-ball{background:var(--primary); box-shadow:0 0 0 10px hsl(var(--brand-h) 90% 60% / .12),
  0 22px 44px -26px hsl(var(--brand-h) 95% 32% / .8);}
.nsr-mark{display:block; width:58%; height:58%;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAPRklEQVR42u2dbWxU15nH/8+51547FGzw2BjDzJASEoUo2DFEVUJoyCotBtuhVVPtto12pdKYhA8JyYfdflg1UrIfmn0LbLXSSiu1VeMQXhK1CTaqdrFB+2mVrbYK0KgLZrcxMLM23aae4hc8c8959sO9dzyACW8+43uvz5HyAWfE4Pn/npfzv885Q5hlMbNFRLLizwSgBmZFYclrtBMAQERqthfTNcIL77UkmXkFgC8A+DKAx5RSLeazDfcSQgDAOIBfA/gXAB8S0S9nC+rrAGBmQUSKmUlK+YplWbsBrDUfa6TXOIB3Afw9EX08GwRUSQczNwH4RwB/DABSSkXkveTabGFWaFegFQshLABQSv1WCLGHiA4wcw0RlcoABGkfQB2AfgCblFIBJcJ8npGHQQohapRSUgjxLBEdqswExMw2AAXgLQDPKqVKACwT8fFqDIUQNoAxAFuJ6BdByScAKJVKz9i2/Z4f+WTEjzUExwF0A7gCAIKZhRBit58uTK2P8SbBz/RPAvgCETEASwBoE0K0+3t9U/PnsPiGbJFSigEIpdQ3KqloB9DAzMpE/xyJz35ohc8nCLj8oh/wSgDIhhPYCItvCYwXOXTpVCkV/JNWAVhJREqYpm8Ouyzlib/v1O/wkzMFghBQ4QwtAuCYff5cis9AjS1w6L8L9MpgjqSvvOLQJlcGANtId/efomKgxhI4NFSgnhM5EAMJKxpJ1QAwR+L3nh2jnuN5FKUCU6gj/7q9oVl3Kf47Q2O0czCHaalg2SJSLbUB4E476oq0v2sgB1cCQhCUitbvYQC404bPEug940X+hMsgi8La8ZseQIf4B8+N0XN+zRc2RabmmwwwB+K/M1Sg547lPPEtEcnINxngDsV/++wYPTeYw7RiCCu6kW8ywJ2k/aExvDCY98QXFOnINwDcQeT3DORpwlWgmIhvSsAt7vMPDI3RdwbzKKqg4YvP72kywE3EP+jv84tSxSbtmwxwi+L3nh2jnsE8pmXQ8MXv9zUZ4AbiHxoq0K7jeUwrFVvxTQa4FoBA/HMF2jmQwxUVz7RvMsANun3bT/s7B3OYXADimwxw3T6/QD3H85h24532DQCziP/OUIGeP3axwuFbGL+/bcQPun3P3qUFJP6C7gEq0j52V3j7vMDmo4WJ/BxNuBwre9eUgFvY5x8YKtB3BvMoxdDeNQDcRPxDQwXadewiShobPjIAhFP83jPe9K6ubj84ZeOaqeAQRv65Au06kce01LPPJ38cnC1CZkmt/zMyAMwrAOUZvgLtPJbDFY3iEwMsGW880YLObB1LpRD28yGxLgGV07u7T+S12buB+MpV2LtlJb/cloJSKhLHA+y4i39wqEA9J/TZu0RenVGS8fqmFXi5LQVXKg8KA8D8iq/b3iXMRP6bW1byKxETP5YASOWd0u09W6CewYva7N2g21cuY9+TK3lPawolqSAoWmftRewi366wd6UeezcQ2Ev7zdjT6kV+1MSPVQaonN7d7R/X0uHwlSNfMv5hSwteak1xSUoIokjeshF5AK6d3t05mPccPltvt//GZk/8opSwIip+5EvAdSbPQM6rw0Jnt6/w/c0t+O6GRnalirT4kc4A10/vejWfLDHnx7WIAMGAlIwfPLkSL65PcdS6/VhlgOuuZTmer2j4WEvkS5fx2qPL8eL6FJdiIn5kMwBX7PN7BnK+t68n8r2az9i3pYX3tKVQkhICFJtr1SIHQNDt7z/rHdeamdvXJ/5eX3zXb/jitEQUxT84VKDng6d6Ohs+V+H1x5rxcptn8hDF7zpFO2riHxgq0K7BHCZ0efvwI1/yVfauoHjephkJAGbs3THonN692t5tQVTt3ViVgAp7l3Yfz9O09C5n0GPvsmfvPt6MPa3eVi/O4oc6A1Ru9Tx7N++lfa32LmJh70YegGund3cO5r1UrNPeLSm88cTCEj+UJeBqk2eMegYueuJrHub4/hdb8N32Rp52JQi0YK5Pt8Mqfu/ZMdo1mMcVjfZuhcmDPW0pBhQStgUA5c7fZIBqAnCNvXtFs72rSgqvPrrcFx/4TaGEN/7zt/Q/hWnYloBUJgNUbSn/fL5uexcAWDEggX96ahW/8FAD/uv30+g9M0b7zxYw/H9XcHCoQH3dqzmzuAYlV4Xy619iBcDMMEfBv4RRk73r1xlHEP72iRbuyC7Gnx67SO//5jLGp1zAItiLbJwcnUJ3/zAd6cry6iW1sYZAhEX8g0Nj9MKJnDZ7dwYCxh9ll+DDkUlqP3iO3j79KcaLEqJWQFgEVzGshIVTI1PYcfQCXRgvocYWkGwA0Cb+gaEC9QzmMVHSezMHM0CWwPGL4+j9+FMUigrWIrt8Mjh4X6kYtmPh1MgkuvqHPQiseEIwbwBIFXT7BXx7IIdxqfRfzkCeuFdchkhYIIsgFc96gMNVDDshcHp0Ctv7hik3EU8IxLxFftnezVGQ9qt2npK8aL/Z+7kMWAmBjy9NoTOmEFQVAK5s+IbGqGcgpz3tz0WmshICp0am0NV3ni6MF2MFgaim+FfZuwN5jEfkcgapAMsRODk6ic6+YboYIwiqBgChwuQJ7F2h78GODgjshMCvLk3h6f4LdLHcGJrvC7i16IfAW2d+T98ezGGibO/OvfgMgJmhY3jHVYCVsPDRyCQ6+87TJ5eLqLEsyAjfL6MdAMWAJQQ+nSrhL//9EqamJewaocXeZfYgWFxrgSVr8fKlAmxH4PSlSezoP+/7BFZkbWPtAAgCpFJIJWvwd4+vgJOw4Jbm9kFL8GAHivHm4yvwb1+5B+kltVBFPQ5ekAlOj07h6TIE0Xx2UJUS4Gmt8Cf31XPv1lWoT1hQcxShlU/13nyihV9uS/GG5Ul+f3ua71magCwqTZnAcwxPjnpm0fDlaDqGVW0CS1Lh62vq+YdPrUKtJaDU3UEQePtKMl7b1IxggLMoFTYuX4S+7izf35iEKunJBJI9CE6PTGHH0fMVjaEBYNZlEVB0FZ5ZU8c/emolHCGg5J01bEG3z94pXX71kabyDJ9NHmwPpRy825HmTH0CclrPfT2VtnFnBG3jqjuBtvDEefb+pby/I406S9x2w1Y5vfvXm1fgpdZgbv9q2EpSoTXloL8ri7UpB7KkBwJXsdcYRtA2nhcrOBDna2vq+IdbVyFh0S33BFdN725qxl+0N95wercMQaPDRzozWNugEwLfNh71bON8RCCYt4dBgThfv7eef/ylNOps4UNAn93wAWB/evd7jzTd9KBm8D7rGhx+d1sa6bpabRAEW8RTIx4EFy6H3yya18fBgTjfvK+e39qaxiJLQN1gFq/c7UuF1zc146XbmNsP3ufhxiT3dWdxf4MD6WrMBI7AyZEpdB8d9htDK7SZYN4HQgJxvrKmjn/0pVWoEXRdY1g5vfs3m1vwvY1+5OPWbd9KCN7bnsHn6xNeJhAaM8HoFJ7uHw61bRyKQSfhi+P5BGksrplpDIOzeiwZP9jSgj9vb2RXSe//0e3DVnQV1qcc/mlnFtn6Wm93oMksshMCH41MoatvmD75g2cbu8oAMGtjV4ZgbT3v/3Ian7MFlPJ+rlyF1x5rxout/uUMdzG3bwug5Co83Ojw+51ZrGtMQhb1lYMgE+w46jmGtSFzDEMz6lgJwY41dfzPT62CTYAsKux7ciW/6jd8c3FWz/K3ou1NST60Lc1ZjeXA6wkC23iYzl8uhso2DtXBEApqtavwrfvqebIkqSSZd6/3HL65jNKgJ1ifcvDT7Rl+5ucXaPgP0xD23D+lLNvGI1Po7D9PR7tX8+olNSjJ+b9MOpTDzpbwTuY892BDWXwdfn4AwcblSfR3Z/m+BsezjXVsEZlhORY+Hp3C00eHQ2Mbh3baXZAHge4jWlaFbXx464xPoOsBku0/RezsDwcEoT7uIAhVOZ9X3iI2JfmDrizubXCgdPkEzLD8aeNtfcOUm2cIzFfHXgPBhqYk93VlsHaZo9UxDGzjrv5hys8jBAaAWSBYt8zhw9syKO8OdEHgCJwc9RrD4Clitb9mwgBwA7OovdHh/u4sHmhM6nUMEwInRybQ7W8RbUFVRcAAcCOzyNsi8uGONO5Z5nhmkS7H0LFw6n8nsffkpwQIA0CYMsH6lMPvdaSxuj6hDQLFgLAJ034TQAaAEGUCV2Hj8iR/0B3YxqylJ1CMebmRxABws0zgl4O2lMOHOtKcXVqrrSeYj52gAeA2dgfrUw4+2J7h1fUJyBLH4g4hA8BtQvBwk37b2AAQcgiutY2jDIEB4I4zgcNHurJYs8yBdDmyEBgA7gKC9qYk93VlsWZpdDOBAeAuIXiwIcGHt6WRrktEEgIDwN1C4CpsbFrE/d0ZzycoRetKOQPAXPgErkJbY5IPdqSRqavVNmNoAAg5BK0ph490r8Y9S71yIIQBYGFBIL1p4w+6sryuMQlVCv/uwACgoTFsTTk43JHmTF1t6HsCA4AmCB5KOXi/M/y2sQFAIwQbAts4lQitbWwA0AhBMbikYmsaq0LqExgANK7gppK2xiT3dWZwb0PiM21jy8wDxLcctC9P8pGuLD6/9MY+wblCyTsthOrNBhgAqgjBg8scfndbBpkbTBsXShIuc1VVMQBUEwJXYWNTkvu6M1iX8i+pqFAgMQ81wABQTQgqbOMDHRlk6vxBU/+iAzYHQxYSBA7/bHsGq+trUSopUJXPAxgA5hsC71QyH+nK8gMpB1xSqBWmBCy4xrC1MYnDHWlurqtFbqLklQNlAFhQEKxPOXivM8OPNi9CUVZtF0DAzA0hbOSYPwikVNjc8jlsbHRQaxGU0n466AqAS8wsBIAz0PdFG2bdSij6l2Eka4g1i6AAQAhxiYguByXglFLqEhERqlp9zLqqFhOqcXFUwNfPy/0oEf1KCPGvRCYBzHsm0PvXs/8WEsDPgp8F7cZeAJNCCDL9QGyXFEIIAG8D+A9mFkTkCma2ieiXAPZ55UG4BoJ4LWaWQogaABcA/FWlvsTMBMDy/9sP4BmlFPupQpjmMNJLAWAhhK2UGhFC7CCiXzCzRUSyXHb8dKCYucYvB7sA1DAzmFli5hvZzIpQK+GnfAA4DeDPiOgjP+O7172YmQUAJiJm5q8CeB7AZgCLzWca2XURwE8A7CWi31VG/qyNp18ORPAiZn4EwAYA6wA8oJRaDEAJYQzEMJZ6AAkAnwAYAvAhgI+IKFeZ5W+1aRA+DGZFvwG0PkvL/wegUAs/KM2oPwAAAABJRU5ErkJggg==") center/contain no-repeat;}

/* the screens */
.nsr-card header .nsr-q{flex:1; padding:4px 8px; border-radius:99px; background:var(--bg-alt);
  font-size:9.4px; font-weight:600; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nsr-t{margin:0; font-family:var(--font-display); font-size:11.6px; font-weight:700; line-height:1.3;
  letter-spacing:-.01em; color:var(--brand-text);}
.nsr-s{margin:0; font-size:9.8px; line-height:1.5; color:var(--text-2);}
.nsr-s.dim{color:var(--muted);}
.nsr-s sup{color:var(--brand-text); font-weight:700;}
.nsr-url{font-size:9px; font-weight:600; color:#1a7f37;}
.nsr-rate{display:flex; align-items:center; gap:5px; font-size:9.4px; font-weight:700; color:var(--text-2);}
.nsr-stars{font-style:normal; color:#F5A623; letter-spacing:.5px;}
.nsr-ask{display:block; align-self:flex-start; padding:5px 9px; border-radius:10px 10px 10px 3px;
  background:hsl(var(--brand-h) 85% 95%); color:var(--brand-text); font-size:9.4px; font-weight:600;}
.nsr-cite{font-size:9px; font-weight:600; color:var(--muted);}
.nsr-cite b{color:var(--brand-text);}
.nsr-chipline em{font-size:9px;}
.nsr-body{gap:6px;}


/* --- style-block-22.css --- */

/* the eyebrow keeps its own width, the core wears the mark as a chip, and
   the deck takes whatever height is left so both columns finish level */
#ai-ecosystem .nsr-eyebrow{align-self:flex-start;}
#ai-ecosystem .nsr-mark{width:46%; height:46%; filter:drop-shadow(0 6px 14px hsl(var(--brand-h) 95% 25% / .35));}
#ai-ecosystem .nsr-orb{margin-block:clamp(70px,8vw,96px) clamp(14px,1.6vw,20px);}
#ai-ecosystem .nsr-deck{flex:1; align-items:stretch;}
#ai-ecosystem .nsr-rail{align-items:stretch;}
#ai-ecosystem .nsr-card{flex:0 0 clamp(168px,19vw,208px); display:flex; flex-direction:column; overflow:hidden;}
#ai-ecosystem .nsr-body{flex:1; min-height:0;}
#ai-ecosystem .nsr-arw{align-self:center;}


/* --- style-block-23.css --- */

/* the copy starts at the top, so the surfaces line up with the heading
   rather than sitting above it, and the mark turns slowly in the core */
#ai-ecosystem .nsr-say{justify-content:flex-start;}
#ai-ecosystem .nsr-orb{margin-block:clamp(56px,6.5vw,80px) clamp(14px,1.6vw,20px);}
#ai-ecosystem .nsr-mark{animation:nsrSpin 16s linear infinite;}
@keyframes nsrSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ #ai-ecosystem .nsr-mark{animation:none;} }


/* --- style-block-24.css --- */

/* the rail scrolls sideways, which clips anything that pokes out of it,
   so it carries the room the lifted card and its shadow need */
#ai-ecosystem .nsr-rail{padding:12px 4px 14px;}
#ai-ecosystem .nsr-card{box-shadow:0 10px 24px -22px hsl(var(--brand-h) 90% 25% / .75);}
#ai-ecosystem .nsr-card::after{box-shadow:0 0 0 1px var(--primary), 0 14px 30px -18px hsl(var(--brand-h) 95% 35% / .45);}
#ai-ecosystem .nsr-deck{padding-block:clamp(8px,1vw,12px);}


/* --- style-block-25.css --- */

/* ?? variant 3 across screen sizes ?????????????????????????????????????
   Wide: two columns. Under 1040 the stage drops below the copy, so it is
   capped and centred rather than stretched. Under 620 the wires go, the
   core shrinks, the arrows give way to swiping, and one screen fills the
   rail at a time. */
@media (max-width:1180px){
  #ai-ecosystem .nsr-grid{gap:clamp(22px,3vw,40px);}
  #ai-ecosystem .nsr-card{flex-basis:clamp(152px,17vw,180px);}
}
@media (max-width:1040px){
  #ai-ecosystem .nsr-say{max-width:760px;}
  #ai-ecosystem .nsr-say .nsr-lede{max-width:none;}
  #ai-ecosystem .nsr-stage{max-width:760px; width:100%; margin-inline:auto; height:auto;}
  #ai-ecosystem .nsr-wires{top:56px; height:clamp(86px,12vw,120px);}
  #ai-ecosystem .nsr-orb{width:clamp(104px,13vw,132px); height:clamp(104px,13vw,132px);
    margin-block:clamp(44px,7vw,68px) clamp(14px,2vw,20px);}
  #ai-ecosystem .nsr-deck{flex:none;}
}
@media (max-width:820px){
  #ai-ecosystem .nsr-node{padding:10px 5px 9px; border-radius:14px;}
  #ai-ecosystem .nsr-node b{font-size:10.8px;}
  #ai-ecosystem .nsr-logo,#ai-ecosystem .nsr-spark{width:24px; height:24px;}
  #ai-ecosystem .nsr-spark svg{width:18px; height:18px;}
}
@media (max-width:620px){
  #ai-ecosystem{padding-block:clamp(34px,7vw,46px);}
  #ai-ecosystem h2{font-size:var(--h2);}
  #ai-ecosystem .nsr-box{grid-template-columns:auto minmax(0,1fr); gap:12px; padding:16px;}
  #ai-ecosystem .nsr-nodes{gap:8px;}
  #ai-ecosystem .nsr-orb{width:96px; height:96px; margin-block:26px 16px;}
  #ai-ecosystem .nsr-ring.r1{inset:-10px;} #ai-ecosystem .nsr-ring.r2{inset:-18px;}
  #ai-ecosystem .nsr-deck{padding:10px; gap:0;}
  #ai-ecosystem .nsr-arw{display:none;}           /* swipe and the dots do the work here */
  #ai-ecosystem .nsr-rail{gap:10px; padding:10px 2px 12px; scroll-padding-inline:2px;}
  #ai-ecosystem .nsr-card{flex-basis:min(86%,300px);}
  #ai-ecosystem .nsr-dots{margin-top:10px; gap:9px;}
  #ai-ecosystem .nsr-dot{width:9px; height:9px;}
  #ai-ecosystem .nsr-dot.on{width:22px;}
}
@media (max-width:430px){
  /* three across, so the five surfaces sit 3 + 2 with nothing stranded */
  #ai-ecosystem .nsr-nodes{grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px;}
  #ai-ecosystem .nsr-node{padding:9px 4px 8px;}
  #ai-ecosystem .nsr-node b{font-size:9.8px; line-height:1.2;}
  #ai-ecosystem .nsr-logo,#ai-ecosystem .nsr-spark{width:21px; height:21px;}
  #ai-ecosystem .nsr-spark svg{width:16px; height:16px;}
  #ai-ecosystem .nsr-card{flex-basis:min(90%,300px);}
}


/* --- style-block-26.css --- */

/* ?? the five surfaces feed one line ??????????????????????????????????
   The curved wires and the badge in the middle are gone. Each surface
   drops into a shared bus, the bus carries the flow to one label, and
   the label hands it on to the screens below. */
#ai-ecosystem .nsr-flow{position:relative; margin:clamp(10px,1.4vw,18px) 0 clamp(14px,1.8vw,22px);
  height:clamp(96px,10vw,124px);}
.nsr-bus{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.nsr-drop,.nsr-down{fill:none; stroke:hsl(var(--brand-h) 70% 72%); stroke-width:1.6; stroke-dasharray:5 6;
  vector-effect:non-scaling-stroke;}
.nsr-run{fill:none; stroke:var(--primary); stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:14 600; stroke-dashoffset:614; vector-effect:non-scaling-stroke;
  animation:nsrRun 2.8s linear infinite; animation-delay:calc(var(--k) * .28s);}
@keyframes nsrRun{from{stroke-dashoffset:614;} to{stroke-dashoffset:14;}}
#ai-ecosystem .nsr-node-dot{display:none;}
.nsr-pill{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:2;
  padding:9px 20px; border-radius:99px; background:var(--primary); color:#fff;
  font-family:var(--font-display); font-size:clamp(12.5px,1.15vw,14.4px); font-weight:800;
  letter-spacing:-.01em; white-space:nowrap;
  box-shadow:0 16px 30px -18px hsl(var(--brand-h) 95% 34% / .9);}
@media (max-width:620px){
  #ai-ecosystem .nsr-flow{height:72px;}
  .nsr-bus{display:none;}
  .nsr-pill{position:relative; left:auto; top:auto; transform:none; display:inline-flex; margin:0 auto;
    inset:auto;}
  #ai-ecosystem .nsr-flow{display:grid; place-items:center;}
}
@media (prefers-reduced-motion:reduce){ .nsr-run{animation:none; opacity:0;} }


/* --- style-block-27.css --- */

/* a tap where each surface meets its drop */
#ai-ecosystem .nsr-tap{fill:var(--primary); vector-effect:non-scaling-stroke;}
#ai-ecosystem .nsr-bus{overflow:visible;}


/* --- style-block-28.css --- */

.vsw-ab{bottom:70px;}
[data-about-variant][hidden]{display:none !important;}


/* --- style-block-29.css --- */

/* ?? each stage shows the thing it produces ???????????????????????????
   Keyword demand, a channel plan, a page going together, the channels
   wired to one blueprint, the month's numbers, and what changed after
   review. One at a time, so the panel stays the size of a screen. */
#about-v4{padding-block:clamp(30px,3.4vw,48px);}
#about-v4 .bp-grid{align-items:start; gap:clamp(20px,2.8vw,44px);}
#about-v4 .bp-say p{margin-top:12px; font-size:clamp(13.8px,1.05vw,15px); line-height:1.62; max-width:52ch;}
#about-v4 .bp-say .btn{margin-top:16px;}
#about-v4 h2{font-size:var(--h2);}
.bp-panel{padding:clamp(16px,1.7vw,22px);}
.bp-lede{margin-top:8px; font-size:clamp(12.2px,.98vw,13.2px); line-height:1.55;}

.bp-screens{position:relative; margin-top:12px; display:grid; min-height:clamp(200px,20vw,240px);}
.sc-wrap{grid-area:1 / 1; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;}
.sc-wrap.on{opacity:1; visibility:visible; transform:none;}
.sc{height:100%; padding:13px; border-radius:14px; background:#fff; color:var(--text);
  border:1px solid rgba(255,255,255,.5); box-shadow:0 18px 34px -26px rgba(4,30,50,.8);
  display:flex; flex-direction:column; gap:9px;}
html[data-theme="dark"] .sc{background:hsl(var(--brand-h) 45% 14%); color:var(--text);}
.sc-h{display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--font-display); font-size:11.6px; font-weight:800; color:var(--text); letter-spacing:-.01em;}
.sc-up{font-style:normal; padding:2px 8px; border-radius:99px; background:#e7f6ec; color:#1a7f37; font-size:10.4px;}

/* research */
.sc-bar{display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:99px; background:var(--bg-alt);
  font-size:11px; color:var(--text-2);}
.sc-bar em{font-style:normal;}
.sc-mag{width:12px; height:12px; border-radius:50%; border:1.6px solid var(--brand-text); position:relative;}
.sc-mag::after{content:""; position:absolute; right:-4px; bottom:-3px; width:5px; height:1.6px; background:var(--brand-text);
  transform:rotate(45deg);}
.sc-kw{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.sc-kw li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 9px;
  border-radius:9px; background:var(--bg-alt); font-size:11px;}
.sc-kw b{font-weight:600; color:var(--text);}
.sc-kw span{font-weight:700; color:var(--brand-text);}

/* strategy */
.sc-lanes{display:grid; gap:7px;}
.sc-lane{display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:9px;}
.sc-lane em{font-style:normal; font-size:10.4px; font-weight:800; color:var(--text-2);}
.sc-lane i{display:block; height:10px; border-radius:99px; background:hsl(var(--brand-h) 85% 92%); position:relative;}
.sc-lane i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:99px;
  background:var(--primary); transform-origin:left; animation:scGrow .7s var(--ease) both;
  animation-delay:calc(var(--s) * .12s + .15s);}
@keyframes scGrow{from{transform:scaleX(0);} to{transform:scaleX(1);}}

/* build */
.sc-wire{flex:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:minmax(0,1fr);
  gap:7px;}
.sc-wire i{display:block; border-radius:8px; background:var(--bg-alt); border:1px solid var(--border);
  animation:scPop .5s var(--pop) both;}
.sc-wire .b1{grid-column:1 / -1; animation-delay:.15s;}
.sc-wire .b2{animation-delay:.27s;} .sc-wire .b3{animation-delay:.39s;}
.sc-wire .b4{animation-delay:.51s; background:hsl(var(--brand-h) 85% 94%); border-color:hsl(var(--brand-h) 70% 84%);}
.sc-wire .b5{grid-column:1 / -1; animation-delay:.63s; background:var(--primary); border-color:var(--primary);}
@keyframes scPop{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}

/* connect */
.sc-net{position:relative; flex:1; min-height:110px;}
.sc-net svg{position:absolute; inset:0; width:100%; height:100%;}
.sc-net path{fill:none; stroke:hsl(var(--brand-h) 60% 78%); stroke-width:1.6; stroke-dasharray:90; stroke-dashoffset:90;
  animation:scDraw .7s var(--ease) both;}
.sc-net path:nth-child(2){animation-delay:.18s;} .sc-net path:nth-child(3){animation-delay:.3s;}
.sc-net path:nth-child(4){animation-delay:.42s;}
@keyframes scDraw{to{stroke-dashoffset:0;}}
.sc-node,.sc-core{position:absolute; padding:4px 9px; border-radius:99px; font-size:10px; font-weight:700;
  background:var(--bg-alt); color:var(--text-2); border:1px solid var(--border);}
.sc-node.n1{left:2%; top:8%;} .sc-node.n2{right:2%; top:8%;}
.sc-node.n3{left:2%; bottom:6%;} .sc-node.n4{right:2%; bottom:6%;}
.sc-core{left:50%; top:50%; transform:translate(-50%,-50%); background:var(--primary); color:#fff;
  border-color:var(--primary); font-size:10.6px;}

/* measure */
.sc-chart{flex:1; min-height:72px;}
.sc-chart svg{width:100%; height:100%;}
.sc-area{fill:hsl(var(--brand-h) 85% 93%);}
.sc-line{fill:none; stroke:var(--primary); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:400; stroke-dashoffset:400; animation:scDraw 1s var(--ease) .15s both;}
.sc-kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px;}
.sc-kpis span{display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 9px;
  border-radius:9px; background:var(--bg-alt); font-size:10.6px;}
.sc-kpis b{font-weight:600; color:var(--text-2);} .sc-kpis i{font-style:normal; font-weight:800; color:#1a7f37;}

/* refine */
.sc-diff{list-style:none; margin:0; padding:0; display:grid; gap:7px;}
.sc-diff li{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px;
  border-radius:9px; background:var(--bg-alt); font-size:11px;}
.sc-diff b{font-weight:600; color:var(--text);}
.sc-diff span{font-weight:800;}
.sc-diff .up span{color:#1a7f37;} .sc-diff .hold span{color:var(--muted);}

.bp-stage{position:absolute; right:14px; bottom:-40px; text-align:right;}
#about-v4 .bp-ticks{margin-top:14px;}
#about-v4 .bp-tick{font-size:11.2px; padding:5px 11px;}
#about-v4 .bp-figs{margin-top:clamp(18px,2.2vw,28px); padding-top:clamp(14px,1.6vw,20px);}
#about-v4 .bp-fig b{font-size:clamp(17px,1.7vw,24px);}
#about-v4 .bp-fig span{margin-top:5px;}

@media (max-width:1040px){ .bp-stage{position:static; text-align:left; margin-top:10px;} }
@media (prefers-reduced-motion:reduce){
  .sc-lane i::after,.sc-wire i,.sc-net path,.sc-line{animation:none;}
  .sc-net path,.sc-line{stroke-dashoffset:0;} .sc-wire i{opacity:1;}
}


/* --- style-block-30.css --- */

/* the stage name sits with the ticks instead of floating over them */
#about-v4 .bp-stage{position:static; display:flex; align-items:baseline; gap:8px; margin-top:12px;
  text-align:left;}
#about-v4 .bp-stage em{font-size:10px; letter-spacing:.16em;}
#about-v4 .bp-stage b{font-size:clamp(16px,1.6vw,20px);}
#about-v4 .bp-screens{min-height:clamp(210px,21vw,250px);}
#about-v4 .sc{justify-content:flex-start;}
#about-v4 .bp-ticks{margin-top:10px;}


/* --- style-block-31.css --- */

/* the head follows the first variant: the copy on the left, the pictures
   on the right; the ribbon and the figures below are unchanged */
#about-v6 .cv-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
  gap:clamp(24px,3.4vw,56px); margin-bottom:clamp(24px,2.8vw,36px);}
#about-v6 .cv-say h2 em{display:inline;}
#about-v6 .cv-say p{margin:14px 0 0; font-size:clamp(13.6px,1.05vw,15px); line-height:1.66;
  color:var(--text-2); max-width:54ch;}
#about-v6 .cv-say .btn{margin-top:18px;}
@media (max-width:1040px){
  #about-v6 .cv-head{grid-template-columns:minmax(0,1fr);}
  #about-v6 .cg-art{max-width:560px;}
}


/* --- style-block-32.css --- */

/* off the wide layout the chevrons lose their points, so the direction is
   drawn in: an arrow across the row, and one down where the row wraps */
@media (max-width:1100px){
  #about-v6 .cv-ribbon{position:relative; column-gap:24px; row-gap:26px;}
  #about-v6 .cv::after{position:absolute; color:hsl(var(--brand-h) 75% 62%); font-size:15px; line-height:1;
    pointer-events:none;}
  /* across: sits in the gap to the right */
  #about-v6 .cv:not(:nth-child(3n)):not(:last-child)::after{content:"\2192";
    right:-19px; top:50%; transform:translateY(-50%);}
  /* down: sits in the gap under the last card of a row */
  #about-v6 .cv:nth-child(3n):not(:last-child)::after{content:"\2193";
    left:50%; right:auto; top:auto; bottom:-20px; transform:translateX(-50%);}
}
@media (max-width:640px){
  #about-v6 .cv-ribbon{column-gap:22px; row-gap:24px;}
  #about-v6 .cv::after{content:none;}
  #about-v6 .cv:not(:nth-child(2n)):not(:last-child)::after{content:"\2192";
    right:-18px; top:50%; transform:translateY(-50%);}
  #about-v6 .cv:nth-child(2n):not(:last-child)::after{content:"\2193";
    left:50%; right:auto; top:auto; bottom:-19px; transform:translateX(-50%);}
}


/* --- style-block-33.css --- */

/* the copy and the pictures run as parallel columns: the collage is sized
   to the copy so both blocks start and finish on the same line */
@media (min-width:1041px){
  #about-v6 .cv-head{align-items:center;}
  #about-v6 .cv-say{display:flex; flex-direction:column; align-items:flex-start;}
  #about-v6 .cv-say .btn{margin-top:20px;}
  #about-v6 .cg-art{width:100%; max-width:520px; margin-left:auto;}
}


/* --- style-block-34.css --- */

/* the ribbon stands up: the six stages run down the column the pictures
   used to hold, with the arrow between them pointing the way */
@media (min-width:1041px){
  #about-v6 .cv-head{grid-template-columns:minmax(0,1fr) minmax(0,.92fr); align-items:center;
    margin-bottom:clamp(20px,2.4vw,30px);}
  #about-v6 .cv-ribbon{grid-template-columns:minmax(0,1fr); row-gap:22px; column-gap:0;}
  #about-v6 .cv .cv-in,#about-v6 .cv:first-child .cv-in,#about-v6 .cv:last-child .cv-in{
    clip-path:none; border-radius:16px; padding:13px 16px; min-height:0;}
  #about-v6 .cv::after{position:absolute; left:50%; bottom:-17px; transform:translateX(-50%);
    content:"\2193"; color:hsl(var(--brand-h) 75% 62%); font-size:15px; line-height:1; pointer-events:none;}
  #about-v6 .cv:last-child::after{content:none;}
  #about-v6 .cv.on .cv-in{transform:translateX(4px);}
  #about-v6 .cv:hover .cv-in{transform:translateX(2px);}
}
#about-v6 .cv-figs-wrap{margin-top:clamp(18px,2.2vw,28px); padding-top:clamp(14px,1.8vw,20px);
  border-top:1px solid var(--border);}
#about-v6 .cv-figs{margin-top:0; padding-top:0; border-top:0;}
#about-v6 .cv-board{padding:clamp(16px,1.8vw,24px);}


/* --- style-block-35.css --- */

/* the board's heading sits above its line, and the stack is tightened so
   the section holds one screen */
@media (min-width:1041px){
  #about-v6 .cv-board-top{grid-template-columns:minmax(0,1fr); gap:8px; margin-bottom:14px;}
  #about-v6 .cv-board-top h3{white-space:normal;}
  #about-v6 .cv-ribbon{row-gap:18px;}
  #about-v6 .cv .cv-in{padding:11px 14px;}
  #about-v6 .cv-ic{width:30px; height:30px;}
  #about-v6 .cv::after{bottom:-14px; font-size:13px;}
  #about-v6 .cv-t b{font-size:14px;}
  #about-v6{padding-block:clamp(28px,3.2vw,44px);}
}


/* --- style-block-36.css --- */

/* the board is brought down to the height of the copy beside it, so the
   pair reads as one frame */
@media (min-width:1041px){
  #about-v6 .cv-head{align-items:stretch;}
  #about-v6 .cv-say{justify-content:center;}
  #about-v6 .cv-board{display:flex; flex-direction:column; padding:16px 18px;}
  #about-v6 .cv-board-top{margin-bottom:10px;}
  #about-v6 .cv-board-top h3{font-size:var(--h3);}
  #about-v6 .cv-board-top p{font-size:12.4px; line-height:1.5;}
  #about-v6 .cv-ribbon{flex:1; row-gap:14px; align-content:space-between;}
  #about-v6 .cv .cv-in{padding:9px 13px; gap:9px; border-radius:13px;}
  #about-v6 .cv-ic{width:27px; height:27px; border-radius:9px;}
  #about-v6 .cv-ic svg{width:14px; height:14px;}
  #about-v6 .cv-t i{font-size:9.4px;}
  #about-v6 .cv-t b{font-size:13.2px;}
  #about-v6 .cv::after{bottom:-11px; font-size:12px;}
}


/* --- style-block-37.css --- */

/* the board sits at its own, shorter height and centres against the copy */
@media (min-width:1041px){
  #about-v6 .cv-head{align-items:center;}
  #about-v6 .cv-board{align-self:center;}
  #about-v6 .cv-ribbon{flex:none; row-gap:12px; align-content:start;}
  #about-v6 .cv .cv-in{padding:7px 12px; min-height:0;}
  #about-v6 .cv-ic{width:25px; height:25px; border-radius:8px;}
  #about-v6 .cv-ic svg{width:13px; height:13px;}
  #about-v6 .cv-t i{font-size:9px;}
  #about-v6 .cv-t b{font-size:12.8px;}
  #about-v6 .cv::after{bottom:-10px; font-size:11px;}
  #about-v6 .cv-board-top{margin-bottom:9px;}
}


/* --- style-block-38.css --- */

/* variant 7 keeps the earlier shape: copy and pictures at the top, the
   ribbon running across the board below */
#about .cv-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center;
  gap:clamp(24px,3.4vw,56px); margin-bottom:clamp(22px,2.6vw,34px);}
#about .cv-say h2 em{display:inline; font-style:normal; color:var(--brand-text);}
#about .cv-say p{margin:14px 0 0; font-size:clamp(13.6px,1.05vw,15px); line-height:1.66;
  color:var(--text-2); max-width:54ch;}
#about .cv-say .btn{margin-top:18px;}
#about .cg-art{width:100%; max-width:520px; margin-left:auto;}
#about .cv-board-top{grid-template-columns:minmax(0,auto) minmax(0,1fr);}
@media (max-width:1040px){
  #about .cv-head{grid-template-columns:minmax(0,1fr);}
  #about .cg-art{max-width:560px; margin-inline:auto;}
  #about .cv-board-top{grid-template-columns:minmax(0,1fr);}
}


/* --- style-block-39.css --- */

/* the lanes sit in one box, the way the reference does it: the fade and
   the scrolling happen inside its rounded edge */
.iw-box{padding:clamp(16px,1.8vw,26px); border-radius:26px; background:var(--bg-alt);
  border:1px solid var(--border); overflow:hidden;}
html[data-theme="dark"] .iw-box{background:hsl(var(--brand-h) 45% 12%);}
#industries{overflow:visible;}
.iw-box .iw-lanes{-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
.iw-box .iw-chip{background:var(--surface);}


/* --- style-block-40.css --- */

.vsw-ind{bottom:122px;}
[data-ind-variant][hidden]{display:none !important;}


/* --- style-block-41.css --- */

/* the cards carry their icon and name only */
#industries-v2 .ig-top{justify-content:center;}
#industries-v2 .ig-ic{width:clamp(38px,3.3vw,46px); height:clamp(38px,3.3vw,46px);}
#industries-v2 .ig-card{gap:12px; padding:clamp(16px,1.6vw,20px);}

/* ?? homepage section grounds ? final lock (white / tint) ???????????????
   After hero: white → tint → white → tint. Selected work removed.
   CTA keeps the tint lane under its photo card. */
#about,
#why,
#approach,
#reviews,
#faq{ background:var(--surface); }

#services,
#industries,
#ai-ecosystem,
#contact{ background:var(--bg-alt); }

/* === SITE CONSISTENCY LOCK (do not edit here — edit site-consistency.css) === */
/* ══════════════════════════════════════════════════════════════════════
   SITE CONSISTENCY — design-system source of truth.

   Loaded last from layout.tsx, and appended to every page stylesheet by:
     node scripts/_apply-site-consistency.mjs
   Edit THIS file, then re-run that script so page CSS stays in sync.

   System:
   - One type scale for h1–h6 + body
   - Section rhythm: --sec-y / --sec-y-tight / --sec-y-feat
   - Shared gaps: head / lede / block / card / grid / form / wrap
   - Mobile/tablet overrides below keep vertical space compact
   - Heroes (.hs / .ct-hero) use --hero-pad-* tokens
   Future pages: add class "sec" (or .sec-pad*) — spacing follows automatically.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* Type scale — one value per level, site-wide (responsive via clamp) */
  --h1:clamp(32px,4.2vw,56px);
  --h2:clamp(28px,3.2vw,44px);
  --h3:clamp(17px,1.7vw,22px);
  --h4:clamp(14px,1.25vw,16px);
  --h5:clamp(12.5px,1.1vw,14px);
  --h6:clamp(12px,1.05vw,13px);
  --body:16px;
  --lede:16px;
  --body-lh:1.7;

  /* Spacing scale — desktop defaults; mobile/tablet override below */
  --sec-y:clamp(56px,5.4vw,84px);          /* standard sections */
  --sec-y-tight:clamp(36px,4vw,56px);      /* proof strips / compact bands */
  --sec-y-feat:clamp(64px,6vw,88px);       /* large / featured bands */
  --head-gap:clamp(12px,1.2vw,16px);       /* eyebrow → title */
  --lede-gap:clamp(14px,1.4vw,20px);       /* title → lede */
  --block-gap:clamp(22px,2.4vw,36px);      /* head block → content */
  --card-pad:clamp(18px,2vw,28px);
  --card-gap:clamp(14px,1.6vw,22px);
  --grid-gap:clamp(16px,2vw,28px);
  --form-gap:clamp(12px,1.4vw,16px);
  --wrap-x:clamp(16px,4vw,26px);
  --cta-pad-y:clamp(28px,3.6vw,48px);
  --hero-pad-top:clamp(30px,3.4vw,62px);
  --hero-pad-bot:20px;
}

/* Future-proof layout primitives (optional on new sections) */
.sec-pad{padding-block:var(--sec-y);}
.sec-pad-tight{padding-block:var(--sec-y-tight);}
.sec-pad-feat{padding-block:var(--sec-y-feat);}
.stack-block{margin-top:var(--block-gap);}
.stack-cards{gap:var(--card-gap);}
.stack-grid{gap:var(--grid-gap);}

/* ── Equal vertical padding on every content section ───────────────── */
.sec,
section.sec,
.sec.acv,
.sec.ax,
.sec.bl-sec,
.sec.eg-sec,
.sec.revs,
.sec.faq,
.sec.wy,
.sec.pz,
.sec.pf,
.sec.wn,
.sec.vs,
.sec.wk,
.sec.cta,
.sec.tsm,
.sec.wc-sec,
.sec.svc,
.sec.beam-zone,
.sec.tb,
.sec.tm,
.sec.ls,
.sec.lp,
.sec.ws,
.sec.clients,
#who.sec,
#vs.sec,
#model.sec,
#process.sec,
#why.sec,
#whyus.sec,
#receive.sec,
#pricing.sec,
#reviews.sec,
#work.sec,
#faq.sec,
#contact.sec,
#signs.sec,
#get.sec,
#platforms.sec,
#ai.sec,
#crawl-check.sec,
#what-local.sec,
#services-2.sec,
#franchise-covers.sec,
#pack.sec,
#apart.sec,
#clients.sec,
#fit.sec,
#industries.sec{
  padding-block:var(--sec-y) !important;
}

/* Under-hero stats strip — rhythm owned by stats-strip.css (#proof-v2) */
/* Legacy #ai.tb (different section) stays tighter */
.sec.tb,
html body #ai.tb,
html body #ai.tb.sec{
  padding-block:var(--sec-y-tight) !important;
}

/* ── Branding fonts (Sora display / Inter body) — one stack site-wide ─ */
html body{
  font-family:var(--font);
}
html body :is(h1, h2, h3, h4, h5, h6, .hs-h1, .ct-hero h1),
html body .hs .hs-h1,
html body .sec-head h2,
html body .lamp h1{
  font-family:var(--font-display) !important;
}

/* ── Headings: one size per level — beat page-local clamps ──────────── */
html body :is(h1, .hs-h1, .ct-hero h1),
html body .hs .hs-h1{
  font-size:var(--h1) !important;
  line-height:1.08 !important;
  /* Negative letter-spacing on display type leaves an optical left gap — pull flush */
  margin-inline-start:-0.04em;
}
html body :is(h2),
html body .sec-head h2,
html body .ac-head h2,
html body .wy-say h2,
html body .mp-say h2,
html body .gw-say h2,
html body .pf-head h2,
html body .cta3 h2,
html body .eg-sec h2,
html body .hx .sec-head h2,
html body .sg-head h2,
html body .ct-side h2,
html body .ct-next-head h2,
html body .tm-head h2,
html body .ls-say h2,
html body .lp-say h2,
html body .pw-head h2,
html body .ps-head h2,
html body .fp-head h2,
html body .dc-head h2,
html body .cq-top h2,
html body #services-2 .sec-head h2,
html body #services-2 h2,
html body #franchise-covers .sec-head h2,
html body #franchise-covers h2,
html body #franchise-covers .tm-head h2,
html body #what-local h2,
html body #pack h2,
html body #process h2,
html body #faq h2,
html body #duplicate h2,
html body #duplicate h2 span,
html body #duplicate h2 em,
html body #duplicate h2 small,
html body #duplicate-v2 h2,
html body #duplicate-v2 h2 span,
html body #duplicate-v2 h2 em,
html body #duplicate-v2 h2 small{
  font-size:var(--h2) !important;
  line-height:1.12 !important;
  letter-spacing:-0.04em !important;
}
html body :is(h3),
html body .ac-card h3,
html body .eg-card h3,
html body .pf-card h3,
html body .ws-item h3,
html body .gw-block h3,
html body .sp-top h3,
html body .wc-panel h3,
html body .wn-card h3,
html body .tm-card h3,
html body .dv-card h3,
html body .fw-step h3,
html body .em-card h3,
html body .faq-aside h3{
  font-size:var(--h3) !important;
  line-height:1.25 !important;
}
/* What-we-do console tabs keep rail size (h3 is semantic only) */
html body .cn-tab h3{
  font-size:inherit !important;
  line-height:inherit !important;
  letter-spacing:inherit !important;
  font-weight:inherit !important;
  margin:0 !important;
  color:inherit !important;
}
/* Hero form title stays compact (p.hs-form-title or legacy h3) */
html body .hs-form > h3,
html body .hs-form > .hs-form-title,
html body .hs-done h3{
  font-size:clamp(17px,1.5vw,19px) !important;
  font-weight:700 !important;
  line-height:1.22 !important;
  letter-spacing:-0.035em !important;
  margin:0 !important;
  text-transform:none !important;
}
html body :is(h4){ font-size:var(--h4) !important; line-height:1.3 !important; }
html body :is(h5){ font-size:var(--h5) !important; line-height:1.35 !important; }
html body :is(h6){ font-size:var(--h6) !important; line-height:1.35 !important; }

/* ── H2 ≤ 2 lines: give titles enough measure — never shrink the type ─ */
html body .sec-head{
  max-width:min(100%, 62ch) !important;
}
html body .sec-head.mid{
  max-width:min(100%, 68ch) !important;
  margin-inline:auto !important;
}
html body .sec h2,
html body .sec-head h2{
  text-wrap:balance;
}
/* Never force a third stacked line inside an h2 */
html body h2 > span + span + span{
  display:inline !important;
}
/* Headings must flow as one phrase — no forced line breaks via <em>/<span>/<br> */
html body :is(h1, h2, h3, h4, h5, h6) em,
html body :is(h1, h2, h3, h4, h5, h6) > span{
  display:inline !important;
}
html body :is(h1, h2, h3, h4, h5, h6) br{
  display:none !important;
}

/* ── Body / lede reading size ───────────────────────────────────────── */
html body .sec p,
html body .sec-lede,
html body .hs-lede,
html body .ac-lede,
html body .cta3 > p,
html body .cta3-line,
html body .faq-a p,
html body .faq-aside p,
html body .wy-pane p,
html body .wy-say > p,
html body .wc-panel > p,
html body .wn-panel > p,
html body .ac-card p,
html body .eg-card p,
html body .pf-card > p,
html body .gr-text,
html body .mp-say > p,
html body .gw-say > p,
html body .wc-say > p,
html body .wn-say p,
html body .tm-aside p,
html body .tm-foot p,
html body .lp-lede,
html body .ls-say p,
html body .tm-card p{
  font-size:var(--body) !important;
  line-height:var(--body-lh) !important;
}

/* Keep form errors / helper chrome from inheriting body size */
html body .sec .hs-err,
html body .sec .ct-err,
html body .sec .form-err,
html body .hs-err,
html body .ct-err,
html body .hs-sub{
  font-size:13px !important;
  line-height:1.45 !important;
}
/* Hero form title is a label (p.hs-form-title), not body copy — keep compact */
html body .hs-form > h3,
html body .hs-form > .hs-form-title{
  font-size:clamp(17px,1.5vw,19px) !important;
  font-weight:700 !important;
  line-height:1.22 !important;
  letter-spacing:-0.035em !important;
  margin:0 !important;
  text-transform:none !important;
}

/* ── Heading → description / content gaps ───────────────────────────── */
html body .sec-head .smark,
html body .sec-head > .smark{
  margin-bottom:var(--head-gap) !important;
}
html body .sec-head h2,
html body .ac-head h2,
html body .tm-head h2,
html body .ls-say h2,
html body .lp-say h2{
  margin:0 !important;
}
html body .sec-head .sec-lede,
html body .sec-lede,
html body .ls-say p,
html body .lp-lede,
html body .wy-say > p,
html body .mp-say > p,
html body .gw-say > p{
  margin-top:var(--lede-gap) !important;
}

/* ── Section eyebrows: one pill + blue dot ───────────────────────────── */
.smark,
.wy-eyebrow,
.gw-eyebrow,
.nsr-eyebrow,
.vs-rule{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:var(--head-gap) !important;
  padding:8px 18px !important;
  border:1px solid var(--border) !important;
  border-radius:30px !important;
  background:var(--surface) !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:var(--brand-text) !important;
  font-family:inherit !important;
  line-height:1.2 !important;
  width:fit-content !important;
  max-width:100% !important;
  flex:none !important;
  justify-content:flex-start !important;
}
.smark b,
.vs-rule b{
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:var(--brand-text) !important;
  font-family:inherit !important;
}
.smark::before,
.gw-eyebrow::before,
.vs-rule::before{
  content:"" !important;
  display:block !important;
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  background:var(--primary) !important;
  flex-shrink:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background-image:none !important;
}
.vs-rule::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
}
/* Eyebrows never get flanking rules ? pill + blue dot only */
.fw-mark{
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
}
.fw-mark::before,
.fw-mark::after{
  content:none !important;
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:none !important;
  margin:0 !important;
}
.wy-eyebrow > i,
.nsr-eyebrow > i{
  display:block !important;
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  background:var(--primary) !important;
  flex-shrink:0 !important;
  margin:0 !important;
  padding:0 !important;
  color:transparent !important;
  overflow:hidden !important;
}
.wy-eyebrow > i svg,
.nsr-eyebrow > i svg{
  display:none !important;
}
.on-dark .smark,
.on-dark .wy-eyebrow,
.on-dark .gw-eyebrow,
.on-dark .nsr-eyebrow,
.on-dark .vs-rule,
.ws .smark,
#fit .smark,
#stack .smark{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.20) !important;
  color:#fff !important;
}
.on-dark .smark b,
.on-dark .vs-rule b,
.ws .smark b,
#fit .smark b,
#stack .smark b{
  color:#fff !important;
}

/* ── Alternating grounds helper (pages set --ground / --panel) ──────── */
.sec[data-ground="tint"],
.sec.is-tint{
  --ground:var(--bg-alt);
  --panel:var(--surface);
  background:var(--ground) !important;
}
.sec[data-ground="white"],
.sec.is-white{
  --ground:var(--surface);
  --panel:var(--bg-alt);
  background:var(--ground) !important;
}
.sec[data-ground="soft"],
.sec.is-soft{
  --ground:var(--bg);
  --panel:var(--surface);
  background:var(--ground) !important;
}
/* Process steps: icons only — hide step numbers in titles */
#process .eg-card h3 i{
  display:none !important;
  margin:0 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE SPACING SYSTEM
   Tokens + component rhythm. Beats page-local clamps via cascade lock.
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet — keep room, avoid desktop-sized empty bands */
@media (max-width:1023px){
  :root{
    --sec-y:clamp(52px,6.5vw,72px) !important;
    --sec-y-tight:clamp(32px,4vw,48px) !important;
    --sec-y-feat:clamp(60px,7vw,80px) !important;
    --head-gap:12px !important;
    --lede-gap:14px !important;
    --block-gap:clamp(18px,2.6vw,28px) !important;
    --card-pad:clamp(16px,2.2vw,22px) !important;
    --card-gap:clamp(12px,1.8vw,18px) !important;
    --grid-gap:clamp(14px,2vw,22px) !important;
    --form-gap:14px !important;
    --wrap-x:clamp(16px,3.5vw,22px) !important;
    --cta-pad-y:clamp(26px,4vw,40px) !important;
    --hero-pad-top:clamp(26px,3vw,48px) !important;
    --hero-pad-bot:20px !important;
  }
}

/* Mobile — compact + premium (avoid 100px+ section padding) */
@media (max-width:767px){
  :root{
    --sec-y:clamp(48px,11vw,64px) !important;
    --sec-y-tight:clamp(28px,7vw,40px) !important;
    --sec-y-feat:clamp(56px,12vw,72px) !important;
    --head-gap:10px !important;
    --lede-gap:12px !important;
    --block-gap:clamp(16px,4.5vw,22px) !important;
    --card-pad:clamp(14px,4vw,18px) !important;
    --card-gap:clamp(10px,3vw,14px) !important;
    --grid-gap:clamp(12px,3.5vw,16px) !important;
    --form-gap:12px !important;
    --wrap-x:16px !important;
    --cta-pad-y:clamp(24px,6vw,36px) !important;
    --hero-pad-top:26px !important;
    --hero-pad-bot:20px !important;
    --body-lh:1.65 !important;
  }

  /* Horizontal gutters */
  html body .wrap{
    padding-left:var(--wrap-x) !important;
    padding-right:var(--wrap-x) !important;
  }

  /* Re-assert section rhythm (beats page-local padding-block !important) */
  html body .sec,
  html body section.sec,
  html body .sec.acv,
  html body .sec.ax,
  html body .sec.bl-sec,
  html body .sec.eg-sec,
  html body .sec.revs,
  html body .sec.faq,
  html body .sec.wy,
  html body .sec.pz,
  html body .sec.pf,
  html body .sec.wn,
  html body .sec.vs,
  html body .sec.wk,
  html body .sec.cta,
  html body .sec.tsm,
  html body .sec.wc-sec,
  html body .sec.svc,
  html body .sec.beam-zone,
  html body .sec.tb,
  html body .sec.tm,
  html body .sec.ls,
  html body .sec.lp,
  html body .sec.ws,
  html body .sec.clients,
  html body #who.sec,
  html body #vs.sec,
  html body #model.sec,
  html body #process.sec,
  html body #why.sec,
  html body #whyus.sec,
  html body #receive.sec,
  html body #pricing.sec,
  html body #reviews.sec,
  html body #work.sec,
  html body #faq.sec,
  html body #contact.sec,
  html body #signs.sec,
  html body #get.sec,
  html body #platforms.sec,
  html body #ai.sec,
  html body #ai.tb,
  html body #ai.tb.sec,
  html body #crawl-check.sec,
  html body #what-local.sec,
  html body #services-2.sec,
  html body #franchise-covers.sec,
  html body #pack.sec,
  html body #apart.sec,
  html body #clients.sec,
  html body #fit.sec,
  html body #industries.sec,
  html body .sec-pad,
  html body .sec-pad-feat{
    padding-block:var(--sec-y) !important;
  }
  html body .sec.tb,
  html body .sec-pad-tight{
    padding-block:var(--sec-y-tight) !important;
  }

  /* Hero — content-driven height, keep impact */
  html body .hs,
  html body .hero,
  html body .ct-hero{
    min-height:0 !important;
    padding-top:calc(var(--nav-h, 64px) + var(--hero-pad-top)) !important;
    padding-bottom:var(--hero-pad-bot) !important;
  }
  /* Full-height photo + veil behind entire mobile hero (not just the H1) */
  html body .hs-bg,
  html body .hero-slider,
  html body .hero-scrim,
  html body .hs-veil{
    position:absolute !important;
    inset:0 !important;
    max-height:none !important;
    height:auto !important;
  }
  html body .hs-bg img,
  html body .hero-slide img{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center top !important;
  }
  html body .mnav > a,
  html body .mnav .mm-acc,
  html body .mnav .mm-acc .mm-acc-label,
  html body .mnav .mm-accp a{
    text-align:left !important;
  }
  html body .mnav .mm-acc{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
  }
  html body .hs-in{
    gap:var(--block-gap) !important;
  }
  html body .hs-h1,
  html body .ct-hero h1{
    margin-bottom:var(--lede-gap) !important;
  }
  html body .hs-lede{
    margin-top:0 !important;
    margin-bottom:var(--block-gap) !important;
  }
  html body .hs-lede + .hs-lede{
    margin-top:calc(var(--lede-gap) * -0.25) !important;
    margin-bottom:var(--block-gap) !important;
  }
  html body .hs-act{
    margin-top:0 !important;
    gap:12px !important;
  }
  html body .hs-form{
    padding:clamp(16px,4vw,20px) !important;
  }
  html body .hs-sub{
    margin-bottom:var(--form-gap) !important;
  }
  html body .hs-grid,
  html body .hs-form .hs-grid,
  html body .ct-form,
  html body form[data-lead]{
    gap:var(--form-gap) !important;
  }
  html body .hs-field,
  html body .ct-field{
    margin:0 !important;
  }

  /* Head → content */
  html body .sec-head,
  html body .ac-head,
  html body .tm-head,
  html body .sg-head,
  html body .pf-head,
  html body .hx-head,
  html body .pw-head,
  html body .ps-head,
  html body .fp-head,
  html body .dc-head,
  html body .cq-top,
  html body .wy-say,
  html body .mp-say,
  html body .gw-say,
  html body .ls-say,
  html body .lp-say{
    margin-bottom:0 !important;
  }
  html body .sec-head + *,
  html body .ac-head + *,
  html body .tm-head + *,
  html body .sg-head + *,
  html body .pf-head + *,
  html body .hx-head + *,
  html body .wy-say + *,
  html body .mp-say + *,
  html body .gw-say + *,
  html body .ls-say + *,
  html body .lp-say + *,
  html body .eg,
  html body .ac-grid,
  html body .pf-grid,
  html body .tm-panels,
  html body .tm-grid,
  html body .sg-grid,
  html body .gr,
  html body .cn,
  html body .faq-wrap,
  html body .wk-rail,
  html body .cl-wall,
  html body .ax-stage,
  html body .wn,
  html body .wc-card,
  html body .lp-grid,
  html body .ls-grid{
    margin-top:var(--block-gap) !important;
  }

  /* Grids / lists */
  html body .ac-grid,
  html body .pf-grid,
  html body .tm-panels,
  html body .tm-grid,
  html body .eg-list,
  html body .faq-list,
  html body .lp-grid,
  html body .ls-grid,
  html body .ws-list,
  html body .dv-grid,
  html body .em-grid,
  html body .stack-grid,
  html body .stack-cards{
    gap:var(--grid-gap) !important;
  }
  html body .eg{
    --eg-gap:var(--grid-gap) !important;
    gap:var(--grid-gap) !important;
  }
  html body .ax{
    --ax-gap:clamp(16px,4vw,28px) !important;
  }
  html body .ax-stage{
    column-gap:var(--ax-gap) !important;
    row-gap:var(--grid-gap) !important;
  }
  html body .ax-col{
    gap:var(--card-gap) !important;
  }
  html body .hx{
    --hx-gap:var(--grid-gap) !important;
  }
  html body .sg-grid,
  html body .mp-panel,
  html body .wn{
    gap:var(--grid-gap) !important;
  }

  /* Cards — internal pad */
  html body .ac-card,
  html body .eg-card,
  html body .pf-card,
  html body .tm-card,
  html body .wn-card,
  html body .dv-card,
  html body .em-card,
  html body .fw-step,
  html body .ws-item,
  html body .gw-block,
  html body .revs-card{
    padding:var(--card-pad) !important;
  }
  html body .ac-card p,
  html body .eg-card p,
  html body .pf-card > p,
  html body .tm-card p,
  html body .wn-card p{
    margin-top:8px !important;
    margin-bottom:0 !important;
  }
  html body .ac-card h3,
  html body .eg-card h3,
  html body .pf-card h3,
  html body .tm-card h3{
    margin:0 0 6px !important;
  }

  /* CTA bands */
  html body .cta .cta3,
  html body .cta3{
    padding:var(--cta-pad-y) var(--wrap-x) !important;
  }
  html body .cta3-actions,
  html body .sg-act,
  html body .eg-cta,
  html body .wk-cta,
  html body .gr-end,
  html body .mp-say .btn{
    margin-top:var(--block-gap) !important;
    gap:12px !important;
  }

  /* FAQ */
  html body .faq-wrap{
    gap:var(--block-gap) !important;
  }
  html body .faq-q{
    padding-block:14px !important;
  }
  html body .faq-a{
    padding-bottom:14px !important;
  }

  /* Footer — slightly tighter plate on small screens */
  html body .ftm{
    padding-block:clamp(20px,5vw,28px) !important;
  }
  html body .ft4-top,
  html body .ft-top{
    gap:clamp(22px,5vw,30px) !important;
  }
  html body .mnav{
    padding:8px 16px 16px !important;
    gap:2px !important;
  }
  html body .mnav a{
    padding:10px 0 !important;
  }

  /* Kill leftover spacer habits */
  html body .sec br:only-child,
  html body .sec > br,
  html body .spacer,
  html body .v-space,
  html body [aria-hidden="true"].spacer{
    display:none !important;
    margin:0 !important;
    padding:0 !important;
    height:0 !important;
  }
  html body .sec > .wrap > :last-child{
    margin-bottom:0 !important;
  }
}

/* Desktop — preserve breathing room; lock tokens against page media overrides */
@media (min-width:1024px){
  :root{
    --sec-y:clamp(56px,5.4vw,84px) !important;
    --sec-y-tight:clamp(36px,4vw,56px) !important;
    --sec-y-feat:clamp(64px,6vw,88px) !important;
    --head-gap:clamp(12px,1.2vw,16px) !important;
    --lede-gap:clamp(14px,1.4vw,20px) !important;
    --block-gap:clamp(22px,2.4vw,36px) !important;
  }
}

/* === ZEBRA GROUND LOCK (site) === */
html body section[data-ground="tint"],
html body .sec[data-ground="tint"],
html body .sec.is-tint{
  --ground:var(--bg-alt) !important;
  --panel:var(--surface) !important;
  background:var(--bg-alt) !important;
}
html body section[data-ground="white"],
html body .sec[data-ground="white"],
html body .sec.is-white{
  --ground:var(--surface) !important;
  --panel:var(--bg-alt) !important;
  background:var(--surface) !important;
}

/* In-page hash targets clear the fixed nav */
#approach{
  scroll-margin-top:calc(var(--nav-h) + var(--nav-gap, 14px) + 12px);
}