/* ==========================================================================
   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{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. */
.proof-pair{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center;margin-top:12px;}
.proof-pair .case{height:100%;justify-content:center;}

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


/* == 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{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{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,.menu-grid,.proof-line{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));}
}