:root { --ink:#10201e; --paper:#f7f6f0; --evergreen:#0c1817; --lime:#d2ee68; --clay:#d7724d; --line:rgba(16,32,30,.18); --muted:#55615d; --max:1180px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size:16px; line-height:1.55; } a { color:inherit; } a:focus-visible { outline:3px solid var(--clay); outline-offset:4px; } .skip-link { background:var(--lime); color:var(--evergreen); left:1rem; padding:.7rem 1rem; position:fixed; top:-4rem; z-index:10; } .skip-link:focus { top:1rem; }
.site-header, main > section, .site-footer, .legal-page { max-width:var(--max); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); } .site-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .brand { display:flex; align-items:center; gap:.65rem; font-size:.93rem; font-weight:650; letter-spacing:-.02em; text-decoration:none; white-space:nowrap; } .brand b { font-weight:500; opacity:.65; } .brand-mark { width:29px; height:29px; color:var(--evergreen); } nav { display:flex; align-items:center; gap:clamp(.85rem,2vw,1.65rem); } nav a { color:var(--muted); font-size:.88rem; text-decoration:none; } nav a:hover { color:var(--ink); }
.hero { min-height:610px; display:grid; grid-template-columns:1.04fr .96fr; align-items:center; gap:4rem; padding-block:5rem 6rem; } .eyebrow { color:#657332; font-size:.72rem; font-weight:750; letter-spacing:.12em; margin:0 0 1.1rem; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:Georgia, "Times New Roman", serif; font-weight:400; letter-spacing:-.045em; line-height:.98; } h1 { font-size:clamp(3.6rem,7vw,6.5rem); max-width:720px; margin-bottom:1.5rem; } h2 { font-size:clamp(2.5rem,5vw,4.5rem); margin-bottom:1.5rem; } .intro { color:var(--muted); font-size:1.14rem; max-width:530px; } .actions { display:flex; align-items:center; gap:1.4rem; margin-top:2.25rem; } .button { background:var(--evergreen); color:white; display:inline-flex; gap:1rem; padding:.88rem 1.1rem; text-decoration:none; } .button:hover { background:#213a36; } .text-link { font-size:.93rem; text-underline-offset:4px; }
.hero-art { background:var(--evergreen); height:460px; position:relative; overflow:hidden; color:white; isolation:isolate; } .hero-art p { bottom:2.1rem; font-family:Georgia,serif; font-size:1.4rem; left:2.2rem; line-height:1; margin:0; position:absolute; z-index:2; } .orbit { border:1px solid rgba(210,238,104,.48); border-radius:50%; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); } .orbit-one { width:260px; height:260px; } .orbit-two { width:410px; height:410px; } .orbit-three { width:580px; height:580px; } .art-core { background:var(--lime); border-radius:50%; color:var(--evergreen); display:flex; flex-direction:column; height:112px; justify-content:center; left:50%; position:absolute; text-align:center; top:45%; transform:translate(-50%,-50%); width:112px; z-index:1; } .art-core span { font-family:Georgia,serif; font-size:2.1rem; letter-spacing:-.1em; line-height:.8; } .art-core small { font-size:.56rem; font-weight:700; letter-spacing:.12em; margin-top:.35rem; }
.statement { border-top:1px solid var(--line); padding-block:7rem; } .statement-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,9vw,10rem); } .statement-grid h2 { margin:0; } .statement-grid p { color:var(--muted); font-size:1.05rem; } .statement-grid p + p { margin-top:1.2rem; }
.products { border-top:1px solid var(--line); padding-block:6.5rem; } .section-heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:3rem; } .section-heading h2 { margin:0; } .product-card { background:#e4e5dc; display:grid; grid-template-columns:.8fr 1.2fr; min-height:385px; } .product-icon { align-items:center; background:var(--clay); display:flex; gap:12px; justify-content:center; } .product-icon span { background:var(--evergreen); display:block; height:24px; width:22px; } .product-icon span:nth-child(2) { height:74px; } .product-copy { align-self:center; padding:clamp(2rem,5vw,5rem); } .product-label { color:#7c402a; font-size:.72rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; } .product-copy h3 { font-size:clamp(2.5rem,4vw,4rem); margin-bottom:1rem; } .product-copy > p:not(.product-label) { color:var(--muted); max-width:510px; } .arrow-link { display:inline-flex; gap:.75rem; margin-top:1rem; text-underline-offset:5px; }
.iphone { background:var(--lime); display:grid; grid-template-columns:1fr 1fr; gap:3rem; margin-block:0; padding-block:5rem; } .iphone h2 { margin:0; } .iphone > p { align-self:end; font-size:1.1rem; margin:0; max-width:510px; }.contact { padding-block:8rem; }.contact h2 { max-width:650px; }.email { font-family:Georgia,serif; font-size:clamp(1.55rem,3vw,2.4rem); text-decoration-thickness:1px; text-underline-offset:7px; }.email span { font-family:inherit; font-size:.8em; }.legal-name { color:var(--muted); font-size:.9rem; margin:2rem 0 0; }.site-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:1rem; padding-block:1.75rem; }.site-footer p { color:var(--muted); font-size:.78rem; margin:0; }.site-footer nav a { font-size:.78rem; }
.legal-page { max-width:850px; min-height:calc(100vh - 200px); padding-block:5rem 7rem; }.legal-page h1 { font-size:clamp(3.4rem,7vw,5.8rem); margin-bottom:.85rem; }.updated { color:var(--muted); font-size:.9rem; }.legal-copy { margin-top:4rem; }.legal-copy h2 { font-size:1.8rem; margin:2.5rem 0 .7rem; }.legal-copy p { color:#34413d; max-width:700px; }.legal-copy a { color:#36533d; text-underline-offset:3px; }
@media (max-width:720px) { .site-header { min-height:74px; } .site-header nav { gap:.8rem; }.site-header nav a { font-size:.76rem; }.brand { font-size:.78rem; }.brand-mark { width:24px; }.hero { grid-template-columns:1fr; gap:2.7rem; min-height:auto; padding-block:3.2rem 4.5rem; }.hero-art { height:350px; }.orbit-two { width:340px; height:340px; }.orbit-three { width:470px; height:470px; }.statement,.products { padding-block:4.5rem; }.statement-grid,.iphone,.product-card { grid-template-columns:1fr; gap:1rem; }.product-icon { min-height:190px; }.iphone { padding-block:3.5rem; }.contact { padding-block:5rem; }.site-footer { align-items:flex-start; flex-direction:column; }.legal-page { padding-block:3.5rem 5rem; }.section-heading { display:block; }.section-heading .eyebrow { margin-bottom:.7rem; } }
@media (max-width:430px) { .site-header { align-items:flex-start; flex-direction:column; gap:.45rem; padding-top:1.15rem; padding-bottom:1rem; }.site-header nav { margin-left:35px; }.hero { padding-top:2.5rem; } }