:root { --ink:#17302b; --ink-soft:#315049; --paper:#f7f3eb; --cream:#efe9dc; --butter:#d7af58; --clay:#bd6555; --line:rgba(23,48,43,.18); --body:'DM Sans', sans-serif; --display:'Playfair Display', serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.55; overflow-x:hidden; }
body:has(.lightbox.is-open) { overflow:hidden; }
img { display:block; width:100%; height:100%; object-fit:cover; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
.skip-link { position:fixed; top:12px; left:12px; padding:10px 16px; transform:translateY(-160%); background:var(--ink); color:#fff; z-index:100; transition:transform .2s ease; }
.skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; z-index:10; width:100%; top:0; }
.header-inner { max-width:1440px; margin:auto; min-height:116px; padding:14px clamp(22px,4vw,64px); display:flex; align-items:center; justify-content:space-between; }
.brand { display:inline-flex; align-items:center; line-height:.85; }
.brand-logo { width:112px; height:88px; object-fit:contain; object-position:left center; }
.site-nav { display:flex; align-items:center; gap:28px; font-size:13px; font-weight:600; }
.site-nav > a:not(.nav-cta) { position:relative; }
.site-nav > a:not(.nav-cta)::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; transform:scaleX(0); transform-origin:right; background:var(--ink); transition:transform .25s ease; }
.site-nav > a:not(.nav-cta):hover::after { transform:scaleX(1); transform-origin:left; }
.nav-cta { padding:12px 17px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); transition:background .2s ease,color .2s ease; }
.nav-cta:hover { background:transparent; color:var(--ink); }
.nav-cta span, .button span { margin-left:11px; font-size:18px; vertical-align:-1px; }
.menu-toggle { display:none; border:0; background:transparent; width:46px; height:46px; padding:10px; }
.menu-toggle span { display:block; height:1px; margin:7px 0; background:var(--ink); transition:transform .2s ease; }
.hero { min-height:760px; max-width:1440px; margin:auto; padding:148px clamp(22px,8vw,126px) 70px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:50px; align-items:center; position:relative; }
.hero::before { content:""; position:absolute; width:47vw; height:56%; top:0; left:-15vw; background:var(--cream); z-index:-1; }
.hero-copy { padding-top:32px; }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 18px; color:var(--clay); text-transform:uppercase; letter-spacing:.14em; font-weight:700; font-size:10px; }
.eyebrow span { width:25px; height:1px; background:currentColor; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--display); font-weight:500; letter-spacing:-.055em; line-height:.98; }
h1 { max-width:650px; margin-bottom:28px; font-size:clamp(3.6rem,7.2vw,7.1rem); }
h1 em,h2 em { font-style:italic; font-weight:500; color:var(--clay); }
.hero-intro { max-width:390px; margin-bottom:30px; color:var(--ink-soft); font-size:16px; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:51px; padding:14px 20px; border:1px solid var(--ink); font-size:13px; font-weight:700; transition:background .2s ease,color .2s ease,transform .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-dark { background:var(--ink); color:#fff; }
.button-dark:hover { background:var(--clay); border-color:var(--clay); }
.text-link { position:relative; display:inline-flex; padding:11px 0; font-size:13px; font-weight:700; }
.text-link::after { content:""; position:absolute; height:1px; right:0; bottom:6px; left:0; background:currentColor; transition:transform .2s ease; transform-origin:right; }
.text-link:hover::after { transform:scaleX(.2); }
.hero-visual { position:relative; justify-self:end; width:min(100%,530px); padding:0 0 50px 35px; }
.hero-image-wrap { height:560px; margin:0; overflow:hidden; clip-path:polygon(0 6%,100% 0,100% 96%,3% 100%); }
.hero-image-wrap img { transition:transform .7s ease; }
.hero-visual:hover img { transform:scale(1.04); }
.hero-caption { position:absolute; right:-18px; bottom:4px; color:var(--ink); font-family:var(--display); font-size:27px; font-style:italic; line-height:.9; }
.hero-stamp { position:absolute; bottom:21px; left:-14px; width:108px; height:108px; padding:5px; border-radius:50%; background:var(--butter); animation:spin 18s linear infinite; }
.hero-stamp svg { overflow:visible; width:100%; height:100%; fill:var(--ink); }
.hero-stamp text { font-family:var(--body); font-size:9px; letter-spacing:1.15px; }
.hero-stamp path:not(#stampPath) { stroke:var(--ink); stroke-width:1; fill:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink); color:var(--paper); }
.marquee-track { display:flex; gap:26px; width:max-content; padding:15px 0; align-items:center; font-family:var(--display); font-size:25px; white-space:nowrap; animation:marquee 24s linear infinite; }
.marquee b { color:var(--butter); font-size:17px; }
@keyframes marquee { to { transform:translateX(-50%); } }
.section-shell { max-width:1290px; margin:auto; padding-left:clamp(22px,4.5vw,72px); padding-right:clamp(22px,4.5vw,72px); }
.intro { display:grid; grid-template-columns:.65fr 1.35fr; gap:40px; padding-top:150px; padding-bottom:140px; }
.intro-aside { padding-top:18px; color:var(--ink-soft); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; }
.intro-aside p { max-width:120px; margin-top:122px; color:var(--clay); font-family:var(--display); font-size:21px; font-weight:500; line-height:1.1; letter-spacing:-.03em; text-transform:none; }
.intro-main { max-width:690px; }
h2 { margin-bottom:27px; font-size:clamp(2.8rem,5vw,5.4rem); }
.intro-main > p:not(.eyebrow) { max-width:520px; margin-bottom:25px; color:var(--ink-soft); }
.dark-link { color:var(--ink); }
.experiences { display:grid; grid-template-columns:repeat(3,1fr); background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.experience-card { min-height:290px; padding:48px clamp(25px,4.4vw,68px); border-right:1px solid var(--line); }
.experience-card:last-child { border-right:0; }
.line-icon { width:43px; height:43px; margin-bottom:48px; }
.line-icon svg { width:100%; height:100%; fill:none; stroke:var(--clay); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.experience-card h3 { margin-bottom:10px; font-family:var(--display); font-size:26px; font-weight:500; letter-spacing:-.04em; }
.experience-card p { max-width:285px; margin:0; color:var(--ink-soft); font-size:14px; }
.occasions { padding-top:155px; padding-bottom:155px; }
.section-heading { display:grid; grid-template-columns:1.2fr .8fr; column-gap:50px; align-items:end; margin-bottom:48px; }
.section-heading .eyebrow { grid-column:1/-1; }
.section-heading h2 { margin:0; }
.section-heading > p:not(.eyebrow) { max-width:290px; margin:0 0 11px; color:var(--ink-soft); }
.occasion-grid { display:grid; grid-template-columns:1.1fr .9fr 1.1fr; gap:20px; }
.occasion-card { min-height:460px; overflow:hidden; position:relative; isolation:isolate; color:#fff; }
.occasion-card::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(7,21,18,.05) 35%,rgba(7,21,18,.72)); }
.occasion-card img { position:absolute; z-index:-2; transition:transform .5s ease; }
.occasion-card:hover img { transform:scale(1.06); }
.occasion-card:hover .occasion-label span { background:var(--butter); color:var(--ink); }
.card-party { margin-top:68px; min-height:418px; }.card-private { margin-top:25px; min-height:515px; }
.card-number { position:absolute; top:18px; left:19px; font-size:11px; font-weight:700; letter-spacing:.12em; }
.occasion-label { position:absolute; display:flex; align-items:flex-end; justify-content:space-between; left:22px; right:22px; bottom:20px; gap:10px; }
.occasion-label h3 { margin:0; font-family:var(--display); font-size:clamp(1.8rem,3.1vw,3.1rem); font-weight:500; line-height:.95; letter-spacing:-.05em; }
.occasion-label span { display:grid; flex:0 0 auto; place-items:center; width:43px; height:43px; border:1px solid rgba(255,255,255,.6); border-radius:50%; transition:background .2s ease,color .2s ease; }
.statement { display:grid; grid-template-columns:1fr 1fr; background:var(--ink); color:var(--paper); }
.statement-image { min-height:670px; overflow:hidden; }.statement-image img { filter:saturate(.75) contrast(.9); }
.statement-copy { padding:clamp(65px,9vw,145px) clamp(30px,9vw,140px) 60px; }
.light { color:var(--butter); }.light span { background:var(--butter); }
.statement-copy h2 { margin-bottom:28px; color:#fff; font-size:clamp(3rem,5.2vw,5.5rem); }
.statement-copy h2 em { color:var(--butter); }
.statement-copy > p:not(.eyebrow) { max-width:360px; color:rgba(247,243,235,.72); }
.statement-copy ul { margin:35px 0 0; padding:0; list-style:none; border-top:1px solid rgba(247,243,235,.24); }
.statement-copy li { display:flex; gap:18px; padding:13px 0; border-bottom:1px solid rgba(247,243,235,.24); font-size:13px; }.statement-copy li span { color:var(--butter); font-size:11px; font-weight:700; }
.gallery { padding-top:150px; padding-bottom:150px; }
.gallery-heading { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:48px; }.gallery-heading h2 { margin:0; }.gallery-heading > p { max-width:310px; margin:0 0 10px; color:var(--ink-soft); }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:120px; gap:15px; }.gallery-item { position:relative; border:0; padding:0; overflow:hidden; background:var(--ink); }.gallery-item:nth-child(1) { grid-column:span 6; grid-row:span 4; }.gallery-item:nth-child(2) { grid-column:span 3; grid-row:span 3; }.gallery-item:nth-child(3) { grid-column:span 3; grid-row:span 3; }.gallery-item:nth-child(4) { grid-column:span 6; grid-row:span 2; }.gallery-item img { transition:opacity .3s ease,transform .4s ease; }.gallery-item span { position:absolute; right:14px; bottom:11px; padding:5px 8px; transform:translateY(8px); color:white; background:rgba(23,48,43,.75); font-size:10px; opacity:0; transition:opacity .2s ease,transform .2s ease; }.gallery-item:hover img { transform:scale(1.04); opacity:.8; }.gallery-item:hover span { opacity:1; transform:translateY(0); }
.enquiry { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,9vw,150px); padding-top:130px; padding-bottom:130px; border-top:1px solid var(--line); }.enquiry-intro h2 { margin-bottom:24px; }.enquiry-intro > p:not(.eyebrow) { max-width:310px; color:var(--ink-soft); }.contact-details { display:grid; gap:20px; margin-top:50px; font-size:13px; }.contact-details a { color:var(--clay); font-weight:700; text-decoration:underline; text-underline-offset:3px; }.contact-details address { font-style:normal; color:var(--ink-soft); }
.booking-form { padding-top:20px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.field { margin-bottom:21px; }.field label { display:block; margin-bottom:7px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.field label span { color:var(--clay); } input,select,textarea { width:100%; min-height:47px; padding:11px 12px; border:1px solid var(--line); border-radius:0; outline:none; color:var(--ink); background:transparent; transition:border-color .2s ease,background .2s ease; } textarea { resize:vertical; min-height:110px; } input:focus,select:focus,textarea:focus { border-color:var(--clay); background:#fffdf8; box-shadow:0 0 0 3px rgba(189,101,85,.14); }.form-submit { width:100%; margin-top:3px; }.form-status { min-height:22px; margin:11px 0 0; color:var(--clay); font-size:13px; font-weight:600; }
.site-footer { padding:0 clamp(22px,5vw,72px); background:var(--ink); color:var(--paper); }.footer-top { display:grid; grid-template-columns:1fr 1fr auto; align-items:center; gap:30px; padding:45px 0; }.footer-brand .brand-logo { width:132px; height:104px; }.footer-top p { margin:0; font-family:var(--display); font-size:23px; font-style:italic; line-height:1.1; }.footer-link { padding-bottom:3px; border-bottom:1px solid var(--paper); font-size:13px; font-weight:700; }.footer-bottom { display:flex; gap:28px; padding:19px 0; border-top:1px solid rgba(247,243,235,.2); color:rgba(247,243,235,.7); font-size:11px; }.footer-bottom a:last-child { margin-left:auto; }
.lightbox { position:fixed; z-index:100; inset:0; display:grid; place-items:center; padding:50px; background:rgba(11,25,22,.94); opacity:0; pointer-events:none; transition:opacity .2s ease; }.lightbox.is-open { opacity:1; pointer-events:auto; }.lightbox img { max-width:min(100%,1100px); max-height:calc(100vh - 100px); width:auto; height:auto; object-fit:contain; }.lightbox-close { position:absolute; top:18px; right:23px; width:46px; height:46px; border:1px solid rgba(255,255,255,.7); border-radius:50%; color:#fff; background:transparent; font-size:30px; line-height:1; }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .65s ease,transform .65s ease; }.reveal.visible { opacity:1; transform:none; }
@media (max-width:800px) { .header-inner { min-height:94px; }.brand-logo { width:94px; height:74px; }.menu-toggle { display:block; position:relative; z-index:3; }.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(4px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-4px) rotate(-45deg); }.site-nav { position:absolute; display:grid; align-content:center; gap:25px; top:0; right:0; width:min(320px,100%); min-height:100vh; padding:100px 35px 40px; background:var(--cream); transform:translateX(110%); transition:transform .3s ease; font-size:18px; }.site-nav.is-open { transform:translateX(0); }.nav-cta { width:max-content; margin-top:10px; }.hero { min-height:0; padding:125px 22px 72px; grid-template-columns:1fr; gap:39px; }.hero::before { width:100%; left:-37%; height:47%; }.hero-copy { padding-top:0; } h1 { font-size:clamp(3.35rem,15vw,5.1rem); }.hero-intro { font-size:15px; }.hero-visual { width:calc(100% - 15px); padding:0 0 50px 16px; }.hero-image-wrap { height:min(105vw,500px); }.hero-caption { right:-10px; bottom:3px; font-size:24px; }.hero-stamp { width:90px; height:90px; left:-7px; bottom:24px; }.intro { grid-template-columns:1fr; padding-top:95px; padding-bottom:92px; }.intro-aside { display:flex; justify-content:space-between; padding:0; }.intro-aside p { margin:0; text-align:right; }.intro-main { margin-top:6px; }.experiences { grid-template-columns:1fr; }.experience-card { min-height:0; padding:42px 25px; border-right:0; border-bottom:1px solid var(--line); }.experience-card:last-child { border-bottom:0; }.line-icon { margin-bottom:27px; }.occasions { padding-top:95px; padding-bottom:95px; }.section-heading { grid-template-columns:1fr; gap:13px; margin-bottom:33px; }.section-heading h2 { margin-bottom:2px; }.occasion-grid { grid-template-columns:1fr; gap:15px; }.occasion-card,.card-party,.card-private { min-height:390px; margin-top:0; }.statement { grid-template-columns:1fr; }.statement-image { min-height:420px; }.statement-copy { padding:70px 25px; }.gallery { padding-top:94px; padding-bottom:95px; }.gallery-heading { display:block; margin-bottom:34px; }.gallery-heading > p { margin-top:18px; }.gallery-grid { grid-auto-rows:110px; gap:8px; }.gallery-item:nth-child(1) { grid-column:span 8; grid-row:span 3; }.gallery-item:nth-child(2) { grid-column:span 4; grid-row:span 3; }.gallery-item:nth-child(3) { grid-column:span 5; grid-row:span 2; }.gallery-item:nth-child(4) { grid-column:span 7; grid-row:span 2; }.gallery-item span { display:none; }.enquiry { grid-template-columns:1fr; gap:37px; padding-top:92px; padding-bottom:90px; }.contact-details { margin-top:34px; }.form-row { grid-template-columns:1fr; gap:0; }.footer-top { grid-template-columns:1fr; gap:32px; padding:46px 0; }.footer-bottom { flex-wrap:wrap; gap:12px 22px; }.footer-bottom a:last-child { margin-left:0; }.lightbox { padding:55px 18px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { opacity:1; transform:none; transition:none; }.marquee-track,.hero-stamp { animation:none; }.hero-image-wrap img,.occasion-card img,.gallery-item img { transition:none; } }
