:root{ --font-body:'Figtree',system-ui,sans-serif; --font-head:'Bricolage Grotesque',system-ui,sans-serif; --font-brand:'Bricolage Grotesque',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --blue-900:#071F52; --blue-800:#0A3684; --blue-700:var(--brand-1); --blue-600:var(--brand-1); --aqua:var(--brand-2); --aqua-light:var(--brand-2); --orange-ink:#B24A00; /* orange that passes AA on the light grounds */ --sand:#E2E8FA; --white:#F1F4FD; /* cool ground: cards stay pure white on it */ --ink:#0A1735; --muted:#526082; --line:#D3DBF1; --panel-dark:#0C2A6B; --cut:16px; --radius:4px; --shadow:0 24px 44px -26px rgba(7,31,82,.6); --grad-accent:var(--brand-2); --grad-ic:rgba(14,72,169,.08); --hero-overlay: radial-gradient(circle at 91% 40%,#FFE129 0 64px,transparent 65px), radial-gradient(circle at 91% 40%,var(--brand-2) 0 176px,transparent 177px), repeating-radial-gradient(circle at 91% 40%,transparent 0,transparent 59px,rgba(255,255,255,.11) 59px,rgba(255,255,255,.11) 60px), linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/44px 44px, linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/44px 44px; --chip-bg:#DCE3F8; --chip-fg:#071F52; --chip-active-bg:var(--brand-2); --chip-active-fg:#071F52; --h1-size:clamp(2.2rem,4.5vw,3.6rem); --brand-size:1.12rem; } /* below 960px the hero is one column: no sun (it would sit behind the orange CTA), rings and grid only */ @media(max-width:960px){:root{--hero-overlay: repeating-radial-gradient(circle at 100% 0,transparent 0,transparent 59px,rgba(255,255,255,.11) 59px,rgba(255,255,255,.11) 60px), linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/44px 44px, linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/44px 44px}} /* PV-cell corners */ .btn{--cut:10px;border-radius:0} .sp-fbtn{--cut:12px;border-radius:0!important} .card,.svc,.gal-item,.contact-form,.about-media,.btn,.sp-fbtn,.brand .mark{ clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))} .card,.svc,.about-media,.contact-form{border-radius:0} .svc{border:1px solid var(--line)} /* type */ h1,h2,h3,h4{letter-spacing:-.02em} p.eyebrow{font-family:var(--font-mono);font-weight:500;letter-spacing:.1em;color:var(--orange-ink)} .gallery p.eyebrow,.contact p.eyebrow,.watch p.eyebrow{color:var(--brand-2)} .stat b{font-family:var(--font-head);font-size:2.6rem} .stat span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase} .about-copy .mission{border-left-color:var(--brand-2)} h2{font-weight:700} .about-copy h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.5rem 0 1rem} .shop .sec-head{max-width:780px} .gal-item,.map,.shop-note,.lightbox img{border-radius:0} /* buttons: navy on orange (white on #F68827 fails contrast) */ .btn-primary{color:var(--blue-900)!important;box-shadow:none} .btn-primary:hover{filter:brightness(1.07)} .btn-ghost{border-color:rgba(255,255,255,.7)} .field input,.field textarea{border-radius:4px} /* nav lockup: the logo has an opaque white ground, so it sits on a plate */ .brand .mark{width:46px;height:46px;background:#fff;box-shadow:none;--cut:9px} .brand .mark img{width:36px;height:36px;object-fit:contain} /* services: numbered, icon-only */ .svc-grid{counter-reset:svc} .svc{counter-increment:svc} .svc-body{position:relative} .svc-body .ic{margin-top:0;background:var(--grad-ic);box-shadow:none;border-radius:0} .svc-body:after{content:counter(svc,decimal-leading-zero);position:absolute;right:22px;top:24px;font-family:var(--font-mono);font-size:.72rem;color:var(--muted)} .svc a.more,.svc .more{color:var(--brand-1)!important;font-family:var(--font-mono);font-weight:500;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase} /* the flow: every section hands on to the next one */ .st-next{display:flex;justify-content:flex-end;margin-top:36px} .st-next a:after{content:" \2192"} .st-next a{font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-1)!important;border-bottom:2px solid var(--brand-2);padding-bottom:3px} .gallery .st-next a,.watch .st-next a{color:#fff!important} /* brands strip is typographic (no partner logo files supplied) */ .brand-row .bn{font-family:var(--font-head);font-weight:700;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-800)} .brand-row .bn.sm{font-size:.95rem;font-weight:600;color:var(--muted)}