@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root{--bg:#f3f8f5;--paper:#fffdf8;--ink:#123b3d;--teal:#0f807e;--teal-dark:#0b5556;--muted:#638187;--line:#d9e6e2;--mint:#e5f3ef;--mint2:#d4ebe5;--warm:#fff6dc;--serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--max:1180px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}a{color:inherit}button{font:inherit}body:before{content:"";position:fixed;inset:0 0 auto;height:3px;background:var(--teal);transform:scaleX(var(--progress,0));transform-origin:left;z-index:100}
.nav{position:sticky;top:0;z-index:90;background:rgba(255,253,248,.9);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav-in{max-width:var(--max);margin:auto;padding:15px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.03em;font-size:17px;text-decoration:none}.brand-mark{width:28px;height:28px;border-radius:9px;background:var(--teal);display:grid;place-items:center;color:white;font-weight:700}.navlinks{display:flex;gap:22px;font-size:13px}.navlinks a{text-decoration:none;color:var(--muted);transition:color .2s,transform .2s}.navlinks a:hover,.navlinks a.active{color:var(--teal-dark)}.navlinks a:hover{transform:translateY(-1px)}
.menu-toggle{display:none;width:44px;height:40px;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}.menu-toggle span{width:19px;height:1.5px;background:var(--ink);transition:transform .25s,opacity .2s}.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}.mobile-menu{display:none;max-height:0;overflow:hidden;background:rgba(255,253,248,.98);border-top:0 solid var(--line);transition:max-height .35s ease,border-color .25s}.mobile-menu.open{max-height:420px;border-top-width:1px}.mobile-menu a{display:block;padding:16px 20px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:14px;font-weight:600;transition:background .2s,color .2s,padding-left .2s}.mobile-menu a:hover,.mobile-menu a.active{background:var(--mint);color:var(--teal-dark);padding-left:26px}
.wrap{max-width:var(--max);margin:auto;padding:0 30px}.hero{min-height:92vh;display:grid;align-items:center;padding:90px 0 110px;background:radial-gradient(circle at 80% 15%,#dff3ed 0,transparent 36%),var(--bg)}.eyebrow,.section-kicker{text-transform:uppercase;letter-spacing:.16em;font-size:11px;font-weight:700;color:var(--teal);margin-bottom:22px}.hero h1{font-family:var(--serif);font-size:clamp(64px,10vw,138px);font-weight:400;line-height:.9;letter-spacing:-.045em;margin:0;color:var(--ink)}.hero h1 em{font-style:italic;color:var(--teal)}.hero .intro{font-size:21px;max-width:720px;color:#52727a;margin:30px 0 42px}.meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-width:920px}.meta div{position:relative;padding:18px 18px 18px 42px;border-right:1px solid var(--line)}.meta div:not(:first-child){padding-left:42px}.meta div:last-child{border:0}.meta div::before{content:"";position:absolute;left:0;top:18px;width:24px;height:24px;display:block;opacity:.95;background-repeat:no-repeat;background-position:center;background-size:21px 21px}.meta div:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123b3d' stroke-width='1.5'%3E%3Ccircle cx='12' cy='7.5' r='3.25'/%3E%3Cpath d='M4.5 20.5c.8-3.7 3.4-5.6 7.5-5.6s6.7 1.9 7.5 5.6'/%3E%3C/svg%3E")}.meta div:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123b3d' stroke-width='1.5'%3E%3Crect x='4.5' y='5.5' width='15' height='14' rx='2'/%3E%3Cpath d='M8 3.5v4M16 3.5v4M4.5 9.5h15'/%3E%3C/svg%3E")}.meta div:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123b3d' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23123b3d'/%3E%3C/svg%3E")}.meta div:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123b3d' stroke-width='1.5'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E")}.meta small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.13em;font-weight:700;margin-bottom:5px}.meta strong{font-size:14px}.button{display:inline-flex;align-items:center;gap:14px;margin-top:28px;padding:14px 20px;border-radius:999px;background:var(--teal);border:1px solid var(--teal);color:#fff;text-decoration:none;font-weight:700;font-size:14px;box-shadow:0 10px 26px rgba(15,128,126,.16);transition:transform .25s,box-shadow .25s,background-color .25s,border-color .25s,color .25s}.button:hover,.button:focus-visible{transform:translateY(-2px);background:transparent;color:var(--teal-dark);border-color:var(--teal);box-shadow:0 10px 28px rgba(15,128,126,.10)}.button:focus-visible{outline:3px solid rgba(15,128,126,.22);outline-offset:3px}.button .arrow{font-size:18px;transition:transform .25s}.button:hover .arrow{transform:translate(2px,-2px)}.impact-line{display:flex;align-items:baseline;gap:9px;margin-top:4px;font-size:14px}.impact-line span{font-size:10px;letter-spacing:.14em;color:var(--teal);font-weight:700}
section{padding:120px 0}.section-title{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6vw,78px);line-height:1.02;letter-spacing:-.03em;margin:0 0 25px}.section-title em{color:var(--teal);font-style:italic}.lead{font-size:19px;color:#5b7880;max-width:700px}.problem{background:var(--paper)}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}.quote{font-family:var(--serif);font-size:32px;line-height:1.25;color:var(--teal-dark);padding:30px 0 30px 28px;border-left:3px solid var(--teal)}.bullets{border-top:1px solid var(--line);margin-top:30px}.bullet{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:35px 1fr;gap:15px;transition:padding-left .25s,background-color .25s}.bullet:hover{padding-left:8px;background:linear-gradient(90deg,var(--mint),transparent)}.bullet b{font-size:13px;color:var(--teal)}.bullet p{margin:0;color:#52727a}
.process{background:var(--bg)}.process-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:100px}.timeline{border-top:1px solid var(--line)}.step{display:grid;grid-template-columns:90px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);transition:padding-left .25s,background-color .25s}.step:hover{padding-left:10px;background:linear-gradient(90deg,rgba(229,243,239,.7),transparent)}.step .num{font-family:var(--serif);font-size:24px;color:var(--teal)}.step h3{font-size:16px;margin:0 0 5px}.step p{font-size:14px;color:var(--muted);margin:0}
.visual-section{background:var(--paper);overflow:hidden}.visual-head{max-width:760px;margin-bottom:55px}.visual-head p{color:var(--muted);font-size:17px}.screen{margin:0 auto 100px}.screen.full{max-width:1120px}.screen.desktop{max-width:1080px}.screen.phone-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1020px;align-items:start}.screen img{display:block;width:100%;height:auto}.frame{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 65px rgba(26,67,67,.10);overflow:hidden;cursor:zoom-in;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}.frame:hover{transform:translateY(-7px);box-shadow:0 30px 75px rgba(26,67,67,.16)}.screen.phone-row .frame{border-radius:20px}.caption{display:flex;justify-content:space-between;gap:20px;padding:15px 4px;color:var(--muted);font-size:12px}.caption strong{color:var(--ink)}
.story{display:grid;grid-template-columns:260px 1fr;gap:75px;max-width:1020px;margin:0 auto 110px;align-items:start}.story-sticky{position:sticky;top:105px}.story-index{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--teal);margin-bottom:10px}.story h3{font-family:var(--serif);font-weight:400;font-size:35px;line-height:1.1;margin:0 0 16px}.story p{color:#5b7880;margin:0 0 18px}.story .note{background:var(--warm);border:1px solid #eddcae;border-radius:16px;padding:20px;color:#725d2d;font-size:13px}
.system{background:var(--bg)}.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.reflection{background:var(--teal-dark);color:#fff}.reflection .section-kicker{color:#a9d9d0}.reflection .section-title{color:#fff;max-width:800px}.reflection p{color:#d4e9e4;max-width:720px;font-size:18px}.access-reflection{padding-left:18px;border-left:2px solid #72bdb3}.takeaway{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:55px}.take{border-top:1px solid rgba(255,255,255,.25);padding-top:20px;transition:transform .25s}.take:hover{transform:translateY(-3px)}.take small{color:#a9d9d0;text-transform:uppercase;letter-spacing:.14em;font-size:10px;font-weight:700}.take p{font-size:16px;margin-top:8px}.reflection .button{background:#fff;border-color:#fff;color:var(--teal-dark);box-shadow:none}.reflection .button:hover,.reflection .button:focus-visible{background:transparent;color:#fff;border-color:#fff;box-shadow:none}footer{padding:80px 0;text-align:center;background:var(--paper);border-top:1px solid var(--line)}footer .brand{justify-content:center;margin-bottom:12px}footer p{color:var(--muted);font-size:13px}.footer-button{margin-top:15px;display:inline-block;color:var(--teal);font-weight:700;text-decoration:none;transition:transform .2s}.footer-button:hover{transform:translateY(-2px)}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none}.lightbox{position:fixed;inset:0;background:rgba(8,35,36,.9);z-index:200;display:grid;place-items:center;padding:4vh 4vw;opacity:0;pointer-events:none;transition:.25s}.lightbox.open{opacity:1;pointer-events:auto}.lightbox img{max-width:92vw;max-height:90vh;border-radius:14px;box-shadow:0 30px 100px rgba(0,0,0,.35)}.close{position:absolute;right:25px;top:20px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;width:44px;height:44px;border-radius:50%;font-size:24px;cursor:pointer}
@media(max-width:800px){.navlinks{display:none}.menu-toggle{display:flex}.mobile-menu{display:block}.nav-in,.wrap{padding-left:20px;padding-right:20px}.hero{min-height:auto;padding:75px 0}.meta{grid-template-columns:1fr 1fr}.meta div:nth-child(2){border-right:0}.meta div:nth-child(1),.meta div:nth-child(2){border-bottom:1px solid var(--line)}.problem-grid,.process-grid,.system-grid{grid-template-columns:1fr;gap:45px}.screen.phone-row{grid-template-columns:1fr;max-width:500px}.story{grid-template-columns:1fr;gap:20px;margin-bottom:75px}.story-sticky{position:static}.takeaway{grid-template-columns:1fr}.section-title{font-size:48px}}
@media(max-width:640px){.nav-in,.wrap{padding-left:18px;padding-right:18px}.hero{padding:64px 0 72px}.hero h1{font-size:clamp(56px,18vw,92px)}.hero .intro{font-size:17px;line-height:1.55}.meta{grid-template-columns:1fr}.meta div,.meta div:not(:first-child){padding:14px 0 14px 42px!important;border-right:0;border-bottom:1px solid var(--line)}.meta div:last-child{border-bottom:0}.meta div::before{top:14px}.impact-line{align-items:flex-start;flex-direction:column;gap:2px}.screen{padding:0 2px;margin-bottom:72px}.screen.full{max-width:100%}.screen.full:has(img[src*="09.png"]){max-width:310px}.screen.full:has(img[src*="10.png"]){max-width:100%}.screen.phone-row{grid-template-columns:1fr;max-width:310px;gap:28px}.screen.phone-row .frame{max-width:310px;margin:auto}.caption{padding:10px 2px;font-size:10px}.story{margin-bottom:68px}.story h3{font-size:31px}section{padding:76px 0}.section-title{font-size:clamp(42px,12vw,56px)}.button{width:auto;justify-content:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none}.frame,.button,.bullet,.step,.take,.footer-button,.navlinks a,.mobile-menu a{transition:none}}