/* ==========================================================================
   AdVelocity  /  pages.css
   Section systems and the interactive widgets. No two adjacent sections on
   any page share a layout skeleton.
   ========================================================================== */

/* ============================================================== 1. THE HERO */
.hero{
  position:relative;
  min-height:88vh;
  min-height:88svh;
  display:flex;
  align-items:center;
  padding-top:calc(var(--nav-h) + 3rem);
  padding-bottom:clamp(2.6rem,6vw,5rem);
  overflow:hidden;
  isolation:isolate;
}
.hero__fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero__particles{position:absolute;inset:0;width:100%;height:100%;opacity:.75}
.hero__signal{position:absolute;inset:0;width:100%;height:100%}
.hero__signal path{
  fill:none;
  stroke:var(--red);
  stroke-width:1;
  opacity:.5;
  filter:drop-shadow(0 0 6px var(--red-glow));
}
.hero__vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 118% 88% at 50% 42%,transparent 30%,rgba(6,6,9,.72) 100%),
    linear-gradient(180deg,rgba(6,6,9,.62) 0%,transparent 26%,transparent 58%,rgba(6,6,9,.88) 100%);
}
/* Cursor-responsive drift. JS writes --px and --py, both clamped small. */
.hero__drift{
  position:absolute;
  inset:-6%;
  transform:translate3d(calc(var(--px,0) * 22px),calc(var(--py,0) * 16px),0);
  transition:transform 1.5s var(--ease-out);
}

.hero__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.6rem,3vw,2.6rem);
  width:100%;
}
.hero__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.9rem 1.8rem;
}
.hero__title{
  font-size:var(--t-mega);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.026em;
  max-width:20ch;
}
.hero__title .line{display:block}
.hero__title em{
  font-style:normal;
  color:var(--red);
  display:inline-block;
}
.hero__sub{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(1.4rem,3vw,3.4rem);
  align-items:end;
  padding-top:clamp(1.2rem,2.4vw,2rem);
  border-top:1px solid var(--line);
}
@media (max-width:820px){
  .hero__sub{grid-template-columns:minmax(0,1fr)}
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.7rem}
.scroll-cue{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(2.6rem,6vw,5rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.7rem;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-3);
  writing-mode:vertical-rl;
}
.scroll-cue::after{
  content:"";
  width:1px;height:54px;
  background:linear-gradient(180deg,var(--red),transparent);
  animation:cue-run 2.6s var(--ease) infinite;
  transform-origin:50% 0;
}
@keyframes cue-run{
  0%{transform:scaleY(0);opacity:0}
  30%{opacity:1}
  100%{transform:scaleY(1);opacity:0}
}
@media (max-width:900px){.scroll-cue{display:none}}
/* The cue lives in the right margin, so the hero content stops short of it.
   A decoration never sits on top of a button. The gutter has to be added to,
   not replaced, or this quietly removes clearance instead of adding it. */
@media (min-width:901px){.hero__grid{padding-right:calc(var(--gutter) + 4rem)}}
/* Room under the hero buttons on phones so the floating guide never lands
   on top of the primary call to action. */
@media (max-width:720px){.hero{padding-bottom:5.4rem}}

/* ================================================= 2. THE SEVEN-STEP PATH
   ATTENTION to OPTIMIZE. A horizontal signal run, not a row of cards. */
.path{
  border-block:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink),var(--canvas));
  padding-block:clamp(2.4rem,5vw,4.2rem);
  overflow:hidden;
}
.path__scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.path__scroll::-webkit-scrollbar{display:none}
.path__track{
  display:flex;
  align-items:flex-start;
  gap:0;
  min-width:max-content;
  padding-inline:var(--gutter);
  position:relative;
}
.path__node{
  position:relative;
  flex:none;
  width:clamp(200px,19vw,250px);
  padding-top:2.5rem;
}
.path__node::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:100%;height:1px;
  background:var(--line);
}
.path__node::after{
  content:"";
  position:absolute;
  top:-4px;left:0;
  width:9px;height:9px;
  background:var(--canvas);
  border:1px solid var(--line-strong);
  transform:rotate(45deg);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease-out);
}
.path__node.in::after{background:var(--red);border-color:var(--red);transform:rotate(45deg) scale(1.14)}
.path__node.in::before{background:linear-gradient(90deg,var(--red),var(--line))}
.path__n{display:block;margin-bottom:.55rem}
.path__name{
  display:block;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.05rem,1.2vw,1.2rem);
  letter-spacing:-.005em;
  text-transform:none;
  margin-bottom:.4rem;
}
.path__note{font-size:var(--t-xs);color:var(--text-2);line-height:1.5;max-width:24ch}
.path__hint{
  display:flex;
  justify-content:flex-end;
  padding-top:1.2rem;
}

/* =============================================================== 3. MANIFESTO
   Oversized editorial type, deliberately off the grid. */
.manifesto{
  position:relative;
  padding-block:clamp(6rem,15vw,15rem);
  overflow:hidden;
}
.manifesto__inner{max-width:1320px;margin-inline:auto;position:relative}
.manifesto blockquote{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2rem,6.4vw,5.4rem);
  line-height:.98;
  letter-spacing:-.038em;
  max-width:18ch;
}
.manifesto blockquote .soft{color:var(--text-3)}
.manifesto blockquote .hit{color:var(--red);font-style:italic}
.manifesto__sig{
  margin-left:auto;
  margin-top:clamp(2rem,4vw,3.4rem);
  max-width:44ch;
  text-align:right;
  color:var(--text-2);
  font-size:var(--t-sm);
}
@media (max-width:780px){
  .manifesto__sig{text-align:left;margin-left:0}
}
.manifesto__mark{
  position:absolute;
  right:-2%;
  top:-14%;
  width:min(420px,44vw);
  opacity:.05;
  pointer-events:none;
  filter:grayscale(1);
}
@media (max-height:620px){.manifesto__mark{display:none}}

/* ================================================ 4. THE SYSTEM, STICKY SCROLL
   Six stages. The left pane stays; the right pane scrolls the story past it. */
.system{position:relative;padding-block:var(--sec-y)}
.system__layout{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5.5rem);
  align-items:start;
}
@media (max-width:960px){.system__layout{grid-template-columns:minmax(0,1fr)}}

.system__stage{
  position:sticky;
  /* The steps carry opacity below 1, which paints them in the same layer as
     positioned elements. Without an explicit z-index they scroll straight over
     this dial on phones, where the two are stacked instead of side by side. */
  z-index:2;
  top:calc(var(--nav-h) + clamp(1rem,4vh,3rem));
  aspect-ratio:1/1;
  max-height:64vh;
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel),var(--ink));
  overflow:hidden;
}
@media (max-width:960px){
  .system__stage{position:sticky;top:calc(var(--nav-h) + .5rem);aspect-ratio:16/10;max-height:38vh}
}
.system__dial{position:absolute;inset:0;width:100%;height:100%}
.system__dial .ring-bg{fill:none;stroke:var(--line);stroke-width:1}
.system__dial .ring-fg{
  fill:none;
  stroke:var(--red);
  stroke-width:2;
  stroke-linecap:round;
  filter:drop-shadow(0 0 7px var(--red-glow));
  transition:stroke-dashoffset .7s var(--ease-out);
}
.system__dial .spoke{stroke:var(--line);stroke-width:1}
.system__dial .node{
  fill:var(--panel);
  stroke:var(--line-strong);
  stroke-width:1;
  transition:fill .45s var(--ease),stroke .45s var(--ease),r .45s var(--ease-out);
}
.system__dial .node.on{fill:var(--red);stroke:var(--red)}
.system__read{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  width:78%;
}
.system__read .num{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.14em;
  color:var(--red);
  display:block;
  margin-bottom:.7rem;
}
.system__read .name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.4rem,2.2vw,1.9rem);
  letter-spacing:-.015em;
  text-transform:none;
  line-height:1.15;
  display:block;
}
.system__read .name span{
  display:inline-block;
  animation:swap-in .5s var(--ease-out) both;
}
@keyframes swap-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.system__sweep{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(227,27,35,.16) 50%,transparent 58%);
  animation:sweep 7s linear -2s infinite;
}
@keyframes sweep{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

.system__steps{display:flex;flex-direction:column;gap:clamp(2rem,7vh,5rem)}
/* Inactive steps are held back by colour, not by a heavy fade. An earlier
   0.36 opacity dropped the body text to about 2.2:1 against the canvas, which
   is unreadable. At 0.82 it measures 5.5:1, and the red heading plus the lit
   dial node carry the active state instead. */
.system__step{
  padding:clamp(1.4rem,2.6vw,2.2rem) 0;
  border-top:1px solid var(--line);
  opacity:.82;
  transition:opacity .55s var(--ease);
}
.system__step.is-active{opacity:1}
.system__step h3{
  font-size:var(--t-lg);
  font-weight:700;
  text-transform:none;
  letter-spacing:-.01em;
  margin-block:.5rem .7rem;
  color:var(--text-3);
  transition:color .55s var(--ease);
}
.system__step.is-active h3{color:var(--red)}
.system__step p{color:var(--text-2);max-width:48ch}
.system__step.is-active p{color:var(--text)}

/* ================================== 5. THE SCROLL STORY  (Higgsfield section)
   A pinned region with a sticky full-viewport stage. Built to the scrub
   pipeline: blob video, image sequence, or the designed still fallback. */
.story{position:relative;background:var(--ink)}
/* Sized in scroll distance, not seconds. 650vh leaves a 550vh scroll range,
   so each of the five stages owns about 110vh: a long readable plateau with
   short eased ramps at the edges. Validated by the flick test. */
.story__pin{height:650vh}
.story__stage{
  position:sticky;
  top:0;
  height:100svh;
  height:100vh;
  overflow:hidden;
  isolation:isolate;
  background:var(--ink);
}
.story__media,.story__poster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.story__poster{
  background-size:cover;
  background-position:center;
  transition:opacity .8s var(--ease);
}
.story__media{
  opacity:0;
  transition:opacity .8s var(--ease);
  transform:translateZ(0);      /* its own compositor layer */
  will-change:transform;
}
.story__stage.video-ready .story__media{opacity:1}
.story__stage.video-ready .story__poster{opacity:0}
.story__stage.video-failed .story__media{display:none}

/* The designed fallback: complete and beautiful with no asset at all. */
.story__fallback{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 46%,rgba(227,27,35,.2),transparent 62%),
    linear-gradient(170deg,#141419 0%,#08080A 62%);
}
.story__fallback .beam{
  position:absolute;
  left:50%;top:0;bottom:0;
  width:min(76vw,900px);
  transform:translateX(-50%);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 62px);
  mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
}
.story__fallback .pulse{
  position:absolute;
  left:50%;top:50%;
  width:min(64vw,760px);
  aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(var(--s,1));
  border:1px solid rgba(227,27,35,.34);
  border-radius:50%;
  opacity:calc(1 - var(--s,1) * .5);
}
.story__stage.video-ready .story__fallback,
.story__stage.seq-ready .story__fallback{opacity:0;transition:opacity .7s var(--ease)}

/* Layer 1 of the legibility system: the global base scrim, always on. */
.story__scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse 122% 92% at 50% 46%,rgba(6,6,10,0) 32%,rgba(6,6,10,.66) 100%);
}

.story__bands{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.band{
  grid-area:1/1;
  position:relative;
  width:min(1180px,88vw);
  text-align:center;
  opacity:0;
  /* Layer 3: the three-part text shadow token. */
  text-shadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
}
/* Layer 2: the per-band scrim, riding the band's own progress. */
.band::before{
  content:"";
  position:absolute;
  inset:-8% -6%;
  pointer-events:none;
  z-index:-1;
  opacity:calc(.25 + .75 * var(--k,1));
  background:radial-gradient(ellipse 74% 64% at 50% 50%,rgba(5,5,10,.7) 0%,rgba(5,5,10,.46) 46%,rgba(5,5,10,0) 76%);
}
.band__n{
  display:block;
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:clamp(.8rem,1.6vw,1.3rem);
}
.band__t{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2.8rem,10.5vw,9rem);
  line-height:.86;
  letter-spacing:-.045em;
  text-transform:uppercase;
  margin-bottom:clamp(.7rem,1.4vw,1.1rem);
}
.band__d{
  font-size:clamp(1rem,1.9vw,1.4rem);
  color:var(--text);
  max-width:30ch;
  margin-inline:auto;
  line-height:1.4;
}
/* Character and word spans for the scrubbed entrances. */
.band .w{display:inline-block;white-space:pre}
.band .c{display:inline-block}

/* ---- The entrance per stage. Each one echoes what the footage is doing.
   All of them are transform and opacity only, scrubbed off the band's --k,
   and fully reversible when the visitor scrolls back up. ---- */

/* Stage 1, grid snap-align: characters slide into place in reading order,
   the way a scattered signal resolves into a line. */
.band[data-ent="grid"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);
  opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}

/* Stage 2, drift-down: words fall into position as the path descends. */
.band[data-ent="drift"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * -26px));
}

/* Stage 3, word-punch with overshoot: the moment the lead is caught. */
.band[data-ent="punch"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1)) * var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.13)) * var(--kc) - var(--ov,.13) * var(--ks)));
}

/* Stage 4, scatter: characters fly in from seeded random offsets, like data
   points settling into a readable report. */
.band[data-ent="scatter"] .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.6,1);
  opacity:var(--kc);
  transform:translate(calc((1 - var(--kc)) * var(--jx,0px)),calc((1 - var(--kc)) * var(--jy,0px)))
            rotate(calc((1 - var(--kc)) * var(--jr,0deg)));
}

/* Stage 5, word rise into a staged settle: three arrivals in one band, the
   page coming to rest. */
.band[data-ent="rise"] .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0)) * 2.4,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc)) * 30px));
}
.band[data-ent="rise"] .band__d{
  --ks:clamp(0,(var(--k,0) - .66) * 4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks)) * 14px));
}
.band[data-ent="rise"] .band__cta{
  --kb:clamp(0,(var(--k,0) - .78) * 5,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb)) * 12px));
}
.band__cta{display:inline-flex;margin-top:clamp(1.2rem,2.6vw,2rem)}

/* The image sequence canvas sits exactly where the video would. */
.story__seq{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Layer 4: the chip scrim, for the small readouts over footage. */
.story__hud{
  position:absolute;
  left:var(--gutter);
  bottom:clamp(1.4rem,4vh,2.6rem);
  display:flex;
  align-items:center;
  gap:.8rem;
  z-index:3;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .8rem;
  background:rgba(8,8,15,.58);
  border:1px solid rgba(120,120,150,.3);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-2);
  text-shadow:0 1px 3px rgba(5,5,10,.85);
}
.story__prog{
  position:absolute;
  right:var(--gutter);
  bottom:clamp(1.4rem,4vh,2.6rem);
  z-index:3;
  width:min(220px,32vw);
}
.story__prog .bar{height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.story__prog .bar i{
  display:block;
  height:100%;
  background:var(--red);
  transform:scaleX(var(--p,0));
  transform-origin:0 50%;
}

/* The honest loading ring while the blob streams in. */
.story__ring{
  position:absolute;
  left:50%;top:50%;
  width:48px;height:48px;
  transform:translate(-50%,-50%);
  color:var(--red);
  z-index:4;
  opacity:.9;
}
.story__ring circle{transition:stroke-dashoffset .2s linear}
.story__stage.video-ready .story__ring,
.story__stage.video-failed .story__ring{display:none}

/* The static, non-scrub version for phones and reduced motion. */
.story--static .story__pin{height:auto}
.story--static .story__stage{position:relative;height:auto;min-height:76vh;display:grid;place-items:center;padding-block:5rem}
.story--static .story__bands{position:relative;inset:auto;display:block;padding-inline:var(--gutter)}
.story--static .band{
  opacity:1 !important;
  width:100%;
  text-align:left;
  padding-block:clamp(1.5rem,4vw,2.4rem);
  border-top:1px solid var(--line);
}
.story--static .band::before{display:none}
.story--static .band__t{font-size:clamp(2.2rem,9vw,3.6rem);margin-bottom:.5rem}
.story--static .band__d{margin-inline:0;color:var(--text-2)}
.story--static .band .w,.story--static .band .c{transform:none !important;opacity:1 !important;filter:none !important}
.story--static .story__prog,.story--static .story__ring{display:none}

/* The placeholder note. It is removed automatically the moment a real asset
   is found, and it never renders on a live site that has one. */
.story__slot{
  position:absolute;
  left:50%;
  bottom:clamp(4.6rem,12vh,7rem);
  transform:translateX(-50%);
  z-index:4;
  text-align:center;
  max-width:min(560px,86vw);
}
.story--static .story__slot{position:relative;left:auto;bottom:auto;transform:none;margin:2rem auto 0}

/* ================================== 6. THE SERVICE INDEX (not a card grid)
   A numbered editorial list. Hovering a row brings its image in from the
   right and draws the red rule across. */
.index-list{border-top:1px solid var(--line)}
.index-row{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:clamp(.9rem,2.4vw,2.4rem);
  padding-block:clamp(1.5rem,3.4vw,2.6rem);
  border-bottom:1px solid var(--line);
  transition:padding-left .5s var(--ease-out);
}
.index-row::before{
  content:"";
  position:absolute;
  left:0;bottom:-1px;
  width:100%;height:1px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .62s var(--ease-out);
}
.index-row:hover::before,.index-row:focus-within::before{transform:scaleX(1)}
@media (hover:hover){
  .index-row:hover,.index-row:focus-within{padding-left:clamp(.6rem,1.6vw,1.5rem)}
}
.index-row__name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.3rem,1.08rem + .9vw,1.7rem);
  line-height:1.2;
  letter-spacing:-.012em;
  text-transform:none;
  transition:color .42s var(--ease);
}
.index-row:hover .index-row__name,.index-row:focus-within .index-row__name{color:var(--red)}
.index-row__note{
  display:block;
  font-family:var(--body);
  font-size:var(--t-sm);
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:var(--text-2);
  margin-top:.5rem;
  max-width:66ch;
  line-height:1.6;
}
.index-row__go{
  font-family:var(--body);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--text-3);
  white-space:nowrap;
  transition:color .42s var(--ease),transform .42s var(--ease-out);
}
.index-row:hover .index-row__go,.index-row:focus-within .index-row__go{color:var(--red);transform:translateX(5px)}



@media (max-width:680px){
  .index-row{grid-template-columns:auto minmax(0,1fr);row-gap:.6rem}
  .index-row__go{grid-column:2}
}

/* ================================================ 7. INDUSTRIES + FILTERS */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:clamp(1.6rem,3vw,2.6rem)}
.tab{
  padding:.62rem 1rem;
  border:1px solid var(--line-strong);
  font-family:var(--body);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--text-2);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.tab:hover,.tab:focus-visible{color:var(--text);border-color:var(--text-3)}
.tab[aria-pressed="true"],.tab.is-on{background:var(--red);border-color:var(--red);color:#fff}

.ind-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,282px),1fr));
  gap:clamp(.7rem,1.5vw,1.15rem);
}
.ind-card{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid var(--line);
  transition:opacity .5s var(--ease),transform .5s var(--ease-out),border-color .5s var(--ease);
}
.ind-card:nth-child(6n+1),.ind-card:nth-child(6n+4){aspect-ratio:4/3}
.ind-card.is-hidden{
  display:none;
}
.ind-card__body{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:clamp(1rem,2vw,1.4rem);
}
.ind-card h3{
  font-size:clamp(1.05rem,1.9vw,1.42rem);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.018em;
}
.ind-card p{
  font-size:var(--t-xs);
  color:var(--text-2);
  margin-top:.4rem;
  max-width:30ch;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .44s var(--ease),transform .44s var(--ease-out);
}
.ind-card:hover p,.ind-card:focus-within p{opacity:1;transform:none}
.ind-card__tag{
  position:absolute;
  top:0;left:0;
  z-index:2;
  padding:.55rem .8rem;
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
}
.ind-empty{padding:3rem 0;color:var(--text-3);font-family:var(--mono);font-size:var(--t-sm)}

/* ================================================= 8. THE PROCESS TIMELINE */
.timeline{position:relative;padding-left:clamp(1.6rem,4vw,3.4rem)}
.timeline::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:1px;
  background:var(--line);
}
.timeline__fill{
  position:absolute;
  left:0;top:0;
  width:1px;
  background:linear-gradient(180deg,var(--red),var(--red-deep));
  height:var(--fill,0%);
  transition:height .35s linear;
  box-shadow:0 0 10px var(--red-glow);
}
/* Same reasoning as the system steps: colour carries the emphasis, so the
   text of every stage stays readable at all times. */
.tl-step{
  position:relative;
  padding-block:clamp(1.8rem,4.4vw,3.4rem);
  opacity:.82;
  transition:opacity .55s var(--ease);
}
.tl-step.is-active,.tl-step.is-done{opacity:1}
.tl-step::before{
  content:"";
  position:absolute;
  left:calc(clamp(1.6rem,4vw,3.4rem) * -1 - 4px);
  top:calc(clamp(1.8rem,4.4vw,3.4rem) + .5rem);
  width:9px;height:9px;
  background:var(--canvas);
  border:1px solid var(--line-strong);
  transform:rotate(45deg);
  transition:background .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease-out);
}
.tl-step.is-active::before{background:var(--red);border-color:var(--red);transform:rotate(45deg) scale(1.3)}
.tl-step.is-done::before{background:var(--red-deep);border-color:var(--red-deep)}
/* Each stage carries a glyph panel on the right. No words in it: the copy on
   the left already says everything, so this side stays purely visual and
   lights up as the stage becomes active. */
.tl-step__grid{display:grid;gap:clamp(1.2rem,2.6vw,2.6rem);align-items:start}
@media (min-width:900px){
  .tl-step__grid{grid-template-columns:minmax(0,1fr) minmax(0,.46fr)}
}
.tl-card{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(160deg,var(--panel),var(--ink));
  min-height:clamp(160px,17vw,215px);
  display:grid;
  place-items:center;
  overflow:hidden;
  transition:border-color .55s var(--ease);
}
/* A technical grid inside the panel, so an empty frame still has texture. */
.tl-card::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
}
/* The bloom behind the glyph arrives with the active stage. */
.tl-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(227,27,35,.2),transparent 62%);
  opacity:0;
  transition:opacity .55s var(--ease);
  pointer-events:none;
}
.tl-step.is-active .tl-card{border-color:var(--red)}
.tl-step.is-active .tl-card::before{opacity:1}
.tl-card svg{
  position:relative;
  z-index:1;
  color:var(--text-3);
  transition:color .55s var(--ease),transform .6s var(--ease-out);
}
.tl-step.is-active .tl-card svg{color:var(--red);transform:scale(1.07)}
@media (max-width:899px){
  .tl-card{min-height:130px}
  .tl-card svg{width:64px;height:64px}
}

.tl-step h3{
  font-size:var(--t-lg);
  font-weight:700;
  text-transform:none;
  letter-spacing:-.01em;
  margin-block:.45rem .65rem;
  color:var(--text-3);
  transition:color .5s var(--ease);
}
.tl-step.is-active h3{color:var(--red)}
.tl-step.is-done h3{color:var(--text-2)}
.tl-step p{color:var(--text-2);max-width:56ch}
.tl-step.is-active p{color:var(--text)}

/* ============================================ 9. THE INTERACTIVE WIDGETS */
.widget{
  border:1px solid var(--line);
  background:linear-gradient(165deg,var(--panel),var(--ink));
  position:relative;
}
.widget__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.2rem,2.6vw,2rem);
  border-bottom:1px solid var(--line);
}
.widget__body{padding:clamp(1.3rem,3vw,2.4rem)}

/* -- 9a. Stage selector, shared by the funnel, Meta journey and tracking -- */
.stages{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  border:1px solid var(--line);
  overflow:hidden;
}
@media (max-width:620px){
  .stages{grid-auto-flow:row;grid-auto-columns:auto}
}
.stage-btn{
  position:relative;
  padding:1rem .8rem;
  font-family:var(--body);
  font-size:1rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--text-3);
  border-right:1px solid var(--line);
  transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
  text-align:center;
}
.stage-btn:last-child{border-right:0}
@media (max-width:620px){
  .stage-btn{border-right:0;border-bottom:1px solid var(--line);text-align:left;padding-inline:1rem}
}
.stage-btn::before{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:2px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .5s var(--ease-out);
}
.stage-btn:hover,.stage-btn:focus-visible{color:var(--text)}
.stage-btn[aria-selected="true"]{color:#fff;background:rgba(227,27,35,.09)}
.stage-btn[aria-selected="true"]::before{transform:scaleX(1)}

.stage-panel{display:none;animation:panel-in .5s var(--ease-out) both}
.stage-panel.is-on{display:block}
@keyframes panel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.stage-panel__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(1.4rem,3vw,2.6rem);
  align-items:start;
}
@media (max-width:820px){.stage-panel__grid{grid-template-columns:minmax(0,1fr)}}
.spec{border-top:1px solid var(--line);padding-block:.85rem}
.spec dt{
  font-family:var(--body);
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:.35rem;
}
.spec dd{font-size:var(--t-sm);color:var(--text-2);max-width:62ch;line-height:1.6}

/* -- 9b. The recommendation quiz -- */
.quiz__q{display:none}
.quiz__q.is-on{display:block;animation:panel-in .45s var(--ease-out) both}
.quiz__opts{display:grid;gap:.55rem;margin-top:1.3rem}
.opt{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  width:100%;
  text-align:left;
  padding:1.05rem 1.2rem;
  border:1px solid var(--line-strong);
  color:var(--text-2);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-out);
}
.opt:hover,.opt:focus-visible{color:var(--text);border-color:var(--red);background:rgba(227,27,35,.06);transform:translateX(4px)}
.opt__k{
  font-family:var(--mono);
  font-size:var(--t-xs);
  color:var(--red);
  flex:none;
  padding-top:.15rem;
}
.opt__t{font-weight:500;color:var(--text)}
.opt__s{display:block;font-size:var(--t-xs);color:var(--text-3);margin-top:.22rem}
.quiz__steps{display:flex;gap:.3rem;margin-top:1.4rem}
.quiz__steps i{height:2px;flex:1;background:var(--line)}
.quiz__steps i.on{background:var(--red)}
.quiz__result{display:none}
.quiz__result.is-on{display:block;animation:panel-in .5s var(--ease-out) both}
.quiz__pick{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  text-transform:none;
  letter-spacing:-.015em;
  line-height:1.15;
  color:var(--red);
  margin-block:.6rem 1rem;
}

/* -- 9c. The landing page anatomy, clickable hotspots -- */
.anatomy{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.4rem,3vw,2.6rem);
  align-items:start;
}
@media (max-width:900px){.anatomy{grid-template-columns:minmax(0,1fr)}}
.anatomy__mock{
  position:relative;
  border:1px solid var(--line-strong);
  background:var(--ink);
  padding:clamp(.8rem,1.6vw,1.2rem);
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.hot{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  border:1px dashed var(--line-strong);
  background:var(--panel);
  padding:.85rem .9rem;
  color:var(--text-2);
  font-family:var(--body);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.hot:hover,.hot:focus-visible{border-color:var(--red);color:var(--text)}
.hot[aria-selected="true"]{
  border-style:solid;
  border-color:var(--red);
  background:rgba(227,27,35,.1);
  color:#fff;
}
.hot__dot{
  position:absolute;
  top:-5px;right:-5px;
  width:10px;height:10px;
  background:var(--red);
  transform:rotate(45deg) scale(0);
  transition:transform .38s var(--ease-out);
}
.hot[aria-selected="true"] .hot__dot{transform:rotate(45deg) scale(1)}
.hot--headline{padding-block:1.5rem}
.hot--form{padding-block:2.1rem}
.hot--mobile{max-width:46%}

/* -- 9d. The website feature planner -- */
.picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,214px),1fr));gap:.5rem}
.pick{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.9rem 1rem;
  border:1px solid var(--line-strong);
  color:var(--text-2);
  text-align:left;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.pick:hover,.pick:focus-visible{color:var(--text);border-color:var(--text-3)}
.pick__box{
  width:15px;height:15px;
  flex:none;
  border:1px solid var(--line-strong);
  position:relative;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.pick__box::after{
  content:"";
  position:absolute;
  left:4px;top:1px;
  width:4px;height:8px;
  border:solid #fff;
  border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) scale(0);
  transition:transform .26s var(--ease-out);
}
.pick[aria-pressed="true"]{color:var(--text);border-color:var(--red)}
.pick[aria-pressed="true"] .pick__box{background:var(--red);border-color:var(--red)}
.pick[aria-pressed="true"] .pick__box::after{transform:rotate(45deg) scale(1)}
.plan-out{list-style:none;border-top:1px solid var(--line)}
.plan-out li{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding-block:.8rem;
  border-bottom:1px solid var(--line);
  font-size:var(--t-sm);
  color:var(--text-2);
  animation:panel-in .4s var(--ease-out) both;
}
.plan-out li b{color:var(--text);font-weight:600;display:block}
.plan-out .idx{flex:none;padding-top:.15rem}
.plan-empty{color:var(--text-3);font-size:var(--t-sm);padding-block:1.2rem}

/* -- 9e. The tracking flow with the press-and-hold moment -- */
.flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));
  gap:clamp(.5rem,1.4vw,1rem);
  margin-block:clamp(1.4rem,3vw,2.2rem);
}
@media (max-width:720px){.flow{grid-template-columns:repeat(2,minmax(0,1fr))}}
.flow__node{
  position:relative;
  border:1px solid var(--line);
  background:var(--panel);
  padding:clamp(.9rem,1.8vw,1.3rem);
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease-out);
}
.flow__node.lit{
  border-color:var(--red);
  background:rgba(227,27,35,.08);
  transform:translateY(-3px);
}
.flow__node h3{
  font-family:var(--display);
  font-size:1.0625rem;
  letter-spacing:-.005em;
  text-transform:none;
  color:var(--text);
  font-weight:600;
  transition:color .45s var(--ease);
}
.flow__node.lit h3{color:var(--red)}
.flow__node p{font-size:var(--t-xs);line-height:1.55;color:var(--text-2);margin-top:.55rem}
.flow__node .idx{margin-top:.7rem}
.flow__wire{
  position:absolute;
  top:50%;
  height:1px;
  background:var(--line);
  z-index:-1;
}
.hold{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.4rem;
  padding-top:1.3rem;
  border-top:1px solid var(--line);
}
.hold__btn{
  position:relative;
  padding:1.05rem 1.8rem;
  border:1px solid var(--red);
  color:#fff;
  font-family:var(--body);
  font-size:1rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.hold__btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--red);
  transform:scaleX(var(--hold,0));
  transform-origin:0 50%;
  z-index:-1;
}
.hold__btn span{position:relative;z-index:1}
.hold__meter{
  flex:1;
  min-width:180px;
  height:2px;
  background:var(--line);
  position:relative;
}
.hold__meter i{
  position:absolute;
  inset:0;
  background:var(--red);
  transform:scaleX(var(--hold,0));
  transform-origin:0 50%;
}
.hold__state{
  font-family:var(--body);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.01em;
  text-transform:none;
  color:var(--text-3);
}
.hold.is-done .hold__state{color:var(--red)}

/* -- 9f. The sample report, always labelled -- */
.report{border:1px solid var(--line);background:var(--panel)}
.report__bar{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.75rem 1rem;
  border-bottom:1px solid var(--line);
  background:var(--ink);
}
.report__bar .dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none}
.report__label{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red);
  border:1px solid var(--red);
  padding:.28rem .6rem;
}
.report__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
}
.report__cell{padding:clamp(1rem,2vw,1.4rem);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.report__cell:last-child{border-right:0}
.report__cell dt{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:.5rem;
}
.report__cell dd{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--text-3);letter-spacing:-.02em}
.report__cell dd .ph{display:inline-block;width:2.4rem;height:4px;background:var(--line-strong);vertical-align:middle;border-radius:2px}
.report__cell dd small{
  display:block;
  font-family:var(--mono);
  font-size:.75rem;
  font-weight:400;
  letter-spacing:.06em;
  color:var(--text-3);
  margin-top:.35rem;
  text-transform:uppercase;
}
.report__chart{padding:clamp(1rem,2vw,1.5rem)}
/* Capped so the illustration reads as a chart rather than a wall of bars. */
.report__chart svg{width:100%;max-width:860px;height:auto}
.report__chart .grid-l{stroke:var(--line);stroke-width:1}
.report__chart .bar{fill:var(--line-strong);transition:fill .4s var(--ease)}
.report__chart .bar.hot{fill:var(--red)}
.report__chart .axis{
  font-family:var(--mono);
  font-size:8px;
  fill:var(--text-3);
  letter-spacing:.1em;
}

/* -- 9g. The example call, stepped through on the AI receptionist page -- */
.call{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.4rem,3.4vw,3rem);
  align-items:start;
}
@media (max-width:860px){.call{grid-template-columns:minmax(0,1fr)}}

.call__thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.85rem}

.turn{
  border:1px solid var(--line);
  border-left:2px solid var(--line-strong);
  padding:.9rem 1.1rem;
  background:rgba(255,255,255,.014);
}
/* Only hidden when scripts run, so the whole thread reads as a transcript
   if they do not. */
.js .turn{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),
             border-color .45s var(--ease-out),background .45s var(--ease-out);
}
.js .turn.is-seen{opacity:.5;transform:none}
.js .turn.is-on{opacity:1;transform:none}

.turn__who{
  font-family:var(--body);
  font-size:var(--t-label);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
  display:block;
  margin-bottom:.4rem;
}
.turn__say{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--text-2)}

/* The business speaking gets the brand mark. The caller stays neutral so the
   two voices are told apart without colour alone carrying the meaning. */
.turn[data-who="ai"]{border-left-color:var(--red)}
.turn[data-who="ai"] .turn__who{color:var(--red)}
.turn[data-who="ai"] .turn__say{color:var(--text)}
.turn[data-who="ring"],.turn[data-who="after"]{
  border-left-color:var(--line);
  background:transparent;
}
.turn[data-who="ring"] .turn__say,
.turn[data-who="after"] .turn__say{font-style:italic;color:var(--text-3)}
.turn.is-on{border-color:var(--line-strong)}
.turn[data-who="ai"].is-on{border-left-color:var(--red)}

.call__side{
  position:sticky;
  top:calc(var(--nav-h) + 1.4rem);
  border:1px solid var(--line);
  padding:clamp(1.1rem,2.4vw,1.6rem);
  background:linear-gradient(165deg,rgba(227,27,35,.05),transparent 60%);
}
@media (max-width:860px){.call__side{position:static}}
.call__do{
  margin:.9rem 0 0;
  font-size:var(--t-sm);
  line-height:1.65;
  color:var(--text);
  min-height:7.5em;
}
@media (max-width:860px){.call__do{min-height:0}}
.call__count{
  margin:1.2rem 0 0;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.14em;
  color:var(--text-2);
}

.call__ctrl{
  display:flex;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  margin-top:clamp(1.4rem,3vw,2.2rem);
  padding-top:clamp(1.2rem,2.6vw,1.8rem);
  border-top:1px solid var(--line);
}
.call__rail{display:flex;gap:.3rem;flex:1 1 6rem;min-width:5rem}
.call__rail i{
  flex:1;
  height:2px;
  background:var(--line-strong);
  transition:background .4s var(--ease);
}
.call__rail i.on{background:var(--red)}
.call__ctrl button[disabled]{opacity:.35;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .js .turn{transition:none;transform:none}
}

/* ============================================ 9h. THE CLIENT LOGO WALL
   The three logos arrive in different states: one transparent, one with a
   white ground keyed out, one a dark square badge. Identical tiles are what
   makes them read as a set rather than three pasted images. */
.clients{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:clamp(1rem,2.4vw,1.6rem);
  align-items:start;
}
.client{display:flex;flex-direction:column;gap:.85rem}
/* An explicit height, not aspect-ratio: grid items stretch by default, which
   lets a tall logo drag its tile out of line with the others. The three logos
   arrive at different proportions, so the tile has to be the fixed thing. */
.client__box{
  display:flex;align-items:center;justify-content:center;
  height:clamp(8.5rem,14vw,11rem);
  padding:clamp(1.1rem,2.4vw,1.7rem);
  border:1px solid var(--line);
  background:linear-gradient(165deg,var(--panel),var(--ink));
  overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.client__box img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
}
a.client__box:hover,a.client__box:focus-visible{
  border-color:var(--red);
  transform:translateY(-3px);
}
.client__name{
  margin:0;font-size:var(--t-sm);font-weight:600;color:var(--text);
}
.client__name span{
  display:block;margin-top:.15rem;
  font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);font-weight:400;
}
@media (prefers-reduced-motion:reduce){
  a.client__box:hover,a.client__box:focus-visible{transform:none}
}

/* ---------------------------------------------- 9i. THE REVIEWS SECTION */
.reviews{text-align:center}
.reviews__head h2{margin-block:.7rem .9rem;max-width:22ch;margin-inline:auto}
.reviews__head .lede{max-width:52ch;margin-inline:auto}
.reviews__summary{
  margin:1rem 0 0;
  font-family:var(--body);font-size:var(--t-sm);font-weight:600;
  color:var(--text);
}
.reviews__stars{color:var(--red);letter-spacing:.12em;margin-right:.6rem}
.reviews__list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  gap:clamp(.9rem,2vw,1.3rem);
  text-align:left;
  margin-top:clamp(1.6rem,3.4vw,2.4rem);
}
/* Holds no space at all until there is something real to show. */
.reviews__list:empty{display:none}
.review{
  border:1px solid var(--line);
  background:linear-gradient(165deg,var(--panel),var(--ink));
  padding:clamp(1.1rem,2.4vw,1.6rem);
  display:flex;flex-direction:column;gap:.8rem;
}
.review__stars{color:var(--red);letter-spacing:.18em;font-size:var(--t-sm)}
.review__text{margin:0;font-size:var(--t-sm);line-height:1.65;color:var(--text-2)}
/* A rating left without a comment. Set apart so it does not read as a quote. */
.review__text--none{font-style:italic;color:var(--text-3)}
.review__who{
  margin:0;margin-top:auto;padding-top:.8rem;border-top:1px solid var(--line);
  font-family:var(--body);font-size:var(--t-xs);font-weight:600;
  color:var(--text-2);
}
.reviews__acts{
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;
  margin-top:clamp(1.6rem,3.4vw,2.4rem);
}
.reviews__list:not(:empty) + .reviews__acts{
  padding-top:clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--line);
}

/* ==================================================== 10. FORMS AND INPUTS */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.9rem,2vw,1.4rem)}
@media (max-width:680px){.form-grid{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:.45rem}
.field--full{grid-column:1/-1}
.field label{
  font-family:var(--body);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-3);
}
.field label .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;
  padding:.92rem 1rem;
  background:var(--panel);
  border:1px solid var(--line-strong);
  color:var(--text);
  font-size:var(--t-sm);
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.field textarea{resize:vertical;min-height:132px;line-height:1.6}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2371717C' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.4rem;
}
.field select option{background:var(--panel);color:var(--text)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--red);
  background:var(--panel-2);
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--red-hot);
  outline-offset:2px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field__err{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--red-hot);
  min-height:1em;
}
.field.has-err input,.field.has-err select,.field.has-err textarea{border-color:var(--red-hot)}

/* The honeypot. Off screen for eyes, hidden from assistive tech. */
.hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px;height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}
.form-note{font-size:var(--t-xs);color:var(--text-2);max-width:72ch;line-height:1.55}
.form-status{
  border:1px solid var(--line-strong);
  padding:1.1rem 1.2rem;
  font-size:var(--t-sm);
  display:none;
}
.form-status.is-on{display:block;animation:panel-in .45s var(--ease-out) both}
.form-status--ok{border-color:var(--red);background:rgba(227,27,35,.08)}
.form-status--ok b{color:var(--red);display:block;margin-bottom:.3rem;font-weight:600}
.form-status--bad{border-color:var(--red-hot)}

/* ==================================================== 11. FAQ, SEARCHABLE */
.faq-search{position:relative;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.faq-search input{
  width:100%;
  padding:1.15rem 1.2rem 1.15rem 3rem;
  background:var(--panel);
  border:1px solid var(--line-strong);
  color:var(--text);
  font-size:var(--t-md);
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.005em;
}
.faq-search input:focus{outline:none;border-color:var(--red)}
.faq-search input:focus-visible{outline:2px solid var(--red-hot);outline-offset:2px}
.faq-search svg{
  position:absolute;
  left:1.15rem;top:50%;
  transform:translateY(-50%);
  color:var(--text-3);
  pointer-events:none;
}
.faq-count{
  font-family:var(--mono);
  font-size:var(--t-label);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:1.2rem;
  display:block;
}
.qa{border-top:1px solid var(--line)}
.qa.is-hidden{display:none}
.qa__q{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:1.1rem;
  text-align:left;
  padding-block:clamp(1.1rem,2.4vw,1.7rem);
  color:var(--text);
  transition:color var(--dur-fast) var(--ease)}
.qa__q:hover,.qa__q:focus-visible{color:var(--red)}
.qa__q h3{
  flex:1;
  font-family:var(--display);
  font-size:clamp(1.12rem,1rem + .5vw,1.35rem);
  font-weight:600;
  letter-spacing:-.008em;
  line-height:1.3;
}
.qa__sign{
  position:relative;
  width:15px;height:15px;
  flex:none;
  margin-top:.35rem;
}
.qa__sign::before,.qa__sign::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:currentColor;
  transition:transform .42s var(--ease-out),opacity .42s var(--ease);
}
.qa__sign::before{width:15px;height:1.5px;transform:translate(-50%,-50%)}
.qa__sign::after{width:1.5px;height:15px;transform:translate(-50%,-50%)}
.qa__q[aria-expanded="true"] .qa__sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.qa__a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .5s var(--ease-out);
}
.qa__a > div{overflow:hidden}
.qa.is-open .qa__a{grid-template-rows:1fr}
.qa__a p{
  color:var(--text-2);
  max-width:74ch;
  padding-bottom:clamp(1.1rem,2.4vw,1.7rem);
}
.qa__a p + p{padding-top:.9rem;padding-bottom:clamp(1.1rem,2.4vw,1.7rem)}

/* ========================================================= 12. THE CONNECT
   Built mobile first, for a phone tapped against an NFC tag. */
.connect{
  min-height:100svh;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1.4rem,5vw,3rem);
}
.card{
  width:min(460px,100%);
  border:1px solid var(--line);
  background:linear-gradient(168deg,var(--panel),var(--ink));
  padding:clamp(1.7rem,5vw,2.6rem);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 90% 52% at 50% 0%,rgba(227,27,35,.16),transparent 62%);
  pointer-events:none;
}
.card__logo{width:min(230px,64%);height:auto;margin-bottom:clamp(1.5rem,4vw,2.2rem)}
.card__name{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,7vw,2.5rem);
  letter-spacing:-.02em;
  text-transform:none;
  line-height:1.05;
}
.card__role{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--red);
  margin-top:.6rem;
}
.card__pos{color:var(--text-2);font-size:var(--t-sm);margin-top:.35rem}
.card__acts{display:grid;gap:.5rem;margin-top:clamp(1.6rem,4vw,2.2rem)}
.act{
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:1rem 1.15rem;
  border:1px solid var(--line-strong);
  color:var(--text);
  font-size:var(--t-sm);
  font-weight:500;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-out);
  min-height:52px;
}
.act:hover,.act:focus-visible{border-color:var(--red);background:rgba(227,27,35,.08);transform:translateY(-2px)}
.act svg{flex:none;color:var(--red)}
.act small{
  display:block;
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-top:.12rem;
}
.act--primary{background:var(--red);border-color:var(--red);color:#fff}
.act--primary svg{color:#fff}
.act--primary small{color:rgba(255,255,255,.78)}
.act--primary:hover,.act--primary:focus-visible{background:var(--red-hot);border-color:var(--red-hot);color:#fff}
.card__foot{
  margin-top:clamp(1.5rem,4vw,2rem);
  padding-top:1.1rem;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

/* ============================================================== 13. THE 404 */
.err{
  min-height:100svh;
  min-height:100vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:calc(var(--nav-h) + 3rem) var(--gutter) 4rem;
}
.err__code{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(6rem,26vw,20rem);
  line-height:.8;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1.5px var(--line-strong);
  position:relative;
}
.err__code span{
  position:absolute;
  inset:0;
  color:var(--red);
  -webkit-text-stroke:0;
  clip-path:inset(var(--c1,42%) 0 var(--c2,44%) 0);
  animation:glitch 5.5s steps(1) -1s infinite;
}
@keyframes glitch{
  0%,72%,100%{clip-path:inset(100% 0 0 0)}
  74%{clip-path:inset(38% 0 52% 0)}
  76%{clip-path:inset(64% 0 22% 0)}
  78%{clip-path:inset(18% 0 74% 0)}
  80%{clip-path:inset(100% 0 0 0)}
}

/* ============================================== 14. SHARED PAGE FURNITURE */
.page-head{
  position:relative;
  padding-top:calc(var(--nav-h) + clamp(2.4rem,6vw,5rem));
  padding-bottom:clamp(2rem,4.5vw,3.6rem);
  overflow:hidden;
}
.page-head h1{
  font-size:var(--t-xxl);
  max-width:24ch;
}
.page-head__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.6rem,4vw,4rem);
  align-items:end;
}
@media (max-width:900px){.page-head__grid{grid-template-columns:minmax(0,1fr)}}
.crumbs{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--body);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-3);
  margin-bottom:1.4rem;
  flex-wrap:wrap;
}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--red)}
.crumbs span{color:var(--line-strong)}

/* The closing call to action, shared by every page. */
.cta-end{
  position:relative;
  background:var(--ink);
  border-top:1px solid var(--line);
  padding-block:clamp(3.6rem,8vw,6.4rem);
  overflow:hidden;
  text-align:center;
}
.cta-end::before{
  content:"";
  position:absolute;
  left:50%;top:0;
  width:min(1000px,120vw);
  aspect-ratio:2/1;
  transform:translate(-50%,-52%);
  background:radial-gradient(circle,rgba(227,27,35,.2),transparent 66%);
  pointer-events:none;
}
.cta-end h2{
  font-size:clamp(1.8rem,1.4rem + 1.6vw,2.4rem);
  font-weight:700;
  text-transform:none;
  letter-spacing:-.018em;
  line-height:1.15;
  max-width:26ch;
  margin-inline:auto;
}
.cta-end .lede{margin-inline:auto;text-align:center;margin-block:1.4rem 2.2rem}
.cta-end__acts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* The light surface, used sparingly across the whole site. */
.on-paper{background:var(--paper);color:var(--on-paper)}
.on-paper .kicker{color:var(--on-paper-2)}
.on-paper .lede,.on-paper .prose p,.on-paper .dim{color:var(--on-paper-2)}
.on-paper .rule{background:rgba(17,17,20,.16)}
.on-paper .idx{color:var(--on-paper-2)}
.on-paper .btn{--btn-fg:var(--on-paper);--btn-bd:rgba(17,17,20,.28)}
.on-paper .btn:hover,.on-paper .btn:focus-visible{color:#fff}
.on-paper .panel{background:rgba(17,17,20,.04);border-color:rgba(17,17,20,.12)}

/* A pair of stat-free proof strips: what we do, said plainly. */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));border-top:1px solid var(--line)}
.fact{
  padding:clamp(1.4rem,2.8vw,2.2rem) clamp(1.2rem,2.4vw,1.8rem) clamp(1.4rem,2.8vw,2.2rem) 0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.fact:last-child{border-right:0}
.fact h3{
  font-size:var(--t-md);
  font-weight:600;
  text-transform:none;
  letter-spacing:-.006em;
  margin-block:.7rem .5rem;
}
.fact p{font-size:var(--t-sm);color:var(--text-2);max-width:46ch;line-height:1.6}
.on-paper .fact p{color:var(--on-paper-2)}
@media (max-width:760px){.fact{border-right:0;padding-right:0}}

/* ==========================================================================
   15. EXPLAINER GRAPHICS
   Coded diagrams and interface sketches that explain a service. Every one is
   plain HTML, so the words stay sharp and readable at any size and never
   garble the way generated images do. None carries real client data, and each
   is labelled as an illustration where it could be mistaken for one.
   ========================================================================== */

/* -- 15a. Section heading block: label, title, then a real explanation -- */
.sec-head{display:grid;gap:.85rem;margin-bottom:clamp(1.8rem,3.4vw,2.8rem);max-width:58rem}
.sec-head .lede{max-width:64ch}
.sec-head--center{margin-inline:auto;text-align:center;justify-items:center}

/* A two-column reading layout: explanation on one side, supporting detail on
   the other. Collapses to one column on smaller screens. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4.4vw,4.4rem);align-items:start}
.split--wide-left{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
@media (max-width:900px){.split,.split--wide-left{grid-template-columns:minmax(0,1fr)}}

/* "Illustration" tag used under or above every sketch. */
.eg-label{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:var(--t-label);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);
}
.eg-label::before{content:"";width:7px;height:7px;background:var(--red);transform:rotate(45deg);flex:none}
.fig-note{margin-top:1rem;font-size:var(--t-xs);line-height:1.55;color:var(--text-2);max-width:74ch}

/* -- 15b. Lists that carry real explanation -- */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.ticks li{position:relative;padding-left:1.35rem;font-size:var(--t-sm);line-height:1.6;color:var(--text-2)}
.ticks li::before{content:"";position:absolute;left:.1rem;top:.62em;width:7px;height:7px;background:var(--red);transform:rotate(45deg)}
.ticks li b{color:var(--text);font-weight:600}
.ticks--muted li::before{background:var(--line-strong)}
.on-paper .ticks li{color:var(--on-paper-2)}
.on-paper .ticks li b{color:var(--on-paper)}

.helps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:clamp(1.4rem,3vw,2.6rem)}
.helps__group{border-top:2px solid var(--red);padding-top:1.1rem}
.helps__group h3{font-size:var(--t-md);margin-bottom:.9rem}
.on-paper .helps__group h3{color:var(--on-paper)}

.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{border:1px solid var(--line-strong);padding:.5rem .9rem;font-size:.9375rem;color:var(--text);background:rgba(255,255,255,.015)}
.on-paper .chips li{border-color:rgba(17,17,20,.22);color:var(--on-paper);background:transparent}

/* -- 15c. What success is judged on, against what it is not -- */
.matters{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1rem,2.6vw,2rem)}
@media (max-width:760px){.matters{grid-template-columns:minmax(0,1fr)}}
.matters__col{border:1px solid var(--line);padding:clamp(1.3rem,2.6vw,1.9rem)}
.matters__col--yes{border-color:var(--red);background:linear-gradient(165deg,rgba(227,27,35,.08),transparent 70%)}
.matters__col h3{font-size:var(--t-md);margin-block:.7rem 1rem}
.matters__col > p{font-size:var(--t-xs);color:var(--text-2);line-height:1.6;margin-top:1.1rem}

/* -- 15d. A hypothetical example, always labelled as one -- */
.example{border:1px solid var(--line-strong);background:linear-gradient(165deg,var(--panel),var(--ink));padding:clamp(1.4rem,3vw,2.4rem)}
.example__head{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-bottom:1.1rem}
.example__tag{font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:.3rem .6rem}
.example h3{font-size:var(--t-lg)}
.example .prose p{max-width:74ch}
.example .flowline{margin-top:1.6rem}

/* -- 15e. The step flow. A row with drawn arrows on wide screens, a column
   with downward arrows on narrow ones. --steps sets the column count. -- */
.flowline{
  list-style:none;margin:0;padding:0;
  --gap:clamp(1.5rem,2.4vw,2.2rem);
  display:grid;
  grid-template-columns:repeat(var(--steps,5),minmax(0,1fr));
  gap:var(--gap);
}
.flowline__step{
  position:relative;
  border:1px solid var(--line);
  background:linear-gradient(165deg,var(--panel),var(--ink));
  padding:clamp(1rem,1.6vw,1.3rem);
  display:flex;flex-direction:column;gap:.4rem;
}
.flowline__step::after{
  content:"";position:absolute;
  top:50%;right:calc(var(--gap) * -1 + 4px);
  width:calc(var(--gap) - 8px);height:1px;
  background:var(--red);
}
.flowline__step::before{
  content:"";position:absolute;
  top:calc(50% - 4px);right:calc(var(--gap) * -1 + 5px);
  width:8px;height:8px;
  border-top:1px solid var(--red);border-right:1px solid var(--red);
  transform:rotate(45deg);
}
.flowline__step:last-child::after,.flowline__step:last-child::before{display:none}
.flowline__n{font-size:var(--t-label);font-weight:700;letter-spacing:.08em;color:var(--red)}
.flowline__t{font-family:var(--display);font-weight:600;font-size:1.0625rem;line-height:1.3;color:var(--text)}
.flowline__d{font-size:var(--t-xs);line-height:1.5;color:var(--text-2)}
.flowline__step.is-goal{border-color:var(--red);background:linear-gradient(165deg,rgba(227,27,35,.13),var(--ink))}
.flowline__step.is-human{border-style:dashed;border-color:var(--line-strong)}

/* Downward version, shared by narrow screens and the always-vertical flows. */
.flowline--down{grid-template-columns:minmax(0,1fr)}
.flowline--down .flowline__step::after,
.flowline--down .flowline__step::before{top:auto;right:auto}
.flowline--down .flowline__step::after{bottom:calc(var(--gap) * -1 + 4px);left:1.7rem;width:1px;height:calc(var(--gap) - 8px)}
.flowline--down .flowline__step::before{bottom:calc(var(--gap) * -1 + 5px);left:calc(1.7rem - 3.5px);transform:rotate(135deg)}
@media (max-width:1040px){
  .flowline{grid-template-columns:minmax(0,1fr)}
  .flowline .flowline__step::after,
  .flowline .flowline__step::before{top:auto;right:auto}
  .flowline .flowline__step::after{bottom:calc(var(--gap) * -1 + 4px);left:1.7rem;width:1px;height:calc(var(--gap) - 8px)}
  .flowline .flowline__step::before{bottom:calc(var(--gap) * -1 + 5px);left:calc(1.7rem - 3.5px);transform:rotate(135deg)}
}
.flowline--down{max-width:46rem}
.flowline--down .flowline__step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;row-gap:.2rem;align-items:baseline}
.flowline--down .flowline__n{grid-row:span 2}

/* -- 15f. Search results sketch, before and after -- */
.serp-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.6vw,2rem);align-items:start}
@media (max-width:860px){.serp-pair{grid-template-columns:minmax(0,1fr)}}
.serp{margin:0;border:1px solid var(--line-strong);background:var(--ink);padding:clamp(1rem,2vw,1.4rem);display:flex;flex-direction:column;gap:.75rem}
.serp__state{font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.serp--after .serp__state{color:var(--red)}
.serp__box{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line-strong);border-radius:999px;padding:.6rem 1rem;background:var(--panel);font-size:.9375rem;color:var(--text)}
.serp__box svg{flex:none;color:var(--text-3)}
.serp__r{border-top:1px solid var(--line);padding-top:.75rem;display:flex;flex-direction:column;gap:.18rem}
.serp__tag{font-size:.75rem;font-weight:700;letter-spacing:.03em;color:var(--text-2)}
.serp__name{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.3;color:#9FB2EE}
.serp__url{font-size:.8125rem;color:var(--text-3)}
.serp__txt{font-size:.875rem;line-height:1.5;color:var(--text-2)}
.serp__r--you{border:1px solid var(--red);padding:.85rem .95rem;background:rgba(227,27,35,.09)}
.serp__r--you .serp__name{color:var(--text)}
.serp__missing{border:1px dashed var(--line-strong);padding:.8rem .95rem;font-size:.875rem;line-height:1.5;color:var(--text-3)}
.serp__acts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.serp__acts span{font-size:.8125rem;font-weight:600;border:1px solid var(--line-strong);padding:.28rem .65rem;color:var(--text)}
.serp__r--you .serp__acts span:first-child{background:var(--red);border-color:var(--red);color:#fff}
.serp__more{font-size:.8125rem;color:var(--text-3);border-top:1px solid var(--line);padding-top:.6rem}

/* A single search, its ad, and the page it should land on. */
.qcard{border:1px solid var(--line-strong);background:var(--ink);padding:clamp(1rem,2vw,1.3rem);display:flex;flex-direction:column;gap:.8rem}
.qcard__ad{border:1px solid var(--line);padding:.8rem .9rem;display:flex;flex-direction:column;gap:.18rem}
.qcard__lands{display:flex;align-items:center;gap:.6rem;font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.qcard__lands::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--red),transparent)}
.qcard__page{border:1px solid var(--line);background:var(--panel);padding:.9rem 1rem}
.qcard__page b{display:block;font-family:var(--display);font-weight:600;color:var(--text);margin-bottom:.45rem}
.qcard__page ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.qcard__page li{position:relative;padding-left:1rem;font-size:.9375rem;line-height:1.45;color:var(--text-2)}
.qcard__page li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;background:var(--red)}

/* -- 15g. A social ad beside the lead form it opens -- */
.admock{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(1rem,2.4vw,2rem);align-items:center}
@media (max-width:820px){.admock{grid-template-columns:minmax(0,1fr)}.admock__arrow{transform:rotate(90deg)}}
.admock__card{margin:0;border:1px solid var(--line-strong);background:var(--ink);width:100%;max-width:24rem;justify-self:center}
.admock__top{display:flex;align-items:center;gap:.7rem;padding:.8rem .9rem}
.admock__avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--red-deep),var(--panel-3));flex:none}
.admock__who b{display:block;font-size:.9375rem;font-weight:600;color:var(--text);line-height:1.2}
.admock__who span{font-size:.8125rem;color:var(--text-3)}
.admock__copy{padding:0 .9rem .8rem;font-size:.9375rem;line-height:1.5;color:var(--text-2)}
.admock__visual{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:16/10;border-block:1px solid var(--line)}
.admock__half{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:.55rem .6rem;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.admock__half span{position:relative;z-index:1;color:var(--text-2)}
.admock__half--before{background:#19191d;border-right:1px solid var(--line)}
.admock__half--after{background:linear-gradient(180deg,#26262c,#18181c)}
.admock__half--after span{color:#fff}
.admock__half i{position:absolute;display:block}
.admock__half--before i:nth-child(1){left:10%;top:16%;width:36%;height:24%;background:#2a2a2f;transform:rotate(-3deg)}
.admock__half--before i:nth-child(2){left:52%;top:20%;width:30%;height:19%;background:#27272c;transform:rotate(4deg)}
.admock__half--before i:nth-child(3){left:8%;top:54%;width:82%;height:24%;background:#222226;border-top:2px solid #36363c}
.admock__half--after i:nth-child(1){left:10%;top:14%;width:80%;height:24%;background:#34343b}
.admock__half--after i:nth-child(2){left:10%;top:50%;width:80%;height:3px;background:var(--red)}
.admock__half--after i:nth-child(3){left:10%;top:54%;width:80%;height:24%;background:#2e2e34}
.admock__foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.8rem .9rem}
.admock__foot b{display:block;font-size:.9375rem;font-weight:600;color:var(--text);line-height:1.3}
.admock__foot small{display:block;font-size:.8125rem;color:var(--text-3)}
.admock__btn{flex:none;font-size:.8125rem;font-weight:600;padding:.45rem .8rem;background:var(--panel-3);border:1px solid var(--line-strong);color:var(--text)}
.admock__arrow{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.formmock{margin:0;border:1px solid var(--line-strong);background:var(--ink);padding:1.1rem;width:100%;max-width:22rem;justify-self:center;display:flex;flex-direction:column;gap:.6rem}
.formmock b{font-family:var(--display);font-weight:600;font-size:1.0625rem;color:var(--text)}
.formmock p{font-size:.875rem;line-height:1.45;color:var(--text-2)}
.formmock__f{border:1px solid var(--line-strong);background:var(--panel);padding:.55rem .75rem;font-size:.875rem;color:var(--text-3)}
.formmock__go{background:var(--red);color:#fff;font-weight:600;font-size:.9375rem;text-align:center;padding:.65rem}
.formmock small{font-size:.8125rem;color:var(--text-3)}

/* -- 15h. Website before and after -- */
.site-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.6vw,2rem);align-items:start}
@media (max-width:920px){.site-pair{grid-template-columns:minmax(0,1fr)}}
.sitemock{margin:0;border:1px solid var(--line-strong);background:var(--ink)}
.sitemock__bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border-bottom:1px solid var(--line);background:var(--panel)}
.sitemock__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.sitemock__bar span{margin-left:.6rem;font-size:.75rem;color:var(--text-3)}
.sitemock__state{padding:.75rem .95rem 0;font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.sitemock--after .sitemock__state{color:var(--red)}
.sitemock__page{position:relative;padding:.95rem;display:flex;flex-direction:column;gap:.7rem;min-height:21rem}
.sm-logo{font-family:var(--display);font-weight:700;font-size:.875rem;color:var(--text)}
.sm-nav{display:flex;flex-wrap:wrap;gap:.2rem .55rem;font-size:.625rem;line-height:1.4;color:var(--text-3)}
.sm-box{border:1px solid var(--line);background:var(--panel);padding:.85rem}
.sm-box b{display:block;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--text)}
.sm-lines{display:grid;gap:5px;margin-top:.6rem}
.sm-lines i{display:block;height:4px;background:var(--line-strong)}
.sm-lines i:nth-child(2){width:90%}.sm-lines i:nth-child(3){width:96%}.sm-lines i:nth-child(4){width:72%}
.sm-tiny{font-size:.625rem;line-height:1.4;color:var(--text-3)}
.sm-pin{position:absolute;z-index:2;width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-size:.75rem;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(227,27,35,.28)}
.sm-top{display:flex;align-items:center;gap:.9rem;font-size:.8125rem;color:var(--text-2)}
.sm-top .sm-call{margin-left:auto;background:var(--red);color:#fff;font-weight:600;padding:.3rem .65rem}
.sm-h{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.2;color:var(--text)}
.sm-p{font-size:.875rem;line-height:1.5;color:var(--text-2)}
.sm-acts{display:flex;flex-wrap:wrap;gap:.5rem}
.sm-btn{font-size:.8125rem;font-weight:600;padding:.45rem .8rem;border:1px solid var(--line-strong);color:var(--text)}
.sm-btn--red{background:var(--red);border-color:var(--red);color:#fff}
.sm-trust{display:flex;align-items:center;gap:.6rem;font-size:.8125rem;color:var(--text-2);border-block:1px solid var(--line);padding-block:.5rem}
.sm-trust b{color:var(--red);letter-spacing:.14em;font-weight:600}
.sm-cols{display:grid;grid-template-columns:1.15fr 1fr;gap:.6rem}
.sm-svc{display:grid;gap:.35rem;align-content:start}
.sm-svc span{font-size:.8125rem;color:var(--text-2);border:1px solid var(--line);padding:.35rem .5rem}
.sm-form{border:1px solid var(--line-strong);padding:.6rem;display:grid;gap:.35rem;background:var(--panel);align-content:start}
.sm-form b{font-size:.8125rem;font-weight:600;color:var(--text)}
.sm-form i{display:block;height:18px;border:1px solid var(--line-strong);background:var(--ink)}
.sm-form em{font-style:normal;text-align:center;background:var(--red);color:#fff;font-size:.75rem;font-weight:600;padding:.3rem}
.sitemock__notes{list-style:none;margin:0;padding:.95rem;border-top:1px solid var(--line);display:grid;gap:.5rem}
.sitemock__notes li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:.65rem;align-items:start;font-size:.9375rem;line-height:1.45;color:var(--text-2)}
.sitemock__notes li b{width:22px;height:22px;border-radius:50%;background:var(--red);color:#fff;font-size:.75rem;display:grid;place-items:center}
.sitemock--after .sitemock__notes li b{background:transparent;border:1px solid var(--red);color:var(--red)}

/* -- 15i. Two channels feeding one system -- */
.lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.6vw,2rem)}
@media (max-width:860px){.lanes{grid-template-columns:minmax(0,1fr)}}
.lane{border:1px solid var(--line);padding:clamp(1.1rem,2.2vw,1.6rem);background:linear-gradient(165deg,var(--panel),var(--ink))}
.lane__name{font-family:var(--display);font-weight:700;font-size:var(--t-md);color:var(--text)}
.lane__sub{font-size:var(--t-xs);color:var(--text-2);margin:.3rem 0 1.2rem}
.lane .flowline__step{background:var(--ink)}
.lanes__join{display:flex;flex-direction:column;align-items:center;gap:.55rem;margin-block:1.4rem 1.2rem;font-size:var(--t-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--red);text-align:center}
.lanes__join::before{content:"";width:1px;height:2.4rem;background:linear-gradient(180deg,transparent,var(--red))}

/* -- 15j. A whole website against one focused landing page -- */
.vsmap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1rem,3vw,2.6rem);align-items:stretch}
@media (max-width:960px){.vsmap{grid-template-columns:minmax(0,1fr)}}
.vsmap__col{border:1px solid var(--line);padding:clamp(1.2rem,2.4vw,1.8rem);background:linear-gradient(165deg,var(--panel),var(--ink))}
.vsmap__col--focus{border-color:var(--red)}
.vsmap__col h3{font-size:var(--t-md);margin-block:.6rem .5rem}
.vsmap__col > p{font-size:var(--t-xs);line-height:1.55;color:var(--text-2)}
.tree{display:grid;justify-items:center;gap:.8rem;margin-top:1.4rem}
.tree__node{border:1px solid var(--line-strong);background:var(--ink);padding:.45rem .85rem;font-size:.875rem;color:var(--text)}
.tree__kids{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;padding-top:.8rem;border-top:1px solid var(--line);width:100%}
.tree__kids .tree__node{color:var(--text-2)}
.vsmap__col .flowline{margin-top:1.4rem}

/* -- 15k. Industry cards: which services fit, in words -- */
.icards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));gap:clamp(.8rem,1.6vw,1.2rem)}
.icard{border:1px solid var(--line);background:linear-gradient(165deg,var(--panel),var(--ink));padding:clamp(1.2rem,2.2vw,1.6rem);display:flex;flex-direction:column;gap:.55rem;transition:border-color var(--dur-fast) var(--ease)}
.icard:hover{border-color:var(--line-strong)}
.icard.is-hidden{display:none}
.icard__tag{font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.icard h3{font-size:var(--t-md)}
.icard__lede{font-size:var(--t-xs);line-height:1.55;color:var(--text-2)}
.icard__map{margin:.3rem 0 0;display:grid}
.icard__map div{border-top:1px solid var(--line);padding-block:.6rem .4rem}
.icard__map dt{font-size:var(--t-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:.2rem}
.icard__map dd{font-size:.9375rem;line-height:1.5;color:var(--text-2)}

/* -- 15l. Small service diagrams on the services overview -- */
.svc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4.4vw,4.4rem);align-items:center;padding-block:clamp(2.4rem,5vw,4rem);border-top:1px solid var(--line)}
@media (max-width:960px){.svc-row{grid-template-columns:minmax(0,1fr)}}
.svc-row h3{font-size:var(--t-lg);margin-block:.6rem .9rem}
.svc-row .flowline{--gap:1.5rem}
.svc-row .flowline__step{padding:.8rem .95rem}
.svc-row .flowline__d{display:none}
/* Four short cards on the homepage sit in one row on desktop, two by two on tablets. */
.icards--four{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}

/* -- 15m. Photographs. Real-looking, bright and specific to the trade, framed
   lightly so they read as photographs rather than the old dark grade. -- */
.icard__img{
  display:block;
  width:calc(100% + 2 * clamp(1.2rem,2.2vw,1.6rem));
  max-width:none;
  aspect-ratio:4/3;
  object-fit:cover;
  margin:calc(clamp(1.2rem,2.2vw,1.6rem) * -1) calc(clamp(1.2rem,2.2vw,1.6rem) * -1) .5rem;
  border-bottom:1px solid var(--line);
  transition:transform .6s var(--ease-out);
}
.icard{overflow:hidden}
.photo{margin:0;border:1px solid var(--line);background:var(--ink);overflow:hidden}
.photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.photo figcaption{padding:.75rem 1rem;font-size:var(--t-xs);line-height:1.5;color:var(--text-2);border-top:1px solid var(--line)}

/* The hero's real h1 is the small label line (what and where), styled as a
   kicker; the big slogan below it is a paragraph styled as a display title. */
h1.kicker{font-family:var(--body);font-weight:600;letter-spacing:.12em;line-height:1}