/* ==========================================================================
   OY — sections
   Clients · Solution · Why OY · Proof · Sectors · Offer (services + pricing) ·
   Process · FAQ · Lead form · Footer

   Depends on the tokens and components declared in main.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: marquee
   -------------------------------------------------------------------------- */
.marquee-stack{position:relative;z-index:2}
.marquee{overflow:hidden;position:relative;z-index:2}
.marquee--a{--speed:52s}
.marquee--b{--speed:46s;margin-top:14px}
.marquee--c{--speed:64s}

.marquee__track{
  display:flex;
  --marquee-gap:14px;
  gap:var(--marquee-gap);
  width:max-content;
  padding-block:8px;
}
/* Ambient motion only runs when there is a script available to stop it. */
.js .marquee__track{animation:marquee var(--speed,44s) linear infinite}
.marquee__track--rev{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}

/* Soft fade at the marquee edges so cards don't hard-clip */
.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:clamp(30px,6vw,90px);
  z-index:3;
  pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--fade,#fff),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--fade,#fff),transparent)}

/* --------------------------------------------------------------------------
   Clients
   -------------------------------------------------------------------------- */
.logo-tile{
  width:clamp(126px,12.4vw,162px);
  aspect-ratio:1;
  border-radius:var(--r-md);
  overflow:hidden;
  flex:0 0 auto;
  background:var(--bg-2);
  box-shadow:var(--sh-sm);
  border:1px solid var(--line-2);
  transition:transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
}
/* Full colour, always. Desaturating them read as one calm band but made the
   wall unscannable — no brand was recognisable at a glance, which is the only
   job a logo wall has. The tiles are the constant instead: same size, same
   radius, same frame, so the eye reads a grid rather than a patchwork. */
.logo-tile img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.logo-tile:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.logo-tile img[src$=".svg"]{object-fit:contain;padding:22px;background:#fff}

/* --------------------------------------------------------------------------
   Solution — the panel that assembles itself

   Same pinning contract as the pain sequence in main.css §9, and gated on
   the same three conditions so the two sections can never disagree about
   whether pinning is safe. The mechanics are repeated rather than shared
   because the pain sequence is verified working and not worth destabilising
   for fifteen lines; the gates are the part that must stay identical.

   What differs is what the index does. There, one card replaces another.
   Here, the panel never leaves and `[data-lit]` accumulates — slot N turns
   on when the index reaches N and stays on. The visitor watches an empty
   system fill up, which is the literal claim the section is making.
   -------------------------------------------------------------------------- */
.build{
  position:relative;
  z-index:2;
}
@supports (height:100svh){
  .build{--panel-step:62svh}
}
.build__inner{width:100%}

/* --- resting state: six benefits beside a fully-lit panel --------------- */
.build__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:center;
}
.build__copy{position:relative}
/* Unpinned, six benefits are a grid rather than one tall column — the same
   shape the pain cards fall back to. */
.build__steps{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
}

.bstep{
  background:#1D1D1D;
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--r-card);
  padding:var(--pad-card-sm);
}
.bstep__idx{display:none}
.bstep__t{font-size:clamp(19px,1.8vw,23px);color:var(--white)}
.bstep__p{
  color:#A2A5A3;
  font-size:14.8px;
  line-height:1.55;
  margin-top:10px;
  max-width:56ch;
}

/* --- the panel ---------------------------------------------------------- */
/* On the light section this sat dark against pale grey and separated on its
   own. The section is near-black now, so the panel has to be lifted
   deliberately: a lighter surface, a stronger edge, and a lime ambience
   behind it — otherwise it reads as a hole rather than an object. */
.bpanel{
  background:linear-gradient(158deg,#242424 0%,#282D1E 58%,#2E341C 100%);
  border-radius:var(--r-card);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.6),
             0 0 0 1px rgba(255,255,255,.03),
             0 24px 70px -30px rgba(206,254,70,.28);
}
.bpanel__bar{
  display:flex;align-items:center;gap:10px;
  padding:13px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.bpanel__dots{display:flex;gap:5px}
.bpanel__dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.bpanel__dots i:first-child{background:rgba(233,195,195,.5)}
.bpanel__title{
  font-family:var(--font-mono);
  font-size:11.5px;font-weight:600;
  color:#B7BAB6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.bpanel__sample{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:11.5px;font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#B7BAB6;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  padding:3px 9px;
  border-radius:var(--r-pill);
  flex:0 0 auto;
}

.bpanel__body{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,.9vw,14px);
  padding:clamp(16px,1.7vw,26px);
}

.bslot{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-sm);
  padding:clamp(14px,1.3vw,20px);
  min-width:0;
}
.bslot--chart{grid-column:span 3}
.bslot--log{grid-column:span 2}
.bslot--roles{grid-column:span 1}

.bslot--accent{
  background:linear-gradient(150deg,rgba(206,254,70,.9),rgba(206,254,70,.72));
  border-color:transparent;
}
.bslot__label{
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  letter-spacing:.06em;
  color:#A6A9A5;
}
.bslot--accent .bslot__label{color:var(--lime-ink);opacity:.8}
.bslot__value{
  font-family:var(--font-mono);
  font-size:clamp(16px,1.4vw,20px);
  font-weight:600;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  line-height:1;
  margin-top:8px;
  color:var(--white);
}
.bslot--accent .bslot__value{color:var(--lime-ink)}
.bslot__delta{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11.5px;font-weight:600;
  margin-top:7px;
  color:#7FD6A6;
}
.bslot__delta--down{color:#E9AFB1}
.bslot--accent .bslot__delta{color:var(--lime-ink);opacity:.85}

.bslot__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.bslot__head b{font-size:12.5px;font-weight:600;color:var(--white)}
.bslot__head span{
  font-family:var(--font-mono);
  font-size:11px;color:#A6A9A5;
}
.bchart{
  display:flex;align-items:flex-end;
  gap:clamp(5px,.7vw,9px);
  height:clamp(56px,6vw,84px);
}
.bchart span{
  flex:1;
  border-radius:4px 4px 2px 2px;
  background:rgba(255,255,255,.14);
}
.bchart span.on{background:rgba(255,255,255,.42)}
.bchart span.peak{background:var(--lime)}
.bchart span:nth-child(1){height:38%}
.bchart span:nth-child(2){height:56%}
.bchart span:nth-child(3){height:47%}
.bchart span:nth-child(4){height:72%}
.bchart span:nth-child(5){height:60%}
.bchart span:nth-child(6){height:100%}
.bchart span:nth-child(7){height:81%}

.blog{display:grid;gap:7px;margin-top:11px}
.blog li{
  font-size:12.5px;
  color:#C2C5C1;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.blog span{
  font-family:var(--font-mono);
  font-size:11px;
  color:#8E918D;
  margin-right:8px;
}

.broles{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.broles span{
  font-family:var(--font-mono);
  font-size:11px;font-weight:600;
  letter-spacing:.04em;
  padding:5px 10px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);
  color:#C2C5C1;
}
.broles__you{background:var(--lime);color:var(--lime-ink)}

/* Panel density is a function of WIDTH, so it must live outside the
   min-height gate below. It did not: every one of these rules was trapped
   inside @media (min-height:700px), so a phone shorter than that — 375x667,
   360x640, both very common — got the unpinned fallback AND a desktop
   three-column panel. Measured at 375x667: three 88px columns on a 315px
   panel, with the roles slot at span 1 holding an 83px chip.

   These sit after the base panel rules so they win on source order. */
@media (max-width:1180px){
  .bpanel__body{gap:8px;padding:12px}
  .bslot{padding:11px}
}

@media (max-width:720px){
  /* Every slot keeps its content and loses its padding: the three figures
     share one row, the chart shortens, the log drops to two entries. */
  .bslot--chart,
  .bslot--log,
  .bslot--roles{grid-column:span 3}
  .bpanel__bar{padding:10px 14px}
  .bpanel__body{padding:10px;gap:7px}
  .bslot{padding:9px}
  .bslot__value{font-size:16px;margin-top:5px}
  .bslot__delta{display:none}
  .bslot__label{font-size:10.5px}
  .bchart{height:50px}
  .bslot__head{margin-bottom:8px}
  .blog{gap:5px;margin-top:8px}
  .blog li{font-size:11.5px}
  .broles{gap:5px;margin-top:8px}
  .broles span{font-size:10px;padding:4px 8px}
  .bpanel__title{display:none}
  .blog li:nth-child(3){display:none}
}

/* ==========================================================================
   Pinned — the panel stays, the steps advance, the slots accumulate.
   ========================================================================== */
/* How much height this needs depends on the WIDTH, which one number cannot
   express — and gating on one number alone was a mistake that cost the
   effect on the most ordinary desktop window there is.

   Stacked (narrow), the panel sits ABOVE a step of copy and the pair needs
   real room: at 360x560 it came to 154% of the pinned area, and at 375x700
   it still measured 107%, i.e. 39px clipped. Hence 780.

   Side by side (>=1181px) the copy sits BESIDE the panel, so the tallest of
   the two governs, not their sum: measured 420px of content in 606px at
   1440x705 and 502 in 604 at 1280x720. Both fit with room to spare, yet the
   780 gate threw them out — a 1280x720 window, which is simply a laptop,
   got the flat grid.

   site.js matches on this exact string via data-seq-media, so the two
   cannot drift apart. */
@media (min-height:780px), (min-width:1181px) and (min-height:660px){
@supports ((overflow:clip) and (height:100svh)){

  .build[data-stack="on"]{
    height:calc(100svh + var(--panels,6) * var(--panel-step));
  }
  .build[data-stack="on"] .build__pin{
    position:sticky;
    top:0;
    height:100svh;
    display:flex;
    align-items:center;
    padding-top:clamp(76px,9vh,104px);
    padding-bottom:calc(clamp(40px,5vh,64px) + var(--mcta-h));
  }
  /* Wider than the site's 1400px measure while pinned. Everywhere else that
     cap keeps line length readable; here the copy column is short and the
     panel is the point, so the cap was only shrinking the thing the visitor
     is meant to be watching. */
  .build[data-stack="on"] .build__inner{max-width:1640px}

  /* Even weight. At .74/1.26 the panel read as the subject and the copy as
     a caption to it — the visitor looked and moved on without reading. The
     six lines of copy ARE the claim; the panel only illustrates it. */
  .build[data-stack="on"] .build__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
    align-items:center;
    width:100%;
  }

  /* the copy column holds one step at a time, in a box tall enough for the
     longest of them so the panel beside it never shifts */
  .build[data-stack="on"] .build__copy{
    position:relative;
    min-height:clamp(240px,26vh,300px);
  }
  .build[data-stack="on"] .build__steps{display:block;height:100%}
  .build[data-stack="on"] .bstep{
    position:absolute;
    inset:0;
    left:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0;
    background:none;
    border:0;
    box-shadow:none;
    opacity:0;
    pointer-events:none;
    transform:translate3d(0,26px,0);
    transition:opacity .42s var(--ease),transform .55s var(--ease);
  }
  .build[data-stack="on"] .bstep[data-state="past"]{transform:translate3d(0,-26px,0)}
  .build[data-stack="on"] .bstep[data-state="current"]{
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  .build[data-stack="on"] .bstep__idx{
    display:block;
    font-family:var(--font-mono);
    font-size:13px;font-weight:600;
    letter-spacing:.14em;
    color:var(--gray-on-dark);
    margin-bottom:clamp(12px,1.8vh,22px);
  }
  .bstep__idx b{color:var(--lime);font-weight:600}
  /* The pain sequence's register, near enough. It stops at 88 rather than
     96 only because two lines of 96 plus body copy stops fitting the pin at
     1280x720, which is an ordinary laptop. */
  .build[data-stack="on"] .bstep__t{
    color:var(--white);
    font-size:clamp(36px,6.2vw,88px);
    line-height:1.02;
    letter-spacing:-.04em;
  }
  .build[data-stack="on"] .bstep__p{
    color:#C7CAC6;
    font-size:clamp(18px,1.75vw,26px);
    line-height:1.48;
    margin-top:clamp(14px,2vh,26px);
    max-width:30ch;
  }

  /* --- slots come alive one at a time and stay alive -------------------- */
  .build[data-stack="on"] .bslot{
    opacity:.14;
    transform:translate3d(0,6px,0) scale(.985);
    transition:opacity .5s var(--ease),
               transform .6s var(--ease),
               border-color .5s var(--ease),
               box-shadow .5s var(--ease);
  }
  .build[data-stack="on"] .bslot[data-lit="true"]{
    opacity:1;
    transform:none;
  }
  /* the piece that just arrived gets a moment of lime before settling */
  .build[data-stack="on"] .bslot[data-lit="true"][data-step]{
    border-color:rgba(255,255,255,.07);
  }
  .build[data-stack="on"] .bslot--accent[data-lit="true"]{border-color:transparent}

  @media (max-width:1180px){
    .build[data-stack="on"] .build__grid{
      grid-template-columns:minmax(0,1fr);
      gap:clamp(18px,3vh,32px);
      align-content:center;
    }
    /* panel first: it is the promise, the words explain it */
    .build[data-stack="on"] .build__panel{order:-1}
    .build[data-stack="on"] .build__copy{
      min-height:clamp(126px,17vh,186px);
    }
    .build[data-stack="on"] .bstep__t{font-size:clamp(30px,5.6vw,52px)}
    .build[data-stack="on"] .bstep__p{font-size:clamp(15.5px,2vw,18px);max-width:44ch}
  }

  @media (max-width:720px){
    .build{--panel-step:58svh}
    /* Nothing sits under the copy here, so the only thing to clear at the
       bottom is the sticky CTA. */
    .build[data-stack="on"] .build__pin{
      padding-top:clamp(72px,10vh,88px);
      padding-bottom:calc(10px + var(--mcta-h));
    }
    .build[data-stack="on"] .bstep__t{font-size:clamp(27px,7.4vw,40px)}
    .build[data-stack="on"] .bstep__p{font-size:15.5px;max-width:40ch}
    .build[data-stack="on"] .bstep__idx{margin-bottom:10px}
  }

  /* Short viewports: the panel is the thing worth keeping, so the copy
     gives up size first. Last in source order so it wins over the width
     tiers above. */
  @media (max-height:719px){
    .build[data-stack="on"] .build__pin{
      padding-top:68px;
      padding-bottom:calc(32px + var(--mcta-h));
    }
    .build[data-stack="on"] .build__copy{min-height:150px}
    .build[data-stack="on"] .bstep__idx{margin-bottom:10px}
    .build[data-stack="on"] .bstep__t{font-size:clamp(28px,4.2vw,56px)}
    .build[data-stack="on"] .bstep__p{font-size:16.5px;margin-top:12px}
    .bchart{height:48px}
    .bslot{padding:10px}
    .blog li:nth-child(3){display:none}
  }
  @media (max-height:719px) and (max-width:1180px){
    .blog li:nth-child(2){display:none}
  }

}
}

.build-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(16px,2.4vw,32px);
  flex-wrap:wrap;
  margin-top:clamp(40px,5vw,72px);
  text-align:center;
  position:relative;z-index:2;
}
.build-cta__t{
  font-family:var(--font-display);
  font-size:clamp(19px,2vw,26px);
  font-weight:600;
  letter-spacing:-.024em;
  color:var(--ink);
}

/* --------------------------------------------------------------------------
   Why OY — rolling columns
   -------------------------------------------------------------------------- */
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  align-items:start;
  position:relative;
  z-index:2;
}
.why-col{display:grid;gap:16px}
/* Static offsets so the columns read as staggered even before any scroll */
.why-col--b{margin-top:clamp(0px,4.4vw,62px)}
.why-col--c{margin-top:clamp(0px,2.2vw,30px)}

.why-card{
  background:var(--white);
  border:1px solid var(--line-2);
  border-radius:var(--r-card);
  padding:var(--pad-card-sm);
  box-shadow:var(--sh-sm);
  transition:transform var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease);
}
.why-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--sh-hover);
  border-color:rgba(168,214,25,.45);
}

.why-card__art{
  height:clamp(132px,12.5vw,170px);
  border-radius:var(--r-md);
  background:linear-gradient(155deg,#F8F9F8 0%,#ECEEED 100%);
  display:grid;place-items:center;
  overflow:hidden;
}
.why-card__art svg{
  width:clamp(84px,8.6vw,112px);
  height:auto;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.14));
  animation:floaty 7.6s ease-in-out infinite;
  will-change:transform;
}
/* Stagger the idle drift so the six objects never bob in unison */
.why-card:nth-child(2) .why-card__art svg{animation-duration:9.1s;animation-delay:-2.4s}
.why-col--b .why-card__art svg{animation-duration:8.3s;animation-delay:-1.2s}
.why-col--b .why-card:nth-child(2) .why-card__art svg{animation-duration:6.8s;animation-delay:-3.6s}
.why-col--c .why-card__art svg{animation-duration:9.7s;animation-delay:-4.1s}
.why-col--c .why-card:nth-child(2) .why-card__art svg{animation-duration:7.1s;animation-delay:-.8s}

.why-card h3{margin-top:20px;font-size:clamp(19px,1.85vw,23px)}
.why-card p{color:var(--gray);font-size:14.5px;line-height:1.58;margin-top:11px}

/* Emphasis variants */
.why-card--dark{
  background:linear-gradient(158deg,#1C1C1C 0%,#212518 60%,#282D17 100%);
  border-color:transparent;
  color:var(--white);
}
.why-card--dark .why-card__art{background:rgba(255,255,255,.055)}
.why-card--dark p{color:#A9ACA7}
.why-card--lime .why-card__art{
  background:radial-gradient(125% 125% at 25% 18%,#EDFFB5 0%,#CEFE46 58%,#AEDC2E 100%);
}

/* --------------------------------------------------------------------------
   Proof — certificate, the facts behind it, the two photographs that
   document the partnership.

   The facts used to float over the photograph as translucent pills: white
   text on an unpredictable background, and the longest one lost 31px of
   itself at 320px. They are a ledger now.
   -------------------------------------------------------------------------- */
.proof{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);
  align-items:center;
  max-width:1040px;
  margin-inline:auto;
  position:relative;z-index:2;
}
.proof__cert{
  width:100%;
  height:auto;   /* the intrinsic width/height attrs reserve the space */
  max-width:400px;
  justify-self:center;
  border-radius:var(--r-md);
  transform:rotate(-2.5deg);
  box-shadow:var(--sh-xl);
}
.proof__facts{display:grid}
.fact{
  display:grid;
  grid-template-columns:minmax(0,148px) minmax(0,1fr);
  gap:8px 18px;
  align-items:baseline;
  padding:16px 0;
  border-top:1px solid var(--line);
}
.fact:last-child{border-bottom:1px solid var(--line)}
.fact dt{
  font-size:12px;font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--gray-2);
}
.fact dd{
  font-size:16.5px;
  font-weight:500;
  color:var(--ink);
  line-height:1.4;
}

.proof__photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  max-width:1040px;
  margin:clamp(34px,4vw,54px) auto 0;
  position:relative;z-index:2;
}
.rec{
  border-radius:var(--r-card);
  overflow:hidden;
  position:relative;
  min-height:320px;
  box-shadow:var(--sh-md);
}
.rec img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
}
.rec__cap{
  position:absolute;
  left:11px;right:11px;bottom:11px;
  background:rgba(18,20,18,.82);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  padding:15px 18px;
  color:var(--white);
  z-index:2;
}
.rec__cap b{font-size:15px;display:block;letter-spacing:-.015em}
.rec__cap small{font-size:13px;color:#D5D7D3;display:block;margin-top:5px;line-height:1.35}

/* --------------------------------------------------------------------------
   Sectors
   -------------------------------------------------------------------------- */
.sector{
  width:296px;
  background:var(--white);
  border-radius:var(--r-card);
  padding:24px;
  position:relative;
  box-shadow:var(--sh-sm);
  border:1px solid var(--line-2);
  flex:0 0 auto;
  min-height:200px;
  display:flex;
  flex-direction:column;
}
.sector__ic{
  width:52px;height:52px;
  border-radius:var(--r-sm);
  background:var(--bg);
  color:var(--ink);
  display:grid;place-items:center;
  align-self:flex-start;
}
.sector__ic .ic{width:27px;height:27px}
.sector h3{margin-top:auto;padding-top:34px;font-size:21px}
.sector p{color:var(--gray);font-size:14px;margin-top:9px;line-height:1.45}
.sector__hit{
  position:absolute;
  top:24px;right:22px;
  background:var(--lime);
  color:var(--lime-ink);
  border-radius:var(--r-pill);
  padding:6px 12px;
  font-size:12px;font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.sector--accent{
  background:radial-gradient(130% 130% at 25% 15%,#ECFFB0 0%,#CEFE46 55%,#AADE2C 100%);
  border-color:transparent;
}
.sector--accent h3{padding-top:0;margin-top:auto}
.sector--accent p{color:var(--lime-ink)}

/* Dark band under the sector marquee */
.band{
  background:var(--dark);
  border-radius:var(--r-card);
  margin-top:clamp(28px,3.5vw,44px);
  padding:24px clamp(24px,4vw,50px);
  display:flex;align-items:center;justify-content:center;
  gap:24px;flex-wrap:wrap;
  position:relative;z-index:2;
}
.band__circ{
  width:62px;height:62px;
  border-radius:50%;
  background:#2E2E2E;
  color:var(--white);
  display:grid;place-items:center;
  font-family:var(--font-display);
  font-weight:700;font-size:17px;
  letter-spacing:-.02em;
  flex:0 0 auto;
}
.band p{color:#D2D4D1;font-size:15.5px;max-width:270px;line-height:1.35}

/* --------------------------------------------------------------------------
   Offer — services, then the tiers those services price against
   -------------------------------------------------------------------------- */
.svc-grid{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:14px;
  position:relative;z-index:2;
}
.svc{
  background:var(--white);
  border-radius:var(--r-card);
  padding:var(--pad-card);
  display:flex;
  flex-direction:column;
  box-shadow:var(--sh-sm);
  border:1px solid var(--line-2);
  position:relative;
  overflow:hidden;
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.svc--lead{
  background:linear-gradient(158deg,#1C1C1C 0%,#212518 60%,#282D17 100%);
  color:var(--white);
  border-color:transparent;
}
.svc__chips{display:flex;gap:6px;flex-wrap:wrap}
.svc__c1,.svc__c2{
  border-radius:var(--r-pill);
  padding:7px 14px;
  font-size:12px;font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.svc__c1{background:var(--bg);color:var(--ink-2)}
.svc--lead .svc__c1{background:rgba(255,255,255,.11);color:#E4E6E3}
.svc__c2{background:var(--lime);color:var(--lime-ink)}
.svc h3{margin-top:22px;font-size:clamp(21px,2.1vw,27px)}
.svc p{
  color:var(--gray);
  font-size:14.8px;
  line-height:1.55;
  margin-top:13px;
}
.svc--lead p{color:#A9ACA7}
.svc__price{
  margin-top:22px;
  font-family:var(--font-display);
  font-size:clamp(28px,2.9vw,38px);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--ink);
}
.svc--lead .svc__price{color:var(--lime)}
.svc__price span{
  font-family:var(--font-mono);
  font-size:14px;font-weight:500;
  letter-spacing:.04em;
  margin-left:6px;
  color:var(--gray);
}
.svc--lead .svc__price span{color:#9EA19B}
.svc__old{
  font-family:var(--font);
  font-size:17px;
  color:var(--gray-2);
  text-decoration:line-through;
  margin-left:9px;
  letter-spacing:-.02em;
  font-weight:500;
}
.svc p.svc__note{
  font-size:13.5px;
  color:var(--gray-2);
  margin-top:10px;
  line-height:1.45;
}
.svc--lead p.svc__note{color:#9EA19B}
.svc__note a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.svc--lead .svc__note a{color:var(--lime)}
.svc .btn{margin-top:24px;align-self:flex-start}
.svc__feat{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line-2);
  display:grid;gap:10px;
}
.svc--lead .svc__feat{border-top-color:rgba(255,255,255,.1)}
.svc__feat li{
  font-size:14px;
  color:var(--ink-2);
  padding-left:21px;
  position:relative;
  line-height:1.45;
}
.svc--lead .svc__feat li{color:#BCBFBA}
.svc__feat li::before{
  content:"";
  position:absolute;left:0;top:7px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 3px rgba(206,254,70,.25);
}

/* Tiers — implementation only, and the copy says so. */
.tiers{
  margin-top:clamp(38px,4.6vw,66px);
  padding-top:clamp(32px,3.8vw,52px);
  border-top:1px solid var(--line);
  position:relative;z-index:2;
}
.tiers__head{max-width:680px;margin-bottom:clamp(24px,3vw,36px)}
.tiers__head h3{font-size:clamp(22px,2.3vw,31px)}
.tiers__head p{color:var(--gray);font-size:15.5px;margin-top:12px;line-height:1.55}

.price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.price{
  background:var(--bg-2);
  border-radius:var(--r-card);
  padding:var(--pad-card);
  display:flex;flex-direction:column;
  border:1px solid var(--line-2);
  position:relative;
}
.price--mid{
  background:var(--white);
  border:2px solid var(--lime);
  box-shadow:var(--sh-md);
}
.price__top{
  font-size:12px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--gray-2);
}
.price h4{margin-top:14px;font-size:clamp(19px,1.9vw,23px)}
.price__amt{
  margin-top:20px;
  font-family:var(--font-display);
  font-size:clamp(32px,3.4vw,44px);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1;
}
.price__amt span{
  font-family:var(--font-mono);
  font-size:14px;font-weight:500;
  color:var(--gray);
  letter-spacing:.04em;
  margin-left:6px;
}
.price p{color:var(--gray);font-size:14.5px;line-height:1.5;margin-top:16px;flex:1}
.price__badge{
  position:absolute;
  top:-12px;left:50%;
  transform:translateX(-50%);
  background:var(--lime);
  color:var(--lime-ink);
  border-radius:var(--r-pill);
  padding:6px 14px;
  font-size:12px;font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}

/* What moves the price */
.drivers{
  margin-top:clamp(28px,3.2vw,42px);
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:var(--pad-card);
}
.drivers h4{font-size:19px}
.drivers__grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.driver{
  background:var(--bg-2);
  border-radius:var(--r-sm);
  padding:20px;
}
.driver__ic{
  width:46px;height:46px;
  border-radius:var(--r-sm);
  background:var(--white);
  border:1px solid var(--line-2);
  color:var(--ink);
  display:grid;place-items:center;
  margin-bottom:14px;
}
.driver__ic .ic{width:24px;height:24px}
.driver b{font-size:15px;display:block;letter-spacing:-.01em}
.driver small{font-size:13px;color:var(--gray);display:block;margin-top:6px;line-height:1.45}
.price-note{
  text-align:center;
  color:var(--gray);
  font-size:14.5px;
  margin-top:24px;
}

/* --------------------------------------------------------------------------
   Process — a real sequence, so it is numbered and marked up as one
   -------------------------------------------------------------------------- */
.proc{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  position:relative;z-index:2;
}
.step{
  background:var(--white);
  border-radius:var(--r-card);
  padding:var(--pad-card);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;
  position:relative;
}
.step:nth-child(2){margin-top:clamp(0px,2.6vw,34px)}
.step:nth-child(3){margin-top:clamp(0px,5.2vw,68px)}
.step__row{display:flex;align-items:center;gap:10px}
.step__num{
  width:40px;height:40px;
  border-radius:50%;
  background:var(--dark);
  color:var(--white);
  display:grid;place-items:center;
  font-family:var(--font-display);
  font-weight:700;font-size:16px;
  flex:0 0 auto;
}
.step__day{
  background:var(--lime);
  color:var(--lime-ink);
  border-radius:var(--r-pill);
  padding:7px 13px;
  font-size:12px;font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.step h3{margin-top:clamp(28px,3.2vw,44px);font-size:clamp(20px,1.9vw,24px)}
.step p{color:var(--gray);font-size:14.5px;line-height:1.55;margin-top:11px}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(24px,3.5vw,52px);
  align-items:start;
  position:relative;z-index:2;
}
.faq-left{position:sticky;top:120px}
.faq-left h2{text-align:left}
.faq-left__btn{margin-top:26px}
.faq-list{display:grid;gap:12px}
.faq-item{
  background:var(--white);
  border:1px solid var(--line-2);
  border-radius:var(--r-card);
  box-shadow:var(--sh-sm);
  overflow:hidden;
}
/* The button carries the type; the heading only supplies the outline level. */
.faq-h{
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  letter-spacing:normal;
  line-height:inherit;
  font-variation-settings:normal;
}
.faq-q{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:22px 26px;
  font-family:var(--font-display);
  font-size:clamp(16.5px,1.5vw,19px);
  font-weight:600;
  letter-spacing:-.018em;
  text-align:left;
  line-height:1.3;
}
/* The card clips its overflow, so the ring is drawn inside it. */
.faq-q:focus-visible{outline-offset:-5px}
.faq-q__pl{
  position:relative;
  width:34px;height:34px;
  border-radius:50%;
  background:var(--bg);
  color:var(--ink);
  flex:0 0 auto;
  transition:transform var(--t-mid) var(--ease),
             background var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease);
}
.faq-q__pl::before,
.faq-q__pl::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  background:currentColor;
  border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq-q__pl::before{width:13px;height:2px}
.faq-q__pl::after{width:2px;height:13px}
.faq-item[data-open="true"] .faq-q__pl{
  transform:rotate(45deg);
  background:var(--lime);
  color:var(--lime-ink);
}
.faq-a{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--t-mid) var(--ease);
}
.faq-item[data-open="true"] .faq-a{grid-template-rows:1fr}
/* A 0fr grid row hides the panel visually but leaves its text in the
   accessibility tree and its links in the tab order, while aria-expanded
   reports "false" — the two disagree. visibility removes it properly, and
   is delayed on close so the collapse still animates. */
.faq-a__inner{
  overflow:hidden;
  visibility:hidden;
  transition:visibility 0s linear var(--t-mid);
}
.faq-item[data-open="true"] .faq-a__inner{
  visibility:visible;
  transition-delay:0s;
}
.faq-a p{
  color:var(--gray);
  font-size:15px;
  line-height:1.6;
  padding:0 26px 24px;
}

/* --------------------------------------------------------------------------
   Lead form
   -------------------------------------------------------------------------- */
.lead-grid{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(28px,4vw,60px);
  align-items:center;
  position:relative;z-index:2;
}
.lead-left h2{text-align:left}
.lead-points{margin-top:30px;display:grid;gap:15px}
.lead-points li{
  display:flex;align-items:flex-start;gap:13px;
  font-size:15px;color:#CBCDCA;line-height:1.45;
}
.ic-badge{
  width:30px;height:30px;
  border-radius:50%;
  background:rgba(206,254,70,.14);
  color:var(--lime);
  display:grid;place-items:center;
  flex:0 0 auto;
}
.ic-badge .ic{width:14px;height:14px}
.lead-contact{
  margin-top:32px;
  padding-top:26px;
  border-top:1px solid var(--line-dark);
  display:flex;gap:26px;flex-wrap:wrap;
}
.lead-contact a{
  display:block;
  font-size:16.5px;font-weight:500;
  min-height:44px;
  transition:color var(--t-fast) var(--ease);
}
.lead-contact a:hover{color:var(--lime)}
.lead-contact small{
  display:block;
  font-size:12.5px;color:#9C9F9B;
  font-weight:400;margin-top:3px;
}

.form{
  background:var(--white);
  border-radius:var(--r-card);
  padding:clamp(26px,3.2vw,40px);
  box-shadow:var(--sh-xl);
  color:var(--ink);
}
.form h3{font-size:clamp(20px,2vw,26px)}
.form__sub{color:var(--gray);font-size:14.5px;margin-top:9px;line-height:1.45}
.form__submit{
  width:100%;
  justify-content:center;
  margin-top:24px;
  padding:16px 26px;
  min-height:56px;
  font-size:16px;
  font-weight:600;
  border-radius:var(--r-pill);
  background:var(--dark);
  color:var(--white);
  display:inline-flex;align-items:center;gap:12px;
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.form__submit:hover{transform:translateY(-2px)}
.form__submit[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.form__note{
  font-size:13.5px;
  color:var(--gray-2);
  text-align:center;
  margin-top:14px;
  line-height:1.45;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot{padding:26px 0 34px}
.coop{
  background:linear-gradient(100deg,#F3F5F0 0%,#E4F7A6 55%,var(--lime) 100%);
  border-radius:var(--r-card);
  padding:clamp(28px,3.2vw,40px) clamp(26px,3.6vw,46px);
  display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;
}
.coop__h{font-size:clamp(20px,2.3vw,29px);color:var(--ink)}
.coop p{color:#4F5740;margin-top:8px;font-size:15px}

.foot-grid{
  display:grid;
  grid-template-columns:1.25fr .8fr .8fr 1fr;
  gap:clamp(24px,3vw,44px);
  margin-top:clamp(40px,5vw,70px);
}
.foot-logo{height:56px;width:auto}
.foot-tag{color:var(--gray);font-size:14.5px;line-height:1.55;margin-top:18px;max-width:270px}
.foot-ms{display:inline-flex;align-items:center;gap:10px;margin-top:18px}
.foot-ms img{height:24px;width:auto;border-radius:5px}
.foot-ms small{color:var(--gray-2);font-size:13px}

.foot-h{
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gray-2);
  line-height:1.3;
  margin-bottom:10px;
}
/* 18px-tall tap targets were the worst offender on the page. */
.foot-col ul{display:grid}
.foot-col ul a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:15px;
  color:var(--ink-2);
  transition:color var(--t-fast) var(--ease);
}
.foot-col ul a:hover{color:var(--ink)}
.foot-ct ul a{font-weight:500;font-size:15.5px;gap:7px;flex-wrap:wrap}
.foot-ct small{font-size:13px;color:var(--gray-2);font-weight:400}
.foot-addr{
  font-size:14px;
  color:var(--gray-2);
  margin-top:12px;
  line-height:1.5;
}

.legal{
  display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  border-top:1px solid var(--line);
  margin-top:clamp(38px,4.6vw,62px);
  padding-top:24px;
  color:var(--gray-2);
  font-size:12.5px;
  letter-spacing:.01em;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1180px){
  .after__list{grid-template-columns:1fr}

  .why-grid{grid-template-columns:1fr 1fr}
  .why-col--b,.why-col--c{margin-top:0}

  .proof{grid-template-columns:1fr}
  .proof__cert{margin-bottom:6px}

  .svc-grid{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .price__badge{left:24px;transform:none}
  .drivers__grid{grid-template-columns:1fr 1fr}
  .proc{grid-template-columns:1fr}
  .step:nth-child(2),.step:nth-child(3){margin-top:0}
  .faq-grid{grid-template-columns:1fr}
  .faq-left{position:static}
  .lead-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:720px){
  .drivers__grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .proof__photos{grid-template-columns:1fr}
  .rec{min-height:280px}
  .logo-tile{border-radius:var(--r-sm)}
  .band{flex-direction:column;text-align:center}
  .band p{max-width:none}
  .coop{flex-direction:column;align-items:flex-start}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .legal{flex-direction:column;gap:8px}
  .sector{width:250px}
  .faq-q{padding:18px 20px;gap:14px}
  .faq-a p{padding:0 20px 20px}
  .fact{grid-template-columns:1fr}
  .lead-contact{gap:18px 26px}
}