:root { --ink:#123347; --cream:#edf9fa; --paper:#ffffff; --moss:#006699; --rose:#3399cc; --sand:#66cccc; --line:rgba(0,102,153,.18); --serif:"Playfair Display",Georgia,serif; --sans:"DM Sans",Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } a { color:inherit; text-decoration:none; } .section-shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; } .site-header { min-height:84px; width:min(1280px,calc(100% - 48px)); margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; } .brand-logo { display:block; width:112px; height:auto; max-height:58px; } .main-nav { display:flex; align-items:center; gap:28px; font-size:.87rem; } .nav-cta { padding:10px 16px; border:1px solid var(--ink); border-radius:99px; } .menu-button { display:none; border:0; background:none; font:inherit; }
.hero { min-height:650px; display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; padding:72px 0; }.eyebrow { margin:0 0 18px; font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; color:#627269; }.hero h1,.section-intro h2,.services h2,.story h2,.contact h2 { margin:0; font:500 clamp(3rem,5.8vw,5.55rem)/.98 var(--serif); letter-spacing:-.055em; }.hero h1 em,h2 em { color:var(--moss); font-weight:500; }.hero-text { max-width:440px; margin:30px 0; color:#5c605c; font-size:1.06rem; line-height:1.7; }.hero-actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 21px; border:0; cursor:pointer; font:600 .84rem var(--sans); border-radius:2px; }.button-primary { color:#fff; background:var(--moss); }.text-link { display:inline-flex; gap:8px; align-items:center; font-size:.85rem; font-weight:600; }.text-link span { font-size:1.1rem; }.hero-proof { display:flex; gap:16px; flex-wrap:wrap; margin-top:56px; font-size:.72rem; color:#5a5e5a; }.hero-proof span + span { padding-left:16px; border-left:1px solid var(--line); }
.hero-visual { position:relative; display:grid; min-height:520px; overflow:hidden; place-items:center; background:linear-gradient(135deg,#66cccc,#3399cc); }.hero-frame { position:relative; z-index:1; width:68%; aspect-ratio:4/5; display:flex; align-items:end; padding:28px; background:linear-gradient(145deg,#3366cc,#006699); color:white; font:500 2.35rem/1.05 var(--serif); }.orbit-one,.orbit-two { position:absolute; border:1px solid rgba(255,255,255,.55); border-radius:50%; }.orbit-one { width:430px; height:430px; }.orbit-two { width:300px; height:300px; transform:translate(70px,-58px); }.visual-note { position:absolute; z-index:2; right:23px; bottom:21px; margin:0; color:#fff; text-align:right; font-size:.68rem; line-height:1.45; letter-spacing:.07em; text-transform:uppercase; }
.featured { padding:105px 0; }.section-intro { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:46px; }.section-intro h2,.services h2,.story h2,.contact h2 { font-size:clamp(2.5rem,4vw,4.25rem); }.collection-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }.collection-card { position:relative; overflow:hidden; min-height:390px; padding:22px; display:flex; flex-direction:column; justify-content:end; }.collection-card p { position:absolute; top:0; left:22px; font-size:.72rem; }.collection-card h3 { margin:0 0 4px; font:500 2rem var(--serif); }.collection-card span { font-size:.78rem; }.card-rose { background:#66cccc; }.card-moss { color:#fff; background:#006699; }.card-sand { background:#d7f2f2; }.glasses { position:absolute; top:35%; left:50%; width:55%; height:36%; transform:translate(-50%,-50%); }.glasses:before,.glasses:after { content:""; position:absolute; top:20%; width:37%; height:70%; border:11px solid currentColor; }.glasses:before { left:0; }.glasses:after { right:0; }.glasses-round:before,.glasses-round:after { border-radius:50%; }.glasses-square:before,.glasses-square:after { border-radius:11px; }.glasses-cat:before,.glasses-cat:after { border-radius:40% 12% 40% 12%; }.glasses:after { box-shadow:none; }.glasses::selection { background:transparent; }
.services { padding:105px 0; background:var(--cream); }.services-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:100px; }.service-list article { display:flex; gap:25px; padding:24px 0; border-top:1px solid var(--line); }.service-list article:last-child { border-bottom:1px solid var(--line); }.service-list span { color:var(--moss); font:1.4rem var(--serif); }.service-list h3 { margin:0 0 8px; font-size:1.05rem; }.service-list p { margin:0; color:#4f6876; line-height:1.6; font-size:.92rem; }.story { display:grid; grid-template-columns:1fr 1fr; padding:110px 0; }.story-card { padding:65px clamp(30px,6vw,90px); background:var(--moss); color:#fff; }.story-card .eyebrow { color:#b8eeee; }.story-card em { color:#66cccc; }.story-card > p:not(.eyebrow) { max-width:350px; margin:26px 0; line-height:1.7; color:#eefbfc; }.story-image { display:grid; min-height:470px; place-items:center; background:linear-gradient(125deg,#66cccc,#3366cc); color:#fff; text-align:center; font:.9rem/1.6 var(--sans); }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:110px 0; }.contact-copy > p:not(.eyebrow) { max-width:350px; line-height:1.7; color:#61645f; }.contact-details { margin-top:46px; }.contact-details p { margin:0 0 20px; font-size:.88rem; line-height:1.65; }.contact-form { display:grid; gap:17px; padding:34px; background:var(--cream); }.contact-form label { display:grid; gap:7px; font-size:.75rem; font-weight:700; }.contact-form input,.contact-form select,.contact-form textarea { width:100%; border:1px solid #c8c5be; background:#fffdf9; padding:12px; resize:vertical; font:400 .92rem var(--sans); }.form-status { min-height:20px; margin:0; font-size:.82rem; }.site-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:31px 0; border-top:1px solid var(--line); font-size:.75rem; color:#62645f; }.site-footer > div { display:flex; gap:16px; }
@media (max-width:800px) { .site-header { min-height:70px; } .menu-button { display:block; } .main-nav { display:none; position:absolute; top:70px; right:24px; z-index:5; width:220px; padding:22px; align-items:start; flex-direction:column; background:var(--paper); box-shadow:0 10px 25px rgba(0,0,0,.12); }.main-nav.is-open { display:flex; }.hero,.services-grid,.contact { grid-template-columns:1fr; gap:45px; }.hero { padding:55px 0; }.hero-visual { min-height:420px; }.collection-grid { grid-template-columns:1fr; }.collection-card { min-height:320px; }.section-intro { align-items:start; flex-direction:column; }.story { grid-template-columns:1fr; }.story-card { padding:55px 34px; }.story-image { min-height:310px; }.contact { padding:80px 0; }.site-footer { align-items:flex-start; flex-direction:column; } }