/* =========================================================
   Brush 'N' Blush Studio, 2026
   PROFILE I: Salon, Spa and Beauty.

   Register: warm and human, with the accessibility floor of the clinical
   register held throughout. Consequence: tactile photography of real work,
   warm neutrals, an editorial service menu with prices published rather than
   a grid of feature cards, no urgency mechanics, AA minimum with AAA on
   body copy, and a layout that is fluid by construction.

   PALETTE. Wine, blush and rose gold, the studio's own colours: deep wine
   grounds, warm blush surfaces and a single rose-gold metallic, matched to
   the copper and rose tones already in the studio mark so the site and the
   logo read as one thing. Grown-up and unisex, never a candy-pink nail bar.
   Ratios measured, not assumed:
     white on --wine-deep          11.12:1
     white on --wine-darkest       16.27:1
     --cream on --wine-deep        10.15:1
     white on --accent              7.41:1
     --accent-text on --cream       6.32:1   on white 6.92:1
     --ink on white                18.63:1   on --cream 17.01:1
     --muted on white               8.42:1   on --cream 7.69:1
     --gold-soft on --wine-darkest  8.94:1
     --gold-line on --wine-darkest  5.47:1   used for rules, not type
   ========================================================= */

:root{
  color-scheme: light;              /* dark mode is deliberately not shipped */

  /* Grounds. Deep wine, the studio's own dark. */
  --wine-darkest:#3A1223;
  --wine-deep:#6B2038;
  --wine:#842847;

  /* Surfaces. Blush, not grey: warm from the mark outward. */
  --canvas:#FFFFFF;
  --surface:#FFFFFF;
  --cream:#FBF3F0;
  --cream-deep:#F4E6E0;
  --line:#EAD8D1;
  --line-strong:#D6BEB4;

  /* Ink. Warm near-black, tuned off the wine rather than pure grey. */
  --ink:#1A1013;
  --muted:#574A4E;
  --on-dark:#FFFFFF;
  --on-dark-soft:#F2E1E6;

  /* THE accent. One colour, one job: the thing you are meant to press.
     A deep rose-wine, the press colour on light grounds. */
  --accent:#9A2B50;
  --accent-hover:#7C2140;
  --accent-text:#A12E54;            /* the same rose-wine, tuned for type on light */
  --gold-line:#C08A63;              /* rose gold: rules and hairlines */
  --gold-soft:#E4B79A;              /* rose gold type on the dark grounds */

  --danger:#A3182A;

  /* Spacing scale */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s8:48px; --s10:64px;
  --s12:96px; --s16:128px;

  /* Container arithmetic: content width plus gutters, never guessed. */
  --content:1180px;
  --gutter:clamp(20px, 4.6vw, 64px);
  --wrap:calc(var(--content) + var(--gutter) * 2);

  /* Type. Fraunces is the warm, organic serif this register asks for.
     DM Sans carries everything else. */
  --display:'Fraunces','Georgia',serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --lh-display:1.02;
  --lh-heading:1.14;
  --lh-subhead:1.3;
  --lh-body:1.7;
  --lh-tight:1.4;

  /* Nine sizes. That is the whole scale. */
  --t-display:clamp(38px, 1.4rem + 4.4vw, 74px);
  --t-h2:clamp(27px, 1.2rem + 2.1vw, 44px);
  --t-h3:clamp(19px, 1rem + .7vw, 24px);
  --t-lede:clamp(17px, .98rem + .55vw, 21px);
  --t-body:clamp(16px, .95rem + .2vw, 17px);
  --t-small:15px;
  --t-meta:13px;
  --t-label:11px;

  --track-display:-.022em;
  --track-caps:.2em;

  /* Structural cards stay square, which is what the luxury register asks for.
     Photographs soften to 10px: sharp-cornered images read cheap and
     unfinished, a gentle radius reads finished. Controls get 8px, because a
     button is a thing you press and a little softening reads as touchable. */
  --r:0px;
  --r-img:10px;
  --r-btn:8px;

  /* Elevation: dropdowns, dialogs, popovers and toasts only. */
  --e-pop:0 18px 48px rgba(58,18,35,.26);

  --dur:.25s;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--body);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto}
img{display:block}
a{color:var(--accent-text);text-underline-offset:3px}
a:hover{color:var(--accent-hover)}
p,li,dd,dt,td,th,figcaption,summary,address{overflow-wrap:anywhere}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
.bnb-skip{
  position:absolute;left:-9999px;top:0;z-index:2200;background:var(--ink);color:#fff;
  padding:var(--s3) var(--s5);text-decoration:none;
}
.bnb-skip:focus{left:0}
.bnb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.bnb-wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--display);margin:0 0 var(--s3);color:var(--ink);font-weight:500}
h1{font-size:var(--t-display);line-height:var(--lh-display);letter-spacing:var(--track-display)}
h2{font-size:var(--t-h2);line-height:var(--lh-heading);letter-spacing:-.012em}
h3{font-size:var(--t-h3);line-height:var(--lh-subhead)}
h4{font-size:var(--t-body);line-height:var(--lh-subhead)}
p{margin:0 0 var(--s4)}
.bnb-lede{font-size:var(--t-lede);color:var(--muted);max-width:58ch;line-height:1.6}
.bnb-prose p,.bnb-prose li{max-width:68ch;color:var(--muted)}
.bnb-prose h2,.bnb-prose h3{color:var(--ink);margin-top:var(--s8)}
.bnb-prose h2:first-child,.bnb-prose h3:first-child{margin-top:0}
.bnb-prose strong{color:var(--ink);font-weight:600}

/* Plain uppercase text. Never a pill, never a badge, never a dash prefix. */
.bnb-eyebrow{
  font-family:var(--body);font-size:var(--t-label);font-weight:700;
  letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--accent-text);margin:0 0 var(--s4);line-height:1;
}
.bnb-eyebrow--onwine{color:var(--gold-soft)}
.bnb-rule{width:44px;height:2px;background:var(--gold-line);margin:0 0 var(--s5);border:0}
.bnb-rule--onwine{background:var(--gold-line)}

/* ---------- Buttons. Three variants. Sharp. No shadows. ---------- */
.bnb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:52px;padding:var(--s4) clamp(24px,3.4vw,40px);
  border:1.5px solid transparent;border-radius:var(--r-btn);
  font:700 var(--t-label)/1 var(--body);
  letter-spacing:.16em;text-transform:uppercase;text-align:center;
  text-decoration:none;cursor:pointer;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.bnb-btn:hover{transform:translateY(-1px)}
.bnb-btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.bnb-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.bnb-btn--ghost{background:transparent;color:var(--wine-deep);border-color:var(--line-strong)}
.bnb-btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.bnb-btn--onwine{background:var(--gold-line);color:#111;border-color:#A66A42}
.bnb-btn--onwine:hover{background:#E0B183;border-color:#E0B183;color:#111}
.bnb-btn--wineghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.bnb-btn--wineghost:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.bnb-btn[disabled],.bnb-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.bnb-btn--block{width:100%}

/* Text link with a rule under it. */
.bnb-link{
  display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;margin-block:-11px;
  font:700 var(--t-label)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-text);text-decoration:none;
  border-bottom:1.5px solid currentColor;
}
.bnb-link:hover{color:var(--accent-hover)}
.bnb-link svg{transition:transform var(--dur) var(--ease);flex:0 0 auto}
.bnb-link:hover svg{transform:translateX(4px)}

/* ---------- Sections ---------- */
.bnb-section{padding-block:clamp(56px,7.4vw,120px);scroll-margin-top:88px}
.bnb-section--tint{background:var(--cream)}
.bnb-section--blush{background:var(--cream-deep)}
.bnb-section--wine{background:var(--wine-deep);color:var(--on-dark-soft)}
.bnb-section--wine h1,.bnb-section--wine h2,.bnb-section--wine h3{color:#fff}
.bnb-section--wine .bnb-lede,.bnb-section--wine p{color:var(--on-dark-soft)}
.bnb-head{max-width:56ch;margin-bottom:clamp(32px,4.4vw,56px)}
.bnb-head--center{margin-inline:auto;text-align:center}
.bnb-head--center .bnb-rule{margin-inline:auto}

/* ---------- Header ---------- */
.bnb-header{position:sticky;top:0;z-index:900;background:var(--canvas);border-bottom:1px solid var(--line)}
.bnb-header__inner{display:flex;align-items:center;gap:clamp(12px,2vw,32px);min-height:clamp(68px,7vw,86px)}
.bnb-brand{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0}
.bnb-brand a{display:inline-flex;align-items:center;min-height:44px}
.bnb-brand img,.bnb-brand .custom-logo{height:clamp(34px,4.4vw,48px);width:auto}
.bnb-nav{margin-left:auto;min-width:0}
.bnb-menu{display:flex;align-items:center;gap:clamp(16px,2vw,30px);list-style:none;margin:0;padding:0}
.bnb-menu a{
  display:inline-flex;align-items:center;min-height:44px;
  font:600 var(--t-meta)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none;white-space:nowrap;
  border-bottom:1.5px solid transparent;
}
.bnb-menu a:hover{color:var(--ink)}
.bnb-menu .current-menu-item>a,.bnb-menu .current_page_item>a,.bnb-menu a[aria-current="page"]{
  color:var(--wine-deep);border-bottom-color:var(--gold-line);
}
.bnb-header__cta{flex:0 0 auto}
.bnb-header__cta .bnb-btn{min-height:46px;padding:var(--s3) var(--s5);white-space:nowrap}
.bnb-burger{
  display:none;margin-left:auto;align-items:center;justify-content:center;flex-direction:column;
  width:48px;height:48px;flex:0 0 auto;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-btn);cursor:pointer;-webkit-appearance:none;appearance:none;
}
.bnb-burger span{display:block;width:20px;height:1.5px;background:var(--ink);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.bnb-burger span+span{margin-top:6px}
.bnb-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.bnb-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bnb-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.bnb-panel{
  position:fixed;inset:clamp(68px,7vw,86px) 0 0;z-index:899;background:var(--canvas);
  overflow-y:auto;overscroll-behavior:contain;padding:var(--s6) 0 var(--s16);
}
.bnb-panel[hidden]{display:none}
.bnb-panel ul{list-style:none;margin:0;padding:0}
.bnb-panel a{
  display:block;padding:var(--s5) 0;font-family:var(--display);font-weight:500;
  font-size:clamp(22px,1rem+2vw,30px);color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.bnb-panel__cta{margin-top:var(--s8);display:grid;gap:var(--s3)}

/* ---------- Hero. Photo bleeds to the edge, no inset, no rounding. ---------- */
.bnb-hero{position:relative;background:var(--wine-deep);overflow:hidden;isolation:isolate}
.bnb-hero__grid{display:grid;grid-template-columns:1fr;align-items:stretch}
.bnb-hero__copy{
  position:relative;z-index:2;min-width:0;
  padding-block:clamp(48px,6.4vw,104px);
  padding-inline:var(--gutter);
  max-width:var(--wrap);margin-inline:auto;width:100%;
}
.bnb-hero h1{color:#fff;max-width:15ch;font-weight:400}
.bnb-hero h1 em{font-style:italic;color:var(--gold-soft);font-weight:400}
.bnb-hero__lede{color:var(--on-dark-soft);font-size:var(--t-lede);max-width:44ch;line-height:1.6}
.bnb-hero__btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(28px,3.2vw,40px)}
.bnb-hero__facts{
  display:flex;flex-wrap:wrap;gap:var(--s3) clamp(18px,2.6vw,34px);
  margin:clamp(28px,3.4vw,44px) 0 0;padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.2);list-style:none;
  font:600 var(--t-meta)/1.4 var(--body);letter-spacing:.06em;color:var(--on-dark-soft);
}
.bnb-hero__fact{display:inline-flex;align-items:center;gap:var(--s2);min-width:0}
.bnb-hero__fact svg{flex:0 0 auto;color:var(--gold-line)}
.bnb-hero__media{position:relative;z-index:1;min-width:0;background:var(--wine-darkest)}
.bnb-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 22%;
  aspect-ratio:16/11}

/* ---------- Editorial service menu. The Profile I pattern:
     a category rule, then priced rows. No boxes, no icon tiles. ---------- */
.bnb-menu-grid{display:grid;gap:clamp(36px,4.4vw,64px) clamp(40px,5vw,80px)}
.bnb-svc{min-width:0}
.bnb-svc__head{margin-bottom:var(--s4)}
.bnb-svc__head h2,.bnb-svc__head h3{
  display:flex;align-items:baseline;gap:var(--s3);
  margin:0 0 var(--s3);padding-bottom:var(--s3);
  border-bottom:1.5px solid var(--gold-line);
}
.bnb-svc__head svg{color:var(--wine-deep);flex:0 0 auto;align-self:center}
.bnb-svc__head p{color:var(--muted);max-width:56ch;margin:0;font-size:var(--t-small)}

.bnb-rows{margin-top:var(--s4)}
.bnb-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:var(--s1) var(--s5);align-items:baseline;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.bnb-row:last-child{border-bottom:0}
.bnb-row__name{
  font-family:var(--body);font-size:var(--t-body);font-weight:500;
  line-height:var(--lh-subhead);color:var(--ink);margin:0;min-width:0;
}
.bnb-row__desc{grid-column:1/-1;color:var(--muted);font-size:var(--t-meta);
  line-height:1.6;max-width:64ch;margin:var(--s1) 0 0}
.bnb-row__price{
  font-family:var(--display);font-weight:600;font-size:var(--t-body);
  color:var(--wine-deep);white-space:nowrap;font-variant-numeric:tabular-nums;
  text-align:right;margin:0;
}
.bnb-row__price--request{
  font-family:var(--body);font-weight:500;font-size:var(--t-meta);
  color:var(--muted);white-space:normal;letter-spacing:.04em;
}

/* ---------- Cards. Dense by design: 16px padding, 12px hard cap on
     internal vertical gaps, footer pinned so a row lines up. ---------- */
.bnb-grid{display:grid;gap:clamp(16px,1.8vw,22px);align-items:stretch}
.bnb-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.bnb-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr))}
.bnb-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,212px),1fr))}

.bnb-card{
  display:flex;flex-direction:column;min-width:0;
  background:var(--cream);border:0;border-radius:var(--r);
  padding:var(--s5) var(--s5) var(--s4);
  transition:background-color var(--dur) var(--ease);
}
.bnb-card:hover{background:var(--cream-deep)}
/* Fill-defined by context: blush on the white grounds, white on tinted or
   wine grounds. Never an outline box; the surface swap does the separating. */
.bnb-section--tint  :is(.bnb-card,.bnb-fact,.bnb-contact__item),
.bnb-section--blush :is(.bnb-card,.bnb-fact,.bnb-contact__item),
.bnb-section--wine  :is(.bnb-card,.bnb-fact,.bnb-contact__item){background:var(--surface)}
.bnb-section--tint  .bnb-card:hover,
.bnb-section--blush .bnb-card:hover,
.bnb-section--wine  .bnb-card:hover{background:var(--surface)}
/* A note nested in a card deepens so it never blends into the blush fill. */
.bnb-card .bnb-note{background:var(--cream-deep)}
.bnb-card__icon{color:var(--wine-deep);margin-bottom:var(--s3);line-height:0}
.bnb-card h3{margin-bottom:var(--s2);font-size:var(--t-h3)}
.bnb-card__desc{color:var(--muted);font-size:var(--t-small);line-height:1.6;
  max-width:52ch;margin:0 0 var(--s3)}
.bnb-card__desc:last-of-type{margin-bottom:var(--s3)}
.bnb-card__meta{
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;font-size:var(--t-meta);line-height:var(--lh-tight);color:var(--muted);
  min-height:44px;
}
.bnb-card__price{
  font-family:var(--display);font-weight:600;font-size:var(--t-body);
  color:var(--wine-deep);font-variant-numeric:tabular-nums;
}

/* ---------- Photo as card ------------------------------------------
   The photograph IS the card: no white box, no border, no shadow. The
   stacking order is assigned explicitly to every layer, because a
   `> *` rule here would match the photo div and paint the picture over
   its own scrim, leaving white text on raw photography.
   The scrim darkens hard only where the type sits and clears by 72%,
   so the photograph survives. ------------------------------------- */
.bnb-pcards{display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
/* A pair of cards is a pair, not two thirds of a three-column row. */
@media (min-width:880px){
  .bnb-pcards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.bnb-pcard{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:300px;aspect-ratio:4/5;overflow:hidden;isolation:isolate;
  border-radius:var(--r-img);
  background:var(--wine-darkest);text-decoration:none;
}
.bnb-pcard__photo{position:absolute;inset:0;z-index:0}
.bnb-pcard__photo img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);filter:saturate(.95)}
.bnb-pcard:hover .bnb-pcard__photo img{transform:scale(1.05);filter:saturate(1.04)}
.bnb-pcard::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(30,8,16,.96) 0%, rgba(30,8,16,.93) 18%,
    rgba(30,8,16,.68) 38%, rgba(30,8,16,.24) 58%,
    rgba(30,8,16,0)   74%);
}
.bnb-pcard__body{position:relative;z-index:2;display:block;padding:var(--s5)}
.bnb-pcard__title{
  display:block;
  font-family:var(--display);font-weight:500;color:#fff;
  font-size:clamp(19px,.95rem+.7vw,23px);line-height:var(--lh-subhead);
  margin:0 0 var(--s2);padding-bottom:var(--s2);
  border-bottom:1.5px solid var(--gold-line);
}
.bnb-pcard__desc{display:block;color:#EBD9DD;font-size:var(--t-meta);line-height:1.55;margin:0 0 var(--s3);max-width:34ch}
.bnb-pcard__meta{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  font:700 var(--t-label)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-soft);
}
.bnb-pcard__meta svg{transition:transform var(--dur) var(--ease)}
.bnb-pcard:hover .bnb-pcard__meta svg{transform:translateX(4px)}
.bnb-pcard:focus-visible{outline:2px solid var(--gold-line);outline-offset:3px}

/* A CTA band that carries a photograph behind it. */
.bnb-cta--photo{position:relative;isolation:isolate;background:var(--wine-darkest)}
.bnb-cta--photo .bnb-cta__bg{position:absolute;inset:0;z-index:0}
.bnb-cta--photo .bnb-cta__bg img{width:100%;height:100%;object-fit:cover}
.bnb-cta--photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(34,10,20,.95) 0%,rgba(34,10,20,.86) 48%,rgba(34,10,20,.62) 100%)}
.bnb-cta--photo .bnb-cta__inner{position:relative;z-index:2}

/* A full-width photographic band used to break two text sections apart. */
.bnb-band{position:relative;isolation:isolate;background:var(--wine-darkest);overflow:hidden}
.bnb-band__bg{position:absolute;inset:0;z-index:0}
.bnb-band__bg img{width:100%;height:100%;object-fit:cover}
.bnb-band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(34,10,20,.78)}
.bnb-band__inner{position:relative;z-index:2;padding-block:clamp(56px,7vw,110px);text-align:center}
.bnb-band blockquote{
  font-family:var(--display);font-weight:400;font-style:italic;color:#fff;
  font-size:clamp(22px,1rem+2vw,38px);line-height:1.32;letter-spacing:-.01em;
  margin:0 auto;max-width:22ch;
}
.bnb-band cite{display:block;margin-top:var(--s5);font-family:var(--body);font-style:normal;
  font:700 var(--t-label)/1 var(--body);letter-spacing:var(--track-caps);text-transform:uppercase;
  color:var(--gold-soft)}

/* ---------- Steps: a connected rail. No 01 02 03. ---------- */
.bnb-steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(24px,3vw,34px)}
.bnb-step{position:relative;padding-left:44px}
.bnb-step::before{content:"";position:absolute;left:9px;top:26px;
  bottom:calc(clamp(24px,3vw,34px) * -1);width:1px;background:var(--line-strong)}
.bnb-step:last-child::before{display:none}
.bnb-step__dot{position:absolute;left:0;top:5px;width:19px;height:19px;border-radius:50%;
  border:1.5px solid var(--line-strong);background:var(--canvas)}
.bnb-step--done .bnb-step__dot{border-color:var(--wine-deep);background:var(--wine-deep)}
.bnb-step h3{margin-bottom:var(--s2)}
.bnb-step p{color:var(--muted);margin:0;max-width:62ch;font-size:var(--t-small)}

/* ---------- Special offer ----------
   One accent, stated as a fact with its end date. No countdown clock, no
   invented scarcity, no second colour shouting for the same attention. */
.bnb-offer{
  border:1px solid var(--gold-line);border-left-width:4px;
  border-radius:var(--r-btn);background:var(--cream);
  padding:var(--s5) clamp(16px,2.4vw,28px);margin:0 0 var(--s6);
}
.bnb-offer__line{
  margin:0;font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1rem + .5vw,22px);line-height:1.3;color:var(--ink);
}
.bnb-offer__note{margin:var(--s3) 0 0;font-size:var(--t-small);color:var(--muted);max-width:70ch}
.bnb-offer--compact{margin:0 0 var(--s5);padding:var(--s4) var(--s5)}
.bnb-offer--compact .bnb-offer__line{font-size:clamp(16px,.95rem + .3vw,19px)}
.bnb-section--wine .bnb-offer,
.bnb-band .bnb-offer{background:rgba(255,255,255,.06);border-color:var(--gold-soft)}
.bnb-section--wine .bnb-offer__line,
.bnb-band .bnb-offer__line{color:#fff}
.bnb-section--wine .bnb-offer__note,
.bnb-band .bnb-offer__note{color:var(--on-dark-soft)}

/* The old price stays visible beside the new one, so the offer is checkable. */
.bnb-was{color:var(--muted);text-decoration-thickness:1px;font-weight:400;margin-right:6px}
.bnb-now{color:var(--accent-text);font-weight:700}
.bnb-section--wine .bnb-was,.bnb-band .bnb-was{color:var(--on-dark-soft);opacity:.75}
.bnb-section--wine .bnb-now,.bnb-band .bnb-now{color:var(--gold-soft)}

/* ---------- Photo captions ----------
   One rule for every caption on the site: the gallery, the split figures and
   the lightbox all annotate a photograph, so they read the same way. */
.bnb-figure figcaption,
.bnb-gallery figcaption{
  display:block;margin:0;padding:var(--s4) 0 0;max-width:46ch;
  font-family:var(--display);font-style:normal;font-weight:400;
  font-size:clamp(13.5px,.82rem + .12vw,15px);line-height:1.45;
  letter-spacing:.005em;color:var(--muted);
}
.bnb-figure figcaption::before,
.bnb-gallery figcaption::before{
  content:"";display:block;width:22px;height:2px;margin:0 0 var(--s3);
  background:var(--gold-line);
}
.bnb-section--wine .bnb-figure figcaption,
.bnb-band .bnb-figure figcaption{color:var(--on-dark-soft)}

/* ---------- Splits ---------- */
.bnb-split{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
.bnb-split--media,.bnb-split--wide{grid-template-columns:1fr}
.bnb-split>*{min-width:0}
.bnb-figure{margin:0}
.bnb-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--cream-deep);display:block;border-radius:var(--r-img)}
.bnb-figure--wide img{aspect-ratio:4/3}

/* ---------- Checklists ---------- */
.bnb-checks{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.bnb-checks li{display:flex;gap:var(--s3);align-items:flex-start;color:var(--muted);
  max-width:64ch;font-size:var(--t-small)}
.bnb-checks svg{color:var(--wine-deep);flex:0 0 auto;margin-top:4px}
.bnb-checks--onwine li{color:var(--on-dark-soft)}
.bnb-checks--onwine svg{color:var(--gold-line)}

.bnb-facts{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.bnb-fact{background:var(--cream);border:0;padding:var(--s5)}
.bnb-fact__n{font-family:var(--display);font-size:clamp(26px,1.3rem+1vw,34px);
  line-height:1.1;color:var(--wine-deep)}
.bnb-fact p{margin:var(--s2) 0 0;font-size:var(--t-meta);color:var(--muted)}

/* ---------- Gallery. One ratio across the set, hover zoom, lightbox. ---------- */
.bnb-gallery{display:grid;gap:clamp(10px,1.2vw,16px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.bnb-gallery figure{margin:0;min-width:0}
.bnb-gallery .bnb-shot{
  display:block;width:100%;padding:0;border:0;background:var(--cream-deep);cursor:zoom-in;
  overflow:hidden;position:relative;aspect-ratio:4/5;border-radius:var(--r-img);
}
.bnb-gallery .bnb-shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease),filter .4s var(--ease);filter:saturate(.94)}
.bnb-gallery .bnb-shot:hover img{transform:scale(1.05);filter:saturate(1.06)}
.bnb-gallery .bnb-shot:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}

.bnb-empty{border:1px dashed var(--line-strong);padding:clamp(32px,4vw,56px) var(--s5);
  text-align:center;background:var(--cream)}
.bnb-empty h3{margin-bottom:var(--s2)}
.bnb-empty p{color:var(--muted);max-width:52ch;margin-inline:auto;font-size:var(--t-small)}

/* ---------- FAQ ---------- */
.bnb-faq{border-top:1px solid var(--line)}
.bnb-faq details{border-bottom:1px solid var(--line)}
.bnb-faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(18px,2vw,26px) 44px clamp(18px,2vw,26px) 0;
  font-family:var(--display);font-weight:500;font-size:clamp(17px,.95rem+.55vw,21px);
  line-height:var(--lh-subhead);color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.bnb-faq summary:hover{color:var(--wine-deep)}
.bnb-faq summary::-webkit-details-marker{display:none}
.bnb-faq summary::before,.bnb-faq summary::after{
  content:"";position:absolute;right:8px;top:50%;background:var(--accent-text);
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.bnb-faq summary::before{width:14px;height:1.5px;transform:translate(0,-50%)}
.bnb-faq summary::after{width:1.5px;height:14px;right:14.25px;transform:translate(0,-50%)}
.bnb-faq details[open] summary::after{transform:translate(0,-50%) rotate(90deg);opacity:0}
.bnb-faq__a{padding:0 0 clamp(18px,2vw,26px)}
.bnb-faq__a p{color:var(--muted);max-width:68ch;margin:0 0 var(--s3);font-size:var(--t-small)}
.bnb-faq__a p:last-child{margin-bottom:0}

/* ---------- Contact ---------- */
.bnb-contact{display:grid;gap:clamp(16px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,236px),1fr))}
.bnb-contact__item{background:var(--cream);border:0;padding:var(--s5);min-width:0}
.bnb-contact__item h3{font-family:var(--body);font-size:var(--t-label);font-weight:700;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--accent-text);
  margin-bottom:var(--s3)}
.bnb-contact__item a,.bnb-contact__item p{
  font-family:var(--display);font-weight:500;font-size:clamp(16px,.9rem+.4vw,19px);
  color:var(--ink);text-decoration:none;margin:0;line-height:var(--lh-subhead);
}
.bnb-contact__item a{display:inline-flex;align-items:center;min-height:44px}
.bnb-contact__item a:hover{color:var(--accent-text)}

.bnb-hours{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.bnb-hours th,.bnb-hours td{text-align:left;padding:var(--s3) 0;border-bottom:1px solid var(--line);
  font-size:var(--t-small)}
.bnb-hours tr:last-child th,.bnb-hours tr:last-child td{border-bottom:0}
.bnb-hours td:last-child{text-align:right;color:var(--muted)}
.bnb-hours th{font-weight:500;color:var(--ink)}

.bnb-pills{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:0;padding:0}
.bnb-pills li{padding:var(--s2) var(--s4);border:1px solid var(--line-strong);
  border-radius:var(--r-btn);
  font-size:var(--t-meta);color:var(--muted);line-height:var(--lh-tight);letter-spacing:.04em}
/* On the wine grounds the pills need light ink and a light hairline. */
.bnb-section--wine .bnb-pills li,
.bnb-cta .bnb-pills li,
.bnb-band .bnb-pills li{color:var(--on-dark-soft);border-color:rgba(255,255,255,.36)}

/* ---------- Notes ---------- */
.bnb-note{border-left:2px solid var(--gold-line);background:var(--cream);
  padding:var(--s4) var(--s5);margin:0 0 var(--s5)}
.bnb-note p{margin:0;color:var(--muted);font-size:var(--t-small);max-width:68ch}
.bnb-note p+p{margin-top:var(--s2)}

/* ---------- Page hero ---------- */
.bnb-pagehero{background:var(--cream);border-bottom:1px solid var(--line);
  padding-block:clamp(40px,5vw,80px)}
.bnb-pagehero h1{max-width:19ch;font-size:clamp(32px,1.3rem+3.2vw,58px)}
.bnb-pagehero .bnb-lede{margin-bottom:0}
.bnb-crumbs{font:600 var(--t-label)/1 var(--body);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s4)}
.bnb-crumbs a{color:var(--muted);text-decoration:none}
.bnb-crumbs a:hover{color:var(--accent-text);text-decoration:underline}

/* ---------- CTA band ---------- */
.bnb-cta{background:var(--wine-deep);color:var(--on-dark-soft)}
.bnb-cta__inner{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,44px);
  align-items:center;padding-block:clamp(44px,5.2vw,80px)}
.bnb-cta h2{color:#fff;margin-bottom:var(--s3);max-width:18ch}
.bnb-cta p{color:var(--on-dark-soft);max-width:54ch;margin:0}
.bnb-cta__btns{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* ---------- Footer ---------- */
.bnb-footer{background:var(--wine-darkest);color:var(--on-dark-soft);
  padding-block:clamp(48px,5.6vw,80px) var(--s6)}
.bnb-footer a{color:var(--on-dark-soft);text-decoration:none}
.bnb-footer a:hover{color:#fff;text-decoration:underline}
.bnb-footer__grid{display:grid;gap:clamp(28px,3.4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,214px),1fr))}
.bnb-footer__grid>*{min-width:0}
.bnb-footer img{height:44px;width:auto;margin-bottom:var(--s4)}
.bnb-footer h2{font-family:var(--body);font-size:var(--t-label);font-weight:700;
  letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--gold-soft);
  margin-bottom:var(--s4)}
.bnb-footer ul{list-style:none;margin:0;padding:0;display:grid;font-size:var(--t-small)}
.bnb-footer ul a{display:inline-flex;align-items:center;min-height:44px}
.bnb-footer p{font-size:var(--t-small);max-width:34ch;line-height:1.65}
.bnb-footer__base{margin-top:clamp(32px,4vw,52px);padding-top:var(--s5);
  border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;
  gap:var(--s2) var(--s5);justify-content:space-between;font-size:var(--t-meta)}
.bnb-footer__base a{display:inline-flex;align-items:center;min-height:44px}
/* Higher specificity than `.bnb-footer ul` so the row is not overridden back
   to the footer's single-column grid, which is what stacked these vertically. */
.bnb-footer ul.bnb-social{display:flex;flex-wrap:wrap;gap:var(--s3);list-style:none;margin:var(--s5) 0 0;padding:0}
.bnb-social li{margin:0}
.bnb-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--r-btn);color:var(--on-dark-soft);
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.bnb-social a:hover{border-color:var(--gold-line);color:var(--gold-soft);background:rgba(255,255,255,.06)}

/* ---------- Lightbox ---------- */
.bnb-lb{display:none;position:fixed;inset:0;z-index:2000;background:rgba(28,10,18,.97);
  align-items:center;justify-content:center;padding:clamp(16px,4vw,40px)}
.bnb-lb.open{display:flex}
.bnb-lb__inner{position:relative;max-width:1100px;width:100%;max-height:92vh;
  display:flex;flex-direction:column;align-items:center}
.bnb-lb__img{max-width:100%;max-height:calc(92vh - 120px);object-fit:contain;border-radius:var(--r-img)}
.bnb-lb__close{position:absolute;top:-56px;right:0;width:44px;height:44px;background:none;
  border:1px solid rgba(255,255,255,.3);border-radius:var(--r-btn);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.bnb-lb__close:hover{border-color:#fff}
.bnb-lb__bar{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5)}
.bnb-lb__nav{width:44px;height:44px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-btn);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.bnb-lb__nav:hover{background:rgba(255,255,255,.14)}
.bnb-lb__count{font:700 var(--t-label)/1 var(--body);letter-spacing:.2em;
  color:rgba(255,255,255,.5);min-width:70px;text-align:center}
.bnb-lb__cap{margin-top:var(--s4);font-family:var(--display);
  font-size:clamp(14px,.85rem + .15vw,16px);line-height:1.45;color:rgba(255,255,255,.82);
  text-align:center;max-width:60ch}

/* ---------- Mobile sticky contact bar ---------- */
.bnb-sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:880;
  background:var(--wine-darkest);border-top:1px solid rgba(255,255,255,.12)}
.bnb-sticky a{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:56px;padding:var(--s3);color:#fff;text-decoration:none;
  font:700 var(--t-label)/1 var(--body);letter-spacing:.14em;text-transform:uppercase}
.bnb-sticky a+a{border-left:1px solid rgba(255,255,255,.12)}
.bnb-sticky a:hover{background:rgba(255,255,255,.08);color:#fff}
.bnb-sticky .bnb-sticky--wa{background:#1F7A4C}
.bnb-sticky .bnb-sticky--wa:hover{background:#1A6640}

/* ---------- Reveal on scroll. Resting state is VISIBLE. ---------- */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.on{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js .rv{opacity:1;transform:none}
  .bnb-btn:hover{transform:none}
}

/* ----------------------------------------------------------------------
   Breakpoints. Three, each because the CONTENT breaks there.
   ---------------------------------------------------------------------- */

/* The logo, six menu items and an action stop fitting on one line. */
@media (max-width:1000px){
  .bnb-nav,.bnb-header__cta{display:none}
  .bnb-burger{display:flex}
}

/* Two columns of anything stop being readable. */
@media (min-width:880px){
  .bnb-hero__grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center}
  .bnb-hero__copy{padding-inline:0;margin-inline:0;max-width:none;
    padding-left:max(var(--gutter),calc((100vw - var(--content)) / 2));
    padding-right:clamp(32px,4vw,64px)}
  .bnb-hero__media{align-self:stretch}
  .bnb-hero__media img{height:100%;aspect-ratio:auto;min-height:520px}
  .bnb-split--media{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bnb-split--wide{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .bnb-cta__inner{grid-template-columns:minmax(0,1fr) auto}
  .bnb-menu-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  .bnb-sticky{display:flex}
  body{padding-bottom:56px}            /* clear the sticky bar */
  .bnb-row{grid-template-columns:1fr;gap:2px}
  .bnb-row__price{text-align:left}
  .bnb-btn{width:100%}
  .bnb-footer__base{flex-direction:column;gap:0}
  .bnb-lb__close{top:auto;bottom:-52px;right:50%;transform:translateX(50%)}
}

@media (max-width:380px){
  :root{--gutter:18px}
  .bnb-card{padding:var(--s4)}
  .bnb-step{padding-left:36px}
}