:root{
  --green:        oklch(0.532 0.130 149);
  --green-light:  oklch(0.669 0.154 146);   /* #4BAD57, lighter leaf green from the logo swoosh */
  --green-hover:  oklch(0.453 0.108 149);
  --green-ink:    oklch(0.452 0.108 149);
  --brown-ink:    oklch(0.27 0.03 60);
  --brown-mid:    oklch(0.46 0.04 58);
  --white:        oklch(1 0 0);
  --cream:        oklch(0.96 0.012 85);
  --green-tint:   oklch(0.975 0.012 150);
  --brown-tint:   oklch(0.925 0.018 65);
  --oak:          oklch(0.74 0.045 72);      /* pale timber tone from the hero bench, scrolled nav bar */
  --footer-bg:    oklch(0.39 0.05 60);       /* warm mid-brown (coffee), footer; lighter than brown-ink for variety from the green */
}
html{ scroll-behavior:smooth; scrollbar-width:thin; scrollbar-color:color-mix(in oklch, var(--brown-ink) 38%, transparent) transparent; }
body{ background:var(--cream); color:var(--brown-ink); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
/* Hairline scrollbar: ultra-thin faint brown thumb, transparent track. */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:color-mix(in oklch, var(--brown-ink) 35%, transparent); border:2px solid transparent; background-clip:padding-box; border-radius:9999px; }
::-webkit-scrollbar-thumb:hover{ background:color-mix(in oklch, var(--brown-ink) 55%, transparent); border:2px solid transparent; background-clip:padding-box; }
.font-serif{ font-family:'Newsreader',Georgia,serif; }
.measure{ max-width:70ch; }

/* Eyebrow label: green caps, optional lead tick */
.eyebrow{ font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--green-ink); font-weight:600; display:inline-flex; align-items:center; gap:0.6rem; }
.eyebrow::before{ content:""; width:1.6rem; height:2px; background:var(--green); border-radius:2px; display:inline-block; opacity:0.9; }
.eyebrow.no-tick::before{ display:none; }

a, button, select{ cursor:pointer; }

/* Pills: glassy (frosted) treatment, translucent fill + backdrop blur + light rim. */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:0.55rem; border-radius:9999px; font-weight:600; padding:0.85rem 1.6rem; border:1px solid transparent; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.25); transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.btn-green{ background:color-mix(in oklch, var(--green) 82%, transparent); color:#fff; border-color:rgba(255,255,255,0.30); }
.btn-green:hover{ background:color-mix(in oklch, var(--green-hover) 90%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,0.30), 0 10px 26px -12px rgba(31,102,50,0.55); transform:translateY(-1px); }
/* Light-glass green: frosted pale green + dark green text, for pills on light/white backgrounds (accessible). */
.btn-green-light{ background:color-mix(in oklch, var(--green) 16%, #fff); color:oklch(0.33 0.07 150); border-color:color-mix(in oklch, var(--green) 42%, transparent); }
.btn-green-light:hover{ background:var(--green-hover); color:#fff; border-color:rgba(255,255,255,0.28); box-shadow:inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 26px -12px rgba(31,102,50,0.5); transform:translateY(-1px); }
.btn-ghost{ background:color-mix(in oklch, var(--brown-ink) 6%, transparent); color:var(--brown-ink); border-color:color-mix(in oklch, var(--brown-ink) 30%, transparent); }
.btn-ghost:hover{ background:color-mix(in oklch, var(--brown-ink) 12%, transparent); }
.btn-ghost-light{ background:rgba(255,255,255,0.16); color:#fff; border-color:rgba(255,255,255,0.45); }
.btn-ghost-light:hover{ background:rgba(255,255,255,0.26); }

/* Cards */
.card{ border-radius:1.25rem; }

/* Footer: matches the scrolled nav bar tone (oak 60%), with a soft glassy blur and gentle sheen. */
.site-footer{
  background-color:color-mix(in oklch, var(--oak) 60%, transparent);
  background-image:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.03));
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-top:1px solid rgba(255,255,255,0.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), 0 -10px 30px -22px rgba(40,28,16,0.26);
}
.footer-ico svg{ display:block; }
.footer-ico{ transition:color .18s ease; }
/* Hovering a contact item turns its icon green (colour only, no pill). */
.footer-contact:hover .footer-ico{ color:var(--green-ink); }
/* Footer contact + social links: green highlight pill on hover, echoing the menu bar. */
.footer-contacts a, .footer-social a{ border-radius:9999px; transition:color .18s ease, background-color .18s ease; }
.footer-contacts a{ padding:0.15rem 0.5rem; margin:0 -0.2rem; }
.footer-social a{ padding:0.45rem; display:inline-flex; }
.footer-contacts a:hover, .footer-social a:hover,
.footer-contacts a:focus-visible, .footer-social a:focus-visible{ color:var(--green-ink); background:color-mix(in oklch, var(--green) 14%, transparent); }
/* footer contact icons are links too — keep them clean (just colour change, no text-link pill) */
.footer-contacts a.footer-ico{ padding:0; margin:0; background:transparent; border-radius:0; }
.footer-contacts a.footer-ico:hover, .footer-contacts a.footer-ico:focus-visible{ background:transparent; color:var(--green-ink); }

/* Nav: transparent at top, tinted blurred bar on scroll (or solid on subpages via .scrolled) */
#nav{ transition:background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease; }
/* Scrolled / solid bar: smooth oak with a soft sheen and a gentle drop shadow for depth (no texture).
   The frost (tint + blur) lives on #nav::before, NOT on #nav itself: a backdrop-filter on #nav
   would make it a "backdrop root" and trap the hours-panel's own blur inside the 76px bar, leaving
   page text sharp behind the dropdown. Keeping it on the pseudo-element lets the panel blur the page. */
#nav.scrolled{ box-shadow:0 6px 20px -14px rgba(40,28,16,0.26), inset 0 1px 0 rgba(255,255,255,0.16); }
#nav::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-color:color-mix(in oklch, var(--oak) 60%, transparent); background-image:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.03)); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .3s ease; }
#nav.scrolled::before{ opacity:1; }
/* White writing at top (over the image); dark brown on the light oak bar when scrolled. */
.nav-link{ color:#fff; font-weight:500; letter-spacing:0.02em; padding:0.5rem 0.95rem; border-radius:9999px; background:transparent; transition:color .2s ease, background-color .2s ease, opacity .2s ease; opacity:0.95; white-space:nowrap; }
.nav-link:hover{ opacity:1; background:rgba(255,255,255,0.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.nav-link[aria-current="page"]{ background:rgba(255,255,255,0.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
#nav.scrolled .nav-link{ color:var(--brown-ink); opacity:1; background:transparent; }
#nav.scrolled .nav-link:hover{ color:var(--green-ink); background:color-mix(in oklch, var(--brown-ink) 12%, transparent); }
#nav.scrolled .nav-link[aria-current="page"]{ color:var(--green-ink); background:color-mix(in oklch, var(--brown-ink) 10%, transparent); }
#menu-btn{ color:#fff; }
#nav.scrolled #menu-btn{ color:var(--brown-ink); }
/* Logo swaps from white (top) to dark (scrolled, on the light oak bar). */
.logo-dark{ opacity:0; }
.logo-light{ opacity:1; }
#nav.scrolled .logo-light{ opacity:0; }
#nav.scrolled .logo-dark{ opacity:1; }
.logo-light, .logo-dark{ transition:opacity .3s ease; }

/* Opening-hours analogue clock + glassy hover dropdown, sat beside the logo. Colour follows the
   nav like the logo (white over the hero, brown-ink once #nav.scrolled). Panel is frosted glass
   so it picks up whatever sits behind it. Opens on hover and on focus (keyboard + touch tap). */
.dsa-hours{ position:relative; display:inline-flex; }
.dsa-hours-btn{ display:inline-flex; align-items:center; gap:0.22rem; padding:0.3rem 0.4rem; border:0; background:transparent; color:var(--green-light); cursor:pointer; border-radius:9999px; line-height:0; transition:color .3s ease, background-color .2s ease; -webkit-tap-highlight-color:transparent; }
.dsa-hours-btn:hover, .dsa-hours:focus-within .dsa-hours-btn{ background:rgba(255,255,255,0.16); color:var(--green-light); }
.dsa-hours-btn:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
#nav.scrolled .dsa-hours-btn{ color:var(--green-ink); }
#nav.scrolled .dsa-hours-btn:hover, #nav.scrolled .dsa-hours:focus-within .dsa-hours-btn{ background:color-mix(in oklch, var(--brown-ink) 12%, transparent); color:var(--green-ink); }
.dsa-clock{ width:1.3rem; height:1.3rem; flex:none; }
.dsa-hours-caret{ width:0.6rem; height:0.6rem; flex:none; opacity:0.85; transition:transform .25s ease; }
.dsa-hours:hover .dsa-hours-caret, .dsa-hours:focus-within .dsa-hours-caret{ transform:rotate(180deg); }
.dsa-hours-panel{ position:absolute; top:calc(100% + 0.6rem); left:-0.25rem; z-index:60; width:17.5rem; padding:1.05rem 1.15rem 1.1rem; border-radius:1.05rem; background:rgba(20,12,16,0.75); -webkit-backdrop-filter:blur(34px) saturate(135%); backdrop-filter:blur(34px) saturate(135%); border:1px solid rgba(255,255,255,0.22); box-shadow:0 26px 54px -24px rgba(15,8,5,0.6); color:#fff; opacity:0; transform:translateY(-7px) scale(0.985); transform-origin:top left; pointer-events:none; visibility:hidden; transition:opacity .26s ease, transform .26s cubic-bezier(.2,.7,.2,1), visibility .26s; }
.dsa-hours:hover .dsa-hours-panel, .dsa-hours:focus-within .dsa-hours-panel{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
.dh-title{ font-family:'Newsreader',Georgia,serif; font-size:1.02rem; font-weight:600; margin:0 0 0.55rem; color:#fff; }
.dh-rows{ list-style:none; margin:0 0 0.6rem; padding:0; display:flex; flex-direction:column; gap:0.28rem; }
.dh-rows li{ display:flex; justify-content:space-between; gap:1rem; font-size:0.86rem; }
.dh-rows li span:first-child{ color:rgba(255,255,255,0.72); }
.dh-rows li span:last-child{ font-weight:600; color:#fff; }
.dh-note{ font-size:0.74rem; line-height:1.45; color:rgba(255,255,255,0.7); margin:0; }
.dh-div{ height:1px; background:rgba(255,255,255,0.18); margin:0.8rem 0; }
.dh-contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.32rem; }
.dh-contact a{ color:rgba(255,255,255,0.9); font-size:0.82rem; text-decoration:none; transition:color .2s ease; }
.dh-contact a:hover{ color:#fff; text-decoration:underline; }
@media (prefers-reduced-motion: reduce){ .dsa-hours-panel{ transition:opacity .2s ease, visibility .2s; transform:none; } }

/* Form fields */
.field{ width:100%; background:var(--white); border:1.5px solid color-mix(in oklch, var(--brown-ink) 16%, transparent); border-radius:0.85rem; padding:0.8rem 0.95rem; font-size:1rem; color:var(--brown-ink); transition:border-color .2s ease, box-shadow .2s ease; }
.field::placeholder{ color:color-mix(in oklch, var(--brown-mid) 70%, transparent); }
.field:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px color-mix(in oklch, var(--green) 22%, transparent); }
.field[aria-invalid="true"]{ border-color:var(--brown-ink); border-width:2px; }
select.field{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%2327803F'%3E%3Cpath d='M12 15 6 9h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.7rem center; padding-right:2.2rem; }
.err{ display:none; align-items:center; gap:0.35rem; color:var(--brown-ink); font-weight:600; font-size:0.82rem; margin-top:0.4rem; }
.err.show{ display:flex; }
.err svg{ width:15px; height:15px; flex:none; color:var(--green-ink); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--green); outline-offset:3px; border-radius:4px;
}

/* Motion: reveals and parallax. Hidden only when JS is active (html.js) so no-JS and slow-JS still show content. */
.reveal{ opacity:1; }
html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
html.js .reveal.in{ opacity:1; transform:none; }
.stagger > :nth-child(1){ transition-delay:0ms }
.stagger > :nth-child(2){ transition-delay:80ms }
.stagger > :nth-child(3){ transition-delay:160ms }
.stagger > :nth-child(4){ transition-delay:240ms }
.stagger > :nth-child(5){ transition-delay:320ms }
.stagger > :nth-child(6){ transition-delay:400ms }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  #hero-img{ transform:none !important; }
  *{ transition-duration:0.001ms !important; }
}

/* ===== Contact enquiry card: soft-3D mocha (oak blended down toward brown-mid, ~22% darker), cream boxes ===== */
.enquiry-card{ position:relative; border-radius:1.6rem; overflow:hidden; will-change:transform; background:color-mix(in oklch, var(--oak) 40%, var(--brown-mid));
  box-shadow:-16px -16px 32px rgba(255,255,255,0.55), 32px 38px 74px rgba(40,28,16,0.46), inset 0 2px 0 rgba(255,255,255,0.66); }
.enquiry-card > *{ position:relative; z-index:1; }
/* labels in cream to match the inner boxes (tone-on-tone) */
.enquiry-card label{ color:oklch(0.968 0.012 84); }
.enquiry-card label span{ color:oklch(0.968 0.012 84); opacity:0.7; }
/* cream boxes with a soft, clean inset (cleaned up from the deep clunky well) */
.enquiry-card .field{ background-color:oklch(0.968 0.012 84); border:1px solid rgba(40,28,16,0.05); border-radius:0.9rem; color:var(--brown-ink);
  box-shadow:inset 2px 2px 5px rgba(40,28,16,0.12), inset -2px -2px 4px rgba(255,255,255,0.85); }
.enquiry-card .field:focus{ border-color:transparent; box-shadow:inset 0 0 0 2px var(--green); }
.enquiry-card .field[aria-invalid="true"]{ border-color:var(--brown-ink); box-shadow:inset 2px 2px 5px rgba(40,28,16,0.12); }
/* error text + icon (dark, legible on the light card) */
.enquiry-card .err{ color:var(--brown-ink); }
.enquiry-card .err svg{ color:var(--green-ink); }

/* ===== Contact page: left-column detail list (labels + values) ===== */
.cd-list{ display:flex; flex-direction:column; gap:0.45rem; }
.cd-row{ display:flex; align-items:center; padding:0.55rem 0; }
.cd-label{ font-size:0.72rem; letter-spacing:0.13em; text-transform:uppercase; font-weight:600; color:var(--green-ink); }
.cd-value{ margin-top:0.1rem; font-size:1.04rem; color:var(--brown-ink); line-height:1.4; }
.cd-sep{ color:color-mix(in oklch, var(--brown-ink) 35%, transparent); }
.cd-link{ color:var(--brown-ink); transition:color .18s ease; }
.cd-link:hover{ color:var(--green-ink); }