/* Kingscliff SEO design system
   Palette sampled from invopop.com. Display face Cal Sans (SIL OFL 1.1),
   body Inter. One accent only: mint on deep green. */

@font-face{font-family:"Cal Sans";src:url(/fonts/CalSans-Medium.woff2) format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-latin.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212}

:root{
  --green-900:#003D31; --green-800:#004235; --green-700:#0A5745; --green-600:#14705A;
  --mint:#D3FCD2; --mint-200:#B7F5B5; --mint-soft:#EDF8EC;
  --ground:#FEFEFC; --mark:#ADDBB6; --card:#FFFFFF;
  --ink:#10201B; --muted:#51655D; --line:#E4E9E2; --line-dark:#1C5648;
  --wrap:1180px; --pad:28px; --r:10px;
  --shadow:0 1px 2px rgba(16,32,27,.05), 0 12px 28px -12px rgba(16,32,27,.16);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.62 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--green-600);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;text-decoration-color:rgba(20,112,90,.35)}
a:hover{text-decoration-color:currentColor}
/* Prose links on the dark and tinted bands. The default --green-600 is near
   invisible on --green-800, so any link dropped into one of these would have
   disappeared. Buttons are excluded: they carry their own colours. */
.section.dark a:not(.btn),.cta a:not(.btn),.proof a:not(.btn),
.price-band a:not(.btn),.statement.dark a:not(.btn),
.page-top a:not(.btn),.hero a:not(.btn){color:var(--mint)}
.section.dark a:not(.btn):hover,.cta a:not(.btn):hover,.proof a:not(.btn):hover,
.price-band a:not(.btn):hover,.statement.dark a:not(.btn):hover,
.page-top a:not(.btn):hover,.hero a:not(.btn):hover{color:#fff}
h1,h2,h3,h4{font-family:"Cal Sans",Inter,sans-serif;font-weight:700;font-kerning:normal;
  letter-spacing:.022em;line-height:1.16;margin:0;color:var(--ink)}
p{margin:0 0 1em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--mint);color:var(--green-800);
  padding:10px 16px;border-radius:6px;z-index:99}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:Inter,sans-serif;
  font-weight:600;font-size:16px;line-height:1;padding:15px 24px;border-radius:8px;
  border:1px solid transparent;text-decoration:none;cursor:pointer;transition:.15s}
.btn-mint{background:var(--mint);color:var(--green-800)}
.btn-mint:hover{background:var(--mint-200)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.btn-ghost:hover{border-color:rgba(255,255,255,.7)}
.btn-dark{background:var(--green-800);color:#fff}
.btn-dark:hover{background:var(--green-700)}
.btn-outline{background:transparent;color:var(--green-800);border-color:#CBD6CE}
.btn-outline:hover{border-color:var(--green-700)}

/* ---------- top bar + header ---------- */
.topbar{background:#00312779;color:rgba(255,255,255,.82);font-size:14.5px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;
  gap:16px;min-height:42px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none;font-weight:600}
.topbar .hours{color:rgba(255,255,255,.62)}
.masthead{background:var(--green-800);color:#fff}
.site-header{display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:20px 0}
.logo{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:#fff;
  font-family:"Cal Sans",sans-serif;font-weight:700;font-size:23px;letter-spacing:.022em}
.logo .mark{flex:none}
.logo .wm{display:inline-flex;align-items:baseline}
.logo .b{color:var(--mint)}
.site-header nav{display:flex;align-items:center;gap:28px}
.site-header nav a{color:rgba(255,255,255,.85);text-decoration:none;font-size:16px;font-weight:500}
.site-header nav a:hover{color:#fff}
.site-header nav a.btn{color:var(--green-800)}
.burger{display:none;appearance:none;background:none;color:#fff;cursor:pointer;
  border:1px solid rgba(255,255,255,.24);border-radius:8px;padding:9px 10px;
  align-items:center;justify-content:center;
  transition:background .22s cubic-bezier(.22,.8,.3,1),border-color .22s cubic-bezier(.22,.8,.3,1)}
.burger:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.42)}
.burger:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.burger svg{display:block}
.burger .x{display:none}
.burger[aria-expanded="true"] .bars{display:none}
.burger[aria-expanded="true"] .x{display:block}

/* ---------- hero ---------- */
/* The horizontal padding MUST be var(--pad), not 0. This element is
   <section class="wrap hero">, so a padding shorthand here overrides .wrap's
   `padding:0 var(--pad)` and puts the hero flush against the screen edge on a
   phone. Same trap on .page-top. Never write `padding: X 0 Y` on a .wrap. */
.hero{padding:64px var(--pad) 78px}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:start}
.eyebrow{font-family:Inter,sans-serif;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mint);margin:0 0 22px}
.hero h1{font-size:15px;font-weight:600;font-family:Inter,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mint);margin:0 0 22px;line-height:1.5}
.display{font-family:"Cal Sans",sans-serif;font-weight:700;font-size:63px;line-height:1.08;
  letter-spacing:.01em;color:#fff;margin:0 0 26px}
.display .sub{color:rgba(211,252,210,.9)}
/* Rotating line. Every phrase is real text in the source; CSS decides which one
   is visible, so nothing is injected and nothing is display:none. */
.rot{display:inline-grid;vertical-align:top}
.rot .sub{grid-area:1/1;opacity:0;transform:translateY(.14em);
  transition:opacity .55s ease,transform .55s ease;white-space:nowrap}
.rot .sub.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rot .sub{transition:none}
}
.hero-lead{font-size:19px;line-height:1.6;color:rgba(255,255,255,.8);max-width:33em;margin:0 0 28px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;padding:0;list-style:none}
.chips li{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:500;
  color:rgba(255,255,255,.9);background:rgba(255,255,255,.07);
  border:1px solid rgba(211,252,210,.22);border-radius:999px;padding:8px 15px}
.chips svg{flex:none;color:var(--mint)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.page-top .hero-actions{margin-top:30px}

/* offer card */
.offer{background:var(--card);border-radius:14px;padding:32px;box-shadow:var(--shadow);color:var(--ink)}
.offer .tag{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--green-600);margin:0 0 16px}
.offer .tag span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--mint-soft);color:var(--green-700)}
.offer h2{font-size:29px;letter-spacing:.018em;text-wrap:balance;line-height:1.12;margin:0 0 8px}
.offer .rule{width:52px;height:4px;background:var(--mint-200);border-radius:2px;margin:16px 0 18px}
.offer p{font-size:16px;color:var(--muted);margin:0 0 22px}
.offer .fine{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:16px 0 0}
.offer .fine svg{color:var(--green-600);flex:none}

/* ---------- proof strip ---------- */
.proof{background:var(--green-900);color:#fff;padding:34px 0}
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr) 1.5fr;gap:30px;align-items:center}
.stat .n{font-family:"Cal Sans",sans-serif;font-weight:700;font-size:40px;line-height:1;
  color:var(--mint);letter-spacing:.014em}
.stat .l{font-size:14.5px;color:rgba(255,255,255,.72);margin-top:7px}
.proof-note{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.68);
  border-left:1px solid rgba(255,255,255,.18);padding-left:26px;
  align-self:stretch;display:flex;align-items:center}
.proof-note a{color:rgba(255,255,255,.8)}

/* ---------- sections ---------- */
.section{padding:68px 0}
.section.tint{background:var(--mint-soft)}
.section.dark{background:var(--green-800);color:#fff}
.section.dark .kicker{color:var(--mint)}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark p{color:rgba(255,255,255,.8)}
.sec-head{max-width:44rem;margin:0 0 44px}
.sec-head.center{margin:0 auto 48px;text-align:center}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-600);margin:0 0 14px}
.section h2{font-size:38px;letter-spacing:.014em;text-wrap:balance;line-height:1.12;margin:0 0 14px}
.sec-head p{font-size:18px;color:var(--muted);margin:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;display:flex;flex-direction:column;gap:9px;
  text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.22,.8,.3,1),box-shadow .22s ease,
             border-color .22s ease,background-color .22s ease}
a.card:hover{transform:translateY(-3px);background:#FCFEFB;border-color:#BFD6C6;
  box-shadow:0 1px 2px rgba(16,32,27,.04), 0 16px 32px -16px rgba(16,32,27,.22)}
a.card:hover .go{color:var(--green-700)}
a.card:hover .arw{transform:translateX(5px)}
a.card:focus-visible{outline:2px solid var(--green-600);outline-offset:3px}
.arw{display:inline-block;transition:transform .22s cubic-bezier(.22,.8,.3,1)}
.card h3{font-size:21px;letter-spacing:.024em}
.card p{font-size:16px;color:var(--muted);margin:0}
.card .go{margin-top:auto;padding-top:14px;font-size:15px;font-weight:600;
  color:var(--green-600);transition:color .22s ease}
.card .ic{width:38px;height:38px;border-radius:9px;background:var(--mint-soft);
  display:grid;place-items:center;color:var(--green-700);margin-bottom:6px}

/* niche list */
.niches{display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0;list-style:none}
.niches a{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:999px;padding:12px 22px;font-size:16px;font-weight:500;
  color:var(--ink);text-decoration:none}
.niches a{transition:transform .22s cubic-bezier(.22,.8,.3,1),border-color .22s ease,
  background-color .22s ease,color .22s ease}
.niches a:hover{border-color:#BFD6C6;color:var(--green-700);background:var(--mint-soft);
  transform:translateY(-2px)}
.niches a:focus-visible{outline:2px solid var(--green-600);outline-offset:3px}

/* results + testimonial */
.split-2{display:grid;grid-template-columns:1.25fr .75fr;gap:26px;align-items:stretch}
.result{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:34px}
.result h3{font-size:26px;margin:0 0 6px}
.result .who{font-size:14.5px;color:var(--muted);margin:0 0 24px}
.rows{display:grid;gap:0;margin:0 0 22px}
.row{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;
  gap:0 26px;padding:14px 0;border-top:1px solid var(--line)}
.row .was,.row .now{text-align:right;min-width:96px}
.row .was{font-size:16px;color:var(--muted);opacity:.75}
.row .now{font-family:"Cal Sans",sans-serif;font-weight:700;font-size:26px;
  letter-spacing:.014em;color:var(--green-700)}
.row.head{padding:0 0 10px;border-top:0}
.row.head .was,.row.head .now{font-family:Inter,sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:1}
@media (max-width:520px){
  .row{grid-template-columns:1fr auto auto;gap:0 14px}
  .row .was,.row .now{min-width:64px}
  .row .now{font-size:21px}
}
.row:last-child{border-bottom:1px solid var(--line)}
.row .k{font-size:16px;color:var(--muted)}
.row .v{font-family:"Cal Sans",sans-serif;font-weight:700;font-size:26px;color:var(--green-700)}
.result .src{font-size:13.5px;color:var(--muted);margin:0}
.quote{background:var(--green-800);color:#fff;border-radius:14px;padding:34px;
  display:flex;flex-direction:column}
.stars{color:var(--mint);letter-spacing:3px;font-size:17px;margin:0 0 16px}
.quote blockquote{margin:0;font-size:18.5px;line-height:1.55;color:rgba(255,255,255,.94)}
.quote .cite{margin:20px 0 0;font-size:14.5px;color:rgba(211,252,210,.85);font-style:normal}
.quote .more{margin-top:auto;padding-top:26px;font-size:15px;font-weight:600;
  color:var(--mint);text-decoration:none;border-top:1px solid rgba(255,255,255,.16)}
.quote .more span{display:inline-block;padding-top:20px}
.quote .more:hover span{text-decoration:underline}

/* pricing teaser */
.price-band{background:var(--green-800);color:#fff;border-radius:16px;padding:44px;
  display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
.price-band .k{color:var(--mint)}
.price-band h2{color:#fff;font-size:34px;margin:0 0 10px;text-wrap:balance}
.price-band p{color:rgba(255,255,255,.78);font-size:17px;margin:0;max-width:46em}
.price-figure{text-align:right}
.price-figure .amt{font-family:"Cal Sans",sans-serif;font-weight:700;font-size:52px;
  line-height:1;color:var(--mint)}
.price-figure .per{font-size:15px;color:rgba(255,255,255,.7);margin-top:6px}

/* faq */
.faq-layout{display:grid;grid-template-columns:.62fr 1fr;gap:56px;align-items:start}
.faq-layout .sec-head{margin:0;position:sticky;top:32px}
.faq{max-width:none}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;letter-spacing:.024em;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:20px;padding:20px 0;font-family:"Cal Sans",sans-serif;
  font-weight:700;font-size:19px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--green-600);font-size:24px;font-weight:400;flex:none}
.qa[open] summary::after{content:"\2212"}
.qa .a{padding:0 0 22px;margin:0;color:var(--muted);font-size:16.5px;max-width:70ch}

/* closing cta */
.cta{background:var(--green-800);color:#fff;padding:80px 0;text-align:center}
.cta h2{color:#fff;font-size:40px;margin:0 0 14px;text-wrap:balance}
.cta p{color:rgba(255,255,255,.8);font-size:18.5px;max-width:34em;margin:0 auto 30px}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta .phone{font-family:"Cal Sans",sans-serif;font-weight:700;font-size:30px;
  color:var(--mint);text-decoration:none;display:inline-block;margin-top:26px}

/* footer */
.site-footer{background:var(--green-900);color:rgba(255,255,255,.7);padding:56px 0 34px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
.site-footer h3{color:#fff;font-size:15px;font-family:Inter,sans-serif;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;margin:0 0 14px}
.site-footer a{color:rgba(255,255,255,.72);text-decoration:none;display:block;padding:4px 0}
.site-footer a:hover{color:#fff}
.foot-base{border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:22px;
  font-size:13.5px;color:rgba(255,255,255,.5)}
.foot-base a{display:inline;color:rgba(255,255,255,.68)}

@media (max-width:1000px){
  .hero-grid,.split-2,.price-band{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(3,1fr)}
  .proof-note{grid-column:1/-1;border-left:0;padding-left:0;
    border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .faq-layout{grid-template-columns:1fr;gap:26px}
  .faq-layout .sec-head{position:static}
  .price-figure{text-align:left}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  :root{--pad:20px}
  .display{font-size:40px}
  .section{padding:48px 0}
  .section h2,.cta h2{font-size:30px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr 1fr}
  .site-header{flex-wrap:wrap}
  .burger{display:inline-flex}
  .site-header nav{display:none;width:100%;flex-direction:column;align-items:stretch;
    gap:0;margin-top:16px;border-top:1px solid rgba(255,255,255,.16)}
  .site-header nav[data-open]{display:flex}
  .site-header nav a:not(.btn){padding:14px 2px;font-size:17px;
    border-bottom:1px solid rgba(255,255,255,.1)}
  .site-header nav a.btn{margin-top:18px;text-align:center;justify-content:center}
  .price-band,.result,.quote,.offer{padding:26px}
}

/* ---------- sub-page head ---------- */
/* The head is its own wrap, so capping it at the reading measure used to shrink
   the wrap itself and centre the whole head. That put the hero on a different
   left edge from the nav above it and every section below it. The section now
   holds the full wrap and the measure is applied to its children instead. */
.page-top{padding:52px var(--pad) 66px}   /* var(--pad), not 0: see .hero above */
.page-top:not(.with-side) > *{max-width:820px}
.crumbs{font-size:14px;color:rgba(211,252,210,.72);margin:0 0 22px}
.crumbs a{color:rgba(211,252,210,.72);text-decoration:none}
.crumbs a:hover{color:#fff}
.page-top h1{font-size:14px;font-weight:600;font-family:Inter,sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mint);margin:0 0 18px;line-height:1.5}
.display.sm{font-size:46px;margin:0 0 22px}

/* ---------- the site check form ---------- */
.check-wrap{max-width:640px;margin:-38px auto 0;position:relative;z-index:2}
.check{background:var(--card);border-radius:14px;padding:34px;box-shadow:var(--shadow)}
.check label{display:block;font-size:14px;font-weight:600;color:var(--muted);
  margin:0 0 7px;letter-spacing:.01em}
.check input,.check textarea{width:100%;font:400 16.5px/1.5 Inter,sans-serif;color:var(--ink);
  background:#fff;border:1px solid #D6DED8;border-radius:8px;padding:13px 15px;margin:0 0 20px}
.check input:focus,.check textarea:focus{outline:none;border-color:var(--green-600);
  box-shadow:0 0 0 3px rgba(20,112,90,.13)}
.check textarea{resize:vertical}
.check .two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.check .btn{width:100%;justify-content:center;margin-top:2px}
.check .fine{font-size:14.5px;color:var(--muted);margin:16px 0 0;text-align:center}
.check .hp{position:absolute;left:-9999px}
@media (max-width:680px){
  .display.sm{font-size:34px}
  .check .two{grid-template-columns:1fr}
  .check{padding:26px}
}
.card.flat{gap:9px}

/* Call on desktop, message on a phone. Touch-pointer test as well as width, so a
   narrow desktop window still gets the call button. */
.on-phone{display:none}
@media (max-width:820px) and (pointer:coarse){
  .on-desk{display:none}
  .on-phone{display:inline-flex}
}

.proof-kicker{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mint);margin:0 0 26px}
@media (max-width:680px){ .proof-kicker{letter-spacing:.07em;margin-bottom:20px} }

@media (prefers-reduced-motion:reduce){
  .card,.arw,.niches a{transition:none}
  a.card:hover,.niches a:hover{transform:none}
}

/* ============================================================================
   BLOCK LIBRARY
   Layouts that can be mixed so no two sub-pages read the same, and none of them
   reads like the home page. Same tokens, same easing, same hover language.
   ========================================================================== */

/* 1. Sub-page head with a sidebar card (service pages) */
/* The two-column variant must not inherit the single-column measure. */
.page-top.with-side{max-width:var(--wrap);padding-bottom:62px}
.page-top .top-grid{display:grid;grid-template-columns:minmax(0,1.2fr) 366px;gap:64px;align-items:start}
.page-top .top-main{max-width:38rem}
.side-card{border:1px solid rgba(211,252,210,.26);border-radius:14px;padding:28px 30px 30px;
  background:rgba(255,255,255,.075);margin-top:6px}
.side-card h2{font-size:20px;color:#fff;margin:0 0 22px;letter-spacing:.02em}
.side-card dt{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(211,252,210,.72);margin:0 0 5px}
.side-card dd{margin:0 0 19px;font-size:16.5px;line-height:1.5;color:#fff}
.side-card dd:last-of-type{margin-bottom:0}
.side-card dd a{color:var(--mint);text-decoration-color:rgba(211,252,210,.4)}
.side-card .foot{border-top:1px solid rgba(255,255,255,.16);margin-top:24px;padding-top:20px}
.side-card .foot .l{font-size:13.5px;color:rgba(255,255,255,.6);margin:0 0 4px}
.side-card .foot .v{font-family:"Cal Sans",sans-serif;font-weight:700;font-size:27px;
  letter-spacing:.014em;color:var(--mint)}

/* 2. Numbered vertical steps */
.steps{list-style:none;margin:0;padding:0;max-width:46rem}
.steps li{position:relative;padding:0 0 34px 62px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:attr(data-n);position:absolute;left:0;top:-2px;width:38px;height:38px;
  border-radius:50%;background:var(--green-700);color:var(--mint);display:grid;place-items:center;
  font-family:"Cal Sans",sans-serif;font-weight:700;font-size:17px}
.steps li::after{content:"";position:absolute;left:18.5px;top:42px;bottom:-4px;width:2px;
  background:#C8DCCE;border-radius:1px}
.steps li:last-child::after{display:none}
.steps h3{font-size:20px;margin:0 0 5px}
.steps p{font-size:16.5px;color:var(--muted);margin:0}
.on-dark .steps li::before{background:var(--mint);color:var(--green-800)}
.on-dark .steps li::after{background:rgba(255,255,255,.2)}
.on-dark .steps h3{color:#fff}
.on-dark .steps p{color:rgba(255,255,255,.76)}

/* 3. Two-column tick lists */
.check-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px 56px}
.check-cols h3{font-size:22px;margin:0 0 20px}
.check-cols ul{list-style:none;margin:0;padding:0}
.check-cols li{display:flex;gap:13px;align-items:flex-start;padding:9px 0;font-size:16.5px}
.check-cols li i{flex:none;width:26px;height:26px;border-radius:50%;background:#DCF0E1;
  color:var(--green-700);display:grid;place-items:center;margin-top:1px}
.check-cols div:last-child li i{background:var(--mint);color:var(--green-800)}

/* 4. Text beside an image */
.media-split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.media-split.flip .m-text{order:2}
.media-split img{border-radius:14px;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
/* A screenshot of real data must not be cropped to a decorative aspect ratio, so
   .shot overrides the 16/10 cover used for photographs. Two classes beats one
   class plus an element, so this wins without !important. */
/* A data screenshot earns more width than a photograph: the text column carries
   the figures, the image has to stay legible. */
.media-split:has(.shot){grid-template-columns:0.82fr 1.18fr;gap:48px}
.media-split .shot{aspect-ratio:auto;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:12px}
.media-split .m-ph{border-radius:14px;background:var(--mint-soft);aspect-ratio:16/10;
  border:1px dashed #B9D3C0;display:grid;place-items:center;color:var(--green-600);
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

/* 5. Numbered cards */
.numcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:22px}
.numcards .card{padding:30px 28px}
.numcards .n{font-family:Inter,sans-serif;font-size:13px;font-weight:600;letter-spacing:.12em;
  color:var(--green-600);margin:0 0 12px}

/* 6. Centred statement */
/* Left aligned from 12 September. It was the only centred element on a sub-page,
   so it read as an alignment jump rather than as emphasis. The narrow measure
   is what makes it a statement, not the centring. */
.statement{max-width:38rem;margin:0}
.statement h2{font-size:36px;margin:0 0 18px}
.statement p{font-size:18.5px;color:var(--muted);margin:0 0 1em}
.on-dark .statement h2{color:#fff}
.on-dark .statement p{color:rgba(255,255,255,.8)}

/* 7. Link tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}
a.tile{display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.22,.8,.3,1),border-color .22s ease,box-shadow .22s ease}
a.tile:hover{transform:translateY(-3px);border-color:#BFD6C6;
  box-shadow:0 1px 2px rgba(16,32,27,.04),0 16px 32px -16px rgba(16,32,27,.22)}
a.tile:focus-visible{outline:2px solid var(--green-600);outline-offset:3px}
.tile .lab{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green-600);display:block;margin:0 0 8px}
.tile strong{display:block;font-family:"Cal Sans",sans-serif;font-weight:700;font-size:19px;
  letter-spacing:.022em;margin:0 0 5px}
.tile span.meta{font-size:14.5px;color:var(--muted)}

/* 8. Two-column plain link lists */
.link-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px 56px}
.link-cols h3{font-size:22px;margin:0 0 8px}
.link-cols .sub{font-size:16px;color:var(--muted);margin:0 0 18px}
.link-cols .ls{display:flex;flex-wrap:wrap;gap:10px 22px}
.link-cols .ls a{font-size:16.5px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .18s ease,color .18s ease}
.link-cols .ls a:hover{color:var(--green-700);border-bottom-color:var(--green-600)}

@media (max-width:900px){
  .page-top .top-grid,.check-cols,.media-split,.link-cols{grid-template-columns:1fr}
  .media-split.flip .m-text{order:0}
  .numcards{grid-template-columns:1fr}
}
@media (max-width:680px){
  .statement h2{font-size:28px}
  .side-card{padding:24px}
  .steps li{padding-left:52px}
}
@media (prefers-reduced-motion:reduce){ a.tile{transition:none} a.tile:hover{transform:none} }

/* 9. Prose beside a fact-card sidebar (their workhorse: 12 of 25 pages) */
.prose-side{display:grid;grid-template-columns:minmax(0,1.3fr) 340px;gap:52px;align-items:start}
.prose-side .p-main h2{font-size:30px;margin:0 0 16px}
.prose-side .p-main p{font-size:17px;color:var(--muted);margin:0 0 1em;max-width:62ch}
.fact-card{background:var(--mint-soft);border-radius:14px;padding:28px}
.fact-card h3{font-size:15px;font-weight:600;font-family:Inter,sans-serif;letter-spacing:.07em;
  text-transform:uppercase;color:var(--green-700);margin:0 0 12px}
.fact-card ul{list-style:none;margin:0 0 26px;padding:0}
.fact-card ul:last-child{margin-bottom:0}
.fact-card li{font-size:16px;color:var(--ink);padding:5px 0 5px 18px;position:relative}
.fact-card li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;
  border-radius:50%;background:var(--green-600)}

/* 10. Two bare prose columns, no cards */
.prose-cols{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.prose-cols h2{font-size:28px;margin:0 0 14px}
.prose-cols p{font-size:17px;color:var(--muted);margin:0 0 1em}
.prose-cols ul{margin:0;padding-left:20px;color:var(--muted);font-size:17px}
.prose-cols li{padding:4px 0}

/* 11. Centred narrow prose. Sub-pages step the measure down in their lower half. */
/* Left aligned by default. A centred column between left aligned sections is
   the alignment jump the 12 September layout plan set out to remove. The
   .left modifier is kept so existing left=True calls stay valid. */
.narrow{max-width:46rem;margin:0}
.narrow.left{margin-left:0}
.narrow h2{font-size:32px;margin:0 0 16px}
.narrow p{font-size:17.5px;color:var(--muted);margin:0 0 1em}
.narrow ul{margin:0 0 1em;padding-left:22px;color:var(--muted);font-size:17.5px}
.narrow li{padding:4px 0}

/* Superseded 12 September. Sub-page heads used to be centred, which made the
   heading start hundreds of pixels right of the section above and below it.
   Alignment is no longer the source of visual variety: backgrounds, components
   and content width are. .center survives for short standalone statements. */
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto;max-width:44rem}
.sec-head.center p{margin-left:auto;margin-right:auto}

@media (max-width:900px){
  .prose-side,.prose-cols{grid-template-columns:1fr}
}

/* 12. Want / don't want. The one layout none of the four references share, and
   the only one that frames the offer as an exclusion. */
.want{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.want-panel{border-radius:14px;padding:28px}
.want-panel.yes{background:var(--mint-soft);border:1px solid #BFD6C6}
.want-panel.no{background:#F4F6F3;border:1px solid var(--line)}
.want-panel h3{font-size:20px;margin:0 0 16px}
.want-panel.no h3{color:var(--muted)}
.want-panel ul{list-style:none;margin:0;padding:0}
.want-panel li{padding:7px 0 7px 26px;position:relative;font-size:16.5px}
.want-panel.yes li::before{content:"";position:absolute;left:2px;top:15px;width:9px;height:9px;
  border-radius:50%;background:var(--green-600)}
.want-panel.no{color:var(--muted)}
.want-panel.no li::before{content:"";position:absolute;left:2px;top:19px;width:10px;height:1.5px;
  background:#A7B3AC}

/* 13. Prose beside a quote panel (cross-site: seobrisbane and Wollongong) */
.prose-quote{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:46px;align-items:start}
.prose-quote .pq-main h2{font-size:30px;margin:0 0 16px}
.prose-quote .pq-main p{font-size:17px;color:var(--muted);margin:0 0 1em;max-width:60ch}

/* 14. Trust strip. All three references carry one, each rendered differently. */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.trust-inner{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap}
.trust .lab{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);flex:none}
.trust .names{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:16px;color:var(--ink)}
.trust .names span{opacity:.72}

/* 15. Split CTA, words left, buttons right (mmseo and Wollongong) */
.cta-split{background:var(--green-800);color:#fff;border-radius:16px;padding:40px 44px;
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.cta-split h2{color:#fff;font-size:29px;margin:0 0 8px}
.cta-split p{color:rgba(255,255,255,.78);margin:0;font-size:17px;max-width:46em}
.cta-split .acts{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cta-split .fine{font-size:14px;color:rgba(255,255,255,.62);margin:0}

/* 16. Key/value spec table. mmseo puts these on an /llm-info/ page and they are
   the only tables across 21 reference pages. Machine-readable by design. */
.spec{width:100%;border-collapse:collapse;font-size:16.5px}
.spec th,.spec td{text-align:left;padding:13px 0;border-top:1px solid var(--line);vertical-align:top}
.spec tr:first-child th,.spec tr:first-child td{border-top:0}
.spec th{font-weight:600;color:var(--muted);width:220px;padding-right:26px}
.spec td{color:var(--ink)}

@media (max-width:900px){
  .want,.prose-quote,.cta-split{grid-template-columns:1fr}
  .cta-split .acts{flex-direction:row;flex-wrap:wrap}
  .spec th{width:auto;display:block;padding-bottom:2px;border-top:0}
  .spec td{display:block;padding-top:0}
  .spec tr{display:block;border-top:1px solid var(--line);padding:12px 0}
  .spec tr:first-child{border-top:0}
}

/* A small line under the hero buttons. The spec card beside it is always taller,
   so the left column needs a fourth element or it reads as a hole. */
.head-note{margin:26px 0 0;padding-left:15px;border-left:2px solid rgba(211,252,210,.35);
  font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.66);max-width:34em}

/* mmseo-style "what I do" list: bold label, colon, run-on description. */
/* .narrow ul sets a 22px marker indent and outranks .doing's own padding, which
   pushed these rows off the left edge the heading sits on. .doing has no
   markers, so it needs no indent. */
.doing,.narrow .doing{list-style:none;margin:0;padding:0}
.doing li{padding:13px 0;border-top:1px solid var(--line);font-size:17px;
  line-height:1.6;color:var(--muted)}
.doing li:first-child{border-top:0;padding-top:0}
.doing strong{color:var(--ink);font-weight:600}

/* 18. Evidence. The numbers are the strongest thing on the site and were reading
   as ordinary body copy, so they get their own scale and their own band. */
.evidence{max-width:var(--wrap)}
.evidence h2{font-size:32px;margin:0 0 16px}
.evidence p{font-size:17.5px;color:var(--muted);margin:0 0 1em;max-width:46rem}
.ev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin:34px 0 0;
  padding-top:30px;border-top:1px solid #C8DCCE}
.ev-n{font-family:"Cal Sans",sans-serif;font-weight:500;font-size:30px;line-height:1.1;
  color:var(--green-700);letter-spacing:.01em}
.ev-l{font-size:14.5px;color:var(--muted);margin-top:7px}
.ev-more{margin:26px 0 0}
.ev-more a{font-weight:600;font-size:15.5px}
@media (max-width:900px){ .ev-grid{grid-template-columns:repeat(2,1fr);gap:26px} }
@media (max-width:520px){ .ev-grid{grid-template-columns:1fr} }

/* Portrait carried over from Salt & Search. Single-colour PNG used as a mask, so
   it takes whichever colour the page needs rather than shipping two files. */
.portrait{display:grid;place-items:center}
.portrait-disc{width:100%;max-width:380px;aspect-ratio:1;border-radius:50%;
  background:var(--mint-soft);display:grid;place-items:center;position:relative}
/* The drawing sits 2% right and 3.7% high of the file's own centre, so it needs
   nudging to look centred in the disc. transform-origin is set to the middle of
   the ink rather than the middle of the box, so the hover spin turns about the
   face instead of orbiting around it. */
.portrait-img{width:86%;aspect-ratio:1;background:var(--green-800);
  -webkit-mask:url(/images/portrait.png) center/contain no-repeat;
          mask:url(/images/portrait.png) center/contain no-repeat;
  transform-origin:52.04% 46.32%;
  transform:translate(-2.04%,3.68%);
  transition:transform 1.1s cubic-bezier(.36,.06,.16,1)}
.portrait-disc:hover .portrait-img,
.portrait-disc:focus-visible .portrait-img{
  transform:translate(-2.04%,3.68%) rotate(360deg)}
@media (max-width:900px){ .portrait-disc{max-width:300px} }
@media (prefers-reduced-motion:reduce){
  .portrait-img,.portrait-disc:hover .portrait-img{
    transition:none;transform:translate(-2.04%,3.68%)} }

/* 404 link list. Reuses .ls from the footer link columns rather than inventing a
   component for one page. */
.four-oh-four{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:6px}
.four-oh-four a{font-size:17px;font-weight:600}