/* ============================================================
   ContentWorks — Design System (canonical base)
   Single source of truth for every static framework page
   (homepage, /who-we-help, trade spokes, how-it-works, etc.).

   USAGE: link this BEFORE the page's own <style> block:
     <link rel="stylesheet" href="assets/cw-design-system.css">
   then keep only page-SPECIFIC sections inline.

   Encodes the rules earned in the homepage + hub design reviews.
   Plain-English rationale lives in DESIGN-SYSTEM.md — read it
   before overriding anything here.
   ============================================================ */

/* --- A. TOKENS ------------------------------------------------ */
:root{
  --teal:#00BCD4; --orange:#f1770a; --dark:#082729; --peach:#ffc693;
  --teal-bg:#eff7f9; --grey:#f8f8f8; --ink:#0c1416; --muted:#5a6b6d;
  --teal-text:#00717f; /* AA-safe teal for text/links on light (bright --teal stays decorative only) */
  /* Brand-DNA supporting accents (core-identity.md §9), activated 2026-07-22.
     DECORATIVE/BACKGROUND ONLY — never text (nowhere near AA on white). */
  --accent-warm:#F8CDA6; /* soft apricot — warm chip/wash accent */
  --accent-cool:#B7DFE2; /* pale aqua — dark-band garnish alongside --peach */
  --warm-bg:#fdf2e7;     /* warm band tint — 4th light tone in the band rotation */
  --white:#fff; --radius:18px; --maxw:1180px;
  --shadow:0 18px 50px -22px rgba(8,39,41,.35);
  --shadow-sm:0 8px 24px -12px rgba(8,39,41,.25);
  /* Grammar v2 (2026-07-22): AA-safe orange for HEADING accent words on light
     bands — ≥3:1 (large text) on white, --teal-bg AND --warm-bg. Bright
     --orange stays for fills/CTAs and for .hl on dark bands (5.5:1 there). */
  --orange-text:#d96500;
}

/* --- A2. GRAMMAR v2 (Dan's video steer + CMO caps, 2026-07-22) ---------
   1. Section-opener headers centre; running body copy stays left.
   2. .hl = ONE load-bearing accent word/phrase per heading, headings only.
      FILL RULE: solid orange fill remains exclusively clickable (btn/pill);
      never a non-clickable word inside an orange-filled shape.
   3. Motion cap: entrance-only, fires once, gentle; reduced-motion honoured.
      No loops, bounce, or repeat-gestures. */
.sec-head{text-align:center}
.sec-head h2,.sec-head .lede{margin-inline:auto}
.hl{color:var(--orange-text)}
.dark-band .hl,.hero .hl,.final .hl{color:var(--orange)}
/* tinted content container for grouped clusters — max 2 tint families/page */
.feature-box{border-radius:24px;padding:34px;background:var(--teal-bg)}
.feature-box.warm{background:var(--warm-bg)}
.feature-box.dark{background:var(--dark);color:#fff}

/* --- B. RESET & BASE TYPE ------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:'Inter Tight',sans-serif;line-height:1.05;letter-spacing:-.02em;font-weight:800}
a{color:inherit;text-decoration:none}

/* --- C. LAYOUT ----------------------------------------------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* --- D. PRIMITIVES (eyebrow, pill) --------------------------- */
.eyebrow{font-family:'Inter Tight';font-weight:700;text-transform:uppercase;letter-spacing:.15em;font-size:.8rem;color:var(--teal-text)}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--dark);font-family:'Inter Tight';font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px;border-radius:999px;box-shadow:0 8px 22px -12px rgba(0,0,0,.5)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);display:inline-block}

/* --- E. BUTTONS ---------------------------------------------- */
/* RULE: the orange .btn-primary is reserved for the ONE primary action
   on a page (almost always the Scorecard). Everything else is a ghost. */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;font-family:'Inter Tight';font-weight:700;font-size:1.02rem;padding:16px 28px;border-radius:999px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;cursor:pointer;border:0}
.btn>*{position:relative;z-index:1}
.btn-primary{background:linear-gradient(135deg,#ff9036,#f1770a 55%,#df6907);color:var(--dark);box-shadow:0 12px 30px -10px rgba(241,119,10,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none}
.btn-primary:hover::after{left:150%}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -10px rgba(241,119,10,.72),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-ghost{background:transparent;color:var(--dark);border:2px solid rgba(8,39,41,.45)}
.btn-ghost.light{color:#fff;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.btn-ghost.light:hover{background:rgba(255,255,255,.16)}
.btn-ghost:hover{border-color:var(--teal)}
.btn .arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(4px)}
/* RULE: visible keyboard focus is pass/fail accessibility (WCAG 2.4.7).
   Orange outline reads on both light and dark bands. Applies kit-wide. */
a:focus-visible,button:focus-visible,.btn:focus-visible,.navtoggle:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
/* Skip-to-content link (WCAG 2.4.1 Bypass Blocks). Off-screen until focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:var(--dark);font-family:'Inter Tight';font-weight:700;padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* --- F. HEADER & NAV ----------------------------------------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease}
header.scrolled{background:rgba(8,39,41,.92);backdrop-filter:blur(12px);border-bottom-color:rgba(255,255,255,.1)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center}
.logo img{height:38px;width:auto;display:block}
.navlinks{display:flex;gap:30px;align-items:center;font-family:'Inter Tight';font-weight:600;font-size:.96rem}
.navlinks a{color:#fff;opacity:.85}.navlinks a:hover{opacity:1;color:var(--teal)}
.navlinks a.active{opacity:1;color:var(--teal)}
.nav-cta{display:flex;gap:12px;align-items:center}
.navtoggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:0;padding:8px;cursor:pointer;min-width:44px;min-height:44px} /* 44px = min tap target (WCAG) */
.navtoggle span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navlinks-login{display:none}
@media(max-width:1080px){
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:20px;background:rgba(8,39,41,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:24px;border-bottom:1px solid rgba(255,255,255,.12)}
  .navlinks.open a{min-height:44px;display:flex;align-items:center;width:100%} /* 44px = min tap target (WCAG) */
  .navlinks.open .navlinks-login{display:block}
  .navtoggle{display:inline-flex}
  .nav-cta .btn-ghost{display:none}
  .nav-cta .btn-primary{white-space:nowrap;padding:12px 16px!important;min-height:44px;font-size:.84rem!important} /* 44px = min tap target (WCAG) */
}

/* --- G. TRADE-LIST PRIMITIVES (reusable cards + chips) -------- */
/* Compact trade card. RULE: the arrow .ar is muted by default and only
   goes teal on hover — orange is a reward, never decoration. */
.tradesgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tgcard{display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(180deg,#ffffff,#f2f8f9);border:1px solid rgba(8,39,41,.12);border-radius:12px;padding:16px 18px;font-family:'Inter Tight';font-weight:700;font-size:1rem;color:var(--dark);transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 30px -20px rgba(8,39,41,.28)}
.tgcard:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 24px 50px -24px rgba(8,39,41,.34);border-color:var(--teal)}
.tgcard .ar{color:rgba(8,39,41,.38);font-weight:800;transition:color .18s,transform .18s}
.tgcard:hover .ar{color:var(--teal-text);transform:translateX(3px)}
.tgl{display:flex;align-items:center;gap:11px;min-width:0}
.tgi{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--teal-bg);display:grid;place-items:center}
.tgi svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.tradesgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.tradesgrid{grid-template-columns:1fr}}
/* Listed chip (no link until demand earns a page) */
.chiprow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:920px;margin:0 auto}
.chip{background:linear-gradient(180deg,#fff,#f3f8f9);border:1px solid rgba(8,39,41,.12);border-radius:999px;padding:10px 18px;font-family:'Inter Tight';font-weight:600;font-size:.94rem;color:var(--muted);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}

/* --- H. FINAL CTA BAND + CTA UTILITIES ----------------------- */
.final{padding:80px 0;background:radial-gradient(900px 500px at 50% -20%,rgba(0,188,212,.3),transparent 60%),var(--dark);color:#fff;text-align:center}
.final h2{font-size:clamp(2rem,4vw,3rem);max-width:18ch;margin:0 auto 16px}
.final p{color:rgba(255,255,255,.78);font-size:1.1rem;margin-bottom:30px}
.final .subhero-cta{justify-content:center}
.hhero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
/* CTA reassurance line (4 mins · no call · no catch) + subordinate alt-link.
   RULE: describe the offer under the button; keep ONE primary action. */
.cta-note{font-size:.92rem;color:var(--muted);margin-top:14px}
.final .cta-note{color:rgba(255,255,255,.72)}
.cta-alt{font-size:.95rem;margin-top:10px}
.cta-alt a{color:var(--teal-text);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.final .cta-alt{color:rgba(255,255,255,.8)}
.final .cta-alt a{color:var(--peach)}
.chip-lead{text-align:center;color:var(--muted);font-size:1rem;margin:26px auto 16px;max-width:60ch}

/* --- I. FOOTER (v2 — design-review panel: balanced 4-col, trades under brand) --- */
footer{background:#06181a;color:rgba(255,255,255,.7);padding:44px 0 24px;font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1.75fr .85fr .85fr .85fr;gap:24px;margin-bottom:28px}
.fcol h5{font-family:'Inter Tight';font-weight:800;color:#fff;font-size:.95rem;margin-bottom:14px;text-transform:uppercase;letter-spacing:.08em}
.fcol a{display:block;padding:5px 0;opacity:.78}.fcol a:hover{opacity:1;color:var(--teal)}
.fbrand p{margin-bottom:16px}
.ftrades-label{display:block;font-family:'Inter Tight';font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;opacity:.45;margin-bottom:6px}
.ftrades{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:0 18px}
.fbrand .ftrades a{padding:3px 0;opacity:.6;font-size:.86rem}
.fbrand .ftrades a:hover{opacity:1;color:var(--teal)}
.fcol a.fcta{color:var(--teal);opacity:.95;font-weight:600}
.fcol a.fcta:hover{opacity:1}
.fbar{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.84rem;opacity:.7}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}.fcol a{padding:11px 0;min-height:44px;display:flex;align-items:center}.fbrand .ftrades a{padding:11px 0;min-height:44px;display:flex;align-items:center}} /* 44px = min tap target (WCAG) */

/* --- J. SCROLL-REVEAL ---------------------------------------- */
.sr{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.sr.from-l{transform:translateX(-40px)}
.sr.from-r{transform:translateX(40px)}
.sr.in{opacity:1;transform:none}
/* --- Sonny mascot peeks: <span class="sonny-peek from-l|from-r [flip]"><img class="sonny-img" ...></span> on a .sonny-anchor section. Span = entrance slide+flip (CSS vars, reveal only slides home). Img = gentle idle float. Bottom-anchored via inline `bottom`. Revealed by the scroll observer (watches .sonny-peek). Hidden on mobile. --- */
.sonny-anchor{position:relative}
.sonny-peek{position:absolute;z-index:1;pointer-events:none;opacity:0;--tx:0px;--flip:1;transform:translateX(var(--tx)) scaleX(var(--flip));transition:opacity .85s ease,transform 1s cubic-bezier(.2,.72,.2,1);will-change:opacity,transform}
.sonny-peek.from-l{--tx:-110px}
.sonny-peek.from-r{--tx:110px}
.sonny-peek.flip{--flip:-1}
.sonny-peek.in{--tx:0px;opacity:1}
.sonny-peek.lg .sonny-img{width:206px}
.sonny-peek .sonny-img{display:block;width:172px;height:auto;filter:drop-shadow(0 18px 30px rgba(8,39,41,.22));animation:sonnyFloat 5s ease-in-out infinite}
@keyframes sonnyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media(max-width:1100px){.sonny-peek .sonny-img{width:132px}.sonny-peek.lg .sonny-img{width:158px}}
/* Anchor peeks into the content gutter (outside the centred 1180px text column) so they can never cross into the copy. Hidden below 1200 where the gutter is too thin to hold them. */
.sonny-peek.from-l{left:calc((100% - var(--maxw)) / 2 - 160px)!important;right:auto!important}
.sonny-peek.from-r{right:calc((100% - var(--maxw)) / 2 - 160px)!important;left:auto!important}
.sonny-peek.lg.from-l{left:calc((100% - var(--maxw)) / 2 - 194px)!important}
.sonny-peek.lg.from-r{right:calc((100% - var(--maxw)) / 2 - 194px)!important}
@media(max-width:1399px){.sonny-peek{display:none}}
@media (prefers-reduced-motion: reduce){.sonny-peek{opacity:1;--tx:0px;transition:none}.sonny-peek .sonny-img{animation:none}}
@media (prefers-reduced-motion: reduce){.sr{opacity:1!important;transform:none!important;transition:none}html{scroll-behavior:auto}.btn-primary::after{display:none}}

/* --- Outcome phone: a CSS phone frame showing what the client GETS — calls, reviews, enquiries (never CRM guts). Drop <div class="cw-phone"><div class="cw-phone-screen">…</div></div>. Screen carries a time header + frosted notification cards (.cw-notif.call|review|lead). --- */
.cw-phone{position:relative;width:296px;max-width:100%;margin:0 auto;aspect-ratio:296/606;background:#0c1c1f;border-radius:46px;padding:11px;box-shadow:0 34px 64px rgba(8,39,41,.30),0 8px 20px rgba(8,39,41,.18);border:1px solid rgba(255,255,255,.05)}
.cw-phone::before{content:"";position:absolute;top:15px;left:50%;transform:translateX(-50%);width:112px;height:24px;background:#0c1c1f;border-radius:0 0 16px 16px;z-index:3}
.cw-phone-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:linear-gradient(180deg,#dcefef,#f5fafa 34%);display:flex;flex-direction:column}
.cw-phone-top{padding:46px 20px 8px;text-align:center}
.cw-phone-time{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:2.7rem;color:var(--dark);line-height:1;letter-spacing:-.02em}
.cw-phone-date{font-size:.82rem;color:var(--muted);margin-top:5px;font-weight:600}
.cw-phone-notifs{padding:10px 12px 18px;display:flex;flex-direction:column;gap:9px}
.cw-notif{background:rgba(255,255,255,.9);border-radius:17px;padding:11px 12px;display:flex;gap:11px;align-items:flex-start;box-shadow:0 5px 16px rgba(8,39,41,.09)}
.cw-notif .ico{flex:0 0 34px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center}
.cw-notif .ico svg{width:18px;height:18px;stroke:#fff;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cw-notif.call .ico{background:#22a06b}
.cw-notif.review .ico{background:#f5a623}
.cw-notif.lead .ico{background:var(--teal)}
.cw-notif .body{min-width:0;flex:1}
.cw-notif .t{font-weight:800;font-size:.82rem;color:var(--dark);display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.cw-notif .t .ago{font-weight:600;color:var(--muted);font-size:.7rem;white-space:nowrap}
.cw-notif .m{font-size:.79rem;color:#37474a;margin-top:2px;line-height:1.32}
.cw-notif .stars{color:#f5a623;font-size:.8rem;letter-spacing:1.5px;margin-top:1px}
@media(max-width:520px){.cw-phone{width:264px}}

/* Outcome-phone beat: two-col copy + .cw-phone. Trade-neutral; sits between cred and obj on spoke pages. */
.phonebeat{padding:72px 0;background:var(--teal-bg)}
.phonebeat .pb-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:48px;align-items:center}
.phonebeat .pb-photo{display:flex;justify-content:center}
.phonebeat h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:14px}
.phonebeat p.lede{color:var(--muted);font-size:1.08rem;line-height:1.6;margin-bottom:18px}
.phonebeat .pb-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0}
.phonebeat .pb-list li{display:flex;gap:11px;align-items:flex-start;font-weight:600;color:var(--dark);line-height:1.4}
.phonebeat .pb-list .tick{flex:0 0 24px;width:24px;height:24px;border-radius:7px;background:var(--teal);display:grid;place-items:center;margin-top:1px}
.phonebeat .pb-list .tick svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.phonebeat .note{color:var(--muted);font-size:.85rem;margin-top:16px}
@media(max-width:820px){.phonebeat .pb-grid{grid-template-columns:1fr;gap:32px}}