/* ==========================================================================
   SMARTA SPRINT, one stylesheet for the whole site
   ==========================================================================

   THIS IS THE ONLY PLACE SITE-WIDE STYLE LIVES. Edit here, never per page.

   Why it exists: until 4 Aug 2026 all 24 pages carried their own copy of the
   design system inline. They drifted badly. Eleven different versions of the
   CSS were live at once, with 53 to 69 conflicting selectors per page:
   six variants of .btn, six of body, five of .hero h1, three of .nav, and a
   whole parallel token set on /packages (--text, --muted, --yellow) shadowing
   the real one. Header logos rendered at 190px, 205px, 160px and 150px
   depending on the page. The location pages used .steps-grid and .glass.step
   without ever defining them, so those cards rendered with zero padding and
   zero gap and clipped their own text.

   Rules for anyone editing this file:
     1. One component, one definition. If you need a variant, add a modifier
        class, do not redefine the base.
     2. Page-specific CSS belongs in that page's own <style> block, and should
        be a handful of lines. If it is longer than that, it is a component and
        belongs here.
     3. No em-dashes anywhere in this codebase, including comments.

   Sections
     01  Fonts and tokens
     02  Reset and base typography
     03  Layout
     04  Buttons and links
     05  Surfaces (glass cards)
     06  Header and navigation
     07  Hero
     08  Sections and headings
     09  Homepage components
     10  Content page components
     11  FAQ
     12  Footer
     13  Motion system
     14  Responsive
   ========================================================================== */


/* == 01  FONTS AND TOKENS ================================================= */

@font-face{
  font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;
  src:url(/fonts/LDIoaomQNQcsA88c7O9yZ4KMCoOg4Ko20yw.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --f-display:'Plus Jakarta Sans',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-body:'Inter',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --bg:#FAF7F2; --bg2:#F2EDE5; --panel:#FFFFFF; --panel2:#FBF9F6;
  --bd:rgba(23,19,32,.10); --bd2:rgba(23,19,32,.18);
  --tx:#171320; --mut:#55505E; --soft:#6F6979;
  --sf-rgb:23,19,32;
  /* ONE magenta. #E71C8E is the brand colour and it is used everywhere, at
     every size, with no darkened variant.
     History: a darkened #C9187C was introduced so small magenta text would
     clear WCAG AA 4.5:1 on cream (#E71C8E measures 3.97:1). Joe rejected it
     twice, on sight, as reading purple. It is his brand and his call, so the
     variant is gone. --mag-aa is kept only as an alias so the ~20 rules that
     reference it keep working; do not reintroduce a second pink.
     Known trade-off: magenta text under 24px sits at 3.97:1 against cream,
     just under the 4.5:1 AA threshold. Everything else on the site passes. */
  --mag:#E71C8E; --mag-aa:var(--mag); --pur:#E71C8E; --yel:#FFB900; --aqua:#60C3D4;

  /* Header logo width, one value drives every breakpoint so the mark is the
     same size on every page. It was four different sizes before. */
  --logo-w:190px;

  /* Aliases. /packages used to ship a second token vocabulary. Kept so any
     stray rule or inline style still resolves instead of silently rendering
     black on black. Do not use these in new code. */
  --text:var(--tx); --muted:var(--mut); --yellow:var(--yel);
  --line:var(--bd); --display:var(--f-display); --body:var(--f-body);
  --purple:var(--mag);
}


/* == 02  RESET AND BASE TYPOGRAPHY ======================================== */

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  background:var(--bg);color:var(--tx);font-family:var(--f-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;}

h1,h2,h3,.n,.nm,.stat .n{font-family:var(--f-display);letter-spacing:-.028em;}

/* Orphan control. `balance` evens out multi-line headings, `pretty` stops a
   single word dropping to a line of its own ("across Australia."). */
h1,h2,h3,h4,h5,.sec-h,.eyebrow,.at-headline,.audit-strip b{text-wrap:balance;}
p,li,dd,figcaption,blockquote,
.lead,.sec-sub,.micro,.at-note,.at-label,.proof-source,.scope,
.audit-discover p,.audit-discover span,
.pcard p,.mcard p,.case p,.glass p,.offer-mini p,.qa p{text-wrap:pretty;}

/* Anything that must never break mid-phrase. */
.nb{white-space:nowrap;}

s,.pk .worth s{
  color:var(--mut);text-decoration:line-through;
  text-decoration-color:rgba(23,19,32,.22);text-decoration-thickness:1px;
}


/* == 03  LAYOUT =========================================================== */

.wrap{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.narrow{max-width:720px;}
section{padding:96px 0;position:relative;}

.glow{position:absolute;display:none;border-radius:50%;filter:blur(40px);z-index:0;pointer-events:none;}


/* == 04  BUTTONS AND LINKS ================================================ */

a{color:inherit;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--yel);color:var(--tx);
  font-family:inherit;font-weight:800;font-size:16px;line-height:1.2;
  padding:15px 32px;min-height:50px;
  border:none;border-radius:999px;text-decoration:none;cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s ease,filter .2s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 10px 40px rgba(255,185,0,.35);}
.btn:active{transform:translateY(0);}
.btn.mag{background:var(--mag-aa);color:#fff;}
.btn.mag:hover{box-shadow:0 10px 40px rgba(231,28,142,.45);}
.btn.ghost{background:transparent;color:var(--tx);border:1px solid var(--bd2);}

/* Text link with the brand underline, used beside a primary button. */
.text-link,.hero-actions .quiet{
  display:inline-flex;min-height:48px;align-items:center;
  color:var(--tx);font-weight:800;text-decoration:none;
  padding:10px 4px;border-bottom:2px solid var(--mag);
}

/* One focus ring for the whole site (WCAG 2.2). There were five. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--mag);outline-offset:3px;border-radius:8px;
}


/* == 05  SURFACES ========================================================= */

.glass{
  position:relative;overflow:hidden;
  background:var(--panel);border:1.6px solid rgba(23,19,32,.12);border-radius:20px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s ease,box-shadow .28s ease;
}
.glass:hover{transform:translateY(-4px);border-color:rgba(231,28,142,.38);box-shadow:0 18px 48px rgba(231,28,142,.16);}
.glass::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 38%,rgba(23,19,32,.055) 50%,transparent 62%);
  transform:translateX(-100%);transition:opacity .3s ease;
}
.glass:hover::before{opacity:1;animation:sheen .9s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes sheen{ to{ transform:translateX(100%) } }


/* == 06  HEADER AND NAVIGATION ============================================
   One nav for every page. The old per-page versions disagreed on padding,
   logo width, toggle size and, on /packages, used an absolutely positioned
   drawer that computed to left:-17px and hung off the side of the screen. */

.nav{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0 30px;
}
.nav img,.nav > img,.nav .logo{width:var(--logo-w);height:auto;display:block;}
.nav > a{display:block;line-height:0;margin-right:auto;}
.nav > img{margin-right:auto;}

.navlinks{display:flex;gap:22px;align-items:center;font-size:14.5px;font-weight:600;}
.navlinks a{
  white-space:nowrap;text-decoration:none;color:var(--mut);
  transition:color .2s;position:relative;
}
.navlinks a:hover{color:var(--tx);}
.navlinks a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;
  background:var(--mag);transform:scaleX(0);transform-origin:right;
  transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.navlinks a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left;}
.navlinks a.btn,.navlinks a.btn.nav-cta{color:var(--tx);}

/* The homepage carried an extra yellow pill no other page had. One nav now. */
.nav-audit{display:none!important;}

.navtoggle{
  display:none;background:none;border:1.6px solid rgba(23,19,32,.14);border-radius:12px;
  padding:9px 11px;width:44px;height:44px;flex:0 0 44px;cursor:pointer;line-height:0;
}
.navtoggle span{
  display:block;width:20px;height:2px;background:var(--tx);border-radius:2px;margin:4px auto;
  transition:transform .25s ease,opacity .2s ease;
}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}


/* == 07  HERO ============================================================= */

/* The hero always ends with breathing room. Several sections that follow a hero
   deliberately set padding-top:0 or a small value inline, because the old
   homepage hero carried padding-bottom:74px. The unification dropped that, so
   on the homepage the "Or get a free growth audit" underline finished at y=448
   and the stat cards started at y=449: touching, which is the "book a call and
   audit section looks broken" report. Spacing belongs on the hero, not on each
   following section, so it cannot go missing again. */
/* Hero pill badge, the leadtheway.io hero pattern (pill badge above an
   outcome H1). Replaces a plain uppercase eyebrow, which read as a label
   rather than a signal. */
.hero-pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 12px;
  border-radius:999px;background:rgba(231,28,142,.07);border:1px solid rgba(231,28,142,.20);
  font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--mag-aa);margin-bottom:18px;}
.hero-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--mag);
  box-shadow:0 0 0 3px rgba(231,28,142,.16);}

/* leadtheway tags the free step in its "how it works" row. Sprint's step 1 IS
   the free audit and never said so at a glance. */
.step-free{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 9px;
  border-radius:999px;background:var(--mag);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;}

/* Results strip above the nav, the Echelonn slot. Carries results rather than
   testimonial quotes, because Sprint has one testimonial and four real numbers. */
.topbar{background:var(--tx);color:#fff;padding:9px 0;font-size:13px;}
.topbar-list{list-style:none;margin:0;display:flex;justify-content:center;
  align-items:center;gap:0;flex-wrap:wrap;}
.topbar-list li{padding:2px 15px;color:rgba(255,255,255,.72);white-space:nowrap;}
.topbar-list li + li{border-left:1px solid rgba(255,255,255,.18);}
.topbar-list b{color:#fff;font-weight:800;}
@media(max-width:900px){
  .topbar{font-size:12px;padding:8px 0;}
  .topbar-list li{padding:2px 12px;}
  .topbar-list li:nth-child(n+3){display:none;}
}
/* Under 620px even two results wrap to a second line, so lead with the
   single strongest number rather than a two-line band above the logo. */
@media(max-width:620px){
  .topbar-list li{border-left:0;}
  .topbar-list li:nth-child(n+2){display:none;}
}

.hero{position:relative;overflow:hidden;padding:16px 0 56px;}
.hero .g1{width:560px;height:560px;background:radial-gradient(circle,rgba(231,28,142,.10),transparent 60%);top:-180px;right:-160px;}
.hero .g2{width:520px;height:520px;background:radial-gradient(circle,rgba(255,185,0,.06),transparent 62%);top:120px;left:-220px;}
.hero .g3{width:440px;height:440px;background:radial-gradient(circle,rgba(255,185,0,.07),transparent 65%);bottom:-200px;right:80px;}

/* One heading scale. There were five, from clamp(34px,5.4vw,56px) upward. */
.hero h1{
  font-size:clamp(36px,5.4vw,62px);line-height:1.02;font-weight:800;
  letter-spacing:-.032em;margin:14px 0 18px;
}
.hero .lead,.hero p.lead{font-size:18.5px;color:var(--mut);max-width:620px;margin-bottom:28px;}
.hero-grid{display:block;max-width:900px;}
.hero-copy{max-width:900px;}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px;}
.hero-note{margin-top:16px;color:var(--soft);font-size:13.5px;}
.heroflex{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:30px 0 6px;}
.micro{font-size:13px;color:var(--soft);margin-top:14px;}
.scope{display:flex;gap:12px;align-items:flex-start;margin-top:28px;color:var(--mut);font-size:14px;}
.btn-micro{margin-top:12px;font-size:13.5px;color:var(--soft);}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}

.hero-video{max-width:390px;width:100%;margin:0 auto;position:relative;}
.hero-video video{
  width:100%;aspect-ratio:9/16;object-fit:cover;display:block;border-radius:24px;
  border:1.6px solid rgba(23,19,32,.14);box-shadow:0 26px 80px rgba(231,28,142,.32);background:#000;
}
.hero-video .vcap{margin-top:14px;font-size:14.5px;color:var(--mut);text-align:center;}
/* Poster-only state before the real file lands: same frame, no <video> yet. */
.hero-video .vposter{
  width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;display:block;border-radius:24px;
  border:1.6px solid rgba(23,19,32,.14);box-shadow:0 26px 80px rgba(231,28,142,.32);background:#000;
}
.hero-video .vsoon{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  background:rgba(23,19,32,.72);backdrop-filter:blur(6px);color:#fff;
  font-family:var(--f-display);font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:9px 16px;border-radius:999px;white-space:nowrap;
}
.hero-video .vplay{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(23,19,32,.28);
}
.hero-video .vplay svg{width:22px;height:22px;fill:var(--mag);margin-left:3px;}

/* Kane's case study paired with the video: proof you can watch next to proof
   you can read. 2-up on desktop, stacks on mobile like every other grid here. */
/* Video beside the proof column. The heading lives INSIDE the right column so
   the column has enough height to sit against a 9:16 video without a short
   card stack floating in a tall empty box. Centred, so the leftover is even
   top and bottom rather than dumped at the bottom. */
.proof-pair{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center;margin-top:12px;}
.proof-pair .hero-video{max-width:350px;}

.g-strip{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  background:rgba(255,185,0,.08);border:1px solid rgba(255,185,0,.38);border-radius:12px;
  padding:10px 16px;font-size:14.5px;font-weight:800;color:#6B5410;text-decoration:none;
  transition:transform .15s,box-shadow .15s;
}
.g-strip:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(255,185,0,.18);}
.g-strip .z{color:var(--mag);}

.trust-ticks{list-style:none;margin:24px 0 0;display:flex;flex-direction:column;gap:9px;}
.trust-ticks li{font-size:14.5px;color:var(--mut);padding-left:26px;position:relative;}
.trust-ticks li:before{
  content:"";position:absolute;left:2px;top:7px;width:11px;height:6px;
  border-left:2.2px solid var(--mag);border-bottom:2.2px solid var(--mag);transform:rotate(-45deg);
}


/* == 08  SECTIONS AND HEADINGS ============================================ */

.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--mag-aa);}
.sec-h{font-size:36px;font-weight:800;letter-spacing:-.02em;margin:10px 0 12px;line-height:1.08;}
.sec-sub{font-size:17px;color:var(--mut);max-width:640px;}
.grad{color:var(--mag);}
.gradY{color:var(--tx);}

.cta-band{text-align:center;padding:56px 26px;}
.cta-band h2{font-size:clamp(26px,3.6vw,38px);font-weight:800;margin-bottom:12px;}
.cta-band p{color:var(--mut);margin-bottom:24px;}

/* Breathing room, a CTA butted straight under a paragraph read cramped. */
p + .btn,.lead + .btn,p + .btn.mag,.lead + .btn.mag{margin-top:26px;}


/* == 09  HOMEPAGE COMPONENTS ============================================== */

/* Value card */
.vcard{padding:34px 30px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px 40px;text-align:center;}
.vcard .arrow-right{display:inline;}
.vcard .arrow-down{display:none;}
.vcard .lbl{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);font-weight:800;margin-bottom:10px;}
.vcard .lbl.pay{color:var(--mag-aa);}
.vcard .was{font-size:46px;font-weight:900;color:var(--mut);text-decoration:line-through;text-decoration-color:rgba(23,19,32,.20);text-decoration-thickness:2px;letter-spacing:-.03em;}
.vcard .now{font-size:56px;font-weight:900;letter-spacing:-.03em;}
.vcard .arrow{font-size:30px;color:var(--soft);}
.vsub{text-align:center;color:var(--mut);font-size:15px;margin:18px auto 0;max-width:600px;}

/* Stat tiles */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px;}
.stat{position:relative;overflow:hidden;padding:20px 18px;text-align:center;border-radius:16px;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;}
.stat:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--mag);opacity:0;transition:opacity .4s;}
.stat:after{content:"";position:absolute;top:0;left:-130%;width:75%;height:100%;background:linear-gradient(100deg,transparent,rgba(23,19,32,.06),transparent);transform:skewX(-18deg);transition:left .65s ease;pointer-events:none;}
.stat:hover{transform:translateY(-3px);border-color:var(--bd2);box-shadow:0 16px 42px rgba(231,28,142,.16);}
.stat:hover:before{opacity:1;}
.stat:hover:after{left:150%;}
.stat .n{font-family:var(--f-display);font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.stat .l{font-size:12.5px;color:var(--soft);margin-top:7px;letter-spacing:.02em;}

/* Proof cards */
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;}
/* Three own-businesses, not four, since Smarta UK came off the results set. */
.proof-grid.three{grid-template-columns:repeat(3,1fr);gap:18px;}
.pcard{position:relative;overflow:hidden;padding:26px 18px;text-align:center;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;}
.pcard:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--mag);opacity:.45;transition:opacity .4s;}
.pcard:after{content:"";position:absolute;top:0;left:-130%;width:75%;height:100%;background:linear-gradient(100deg,transparent,rgba(23,19,32,.09),transparent);transform:skewX(-18deg);transition:left .65s ease;pointer-events:none;}
.pcard:hover{transform:translateY(-8px);border-color:var(--bd2);box-shadow:0 20px 52px rgba(231,28,142,.20);}
.pcard:hover:before{opacity:1;}
.pcard:hover:after{left:150%;}
.pcard .logo{height:84px;display:flex;align-items:center;justify-content:center;gap:8px;margin:0 auto 12px;}
.pcard .logo img,.pcard .logo svg{max-height:64px;max-width:185px;width:auto;height:auto;object-fit:contain;transition:transform .4s ease;}
.pcard .logo .bms{height:60px;width:auto;}
.pcard .logo img.sm-logo{flex:none;height:42px;width:auto;max-width:190px;}
.pcard:hover .logo img,.pcard:hover .logo svg{transform:scale(1.06);}
.pcard .cc{position:absolute;top:13px;right:13px;z-index:3;display:inline-flex;align-items:center;gap:5px;font-size:9px;font-weight:800;letter-spacing:.06em;line-height:1;padding:3px 7px;border-radius:999px;background:rgba(23,19,32,.05);border:1px solid var(--bd);color:var(--tx);}
.pcard .cc:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mag);box-shadow:0 0 8px var(--mag);}
.pcard .name{font-size:15.5px;font-weight:800;color:var(--tx);margin-bottom:3px;}
.pcard .tag{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mag-aa);font-weight:700;margin-bottom:8px;}
.pcard p{flex:1;font-size:13px;color:var(--mut);line-height:1.5;}
.pcard .result{display:block;margin-top:16px;font-size:23px;font-weight:900;letter-spacing:-.01em;color:var(--tx);background:linear-gradient(100deg,rgba(231,28,142,.10),rgba(255,185,0,.08));border:1px solid rgba(231,28,142,.20);border-radius:10px;padding:8px 10px;}
.pcard .result small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mag-aa);margin-top:2px;}
.pcard .visit{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;color:var(--mag-aa);}
a.pcard{text-decoration:none;color:inherit;}
.proof-foot{margin-top:30px;font-size:22px;font-weight:800;text-align:center;letter-spacing:-.01em;}

/* Proof number row */
.proof-line{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.proof-line div{position:relative;overflow:hidden;background:#FFFFFF;border:1px solid var(--bd);border-radius:16px;padding:26px 16px 20px;text-align:center;box-shadow:0 3px 14px rgba(23,19,32,.05);transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s ease,border-color .26s ease;}
.proof-line div::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--mag),var(--yel));}
.proof-line div:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(23,19,32,.09);border-color:rgba(231,28,142,.28);}
.proof-line strong{display:block;font-family:var(--f-display);font-size:29px;font-weight:800;color:var(--tx);}
.proof-line span{display:block;margin-top:5px;color:var(--mut);font-size:12px;line-height:1.35;}
/* Three-up variant, used on /case-studies/ where there are three numbers
   rather than four. Same card treatment as the homepage so the proof reads the
   same wherever it appears. */
.proof-line.stats-3{grid-template-columns:repeat(3,1fr);margin-top:34px;}

/* Client logo wall */
.proof-logos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:center;margin-top:30px;}
.proof-logo{display:flex;min-width:0;min-height:124px;align-items:center;justify-content:center;padding:18px;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .22s ease;}
.proof-logo img{max-width:200px;max-height:56px;width:auto;height:auto;object-fit:contain;transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .2s ease;}
.proof-logo img.badge-logo{max-height:82px;max-width:128px;}
.proof-logo img.sm-logo,.proof-logo .sm-logo{max-height:42px;}
a.proof-logo{position:relative;text-decoration:none;}
a.proof-logo:hover{border-color:var(--mag);transform:translateY(-2px);}
a.proof-logo:hover img{opacity:.86;transform:scale(1.04);}
.proof-logo:active{transform:translateY(0);}
.logo-tag{position:absolute;right:10px;bottom:8px;font-size:9.5px;font-weight:900;letter-spacing:.12em;color:var(--mut);}
.proof-source{text-align:center;margin-top:16px;font-size:13.5px;color:var(--soft);}
.proof-source a{color:var(--mag-aa);font-weight:700;text-decoration:none;}
.proof-source a:hover{color:var(--tx);text-decoration:underline;}

/* Menu cards */
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;}
.mcard{position:relative;overflow:hidden;padding:24px 22px;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;}
.mcard:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--mag);opacity:0;transition:opacity .4s;}
.mcard:after{content:"";position:absolute;top:0;left:-130%;width:75%;height:100%;background:linear-gradient(100deg,transparent,rgba(23,19,32,.06),transparent);transform:skewX(-18deg);transition:left .65s ease;pointer-events:none;}
.mcard:hover{transform:translateY(-7px);border-color:var(--bd2);box-shadow:0 18px 48px rgba(231,28,142,.16);}
.mcard:hover:before{opacity:1;}
.mcard:hover:after{left:150%;}
.mcard .ic{width:42px;height:42px;border-radius:12px;background:rgba(231,28,142,.14);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.mcard svg{width:22px;height:22px;color:var(--mag);}
.mcard h3{font-size:15px;font-weight:800;margin-bottom:4px;}
.mcard p{font-size:13px;color:var(--mut);line-height:1.5;}

/* Offer rail */
.offer-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;}
.offer-mini{position:relative;padding:30px 26px;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);background:linear-gradient(180deg,rgba(23,19,32,.03),transparent);text-decoration:none;color:inherit;transition:transform .2s,border-color .2s;}
.offer-mini:hover{transform:translateY(-4px);border-color:var(--mag);}
.offer-mini .kicker{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mag-aa);}
.offer-mini h3{font-size:27px;margin:10px 0 8px;}
.offer-mini p{color:var(--mut);font-size:14px;}
.offer-mini .go{display:inline-block;margin-top:18px;color:var(--mag-aa);font-weight:800;}
.offer-mini.flagship{border-color:rgba(231,28,142,.48);}
.offer-mini.flagship:before{content:"Flagship";display:inline-block;margin-bottom:12px;padding:5px 11px;border-radius:999px;background:var(--mag-aa);color:#fff;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;}

/* Packages */
.pk-label{display:flex;align-items:center;gap:12px;margin:30px 0 16px;}
.pk-label .t{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mag-aa);}
.pk-label .ln{flex:1;height:1px;background:var(--bd);}
.pk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.pk-grid.one{grid-template-columns:1fr;max-width:560px;}
.pk{padding:30px 26px;display:flex;flex-direction:column;position:relative;}
.pk:hover{transform:translateY(-4px);}
.pk.feat{border-color:rgba(231,28,142,.10);box-shadow:0 0 60px rgba(231,28,142,.12);}
.pk .flag{position:absolute;top:-12px;left:26px;background:var(--mag-aa);color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 14px;border-radius:999px;}
.pk .who{font-size:13px;color:var(--mag-aa);font-weight:600;margin-bottom:5px;}
.pk .nm{font-size:25px;font-weight:800;margin-bottom:10px;}
.pk .worth{font-size:13px;color:var(--mut);font-weight:600;}
.pk .price{font-size:38px;font-weight:800;letter-spacing:-.02em;margin-top:2px;}
.pk .price small{font-size:14px;font-weight:600;color:var(--soft);}
.pk .founding{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:#6B5410;background:rgba(255,185,0,.10);border:1px solid rgba(255,185,0,.28);border-radius:8px;padding:6px 11px;}
.pk .founding b{color:var(--mag-aa);font-weight:800;}
.pk .speed{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--mag-aa);margin:14px 0 18px;}
.pk ul{list-style:none;margin:0 0 24px;flex:1;}
.pk li{font-size:14px;color:var(--mut);padding:8px 0 8px 28px;position:relative;border-top:1px solid rgba(23,19,32,.055);}
.pk li:first-child{border-top:none;}
.pk li:before{content:"";position:absolute;left:2px;top:14px;width:12px;height:7px;border-left:2px solid var(--mag);border-bottom:2px solid var(--mag);transform:rotate(-45deg);}
.pk li.head{font-weight:800;color:var(--tx);padding-left:0;}
.pk li.head:before{display:none;}
.pk .btn{width:100%;}
.roll{text-align:center;margin-top:20px;font-size:14px;color:var(--mut);}
.roll b{color:var(--mag-aa);}

/* Numbered process steps (homepage). A .step must contain a .num. For plain
   service cards use .svc, see section 10. */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;}
.step{padding:38px 30px;text-align:center;}
.step .num{width:64px;height:64px;border-radius:50%;background:var(--mag);color:#fff;font-weight:800;font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 0 34px rgba(231,28,142,.35);}
.step h3{font-size:24px;font-weight:800;margin-bottom:10px;letter-spacing:-.01em;}
.step p{font-size:17px;color:var(--mut);line-height:1.55;}

/* Guarantee card */
.nobs-card{padding:54px 44px;text-align:center;background:linear-gradient(135deg,rgba(231,28,142,.10),rgba(255,185,0,.09) 58%,rgba(231,28,142,.05));border:1px solid rgba(23,19,32,.12);border-radius:24px;position:relative;overflow:hidden;box-shadow:0 10px 34px rgba(23,19,32,.06);}
.nobs-card:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(23,19,32,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(23,19,32,.04) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:radial-gradient(circle at 50% 38%,#000,transparent 78%);mask-image:radial-gradient(circle at 50% 38%,#000,transparent 78%);pointer-events:none;z-index:0;}
.nobs-card:after{content:"";position:absolute;top:-60%;left:-35%;width:45%;height:220%;background:linear-gradient(100deg,transparent,rgba(23,19,32,.10),transparent);transform:skewX(-20deg);animation:nobsSheen 7s ease-in-out infinite;pointer-events:none;z-index:0;}
@keyframes nobsSheen{0%,100%{left:-35%;}55%{left:125%;}}
.nobs-card h2,.nobs-card p,.nobs-card .sig,.nobs-card .eyebrow{position:relative;z-index:2;}
.nobs-card h2{font-size:38px;font-weight:800;letter-spacing:-.02em;margin-bottom:18px;line-height:1.1;}
.nobs-card p{font-size:19px;max-width:680px;margin:0 auto 14px;color:var(--tx);}
.nobs-card .sig{margin-top:22px;font-weight:700;font-size:16px;color:var(--tx);}

/* Energy bolt FX, shared by the guarantee box and the audit box */
.bolt{position:absolute;top:auto;bottom:12px;right:14px;height:38%;width:auto;transform:rotate(12deg);opacity:.11;z-index:0;pointer-events:none;animation:boltStrike 3.4s ease-in-out infinite;}
.bolt.left{right:auto;left:14px;top:12px;bottom:auto;transform:rotate(-14deg);animation-delay:1.7s;}
@keyframes boltStrike{0%,84%,100%{opacity:.13;filter:none;}87%{opacity:.7;filter:drop-shadow(0 0 18px var(--yel));}90%{opacity:.22;}93%{opacity:.6;filter:drop-shadow(0 0 24px var(--mag));}96%{opacity:.16;}}
.audit-fx{position:relative;overflow:hidden;}
.audit-fx:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(23,19,32,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,19,32,.035) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%);pointer-events:none;z-index:0;}
.audit-fx>*:not(.bolt){position:relative;z-index:2;}

/* Founder strip */
.founder-strip{display:grid;grid-template-columns:220px 1fr;gap:42px;align-items:center;max-width:900px;margin:0 auto;}
.founder-strip img{width:220px;height:260px;object-fit:cover;object-position:center top;border-radius:24px;filter:saturate(.88) contrast(1.03);}
.scope-note{display:flex;gap:14px;align-items:flex-start;margin-top:24px;padding-top:18px;border-top:1px solid var(--bd);}
.scope-note strong{color:var(--mag-aa);}

/* Apply form */
.form-card{max-width:580px;margin:34px auto 0;padding:34px;}
.form-card.flash{animation:formFlash 1.3s ease;}
@keyframes formFlash{0%{box-shadow:0 0 0 rgba(231,28,142,0);border-color:rgba(23,19,32,.12);}25%{box-shadow:0 0 48px rgba(231,28,142,.10);border-color:var(--mag);}100%{box-shadow:0 0 0 rgba(231,28,142,0);border-color:rgba(23,19,32,.12);}}
.form-card label{display:block;font-size:13px;font-weight:700;margin:14px 0 6px;color:var(--mut);}
.form-card input,.form-card select,.form-card textarea{width:100%;padding:13px 15px;border:1px solid var(--bd);border-radius:11px;font-size:16px;font-family:inherit;background:rgba(23,19,32,.035);color:var(--tx);}
.form-card select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A79FB0' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px;cursor:pointer;}
.form-card select option{background:#FFFFFF;color:var(--tx);}
.form-card input::placeholder,.form-card textarea::placeholder{color:var(--mut);}
.form-card textarea{min-height:80px;resize:vertical;}
.form-card .btn{width:100%;margin-top:22px;}
.thanks{display:none;text-align:center;padding:30px;}
.thanks h3{font-size:24px;font-weight:800;}

/* Sticky mobile CTA. Disabled sitewide, kept so the markup does no harm. */
.sticky-cta{display:none!important;}


/* == 10  CONTENT PAGE COMPONENTS ==========================================
   Used by the location, service, guide, areas, contact and legal pages. */

/* Service cards. This is what the location pages needed: they used .step and
   .steps-grid, which only the homepage defined, so the cards rendered with no
   padding, no gap and clipped descenders. */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;}
.svc{padding:26px 24px;}
.svc h3{font-size:18px;font-weight:800;margin-bottom:8px;}
.svc p{font-size:15px;color:var(--mut);margin:0;}

/* Internal link cards */
.inside{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:14px;}
.inside .c{padding:26px 24px;}
.inside h3{font-size:18px;font-weight:800;margin-bottom:8px;}
.inside p{color:var(--mut);font-size:15px;}
.inside .k{font-family:var(--f-display);font-size:13px;font-weight:800;color:var(--mag-aa);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;display:block;}

/* Two-up content boxes */
.cbox{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px;}
.cbox .c{padding:26px 24px;}
.cbox h2{font-size:20px;font-weight:800;margin-bottom:8px;}
.cbox h3{font-size:18px;font-weight:800;margin-bottom:8px;}
.cbox p{color:var(--mut);font-size:15px;margin:0;}

/* Suburb pills */
.subs{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;}
.subs span{border:1px solid rgba(23,19,32,.12);border-radius:999px;padding:7px 15px;font-size:13.5px;color:var(--mut);background:rgba(23,19,32,.03);}

/* Standout callout */
.sa{padding:26px;margin-top:26px;border-left:3px solid var(--yel);}
.sa .lbl{font-family:var(--f-display);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mag-aa);margin-bottom:10px;display:block;}
.sa p{font-size:17px;color:var(--tx);margin:0;}
.sa .meta{display:flex;flex-wrap:wrap;gap:18px 34px;margin-top:16px;}
.sa .meta div{font-size:14px;color:var(--mut);}
.sa .meta b{display:block;font-family:var(--f-display);font-size:19px;color:var(--tx);}

/* Guide cards */
.glist{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px;}
.gcard{padding:26px 24px;text-decoration:none;display:block;}
.gcard h2,.gcard h3{font-family:var(--f-display);font-size:19px;font-weight:800;margin-bottom:8px;color:var(--tx);}
.gcard p{color:var(--mut);font-size:15px;margin:0;}
.gcard .rt{color:var(--soft);font-size:12.5px;margin-top:12px;display:block;letter-spacing:.06em;text-transform:uppercase;}

/* Article body. Two heading tiers exist on purpose: marketing pages use the
   display scale in section 07, long-form guides step down one notch. That is
   a system, unlike the fourteen hardcoded inline sizes it replaced. */
.art{max-width:720px;}
.art h1{font-size:clamp(32px,4.4vw,48px);line-height:1.05;margin:14px 0 16px;}
.art .kicker{display:flex;gap:14px;align-items:center;color:var(--soft);font-size:13px;margin-top:16px;}
.art h2{font-size:clamp(22px,2.9vw,29px);font-weight:800;margin:44px 0 14px;}
.art h3{font-size:19px;font-weight:800;margin:28px 0 10px;}
.art p{color:var(--mut);font-size:16.5px;margin-bottom:16px;}
.art ul{color:var(--mut);font-size:16.5px;margin:0 0 18px 20px;display:flex;flex-direction:column;gap:9px;}
.art strong{color:var(--tx);}

.tldr{padding:24px 26px;margin:26px 0 8px;border-left:3px solid var(--yel);}
.tldr .lbl{font-family:var(--f-display);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mag-aa);margin-bottom:12px;display:block;}
.tldr ul{margin:0 0 0 18px;color:var(--tx);font-size:16px;display:flex;flex-direction:column;gap:8px;}

.byline{display:flex;gap:12px;align-items:center;margin-top:44px;padding-top:24px;border-top:1px solid rgba(23,19,32,.09);}
.byline img{width:48px;height:48px;border-radius:50%;object-fit:cover;}
.byline p{margin:0;font-size:14px;color:var(--soft);}
.byline b{color:var(--tx);font-family:var(--f-display);display:block;font-size:15px;}

/* About page: principles grid, timeline, portrait */
.prin{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:10px;}
.prin .c{padding:24px 22px;}
.prin h3{font-size:17.5px;font-weight:800;margin-bottom:7px;}
.prin p{color:var(--mut);font-size:15px;}
.tl{margin-top:8px;border-left:2px solid rgba(23,19,32,.10);padding-left:26px;display:flex;flex-direction:column;gap:26px;}
.tl .item{position:relative;}
.tl .item::before{content:"";position:absolute;left:-34px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--mag);box-shadow:0 0 0 4px rgba(231,28,142,.18);}
.tl h3{font-size:19px;font-weight:800;margin-bottom:5px;}
.tl p{color:var(--mut);font-size:15.5px;}
/* The founder portrait sits on the cream hero, so it is feathered into the page
   rather than framed. It used to be a hard-edged rounded rectangle with a 1.6px
   outline and a heavy magenta drop shadow, which read as a dark photo plonked
   on top of the background instead of part of it.
   The mask keeps the subject fully opaque and dissolves only the outer edge, so
   it reads as a soft vignette, not a washed-out photo. Centred on the face
   (46% across, 38% down) to match object-position. If mask-image is not
   supported the image simply shows in full, which is a fine fallback. */
/* The founder portrait is a BACKGROUND LAYER, not a column beside the copy.
   It fills the right of the hero and dissolves leftward into the cream, so the
   heading and lead sit on clean background while the photo carries the space
   behind them. It was previously a framed card in a two-up grid, which is what
   made it read as plonked on rather than part of the page. */
.hero-portrait{position:relative;}
.hero-portrait .wrap{position:relative;z-index:2;}
.portrait{
  position:absolute;top:0;right:0;bottom:0;left:auto;
  width:min(62%,820px);z-index:0;pointer-events:none;overflow:hidden;
  border:0;border-radius:0;box-shadow:none;
}
.portrait img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:58% 34%;
  /* Held at 72% so the headline always dominates the photo rather than fighting
     it. Fades to nothing on the left where the text sits, and the top fade runs
     to 26% so the nav row sits on clean cream instead of over picture detail. */
  opacity:.72;
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,rgba(0,0,0,.22) 28%,rgba(0,0,0,.78) 58%,#000 80%),
    linear-gradient(to bottom,transparent 0,#000 26%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,rgba(0,0,0,.22) 28%,rgba(0,0,0,.78) 58%,#000 80%),
    linear-gradient(to bottom,transparent 0,#000 26%,#000 76%,transparent 100%);
  mask-composite:intersect;
}
/* Keep the copy off the photo on desktop so nothing is read over detail. */
.hero-portrait .heroflex-solo > div{max-width:620px;}

/* Case studies stat row */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;}
.big{font-family:var(--f-display);font-size:clamp(21px,2.5vw,26px);font-weight:800;color:var(--mag);letter-spacing:-.01em;display:block;line-height:1.18;}

/* Packages page: one long-form block per package */
.intro{max-width:800px;}
.intro>p,.section-copy{color:var(--mut);font-size:18px;}
.hero-lead{max-width:620px;}
.package{scroll-margin-top:24px;display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.6fr);gap:58px;padding:70px 0;border-top:1px solid var(--bd);}
.package:last-child{border-bottom:1px solid var(--bd);}
.package-label{position:sticky;top:22px;align-self:start;}
.package-label .mode{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mag-aa);}
.package-label h2{font-size:clamp(36px,4vw,52px);margin:10px 0;}
.package-label .fit{color:var(--mut);}
.package-body .promise{font-family:var(--f-display);font-size:clamp(24px,3vw,34px);line-height:1.25;}
.package-body>p{color:var(--mut);margin-top:16px;}
.includes{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;margin:30px 0 32px;padding:0;list-style:none;border-top:1px solid var(--bd);}
.includes li{position:relative;padding:17px 0 17px 28px;border-bottom:1px solid var(--bd);color:var(--mut);}
.includes li:before{content:"";position:absolute;left:2px;top:24px;width:11px;height:6px;border-left:2px solid var(--mag);border-bottom:2px solid var(--mag);transform:rotate(-45deg);}

/* Collapsible terms block */
.terms-fold{border-top:1px solid rgba(23,19,32,.09);padding-top:18px;}
.terms-fold summary{cursor:pointer;list-style:none;font-weight:800;}
.terms-fold summary::-webkit-details-marker{display:none;}
.terms-fold summary:before{content:"+";color:var(--mag);font-size:20px;line-height:1;margin-right:8px;}
.terms-fold[open] summary:before{content:"\2212";}

/* Decision band, used at the foot of the packages page */
.decision{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:48px;border:1px solid var(--bd);border-radius:26px;background:linear-gradient(135deg,rgba(231,28,142,.11),rgba(255,185,0,.05));}
.decision h2{font-size:clamp(32px,4vw,48px);margin-top:0;}
.decision p{color:var(--mut);}
.decision-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* Standalone pill flag. .pk .flag is the absolutely positioned variant. */
.flag{display:inline-flex;margin-bottom:16px;padding:6px 12px;border-radius:999px;background:var(--mag-aa);color:#FFFFFF;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}
.detail-link{display:inline-flex;min-height:48px;align-items:center;margin-left:15px;color:var(--mag-aa);font-weight:800;text-decoration:none;}

/* Case studies */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:12px;}
/* Three own-businesses, so the grid is a 3-up. Cards carry more than one
   result chip now, the numbers were sitting unpublished in memory files. */
.cases.three{grid-template-columns:repeat(3,1fr);}
.case .result + .result{margin-top:10px;}
@media(max-width:1040px){ .cases.three{grid-template-columns:1fr 1fr;} }
.case{padding:28px 26px;display:flex;flex-direction:column;gap:12px;}
.case .logo{height:64px;display:flex;align-items:center;}
.case .logo img{max-height:54px;max-width:190px;width:auto;height:auto;}
.case .nm{font-family:var(--f-display);font-size:22px;font-weight:800;letter-spacing:-.02em;}
.case .tag{font-size:12.5px;color:var(--mag-aa);font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.case .role{font-size:12px;color:var(--soft);margin-top:2px;}
.case p{font-size:15.5px;color:var(--mut);}
.case .result{display:block;margin-top:14px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(231,28,142,.07),rgba(255,185,0,.05));border:1px solid rgba(231,28,142,.14);}
.case .result small{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--soft);margin-top:6px;}

/* Testimonial card, measured off the live Echelonn cards on 5 Aug: 32px pad,
   8px-ish radius, tinted not white, and critically the quote is BODY type at
   18px/27px weight 400, NOT display type. The earlier version used a 27px
   800-weight display pull-quote with a giant decorative quote mark, which is
   what made it read as a graphic dropped on the page rather than a person
   talking. Cards size to their own content and are never height-matched. */
.t-stack{display:flex;flex-direction:column;gap:16px;}
/* Standalone testimonial band, used while there is no video beside them.
   Two up on desktop, stacked on mobile, cards equal height so the band reads
   as one row rather than two loose boxes. */
.t-stack.t-2up{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
.t-stack.t-2up .t-card{height:100%;}
.t-card{padding:28px 26px;border-radius:14px;display:flex;flex-direction:column;gap:18px;
  background:linear-gradient(160deg,rgba(231,28,142,.055),rgba(255,185,0,.035));
  border:1px solid rgba(231,28,142,.14);}
.t-card .t-quote{font-size:16.5px;line-height:1.62;font-weight:400;color:var(--tx);}
/* Client mark sits at the TOP of the card at a readable size, not squeezed
   into a 46px avatar tile. Tried the tile first and both logos rendered as
   ~30px unreadable blobs, which is precisely the "clip art dropped on the
   page" look. A logo lockup handles the two very different aspect ratios
   (In-Tents is a badge, Smarta is a wordmark) that a square tile cannot. */
.t-card .t-brand{height:34px;width:auto;max-width:150px;object-fit:contain;object-position:left center;}
/* Wordmarks need less height than the In-Tents badge or they overpower it,
   but 22px read as weaker rather than balanced. 27px matches optically. */
.t-card .t-brand-wide{height:27px;}
.t-card .t-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.t-card .t-name{font-weight:800;color:var(--tx);font-size:15px;}
.t-card .t-role{font-size:13.5px;color:var(--soft);}
/* Real headshot when one exists, the Echelonn attribution pattern (64px
   circular photo). Cards without a photo just fall back to the name row,
   so this drops in per-person as photos come through. */
.t-card .t-face{flex:0 0 auto;width:46px;height:46px;border-radius:50%;object-fit:cover;
  object-position:center top;margin-right:5px;border:2px solid #fff;
  box-shadow:0 2px 10px rgba(23,19,32,.14);}
.t-card .t-face + .t-whotext{display:flex;flex-direction:column;min-width:0;}


/* == 11  FAQ ==============================================================
   One FAQ pattern sitewide: a <details> accordion. The homepage used to run a
   second, different one (14 always-open blocks with a "Show all" button). */

.faq{max-width:760px;margin:30px auto 0;}

/* Grouped variant, used where there are enough questions that a flat list
   becomes a wall. The homepage has 14: labelled into four themes and set two
   up on desktop, it scans in about half the height. Pages with four or five
   questions keep the plain .faq list. */
.faq-grouped{max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:6px 30px;align-items:start;}
.faq-cat{
  font-family:var(--f-display);font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mag-aa);margin:18px 0 12px;
}
.faq-group:first-child .faq-cat,.faq-group:nth-child(2) .faq-cat{margin-top:0;}
/* The homepage shows the six that matter for a decision and sends the rest to
   /faq/. Fourteen on the homepage was a wall however it was styled. */
.faq-more-link{margin-top:18px;text-align:center;}
.faq-more-link a{color:var(--mag);font-weight:800;text-decoration:none;font-size:15px;}
.faq-more-link a:hover{text-decoration:underline;}
.fq{padding:18px 22px;margin-bottom:10px;}
.fq summary{
  cursor:pointer;font-family:var(--f-display);font-weight:800;font-size:16.5px;
  list-style:none;padding:9px 40px 9px 0;margin:-9px 0;position:relative;
}
.fq summary::-webkit-details-marker{display:none;}
.fq summary::after{
  content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  color:var(--mag);font-size:24px;line-height:1;font-weight:700;
}
.fq[open] summary::after{content:"\2212";}
.fq p{color:var(--mut);font-size:15.5px;margin-top:12px;margin-bottom:0;}
.fq p + p{margin-top:10px;}


/* == 12  FOOTER ===========================================================
   Every page uses <footer class="sfoot">. The homepage additionally shipped a
   legacy `footer{text-align:center}` rule, which centred its footer text while
   leaving the flex row of social icons left-aligned. That mismatch is the
   "icons not central" report. There is no bare `footer` rule now. */

.sfoot{border-top:1px solid rgba(23,19,32,.09);padding:56px 0 34px;margin-top:20px;}
.sfoot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;}
.sfoot h3{font-family:var(--f-display);font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:14px;}
.sfoot ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0;padding:0;}
.sfoot a{color:var(--mut);text-decoration:none;font-size:14.5px;transition:color .2s;}
.sfoot a:hover{color:var(--tx);}
.sfoot .brandcol img{width:140px;height:auto;margin-bottom:12px;display:block;}
.sfoot .brandcol p{color:var(--soft);font-size:13.5px;max-width:280px;}
.sfoot .legal{border-top:1px solid rgba(23,19,32,.055);margin-top:34px;padding-top:22px;color:var(--soft);font-size:12.5px;line-height:1.7;}
/* The company facts (entity, ACN, ABN, city, privacy) are separate items, not
   one sentence, so they are laid out as a list rather than a run of text with
   literal middots between them. Each middot belongs to the item it precedes,
   which is what lets the whole row collapse to a clean stack on mobile. */
.sfoot .legal .legal-line{display:block;}
.sfoot .legal .legal-facts{display:flex;flex-wrap:wrap;gap:0 8px;margin-top:2px;}
.sfoot .legal .legal-facts > * + *::before{content:"\00B7";margin-right:8px;color:var(--soft);}
/* Was an inline style on the anchor. It reads as part of the legal line, so it
   takes the legal colour and keeps an underline to stay identifiably a link. */
.sfoot .legal a{color:inherit;font-size:inherit;text-decoration:underline;}
.sfoot .legal a:hover{color:var(--tx);}

.fsoc{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.fsoc a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid rgba(23,19,32,.10);background:rgba(23,19,32,.035);color:var(--mut);transition:color .25s ease,border-color .25s ease,background .25s ease,transform .25s ease;}
.fsoc a:hover{color:var(--mag);border-color:var(--mag);background:rgba(231,28,142,.14);transform:translateY(-2px);}
.fsoc svg{width:19px;height:19px;fill:currentColor;display:block;}

/* Small centred footer used by the utility pages */
.foot{padding:40px 0 60px;text-align:center;color:var(--soft);font-size:13px;}
.foot a{color:var(--mut);text-decoration:none;}


/* == 13  MOTION SYSTEM ====================================================
   Content is visible by default. The hide rule only applies once JS has
   confirmed it is running (html.js-rv). No JS, no hiding, never lose content. */

@view-transition{navigation:auto;}
::view-transition-old(root){animation:vt-out .28s cubic-bezier(.4,0,.2,1) both;}
::view-transition-new(root){animation:vt-in .34s cubic-bezier(.2,.7,.3,1) both;}
@keyframes vt-out{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(10px) } }

html.js-rv [data-rv]{
  opacity:0;transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1);
}
html.js-rv [data-rv].rv-in{opacity:1;transform:none;}

/* FAQ items are never hidden by the reveal system. They are content and they
   carry the FAQPage schema, so they must render immediately rather than wait
   on an IntersectionObserver. On /faq/ the observer did not fire for them at
   all: all 14 sat at opacity 0 with 4 of them inside the viewport, and only
   the script's 4 second failsafe eventually showed them. Four seconds of blank
   answers is not acceptable on a page whose whole job is answering. Higher
   specificity than the rule above, so no !important needed. */
html.js-rv details.fq[data-rv],
html.js-rv .faq [data-rv],
html.js-rv .faq-grouped [data-rv]{opacity:1;transform:none;}

.reveal{transition:opacity .6s ease,transform .6s ease;}
.js .reveal{opacity:0;transform:translateY(22px);}
.js .reveal.in{opacity:1;transform:none;}
.js .proof-grid .reveal:nth-child(1){transition-delay:.04s;}
.js .proof-grid .reveal:nth-child(2){transition-delay:.14s;}
.js .proof-grid .reveal:nth-child(3){transition-delay:.24s;}
.js .proof-grid .reveal:nth-child(4){transition-delay:.34s;}

.curglow{
  display:none;position:fixed;top:0;left:0;width:520px;height:520px;pointer-events:none;z-index:0;
  border-radius:50%;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle,rgba(231,28,142,.13),transparent 62%);
  transform:translate3d(-50%,-50%,0);will-change:transform;
}
@media(hover:hover) and (min-width:900px){ .curglow{opacity:1;} }

/* One easing curve across the site */
a,.btn,.glass,.pcard,.mcard,.case,.proof-logo,.offer-mini,.stat{
  transition:transform .28s cubic-bezier(.2,.7,.3,1),
             box-shadow .28s cubic-bezier(.2,.7,.3,1),
             border-color .22s ease,
             background-color .22s ease,
             color .18s ease;
}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none;}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
  html.js-rv [data-rv]{opacity:1!important;transform:none!important;transition:none!important;}
  .js .reveal{opacity:1!important;transform:none!important;}
  .reveal{transition:none!important;}
  .curglow,.mobile-sparks{display:none!important;}
  .glass::before{display:none!important;}
  .navlinks a:not(.btn)::after{display:none!important;}
  .bolt,.nobs-card:after{animation:none;}
  a,.btn,.glass,.pcard,.mcard,.case,.proof-logo,.offer-mini,.stat,.proof-logo img{transition:none!important;}
  .btn:hover,.stat:hover,.glass:hover,.proof-logo:hover img{transform:none!important;}
}

/* Homepage mobile spark motif */
.mobile-sparks{display:none;}


/* == 14  RESPONSIVE =======================================================
   One set of breakpoints for the whole site: 860px is the mobile nav and
   grid-collapse point, 520px is the small-phone tightening. */

@media(max-width:1000px){
  .proof-logos{grid-template-columns:repeat(4,minmax(0,1fr));}
}

@media(max-width:880px){
  .menu-grid,.proof-grid,.proof-grid.three{grid-template-columns:repeat(2,1fr);}
  .pk-grid,.steps-grid,.svc-grid{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .hero-video{max-width:340px;}
  .proof-pair{grid-template-columns:1fr;gap:30px;}
  .sec-h,.nobs-card h2{font-size:28px;}
  .vcard{grid-template-columns:1fr;gap:18px;}
  .vcard .was,.vcard .now{font-size:34px;}
  .vcard .arrow-right{display:none;}
  .vcard .arrow-down{display:inline;}
  .cbox,.glist{grid-template-columns:1fr;}
}

@media(max-width:860px){
  /* Mobile navigation. One breakpoint for the toggle and the panel, and the
     panel is an in-flow block, so it can never be positioned off-screen. */
  .navtoggle{display:block;}
  .nav{flex-wrap:wrap;align-items:center;gap:12px;padding:18px 0 24px;}
  .nav img,.nav > img,.nav .logo{width:160px;max-width:160px;}
  .navlinks{
    display:none;order:99;width:100%;flex-direction:column;align-items:stretch;
    text-align:left;gap:0;margin-top:6px;padding-top:6px;
    border-top:1px solid rgba(23,19,32,.10);
  }
  .navlinks.open{display:flex;}
  .navlinks a:not(.btn){
    display:block;width:100%;text-align:left;padding:15px 2px;font-size:16.5px;
    font-weight:700;color:var(--tx);border-bottom:1px solid rgba(23,19,32,.055);
  }
  .navlinks a:not(.btn)::after{display:none;}
  /* Full width so the CTA can never wrap into a blob, and no stray border. */
  .navlinks a.btn,.navlinks a.btn.nav-cta{
    display:flex;width:100%;margin-top:16px;text-align:center;
    padding:15px 18px;font-size:16px;border:none;border-bottom:none;
    background:var(--yel);color:var(--tx);
  }

  .hero h1{font-size:clamp(34px,8.6vw,44px);line-height:1.04;}
  .hero .lead,.hero p.lead{font-size:17px;line-height:1.55;max-width:none;}
  .hero-actions{align-items:stretch;flex-direction:column;}
  .hero-actions .btn,.hero-actions .text-link,.hero-actions .quiet,.hero-actions a{
    width:100%;justify-content:center;text-align:center;
  }
  .heroflex{grid-template-columns:1fr;gap:24px;}
  /* On a phone the photo sits behind the whole hero rather than to one side,
     dropped right back so the heading and lead keep their full contrast. */
  .portrait{width:100%;opacity:.30;}
  .portrait img{
    object-position:62% 28%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 74%,transparent 100%);
    -webkit-mask-composite:source-over;
    mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 74%,transparent 100%);
    mask-composite:add;
  }
  .hero-portrait .heroflex-solo > div{max-width:none;}
  .inside{grid-template-columns:1fr;}
  .decision{grid-template-columns:1fr;padding:30px 24px;}
  .detail-link{display:flex;margin:10px 0 0;}
  .prin,.stats,.includes{grid-template-columns:1fr;}
  .package{grid-template-columns:1fr;gap:28px;padding:54px 0;}
  .package-label{position:static;}
  .proof-line{grid-template-columns:repeat(2,1fr);}
  .proof-logos{grid-template-columns:repeat(2,minmax(0,1fr));}
  .proof-logo{padding:12px;}
  .proof-logo img{max-width:100%;max-height:48px;}
  .proof-logo img.badge-logo{max-height:72px;}
  .proof-logo img.sm-logo{max-height:36px;}
  .offer-rail{grid-template-columns:1fr;}
  .founder-strip{grid-template-columns:1fr;gap:24px;}
  .founder-strip img{width:150px;height:175px;}
  .cases,.cases.three{grid-template-columns:1fr;}
  .faq-grouped{grid-template-columns:1fr;gap:0;}
  .faq-group:nth-child(2) .faq-cat{margin-top:18px;}
  .sfoot .cols{grid-template-columns:1fr 1fr;gap:28px;}

  /* Google wants tap targets >=44px. Touch and small screens only.
     Scoped to the footer NAV LISTS on purpose. This used to be a blanket
     `.sfoot a`, which also hit two link types it had no business touching:
     the .fsoc icon buttons, where display:inline-block overrode their
     inline-flex and shoved every glyph 1px from the left edge of its 44px
     tile instead of centring it; and the inline Privacy link in the legal
     sentence, where 11px of vertical padding made a 46px box inside a 21px
     line and knocked it out of alignment with the text beside it.
     The icon buttons are already 44x44, and WCAG 2.2 target size exempts a
     link inline in a block of text, so neither needed this. */
  .sfoot ul a,.foot ul a{display:inline-block;min-width:44px;padding-top:11px;padding-bottom:11px;}
  .sfoot li{margin:0;}

  /* Stack the legal facts. In a wrapping row the middot separator has to sit
     on one side of the break or the other, so it always ends up dangling at
     the end of a line or leading the next one. Stacking removes the question:
     the ACN and ABN each get their own clean line. */
  .sfoot .legal .legal-facts{flex-direction:column;gap:1px;}
  .sfoot .legal .legal-facts > * + *::before{content:none;}
}

@media(max-width:520px){
  .proof-grid,.proof-grid.three,.menu-grid,.proof-line,.t-stack.t-2up{grid-template-columns:1fr;}
  .nav img,.nav > img,.nav .logo{width:150px;max-width:150px;}
  .wrap{padding:0 18px;}
  section{padding:54px 0;}
  .pk{padding:24px 20px;}
  .nobs-card{padding:36px 22px;}
  .hero .lead,.hero p.lead{font-size:16px;}
  .hero-eyebrow{font-size:11px;letter-spacing:.18em;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .sfoot .cols{grid-template-columns:1fr;}
  .proof-logos{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ==========================================================================
   SITE UNIFICATION, 17 Aug 2026
   ==========================================================================
   Joe: "it's like 2 sites in one". The homepage was rebuilt on a dark, sticky
   header and a dark footer, while these 23 pages kept the older cream header
   and footer, so moving between them felt like leaving the site.

   This block is deliberately APPENDED and purely additive. It overrides the
   header and footer by cascade order only, so deleting the whole block restores
   the previous look exactly. Nothing above it was edited.

   Page bodies stay cream on purpose. Only the furniture that appears on every
   page is unified, which is what makes it read as one site.
   ========================================================================== */

:root{
  --u-ink:#0B0910;
  --u-onink:rgba(255,255,255,.86);
  --u-onink-mut:rgba(255,255,255,.62);
  --u-hair:rgba(255,255,255,.10);
}

/* ---- header, matches the homepage nav ---------------------------------- */
/* The header sits INSIDE the 1080px .wrap on these pages, so simply giving it a
   dark background paints only the inner column and it reads as a floating grey
   box. A pseudo element pinned to the viewport width paints the real bar behind
   it, which keeps the nav's own layout and its container alignment untouched.
   overflow-x:clip on the root stops that 100vw element creating a scrollbar. */
html{overflow-x:clip;}
.nav{
  position:sticky;top:0;z-index:50;
  padding-top:14px;padding-bottom:14px;
}
.nav::before{
  content:"";position:absolute;inset:0 0 0 0;
  left:50%;transform:translateX(-50%);
  width:100vw;
  background:var(--u-ink);
  border-bottom:1px solid var(--u-hair);
  z-index:-1;
}
@media(min-width:900px){
  .nav::before{background:rgba(11,9,16,.82);backdrop-filter:blur(14px);}
}
.navlinks a{color:var(--u-onink-mut);font-weight:600;}
.navlinks a:hover,.navlinks a:focus-visible{color:#fff;}
.nav .btn.nav-cta{
  background:var(--mag);color:#fff;border-color:transparent;
  box-shadow:0 0 64px rgba(231,28,142,.22);
  font-weight:800;
}
.nav .btn.nav-cta:hover{filter:brightness(1.06);box-shadow:0 0 72px rgba(231,28,142,.30),0 10px 30px rgba(231,28,142,.22);}
/* the burger lines have to invert with the bar */
.navtoggle span{background:#fff;}
/* No filter on the logo. The dark-background lockup is a real asset that keeps
   the colour petal; filtering the cream one to flat white would break the brand
   rule that the petal is ALWAYS in colour, on any ground. */

/* Sticky header means every in-page anchor needs to clear it. */
[id]{scroll-margin-top:92px;}

/* ---- footer, matches the homepage footer -------------------------------- */
.sfoot{
  background:var(--u-ink);color:var(--u-onink-mut);
  border-top:1px solid var(--u-hair);
  margin-top:0;padding:56px 0 30px;
}
.sfoot h3{color:#fff;}
.sfoot a{color:var(--u-onink-mut);}
.sfoot a:hover{color:#fff;}
.sfoot p,.sfoot li,.sfoot .legal,.sfoot .legal-line,.sfoot .legal-facts{color:var(--u-onink-mut);}
.sfoot .fsoc a{border:1px solid var(--u-hair);color:var(--u-onink-mut);}
.sfoot .fsoc a:hover{background:var(--mag);border-color:var(--mag);color:#fff;}
.sfoot .fsoc svg{fill:currentColor;}

/* ---- shared polish, same values the homepage uses ----------------------- */
.faq details,.glass,.pcard,.card{box-shadow:0 10px 40px -10px rgba(0,0,0,.05);}
@media(hover:none){
  .sfoot ul a{display:inline-block;padding-block:10px;}
}

/* ==========================================================================
   DARK GROUND FOR THE INNER PAGES, 20 Aug 2026
   ==========================================================================
   The homepage was rebuilt on a single dark ground. These pages were left with
   a dark header and footer wrapped around a cream body, which is a worse look
   than either on its own: it reads as a light page someone bolted dark
   furniture onto.

   This sheet is token driven, so flipping the tokens flips every component that
   was built correctly, all in one place, instead of rewriting 23 page bodies.
   The handful of rules that hardcode a light value are corrected underneath.

   Appended and purely additive. Deleting this block restores the cream site
   exactly; nothing above it was edited.
   ========================================================================== */

:root{
  --bg:#08070C;
  --bg2:#0E0C14;
  --panel:rgba(255,255,255,.038);
  --panel2:rgba(255,255,255,.06);
  --bd:rgba(255,255,255,.08);
  --bd2:rgba(255,255,255,.14);
  --tx:rgba(255,255,255,.94);
  --mut:rgba(255,255,255,.68);
  --soft:rgba(255,255,255,.50);
  --sf-rgb:255,255,255;
}
body{background:var(--bg);color:var(--tx);}

/* rules that hardcode a light surface and so survive the token flip */
.proof-line div{background:var(--panel) !important;box-shadow:0 10px 40px -10px rgba(0,0,0,.5) !important;}
.topbar{background:var(--bg2) !important;}

/* the default button was yellow on cream. On a dark ground the primary action
   is the brand magenta, same as the homepage, so the two read as one site. */
.btn{background:var(--mag);color:#fff;}
.btn:hover{filter:brightness(1.06);}
.btn.ghost,.btn.secondary{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--bd2);}

/* headings and body copy that assumed dark-on-light */
h1,h2,h3,h4{color:#fff;}
p,li,dd{color:var(--mut);}
strong,b{color:#fff;}

/* cards and panels get the same depth language as the homepage: low alpha
   shadow with a NEGATIVE spread so it reads as depth, not a grey halo */
.glass,.card,.pcard,.step,.faq details,.tile,.box{
  background:var(--panel);border-color:var(--bd);
  box-shadow:0 10px 40px -10px rgba(0,0,0,.5);
}

/* images that were drawn for a cream ground */
.sfoot .brandcol img,.nav img{filter:none;}

/* The footer blurb sat at 4.05:1 because the footer ground is lighter than the
   page ground. Lifted locally rather than raising the muted token further,
   which would wash out body copy everywhere else.
   The white-on-magenta buttons measure 4.24:1 and are LEFT ALONE on purpose:
   #E71C8E is the locked brand colour, Joe rejected a darkened variant twice on
   sight, and a WCAG ratio does not override a brand call. */
.sfoot p,.sfoot .blurb,.foot .blurb{color:rgba(255,255,255,.74);}