@import url("fonts.css");

/* ==========================================================================
   SOURCE TALENT — website design system
   Palette and type per BRAND/Source-Talent-Brand-Kit.html
   Blue #1F48FF · Ink #0A1130 · Slate #5B6478 · Mist #EDF0FF · White
   Playfair Display (display) + Inter (working copy)
   ========================================================================== */

:root{
  --blue:#1F48FF;
  --blue-deep:#0B1B8F;
  --blue-hover:#1638D6;
  --ink:#0A1130;
  --ink-soft:#161E42;
  --slate:#5B6478;
  --slate-light:#8A92A6;
  --mist:#EDF0FF;
  --line:#E4E8F5;
  --line-soft:#F0F2F9;
  --white:#FFFFFF;
  --paper:#FAFBFF;

  --container:1180px;
  --gutter:clamp(20px,5vw,56px);
  --section-y:clamp(52px,6vw,86px);

  /* Radius scale. The site used a flat 4px everywhere, which read as a wireframe
     rather than a product. --radius stays as the small default so the twelve
     existing pages keep working; the larger steps carry the new depth. */
  --radius:6px;
  --r-md:14px;
  --r-lg:22px;
  --r-xl:28px;
  --r-pill:999px;

  /* Elevation. Two-layer shadows — a tight contact shadow plus a wide soft one.
     A single blurred shadow reads as fog; two reads as a lifted object. */
  --sh-1:0 1px 2px rgba(10,17,48,.04), 0 4px 12px rgba(10,17,48,.05);
  --sh-2:0 2px 4px rgba(10,17,48,.05), 0 12px 28px rgba(10,17,48,.07);
  --sh-3:0 4px 10px rgba(10,17,48,.06), 0 26px 60px rgba(10,17,48,.11);
  --sh-blue:0 6px 16px rgba(31,72,255,.20), 0 18px 40px rgba(31,72,255,.16);

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Ambient ground. A flat white page has nothing for a shadow to fall on, so the
   whole site read flat no matter what the cards did. Two very wide, very faint
   washes give the page depth without becoming a colour. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -6%, rgba(31,72,255,.09), transparent 62%),
    radial-gradient(900px 520px at 96% 2%, rgba(31,72,255,.055), transparent 60%),
    linear-gradient(180deg, var(--mist) 0%, rgba(237,240,255,.35) 22%, var(--white) 52%);
}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16.5px;
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-hover); }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
::selection{ background:var(--blue); color:#fff; }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:2px; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(36px,4.2vw,58px); }
.section--paper{ background:linear-gradient(180deg, rgba(237,240,255,.5), rgba(250,251,255,.35)); }
.section--mist{ background:var(--mist); }
/* Dark sections carry their own light source, otherwise a flat fill next to a
   lit page looks like a hole rather than a change of register. */
.section--ink{
  background:
    radial-gradient(900px 500px at 18% 0%, rgba(31,72,255,.30), transparent 60%),
    radial-gradient(700px 420px at 92% 96%, rgba(31,72,255,.18), transparent 62%),
    var(--ink);
  color:#fff;
}
.section--round{ border-radius:var(--r-xl); margin-inline:clamp(0px,2vw,26px); overflow:hidden; }
.section--line{ border-top:1px solid var(--line); }

/* ---------- type ---------- */
.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--blue); margin:0 0 18px; padding-left:.2em;
}
.section--ink .eyebrow{ color:#7E96FF; }

h1,h2,h3,h4{ font-family:'Playfair Display',Georgia,serif; margin:0; letter-spacing:-.015em; }
h1{ font-weight:800; font-size:clamp(38px,5.4vw,66px); line-height:1.03; }
h2{ font-weight:800; font-size:clamp(29px,3.5vw,44px); line-height:1.12; }
h3{ font-weight:700; font-size:clamp(20px,2vw,25px); line-height:1.2; }
h4{ font-weight:700; font-size:18px; line-height:1.3; }
.it{ font-style:italic; font-weight:600; }
.blue{ color:var(--blue); }

.lede{
  font-size:clamp(17px,1.5vw,20px); line-height:1.6; color:var(--slate);
  max-width:62ch; margin:20px 0 0; font-weight:400;
}
.section--ink .lede{ color:rgba(255,255,255,.72); }
p{ margin:0 0 18px; }
p:last-child{ margin-bottom:0; }
.muted{ color:var(--slate); }
.small{ font-size:14px; line-height:1.6; }
.xsmall{ font-size:11.5px; line-height:1.55; color:var(--slate-light); }
.num{ font-variant-numeric:tabular-nums; }

.sec-head{ max-width:70ch; }
.sec-head h2 + .lede{ margin-top:18px; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .lede{ margin-inline:auto; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600; letter-spacing:.01em;
  padding:15px 30px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{ background:var(--blue); color:#fff; box-shadow:var(--sh-blue); }
.btn--primary:hover{ background:var(--blue-hover); color:#fff; box-shadow:0 8px 20px rgba(31,72,255,.26), 0 22px 48px rgba(31,72,255,.2); }
.btn--ghost{ background:rgba(255,255,255,.7); color:var(--ink); border-color:var(--line); box-shadow:var(--sh-1); }
.btn--ghost:hover{ border-color:rgba(31,72,255,.4); color:var(--blue); box-shadow:var(--sh-2); }
.btn--light{ background:#fff; color:var(--ink); box-shadow:var(--sh-2); }
.btn--light:hover{ background:var(--mist); color:var(--ink); }
.btn--outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.32); }
.btn--outline-light:hover{ border-color:#fff; color:#fff; }
.btn--sm{ padding:11px 20px; font-size:13.5px; }
/* Third-tier action. Same pill height as the other two so it carries real
   weight, but tinted rather than solid so it never competes with the primary. */
.btn--tint{
  background:rgba(31,72,255,.09); color:var(--blue); border-color:transparent; box-shadow:none;
}
.btn--tint:hover{ background:rgba(31,72,255,.15); color:var(--blue); }
.btn--tint span{ margin-left:2px; transition:transform .18s var(--ease); display:inline-block; }
.btn--tint:hover span{ transform:translateX(3px); }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; align-items:center; }

.arrow-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--blue);
}
.arrow-link span{ transition:transform .18s var(--ease); }
.arrow-link:hover span{ transform:translateX(4px); }

/* ---------- header ----------
   A floating pill rather than a full-width bar welded to the top. It detaches
   the nav from the page, which is what makes the content beneath feel like it
   is passing *under* something rather than butting against it. */
.site-header{
  position:sticky; top:0; z-index:60;
  padding-block:14px 0;
  background:transparent; border-bottom:0;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  height:68px; padding-inline:14px 14px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border:1px solid rgba(255,255,255,.75);
  border-radius:var(--r-pill);
  box-shadow:var(--sh-2);
  transition:box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.scrolled .header-inner{ box-shadow:var(--sh-3); background:rgba(255,255,255,.93); }
.brand{ padding-left:12px; }
.brand{ display:flex; align-items:center; flex:none; }
.brand img{ width:170px; }
.nav{ display:flex; align-items:center; gap:32px; margin-left:auto; }
.nav a{
  font-size:14.5px; font-weight:500; color:var(--ink); position:relative; padding-block:6px;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .2s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--blue); }
.header-cta{ flex:none; }
.nav-toggle{
  display:none; background:none; border:0; padding:8px; cursor:pointer; color:var(--ink);
}
.nav-toggle svg{ display:block; }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,84px); }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,6vw,80px); align-items:center; }
.hero h1 .it{ color:var(--blue); }
.hero .lede{ max-width:54ch; }
.hero .lede b{ color:var(--ink); font-weight:600; }

/* hero side panel — the numbers card */
.figure-card{
  background:radial-gradient(560px 320px at 88% 0%, rgba(31,72,255,.38), transparent 64%), var(--ink);
  color:#fff; border-radius:var(--r-xl);
  padding:clamp(30px,3.4vw,42px); box-shadow:var(--sh-3);
}
.figure-card .fc-label{
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#7E96FF; margin-bottom:24px;
}
/* fc-row is a generic label/value row. Only the dark-card variant gets light text —
   it is reused inside white cards on the roles page. */
.fc-row{ display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:15px 0; border-bottom:1px solid var(--line); }
.fc-row:last-of-type{ border-bottom:0; }
.fc-row .k{ font-size:14px; color:var(--slate); }
.fc-row .v{ font-family:'Playfair Display',serif; font-weight:700; font-size:24px; font-variant-numeric:tabular-nums; color:var(--ink); }
.fc-row .v.blue{ color:var(--blue); }
.figure-card .fc-row{ border-bottom-color:rgba(255,255,255,.13); }
.figure-card .fc-row .k{ color:rgba(255,255,255,.74); }
.figure-card .fc-row .v{ color:#fff; }
.figure-card .fc-row .v.hl{ color:#8FA6FF; }
.fc-foot{
  margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.13);
  font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.6);
}
.fc-foot b{ color:#fff; font-weight:600; }

/* ---------- stat strip ----------
   Was four cells divided by hairlines, which read as a table. Now four lifted
   cards — the same information, but it reads as evidence rather than a spec. */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px); border:0; }
.stat{
  padding:clamp(26px,2.8vw,34px); border:1px solid var(--line); border-left:1px solid var(--line);
  border-radius:var(--r-lg); background:#fff; box-shadow:var(--sh-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stat:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); }
.stat:first-child{ padding-left:clamp(26px,2.8vw,34px); }
.stat .n{
  font-family:'Playfair Display',serif; font-weight:800; font-size:clamp(34px,3.8vw,46px);
  color:var(--blue); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.stat .t{ margin-top:12px; font-size:13.5px; line-height:1.5; color:var(--slate); }

/* ---------- generic grids ---------- */
.grid{ display:grid; gap:clamp(20px,2.4vw,30px); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid--top{ align-items:start; }

.split{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(34px,5vw,72px); align-items:start; }
.split--even{ grid-template-columns:1fr 1fr; }
.split--rev{ grid-template-columns:1.1fr .9fr; }

/* ---------- cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,34px); box-shadow:var(--sh-1);
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.card--hover:hover{ border-color:rgba(31,72,255,.28); transform:translateY(-3px); box-shadow:var(--sh-3); }
.card h3{ margin-bottom:10px; }
.card p{ font-size:14.5px; color:var(--slate); line-height:1.62; }
.card .idx{
  font-family:'Playfair Display',serif; font-style:italic; font-weight:800;
  font-size:20px; color:var(--blue); line-height:1; margin-bottom:16px; display:block;
}
.section--ink .card{ background:var(--ink-soft); border-color:rgba(255,255,255,.13); }
.section--ink .card p{ color:rgba(255,255,255,.7); }
.section--ink .card h3{ color:#fff; }

/* pain cards */
.pain{ border-left:2px solid var(--blue); padding:4px 0 4px 22px; }
.pain h3{ font-size:20px; margin-bottom:8px; }
.pain p{ font-size:14.5px; color:var(--slate); margin:0; }
.pain .stat-line{
  display:block; margin-top:12px; font-size:13px; color:var(--ink); font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* ---------- role cards ---------- */
.role{
  display:flex; flex-direction:column; height:100%;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,32px); box-shadow:var(--sh-1);
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.role:hover{ border-color:rgba(31,72,255,.3); transform:translateY(-3px); box-shadow:var(--sh-3); }
.role--feature{ border-color:var(--blue); border-width:1.5px; position:relative; box-shadow:var(--sh-2); }
.role-tag{
  position:absolute; top:-12px; left:clamp(26px,2.8vw,32px);
  background:var(--blue); color:#fff; font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; padding:6px 13px;
  border-radius:var(--r-pill); box-shadow:var(--sh-blue);
}
.role h3{ margin-bottom:6px; }
.role .role-sub{ font-size:13px; color:var(--slate-light); margin-bottom:20px; }
.role .price{
  font-family:'Playfair Display',serif; font-weight:800; font-size:34px; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1;
}
.role .price small{ font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:var(--slate); letter-spacing:0; }
.role .price-note{ font-size:12.5px; color:var(--slate); margin-top:8px; }
.role ul{ margin:22px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); padding-top:18px; }
.role ul li{ font-size:14px; color:var(--slate); padding:5px 0 5px 20px; position:relative; line-height:1.5; }
.role ul li::before{
  content:""; position:absolute; left:1px; top:11px; width:5px; height:9px;
  border-right:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue);
  transform:rotate(45deg);
}
.role .replaces{
  margin-top:auto; padding-top:20px; font-size:12.5px; color:var(--slate);
}
.role .replaces b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- process steps ---------- */
.steps{ counter-reset:step; max-width:980px; }
.step{
  display:grid; grid-template-columns:76px 1fr; gap:clamp(18px,2.4vw,34px);
  padding:clamp(24px,2.6vw,32px) 0; border-top:1px solid var(--line);
  align-items:start;
}
.step:last-child{ border-bottom:1px solid var(--line); }
.step .n{
  font-family:'Playfair Display',serif; font-weight:800; font-style:italic;
  font-size:30px; color:var(--blue); line-height:1; padding-top:4px;
  font-variant-numeric:tabular-nums;
}
.step h3{ margin-bottom:8px; }
.step p{ font-size:15px; color:var(--slate); margin:0; max-width:68ch; }
.step .when{
  display:inline-block; margin-top:12px; font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
  background:var(--mist); padding:6px 13px; border-radius:var(--r-pill);
}

/* ---------- duty lists (role pages) ---------- */
.duties{ list-style:none; margin:14px 0 0; padding:0; }
.duties li{
  position:relative; padding:6px 0 6px 24px; font-size:15px; color:var(--slate); line-height:1.55;
}
.duties li::before{
  content:""; position:absolute; left:1px; top:11px; width:5px; height:9px;
  border-right:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue);
  transform:rotate(45deg);
}

/* price block reused on role pages */
.price-lg{
  font-family:'Playfair Display',serif; font-weight:800; font-size:44px;
  letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink);
}
.price-lg small{
  font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:var(--slate); letter-spacing:0;
}
.fc-row--sm{ padding:12px 0; }
.fc-row--sm .v{ font-size:19px; }

/* ---------- included list ---------- */
.incl{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(28px,4vw,56px); }
.incl div{ padding:16px 0; border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:flex-start; }
.incl div::before{
  content:""; flex:none; margin:7px 3px 0 2px; width:5px; height:9px;
  border-right:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue);
  transform:rotate(45deg);
}
.incl b{ font-weight:600; font-size:15px; display:block; }
.incl span{ font-size:13.5px; color:var(--slate); line-height:1.5; }
.section--ink .incl div{ border-color:rgba(255,255,255,.13); }
.section--ink .incl span{ color:rgba(255,255,255,.66); }

/* ---------- guarantee band ---------- */
.guarantee{
  border:1px solid rgba(31,72,255,.28); border-radius:var(--r-xl);
  background:linear-gradient(160deg, var(--mist), #fff 62%);
  box-shadow:var(--sh-2);
  padding:clamp(32px,3.6vw,52px);
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,56px); align-items:center;
}
.guarantee h3{ font-size:clamp(22px,2.4vw,30px); margin-bottom:12px; }
.guarantee p{ color:var(--slate); font-size:15px; margin:0; max-width:64ch; }

/* ---------- savings calculator ----------
   One accent (blue = the seat) against a neutral reference bar (the local hire),
   every bar directly labelled. The brand has a single accent, so identity is
   carried by the labels and the ordering, never by colour alone. */
.calc{
  border:1px solid var(--line); border-radius:var(--r-xl); background:#fff; box-shadow:var(--sh-2); overflow:hidden;
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
}
.calc-controls{ padding:clamp(26px,3vw,38px); border-right:1px solid var(--line); }
.calc-out{ padding:clamp(26px,3vw,38px); background:var(--paper); }

.calc .field{ margin-bottom:24px; }
.calc .field:last-child{ margin-bottom:0; }
.calc-money{ position:relative; }
.calc-money span{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--slate); font-size:15.5px; pointer-events:none;
}
.calc-money input{ padding-left:38px; font-variant-numeric:tabular-nums; font-weight:500; }

.calc input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:3px; padding:0;
  background:var(--line); border:0; border-radius:2px; margin-top:16px; cursor:pointer;
}
.calc input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--blue); border:3px solid #fff; box-shadow:0 1px 5px rgba(10,17,48,.3); cursor:pointer;
}
.calc input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--blue);
  border:3px solid #fff; box-shadow:0 1px 5px rgba(10,17,48,.3); cursor:pointer;
}
.range-ends{ display:flex; justify-content:space-between; margin-top:8px; font-size:11.5px; color:var(--slate-light); font-variant-numeric:tabular-nums; }

.seg{ display:flex; border:1px solid var(--line); border-radius:var(--r-pill); overflow:hidden; }
.seg label{
  flex:1; margin:0; text-align:center; padding:11px 8px; cursor:pointer;
  font-size:13.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--slate);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.seg label + label{ border-left:1px solid var(--line); }
.seg input{ position:absolute; opacity:0; width:1px; height:1px; }
.seg input:checked + span{ color:#fff; }
.seg label:has(input:checked){ background:var(--blue); color:#fff; }
.seg label:has(input:focus-visible){ outline:2px solid var(--blue); outline-offset:-2px; }

.calc-hero{ padding-bottom:22px; border-bottom:1px solid var(--line); }
.calc-hero .lab{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.calc-hero .big{
  font-family:'Playfair Display',serif; font-weight:800; font-size:clamp(40px,5vw,58px);
  line-height:1; color:var(--blue); font-variant-numeric:tabular-nums; letter-spacing:-.025em;
}
.calc-hero .sub{ margin-top:12px; font-size:14.5px; color:var(--slate); line-height:1.55; }
.calc-hero .sub b{ color:var(--ink); font-weight:600; }

.calc-bars{ margin-top:26px; }
.bar-row{ margin-bottom:20px; }
.bar-row:last-child{ margin-bottom:0; }
.bar-head{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:8px; }
.bar-head .k{ font-size:13px; color:var(--slate); }
.bar-head .v{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); }
.bar-track{ height:14px; background:var(--line-soft); border-radius:2px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:0 2px 2px 0; transition:width .35s var(--ease); }
.bar-fill.local{ background:var(--slate); }
.bar-fill.seat{ background:var(--blue); }

.calc-lines{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line); }
.calc-note{ margin-top:18px; font-size:13.5px; line-height:1.6; color:var(--slate); }
.calc-foot{ margin-top:22px; }

@media (max-width:860px){
  .calc{ grid-template-columns:1fr; }
  .calc-controls{ border-right:0; border-bottom:1px solid var(--line); }
}

/* ---------- timeline (how it works) ---------- */
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(30px,4vw,44px); }
.tl-step{ padding:0 clamp(14px,1.8vw,24px); position:relative; }
.tl-step:first-child{ padding-left:0; }
.tl-step:last-child{ padding-right:0; }
.tl-bar{ height:6px; border-radius:3px; background:var(--mist); margin-bottom:18px; position:relative; }
.tl-step:nth-child(1) .tl-bar{ background:var(--blue); }
.tl-step:nth-child(2) .tl-bar{ background:var(--blue); opacity:.78; }
.tl-step:nth-child(3) .tl-bar{ background:var(--blue); opacity:.56; }
.tl-step:nth-child(4) .tl-bar{ background:var(--blue); opacity:.34; }
.tl-week{ font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
.tl-step h4{ font-size:16.5px; margin-bottom:7px; }
.tl-step p{ font-size:13.5px; color:var(--slate); line-height:1.55; margin:0; }
.tl-cost{
  margin-top:12px; font-size:11.5px; font-weight:600; color:var(--ink);
  padding-top:10px; border-top:1px solid var(--line);
}
.tl-cost.free{ color:var(--blue); }

/* ---------- sourcing map strip ---------- */
.countries{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.2vw,28px); margin-top:clamp(30px,4vw,44px); }
.country{ border-top:2px solid var(--blue); padding-top:20px; }
.country:nth-child(2){ border-top-color:rgba(31,72,255,.62); }
.country:nth-child(3){ border-top-color:rgba(31,72,255,.42); }
.country:nth-child(4){ border-top-color:rgba(31,72,255,.26); }
.country .cy-role{ font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:10px; }
.country h4{ font-size:19px; margin-bottom:8px; }
.country p{ font-size:13.5px; color:var(--slate); line-height:1.55; margin:0; }

@media (max-width:860px){
  .timeline,.countries{ grid-template-columns:repeat(2,1fr); gap:26px clamp(18px,2.2vw,28px); }
  .tl-step{ padding:0 !important; }
}
@media (max-width:560px){
  .timeline,.countries{ grid-template-columns:1fr; }
}

/* ---------- icons ---------- */
.ic{ width:24px; height:24px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ic-lg{ width:30px; height:30px; }
.ic-box{
  width:54px; height:54px; border-radius:var(--r-md); display:flex;
  align-items:center; justify-content:center; color:var(--blue);
  background:linear-gradient(155deg, var(--mist), #fff);
  border:1px solid var(--line); box-shadow:var(--sh-1);
  margin-bottom:20px;
}
.ic-box .ic{ width:26px; height:26px; }
.section--ink .ic-box{ background:rgba(31,72,255,.16); color:#8FA6FF; }

/* ---------- hero visual: the shortlist card ----------
   The hero's anchor object. It shows the single moment that separates us from
   a marketplace — you get a screened shortlist and YOU pick — and it carries
   no dollar figure, because the number lives in the quote flow. */
.cost-gap{
  background:
    radial-gradient(600px 340px at 88% 0%, rgba(31,72,255,.42), transparent 64%),
    var(--ink);
  color:#fff; border-radius:var(--r-xl);
  padding:clamp(26px,2.8vw,34px);
  box-shadow:var(--sh-3);
  position:relative;
}
.cg-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
.cg-lab{ font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#7E96FF; }
/* the title gets its own full-width line — sharing a row with the live pill
   forced "Construction Estimator" onto two lines */
.cg-title{ font-family:'Playfair Display',serif; font-size:23px; font-weight:700; margin-top:12px; line-height:1.2; }
.cg-live{
  flex:none; display:flex; align-items:center; gap:7px; white-space:nowrap;
  font-size:11px; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-pill); padding:6px 12px;
}
.cg-live i{ width:6px; height:6px; border-radius:50%; background:#5CE39B; flex:none; animation:cg-pulse 2.2s var(--ease) infinite; }
@keyframes cg-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.cg-feed{ margin-top:24px; display:flex; flex-direction:column; gap:9px; }
.cg-ev{
  display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:13px;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-md); padding:13px 14px;
  animation:float-in .6s var(--ease) both;
}
.cg-ev:nth-child(2){ animation-delay:.1s; }
.cg-ev:nth-child(3){ animation-delay:.2s; }
/* real faces, not initials — the shortlist is the one moment on the page where
   a person should look like a person */
.cg-av{
  width:38px; height:38px; border-radius:50%; overflow:hidden; flex:none;
  border:2px solid rgba(143,166,255,.4); box-shadow:0 0 0 3px rgba(31,72,255,.16);
}
.cg-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.cg-w{ font-size:14px; font-weight:600; color:#fff; line-height:1.3; min-width:0; }
.cg-w small{ display:block; font-weight:400; font-size:12px; color:rgba(255,255,255,.6); margin-top:4px; line-height:1.45; }
.cg-b{
  flex:none; font-size:10.5px; font-weight:600; letter-spacing:.05em; white-space:nowrap;
  color:#9DB4FF; background:rgba(31,72,255,.2); border-radius:var(--r-pill); padding:5px 11px;
}
.cg-foot{ margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.13); }
.cg-foot p{ font-size:13px; line-height:1.55; color:rgba(255,255,255,.66); margin:0; }
.cg-foot b{ color:#fff; font-weight:600; }
.cg-note{ display:block; margin-top:12px; font-size:11px; color:rgba(255,255,255,.4); }
@media (prefers-reduced-motion:reduce){ .cg-ev,.cg-live i{ animation:none; } }

/* ---------- why-different grid ---------- */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); background:transparent; border:0; }
.why-card{
  background:#fff; padding:clamp(28px,2.8vw,36px);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.why-card:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); border-color:rgba(31,72,255,.28); }
.why-card h3{ font-size:20px; margin-bottom:9px; }
.why-card p{ font-size:14.5px; color:var(--slate); line-height:1.6; margin:0; }
@media (max-width:900px){ .why{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .why{ grid-template-columns:1fr; } }

/* ---------- process (high-level glance) ---------- */
.flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(30px,4vw,48px); }
.flow-step{ padding:0 clamp(16px,2vw,28px); position:relative; }
.flow-step:first-child{ padding-left:0; }
.flow-step:last-child{ padding-right:0; }
.flow-step + .flow-step::before{
  content:""; position:absolute; left:0; top:26px; width:1px; height:calc(100% - 26px);
  background:var(--line);
}
.flow-num{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:14px; }
.flow-step .ic-box{ margin-bottom:18px; }
.flow-step h4{ font-size:17px; margin-bottom:8px; }
.flow-step p{ font-size:14px; color:var(--slate); line-height:1.55; margin:0; }
@media (max-width:860px){
  .flow{ grid-template-columns:repeat(2,1fr); gap:32px clamp(16px,2vw,28px); }
  .flow-step{ padding:0 !important; }
  .flow-step + .flow-step::before{ display:none; }
}
@media (max-width:520px){ .flow{ grid-template-columns:1fr; } }

/* ---------- global reach graphic ---------- */
.reach-graphic{ width:100%; height:auto; display:block; }
.reach-graphic .grid-dot{ fill:rgba(255,255,255,.10); }
.reach-graphic .arc{ fill:none; stroke:url(#reachGrad); stroke-width:1.5; stroke-linecap:round; }
.reach-graphic .arc-dash{ stroke-dasharray:4 5; animation:reach-flow 3s linear infinite; }
@keyframes reach-flow{ to{ stroke-dashoffset:-90; } }
.reach-graphic .hub{ fill:#fff; }
.reach-graphic .hub-ring{ fill:none; stroke:rgba(143,166,255,.5); stroke-width:1.2; }
.reach-graphic .dest{ fill:var(--blue); }
.reach-graphic .dest-ring{ fill:none; stroke:var(--blue); stroke-width:1.4; opacity:.5; animation:reach-pulse 2.4s var(--ease) infinite; }
@keyframes reach-pulse{ 0%{ r:16; opacity:.5; } 70%{ r:34; opacity:0; } 100%{ opacity:0; } }
.reach-graphic .lab{ fill:rgba(255,255,255,.62); font-family:'Inter',sans-serif; font-size:11px; font-weight:500; }
.reach-graphic .lab-dest{ fill:#fff; font-weight:600; }
@media (prefers-reduced-motion:reduce){
  .reach-graphic .arc-dash{ animation:none; }
  .reach-graphic .dest-ring{ animation:none; opacity:.4; }
}

/* ---------- stat card with icon ---------- */
.role .role-ic{ color:var(--blue); margin-bottom:16px; }

/* ---------- comparison table ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table.data{
  width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px;
}
table.data th{
  text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--slate); padding:0 18px 14px 0;
  border-bottom:1px solid var(--ink); white-space:nowrap;
}
table.data th:last-child,table.data td:last-child{ padding-right:0; }
table.data td{ padding:17px 18px 17px 0; border-bottom:1px solid var(--line); vertical-align:top; }
table.data td.role-name{ font-weight:600; color:var(--ink); }
table.data td.n{ font-variant-numeric:tabular-nums; white-space:nowrap; }
table.data td .sub{ display:block; font-size:12.5px; color:var(--slate); font-weight:400; margin-top:3px; }
table.data tr:hover td{ background:var(--paper); }
.hl-cell{ color:var(--blue); font-weight:600; }

/* ---------- FAQ ---------- */
.faq details{
  border-bottom:1px solid var(--line); padding:22px 0;
}
.faq details:first-of-type{ border-top:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between;
  align-items:flex-start; gap:20px;
  font-family:'Playfair Display',serif; font-weight:700; font-size:19px; line-height:1.35;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family:'Inter',sans-serif; font-size:22px; font-weight:300;
  color:var(--blue); line-height:1; flex:none; transition:transform .2s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .answer{ padding-top:14px; font-size:15px; color:var(--slate); max-width:76ch; }

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:22ch; margin-inline:auto; }
.cta-band .lede{ margin-inline:auto; }
.cta-band .btn-row{ justify-content:center; }

/* ---------- form ---------- */
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(28px,3vw,42px); box-shadow:var(--sh-2); }
.field{ margin-bottom:20px; }
.field label{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate); margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%; font-family:'Inter',sans-serif; font-size:15.5px; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-md);
  background:#fff; transition:border-color .18s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue); }
.field textarea{ min-height:120px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-note{ font-size:12.5px; color:var(--slate); margin-top:16px; line-height:1.55; }

.contact-list{ list-style:none; margin:0; padding:0; }
.contact-list li{ padding:18px 0; border-bottom:1px solid var(--line); }
.contact-list .k{ font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:5px; }
.contact-list .v{ font-size:16px; font-weight:500; }

/* ---------- page hero (interior) ---------- */
.page-hero{ padding-block:clamp(48px,6vw,84px) clamp(36px,4vw,56px); border-bottom:1px solid var(--line); }
.page-hero h1{ font-size:clamp(34px,4.6vw,56px); max-width:19ch; }
.page-hero .lede{ max-width:60ch; }

/* ---------- landing pages (paid traffic) ----------
   No nav: one role, one pain, one action. Everything else leaks the click. */
.lp-header{ border-bottom:1px solid var(--line); background:#fff; }
.lp-header .header-inner{ height:72px; }
.lp-phone{ font-size:14.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
.lp-phone span{ color:var(--slate); font-weight:400; }

.lp-hero{ padding-block:clamp(40px,5vw,68px) clamp(40px,5vw,64px); background:var(--paper); border-bottom:1px solid var(--line); }
.lp-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(32px,5vw,64px); align-items:start; }
.lp-hero h1{ font-size:clamp(32px,4.3vw,52px); }
.lp-hero .lede{ max-width:54ch; }
.lp-points{ list-style:none; margin:30px 0 0; padding:0; }
.lp-points li{ position:relative; padding:8px 0 8px 26px; font-size:15.5px; color:var(--ink); }
.lp-points li::before{
  content:""; position:absolute; left:1px; top:14px; width:6px; height:10px;
  border-right:1.8px solid var(--blue); border-bottom:1.8px solid var(--blue);
  transform:rotate(45deg);
}
.lp-form{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(26px,2.6vw,34px); box-shadow:var(--sh-2); }
.lp-form h3{ font-size:21px; }
.lp-form .field{ margin-bottom:16px; }

.lp-numbers{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff; box-shadow:var(--sh-1); }
.lp-num{ padding:clamp(22px,2.6vw,30px); border-left:1px solid var(--line); }
.lp-num:first-child{ border-left:0; }
.lp-num .n{
  font-family:'Playfair Display',serif; font-weight:800; font-size:clamp(28px,3.2vw,38px);
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.lp-num.win .n{ color:var(--blue); }
.lp-num .t{ margin-top:10px; font-size:13px; color:var(--slate); line-height:1.5; }

@media (max-width:900px){
  .lp-grid{ grid-template-columns:1fr; }
  .lp-numbers{ grid-template-columns:1fr; }
  .lp-num{ border-left:0; border-top:1px solid var(--line); }
  .lp-num:first-child{ border-top:0; }
}
@media (max-width:760px){
  .lp-phone{ display:none; }
}

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#fff; padding-block:clamp(52px,6vw,80px) 34px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px); }
.site-footer .brand img{ width:180px; }
.site-footer .f-blurb{ margin-top:20px; font-size:14px; color:rgba(255,255,255,.66); max-width:34ch; line-height:1.6; }
.site-footer h4{
  font-family:'Inter',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:#7E96FF; margin-bottom:16px;
}
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ margin-bottom:11px; }
.site-footer a{ color:rgba(255,255,255,.78); font-size:14px; }
.site-footer a:hover{ color:#fff; }
.footer-bottom{
  margin-top:clamp(40px,5vw,64px); padding-top:26px; border-top:1px solid rgba(255,255,255,.13);
  display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between;
  font-size:12.5px; color:rgba(255,255,255,.5);
}
.footer-bottom a{ font-size:12.5px; color:rgba(255,255,255,.5); }

/* ---------- utility ---------- */
.mt-0{ margin-top:0; }
.mt-s{ margin-top:20px; }
.mt-m{ margin-top:36px; }
.mt-l{ margin-top:clamp(38px,4.5vw,60px); }
.center{ text-align:center; }
.nowrap{ white-space:nowrap; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-left:1px solid var(--line); border-top:1px solid var(--line); padding-left:clamp(18px,2.4vw,34px); }
  .stat:nth-child(-n+2){ border-top:0; }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .split,.split--rev,.split--even{ grid-template-columns:1fr; }
  .guarantee{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .nav,.header-cta{ display:none; }
  .nav-toggle{ display:block; }
  .site-header.open .nav{
    display:flex; position:absolute; top:92px; left:var(--gutter); right:var(--gutter);
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--sh-3); padding:10px 22px 20px;
  }
  .site-header.open .nav a{ padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:16px; }
  .site-header.open .nav a::after{ display:none; }
  .site-header.open .header-cta{ display:block; position:absolute; top:calc(100% + 10px); left:var(--gutter); right:var(--gutter); }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .incl{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; gap:10px; }
  .step .n{ padding-top:0; font-size:24px; }
  .footer-grid{ grid-template-columns:1fr; }
  .btn-row .btn{ width:100%; }
  .brand img{ width:146px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .btn:hover,.card--hover:hover,.role:hover{ transform:none; }
}

/* ---------- print ---------- */
@media print{
  .site-header,.site-footer,.btn-row,.nav-toggle{ display:none; }
  body{ font-size:11pt; }
}

/* ==========================================================================
   DEPTH LAYER — added in the 31 July rebuild
   The site had good copy and a flat visual register: 4px radii, no elevation,
   nothing overlapping anything. These are the components that give the page
   a foreground and a background.
   ========================================================================== */

/* ---------- hero: floating cards that break the panel's bounds ----------
   The single move that does the most work. A card overlapping the edge of
   another object is what reads as depth — not the shadow on its own. */
.hero-visual{ position:relative; }
.hero-float{
  position:absolute; z-index:2; width:max-content; max-width:262px;
  /* Solid, not translucent. Over the dark panel a frosted card turned muddy and
     the dark bars read straight through the text. */
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--sh-3);
  padding:15px 17px;
  animation:float-in .7s var(--ease) both;
}
/* Positioned to clip the panel's CORNERS only — far enough out that neither
   card sits on top of the panel's own label or footnote. */
.hero-float--tr{ top:-54px; right:-42px; animation-delay:.15s; }
.hero-float--bl{ bottom:-52px; left:-46px; animation-delay:.3s; }
.hf-k{
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); display:flex; align-items:center; gap:7px;
}
.hf-k::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); flex:none; }
.hf-v{ font-size:14px; font-weight:600; color:var(--ink); margin-top:7px; line-height:1.35; }
.hf-s{ font-size:12px; color:var(--slate); margin-top:3px; }
@keyframes float-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (max-width:1000px){ .hero-float{ display:none; } }

/* ---------- trust row: the software a seat already works in ----------
   Wordmarks, not logos — we have no licence to reproduce their marks, and a
   row of honest type beats a row of borrowed brands. */
.trust{ text-align:center; }
.trust-lab{
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--slate); margin-bottom:26px;
}
/* Sliding marquee. Two identical .mq-set blocks sit side by side and the track
   translates exactly -50%, so the loop is seamless with no JS.
   ADDING REAL LOGOS: drop the file in assets/logos/ and replace the text inside
   .mq-item with <img src="assets/logos/xero.svg" alt="Xero">. The img rule below
   normalises height and greys it back to the wordmark weight, so mixed
   text-and-image rows still look like one row. */
.marquee{
  position:relative; overflow:hidden; padding:4px 0;
  /* fade the ends so items enter and leave instead of being chopped */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.mq-track{ display:flex; width:max-content; animation:mq 46s linear infinite; }
.marquee:hover .mq-track{ animation-play-state:paused; }
.mq-set{ display:flex; align-items:center; gap:16px; padding-right:16px; }
.mq-item{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:66px; padding:0 30px;
  font-size:16px; font-weight:600; color:var(--slate); white-space:nowrap;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-pill); box-shadow:var(--sh-2);
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.mq-item:hover{ color:var(--ink); border-color:rgba(31,72,255,.3); }
/* Full colour — he wants the real marks reading as themselves.
   max-width stops a very wide wordmark (ServiceM8) from making a pill twice the
   size of its neighbours; object-fit keeps the mark undistorted. */
.mq-item img{
  height:32px; width:auto; max-width:186px; object-fit:contain; display:block;
  transition:transform .18s var(--ease);
}
/* Xero came as the circular badge rather than a wordmark. A round mark at the
   same pixel height as a wordmark reads visibly smaller, so it gets a few more
   pixels to sit at the same OPTICAL size as its neighbours. */
.mq-item img[alt="Xero"]{ height:40px; }
.mq-item:hover img{ transform:scale(1.04); }
@keyframes mq{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion:reduce){
  .mq-track{ animation:none; }
  .marquee{ overflow-x:auto; }
}

/* ---------- showcase: what a seat's week actually looks like ----------
   The equivalent of a product screenshot for a business that doesn't ship
   software. It gives the page one large, detailed object to anchor on. */
.showcase{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); overflow:hidden;
}
.sc-top{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--mist), rgba(237,240,255,.25));
}
.sc-who{ display:flex; align-items:center; gap:14px; }
.sc-av{
  width:44px; height:44px; border-radius:50%; flex:none;
  background:linear-gradient(150deg, var(--blue), var(--blue-deep));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; letter-spacing:.02em; box-shadow:var(--sh-blue);
}
.sc-name{ font-family:'Playfair Display',serif; font-weight:700; font-size:19px; line-height:1.15; }
.sc-role{ font-size:12.5px; color:var(--slate); margin-top:2px; }
.sc-live{
  display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 15px; box-shadow:var(--sh-1); white-space:nowrap;
}
.sc-live i{ width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none; }
.sc-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.2vw,14px);
  padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px) 0;
}
.sc-stat{ border:1px solid var(--line); border-radius:var(--r-md); padding:15px 16px; background:var(--paper); }
.sc-stat .v{
  font-family:'Playfair Display',serif; font-weight:800; font-size:26px; line-height:1;
  color:var(--blue); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.sc-stat .k{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-light); margin-top:9px; }
.sc-body{ padding:clamp(20px,2.4vw,28px) clamp(20px,2.6vw,32px) clamp(24px,2.8vw,32px); }
.sc-lab{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--slate-light); margin-bottom:14px;
}
.sc-row{
  display:grid; grid-template-columns:72px 1fr auto; gap:16px; align-items:center;
  padding:14px 16px; border-radius:var(--r-md); border:1px solid var(--line);
  border-left:3px solid var(--line); background:#fff; margin-bottom:9px;
}
.sc-row:last-child{ margin-bottom:0; }
.sc-row.done{ border-left-color:var(--blue); }
.sc-time{ font-size:12px; color:var(--slate-light); font-variant-numeric:tabular-nums; }
.sc-what{ font-size:14.5px; color:var(--ink); line-height:1.4; }
.sc-what small{ display:block; font-size:12px; color:var(--slate); margin-top:2px; }
.sc-badge{
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--r-pill); white-space:nowrap;
  background:var(--mist); color:var(--blue);
}
.sc-badge.grey{ background:var(--line-soft); color:var(--slate); }
.sc-foot{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--slate);
}
@media (max-width:760px){
  .sc-stats{ grid-template-columns:repeat(2,1fr); }
  .sc-row{ grid-template-columns:1fr auto; }
  .sc-time{ display:none; }
}

/* ---------- numbered cards for dark sections ---------- */
.numbered{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
.num-card{
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg); padding:clamp(26px,2.8vw,34px);
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.num-card:hover{ transform:translateY(-3px); background:rgba(255,255,255,.09); border-color:rgba(143,166,255,.4); }
.num-card .n{
  font-size:12px; font-weight:700; letter-spacing:.18em; color:#8FA6FF;
  font-variant-numeric:tabular-nums; margin-bottom:18px;
}
.num-card h3{ color:#fff; font-size:21px; margin-bottom:10px; }
.num-card p{ font-size:14.5px; color:rgba(255,255,255,.68); line-height:1.6; margin:0; }
@media (max-width:900px){ .numbered{ grid-template-columns:1fr; } }

/* ---------- FAQ as a card ---------- */
.faq{ background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-2); padding:8px clamp(22px,2.6vw,34px); }
.faq details{ border-bottom:1px solid var(--line); padding:22px 0; }
.faq details:first-of-type{ border-top:0; }
.faq details:last-of-type{ border-bottom:0; }

/* The floating cards clip the panel's corners. The top-right one is wide enough
   to cover the whole head row, so the card buys clear space ABOVE the head
   rather than beside it — padding-right alone just crushed the title into a
   column that still sat under the float. */
.hero-visual .cost-gap{
  padding-top:clamp(62px,5.6vw,78px);
  padding-bottom:clamp(46px,4.6vw,60px);
}
@media (max-width:1000px){ .hero-visual .cost-gap{ padding-top:clamp(26px,2.8vw,34px); } }

/* ==========================================================================
   QUOTE WIZARD — gated instant quote (prototype)
   Two steps then the number. The lead fires on the step-2 submit, before the
   result renders, so reading the number and leaving still counts as an enquiry.
   ========================================================================== */
.wiz{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--sh-3); padding:clamp(26px,3.2vw,44px);
  max-width:900px; margin-inline:auto;
}
.wiz-steps{ display:flex; gap:8px; justify-content:center; margin-bottom:clamp(24px,3vw,34px); }
.wiz-dot{
  width:44px; height:4px; border-radius:99px; background:var(--line);
  transition:background .3s var(--ease);
}
.wiz-dot.on{ background:var(--blue); }
.wiz-head{ margin-bottom:clamp(22px,2.6vw,30px); }
.wiz-n{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue); display:block; margin-bottom:10px;
}
.wiz-head h3{ font-size:clamp(23px,2.6vw,30px); }
.wiz-panel[hidden]{ display:none; }

/* role picker */
.q-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:clamp(24px,2.8vw,32px); }
.q-card{
  text-align:left; cursor:pointer; font-family:inherit;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:16px 18px; display:flex; flex-direction:column; gap:3px;
  transition:border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.q-card:hover{ border-color:rgba(31,72,255,.4); box-shadow:var(--sh-1); }
.q-card.on{ border-color:var(--blue); background:var(--mist); box-shadow:var(--sh-1); }
.qc-name{ font-size:15.5px; font-weight:600; color:var(--ink); }
.qc-sub{ font-size:12.5px; color:var(--slate); }
.q-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); }

/* result */
.q-result{ text-align:left; }
.q-big{
  font-family:'Playfair Display',serif; font-weight:800;
  font-size:clamp(48px,7vw,84px); line-height:1; letter-spacing:-.03em;
  color:var(--blue); font-variant-numeric:tabular-nums; margin-top:18px;
}
.q-big-sub{ font-size:16px; color:var(--slate); margin-top:14px; max-width:52ch; }
.q-big-sub b{ color:var(--ink); font-weight:600; }
.q-bars{ margin-top:clamp(26px,3vw,34px); }
.q-rows{ margin-top:clamp(24px,2.8vw,30px); border-top:1px solid var(--line); }
.q-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:14.5px; color:var(--slate);
}
.q-row b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.q-note{
  margin-top:20px; padding:16px 18px; border-radius:var(--r-md);
  background:var(--mist); font-size:14.5px; color:var(--ink); line-height:1.55;
}
.proto-note{
  margin-top:clamp(26px,3vw,34px); padding-top:18px; border-top:1px solid var(--line);
  font-size:12px; color:var(--slate-light); line-height:1.6;
}
.proto-note code{ font-size:11.5px; background:var(--line-soft); padding:2px 6px; border-radius:4px; color:var(--slate); }

@media (max-width:700px){
  .q-cards{ grid-template-columns:1fr; }
  .q-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   RT-SPINE COMPONENTS — 31 July
   Layout borrowed from the Remote Talent commercial spine, depth from Aria,
   palette and content from Source Talent.
   ========================================================================== */

/* hero: three actions */
.hero-ctas{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:34px; }
/* three actions, one row — the hero column is ~52ch, so the pills tighten
   rather than the row breaking */
.hero-ctas .btn{ padding-inline:22px; }
.hero-ctas .btn--tint{ padding-inline:18px; }
@media (min-width:1100px){ .hero-ctas{ flex-wrap:nowrap; } }

/* seat cards — RT's role card: name, promise, duty bullets, price, CTA */
.seats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
.seat{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  padding:clamp(26px,2.8vw,32px); position:relative;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.seat:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); border-color:rgba(31,72,255,.28); }
.seat--feature{ border-color:var(--blue); box-shadow:var(--sh-2); }
.seat-ic{ color:var(--blue); margin-bottom:16px; }
.seat h3{ font-size:21px; margin-bottom:6px; }
.seat-sub{ font-size:13px; color:var(--slate-light); margin-bottom:18px; }
.seat ul{ list-style:none; margin:0 0 22px; padding:18px 0 0; border-top:1px solid var(--line); }
.seat ul li{ position:relative; padding:6px 0 6px 22px; font-size:14px; color:var(--slate); line-height:1.5; }
.seat ul li::before{
  content:""; position:absolute; left:1px; top:12px; width:5px; height:9px;
  border-right:1.7px solid var(--blue); border-bottom:1.7px solid var(--blue);
  transform:rotate(45deg);
}
.seat-foot{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line); }
.seat-price{
  font-family:'Playfair Display',serif; font-weight:800; font-size:32px;
  color:var(--ink); letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums;
}
.seat-price small{ font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:var(--slate); letter-spacing:0; }
.seat-replaces{ font-size:12.5px; color:var(--slate); margin-top:7px; }
.seat .btn{ width:100%; margin-top:18px; }
@media (max-width:980px){ .seats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .seats{ grid-template-columns:1fr; } }

/* mid-page CTA band — RT drops one of these between sections */
.band{
  border-radius:var(--r-xl); padding:clamp(30px,4vw,52px);
  background:
    radial-gradient(700px 380px at 12% 0%, rgba(31,72,255,.34), transparent 62%),
    var(--ink);
  color:#fff; box-shadow:var(--sh-3);
  display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,48px); align-items:center;
}
.band h3{ color:#fff; font-size:clamp(23px,2.8vw,34px); max-width:20ch; }
.band p{ color:rgba(255,255,255,.7); font-size:15.5px; margin:12px 0 0; max-width:52ch; }
.band .btn-row{ margin-top:0; }
@media (max-width:820px){ .band{ grid-template-columns:1fr; } }

/* promise cards — occupies RT's testimonial slot with something true */
.promise{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,20px); }
.pr{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:clamp(26px,2.8vw,34px); display:flex; flex-direction:column;
}
.pr-q{
  font-family:'Playfair Display',serif; font-weight:700; font-size:21px;
  line-height:1.25; margin-bottom:12px;
}
.pr p{ font-size:14.5px; color:var(--slate); line-height:1.6; margin:0; }
.pr-tag{
  margin-top:auto; padding-top:20px; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
}
@media (max-width:900px){ .promise{ grid-template-columns:1fr; } }

/* ---------- interior page hero ----------
   Was flat padding with a hairline underneath. Under a floating nav that reads
   as an unfinished header, so it now sits on the ambient wash with no border and
   an optional lead-in line. */
.page-hero{
  padding-block:clamp(46px,5.4vw,80px) clamp(30px,3.4vw,48px);
  border-bottom:0; position:relative;
}
/* the eyebrow above a page h1 only ever restated the h1 */
.page-hero > .container > .eyebrow{ display:none; }
.page-hero h1{ font-size:clamp(36px,5vw,60px); max-width:18ch; }
.page-hero .lede{ max-width:58ch; }
.page-hero .btn-row{ margin-top:30px; }
/* the crumb sits above the h1 as a quiet locator */
.crumb{
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--slate-light); margin-bottom:18px;
}
.crumb a{ color:var(--slate-light); }
.crumb a:hover{ color:var(--blue); }

/* seat cards used as jump links on roles.html */
a.seat{ color:inherit; }
a.seat h3{ color:var(--ink); }
a.seat:hover h3{ color:var(--blue); }

/* ==========================================================================
   JOURNEY RAIL — the client journey as a diagram
   Scaled up deliberately: this is the page's explainer, so the nodes are large
   enough to read as an illustration rather than a row of icons. Four stops on
   one rail, each node carrying its step number, an arrow in every gap, and a
   bracket under the stops that cost nothing.
   Collapses to a vertical rail under 900px, where the connector becomes the
   left spine and the bracket becomes a full-height bar.
   ========================================================================== */
.journey{ position:relative; }
.jr-stops{
  --jr-gap:clamp(16px,2vw,30px);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:var(--jr-gap);
  position:relative;
}
.jr-stop{ position:relative; z-index:1; }
/* The rail is drawn as one SEGMENT PER GAP rather than a single line across the
   whole grid — a full-width line overshoots past the last node and reads as an
   unfinished process. Each segment runs from its own node's centre to the next
   node's left edge, so the rail stops exactly where the journey does. */
.jr-stop:not(:last-child)::before{
  content:""; position:absolute; z-index:0;
  left:47px; right:calc(-1 * var(--jr-gap)); top:47px; height:3px; border-radius:3px;
  /* a current runs left to right along the rail so the diagram reads as a
     process in motion rather than four static circles */
  background:linear-gradient(90deg,
    var(--jr-line,var(--line)) 0%, var(--jr-line,var(--line)) 38%,
    var(--jr-pulse,rgba(31,72,255,.85)) 50%,
    var(--jr-line,var(--line)) 62%, var(--jr-line,var(--line)) 100%);
  background-size:260% 100%;
  animation:jr-current 3.2s linear infinite;
}
.jr-stop:nth-child(2)::before{ animation-delay:.35s; }
.jr-stop:nth-child(3)::before{ animation-delay:.7s; }
@keyframes jr-current{ from{ background-position:130% 0; } to{ background-position:-130% 0; } }
/* an arrow in every gap, sitting on the rail just before the next node */
.jr-stop:not(:last-child)::after{
  content:""; position:absolute; top:47px; right:2px;
  width:11px; height:11px; margin-top:-5px;
  border-right:3px solid var(--jr-arrow,var(--slate-light));
  border-top:3px solid var(--jr-arrow,var(--slate-light));
  transform:rotate(45deg); border-radius:1px;
  animation:jr-arrow 3.2s var(--ease) infinite;
}
.jr-stop:nth-child(2)::after{ animation-delay:.35s; }
.jr-stop:nth-child(3)::after{ animation-delay:.7s; }
@keyframes jr-arrow{ 0%,70%,100%{ opacity:.45; } 42%{ opacity:1; } }
/* the nodes float, staggered, so the row is never completely still */
@keyframes jr-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes jr-ring{
  0%   { transform:scale(.92); opacity:.55; }
  70%  { transform:scale(1.22); opacity:0; }
  100% { transform:scale(1.22); opacity:0; }
}
.jr-node{
  position:relative;
  animation:jr-bob 3.6s ease-in-out infinite;
  width:94px; height:94px; border-radius:50%; display:grid; place-items:center;
  background:var(--jr-node-bg,#fff);
  border:3px solid var(--jr-node-br,var(--line));
  color:var(--blue); box-shadow:var(--sh-2);
  transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.jr-stop:nth-child(2) .jr-node{ animation-delay:.45s; }
.jr-stop:nth-child(3) .jr-node{ animation-delay:.9s; }
.jr-stop:nth-child(4) .jr-node{ animation-delay:1.35s; }
/* expanding halo — the "live" signal */
.jr-node::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--jr-halo,rgba(31,72,255,.6));
  animation:jr-ring 3.6s var(--ease) infinite; pointer-events:none;
}
.jr-stop:nth-child(2) .jr-node::after{ animation-delay:.45s; }
.jr-stop:nth-child(3) .jr-node::after{ animation-delay:.9s; }
.jr-stop:nth-child(4) .jr-node::after{ animation-delay:1.35s; }
.jr-stop:hover .jr-node{ animation-play-state:paused; border-color:var(--blue); box-shadow:var(--sh-blue); }
.jr-node .ic{ width:40px; height:40px; stroke-width:1.5; }
/* step number, clipped to the node's edge */
.jr-num{
  position:absolute; top:-4px; right:-4px;
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--blue); color:#fff;
  font-family:'Playfair Display',serif; font-size:16px; font-weight:700; line-height:1;
  border:3px solid var(--jr-numring,#fff);
}
.jr-wk{
  margin-top:26px; display:inline-block;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--jr-wk,var(--blue));
  background:var(--jr-wkbg,rgba(31,72,255,.08)); border-radius:var(--r-pill); padding:6px 13px;
}
.jr-stop h3{
  font-size:clamp(20px,1.7vw,25px); margin:14px 0 9px; line-height:1.2;
  color:var(--jr-fg,var(--ink));
}
.jr-stop p{ font-size:15px; line-height:1.6; color:var(--jr-mut,var(--slate)); margin:0; max-width:26ch; }

/* the free-until-you-choose bracket: spans the first three of four columns */
.jr-bracket{
  margin-top:44px; position:relative; height:40px;
  width:calc(75% - clamp(8px,1vw,15px));
  /* opens UPWARD toward the stops it covers, with the label sitting on the
     closing edge — a bracket open at the top reads as an unfinished box. */
  border:3px solid var(--jr-line,var(--line)); border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.journey + .btn-row{ margin-top:52px; }
.jr-tag{
  position:absolute; left:50%; top:100%; transform:translate(-50%,-50%);
  white-space:nowrap; font-size:13px; font-weight:700; letter-spacing:.06em;
  color:#fff; background:var(--blue);
  border-radius:var(--r-pill); padding:12px 26px; box-shadow:var(--sh-blue);
}
/* dark-ground variables */
.section--ink .journey{
  --jr-line:rgba(255,255,255,.2);
  --jr-arrow:rgba(255,255,255,.34);
  --jr-node-bg:rgba(255,255,255,.07);
  --jr-node-br:rgba(143,166,255,.36);
  --jr-numring:#0d1636;
  --jr-fg:#fff;
  --jr-mut:rgba(255,255,255,.68);
  --jr-wk:#C7D2FF;
  --jr-wkbg:rgba(31,72,255,.28);
}
.section--ink .jr-node{ color:#8FA6FF; box-shadow:none; }
.section--ink .journey{ --jr-halo:rgba(143,166,255,.7); --jr-pulse:rgba(143,166,255,1); }

@media (prefers-reduced-motion:reduce){
  .jr-node, .jr-node::after, .jr-stop::before, .jr-stop::after{ animation:none; }
  .jr-node::after{ opacity:0; }
}
@media (max-width:900px){
  .jr-stops{ grid-template-columns:1fr; gap:0; }
  .jr-stops::before{ left:37px; right:auto; top:0; bottom:0; width:3px; height:auto;
    background:linear-gradient(180deg,transparent 0,var(--jr-line,var(--line)) 4%,var(--jr-line,var(--line)) 96%,transparent 100%); }
  .jr-stop{ padding:0 0 34px 108px; }
  .jr-stop:last-child{ padding-bottom:0; }
  .jr-stop:not(:last-child)::after{ display:none; }
  .jr-node{ position:absolute; left:0; top:0; width:78px; height:78px; }
  .jr-node .ic{ width:34px; height:34px; }
  .jr-num{ width:28px; height:28px; font-size:14px; }
  .jr-wk{ margin-top:4px; }
  .jr-stop p{ max-width:none; }
  .jr-bracket{
    width:auto; height:auto; margin-top:26px; padding:0;
    border:0; border-left:3px solid var(--jr-line,var(--line)); border-radius:0;
  }
  .jr-tag{ position:static; transform:none; display:inline-block; margin-left:20px; }
}

/* seat-picker cue — the card is already a link, so this is a span, not a nested link */
.seat-go{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:600; color:var(--blue);
}
.seat-go span{ transition:transform .18s var(--ease); }
.seat:hover .seat-go span{ transform:translateX(4px); }

/* ==========================================================================
   SWIMLANE — who does what, week by week
   A 5-column grid: lane label plus four week columns. The client lane is
   deliberately sparse; the empty cell is the point of the diagram, so it is
   drawn as a dashed "Nothing" cell rather than left blank.
   The two lanes sit on tinted bands so the diagram reads as two swim lanes at
   a glance, and the week columns are separated by hairlines rather than by
   whitespace alone. Scrolls horizontally on narrow screens instead of
   collapsing — a swimlane that reflows into a list stops being a swimlane.
   ========================================================================== */
.swim{ position:relative; }
.sw-grid{
  display:grid;
  grid-template-columns:150px repeat(4,minmax(180px,1fr));
  gap:0;
  align-items:stretch;
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--sh-1); background:#fff;
}
.sw-corner{ background:var(--mist); }
.sw-wk{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); background:var(--mist);
  padding:16px 18px; border-left:1px solid var(--line);
}
.sw-lab{
  display:flex; align-items:center; gap:9px;
  font-size:15px; font-weight:700; color:var(--ink);
  padding:20px 18px; border-top:1px solid var(--line);
}
.sw-lab::before{ content:""; width:10px; height:10px; border-radius:3px; flex:none; }
.sw-lab--you{ color:var(--blue); background:rgba(31,72,255,.07); }
.sw-lab--you::before{ background:var(--blue); }
.sw-lab--us{ background:var(--mist); }
.sw-lab--us::before{ background:var(--slate-light); }
.sw-cell{
  display:flex; flex-direction:column; gap:9px;
  padding:18px 14px; border-left:1px solid var(--line); border-top:1px solid var(--line);
}
/* lane tints — the whole client row is washed blue, ours stays neutral */
.sw-lab--you ~ .sw-cell{ background:rgba(31,72,255,.045); }
.sw-lab--us ~ .sw-cell{ background:#fff; }
.sw-cell--empty{ justify-content:center; }
.sw-blk{
  font-size:13.5px; font-weight:500; line-height:1.4; color:var(--slate);
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--slate-light);
  border-radius:var(--r-sm); padding:11px 13px; box-shadow:var(--sh-1);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease);
}
.sw-blk:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.sw-blk--you{
  color:var(--ink); font-weight:600; border-left-color:var(--blue);
  background:linear-gradient(100deg,rgba(31,72,255,.06),#fff 70%);
}
.sw-none{
  font-size:12.5px; font-style:italic; color:var(--blue); text-align:center;
  border:1px dashed rgba(31,72,255,.4); background:rgba(31,72,255,.04);
  border-radius:var(--r-sm); padding:12px 13px;
}

/* the money bar underneath: free for three columns, then the first invoice */
.sw-pay{
  display:grid; grid-template-columns:150px 3fr 1fr; gap:10px; margin-top:14px;
}
.sw-pay-free, .sw-pay-start{
  text-align:center; border-radius:var(--r-pill); padding:12px 14px;
  font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.sw-pay-free{
  grid-column:2; color:#fff;
  background:linear-gradient(100deg,var(--blue),#5B7CFF);
  box-shadow:0 0 18px rgba(31,72,255,.4);
}
.sw-pay-start{ grid-column:3; color:var(--slate); background:var(--mist); border:1px solid var(--line); }

@media (max-width:900px){
  /* scroll rather than reflow — the lanes have to stay side by side to read */
  .swim{ overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
  .sw-grid, .sw-pay{ min-width:820px; }
}

/* ==========================================================================
   ROLE CARDS — photo grid, click opens the dialog below
   The name sits ON the photo under a gradient scrim rather than on a solid blue
   slab. Two reasons: the slab read as a label bolted to a picture, and these six
   photos have slightly different backgrounds and tones — a scrim unifies them
   into one set where a hard block only highlighted the differences.
   ========================================================================== */
.rcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px); }
.rcard{
  position:relative; display:block; text-decoration:none; cursor:pointer;
  border-radius:var(--r-lg); overflow:hidden; background:var(--ink);
  box-shadow:var(--sh-1); isolation:isolate;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.rcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-3); }
.rcard:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }
.rc-img{ display:block; aspect-ratio:4/5; overflow:hidden; }
.rc-img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease), filter .3s var(--ease);
}
.rcard:hover .rc-img img{ transform:scale(1.05); }

/* the scrim + label, sitting over the bottom of the photo */
.rc-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:64px 20px 20px; color:#fff;
  background:linear-gradient(to top,
    rgba(8,13,38,.94) 0%, rgba(8,13,38,.82) 34%,
    rgba(8,13,38,.42) 64%, transparent 100%);
  transition:padding-bottom .24s var(--ease);
}
.rcard:hover .rc-bar{ padding-bottom:26px; }
.rc-txt{ min-width:0; }
.rc-bar b{
  display:block; font-family:'Playfair Display',serif;
  font-size:21px; font-weight:700; line-height:1.15; letter-spacing:-.01em;
}
.rc-bar em{
  display:block; font-style:normal; font-size:13px; line-height:1.4; margin-top:6px;
  color:rgba(255,255,255,.72);
}
/* the arrow becomes a filled disc on hover — the affordance that says "opens" */
.rc-bar i{
  flex:none; font-style:normal; font-size:15px; line-height:1;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.28);
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.rcard:hover .rc-bar i{ background:var(--blue); border-color:var(--blue); transform:translateX(3px); }

.rc-tag{ top:16px; left:16px; }
.rc-note{
  margin-top:30px; text-align:center; font-size:12px; color:var(--slate-light);
  max-width:620px; margin-inline:auto; line-height:1.6;
}
@media (max-width:900px){ .rcards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .rcards{ grid-template-columns:1fr; } }

/* ---------- the dialog ---------- */
.rmodal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:clamp(16px,4vw,40px); }
.rm-scrim{
  position:absolute; inset:0; background:rgba(10,17,48,.62);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s var(--ease);
}
.rmodal.is-open .rm-scrim{ opacity:1; }
.rm-panel{
  position:relative; z-index:1; display:grid; grid-template-columns:340px 1fr;
  width:min(880px,100%); max-height:min(620px,88vh);
  /* the PANEL must not scroll — only the text column. Scrolling the panel drags
     the photo out of frame, and a 320px-wide full-bleed crop of a 4:5 portrait
     zooms straight into the face. */
  overflow:hidden;
  background:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-3);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.rmodal.is-open .rm-panel{ opacity:1; transform:none; }
.rm-media{ background:var(--mist); }
.rm-media img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; display:block; }
.rm-body{ padding:clamp(26px,3vw,38px); min-width:0; overflow-y:auto; }
.rm-body h3{ font-size:clamp(24px,2.4vw,31px); margin:8px 0 0; line-height:1.15; }
.rm-x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--ink);
  cursor:pointer; box-shadow:var(--sh-1); transition:background .16s var(--ease);
}
.rm-x:hover{ background:#fff; color:var(--blue); }

/* the cloned detail block — the wrapper itself is never cloned, only its
   innerHTML, so it needs no display rule. It MUST stay hidden on the card. */
[hidden]{ display:none !important; }
.rm-body .rc-d-sub{ display:block; font-size:16.5px; color:var(--slate); line-height:1.55; margin-top:12px; }
.rm-body .rc-d-h{
  display:block; margin:26px 0 12px; padding-top:18px; border-top:1px solid var(--line);
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--slate-light);
}
.rm-body ul{ list-style:none; margin:0; padding:0; }
.rm-body ul li{ position:relative; padding:6px 0 6px 22px; font-size:14.5px; line-height:1.5; color:var(--slate); }
.rm-body ul li::before{
  content:""; position:absolute; left:2px; top:12px; width:5px; height:9px;
  border-right:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue);
  transform:rotate(45deg);
}
.rm-body .rc-d-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.rm-body .rc-d-tags em{
  font-style:normal; font-size:13px; font-weight:500; color:var(--slate);
  background:var(--mist); border-radius:var(--r-pill); padding:7px 14px;
}
.rm-body .rc-d-facts{ display:grid; grid-template-columns:1fr auto; gap:0; font-size:13.5px; }
.rm-body .rc-d-facts b,
.rm-body .rc-d-facts i{ padding:10px 0; border-bottom:1px solid var(--line); font-style:normal; }
.rm-body .rc-d-facts b{ font-weight:500; color:var(--slate); }
.rm-body .rc-d-facts i{ font-weight:600; color:var(--ink); text-align:right; }
.rm-body .btn-row{ margin-top:28px; }
.rm-more{ display:inline-flex; margin-top:18px; font-size:14px; }

@media (max-width:720px){
  .rm-panel{ grid-template-columns:1fr; grid-template-rows:auto 1fr; max-height:92vh; }
  .rm-media{ height:210px; }
  .rm-media img{ object-position:center 22%; }
}
@media (prefers-reduced-motion:reduce){
  .rm-panel,.rm-scrim{ transition:none; }
  .rcard,.rc-img img{ transition:none; }
}

/* Homepage cut of the funnel: names only, no per-gate description line, so the
   rows are shorter and the section stays a glance rather than a read. */
.funnel--tight .fn-row{ padding:13px 20px; }
.funnel--tight .fn-t b{ margin-bottom:0; font-size:16px; }

/* the quote page leads with the tool's name, not a restated eyebrow */
.calc-title{ font-size:clamp(36px,5vw,58px); line-height:1.05; margin:0 0 14px; }

/* ==========================================================================
   PUNCHLINE — the construction cash-flow argument
   The only place on the page that sells the seat on money in the bank rather
   than hours off the desk. Deliberately typographic: a big serif statement on
   a tinted panel, no icons competing with it.
   ========================================================================== */
.punch{
  background:
    radial-gradient(760px 420px at 12% 0%, rgba(31,72,255,.10), transparent 62%),
    linear-gradient(165deg, var(--mist), #fff 70%);
  border:1px solid var(--line); border-radius:var(--r-xl);
  padding:clamp(34px,4.4vw,64px);
  box-shadow:var(--sh-2);
}
.punch-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue); margin-bottom:18px;
}
.punch h2{ font-size:clamp(30px,4vw,50px); line-height:1.12; margin:0; }
.punch h2 .it{ font-style:italic; color:var(--blue); }
.punch-sub{ margin-top:22px; max-width:62ch; font-size:16.5px; line-height:1.65; color:var(--slate); }
.punch-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px);
  margin-top:34px; padding-top:28px; border-top:1px solid var(--line);
}
.punch-i{ font-size:14px; line-height:1.55; color:var(--slate); }
.punch-i b{
  display:block; font-family:'Playfair Display',serif; font-size:20px; font-weight:700;
  color:var(--ink); margin-bottom:6px;
}
.punch .btn-row{ margin-top:32px; }
@media (max-width:760px){ .punch-row{ grid-template-columns:1fr; gap:18px; } }

/* ==========================================================================
   SEAT LIST — the roles-page index
   Replaced a second card grid that duplicated the long-form sections below it.
   One row per seat, the whole row is the target, and the rule between rows does
   the work a card border used to.
   ========================================================================== */
.seatlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.seatlist li{ border-bottom:1px solid var(--line); }
.seatlist a{
  display:grid; grid-template-columns:52px minmax(0,15rem) 1fr 28px;
  align-items:center; gap:clamp(12px,2vw,26px);
  padding:20px 12px; text-decoration:none;
  transition:background .16s var(--ease), padding-left .16s var(--ease);
}
.seatlist a:hover{ background:var(--mist); padding-left:20px; }
.sl-n{
  font-family:'Playfair Display',serif; font-size:15px; font-weight:700;
  color:var(--blue); letter-spacing:.02em;
}
.seatlist b{ font-size:19px; font-weight:600; color:var(--ink); line-height:1.25; }
.seatlist em{ font-style:normal; font-size:14.5px; color:var(--slate); line-height:1.45; }
.seatlist i{
  font-style:normal; font-size:18px; color:var(--blue); justify-self:end;
  transition:transform .18s var(--ease);
}
.seatlist a:hover i{ transform:translateX(5px); }
.sl-alt a{ background:linear-gradient(100deg,rgba(31,72,255,.05),transparent 60%); }
@media (max-width:720px){
  .seatlist a{ grid-template-columns:38px 1fr 22px; row-gap:4px; padding:16px 8px; }
  .seatlist em{ grid-column:2 / -1; }
}

/* ==========================================================================
   FUNNEL — the screening gates   [restored]
   Numbered rows with a bar that narrows down the list. The bars carry NO
   percentage: the narrowing is the argument, and the caption says so.
   Row 6 is the client's own gate, so it is accented rather than muted.
   ========================================================================== */
.funnel{ display:flex; flex-direction:column; gap:10px; max-width:1000px; margin-inline:auto; }
.fn-row{
  display:grid; grid-template-columns:46px minmax(0,1fr) minmax(120px,300px);
  align-items:center; gap:clamp(14px,2vw,26px);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md); padding:16px 20px;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.fn-row:hover{ background:rgba(255,255,255,.085); border-color:rgba(143,166,255,.34); }
.fn-n{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:rgba(31,72,255,.26); border:1px solid rgba(143,166,255,.36);
  font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:#C7D2FF;
}
.fn-t{ min-width:0; font-size:13.5px; line-height:1.55; color:rgba(255,255,255,.62); }
.fn-t b{ display:block; font-size:17px; font-weight:600; color:#fff; margin-bottom:5px; letter-spacing:-.01em; }
.fn-bar{ display:block; height:14px; background:rgba(255,255,255,.08); border-radius:var(--r-pill); overflow:hidden; }
.fn-bar i{
  display:block; height:100%; width:var(--w); border-radius:var(--r-pill);
  background:linear-gradient(90deg,rgba(143,166,255,.5),rgba(143,166,255,.75));
  animation:fn-grow 1s var(--ease) both;
}
@keyframes fn-grow{ from{ width:0; } to{ width:var(--w); } }
.fn-row--you{ background:rgba(31,72,255,.16); border-color:rgba(31,72,255,.5); }
.fn-row--you .fn-n{ background:var(--blue); border-color:var(--blue); color:#fff; }
.fn-row--you .fn-bar i{ background:var(--blue); }
.fn-note{
  max-width:640px; margin:26px auto 0; text-align:center;
  font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.42);
}
.funnel--tight .fn-row{ padding:13px 20px; }
.funnel--tight .fn-t b{ margin-bottom:0; font-size:16px; }
@media (prefers-reduced-motion:reduce){ .fn-bar i{ animation:none; } }
@media (max-width:760px){
  .fn-row{ grid-template-columns:40px minmax(0,1fr); row-gap:12px; }
  .fn-n{ width:40px; height:40px; font-size:18px; }
  .fn-bar{ grid-column:1 / -1; }
}

/* ==========================================================================
   ACTION PLAN — the first ninety days as four dated columns   [restored]
   A rail runs behind the date markers so it reads as one timeline rather than
   four unrelated cards. Each column ends with who owns that stretch.
   ========================================================================== */
.plan{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.6vw,20px); position:relative; }
.plan::before{ content:""; position:absolute; left:22px; right:22px; top:7px; height:2px; background:var(--line); }
.pl-col{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:0 22px 22px; margin-top:34px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.pl-col:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.pl-when{
  position:absolute; top:-34px; left:0; display:flex; align-items:center; gap:9px;
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
}
.pl-dot{ width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--blue); flex:none; }
.pl-h{ font-family:'Playfair Display',serif; font-size:20px; font-weight:700; color:var(--ink); padding:22px 0 14px; }
.pl-list{ list-style:none; margin:0 0 20px; padding:16px 0 0; border-top:1px solid var(--line); }
.pl-list li{ position:relative; padding:7px 0 7px 22px; font-size:13.5px; line-height:1.5; color:var(--slate); }
.pl-list li::before{
  content:""; position:absolute; left:2px; top:13px; width:5px; height:9px;
  border-right:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue);
  transform:rotate(45deg);
}
.pl-own{
  margin-top:auto; align-self:flex-start;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate); background:var(--mist); border-radius:var(--r-pill); padding:7px 14px;
}
.pl-col--end .pl-own{ color:var(--blue); background:rgba(31,72,255,.1); }
@media (max-width:900px){ .plan{ grid-template-columns:repeat(2,1fr); } .plan::before{ display:none; } }
@media (max-width:560px){ .plan{ grid-template-columns:1fr; } }

/* MOST REQUESTED badge — neon   [restored] */
.rc-tag{
  position:absolute; z-index:3; overflow:hidden;
  font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; border-radius:var(--r-pill); padding:8px 15px;
  background:linear-gradient(103deg,#1B3FE8 0%,#4E74FF 46%,#1B3FE8 100%);
  border:1px solid rgba(180,200,255,.55);
  text-shadow:0 0 9px rgba(255,255,255,.8), 0 0 2px rgba(255,255,255,.6);
  box-shadow:
    0 0 10px rgba(31,72,255,.85), 0 0 26px rgba(88,124,255,.55),
    0 6px 18px rgba(10,17,48,.3), inset 0 1px 0 rgba(255,255,255,.4);
  animation:neon-breathe 2.8s ease-in-out infinite;
}
.rc-tag::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.85) 48%, transparent 64%);
  transform:translateX(-130%);
  animation:neon-sheen 3.6s var(--ease) infinite;
}
@keyframes neon-breathe{
  50%{ box-shadow:0 0 16px rgba(31,72,255,1), 0 0 40px rgba(110,145,255,.75),
        0 6px 18px rgba(10,17,48,.3), inset 0 1px 0 rgba(255,255,255,.55); }
}
@keyframes neon-sheen{ 0%,55%{ transform:translateX(-130%); } 100%{ transform:translateX(130%); } }
@media (prefers-reduced-motion:reduce){
  .rc-tag{ animation:none; }
  .rc-tag::after{ animation:none; opacity:0; }
}

/* the three hard pass/fail gates are called out — everything else is a tracked
   stage, and the difference is the whole point of the process */
.fn-row--gate{ border-color:rgba(143,166,255,.34); }
.fn-gate{
  display:inline-block; margin-top:7px;
  font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#C7D2FF; background:rgba(31,72,255,.28); border-radius:var(--r-pill); padding:4px 10px;
}
.fn-gate--you{ color:#fff; background:var(--blue); }
.funnel--tight .fn-t b{ margin-bottom:0; }
.funnel--tight .fn-row:has(.fn-gate) .fn-t b{ margin-bottom:2px; }

/* full-time / part-time, shown as the choice it is rather than a line of text */
.ftpt{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; margin-bottom:6px; }
.ftpt-o{
  text-align:center; padding:14px 10px;
  background:var(--mist); border:1px solid var(--line); border-radius:var(--r-md);
}
.ftpt-o b{ display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.ftpt-o span{ display:block; font-size:12px; color:var(--slate); margin-top:4px; }
.ftpt-or{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-light); }