/* ═══════════════════════════════════════════════════════════════════════════
   Novalashethix Lash Suite — Portmore, St. Catherine, Jamaica
   2026-09-16: rebuilt to her instruction — "as much like browsbyvi as possible:
   colours, fonts, style and structure". So this is browsbyvi's design system —
   cream and nude washes, hazelnut, black type and black pill buttons, gold kept
   for the logo and the reviews — carrying her own champagne monogram.
   Mobile-first: designed at 375px; every min-width query only widens.
   ═══════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

:root{
  --ink:#100E0C; --ink-2:#3B332C; --muted:#7E7268;
  --cream:#F8F3ED; --cream-2:#FCF9F5;
  --nude:#EFE5D9; --nude-2:#E7DACB; --sand:#DFCFBC;
  --hazel:#B08E6F; --hazel-d:#8A6A4E; --hazel-l:#CDB199;
  --gold:#C79A55; --gold-l:#E0C08A;
  --line:rgba(16,14,12,0.10); --line-2:rgba(16,14,12,0.18);
  --shadow:0 18px 44px rgba(70,52,36,0.13);
  --shadow-sm:0 6px 18px rgba(70,52,36,0.09);
  --r:16px; --r-sm:11px; --r-cat:7px;
  --shell:1120px; --nav-h:60px;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

body{
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.7;
  background:var(--cream); color:var(--ink);
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
/* ⚠️ height:auto is load-bearing: every <img> carries width/height for CLS, and without
   it those presentation hints stretch anything styled width:100%. */
img,video{ display:block; max-width:100%; height:auto; }
button{ cursor:pointer; border:none; background:none; font:inherit; color:inherit; -webkit-tap-highlight-color:transparent; }
svg{ display:block; }
:focus-visible{ outline:2px solid var(--hazel-d); outline-offset:3px; border-radius:3px; }

.i{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.5;
    stroke-linecap:round; stroke-linejoin:round; flex:none; }

@keyframes fadeUp{ from{opacity:0;transform:translateY(18px);} to{opacity:1;transform:none;} }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes softPulse{ 0%,100%{opacity:.45;} 50%{opacity:.95;} }
@keyframes breathe{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.035);} }
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }

[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s ease,transform .7s ease; }
[data-reveal].d1{ transition-delay:.08s; } [data-reveal].d2{ transition-delay:.16s; } [data-reveal].d3{ transition-delay:.24s; }
[data-reveal].on{ opacity:1; transform:none; }
html:not(.js) [data-reveal]{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,[data-reveal],.hero-logo{ animation:none!important; transition:none!important; opacity:1!important; transform:none!important; }
}

/* ── utility ────────────────────────────────────────────────────────────── */
.shell{ max-width:var(--shell); margin:0 auto;
  padding:0 max(1.25rem,env(safe-area-inset-left)) 0 max(1.25rem,env(safe-area-inset-right)); }
@media(min-width:760px){ .shell{ padding:0 2rem; } }
.narrow{ max-width:780px; }
.section{ position:relative; padding:3.6rem 0; }
@media(min-width:760px){ .section{ padding:5.6rem 0; } }
.sec-soft{ background:var(--cream); }
.sec-white{ background:var(--cream-2); }
.sec-nude{ background:var(--nude); }
.sec-ink{ background:var(--ink); color:var(--cream); }
.center{ text-align:center; }

.eyebrow{ display:inline-block; font-size:.6rem; font-weight:500; letter-spacing:.34em;
  text-transform:uppercase; color:var(--hazel-d); margin-bottom:.7rem; }
.sec-ink .eyebrow{ color:var(--gold); }
h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:-.012em; }
.sec-title{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,8.4vw,3.3rem);
  line-height:1.06; letter-spacing:-.012em; color:var(--ink); }
.sec-ink .sec-title{ color:var(--cream); }
.sec-title i,.pbanner h1 i{ font-style:italic; font-weight:300; }
.h3{ font-family:var(--serif); font-size:clamp(1.3rem,4.8vw,1.7rem); font-weight:500; line-height:1.18; }
.rule{ width:44px; height:1px; background:var(--hazel); opacity:.65; margin:1rem 0 1.2rem; }
.rule.c{ margin-left:auto; margin-right:auto; }
.sec-ink .rule{ background:var(--gold); opacity:1; }
.sec-copy{ font-size:.94rem; line-height:1.78; color:var(--ink-2); max-width:56ch; }
.sec-ink .sec-copy,.sec-ink p{ color:rgba(246,239,230,.72); }
.center .sec-copy,.center .rule{ margin-left:auto; margin-right:auto; }
.prose p{ font-size:.94rem; line-height:1.78; color:var(--ink-2); }
.prose p+p{ margin-top:.9rem; }
.prose strong{ color:var(--ink); font-weight:500; }
.sec-ink .prose strong{ color:var(--cream); }

/* black pill buttons — the house style */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:46px;
  padding:.92rem 1.7rem; font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  border-radius:999px; transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
  white-space:nowrap;
}
.btn .i{ width:1.02em; height:1.02em; }
.btn-ink{ background:var(--ink); color:var(--cream); box-shadow:0 10px 24px rgba(16,14,12,.22); }
.btn-ink:active{ transform:translateY(1px); }
.btn-line,.btn-ghost{ border:1px solid var(--ink); color:var(--ink); }
.btn-line:active,.btn-ghost:active{ background:var(--ink); color:var(--cream); }
/* on dark: names kept because the subpages already use them */
.btn-gold{ background:var(--cream); color:var(--ink); }
.btn-ghost-g{ border:1px solid rgba(248,243,237,.55); color:var(--cream); backdrop-filter:blur(4px); }
@media(hover:hover){
  .btn-ink:hover{ background:var(--ink-2); transform:translateY(-2px); }
  .btn-line:hover,.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
  .btn-gold:hover{ background:#fff; transform:translateY(-2px); }
  .btn-ghost-g:hover{ background:rgba(248,243,237,.16); border-color:var(--cream); }
}
.btns{ display:flex; flex-wrap:wrap; gap:.7rem; }
.center .btns{ justify-content:center; }
.textlink{ display:inline-flex; align-items:center; gap:.35rem; min-height:44px; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.textlink span{ border-bottom:1px solid var(--line-2); padding-bottom:.2rem; }
.sec-ink .textlink{ color:var(--cream); }

/* ── nav ────────────────────────────────────────────────────────────────── */
#nav{ position:fixed; top:0; left:0; right:0; z-index:500; border-bottom:1px solid transparent;
  transition:background .34s ease,box-shadow .34s ease,border-color .34s ease; }
#nav.pin,body.solid-nav #nav{ background:rgba(248,243,237,.93); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-bottom-color:var(--line); }
.nav-in{ max-width:var(--shell); margin:0 auto; padding:0 1.1rem; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
@media(min-width:760px){ .nav-in{ padding:0 2rem; height:72px; } }
@media(min-width:900px){ .nav-in{ gap:2.4rem; } }
.nav-logo{ display:flex; align-items:center; gap:.55rem; min-height:44px; margin-right:auto;
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .34s ease,transform .34s ease; }
#nav.pin .nav-logo,body.solid-nav .nav-logo{ opacity:1; transform:none; pointer-events:auto; }
.nav-logo img{ height:26px; width:auto; }
.nav-logo .wordmark{ font-family:var(--serif); font-size:.92rem; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink); line-height:1; }
@media(min-width:760px){ .nav-logo img{ height:30px; } .nav-logo .wordmark{ font-size:1.02rem; } }
.nav-links{ display:none; gap:2.1rem; list-style:none; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
@media(min-width:960px){ .nav-links{ display:flex; } }
.nav-links a{ color:var(--ink); opacity:.72; transition:opacity .2s ease; padding:.4rem 0; }
.nav-links a:hover,.nav-links a[aria-current]{ opacity:1; }
#nav:not(.pin) .nav-links a{ color:var(--cream); opacity:.9; text-shadow:0 1px 8px rgba(30,20,12,.4); }
body.solid-nav #nav .nav-links a{ color:var(--ink); }
.nav-right{ display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.nav-book{ display:none; min-height:38px; padding:.6rem 1.35rem; font-size:.62rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; background:var(--ink); color:var(--cream); border-radius:999px; }
.nav-book:hover{ background:var(--ink-2); }
@media(min-width:960px){ .nav-book{ display:inline-flex; } }
.burger{ display:flex; width:44px; height:44px; border-radius:999px; align-items:center; justify-content:center;
  color:var(--ink); border:1px solid var(--line-2); background:rgba(248,243,237,.55); }
#nav:not(.pin) .burger{ color:var(--cream); border-color:rgba(248,243,237,.42);
  background:rgba(20,16,12,.22); backdrop-filter:blur(6px); }
body.solid-nav #nav .burger{ color:var(--ink); border-color:var(--line-2); background:rgba(248,243,237,.55); }
@media(min-width:960px){ .burger{ display:none; } }
.burger .i{ width:22px; height:22px; }

#scrim{ position:fixed; inset:0; z-index:590; background:rgba(28,20,14,.42); opacity:0; pointer-events:none; transition:opacity .3s ease; }
#scrim.open{ opacity:1; pointer-events:auto; }
#drawer{ position:fixed; inset:0 0 0 auto; width:min(320px,86vw); z-index:600; background:var(--cream-2);
  transform:translateX(101%); transition:transform .32s cubic-bezier(.4,.1,.2,1);
  box-shadow:-18px 0 50px rgba(40,28,18,.24); display:flex; flex-direction:column;
  padding:4.6rem 1.5rem calc(2rem + env(safe-area-inset-bottom)); overflow-y:auto; }
#drawer.open{ transform:none; }
#drawer a{ font-size:.98rem; font-weight:300; letter-spacing:.04em; padding:1.05rem .2rem; min-height:50px;
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.85rem; color:var(--ink); }
#drawer a .i{ width:18px; height:18px; color:var(--hazel-d); }
#drawer .btn{ margin-top:1.5rem; }
.drawer-x{ position:absolute; top:1.1rem; right:1.15rem; width:44px; height:44px; border-radius:999px;
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.drawer-x .i{ width:20px; height:20px; }
.drawer-foot{ margin-top:auto; padding-top:1.5rem; font-size:.72rem; line-height:1.8; color:var(--muted); }

/* ── hero: the blurred banner ───────────────────────────────────────────── */
#hero{ position:relative; min-height:100svh; overflow:hidden; background:#8A6A4E; display:flex; }
.hero-bg{ position:absolute; inset:-4%;
  background-image:url('img/banner.jpg');
  background-image:image-set(url('img/banner.webp') type('image/webp'), url('img/banner.jpg') type('image/jpeg'));
  background-size:cover; background-position:center; transform:scale(1.06); }
@media(max-width:760px){
  .hero-bg{
    background-image:url('img/banner-sm.jpg');
    background-image:image-set(url('img/banner-sm.webp') type('image/webp'), url('img/banner-sm.jpg') type('image/jpeg'));
  }
}
.hero-tint{ position:absolute; inset:0;
  background:
    linear-gradient(178deg, rgba(62,44,30,0.40) 0%, rgba(146,114,84,0.24) 40%, rgba(34,24,16,0.72) 100%),
    radial-gradient(ellipse 104% 68% at 50% 42%, rgba(198,166,131,0.18) 0%, rgba(44,30,20,0.56) 100%); }
.hero-in{ position:relative; z-index:2; width:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:calc(var(--nav-h) + 2rem) 1.5rem 3.4rem; }
.hero-logo{ width:min(150px,32vw); height:auto; filter:drop-shadow(0 2px 14px rgba(20,12,6,.42));
  animation:breathe 6s ease-in-out infinite; }
.hero-name{ margin-top:1.1rem; font-family:var(--serif); font-weight:400; font-size:clamp(1.85rem,9vw,3.3rem);
  line-height:1; letter-spacing:.14em; text-transform:uppercase; color:#FBF7F1;
  text-shadow:0 2px 14px rgba(20,12,6,.45); animation:fadeUp .9s .15s both; }
.hero-role{ margin-top:.7rem; font-size:.56rem; letter-spacing:.34em; text-transform:uppercase;
  color:rgba(251,247,241,.8); animation:fadeUp .9s .3s both; }
.hero-divide{ width:54px; height:1px; background:rgba(224,192,138,.7); margin:1rem auto; animation:fadeUp .9s .35s both; }
.hero-sub{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.12rem,4.6vw,1.6rem);
  line-height:1.4; color:#FBF7F1; text-shadow:0 2px 12px rgba(20,12,6,.42); animation:fadeUp .9s .45s both; max-width:22ch; }
.hero-tag{ margin-top:.85rem; font-size:.56rem; font-weight:400; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(251,247,241,.82); animation:fadeUp .9s .55s both; }
.hero-ctas{ display:flex; flex-direction:column; gap:.65rem; margin-top:2rem; width:min(280px,80vw); animation:fadeUp .9s .65s both; }
@media(min-width:620px){ .hero-ctas{ flex-direction:row; width:auto; } }
.hero-ctas .btn{ width:100%; }
@media(min-width:620px){ .hero-ctas .btn{ width:auto; } }
/* a 26px chevron is a 26px thumb target; the padding gives it the 44px a finger
   needs without making the mark itself any bigger */
.hero-scroll{ position:absolute; bottom:.6rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  color:rgba(251,247,241,.78); animation:softPulse 2.8s ease-in-out infinite; }
.hero-scroll .i{ width:26px; height:26px; }

/* ── services ───────────────────────────────────────────────────────────── */
#svcLoad{ text-align:center; color:var(--muted); font-size:.85rem; padding:2rem 0;
  display:flex; align-items:center; justify-content:center; gap:.5rem; }
#svcLoad .i{ width:18px; height:18px; animation:spin 1s linear infinite; }
.svc-grid{ display:grid; gap:.95rem; margin-top:2rem; }
@media(min-width:900px){ .svc-grid{ grid-template-columns:repeat(3,1fr); align-items:start; gap:1.1rem; } }
.cat-card{ --c:var(--hazel); background:var(--cream-2); border:1px solid var(--line);
  border-radius:var(--r-cat); overflow:hidden; box-shadow:var(--shadow-sm); }
.cat-head{ display:flex; align-items:center; gap:.8rem; width:100%; text-align:left; min-height:64px;
  padding:1.05rem 1.1rem; background:var(--nude); border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52); }
@supports (background:color-mix(in srgb,#000 20%,#fff)){
  /* The category colours on the tenant are warm greys (#B3A597–#CEC3B8), which wash
     into cream as a flat putty. --cg carries each one toward the site's gold first,
     so the heads read as champagne while the categories stay distinguishable. */
  .cat-card{ --cg:color-mix(in srgb, var(--c) 45%, var(--gold)); }
  /* a satin sweep of the category's own champagne — 15pp between stops, so it reads
     as light falling across the card rather than as a coloured gradient */
  .cat-head{ background:linear-gradient(135deg,
      color-mix(in srgb, var(--cg) 32%, var(--cream)) 0%,
      color-mix(in srgb, var(--cg) 16%, var(--cream)) 54%,
      color-mix(in srgb, var(--cg) 26%, var(--cream)) 100%); }
}
.cat-ic{ width:38px; height:38px; flex:none; border-radius:999px; background:var(--cream-2);
  border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--hazel-d); }
/* after the base rule, not inside the block above — equal specificity, so source
   order is what decides */
@supports (background:color-mix(in srgb,#000 20%,#fff)){
  .cat-ic{ border-color:color-mix(in srgb, var(--cg) 46%, var(--line-2)); }
}
.cat-ic .i{ width:19px; height:19px; }
.cat-tx{ min-width:0; flex:1; }
.cat-name{ display:block; font-family:var(--serif); font-size:1.32rem; font-weight:500; line-height:1.12; color:var(--ink); }
.cat-cnt{ display:block; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin-top:.16rem; }
.cat-chev{ flex:none; width:20px; height:20px; color:var(--muted); transition:transform .3s ease; }
.cat-card.open .cat-chev{ transform:rotate(180deg); }
.cat-body{ padding:.3rem .55rem .55rem; background:linear-gradient(180deg,var(--cream-2) 0%,#F7F2EA 100%);
  display:grid; grid-template-rows:1fr; }
.cat-body>div{ min-height:0; }
@media(max-width:899px){
  .cat-body{ grid-template-rows:0fr; padding-top:0; padding-bottom:0; transition:grid-template-rows .32s ease,padding .32s ease; }
  .cat-card.open .cat-body{ grid-template-rows:1fr; padding:.3rem .55rem .55rem; }
  .cat-body>div{ overflow:hidden; }
}
@media(min-width:900px){ .cat-chev{ display:none; } }
.svc{ border-bottom:1px solid var(--line); }
.cat-body .svc:last-child{ border-bottom:none; }
.svc-top{ width:100%; display:flex; align-items:center; gap:.7rem; padding:.95rem .55rem; text-align:left; min-height:56px; }
.svc-tx{ flex:1; min-width:0; }
.svc-nm{ display:block; font-size:.93rem; font-weight:400; color:var(--ink); line-height:1.32; }
.svc-meta{ display:block; font-size:.7rem; color:var(--muted); margin-top:.22rem; letter-spacing:.04em; }
.svc-pr{ font-size:.95rem; font-weight:500; color:var(--ink); flex:none; font-variant-numeric:tabular-nums; }
.svc-chev{ flex:none; width:19px; height:19px; color:var(--muted); transition:transform .3s ease,color .2s ease; }
.svc.open .svc-chev{ transform:rotate(180deg); color:var(--ink); }
.svc-detail{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.4,.1,.2,1); }
.svc.open .svc-detail{ grid-template-rows:1fr; }
.svc-detail>div{ overflow:hidden; }
.svc-inner{ padding:0 .55rem 1.05rem; }
.svc-desc{ font-size:.84rem; line-height:1.72; color:var(--ink-2); }
.svc-desc p+p{ margin-top:.6rem; }
.svc-book{ margin-top:.95rem; display:inline-flex; align-items:center; gap:.45rem; min-height:44px;
  background:var(--ink); color:var(--cream); border-radius:999px; padding:.66rem 1.25rem;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; font-weight:500; }
.svc-book .i{ width:15px; height:15px; }
.svc-foot{ margin-top:2rem; display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.svc-foot p{ font-size:.78rem; color:var(--muted); text-align:center; max-width:52ch; line-height:1.65; }
.svc-foot p strong{ color:var(--ink); font-weight:500; }
.svc-terms{ display:inline-flex; align-items:center; gap:.3rem; min-height:44px; font-size:.72rem;
  letter-spacing:.08em; color:var(--ink); }
.svc-terms span{ border-bottom:1px solid var(--line-2); padding-bottom:.2rem; }

/* ── the client gallery slider ──────────────────────────────────────────── */
#results{ background:var(--nude); overflow:hidden; }
.res-rail{ overflow:hidden; padding:.3rem 0; margin-top:1.8rem; cursor:pointer; }
.res-track{ display:flex; width:max-content; will-change:transform; animation:marquee var(--dur,64s) linear infinite; }
.res-rail:hover .res-track,.res-track.held{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .res-track{ animation:none; } }
/* the gap lives on the tile, not the flex container: with `gap` the two halves differ
   by half a gap and translateX(-50%) jumps on every loop */
.res-tile{ position:relative; flex:none; margin-right:.55rem; width:152px; height:203px;
  border-radius:var(--r-sm); overflow:hidden; background:var(--nude-2); box-shadow:var(--shadow-sm); }
@media(min-width:760px){ .res-tile{ width:198px; height:264px; } }
.res-tile img,.res-tile video{ width:100%; height:100%; object-fit:cover; }
.res-tile video{ position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.res-tile video.on{ opacity:1; }
.res-play{ position:absolute; right:.42rem; bottom:.42rem; width:22px; height:22px; border-radius:999px;
  background:rgba(16,14,12,.5); color:#fff; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(3px); }
.res-play .i{ width:12px; height:12px; }
.res-foot{ margin-top:1.5rem; text-align:center; }
.res-ig{ display:inline-flex; align-items:center; gap:.55rem; min-height:44px; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.res-ig span.lbl{ border-bottom:1px solid var(--line-2); padding-bottom:.3rem; }
.res-ig .i{ width:16px; height:16px; }

/* ── shop ───────────────────────────────────────────────────────────────── */
#shop{ overflow:hidden; }
.shop-rail{ overflow:hidden; padding:.3rem 0; margin-top:1.8rem; }
.shop-track{ display:flex; width:max-content; will-change:transform;
  animation:marquee var(--dur,52s) linear infinite; }
.shop-rail:hover .shop-track{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){ .shop-track{ animation:none; } }
/* as with the client rail: the gap is on the tile, never the flex container, or
   the two halves differ by half a gap and translateX(-50%) jumps every loop */
.shop-tile{ display:block; flex:none; margin-right:.55rem; width:168px;
  border-radius:var(--r-sm); background:var(--cream-2); border:1px solid var(--line);
  overflow:hidden; box-shadow:var(--shadow-sm); }
@media(min-width:760px){ .shop-tile{ width:210px; } }
.shop-tile img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.shop-tile-nm{ display:block; padding:.62rem .7rem .72rem; font-family:var(--serif);
  font-size:.95rem; line-height:1.25; color:var(--ink); }
.shop-tile-pr{ display:block; margin-top:.28rem; font-family:var(--sans); font-size:.6rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--hazel-d); }

/* the /shop/ grid */
.pgrid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(min-width:700px){ .pgrid{ grid-template-columns:repeat(3,1fr); gap:1.4rem; } }
@media(min-width:1000px){ .pgrid{ grid-template-columns:repeat(4,1fr); } }
.pcard{ display:flex; flex-direction:column; background:var(--cream-2);
  border:1px solid var(--line); border-radius:var(--r-cat); overflow:hidden;
  box-shadow:var(--shadow-sm); scroll-margin-top:calc(var(--nav-h) + 1rem); }
.pcard-ph{ aspect-ratio:1/1; overflow:hidden; background:var(--nude-2); }
.pcard-ph img{ width:100%; height:100%; object-fit:cover; }
.pcard-bd{ display:flex; flex-direction:column; flex:1; padding:1rem .95rem 1.05rem; }
.pcard-cat{ font-size:.55rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--hazel-d); }
.pcard-bd h3{ font-family:var(--serif); font-size:1.18rem; font-weight:500;
  line-height:1.2; margin:.34rem 0 .3rem; color:var(--ink); }
.pcard-price{ display:block; font-family:var(--serif); font-size:1.05rem; color:var(--hazel-d);
  margin-bottom:.5rem; }
.pcard-price.soft{ font-family:var(--sans); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); }
.pcard-bd p{ font-size:.82rem; line-height:1.65; color:var(--muted); margin-bottom:1rem; }
/* the CTA sits on the floor of the card, so a short blurb and a long one still
   line their buttons up across the row. ⚠️ .btn is white-space:nowrap, and two-up
   on a 390px phone a card is ~165px — "Order on WhatsApp" has to be allowed to
   wrap there or it is clipped mid-word. */
.pcard-cta{ margin-top:auto; width:100%; padding:.72rem 1rem; font-size:.6rem;
  letter-spacing:.14em; justify-content:center; white-space:normal;
  text-align:center; line-height:1.45; }
@media(min-width:480px){ .pcard-cta{ font-size:.62rem; letter-spacing:.18em;
  padding-left:1.4rem; padding-right:1.4rem; } }

/* ── about ──────────────────────────────────────────────────────────────── */
.ab-grid{ display:grid; gap:2.4rem; }
@media(min-width:900px){ .ab-grid{ grid-template-columns:.92fr 1.08fr; gap:3.4rem; align-items:center; } }
/* ⛔ Her brand portrait carries its own lockup, so it is shown WHOLE: the frame
   takes the picture's ratio rather than cropping it to 4:5. She rejected a tighter
   crop twice. If the photograph is ever replaced, match this to the new file. */
.ab-shot{ position:relative; border-radius:var(--r-cat); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:900/1183; background:var(--nude-2); max-width:420px; margin:0 auto; width:100%; }
@media(min-width:900px){ .ab-shot{ max-width:none; } }
.ab-shot img{ width:100%; height:100%; object-fit:cover; }
.ab-stamp{ position:absolute; left:1rem; bottom:1rem; z-index:2; display:block; background:var(--ink);
  color:var(--cream); padding:.7rem 1rem; border-radius:var(--r-cat); box-shadow:var(--shadow); }
.ab-stamp .n{ display:block; font-family:var(--serif); font-size:1.5rem; line-height:1; color:var(--gold); }
.ab-stamp .l{ display:block; font-size:.53rem; letter-spacing:.22em; text-transform:uppercase; margin-top:.24rem; opacity:.82; }
.ab-feats{ display:grid; grid-template-columns:1fr 1fr; gap:1.35rem .95rem; margin-top:1.9rem; }
@media(max-width:359px){ .ab-feats{ grid-template-columns:1fr; } }
.ab-feat .ring{ width:40px; height:40px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--nude); display:flex; align-items:center; justify-content:center; margin-bottom:.6rem; color:var(--hazel-d); }
.ab-feat .ring .i{ width:19px; height:19px; }
.ab-feat h4{ font-family:var(--serif); font-size:1.16rem; font-weight:500; margin-bottom:.2rem; color:var(--ink); }
.ab-feat p{ font-size:.79rem; line-height:1.62; color:var(--muted); }
.ab-sign{ margin-top:1.6rem; font-family:var(--serif); font-style:italic; font-size:1.22rem; color:var(--hazel-d); }

/* ── reviews ────────────────────────────────────────────────────────────── */
.rev-wrap{ margin:2rem auto 0; position:relative; max-width:660px; }
.rev-item{ display:none; text-align:center; animation:fadeUp .6s both; }
.rev-item.active{ display:block; }
.rev-stars{ color:var(--gold); letter-spacing:.28em; font-size:.8rem; margin-bottom:1rem; }
.rev-text{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(1.08rem,4.6vw,1.42rem);
  line-height:1.62; color:#F6EFE6; }
.rev-auth{ margin-top:1.3rem; display:flex; align-items:center; justify-content:center; gap:.7rem; }
.rev-av{ width:36px; height:36px; border-radius:999px; background:rgba(199,154,85,.18);
  border:1px solid rgba(199,154,85,.42); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:.86rem; }
.rev-auth>span{ text-align:left; }
.rev-nm{ display:block; font-size:.82rem; letter-spacing:.05em; color:var(--cream); }
.rev-src{ display:block; font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(246,239,230,.5); margin-top:.14rem; }
.rev-ctrl{ display:flex; gap:.42rem; justify-content:center; margin-top:1.7rem; }
.rev-dot{ width:22px; height:22px; border-radius:999px; display:flex; align-items:center; justify-content:center; }
.rev-dot::before{ content:''; width:6px; height:6px; border-radius:999px; background:rgba(246,239,230,.26); transition:background .25s ease,width .25s ease; }
.rev-dot.active::before{ background:var(--gold); width:20px; }

/* ── quick links ────────────────────────────────────────────────────────── */
.ql-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin-top:1.9rem; }
@media(min-width:760px){ .ql-grid{ grid-template-columns:repeat(4,1fr); gap:.9rem; } }
.ql{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  padding:1.4rem .8rem; border-radius:var(--r); background:var(--cream-2); border:1px solid var(--line);
  box-shadow:var(--shadow-sm); transition:transform .2s ease,box-shadow .2s ease; }
.ql:active{ transform:translateY(1px); }
@media(hover:hover){ .ql:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } }
.ql-ic{ width:44px; height:44px; border-radius:999px; background:var(--ink); color:var(--cream);
  display:flex; align-items:center; justify-content:center; }
.ql-ic .i{ width:20px; height:20px; }
.ql-l{ font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); }
.ql-s{ font-size:.68rem; line-height:1.5; color:var(--muted); }
.ql-s b{ font-weight:500; color:var(--hazel-d); }

/* ── location ───────────────────────────────────────────────────────────── */
#map{ height:300px; width:100%; background:var(--nude-2); border-radius:var(--r-cat); overflow:hidden; }
@media(min-width:760px){ #map{ height:400px; } }
.map-wrap{ margin-top:1.9rem; }
.hours-card{ margin:1.4rem auto 0; max-width:420px; background:var(--cream-2); border:1px solid var(--line);
  border-radius:var(--r); padding:1.1rem 1.2rem; box-shadow:var(--shadow-sm); }
.hours-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem;
  padding-bottom:.7rem; border-bottom:1px solid var(--line); }
.hours-label{ font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); }
.badge{ font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; padding:.26rem .62rem; border-radius:999px;
  background:rgba(16,14,12,.06); color:var(--muted); border:1px solid var(--line-2); }
.badge.open{ background:rgba(94,124,74,.14); color:#4C6A3C; border-color:rgba(94,124,74,.3); }
.badge i{ display:none; }
.hours-row{ display:flex; justify-content:space-between; padding:.36rem 0; font-size:.82rem; color:var(--ink-2); }
.hours-row.today{ color:var(--ink); font-weight:500; }
.hours-row.shut .t{ color:var(--muted); }
.hours-row .t{ font-variant-numeric:tabular-nums; }
/* the /visit/ page keeps a table */
table.hours{ width:100%; border-collapse:collapse; margin-top:1.2rem; }
table.hours td{ padding:.62rem .2rem; border-bottom:1px solid var(--line); font-size:.9rem; }
table.hours td:last-child{ text-align:right; color:var(--muted); }
table.hours tr.today td{ color:var(--hazel-d); font-weight:500; }
.loc-cta{ margin-top:1.3rem; text-align:center; }
.mm{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; }
.mm-core{ width:30px; height:30px; border-radius:999px; background:var(--ink); border:2px solid var(--cream);
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(16,14,12,.36); }
.mm-core img{ width:16px; height:16px; }
.leaflet-container{ font-family:var(--sans)!important; background:var(--nude-2)!important; }
/* ⚠️ not cartocdn — it now serves an "API KEY REQUIRED" tile with a 200 */
.leaflet-tile-pane{ filter:grayscale(.55) sepia(.16) brightness(1.04) contrast(.95); }
.leaflet-control-attribution{ font-family:var(--sans)!important; font-size:9px!important; line-height:1.5!important;
  padding:1px 6px!important; background:rgba(248,243,237,.82)!important; color:var(--muted)!important; }
.leaflet-control-attribution a{ color:var(--muted)!important; text-decoration:none!important; }
.leaflet-control-attribution svg,.leaflet-attribution-flag{ display:none!important; }
/* Leaflet's default zoom buttons are a blue-linked browser chrome; dress them
   in the same ink-on-cream the rest of the page uses */
.leaflet-touch .leaflet-bar,.leaflet-bar{ border:1px solid rgba(16,14,12,.16)!important; border-radius:8px!important;
  overflow:hidden; box-shadow:0 6px 18px rgba(70,52,36,.09)!important; }
.leaflet-touch .leaflet-bar a,.leaflet-bar a{ width:28px!important; height:28px!important; line-height:28px!important;
  font-size:15px!important; color:var(--ink)!important; background:var(--cream-2)!important;
  border-bottom-color:rgba(16,14,12,.10)!important; }
.leaflet-popup-content-wrapper{ border-radius:12px; font-family:var(--sans); }
.leaflet-popup-content b{ font-family:var(--serif); font-size:15px; font-weight:500; }

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{ background:var(--ink); color:rgba(248,243,237,.68); padding:3rem 0 calc(1.6rem + 74px + env(safe-area-inset-bottom)); }
@media(min-width:900px){ footer{ padding-bottom:1.6rem; } }
.foot-grid{ max-width:var(--shell); margin:0 auto; padding:0 1.25rem; display:grid; gap:2.1rem; }
@media(min-width:760px){ .foot-grid{ grid-template-columns:1.5fr 1fr 1fr; gap:3rem; padding:0 2rem; } }
.foot-logo{ display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.foot-logo img{ height:34px; width:auto; }
.foot-logo .wordmark{ font-family:var(--serif); font-size:1.1rem; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); }
.foot-about p{ font-size:.82rem; line-height:1.72; max-width:38ch; }
.foot-addr{ margin-top:.9rem; color:rgba(248,243,237,.82); }
.foot-soc{ display:flex; gap:.55rem; margin-top:1.2rem; }
.foot-soc a{ width:44px; height:44px; border-radius:999px; border:1px solid rgba(248,243,237,.2);
  display:flex; align-items:center; justify-content:center; color:rgba(248,243,237,.82); transition:background .2s ease,color .2s ease; }
.foot-soc a:hover{ background:rgba(248,243,237,.1); color:#F8F3ED; }
.foot-soc .i{ width:17px; height:17px; }
.foot-col h4{ font-family:var(--serif); font-size:1.1rem; font-weight:500; color:var(--cream); margin-bottom:.85rem; }
.foot-col a,.foot-col p{ display:block; font-size:.82rem; line-height:1.55; padding:.3rem 0; }
.foot-col a{ min-height:44px; display:flex; align-items:center; }
@media(min-width:760px){ .foot-col a{ min-height:0; display:block; } }
.foot-col a:hover{ color:#F8F3ED; }
.foot-copy{ max-width:var(--shell); margin:2.4rem auto 0; padding:1.4rem 1.25rem 0;
  border-top:1px solid rgba(248,243,237,.11); font-size:.68rem; line-height:1.7; color:rgba(248,243,237,.44); text-align:center; }
@media(min-width:760px){ .foot-copy{ padding-left:2rem; padding-right:2rem; } }
.foot-copy a{ color:rgba(248,243,237,.66); }

#bookBar{ position:fixed; left:0; right:0; bottom:0; z-index:480; padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(248,243,237,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line); transform:translateY(120%); transition:transform .32s cubic-bezier(.4,.1,.2,1); }
#bookBar.on{ transform:none; }
#bookBar .btn{ width:100%; }
@media(min-width:900px){ #bookBar{ display:none; } }

/* ── subpage furniture, in the same language ────────────────────────────── */
.pbanner{ position:relative; background:var(--ink); color:var(--cream); overflow:hidden;
  padding:calc(var(--nav-h) + 3rem) 0 3rem; }
@media(min-width:760px){ .pbanner{ padding:calc(72px + 4.2rem) 0 4rem; } }
.pbanner::before{ content:''; position:absolute; inset:0; opacity:.26;
  background:url('img/banner.jpg') center/cover; }
.pbanner::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,14,12,.72),rgba(16,14,12,.92)); }
.pbanner>*{ position:relative; z-index:2; }
.pbanner .crumbs{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(248,243,237,.55); margin-bottom:.7rem; }
.pbanner .crumbs a{ display:inline-block; min-height:44px; padding:.8rem 0; color:var(--gold); }
.pbanner .crumbs span{ margin:0 .45rem; opacity:.5; }
.pbanner h1{ font-size:clamp(2rem,8.4vw,3.3rem); line-height:1.06; color:var(--cream); }
.pbanner h1 i{ color:var(--gold-l); }
.pbanner .lede{ color:rgba(248,243,237,.76); margin-top:1rem; max-width:58ch; font-size:.96rem; line-height:1.75; }
.pbanner .btns{ margin-top:1.8rem; }
.pbanner .pb-price{ display:inline-flex; align-items:baseline; gap:.5rem; margin-top:1.3rem;
  padding:.45rem .95rem; border:1px solid rgba(248,243,237,.3); border-radius:999px; }
.pbanner .pb-price b{ font-family:var(--serif); font-size:1.15rem; color:var(--gold-l); font-weight:400; }
.pbanner .pb-price small{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(248,243,237,.6); }

.plist{ border-top:1px solid var(--line); margin-top:1.6rem; }
.plist .row{ display:flex; width:100%; align-items:center; gap:.85rem; min-height:60px; padding:.6rem .2rem;
  text-align:left; border-bottom:1px solid var(--line); }
.plist .row .nm{ flex:1; min-width:0; font-size:.95rem; line-height:1.3; }
.plist .row .nm small{ display:block; font-size:.68rem; letter-spacing:.06em; color:var(--muted); }
.plist .row .pr{ font-size:.95rem; font-weight:500; font-variant-numeric:tabular-nums; }
.plist .row .bk{ flex:none; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--hazel-d);
  border-bottom:1px solid var(--line-2); padding-bottom:2px; }
.plist .row:active{ background:rgba(16,14,12,.04); }

.cards{ display:grid; gap:1rem; margin-top:2.2rem; }
@media(min-width:640px){ .cards{ grid-template-columns:1fr 1fr; } }
@media(min-width:980px){ .cards.c3{ grid-template-columns:repeat(3,1fr); } .cards.c4{ grid-template-columns:repeat(4,1fr); } }
.card{ background:var(--cream-2); border:1px solid var(--line); border-radius:var(--r-cat); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:transform .22s ease,box-shadow .22s ease; }
@media(hover:hover){ .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); } }
.card .ph{ aspect-ratio:3/4; overflow:hidden; background:var(--nude-2); }
.card .ph img{ width:100%; height:100%; object-fit:cover; }
.card .bd{ padding:1.1rem 1.1rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.card h3{ font-size:1.3rem; font-weight:500; line-height:1.2; }
.card p{ font-size:.84rem; line-height:1.68; color:var(--muted); margin-top:.5rem; flex:1; }
.card .from{ margin-top:.85rem; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--hazel-d); }
.card .go{ margin-top:.9rem; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; }
@media(max-width:639px){ .cards.c4{ grid-template-columns:1fr 1fr; gap:.7rem; } .cards.c4 .bd{ padding:.85rem .8rem 1rem; } .cards.c4 h3{ font-size:1.1rem; } .cards.c4 p{ font-size:.78rem; } }

.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; margin-top:2rem; }
@media(min-width:760px){ .gal{ grid-template-columns:repeat(4,1fr); gap:.6rem; } }
.gal figure{ aspect-ratio:3/4; overflow:hidden; border-radius:var(--r-sm); background:var(--nude-2); }
.gal img{ width:100%; height:100%; object-fit:cover; }

.split{ display:grid; gap:2.2rem; align-items:center; }
@media(min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:3.4rem; } .split.rev>*:first-child{ order:2; } }
.split .ph{ border-radius:var(--r-cat); overflow:hidden; background:var(--nude-2); max-width:420px; margin:0 auto; box-shadow:var(--shadow-sm); }
@media(min-width:900px){ .split .ph{ max-width:none; } }
.split .ph img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
@media(min-width:900px){ .split .ph img{ aspect-ratio:4/4.4; } }
.split-2{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.split-2 figure{ border-radius:var(--r-sm); overflow:hidden; background:var(--nude-2); aspect-ratio:1/1; }
.split-2 img{ width:100%; height:100%; object-fit:cover; }

.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-cat); overflow:hidden; margin-top:2.2rem; }
@media(min-width:760px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stats div{ background:var(--cream-2); padding:1.3rem .9rem; text-align:center; }
.sec-ink .stats div{ background:#191512; }
.stats b{ display:block; font-family:var(--serif); font-size:1.9rem; font-weight:500; color:var(--hazel-d); line-height:1.1; }
.sec-ink .stats b{ color:var(--gold); }
.stats span{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

.ticks{ list-style:none; margin-top:1.4rem; display:grid; gap:.85rem; }
.ticks li{ display:flex; gap:.7rem; font-size:.9rem; line-height:1.7; color:var(--ink-2); }
.ticks li .i{ width:16px; height:16px; color:var(--hazel-d); margin-top:.32rem; }
.ticks li b{ color:var(--ink); font-weight:500; }
.sec-ink .ticks li{ color:rgba(246,239,230,.72); }
.sec-ink .ticks li .i{ color:var(--gold); }
.sec-ink .ticks li b{ color:var(--cream); }

.steps{ counter-reset:s; display:grid; gap:1.2rem; margin-top:2rem; }
@media(min-width:820px){ .steps{ grid-template-columns:repeat(4,1fr); gap:1.4rem; } }
.steps li{ list-style:none; counter-increment:s; padding-top:1rem; border-top:1px solid rgba(248,243,237,.2); }
.steps li::before{ content:'0' counter(s); font-family:var(--serif); font-size:.95rem; color:var(--gold); letter-spacing:.1em; }
.steps li h3{ font-size:1.16rem; font-weight:500; margin:.35rem 0 .4rem; }
.steps li p{ font-size:.84rem; line-height:1.7; }

.faq{ margin-top:2rem; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ display:flex; align-items:center; gap:.9rem; min-height:58px; padding:1rem .2rem; cursor:pointer;
  list-style:none; font-family:var(--serif); font-size:1.14rem; font-weight:500; line-height:1.3; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .i{ width:18px; height:18px; margin-left:auto; color:var(--muted); transition:transform .25s; flex:none; }
.faq details[open] summary .i{ transform:rotate(180deg); }
.faq .a{ padding:0 .2rem 1.15rem; }
.faq .a p{ font-size:.88rem; line-height:1.75; color:var(--ink-2); }
.faq .a p+p{ margin-top:.7rem; }

.quote{ background:var(--cream-2); border:1px solid var(--line); border-left:2px solid var(--gold);
  border-radius:var(--r-cat); padding:1.6rem 1.5rem; box-shadow:var(--shadow-sm); }
.quote .stars{ display:flex; gap:.16rem; color:var(--gold); margin-bottom:.8rem; }
.quote .stars .i{ width:15px; height:15px; }
.quote blockquote{ font-family:var(--serif); font-size:1.16rem; line-height:1.55; font-style:italic; }
.quote cite{ display:block; margin-top:.9rem; font-style:normal; font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); }

.band{ background:var(--nude); border-radius:var(--r-cat); padding:1.6rem 1.4rem; margin-top:2rem; }
.sec-ink .band{ background:#191512; }
.band h3{ font-size:1.25rem; font-weight:500; }
.band p{ font-size:.88rem; line-height:1.7; color:var(--muted); margin-top:.5rem; }
.band .btns{ margin-top:1.2rem; }

.note{ display:flex; gap:.75rem; padding:1rem 1.1rem; border:1px solid rgba(176,142,111,.34);
  border-radius:var(--r-sm); background:rgba(176,142,111,.08); margin-top:1.5rem; }
.note .i{ width:17px; height:17px; color:var(--hazel-d); flex:none; margin-top:.28rem; }
.note p{ font-size:.85rem; line-height:1.7; color:var(--ink-2); }
.note b{ color:var(--ink); font-weight:500; }

/* ── forms ──────────────────────────────────────────────────────────────── */
.form{ display:grid; gap:1rem; margin-top:2rem; }
@media(min-width:700px){ .form{ grid-template-columns:1fr 1fr; } .form .full{ grid-column:1/-1; } }
.field label{ display:block; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:.4rem; }
.field label .req{ color:var(--hazel-d); }
.field input,.field select,.field textarea{
  /* ⚠️ 16px is a floor, not a style: iOS Safari zooms the page on any smaller field */
  width:100%; padding:.85rem .95rem; font:inherit; font-size:16px; color:var(--ink);
  background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .2s,box-shadow .2s; -webkit-appearance:none; appearance:none; }
.field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E7268' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .85rem center; background-size:17px; padding-right:2.4rem; }
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--hazel); box-shadow:0 0 0 3px rgba(176,142,111,.16); }
.form-foot{ grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; }
.form-foot small{ font-size:.78rem; color:var(--muted); }
.form-msg{ grid-column:1/-1; padding:1rem 1.15rem; border-radius:var(--r-sm); font-size:.88rem; display:none; }
.form-msg.ok{ display:block; background:rgba(94,124,74,.1); border:1px solid rgba(94,124,74,.34); color:#41603A; }
.form-msg.err{ display:block; background:rgba(160,58,48,.08); border:1px solid rgba(160,58,48,.3); color:#8E3229; }