:root{--bg:#ffffff;--panel:#fff;--ink:#14213d;--mute:#4d5a73;--line:#d3d9e3;--acc:#2457f5;--acc2:#e9a23b;--on:#fff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1626;--panel:#172036;--ink:#eaf0fb;--mute:#a3b0c7;--line:#2a3652;--acc:#7da2ff;--acc2:#f2b457;--on:#0f1626}}
:root[data-theme="dark"]{--bg:hsl(0, 0%, 100%);--panel:#172036;--ink:#eaf0fb;--mute:#ffffff;--line:#2a3652;--acc:#7da2ff;--acc2:#f2b457;--on:#0f1626}
html{scroll-behavior:smooth;scroll-padding-top:calc(72px + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.1rem/1.65 Newsreader,Georgia,serif}
h1,h2,h3,.ui{font-family:"Bricolage Grotesque",system-ui,sans-serif}
a{color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{font-weight:800;text-decoration:none;font-size:1.1rem}
nav{display:flex;gap:20px;overflow-x:auto}
nav a{font:500 .95rem "Bricolage Grotesque",sans-serif;text-decoration:none;color:var(--mute);white-space:nowrap}
nav a:hover{color:var(--ink)}
.hero{padding:72px 0 56px}
.hero .wrap{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:center}
h1{color:#168858;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.03em;margin:0 0 20px;font-weight:500}
.lead{font-size:1.3rem;color:var(--mute);max-width:36em;margin:0 0 28px}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{font:700 1rem "Bricolage Grotesque",sans-serif;padding:13px 22px;border-radius:999px;text-decoration:none;border:2px solid var(--ink)}
.btn.p{background:var(--ink);color:var(--bg)}
.photo{position:relative;justify-self:center;width:min(100%,360px)}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border-radius:180px 180px 16px 16px;display:block}
.photo::after{content:"";position:absolute;inset:auto -14px -14px auto;width:60%;height:60%;background:var(--acc2);border-radius:16px;z-index:-1}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);margin-top:56px}
.stats div{padding:18px 16px 0 0}
.stats b{display:block;font:800 2.2rem "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
.stats span{color:var(--mute);font-size:.95rem}
section{padding:72px 0}
h2{color:#5475d8;font-size:clamp(1.2rem,4vw,2.2rem);letter-spacing:-.02em;margin:0 0 12px;line-height:1.1}
.sub{color:var(--mute);max-width:40em;margin:0 0 40px}
.case{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;padding:44px 0;border-top:1px solid var(--line);align-items:start}
.case:nth-child(even) .shot{order:2}
.shot{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 18px 40px -24px rgba(20,33,61,.5)}
.shot img{width:100%;height:auto;display:block;border-radius:6px}
.meta{font:500 .9rem "Bricolage Grotesque",sans-serif;color:var(--mute);margin:0 0 8px}
h3{font-size:1.7rem;margin:0 0 4px;letter-spacing:-.015em;line-height:1.15}
.case p{margin:10px 0}
.res{display:inline-block;margin:6px 8px 0 0;padding:4px 12px;border-radius:999px;background:var(--acc);color:var(--on);font:700 .9rem "Bricolage Grotesque",sans-serif}
details{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
summary{cursor:pointer;font:700 1rem "Bricolage Grotesque",sans-serif}
details ul{margin:10px 0 0;padding-left:20px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.cols h3{font-size:1.2rem;margin-bottom:8px}
.cols ul{margin:0;padding-left:18px;color:var(--mute)}
.tl{border-left:3px solid var(--acc);margin:0;padding:0 0 0 24px;list-style:none}
.tl li{position:relative;padding-bottom:28px}
.tl li::before{content:"";position:absolute;left:-33px;top:9px;width:11px;height:11px;border-radius:50%;background:var(--acc2);border:2px solid var(--bg)}
.tl b{font:700 1.15rem "Bricolage Grotesque",sans-serif}
.tl span{display:block;font:500 .9rem "Bricolage Grotesque",sans-serif;color:var(--mute)}
.tl p{margin:4px 0 0}
.contact{background:var(--ink);color:var(--bg);border-radius:20px;padding:56px 40px;margin-bottom:56px}
.contact h2{margin-bottom:20px}
.contact a{display:block;font:500 1.2rem "Bricolage Grotesque",sans-serif;margin:6px 0;width:fit-content}
footer{text-align:center;color:var(--mute);font-size:.9rem;padding:0 24px 40px}
@media(max-width:820px){.hero .wrap,.case,.cols{grid-template-columns:1fr}.case:nth-child(even) .shot{order:0}.stats{grid-template-columns:1fr 1fr}.hero{padding-top:40px}.photo{width:min(80%,300px)}.contact{padding:36px 24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[hidden]{display:none!important}
.cs{padding-top:40px;padding-bottom:72px;max-width:860px}
.cs h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.cs .back{font:500 .95rem "Bricolage Grotesque",sans-serif;text-decoration:none;color:var(--mute)}
.cs .meta{margin-top:28px}.cs .focus{margin:8px 0 0}
.fig{margin:28px 0 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}
.fig img{width:100%;height:auto;display:block;border-radius:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:40px}
.q{font:700 1.2rem/1.35 "Bricolage Grotesque",sans-serif;border-left:4px solid var(--acc2);padding-left:14px}
.sec{border-top:1px solid var(--line);margin-top:40px;padding-top:28px}
.sec h2{font-size:1.6rem}.sec p{max-width:40em}
.next{display:block;margin-top:56px;padding:28px;border-radius:16px;background:var(--ink);color:var(--bg);text-decoration:none}
.next .meta{color:inherit;opacity:.7;margin:0}.next b{font:800 1.8rem "Bricolage Grotesque",sans-serif}
.more{display:inline-block;margin-top:14px;padding:9px 18px;font-size:.95rem}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.shot{display:block}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:10;font-family:"Bricolage Grotesque",sans-serif}
.skip:focus{left:8px}
nav a[aria-current="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.btn:hover{opacity:.88}
@media print{header,.btns,.back,.next{display:none}}