:root {
  --ink: #08110d;
  --deep: #061912;
  --green: #006039;
  --mint: #9fd4c2;
  --ivory: #f2f0e8;
  --paper: #faf9f5;
  --gold: #c8a15b;
  --line: rgba(8,17,13,.16);
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --header: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); overflow-x: clip; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--green); color: white; }

.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; background: white; padding: 12px 16px; transition: top .2s; }
.skip-link:focus { top: 12px; }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header); padding: 0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; color:white; transition: background .35s, color .35s, border-color .35s; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(250,249,245,.92); color:var(--ink); border-color:var(--line); backdrop-filter: blur(16px); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { width:34px; height:34px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); font-size:19px; }
.brand-copy { display:flex; flex-direction:column; line-height:1; gap:5px; letter-spacing:.09em; }
.brand-copy strong { font-size:14px; }
.brand-copy small { font-size:8px; opacity:.66; letter-spacing:.16em; }
.desktop-nav { display:flex; align-items:center; gap:28px; font-size:12px; }
.desktop-nav a { text-decoration:none; }
.nav-cta { border:1px solid currentColor; border-radius:999px; padding:11px 16px; }
.menu-button { display:none; background:none; border:0; width:44px; height:44px; padding:12px 7px; }
.menu-button span { display:block; height:1px; background:currentColor; margin:7px 0; }
.mobile-menu { position:fixed; inset:var(--header) 0 auto; z-index:99; background:var(--paper); border-bottom:1px solid var(--line); padding:18px 22px 26px; }
.mobile-menu a { display:block; padding:14px 0; text-decoration:none; font-family:var(--serif); font-size:24px; }

.scrub-hero { height: 430vh; background:#000; }
.hero-sticky { position:sticky; top:0; height:100svh; overflow:hidden; background:#000; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; filter:saturate(.92) contrast(1.08); }
.hero-vignette { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 35%,rgba(0,0,0,.58)); pointer-events:none; }
.hero-grain { position:absolute; inset:0; opacity:.12; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E"); }
.hero-copy { position:absolute; left:clamp(24px,7vw,110px); right:24px; bottom:clamp(70px,11vh,130px); color:white; max-width:900px; transition:opacity .25s ease, transform .25s ease; }
.hero-copy--mid, .hero-copy--end { opacity:0; transform:translateY(22px); }
.eyebrow { margin:0 0 18px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; }
.eyebrow.green { color:var(--green); }
.eyebrow.gold { color:var(--gold); }
h1, h2, h3, p { margin-top:0; }
h1 { margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(66px,11.5vw,178px); line-height:.78; letter-spacing:-.065em; }
h1 em, h2 em { font-weight:400; }
.hero-sub { margin:26px 0 0; font-size:12px; letter-spacing:.08em; opacity:.78; }
.display-line { font-family:var(--serif); font-size:clamp(54px,8vw,120px); line-height:.88; letter-spacing:-.055em; margin:0 0 28px; }
.scroll-meter { position:absolute; right:clamp(20px,4vw,64px); bottom:90px; width:1px; height:120px; background:rgba(255,255,255,.28); }
.scroll-meter i { position:absolute; left:0; bottom:0; width:1px; height:0%; background:white; }
.scroll-label { position:absolute; right:clamp(20px,4vw,64px); bottom:56px; color:white; font-size:8px; letter-spacing:.2em; writing-mode:vertical-rl; transform:translateX(3px); }

.section-shell { width:min(1380px, calc(100% - 48px)); margin-inline:auto; }
.intro { min-height:92vh; display:grid; grid-template-columns:1fr 3fr; align-items:center; gap:40px; padding:120px 0; }
.intro-number { align-self:start; padding-top:42px; font-family:var(--serif); font-size:18px; opacity:.42; }
.intro-copy { max-width:980px; }
.intro h2, .collection h2, .new-copy h2, .heritage h2, .service-copy h2, .appointment h2 { font-family:var(--serif); font-size:clamp(48px,7.5vw,108px); font-weight:400; letter-spacing:-.055em; line-height:.92; margin:0; }
.intro h2 span { color:var(--green); font-style:italic; }
.intro-copy > p:not(.eyebrow) { width:min(680px,100%); font-size:clamp(18px,2vw,26px); line-height:1.45; margin:34px 0; color:#34423b; }
.intro-actions, .appointment-actions { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:999px; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.04em; border:1px solid transparent; }
.button.dark { background:var(--ink); color:white; }
.button.outline { border-color:var(--ink); }
.button.light { background:white; color:var(--ink); }
.button.gold-fill { background:var(--gold); color:#07130d; }
.text-link { text-decoration:none; font-size:13px; border-bottom:1px solid currentColor; padding-bottom:4px; }
.text-link span { margin-left:8px; }
.text-link.light { color:white; }

.collection { background:#e8ebe4; padding:120px 0 90px; overflow:hidden; }
.collection-head { display:flex; justify-content:space-between; align-items:end; gap:24px; }
.collection-head h2 { font-size:clamp(54px,7vw,96px); }
.collection-note { margin:0; font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.5; }
.watch-rail { display:grid; grid-auto-flow:column; grid-auto-columns:min(74vw,560px); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:62px max(24px,calc((100vw - 1380px)/2)) 28px; scrollbar-width:none; }
.watch-rail::-webkit-scrollbar { display:none; }
.watch-card { scroll-snap-align:center; min-height:690px; padding:40px; display:flex; flex-direction:column; justify-content:space-between; border-radius:2px; overflow:hidden; position:relative; }
.watch-card--mint { background:#b9d8cd; }
.watch-card--black { background:#151817; color:white; }
.watch-card--blue { background:#b5c9d4; }
.watch-card--rose { background:#d4b9ad; }
.watch-art { flex:1; min-height:430px; position:relative; display:grid; place-items:center; filter:drop-shadow(0 28px 24px rgba(0,0,0,.18)); transform:scale(.92); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.watch-card:hover .watch-art { transform:scale(1); }
.case { width:230px; height:230px; border:22px solid #d8d9d7; border-radius:50%; position:relative; display:block; background:radial-gradient(circle,#91bfaf 0 60%,#527d6d 61% 62%,#cfd2d0 63% 100%); box-shadow:inset 0 0 0 8px rgba(255,255,255,.28),0 0 0 8px #8a918f; }
.watch-card--black .case { background:radial-gradient(circle,#0d1410 0 60%,#294037 61% 62%,#cfd2d0 63% 100%); }
.watch-card--blue .case { background:radial-gradient(circle,#426c86 0 60%,#274354 61% 62%,#cfd2d0 63% 100%); }
.watch-card--rose .case { background:radial-gradient(circle,#171b19 0 60%,#322923 61% 62%,#c79f86 63% 100%); border-color:#d5b29a; box-shadow:inset 0 0 0 8px rgba(255,255,255,.16),0 0 0 8px #a77a62; }
.case:before { content:""; position:absolute; inset:20px; border-radius:50%; background:repeating-conic-gradient(from -1deg,rgba(255,255,255,.9) 0 1deg,transparent 1deg 30deg); mask:radial-gradient(circle,transparent 0 71%,#000 72% 100%); }
.hand { position:absolute; left:50%; top:50%; transform-origin:0 50%; height:2px; background:#e9ece8; width:68px; }
.h1 { transform:rotate(-58deg); }
.h2 { transform:rotate(23deg); width:88px; }
.case b { position:absolute; width:10px; height:10px; border-radius:50%; background:#fff; left:calc(50% - 5px); top:calc(50% - 5px); }
.strap { position:absolute; width:102px; height:150px; left:50%; transform:translateX(-50%); background:repeating-linear-gradient(90deg,#b9bdba 0 22px,#e4e5e3 22px 28px,#989e9b 28px 52px); border-left:7px solid #a2a7a4; border-right:7px solid #a2a7a4; z-index:-1; }
.strap.top { top:24px; } .strap.bottom { bottom:22px; }
.watch-card--rose .strap { background:repeating-linear-gradient(90deg,#9a735f 0 22px,#d7b198 22px 28px,#b98d74 28px 52px); border-color:#9c715c; }
.bezel { position:absolute; inset:-30px; border:10px solid #202622; border-radius:50%; }
.ring { position:absolute; inset:42px; border:1px solid rgba(255,255,255,.7); border-radius:50%; }
.watch-meta p { font-size:9px; letter-spacing:.18em; opacity:.56; }
.watch-meta h3 { font-family:var(--serif); font-size:52px; font-weight:400; letter-spacing:-.045em; margin:0 0 8px; }
.watch-meta span, .watch-meta strong { display:block; font-size:12px; line-height:1.65; }
.watch-meta strong { margin-top:6px; }
.collection-foot { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.collection-foot p { max-width:480px; margin:0; font-size:11px; opacity:.58; }

.new-2026 { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; gap:8vw; align-items:center; padding:120px 0; }
.new-visual { aspect-ratio:1; position:relative; display:grid; place-items:center; }
.dial-orbit { position:absolute; border:1px solid var(--line); border-radius:50%; }
.dial-orbit.one { inset:4%; animation:spin 34s linear infinite; }
.dial-orbit.two { inset:16%; border-color:rgba(0,96,57,.28); animation:spin 22s linear infinite reverse; }
.dial-orbit.three { inset:29%; border-style:dashed; animation:spin 16s linear infinite; }
.dial-orbit:before { content:""; width:10px; height:10px; border-radius:50%; background:var(--gold); position:absolute; top:50%; left:-5px; }
.dial-core { width:34%; aspect-ratio:1; border-radius:50%; background:var(--deep); color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 25px 80px rgba(6,25,18,.25); }
.dial-core span { font-family:var(--serif); font-size:clamp(56px,7vw,100px); line-height:.8; }
.dial-core small { text-align:center; letter-spacing:.18em; font-size:7px; margin-top:14px; color:#d7c49b; }
.new-copy p:not(.eyebrow) { max-width:570px; margin:30px 0; font-size:18px; line-height:1.55; color:#3a463f; }
@keyframes spin { to { transform:rotate(360deg); } }

.heritage { background:#0b2118; color:white; padding:130px 0 110px; }
.heritage-head { margin-bottom:80px; }
.heritage-head h2 { max-width:1000px; }
.timeline { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.22); }
.timeline article { padding:32px 26px 10px 0; border-right:1px solid rgba(255,255,255,.12); min-height:260px; }
.timeline article:last-child { border-right:0; }
.timeline span { color:var(--gold); font-family:var(--serif); font-size:30px; }
.timeline h3 { margin:70px 0 12px; font-family:var(--serif); font-weight:400; font-size:24px; }
.timeline p { font-size:12px; line-height:1.6; opacity:.66; max-width:250px; }

.service-story { min-height:100vh; position:relative; background:#090909; color:white; display:flex; align-items:center; overflow:hidden; }
.service-media { position:absolute; inset:0; }
.service-media video { width:100%; height:100%; object-fit:cover; }
.service-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.94) 0,rgba(0,0,0,.72) 42%,rgba(0,0,0,.16) 78%); }
.service-copy { position:relative; z-index:2; padding:130px 0; }
.service-copy h2 { max-width:850px; }
.service-copy > p:not(.eyebrow) { width:min(540px,100%); font-size:17px; line-height:1.6; margin:30px 0; color:rgba(255,255,255,.72); }
.service-proof { display:flex; gap:42px; margin:0 0 34px; flex-wrap:wrap; }
.service-proof span { max-width:240px; font-size:11px; line-height:1.55; color:rgba(255,255,255,.64); }
.service-proof strong { display:block; color:white; letter-spacing:.12em; margin-bottom:4px; }

.appointment { min-height:90vh; display:grid; place-items:center; text-align:center; background:var(--deep); color:white; position:relative; overflow:hidden; padding:110px 24px; }
.appointment-ring { position:absolute; width:min(80vw,900px); aspect-ratio:1; border:1px solid rgba(200,161,91,.2); border-radius:50%; }
.appointment-ring:before, .appointment-ring:after { content:""; position:absolute; border:1px solid rgba(200,161,91,.11); border-radius:50%; }
.appointment-ring:before { inset:12%; } .appointment-ring:after { inset:26%; }
.appointment-copy { position:relative; z-index:1; max-width:1100px; }
.appointment h2 { font-size:clamp(56px,8vw,122px); }
.appointment-copy > p:not(.eyebrow) { margin:28px auto 34px; max-width:620px; color:rgba(255,255,255,.72); font-size:17px; line-height:1.55; }
.appointment-actions { justify-content:center; }

.footer { background:#050e0a; color:white; padding:48px clamp(24px,5vw,76px); display:grid; grid-template-columns:1fr auto; gap:24px; align-items:start; border-top:1px solid rgba(255,255,255,.08); }
.footer-brand { display:flex; flex-direction:column; gap:8px; }
.footer-brand strong { letter-spacing:.1em; }
.footer-brand span { font-size:10px; opacity:.56; }
.footer-links { display:flex; gap:24px; font-size:11px; }
.footer-links a { text-decoration:none; }
.concept-note { grid-column:1/-1; margin:30px 0 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); font-size:9px; line-height:1.5; opacity:.38; max-width:760px; }

@media (max-width: 900px) {
  :root { --header: 70px; }
  .desktop-nav { display:none; }
  .menu-button { display:block; color:inherit; }
  .brand-copy strong { font-size:12px; }
  .section-shell { width:min(100% - 32px, 1380px); }
  .scrub-hero { height:360vh; }
  .hero-video { object-position:center center; }
  .hero-copy { left:22px; right:22px; bottom:74px; }
  h1 { font-size:clamp(68px,22vw,118px); }
  .display-line { font-size:clamp(50px,15vw,86px); }
  .scroll-meter { right:18px; bottom:78px; height:92px; }
  .scroll-label { display:none; }
  .intro { grid-template-columns:1fr; min-height:0; padding:94px 0; }
  .intro-number { display:none; }
  .intro h2, .collection h2, .new-copy h2, .heritage h2, .service-copy h2, .appointment h2 { font-size:clamp(50px,14vw,78px); }
  .intro-copy > p:not(.eyebrow) { font-size:18px; }
  .collection { padding:92px 0 68px; }
  .collection-head { align-items:start; flex-direction:column; }
  .watch-rail { grid-auto-columns:86vw; padding-top:44px; }
  .watch-card { min-height:620px; padding:26px; }
  .watch-art { min-height:390px; transform:scale(.8); }
  .watch-meta h3 { font-size:44px; }
  .collection-foot { align-items:flex-start; flex-direction:column; }
  .new-2026 { grid-template-columns:1fr; padding:88px 0; gap:64px; }
  .new-visual { width:min(92vw,580px); margin:auto; }
  .new-copy { order:-1; }
  .timeline { grid-template-columns:1fr; }
  .timeline article { border-right:0; border-bottom:1px solid rgba(255,255,255,.12); min-height:0; padding:28px 0; display:grid; grid-template-columns:90px 1fr; column-gap:18px; }
  .timeline h3 { margin:0 0 8px; }
  .timeline p { grid-column:2; max-width:100%; }
  .service-story { min-height:900px; align-items:end; }
  .service-overlay { background:linear-gradient(0deg,rgba(0,0,0,.96) 0,rgba(0,0,0,.77) 52%,rgba(0,0,0,.18) 100%); }
  .service-media video { object-position:55% center; }
  .service-copy { padding:90px 0 68px; }
  .service-proof { gap:20px; }
  .footer { grid-template-columns:1fr; }
  .footer-links { flex-wrap:wrap; }
}

@media (max-width: 520px) {
  .brand-mark { width:30px; height:30px; font-size:16px; }
  .brand-copy small { display:none; }
  .hero-sub { max-width:240px; line-height:1.5; }
  .watch-card { min-height:570px; }
  .watch-art { min-height:340px; transform:scale(.72); }
  .service-copy > p:not(.eyebrow) { font-size:15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .scrub-hero { height:100svh; }
  .hero-sticky { position:relative; }
  .hero-video { object-position:center; }
  .hero-copy--mid, .hero-copy--end, .scroll-meter, .scroll-label { display:none; }
}
