/* ==========================================================================
   Knox Findata (Pty) Ltd. Site stylesheet.
   Build: Draft 1 for Kalla's review
   Design system: Tee You Up (Pty) Ltd

   Light site with dark heroes. Every component reads its colours from the
   semantic tokens below; the .dark scope swaps those tokens for the hero and
   inner-page heroes, so one set of component rules serves both.
   ========================================================================== */

/* ==========================================================================
   Self-hosted fonts. Subset to Latin, served from this origin.
   Replaces the render-blocking fonts.googleapis.com stylesheet.
   Source Sans 3 is the variable font, so in-between weights such as
   560, 640 and 650 render exactly rather than rounding to a static weight.
   ========================================================================== */
@font-face{
  font-family:'Source Sans 3';
  src:url('../fonts/source-sans-3-var.woff') format('woff-variations'),
      url('../fonts/source-sans-3-var.woff') format('woff');
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-400.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('../fonts/ibm-plex-mono-500.woff') format('woff');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Anton';
  src:url('../fonts/anton-400.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}



/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  --hero-img:url('../img/cleaning-company-owner-payroll-savings.jpg');
  --hero-img:image-set(url('../img/cleaning-company-owner-payroll-savings.webp') type('image/webp'), url('../img/cleaning-company-owner-payroll-savings.jpg') type('image/jpeg'));

  /* brand constants */
  --ink:#0A0A0B;
  --knox-dark:#141416;
  --bone:#EDECE8;
  --teal:#149A9C;
  --teal-lift:#1AB8BA;
  --teal-deep:#0E7F81;
  --gold:#D4A24E;
  --gold-lift:#E3B86C;
  --gold-deep:#9A6E22;
  --teal-ink:#0B3537;   /* dark teal floor under the heroes */
  --grad:linear-gradient(100deg,var(--teal),var(--gold));

  /* semantic, light */
  --bg:#FFFFFF;
  --bg-2:#F6F6F4;
  --fg:#141416;
  --fg-2:#4A4A52;
  --fg-3:#767680;
  --surface:#FFFFFF;
  --surface-2:#F6F6F4;
  --line:#E7E7E3;
  --line-2:#D5D5D0;
  --teal-text:var(--teal-deep);
  --tint:rgba(20,154,156,.09);
  --tint-line:rgba(20,154,156,.22);
  --shadow:0 1px 2px rgba(20,20,22,.04), 0 14px 34px -22px rgba(20,20,22,.22);
  --shadow-lift:0 1px 2px rgba(20,20,22,.05), 0 24px 48px -24px rgba(20,20,22,.28);

  /* type */
  --display:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
  --body:'Source Sans 3',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* rhythm */
  --wrap:1200px;
  --wrap-narrow:860px;
  --gut:24px;
  --sec:104px;
  --r:14px;
  --r-lg:20px;

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

  color-scheme:light;
}

/* dark scope, used by the heroes */
.dark{
  --bg:var(--ink);
  --fg:#EDECE8;
  --fg-2:#C9C8C4;
  --fg-3:#9A9AA3;
  --surface:rgba(23,23,26,.8);
  --surface-2:rgba(29,29,33,.8);
  --line:#26262B;
  --line-2:#33333A;
  --teal-text:var(--teal-lift);
  --tint:rgba(20,154,156,.12);
  --tint-line:rgba(20,154,156,.3);
  --shadow:0 34px 80px -30px rgba(0,0,0,.85);
  --shadow-lift:0 40px 90px -30px rgba(0,0,0,.9);
  color-scheme:dark;
  color:var(--fg);
}

@media (max-width:860px){
  :root{ --sec:68px; --gut:20px; }
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:17px;
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6,p{ margin:0; }
table{ border-collapse:collapse; width:100%; }

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

.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;
}

.skip{
  position:absolute; top:-100px; left:16px; z-index:200;
  background:var(--teal); color:#02191A; padding:12px 20px;
  border-radius:0 0 10px 10px; font-weight:700;
}
.skip:focus{ top:0; }

/* --------------------------------------------------------------------------
   3. Page layers
   The photo and the logomark are fixed to the viewport. White sections paint
   over the photo; the logomark sits between every section's background and
   its content, in difference blend so it reads on dark and on white alike.
   -------------------------------------------------------------------------- */
main{ position:relative; z-index:1; }

.page-mark{
  position:fixed; pointer-events:none;
  right:-8vw; top:50%; transform:translateY(-50%);
  width:min(820px,56vw); height:auto;
  opacity:.06; z-index:0;
  mix-blend-mode:difference;
}
@media (max-width:900px){
  .page-mark{ width:min(520px,86vw); opacity:.045; right:-22vw; }
}

section{ position:relative; }
/* :where keeps this at zero specificity so .hero::before etc. can override it */
:where(section:not(.route))::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--bg);
}
.route{ position:static; }
.wrap{ position:relative; z-index:2; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
h1,h2,h3{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  line-height:1.06; letter-spacing:.005em; color:var(--fg);
  text-wrap:balance;
}
h4,h5,h6{ font-family:var(--body); font-weight:700; line-height:1.3; color:var(--fg); }

h1{ font-size:clamp(34px,5.4vw,60px); }
h2{ font-size:clamp(32px,4.4vw,54px); }
h3{ font-size:clamp(19px,2.1vw,25px); }
h4{ font-size:18px; }

h1.h1-long{ font-size:clamp(34px,4vw,56px); line-height:1.04; }


.accent{ color:var(--teal); }

.eyebrow{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--teal-text);
  font-weight:500;
  margin-bottom:18px;
}
.eyebrow--gold{ color:var(--gold-deep); }
.eyebrow--split span + span{ color:inherit; }
.dark .eyebrow--gold{ color:var(--gold-lift); }

.lede{ font-size:clamp(17px,1.5vw,20px); color:var(--fg-2); line-height:1.66; }
.muted{ color:var(--fg-3); }
.tiny{ font-size:13.5px; line-height:1.6; color:var(--fg-3); }

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.prose p + p{ margin-top:1.05em; }
.prose strong{ color:var(--fg); font-weight:650; }

/* compact card heading, h4 weight at h3 level */
.h-sm{
  font-family:var(--body); font-size:17px; font-weight:650;
  text-transform:none; letter-spacing:0; line-height:1.38;
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ max-width:var(--wrap-narrow); }

.sec{ padding-block:var(--sec); }
.sec-sm{ padding-block:calc(var(--sec) * .62); }
.sec-line{ }

/* alternating section fills are retired: every section is white */
.sec-dark,.sec-panel{ }

.head{ max-width:760px; margin-bottom:52px; }
.head--center{ margin-inline:auto; text-align:center; }
.head h2 + p{ margin-top:20px; }

.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .g3,.g4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .g2,.g3,.g4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   6. Header and navigation
   -------------------------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:90;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
/* blur lives on a pseudo-element: a backdrop-filter on the header itself would
   make it the containing block for the fixed mobile nav panel */
.hdr::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  transition:background .3s var(--ease);
}
.hdr.is-stuck{ border-bottom-color:var(--line); }
.hdr.is-stuck::before{ background:rgba(255,255,255,.94); }

.hdr-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; min-height:74px;
}

.brand{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.brand img{ height:34px; width:auto; }
.brand-tag{
  border-left:1px solid var(--line-2); padding-left:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-2); line-height:1.5; max-width:190px;
}
@media (max-width:1280px){ .brand-tag{ display:none; } }
.brand:focus-visible{ outline-offset:6px; }

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a,.nav button{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 13px; border-radius:9px;
  font-size:14.5px; font-weight:560; color:var(--fg-2); letter-spacing:.005em;
  transition:color .2s var(--ease), background .2s var(--ease);
  white-space:nowrap;
}
.nav a:hover,.nav button:hover{ color:var(--fg); background:var(--bg-2); }
.nav a[aria-current="page"]{ color:var(--teal-text); box-shadow:inset 0 -2px 0 var(--teal); border-radius:0; }

.has-menu{ position:relative; }
.has-menu > button::after{
  content:''; width:5px; height:5px; margin-top:-3px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  transform:rotate(45deg); transition:transform .25s var(--ease); opacity:.8;
}
.has-menu[data-open="true"] > button::after{ transform:rotate(-135deg) translate(-2px,-2px); }

.menu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:286px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:8px;
  box-shadow:0 24px 60px -18px rgba(20,20,22,.28);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.has-menu[data-open="true"] .menu{ opacity:1; visibility:visible; transform:none; }

.menu a{
  display:block; padding:11px 13px; border-radius:9px;
  font-size:14.5px; font-weight:560; color:var(--fg-2);
  white-space:normal; line-height:1.4;
}
.menu a span{ display:block; font-weight:400; font-size:12.5px; color:var(--fg-3); margin-top:2px; }
.menu a:hover{ background:var(--tint); color:var(--fg); }

.hdr .btn{ margin-left:10px; }
/* .nav a sets its own colour, so the pill needs a more specific rule */
.nav a.btn--primary,.nav a.btn--primary:hover{ color:#fff; background:var(--teal-deep); }
.nav a.btn--primary:hover{ background:var(--teal); }

.burger{
  display:none; width:42px; height:42px; border-radius:10px;
  border:1px solid var(--line-2); align-items:center; justify-content:center;
}
.burger span{
  display:block; width:17px; height:1.6px; background:var(--fg);
  position:relative; transition:background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:''; position:absolute; left:0; width:17px; height:1.6px; background:var(--fg);
  transition:transform .28s var(--ease), top .2s var(--ease);
}
.burger span::before{ top:-6px; }
.burger span::after{ top:6px; }
body.nav-open .burger span{ background:transparent; }
body.nav-open .burger span::before{ top:0; transform:rotate(45deg); }
body.nav-open .burger span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1040px){
  .burger{ display:inline-flex; }
  .hdr .btn--nav{ display:none; }
  .nav{
    position:fixed; inset:74px 0 0 0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg);
    padding:22px var(--gut) 48px;
    overflow-y:auto;
    transform:translateX(100%);
    visibility:hidden; pointer-events:none;
    transition:transform .34s var(--ease), visibility .34s;
    margin-left:0;
  }
  body.nav-open{ overflow:hidden; }
  body.nav-open .nav{ transform:none; visibility:visible; pointer-events:auto; }
  .nav a,.nav button{
    padding:14px 4px; font-size:17px; border-radius:0;
    border-bottom:1px solid var(--line); justify-content:space-between; width:100%;
  }
  .nav a:hover,.nav button:hover{ background:none; }
  .menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:none; padding:0 0 8px 14px;
    min-width:0; display:none;
  }
  .has-menu[data-open="true"] .menu{ display:block; }
  .menu a{ border-bottom:0; padding:11px 0; font-size:15px; color:var(--fg-3); }
  .nav .btn{ margin:22px 0 0; justify-content:center; }
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px;
  font-family:var(--body); font-size:15px; font-weight:650;
  letter-spacing:0; text-transform:none;
  transition:transform .2s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  border:1px solid transparent; text-align:center; line-height:1.25;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }

.btn--primary{ background:var(--teal-deep); color:#fff; }
.btn--primary:hover{ background:var(--teal); box-shadow:0 14px 34px -12px rgba(20,154,156,.55); }

.btn--gold{ background:var(--gold); color:#1D1402; }
.btn--gold:hover{ background:var(--gold-lift); box-shadow:0 14px 34px -12px rgba(212,162,78,.6); }

.btn--ghost{ border:1.5px solid var(--teal-deep); color:var(--teal-deep); background:transparent; }
.btn--ghost:hover{ background:var(--tint); }

.btn--lg{ padding:17px 32px; font-size:16px; }
.btn--block{ width:100%; }

.btns{ display:flex; flex-wrap:wrap; gap:13px; align-items:center; }

.textlink{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:650; font-size:14.5px; color:var(--teal-text);
  border-bottom:1px solid var(--tint-line); padding-bottom:2px;
  transition:border-color .2s var(--ease), gap .2s var(--ease);
}
.textlink:hover{ border-bottom-color:var(--teal-text); gap:11px; }
.textlink::after{ content:'\2192'; font-size:1.05em; }

/* --------------------------------------------------------------------------
   8. Hero (home): white, photo on the right fading into the page, type left
   -------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate; z-index:1;
  padding-block:clamp(44px,5.5vw,84px) clamp(44px,5vw,72px);
  background:var(--bg);
}
/* the photo: right-hand panel, soft fade into white on its left edge and foot */
.hero::before{
  content:''; position:absolute; top:0; right:0; bottom:0; left:auto; width:62%; z-index:-1;
  background:var(--hero-img) 70% 0% / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 40%),
                     linear-gradient(180deg, #000 78%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 40%),
             linear-gradient(180deg, #000 78%, transparent 100%);
  mask-composite:intersect;
}
.hero-text{ position:relative; max-width:58%; }
.hero h1{ max-width:none; }
.hero-body{ margin-top:clamp(22px,2.4vw,30px); max-width:56ch; color:var(--fg-2); }
.hero-body p + p{ margin-top:.9em; }
.hero-body strong{ color:var(--fg); }
.hero .btns{ margin-top:30px; }

/* service strip under the CTAs: two columns, hairline dividers */
.svc-strip{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-top:clamp(36px,4vw,56px);
  background:transparent;
  border:1px solid var(--line-2); border-radius:var(--r-lg);
}
.svc-strip li{ display:flex; }
.svc-strip li + li{ border-left:1px solid var(--line-2); }
.svc-strip a{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:18px 20px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fg); line-height:1.4; transition:color .2s var(--ease);
}
.svc-strip .ico{ width:34px; height:34px; margin:0; border-radius:0; background:transparent; border:0; color:var(--teal-deep); flex:0 0 auto; }
.svc-strip .ico svg{ width:26px; height:26px; stroke-width:1.5; }
.svc-strip a:hover{ color:var(--teal-text); }
@media (max-width:1100px){
  .svc-strip{ grid-template-columns:1fr 1fr; }
  .svc-strip li + li{ border-left:0; }
  .svc-strip li:nth-child(even){ border-left:1px solid var(--line-2); }
  .svc-strip li:nth-child(n+3){ border-top:1px solid var(--line-2); }
}
@media (max-width:560px){
  .svc-strip{ grid-template-columns:1fr; }
  .svc-strip li:nth-child(even){ border-left:0; }
  .svc-strip li + li{ border-top:1px solid var(--line-2); }
}
@media (min-width:1500px){ .hero-text{ max-width:52%; } }

/* qualification cards (no longer in the hero, kept for other uses) */
.qual{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,22px);
  margin-top:clamp(40px,4.5vw,60px);
}
.qual > div{
  position:relative; background:var(--bone); border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-lg); box-shadow:0 18px 44px -24px rgba(0,0,0,.65);
  padding:clamp(26px,2.9vw,38px) clamp(22px,2.4vw,32px); overflow:hidden;
}
.qual > div::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--grad); }
.qual .k{
  font-family:var(--display); font-size:clamp(31px,4vw,50px); line-height:1; text-transform:uppercase;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.qual .v{ font-size:clamp(14px,1.1vw,15.5px); color:#4A4A52; margin-top:14px; line-height:1.5; }
@media (max-width:760px){ .qual{ grid-template-columns:1fr; } }

@media (max-width:1100px){
  .hero-text{ max-width:62%; }
  .hero::before{ width:58%; background-position:62% 0%; }
}
/* phones and tablets: photo band across the top, fading down into the page */
@media (max-width:900px){
  .hero{ padding-top:calc(min(68vw,420px) - 24px); }
  .hero::before{
    top:0; right:0; left:0; bottom:auto; width:100%; height:min(68vw,420px);
    background:var(--hero-img) 62% 0% / cover no-repeat;
    -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(180deg, #000 55%, transparent 100%);
    mask-composite:add;
  }
  .hero-text{ max-width:none; }
}
@media (max-width:560px){
  .hero .btns .btn{ width:100%; }
}

/* --------------------------------------------------------------------------
   9. Page hero (inner pages): same treatment, narrower photo
   -------------------------------------------------------------------------- */
.phero{
  position:relative; overflow:hidden; isolation:isolate; z-index:1;
  padding-block:clamp(44px,5.5vw,76px) clamp(40px,5vw,64px);
  background:var(--bg);
}
.phero::before{
  content:''; position:absolute; top:0; right:0; bottom:0; left:auto; width:54%; z-index:-1;
  background:var(--hero-img) 72% 12% / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 45%),
                     linear-gradient(180deg, #000 70%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent 0%, #000 45%),
             linear-gradient(180deg, #000 70%, transparent 100%);
  mask-composite:intersect;
  opacity:.9;
}
.phero > .wrap > *{ max-width:58%; }
.phero h1{ max-width:none; }
.phero .lede{ margin-top:20px; max-width:58ch; }
.phero .btns{ margin-top:28px; }
@media (max-width:900px){
  .phero{ padding-top:calc(min(52vw,320px) - 20px); }
  .phero::before{
    top:0; right:0; left:0; bottom:auto; width:100%; height:min(52vw,320px);
    background:var(--hero-img) 62% 10% / cover no-repeat;
    -webkit-mask-image:linear-gradient(180deg, #000 50%, transparent 100%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(180deg, #000 50%, transparent 100%);
    mask-composite:add;
  }
  .phero > .wrap > *{ max-width:none; }
}

.crumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:22px; font-size:12.5px; color:var(--fg-3); }
.crumbs a{ color:var(--fg-3); }
.crumbs a:hover{ color:var(--teal-text); }
.crumbs li + li::before{ content:'/'; margin-right:8px; color:var(--line-2); }
.crumbs li{ display:flex; align-items:center; gap:8px; }

/* --------------------------------------------------------------------------
   10. Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px);
  box-shadow:var(--shadow);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  height:100%;
}
.card:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.card h3{ font-size:clamp(18px,1.9vw,22px); }
.card h4{ margin-bottom:10px; }
.card p{ margin-top:13px; color:var(--fg-2); font-size:15.5px; line-height:1.62; }
.card .num{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  color:var(--teal-text); display:block; margin-bottom:14px;
}

.card--edge{ position:relative; overflow:hidden; padding-left:clamp(26px,2.8vw,36px); }
.card--edge::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad);
}

.card--ring{ position:relative; border-color:transparent; }
.card--ring::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

.card--pad-lg{ padding:clamp(30px,3.4vw,46px); }

/* centred icon cards, the pattern from the reference */
.card--centre{ text-align:center; padding-top:clamp(34px,3.6vw,48px); }
.card--centre .ico{ margin-inline:auto; width:56px; height:56px; border-radius:14px; margin-bottom:24px; }
.card--centre .ico svg{ width:24px; height:24px; }

.pillar .tag{
  font-family:var(--display); text-transform:uppercase;
  font-size:clamp(26px,3vw,36px); line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.pillar p{ margin-top:16px; color:var(--fg-2); font-size:16px; }

.ico{
  width:44px; height:44px; border-radius:11px;
  display:grid; place-items:center; margin-bottom:18px;
  background:var(--tint); border:1px solid var(--tint-line);
  color:var(--teal-text); flex:0 0 auto;
}
.ico svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ico--gold{ background:rgba(212,162,78,.12); border-color:rgba(212,162,78,.3); color:var(--gold-deep); }
.dark .ico--gold{ color:var(--gold-lift); }

/* --------------------------------------------------------------------------
   11. Lists
   -------------------------------------------------------------------------- */
.ticks li{ position:relative; padding-left:30px; font-size:15.5px; color:var(--fg-2); line-height:1.6; }
.ticks li + li{ margin-top:13px; }
.ticks li::before{
  content:''; position:absolute; left:4px; top:9px;
  width:7px; height:7px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 0 3px var(--tint);
}
.ticks--gold li::before{ background:var(--gold); box-shadow:0 0 0 3px rgba(212,162,78,.15); }

.ticks--check li{ padding-left:32px; }
.ticks--check li::before{
  content:''; left:3px; top:5px; width:15px; height:9px; border-radius:0;
  background:none; box-shadow:none;
  border-left:2px solid var(--teal-text); border-bottom:2px solid var(--teal-text);
  transform:rotate(-45deg);
}

/* filled teal circle with a check, the reference's bullet style */
.ticks--ring li{ padding-left:34px; }
.ticks--ring li::before{
  content:''; left:0; top:4px; width:20px; height:20px; border-radius:50%;
  background:var(--teal); box-shadow:none;
}
.ticks--ring li::after{
  content:''; position:absolute; left:6px; top:9px; width:8px; height:5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);
}

.cols-2{ columns:2; column-gap:44px; }
.cols-2 li{ break-inside:avoid; -webkit-column-break-inside:avoid; }
@media (max-width:720px){ .cols-2{ columns:1; } }

.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips li{
  border:1px solid var(--line); background:var(--surface);
  border-radius:999px; padding:9px 17px; font-size:14px; color:var(--fg-2);
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.chips li:hover{ border-color:var(--tint-line); color:var(--fg); }

/* pull quote with a teal bar */
.pull{
  border-left:3px solid var(--teal); padding:6px 0 6px 20px;
  font-size:clamp(16.5px,1.3vw,18px); color:var(--fg); font-weight:500; line-height:1.6;
}

/* photo slot, marked as such until photography is supplied */
.photo-slot{
  position:relative; overflow:hidden; border-radius:18px;
  aspect-ratio:3/4; width:100%;
  background:linear-gradient(135deg, rgba(20,154,156,.16), rgba(212,162,78,.08)), var(--bg-2);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  display:grid; place-items:center;
}
.photo-slot img{ width:46%; opacity:.16; filter:grayscale(1) brightness(.2); }
.photo-slot span{
  position:absolute; left:18px; bottom:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3);
}
@media (max-width:900px){ .photo-slot{ aspect-ratio:4/3; } }

/* --------------------------------------------------------------------------
   12. Steps
   -------------------------------------------------------------------------- */
.steps{ counter-reset:st; position:relative; }
.steps li{ counter-increment:st; position:relative; padding:0 0 34px 64px; }
.steps li:last-child{ padding-bottom:0; }
.steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute; left:0; top:0;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  color:var(--teal-text);
  background:var(--surface); border:1px solid var(--tint-line);
  z-index:1;
}
.steps li::after{
  content:''; position:absolute; left:22px; top:48px; bottom:-4px; width:1px;
  background:linear-gradient(180deg,var(--tint-line),var(--line));
}
.steps li:last-child::after{ display:none; }
.steps h3{ font-size:clamp(17px,1.7vw,20px); padding-top:9px; }
.steps p{ margin-top:10px; color:var(--fg-2); font-size:15.5px; }

.steps--row{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; counter-reset:st; }
.steps--row li{ padding:0; }
.steps--row li::before{ position:static; margin-bottom:18px; }
.steps--row li::after{
  left:48px; right:0; top:22px; bottom:auto; width:auto; height:1px;
  background:linear-gradient(90deg,var(--tint-line),var(--line));
}
.steps--row h3{ padding-top:0; }
@media (max-width:980px){
  .steps--row{ grid-template-columns:repeat(2,1fr); }
  .steps--row li::after{ display:none; }
}
@media (max-width:560px){ .steps--row{ grid-template-columns:1fr; } }

.sec-process{ }
.sec-process .head{ margin-bottom:clamp(44px,5vw,64px); }
.sec-process .steps--row{ gap:clamp(22px,3vw,40px); }
.sec-process .steps--row li::before{
  width:52px; height:52px; font-size:13.5px;
  box-shadow:0 0 0 6px var(--tint);
}
.sec-process .steps--row li::after{ left:58px; top:26px; }
.sec-process .steps--row h3{ font-size:clamp(18px,1.9vw,22px); }
.sec-process .steps--row p{ font-size:15px; }

/* --------------------------------------------------------------------------
   13. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.faq{ }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:24px 0; text-align:left;
  font-family:var(--body); font-size:clamp(16px,1.6vw,18.5px); font-weight:640;
  color:var(--fg); line-height:1.44;
  transition:color .2s var(--ease);
}
.faq-q:hover{ color:var(--teal-text); }
.faq-ic{
  flex:0 0 auto; width:26px; height:26px; margin-top:1px; position:relative;
  border:1px solid var(--line-2); border-radius:50%;
  transition:border-color .25s var(--ease), transform .3s var(--ease);
}
.faq-ic::before,.faq-ic::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--teal-text);
  transform:translate(-50%,-50%); transition:opacity .25s var(--ease), transform .3s var(--ease);
}
.faq-ic::before{ width:10px; height:1.5px; }
.faq-ic::after{ width:1.5px; height:10px; }
.faq-q[aria-expanded="true"] .faq-ic{ border-color:var(--teal); transform:rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-ic::after{ opacity:0; }

.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .36s var(--ease); }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ color:var(--fg-2); font-size:15.5px; padding-bottom:26px; max-width:70ch; }
.faq-a p + p{ padding-bottom:0; margin-bottom:1em; }
.faq-a ul{ padding-bottom:26px; }

.faq-group + .faq-group{ margin-top:clamp(44px,5vw,68px); }
.faq-group > h2{ font-size:clamp(23px,2.8vw,32px); margin-bottom:24px; scroll-margin-top:96px; }

/* --------------------------------------------------------------------------
   14. CTA bands
   The brief asks for very light teal backgrounds; these bands carry them.
   -------------------------------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; border-top:1px solid var(--teal); border-bottom:1px solid var(--teal); }
.cta-band::before{
  background:
    radial-gradient(90% 150% at 8% 0%, rgba(20,154,156,.14), transparent 55%),
    radial-gradient(70% 140% at 94% 100%, rgba(212,162,78,.1), transparent 58%),
    #F2F8F7;
}
.cta-band h2{ max-width:17ch; }
.cta-inner{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:clamp(30px,4vw,64px); align-items:center; }
@media (max-width:860px){ .cta-inner{ grid-template-columns:1fr; } }

.capacity{ display:flex; align-items:center; gap:clamp(20px,3vw,38px); flex-wrap:wrap; }
.capacity .big{
  font-family:var(--display); font-size:clamp(62px,10vw,112px); line-height:1.05; padding-top:.04em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; flex:0 0 auto;
}
.capacity .body{ flex:1 1 320px; min-width:0; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.ftr{ background:var(--bg); border-top:3px solid var(--teal); padding-block:72px 32px; }
.ftr-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.65fr) minmax(0,1.75fr); gap:clamp(26px,3vw,48px); }
@media (max-width:960px){ .ftr-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ftr-grid{ grid-template-columns:1fr; } }

.ftr-brand img{ height:56px; width:auto; margin-bottom:24px; }
.ftr-brand p{ color:var(--fg-2); font-size:15.5px; line-height:1.7; max-width:34ch; }
.ftr .ftr-h{
  font-family:var(--mono); font-size:14px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-deep); font-weight:600; margin-bottom:20px; line-height:1.4;
}
.ftr li + li{ margin-top:14px; }
.ftr li a,.ftr address a{ font-size:15.5px; color:var(--fg); transition:color .2s var(--ease); }
.ftr li a:hover,.ftr address a:hover{ color:var(--teal-text); }

.ftr-rows{ list-style:none; margin:0; padding:0; }
.ftr-rows li{ display:grid; grid-template-columns:40px minmax(0,1fr); column-gap:14px; align-items:center; }
.ftr-rows li + li{ margin-top:14px; }
.ftr-rows address{ font-style:normal; font-size:15.5px; color:var(--fg-2); line-height:1.5; }
.ftr-rows a{ font-size:15.5px; color:var(--fg-2); }
.ftr-rows address a{ display:block; line-height:1.5; }
.ftr-rows address a:hover{ color:var(--teal-text); }
.ftr-ic{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:#E6F3F2; color:var(--teal-deep);
}
.ftr-ic svg{ width:18px; height:18px; }

.ftr-links{ display:flex; align-items:center; gap:12px; margin-top:26px; flex-wrap:wrap; }
.ftr-social{ display:flex; gap:10px; }
.ftr-social a{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--tint-line); background:#E6F3F2; color:var(--teal-deep); transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.ftr-social a:hover{ color:#fff; border-color:var(--teal-deep); background:var(--teal-deep); }
.ftr-social svg{ width:18px; height:18px; }
.ftr-sep{ width:1px; height:36px; background:var(--line-2); margin:0 6px; }
.ftr-review{ display:inline-flex; align-items:center; gap:9px; font-size:15px; white-space:nowrap; font-weight:600; color:var(--teal-deep); border-bottom:1px solid var(--teal-deep); padding-bottom:1px; }
.ftr-review svg{ width:20px; height:20px; }

.ftr-base{
  margin-top:56px; padding-top:26px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; align-items:center;
}
.ftr-base p{ font-size:14px; color:var(--fg-3); }

/* --------------------------------------------------------------------------
   16. Sticky mobile CTA
   -------------------------------------------------------------------------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:none; gap:10px;
  transform:translateY(110%); transition:transform .32s var(--ease);
}
.sticky-cta.is-on{ transform:none; }
.sticky-cta .btn{ flex:1 1 auto; padding:13px 16px; font-size:13.5px; }
@media (max-width:860px){ .sticky-cta{ display:flex; } }

/* --------------------------------------------------------------------------
   17. Forms
   -------------------------------------------------------------------------- */
.form{ display:grid; gap:18px; }
.field label{
  display:block; font-size:12.5px; font-weight:650; letter-spacing:.05em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:8px;
}
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border-radius:11px;
  background:var(--bg); border:1px solid var(--line-2);
  color:var(--fg); font-family:var(--body); font-size:16px;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--fg-3); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--tint);
}
.field textarea{ min-height:132px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }
.req{ color:var(--gold-deep); }

.embed-stub{
  padding:48px 26px; text-align:center; border:1px dashed var(--line-2);
  border-radius:12px; color:var(--fg-3); font-size:14.5px; line-height:1.7;
}
.embed-stub strong{ color:var(--fg); display:block; margin-bottom:8px; }

/* --------------------------------------------------------------------------
   18. Blog and resource cards
   -------------------------------------------------------------------------- */
.post{
  display:flex; flex-direction:column; height:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow);
  transition:border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.post:hover{ border-color:var(--line-2); transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.post-img{
  aspect-ratio:16/9; background:var(--bg-2);
  display:grid; place-items:center; border-bottom:1px solid var(--line);
  position:relative; overflow:hidden; color:var(--fg);
}
.post-img svg{ width:46px; height:46px; opacity:.18; }
.post-img::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg,rgba(20,154,156,.1),rgba(212,162,78,.08)); }
.post-body{ padding:26px; display:flex; flex-direction:column; flex:1; }
.post .cat{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal-text); margin-bottom:13px;
}
.post h3{ font-size:19px; line-height:1.2; }
.post p{ margin-top:12px; color:var(--fg-2); font-size:14.5px; flex:1; }
.post .meta{ margin-top:20px; font-size:12.5px; color:var(--fg-3); font-family:var(--mono); letter-spacing:.05em; }

.cat-pills{ display:flex; flex-wrap:wrap; gap:9px; }
.cat-pills a{
  border:1px solid var(--line); border-radius:999px; padding:8px 16px;
  font-size:13.5px; color:var(--fg-2); background:var(--surface);
  transition:border-color .22s var(--ease), color .22s var(--ease), background .22s var(--ease);
}
.cat-pills a:hover,.cat-pills a.is-on{ border-color:var(--teal); color:var(--teal-text); background:var(--tint); }

/* --------------------------------------------------------------------------
   19. Review flags (removed before launch)
   -------------------------------------------------------------------------- */
.flag{
  display:block; border-left:3px solid var(--gold);
  background:rgba(212,162,78,.1);
  padding:14px 18px; border-radius:0 11px 11px 0;
  font-family:var(--mono); font-size:12.5px; line-height:1.6; color:var(--gold-deep);
  margin-top:20px;
}
.dark .flag{ color:var(--gold-lift); background:rgba(212,162,78,.08); }
.flag b{ font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:10.5px; display:block; margin-bottom:5px; opacity:.85; }

/* --------------------------------------------------------------------------
   20. Scroll reveal
   -------------------------------------------------------------------------- */
[data-rv]{ opacity:0; transform:translateY(16px); transition:opacity .62s var(--ease), transform .62s var(--ease); }
[data-rv].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-rv]{ opacity:1; transform:none; transition:none; }
  .btn:hover,.card:hover,.post:hover{ transform:none; }
}

/* --------------------------------------------------------------------------
   21. Utilities
   -------------------------------------------------------------------------- */
.mt-0{ margin-top:0; }
.mt-s{ margin-top:16px; }
.mt-m{ margin-top:28px; }
.mt-l{ margin-top:44px; }
.center{ text-align:center; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.rule-grad{ height:2px; border:0; background:var(--grad); width:62px; border-radius:2px; }

@media print{
  .hdr,.sticky-cta,.cta-band,.burger,.page-mark{ display:none !important; }
  body{ background:#fff; color:#111; }
}

/* --------------------------------------------------------------------------
   Section 2: eligibility. Three centred requirement cards, then a light teal
   panel for what happens next.
   -------------------------------------------------------------------------- */
#who-this-is-for .head{ max-width:820px; }
#who-this-is-for .card--centre h3{ font-size:clamp(18px,1.8vw,21px); text-wrap:balance; }
#who-this-is-for .card--centre p{ max-width:34ch; margin-inline:auto; }

.qualify-next{
  margin-top:clamp(28px,3.4vw,44px);
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:center;
  padding:clamp(28px,3.2vw,44px);
  border-radius:var(--r-lg);
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(20,154,156,.12), transparent 60%),
    #F2F8F7;
  border:1px solid var(--tint-line);
}
.qualify-next h3{ font-size:clamp(20px,2.2vw,27px); }
.qualify-next p{ margin-top:12px; color:var(--fg-2); font-size:16px; line-height:1.64; max-width:62ch; }
.qualify-next p:first-of-type{ margin-top:16px; }
.qualify-next-cta{ display:flex; justify-content:flex-end; }
.qualify-next-cta .btn{ white-space:normal; text-align:center; }
@media (max-width:860px){
  .qualify-next{ grid-template-columns:1fr; }
  .qualify-next-cta{ justify-content:flex-start; }
}
@media (max-width:560px){
  .qualify-next-cta .btn{ width:100%; }
}


/* --------------------------------------------------------------------------
   Section 3: the problem. Editorial column, a four-part obligations row,
   and a closing line. No photography.
   -------------------------------------------------------------------------- */
.problem .head{ max-width:1020px; margin-bottom:clamp(28px,3vw,40px); }
.problem-copy{ max-width:920px; }
.problem-copy p{ font-size:clamp(17px,1.35vw,19px); color:var(--fg-2); line-height:1.7; }
.problem-copy p + p{ margin-top:1em; }
.problem-copy p strong{ color:var(--fg); font-weight:600; }

/* arrow flow: four chevron segments in one row on desktop, the fourth in gold */
.flow{
  --pt:24px;                          /* arrow depth */
  margin-top:clamp(36px,4vw,56px);
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.flow li{ padding-right:6px; min-width:0; }
.flow li:last-child{ padding-right:0; }
.flow .seg{
  height:100%; display:flex; align-items:center; gap:12px;
  padding:clamp(18px,2vw,26px) calc(var(--pt) + 4px) clamp(18px,2vw,26px) clamp(14px,1.5vw,20px);
  background:#E6F3F2;
  clip-path:polygon(0 0, calc(100% - var(--pt)) 0, 100% 50%, calc(100% - var(--pt)) 100%, 0 100%);
}
.flow li + li .seg{
  padding-left:calc(var(--pt) + 8px);
  clip-path:polygon(0 0, calc(100% - var(--pt)) 0, 100% 50%, calc(100% - var(--pt)) 100%, 0 100%, var(--pt) 50%);
}
.flow li:first-child .seg{ border-radius:14px 0 0 14px; }
.flow .ico{ margin:0; width:auto; height:auto; background:transparent; border:0; color:var(--teal-deep); flex:0 0 auto; }
.flow .ico svg{ width:clamp(26px,2.2vw,34px); height:clamp(26px,2.2vw,34px); stroke-width:1.5; }
.flow .seg > div{ border-left:1px solid rgba(14,127,129,.25); padding-left:12px; min-width:0; }
.flow b{ display:block; font-size:clamp(16.5px,1.4vw,20px); font-weight:700; color:var(--fg); line-height:1.25; }
.flow span{ display:block; font-size:clamp(14.5px,1.15vw,16.5px); color:var(--fg-2); line-height:1.45; margin-top:5px; }
.flow li.you .seg{ background:#F6EFE1; }
.flow li.you .ico{ color:var(--gold-deep); }
.flow li.you .seg > div{ border-left-color:rgba(154,110,34,.3); }

/* phones and tablets: a vertical rail with icon nodes instead of chevrons */
@media (max-width:900px){
  .flow{ display:block; margin-top:clamp(30px,5vw,44px); }
  .flow li{ position:relative; padding:0 0 22px 0; }
  .flow li::before{
    content:''; position:absolute; left:25px; top:52px; bottom:-4px; width:2px;
    background:linear-gradient(180deg, rgba(14,127,129,.35), rgba(14,127,129,.12));
  }
  .flow li:last-child{ padding-bottom:0; }
  .flow li:last-child::before{ display:none; }
  .flow .seg,.flow li + li .seg{
    clip-path:none; background:transparent; padding:0; gap:16px; align-items:flex-start;
    border-radius:0; height:auto;
  }
  .flow .ico{
    width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
    background:#E6F3F2; position:relative; z-index:1;
  }
  .flow .ico svg{ width:26px; height:26px; }
  .flow .seg > div{ border-left:0; padding-left:0; padding-top:6px; }
  .flow b{ font-size:19px; }
  .flow span{ font-size:16px; }
  .flow li.you .seg{ background:transparent; }
  .flow li.you .ico{ background:#F6EFE1; }
  .flow li.you .seg > div{
    background:#F6EFE1; border-radius:12px; padding:12px 14px; margin-top:-2px;
    border-left:3px solid var(--gold);
  }
}

.problem-close{
  margin-top:clamp(36px,4vw,56px);
  display:flex; align-items:center; gap:clamp(18px,2.4vw,32px);
}
.problem-close::before{ content:''; width:56px; height:2px; background:var(--gold); flex:0 0 auto; }
.problem-close p{
  font-family:var(--display); text-transform:uppercase; line-height:1.05;
  font-size:clamp(26px,3.2vw,40px); color:var(--fg);
}
.problem-close p span{ color:var(--teal); }


/* --------------------------------------------------------------------------
   Section 4: how Knox can help. Four-stage process with gold connectors,
   a tinted supporting panel and the CTA.
   -------------------------------------------------------------------------- */
.howhelp .head{ max-width:820px; }

.process{
  --circ:84px;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,36px);
  margin-top:clamp(12px,1.6vw,20px);
}
.process li{ position:relative; text-align:center; padding:0 6px; }
.process-n{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:.18em;
  color:var(--gold-deep); margin-bottom:14px;
}
.process-ic{
  position:relative; z-index:1;
  width:var(--circ); height:var(--circ); border-radius:50%;
  display:grid; place-items:center; margin:0 auto 20px;
  background:#fff; border:1px solid var(--teal);
}
.process-ic .ico{ margin:0; width:auto; height:auto; background:transparent; border:0; color:var(--teal-deep); }
.process-ic .ico svg{ width:34px; height:34px; stroke-width:1.5; }
.process h3{ font-size:clamp(19px,1.9vw,23px); }
.process p{ margin-top:10px; color:var(--fg-2); font-size:15.5px; line-height:1.6; max-width:26ch; margin-inline:auto; }
/* gold connector from this circle's edge to the next circle's edge */
.process li:not(:last-child)::after{
  content:''; position:absolute;
  top:calc(26px + var(--circ) / 2);           /* number row + half circle */
  left:calc(50% + var(--circ) / 2 + 12px);
  width:calc(100% + clamp(18px,2.4vw,36px) - var(--circ) - 24px);
  height:1px; background:var(--gold);
}

.approach{
  margin-top:clamp(40px,4.6vw,64px);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,2.4vw,30px);
  align-items:start;
  padding:clamp(26px,3vw,40px) clamp(24px,3vw,44px);
  background:#F2F8F7; border:1px solid var(--tint-line); border-radius:var(--r-lg);
}
.approach-ic{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--tint-line);
}
.approach-ic .ico{ margin:0; width:auto; height:auto; background:transparent; border:0; color:var(--teal-deep); }
.approach-ic .ico svg{ width:26px; height:26px; }
.approach h3{ font-size:clamp(20px,2.1vw,26px); }
.approach .rule-grad{ margin:14px 0 16px; background:var(--gold); width:48px; height:2px; }
.approach p{ color:var(--fg-2); font-size:16.5px; line-height:1.66; max-width:78ch; }

.howhelp-cta{ justify-content:center; margin-top:clamp(28px,3vw,40px); }

@media (max-width:980px){
  .process{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .process li:nth-child(2)::after{ display:none; }
}
@media (max-width:560px){
  .process{ --circ:64px; grid-template-columns:1fr; row-gap:0; }
  .process li{ text-align:left; display:grid; grid-template-columns:var(--circ) 1fr; column-gap:18px; padding:0 0 30px; }
  .process-n{ grid-column:2; margin-bottom:6px; }
  .process-ic{ grid-column:1; grid-row:1 / span 3; margin:0; }
  .process h3{ grid-column:2; }
  .process p{ grid-column:2; margin-inline:0; max-width:none; }
  .process li:not(:last-child)::after{
    top:calc(var(--circ) + 8px); left:calc(var(--circ) / 2); width:1px; height:calc(100% - var(--circ) - 16px);
  }
  .process li:nth-child(2)::after{ display:block; }
  .approach{ grid-template-columns:1fr; }
}


/* --------------------------------------------------------------------------
   Final homepage sections (2026-10-10): benefit themes, after implementation,
   included checklist, commercial panel.
   -------------------------------------------------------------------------- */
.themes-sec .head{ max-width:860px; }
.themes{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,2.6vw,40px); list-style:none; margin:0; padding:0;
}
.theme{
  padding-top:22px; border-top:2px solid var(--gold);
}
.theme-ic{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:#E6F3F2; margin-bottom:16px;
}
.theme-ic .ico{ margin:0; width:auto; height:auto; background:transparent; border:0; color:var(--teal-deep); }
.theme-ic .ico svg{ width:22px; height:22px; stroke-width:1.5; }
.theme h3{ font-size:clamp(19px,1.7vw,22px); line-height:1.25; margin-bottom:14px; }
.theme .ticks li{ font-size:15px; line-height:1.55; }
.theme .ticks li + li{ margin-top:10px; }

.split--top{ align-items:start; }
.approach--list{ margin-top:0; }
.approach--list .ticks li{ font-size:16px; }

.included-list li{ font-size:16px; }
.included-list .muted{ color:var(--fg-3); }

.commercial{
  max-width:820px; margin:0 auto; text-align:center;
  padding:clamp(34px,4vw,60px) clamp(24px,4vw,56px);
  background:#F2F8F7; border:1px solid var(--tint-line); border-radius:var(--r-lg);
}
.commercial .rule-grad{ width:64px; height:2px; margin:20px auto 22px; background:var(--grad); }
.commercial .lede{ max-width:none; }
.commercial-free{
  margin-top:18px; font-family:var(--display); text-transform:uppercase;
  font-size:clamp(20px,2vw,26px); letter-spacing:.01em; color:var(--teal-deep);
}
.commercial .btns{ justify-content:center; }

@media (max-width:1000px){
  .themes{ grid-template-columns:1fr 1fr; }
}
@media (max-width:900px){
  .split--top{ grid-template-columns:1fr; }
  .included-list{ columns:1; }
}
@media (max-width:560px){
  .themes{ grid-template-columns:1fr; }
  .commercial{ text-align:left; }
  .commercial .rule-grad{ margin-left:0; }
  .commercial .btns{ justify-content:flex-start; }
  .commercial .btn{ width:100%; white-space:normal; text-align:center; }
}

/* --------------------------------------------------------------------------
   Founder introduction (home). Photo left, short intro right.
   -------------------------------------------------------------------------- */
.founder{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr);
  column-gap:clamp(36px,5vw,80px); align-items:center;
}
.founder-photo{
  aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden; background:#fff;
  border:1px solid var(--line); display:grid; place-items:center;
  box-shadow:0 24px 48px -32px rgba(20,40,42,.25);
}
.founder-photo picture{ display:block; width:100%; height:100%; }
.founder-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.founder-photo .ph{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--teal-deep); text-align:center; padding:20px; }
.founder h2{ font-size:clamp(34px,3.6vw,52px); }
.founder .role{ margin-top:10px; font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.founder .lede{ margin-top:18px; }
.founder .btns{ margin-top:26px; }
@media (max-width:820px){
  .founder{ grid-template-columns:1fr; row-gap:28px; }
  .founder-photo{ max-width:360px; }
}

.hero-note{ margin-top:18px; font-size:14px; color:var(--fg-3); font-style:italic; }

/* page-specific hero photos */
.phero--svc{ --hero-img:url('../img/payroll-savings-assessment-desk.jpg'); }
.phero--svc{ --hero-img:image-set(url('../img/payroll-savings-assessment-desk.webp') type('image/webp'), url('../img/payroll-savings-assessment-desk.jpg') type('image/jpeg')); }
/* centred inner hero: text centred, photo as a soft full-width backdrop */
.phero--centre{ text-align:center; padding-block:clamp(56px,7vw,100px) clamp(52px,6.5vw,88px); }
.phero--centre::before{
  left:0; width:100%; background-position:center 55%; opacity:.22;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  mask-image:linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.phero--centre > .wrap > *{ max-width:none; margin-inline:auto; }
.phero--centre .crumbs{ justify-content:center; }
.phero--centre h1{ max-width:20ch; }
.phero--centre .lede{ max-width:58ch; margin-top:26px; font-size:clamp(18px,1.45vw,21px); line-height:1.6; }
.phero--centre .lede + .lede{ margin-top:18px; }
.phero--centre .phero-sub{ max-width:66ch; margin-top:22px; font-size:clamp(16px,1.2vw,17.5px); line-height:1.7; color:var(--fg-2); }
.phero--centre .phero-sub--tight{ margin-top:18px; font-weight:600; color:var(--fg); }
.phero--centre .phero-chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  list-style:none; margin:28px auto 0; padding:0;
}
.phero--centre .phero-chips li{
  padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.85);
  border:1px solid var(--tint-line); color:var(--teal-deep);
  font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
}
.phero--centre .btns{ justify-content:center; margin-top:34px; }
.phero--centre .hero-note{ text-align:center; }
@media (max-width:900px){
  .phero--centre{ padding-top:clamp(44px,5.5vw,76px); }
  .phero--centre::before{ height:100%; }
}
/* text-led inner hero for the four service pages: no photo, wider measure */
.phero--text{ padding-block:clamp(52px,6.5vw,92px) clamp(48px,6vw,80px); }
.phero--text::before{ display:none; }
.phero--text > .wrap{ position:relative; }
.phero--text{ text-align:center; }
.phero--text > .wrap > *{ max-width:none; margin-inline:auto; }
.phero--text .crumbs{ justify-content:center; margin-bottom:26px; }
.phero--text h1{ max-width:18ch; font-size:clamp(38px,5vw,72px); }
.phero--text .lede{ max-width:64ch; font-size:clamp(17px,1.35vw,20px); }
.phero--text .btns{ margin-top:32px; justify-content:center; }
.phero--text .hero-note{ text-align:center; }
.survey-wrap{ border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#fff; }
@media (max-width:900px){
  .phero--text{ padding-top:clamp(40px,6vw,60px); }
}
.br-d{ display:none; }
@media (min-width:901px){ .br-d{ display:inline; } }
.ftr-base a{ color:var(--fg-2); border-bottom:1px solid var(--line-2); }
.ftr-base a:hover{ color:var(--teal-text); border-color:var(--teal-text); }
/* CTA band: equal-width stacked buttons */
.cta-inner .btns{ flex-direction:column; align-items:stretch; max-width:340px; justify-self:center; width:100%; }
.cta-inner .btns .btn{ width:100%; justify-content:center; text-align:center; }
@media (max-width:860px){ .cta-inner .btns{ justify-self:start; } }

/* --------------------------------------------------------------------------
   Outsourced payroll: "What is included" six-card grid with intro column.
   -------------------------------------------------------------------------- */
.incl-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  column-gap:clamp(36px,5vw,72px); align-items:center;
}
.incl-intro h2{ font-size:clamp(38px,4vw,60px); }
.incl-intro .lede{ margin-top:22px; font-size:clamp(17px,1.3vw,19.5px); }
.incl-note{ margin-top:20px; font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3); }
.incl-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
  list-style:none; margin:0; padding:0;
}
.incl-card{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(20px,2vw,26px); display:flex; flex-direction:column;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.incl-card:hover{ border-color:var(--tint-line); transform:translateY(-2px); }
.incl-ic{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:#E6F3F2; margin-bottom:16px;
}
.incl-ic .ico{ margin:0; width:auto; height:auto; background:transparent; border:0; color:var(--teal-deep); }
.incl-ic .ico svg{ width:22px; height:22px; stroke-width:1.5; }
.incl-card h3{ font-size:17.5px; font-weight:700; font-family:var(--body); text-transform:none; letter-spacing:0; line-height:1.3; color:var(--fg); }
.incl-card p{ margin-top:8px; font-size:14.5px; line-height:1.6; color:var(--fg-2); }
.incl-banner{
  margin-top:16px; display:flex; align-items:center; gap:14px;
  padding:14px 20px; border-radius:var(--r-lg);
  background:#E6F3F2; border:1px solid var(--tint-line);
}
.incl-banner-ic{ width:36px; height:36px; border-radius:50%; background:#fff; display:grid; place-items:center; flex:0 0 auto; }
.incl-banner-ic .ico{ margin:0; width:auto; height:auto; background:transparent; border:0; color:var(--gold-deep); }
.incl-banner-ic .ico svg{ width:18px; height:18px; }
.incl-banner p{ font-size:15px; color:var(--fg-2); line-height:1.5; }
.incl-banner strong{ color:var(--fg); font-weight:700; }
.incl-cards--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1100px){
  .incl-cards,.incl-cards--4{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .incl-grid{ grid-template-columns:1fr; row-gap:30px; }
}
@media (max-width:560px){
  .incl-cards{ grid-template-columns:1fr; }
}

/* ghost word behind a centred heading */
.head--ghost{ position:relative; isolation:isolate; padding-top:clamp(40px,5vw,72px); }
.ghost{
  position:absolute; left:50%; top:-.08em; transform:translateX(-50%);
  font-family:var(--display); text-transform:uppercase; line-height:.8;
  font-size:clamp(88px,15vw,200px); letter-spacing:.02em;
  color:rgba(20,154,156,.07);
  pointer-events:none; user-select:none; z-index:-1; white-space:nowrap;
}

.incl-ticks{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 32px; max-width:1000px; margin:0 auto; }
.incl-ticks li{ font-size:16px; }
.incl-ticks li + li{ margin-top:0; }
.incl-ticks .muted{ color:var(--fg-3); }
@media (max-width:860px){ .incl-ticks{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .incl-ticks{ grid-template-columns:1fr; } }
/* pill list for the home "Included" section */
.pills{ display:flex; flex-wrap:wrap; gap:10px 10px; list-style:none; margin:0; padding:0; align-content:center; align-self:center; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px;
  background:#E6F3F2; border:1px solid var(--tint-line); color:var(--teal-ink);
  font-size:14.5px; font-weight:600; line-height:1.2;
}
.pill::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--teal); flex:0 0 auto; }
.pill--opt{ background:#FBF6EA; border-color:rgba(212,162,78,.45); color:var(--fg); }
.pill--opt::before{ background:var(--gold); }
.pill--opt span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); }

/* wide monitors: scale proportionally so the layout matches a laptop view */
@media (min-width:1500px){ :root{ --wrap:1320px; } }
@media (min-width:1680px){ :root{ --wrap:1380px; } html{ zoom:1.1; } }
@media (min-width:2000px){ :root{ --wrap:1440px; } html{ zoom:1.28; } }
@media (min-width:2500px){ html{ zoom:1.55; } }
.brand-tag{ display:none !important; }

/* frosted glass on boxes: the watermark and photos blur through */
.card, .approach, .commercial, .qualify-next, .incl-card, .assess-panel, .theme-ic, .embed-stub, .survey-wrap{
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
}
.card, .incl-card, .faq-item, .svc-strip{
  background:linear-gradient(160deg, rgba(255,255,255,.78) 0%, rgba(20,154,156,.045) 100%), rgba(242,249,248,.6);
  border-color:rgba(20,154,156,.2);
  box-shadow:0 14px 34px -26px rgba(14,127,129,.16), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(20,154,156,.06);
}
.faq-item{ border-radius:var(--r-lg); padding-inline:18px; margin-top:10px; border:1px solid rgba(20,154,156,.18); border-bottom:1px solid rgba(20,154,156,.18); }
.approach, .commercial, .qualify-next, .assess-panel{ background:linear-gradient(160deg, rgba(255,255,255,.74) 0%, rgba(20,154,156,.06) 100%), rgba(242,249,248,.6); border-color:rgba(20,154,156,.2); box-shadow:0 12px 30px -24px rgba(20,40,42,.14), inset 0 1px 0 rgba(255,255,255,.8); }
.qualify-next{ background:radial-gradient(80% 140% at 100% 0%, rgba(20,154,156,.1), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.74), rgba(20,154,156,.05)), rgba(242,249,248,.6); }

/* payroll savings hero: text left, photo right (default .phero panel), criteria row */
.phero--split{ text-align:left; }
.phero--split::before{ background-position:80% 50%; opacity:.3; }
.phero--split h1{ max-width:14ch; }
.phero--split .lede{ max-width:52ch; margin-top:22px; }
.phero-crit{
  display:flex; flex-wrap:wrap; list-style:none; margin:26px 0 0; padding:0;
}
.phero-crit li{
  padding:4px 16px; font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal-deep); border-left:1px solid var(--line-2);
}
.phero-crit li:first-child{ padding-left:0; border-left:0; }
.phero--split .btns{ margin-top:30px; }
.phero--split > .wrap > .phero-crit{ max-width:72%; }
.phero-crit li{ white-space:nowrap; }
@media (max-width:900px){
  .phero-crit{ flex-direction:column; gap:10px; }
  .phero-crit li{ border-left:0; padding:0; }
}
.cycle-grid .num{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); }

/* frosted glass on the remaining boxes */
.svc-strip, .ico, .theme-ic, .phero-chips li, .incl-banner, .founder-photo, .faq-item, .ftr-ic, .ftr-social a, .incl-ic, .benefit-ic, .why-ic, .process-ic, .approach-ic, .tl-n{
  -webkit-backdrop-filter:blur(12px) saturate(1.2); backdrop-filter:blur(12px) saturate(1.2);
}
.svc-strip li + li{ border-left-color:rgba(20,154,156,.22); }
.ico{ background:#fff; border-color:var(--teal); color:var(--teal-deep); }
.incl-ic, .benefit-ic, .why-ic, .theme-ic, .ftr-ic, .ftr-social a, .approach-ic{ background:#fff; border:1px solid var(--teal); }
.process-ic{ background:#fff; border:1px solid var(--teal); }

.incl-banner{ background:linear-gradient(160deg, rgba(255,255,255,.5), rgba(20,154,156,.14)), rgba(230,243,242,.5); border-color:rgba(20,154,156,.28); }

/* --------------------------------------------------------------------------
   Section divider: thin gold line, centred outlined circle, faint teal fade
   at the lower edge. Placed between main sections by the build.
   -------------------------------------------------------------------------- */
.divider{
  position:relative; height:64px;
  background:transparent;
}
/* same white base layer the sections use (z -1 inside main), so the
   difference-blended watermark reads across the divider band too */
.divider::after{
  content:''; position:absolute; inset:0; z-index:-1; background:var(--bg);
}
.divider::before{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-.5px);
  width:min(100% - 2 * var(--gut), var(--wrap) - 2 * var(--gut));
  height:1px;
  /* single teal line, solid in the middle, fading out towards both ends */
  background:linear-gradient(90deg,
    rgba(20,154,156,0) 0%, rgba(20,154,156,.9) 30%,
    rgba(20,154,156,.9) 70%, rgba(20,154,156,0) 100%);
}
@media (max-width:860px){ .divider{ height:52px; } }

/* resources, blog and contact pages */
.form-note{ margin-top:12px; font-size:13.5px; line-height:1.55; color:var(--fg-3); }
.form-note a{ color:var(--teal-text); text-decoration:underline; text-underline-offset:3px; }
.social-row{ display:flex; flex-wrap:wrap; gap:10px; }
.social-chip{
  display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px;
  border:1px solid var(--line-2); color:var(--fg); font-weight:600; font-size:15px; text-decoration:none;
  transition:border-color .2s, color .2s, background .2s;
}
.social-chip svg{ width:18px; height:18px; }
.social-chip:hover{ border-color:var(--teal); color:var(--teal-text); background:var(--tint); }
.contact-address{ font-style:normal; font-size:15.5px; color:var(--fg-2); }
.contact-address a{ color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
.contact-address a:hover{ color:var(--teal-text); text-decoration-color:var(--teal); }
.incl-cards--4 .textlink{ font-size:14.5px; }
.approach .ticks a.textlink{ font-size:inherit; }

/* ghost word variants and included columns */
.ghost--long{ font-size:clamp(64px,11vw,150px); }
.incl-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px 40px; max-width:1040px; margin:0 auto; }
.incl-col-h{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--line-2); }
.incl-col .ticks li{ font-size:16px; }
.incl-col .ticks .muted{ color:var(--fg-3); }
@media (max-width:860px){ .incl-cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .incl-cols{ grid-template-columns:1fr; } }
/* embedded assessment */
.embed-card{ max-width:860px; margin:0 auto; }

/* plain centred hero with ghost word; logo hero */
.phero--plain{ background:transparent; }
.phero--plain::before{ display:none; }
.phero--plain .wrap{ position:relative; }
.ghost--hero{ top:-48px; }
.phero--logo{ text-align:left; }
.phero-logo-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(32px,5vw,72px); align-items:center; }
.phero--logo .wrap > *{ max-width:none; }
.phero--logo h1{ max-width:14ch; }
.phero--logo .lede{ max-width:52ch; }
.phero-logo{ display:flex; justify-content:center; }
.phero-logo img{ width:min(100%,520px); height:auto; }
@media (max-width:900px){
  .phero-logo-grid{ grid-template-columns:1fr; }
  .phero-logo{ order:-1; justify-content:flex-start; }
  .phero-logo img{ width:min(70%,320px); }
  .phero--logo{ padding-top:clamp(44px,5.5vw,76px); }
}
/* survey embed panel: no fixed-height card, grows with the form */
.embed-panel{ height:auto; }
.embed-panel .survey-wrap{ border:1px solid rgba(20,154,156,.25); background:rgba(255,255,255,.7); }
.embed-panel .survey-wrap iframe{ width:100%; display:block; }
/* qualification row without the card */
.qualify-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 36px; max-width:none; margin-top:clamp(24px,3vw,36px); }
.qualify-row li + li{ margin-top:0; }
.qualify-row li{ font-size:16.5px; }

/* qualification strip (shared with the home hero strip look) */
.qualify-strip{ grid-template-columns:repeat(3,1fr); max-width:1000px; margin-inline:auto; margin-top:clamp(28px,3.5vw,44px); }
.qualify-strip li > span{
  display:flex; align-items:center; gap:14px; width:100%; padding:18px 22px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg); line-height:1.4;
}
.qualify-strip .ico{ width:34px; height:34px; margin:0; border-radius:0; background:transparent; border:0; color:var(--teal-deep); flex:0 0 auto; }
.qualify-strip .ico svg{ width:24px; height:24px; stroke-width:1.5; }
@media (max-width:860px){
  .qualify-strip{ grid-template-columns:1fr; }
  .qualify-strip li + li{ border-left:0; border-top:1px solid var(--line-2); }
}
/* dates panel on Resources */
.dates{ margin:0; display:grid; gap:18px; }
.dates > div{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start; padding:14px 0; border-top:1px solid rgba(20,154,156,.18); }
.dates > div:first-child{ border-top:0; padding-top:0; }
.dates dt{ font-family:var(--display); text-transform:uppercase; font-size:clamp(22px,2.2vw,28px); line-height:1; color:var(--teal-deep); letter-spacing:.02em; }
.dates dd{ margin:0; font-size:17px; line-height:1.6; color:var(--fg); }
.dates dd strong{ color:var(--fg); }
@media (max-width:520px){ .dates > div{ grid-template-columns:1fr; gap:6px; } }
.ghost--up{ top:-48px; }
.center-text{ text-align:center; max-width:62ch; margin-inline:auto; }

/* founder letter on About */
.founder--letter{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); align-items:start; }
.founder-side{ position:sticky; top:96px; }
.founder-side .founder-photo{ max-width:380px; }
.founder-name{ margin-top:22px; font-family:var(--display); text-transform:uppercase; font-size:clamp(24px,2.2vw,30px); line-height:1; }
.founder--letter .role{ margin-top:8px; }
.founder-side .btns{ margin-top:20px; }
.letter h2{ margin-top:14px; }
.letter-body{ margin-top:26px; }
.letter-body p{ font-size:clamp(16.5px,1.25vw,18.5px); line-height:1.72; color:var(--fg-2); max-width:66ch; }
.letter-body p + p{ margin-top:18px; }
.letter-sign{ margin-top:30px; font-family:var(--display); text-transform:uppercase; font-size:22px; line-height:1.1; color:var(--teal-deep); }
.letter-sign span{ display:block; margin-top:6px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:var(--gold-deep); }
@media (max-width:900px){
  .founder--letter{ grid-template-columns:1fr; }
  .founder-side{ position:static; }
}

/* capacity panel */
.capacity--panel{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,4vw,64px); align-items:center;
  padding:clamp(32px,4vw,56px) clamp(26px,4vw,60px);
  background:linear-gradient(160deg, rgba(255,255,255,.9) 0%, rgba(20,154,156,.08) 100%), #F2F8F7;
  border:1px solid var(--teal); border-radius:var(--r-lg);
  box-shadow:0 18px 44px -30px rgba(14,127,129,.3);
}
.capacity--panel::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--grad); z-index:-1;
}
.cap-stat{ display:flex; flex-direction:column; align-items:flex-start; padding-right:clamp(24px,3vw,48px); border-right:1px solid rgba(20,154,156,.3); }
.capacity--panel .big{ font-size:clamp(84px,11vw,150px); line-height:.95; }
.cap-unit{ margin-top:8px; font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-deep); line-height:1.5; }
.capacity--panel .body{ flex:none; }
.capacity--panel h2{ margin-top:8px; }
.capacity--panel .lede{ max-width:60ch; }
@media (max-width:760px){
  .capacity--panel{ grid-template-columns:1fr; }
  .cap-stat{ flex-direction:row; align-items:baseline; gap:16px; padding-right:0; border-right:0; padding-bottom:18px; border-bottom:1px solid rgba(20,154,156,.3); }
  .cap-unit{ margin-top:0; }
}

.head--ghost .ghost{ top:-.1em; }
.head--ghost{ padding-top:clamp(56px,7vw,100px); }
.embed-panel .survey-wrap{
  padding:clamp(14px,2vw,26px);
  background:linear-gradient(160deg, rgba(255,255,255,.55) 0%, rgba(20,154,156,.12) 100%), rgba(226,242,241,.75);
  border:1px solid rgba(20,154,156,.35); border-radius:var(--r-lg);
}
.embed-panel .survey-wrap iframe{ border-radius:12px; }

/* footer scripture */
.ftr-verse{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line-2);
  max-width:34ch; font-size:15px; line-height:1.65; font-style:italic; color:var(--fg-2);
}
.ftr-verse span{
  display:block; margin-bottom:7px; font-style:normal;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-deep);
}

/* card grids where the link should sit on a shared baseline */
.cards--align .card,
.cards--align .incl-card{ display:flex; flex-direction:column; }
.cards--align .card > p:last-child,
.cards--align .incl-card > p:last-child{ margin-top:auto; padding-top:18px; }

/* --------------------------------------------------------------------------
   Legal pages. Privacy, POPIA, Cookies, Terms.
   Narrow reading column with a sticky contents rail on desktop.
   -------------------------------------------------------------------------- */
.phero--legal{ text-align:center; }
.phero--legal .wrap > *{ margin-inline:auto; }
.phero--legal h1{ max-width:22ch; }
.phero--legal .lede{ max-width:62ch; }
.legal-date{
  margin-top:26px; font-family:var(--mono); font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3);
}
.legal-date span{ color:var(--teal-deep); }
.legal-date span::after{ content:' \00b7'; color:var(--line-2); }

.legal-grid{
  display:grid; grid-template-columns:238px minmax(0,1fr);
  gap:clamp(36px,5vw,76px); align-items:start;
}
.legal-toc,.legal-body{ min-width:0; }
.legal-toc{ position:sticky; top:104px; }
.legal-toc-h{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-deep);
  padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--line-2);
}
.legal-toc-h--2{ margin-top:30px; }
.legal-toc ol,.legal-toc ul{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.legal-toc li + li{ margin-top:9px; }
.legal-toc a{
  display:block; font-size:14.5px; line-height:1.45; color:var(--fg-2);
  text-decoration:none; transition:color .18s var(--ease);
}
.legal-toc ol a::before{
  counter-increment:toc; content:counter(toc) '. ';
  font-family:var(--mono); font-size:12px; color:var(--fg-3);
}
.legal-toc a:hover,.legal-toc a:focus-visible{ color:var(--teal-deep); }
.legal-toc ul a{ font-weight:560; }

.legal-body{ max-width:72ch; }
.legal-sec + .legal-sec{
  margin-top:44px; padding-top:40px; border-top:1px solid var(--line);
}
.legal-body h2{
  font-size:clamp(21px,2.1vw,26px); line-height:1.28; margin-bottom:18px;
  scroll-margin-top:112px;
}
.legal-body p{ font-size:16.5px; line-height:1.72; color:var(--fg-2); }
.legal-body > section > p + p,
.legal-body p + p{ margin-top:1.05em; }
.legal-body ul,.legal-body ol{ margin-block:20px; }
.legal-body a{ color:var(--teal-deep); text-underline-offset:3px; }
.legal-body code{
  font-family:var(--mono); font-size:13.5px; padding:2px 6px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:5px; color:var(--fg);
}

.ticks--num{ counter-reset:tk; }
.ticks--num li{ padding-left:34px; }
.ticks--num li::before{
  counter-increment:tk; content:counter(tk);
  width:auto; height:auto; top:0; left:0; border-radius:0; background:none;
  box-shadow:none; display:block;
  font-family:var(--mono); font-size:12.5px; font-weight:500;
  color:var(--teal-deep); line-height:1.75;
}

.legal-card{
  margin:0 0 20px; padding:22px 24px; background:var(--surface-2);
  border:1px solid var(--line); border-left:3px solid var(--teal);
  border-radius:var(--r);
}
.legal-card p{ font-size:16px; line-height:1.68; }
.legal-card p + p{ margin-top:14px; }
.legal-card-h{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-deep); margin-bottom:12px;
}
.legal-card--plain{ border-left-color:var(--gold); }

.legal-callout{
  padding:24px 26px; border:1px solid var(--tint-line);
  border-radius:var(--r-lg); background:var(--tint);
}
.legal-callout p{ font-size:17.5px; line-height:1.62; color:var(--fg); font-weight:560; }

.table-scroll{ margin-block:22px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.legal-table{
  width:100%; min-width:560px; border-collapse:collapse;
  font-size:15px; line-height:1.55;
}
.legal-table th,.legal-table td{
  padding:12px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line);
}
.legal-table thead th{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--teal-deep);
  border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.legal-table td{ color:var(--fg-2); }
.legal-table td:first-child,.legal-table td:last-child{ white-space:nowrap; }
.legal-table tbody tr:last-child td{ border-bottom:0; }

@media (max-width:1000px){
  .legal-grid{ grid-template-columns:minmax(0,1fr); }
  .legal-toc{
    position:static; padding:20px 22px; background:var(--surface-2);
    border:1px solid var(--line); border-radius:var(--r);
  }
  .legal-toc ol{ columns:2; column-gap:28px; }
  .legal-body{ max-width:none; }
}
@media (max-width:520px){
  .legal-toc ol{ columns:1; }
  .legal-table td:last-child{ white-space:normal; }
}

/* --------------------------------------------------------------------------
   Cookie consent banner. Analytics is not requested until accepted.
   Teal wash card with a teal-to-gold gradient border, shield ghosted in.
   -------------------------------------------------------------------------- */
.cc{
  position:fixed; right:var(--gut); bottom:var(--gut); z-index:90;
  width:min(430px,calc(100vw - var(--gut) * 2));
  padding:26px 28px 28px; border-radius:var(--r-lg);
  border:2px solid transparent;
  background:
    linear-gradient(158deg,#FFFFFF 0%,#D5ECEC 100%) padding-box,
    linear-gradient(135deg,var(--teal) 0%,var(--gold) 100%) border-box;
  box-shadow:0 26px 60px -30px rgba(11,53,55,.45);
  opacity:0; transform:translateY(12px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  overflow:hidden;
}
.cc[hidden]{ display:none; }
.cc.is-on{ opacity:1; transform:none; }
.cc-shield{
  position:absolute; right:-40px; bottom:-46px; width:170px; height:170px;
  background:url('../img/knox-mark.png') center/contain no-repeat;
  opacity:.1; pointer-events:none;
}
.cc-t{
  position:relative;
  font-family:var(--display); text-transform:uppercase; letter-spacing:.015em;
  font-size:19px; line-height:1.1; margin-bottom:10px; color:var(--fg);
}
.cc-b{ position:relative; font-size:14.5px; line-height:1.6; color:var(--fg-2); }
.cc-b a{ color:var(--teal-deep); text-underline-offset:3px; }
.cc-btns{
  position:relative; display:flex; align-items:center; gap:18px; margin-top:20px;
}
.cc .btn{
  flex:0 0 auto; cursor:pointer; padding:12px 30px;
  font-family:var(--body); font-size:14.5px; font-weight:650;
  -webkit-appearance:none; appearance:none;
}
.cc-link{
  background:none; border:0; cursor:pointer; padding:4px 0;
  font-family:var(--body); font-size:14.5px; font-weight:560;
  color:var(--fg-3); border-bottom:1px solid var(--line-2);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.cc-link:hover{ color:var(--fg); border-color:var(--fg); }
@media (max-width:620px){
  .cc{ left:var(--gut); right:var(--gut); width:auto; padding:22px 22px 24px; }
  body.cc-open .sticky-cta{ opacity:0; pointer-events:none; }
}

/* footer legal row */
.ftr-legal{ display:flex; flex-wrap:wrap; gap:8px 20px; }
.ftr-legal a{ font-size:14px; color:var(--fg-3); border-bottom:1px solid var(--line-2); }
.ftr-legal a:hover{ color:var(--teal-text); border-color:var(--teal-text); }
@media (max-width:860px){
  .ftr-base{ justify-content:flex-start; }
  .ftr-legal{ order:3; width:100%; }
}