/*
 * Homepage v2 — the scroll design.
 *
 * Everything that moves is CSS. The mockup computed its breakpoints in
 * JavaScript from a measured width (dkCols, lkCols, svcH, teamCols, railPad
 * and so on); those are media queries here, because a layout that needs JS to
 * decide its own columns flashes the wrong one before the script runs and
 * collapses entirely when the script fails.
 *
 * Muted ink rule from the design: #5F7386 (4.9:1) and #5A6B7B (5.5:1) are the
 * only greys allowed on text. #7E93A6 / #8A97A8 fail AA and are reserved for
 * strokes and borders.
 */

/*
 * Homepage-only pieces. The deck, slider, meter, promises and rail moved to
 * components-v2.css so the v3 service pages share one copy.
 */

/* ===== Hero =====
   Navy, full bleed. The grid and the glow are decoration drawn on spans so
   they stay out of the accessibility tree and off the print stylesheet. */
.hh{position:relative;background:#03244a;overflow:hidden;}
.hh__grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;}
.hh__glow{position:absolute;right:-160px;top:-120px;width:620px;height:620px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(4,100,173,.75),rgba(4,100,173,0) 70%);}
.hh__in{position:relative;max-width:1280px;margin:0 auto;
  /* Room for the proof strip, which overlaps this edge from below. */
  padding:clamp(34px,4vw,56px) clamp(16px,3.5vw,48px) clamp(104px,9vw,150px);
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,3.4vw,56px);align-items:center;}
@media (min-width:1100px){ .hh__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);} }

.hh__pill{display:inline-flex;background:rgba(240,165,0,.14);border-left:3px solid #F0A500;border-radius:0 10px 10px 0;
  padding:9px 16px;margin-bottom:22px;font-size:13.5px;font-weight:700;color:#F0A500;}
/* The headline must break on three lines at desktop, which is what the width
   cap buys -- text-wrap:balance alone will not hold it to three. */
.hh__h1{font-size:clamp(38px,4.2vw,52px);line-height:1.02;font-weight:800;letter-spacing:-1.8px;color:#fff;
  margin:0 0 20px;max-width:600px;text-wrap:balance;}
.hh__lead{font-size:clamp(16px,1.4vw,17.5px);line-height:1.65;color:#D3E3F1;margin:0 0 14px;max-width:640px;}
.hh__body{font-size:clamp(15px,1.25vw,16px);line-height:1.65;color:#A9C2DA;margin:0 0 28px;max-width:640px;}

.hh__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;}
.hh__btn{display:inline-block;border-radius:11px;font-size:16.5px;text-align:center;}
.hh__btn--amber{background:#F0A500;color:#2E2000;font-weight:800;padding:17px 30px;box-shadow:0 12px 26px rgba(240,165,0,.28);}
.hh__btn--amber:hover{background:#FFB41F;color:#2E2000;}
.hh__btn--ghost{color:#fff;font-weight:700;padding:16px 28px;border:1.5px solid rgba(255,255,255,.35);}
.hh__btn--ghost:hover{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06);}

.hh__ticks{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0;padding:0;list-style:none;}
/* On a phone a half-width button looks like the other half failed to load. */
@media (max-width:639px){
  .hh__cta{flex-direction:column;align-items:stretch;}
  .hh__btn{width:100%;}
}
.hh__tick{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#D3E3F1;}
.hh__check{color:#F0A500;font-weight:800;}

/* ===== Hero: the Revenue Line =====
   The stops step down and to the RIGHT by index, so a fourth stop keeps the
   rhythm. Connectors are CSS elbows on the stop itself: one hand-plotted SVG
   path would be pointing at empty space the moment a sub-line wrapped. */
.rl{position:relative;}
.rl__eyebrow{display:block;font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#F0A500;margin-bottom:18px;}
.rl__chain{display:flex;flex-direction:column;gap:26px;}
.rl__stop{position:relative;min-width:0;}
.rl__card{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:18px;
  padding:18px 20px;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;}
.rl__ico{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:12px;
  background:rgba(95,169,220,.18);color:#8FC1E3;}
.rl__icon{display:block;}
.rl__text{min-width:0;}
.rl__label{display:block;font-size:19px;font-weight:800;color:#fff;letter-spacing:-.2px;}
.rl__sub{display:block;font-size:14.5px;line-height:1.45;color:#A9C2DA;margin-top:2px;}

.rl__card--sell{background:#0464ad;border-color:#0464ad;border-radius:22px;padding:24px 26px;
  box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 0 6px rgba(4,100,173,.25);}
.rl__card--sell .rl__ico{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.16);color:#fff;}
.rl__card--sell .rl__label{font-size:clamp(24px,2.4vw,30px);line-height:1;letter-spacing:-.5px;}
.rl__card--sell .rl__sub{font-size:15px;color:#D3E8F8;margin-top:5px;}
.rl__chip{display:inline-block;grid-column:2;justify-self:start;margin-top:14px;background:#F0A500;color:#2E2000;
  font-size:14px;font-weight:800;border-radius:99px;padding:8px 14px;}

.rl__rule{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:#A9C2DA;}
.rl__rule::after{content:"";flex:1;border-top:1.5px dashed rgba(255,255,255,.28);}

/* The elbow: down from under the card above, then right into this one. */
.rl__stop::before{content:"";position:absolute;left:-30px;top:-34px;width:30px;height:48px;
  border-left:2px dashed #5FA9DC;border-bottom:2px dashed #5FA9DC;border-bottom-left-radius:18px;}
.rl__stop:first-child::before{display:none;}
.rl__stop--sell::before{border-color:#F0A500;}

@media (min-width:1100px){
  .rl__chain{gap:30px;}
  .rl__stop{margin-left:calc(var(--i, 0) * 60px);}
  .rl__rule{margin-left:0;}
}
/* Stacked: no stepped offsets, so the elbow becomes a plain vertical drop. */
@media (max-width:1099px){
  .rl__stop::before{left:26px;top:-28px;width:0;height:28px;border-bottom:0;border-bottom-left-radius:0;}
}

@keyframes rlUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.rl__stop{opacity:0;animation:rlUp 520ms cubic-bezier(.2,.7,.3,1) forwards;}
.rl__stop:nth-child(1){animation-delay:120ms;}
.rl__stop:nth-child(3){animation-delay:210ms;}
.rl__stop:nth-child(5){animation-delay:300ms;}
@media (prefers-reduced-motion:reduce){ .rl__stop{animation:none;opacity:1;} }

/* ===== Client logo slider ===== */
.lg__page{flex:0 0 100%;display:grid;grid-auto-rows:116px;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));}
@media (min-width:560px){ .lg__page{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (min-width:820px){ .lg__page{grid-template-columns:repeat(5,minmax(0,1fr));} }
@media (min-width:1120px){ .lg__page{grid-template-columns:repeat(7,minmax(0,1fr));} }
.lg__tile{background:#fff;border:1px solid #E2E9F0;border-radius:14px;position:relative;overflow:hidden;}
.lg__tile img{width:auto;height:auto;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:80%;max-height:66px;}

/* ===== Core services — four panels, one widens =====
   Hovering or tabbing into a panel gives it more of the row; the other three
   yield. Every link stays visible — the widening is emphasis, not a reveal,
   so touch and keyboard lose nothing by never triggering it. */
.svc-row{display:flex;gap:14px;--svc-h:0px;}
.svc{flex:1 1 0;min-width:0;transition:flex-grow 420ms cubic-bezier(.2,.7,.3,1);}
.svc-row:hover .svc,.svc-row:focus-within .svc{flex-grow:.8;}
.svc-row .svc:hover,.svc-row .svc:focus-within{flex-grow:1.55;}
.svc a:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:6px;}
.svc--amber a:focus-visible{outline-color:#03244a;}
@media (min-width:641px){ .svc-row{--svc-h:440px;} }
@media (min-width:1040px){ .svc-row{--svc-h:520px;} }
@media (max-width:1039px){ .svc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){ .svc-row{grid-template-columns:1fr;} }

/* ===== Team row ===== */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);}
@media (min-width:641px){ .team{grid-template-columns:repeat(4,minmax(0,1fr));} }
.team-img{transition:transform 500ms cubic-bezier(.2,.7,.3,1);}
figure:hover .team-img{transform:scale(1.04);}

/* ===== Certification strip ===== */
/*
 * Column count follows the number of badges rather than being fixed at five.
 *
 * It was repeat(5, 1fr), from when the strip carried five. Dropping to the
 * three Google credentials left two empty cells and a visibly lopsided row --
 * the badges hugged the left and the right third of the strip was blank.
 *
 * auto-fit with a bounded track plus justify-content:center lays out whatever
 * is there and keeps it centred, so adding or removing a badge needs no CSS
 * change. The max track stops three badges stretching into three huge cards.
 */
.certs{
  display:grid;
  /*
   * minmax(...,1fr), not minmax(...,200px).
   *
   * When the max is a definite length the browser computes the track count
   * from the MAX, so minmax(140px,200px) in a 343px phone container fits only
   * one 200px track and the five badges stacked into five rows. With 1fr the
   * count comes from the 140px min: two across on a phone, five on desktop.
   *
   * auto-fit collapses tracks it does not need, so the row stays full and
   * centred whatever the badge count is -- which is what left two empty cells
   * and a lopsided strip when this was repeat(5,1fr) and only three remained.
   */
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
  /* Caps the cards at a sensible size if the strip ever carries fewer. */
  max-width:1060px;
  margin-inline:auto;
}