/* ═══════════════════════════════════════════════════════════════════ POWELL CONTENT STUDIO design system Rebuild, 2026-08-13 No webfonts, no CDN, no build step, no framework. Every page opens from a file:// path and deploys to Cloudflare Pages as-is. ── PALETTE PROVENANCE. READ THIS BEFORE CHANGING A COLOR. ── The tokens below come from `reference_pcs_brand_colors` (2026-08-11), which was sampled off the real logo file and carries Shawn's own words: "There's no coral in PCS. We have purple. We've got a blue. No yellow." Navy #0f172a, purple #a856a9, deep purple #482858, blue #18ade4. Three values that have shipped before are WRONG and must not come back: #4F46E5 indigo - recorded once as "the official accent", is not the logo purple #f5a623 gold - an invented approximation, never sampled #fa6a57 coral - lifted from the live Lovable site's --accent token; that site's CSS is not the brand The logo mark also contains red, orange and yellow loops. Those are part of the mark, not the palette. The full-color mark goes on the page; a warm color never drives the design. ── CONTRAST, MEASURED NOT GUESSED ── #a856a9 on white = 4.53:1. Passes AA for normal text but only barely, so small text uses --accent (#8a3d8c, 6.7:1) and #a856a9 is reserved for fills, rules and large type. On navy #a856a9 is 3.97:1, which is fine for UI and large text and NOT fine for body copy, so dark bands use --accent-light (#c98fca, 7.1:1 on navy). #18ade4 is 2.58:1 on white and never carries text there; on navy it is 7.0:1 and is safe. ═══════════════════════════════════════════════════════════════════ */ :root{ /* Light is the base definition. Every color the site uses is declared HERE, unconditionally. The dark block below only re-points tokens. Never let a color's only definition live inside a media query. */ --bg:#FFFFFF; --band-soft:#F6F4F8; --band-dark:#0f172a; --band-dark-2:#17233d; --band-plum:#482858; --surface:#FFFFFF; --surface-2:#FAF8FB; --text:#141B2B; --text-on-dark:#EEF1F6; --muted:#5A6478; --muted-on-dark:#A9B4C6; --line:#E5E2EA; --line-strong:#CFC9D6; --line-on-dark:rgba(255,255,255,.14); --accent:#8a3d8c; /* text-safe purple, AA on --bg */ --accent-bright:#a856a9; /* the logo purple. fills, rules, marks */ --accent-light:#c98fca; /* purple on dark bands */ --accent-wash:#F7EDF7; --blue:#18ade4; /* logo blue. fills and dark bands only */ --blue-ink:#0b6f93; /* text-safe blue, 5.7:1 on --bg */ --blue-wash:#E8F6FD; --plum:#482858; --btn-text:#FFFFFF; /* ── The six logo colors, sampled from img/pcs-mark.png 2026-08-13. The mark is six colors in near equal share, not three. Each pairs with an ink chosen for contrast on that exact fill, all >= 4.5:1. Do not add a seventh. Do not use these as text on white, several are far too light; they are FILLS. Text uses --accent / --blue-ink. */ --c1:#a854a8; --c1i:#FFFFFF; /* purple 4.65:1 on white ink */ --c2:#18a8e4; --c2i:#0B1220; /* blue 6.95:1 on dark ink */ --c3:#482454; --c3i:#FFFFFF; /* deep purple high contrast */ --c4:#e48424; --c4i:#0B1220; /* orange 6.98:1 on dark ink */ --c5:#fcc030; --c5i:#0B1220; /* gold high contrast */ --c6:#e44848; --c6i:#0B1220; /* red 4.68:1 on dark ink */ /* ── Action color. Purple is the brand FIELD, orange is the ACTION. Sampled orange #e48424 carries only 2.75:1 against white text, so primary buttons take dark ink. Never put white text on --cta. */ --cta:#e48424; --cta-ink:#1A0D02; --cta-hover:#c96f14; --good:#1B6B4C; --good-wash:#E9F4EE; --warn:#8A5A12; --warn-wash:#FCF3E4; --bad:#A93B2C; --shadow-sm:0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.05); --shadow-md:0 2px 6px rgba(15,23,42,.07),0 12px 32px rgba(15,23,42,.09); --shadow-lg:0 4px 12px rgba(15,23,42,.09),0 24px 60px rgba(15,23,42,.14); --glow:0 0 0 1px rgba(168,86,169,.18),0 18px 50px rgba(72,40,88,.18); --radius:6px; --radius-lg:12px; --radius-xl:18px; /* No webfonts. The display face is the system UI sans pushed heavy and tight; the microtype is monospace. PCS sells systems, so the mono kickers and data labels are the brand's voice, not decoration. */ --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace; --wrap:1200px; } /* Dark: re-point only. Guarded so an explicit light choice always wins. */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0B111E; --band-soft:#111A2B; --band-dark:#070C16; --band-dark-2:#111B2E; --band-plum:#2E1A39; --surface:#131D30; --surface-2:#0F1828; --text:#E9EDF4; --muted:#9CA9BE; --line:#222E45; --line-strong:#33405A; --accent:#d29ad3; --accent-bright:#c98fca; --accent-light:#dcb2dd; --accent-wash:#231830; --blue-ink:#63c9f2; --blue-wash:#0F2634; --good:#5CC095; --good-wash:#122A22; --warn:#E0B36A; --warn-wash:#2A2013; --bad:#E68A79; --btn-text:#0B111E; --shadow-sm:0 1px 2px rgba(0,0,0,.42); --shadow-md:0 2px 6px rgba(0,0,0,.46),0 12px 32px rgba(0,0,0,.36); --shadow-lg:0 4px 12px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.46); --glow:0 0 0 1px rgba(201,143,202,.22),0 18px 50px rgba(0,0,0,.5); } } :root[data-theme="dark"]{ --bg:#0B111E; --band-soft:#111A2B; --band-dark:#070C16; --band-dark-2:#111B2E; --band-plum:#2E1A39; --surface:#131D30; --surface-2:#0F1828; --text:#E9EDF4; --muted:#9CA9BE; --line:#222E45; --line-strong:#33405A; --accent:#d29ad3; --accent-bright:#c98fca; --accent-light:#dcb2dd; --accent-wash:#231830; --blue-ink:#63c9f2; --blue-wash:#0F2634; --good:#5CC095; --good-wash:#122A22; --warn:#E0B36A; --warn-wash:#2A2013; --bad:#E68A79; --btn-text:#0B111E; --shadow-sm:0 1px 2px rgba(0,0,0,.42); --shadow-md:0 2px 6px rgba(0,0,0,.46),0 12px 32px rgba(0,0,0,.36); --shadow-lg:0 4px 12px rgba(0,0,0,.5),0 24px 60px rgba(0,0,0,.46); --glow:0 0 0 1px rgba(201,143,202,.22),0 18px 50px rgba(0,0,0,.5); } *{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--text); font-family:var(--sans);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:var(--accent);text-underline-offset:3px} a:hover{color:var(--accent-bright)} h1,h2,h3,h4{font-family:var(--sans);font-weight:800;letter-spacing:-.028em;line-height:1.1;margin:0 0 .55em} h1{font-size:clamp(34px,5.6vw,60px);letter-spacing:-.035em;line-height:1.03} h2{font-size:clamp(27px,3.7vw,42px);letter-spacing:-.032em} h3{font-size:clamp(19px,2.2vw,23px);letter-spacing:-.02em;line-height:1.24} h4{font-size:17px;line-height:1.34;letter-spacing:-.012em} p{margin:0 0 1.05em} strong{font-weight:700} :focus-visible{outline:3px solid var(--accent-bright);outline-offset:3px;border-radius:3px} ::selection{background:var(--accent-light);color:#141B2B} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .wrap-narrow{max-width:840px;margin:0 auto;padding:0 24px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent-bright);color:#fff;padding:12px 20px;font-weight:700} .skip:focus{left:0} /* ── TYPE UTILITIES ─────────────────────────────────────────── */ .kicker{ font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; font-weight:600;color:var(--accent);margin:0 0 14px;display:block; } .band-dark .kicker,.on-dark .kicker,.hero .kicker,.phero .kicker{color:var(--accent-light)} .lede{font-size:clamp(17.5px,2.1vw,20.5px);line-height:1.55;color:var(--muted)} .muted{color:var(--muted)} .measure{max-width:66ch} .measure-tight{max-width:52ch} .center{text-align:center} .center .measure,.center .measure-tight,.center .lede,.center h2,.center p{margin-left:auto;margin-right:auto} .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} .mono{font-family:var(--mono)} .nowrap{white-space:nowrap} /* ── LAYOUT BANDS ───────────────────────────────────────────── */ section{padding:clamp(58px,7vw,96px) 0} section.tight{padding:clamp(40px,5vw,64px) 0} .band-soft{background:var(--band-soft)} .band-dark{background:var(--band-dark);color:var(--text-on-dark)} .band-plum{background:var(--band-plum);color:var(--text-on-dark)} .band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4, .band-plum h1,.band-plum h2,.band-plum h3,.band-plum h4{color:#fff} .band-dark .muted,.band-plum .muted{color:var(--muted-on-dark)} .band-plum .kicker{color:var(--accent-light)} /* ★ NEVER write `.band-dark a{...}` without excluding buttons. A container anchor rule is specificity (0,1,1) and beats `.btn` at (0,1,0), which repaints every button label inside a dark section and can render a solid button as an empty pill. This cost the TMB build 23 invisible buttons across 13 pages. The :not(.btn) is the whole fix. */ .band-dark a:not(.btn),.band-plum a:not(.btn){color:var(--accent-light)} .band-dark a:not(.btn):hover,.band-plum a:not(.btn):hover{color:#fff} .rule{height:1px;background:var(--line);border:0;margin:0} .band-dark .rule,.band-plum .rule{background:var(--line-on-dark)} /* ── HEADER ─────────────────────────────────────────────────── */ .site-header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .2s ease} .site-header.scrolled{box-shadow:var(--shadow-md)} .hd{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);flex:none} .brand img{width:38px;height:auto;flex:none} .brand .bn{font-weight:800;font-size:17px;line-height:1.05;letter-spacing:-.03em;display:block} .brand .bs{font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:3px;display:block} @media(max-width:430px){ .brand .bn{font-size:13.5px;letter-spacing:-.035em} .hd-cta .btn{padding:10px 12px;font-size:12.5px} } @media(max-width:560px){ .brand .bn{font-size:15px} .brand .bs{display:none} .brand img{width:32px} .hd{min-height:62px} .hd-cta .btn{padding:11px 14px;font-size:13.5px} } .nav{display:flex;align-items:center;gap:2px} .nav a{ color:var(--text);text-decoration:none;font-size:15px;font-weight:600; padding:10px 12px;border-radius:var(--radius);position:relative;white-space:nowrap; } .nav a:hover{background:var(--band-soft);color:var(--text)} .nav a[aria-current="page"]{color:var(--accent)} .nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--accent-bright)} .hd-cta{display:flex;align-items:center;gap:9px;flex:none} .navtoggle{display:none;background:none;border:1px solid var(--line-strong);border-radius:var(--radius);padding:9px 11px;cursor:pointer;color:var(--text)} .navtoggle svg{display:block} .has-sub{position:relative} .has-sub > button{ background:none;border:0;font:inherit;font-size:15px;font-weight:600;color:var(--text); padding:10px 12px;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;gap:6px; font-family:var(--sans);white-space:nowrap; } .has-sub > button:hover{background:var(--band-soft)} .has-sub > button svg{transition:transform .18s ease} .has-sub[data-open="true"] > button svg{transform:rotate(180deg)} .submenu{ position:absolute;top:calc(100% + 6px);left:0;min-width:310px;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); padding:8px;display:none;z-index:70; } .has-sub[data-open="true"] .submenu{display:block} .has-sub[data-open="true"] > button{background:var(--band-soft)} /* ★ THE HOVER BRIDGE. The panel is offset 6px below the trigger for looks, and that 6px strip belongs to neither the button nor the panel. Moving the cursor down from "What we do" crossed it, fired mouseleave on the wrapper, and the menu shut before it could be reached. The only way to use the nav was to click first. This invisible strip is part of .submenu's own hit area, so the pointer never leaves the wrapper on the way down. It is scoped to the desktop layout on purpose: below 1041px the panel is static and an absolutely positioned strip would resolve against the wrong ancestor and sit on top of a tappable link. Paired with the close delay in site.js. Do not remove one without the other. */ @media(min-width:1041px){ .has-sub[data-open="true"] .submenu::before{ content:"";position:absolute;left:0;right:0;top:-10px;height:10px; } } .submenu a{display:block;padding:9px 12px;font-size:14.5px;border-radius:var(--radius);font-weight:700} .submenu a small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:1px;letter-spacing:0} /* Below the nav breakpoint the row is brand + CTA + hamburger. The brand must be allowed to shrink or the row keeps an intrinsic width wider than a phone and pushes the document into horizontal scroll. */ @media(max-width:1040px){ .hd{gap:12px} .brand{flex:1 1 auto;min-width:0} .brand > span{min-width:0} .hd-cta{order:2} .navtoggle{order:3;display:block} .nav{order:4} .nav{ display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface); border-bottom:1px solid var(--line);box-shadow:var(--shadow-lg); flex-direction:column;align-items:stretch;padding:10px 16px 18px;gap:0;max-height:78vh;overflow-y:auto; } .nav.open{display:flex} .nav a{padding:13px 8px;border-bottom:1px solid var(--line);border-radius:0} .nav a[aria-current="page"]::after{display:none} .has-sub{position:static} .has-sub > button{width:100%;justify-content:space-between;padding:13px 8px;border-bottom:1px solid var(--line);border-radius:0} .submenu{position:static;display:none;box-shadow:none;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--band-soft);margin:0 -8px;padding:6px 8px;min-width:0} .has-sub[data-open="true"] .submenu{display:block} .hd-cta .btn-ghost{display:none} } /* ── BUTTONS ────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--cta);color:var(--cta-ink);text-decoration:none; font-family:var(--sans);font-weight:700;font-size:15.5px;line-height:1; padding:15px 26px;border:1.5px solid var(--cta);border-radius:var(--radius); cursor:pointer;transition:background .16s ease,transform .16s ease,box-shadow .16s ease,border-color .16s ease; text-align:center;letter-spacing:-.01em; } .btn:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:var(--cta-ink);transform:translateY(-1px);box-shadow:var(--shadow-md)} .btn:active{transform:translateY(0)} .btn-sm{padding:11px 17px;font-size:14px} .btn-lg{padding:18px 32px;font-size:17px} .btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)} .btn-ghost:hover{background:var(--band-soft);color:var(--text);border-color:var(--accent-bright)} .btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)} .btn-on-dark:hover{background:rgba(255,255,255,.13);color:#fff;border-color:var(--accent-light)} .btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .btn-block{width:100%} .btn[disabled],.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} /* ── HERO ───────────────────────────────────────────────────── */ /* Photographic slots carry a gradient UNDERNEATH the image, so a missing file degrades to a deliberate-looking band instead of a broken box. */ /* WebP via image-set(), 2026-09-06. Each photographic slot keeps its .jpg as the second candidate, so a browser without image-set() support or WebP falls back to the same file it loaded before. */ .shot{background-size:cover;background-position:center;background-repeat:no-repeat} .shot-hero{background-image:image-set(url("../img/columbus-street.webp") type("image/webp"),url("../img/columbus-street.jpg") type("image/jpeg")),linear-gradient(150deg,#0f172a 0%,#482858 55%,#a856a9 100%)} .s-skyline{background-image:url("../img/hero-columbus.jpg"),linear-gradient(150deg,#0f172a,#482858)} .s-neighborhood{background-image:url("../img/neighborhood.jpg"),linear-gradient(150deg,#0f172a,#18ade4)} .s-signpost{background-image:image-set(url("../img/realtor-signpost.webp") type("image/webp"),url("../img/realtor-signpost.jpg") type("image/jpeg")),linear-gradient(150deg,#0f172a,#a856a9)} .s-closing{background-image:image-set(url("../img/closing-desk.webp") type("image/webp"),url("../img/closing-desk.jpg") type("image/jpeg")),linear-gradient(150deg,#241a2e,#a856a9)} .s-shop{background-image:image-set(url("../img/p-bankstatement.webp") type("image/webp"),url("../img/p-bankstatement.jpg") type("image/jpeg")),linear-gradient(150deg,#0f172a,#482858)} .s-modern{background-image:image-set(url("../img/building-modern.webp") type("image/webp"),url("../img/building-modern.jpg") type("image/jpeg")),linear-gradient(150deg,#0f172a,#18ade4)} .hero{position:relative;color:#fff;overflow:hidden;min-height:min(78vh,680px);display:flex;align-items:flex-end} .hero .scrim{ position:absolute;inset:0; background: linear-gradient(to right,rgba(8,12,22,.95) 0%,rgba(8,12,22,.88) 42%,rgba(8,12,22,.55) 74%,rgba(8,12,22,.45) 100%), linear-gradient(to top,rgba(8,12,22,.92) 0%,rgba(8,12,22,0) 55%), radial-gradient(1000px 460px at 88% 12%,rgba(168,86,169,.32),transparent 70%); } .hero .wrap{position:relative;z-index:2;width:100%;padding-top:clamp(76px,10vw,124px);padding-bottom:clamp(42px,5vw,62px)} .hero-copy{max-width:700px} .hero h1{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.55);margin-bottom:20px} .hero h1 em{font-style:normal;color:var(--accent-light)} .hero .lede{color:#DCE2EC;max-width:56ch;text-shadow:0 1px 16px rgba(0,0,0,.6);margin-bottom:28px} .hero-note{margin-top:20px;font-size:13px;color:#B4C0D2;display:flex;align-items:flex-start;gap:9px} .hero-note .dot{width:5px;height:5px;border-radius:50%;background:var(--accent-light);flex:none;margin-top:7px} @media(max-width:820px){.hero{min-height:auto}} /* trust strip riding the hero bottom */ .trust{background:var(--band-dark-2);border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:3} .trust .wrap{display:flex;flex-wrap:wrap;padding:0} .trust .item{ flex:1 1 200px;padding:19px 22px;border-right:1px solid rgba(255,255,255,.1); display:flex;align-items:center;gap:13px;color:#D2DAE7; } .trust .item:last-child{border-right:0} .trust .n{font-size:25px;font-weight:800;color:#fff;line-height:1;flex:none;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .trust .l{font-size:12.5px;line-height:1.35;letter-spacing:.01em} @media(max-width:820px){ .trust .item{flex-basis:50%;border-bottom:1px solid rgba(255,255,255,.1)} .trust .item:nth-child(2n){border-right:0} } @media(max-width:470px){.trust .item{flex-basis:100%;border-right:0}} /* page hero (interior pages) */ .phero{background:var(--band-dark);color:#fff;padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px);position:relative;overflow:hidden} .phero::after{content:"";position:absolute;right:-100px;top:-110px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(168,86,169,.30),transparent 68%);pointer-events:none} .phero .wrap{position:relative;z-index:2} .phero h1{color:#fff;margin-bottom:16px} .phero .lede{color:#C4CEDD;max-width:62ch} .phero .pricetag{ display:inline-flex;align-items:baseline;gap:9px;margin-top:22px;padding:11px 18px; border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);background:rgba(255,255,255,.05); font-family:var(--mono);font-size:14px;color:#E6EBF3; } .phero .pricetag b{font-family:var(--sans);font-size:20px;font-weight:800;letter-spacing:-.03em;color:#fff} /* breadcrumb */ .crumb{font-size:13px;color:var(--muted);padding:13px 0;border-bottom:1px solid var(--line)} .crumb a{color:var(--muted);text-decoration:none} .crumb a:hover{color:var(--accent)} .crumb span{margin:0 7px;opacity:.5} /* ── CARDS & GRIDS ──────────────────────────────────────────── */ .grid{display:grid;gap:22px} .g2{grid-template-columns:repeat(2,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:960px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:26px;box-shadow:var(--shadow-sm); } .card h3{margin-bottom:9px} .card p:last-child{margin-bottom:0} .card-link{text-decoration:none;color:inherit;display:block;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .card-link:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--accent-bright);color:inherit} .card-link .more{color:var(--accent);font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:6px;margin-top:14px} .card-link:hover .more{gap:10px} .band-dark .card,.band-plum .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13);box-shadow:none;color:var(--text-on-dark)} .band-dark .card p,.band-plum .card p{color:var(--muted-on-dark)} /* offer card: the repeated unit for a productized service */ .ocard{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column; text-decoration:none;color:inherit;position:relative;overflow:hidden; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } /* Each card carries one of the six logo colors. --c is the fill, --ci the ink that sits on it. Default purple so an unclassed card is never naked. */ .ocard{--c:var(--c1);--ci:var(--c1i)} .ocard.b1{--c:var(--c1);--ci:var(--c1i)} .ocard.b2{--c:var(--c2);--ci:var(--c2i)} .ocard.b3{--c:var(--c3);--ci:var(--c3i)} .ocard.b4{--c:var(--c4);--ci:var(--c4i)} .ocard.b5{--c:var(--c5);--ci:var(--c5i)} .ocard.b6{--c:var(--c6);--ci:var(--c6i)} .ocard::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c);opacity:1} .ocard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--c);color:inherit} .ocard .oc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} /* The number was 11.5px gray mono and effectively invisible. It is now the card's one piece of color, which is what gives the grid its rhythm. */ .ocard .oc-num{ font-family:var(--sans);font-size:15px;font-weight:800;letter-spacing:0; width:38px;height:38px;border-radius:11px;flex:0 0 38px; display:inline-flex;align-items:center;justify-content:center; background:var(--c);color:var(--ci);text-transform:none; transition:transform .18s ease; } .ocard:hover .oc-num{transform:translateY(-1px) scale(1.06)} .ocard h3{margin-bottom:8px} .ocard p{color:var(--muted);font-size:15.5px;flex:1} .ocard .price{font-family:var(--mono);font-size:13.5px;color:var(--accent);font-weight:600;margin-top:6px} .ocard .more{color:var(--accent);font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;gap:6px;margin-top:14px} .ocard:hover .more{gap:10px} /* feature split */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center} .split.rev .split-media{order:2} .split-media{min-height:400px;border-radius:var(--radius-lg);overflow:hidden} @media(max-width:880px){ .split{grid-template-columns:1fr} .split.rev .split-media{order:0} .split-media{min-height:250px} } /* ── RESPONSIVE SPLIT LAYOUTS ───────────────────────────────── ★ These live here as CLASSES on purpose. Inline styles outrank stylesheet media queries, so a grid-template-columns written into a style attribute can never collapse on a phone. On the TMB build that gave a text column ~6px on a 390px screen and pushed a 340px sidebar off the right edge. NEVER put grid-template-columns in a style attribute. Add a class here instead. */ .pgsplit{grid-template-columns:1fr 340px;gap:44px;align-items:start} @media(max-width:900px){.pgsplit{grid-template-columns:1fr;gap:28px}} .wide-narrow{grid-template-columns:1.35fr 1fr;gap:40px;align-items:start} @media(max-width:880px){.wide-narrow{grid-template-columns:1fr;gap:28px}} .onecol{grid-template-columns:1fr} /* checklist */ .checks{list-style:none;padding:0;margin:0 0 22px} .checks li{position:relative;padding:0 0 11px 30px;font-size:16px} .checks li::before{ content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:50%; background:var(--accent-wash);border:1.5px solid var(--accent-bright); } .checks li::after{ content:"";position:absolute;left:5px;top:12.5px;width:4.5px;height:8px; border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(42deg); } .band-dark .checks li::before,.band-plum .checks li::before{background:rgba(201,143,202,.16);border-color:var(--accent-light)} .band-dark .checks li::after,.band-plum .checks li::after{border-color:var(--accent-light)} .checks.two{columns:2;column-gap:34px} @media(max-width:680px){.checks.two{columns:1}} /* numbered steps */ .steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:20px} .steps li{counter-increment:s;position:relative;padding-left:56px} .steps li::before{ content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px; width:38px;height:38px;border-radius:50%;display:grid;place-items:center; font-family:var(--mono);font-size:12.5px;font-weight:700; background:var(--accent-wash);color:var(--accent);border:1.5px solid var(--accent-bright); } .band-dark .steps li::before,.band-plum .steps li::before{background:rgba(201,143,202,.14);color:var(--accent-light);border-color:var(--accent-light)} .steps li h4{margin:0 0 4px} .steps li p{margin:0;color:var(--muted);font-size:15.5px} .band-dark .steps li p,.band-plum .steps li p{color:var(--muted-on-dark)} /* definition rows */ .deflist{border-top:1px solid var(--line);margin:0;display:block} .defrow{display:grid;grid-template-columns:250px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)} .defrow dt{font-weight:700;font-size:15px} .defrow dd{margin:0;color:var(--muted);font-size:15.5px} @media(max-width:640px){.defrow{grid-template-columns:1fr;gap:4px}} /* stat row */ .statrow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .statrow .st{padding:24px 20px;border-right:1px solid var(--line)} .statrow .st:last-child{border-right:0} .statrow .st .n{font-size:33px;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums} .statrow .st .l{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.4} @media(max-width:780px){ .statrow{grid-template-columns:1fr 1fr} .statrow .st{border-bottom:1px solid var(--line)} .statrow .st:nth-child(2n){border-right:0} } @media(max-width:420px){.statrow{grid-template-columns:1fr}.statrow .st{border-right:0}} /* ── TESTIMONIALS ───────────────────────────────────────────── */ .quote{ background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent-bright); border-radius:0 var(--radius-lg) var(--radius-lg) 0;padding:28px 30px;box-shadow:var(--shadow-sm); display:flex;flex-direction:column; } .quote blockquote{margin:0 0 18px;font-size:18px;line-height:1.55;letter-spacing:-.012em;flex:1} .quote blockquote p:last-child{margin-bottom:0} .quote .hl{background:linear-gradient(transparent 62%,var(--accent-wash) 62%);font-weight:600} .quote .who{display:flex;align-items:center;gap:12px} .quote .av{ width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--accent-wash);color:var(--accent);font-weight:800;font-size:15px;border:1.5px solid var(--accent-bright); } .quote .who b{display:block;font-size:15px} .quote .who span{display:block;font-size:12.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.03em} .band-dark .quote{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);border-left-color:var(--accent-light);box-shadow:none} .band-dark .quote .hl{background:linear-gradient(transparent 62%,rgba(201,143,202,.28) 62%)} .band-dark .quote .av{background:rgba(201,143,202,.16);color:var(--accent-light);border-color:var(--accent-light)} /* ── CALLOUTS ───────────────────────────────────────────────── */ .callout{border-left:3px solid var(--accent-bright);background:var(--accent-wash);padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;margin:0 0 22px;font-size:15.5px} .callout p:last-child{margin-bottom:0} .callout strong{color:var(--text)} .callout.good{border-color:var(--good);background:var(--good-wash)} .callout.warn{border-color:var(--warn);background:var(--warn-wash)} .callout.blue{border-color:var(--blue);background:var(--blue-wash)} .band-dark .callout{background:rgba(255,255,255,.06);border-left-color:var(--accent-light);color:var(--text-on-dark)} .band-dark .callout strong{color:#fff} /* placeholder blocks, deliberately obvious. Nothing here is invented content; every one of these is a slot Shawn has to fill. */ .ph-block{ border:2px dashed var(--line-strong);border-radius:var(--radius-lg);background:repeating-linear-gradient( 45deg,transparent,transparent 9px,var(--band-soft) 9px,var(--band-soft) 18px); padding:24px;text-align:center;color:var(--muted);font-size:14.5px; } .ph-block strong{display:block;color:var(--text);font-size:15px;margin-bottom:5px;font-weight:700} .ph-inline{ display:inline-block;background:var(--band-soft);border:1px dashed var(--line-strong); border-radius:3px;padding:1px 8px;font-family:var(--mono);font-size:.88em;color:var(--muted); } /* ── TABLES ─────────────────────────────────────────────────── */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius-lg)} .dtable{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums;min-width:520px} .dtable caption{text-align:left;padding:16px 18px;font-size:13.5px;color:var(--muted);border-bottom:1px solid var(--line)} .dtable th,.dtable td{padding:12px 18px;text-align:right;border-bottom:1px solid var(--line)} .dtable th{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--surface-2)} .dtable th:first-child,.dtable td:first-child{text-align:left} .dtable tbody tr:last-child td{border-bottom:0} .dtable tbody tr.hi{background:var(--accent-wash)} .dtable tbody tr.hi td{font-weight:700} /* ── PRICING ────────────────────────────────────────────────── */ .plan{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;position:relative; } .plan.feature{border-color:var(--accent-bright);box-shadow:var(--glow)} .plan .tag{ position:absolute;top:-11px;left:24px;background:var(--accent-bright);color:#fff; font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; padding:5px 11px;border-radius:20px;font-weight:600; } .plan h3{margin-bottom:6px} .plan .sub{font-size:14.5px;color:var(--muted);margin-bottom:18px} .plan .amt{font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums} .plan .amt small{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0} .plan .amt-note{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:20px} .plan ul{list-style:none;padding:0;margin:0 0 22px;flex:1} .plan ul li{position:relative;padding:0 0 9px 24px;font-size:15px} .plan ul li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:9px;border:solid var(--accent-bright);border-width:0 2px 2px 0;transform:rotate(42deg)} /* ── FORMS ──────────────────────────────────────────────────── */ .form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-md)} .band-dark .form-card{background:var(--surface);color:var(--text)} .band-dark .form-card h2,.band-dark .form-card h3{color:var(--text)} .band-dark .form-card a:not(.btn){color:var(--accent)} .field{margin-bottom:16px} .field label{display:block;font-size:14px;font-weight:700;margin-bottom:6px;letter-spacing:.005em} .field .req{color:var(--accent);margin-left:2px} .field .optional{color:var(--muted);font-weight:500;margin-left:4px;font-size:12.5px} .field .hint{font-size:12.5px;color:var(--muted);font-weight:400;margin-top:5px;display:block} /* [hidden] is (0,1,0) and loses to .field .hint at (0,2,0), which showed the finder handoff note on every visit. Attribute selectors need re-stating any time a class rule sets display. */ .field .hint[hidden]{display:none} .field input,.field select,.field textarea{ width:100%;font-family:var(--sans);font-size:16px;color:var(--text);background:var(--bg); border:1.5px solid var(--line-strong);border-radius:var(--radius);padding:12px 13px; transition:border-color .15s ease,box-shadow .15s ease; } .field textarea{min-height:112px;resize:vertical;line-height:1.55} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--accent-bright);box-shadow:0 0 0 3px var(--accent-wash); } .field input:invalid:not(:placeholder-shown){border-color:var(--bad)} .field select{ appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6478' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;background-size:12px; } .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.field-row{grid-template-columns:1fr}} .form-legal{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:14px} .form-status{margin-top:14px;padding:14px 16px;border-radius:var(--radius);font-size:14.5px;display:none} .form-status.show{display:block} .form-status.ok{background:var(--good-wash);border-left:3px solid var(--good);color:var(--text)} .form-status.err{background:var(--warn-wash);border-left:3px solid var(--warn);color:var(--text)} /* ═══════════════════════════════════════════════════════════════ BOTTLENECK FINDER The interactive diagnostic. It is a working miniature of what PCS sells, so it gets real engineering, not a decorative widget. ★ HONESTY CONSTRAINT ENCODED IN THE UI. Every number this tool shows is arithmetic on what the visitor typed. There is no industry benchmark, no invented average, no "companies like yours lose $X". The disclaimer under the result says so in plain words and must stay. ═══════════════════════════════════════════════════════════════ */ .finder{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);overflow:hidden;position:relative; } .finder-head{ padding:22px clamp(20px,3vw,30px);border-bottom:1px solid var(--line);background:var(--surface-2); display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; } .finder-head h3{margin:0 0 3px;font-size:20px} .finder-head p{margin:0;font-size:14px;color:var(--muted)} .finder-count{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);white-space:nowrap;text-transform:uppercase} .finder-bar{height:4px;background:var(--line);position:relative;overflow:hidden} .finder-bar i{ position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--accent-bright); transition:width .34s cubic-bezier(.3,.7,.3,1);display:block; } .finder-body{padding:clamp(22px,3.4vw,38px)} .fq{display:none} .fq.on{display:block;animation:fqin .28s ease} @keyframes fqin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .fq > .qtext{font-size:clamp(19px,2.5vw,25px);font-weight:800;letter-spacing:-.028em;line-height:1.22;margin:0 0 6px} .fq > .qhelp{font-size:14.5px;color:var(--muted);margin:0 0 20px} .opts{display:grid;gap:10px;margin:0 0 8px;padding:0;list-style:none} .opt{ display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left; border:1.5px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--bg); padding:15px 17px;cursor:pointer;font:inherit;font-size:15.5px;color:var(--text); transition:border-color .14s ease,background .14s ease,transform .14s ease; } .opt:hover{border-color:var(--accent-bright);transform:translateX(2px)} .opt[aria-pressed="true"]{border-color:var(--accent-bright);background:var(--accent-wash)} .opt .key{ font-family:var(--mono);font-size:11.5px;font-weight:700;flex:none;width:23px;height:23px; border-radius:5px;display:grid;place-items:center;background:var(--band-soft);color:var(--muted); border:1px solid var(--line-strong);margin-top:1px; } .opt[aria-pressed="true"] .key{background:var(--accent-bright);color:#fff;border-color:var(--accent-bright)} .opt .ot b{display:block;font-weight:700;letter-spacing:-.012em} .opt .ot span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.45} .fnum{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:6px} @media(min-width:620px){.fnum{grid-template-columns:1fr 1fr}} .fnum .ctrl-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px} .fnum label{font-size:14px;font-weight:700;margin:0} .fnum .ctrl-val{display:flex;align-items:center;gap:2px} .fnum .ctrl-val .pre,.fnum .ctrl-val .suf{color:var(--muted);font-size:13.5px;font-weight:600;font-family:var(--mono)} .fnum .ctrl-val input{ width:auto;min-width:56px;max-width:110px;font-family:var(--mono);font-size:15.5px;font-weight:700; font-variant-numeric:tabular-nums;text-align:right;background:var(--bg);color:var(--text); border:1.5px solid var(--line);border-radius:var(--radius);padding:5px 8px; } .fnum .ctrl-val input:focus{outline:none;border-color:var(--accent-bright);box-shadow:0 0 0 3px var(--accent-wash)} .fnum .hint{font-size:12.5px;color:var(--muted);margin-top:7px;display:block;line-height:1.45} input[type=range]{ -webkit-appearance:none;appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;margin:0;padding:0;border:0; } input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:linear-gradient(to right,var(--accent-bright) var(--fill,50%),var(--line) var(--fill,50%))} input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--surface); border:2.5px solid var(--accent-bright);margin-top:-7.5px;box-shadow:var(--shadow-sm); transition:transform .12s ease; } input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.14)} input[type=range]::-moz-range-track{height:5px;border-radius:3px;background:var(--line)} input[type=range]::-moz-range-progress{height:5px;border-radius:3px;background:var(--accent-bright)} input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--surface);border:2.5px solid var(--accent-bright);box-shadow:var(--shadow-sm)} input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-wash)} .fnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap} .fback{ background:none;border:0;font:inherit;font-size:14.5px;font-weight:600;color:var(--muted); cursor:pointer;padding:8px 2px;display:inline-flex;align-items:center;gap:7px; } .fback:hover{color:var(--accent)} .fback[hidden]{display:none} .fhint{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.06em} @media(max-width:560px){.fhint{display:none}} /* result */ .fres{display:none} .fres.on{display:block;animation:fqin .34s ease} .fres-verdict{ border:1px solid var(--line);border-left:3px solid var(--accent-bright);border-radius:0 var(--radius-lg) var(--radius-lg) 0; background:var(--accent-wash);padding:22px 24px;margin-bottom:26px; } .fres-verdict .vk{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:7px} .fres-verdict h4{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.03em;margin:0 0 8px;line-height:1.2} .fres-verdict p{margin:0;font-size:15.5px;color:var(--text)} .meters{margin:0 0 26px} .meter{display:grid;grid-template-columns:1fr;gap:5px;padding:13px 0;border-bottom:1px solid var(--line)} .meter:last-child{border-bottom:0} .meter .mtop{display:flex;align-items:baseline;justify-content:space-between;gap:14px} .meter .mname{font-size:15px;font-weight:700;letter-spacing:-.012em} .meter .mval{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .meter .mtrack{height:9px;border-radius:5px;background:var(--band-soft);border:1px solid var(--line);overflow:hidden} .meter .mfill{height:100%;width:0;border-radius:4px;background:var(--accent-bright);transition:width .7s cubic-bezier(.25,.8,.3,1)} .meter.weak .mfill{background:var(--bad)} .meter.weak .mval{color:var(--bad)} .meter.mid .mfill{background:var(--warn)} .meter.strong .mfill{background:var(--good)} .meter.strong .mval{color:var(--good)} .meter .mnote{font-size:13.5px;color:var(--muted);margin-top:2px} .fmath{ background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-lg); padding:22px 24px;margin-bottom:26px; } .fmath h5{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600} .fmath .mrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px} .fmath .mrow:last-of-type{border-bottom:0} .fmath .mrow .lb{color:var(--muted)} .fmath .mrow .vl{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} .fmath .mrow.total{border-top:2px solid var(--text);border-bottom:0;margin-top:6px;padding-top:12px} .fmath .mrow.total .lb{color:var(--text);font-weight:700} .fmath .mrow.total .vl{font-size:18px;color:var(--accent)} .fmath .caveat{font-size:12.5px;color:var(--muted);line-height:1.55;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)} .frec{display:grid;gap:14px;margin-bottom:8px} @media(min-width:760px){.frec{grid-template-columns:1fr 1fr}} .frec .rc{ border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px 22px;background:var(--surface); text-decoration:none;color:inherit;display:block;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .frec .rc:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--accent-bright);color:inherit} .frec .rc .rk{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px} .frec .rc h5{font-size:17.5px;font-weight:800;letter-spacing:-.022em;margin:0 0 6px} .frec .rc p{font-size:14.5px;color:var(--muted);margin:0} .frec .rc .more{color:var(--accent);font-weight:700;font-size:14px;margin-top:11px;display:inline-flex;gap:6px;align-items:center} .factions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} .fdisclaim{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:18px} /* ── FOOTER ─────────────────────────────────────────────────── */ .site-footer{background:var(--band-dark);color:#B2BECF;font-size:14.5px;padding:clamp(46px,5vw,68px) 0 0} .site-footer h4{color:#fff;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;margin:0 0 15px} .site-footer a{color:#CFD8E5;text-decoration:none} .site-footer a:hover{color:var(--accent-light)} .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:38px} @media(max-width:940px){.fgrid{grid-template-columns:1fr 1fr;gap:30px}} @media(max-width:560px){.fgrid{grid-template-columns:1fr}} .fgrid ul{list-style:none;padding:0;margin:0} .fgrid ul li{margin-bottom:9px} .fbrand img{width:74px;margin-bottom:14px;filter:none} .fbrand p{font-size:14px;line-height:1.62;margin:0 0 14px;max-width:38ch} .fbrand .fnap{font-size:13.5px;line-height:1.7;color:#9FADC1} .fbrand .fnap a{color:#CFD8E5} .fsocial{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap} .fsocial a{ width:38px;height:38px;border-radius:var(--radius);display:grid;place-items:center; border:1px solid rgba(255,255,255,.18);color:#CFD8E5;transition:border-color .15s ease,background .15s ease,color .15s ease; } .fsocial a:hover{border-color:var(--accent-light);background:rgba(201,143,202,.14);color:#fff} .fsocial a svg{width:17px;height:17px;display:block} .fsocial a[data-needs]{border-style:dashed;opacity:.6} .fbottom{border-top:1px solid rgba(255,255,255,.13);padding:20px 0;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#8496AC} .fbottom .flinks{display:flex;gap:18px;flex-wrap:wrap} .fbottom a{color:#A9B6C7} /* ── BACK TO TOP ───────────────────────────────────────────── Injected by site.js rather than hand-placed in every HTML file, and injected by JS specifically so it can never render as a dead control with scripting off. */ .totop{ position:fixed;right:20px;bottom:24px;z-index:79; width:46px;height:46px;display:grid;place-items:center;padding:0; background:var(--accent-bright);color:#fff; border:1.5px solid var(--accent-bright);border-radius:50%; cursor:pointer;box-shadow:var(--shadow-md); opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .22s ease,transform .22s ease,visibility .22s, background .16s ease,box-shadow .16s ease; } .totop.show{opacity:1;visibility:visible;transform:none} .totop:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-lg)} .totop:active{transform:translateY(0)} .totop svg{width:19px;height:19px;display:block} /* The header takes programmatic focus after a scroll-to-top so keyboard users land at the top of the document instead of on a button that just hid itself. That focus is a mechanism, not a state worth drawing. */ .site-header:focus{outline:none} @media(max-width:820px){ .totop{right:14px;bottom:calc(18px + env(safe-area-inset-bottom));width:42px;height:42px} .totop svg{width:18px;height:18px} } @media print{.totop,.site-header,.nav{display:none}} /* ── REVEAL ─────────────────────────────────────────────────── ★ FAIL-SAFE BY DESIGN. Content is VISIBLE by default. The hidden state only applies under `html.js`, which an inline script in sets, and site.js additionally force-reveals everything after 1.5s. Never make content depend on JS to be seen. */ .js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.25,.7,.3,1)} .js .rv.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .js .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} *{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ── FAQ / DISCLOSURE ───────────────────────────────────────── */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{ cursor:pointer;list-style:none;padding:19px 44px 19px 0;position:relative; font-size:17px;font-weight:700;letter-spacing:-.018em;line-height:1.35; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:14px;top:50%;width:10px;height:10px; border-right:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:translateY(-70%) rotate(45deg);transition:transform .2s ease; } .faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)} .faq summary:hover{color:var(--accent)} .faq .a{padding:0 44px 22px 0;color:var(--muted);font-size:16px} .faq .a p:last-child{margin-bottom:0} .faq .a strong{color:var(--text)} /* ── MISC ───────────────────────────────────────────────────── */ .pill{ display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase; font-weight:600;padding:5px 11px;border-radius:20px;background:var(--accent-wash);color:var(--accent); border:1px solid var(--accent-bright); } .band-dark .pill{background:rgba(201,143,202,.14);color:var(--accent-light);border-color:var(--accent-light)} .logo-strip{display:flex;gap:clamp(20px,4vw,48px);flex-wrap:wrap;align-items:center;justify-content:center;opacity:.85} .logo-strip span{font-family:var(--mono);font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)} /* ── VIDEO ─────────────────────────────────────────────────── ★ The aspect-ratio and the explicit width/height on the