/* ========================================================================== ACES BAIL BONDS LAS VEGAS — "Dispatch" Direction : the emergency dispatch desk — the lit console staffed while the city sleeps. A live board, not a printed sheet. Tone : urgent / grounded / staffed. Signature : the ANSWER RAIL — a red bar carrying the phone number that anchors the hero and reappears as the spine of every major section, so the call is never more than one glance away. Palette : Vegas night as a COOL near-black — the blue is a cast, not a hue. Structural red. Clean panels. Every pairing computed — see the ratios beside each token. ========================================================================== */ :root{ /* ground — the night, blue not sooty */ --navy:#111319; --navy-2:#191d26; --navy-3:#252a36; /* panels — cool white, matched to the navy */ --paper:#f8f8f9; --paper-2:#ebecef; /* text on navy */ --on-navy:#ffffff; /* 18.96 */ --on-navy-body:#c8ccd4; /* 11.61 */ --on-navy-mute:#929aa7; /* 6.51 */ /* text on paper */ --on-paper:#111319; /* 17.84 */ --on-paper-body:#383e48;/* 10.43 */ --on-paper-mute:#5d6674;/* 5.55 */ /* brand */ --red:#d21a26; /* structural: fills, rails, rules. NOT text on navy */ --red-dk:#a30f1a; /* 7.48 on paper */ --red-lt:#ff6b63; /* 6.80 — red TEXT on navy uses this */ --amber:#ffb340; /* 10.63 — the live signal, used sparingly */ --line-n:rgba(255,255,255,.14); --line-n-soft:rgba(255,255,255,.07); --line-p:rgba(17,19,25,.14); --line-p-soft:rgba(17,19,25,.07); --ease:cubic-bezier(.16,1,.3,1); --bar:60px; /* WEIGHT SCALE — three steps, nothing else. The page read as uniformly bold because 43 of 56 weight declarations were 700 or heavier: every label, caption, nav item, heading and button. Body copy was never the problem (72% of rendered characters are already 400) — the furniture was. Turn these three knobs to retune the whole site. */ --w-head:600; /* display headings — condensed, so 600 already reads solid */ --w-label:600; /* mono labels, nav, inline emphasis, captions */ --w-cta:700; /* buttons, the phone number, the big numerals */ --f-head:'Barlow Condensed',Impact,'Haettenschweiler',sans-serif; --f-body:'Barlow',-apple-system,'Segoe UI',sans-serif; --f-mono:'Barlow Semi Condensed',ui-monospace,monospace; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} html,body{overflow-x:clip} body{ margin:0;background:var(--navy);color:var(--on-navy-body); font-family:var(--f-body);font-size:16.5px;line-height:1.66; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} :focus-visible{outline:3px solid var(--amber);outline-offset:2px} ::selection{background:var(--red);color:#fff} .wrap{width:min(1240px,calc(100% - 44px));margin-inline:auto} .sr{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;z-index:1000;background:var(--amber);color:var(--navy); padding:12px 20px;font:var(--w-label) 14px/1 var(--f-body)} .skip:focus{left:12px;top:12px} /* ══ TOP ALERT STRIP — the live board's status line ═══════════════════════ */ .alert{background:var(--red);color:#fff} .alert .wrap{display:flex;align-items:center;justify-content:center;gap:14px; height:36px;font:var(--w-label) 12.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase} .alert .dot{width:7px;height:7px;border-radius:50%;background:#fff;flex:none; animation:live 1.8s ease-in-out infinite} @keyframes live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}} .alert a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)} @media(max-width:600px){.alert .wrap{font-size:11px;letter-spacing:.08em;gap:9px}} /* ══ NAV BAR ══════════════════════════════════════════════════════════════ */ .bar{position:sticky;top:0;z-index:500;background:rgba(17,19,25,.96); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-n)} .bar .wrap{display:flex;align-items:center;gap:26px;height:var(--bar);position:relative} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none} .brand img{width:42px;height:42px;object-fit:contain;background:#fff;padding:4px 3px;flex:none} .brand b{font:var(--w-cta) 15px/1.1 var(--f-head);letter-spacing:.02em;text-transform:uppercase; color:#fff;display:block} .brand i{font:var(--w-label) 10.5px/1.3 var(--f-mono);font-style:normal;letter-spacing:.2em; text-transform:uppercase;color:var(--on-navy-mute);display:block} /* stretched to the bar's full height so the hover zone of each .nav-i inside it reaches all the way down to where the mega panel begins — see .nav-i below */ .nav{margin-left:auto;display:flex;align-items:center;gap:4px;align-self:stretch} .nav a{font:var(--w-label) 13px/1 var(--f-body);letter-spacing:.03em;text-decoration:none; color:var(--on-navy-body);padding:11px 13px;position:relative; transition:color .2s var(--ease),background-color .2s var(--ease)} @media(hover:hover){.nav a:hover{color:#fff;background:var(--navy-2)}} .nav a[aria-current]{color:#fff} .nav a[aria-current]::after{content:"";position:absolute;left:13px;right:13px;bottom:4px; height:2px;background:var(--red)} /* ── NAV DROPDOWNS ──────────────────────────────────────────────────────── 28 services and 19 areas: too many for a single column, so each opens a grouped mega panel built from the shared arrays in data.php. Opens on hover AND on focus-within (so it is reachable by keyboard with no JS at all); the chevron button is what makes it work on touch, where hover does not exist. The parent link keeps navigating to the index page on its own. .nav-i takes the bar's FULL height, not just the link's own 35px. The panel hangs off the bar (top:100%), so a short .nav-i left a 4.5px strip between the trigger and the panel that belonged to neither: the pointer crossed it on the way down, :hover dropped, and the menu flickered shut just before you reached it. The trigger now overlaps the panel's top edge by 8px instead. */ .nav-i{position:static;display:flex;align-items:center;align-self:stretch} .nav-x{display:grid;place-items:center;width:26px;height:34px;padding:0;cursor:pointer; background:transparent;border:0;color:var(--on-navy-mute);margin-left:-8px; transition:color .2s var(--ease),transform .3s var(--ease)} .nav-x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.6; stroke-linecap:round;stroke-linejoin:round} .nav-x[aria-expanded="true"]{transform:rotate(180deg);color:#fff} @media(hover:hover){.nav-i:hover .nav-x,.nav-x:hover{color:#fff}} .mega{position:absolute;left:0;right:0;top:100%;z-index:6; background:var(--navy-2);border:1px solid var(--line-n);border-top:0; box-shadow:0 30px 64px rgba(0,0,0,.55); opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none; transition:opacity .22s var(--ease) .18s,transform .28s var(--ease) .18s, visibility .22s .18s} /* The panel is far wider than the item it hangs from (the services panel spans the whole 1240px content column from a 108px trigger), so hovering the PANEL has to keep it open too — otherwise moving toward a link in its left column leaves the trigger's hover zone sideways and it closes under the cursor. */ @media(hover:hover){.nav-i:hover .mega,.mega:hover{opacity:1;visibility:visible; transform:none;pointer-events:auto;transition-delay:0s}} .nav-i:focus-within .mega,.mega.open{opacity:1;visibility:visible;transform:none; pointer-events:auto;transition-delay:0s} /* HOVER BRIDGE. The panel is anchored to .bar .wrap and spans the full content column, but its trigger is a ~110px item at the right end of the bar. Moving diagonally toward a link in the panel's LEFT column exits the trigger SIDEWAYS into the empty bar strip — hovering neither trigger nor panel — and the menu closed under the cursor before it ever got down to the links. This invisible strip covers that corridor. It sits inside the panel, so it only exists while the panel does, and it is pointer-events:none until the panel is actually open — otherwise a hidden strip would sit over the bar and eat clicks on the nav links themselves. CRITICAL — it must NOT reach the other nav items. A full-width bridge sat on top of the neighbouring trigger, so with one menu open you could never hover the other: the cursor hit the open panel's bridge instead, which held menu 1 open and menu 2 shut. It therefore stops short of the nav itself (--navw), covering only the empty bar to the LEFT of the nav, which is the only part the diagonal actually crosses. The nav items sit to the right of that and are full bar height already, so they bridge themselves. The fallback matters: with JS off --navw is never published, and a 0px fallback would put the bridge back under the neighbouring trigger. 620px clears the whole nav (measured ~553px incl. the phone button) so the no-JS case degrades to a slightly shorter bridge, never to a broken menu. */ .mega::before{content:"";position:absolute;left:0;bottom:100%; right:var(--navw,620px);height:var(--bar);pointer-events:none} @media(hover:hover){.nav-i:hover .mega::before,.mega:hover::before{pointer-events:auto}} /* the 28-service panel earns the full content column; the 19-area one does not — sized to its two lists and hung under its own nav item instead of stretching across the bar with 740px of dead space beside it */ .mega:not(.mega-w){left:auto;right:0;width:min(560px,calc(100vw - 44px))} .mega-in{padding:26px 30px 22px;display:grid;gap:8px 34px;align-items:start; grid-template-columns:1fr 1fr} /* these columns are
elements, which would otherwise inherit the global section rule's 58–104px of vertical padding */ .mega-in section{padding:0;position:static} .mega-w .mega-in{grid-template-columns:2fr 1fr 1fr} .mega-in h3{font:var(--w-label) 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase; color:var(--amber);margin:0 0 13px;padding-bottom:10px;border-bottom:1px solid var(--line-n)} .mega-in ul{list-style:none;margin:0;padding:0} .mega-in ul.two{display:grid;grid-template-columns:1fr 1fr;gap:0 22px} .mega-in a{display:block;text-decoration:none;padding:6px 0 6px 12px; border-left:2px solid transparent;font:var(--w-label) 13.5px/1.4 var(--f-body); color:var(--on-navy-body); transition:color .18s var(--ease),border-color .18s var(--ease),padding-left .18s var(--ease)} @media(hover:hover){.mega-in a:hover{color:#fff;border-left-color:var(--red);padding-left:16px}} .mega-all{grid-column:1/-1;display:inline-flex;align-items:center;gap:9px; margin-top:12px;padding:14px 0 2px;border-top:1px solid var(--line-n); text-decoration:none;font:var(--w-label) 12px/1 var(--f-mono);letter-spacing:.16em; text-transform:uppercase;color:var(--red-lt);transition:color .18s var(--ease)} .mega-all svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2} @media(hover:hover){.mega-all:hover{color:#fff}} /* the bar's call button — red, always */ .nav .call,.call{display:inline-flex;align-items:center;gap:10px;flex:none;text-decoration:none; background:var(--red);color:#fff;padding:12px 18px;margin-left:10px; font:var(--w-cta) 15px/1 var(--f-head);letter-spacing:.04em; transition:background-color .25s var(--ease)} .call svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;flex:none} @media(hover:hover){.call:hover{background:var(--red-dk)}} .burger{display:none;margin-left:auto;background:var(--navy-2);border:1px solid var(--line-n); color:#fff;width:44px;height:40px;cursor:pointer;padding:0} .burger span{display:block;width:18px;height:2px;background:currentColor;margin:3.5px auto; transition:transform .35s var(--ease),opacity .25s var(--ease)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)} @media(max-width:1080px){ .nav{position:fixed;left:0;right:0;top:calc(var(--bar) + 36px);flex-direction:column; align-items:stretch;gap:0;background:var(--navy-2);border-bottom:3px solid var(--red); padding:6px 22px 18px;margin:0;display:none;max-height:calc(100vh - var(--bar) - 36px); overflow-y:auto} .nav.open{display:flex} .nav>a{padding:15px 0;border-bottom:1px solid var(--line-n-soft);font-size:15px} /* in the drawer the mega panel is an inline accordion, not an overlay */ .nav-i{display:grid;grid-template-columns:1fr auto;align-items:center; align-self:auto;border-bottom:1px solid var(--line-n-soft)} .nav-i>a{padding:15px 0;font-size:15px} .nav-x{width:44px;height:44px;margin:0;color:var(--on-navy-body)} /* pointer-events must be restored here: the desktop rule sets it to none so a faded-out overlay can't swallow clicks, but in the drawer this panel is the real, visible list — leaving it none makes every link untappable. */ .mega{position:static;opacity:1;visibility:visible;transform:none;transition:none; pointer-events:auto;grid-column:1/-1;background:transparent;border:0; box-shadow:none;display:none} .mega.open{display:block} .nav-i:focus-within .mega:not(.open){display:none} /* no overlay here, so no approach corridor to bridge */ .mega::before{display:none} .mega-in{padding:2px 0 16px;grid-template-columns:1fr;gap:14px} .mega-w .mega-in{grid-template-columns:1fr} .mega-in ul.two{grid-template-columns:1fr 1fr;gap:0 16px} .mega-in h3{margin-bottom:9px} .mega-in a{font-size:14px;padding:7px 0 7px 12px} .mega-all{margin-top:6px} .nav .call{margin:14px 0 0;justify-content:center;padding:16px;font-size:18px} .burger{display:block} } /* ══ HEADINGS — heavy condensed, authority not elegance ═══════════════════ Set in the client's own capitalisation, not forced to caps: a full sentence in all-caps at display size reads as shouting, and long question headings are most of this site. Mixed case needs three companion changes — 700 not 800 (caps carry weight that mixed case doesn't need), looser leading for descenders, and tighter tracking (caps need the air, lowercase doesn't). */ h1,h2,h3,h4{margin:0;font-family:var(--f-head);font-weight:var(--w-head);letter-spacing:-.004em; line-height:1.06;color:#fff} .on-paper h1,.on-paper h2,.on-paper h3,.on-paper h4{color:var(--on-paper)} p{margin:0 0 1.1em;max-width:68ch} .on-paper{background:var(--paper);color:var(--on-paper-body)} .on-paper p{color:var(--on-paper-body)} /* the eyebrow: a red tick + condensed caps */ .eyebrow{display:flex;align-items:center;gap:11px;margin:0 0 14px; font:var(--w-label) 12.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase; color:var(--amber)} .eyebrow::before{content:"";width:26px;height:3px;background:var(--red);flex:none} .on-paper .eyebrow{color:var(--red-dk)} .h-sec{font-size:clamp(30px,4.4vw,54px);margin:0 0 18px} .lede{font-size:clamp(16.5px,1.5vw,19px);line-height:1.62;color:var(--on-navy-body);max-width:62ch} .on-paper .lede{color:var(--on-paper-body)} section{padding:clamp(58px,8vh,104px) 0;position:relative} /* anchors have to clear BOTH sticky bars; --jumph is measured in site.js because the jump bar's height depends on how the labels wrap. */ section[id]{scroll-margin-top:calc(var(--bar) + var(--jumph,0px) + 14px)} /* ══ BUTTONS ══════════════════════════════════════════════════════════════ */ .btn{display:inline-flex;align-items:center;gap:11px;text-decoration:none; font:var(--w-cta) 17px/1 var(--f-head);letter-spacing:.04em;padding:17px 26px;border:2px solid transparent; transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease), transform .25s var(--ease)} .btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;flex:none} .btn-red{background:var(--red);color:#fff;border-color:var(--red)} @media(hover:hover){.btn-red:hover{background:var(--red-dk);border-color:var(--red-dk);transform:translateY(-2px)}} .btn-line{border-color:var(--line-n);color:#fff} @media(hover:hover){.btn-line:hover{background:#fff;color:var(--navy);border-color:#fff}} .on-paper .btn-line{border-color:var(--on-paper);color:var(--on-paper)} /* …except inside the inquiry sheet, which stays dark on light sections */ .on-paper .sheet .btn-line{border-color:var(--line-n);color:#fff} @media(hover:hover){.on-paper .sheet .btn-line:hover{background:#fff;color:var(--navy);border-color:#fff}} @media(hover:hover){.on-paper .btn-line:hover{background:var(--navy);color:#fff;border-color:var(--navy)}} .btn-wide{width:100%;justify-content:center} /* ══ HERO — photo-led. The photograph is the ground, not a texture. ══════ */ .hero{position:relative;padding:0;overflow:clip;background:var(--navy); min-height:clamp(600px,82vh,790px);display:flex;align-items:center} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 44%; filter:brightness(1.18) contrast(1.06) saturate(1.1)} /* Scrim: opaque where the words sit, clearing well before the subject so the photograph actually reads. Verified against measured region brightness. */ .hero-bg::after{content:"";position:absolute;inset:0; background: linear-gradient(95deg,rgba(17,19,25,.97) 0%,rgba(17,19,25,.94) 30%, rgba(17,19,25,.72) 46%,rgba(17,19,25,.26) 68%,rgba(17,19,25,.04) 100%), linear-gradient(180deg,rgba(17,19,25,.55) 0%,transparent 26%,transparent 72%,rgba(17,19,25,.62) 100%)} .hero .wrap{position:relative;z-index:1;padding:clamp(44px,7vh,78px) 0} .hero-in{max-width:640px} .hero h1{font-size:clamp(38px,5.6vw,72px);line-height:.94;margin:0 0 14px; text-shadow:0 2px 26px rgba(17,19,25,.75)} .hero h1 .r{color:var(--red-lt);display:block} .hero-sub{font:var(--w-head) clamp(18px,2.05vw,26px)/1.24 var(--f-head);letter-spacing:-.002em; color:var(--amber);margin:0 0 16px; text-shadow:0 2px 18px rgba(17,19,25,.8)} .hero p{color:#e4e8ef;max-width:52ch;font-size:clamp(15.5px,1.4vw,17.5px); text-shadow:0 1px 14px rgba(17,19,25,.85)} /* THE ANSWER RAIL — the signature. Red bar, the number, always present. */ .rail{display:inline-flex;align-items:stretch;background:var(--red);text-decoration:none; color:#fff;margin:24px 0 0;box-shadow:0 18px 46px rgba(210,26,38,.34); transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .rail-i{display:grid;place-items:center;padding:0 20px;background:rgba(0,0,0,.18);flex:none} .rail-i svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:2} .rail-b{padding:14px 26px 15px;min-width:0} .rail-k{font:var(--w-label) 11.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase; color:#fff;display:block;margin-bottom:5px} .rail-n{font:var(--w-cta) clamp(29px,3.7vw,44px)/1 var(--f-head);letter-spacing:.01em;display:block} @media(hover:hover){.rail:hover{transform:translateY(-3px);box-shadow:0 22px 56px rgba(210,26,38,.46)}} @media(max-width:560px){.rail{display:flex}.rail-b{padding-right:16px}} /* trust ticks — one horizontal line, not a six-cell block */ .hero-ticks{display:grid;grid-template-columns:repeat(2,minmax(0,auto)); gap:11px 30px;margin:26px 0 0;padding:0;list-style:none;justify-content:start} @media(max-width:640px){.hero-ticks{grid-template-columns:1fr}} .hero-ticks li{display:flex;align-items:center;gap:8px;font:var(--w-label) 13.5px/1.3 var(--f-body); color:#fff;text-shadow:0 1px 12px rgba(17,19,25,.9)} .hero-ticks li::before{content:"";flex:none;width:15px;height:15px;background:var(--amber); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat} @media(max-width:900px){ /* Portrait: the scrim goes bottom-up so the subject stays visible above the text. */ .hero{min-height:0} .hero-bg img{object-position:66% 24%} .hero-bg::after{background: linear-gradient(180deg,rgba(17,19,25,.42) 0%,rgba(17,19,25,.72) 34%, rgba(17,19,25,.93) 62%,rgba(17,19,25,.97) 100%)} .hero .wrap{padding:clamp(150px,30vh,260px) 0 clamp(34px,5vh,52px)} .hero-in{max-width:none} } /* ══ STAT BAND — hard data under the hero ════════════════════════════════ */ .stats{background:var(--navy-2);border-block:1px solid var(--line-n)} .stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-n-soft)} .stat{background:var(--navy-2);padding:26px 20px;text-align:center} .stat b{display:block;font:var(--w-cta) clamp(26px,3.2vw,40px)/1 var(--f-head);color:#fff;margin-bottom:7px} .stat b em{font-style:normal;color:var(--red-lt)} .stat span{font:var(--w-label) 12px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase; color:var(--on-navy-mute)} @media(max-width:860px){.stats .wrap{grid-template-columns:repeat(2,1fr)}} /* ══ SECTION HEAD ════════════════════════════════════════════════════════ */ .shead{max-width:70ch;margin:0 0 clamp(28px,3.6vh,44px)} .shead.center{margin-inline:auto;text-align:center} .shead.center .eyebrow{justify-content:center} /* ══ CALL LINE ═══════════════════════════════════════════════════════════ The client's CTA sentences are copy, not button labels — as labels they wrapped badly and inherited p{max-width:68ch}, sitting left of centred text. */ .calline{font:var(--w-label) clamp(16px,1.6vw,19px)/1.5 var(--f-body);color:#fff;max-width:70ch} .calline a{color:var(--red-lt);font-weight:var(--w-cta);text-decoration:none; border-bottom:2px solid var(--red);white-space:nowrap; transition:color .2s var(--ease),border-color .2s var(--ease)} @media(hover:hover){.calline a:hover{color:#fff;border-color:#fff}} .on-paper .calline{color:var(--on-paper)} .on-paper .calline a{color:var(--red-dk);border-bottom-color:var(--red)} @media(hover:hover){.on-paper .calline a:hover{color:var(--navy);border-color:var(--navy)}} /* ══ SERVICE TILES ═══════════════════════════════════════════════════════ */ .grid{display:grid;gap:clamp(14px,1.5vw,20px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-auto{grid-template-columns:repeat(var(--gc,3),1fr)} .g-4{grid-template-columns:repeat(4,1fr)} @media(max-width:1000px){.g-3,.g-4,.g-auto{grid-template-columns:repeat(min(var(--gc,3),2),1fr)}} @media(max-width:620px){.g-2,.g-3,.g-4,.g-auto{grid-template-columns:1fr}} .tile{position:relative;display:flex;flex-direction:column;text-decoration:none; background:var(--navy-2);border:1px solid var(--line-n);overflow:hidden; transition:border-color .3s var(--ease),transform .35s var(--ease)} .on-paper .tile{background:#fff;border-color:var(--line-p)} .tile-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--navy-3)} .tile-img img{width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ease);filter:saturate(1.05)} .tile-img::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 45%,rgba(17,19,25,.82) 100%)} .tile-cap{position:absolute;left:0;bottom:0;z-index:1;padding:14px 16px;width:100%} .tile-cap b{font:var(--w-head) clamp(16px,1.7vw,20px)/1.14 var(--f-head);letter-spacing:-.002em; color:#fff;display:block} .tile-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1} .tile-b p{font-size:14.5px;line-height:1.55;color:var(--on-navy-mute);margin:0} .on-paper .tile-b p{color:var(--on-paper-mute)} /* Quiet at rest, red on hover. Fifteen of these on a page at full-strength red — alongside fifteen red title bars — was the "aggressive" reading. */ .tile-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px; font:var(--w-label) 13px/1 var(--f-head);letter-spacing:.09em;text-transform:uppercase; color:var(--on-navy-mute);transition:color .22s var(--ease)} .tile-go svg{color:var(--red-lt)} .on-paper .tile-go{color:var(--on-paper-mute)} .on-paper .tile-go svg{color:var(--red-dk)} @media(hover:hover){ .panel:hover .tile-go,.tile:hover .tile-go{color:var(--red-lt)} .on-paper .panel:hover .tile-go,.on-paper .tile:hover .tile-go{color:var(--red-dk)} } .tile-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6; transition:transform .35s var(--ease)} /* the red edge that grows on hover — one gesture, three coordinated moves */ .tile::after{content:"";position:absolute;left:0;top:0;width:4px;height:0;background:var(--red); transition:height .45s var(--ease)} @media(hover:hover){ .tile:hover{border-color:var(--red);transform:translateY(-4px)} .tile:hover::after{height:100%} .tile:hover .tile-img img{transform:scale(1.06)} .tile:hover .tile-go svg{transform:translateX(5px)} } /* ══ INDEX ROWS — compact, high-density service list ═════════════════════ */ .idx{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-p-soft); border:1px solid var(--line-p)} .on-navy-block .idx{background:var(--line-n-soft);border-color:var(--line-n)} @media(max-width:900px){.idx{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.idx{grid-template-columns:1fr}} .idx a{background:var(--paper);padding:15px 17px;text-decoration:none;display:flex; align-items:center;justify-content:space-between;gap:12px;position:relative; transition:background-color .25s var(--ease),padding-left .35s var(--ease)} .on-navy-block .idx a{background:var(--navy-2)} .idx b{font:var(--w-label) 15px/1.25 var(--f-body);color:var(--on-paper);letter-spacing:0} .on-navy-block .idx b{color:#fff} .idx svg{width:15px;height:15px;stroke:var(--red);fill:none;stroke-width:2.6;flex:none; transition:transform .35s var(--ease)} .on-navy-block .idx svg{stroke:var(--red-lt)} @media(hover:hover){ .idx a:hover{background:var(--red);padding-left:24px} .idx a:hover b{color:#fff} .idx a:hover svg{stroke:#fff;transform:translateX(4px)} } /* ══ STEPS — the process as a numbered console readout ═══════════════════ */ .steps{display:grid;grid-template-columns:repeat(var(--sc,5),1fr);gap:2px;background:var(--line-n-soft)} @media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.steps{grid-template-columns:1fr}} .step{background:var(--navy-2);padding:24px 20px 26px;position:relative} .on-paper .step{background:#fff} .step .step-n{display:block;font:var(--w-cta) clamp(28px,3vw,42px)/1 var(--f-head);color:var(--red); margin-bottom:11px;letter-spacing:.01em} .step h3{font-size:19px;margin:0 0 8px;line-height:1.1} .step p{font-size:14px;line-height:1.55;color:var(--on-navy-mute);margin:0 0 .7em} .on-paper .step p{color:var(--on-paper-mute)} .step p:last-child{margin-bottom:0} /* ══ SPLIT — image beside content, breaks the wall of sections ═══════════ */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,58px);align-items:center} .split.flip>*:first-child{order:2} .split.wide{grid-template-columns:1.22fr .78fr} .split.top{align-items:start} /* the CTA sections are two-column: copy + answer rail on the left, inquiry form on the right. With the form switched off (QF_ENABLED) the right cell is not rendered at all, so the split collapses to a single column rather than leaving an empty half-width gap. Remove nothing here to restore it — the class is emitted only while the form is off. */ .split.solo{grid-template-columns:1fr} .split.solo>*{max-width:none} @media(max-width:920px){.split,.split.wide{grid-template-columns:1fr}.split.flip>*:first-child{order:0}} .split-img{position:relative} .split-img img{width:100%;aspect-ratio:4/3;object-fit:cover} .split-img::after{content:"";position:absolute;left:-14px;bottom:-14px;width:82px;height:82px; border-left:5px solid var(--red);border-bottom:5px solid var(--red);pointer-events:none} /* ══ PANEL — bordered content block ═════════════════════════════════════ */ .panel{background:var(--navy-2);border:1px solid var(--line-n-soft);padding:26px 24px; transition:border-color .25s var(--ease),background-color .25s var(--ease)} .on-paper .panel{background:#fff;border-color:var(--line-p-soft)} @media(hover:hover){ a.panel:hover{border-color:var(--red);background:var(--navy-3)} .on-paper a.panel:hover{background:#fff;border-color:var(--red)} } .panel-t{border-left:3px solid var(--red);padding-left:13px;margin:0 0 18px} /* card body copy uses the BODY token, not the mute one — as the main content of the card it was running at 5.95:1 where the title sat at 17.34 */ .panel>p{color:var(--on-navy-body)} .on-paper .panel>p{color:var(--on-paper-body)} .panel-t h3{font-size:22px;line-height:1.06} /* ticked list — the checkmark list used throughout the client's copy */ .ticks{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:9px} .ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5; color:var(--on-navy-body)} .on-paper .ticks li{color:var(--on-paper-body)} .ticks li::before{content:"";flex:none;width:17px;height:17px;margin-top:3px; background:var(--red); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat} /* ══ SERVICE SECTION TREATMENTS ══════════════════════════════════════════ Sections are typed by what their copy contains (see inc/sections.php) so a cost section, a step sequence and a checklist don't all render as the same grey paragraphs. */ /* ── STICKY SECTION INDEX ───────────────────────────────────────────────── This was a single scrolling row of chips. It could never work: every section label is one of the client's full question headings, and measured across all 47 pages the row ran 2,161–4,276px against a 1,160px column — 7 to 14 chips, never once fitting, with only ~36% of the index on screen at the median. Windows draws a classic (non-overlay) scrollbar, so the leftover was a grey band with arrow buttons welded under the sticky bar. The bar now carries one job per half: LEFT reads out which section you are in, RIGHT opens the whole index as a panel. Fixed height, nothing clipped. */ .jump{position:sticky;top:var(--bar);z-index:400;background:var(--navy-2); border-block:1px solid var(--line-n)} .jump .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto; align-items:center;gap:18px} /* left — where you are */ .jump-now{display:flex;align-items:center;gap:11px;min-width:0;margin:0;padding:14px 0; font:var(--w-label) 13.5px/1.3 var(--f-body);color:#fff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .jump-now .t{overflow:hidden;text-overflow:ellipsis} .jump-lab{flex:none;font:var(--w-label) 10.5px/1 var(--f-mono);letter-spacing:.2em; text-transform:uppercase;color:var(--on-navy-mute)} .jump-now b{flex:none;font:var(--w-label) 11px/1 var(--f-mono);letter-spacing:.1em;color:var(--red-lt)} .jump-now b:empty,.jump-now .t:empty{display:none} /* right — the toggle */ .jump-tog{display:flex;align-items:center;gap:9px;flex:none;cursor:pointer; background:transparent;border:0;border-left:1px solid var(--line-n-soft); padding:15px 0 15px 18px;color:var(--on-navy-body); font:var(--w-label) 12px/1 var(--f-body);letter-spacing:.05em; transition:color .2s var(--ease)} .jump-tog svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)} .jump-tog[aria-expanded="true"] svg{transform:rotate(180deg)} @media(hover:hover){.jump-tog:hover{color:#fff}} /* the index — a static block without JS, an overlay panel with it */ .jump-panel{grid-column:1/-1;border-top:1px solid var(--line-n-soft)} .jump-js .jump-panel{position:absolute;top:100%;left:0;right:0;z-index:5;border-top:0; background:var(--navy-2);border:1px solid var(--line-n); box-shadow:0 30px 64px rgba(0,0,0,.55);max-height:min(64vh,520px);overflow-y:auto} .jump-panel[hidden]{display:none} .jump-panel ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr)); list-style:none;margin:0;padding:0} .jump-panel a{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:start; text-decoration:none;padding:14px 18px; border-bottom:1px solid var(--line-n-soft);border-left:3px solid transparent; font:var(--w-label) 13.5px/1.42 var(--f-body);color:var(--on-navy-body); transition:color .2s var(--ease),background-color .2s var(--ease),border-color .2s var(--ease)} .jump-panel a b{font:var(--w-label) 11px/1.6 var(--f-mono);letter-spacing:.1em;color:var(--red-lt)} @media(hover:hover){.jump-panel a:hover{color:#fff;background:var(--navy-3)}} .jump-panel a.on{color:#fff;background:var(--navy-3);border-left-color:var(--red)} /* scroll-depth hairline along the bottom edge of the bar */ .jump-prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--red); z-index:6;transition:width .1s linear} @media(max-width:640px){ .jump-panel ol{grid-template-columns:1fr} .jump-now{font-size:12.5px;gap:9px} .jump-lab{display:none} .jump-tog{padding-left:14px;font-size:11.5px} } /* section shell */ .sec-h{max-width:64ch;margin:0 0 clamp(22px,3vh,34px)} .sec-h .h-sec{font-size:clamp(26px,3.5vw,42px)} .sec-body{max-width:72ch} .sec-body p{max-width:none} /* FIGURE — the cost moment, borrowed from the homepage's 15% block */ .fig{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(22px,3.5vw,46px); align-items:start} @media(max-width:800px){.fig{grid-template-columns:1fr}} .fig-n{font:var(--w-cta) clamp(64px,11vw,132px)/.86 var(--f-head);color:#fff;letter-spacing:-.01em; padding-right:clamp(18px,3vw,34px);border-right:4px solid var(--red)} .on-paper .fig-n{color:var(--on-paper)} @media(max-width:800px){.fig-n{border-right:0;border-bottom:4px solid var(--red); padding:0 0 12px;display:inline-block}} /* LIST band — the plate that holds an itemised run */ .plate{border:1px solid var(--line-n);background:var(--navy-2);padding:22px 22px 20px} .on-paper .plate{border-color:var(--line-p);background:#fff} .plate .ticks{margin-bottom:0} .plate-h{font:var(--w-label) 12px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase; color:var(--amber);margin:0 0 14px} .on-paper .plate-h{color:var(--red-dk)} /* copy that sits inside the intake card alongside the checklist */ .intake-b h3{font-size:17px;margin:18px 0 8px} .intake-b h4{font-size:15px;margin:14px 0 6px} .intake-b p{font-size:15px;color:var(--on-navy-body);margin:0 0 .9em} /* the card inverts on light sections; its text tokens have to invert with it */ .on-paper .intake-b p{color:var(--on-paper-body)} .on-paper .intake-b p a{color:var(--red-dk)} .on-paper .intake-lead{color:var(--on-paper)} .on-paper .intake-b .ticks li{color:var(--on-paper-body)} .intake-b .ticks{margin-bottom:16px} .idx .idx-x{background:var(--paper);padding:15px 17px;display:block} .on-navy-block .idx .idx-x,section:not(.on-paper) .idx .idx-x{background:var(--navy-2)} .idx .idx-x b{font:var(--w-label) 15px/1.25 var(--f-body);color:var(--on-paper)} section:not(.on-paper) .idx .idx-x b{color:#fff} /* ══ FLOW — a step sequence written as title/description pairs ════════════ A 7-step process was rendering as flat prose because the classifier only recognised NUMBERED headings. The numeral here is generated from the order of the client's own steps; it is never written into their text. */ .flow{list-style:none;margin:0;padding:0;counter-reset:none;position:relative} .flow li{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr); gap:clamp(16px,2.2vw,30px);padding:0 0 clamp(24px,3vh,34px)} .flow li:last-child{padding-bottom:0} /* the spine: a hairline joining the numerals, stopping at the last one */ .flow li::before{content:"";position:absolute;left:35px;top:44px;bottom:0;width:2px; background:var(--line-n)} .on-paper .flow li::before{background:var(--line-p)} .flow li:last-child::before{display:none} .flow-n{position:relative;z-index:1;display:grid;place-items:center; width:70px;height:44px;background:var(--red);color:#fff; font:var(--w-cta) 17px/1 var(--f-mono);letter-spacing:.12em} .flow-b{padding-top:2px;min-width:0} .flow-b h3{font-size:clamp(19px,1.9vw,23px);margin:0 0 8px;line-height:1.14} .flow-b p{margin:0;font-size:15.5px;line-height:1.62;max-width:64ch; color:var(--on-navy-body)} .on-paper .flow-b p{color:var(--on-paper-body)} /* two columns once there is room; the spine only makes sense in one */ @media(min-width:900px){ .flow{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4vw,56px)} .flow li::before{display:none} .flow li{padding-bottom:clamp(26px,3.4vh,38px)} .flow-b h3{font-size:clamp(18px,1.55vw,21px)} } @media(max-width:520px){ .flow li{grid-template-columns:56px minmax(0,1fr);gap:14px} .flow li::before{left:28px} .flow-n{width:56px;height:38px;font-size:15px} } /* ══ INTAKE SHEET ════════════════════════════════════════════════════════ "What information do I need" is a checklist someone works through while standing in a jail car park at 2am — so it behaves like one. Real checkboxes, tickable, pure CSS (:checked), no JS and no storage. */ .intake{background:var(--navy-2);border:1px solid var(--line-n);border-top:4px solid var(--red)} .on-paper .intake{background:#fff;border-color:var(--line-p);border-top-color:var(--red)} .intake-h{background:var(--navy-3);padding:15px 20px;display:flex;align-items:center; justify-content:space-between;gap:12px;font:var(--w-label) 12.5px/1 var(--f-mono);letter-spacing:.18em; text-transform:uppercase;color:#fff} .intake-h b{color:var(--amber);font-weight:var(--w-label)} .intake-b{padding:20px} .intake-lead{font-weight:var(--w-label);color:#fff;margin:0 0 15px;font-size:15.5px} .checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px; background:var(--line-n-soft);border:1px solid var(--line-n-soft); margin:0 0 18px;padding:0;list-style:none;counter-reset:c} @media(max-width:640px){.checks{grid-template-columns:1fr}} .checks li{counter-increment:c;background:var(--navy)} .checks label{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer; font-size:14.5px;line-height:1.35;color:var(--on-navy-body); transition:background-color .25s var(--ease),color .25s var(--ease)} .checks input{position:absolute;opacity:0;width:0;height:0} .checks .box{width:19px;height:19px;flex:none;border:2px solid var(--on-navy-mute); display:grid;place-items:center; transition:background-color .25s var(--ease),border-color .25s var(--ease)} .checks .box svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3.4; opacity:0;transition:opacity .2s var(--ease)} .checks .n{font:var(--w-label) 10.5px/1 var(--f-mono);letter-spacing:.08em;color:var(--on-navy-mute);flex:none} .checks .n::before{content:counter(c,decimal-leading-zero)} .checks input:checked ~ .box{background:var(--red);border-color:var(--red)} .checks input:checked ~ .box svg{opacity:1} .checks input:checked ~ .t{color:var(--on-navy-mute);text-decoration:line-through} .checks input:focus-visible ~ .box{outline:3px solid var(--amber);outline-offset:2px} @media(hover:hover){.checks label:hover{background:var(--navy-3);color:#fff}} .intake-note{font-size:14px;line-height:1.6;color:var(--on-navy-mute);margin:0 0 18px} /* ══ PROSE — long body copy on service / location / legal pages ══════════ */ .prose h2{font-size:clamp(24px,3vw,34px);margin:44px 0 14px;padding-top:20px; border-top:3px solid var(--red);display:inline-block;padding-right:10px} .prose h2:first-child{margin-top:0} .prose h3{font-size:clamp(18px,2vw,22px);margin:28px 0 9px} .prose h4{font-size:16.5px;margin:20px 0 7px} .prose p{margin:0 0 1.05em} .prose>ul{list-style:none;margin:0 0 1.3em;padding:0;display:grid;gap:8px} .prose>ul>li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.58} .prose>ul>li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:3px; background:var(--red)} .prose a{color:var(--red-dk);font-weight:var(--w-label);text-decoration:underline;text-underline-offset:3px} .on-navy-block .prose a{color:var(--red-lt)} /* ══ INNER-PAGE HERO ═════════════════════════════════════════════════════ Compact version of the home hero: breadcrumb, H1, intro, ticks, answer rail beside the service photograph. No full-bleed image — inner pages earn their weight from the copy, and the rail keeps the call one glance away. */ /* ══ INNER-PAGE HERO — the dispatch card ═════════════════════════════════ Was a plain two-column split. Two things were wrong with it. The photo is SQUARE (every service and location image is exactly 1:1) while the text column runs ~800px, so a third of the right column was empty navy — the hole is what made the hero read as weak. And the client's spec lines arrive as bare one-line paragraphs (see ab_hero), so a list was rendering as stacked prose, pushing the phone rail below the fold. Now: lede + a photo cropped to fill its column, the rail directly under the lede, and the spec lines as a ruled board across the full width. */ .svc-hero{padding:clamp(26px,4vh,44px) 0 clamp(40px,5vh,64px);position:relative; background: radial-gradient(1100px 420px at 12% -10%,rgba(210,26,38,.13),transparent 62%), var(--navy)} .hero-g{display:grid;grid-template-columns:1.24fr .76fr;gap:clamp(26px,4vw,56px); align-items:stretch} .hero-t{display:flex;flex-direction:column;min-width:0} .hero-t h1{font-size:clamp(30px,4.5vw,52px);margin:0 0 16px;max-width:24ch} .svc-hero .lede{margin-bottom:.85em} .svc-hero .lede:last-of-type{margin-bottom:0} /* the CTA block is pinned to the bottom of the text column, so the rail and the photo's lower edge line up however long the lede runs */ .hero-cta{margin-top:auto;padding-top:26px} .hero-cta .rail{margin:0} .hero-cta .calline{margin:14px 0 0;font-size:clamp(15px,1.35vw,16.5px); color:var(--on-navy-body);max-width:52ch} /* photo: square source cropped to a portrait plate that fills the column */ .hero-p{margin:0;position:relative;align-self:stretch;display:flex;flex-direction:column} .hero-p picture{flex:1;display:block;min-height:0} .hero-p img{width:100%;height:100%;object-fit:cover;object-position:50% 38%; min-height:300px} /* Corner mark. Anchored to the FIGURE, so it frames the bottom-left corner of the whole photo-plus-caption unit and sits entirely outside it. Anchored to the picture instead, its horizontal arm ran across the caption plate and read as a stray mark rather than a frame. */ .hero-p::after{content:"";position:absolute;left:-13px;bottom:-13px;width:74px;height:74px; border-left:5px solid var(--red);border-bottom:5px solid var(--red);pointer-events:none;z-index:2} .hero-p figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px; background:var(--navy-2);border:1px solid var(--line-n);border-top:0;padding:12px 15px; font:var(--w-label) 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase} .hero-p figcaption span{color:var(--on-navy-mute);min-width:0;overflow:hidden; text-overflow:ellipsis;white-space:nowrap} .hero-p figcaption b{color:var(--amber);flex:none;font-weight:var(--w-label)} /* ── the spec board — the client's own capability lines, as a ruled sheet ── Each cell carries its own hairline + red tick (the eyebrow's mark, repeated) rather than the container carrying rules. Counts here are 5, 6 and 7, so the last row is often short; per-cell marks mean a short row reads as intended instead of leaving a hole, at any column count including the mobile ones. */ .board{--bc:4;list-style:none;margin:clamp(30px,4vh,46px) 0 0;padding:0; display:grid;grid-template-columns:repeat(var(--bc),minmax(0,1fr)); gap:clamp(18px,2.4vw,32px)} .board li{position:relative;padding-top:15px;border-top:1px solid var(--line-n); font:var(--w-label) 14.5px/1.5 var(--f-body);color:var(--on-navy-body)} .board li::before{content:"";position:absolute;left:0;top:-2px;width:30px;height:3px; background:var(--red)} @media(max-width:980px){ .hero-g{grid-template-columns:1fr;gap:28px} .hero-p{order:-1} .hero-p img{aspect-ratio:16/9;height:auto;min-height:0} .hero-p::after{bottom:auto;top:-13px;left:-13px;border-left-width:4px;border-bottom:0; border-top:4px solid var(--red);height:60px;width:60px} .hero-cta{padding-top:22px} } @media(max-width:820px){.board{--bc:2 !important}} @media(max-width:520px){.board{--bc:1 !important}} /* prose sits on paper; give the TOC + body room to breathe */ .prose h2:first-of-type{margin-top:0} .prose .faq{margin-top:14px} /* ══ TABLE ═══════════════════════════════════════════════════════════════ */ .tbl-w{overflow-x:auto;margin:0 0 1.5em;border:1px solid var(--line-n)} .on-paper .tbl-w{border-color:var(--line-p)} table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px} th,td{text-align:left;padding:14px 17px;border-bottom:1px solid var(--line-n-soft)} .on-paper th,.on-paper td{border-color:var(--line-p-soft)} th{font:var(--w-label) 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase; background:var(--red);color:#fff;white-space:nowrap;border-bottom:0} td{color:var(--on-navy-body)} .on-paper td{color:var(--on-paper-body)} td:first-child{color:#fff;font-weight:var(--w-label)} .on-paper td:first-child{color:var(--on-paper)} tr:last-child td{border-bottom:0} td a{color:var(--amber);text-decoration:none;font-weight:var(--w-label);white-space:nowrap} .on-paper td a{color:var(--red-dk)} /* ══ REVIEWS ═════════════════════════════════════════════════════════════ */ .rev{background:var(--navy-2);border:1px solid var(--line-n);border-top:4px solid var(--red); padding:24px 22px;display:flex;flex-direction:column;margin:0} .on-paper .rev{background:#fff;border-color:var(--line-p);border-top-color:var(--red)} .rev-s{display:flex;gap:3px;margin:0 0 13px} .rev-s svg{width:17px;height:17px;fill:var(--amber)} .rev p{font-size:15.5px;line-height:1.6;color:#fff;margin:0 0 15px} .on-paper .rev p{color:var(--on-paper)} .rev cite{margin-top:auto;font:var(--w-label) 13px/1 var(--f-mono);letter-spacing:.14em; text-transform:uppercase;font-style:normal;color:var(--red-lt)} .on-paper .rev cite{color:var(--red-dk)} /* ══ FAQ ═════════════════════════════════════════════════════════════════ */ .faq{--qc:1fr;border-top:1px solid var(--line-p)} .on-navy-block .faq{border-color:var(--line-n)} .faq details{border-bottom:1px solid var(--line-p)} .on-navy-block .faq details{border-color:var(--line-n)} /* A FAQ question is reading text, not a display heading — condensed 800 in all caps shouted a full sentence across the column. Body face, semibold, sentence case: still clearly the question, one step quieter than .h-sec. */ .faq summary{display:grid;grid-template-columns:var(--qc) 34px;gap:16px;align-items:center; padding:20px 0;cursor:pointer;list-style:none; font:var(--w-label) clamp(16.5px,1.5vw,19px)/1.42 var(--f-body);letter-spacing:-.004em; color:var(--on-paper);transition:color .22s var(--ease)} .on-navy-block .faq summary{color:#fff} .faq summary::-webkit-details-marker{display:none} .faq .pl{width:26px;height:26px;justify-self:end;position:relative;flex:none; background:var(--red);transition:transform .4s var(--ease)} .faq .pl::before,.faq .pl::after{content:"";position:absolute;left:50%;top:50%;background:#fff; transform:translate(-50%,-50%)} .faq .pl::before{width:12px;height:2.5px} .faq .pl::after{width:2.5px;height:12px;transition:opacity .3s var(--ease)} .faq details[open] .pl{transform:rotate(180deg)} .faq details[open] .pl::after{opacity:0} @media(hover:hover){.faq summary:hover{color:var(--red-dk)} .on-navy-block .faq summary:hover{color:var(--red-lt)}} .faq-a{display:grid;grid-template-columns:var(--qc) 34px;gap:16px;padding:0 0 20px} .faq-a p{margin:0;font-size:15.5px;line-height:1.6} .faq details[open] .faq-a{animation:fs .45s var(--ease)} @keyframes fs{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} /* ══ LEGAL DOCUMENTS ══════════════════════════════════════════════════════ Privacy Policy and Terms: 17 headings and 70–130 paragraphs each. These get a reading layout, not the marketing treatments — one measured column, a sticky numbered contents rail, and nothing competing with the text. */ .legal-hero{padding:clamp(30px,4.5vh,52px) 0 clamp(30px,4vh,46px); background:var(--navy);border-bottom:1px solid var(--line-n)} .legal-hero h1{font-size:clamp(28px,3.8vw,46px);margin:0 0 14px;max-width:22ch} .legal-hero .lede{max-width:70ch} .legal{padding:clamp(40px,5vh,68px) 0 clamp(52px,7vh,90px)} .legal-g{display:grid;grid-template-columns:250px minmax(0,1fr); gap:clamp(28px,4vw,64px);align-items:start} .legal-toc{position:sticky;top:calc(var(--bar) + 22px)} .legal-toc-h{font:var(--w-label) 11px/1 var(--f-mono);letter-spacing:.22em; text-transform:uppercase;color:var(--red-dk);margin:0 0 14px; padding-bottom:11px;border-bottom:2px solid var(--red)} .legal-toc ol{list-style:none;margin:0;padding:0; max-height:calc(100vh - var(--bar) - 120px);overflow-y:auto} .legal-toc a{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px; text-decoration:none;padding:7px 0;font:var(--w-label) 13px/1.4 var(--f-body); color:var(--on-paper-mute);transition:color .2s var(--ease)} .legal-toc a b{font:var(--w-label) 10.5px/1.5 var(--f-mono);letter-spacing:.1em;color:var(--red-dk)} @media(hover:hover){.legal-toc a:hover{color:var(--on-paper)}} .legal-b{max-width:74ch} .legal-s{padding:0;margin:0 0 clamp(30px,4vh,44px);scroll-margin-top:calc(var(--bar) + 20px)} .legal-s:last-of-type{margin-bottom:0} .legal-s h2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:baseline; font-size:clamp(21px,2.2vw,27px);line-height:1.14;margin:0 0 14px; padding-bottom:13px;border-bottom:1px solid var(--line-p)} .legal-s h2 span{font:var(--w-label) 12px/1 var(--f-mono);letter-spacing:.12em;color:var(--red-dk)} .legal-s h3{font-size:17px;margin:22px 0 9px} .legal-b .prose p{font-size:15.5px;line-height:1.7;max-width:none} .legal-b .prose ul{margin:0 0 1.2em} @media(max-width:1000px){ .legal-g{grid-template-columns:1fr;gap:26px} .legal-toc{position:static;border:1px solid var(--line-p);padding:18px 20px;background:#fff} .legal-toc ol{max-height:none;columns:2;column-gap:26px} .legal-toc li{break-inside:avoid} } @media(max-width:620px){.legal-toc ol{columns:1}} /* ══ CTA STRIP ═══════════════════════════════════════════════════════════ */ .cta{background:var(--red);color:#fff;padding:clamp(40px,6vh,68px) 0} .cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px} .cta h2{font-size:clamp(28px,4vw,48px);line-height:.98;color:#fff;max-width:19ch} .cta p{color:#fff;margin:10px 0 0;max-width:46ch;font-size:16px} .cta .btn{background:#fff;color:var(--red);border-color:#fff;font-size:21px;padding:19px 30px} @media(hover:hover){.cta .btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}} /* ══ FORM ════════════════════════════════════════════════════════════════ */ .sheet{background:var(--navy-2);border:1px solid var(--line-n);border-top:4px solid var(--red)} .sheet-h{background:var(--navy-3);padding:16px 22px;display:flex;justify-content:space-between; align-items:center;gap:12px;font:var(--w-label) 12.5px/1 var(--f-mono);letter-spacing:.18em; text-transform:uppercase;color:#fff} .sheet-h span:last-child{color:var(--amber)} .sheet-b{padding:24px 22px 26px} .f-g{display:grid;grid-template-columns:1fr 1fr;gap:16px 16px} .f-f{display:flex;flex-direction:column;gap:6px} .f-f.wide{grid-column:1/-1} .f-f label{font:var(--w-label) 11.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase; color:var(--on-navy-mute);transition:color .22s var(--ease)} .f-f:focus-within label{color:var(--amber)} .f-f input,.f-f textarea{background:var(--navy);border:1px solid var(--line-n);color:#fff; font:400 15.5px/1.5 var(--f-body);padding:11px 13px;width:100%;border-radius:0; transition:border-color .25s var(--ease),background-color .25s var(--ease)} .f-f textarea{resize:vertical;min-height:84px} .f-f input:focus,.f-f textarea:focus{outline:0;border-color:var(--red);background:var(--navy-3)} .f-f input::placeholder,.f-f textarea::placeholder{color:#7d8ba3} .f-note{font-size:13px;line-height:1.55;color:var(--on-navy-mute);margin:16px 0 0;max-width:none} /* The inquiry sheet is dark on EVERY ground, so the light-section text tokens must not reach inside it — `.on-paper p` out-ranks `.f-note` on its own. */ .on-paper .sheet p{color:var(--on-navy-body)} .on-paper .sheet .f-note{color:var(--on-navy-mute)} .f-sub{margin-top:18px;display:grid;gap:11px} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .f-msg{margin-top:14px;font-size:14.5px;line-height:1.55} .f-msg .error{color:var(--red-lt);margin:0} .f-msg .success{color:var(--amber);margin:0} @media(max-width:620px){.f-g{grid-template-columns:1fr}} /* ══ MAP ═════════════════════════════════════════════════════════════════ */ .map{border:1px solid var(--line-n);line-height:0} .on-paper .map{border-color:var(--line-p)} .map iframe{width:100%;height:min(420px,52vh);border:0;filter:grayscale(.7) contrast(1.1); transition:filter .5s var(--ease)} @media(hover:hover){.map:hover iframe{filter:none}} /* ══ WEATHER WIDGET (client-supplied embed) ══════════════════════════════ The widget injects its own