/**
* public-counsel/styles/counsel.css — Clever Legal Counsel, the whole visual
* system in one file.
*
* STANDALONE BY DESIGN. This does NOT import or extend public/styles/styles.css
* (brand A, the claims practice). The two systems share no token name and no
* token value: brand A is purple-on-lavender with a system sans and 14px radii;
* Counsel is amber-on-black, serif/mono, zero radius. Design doc §D7.
*
* Derived from design-mockups/counsel-v9.html, with three deliberate changes:
* 1. @font-face blocks below replace the mockup's of
* #ic-check driven by opacity; the arrow is a CSS-drawn triangle so the
* existing rotate(90deg) open-state animation still works.
*
* --pu is KEPT (review FIX 11). Every VCXY use of it died with the rebrand, but
* the Fractional GC tier card (.ro.sel-pu) and the whole of chapter 100 still
* depend on it. Deleting the declaration leaves var(--pu) invalid at computed-
* value time, which silently renders .ch100 .chi-box.checked transparent.
* --pu2 and --g10 had no surviving uses and are gone.
*/
/* ── SELF-HOSTED FONTS ── latin subset, WOFF2, SIL OFL 1.1.
Licence text ships alongside at assets/fonts/OFL-*.txt (required). */
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400;font-display:swap;
src:url('/assets/fonts/eb-garamond-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:500;font-display:swap;
src:url('/assets/fonts/eb-garamond-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:600;font-display:swap;
src:url('/assets/fonts/eb-garamond-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;
src:url('/assets/fonts/eb-garamond-latin-400-italic.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;
src:url('/assets/fonts/space-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
src:url('/assets/fonts/space-mono-latin-700-normal.woff2') format('woff2');}
:root{
--bk:#0A0A0A;--wh:#FAFAFA;--g90:#141414;--g80:#1E1E1E;--g70:#2A2A2A;
--g60:#555;--g40:#888;--g20:#CCC;
--bd:#2A2A2A;--bdl:#DEDEDE;
--ya:#FFE500;--am:#F5A623;--gr:#3ECF4C;--rd:#FF3B3B;
--pu:#7B2FFF;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--wh);color:var(--bk);font-family:'EB Garamond',Georgia,serif;font-size:18px;line-height:1.6;overflow-x:hidden;}
/* Visible focus for every keyboard-reachable control, including the
role="button" divs the mockup shipped with no focus treatment at all. */
:focus-visible{outline:2px solid var(--am);outline-offset:2px;}
.skip-link{position:absolute;left:-9999px;top:0;z-index:500;background:var(--am);color:var(--bk);
font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:10px 14px;}
.skip-link:focus{left:0;}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
/* Toggled by counsel.js. Replaces the mockup's inline style="display:none". */
.is-hidden{display:none !important;}
/* ── NAV ── */
nav{position:sticky;top:0;z-index:300;background:var(--bk);border-bottom:2px solid var(--am);height:54px;display:flex;align-items:stretch;}
.nav-inner{max-width:1200px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.nl{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;}
/* The Clever Legal mark, replacing the mockup's 2x2 V/C/X/Y letter grid. */
.nm{width:26px;height:26px;color:var(--am);flex-shrink:0;display:block;}
.nn{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--wh);}
.nn b{color:var(--am);}
.nav-ql{display:flex;gap:0;list-style:none;height:100%;align-items:stretch;}
.nav-ql li{display:flex;align-items:stretch;}
.nav-ql a{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--g40);text-decoration:none;transition:all .2s;display:flex;align-items:center;padding:0 14px;border-left:1px solid var(--bd);}
.nav-ql a:hover{color:var(--am);background:rgba(245,166,35,.04);}
.nav-ql a.cta{background:var(--am);color:var(--bk);font-weight:700;border-left:none;padding:0 16px;}
.nav-ql a.cta:hover{background:var(--ya);}
/* NAV MINI CIRCLE */
.nav-circle-wrap{position:relative;display:flex;align-items:center;padding:0 14px;border-left:1px solid var(--bd);cursor:pointer;}
.nav-circle-stack{display:flex;flex-direction:column;align-items:center;gap:1px;}
.nav-circle{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--g60);background:var(--g90);display:flex;align-items:center;justify-content:center;transition:all .3s;cursor:pointer;flex-shrink:0;}
.nav-circle:hover{border-color:var(--am);}
.nav-circle.has-name{border-color:var(--am);background:rgba(245,166,35,.1);}
.nav-circle.has-items{border-color:var(--am);background:var(--am);animation:pulse 2s infinite;}
.nav-circle-lbl{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.05em;color:var(--g60);transition:color .3s;}
.nav-circle.has-name .nav-circle-lbl{color:var(--am);}
.nav-circle.has-items .nav-circle-lbl{color:var(--bk);}
.nav-you-label{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--g60);text-align:center;display:block;margin-top:2px;line-height:1;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,166,35,.4);}50%{box-shadow:0 0 0 6px rgba(245,166,35,0);}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}
/* NAV CIRCLE DROPDOWN */
.nav-circle-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:240px;background:var(--g90);border:1px solid var(--bd);z-index:400;display:none;padding:16px;}
.nav-circle-dropdown.open{display:block;}
.ncd-title{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--am);margin-bottom:10px;}
.ncd-field{width:100%;border:1px solid var(--bd);background:var(--g80);padding:7px 9px;font-family:'EB Garamond',Georgia,serif;font-size:14px;color:var(--wh);outline:none;margin-bottom:6px;transition:border-color .2s;}
.ncd-field:focus{border-color:var(--am);}
.ncd-save{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bk);background:var(--am);border:none;padding:8px 12px;cursor:pointer;width:100%;transition:background .2s;margin-top:4px;}
.ncd-save:hover{background:var(--ya);}
.ncd-back{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--g60);text-align:center;display:block;margin-top:8px;cursor:pointer;text-decoration:none;}
.ncd-back:hover{color:var(--am);}
/* HERO */
.hero{background:var(--bk);border-bottom:1px solid var(--bd);}
.hero-top{display:grid;grid-template-columns:1fr 300px;border-bottom:1px solid var(--bd);}
.hl{padding:48px 44px;border-right:1px solid var(--bd);display:flex;flex-direction:column;gap:14px;}
.hey{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--am);display:flex;align-items:center;gap:10px;}
.hey::before{content:'';width:14px;height:1px;background:var(--am);display:block;}
.hero h1{font-size:44px;font-weight:400;line-height:1.05;color:var(--wh);letter-spacing:-.01em;}
.hero h1 em{font-style:italic;color:var(--am);}
.hero-tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:var(--g40);}
.hero-tag b{color:var(--g20);}
.hero-tag--lede{margin-top:10px;font-size:13px;color:var(--g20);font-style:italic;letter-spacing:.04em;}
.hr{display:flex;flex-direction:column;}
.hs{padding:18px 22px;border-bottom:1px solid var(--bd);flex:1;display:flex;flex-direction:column;justify-content:center;}
.hs:last-child{border-bottom:none;}
.hsn{font-size:28px;font-weight:500;color:var(--am);line-height:1;margin-bottom:3px;}
.hsl{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--g40);}
/* The 24-hr response guarantee is not absolute; the qualification travels with
every instance of the claim. Design doc §7 "Open — decide before launch". */
.hero-fine{font-family:'Space Mono',monospace;font-size:9px;line-height:1.6;letter-spacing:.04em;color:var(--g40);padding:8px 22px 10px;border-top:1px solid var(--bd);}
/* RETAINER */
.ret-wrap{background:var(--g90);border-bottom:1px solid var(--bd);padding:28px 44px;}
.ret-in{max-width:1200px;margin:0 auto;}
.ret-ey{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--am);margin-bottom:12px;}
/* Retainer cards */
.ret-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--bd);}
.ro{background:var(--g80);padding:20px 16px;cursor:pointer;transition:all .2s;position:relative;border:2px solid transparent;}
.ro:hover{border-color:var(--ya);}
.ro.sel{border-color:var(--am);background:rgba(245,166,35,.06);}
.ro.sel-pu{border-color:var(--pu);background:rgba(123,47,255,.06);}
.ro-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.ro-chk{width:14px;height:14px;border:1.5px solid var(--g40);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:all .2s;}
.ro.sel .ro-chk{color:var(--bk);background:var(--am);border-color:var(--am);}
.ro.sel-pu .ro-chk{background:var(--pu);border-color:var(--pu);color:var(--wh);}
.ro-tag{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--g60);margin-bottom:5px;}
.ro.sel .ro-tag{color:var(--am);}
.ro.sel-pu .ro-tag{color:var(--pu);}
.ro-name{font-size:17px;font-weight:500;color:var(--wh);margin-bottom:3px;line-height:1.15;}
.ro-price{font-family:'Space Mono',monospace;font-size:10px;color:var(--am);}
.ro.sel-pu .ro-price{color:var(--pu);}
/* Detail panel — hidden by default, shown when selected */
.ro-detail{overflow:hidden;max-height:0;transition:max-height .3s ease,margin-top .3s ease;margin-top:0;}
.ro.sel .ro-detail,.ro.sel-pu .ro-detail{max-height:260px;margin-top:14px;}
.ro-items{list-style:none;display:flex;flex-direction:column;gap:3px;padding-top:10px;border-top:1px solid var(--bd);}
.ro-items li{font-size:12px;color:var(--g40);padding-left:11px;position:relative;line-height:1.4;}
.ro-items li::before{content:'→';position:absolute;left:0;color:var(--am);font-size:8px;}
.ro.sel-pu .ro-items li::before{color:var(--pu);}
.li-fine{display:block;color:var(--g40);font-size:11px;line-height:1.4;}
.ret-note{margin-top:10px;font-size:13px;color:var(--g60);line-height:1.5;min-height:26px;}
/* Sticky retainer bar */
.ret-sticky-bar{position:sticky;top:54px;z-index:290;background:var(--g90);border-bottom:1px solid var(--bd);padding:6px 32px;display:none;align-items:center;gap:12px;transform:translateY(-100%);transition:transform .3s;}
.ret-sticky-bar.show{display:flex;transform:translateY(0);}
.rsb-lbl{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--g60);}
.rsb-val{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;color:var(--am);flex:1;}
.rsb-change{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--g60);text-decoration:none;border:1px solid var(--bd);padding:3px 7px;transition:all .2s;}
.rsb-change:hover{border-color:var(--am);color:var(--am);}
/* CHAPTERS */
.chap-wrap{background:var(--bk);border-bottom:1px solid var(--bd);padding:0 44px 44px;}
.chap-in{max-width:1200px;margin:0 auto;}
.chap-head{padding:32px 0 18px;}
.chap-ey{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--am);margin-bottom:5px;}
.chap-t{font-size:22px;font-weight:400;color:var(--wh);}
.chap-t em{font-style:italic;color:var(--am);}
.chap-sub{font-size:13px;color:var(--g60);margin-top:3px;}
/* The approved fee wording (catalogue §5). Must sit with the prices, not only
in the legal block — every price on this page is a bare "$" on an AU & UK page. */
.fee-terms{font-size:13px;color:var(--g40);line-height:1.6;margin-top:10px;border-top:1px solid var(--bd);padding-top:10px;max-width:76ch;}
.fee-terms a{color:var(--am);text-decoration:underline;}
/* Founder fields ABOVE chapters */
.founder-fields{border:1px solid var(--bd);background:var(--g90);padding:20px 24px;margin-bottom:2px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.ff-lbl{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--am);display:block;margin-bottom:4px;}
.ff-inp{width:100%;border:1px solid var(--bd);background:var(--g80);padding:7px 10px;font-family:'EB Garamond',Georgia,serif;font-size:14px;color:var(--wh);outline:none;transition:border-color .2s;}
.ff-inp:focus{border-color:var(--am);}
.opt{color:var(--g60);font-size:9px;}
.chapters{display:flex;flex-direction:column;}
.chapter{border-top:1px solid var(--bd);overflow:hidden;}
.chapter:last-child{border-bottom:1px solid var(--bd);}
.chn-wrap{display:flex;align-items:center;justify-content:center;padding:12px 14px;border-right:1px solid var(--bd);min-width:56px;flex-direction:column;gap:3px;}
.chn{font-family:'Space Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.05em;color:var(--g60);transition:color .2s;}
.tl-dot{width:6px;height:6px;border-radius:50%;background:transparent;border:1px solid var(--g70);transition:all .3s;}
.tl-dot.yellow{background:var(--ya);border-color:var(--ya);}
.tl-dot.amber{background:var(--am);border-color:var(--am);}
.tl-dot.green{background:var(--gr);border-color:var(--gr);}
.tl-dot.red{background:var(--rd);border-color:var(--rd);}
.chh{display:flex;align-items:stretch;cursor:pointer;transition:background .15s;user-select:none;width:100%;text-align:left;background:none;border:none;font:inherit;color:inherit;}
.chh:hover{background:rgba(245,166,35,.03);}
.cht{flex:1;padding:13px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.cht-main{display:flex;flex-direction:column;}
.cht-name{font-size:15px;font-weight:400;color:var(--wh);}
.cht-sub{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--g40);margin-top:2px;}
/* Disclosure arrow, drawn in CSS. Was the '▶' glyph; the rotate(90deg)
open-state animation below is unchanged. */
.cha{padding:0 14px;display:flex;align-items:center;transition:transform .25s,color .2s;color:var(--g70);}
.cha::before{content:'';display:block;width:0;height:0;border-left:6px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;}
.chapter.open .cha{transform:rotate(90deg);color:var(--am);}
.chapter.open .chh{background:rgba(245,166,35,.04);}
.chapter.open .chn{color:var(--am);}
.ch100 .chn{color:var(--pu);font-size:8px;}
.ch100 .chn-wrap{border-color:var(--pu);}
.ch100 .cha{color:var(--pu);}
.ch100.open .chn{color:var(--pu);}
.ch100.open .cha{color:var(--pu);}
.ch100.open .chh{background:rgba(123,47,255,.04);}
.chb{display:none;background:var(--g90);border-top:1px solid var(--bd);padding:20px 26px;}
.chapter.open .chb{display:block;}
.chb-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.chb-desc{font-size:13px;color:var(--g40);line-height:1.6;margin-bottom:12px;grid-column:1/-1;}
.chb-sect{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--am);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bd);}
/* An item is a wrapper holding the tickable row and its notes field as
SIBLINGS. The textarea must not sit inside [data-item] — that element is
role="button" with Enter/Space bound to it, so nesting an input would be
invalid ARIA and Space would toggle the item instead of typing. Keeping it
outside also means the delegated click handler's closest('[data-item]')
never matches it, so clicking into the notes cannot toggle selection. */
.chi-wrap{border-bottom:1px solid rgba(255,255,255,.04);}
.chi-wrap:last-child{border-bottom:none;}
.chi{display:flex;align-items:flex-start;gap:7px;padding:6px 0;cursor:pointer;}
.chi-cmt-wrap{padding:0 0 8px 18px;}
.chi-cmt{width:100%;border:1px solid var(--bd);border-left:2px solid var(--am);background:var(--g80);
padding:5px 8px;font-family:'EB Garamond',Georgia,serif;font-size:12px;line-height:1.45;color:var(--wh);
outline:none;resize:vertical;min-height:30px;transition:border-color .2s;display:block;}
.chi-cmt:focus{border-color:var(--am);}
.chi-cmt::placeholder{color:var(--g60);font-style:italic;}
.chi-cmt.filled{border-color:var(--gr);border-left-color:var(--gr);}
/* Written by the assistant rather than typed — flagged so the visitor can see
what it put there and correct it. */
.chi-cmt.by-agent{border-left-color:var(--ya);}
.ch100 .chi-cmt{border-left-color:var(--pu);}
.chi-box{width:11px;height:11px;border:1.5px solid var(--g60);flex-shrink:0;margin-top:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;}
.chi-box.checked{background:var(--am);border-color:var(--am);}
/* The tick is an inside every box, revealed by
opacity. Was `content:'✓'` on ::after — a glyph outside the latin subset. */
.ic-chk{width:8px;height:8px;color:var(--bk);opacity:0;transition:opacity .15s;flex-shrink:0;}
.chi-box.checked .ic-chk,.story-svc-box.checked .ic-chk,.ro.sel .ic-chk,.ro.sel-pu .ic-chk{opacity:1;}
.ch100 .chi-box.checked .ic-chk{color:var(--wh);}
.chi-nm{font-size:13px;color:var(--g20);flex:1;line-height:1.3;}
.chi-pr{font-family:'Space Mono',monospace;font-size:9px;color:var(--am);white-space:nowrap;flex-shrink:0;}
.chi-note{font-size:10px;color:var(--am);}
.ch-fw{margin-top:12px;border-top:1px solid var(--bd);padding-top:10px;}
.ch-fl{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;display:block;}
.ch-fl.yellow{color:var(--ya);}
.ch-fl.amber{color:var(--am);}
.ch-fl.green{color:var(--gr);}
.ch-fl.red{color:var(--rd);}
.ch-fi{width:100%;border:1px solid var(--bd);background:var(--g80);padding:6px 9px;font-family:'EB Garamond',Georgia,serif;font-size:13px;color:var(--wh);outline:none;transition:border-color .2s,box-shadow .2s;margin-bottom:6px;}
.ch-fi:focus{border-color:var(--am);}
.ch-fi.yellow{border-color:var(--ya);}
.ch-fi.amber{border-color:var(--am);}
.ch-fi.green{border-color:var(--gr);}
.ch-fi.red{border-color:var(--rd);box-shadow:0 0 0 1px var(--rd);}
.ch-fi-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.chb-note{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--g40);margin-top:6px;}
/* AI + lawyer review. Required wherever AI-assisted output is offered — the
VLSB+C joint statement on the use of AI in Australian legal practice is the
governing guidance. Mirrors brand A's .draft-banner pattern. */
.ai-note{font-size:12px;line-height:1.55;color:var(--g20);background:rgba(245,166,35,.07);border-left:2px solid var(--am);padding:8px 11px;margin:12px 0 0;grid-column:1/-1;}
.ch100 .ai-note{background:rgba(123,47,255,.1);border-left-color:var(--pu);}
.ch100 .chb{background:#0C0818;border-top:1px solid var(--pu);}
.ch100 .chb-sect{color:var(--pu);border-color:rgba(123,47,255,.25);}
.ch100 .chi-pr{color:var(--pu);}
.ch100 .chi-box.checked{background:var(--pu);border-color:var(--pu);}
.ch100 .ch-fw{border-color:rgba(123,47,255,.2);}
.ch100 .ch-fl{color:var(--pu);}
.ch100 .ch-fi{border-color:var(--pu);background:var(--g90);color:var(--wh);}
/* LET'S WORK TOGETHER */
.lwt{background:var(--bk);border-top:1px solid var(--bd);}
.lwt-in{max-width:1200px;margin:0 auto;padding:48px 44px;}
.lwt-ey{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--am);display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.lwt-ey::before{content:'';width:14px;height:1px;background:var(--am);display:block;}
.lwt-t{font-size:28px;font-weight:400;color:var(--wh);margin-bottom:28px;}
.lwt-t em{font-style:italic;color:var(--am);}
.circles-row{display:flex;gap:0;align-items:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;}
.cc{display:flex;flex-direction:column;align-items:center;gap:8px;width:200px;flex-shrink:0;padding:0 12px;}
.cc:first-child{padding-left:0;}
.cc-photo{width:136px;height:136px;border-radius:50%;overflow:hidden;border:2px solid var(--am);display:block;text-decoration:none;flex-shrink:0;transition:border-color .2s;}
.cc-photo:hover{border-color:var(--ya);}
.cc-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:grayscale(100%);}
.cc-empty{width:136px;height:136px;border-radius:50%;border:2px dashed var(--bd);background:var(--g90);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s;}
.cc-empty:hover{border-color:var(--am);}
.cc-empty.has-name{border-color:var(--am);border-style:solid;background:rgba(245,166,35,.07);}
.cc-empty.has-items{border-color:var(--am);border-style:solid;background:rgba(245,166,35,.12);animation:pulse 2s infinite;}
.cc-empty-lbl{font-family:'Space Mono',monospace;font-size:18px;color:var(--g60);transition:color .3s;}
.cc-empty.has-name .cc-empty-lbl{color:var(--am);font-size:22px;font-weight:700;}
.cc-name{font-size:15px;font-weight:500;color:var(--wh);text-align:center;line-height:1.2;}
.cc-badge{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--am);color:var(--am);display:inline-block;}
.cc-buls{list-style:none;width:100%;margin-top:2px;}
.cc-buls li{font-size:11px;color:var(--g60);padding:2px 0 2px 11px;position:relative;border-bottom:1px solid rgba(255,255,255,.04);line-height:1.3;}
.cc-buls li:last-child{border-bottom:none;}
.cc-buls li::before{content:'—';position:absolute;left:0;color:var(--am);font-size:8px;}
.cc-link{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--am);text-decoration:none;}
.cc-link:hover{color:var(--ya);}
.cc-select{width:100%;border:1px solid var(--bd);background:var(--g80);padding:5px 7px;font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.04em;color:var(--g20);outline:none;cursor:pointer;appearance:none;transition:border-color .2s;}
.cc-select:focus{border-color:var(--am);}
.you-fields{width:100%;display:flex;flex-direction:column;gap:4px;margin-top:4px;}
.yfl{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--g60);display:block;margin-bottom:2px;}
.yfi{width:100%;border:1px solid var(--bd);background:var(--g90);padding:5px 7px;font-family:'EB Garamond',Georgia,serif;font-size:13px;color:var(--wh);outline:none;transition:border-color .2s;}
.yfi:focus{border-color:var(--am);}
.yfi--area{resize:vertical;}
/* back-to-last */
.you-back{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--g60);text-align:center;cursor:pointer;text-decoration:none;display:block;margin-top:6px;padding:5px;border:1px solid var(--bd);transition:all .2s;}
.you-back:hover{border-color:var(--am);color:var(--am);}
.btn-remove{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--g60);background:none;border:1px solid var(--bd);padding:4px 8px;cursor:pointer;margin-top:3px;}
.btn-remove:hover{border-color:var(--am);color:var(--am);}
.cc-plus{display:flex;align-items:flex-start;padding-top:46px;font-family:'Space Mono',monospace;font-size:16px;color:var(--g70);flex-shrink:0;width:22px;justify-content:center;}
.cc-add{display:flex;flex-direction:column;align-items:center;gap:7px;width:130px;flex-shrink:0;padding:0 12px;}
.cc-add-plus{font-family:'Space Mono',monospace;font-size:22px;color:var(--g60);}
.cc-add-lbl{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--g60);text-align:center;margin-top:3px;}
/* HOW WE WORK */
.how-wrap{border-top:1px solid var(--bdl);}
.how-in{max-width:1200px;margin:0 auto;padding:48px 44px;}
.how-ey{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--am);display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.how-ey::before{content:'';width:14px;height:1px;background:var(--am);display:block;}
.how-t{font-size:28px;font-weight:400;margin-bottom:24px;}
.how-t em{font-style:italic;color:var(--am);}
.how-rows{display:flex;flex-direction:column;gap:2px;}
.how-r{display:grid;grid-template-columns:160px 1fr;border:1px solid var(--bdl);}
.how-r.dk{background:var(--bk);border-color:var(--bd);}
.how-r.ak{border-color:var(--am);}
.how-l{padding:14px 16px;border-right:1px solid var(--bdl);display:flex;flex-direction:column;justify-content:center;}
.how-r.dk .how-l{border-color:var(--bd);}
.how-r.ak .how-l{border-color:var(--am);}
.how-n{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.12em;color:var(--am);margin-bottom:3px;}
.how-t2{font-size:14px;font-weight:500;line-height:1.15;}
.how-r.ak .how-t2{color:var(--am);}
.how-r.dk .how-t2{color:var(--wh);}
.how-b{padding:14px 22px;font-size:13px;color:var(--g60);line-height:1.6;display:flex;align-items:center;}
/* STORIES */
.stories-wrap{background:var(--g90);border-top:1px solid var(--bd);}
.stories-in{max-width:1200px;margin:0 auto;padding:48px 44px;}
.stories-ey{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--am);display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.stories-ey::before{content:'';width:14px;height:1px;background:var(--am);display:block;}
.stories-t{font-size:28px;font-weight:400;color:var(--wh);margin-bottom:6px;}
.stories-t em{font-style:italic;color:var(--am);}
.stories-intro{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--bd);margin-bottom:2px;}
.intro-card{background:var(--g80);padding:22px 20px;}
.intro-card-tag{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.15em;text-transform:uppercase;color:var(--am);margin-bottom:7px;}
.intro-card-title{font-size:17px;font-weight:500;color:var(--wh);line-height:1.2;margin-bottom:8px;}
.intro-card-body{font-size:13px;color:var(--g40);line-height:1.65;}
.hl-am{color:var(--am);}
.stories-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--bd);}
.story{background:var(--g80);padding:22px 20px;transition:background .2s;}
.story:hover{background:rgba(245,166,35,.03);}
.story-tag{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--am);margin-bottom:7px;}
.story-title{font-size:16px;font-weight:500;color:var(--wh);line-height:1.2;margin-bottom:9px;}
.story-body{font-size:13px;color:var(--g40);line-height:1.65;margin-bottom:10px;}
.story-lesson{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.05em;color:var(--ya);border-top:1px solid var(--bd);padding-top:8px;line-height:1.5;margin-bottom:9px;}
.story-svc{display:flex;align-items:center;gap:6px;cursor:pointer;padding:5px 0;border-top:1px solid var(--bd);transition:opacity .2s;width:100%;background:none;border-left:none;border-right:none;border-bottom:none;font:inherit;text-align:left;}
.story-svc:hover{opacity:.75;}
.story-svc-box{width:10px;height:10px;border:1.5px solid var(--g60);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.story-svc-box.checked{background:var(--am);border-color:var(--am);}
.story-svc-lbl{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--g60);}
.story-note{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--g60);border-top:1px solid var(--bd);padding-top:8px;}
/* FOOTER */
footer{background:var(--bk);border-top:2px solid var(--am);padding:36px 44px 16px;}
.fi{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;margin-bottom:24px;}
.fb{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--wh);margin-bottom:6px;}
.fb b{color:var(--am);}
.ft{font-size:13px;font-style:italic;color:var(--g60);line-height:1.5;}
.fct{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.15em;text-transform:uppercase;color:var(--am);margin-bottom:8px;}
.f-meta{font-family:'Space Mono',monospace;font-size:7px;color:var(--g60);margin-top:8px;letter-spacing:.08em;line-height:1.7;}
.f-email{font-size:13px;margin-bottom:5px;}
.f-email a{color:var(--am);text-decoration:none;}
.f-email a:hover{text-decoration:underline;}
.f-loc{font-size:13px;color:var(--g60);margin-top:10px;}
.f-cta{margin-top:12px;}
.btn-am{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bk);background:var(--am);padding:7px 12px;text-decoration:none;display:inline-block;transition:background .2s;border:none;cursor:pointer;}
.btn-am:hover{background:var(--ya);}
.f-links{display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
.f-links a{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--g40);text-decoration:none;border:1px solid var(--bd);padding:5px 8px;display:inline-block;transition:all .2s;}
.f-links a:hover{border-color:var(--am);color:var(--am);}
.fbot{max-width:1200px;margin:0 auto;border-top:1px solid var(--bd);padding-top:12px;display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between;}
.fbot-t{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.04em;color:var(--g40);line-height:1.8;}
.fbot-t a{color:var(--am);text-decoration:none;}
.fbot-t a:hover{text-decoration:underline;}
/* Professional-standards limitation — required in the footer of EVERY page,
as brand A does at public/index.html. Not only in the legal block. */
.fbot-psl{max-width:1200px;margin:10px auto 0;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.04em;color:var(--g40);line-height:1.8;}
/* LEGAL (linked pages) */
.legal-section{background:var(--g90);border-top:1px solid var(--bd);padding:24px 44px;}
.legal-in{max-width:1200px;margin:0 auto;}
.legal-title{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.15em;text-transform:uppercase;color:var(--g60);margin-bottom:8px;margin-top:16px;}
.legal-title:first-child{margin-top:0;}
.legal-body{font-size:13px;color:var(--g40);line-height:1.65;}
.legal-body p{margin-bottom:6px;}
.legal-body a{color:var(--am);text-decoration:underline;}
.legal-body em{font-style:italic;}
/* FLOATING */
.float-contact{position:fixed;bottom:24px;right:18px;z-index:250;display:flex;flex-direction:column;gap:4px;align-items:flex-end;}
/* Lift clear of the estimate bar once it appears. The bar is taller than the
mockup's — the approved fee wording takes its own full-width row — so a
fixed 56px offset would put these buttons on top of "Email Cam". Requires
.float-contact to follow .est-bar in the DOM; see index.html. */
.est-bar.show ~ .float-contact{bottom:120px;}
.fc-btn{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border:none;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:5px;transition:all .2s;box-shadow:0 2px 8px rgba(0,0,0,.4);}
.fc-ic{width:11px;height:11px;flex-shrink:0;}
.fc-btn.book{background:var(--am);color:var(--bk);}
.fc-btn.book:hover{background:var(--ya);}
.fc-btn.enq{background:var(--bk);color:var(--g40);border:1px solid var(--bd);}
.fc-btn.enq:hover{border-color:var(--am);color:var(--am);}
/* ESTIMATE BAR */
.est-bar{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--bk);border-top:2px solid var(--am);padding:8px 32px;display:none;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;max-height:60vh;overflow-y:auto;}
.est-bar.show{display:flex;}
.est-lbl{font-family:'Space Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--g60);white-space:nowrap;}
.est-list{font-family:'Space Mono',monospace;font-size:8px;color:var(--g20);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.est-tot{font-family:'Space Mono',monospace;font-size:11px;font-weight:700;color:var(--am);white-space:nowrap;}
.est-btn{font-family:'Space Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bk);background:var(--am);padding:6px 12px;border:none;cursor:pointer;white-space:nowrap;transition:background .2s;text-decoration:none;display:inline-block;}
.est-btn:hover{background:var(--ya);}
.est-btn--ghost{background:transparent;color:var(--g40);border:1px solid var(--bd);}
.est-btn--ghost:hover{background:transparent;border-color:var(--am);color:var(--am);}
/* Full-width own line so the fee wording survives the mobile collapse, where
.est-list is display:none. */
.est-fine{flex-basis:100%;font-family:'Space Mono',monospace;font-size:9px;line-height:1.6;letter-spacing:.03em;color:var(--g40);border-top:1px solid var(--bd);padding-top:6px;margin-top:2px;}
.est-fine a{color:var(--am);text-decoration:underline;}
.est-status{flex-basis:100%;font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.06em;color:var(--gr);}
.est-status.err{color:var(--rd);}
.est-copy{flex-basis:100%;width:100%;border:1px solid var(--bd);background:var(--g90);color:var(--wh);
font-family:'Space Mono',monospace;font-size:10px;line-height:1.5;padding:8px;min-height:120px;resize:vertical;}
/* Standalone legal pages (engagement terms, 404) */
.doc-wrap{background:var(--bk);border-bottom:1px solid var(--bd);}
.doc-in{max-width:820px;margin:0 auto;padding:56px 44px 64px;}
.doc-ey{font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--am);display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.doc-ey::before{content:'';width:14px;height:1px;background:var(--am);display:block;}
.doc-in h1{font-size:38px;font-weight:400;line-height:1.1;color:var(--wh);margin-bottom:10px;}
.doc-lede{font-size:16px;color:var(--g20);line-height:1.6;margin-bottom:28px;}
.doc-in h2{font-size:15px;font-weight:500;color:var(--am);margin:28px 0 8px;font-family:'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;}
.doc-in p{font-size:14px;color:var(--g40);line-height:1.7;margin-bottom:10px;}
.doc-in ul{list-style:none;margin:0 0 10px;}
.doc-in li{font-size:14px;color:var(--g40);line-height:1.6;padding-left:14px;position:relative;margin-bottom:5px;}
.doc-in li::before{content:'—';position:absolute;left:0;color:var(--am);font-size:10px;}
.doc-in a{color:var(--am);text-decoration:underline;}
.doc-in em{font-style:italic;}
.doc-back{font-family:'Space Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--g60);text-decoration:none;display:inline-block;margin-top:28px;border:1px solid var(--bd);padding:8px 12px;transition:all .2s;}
.doc-back:hover{border-color:var(--am);color:var(--am);}
/* RESPONSIVE */
@media(max-width:900px){
.nav-inner{padding:0 12px;}
.nav-ql li:not(.always-show):not(:nth-last-child(2)){display:none;}
.hero-top{grid-template-columns:1fr;}.hr{flex-direction:row;}
.hs{border-bottom:none;border-right:1px solid var(--bd);}.hs:last-child{border-right:none;}
.hl{padding:32px 20px;}.hero h1{font-size:30px;}
.hero-fine{padding:8px 20px 10px;}
.ret-wrap{padding:24px 16px;}.ret-grid{grid-template-columns:1fr;gap:2px;}
.chap-wrap{padding:0 20px 32px;}
.founder-fields{grid-template-columns:1fr;gap:8px;}
.chb-grid{grid-template-columns:1fr;}.ch-fi-row{grid-template-columns:1fr;}
.circles-row{flex-wrap:wrap;gap:12px;overflow-x:visible;}
.cc{width:140px;padding:0 5px;}.cc-photo,.cc-empty{width:116px;height:116px;}
.how-in{padding:32px 20px;}.how-r{grid-template-columns:1fr;}.how-l{border-right:none;border-bottom:1px solid var(--bdl);}
.lwt-in{padding:32px 20px;}
.stories-in{padding:32px 20px;}.stories-grid{grid-template-columns:1fr;}.stories-intro{grid-template-columns:1fr;}
footer{padding:28px 20px 12px;}.fi{grid-template-columns:1fr;gap:18px;}
.fbot{flex-direction:column;}
.legal-section{padding:18px 20px;}
.doc-in{padding:36px 20px 44px;}.doc-in h1{font-size:28px;}
.float-contact{bottom:16px;right:10px;}
/* Taller again on mobile: the fee wording wraps to more lines. */
.est-bar.show ~ .float-contact{bottom:150px;}
.est-bar{padding:6px 12px;}.est-list{display:none;}
}
[id]{scroll-margin-top:62px;}