/* ===== THE FOURTHS, dark engineering design system ===== */ :root{ --bg:#131413; --bg-2:#151615; --surface:#181918; --surface-2:#1c1d1c; --text:#f1f1f1; --text-2:#d6d6d6; --muted:#9f9f9f; --muted-2:#777a77; --accent:#8fe39b; /* accent (default: green, brightened) */ --accent-dim:#5fae6b; --accent-ink:#0a140d; /* readable ink on the green accent button */ --line:rgba(138,138,138,.5); --line-soft:rgba(146,146,146,.16); --fill-faint:rgba(146,146,146,.06); --inset:9px; --gut:clamp(22px,3.4vw,40px); --sans:"Switzer",-apple-system,system-ui,sans-serif; --mono:"Switzer",-apple-system,system-ui,sans-serif; /* one typeface throughout, matches reference */ --ease:cubic-bezier(.22,1,.36,1); } /* ============================================================ Selectable accent. Green is the default; four complementary options sit calmly on the near-black base. Set on the body: (amber|clay|teal|slate). Every component reads --accent / --accent-dim / --accent-ink, so switching the attribute re-skins the whole UI. Still seasoning, ~5% of a view, one job at a time. ============================================================ */ /* Dark mode (bright on near-black) */ body[data-accent="amber"]{--accent:#e7b86e;--accent-dim:#c1923f;--accent-ink:#1c1507} body[data-accent="clay"]{--accent:#e59a7e;--accent-dim:#c2745c;--accent-ink:#1d0f0a} body[data-accent="teal"]{--accent:#6fd6c4;--accent-dim:#46a899;--accent-ink:#06140f} body[data-accent="slate"]{--accent:#8fbfe4;--accent-dim:#6191bd;--accent-ink:#07111b} /* Light mode (deeper on warm off-white, light ink on the button) */ body.light[data-accent="amber"]{--accent:#8a6518;--accent-dim:#714f12;--accent-ink:#f7f5ef} body.light[data-accent="clay"]{--accent:#a8543a;--accent-dim:#8e4530;--accent-ink:#f9f5f1} body.light[data-accent="teal"]{--accent:#2f857a;--accent-dim:#287267;--accent-ink:#f2faf7} body.light[data-accent="slate"]{--accent:#3d6f9b;--accent-dim:#345f85;--accent-ink:#f1f6fb} *{margin:0;padding:0;box-sizing:border-box} html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:400;line-height:1.3; overflow-x:hidden;padding:0;position:relative;min-height:100vh} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit} img{display:block;max-width:100%} .wrap{width:100%;max-width:1280px;margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)} .mono{font-family:var(--mono);font-weight:400;letter-spacing:0} .eyebrow{font-size:14px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)} .dim{color:var(--muted)} /* arrow */ .ar{display:inline-flex;transition:transform .4s var(--ease)} /* ---------- NAV ---------- */ header.nav{position:sticky;top:0;z-index:70;transition:background .4s var(--ease),backdrop-filter .4s} header.nav{background:var(--bg)} header.nav.scrolled{background:rgba(19,20,19,.86);backdrop-filter:blur(14px) saturate(1.2)} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px} .logo{font-family:var(--mono);font-weight:500;font-size:16px;letter-spacing:.04em;color:var(--text)} .logo .sl{color:var(--muted-2);margin:0 .15em} .nav-mid{display:flex;align-items:center;gap:6px} .nav-mid a{font-size:15px;color:var(--muted);padding:8px 16px;border-radius:100px;transition:color .25s,background .25s} .nav-mid a:hover{color:var(--text);background:var(--fill-faint)} .nav-mid a[aria-current="page"]{color:var(--text);background:var(--fill-faint)} .nav-right{display:flex;align-items:center;gap:10px} .btn{font-size:14px;font-weight:500;padding:11px 18px;border:1px solid var(--line);border-radius:100px; display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--text); position:relative;overflow:hidden;transition:color .4s var(--ease),border-color .4s var(--ease)} .btn .lbl,.btn .ar{position:relative;z-index:2} .btn::before{content:"";position:absolute;inset:0;background:var(--text);transform:translateY(101%);transition:transform .45s var(--ease);z-index:1} .btn:hover{color:var(--bg);border-color:var(--text)} .btn:hover::before{transform:translateY(0)} .btn:hover .ar{transform:translate(3px,-3px)} .btn.solid{background:var(--text);color:var(--bg);border-color:var(--text)} .btn.solid::before{background:var(--bg)} .btn.solid:hover{color:var(--text);border-color:var(--line)} .btn.accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)} .btn.accent::before{background:var(--accent-ink)} .btn.accent:hover{color:var(--accent)} .icon-btn{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;display:inline-flex; align-items:center;justify-content:center;color:var(--text-2);transition:.3s} .icon-btn:hover{background:var(--surface);color:var(--text)} /* ---------- TEXT LINK ---------- */ .tlink{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--text-2);transition:color .3s} .tlink:hover{color:var(--text)} .tlink:hover .ar{transform:translate(3px,-3px)} /* ---------- HERO ---------- */ .hero{padding-top:clamp(56px,9vh,120px);padding-bottom:clamp(40px,6vw,90px)} .hero .eyebrow{margin-bottom:28px} .hero h1{font-weight:500;letter-spacing:-.02em;line-height:1.03;font-size:clamp(38px,6vw,86px);max-width:15ch} .hero h1 .plus{color:var(--muted);font-weight:400} .hero-sub{max-width:54ch;font-size:clamp(16px,1.4vw,20px);color:var(--text-2);line-height:1.5;margin-top:30px} .hero-status{font-family:var(--mono);font-size:14px;color:var(--text-2);margin-top:34px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .dotlive{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(143,227,155,.16);animation:pulse 2.4s var(--ease) infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} .hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap} /* ---------- SECTION SCAFFOLD ---------- */ section.blk{padding:clamp(56px,8vw,120px) 0} .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:24px;margin-bottom:clamp(36px,4vw,60px)} .sec-head .l .eyebrow{margin-bottom:16px} .sec-head h2{font-size:clamp(26px,3.2vw,44px);font-weight:500;letter-spacing:-.02em;line-height:1.08;max-width:18ch} .sec-head .idx{font-family:var(--mono);font-size:14px;color:var(--muted-2);white-space:nowrap} /* ---------- CARDS (work / blog) ---------- */ .cards{display:grid;grid-template-columns:1fr;gap:22px} @media(min-width:680px){.cards.two{grid-template-columns:1fr 1fr}} @media(min-width:900px){.cards.three{grid-template-columns:repeat(3,1fr)}} .card{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:16px;padding:14px 14px 8px; display:flex;flex-direction:column;transition:border-color .4s var(--ease),transform .4s var(--ease)} .card:hover{border-color:var(--line);transform:translateY(-3px)} .card-media{aspect-ratio:16/10;border-radius:11px;overflow:hidden;position:relative;background:#0d0e0d} .card-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);opacity:.92} .card:hover .card-media img{transform:scale(1.05)} .card-media .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,20,19,.1),rgba(19,20,19,.55))} .card-media .chip{position:absolute;top:12px;left:12px;font-size:14px;letter-spacing:0; text-transform:none;color:var(--text-2);background:rgba(19,20,19,.6);border:1px solid var(--line-soft); padding:5px 9px;border-radius:100px;backdrop-filter:blur(4px)} .card h3{font-size:clamp(16px,1.3vw,19px);font-weight:500;line-height:1.22;letter-spacing:-.01em;margin:18px 3px 0} .card p{font-size:14px;color:var(--muted);line-height:1.5;margin:9px 3px 0} .card .meta{font-family:var(--mono);font-size:14px;color:var(--muted-2);margin:12px 3px 0} .card-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);margin-top:18px} .card-foot .tlink{padding:13px 3px} /* ---------- TAG PILLS ---------- */ .pills{display:flex;gap:8px;flex-wrap:wrap} .pill{font-family:var(--mono);font-size:14px;letter-spacing:.03em;color:var(--text-2); border:1px solid var(--line);border-radius:100px;padding:6px 12px;background:var(--fill-faint)} /* ---------- INDEX ROWS (work / services) ---------- */ .rows{border-top:1px solid var(--line)} .row{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:30px 4px;border-bottom:1px solid var(--line); align-items:start;transition:background .4s var(--ease)} .row:hover{background:var(--fill-faint)} .row .num{font-family:var(--mono);font-size:14px;color:var(--muted-2);padding-top:5px} .row .body{display:grid;gap:14px} @media(min-width:920px){ .row{grid-template-columns:64px minmax(0,1.1fr) minmax(0,1.3fr) auto;gap:30px;align-items:center} .row .body{display:contents} } .row h3{font-size:clamp(19px,1.7vw,26px);font-weight:500;letter-spacing:-.015em;line-height:1.1} .row p{font-size:14px;color:var(--muted);line-height:1.5;max-width:48ch} .row .col-end{display:flex;flex-direction:column;gap:12px;align-items:flex-start} @media(min-width:920px){.row .col-end{align-items:flex-end;text-align:right}} /* ---------- SERVICES GRID (9) ---------- */ .svc-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)} @media(min-width:640px){.svc-grid{grid-template-columns:1fr 1fr}} @media(min-width:1000px){.svc-grid{grid-template-columns:repeat(3,1fr)}} .svc{padding:30px 26px 40px;border-bottom:1px solid var(--line);position:relative;transition:background .4s var(--ease)} @media(min-width:640px){.svc:nth-child(2n)::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}} @media(min-width:1000px){ .svc:nth-child(2n)::before{display:none} .svc:not(:nth-child(3n+1))::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)} } .svc:hover{background:var(--fill-faint)} .svc .n{font-family:var(--mono);font-size:14px;color:var(--muted-2)} .svc h4{font-size:19px;font-weight:500;margin:20px 0 12px;letter-spacing:-.01em} .svc p{color:var(--muted);font-size:14px;line-height:1.55} .svc .more{margin-top:18px;font-family:var(--mono);font-size:14px;color:var(--text-2);display:inline-flex;gap:7px;align-items:center} .svc:hover .more .ar{transform:translate(3px,-3px)} /* ---------- NUMBERED FEATURE BLOCKS (who we work with / principles) ---------- */ .feat{display:grid;gap:0;border-top:1px solid var(--line)} .feat-item{display:grid;grid-template-columns:1fr;gap:14px;padding:34px 4px;border-bottom:1px solid var(--line)} @media(min-width:860px){.feat-item{grid-template-columns:120px 1fr 1fr;gap:40px;align-items:start}} .feat-item .fn{font-family:var(--mono);font-size:14px;color:var(--accent)} .feat-item h4{font-size:clamp(20px,2vw,28px);font-weight:500;letter-spacing:-.015em;line-height:1.1} .feat-item p{color:var(--muted);font-size:14.5px;line-height:1.55;max-width:46ch} /* ---------- BIG STATEMENT ---------- */ .statement{font-size:clamp(26px,3.4vw,46px);font-weight:500;letter-spacing:-.02em;line-height:1.22;max-width:28ch} .statement .hl{color:var(--accent)} /* ---------- STATS ---------- */ .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden} @media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{background:var(--bg);padding:28px 24px} .stat .v{font-size:clamp(30px,3.4vw,46px);font-weight:500;letter-spacing:-.02em} .stat .k{font-size:14px;color:var(--muted);margin-top:8px;line-height:1.4} /* ---------- ACCORDION ---------- */ .acc{width:100%} .acc-item{border-top:1px solid var(--line)} .acc-item:last-child{border-bottom:1px solid var(--line)} .acc-head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:22px 4px; font-size:clamp(16px,1.3vw,18px);text-align:left;transition:opacity .3s} .acc-head:hover{opacity:.7} .acc-head .pm{position:relative;width:14px;height:14px;flex:none} .acc-head .pm::before,.acc-head .pm::after{content:"";position:absolute;background:var(--text-2);transition:transform .35s var(--ease)} .acc-head .pm::before{left:0;top:6px;width:14px;height:1.5px} .acc-head .pm::after{left:6px;top:0;width:1.5px;height:14px} .acc-item.open .pm::after{transform:scaleY(0)} .acc-body{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .acc-body p{color:var(--muted);font-size:14px;line-height:1.55;padding:0 4px 24px;max-width:60ch} /* ---------- CLIENT / LOGO STRIP ---------- */ .clients{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;opacity:.6} .clients .cl{font-weight:700;color:var(--text-2);font-size:18px;letter-spacing:.04em;white-space:nowrap} /* ---------- CLOSING CTA ---------- */ .cta-band{border:1px solid var(--line);border-radius:18px;padding:clamp(40px,6vw,80px);text-align:center;background:var(--bg-2)} .cta-band h2{font-size:clamp(26px,3.4vw,46px);font-weight:500;letter-spacing:-.02em;line-height:1.12;max-width:20ch;margin:0 auto} .cta-band p{color:var(--muted);margin-top:18px;font-size:16px} .cta-band .hero-cta{justify-content:center;margin-top:30px} /* ---------- DETAIL PAGE ---------- */ .crumb{font-family:var(--mono);font-size:14px;color:var(--muted);padding-top:clamp(40px,6vh,70px)} .crumb a:hover{color:var(--text)} .detail-h1{font-size:clamp(34px,5vw,68px);font-weight:500;letter-spacing:-.02em;line-height:1.04;max-width:16ch;margin-top:24px} .detail-sub{font-size:clamp(16px,1.4vw,20px);color:var(--text-2);max-width:52ch;margin-top:24px;line-height:1.5} .detail-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px);margin-top:clamp(50px,7vw,90px)} @media(min-width:980px){.detail-grid{grid-template-columns:1fr 1fr}} .detail-media{display:flex;flex-direction:column;gap:18px} .detail-media .m{border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:4/3;background:#0d0e0d} .detail-media .m img{width:100%;height:100%;object-fit:cover;opacity:.92} .detail-body .sect{border-top:1px solid var(--line);padding:30px 0} .detail-body .sect .lab{font-size:14px;letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:14px} .detail-body .sect h3{font-size:clamp(18px,1.6vw,24px);font-weight:500;letter-spacing:-.01em;margin-bottom:14px} .detail-body .sect p{color:var(--muted);font-size:15px;line-height:1.6;margin-bottom:14px} .detail-body .sect ul{list-style:none;display:grid;gap:10px} .detail-body .sect li{color:var(--text-2);font-size:14.5px;line-height:1.45;padding-left:22px;position:relative} .detail-body .sect li::before{content:"→";position:absolute;left:0;color:var(--accent)} /* ---------- CONTACT FORM ---------- */ .contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px);margin-top:clamp(40px,5vw,70px)} @media(min-width:920px){.contact-grid{grid-template-columns:.85fr 1.15fr}} .field{margin-bottom:20px} .field label{display:block;font-size:14px;letter-spacing:0;color:var(--muted);margin-bottom:9px} .field label .req{color:var(--accent)} .field input,.field select,.field textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:10px; color:var(--text);font-family:inherit;font-size:15px;padding:13px 14px;transition:border-color .3s} .field textarea{min-height:130px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .consent{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--muted);margin:6px 0 22px} .consent input{width:17px;height:17px;flex:none;accent-color:var(--accent);margin-top:2px} .form-note{font-size:14px;color:var(--muted);line-height:1.6} /* ---------- SLIDE-IN CONTACT PANEL ---------- */ .panel-scrim{position:fixed;inset:0;background:rgba(8,9,8,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden; transition:opacity .4s var(--ease),visibility .4s;z-index:90} .panel-scrim.open{opacity:1;visibility:visible} .panel{position:fixed;top:0;right:0;height:100%;width:min(480px,100%);background:var(--bg-2);border-left:1px solid var(--line); transform:translateX(100%);transition:transform .5s var(--ease);z-index:91;overflow-y:auto;padding:clamp(26px,4vw,40px)} .panel.open{transform:none} .panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .panel h2{font-size:28px;font-weight:500;letter-spacing:-.02em;margin:20px 0 10px} .panel .intro{color:var(--muted);font-size:14.5px;line-height:1.55;margin-bottom:28px} .panel .ok,.panel .err{display:none;font-size:14px;margin-top:14px;padding:12px 14px;border-radius:9px} .panel .ok{background:rgba(143,227,155,.1);border:1px solid var(--accent-dim);color:var(--accent)} .panel .err{background:rgba(209,90,90,.1);border:1px solid #a85;color:#e9a} /* ---------- FOOTER ---------- */ footer{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--line);position:relative;overflow:hidden} .@media(min-width:760px){.foot-cols{grid-template-columns:1.4fr 1fr 1fr 1.1fr}} .foot-col h5{font-size:14px;letter-spacing:0;text-transform:none;color:var(--muted);margin-bottom:18px} .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px} .foot-col a{font-size:14px;color:var(--text-2);transition:color .3s}.foot-col a:hover{color:var(--text)} .foot-brand .logo{font-size:18px;margin-bottom:16px;display:inline-block} .foot-brand p{color:var(--muted);font-size:14px;line-height:1.55;max-width:34ch} .foot-offices{font-family:var(--mono);font-size:14px;color:var(--muted);line-height:1.9} .foot-offices .on{color:var(--text-2)} .foot-bottom{border-top:1px solid var(--line);padding:24px 0;display:flex;justify-content:space-between;gap:14px; flex-wrap:wrap;font-family:var(--mono);font-size:14px;color:var(--muted-2)} .foot-bottom .foot-links{display:flex;gap:22px;flex-wrap:wrap} .foot-bottom a:hover{color:var(--text)} /* ---------- REVEAL ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} .stagger>*{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .stagger.in>*{opacity:1;transform:none} .stagger.in>*:nth-child(1){transition-delay:.04s} .stagger.in>*:nth-child(2){transition-delay:.1s} .stagger.in>*:nth-child(3){transition-delay:.16s} .stagger.in>*:nth-child(4){transition-delay:.22s} .stagger.in>*:nth-child(5){transition-delay:.28s} .stagger.in>*:nth-child(6){transition-delay:.34s} .stagger.in>*:nth-child(7){transition-delay:.4s} .stagger.in>*:nth-child(8){transition-delay:.46s} .stagger.in>*:nth-child(9){transition-delay:.52s} @media(max-width:820px){ .nav-mid{display:none} .nav-right .btn .lbl{display:none} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal,.stagger>*{opacity:1;transform:none} } /* ===== LIGHT THEME (toggle) ===== */ body.light{ --bg:#f3f1ec; --bg-2:#ecebe4; --surface:#e7e4dc; --surface-2:#e1ded5; --text:#15140f; --text-2:#3a3a35; --muted:#6b6b63; --muted-2:#8c8c83; --accent:#3f9150; --accent-dim:#367f46; --accent-ink:#f4f2ec; --line:rgba(20,20,16,.22); --line-soft:rgba(20,20,16,.10); --fill-faint:rgba(20,20,16,.04); } body.light .card-media .ov{background:linear-gradient(180deg,rgba(243,241,236,.05),rgba(243,241,236,.30))} /* theme toggle button */ .theme-toggle{width:42px;height:42px;border:0;background:none;border-radius:10px;display:inline-flex; align-items:center;justify-content:center;color:var(--text-2);transition:color .3s,transform .3s;flex:none} .theme-toggle:hover{color:var(--text);transform:rotate(12deg)} .theme-toggle svg{width:18px;height:18px} .brandmark{transition:opacity .3s} /* ===== CREATIVE FOOTER (replaces wordmark watermark) ===== */ footer{margin-top:clamp(40px,6vw,90px);border-top:1px solid var(--line);position:relative;overflow:hidden; background: radial-gradient(120% 140% at 88% 0%, rgba(143,227,155,.06), transparent 60%), var(--bg)} .foot-brand .brandmark{width:40px;height:40px;margin-bottom:18px} .foot-sign{display:flex;align-items:center;gap:18px;padding:30px 0 6px;border-top:1px solid var(--line-soft)} .foot-sign .rule{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)} .foot-sign .lockup{display:flex;align-items:baseline;gap:14px;white-space:nowrap} .foot-sign .lockup .mk{font-size:clamp(20px,2.4vw,30px);font-weight:500;letter-spacing:-.02em;color:var(--text)} .foot-sign .lockup .tag{font-size:14px;color:var(--muted)} .foot-sign .lockup .tag b{color:var(--accent);font-weight:500} .foot-status{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)} /* ===== BLOG ARTICLE ===== */ .article-hero{border-radius:16px;overflow:hidden;border:1px solid var(--line-soft);aspect-ratio:21/9;background:#0d0e0d} .article-hero img{width:100%;height:100%;object-fit:cover;opacity:.92} .article-body{padding-top:clamp(34px,5vw,60px)} .article-body p{color:var(--text-2);font-size:clamp(16px,1.25vw,18px);line-height:1.72;margin-bottom:24px} .article-body p:first-child{font-size:clamp(17px,1.4vw,20px);color:var(--text)} .article-sign{display:flex;align-items:center;gap:16px;margin-top:46px;padding-top:30px;border-top:1px solid var(--line-soft); font-family:var(--mono);font-size:14px;color:var(--muted)} .article-sign .rule{width:34px;height:1px;background:var(--accent)} /* ===== LIGHT MODE FIXES (legibility) ===== */ body.light header.nav.scrolled{background:rgba(243,241,236,.9);backdrop-filter:blur(14px) saturate(1.2)} .card-media .chip{background:rgba(12,13,12,.66);color:#f1f1f1;border-color:rgba(255,255,255,.18)} body.light .card-media .chip{background:rgba(20,20,16,.72);color:#fff;border-color:rgba(255,255,255,.22)} .card-media .ov{background:linear-gradient(180deg,rgba(12,13,12,.05),rgba(12,13,12,.45))} .card-media,.detail-media .m,.article-hero{background:#0d0e0d} body.light .btn.accent{color:var(--accent-ink)} body.light .btn.accent:hover{color:var(--accent)} body.light .dotlive{box-shadow:0 0 0 3px rgba(63,145,80,.18)} body.light .panel-scrim{background:rgba(20,20,16,.45)} /* ===== FOOTER SOCIAL ICONS (white) ===== */ .foot-social{display:flex;gap:12px;margin-top:20px} .foot-social .soc{width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;color:#fff;border:1px solid var(--line-soft);background:var(--fill-faint);transition:background .25s,transform .25s,color .25s} .foot-social .soc:hover{background:var(--surface);transform:translateY(-2px)} body.light .foot-social .soc{color:var(--text)} /* ===== ARTICLE Q&A FORMAT ===== */ .qa-eyebrow{font-family:var(--mono);font-size:14px;letter-spacing:.04em;color:var(--accent);margin-bottom:20px} .qa-list{display:grid;gap:2px;border-top:1px solid var(--line)} .qa{padding:24px 2px;border-bottom:1px solid var(--line)} .qa .q{font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.01em;line-height:1.25;margin:0 0 10px;color:var(--text)} .qa .a{color:var(--text-2);font-size:clamp(15px,1.2vw,17px);line-height:1.6;margin:0;max-width:62ch} .article-body{padding-top:clamp(40px,6vw,72px)} /* ===== LOGO CLICK TARGET (always navigates) ===== */ .logo{cursor:pointer;text-decoration:none} .logo img,.logo .brandmark{pointer-events:none} /* ===== Accent gradient — randomised per fresh load via body[data-accent] ===== */ :root{--accent-grad:linear-gradient(120deg,#8fe39b,#6fd6c4)} body[data-accent="amber"]{--accent-grad:linear-gradient(120deg,#e7b86e,#e59a7e)} body[data-accent="clay"]{--accent-grad:linear-gradient(120deg,#e59a7e,#df8a86)} body[data-accent="teal"]{--accent-grad:linear-gradient(120deg,#6fd6c4,#8fbfe4)} body[data-accent="slate"]{--accent-grad:linear-gradient(120deg,#8fbfe4,#a9b6e6)} /* Buttons fill-slide to the active accent gradient on hover; dark ink for contrast on the bright fill. */ .btn::before{background:var(--accent-grad)} .btn:hover{color:#0c150e;border-color:transparent} .btn.accent::before{background:var(--accent-grad)} .btn.accent:hover{color:#0c150e} body.light .btn.accent:hover{color:#0c150e}