:root{color-scheme:light;--paper:#F4F1EB;--mist:#D4DEDE;--rain:#7E9BA7;--ink:#344C5C;--lilac:#BCA6BD;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--mist);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button{font:inherit}.hero{position:relative;min-height:680px;height:100svh;isolation:isolate;overflow:hidden;background:#e4e9e5}.weather{position:absolute;inset:0;overflow:hidden;z-index:-1;background:radial-gradient(ellipse at 48% 34%,#F4F1EB 0%,#F0F0E9 22%,#E2E8E5 54%,#D4DEDE 84%)}.wash{position:absolute;inset:-15%;pointer-events:none}.wash-blue{background:radial-gradient(ellipse at 98% 90%,#7e9ba74d,transparent 51%),radial-gradient(ellipse at 0% 76%,#7e9ba72b,transparent 45%);animation:water-drift 24s ease-in-out infinite alternate}.wash-lilac{background:radial-gradient(ellipse at 75% 94%,#bca6bd40,transparent 36%),radial-gradient(ellipse at 4% 0%,#bca6bd1c,transparent 37%);animation:water-drift 28s ease-in-out infinite alternate-reverse}.water{width:100%;height:100%;position:absolute;inset:0}.water-fill{fill:#7e9ba7;opacity:.065}.contours,.corner-lines{fill:none;stroke:#678b99;stroke-width:1;opacity:.17;vector-effect:non-scaling-stroke}.corner-lines{opacity:.12}.clear-space{position:absolute;inset:0;background:radial-gradient(ellipse 31% 34% at 50% 45%,#f4f1eb3d,transparent);pointer-events:none}canvas{position:absolute;inset:0;width:100%;height:100%}.masthead{position:absolute;top:36px;left:48px;right:48px;display:flex;align-items:center;justify-content:space-between}.brand-symbol{display:inline-flex;padding:7px;margin:-7px;border-radius:7px}.studio-label{font-size:12px;letter-spacing:.16em;font-weight:500}.intro{position:absolute;top:46%;left:24px;right:24px;transform:translateY(-50%);text-align:center;display:flex;align-items:center;flex-direction:column}h1{font-family:"Didot","Bodoni 72","Bodoni MT","Times New Roman",serif;font-weight:400;font-size:clamp(88px,10.4vw,152px);letter-spacing:-.065em;line-height:1.08;margin:0 0 26px;padding-right:.06em}.brand-dot{color:#7e9ba7}.intro p{font-size:16px;line-height:1.9;font-weight:400;letter-spacing:.12em;margin:0 0 39px}.explore{min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:28px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);padding:0 25px 0 29px;border-radius:5px;font-size:14px;font-weight:500;letter-spacing:.06em;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s}.explore:hover{background:#293f4e;transform:translateY(-2px);box-shadow:0 6px 18px #344c5c16}.explore svg{transition:transform .2s}.explore:hover svg{transform:translateX(3px)}a:focus-visible,button:focus-visible{outline:3px solid var(--ink);outline-offset:5px}.edge-notes{position:absolute;bottom:30px;left:48px;right:48px;display:flex;align-items:center;justify-content:space-between;gap:16px}.footnote{font-size:11px;letter-spacing:.12em}.motion-toggle{color:var(--ink);display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #344c5c40;background:#f4f1eb38;border-radius:24px;min-height:40px;min-width:127px;padding:0 14px;cursor:pointer;font-size:11px;letter-spacing:.05em}.motion-toggle:hover{background:#f4f1eb88}.motion-toggle svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.play-icon{display:none}.paused .pause-icon{display:none}.paused .play-icon{display:block}.paused .wash{animation-play-state:paused}@keyframes water-drift{from{transform:translate(-1%,-1%) scale(1)}to{transform:translate(2%,2%) scale(1.05)}}
@media(min-width:1800px){.intro{top:47%}.masthead{left:64px;right:64px}.edge-notes{left:64px;right:64px}}
@media(max-width:600px){.hero{min-height:540px}.masthead{top:26px;left:25px;right:25px}.studio-label{font-size:10px;letter-spacing:.12em}.intro{top:45.5%;left:18px;right:18px}h1{font-size:clamp(72px,19vw,112px);margin-bottom:25px}.intro p{font-size:13px;letter-spacing:.06em;margin-bottom:32px}.explore{min-height:50px;padding:0 22px 0 25px;gap:26px;font-size:13px}.edge-notes{left:25px;right:25px;bottom:22px}.footnote{max-width:130px;line-height:1.9;font-size:10px;letter-spacing:.08em}.motion-toggle{min-width:115px;font-size:10px}.water{width:165%;left:-34%}.clear-space{background:radial-gradient(ellipse 60% 30% at 50% 42%,#f4f1eb55,transparent)}}
@media(max-height:600px) and (min-width:601px){.hero{min-height:430px}.masthead{top:20px}.intro{top:47%}h1{font-size:82px;margin-bottom:10px}.intro p{font-size:13px;margin-bottom:20px}.edge-notes{bottom:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.explore:hover{transform:none}}

/* Reference-led graphic rain: matte ground, ink arcs, no flowing landscape. */
.weather{background:#F4F1EB}.wash-blue{background:radial-gradient(ellipse at 95% 95%,#D4DEDE88,transparent 58%),radial-gradient(ellipse at 0% 10%,#D4DEDE55,transparent 35%)}.wash-lilac{opacity:.35}.clear-space{background:radial-gradient(ellipse 29% 30% at 50% 43%,#f4f1ebee 5%,#f4f1eb77 55%,transparent 100%)}
@media(max-width:600px){.clear-space{background:radial-gradient(ellipse 55% 25% at 50% 43%,#f4f1ebee,#f4f1eb77 70%,transparent)}}

/* Focused product entry: gentle lift, arrow travel and a passing highlight. */
.explore{position:relative;overflow:hidden;isolation:isolate;transition:background .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.explore svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.explore:focus-visible{background:#293f4e;box-shadow:0 8px 24px #344c5c24}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .explore::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#f4f1eb1f 50%,transparent 80%);transform:translateX(-120%);transition:transform .6s ease}
 .explore:hover{transform:translateY(-3px);box-shadow:0 8px 24px #344c5c24}
 .explore:hover svg{transform:translateX(5px)}
 .explore:hover::before{transform:translateX(120%)}
 .explore:active{transform:translateY(-1px);box-shadow:0 3px 10px #344c5c18}
}