/* =========================================================
   BoostUpAMZ — hero section
   ========================================================= */

:root{
  --navy:      #24333E;   /* sampled from the logo background */
  --navy-700:  #1A252E;
  --orange:    #FF9900;   /* Amazon orange — CTA */
  --orange-600:#E8890A;
  --ink:       #0F1419;
  --muted:     #7C8792;
  --line:      #E3E7EC;
  --bg:        #FFFFFF;

  /* the stage is capped by width (--sw) and by height (--sh) independently;
     whichever is tighter wins, so neither constraint over-shrinks the other */
  --sw: 1;
  --sh: 1;
  --stage-scale: min(var(--sw), var(--sh));
  --stage-h: calc(300px * min(var(--sw), var(--sh)));
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:120px; }

body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1{ margin:0; letter-spacing:-.035em; }
p{ margin:0; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; line-height:1;
  padding:13px 22px; border-radius:999px;
  white-space:nowrap;
  transition:transform .3s cubic-bezier(.22,1,.36,1), background-color .25s ease,
             box-shadow .3s ease, color .25s ease;
}
.btn:active{ transform:translateY(0) scale(.98); }

.btn--dark{
  background:var(--navy); color:#fff;
  box-shadow:0 4px 14px -6px rgba(36,51,62,.6), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn--dark:hover{
  background:var(--navy-700); transform:translateY(-2px);
  box-shadow:0 12px 26px -10px rgba(36,51,62,.7), inset 0 1px 0 rgba(255,255,255,.2);
}

.btn--cta{
  background:var(--orange); color:#fff;
  padding:17px 34px; font-size:16px;
  box-shadow:0 10px 26px -10px rgba(255,153,0,.75), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--cta:hover{
  background:var(--orange-600); transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(255,153,0,.85), inset 0 1px 0 rgba(255,255,255,.3);
}

/* ---------------------------------------------------------
   Ambient colour — gives the glass something to refract
   --------------------------------------------------------- */
.bg-orbs{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(44% 38% at 13% 4%,  rgba(255,153,0,.13),  transparent 66%),
    radial-gradient(40% 34% at 88% 2%,  rgba(74,166,255,.11), transparent 66%),
    radial-gradient(46% 40% at 52% 26%, rgba(255,176,88,.05), transparent 72%);
}

/* ---------------------------------------------------------
   Nav — liquid glass pill
   --------------------------------------------------------- */
.nav-wrap{
  position:sticky; top:0; z-index:60;
  padding:20px 24px 0;
}
.nav{
  position:relative; overflow:hidden;
  width:min(1000px,100%); margin-inline:auto;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:18px;
  padding:9px;                 /* symmetric, so the centre column is truly centred */
  border-radius:999px;

  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:blur(22px) saturate(185%);
          backdrop-filter:blur(22px) saturate(185%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 10px 30px -10px rgba(15,20,25,.20),
    0 2px  6px  -2px rgba(15,20,25,.06),
    inset 0  1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.45);

  transition:background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
  animation:navIn .85s cubic-bezier(.22,1,.36,1) both;
}

/* top-edge gloss */
.nav::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 46%,transparent 100%);
}
/* one-shot specular sweep on load */
.nav::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.7) 48%,transparent 64%);
  transform:translateX(-130%);
  animation:sheen 2.4s cubic-bezier(.4,0,.2,1) 1s both;
}

.nav--scrolled{
  background:rgba(255,255,255,.68);
  border-color:rgba(255,255,255,.75);
  box-shadow:
    0 16px 42px -14px rgba(15,20,25,.28),
    0 2px  6px  -2px rgba(15,20,25,.08),
    inset 0  1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,.5);
}

.nav__brand,.nav__links,.nav__actions,.nav__toggle{ position:relative; z-index:1; }

.nav__brand{ justify-self:start; margin-left:10px; }
/* the brand PNG is white-on-transparent — invert it to read on light glass */
.nav__brand img{
  height:23px; width:auto;
  filter:invert(1);
  opacity:.88;
  transition:transform .35s cubic-bezier(.22,1,.36,1), opacity .25s ease;
}
.nav__brand:hover img{ transform:scale(1.04); opacity:1; }

/* --- centred links with a sliding glass pill --- */
.nav__links{
  justify-self:center;
  position:relative;
  display:flex; align-items:center; gap:4px;
  list-style:none; margin:0; padding:0;
}
.nav__links a{
  display:block; position:relative; z-index:1;
  padding:9px 16px; border-radius:999px;
  font-size:14.5px; font-weight:500; color:#3B454F;
  transition:color .28s ease;
}
.nav__links a:hover{ color:var(--ink); }
/* the page you're on stays at full strength while the others sit back */
.nav__links a[aria-current="page"]{ color:var(--ink); font-weight:600; }

.nav__indicator{
  position:absolute; top:0; left:0;
  width:var(--iw,0); height:100%;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:
    0 3px 10px -3px rgba(15,20,25,.16),
    inset 0 1px 0 rgba(255,255,255,.95);
  opacity:0;
  transform:translateX(var(--ix,0));
  pointer-events:none;
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    width     .45s cubic-bezier(.22,1,.36,1),
    opacity   .28s ease;
}
.nav__links:hover .nav__indicator{ opacity:1; }

.nav__actions{ justify-self:end; display:flex; align-items:center; gap:6px; }

/* --- hamburger --- */
.nav__toggle{
  display:none; justify-self:end;
  width:42px; height:42px; padding:11px;
  background:transparent; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.nav__toggle span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* --- mobile sheet, same glass --- */
.nav__mobile{
  width:min(1000px,100%); margin:10px auto 0;
  border-radius:24px; padding:12px;
  display:flex; flex-direction:column; gap:2px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(22px) saturate(185%);
          backdrop-filter:blur(22px) saturate(185%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 18px 44px -18px rgba(15,20,25,.3),
    inset 0 1px 0 rgba(255,255,255,.95);
  animation:sheetIn .45s cubic-bezier(.22,1,.36,1) both;
}
.nav__mobile[hidden]{ display:none; }
.nav__mobile a{
  padding:13px 15px; border-radius:14px; font-weight:500;
  transition:background-color .25s ease, transform .25s ease;
}
.nav__mobile a:hover{ background:rgba(255,255,255,.7); transform:translateX(3px); }
.nav__mobile a[aria-current="page"]{ background:rgba(255,255,255,.55); font-weight:600; }
.nav__mobile .btn{ margin-top:6px; justify-content:center; }

/* --- nav motion --- */
@keyframes navIn{
  from{ opacity:0; transform:translateY(-16px); }
  to  { opacity:1; transform:none; }
}
@keyframes sheen{ to{ transform:translateX(130%); } }
@keyframes sheetIn{
  from{ opacity:0; transform:translateY(-10px) scale(.98); }
  to  { opacity:1; transform:none; }
}
@keyframes itemIn{
  from{ opacity:0; transform:translateY(-9px); }
  to  { opacity:1; transform:none; }
}
.nav__brand      { animation:itemIn .55s cubic-bezier(.22,1,.36,1) .22s both; }
.nav__links li   { animation:itemIn .55s cubic-bezier(.22,1,.36,1) both; }
.nav__links li:nth-child(2){ animation-delay:.30s; }
.nav__links li:nth-child(3){ animation-delay:.37s; }
.nav__links li:nth-child(4){ animation-delay:.44s; }
.nav__actions    { animation:itemIn .55s cubic-bezier(.22,1,.36,1) .5s both; }

/* graceful fallback where backdrop-filter is unsupported */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nav,.nav__mobile{ background:rgba(255,255,255,.93); }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  position:relative; z-index:1;
  padding:30px 0 52px;
  text-align:center;
  overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:-200px 0 auto;
  height:820px;
  background:radial-gradient(58% 52% at 50% 42%, rgba(255,153,0,.07), transparent 70%);
  pointer-events:none;
}

/* --- constellation stage --- */
.stage-wrap{
  height:var(--stage-h);
  display:flex; justify-content:center;
  position:relative; z-index:1;
}
/* 1180x300 is the authoring canvas: tile --x/--y and the SVG viewBox share it
   1:1, so a line drawn to a coordinate lands exactly on the tile at it. */
.stage{
  position:relative;
  width:1180px; height:300px;
  flex:0 0 auto;
  transform:scale(var(--stage-scale));
  transform-origin:top center;
}
.stage__lines{ position:absolute; inset:0; width:1180px; height:300px; }

.tile{
  position:absolute;
  left:var(--x); top:var(--y);
  width:var(--w,var(--size)); height:var(--h,var(--size));
  border-radius:calc(var(--size) * .22);
  display:grid; place-items:center;
  overflow:hidden;
  /* NB: no idle float — the connector lines are fixed, so any per-tile
     drift visibly detaches the branches from the icons */
  animation:tileIn .6s cubic-bezier(.34,1.56,.64,1) var(--ta,0s) backwards;
  transition:scale .3s ease, box-shadow .3s ease;
}
.tile img{ width:46%; height:auto; object-fit:contain; }
.tile:hover{ animation-play-state:paused; scale:1.06; }

.tile--white{
  background:#fff;
  border:1px solid #EEF0F3;
  box-shadow:0 20px 34px -20px rgba(15,20,25,.28);
}
.tile--white img{ width:52%; }

.tile--yellow{
  background:linear-gradient(160deg,#FFDE6B,#F6C42F);
  box-shadow:0 20px 34px -18px rgba(226,168,20,.75);
}
.tile--blue{
  background:linear-gradient(160deg,#66C8F2,#37AEE8);
  box-shadow:0 22px 36px -18px rgba(43,158,214,.75);
}
.tile--orange{
  background:linear-gradient(160deg,#FFA733,#F2820E);
  box-shadow:0 22px 36px -18px rgba(230,124,10,.75);
}
.tile--invert img{ filter:brightness(0) invert(1); }
.tile--yellow img,.tile--blue img{ width:50%; }
.tile--orange img{ width:74%; }

.tile--center{
  background:var(--navy);
  border-radius:30px;
  box-shadow:0 26px 44px -22px rgba(36,51,62,.85);
}
.tile--center img{ width:84%; }

/* tiles pop in; `backwards` fill holds the hidden state during the delay
   and releases the properties afterwards so :hover can take over */
@keyframes tileIn{
  from{ opacity:0; scale:.55; }
  to  { opacity:1; scale:1; }
}

/* --- branches drawing outward from the centre logo --- */
.ln{
  stroke-dasharray:1;      /* pathLength="1" normalises every path */
  stroke-dashoffset:0;
  animation:draw .5s ease-out backwards;
}
@keyframes draw{ from{ stroke-dashoffset:1; } }

.ln--spine{ animation-delay:.70s; animation-duration:.45s; }
.ln--fork { animation-delay:1.20s; animation-duration:.50s; }
.ln--far  { animation-delay:1.20s; animation-duration:.65s; }

.node{
  transform-box:fill-box; transform-origin:center;
  animation:nodeIn .35s cubic-bezier(.34,1.56,.64,1) 1.15s backwards;
}
@keyframes nodeIn{ from{ opacity:0; transform:scale(0); } }

/* --- hero copy --- */
.hero__copy{ position:relative; z-index:2; width:min(920px,100% - 48px); margin:44px auto 0; }

.hero h1{
  font-size:clamp(38px,5.4vw,64px);
  line-height:1.06;
  font-weight:700;
  letter-spacing:-.042em;
  max-width:900px; margin-inline:auto;
}
.hero__sub{
  margin-top:18px;
  font-size:clamp(17px,2vw,21px);
  font-weight:600;
  color:#3A444E;
  letter-spacing:-.02em;
}
.hero__lead{
  margin-top:12px;
  font-size:clamp(15px,1.6vw,16.5px);
  line-height:1.6;
  color:var(--muted);
  max-width:660px; margin-inline:auto;
}
.hero .btn--cta{ margin-top:28px; }

/* ---------------------------------------------------------
   Impact — grey panel, eyebrow rail, stat cards
   --------------------------------------------------------- */
/* Every metric below is expressed in vw so the panel holds the reference
   proportions at any width, with clamps to stop it collapsing or ballooning.
   The vw factors are calibrated against a 1728px-wide viewport. */
.impact{
  position:relative; z-index:1;
  padding:clamp(12px,1.4vw,28px);
}

.impact__panel{
  overflow:hidden;      /* cards slide in from off the panel's right edge */
  background:#ECEEF0;   /* cool-neutral, same family as --line */
  border-radius:clamp(20px,1.85vw,36px);
  padding:clamp(40px,4.2vw,80px) clamp(24px,3.8vw,72px) clamp(32px,3vw,58px);
  /* the eyebrow sits on its own rail; the title and the cards share the
     second column, so their left edges line up exactly */
  display:grid;
  grid-template-columns:clamp(200px,20.7vw,400px) minmax(0,1fr);
  align-items:start;
  text-align:left;
}

.impact__eyebrow{
  font-size:clamp(14px,1vw,18px); font-weight:500; letter-spacing:-.01em;
  padding-top:.75em;  /* optical: drops it onto the title's first-line cap */
}

.impact__title{
  position:relative;   /* the caret is positioned against this box */
  margin:0;
  max-width:1065px;
  font-size:clamp(34px,4.5vw,84px);
  line-height:1.09;
  font-weight:500;
  letter-spacing:-.035em;
}
/* the accent word carries the hero's Amazon-orange ramp */
.impact__grad{
  background:linear-gradient(90deg,#FFC061 0%,#FF9900 46%,#E07C0A 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.impact__dim{ color:var(--muted); }

.impact__blurb{
  margin:clamp(20px,1.9vw,34px) 0 0;
  max-width:66ch;   /* the column runs ~990px — far too long a measure unaided */
  font-size:clamp(15px,1.15vw,21px);
  line-height:1.6; letter-spacing:-.012em;
  color:var(--muted);
}

/* --- headline types itself in ---
   NB: the characters are hidden with `visibility`, never `opacity` — under
   background-clip:text a transparent glyph still contributes to the clip, so
   opacity:0 leaves the gradient letters fully painted. */
.impact__title.is-typing .ch{ visibility:hidden; }

.impact__caret{
  position:absolute; top:0; left:0;
  width:.055em; border-radius:1px;
  background:var(--orange);
  opacity:0;
  transition:opacity .35s ease;
}
.impact__caret.is-on{ opacity:1; animation:caretBlink 1s steps(1,end) infinite; }
@keyframes caretBlink{ 50%{ opacity:0; } }

/* --- stat cards --- */
.stats{
  list-style:none; padding:0;
  /* tighter than before: the blurb now occupies the run-up to the cards */
  margin:clamp(44px,4.8vw,90px) 0 0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.4vw,28px);
}
.stat{
  background:#fff;
  border-radius:clamp(14px,1.15vw,22px);
  padding:clamp(24px,2.6vw,50px);
  min-height:clamp(280px,24.5vw,470px);
  /* number pinned to the top, footer to the bottom — so card 1's label rides
     up to make room for its button, exactly as in the reference */
  display:flex; flex-direction:column; justify-content:space-between; gap:24px;
}
/* number and its metric name travel together at the top of the card; the
   sentence is the card's only other child, so space-between drops it to the
   bottom on its own */
.stat__head{ display:grid; }
.stat__num{
  font-size:clamp(40px,4.8vw,88px);
  font-weight:700; line-height:1; letter-spacing:-.045em;
}
.stat__name{
  margin-top:clamp(8px,.75vw,15px);
  font-size:clamp(15px,1.15vw,21px);
  font-weight:600; line-height:1.3; letter-spacing:-.02em;
}
.stat__num sup{
  font-size:.46em; font-weight:700;
  vertical-align:top; line-height:1.15; letter-spacing:-.02em;
}
.stat__label{
  font-size:clamp(15px,1.08vw,20px); line-height:1.5; letter-spacing:-.012em;
  color:var(--muted);   /* steps back so the metric name reads as the heading */
}
.stat__more{
  display:inline-flex; align-items:center;
  margin-top:1.3em;
  padding:.75em 1.85em; border-radius:999px;
  background:#ECEEF0;
  font-size:clamp(14px,.93vw,17px); font-weight:500; letter-spacing:-.01em;
  transition:background-color .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.stat__more:hover{ background:#E0E4E8; transform:translateY(-1px); }

/* --- cards deal in from the right, one after another ---
   `is-armed` is added by JS, so with scripting off the cards are simply
   there. `both` is required: the keyframes must own the end state, or the
   card would land back on the armed opacity:0. */
.stats.is-armed .stat{ opacity:0; }
.stats.is-in .stat{ animation:statIn .7s cubic-bezier(.22,1,.36,1) both; }
.stats.is-in .stat:nth-child(2){ animation-delay:.13s; }
.stats.is-in .stat:nth-child(3){ animation-delay:.26s; }

@keyframes statIn{
  from{ opacity:0; transform:translateX(58px); }
  to  { opacity:1; transform:none; }
}

/* ---------------------------------------------------------
   Clients — continuous right-to-left logo marquee
   --------------------------------------------------------- */
.clients{
  position:relative; z-index:1;
  background:#F4F6FB;
  padding:clamp(34px,4vw,64px) 0;
  overflow:hidden;
}

.marquee{
  overflow:hidden;
  /* logos dissolve into the panel at both ends rather than being cut off */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee + .marquee{ margin-top:clamp(24px,2.8vw,50px); }

.marquee__track{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center;
  width:max-content;
  gap:clamp(38px,4.4vw,78px);
  /* --shift is one authored set's width and --dur its travel time; both are
     measured and set by script.js, so every row moves at the same speed
     regardless of how many logos it holds */
  animation:marquee var(--dur,40s) linear infinite;
  will-change:transform;
}
@keyframes marquee{ to{ transform:translateX(calc(-1 * var(--shift,0px))); } }

.marquee:hover .marquee__track{ animation-play-state:paused; }

.logo{
  flex:0 0 auto;
  /* a fixed slot per logo — the artwork ranges from 1:1 to 5:1, so without one
     the square marks and the wordmarks cannot share a row */
  width:clamp(122px,13vw,190px);
  height:clamp(46px,4.7vw,70px);
}
.logo img{
  /* the box is the slot and object-fit scales the artwork inside it. Sizing by
     max-height instead lets tall marks outgrow the row and get clipped. */
  width:100%; height:100%;
  object-fit:contain;
  filter:grayscale(1); opacity:.58;
  transition:filter .3s ease, opacity .3s ease;
}
.logo:hover img{ filter:none; opacity:1; }

/* single row on an orange band — service pages.
   Tinted rather than full-strength orange on purpose: at #FF9900 the logos
   have to become one flat tone to stay legible, and that turns the filled
   badges (Green Orange, Skipper's) into featureless discs. Left in natural
   colour, Green Orange's orange circle would disappear into the background
   entirely. A tint keeps all nine marks readable as drawn. */
.clients--orange{ background:#FFE6C6; }
.clients--orange .logo img{ opacity:.72; }

@media (prefers-reduced-motion:reduce){
  /* nothing scrolls, so let the rows wrap into a static centred block */
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee__track{ width:auto; flex-wrap:wrap; justify-content:center; }
}

/* ---------------------------------------------------------
   Edge — copy + perk grid beside the product shot
   --------------------------------------------------------- */
.edge{
  position:relative; z-index:1;
  padding:clamp(56px,7vw,110px) 0;
}
.edge__inner{
  width:min(1280px,100% - 48px); margin-inline:auto;
  display:grid; grid-template-columns:1.12fr 1fr;
  gap:clamp(40px,6vw,105px);
  align-items:center;
  text-align:left;
}

.edge__title{
  margin:0;
  font-size:clamp(30px,3.4vw,50px);
  line-height:1.15; font-weight:500; letter-spacing:-.03em;
}
/* the highlighter behind the first phrase; `clone` keeps the swatch intact
   should the phrase ever wrap across two lines */
.mark{
  background:#FFC166;
  padding:.06em .14em;
  border-radius:4px;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

.edge__rule{
  border:0; border-top:1px solid var(--line);
  margin:clamp(30px,3.4vw,52px) 0 clamp(28px,3.2vw,48px);
}

.perks{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4vw,72px);
  row-gap:clamp(26px,3vw,42px);
}
/* icon in its own column so the description lines up under the heading text
   rather than under the icon */
.perk{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(9px,.85vw,13px);
  row-gap:clamp(5px,.45vw,8px);
}
/* a plain orange dot, matched to the same recipe as .edge__list's bullets so
   the two list styles read as one language */
.perk__icon{
  grid-column:1; grid-row:1;
  align-self:center;
  width:9px; height:9px;
  border-radius:3px;
  background:var(--orange);
}

.perk__head{
  grid-column:2; grid-row:1; margin:0;
  font-size:clamp(13px,.95vw,15px);
  font-weight:700; line-height:1.3;
  text-transform:uppercase; letter-spacing:.035em;
}
.perk__text{
  grid-column:2; grid-row:2;
  font-size:clamp(14.5px,1.05vw,16.5px);
  line-height:1.5; letter-spacing:-.01em;
  color:#39434D;
}

.edge__media{
  border-radius:clamp(16px,1.6vw,26px);
  overflow:hidden;
  background:#E9EDFB;
  aspect-ratio:4/3;
}
.edge__media img{ width:100%; height:100%; object-fit:cover; }

/* ---------------------------------------------------------
   Services — navy band, numbered index, sticky detail panel
   --------------------------------------------------------- */
.svc{
  position:relative; z-index:1;
  padding:clamp(12px,1.4vw,28px);
}
/* same off-white tile as the impact panel */
.svc__inner{
  background:#ECEEF0;
  border-radius:clamp(20px,1.85vw,36px);
  padding:clamp(44px,4.6vw,86px) clamp(24px,3.8vw,72px);
  text-align:left;
}

.svc__label{
  margin-bottom:clamp(22px,2.6vw,40px);
  color:var(--orange);
  font-size:clamp(12px,.95vw,15px); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
}

.svc__list{ display:grid; }

/* --- desktop split: rows right, one panel left --- */
.svc.is-tabs .svc__list{
  grid-template-columns:1fr 1fr;
  column-gap:clamp(40px,6vw,110px);
  align-items:start;
}
/* the item dissolves so its two children can land in different columns */
.svc.is-tabs .svc__item{ display:contents; }
/* each row is a scroll step: it has to be tall enough that the panel beside it
   can finish arriving and be read before the next row takes over */
.svc.is-tabs .svc__row{
  grid-column:2;
  min-height:clamp(380px,72vh,820px);
}
.svc.is-tabs .svc__panel{
  grid-column:1; grid-row:1 / span 3;   /* every panel shares the left area */
  position:sticky; top:100px;
  align-self:start;
  display:none;
}
.svc.is-tabs .svc__panel.is-open{
  display:block;
  animation:svcIn .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes svcIn{ from{ opacity:0; transform:translateY(10px); } }

/* --- index rows --- */
.svc__row{
  appearance:none; -webkit-appearance:none;
  background:none; border:0; cursor:pointer;
  width:100%; font:inherit; color:inherit; text-align:left;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center; gap:clamp(14px,2vw,30px);
  padding:clamp(22px,2.6vw,40px) 0;
  border-top:1px solid rgba(15,20,25,.14);
}
.svc__item:last-child .svc__row{ border-bottom:1px solid rgba(15,20,25,.14); }

.svc__name{
  font-size:clamp(12.5px,1.05vw,16px); font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:rgba(15,20,25,.38);
  transition:color .3s ease;
}
.svc__num{
  font-size:clamp(80px,17vw,250px);
  font-weight:700; line-height:.82; letter-spacing:-.045em;
  color:rgba(15,20,25,.12);
  transition:color .35s ease;
}
/* with no JS nothing is selectable, so nothing should look de-selected */
.svc:not(.is-tabs) .svc__name{ color:var(--ink); }
.svc:not(.is-tabs) .svc__num{ color:rgba(15,20,25,.3); }

.svc__row:hover .svc__name,
.svc__row:focus-visible .svc__name{ color:rgba(15,20,25,.62); }
.svc__row:hover .svc__num,
.svc__row:focus-visible .svc__num{ color:rgba(15,20,25,.22); }
/* selected wins over hover */
.svc__row[aria-expanded="true"] .svc__name,
.svc__row[aria-expanded="true"]:hover .svc__name{ color:var(--ink); }
.svc__row[aria-expanded="true"] .svc__num,
.svc__row[aria-expanded="true"]:hover .svc__num{ color:var(--navy); }

/* --- detail panel --- */
.svc__heading{
  margin:0;
  font-size:clamp(32px,4.4vw,64px);
  font-weight:500; line-height:1.05; letter-spacing:-.038em;
}
.svc__tag{
  margin-top:clamp(16px,1.8vw,28px);
  font-size:clamp(17px,1.5vw,23px); font-weight:600;
  line-height:1.35; letter-spacing:-.02em;
}
.svc__body{
  margin-top:clamp(10px,1.1vw,18px);
  font-size:clamp(14.5px,1.05vw,16.5px);
  line-height:1.7; letter-spacing:-.005em;
  color:#39434D;
  max-width:52ch;
}
.svc__includes{
  list-style:none; padding:0;
  margin:clamp(20px,2.2vw,34px) 0 0;
  display:grid; gap:clamp(8px,.8vw,12px);
}
.svc__includes li{
  position:relative; padding-left:22px;
  font-size:clamp(14.5px,1.02vw,16px); line-height:1.45;
  color:var(--ink);
}
.svc__includes li::before{
  content:''; position:absolute; left:0; top:.5em;
  width:6px; height:6px; border-radius:50%;
  background:var(--orange);
}

.svc__cta{
  margin-top:clamp(26px,2.8vw,42px);
  width:min(100%,340px);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:14px 14px 14px 20px; border-radius:10px;
  background:var(--orange); color:#fff;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  transition:background-color .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.svc__cta:hover{ background:var(--orange-600); transform:translateY(-2px); }
.svc__cta-arrow{
  flex:0 0 auto;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--orange);
}
.svc__cta-arrow svg{ width:12px; height:12px; }

/* ---------------------------------------------------------
   Process — six numbered nodes threaded on a hairline
   --------------------------------------------------------- */
.proc{
  position:relative; z-index:1;
  padding:clamp(60px,7.4vw,116px) 0;
  overflow:hidden;
}
/* the same warm wash that sits behind the hero, tying the two ends of the
   page together without another panel */
.proc::before{
  content:''; position:absolute; inset:0 0 auto; height:560px;
  background:radial-gradient(52% 60% at 50% 0%, rgba(255,153,0,.07), transparent 70%);
  pointer-events:none;
}
.proc__inner{
  position:relative;
  width:min(1240px,100% - 48px); margin-inline:auto;
}

/* centred header — the neighbouring sections are all left-aligned */
.proc__head{ text-align:center; max-width:760px; margin-inline:auto; }
.proc__eyebrow{
  color:var(--orange);
  font-size:clamp(12px,.95vw,14px); font-weight:600;
  letter-spacing:.15em; text-transform:uppercase;
}
.proc__title{
  margin:clamp(14px,1.5vw,22px) 0 0;
  font-size:clamp(30px,3.8vw,56px);
  line-height:1.1; font-weight:500; letter-spacing:-.035em;
}
.proc__lead{
  margin-top:clamp(12px,1.3vw,20px);
  font-size:clamp(15px,1.1vw,17.5px); line-height:1.65;
  color:var(--muted);
}

.steps{
  --col-gap:clamp(28px,3.4vw,60px);
  list-style:none; padding:0;
  margin:clamp(46px,5.2vw,86px) 0 0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--col-gap);
  row-gap:clamp(42px,4.4vw,72px);
}

.step{ position:relative; --mk:clamp(40px,3.4vw,50px); }
/* the thread. It runs past the step's own edge and into the gutter, where the
   next marker's opaque fill stops it — so the join needs no extra element. */
.step::after{
  content:''; position:absolute;
  top:calc(var(--mk) / 2);
  left:calc(var(--mk) + 16px);
  right:calc(-1 * var(--col-gap));
  height:1px; background:var(--line);
}
.step:nth-child(3n)::after{ display:none; }   /* end of a row leads nowhere */

.step__mk{
  position:relative; z-index:1;
  width:var(--mk); height:var(--mk);
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg);
  font-size:clamp(12.5px,1vw,15px); font-weight:700;
  letter-spacing:.02em; color:var(--orange);
  transition:background-color .3s ease, border-color .3s ease,
             color .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.step:hover .step__mk{
  background:var(--orange); border-color:var(--orange); color:#fff;
  transform:translateY(-3px);
}

.step__title{
  margin:clamp(20px,2vw,30px) 0 0;
  font-size:clamp(18px,1.5vw,23px);
  font-weight:700; line-height:1.25; letter-spacing:-.025em;
}
.step__text{
  margin-top:clamp(8px,.9vw,14px);
  font-size:clamp(14.5px,1.05vw,16.5px);
  line-height:1.6; letter-spacing:-.008em;
  color:#39434D;
}

.proc__cta{ display:flex; justify-content:center; margin-top:clamp(44px,4.8vw,80px); }

/* staggered reveal, armed by JS so the steps are never hidden without it */
.steps.is-armed .step{ opacity:0; }
.steps.is-in .step{ animation:stepIn .65s cubic-bezier(.22,1,.36,1) both; }
.steps.is-in .step:nth-child(2){ animation-delay:.08s; }
.steps.is-in .step:nth-child(3){ animation-delay:.16s; }
.steps.is-in .step:nth-child(4){ animation-delay:.24s; }
.steps.is-in .step:nth-child(5){ animation-delay:.32s; }
.steps.is-in .step:nth-child(6){ animation-delay:.40s; }
@keyframes stepIn{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:none; }
}

/* ---------------------------------------------------------
   Service directory — orange and black on the off-white tile
   --------------------------------------------------------- */
.dir{
  position:relative; z-index:1;
  padding:clamp(12px,1.4vw,28px);
}
.dir__inner{
  background:#ECEEF0;
  border-radius:clamp(20px,1.85vw,36px);
  padding:clamp(40px,4.4vw,80px) clamp(24px,3.8vw,72px) clamp(44px,4.6vw,84px);
  text-align:left;
}

.dir__top{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-bottom:clamp(26px,3vw,46px);
  border-bottom:1px solid rgba(15,20,25,.13);
  margin-bottom:clamp(34px,4vw,64px);
}
.dir__title{
  margin:0;
  font-size:clamp(27px,3.4vw,50px);
  font-weight:500; line-height:1.1; letter-spacing:-.035em;
}
.dir__cta{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:999px;
  background:var(--ink); color:#fff;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  transition:background-color .25s ease, transform .3s cubic-bezier(.22,1,.36,1),
             box-shadow .3s ease;
}
.dir__cta svg{ width:12px; height:12px; }
.dir__cta:hover{
  background:var(--navy-700); transform:translateY(-2px);
  box-shadow:0 14px 28px -14px rgba(15,20,25,.6);
}

.dir__cols{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(26px,2.6vw,48px);
  row-gap:clamp(40px,4.2vw,64px);
}

/* orange carries the structure here rather than only appearing on hover */
.dir__rule{
  display:block; width:32px; height:3px; border-radius:2px;
  background:var(--orange);
  margin-bottom:clamp(14px,1.4vw,22px);
}
.dir__ch{
  margin:0;
  font-size:clamp(20px,1.9vw,30px);
  font-weight:700; line-height:1.2; letter-spacing:-.03em;
}
.dir__sub{
  margin-top:clamp(6px,.6vw,10px);
  font-size:clamp(13.5px,1vw,15.5px); line-height:1.45;
  color:var(--muted);
}
.dir__list{
  list-style:none; padding:0;
  margin:clamp(18px,1.9vw,30px) 0 0;
  display:grid; gap:clamp(10px,1vw,15px);
}
.dir__list li{
  position:relative; padding-left:20px;
  font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.45;
  color:#39434D;
}
.dir__list li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:9px; height:2px; border-radius:1px;
  background:var(--orange);
}

/* ---------------------------------------------------------
   Footer — orange aurora tile
   --------------------------------------------------------- */
.fx{ position:relative; z-index:1; }
/* full bleed — no tile margin or radius, the band runs to all four edges */
.fx__inner{
  position:relative; isolation:isolate;
  overflow:hidden;
  padding:clamp(48px,5.4vw,100px) clamp(26px,4vw,84px) clamp(30px,2.8vw,48px);
  color:#fff;

  /* Soft mesh, painted top layer first. The composition is tuned to the text:
     the vivid blooms occupy the upper right, which carries no copy, while a
     dark floor covers the lower half where the contact block, nav and
     copyright sit. The heading gets a burnt orange rather than a bright one —
     white on #FF9900 is about 2:1 and unreadable. */
  background-color:#3A1C06;
  background-image:
    radial-gradient(72% 60% at 46% 100%, rgba(20,10,2,.86) 0%, rgba(20,10,2,.54) 44%, transparent 76%),
    radial-gradient(40% 44% at 4% 108%,  rgba(255,146,26,.46),  transparent 64%),
    radial-gradient(46% 48% at 90% 3%,   rgba(255,231,190,.95), transparent 62%),
    radial-gradient(60% 66% at 68% 20%,  rgba(255,158,28,.94),  transparent 64%),
    radial-gradient(66% 76% at 0% 0%,    rgba(206,96,10,.98),   transparent 62%),
    radial-gradient(54% 54% at 100% 70%, rgba(255,150,26,.62),  transparent 64%);
}
/* contrast floor for the lower half, where every small text element lives */
.fx__inner::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, transparent 0%, transparent 36%, rgba(12,6,1,.32) 100%);
  pointer-events:none;
}

.fx__title{
  margin:0;
  font-size:clamp(30px,4.4vw,64px);
  line-height:1.08; font-weight:500; letter-spacing:-.035em;
}
.fx__btn{
  display:inline-flex; align-items:center;
  margin-top:clamp(24px,2.8vw,44px);
  padding:15px 30px; border-radius:999px;
  background:#fff; color:var(--ink);
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.fx__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.7);
}

.fx__body{
  margin-top:clamp(44px,5.6vw,104px);
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(34px,4vw,70px);
  align-items:start;
}

.fx__contact{ font-style:normal; display:grid; gap:clamp(10px,1vw,15px); }
.fx__line{
  font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.55;
  color:rgba(255,255,255,.78);
}
.fx__line a{ transition:color .25s ease; }
.fx__line a:hover{ color:#fff; }

.fx__nav{
  display:grid; grid-template-columns:repeat(3,auto);
  gap:clamp(32px,4.4vw,88px);
}
.fx__ch{
  margin:0 0 clamp(14px,1.4vw,22px);
  font-size:clamp(15px,1.1vw,17px); font-weight:700; letter-spacing:-.015em;
}
.fx__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(9px,.9vw,14px); }
.fx__col a{
  display:inline-block;
  font-size:clamp(14px,1.02vw,16px);
  color:rgba(255,255,255,.72);
  transition:color .25s ease, transform .25s ease;
}
.fx__col a:hover{ color:#fff; transform:translateX(3px); }

/* three tracks so the copyright stays optically centred on the page rather
   than centred in the space left over beside the credit */
.fx__bottom{
  margin-top:clamp(38px,4.4vw,80px);
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:10px 16px;
}
.fx__made{
  grid-column:3; justify-self:end;
  font-size:13.5px; color:rgba(255,255,255,.55);
}
.fx__copy{
  grid-column:2;
  text-align:center;
  font-size:13.5px; color:rgba(255,255,255,.6);
}
.fx__legal{
  grid-column:1; justify-self:start;
  font-size:13.5px; color:rgba(255,255,255,.6);
  transition:color .25s ease;
}
.fx__legal:hover{ color:#fff; }

/* ---------------------------------------------------------
   Page banner — service pages
   --------------------------------------------------------- */
.pbanner{
  position:relative; z-index:1;
  padding:clamp(52px,7vw,116px) 0 clamp(58px,7.6vw,126px);
  text-align:left;
  overflow:hidden;
}
/* barely-there orange wash on white — enough to warm the page without
   reading as a coloured band. Sits off-centre to follow the copy. */
.pbanner::before{
  content:''; position:absolute; inset:-180px 0 auto; height:760px;
  background:radial-gradient(56% 60% at 38% 36%, rgba(255,153,0,.08), transparent 72%);
  pointer-events:none;
}
/* orange glow that follows the cursor. Position comes from --gx/--gy, set by
   script.js on mousemove; the section clips it, so it never spills out. */
.pbanner::after{
  content:''; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  opacity:0; transition:opacity .6s ease;
  /* many stops, long tail — two stops give a visible ring where the falloff
     ends, which reads as a hard edge rather than a glow */
  background:radial-gradient(circle min(46vw,540px) at var(--gx,50%) var(--gy,50%),
    rgba(255,153,0,.22) 0%,
    rgba(255,153,0,.165) 20%,
    rgba(255,153,0,.105) 38%,
    rgba(255,153,0,.055) 55%,
    rgba(255,153,0,.02) 72%,
    transparent 86%);
}
.pbanner.is-glow::after{ opacity:1; }

/* wider than the text needs — the copy should start at the page's own margin,
   not at the edge of a narrow centred column */
.pbanner__inner{
  position:relative; z-index:1;
  width:min(1240px,100% - 48px); margin-inline:auto;
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(30px,4vw,72px);
  align-items:center;
}
.pbanner__title{
  margin:0;
  font-size:clamp(34px,4.6vw,58px);
  line-height:1.07; font-weight:700; letter-spacing:-.042em;
}
.pbanner__lead{
  margin-top:clamp(14px,1.6vw,22px);
  max-width:46ch;
  font-size:clamp(15px,1.15vw,18px); line-height:1.6;
  color:rgba(15,20,25,.68);
}
.pbanner .btn--cta{ margin-top:clamp(26px,3vw,42px); }
/* a little tighter when a lead sits between: the gap after a paragraph reads
   larger than the same gap after a headline. Full Service has no lead, so its
   button keeps the rule above. */
.pbanner__lead + .btn--cta{ margin-top:clamp(22px,2.5vw,34px); }

/* --- artwork --- */
/* the phone is cropped at the bottom of its own PNG, so it is dropped to the
   section's edge and bled through the padding: the cut then reads as the phone
   running off the section rather than as a hard line floating in white space.
   The negative margin has to match .pbanner's padding-bottom. */
.pbanner__media{
  position:relative;
  align-self:end;
  margin-bottom:calc(-1 * clamp(58px,7.6vw,126px));
}
.pbanner__shot{ width:100%; height:auto; }

/* rises into place on load; `both` holds the from-state through the delay */
.pbanner__shot{
  animation:riseIn .9s cubic-bezier(.22,1,.36,1) both;
  animation-delay:.12s;
}

@keyframes riseIn{
  from{ opacity:0; transform:translateY(52px); }
  to  { opacity:1; transform:none; }
}

/* ---------------------------------------------------------
   Scroll reveal — a headline or image slides in from its own
   side as it enters the viewport. Generic: any element can
   carry .reveal plus a --left/--right modifier. JS (script.js)
   adds .is-armed up front and .is-in once it has crossed the
   threshold; under prefers-reduced-motion JS skips .is-armed
   entirely so nothing ever hides.
   --------------------------------------------------------- */
.reveal.is-armed{ opacity:0; }
.reveal--left.is-in { animation:revealInLeft  .8s cubic-bezier(.22,1,.36,1) both; }
.reveal--right.is-in{ animation:revealInRight .8s cubic-bezier(.22,1,.36,1) both; }

@keyframes revealInLeft { from{ opacity:0; transform:translateX(-56px); } to{ opacity:1; transform:none; } }
@keyframes revealInRight{ from{ opacity:0; transform:translateX(56px);  } to{ opacity:1; transform:none; } }

/* --- ads management: a staggered pair of accreditation badges — same
   size, one sitting up at top-left, the other dropped to overlap its
   bottom-right corner. Fixed box + `contain` rather than the old
   visible-width maths, since there's no longer a third logo image to
   keep the pair centred around. */
.acluster{
  position:relative;
  width:clamp(230px,24vw,330px);
  height:clamp(190px,19vw,268px);
  margin-inline:auto;
}
.acluster__badge{
  position:absolute;
  width:clamp(150px,15vw,210px);
  height:clamp(105px,10.5vw,146px);
  object-fit:contain;
  /* traces the alpha shape, so the white cards read as floating on a light page */
  filter:drop-shadow(0 20px 38px rgba(15,20,25,.18));
  animation:riseIn .9s cubic-bezier(.22,1,.36,1) both;
}
.acluster__badge--l{ top:0; left:0; animation-delay:.12s; }
.acluster__badge--r{ bottom:0; right:0; animation-delay:.3s; }

/* --- consultancy: a single centred app icon, no badges around it.
   Same 16:9-canvas-to-square crop as .acluster__logo, isolating the icon
   from the clear space either side of it. --- */
.pbanner__icon{
  display:block;
  width:min(62%,320px);
  margin-inline:auto;
  aspect-ratio:1; object-fit:cover;
  filter:drop-shadow(0 26px 46px rgba(15,20,25,.22));
  /* entrance animation comes from .reveal--right, so it slides in with
     everything else instead of always firing on load */
}

/* ---------------------------------------------------------
   Frosted card — shared by the contact detail cards and the
   full-service includes grid
   --------------------------------------------------------- */
/* One rule for both so the two grids can't drift apart. Each component keeps
   its own size, radius and padding below; only the surface lives here.
   A warm hairline, not a white one: both grids run out over a wash that reaches
   white, where a white border has nothing to contrast against and the card
   simply disappears. The warm drop shadow is what separates those. */
.ccard,
.inc-card{
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(165%);
          backdrop-filter:blur(18px) saturate(165%);
  border:1px solid rgba(190,116,22,.17);
  box-shadow:
    0 18px 40px -22px rgba(150,90,20,.34),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .35s cubic-bezier(.22,1,.36,1),
             box-shadow .35s ease, background-color .35s ease,
             border-color .35s ease;
}
.ccard:hover,
.inc-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.74);
  border-color:rgba(190,116,22,.26);
  box-shadow:
    0 28px 54px -24px rgba(150,90,20,.42),
    inset 0 1px 0 rgba(255,255,255,.96);
}

/* ---------------------------------------------------------
   What's included — frosted cards on a warm wash
   --------------------------------------------------------- */
.inc{
  position:relative; z-index:1;
  padding:clamp(54px,6.6vw,108px) 0;
}
/* the same wash as the contact page, so the shared card surface reads the same
   way here: orange down the left, out to white on the right */
.inc::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    /* out to white at the foot, meeting the timeline section below */
    linear-gradient(180deg, transparent calc(100% - 150px), #FFFFFF 100%),
    /* in from the .clients--orange strip above, so the two bands meet with no
       seam. Faded to a transparent *cream* rather than `transparent`, which
       some engines interpolate through transparent-black and grey out. */
    linear-gradient(180deg, #FFE6C6 0%, rgba(255,230,198,0) 200px),
    radial-gradient(820px 660px at -4% -40px, rgba(255,138,0,.38), transparent 66%),
    linear-gradient(96deg,
      #FFA231 0%,
      #FFBB5F 14%,
      #FFD495 30%,
      #FFE8C6 47%,
      #FFF5E6 64%,
      #FFFCF7 80%,
      #FFFFFF 92%);
}
.inc__inner{ width:min(1240px,100% - 48px); margin-inline:auto; text-align:left; }

.inc__head{ max-width:640px; margin-bottom:clamp(32px,3.8vw,58px); }
.inc__title{
  margin:0;
  font-size:clamp(28px,3.4vw,48px);
  line-height:1.12; font-weight:500; letter-spacing:-.035em;
}
.inc__lead{
  margin-top:clamp(12px,1.3vw,20px);
  font-size:clamp(15px,1.1vw,17.5px); line-height:1.6;
  color:rgba(15,20,25,.68);
}

.inc__grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,1.8vw,28px);
}

/* surface comes from the shared .ccard/.inc-card rule above */
.inc-card{
  color:var(--ink);
  border-radius:clamp(16px,1.6vw,26px);
  padding:clamp(26px,2.8vw,44px);
}

/* the card no longer inverts on hover, so the plate has nothing to swap to —
   it just stays the orange chip that carries the icon */
.inc-card__icon{
  display:grid; place-items:center;
  width:clamp(44px,3.8vw,58px); height:clamp(44px,3.8vw,58px);
  border-radius:14px;
  background:var(--orange);
}
.inc-card__icon img{ width:52%; filter:brightness(0) invert(1); }

.inc-card__title{
  margin:clamp(20px,2.2vw,32px) 0 0;
  font-size:clamp(18px,1.55vw,24px);
  font-weight:700; line-height:1.25; letter-spacing:-.025em;
}
.inc-card__text{
  margin-top:clamp(10px,1vw,16px);
  font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.6;
  color:rgba(15,20,25,.68);
}

/* ---------------------------------------------------------
   Detail timeline — alternating sides on a scroll-filled spine
   --------------------------------------------------------- */
.tl{
  position:relative; z-index:1;
  background:#F7F8FA;
  padding:clamp(54px,6.6vw,108px) 0 clamp(60px,7.4vw,120px);
}
.tl__inner{ width:min(1180px,100% - 48px); margin-inline:auto; text-align:left; }

.tl__head{ max-width:640px; margin-bottom:clamp(38px,4.6vw,74px); }
.tl__title{
  margin:0;
  font-size:clamp(26px,3.2vw,44px);
  line-height:1.12; font-weight:500; letter-spacing:-.035em;
}
.tl__lead{
  margin-top:clamp(12px,1.3vw,20px);
  font-size:clamp(15px,1.1vw,17.5px); line-height:1.6;
  color:var(--muted);
}

.tl__track{ position:relative; }

/* the spine sits behind the nodes and runs the full height of the list */
.tl__line{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; margin-left:-1px;
  background:var(--line);
  border-radius:2px;
}
.tl__fill{
  position:absolute; left:0; right:0; top:0;
  height:0;                     /* script.js drives this from scroll position */
  background:linear-gradient(180deg,var(--orange),#E8890A);
  border-radius:2px;
}

.tl__items{ list-style:none; margin:0; padding:0; }
.tl-item{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(48px,6vw,110px);
}
.tl-item + .tl-item{ margin-top:clamp(44px,5.4vw,92px); }

/* alternate which column the copy lands in, and which edge it hugs */
.tl-item:nth-child(odd) .tl-item__body { grid-column:1; text-align:right; }
.tl-item:nth-child(even) .tl-item__body{ grid-column:2; text-align:left; }

.tl-item__node{
  position:absolute; left:50%; top:6px;
  width:15px; height:15px; margin-left:-7.5px;
  border-radius:50%;
  background:#fff; border:2px solid var(--line);
  transition:background-color .4s ease, border-color .4s ease;
}
/* lit once the fill has climbed past it */
.tl-item.is-lit .tl-item__node{ background:var(--orange); border-color:var(--orange); }

.tl-item__num{
  font-size:clamp(12px,.95vw,14px); font-weight:700;
  letter-spacing:.14em; color:var(--orange);
}
.tl-item__title{
  margin:clamp(8px,.9vw,14px) 0 0;
  font-size:clamp(19px,1.75vw,27px);
  font-weight:700; line-height:1.24; letter-spacing:-.028em;
}
.tl-item__text{
  margin-top:clamp(10px,1vw,16px);
  font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.65;
  color:#39434D;
}

/* --- reveal: armed by JS so the copy is never hidden without it --- */
.tl__items.is-armed .tl-item__body{ opacity:0; }
.tl__items.is-armed .tl-item__node{
  opacity:0; transform:scale(.4);
  transition:opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1),
             background-color .4s ease, border-color .4s ease;
}
.tl__items.is-armed .tl-item.is-in .tl-item__node{ opacity:1; transform:scale(1); }
.tl__items.is-armed .tl-item.is-in .tl-item__body{
  animation:tlIn .75s cubic-bezier(.22,1,.36,1) both;
}
/* each side slides in from its own edge; only the copy moves, so the node
   stays welded to the spine while it happens */
.tl__items.is-armed .tl-item:nth-child(odd).is-in .tl-item__body { animation-name:tlInLeft; }
.tl__items.is-armed .tl-item:nth-child(even).is-in .tl-item__body{ animation-name:tlInRight; }

@keyframes tlIn     { from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes tlInLeft { from{ opacity:0; transform:translateX(-38px); } to{ opacity:1; transform:none; } }
@keyframes tlInRight{ from{ opacity:0; transform:translateX(38px);  } to{ opacity:1; transform:none; } }

/* ---------------------------------------------------------
   CTA banner — orange panel beside the graph
   --------------------------------------------------------- */
/* sits in a rounded tile with the same margin and radius as the other panels */
.cta2{
  position:relative; z-index:1;
  padding:clamp(12px,1.4vw,28px);
}
.cta2__inner{
  background:#fff;
  border-radius:clamp(20px,1.85vw,36px);
  overflow:hidden;               /* clips the orange panel to the rounded corners */
  display:grid; grid-template-columns:1.45fr 1fr;
  align-items:stretch;
}

.cta2__panel{
  background:linear-gradient(150deg,#E0790A 0%,#F2960F 42%,#F7B463 100%);
  display:flex; align-items:center;
  padding:clamp(46px,6vw,110px) clamp(24px,4vw,80px);
}
.cta2__copy{ max-width:640px; margin-left:auto; }

.cta2__title{
  margin:0;
  font-size:clamp(28px,4.1vw,60px);
  line-height:1.04; font-weight:500; letter-spacing:-.028em;
  text-transform:uppercase;
  color:#fff;
}
.cta2__dark{ color:var(--ink); }

.cta2__lead{
  margin-top:clamp(16px,1.8vw,28px);
  max-width:520px;
  font-size:clamp(15px,1.15vw,18.5px); line-height:1.55;
  /* ink, not white: white on this orange measures 2.3:1 and small text needs
     4.5:1. The heading above stays white — large bold text only needs 3:1 and
     it clears that. Matches .ba-panel--after, which has the same problem. */
  color:rgba(15,20,25,.85);
}

.cta2__btn{
  display:inline-flex; align-items:center;
  margin-top:clamp(24px,2.8vw,44px);
  padding:17px 34px; border-radius:999px;
  background:var(--ink); color:#fff;
  font-size:15px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  transition:background-color .25s ease, transform .3s cubic-bezier(.22,1,.36,1),
             box-shadow .3s ease;
}
.cta2__btn:hover{
  background:#000; transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(0,0,0,.6);
}

.cta2__media{
  background:#fff;
  display:grid; place-items:center;
  padding:clamp(26px,3vw,56px);
}
/* the PNG's backdrop is #FEFEFE, not #FFF, which shows as a faint box against
   the panel. multiply drops it out — white multiplied by white is a no-op,
   while the orange bars are unaffected. */
.cta2__media img{
  width:100%; max-width:520px; height:auto;
  mix-blend-mode:multiply;
}
/* The advertising page's shot is a dashboard screenshot: it has to be shown
   whole, so it keeps its own proportions and sits inside padding rather than
   filling the column. `height:auto` with `width:100%` means no crop at all —
   there is no cover crop to reason about.
   Two classes, to beat .cta2__media img on every property it sets. */
.cta2__media .cta2__shot{
  mix-blend-mode:normal;
  width:100%; height:auto; max-width:none;
  border-radius:clamp(8px,.9vw,14px);
  box-shadow:0 20px 40px -22px rgba(15,20,25,.4);
}
/* Scoped above the stacking breakpoint: below it .cta2__inner drops to one
   column, and this would outrank that and break the stack. */
@media (min-width:901px){
  .cta2--shot .cta2__inner{ grid-template-columns:1.3fr 1fr; }
  .cta2--shot .cta2__media{ padding:clamp(20px,2.4vw,44px); }
}

/* ---------------------------------------------------------
   Consultancy page — pricing/ops edge sections and the
   closing CTA panel
   --------------------------------------------------------- */
.ctarow{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:clamp(16px,2vw,26px);
  margin-top:clamp(22px,2.4vw,34px);
}

/* --- light-grey band: closing CTA panel --- */
/* same neutral wash as the Full Service timeline and the Ads Management
   before/after section, so the page ends on a tone already used elsewhere
   on the site rather than introducing a new one */
.compliance{
  position:relative; z-index:1;
  background:#F7F8FA;
  padding:clamp(56px,7vw,110px) 0;
}
.compliance__inner{ width:min(1240px,100% - 48px); margin-inline:auto; }

.compliance__panel{
  background:linear-gradient(150deg,#E0790A 0%,#F2960F 42%,#F7B463 100%);
  border-radius:clamp(20px,1.85vw,36px);
  padding:clamp(42px,5.2vw,80px) clamp(28px,5vw,84px);
  /* the panel no longer sits on a dark band to separate it from the page,
     so a warm shadow does that job instead */
  box-shadow:0 34px 64px -30px rgba(191,109,10,.4);
}
.compliance__copy{ max-width:640px; margin-inline:auto; text-align:center; }
.compliance__title{
  margin:0;
  font-size:clamp(28px,3.6vw,46px);
  line-height:1.12; font-weight:500; letter-spacing:-.03em;
  color:var(--ink);
}
.compliance__lead{
  margin-top:clamp(14px,1.6vw,20px);
  font-size:clamp(15px,1.1vw,17.5px); line-height:1.6;
  color:rgba(15,20,25,.82);
}
.compliance__panel .ctarow{ margin-top:clamp(24px,2.8vw,38px); justify-content:center; }
/* black rather than the site's usual navy button, to match the panel's
   black heading instead of pulling in the brand navy */
.compliance__panel .btn--dark{ background:var(--ink); }
.compliance__panel .btn--dark:hover{ background:#000; }

/* ---------------------------------------------------------
   Contact hero — warm gradient band with glass detail cards
   --------------------------------------------------------- */
.chero{
  position:relative; z-index:1;
  padding:clamp(56px,7vw,120px) 0 clamp(62px,7vw,116px);
}
/* One wash behind the whole page, not one per section: the hero and the form
   panel share a single warm field, so the glass panels read as sitting *on*
   something rather than each carrying their own backdrop.

   It starts well above the wrapper so the colour runs behind the sticky nav
   pill. The nav can't live inside the wrapper instead — sticky is scoped to its
   parent, so it would come unstuck the moment the wash scrolled past. 160px
   clears the nav at every breakpoint, and the overspill sits above the document
   where nothing ever renders it. */
.warm{ position:relative; z-index:1; }
.warm::before{
  content:''; position:absolute; z-index:-1;
  left:0; right:0; top:-160px; bottom:0;
  pointer-events:none;
  /* Painted top layer first.

     The ramp is 96deg — near-horizontal on purpose. This box is ~2x taller than
     it is wide, and the hero's original 104deg tilt spread the orange diagonally
     down the whole page, leaving both the hero pale and the form panel floating
     on white. Held horizontal, the left edge stays orange for the full height,
     so the panel sits on the wash the same way the card row above it does.

     The corner bloom is px-sized rather than a percentage, for the same reason:
     a percentage would scale with the height and bleed halfway down the page.
     The last 180px dissolve into white, so there is no edge against the footer. */
  background:
    linear-gradient(180deg, transparent calc(100% - 180px), #FFFFFF 100%),
    radial-gradient(900px 720px at -4% -60px, rgba(255,138,0,.45), transparent 66%),
    linear-gradient(96deg,
      #FFA231 0%,
      #FFBB5F 14%,
      #FFD495 30%,
      #FFE8C6 47%,
      #FFF5E6 64%,
      #FFFCF7 80%,
      #FFFFFF 92%);
}
/* wider than the site's usual 1240 column — the card row is meant to run out
   toward the page edges, and 40px gutters put five cards at ~257px each */
.chero__inner{ width:min(1480px,100% - 80px); margin-inline:auto; }

/* --- breadcrumb --- */
.crumb ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:clamp(14px,1.02vw,16px); letter-spacing:-.01em;
}
.crumb a{ font-weight:600; transition:color .25s ease; }
.crumb a:hover{ color:var(--orange-600); }
.crumb li+li::before{ content:'·'; margin-right:8px; color:rgba(15,20,25,.42); }
.crumb [aria-current]{ color:rgba(15,20,25,.55); }

/* --- headline --- */
.chero__title{
  margin:clamp(30px,4.4vw,68px) 0 0;
  font-size:clamp(38px,6.2vw,84px);
  /* lighter than the site's usual 600 headings — at 84px that weight goes
     slab-heavy and loses the airiness this band is built around */
  line-height:1.04; font-weight:500; letter-spacing:-.035em;
}
.chero__lead{
  margin-top:clamp(14px,1.7vw,24px);
  max-width:34ch;
  font-size:clamp(16px,1.35vw,20px); line-height:1.55;
  color:rgba(15,20,25,.7);
}

/* --- detail cards --- */
/* same frosted recipe as the nav pill, so the row reads as a sibling of it
   rather than as a second, unrelated glass treatment */
.ccards{
  list-style:none; padding:0;
  margin:clamp(52px,7.4vw,120px) 0 0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.3vw,20px);
}
/* surface comes from the shared .ccard/.inc-card rule above */
.ccard{
  display:flex; flex-direction:column;
  min-height:clamp(172px,15.4vw,228px);
  /* 1.75vw, not 1.9: at the widened container that buys the email address the
     last few px it needs to sit on one line. <wbr> still covers the break. */
  padding:clamp(20px,1.75vw,30px);
  border-radius:clamp(16px,1.5vw,22px);
}

.ccard__ch{
  margin:0;
  font-size:clamp(17px,1.5vw,23px);
  font-weight:600; letter-spacing:-.025em;
}
.ccard__body{
  margin-top:clamp(12px,1.1vw,18px);
  font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.6;
  color:rgba(15,20,25,.68);
  /* the address is left to wrap on its own — a hard <br> orphans the postcode
     once the card narrows. `break-word` (not `anywhere`, which pairs with
     text-wrap:pretty to split the email mid-domain even when it fits) is only a
     floor, for the email on a very narrow phone. */
  overflow-wrap:break-word;
}
.ccard__body a{ transition:color .25s ease; }
.ccard__body a:hover{ color:var(--orange-600); }

.ccard__pill{
  align-self:flex-start;
  margin-top:clamp(14px,1.2vw,20px);
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(255,255,255,.72);
  font-size:13.5px; font-weight:500; letter-spacing:-.01em;
}
.csocial{
  list-style:none; margin:clamp(14px,1.2vw,20px) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(12px,1.1vw,18px);
}
.csocial a{
  display:grid; place-items:center;
  color:rgba(15,20,25,.72);
  transition:color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.csocial a:hover{ color:var(--orange-600); transform:translateY(-2px); }
.csocial svg{ width:clamp(20px,1.6vw,23px); height:auto; fill:currentColor; }

/* --- everything rises in on load, top to bottom ---
   `both` holds the from-state through the delay. Under reduced motion the
   global `animation:none` override drops the animation entirely and each
   element simply renders in its final position. */
.crumb,.chero__title,.chero__lead,.ccard{
  animation:cheroIn .8s cubic-bezier(.22,1,.36,1) both;
}
.crumb        { animation-delay:.05s; }
.chero__title { animation-delay:.13s; }
.chero__lead  { animation-delay:.21s; }
.ccard:nth-child(1){ animation-delay:.32s; }
.ccard:nth-child(2){ animation-delay:.39s; }
.ccard:nth-child(3){ animation-delay:.46s; }
.ccard:nth-child(4){ animation-delay:.53s; }
.ccard:nth-child(5){ animation-delay:.60s; }

@keyframes cheroIn{
  from{ opacity:0; transform:translateY(24px); }
  to  { opacity:1; transform:none; }
}

/* ---------------------------------------------------------
   Legal document — privacy policy, terms. Sits under a .chero
   header, so this only styles the reading column beneath it.
   --------------------------------------------------------- */
.legal{
  position:relative; z-index:1;
  padding:clamp(40px,5vw,64px) 0 clamp(70px,8vw,120px);
  background:#fff;
}
.legal__inner{
  width:min(760px,100% - 48px);
  margin-inline:auto;
  text-align:left;
}
.legal__updated{
  margin:0 0 clamp(30px,3.4vw,46px);
  font-size:14px;
  color:var(--muted);
}
.legal__inner h2{
  margin:clamp(34px,3.6vw,52px) 0 14px;
  font-size:clamp(19px,1.9vw,25px);
  font-weight:600; letter-spacing:-.02em;
  color:var(--ink);
}
.legal__inner h2:first-of-type{ margin-top:0; }
.legal__inner p{
  margin:0 0 16px;
  font-size:15.5px; line-height:1.7;
  color:rgba(15,20,25,.76);
}
.legal__inner ul{
  margin:0 0 16px; padding-left:22px;
  display:grid; gap:7px;
}
.legal__inner li{
  font-size:15.5px; line-height:1.6;
  color:rgba(15,20,25,.76);
}
.legal__inner strong{ color:var(--ink); font-weight:600; }
.legal__inner a{
  color:var(--orange-600);
  text-decoration:underline; text-underline-offset:2px;
  transition:color .2s ease;
}
.legal__inner a:hover{ color:var(--orange); }

/* horizontal-scrolls on narrow screens rather than squeezing the columns */
.legal__table-wrap{
  margin:0 0 20px;
  overflow-x:auto;
}
.legal__inner table{
  width:100%; min-width:520px;
  border-collapse:collapse;
  font-size:14.5px;
}
.legal__inner th,
.legal__inner td{
  text-align:left; vertical-align:top;
  padding:12px 14px;
  border:1px solid var(--line);
}
.legal__inner th{
  background:#FFF5E6;
  font-weight:600; color:var(--ink);
}

/* ---------------------------------------------------------
   Enquiry form — navy panel, glass fields
   --------------------------------------------------------- */
.fsec{
  position:relative; z-index:1;
  padding:clamp(20px,3vw,56px) 0 clamp(56px,7vw,110px);
}
.fsec__inner{ width:min(1480px,100% - 80px); margin-inline:auto; }

.fsec__panel{
  position:relative; overflow:hidden;
  border-radius:clamp(20px,2.2vw,34px);
  padding:clamp(30px,3.6vw,62px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,4vw,72px);
  /* the same frosted recipe as .ccard, one size up */
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(165%);
          backdrop-filter:blur(18px) saturate(165%);
  border:1px solid rgba(190,116,22,.17);
  box-shadow:
    0 24px 54px -26px rgba(150,90,20,.36),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* --- left column --- */
.fsec__copy{ position:relative; display:flex; flex-direction:column; }
.fsec__title{
  margin:0;
  font-size:clamp(27px,3.4vw,50px);
  line-height:1.12; font-weight:500; letter-spacing:-.035em;
}
.fsec__lead{
  margin-top:clamp(16px,1.6vw,26px);
  max-width:42ch;
  font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.6; font-weight:500;
  color:rgba(15,20,25,.68);
}
/* pushed to the foot of the column, as in the reference. margin-top:auto only
   bites once the column is taller than its content — which is the form's doing,
   so on a stacked phone layout it simply sits under the lede. */
.fsec__mark{
  margin-top:auto; padding-top:clamp(30px,3vw,52px);
  width:clamp(96px,9vw,140px); height:auto;
  /* the brand PNG is white-on-transparent, so on a light panel it needs the
     same inversion the nav gives it */
  filter:invert(1); opacity:.2;
}

/* --- fields --- */
.cform{ display:grid; gap:clamp(14px,1.3vw,20px); align-content:start; }
.cfield{ display:grid; gap:8px; }
.cfield__label{
  font-size:clamp(13.5px,.98vw,15px); font-weight:500; letter-spacing:-.01em;
  color:rgba(15,20,25,.82);
}
.cfield__input{
  width:100%;
  font:inherit; font-size:clamp(15px,1.05vw,16.5px); color:var(--ink);
  padding:clamp(15px,1.3vw,19px) clamp(16px,1.4vw,22px);
  border-radius:clamp(13px,1.15vw,17px);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(190,116,22,.22);
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.cfield__input::placeholder{ color:rgba(15,20,25,.42); }
.cfield__input:hover{ border-color:rgba(190,116,22,.36); }
.cfield__input:focus{
  outline:none;
  background:rgba(255,255,255,.9);
  border-color:rgba(255,153,0,.8);
  box-shadow:0 0 0 3px rgba(255,153,0,.18);
}
/* the browser's own bubble is the validation UI, but it only appears after a
   submit attempt — :invalid alone would redden every field before it is typed in */
.cfield__input:user-invalid{
  border-color:rgba(190,38,30,.6);
  box-shadow:0 0 0 3px rgba(190,38,30,.12);
}
.cfield__input--area{
  min-height:clamp(112px,11vw,150px);
  resize:vertical; display:block;
}

/* --- phone: dial-code select + number sharing one pill --- */
/* the border, fill and focus ring live on the wrapper, and the two controls
   are stripped bare inside it — otherwise they read as two adjacent fields */
.cphone{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  align-items:stretch; overflow:hidden;
  border-radius:clamp(13px,1.15vw,17px);
  background:rgba(255,255,255,.62);
  border:1px solid rgba(190,116,22,.22);
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.cphone:hover{ border-color:rgba(190,116,22,.36); }
.cphone:focus-within{
  background:rgba(255,255,255,.9);
  border-color:rgba(255,153,0,.8);
  box-shadow:0 0 0 3px rgba(255,153,0,.18);
}
.cphone__code,
.cphone__num{
  min-width:0;
  font:inherit; font-size:clamp(15px,1.05vw,16.5px); color:var(--ink);
  background:transparent; border:0; outline:none;
  padding:clamp(15px,1.3vw,19px) clamp(16px,1.4vw,22px);
}
.cphone__code{
  /* sized for the widest short label — flag + a four-digit code like +1684.
     script.js keeps the selected option short so this never has to clip. */
  width:clamp(120px,9vw,132px);
  padding-right:26px; cursor:pointer;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-right:1px solid rgba(190,116,22,.2);
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  /* appearance:none takes the native caret with it, so draw one back on */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' stroke='%230F1419' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:11px;
}
/* the popup is painted by the OS, not the page — it needs its own colours or it
   inherits nothing and renders white-on-white in some browsers */
.cphone__code option{ color:var(--ink); background:#fff; }
.cphone__num{ padding-left:14px; }

/* --- submit --- */
/* orange, not the reference's white: every other action on this site is an
   orange pill, and the form's submit is the strongest one on the page */
.cform__btn{
  margin-top:clamp(4px,.6vw,10px);
  width:100%; border:0; cursor:pointer;
  font:inherit; font-size:16px; font-weight:600; line-height:1; color:#fff;
  padding:18px 30px; border-radius:999px;
  background:var(--orange);
  box-shadow:0 12px 28px -12px rgba(255,153,0,.8), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .3s cubic-bezier(.22,1,.36,1), background-color .25s ease,
             box-shadow .3s ease;
}
.cform__btn:hover{
  background:var(--orange-600); transform:translateY(-2px);
  box-shadow:0 18px 36px -14px rgba(255,153,0,.9), inset 0 1px 0 rgba(255,255,255,.3);
}
.cform__btn:active{ transform:translateY(0) scale(.99); }
.cform__btn[disabled]{
  opacity:.6; cursor:default; transform:none;
  box-shadow:0 12px 28px -12px rgba(255,153,0,.5);
}

/* empty until the handler writes to it, so it takes no space on a clean form */
.cform__status{
  font-size:14.5px; line-height:1.5;
  color:rgba(15,20,25,.7);
}
.cform__status:empty{ display:none; }
.cform__status.is-ok{ color:#146B3E; }
.cform__status.is-err{ color:#A82018; }

/* ---------------------------------------------------------
   Image placeholder — stands in until the real artwork lands
   --------------------------------------------------------- */
/* Deliberately obvious: a dashed warm panel that reads as unfinished rather
   than as a design choice, so none of these ship by accident. Each one is
   marked with a PLACEHOLDER comment in the HTML. */
.ph{
  display:grid; place-items:center; align-content:center;
  gap:12px;
  width:100%; height:100%; min-height:210px;
  padding:clamp(20px,3vw,36px);
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,153,0,.075),rgba(255,153,0,.025)),#FFFDFA;
  border:1px dashed rgba(190,116,22,.42);
  text-align:center; text-wrap:balance;
  font-size:14px; line-height:1.5; font-weight:500;
  color:rgba(15,20,25,.5);
}
.ph svg{ width:30px; height:30px; color:rgba(190,116,22,.55); }
/* inside .cta2__media, which has no radius of its own to inherit */
.ph--boxed{ border-radius:clamp(14px,1.4vw,22px); min-height:clamp(200px,22vw,300px); }

/* ---------------------------------------------------------
   Before / after — the same spend, managed and unmanaged
   --------------------------------------------------------- */
.ba{
  position:relative; z-index:1;
  background:#F7F8FA;
  padding:clamp(54px,6.6vw,108px) 0;
}
.ba__inner{ width:min(1240px,100% - 48px); margin-inline:auto; }
.ba__head{ max-width:640px; margin-bottom:clamp(32px,3.8vw,58px); }
.ba__title{
  margin:0;
  font-size:clamp(28px,3.4vw,48px);
  line-height:1.12; font-weight:500; letter-spacing:-.035em;
}
.ba__lead{
  margin-top:clamp(12px,1.3vw,20px);
  font-size:clamp(15px,1.1vw,17.5px); line-height:1.6;
  color:rgba(15,20,25,.66);
}

.ba__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,28px);
  align-items:stretch;
}
.ba-panel{
  display:flex; flex-direction:column;
  border-radius:clamp(16px,1.6vw,26px);
  padding:clamp(26px,2.8vw,44px);
}
.ba-panel--before{
  background:#fff;
  border:1px solid var(--line);
}
/* the same orange as the CTA banner, so the two read as one accent — but with
   ink copy, not white. White on this ramp measures 1.6:1 at the light end and
   2.7:1 at the dark end, against the 4.5 body text needs; ink clears it at
   every stop and the panel still reads as the loud half of the pair. */
.ba-panel--after{
  background:linear-gradient(150deg,#E0790A 0%,#F2960F 42%,#F7B463 100%);
  color:var(--ink);
  box-shadow:0 26px 54px -28px rgba(180,105,10,.6);
}

.ba-panel__tag{
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.ba-panel--after .ba-panel__tag{ color:rgba(15,20,25,.6); }

.ba-panel__title{
  margin:clamp(12px,1.2vw,18px) 0 0;
  font-size:clamp(20px,1.75vw,27px);
  font-weight:700; line-height:1.22; letter-spacing:-.025em;
}
.ba-panel__text{
  margin-top:clamp(10px,1vw,16px);
  font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.6;
  color:rgba(15,20,25,.66);
}
.ba-panel--after .ba-panel__text{ color:rgba(15,20,25,.85); }

/* pinned to the foot so both panels' figures line up across the pair, whatever
   the copy above them does */
.ba-stats{
  list-style:none; margin:clamp(26px,3vw,44px) 0 0; padding:clamp(20px,2vw,28px) 0 0;
  margin-top:auto;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,18px);
  border-top:1px solid var(--line);
}
.ba-panel--after .ba-stats{ border-top-color:rgba(15,20,25,.18); }
.ba-stat{ display:grid; gap:5px; min-width:0; }
.ba-stat__k{
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.ba-panel--after .ba-stat__k{ color:rgba(15,20,25,.6); }
.ba-stat__v{
  font-size:clamp(17px,1.5vw,23px); font-weight:700; letter-spacing:-.03em;
  line-height:1.1;
}

/* ---------------------------------------------------------
   Edge — additions for the advertising page
   --------------------------------------------------------- */
/* media first, copy second, without reordering the source: the copy stays
   ahead of the image for anyone reading linearly or with a screen reader */
.edge--flip .edge__inner{ grid-template-columns:1fr 1.12fr; }
.edge--flip .edge__media{ grid-column:1; grid-row:1; }
.edge--flip .edge__copy { grid-column:2; grid-row:1; }
.edge--flip{ background:#F7F8FA; }

/* the placeholder brings its own surface — the photo tile's blue would show
   through around it */
.edge__media--ph{ background:transparent; }

/* a screenshot with the client's own product floating over it */
/* The tile matches the source file's own ratio, so the crop the screenshot
   already has is the crop that shows — nothing is trimmed a second time here.
   Doubled class beats both .edge__media{4/3} and its 16/9 rule at <=900px, which
   have equal specificity and would otherwise win on order. */
.edge__media.edge__media--stack{
  position:relative;
  background:#fff;
  aspect-ratio:2128/1578;
  /* the card straddles the tile's edge, so this one can't clip its children —
     which means the screenshot has to round its own corners instead */
  overflow:visible;
}
.edge__shot{
  width:100%; height:100%;
  border-radius:inherit;
  object-fit:cover; object-position:top center;
}
/* Straddles the tile's left edge: centred on it, so half sits over the chart
   and half hangs outside. Dropped 11% from the top rather than pinned to the
   corner, so the chart's own title stays readable above it. */
.edge__pop{
  position:absolute;
  left:0; top:11%;
  transform:translateX(-50%);
  margin:0;
  /* roughly one chart column wide. Growing this also grows the overhang, since
     half of it hangs outside — the column gap below is sized to match. */
  width:clamp(110px,38%,235px);
  padding:clamp(7px,.8vw,12px);
  border-radius:clamp(10px,1.1vw,16px);
  background:#fff;
  /* a white card on a white screenshot needs an edge as well as a shadow */
  border:1px solid rgba(15,20,25,.09);
  box-shadow:0 20px 40px -14px rgba(15,20,25,.38);
}
.edge__pop img{ width:100%; height:auto; border-radius:7px; }

/* nutriseed4 is square, so the tile is too — nothing is cropped. Doubled class
   again, to beat the 2128/1578 on .edge__media.edge__media--stack above. */
.edge__media.edge__media--kw{ aspect-ratio:1; }
/* The search strip is 5:1, so it stays wide enough to read and hangs off the
   right edge by a fraction of its width rather than half — half would be ~250px
   of overhang, more than the column gap can hold. Sat in the lower half of the
   tile rather than on its bottom edge. */
.edge__pop--wide{
  left:auto; right:0; top:3%; bottom:auto;
  transform:translateX(27%);
  width:min(92%,510px);
}

/* the overhanging half of the card lives in the column gap, so this section
   needs a wider one than .edge's default — otherwise the card butts straight
   into the perk text somewhere around 1000px */
.edge--stack .edge__inner{ column-gap:clamp(100px,11.5vw,185px); }

.edge__text{
  font-size:clamp(15px,1.1vw,17.5px); line-height:1.65;
  color:rgba(15,20,25,.68);
}
.edge__list{
  list-style:none; margin:clamp(22px,2.4vw,34px) 0 0; padding:0;
  display:grid; gap:clamp(11px,1.1vw,16px);
}
.edge__list li{
  position:relative; padding-left:26px;
  font-size:clamp(14.5px,1.05vw,16.5px); line-height:1.55;
  color:rgba(15,20,25,.78);
}
.edge__list li::before{
  content:''; position:absolute; left:0; top:.52em;
  width:9px; height:9px; border-radius:3px;
  background:var(--orange);
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
/* The stage is a fixed 1180x300 canvas scaled to fit the viewport, so the
   constellation keeps its exact proportions at every width. Each step is sized
   off the *bottom* of its band (the next breakpoint down), which is the
   tightest width the rule still has to fit. Full size holds above ~1240px. */
@media (max-width:1280px){ :root{ --sw:.97; } }
@media (max-width:1200px){ :root{ --sw:.90; } }
@media (max-width:1120px){ :root{ --sw:.83; } }
@media (max-width:1040px){ :root{ --sw:.76; } }
@media (max-width:960px) { :root{ --sw:.71; } }

/* the nav collapses before everything else does: with four links plus two
   buttons the pill runs out of room at ~890px, and 940 keeps real slack rather
   than the ~10px it would otherwise have at the old 900 cutoff.
   script.js closes the open sheet at this same width. */
@media (max-width:940px){
  .nav__links,.nav__actions{ display:none; }
  .nav__toggle{ display:flex; }
  .nav{ grid-template-columns:1fr auto; padding:9px; }
}
@media (max-width:900px){
  :root{ --sw:.59; }
  .hero__copy{ margin-top:34px; }
}
@media (max-width:760px){ :root{ --sw:.54; } }

/* Narrow screens: drop the two outermost tiles and their spine, so the
   remaining cluster can stay legible instead of shrinking away. The visible
   span drops from 1180 to 656 (still centred on the canvas), so the scale is
   set against 656 from here down and can jump back up. */
@media (max-width:700px){
  :root{ --sw:.85; }
  .tile--far,.spine-far{ display:none; }
  .br-lg{ display:none; }
  .hero__copy{ margin-top:26px; }
}
@media (max-width:600px){ :root{ --sw:.73; } }
@media (max-width:520px){
  :root{ --sw:.61; }
  .btn--cta{ width:100%; }
}
@media (max-width:440px){ :root{ --sw:.52; } }
@media (max-width:380px){ :root{ --sw:.42; } }

/* --- footer --- */
@media (max-width:900px){
  .fx__body{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:560px){
  .fx__nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fx__btn{ width:100%; justify-content:center; }
  /* side by side they'd collide — stack and centre both */
  .fx__bottom{ grid-template-columns:minmax(0,1fr); justify-items:center; }
  .fx__made{ grid-column:auto; justify-self:center; }
  .fx__copy{ grid-column:auto; }
}

/* --- cta banner --- */
@media (max-width:900px){
  .cta2__inner{ grid-template-columns:minmax(0,1fr); }
  .cta2__copy{ margin-left:0; max-width:none; }
  .cta2__media{ padding:clamp(30px,6vw,52px); }
  .cta2__media img{ max-width:420px; }
}

/* --- detail timeline --- */
@media (max-width:860px){
  /* the spine moves to the left edge and every item hangs off it */
  .tl__line{ left:9px; }
  .tl-item{ grid-template-columns:minmax(0,1fr); }
  .tl-item:nth-child(odd) .tl-item__body,
  .tl-item:nth-child(even) .tl-item__body{
    grid-column:1; text-align:left; padding-left:44px;
  }
  .tl-item__node{ left:9px; }
  /* both sides now enter from the same edge */
  .tl__items.is-armed .tl-item:nth-child(even).is-in .tl-item__body{ animation-name:tlInLeft; }
}

/* --- what's included --- */
@media (max-width:900px){
  .inc__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:600px){
  .inc__grid{ grid-template-columns:minmax(0,1fr); }
}

/* --- service page banner --- */
@media (max-width:860px){
  /* stack: copy first, artwork under it */
  .pbanner__inner{ grid-template-columns:minmax(0,1fr); gap:clamp(28px,5vw,44px); }
  .pbanner__media{ max-width:520px; }
  /* centred on mobile only — the desktop layout stays left-aligned beside
     its artwork. The lead has its own max-width, so centring the text
     alone would leave its narrower box sitting off to the left. */
  .pbanner__copy{ text-align:center; }
  .pbanner__lead{ margin-inline:auto; }
  .acluster{ margin-inline:auto; }
}

/* --- enquiry form --- */
@media (max-width:900px){
  /* the copy can't hold a column beside five fields — stack it above */
  .fsec__panel{ grid-template-columns:minmax(0,1fr); }
  /* the watermark belongs in the panel's bottom corner. Stacked, it lands
     between the lede and the first field and reads as a stray element — and it
     lives inside .fsec__copy, so `order` can't lift it past the form. */
  .fsec__mark{ display:none; }
}

/* --- advertising page --- */
@media (max-width:1000px){
  /* four figures across a half-width panel leaves ~70px each */
  .ba-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:820px){
  .ba__grid{ grid-template-columns:minmax(0,1fr); }
  .ba-stats{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:900px){
  /* Stacked, the tile runs the full width and the only thing to the left of it
     is the 24px page gutter — half a card would hang off the screen and drag a
     scrollbar with it. Tuck it back inside the tile at these widths. */
  .edge__pop{ left:clamp(10px,2vw,20px); transform:none; }
  /* stacked, the tile is full width and there is no gap to its right to hang
     into — centre the strip on the image instead of overhanging it */
  .edge__pop--wide{ right:auto; left:50%; transform:translateX(-50%); }

  /* .edge already stacks here; the flipped one has to put its copy back on top */
  .edge--flip .edge__inner{ grid-template-columns:minmax(0,1fr); }
  .edge--flip .edge__copy { grid-column:1; grid-row:1; }
  .edge--flip .edge__media{ grid-column:1; grid-row:2; }
}

@media (max-width:520px){
  .ba-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* --- what's included: two-up variant --- */
@media (min-width:901px){
  .inc__grid--two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* --- contact hero --- */
@media (max-width:1200px){
  /* five columns leave under 190px of measure each — go three, and let the
     remaining two sit on a short second row */
  .ccards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:820px){
  .ccards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  .ccards{ grid-template-columns:minmax(0,1fr); }
  /* each card now sizes to its own content — a fixed floor would leave the
     one-line Email and Phone cards mostly empty */
  .ccard{ min-height:0; }
  .chero__lead{ max-width:none; }
}

/* --- service directory --- */
@media (max-width:1180px){
  .dir__cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:860px){
  .dir__cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){
  .dir__cols{ grid-template-columns:minmax(0,1fr); }
  .dir__cta{ width:100%; justify-content:center; }
}

/* --- process --- */
@media (max-width:1000px){
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* row ends move, so the thread has to be re-cut for two columns */
  .steps .step::after{ display:block; }
  .steps .step:nth-child(2n)::after{ display:none; }
}
@media (max-width:680px){
  .steps{ grid-template-columns:minmax(0,1fr); row-gap:clamp(34px,7vw,48px); }
  .steps .step::after{ display:none; }   /* nothing to thread in one column */
}

/* --- services --- */
@media (max-width:900px){
  /* the two-column split can't hold; each panel drops back under its own row
     and the section reads as an accordion */
  .svc.is-tabs .svc__list{ grid-template-columns:minmax(0,1fr); column-gap:0; }
  .svc.is-tabs .svc__item{ display:block; }
  /* no scroll stepping here, so rows go back to their natural height */
  .svc.is-tabs .svc__row{ grid-column:auto; min-height:0; }
  .svc.is-tabs .svc__panel{
    grid-column:auto; grid-row:auto;
    position:static;
    padding-bottom:clamp(28px,5vw,44px);
  }
  .svc__num{ font-size:clamp(64px,15vw,120px); }
}
/* short laptops — the tallest panel (Full Services, six bullets) would
   otherwise clip its button against the bottom of the viewport */
@media (min-width:901px) and (max-height:820px){
  .svc.is-tabs .svc__panel{ top:80px; }
  .svc__body{ margin-top:10px; line-height:1.6; }
  .svc__includes{ margin-top:18px; gap:7px; }
  .svc__cta{ margin-top:22px; }
}

/* --- edge --- */
@media (max-width:900px){
  /* the photo can't hold a column beside four perks — drop it below the copy */
  .edge__inner{ grid-template-columns:minmax(0,1fr); gap:clamp(34px,5vw,52px); }
  .edge__media{ aspect-ratio:16/9; }
}
@media (max-width:600px){
  .perks{ grid-template-columns:minmax(0,1fr); }
}

/* --- impact panel --- */
@media (max-width:980px){
  /* the rail can no longer earn its own column — stack it above the title */
  .impact__panel{ grid-template-columns:minmax(0,1fr); }
  .impact__eyebrow{ padding-top:0; margin-bottom:22px; }
  .stats{ margin-top:52px; }
}
@media (max-width:720px){
  /* three cards side by side would leave ~150px of measure each — go single
     file and let each card size to its own content */
  .stats{ grid-template-columns:minmax(0,1fr); margin-top:40px; }
  .stat{ min-height:0; gap:32px; padding:32px 26px; }
  .stat__num{ font-size:clamp(40px,10vw,58px); }
  .stat__label{ font-size:16px; }
}

/* Short viewports — keep the whole hero above the fold */
@media (max-height:880px){ :root{ --sh:.95; } }
@media (max-height:840px){ :root{ --sh:.87; } }
@media (max-height:800px){
  :root{ --sh:.78; }
  .hero{ padding:24px 0 44px; }
  .hero h1{ font-size:clamp(36px,4.6vw,58px); }
  .hero__copy{ margin-top:36px; }
}
@media (max-height:760px){
  :root{ --sh:.68; }
  .hero{ padding:20px 0 36px; }
  .hero__copy{ margin-top:30px; }
}
@media (max-height:720px){
  :root{ --sh:.62; }
  .nav-wrap{ padding-top:16px; }
  .hero{ padding:14px 0 28px; }
  .hero h1{ font-size:clamp(32px,4vw,46px); }
  .hero__copy{ margin-top:24px; }
  .hero__sub{ margin-top:14px; }
  .hero__lead{ margin-top:10px; }
  .hero .btn--cta{ margin-top:20px; }
}
@media (max-height:670px){
  :root{ --sh:.52; }
  .hero__copy{ margin-top:18px; }
}
@media (max-height:620px){
  :root{ --sh:.42; }
  .nav-wrap{ padding-top:12px; }
  .hero{ padding:10px 0 20px; }
  .hero h1{ font-size:clamp(28px,3.4vw,38px); }
  .hero__copy{ margin-top:14px; }
  .hero__sub{ margin-top:10px; font-size:17px; }
  .hero__lead{ margin-top:8px; font-size:15px; }
  .hero .btn--cta{ margin-top:16px; padding:14px 28px; }
}

/* landscape phones and other very short viewports */
@media (max-height:520px){
  :root{ --sh:.30; }
  .nav-wrap{ padding-top:10px; }
  .hero{ padding:8px 0 16px; }
  .hero h1{ font-size:clamp(24px,3vw,32px); }
  .hero__copy{ margin-top:10px; }
  .hero__sub{ margin-top:8px; font-size:15px; }
  .hero__lead{ margin-top:6px; font-size:14px; }
  .hero .btn--cta{ margin-top:12px; padding:12px 24px; font-size:15px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
}