@font-face{font-family:"Instrument Serif";src:url(fonts/instrumentserif-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrumentserif-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree.woff2) format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
:root{
  --anaar:#5a0a17;--anaar-2:#6e1121;--anaar-3:#431018;--wine:#22070c;
  --cream:#f6ecdd;--cream-2:#ecdcc6;--cream-3:#e2cdb1;
  --saffron:#eaa53c;--saffron-2:#f4c46e;
  --ink:#2a1013;--muted:#6f5450;--line:rgba(42,16,19,.16);
  --wa:#1f9d55;--wa-d:#178246;
  --serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(20px,5.2vw,72px);
  --hh:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--preview-bar,0px) + var(--hh) + 8px)}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16.5px/1.6 var(--sans);overflow-x:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:calc(var(--preview-bar,0px) + 8px);z-index:99;background:var(--cream);padding:12px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}

/* header */
.top{position:fixed;top:var(--preview-bar,0);left:0;right:0;z-index:50;height:var(--hh);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);color:var(--cream);transition:background .35s,box-shadow .35s,color .35s}
.top.scrolled{background:rgba(246,236,221,.94);color:var(--ink);box-shadow:0 1px 0 var(--line);backdrop-filter:saturate(1.2) blur(8px);-webkit-backdrop-filter:saturate(1.2) blur(8px)}
.mark{display:flex;align-items:baseline;gap:.55em;text-decoration:none;min-height:44px;align-items:center}
.mark-r{font:italic 400 30px/1 var(--serif);letter-spacing:-.01em}
.mark-s{font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;opacity:.82;padding-top:4px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;font:600 14px/1 var(--sans);border-radius:999px}
.nav a:not(.nav-cta):not(.nav-call){opacity:.85}
.nav a:hover{opacity:1}
.nav-cta{background:var(--saffron);color:var(--wine)!important}
.nav-call{border:1px solid currentColor}
@media (max-width:820px){.nav a:not(.nav-cta):not(.nav-call){display:none}.mark-s{display:none}}
@media (max-width:370px){.nav-call{display:none!important}}

/* hero */
.hero{position:relative;background:var(--anaar);color:var(--cream);padding:calc(var(--preview-bar,0px) + var(--hh) + 18px) var(--pad) 0;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(120% 70% at 85% 10%,rgba(234,165,60,.10),transparent 60%),
  linear-gradient(180deg,var(--anaar) 0%,var(--anaar-3) 100%)}
.where{margin-top:6px;padding-left:18px;font:400 14px/1.45 var(--sans);color:#d9bfa4;animation:fade 1.2s .65s both}
.word{margin:10px 0 0;font:italic 400 clamp(112px,34vw,300px)/.78 var(--serif);letter-spacing:-.035em;color:var(--cream);margin-left:-.04em}
.word .w1{display:inline-block;padding:0 .09em .04em 0;background:linear-gradient(180deg,#fff4e4 0%,#f1d9b8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 1.2s cubic-bezier(.2,.7,.1,1) both}
.h1{margin-top:18px;font:400 clamp(34px,9.6vw,64px)/1.02 var(--serif);letter-spacing:-.012em;max-width:13em}
.h1 .line{display:block;overflow:hidden;padding-bottom:.06em}
.h1 .line>span{display:inline-block;animation:rise 1s cubic-bezier(.2,.7,.1,1) both}
.h1 .line:nth-child(2)>span{animation-delay:.12s}
.lede{margin-top:16px;max-width:31em;font-size:clamp(16px,4.3vw,18.5px);line-height:1.55;color:#f1dfcb;animation:fade 1.2s .35s both}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;animation:fade 1.2s .5s both}
.status{display:flex;align-items:center;gap:10px;margin-top:18px;font:500 14px/1.4 var(--sans);color:#ead6bf;animation:fade 1.2s .6s both}
.dot{width:8px;height:8px;border-radius:50%;background:#9c8a80;flex:none}
.status.open .dot{background:#7bd88f;box-shadow:0 0 0 0 rgba(123,216,143,.6);animation:pulse 2.4s infinite}
.hero-fig{position:relative;margin:34px 0 0;z-index:2}
.hero-frame{position:relative;overflow:hidden;aspect-ratio:4/5;border-radius:2px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.hero-frame::after{content:"";position:absolute;inset:12px;border:1.5px dashed rgba(244,196,110,.75);border-radius:1px;pointer-events:none}
.hero-frame img{width:100%;height:100%;object-fit:cover;animation:settle 2.4s cubic-bezier(.2,.7,.1,1) both;will-change:transform}
figcaption{font:500 11px/1.3 var(--sans);letter-spacing:.06em;opacity:.7;margin-top:8px}
.hero-fig figcaption{text-align:right;color:#e6ccb0;padding-bottom:4px}
.thread{position:absolute;left:0;right:0;bottom:-6px;width:100%;height:110px;z-index:1;pointer-events:none}
.thread path{fill:none;stroke:var(--saffron);stroke-width:2;stroke-dasharray:9 7;opacity:.85;animation:sew 9s linear infinite}
.hero::after{content:"";display:block;height:56px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:700 15.5px/1 var(--sans);text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s;letter-spacing:.005em}
.btn:active{transform:translateY(1px)}
.btn-saffron{background:var(--saffron);color:var(--wine);box-shadow:0 10px 24px -10px rgba(234,165,60,.7)}
.btn-saffron:hover{background:var(--saffron-2)}
.btn-line{border:1.5px solid rgba(246,236,221,.55);color:var(--cream)}
.btn-line:hover{border-color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--anaar)}
.btn-anaar{background:var(--anaar);color:var(--cream)}
.btn-anaar:hover{background:var(--anaar-2)}
.btn-ink-line{border:1.5px solid var(--line);color:var(--ink);background:transparent}
.btn-ink-line:hover{border-color:var(--ink)}
.btn-wa{background:var(--wa);color:#fff;width:100%;min-height:56px;font-size:16.5px;margin-top:6px}
.btn-wa:hover{background:var(--wa-d)}
.btn-wa svg{width:22px;height:22px;fill:currentColor}

/* how */
.how{padding:clamp(72px,12vw,140px) var(--pad) clamp(56px,9vw,110px);position:relative}
.how-head h2,.enq-head h2,.visit h2{font:400 clamp(40px,10.5vw,76px)/1 var(--serif);letter-spacing:-.015em;color:var(--anaar)}
.how-head p,.enq-head p{margin-top:14px;max-width:30em;color:var(--muted);font-size:17px}
.steps{list-style:none;margin:44px 0 0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:26px 0;border-top:1.5px dashed rgba(90,10,23,.28)}
.steps li:last-child{border-bottom:1.5px dashed rgba(90,10,23,.28)}
.n{font:italic 400 44px/.9 var(--serif);color:var(--saffron);-webkit-text-stroke:.4px #b97a1c}
.steps h3{font:700 19px/1.3 var(--sans);color:var(--ink)}
.steps p{margin-top:6px;color:var(--muted)}

/* band */
.band{position:relative;background:var(--wine);color:var(--cream);overflow:hidden}
.band-fig{margin:0;position:relative}
.band-fig img{width:100%;height:min(78vw,620px);object-fit:cover;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.2,.7,.1,1)}
.band.in .band-fig img{transform:scale(1)}
.band-fig figcaption{position:absolute;right:var(--pad);bottom:10px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.band-copy{padding:40px var(--pad) 64px}
.band-copy h2{font:400 clamp(36px,9.6vw,68px)/1.02 var(--serif);letter-spacing:-.012em;max-width:14em}
.band-copy p{margin:16px 0 26px;max-width:30em;color:#e5cfb6;font-size:17px}

/* enquire */
.enquire{padding:clamp(72px,12vw,140px) var(--pad);background:var(--cream-2);position:relative}
.enquire::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(90deg,var(--anaar) 0 10px,transparent 10px 18px);opacity:.2;height:2px;top:22px}
.enq-grid{display:grid;gap:30px;margin-top:36px}
.slip{background:#fbf5ec;border-radius:4px;padding:24px 18px;box-shadow:0 1px 0 rgba(42,16,19,.06),0 24px 50px -30px rgba(42,16,19,.45);position:relative}
.slip::before{content:"";position:absolute;inset:8px;border:1.5px dashed rgba(90,10,23,.22);border-radius:2px;pointer-events:none}
.field{margin:0 0 20px;padding:0;border:0;min-width:0}
.field>label:not(.check),legend{display:block;font:700 13px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--anaar);margin-bottom:9px;padding:0}
.opt{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted)}
input[type=text],input[type=date],textarea{width:100%;font:500 16.5px/1.4 var(--sans);color:var(--ink);background:#fff;border:1.5px solid rgba(42,16,19,.18);border-radius:10px;padding:13px 14px;min-height:50px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
textarea{resize:vertical;min-height:96px}
input:focus,textarea:focus{outline:none;border-color:var(--anaar);box-shadow:0 0 0 3px rgba(90,10,23,.14)}
::placeholder{color:#a08c86}
.check{display:flex;align-items:center;gap:12px;margin-top:12px;min-height:44px;font:500 15px/1.35 var(--sans);cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--anaar);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(42,16,19,.2);background:#fff;font:600 15px/1 var(--sans);transition:background .2s,color .2s,border-color .2s}
.sizes span{min-width:52px;justify-content:center;padding:0 12px}
.chips input:checked+span{background:var(--anaar);color:var(--cream);border-color:var(--anaar)}
.chips input:focus-visible+span{outline:2px solid var(--saffron);outline-offset:2px}
.row2{display:grid;gap:0 14px;grid-template-columns:1fr}
.err{background:#fde8e4;color:#8a1c12;border-radius:8px;padding:10px 12px;margin-bottom:12px;font-weight:600;font-size:15px}
.tag-wrap{position:relative}
.tag{position:relative;background:var(--anaar);color:var(--cream);border-radius:6px 6px 6px 6px;padding:40px 22px 22px;clip-path:polygon(0 22px,22px 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);box-shadow:0 30px 60px -30px rgba(42,16,19,.7)}
.hole{position:absolute;top:16px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--cream-2);box-shadow:inset 0 0 0 2px var(--saffron)}
.tag-k{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-2);text-align:center}
.tag-msg{margin:18px 0 0;white-space:pre-wrap;word-break:break-word;font:400 15.5px/1.6 var(--sans);color:#f6e8d6;min-height:9em}
.tag-to{margin-top:18px;padding-top:14px;border-top:1.5px dashed rgba(244,196,110,.45);font:600 12.5px/1.4 var(--sans);color:#e5c9a9}

/* visit */
.visit{padding:clamp(72px,12vw,140px) var(--pad);display:grid;gap:36px}
.visit address{font:400 clamp(26px,7vw,36px)/1.2 var(--serif);font-style:normal;margin-top:20px;color:var(--ink)}
.hours{width:100%;max-width:440px;border-collapse:collapse;margin-top:26px;font-size:16px}
.hours th,.hours td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left;font-weight:500}
.hours td{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.hours tr.today th,.hours tr.today td{color:var(--anaar);font-weight:800}
.hours tr.today th::after{content:"Today";margin-left:10px;font:700 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--saffron);color:var(--wine);padding:4px 7px;border-radius:99px;vertical-align:2px}
.fine{margin-top:10px;font-size:13.5px;color:var(--muted)}
.visit-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.map{position:relative;border-radius:4px;overflow:hidden;min-height:340px;background:var(--cream-3);box-shadow:0 24px 50px -32px rgba(42,16,19,.6)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:sepia(.18) saturate(.9)}

/* footer */
.foot{background:var(--wine);color:#e9d4bd;padding:56px var(--pad) 110px;text-align:left}
.foot-mark{font:italic 400 72px/1 var(--serif);color:var(--cream)}
.foot-line{margin-top:10px;font-size:15px}
.foot-line a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--saffron-2)}
.foot-fine{margin-top:18px;font-size:12.5px;opacity:.6}

/* floating */
.fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 20px 0 16px;border-radius:999px;background:var(--wa);color:#fff;text-decoration:none;font:700 15px/1 var(--sans);box-shadow:0 12px 30px -10px rgba(0,0,0,.45);transform:translateY(120%);opacity:0;transition:transform .4s,opacity .4s}
.fab svg{width:22px;height:22px;fill:currentColor}
.fab.show{transform:none;opacity:1}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.1,1),transform .9s cubic-bezier(.2,.7,.1,1)}
.reveal.in{opacity:1;transform:none}
.steps li.reveal:nth-child(2){transition-delay:.08s}.steps li.reveal:nth-child(3){transition-delay:.16s}

@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes sew{to{stroke-dashoffset:-160}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(123,216,143,.55)}70%{box-shadow:0 0 0 9px rgba(123,216,143,0)}100%{box-shadow:0 0 0 0 rgba(123,216,143,0)}}

/* mobile hero: image first, full bleed, word overlapping */
@media (max-width:959px){
  .hero{display:flex;flex-direction:column;padding-top:0}
  .hero::before{background:linear-gradient(180deg,var(--anaar) 0,var(--anaar) 62%,var(--anaar-3) 100%)}
  .hero-fig{order:-1;margin:0 calc(-1*var(--pad));height:calc(58svh + var(--preview-bar,0px));min-height:420px;max-height:640px}
  .hero-frame{aspect-ratio:auto;height:100%;border-radius:0;box-shadow:none}
  .hero-frame::after{display:none}
  .hero-frame::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(34,7,12,.55) 0%,rgba(34,7,12,0) 26%,rgba(90,10,23,0) 52%,rgba(90,10,23,.85) 86%,var(--anaar) 100%)}
  .hero-frame img{object-position:30% 60%}
  .hero-fig figcaption{position:absolute;right:var(--pad);top:calc(var(--preview-bar,0px) + var(--hh) + 4px);z-index:2;margin:0;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
  .hero-copy{position:relative;z-index:3;margin-top:-.62em;font-size:clamp(112px,34vw,300px)}
  .hero-copy .word{margin-top:0}
  .hero-copy>*:not(.word){font-size:initial}
  .hero-copy .h1{font-size:clamp(34px,9.6vw,64px)}
  .hero-copy .lede{font-size:clamp(16px,4.3vw,18.5px)}
  .hero-actions .btn{flex:1 1 auto}
}

/* tablet / desktop */
@media (min-width:640px){
  .row2{grid-template-columns:1fr 1fr}
  .slip{padding:34px 32px}
}
@media (min-width:960px){
  :root{--hh:76px}
  .hero{display:grid;grid-template-columns:1.15fr .85fr;gap:0 5vw;align-items:end;min-height:calc(100vh - var(--preview-bar,0px));padding-bottom:0}
  .hero-copy{padding-bottom:96px;align-self:center;padding-top:20px}
  .word{font-size:clamp(170px,17vw,290px)}
  .h1{font-size:clamp(48px,4.4vw,72px)}
  .hero-fig{margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:40px}
  .hero-frame{aspect-ratio:auto;height:min(76vh,760px)}
  .hero-fig figcaption{position:absolute;right:24px;bottom:56px;z-index:3;margin:0;color:#fff;opacity:.85;text-shadow:0 1px 3px rgba(0,0,0,.7)}
  .hero::after{display:none}
  .how{display:grid;grid-template-columns:.9fr 1.1fr;gap:6vw;align-items:start}
  .how-head{position:sticky;top:calc(var(--preview-bar,0px) + var(--hh) + 40px)}
  .steps{margin-top:0}
  .steps li{grid-template-columns:110px 1fr;padding:34px 0}
  .n{font-size:64px}
  .steps h3{font-size:22px}
  .band{display:grid;grid-template-columns:1.25fr .75fr;align-items:center}
  .band-fig img{height:620px}
  .band-copy{padding:60px var(--pad) 60px 56px}
  .band-copy h2{font-size:clamp(44px,3.8vw,62px)}
  .enq-grid{grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
  .tag-wrap{position:sticky;top:calc(var(--preview-bar,0px) + var(--hh) + 30px)}
  .tag{transform:rotate(1.4deg);transform-origin:50% 0;animation:sway 7s ease-in-out infinite}
  .visit{grid-template-columns:.85fr 1.15fr;gap:5vw;align-items:stretch}
  .map{min-height:560px}
  .foot{display:grid;grid-template-columns:auto 1fr;gap:0 40px;align-items:end;padding-bottom:56px}
  .foot-mark{grid-row:span 3;font-size:110px}
  .fab{display:none}
}
@keyframes sway{0%,100%{transform:rotate(1.4deg)}50%{transform:rotate(-.6deg)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}