@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root { --ink:#20252a; --muted:#687078; --paper:#f5f4ef; --line:#d9d8d1; --teal:#0e7773; --coral:#dd7557; --serif:'Playfair Display', Georgia, serif; --sans:'DM Sans', Arial, sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.6; }
.shell { width:min(1120px, calc(100% - 48px)); margin:0 auto; }
.site-header { width:min(1120px, calc(100% - 48px)); margin:0 auto; height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); font-weight:700; font-size:1.1rem; letter-spacing:-.04em; text-decoration:none; }
.brand span { color:var(--teal); }
nav { display:flex; gap:30px; } nav a { color:var(--muted); font-family:var(--mono); font-size:.72rem; text-decoration:none; } nav a:hover { color:var(--teal); }
.hero { min-height:620px; position:relative; padding:130px 0 150px; overflow:hidden; }
.eyebrow,.section-label { color:var(--teal); font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:720px; margin:22px 0; font-size:clamp(3.5rem,8vw,7.5rem); line-height:.95; letter-spacing:-.075em; font-weight:600; } h1 em,h2 em { color:var(--coral); font-family:var(--serif); font-weight:600; letter-spacing:-.06em; }
.lede { max-width:490px; color:var(--muted); font-size:1.15rem; }
.button { display:inline-flex; gap:28px; align-items:center; margin-top:20px; padding:14px 19px; color:#fff; background:var(--ink); font-family:var(--mono); font-size:.75rem; text-decoration:none; transition:transform .2s, background .2s; } .button:hover { background:var(--teal); transform:translateY(-2px); }
.hero-orbit { position:absolute; right:4%; top:135px; width:340px; height:340px; border:1px solid var(--line); border-radius:50%; opacity:.8; } .hero-orbit:before,.hero-orbit:after { content:''; position:absolute; inset:42px; border:1px solid var(--line); border-radius:50%; } .hero-orbit:after { inset:100px; } .hero-orbit span { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--coral); } .hero-orbit span:nth-child(1){top:12%;left:47%}.hero-orbit span:nth-child(2){right:4%;top:60%;background:var(--teal)}.hero-orbit span:nth-child(3){bottom:14%;left:19%;width:6px;height:6px}
section { border-bottom:1px solid var(--line); } .story,.products,.principles { padding:100px 0; } .story-grid { display:grid; grid-template-columns:1fr 1fr; gap:120px; margin-top:42px; } h2 { font-size:clamp(2.5rem,5vw,4.6rem); line-height:.98; letter-spacing:-.07em; font-weight:600; } .story-grid p { color:var(--muted); max-width:470px; }
.product-card { position:relative; display:grid; grid-template-columns:90px 1fr 180px; gap:30px; align-items:center; margin-top:42px; padding:48px; background:#e7e7df; overflow:hidden; } .product-mark { display:grid; place-items:center; width:66px; height:66px; border-radius:50%; color:#fff; background:var(--teal); font-family:var(--serif); font-size:2.5rem; } .product-copy h2 { margin:4px 0 16px; } .product-copy p:not(.eyebrow) { max-width:530px; color:var(--muted); } .status { display:inline-flex; align-items:center; gap:9px; color:var(--teal); font-family:var(--mono); font-size:.7rem; } .status i { width:7px; height:7px; border-radius:50%; background:var(--teal); }
.product-wave { display:flex; align-items:center; justify-content:center; gap:7px; height:100px; } .product-wave i { width:3px; height:22px; background:var(--teal); border-radius:5px; } .product-wave i:nth-child(2n){height:50px}.product-wave i:nth-child(3n){height:76px}.product-wave i:nth-child(5n){height:34px}
.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:42px; background:var(--line); } article { min-height:230px; padding:28px; background:var(--paper); } article strong { color:var(--coral); font-family:var(--mono); font-size:.75rem; } article h3 { margin:40px 0 8px; font-size:1.35rem; } article p { color:var(--muted); font-size:.95rem; }
.contact { display:flex; justify-content:space-between; align-items:end; padding:110px 0 125px; } .contact h2 { margin:28px 0 0; } .contact-link { color:var(--ink); font-family:var(--mono); font-size:.8rem; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:8px; } .contact-link:hover { color:var(--teal); border-color:var(--teal); }
.site-footer { display:flex; justify-content:space-between; padding:26px 0 34px; color:var(--muted); font-family:var(--mono); font-size:.68rem; }
@media (max-width:720px) { .shell,.site-header { width:min(100% - 32px, 1120px); } .site-header { height:72px; } nav { gap:14px; } nav a { font-size:.63rem; } .hero { min-height:650px; padding:100px 0; } .hero-orbit { width:230px; height:230px; top:390px; right:-35px; } .story-grid,.product-card { grid-template-columns:1fr; gap:24px; } .product-card { padding:30px; } .product-mark { width:52px; height:52px; font-size:2rem; } .product-wave { justify-content:flex-start; } .principle-grid { grid-template-columns:1fr; } .contact { display:block; padding:85px 0; } .contact-link { display:inline-block; margin-top:28px; } }