/* ========================================================================= LEAD GROUP — DESIGN SYSTEM (V1 "Cinematic Duotone": gold on near-black) ========================================================================= */ :root{ --bg:#fafaf8; /* paper */ --bg2:#f2f1ec; /* alternating section */ --surface:#ffffff; /* cards / panels */ --surface2:#f4f3ee; /* raised */ --ink:#14161a; /* headings */ --text:#3c4148; /* body */ --muted:#5f656d; /* secondary */ --line:rgba(20,22,26,.13); --line-strong:rgba(20,22,26,.22); --accent:#2f6f6a; /* teal */ --accent-light:#3d8a83; --accent-ink:#ffffff; /* text on teal */ /* One family throughout. Playfair Display is banned (Solar Surveys' identity) and Anton was the display face that read as cheap. */ --font-display:'Montserrat',system-ui,sans-serif; --font-serif:'Montserrat',system-ui,sans-serif; --font-head:'Montserrat',system-ui,sans-serif; --font-body:'Montserrat',system-ui,sans-serif; --font-mono:'DM Mono',ui-monospace,monospace; --glow:rgba(47,111,106,.16); /* The hero stays dark whatever the page does. */ --hero:#0f1413; --maxw:1240px; --radius:0; /* square, per the agreed button style */ --ease:cubic-bezier(.165,.84,.44,1); --t:.4s var(--ease); } *{margin:0;padding:0;box-sizing:border-box} a{text-decoration:none;color:inherit} html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%} body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%} ::selection{background:var(--accent);color:var(--accent-ink)} .mono{font-family:var(--font-mono)} /* ---------- TYPE ---------- */ h1,h3,h4{color:var(--ink);line-height:1.08;letter-spacing:-.02em;font-weight:800} h2{font-family:var(--font-display);color:var(--ink);font-weight:800;font-size:clamp(2.1rem,3.8vw,3.4rem);line-height:1.08;letter-spacing:-.01em;margin-bottom:1rem} h2 .gi{font-weight:800;color:var(--accent)} /* numbered drafting kicker */ .kick{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.2rem} .kick .no{color:var(--ink);font-weight:500} .kick::after{content:"";flex:1;min-width:2.5rem;height:1px;background:var(--line)} /* dimension divider between sections */ .dimdiv{display:flex;align-items:center;gap:1rem;color:var(--muted);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:0 3vw;max-width:var(--maxw);margin:0 auto} .dimdiv::before,.dimdiv::after{content:"";height:1px;background:var(--line);flex:1} .dimdiv .t{color:var(--accent)} h3{font-family:var(--font-body);font-weight:600;font-size:1.22rem;letter-spacing:-.01em} /* Card and step sub-headings. These were h4 under an h2, which skips a level for anyone navigating by heading; the tag is now h3 and this rule keeps the original weight and size so nothing moves visually. */ .sh{font-family:var(--font-body);font-weight:800;font-size:1rem;line-height:1.08;letter-spacing:-.02em} p{color:var(--text);font-size:1.02rem;line-height:1.75;margin-bottom:1rem;max-width:68ch} strong{color:var(--ink);font-weight:600} .lede{font-size:1.12rem;line-height:1.7;color:var(--text);max-width:62ch} .text-muted{color:var(--muted)} .eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.1rem} .eyebrow::before{content:"";width:2rem;height:1px;background:var(--accent)} .eyebrow.center{justify-content:center} /* ---------- LAYOUT ---------- */ .container{max-width:var(--maxw);margin:0 auto;padding:0 3vw} .narrow{max-width:860px;margin:0 auto;padding:0 3vw} .sec{padding:6.5rem 0;position:relative} .sec.alt{background:var(--bg2)} .sec-head{max-width:740px;margin-bottom:3rem} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .grid{display:grid;gap:1.2rem} .two{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start} /* ---------- BUTTONS ---------- */ .btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);font-weight:600;font-size:.92rem;padding:.95rem 1.8rem;border-radius:var(--radius);border:1px solid var(--line-strong);color:var(--ink);transition:var(--t);cursor:pointer;white-space:nowrap} .btn:hover{border-color:var(--accent);color:var(--accent)} .btn.s{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn.s:hover{background:var(--accent-light);color:var(--accent-ink);transform:translateY(-2px)} .btnrow{display:flex;gap:1rem;flex-wrap:wrap} /* ---------- NAV ---------- */ .navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(250,250,248,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:background .3s,border-color .3s} .navbar.scrolled{background:rgba(250,250,248,.97);border-bottom-color:var(--line)} .nav-inner{max-width:1320px;margin:0 auto;padding:0 3vw;height:70px;display:flex;align-items:center;justify-content:space-between} .brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none} .brand-mark{height:30px;width:auto;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s} .brand:hover .brand-mark{transform:translateY(-2px)} .brand-word{font-family:var(--font-head);font-weight:900;font-size:1.22rem;color:#fff;letter-spacing:.01em;line-height:1;text-transform:uppercase} .brand-word .a{color:var(--accent)} .nav-links{display:flex;align-items:center;gap:.3rem;list-style:none} .nav-links>li>a{font-size:.88rem;font-weight:500;color:var(--text);padding:.5rem .8rem;border-radius:var(--radius);display:inline-flex;align-items:center;gap:.35rem;transition:color .2s} .nav-links>li>a:hover{color:var(--accent)} .nav-cta{margin-left:.5rem} .has-dd{position:relative} .has-dd>a::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.6} .dd{position:absolute;top:calc(100% + 8px);left:0;min-width:300px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 60px rgba(0,0,0,.5);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;list-style:none} .has-dd:hover .dd,.has-dd.open .dd{opacity:1;visibility:visible;transform:translateY(0)} .dd a{display:block;padding:.55rem .8rem;font-size:.88rem;font-weight:500;color:var(--ink);border-radius:var(--radius);transition:.18s} .dd a:hover{background:var(--surface2);color:var(--accent)} .dd a span{display:block;font-size:.74rem;font-weight:400;color:var(--muted);margin-top:1px} .nav-mob{display:none} .burger{display:none;background:none;border:none;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;padding:.3rem .55rem;border-radius:var(--radius);transition:color .2s,background .2s} .burger:hover,.burger.is-open{color:var(--accent)} body.nav-locked{overflow:hidden} /* ---------- HOME HERO (video + duotone + giant type) ---------- */ .hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end} .herovid,.heroposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .herovid{filter:grayscale(.35) contrast(1.08) brightness(.62)} .duo{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,20,19,.78),rgba(15,20,19,.34) 30%,rgba(15,20,19,.5) 62%,var(--bg))} .duo2{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 70% 18%,rgba(47,111,106,.22),transparent 58%)} .hero-inner{position:relative;z-index:4;width:100%;max-width:1320px;margin:0 auto;padding:8rem 3vw 2.6rem} .hero-eyebrow2{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.3rem} .hero-eyebrow2::before{content:"";width:2rem;height:1px;background:var(--accent)} .hero-giant{font-family:var(--font-display);text-transform:uppercase;line-height:.88;font-size:clamp(2.5rem,8.5vw,7.4rem);color:#fff;letter-spacing:.005em;margin-bottom:1.5rem} .hero-giant .o{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.78)} .hero-sub{max-width:54ch;color:rgba(255,255,255,.85);font-size:1.05rem;line-height:1.6;margin-bottom:1.9rem} .hero-sub strong{color:#fff;font-weight:600;display:block;font-size:1.18rem;margin-bottom:.4rem} .hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem} .hero-strip{display:flex;justify-content:space-between;gap:.8rem 2rem;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:1.3rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)} /* ---------- PAGE HERO (inner pages) ---------- */ .phero{position:relative;padding:9rem 0 4rem;background:var(--bg2);border-bottom:1px solid var(--line);overflow:hidden} .phero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 90% at 100% 0%,#000,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 90% at 100% 0%,#000,transparent 70%)} .phero .container{position:relative} /* Image-backed page hero. Service and topic pages opened with a text-only band on every one of 161 pages, which read as the same dark strip repeated before the content started. Where a relevant project photograph exists the hero carries it, darkened enough to hold white text at AA contrast. */ .phero.has-img{background:#0e1014;border-bottom:0} .phero.has-img .pbg{position:absolute;inset:0;z-index:0} .phero.has-img .pbg img{width:100%;height:100%;object-fit:cover;opacity:.42} .phero.has-img::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(14,16,20,.55) 0%,rgba(14,16,20,.72) 55%,rgba(14,16,20,.92) 100%)} .phero.has-img .container{z-index:2} .phero.has-img h1,.phero.has-img .lede,.phero.has-img .crumb,.phero.has-img .crumb a{color:#fff} .phero.has-img .lede{color:rgba(255,255,255,.86)} .phero.has-img .crumb a{opacity:.8} .phero.has-img::before{opacity:.35} .phero h1{font-family:var(--font-head);font-weight:900;font-size:clamp(2.4rem,4.6vw,4rem);max-width:18ch;margin-bottom:1.2rem} .crumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem} .crumb a:hover{color:var(--accent)} /* ---------- CARDS ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;transition:transform .3s,border-color .3s,background .3s;position:relative;overflow:hidden;display:block} .card:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--surface2)} .card .num{font-family:var(--font-mono);font-size:.74rem;color:var(--accent);letter-spacing:.05em} .card h3{margin:.6rem 0 .5rem;color:var(--ink)} .card p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:0} .card .go{display:inline-block;margin-top:1rem;font-size:.85rem;color:var(--ink);font-weight:500} .card:hover .go{color:var(--accent)} .card.feat::after{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:var(--accent);transition:width .45s var(--ease)} .card.feat:hover::after{width:100%} /* sub-service chips list */ .subs{display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem 2rem;margin-top:1.5rem} .subs li{list-style:none;border-bottom:1px solid var(--line);padding:.85rem 0;display:flex;justify-content:space-between;gap:1rem;color:var(--text);font-size:.97rem} .subs li::after{content:"\2197";color:var(--accent);opacity:.7} /* ---------- PREMIUM: cursor glow + shimmer border (driven by main.js LERP) ---------- */ .premium-glow{position:relative;overflow:hidden} .premium-glow::before{content:"";position:absolute;top:var(--mouse-y,50%);left:var(--mouse-x,50%);width:420px;height:420px;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--glow),transparent 68%);opacity:0;transition:opacity .45s var(--ease);pointer-events:none;z-index:1} .premium-glow:hover::before{opacity:1} .premium-shimmer{position:relative} .premium-shimmer::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(130deg,transparent 20%,var(--accent),transparent 80%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s var(--ease);pointer-events:none} .premium-shimmer:hover::after{opacity:.7} .btn-magnetic{transform:translate(var(--mx,0),var(--my,0))} /* ---------- CAPABILITY TAG STRIP ---------- */ .tagstrip{display:flex;flex-wrap:wrap;gap:.55rem} .tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);border:1px solid var(--line);border-radius:100px;padding:.5rem 1rem;transition:.25s} .tag:hover{border-color:var(--accent);color:var(--accent)} /* ---------- IMAGE-BACKED BENTO ---------- */ .bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:230px;gap:1rem;grid-auto-flow:dense} .bcard{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem;isolation:isolate;box-shadow:0 10px 34px rgba(0,0,0,.32);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s} .bcard:hover{transform:translateY(-5px);border-color:var(--line-strong)} .bcard .bg{position:absolute;inset:0;z-index:-2} .bcard .bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.1) brightness(.66) saturate(1.05);transition:transform .8s var(--ease),filter .5s} .bcard:hover{box-shadow:0 30px 70px rgba(0,0,0,.55)} .bcard:hover .bg img{transform:scale(1.07);filter:grayscale(0) contrast(1.12) brightness(.78) saturate(1.1)} .bcard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,9,12,.95) 0%,rgba(8,9,12,.5) 42%,rgba(8,9,12,.12) 80%,rgba(8,9,12,.3) 100%)} .bcard .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem} .bcard h3{color:#fff;font-size:1.3rem;margin-bottom:.45rem} .bcard p{color:rgba(255,255,255,.78);font-size:.92rem;line-height:1.55;margin:0;max-width:42ch} .bcard .go{margin-top:1rem;font-size:.84rem;color:#fff;font-weight:500;display:inline-flex;gap:.4rem} .bcard:hover .go{color:var(--accent)} .bcard.lg{grid-column:span 2;grid-row:span 2} .bcard.lg h3{font-size:1.9rem} .bcard.lg p{font-size:1rem;max-width:48ch} .bcard.tall{grid-row:span 2} .bcard .topk{position:absolute;top:1.3rem;left:1.6rem;z-index:1;font-family:var(--font-mono);font-size:.72rem;color:rgba(255,255,255,.6)} /* drawing-sheet title block on cards (Lead Group signature) */ .bcard .sheet{position:absolute;top:1.1rem;left:1.5rem;right:1.5rem;z-index:1;display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)} .bcard .sheet .ix{color:var(--accent)} .bcard .sheet .rule{flex:1;height:1px;background:rgba(255,255,255,.22)} .bcard .tick{position:absolute;width:10px;height:10px;z-index:1;pointer-events:none} .bcard .tick.br{bottom:1.1rem;right:1.5rem;border-bottom:1.5px solid var(--accent);border-right:1.5px solid var(--accent)} .scard .tick{position:absolute;top:1rem;right:1rem;width:9px;height:9px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);z-index:1} /* blueprint-grid section texture */ .sec.blueprint::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);background-size:46px 46px;mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000,transparent 78%);pointer-events:none} .sec.blueprint>*{position:relative} /* ---------- IMAGE-BACKED SECTOR CARDS ---------- */ .sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .scard{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:flex-end;padding:1.4rem;isolation:isolate;transition:transform .35s var(--ease)} .scard:hover{transform:translateY(-5px);box-shadow:0 26px 60px rgba(0,0,0,.5)} .scard img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.08) brightness(.62) saturate(1.05);transition:transform .8s var(--ease),filter .5s} .scard:hover img{transform:scale(1.07);filter:grayscale(0) contrast(1.1) brightness(.74) saturate(1.1)} .scard::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(8,9,12,.92),rgba(8,9,12,.2) 60%)} .scard .k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem} .scard h4{color:#fff;font-size:1.15rem;margin-bottom:.35rem} .scard p{color:rgba(255,255,255,.72);font-size:.85rem;line-height:1.5;margin:0} /* ---------- RICH STAT BLOCK ---------- */ .statblock{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem} .statblock .item{border-top:2px solid var(--line);padding-top:1.3rem;transition:border-color .3s} .statblock .item:hover{border-color:var(--accent)} .statblock .n{font-family:var(--font-mono);font-size:clamp(2.2rem,3.4vw,3rem);color:var(--accent);letter-spacing:-.02em;line-height:1} .statblock .k{color:var(--ink);font-weight:600;font-size:1.02rem;margin:.6rem 0 .35rem} .statblock .d{color:var(--muted);font-size:.9rem;line-height:1.5} /* ---------- WORK GRID ---------- */ .work{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem} .wcard{position:relative;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);display:block} .wcard img{width:100%;height:100%;object-fit:cover;filter:grayscale(.06) contrast(1.03) brightness(1) saturate(1.02);transition:transform .8s var(--ease),filter .5s} .wcard:hover img{transform:scale(1.07);filter:grayscale(0) contrast(1.1) brightness(1) saturate(1.1)} .wcard:hover{box-shadow:0 26px 60px rgba(0,0,0,.5)} .wcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 50%)} .wcard .m{position:absolute;left:0;right:0;bottom:0;padding:1rem;z-index:2} .wcard .m .k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.3rem} .wcard .m .t{color:#fff;font-weight:600;font-size:.95rem;line-height:1.25} .wcard .corner{position:absolute;top:.8rem;right:.8rem;width:8px;height:8px;border-top:1.5px solid var(--accent);border-right:1.5px solid var(--accent);z-index:2} /* Portfolio sector image. Sources are a mix of 16:9 and 4:3, so a fixed aspect-ratio plus object-fit keeps the grid even and holds the space. height:auto is required, not optional: the width/height attributes each img carries (for CLS) set a specified height, and aspect-ratio is ignored unless the other dimension is auto. Without it these render at full natural height. */ .secimg{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;filter:grayscale(.06) contrast(1.02) brightness(1)} /* ---------- BRAND LOGO ---------- Painted with mask-image so one file serves every colour: the element is filled with currentColor and the SVG defines the shape. That means the logo follows the palette (white on the dark hero, ink on a light surface) with no second export, and the 35KB file is fetched once and cached rather than inlined into 222 pages. Ratios come from the artwork: horizontal 3.40:1, lockup 2.78:1. */ .brand-logo{display:block;width:102px;height:30px;background-color:currentColor; -webkit-mask:url(/images/logo/horizontal.svg) left center/contain no-repeat; mask:url(/images/logo/horizontal.svg) left center/contain no-repeat} .foot-logo{display:block;width:170px;height:61px;background-color:currentColor; -webkit-mask:url(/images/logo/lockup.svg) left center/contain no-repeat; mask:url(/images/logo/lockup.svg) left center/contain no-repeat} .brand{display:inline-flex;align-items:center;color:var(--ink)} /* Browsers without mask support would show a solid block, which is worse than nothing, so the fill is only applied where mask actually works. */ @supports not ((-webkit-mask: url(#a)) or (mask: url(#a))){ .brand-logo,.foot-logo{background-color:transparent} } @media(max-width:640px){.brand-logo{width:88px;height:26px}} /* ---------- COOKIE CONSENT ---------- js/cookie-consent.js injects this and carries no styles of its own, so with no rules here it rendered as unstyled text and default buttons on all 221 pages. The JS appends to , hence position:fixed rather than a flow position, and toggles .is-visible, so the hidden state must be the default. Removal is on a 200ms timer in the JS; the transition matches it. */ .lg-cookie-banner{position:fixed;right:1.25rem;bottom:1.25rem;z-index:9999;width:min(24rem,calc(100vw - 2.5rem)); background:var(--bg-elev,#16181c);border:1px solid var(--line);border-radius:var(--radius); padding:1.35rem 1.35rem 1.15rem;box-shadow:0 24px 60px rgba(0,0,0,.55); opacity:0;transform:translateY(12px);transition:opacity .2s var(--ease,ease),transform .2s var(--ease,ease)} .lg-cookie-banner.is-visible{opacity:1;transform:none} .lg-cookie-label{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem} .lg-cookie-body{color:var(--muted);font-size:.86rem;line-height:1.55;margin:0 0 1.1rem} .lg-cookie-actions{display:flex;gap:.6rem} .lg-cookie-btn{flex:1;cursor:pointer;font:inherit;font-size:.83rem;font-weight:600; padding:.6rem .9rem;border-radius:calc(var(--radius) / 1.6);border:1px solid var(--line); transition:background .25s,color .25s,border-color .25s} .lg-cookie-btn-primary{background:var(--accent);border-color:var(--accent);color:#14161a} .lg-cookie-btn-primary:hover{filter:brightness(1.08)} .lg-cookie-btn-secondary{background:transparent;color:var(--text)} .lg-cookie-btn-secondary:hover{border-color:var(--accent);color:var(--ink)} .lg-cookie-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .lg-cookie-link{display:inline-block;margin-top:.9rem;font-size:.75rem;color:var(--muted);text-decoration:underline} .lg-cookie-link:hover{color:var(--accent)} /* Slim full-width strip on small screens, as the script's own notes describe. */ @media (max-width:560px){ .lg-cookie-banner{right:0;left:0;bottom:0;width:auto;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:1.1rem 1.15rem} } @media (prefers-reduced-motion:reduce){ .lg-cookie-banner{transition:none;transform:none} } /* Hero brand line. Uses the eyebrow slot but drops the uppercase: a tagline in letterspaced caps reads as a label, and this is a sentence. */ .hero-tagline{text-transform:none;letter-spacing:.02em;font-size:.95rem;font-family:var(--font-body)} /* Brand tagline. Sits with the wordmark, which is where a brand line belongs. Sentence case on purpose: Title Case reads corporate and dated against the light editorial direction. The hero keeps its own proposition line ("Designed, calculated, signed off.") - that says what you get, this says who we are, and they do different jobs. */ .ftag{margin-top:.55rem;font-size:.9rem;line-height:1.4;color:var(--ink);letter-spacing:.01em} .tagline-lead{font-family:var(--font-display,inherit);font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.25;color:var(--ink);margin-bottom:1.4rem;max-width:20ch} .tagline-lead::after{content:"";display:block;width:46px;height:2px;background:var(--accent);margin-top:1.1rem} .ftag::after{content:"";display:block;width:34px;height:1px;background:var(--accent);margin-top:.7rem;opacity:.8} /* Testimonials. Only rendered when a real, consented quote exists. */ .tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.6rem;margin-top:2.4rem} .tcard{margin:0;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;background:rgba(20,22,26,.03)} .tcard blockquote{margin:0;border:0;padding:0} .tcard blockquote p{color:var(--ink);font-size:1.04rem;line-height:1.6} .tcard blockquote p::before{content:"\201C";color:var(--accent);font-size:1.6em;line-height:0;vertical-align:-.28em;margin-right:.12em} .tcard blockquote p::after{content:"\201D";color:var(--accent);font-size:1.6em;line-height:0;vertical-align:-.28em;margin-left:.06em} .tcard figcaption{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)} .tcard figcaption .k{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem} .tcard figcaption .t{color:var(--muted);font-size:.9rem} /* Drawing line work. The SVGs carry stroke="currentColor", so colour comes from here and the same files work on the dark theme and on the light restyle. */ .dwggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem;margin-top:2.4rem} .dwg{margin:0;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.4rem 0;background:rgba(20,22,26,.03);overflow:hidden} .dwg svg{width:100%;height:auto;aspect-ratio:4/3;display:block;color:var(--text);opacity:.9;transition:opacity .4s,color .4s} .dwg:hover svg{opacity:1;color:var(--accent)} .dwg figcaption{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:1rem 0;border-top:1px solid var(--line);margin-top:1.2rem} /* Case study gallery. height:auto here for the same reason as .secimg above. */ .gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem;margin-top:2.4rem} .gcell{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden} .gcell img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;filter:grayscale(.06) contrast(1.02) brightness(1);transition:transform .8s var(--ease),filter .5s} .gcell:hover img{transform:scale(1.04);filter:grayscale(0) contrast(1.08) brightness(1)} /* ---------- ANSWER / FAQ / DIM ---------- */ .answer{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);padding:1.6rem 1.8rem;border-radius:0 var(--radius) var(--radius) 0} .answer .q{color:var(--ink);font-weight:600;margin-bottom:.5rem} .answer p{color:var(--text);font-size:.97rem;margin:0} .dim{font-family:var(--font-mono);font-size:.8rem;color:var(--accent);display:flex;align-items:center;gap:.6rem;padding:.15rem 0} .dim::before{content:"";width:1.5rem;height:1px;background:var(--accent);opacity:.7} .faq details{border-bottom:1px solid var(--line);padding:1.3rem 0} .faq summary{font-weight:600;color:var(--ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-size:1.05rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent);font-size:1.4rem;line-height:1} .faq details[open] summary::after{content:"\2212"} .faq details p{margin:.9rem 0 0} /* process steps */ .steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem} .step{border-top:2px solid var(--line);padding-top:1.2rem;position:relative} .step::before{counter-increment:s;content:"0" counter(s);font-family:var(--font-mono);font-size:.8rem;color:var(--accent)} .step h4{color:var(--ink);font-size:1.05rem;margin:.5rem 0 .4rem} .step p{font-size:.92rem;color:var(--muted);margin:0} /* ---------- STATS ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;border-top:1px solid var(--line);padding-top:2.2rem} .stats .n{font-family:var(--font-mono);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--accent);letter-spacing:-.02em} .stats .k{font-size:.82rem;color:var(--muted);margin-top:.3rem} /* ---------- CTA BAND ---------- */ .ctaband{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--radius);padding:3.6rem;text-align:center;position:relative;overflow:hidden} .ctaband::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);background-size:44px 44px;opacity:.7} .ctaband>*{position:relative} .ctaband p{color:var(--muted);max-width:52ch;margin:0 auto 1.8rem} .ctaband .btnrow{justify-content:center} /* ---------- CONTACT FORM ---------- */ .form{display:grid;gap:1.1rem} .field label{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem} .field input,.field textarea,.field select{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem;color:var(--ink);font-family:var(--font-body);font-size:.97rem} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)} .field textarea{min-height:140px;resize:vertical} .f2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} /* ---------- FOOTER ---------- */ footer{background:#08090c;border-top:1px solid var(--line);padding:4rem 0 2rem;color:var(--muted)} .fg{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:2.4rem} footer h2{color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;line-height:1.2;margin-bottom:1rem} footer a{color:var(--muted);font-size:.9rem;line-height:2;transition:color .2s} footer a:hover{color:var(--accent)} .foot-mark{display:block;height:46px;width:auto;margin-bottom:1rem;opacity:.95} .fwm{font-family:var(--font-head);font-weight:900;font-size:1.4rem;color:#fff;text-transform:uppercase}.fwm .a{color:var(--accent)} .floc{border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.4rem;font-size:.82rem;color:var(--muted)} .fbot{border-top:1px solid var(--line);margin-top:1.4rem;padding-top:1.4rem;font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem} /* ---------- REVEAL ---------- */ .reveal{transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:opacity,transform} .js .reveal{opacity:0;transform:translateY(26px)} .reveal.visible{opacity:1;transform:none} .d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s} @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.herovid{display:none}} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Visually hidden, still in the accessibility tree and the document outline. Used for section headings that exist structurally but are not drawn. */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:2000;background:var(--accent);color:var(--accent-ink);padding:.6rem 1rem;border-radius:var(--radius)} /* ---------- PREMIUM INTERACTION LAYER ---------- */ .scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-light));z-index:2000;box-shadow:0 0 10px rgba(201,168,76,.5)} .back-to-top{position:fixed;right:1.5rem;bottom:1.5rem;width:48px;height:48px;border-radius:50%;background:var(--surface);border:1px solid var(--line-strong);color:var(--ink);font-size:1.15rem;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:var(--t);z-index:900;display:grid;place-items:center;box-shadow:var(--shadow-card)} .back-to-top.show{opacity:1;visibility:visible;transform:none} .back-to-top:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)} /* value-prop trust strip */ .trust-strip{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .trust-strip .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.2rem 2rem;padding:1.5rem 0} .trust-strip .item{display:flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text)} .trust-strip .item b{color:var(--accent);font-weight:500} .trust-strip .item .tick{color:var(--accent)} /* cost table */ .costgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2rem} .costcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.8rem;transition:var(--t);position:relative;overflow:hidden} .costcard:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-card)} .costcard .svc{font-weight:600;color:var(--ink);font-size:1.08rem} .costcard .price{font-family:var(--font-mono);font-size:1.7rem;color:var(--accent);margin:.5rem 0;letter-spacing:-.02em} .costcard .note{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0} /* extension cost calculator */ .calc{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--accent);border-radius:var(--radius);padding:2.2rem;max-width:640px;margin:0 auto} .calc h3{color:var(--ink);margin-bottom:.4rem} .calc .field{margin:1.1rem 0} .calc label{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.55rem} .calc select,.calc input[type=range]{width:100%} .calc select{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem;color:var(--ink);font-family:var(--font-body);font-size:1rem} .calc input[type=range]{accent-color:var(--accent);height:6px} .calc .rangeval{font-family:var(--font-mono);color:var(--accent);font-size:.95rem;margin-top:.4rem} .calc .result{margin-top:1.8rem;border-top:1px solid var(--line);padding-top:1.6rem;text-align:center} .calc .result .lab{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .calc .result .amt{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,3.6rem);color:#fff;line-height:1;margin:.4rem 0} .calc .result .amt span{color:var(--accent)} .calc .result .sub{color:var(--muted);font-size:.88rem;margin:0} .calc .cta-row{margin-top:1.6rem;text-align:center} /* article readability */ .article h2{margin-top:2.4rem;font-size:clamp(1.6rem,3vw,2.2rem)} .article p{font-size:1.08rem;line-height:1.8} .article .lede{font-size:1.25rem;color:var(--ink)} /* ---------- RESPONSIVE ---------- */ /* nav collapses to drawer before the horizontal menu gets cramped on tablets */ @media(max-width:1180px){ /* Above the drawer. The burger spans y58 to y92 and the drawer opens at y70, so they overlap by 22px; the drawer comes later in the DOM and was capturing the tap, which meant the menu could be opened and not closed. */ .burger{display:inline-block;position:relative;z-index:3} .nav-links{position:fixed;top:70px;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:.6rem 1rem 1.4rem;transform:translateY(-12px);opacity:0;visibility:hidden;transition:transform .28s,opacity .28s,visibility .28s;max-height:calc(100dvh - 70px);overflow-y:auto;-webkit-overflow-scrolling:touch} .nav-links.open{transform:none;opacity:1;visibility:visible} .nav-links>li{width:100%} .nav-links>li>a{padding:.9rem .6rem;border-bottom:1px solid var(--line);font-size:1rem;justify-content:space-between} .has-dd>a::after{margin-left:auto;transition:transform .25s} .has-dd.open>a::after{transform:rotate(45deg) translateY(2px) scaleY(-1)} .nav-cta{margin:1rem 0 0}.nav-cta .btn{width:100%;justify-content:center;padding:.9rem 1rem} .dd{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:transparent;padding:0 0 0 1rem;min-width:0;max-height:0;overflow:hidden;transition:max-height .3s} .has-dd.open .dd{max-height:760px;padding-bottom:.4rem} } @media(max-width:1024px){.fg{grid-template-columns:1fr 1fr 1fr}.two{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.bento{grid-template-columns:repeat(2,1fr)}.bcard.lg{grid-column:span 2}.sgrid{grid-template-columns:1fr 1fr}.statblock{grid-template-columns:1fr 1fr;gap:1.5rem}.costgrid{grid-template-columns:1fr}} @media(max-width:768px){ .sec{padding:4.5rem 0} .cards,.work,.stats,.subs,.statblock{grid-template-columns:1fr} .bento{grid-template-columns:1fr;grid-auto-rows:200px} .bcard.lg,.bcard.tall{grid-column:auto;grid-row:auto} .sgrid{grid-template-columns:1fr 1fr} .work{grid-template-columns:1fr 1fr} .f2{grid-template-columns:1fr} .fg{grid-template-columns:1fr 1fr} .hero-inner{padding:7rem 6vw 2rem} .hero-giant{font-size:clamp(2.2rem,11vw,4rem)} .hero-actions{flex-direction:column;align-items:stretch} .hero-actions .btn{width:100%;justify-content:center} .hero-strip{font-size:.62rem;gap:.6rem 1.2rem} } @media(max-width:420px){.work{grid-template-columns:1fr}.hero-corners{font-size:.58rem}} /* ---------- MID-PAGE CTA ---------- Lighter than .ctaband. Sits partway down long service and topic pages so the ask is not held back until after 1,000+ words. */ .midcta{padding:0;margin:3.5rem 0} .midcta-in{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap; background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:var(--radius);padding:1.5rem 1.8rem} .midcta-in strong{color:var(--ink);display:block;margin-bottom:.3rem;font-family:var(--font-head)} .midcta-in span{color:var(--muted);font-size:.93rem;line-height:1.6;display:block;max-width:62ch} .midcta-act{display:flex;gap:.7rem;flex-shrink:0} @media(max-width:760px){ .midcta-in{flex-direction:column;align-items:flex-start;padding:1.3rem 1.4rem} .midcta-act{width:100%} .midcta-act .btn{flex:1;justify-content:center} } /* ---------- STICKY MOBILE CONTACT BAR ---------- Most homeowner traffic arrives on a phone, where the nav CTA scrolls away and never comes back. Desktop keeps the nav button instead. */ .stickybar{display:none} @media(max-width:820px){ .stickybar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60; background:rgba(14,15,18,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line-strong)} .stickybar a{padding:.95rem .6rem;text-align:center;font-family:var(--font-head);font-weight:600; font-size:.9rem;letter-spacing:.02em;color:var(--ink);text-decoration:none} .stickybar a.primary{background:var(--accent);color:var(--accent-ink)} .stickybar a:active{opacity:.85} body{padding-bottom:3.5rem} } @media print{.stickybar{display:none}} /* Secondary button: outlined, so a two-button CTA has a clear primary. Used for the phone action once a real number replaces the placeholder. */ .btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)} .btn.ghost:hover{border-color:var(--accent);color:var(--accent)} /* Single-action sticky bar while the phone number is a placeholder. */ @media(max-width:820px){.stickybar:has(a:only-child){grid-template-columns:1fr}} /* ---------- CASE STUDY FACT BAR ---------- */ .csfacts{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.6rem} .csfacts .dim{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em; text-transform:uppercase;color:var(--muted)} .csfacts .dim b{color:var(--accent);font-weight:500;margin-right:.5rem} .card .kick{margin-bottom:.6rem} /* ---------- MOBILE LEGIBILITY FLOOR ---------- The mono label styles sit at .62-.66rem, which resolves to 10-11px. That is below the readable threshold on a phone and is flagged by mobile usability checks. Desktop keeps the tighter sizing; mobile gets a 12px floor. */ @media(max-width:820px){ .hero-strip,.dimdiv,.bcard .k,.scard .k,.wcard .m .k,.bcard .topk,.bcard .sheet{font-size:.75rem} .kick,.eyebrow,.crumb,.hero-eyebrow2,.card .num,.csfacts .dim{font-size:.76rem} } /* hero-corners is overridden inside a later 420px breakpoint, so it needs restating here to keep the 12px mobile floor. */ @media(max-width:820px){.hero-corners{font-size:.75rem}} @media(max-width:420px){.hero-corners{font-size:.75rem}} /* ---------- GRID3 ---------- Used by /who-we-serve and /case-studies. Auto-fit rather than a fixed 3 columns, because those hubs hold 9 and 10 cards and need to reflow cleanly at every width without a stack of breakpoints. */ .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem} @media(max-width:640px){.grid3{grid-template-columns:1fr;gap:1rem}} /* ---------- PAPER RESTYLE, per-component corrections ---------- Anything that assumed a dark canvas and does not follow the tokens. */ .dwg{background:var(--surface)} .dwg svg{color:var(--ink);opacity:.85} .dwg:hover svg{color:var(--accent);opacity:1} .tcard{background:var(--surface)} .secimg,.gcell img{filter:none} /* the hero sits on its own dark stage regardless of the page palette */ .hero,.hero .hero-inner{color:#fff} .hero h1,.hero .hero-sub strong{color:#fff} .hero-sub{color:rgba(255,255,255,.86)} .hero-strip{color:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.18)} .hero-eyebrow2{color:#8ecec8} .hero-eyebrow2::before{background:#8ecec8} .hero-tagline{color:#fff} /* square buttons with a contrasting hover, as chosen */ .btn{border-radius:0} .btn.s{background:var(--accent);color:#fff;border-color:var(--accent)} .btn.s:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:none} .btn:hover{border-color:var(--accent);color:var(--accent)} /* footer follows the page, not the old dark surface */ footer{background:var(--bg2);border-top:1px solid var(--line)} .foot-logo{color:var(--ink)} /* ---------- MONTSERRAT AT READING SIZE ---------- Montserrat is a geometric display face carrying body text here, which is the agreed choice. These compensate for what that costs at 16px: the wide round letterforms read loose, so a hair of negative tracking tightens them, and a little more leading stops long topic pages (1,200-1,400 words) feeling dense. Headings keep their own tracking, which is why this is scoped to text. */ body{letter-spacing:-.004em} p,.lede,.article p{line-height:1.8} .lede{letter-spacing:-.006em} .subs li,li{line-height:1.7} /* Montserrat's numerals are wide; tabular keeps the stat rows aligned */ .stats .n,.statblock .n,.cell .n{font-variant-numeric:tabular-nums} /* ---------- PAPER RESTYLE: contrast corrections ---------- The hero no longer fades into the page colour. It used to end in near-black, which the light strip text sat on happily; ending in paper made that text disappear. It now holds its dark surface to its own edge and the page starts paper below, which is a cleaner transition anyway. */ .duo{background:linear-gradient(180deg,rgba(15,20,19,.80),rgba(15,20,19,.34) 30%, rgba(15,20,19,.55) 66%,rgba(15,20,19,.94))} .hero-strip{color:rgba(255,255,255,.72);border-top-color:rgba(255,255,255,.20)} .hero-strip span{color:rgba(255,255,255,.72)} /* Cookie banner never followed the tokens: it had a hardcoded dark fallback, so on paper it stayed dark and the secondary button was unreadable. */ .lg-cookie-banner{background:var(--surface);border-color:var(--line); box-shadow:0 24px 60px rgba(20,22,26,.18)} .lg-cookie-body{color:var(--text)} .lg-cookie-btn{border-color:var(--line-strong)} .lg-cookie-btn-primary{background:var(--accent);border-color:var(--accent);color:#fff} .lg-cookie-btn-secondary{background:transparent;color:var(--ink)} .lg-cookie-btn-secondary:hover{border-color:var(--accent);color:var(--accent)} .lg-cookie-link{color:var(--muted)} .lg-cookie-link:hover{color:var(--accent)} /* ---------- APPROVED HERO + NAV (ported from the lab) ---------- */ /* Logo centred with the navigation split either side. Columns are pinned so the logo holds the centre at every width: a 1fr track will not shrink below its content, so an unpinned layout pushed it off centre as soon as one side grew. */ .nav-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;gap:1rem} .navside-left{grid-column:1;justify-self:start;min-width:0} .brand{grid-column:2;justify-self:center} .navside-right{grid-column:3;justify-self:end;min-width:0} .nav-links{gap:1.3rem;flex-wrap:nowrap} .nav-links>li>a{white-space:nowrap} .navtel{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono); font-size:.8rem;color:var(--ink);white-space:nowrap} .navtel svg{width:14px;height:14px;stroke:var(--accent);stroke-width:1.6;fill:none; stroke-linecap:round;stroke-linejoin:round} .navtel:hover{color:var(--accent)} /* Tagline carries the size; the headline sits smaller beneath it. */ .hero-tagline{font-family:var(--font-display);font-weight:800;letter-spacing:-.01em; font-size:clamp(1.9rem,4.4vw,3.5rem);line-height:1.12;color:#fff;margin:0 0 .8rem; max-width:20ch} /* Marker block, painted as a background so it survives wrapping onto two lines. A positioned box only tracks the first line fragment. */ .hero-tagline .hl{color:#fff;padding:0 .12em;-webkit-box-decoration-break:clone; box-decoration-break:clone;background-image:linear-gradient(var(--accent),var(--accent)); background-repeat:no-repeat;background-position:left center;background-size:0% 100%; animation:hlsweep .8s .35s cubic-bezier(.2,.7,.3,1) forwards} @keyframes hlsweep{to{background-size:100% 100%}} .hero-giant{font-family:var(--font-display);font-weight:800;text-transform:uppercase; letter-spacing:.14em;font-size:clamp(.82rem,1.4vw,1.02rem);line-height:1.3; color:rgba(255,255,255,.72);margin:0 0 1.3rem} .hero-sub{max-width:56ch} .hero-sub strong{display:block;color:#fff;font-size:1.16rem;font-weight:700;margin-bottom:0} /* One square button plus an arrow link, rather than two competing buttons. */ .hero-actions{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap} .hero-actions .btn.s{border-radius:0} .hero-actions .btn.s:hover{background:#fff;border-color:#fff;color:var(--hero)} .ghostlink{display:inline-flex;align-items:center;gap:.5rem;color:#fff;font-weight:600; font-size:.9rem;position:relative;padding:.4rem 0} .ghostlink::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:#fff;transition:right .35s var(--ease)} .ghostlink:hover::after{right:0} .arw{width:15px;height:9px;display:inline-block;background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; transition:transform .3s} .btn.s:hover .arw,.ghostlink:hover .arw{transform:translateX(3px)} /* The agreed four stat boxes, replacing the compliance strip. */ .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:1320px; margin:0 auto;border-top:1px solid rgba(255,255,255,.2)} .hs{padding:1.3rem 1.1rem;text-align:center;position:relative} .hs+.hs::before{content:"";position:absolute;left:0;top:24%;bottom:24%;width:1px; background:rgba(255,255,255,.2)} .hs .n{display:block;font-family:var(--font-display);font-weight:800;color:#fff; font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.05;font-variant-numeric:tabular-nums} .hs .n i{font-style:normal;color:var(--accent-light)} .hs .n em{font-style:normal;opacity:.45;font-weight:400} .hs .n.w{font-size:clamp(.95rem,1.5vw,1.24rem);line-height:1.2;max-width:15ch;margin:0 auto} .hs .l{display:block;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.18em; text-transform:uppercase;color:rgba(255,255,255,.62);margin-top:.5rem} @media(max-width:900px){.hero-stats{grid-template-columns:repeat(2,1fr)} .hs:nth-child(3)::before{display:none}} @media(max-width:1180px){.nav-inner{grid-template-columns:auto 1fr auto} .brand{grid-column:1;justify-self:start}.nav-inner>nav{grid-column:3}} /* dropdowns belong to their nav item, and the right-hand pair align right so they cannot run off the viewport */ .has-dd{position:relative} .navside-right .dd{left:auto;right:0} @media(max-width:1100px){.nav-links{gap:.9rem}.nav-links>li>a{font-size:.82rem}} @media(max-width:1180px){ /* Logo stays centred at every width, as agreed. The three tracks are kept and the left nav is display:none rather than hidden: a 1fr track will not shrink below its content, so leaving the links in the layout drags the logo off centre. Removing the item entirely leaves the empty track, and the two 1fr columns balance again. */ .nav-inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)} .navside-left{display:none} /* THE MOBILE MENU WAS EMPTY. The drawer markup lives inside .navside-left, which is hidden here so the logo can centre. The burger added .open to the