:root { --ink:#14231d; --cream:#f4f0e9; --paper:#fffdf9; --moss:#57725c; --lime:#d9f349; --rust:#e86238; --line:rgba(20,35,29,.17); --serif:"Playfair Display",Georgia,serif; --sans:"Plus Jakarta Sans",Arial,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font:500 16px/1.6 var(--sans); } a { color:inherit; } .skip-link { position:absolute; left:-9999px; top:0; z-index:10; background:var(--lime); padding:.7rem 1rem; } .skip-link:focus { left:1rem; top:1rem; }
.site-header { max-width:1280px; margin:auto; min-height:84px; padding:0 4vw; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); } .wordmark { text-decoration:none; font:800 1rem/1 var(--sans); letter-spacing:.08em; } .wordmark span { display:inline-grid; place-items:center; width:2.25rem; height:2.25rem; margin-right:.35rem; border-radius:50%; background:var(--ink); color:var(--lime); font:500 .65rem var(--mono); } nav { display:flex; align-items:center; gap:1.35rem; } nav a { text-decoration:none; font-size:.79rem; font-weight:700; } nav a:hover, nav a[aria-current="page"] { color:var(--moss); } .nav-cta { padding:.55rem .85rem; border:1px solid var(--ink); border-radius:99px; } .menu-toggle { display:none; }
main { max-width:1280px; margin:auto; } .hero { min-height:590px; padding:8vw 4vw 7vw; display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; } .eyebrow { margin:0 0:0; margin-bottom:1.05rem; color:var(--moss); font:500 .72rem/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; } h1,h2 { margin:.1em 0 .35em; font-family:var(--serif); line-height:1.02; letter-spacing:-.045em; } h1 { font-size:clamp(3.5rem,8vw,7.6rem); } h2 { font-size:clamp(2rem,4vw,3.5rem); } h1 em { color:var(--moss); } .lede { max-width:38rem; font-size:1.08rem; } .actions { display:flex; align-items:center; gap:1.5rem; margin-top:2rem; } .button { display:inline-block; border:0; border-radius:99px; padding:.9rem 1.25rem; background:var(--ink); color:var(--paper); font:700 .82rem var(--sans); text-decoration:none; cursor:pointer; } .button:hover { background:var(--moss); } .text-link,.arrow-link { font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; } .hero-art { min-height:390px; position:relative; overflow:hidden; background:var(--moss); border-radius:48% 48% 5% 48%; } .disc { position:absolute; width:68%; aspect-ratio:1; right:8%; top:15%; border-radius:50%; background:var(--lime); } .arc { position:absolute; display:block; border:2px solid var(--ink); border-radius:50%; } .arc-one { width:70%; height:42%; left:-17%; bottom:18%; transform:rotate(-35deg); } .arc-two { width:86%; height:38%; right:-28%; top:10%; transform:rotate(-32deg); } .hero-label { position:absolute; left:10%; bottom:10%; color:var(--paper); font:500 .72rem/1.4 var(--mono); letter-spacing:.12em; }
.proposal-note { margin:0 4vw; padding:1.1rem 1.35rem; border-left:4px solid var(--rust); background:#f9e6da; font-size:.87rem; } .proposal-note p { margin:0; } .split-section { padding:9vw 20% 9vw 4vw; } .split-section p:not(.eyebrow) { max-width:42rem; } .dark-band { display:grid; grid-template-columns:1fr 1fr auto; gap:3rem; align-items:end; padding:5vw 4vw; background:var(--ink); color:var(--paper); } .dark-band .eyebrow { color:var(--lime); } .dark-band h2 { margin:0; } .button-light { background:var(--lime); color:var(--ink); white-space:nowrap; }
.page-intro { padding:9vw 4vw 5vw; max-width:850px; } .price-list { margin:0 4vw 7vw; display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); } .price-list article { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:1.5rem 0; border-bottom:1px solid var(--line); } .price-list article:nth-child(odd) { padding-right:2rem; border-right:1px solid var(--line); } .price-list article:nth-child(even) { padding-left:2rem; } .price-list h2 { font-size:1.65rem; } .price { white-space:nowrap; font:500 1.1rem var(--mono); } .price small { font-size:.6rem; } .contact-grid { display:grid; grid-template-columns:repeat(3,1fr); margin:0 4vw 5vw; border-top:1px solid var(--line); } .contact-grid article { min-height:220px; padding:2rem 1.5rem 2rem 0; border-bottom:1px solid var(--line); } .contact-grid article+article { padding-left:1.5rem; border-left:1px solid var(--line); } .contact-grid h2 { font-size:1.8rem; } .hours-confirm { margin:0 4vw 7vw; padding:4vw; background:var(--moss); color:var(--paper); } .hours-confirm .eyebrow { color:var(--lime); }.hours-confirm h2 { max-width:34rem; }.hours-confirm p:not(.eyebrow) { max-width:42rem; }.faq-list { max-width:850px; padding:0 4vw 7vw; }.faq-list details { border-top:1px solid var(--line); padding:1.2rem 0; }.faq-list details:last-child { border-bottom:1px solid var(--line); }.faq-list summary { cursor:pointer; font:700 1.05rem var(--sans); }.faq-list p { max-width:680px; }.booking-panel { min-height:580px; padding:10vw 4vw; background:var(--moss); color:var(--paper); }.booking-panel .eyebrow { color:var(--lime); }.booking-panel .lede { max-width:600px; }.fine-print { max-width:560px; font-size:.78rem; opacity:.8; } dialog { max-width:530px; padding:2.5rem; border:0; border-radius:1rem; color:var(--ink); box-shadow:0 2rem 5rem rgba(0,0,0,.35); } dialog::backdrop { background:rgba(20,35,29,.7); }.dialog-close { float:right; border:0; background:transparent; cursor:pointer; font-size:2rem; } footer { display:flex; justify-content:space-between; gap:2rem; padding:2.5rem 4vw; background:var(--paper); font-size:.75rem; }footer p:last-child { max-width:480px; }
@media (max-width:760px) { .site-header { min-height:70px; position:relative; }.menu-toggle { display:block; border:0; background:none; font:700 .78rem var(--sans); text-transform:uppercase; }nav { display:none; position:absolute; z-index:3; top:69px; left:0; right:0; padding:1.2rem 4vw 1.5rem; background:var(--paper); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:1rem; }nav.is-open { display:flex; }.hero { grid-template-columns:1fr; min-height:unset; padding-top:16vw; }.hero-art { min-height:260px; }.dark-band,.contact-grid { grid-template-columns:1fr; gap:1rem; }.dark-band { align-items:start; }.price-list { grid-template-columns:1fr; }.price-list article:nth-child(odd),.price-list article:nth-child(even) { padding-left:0; padding-right:0; border-right:0; }.contact-grid article+article { padding-left:0; border-left:0; }.split-section { padding-right:4vw; }footer { flex-direction:column; gap:.4rem; }footer p { margin:0; } }