/* ==========================================================================
   Prairie Hearing Westwood: "Westwood" style
   Built from the three Pinterest references Paige sent: full-width photo
   banners under a warm dark veil with centred capital headings, deep
   chocolate bands alternating with cream and beige, a tan accent, square
   editorial photo layouts, headings set between thin rules, and thin rules
   running down both edges of the page. Marcellus for display, Jost for text.
   The accessibility layer (text size control, 44px+ targets, nothing under
   14px, reduced motion) and the booking/pop-up mechanics match the main build.
   ========================================================================== */

:root{
  --cream:#F4EEE4;        /* page background */
  --cream-2:#FAF6EF;      /* cards on cream */
  --beige:#E8DDCC;        /* alternate bands */
  --choc:#2E2119;         /* dark bands, header, headings */
  --choc-2:#231812;       /* top strip, footer */
  --tan:#C29E72;          /* buttons, accents on dark (6.3:1 with chocolate) */
  --tan-lt:#D6B88F;
  --tan-dk:#765232;       /* accent text on light (6.0:1 cream, 5.2:1 beige) */
  --ink:#2E2119;
  --soft:#5E5248;         /* body copy, 6.5:1 on cream */
  --on-dark:#F4EEE4;
  --on-dark-soft:#D9CDBD;
  --rule:rgba(46,33,25,.18);
  --rule-dark:rgba(244,238,228,.2);

  --display:"Marcellus", "Trajan Pro", Georgia, serif;
  --body:"Jost", "Helvetica Neue", Arial, sans-serif;

  --wrap:1400px;
  --band:clamp(84px, 9vw, 132px);
  --header-h:126px;       /* updated by site.js to the real header height */
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:100%;
  scroll-padding-top:calc(var(--header-h) + 16px);
  overflow-x:hidden;overflow-x:clip;
  overscroll-behavior-y:contain;
}
html.ts-2{font-size:112%}
html.ts-3{font-size:124%}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:1.15rem;font-weight:400;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overflow-x:clip;
}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:var(--tan-dk);text-underline-offset:4px}
h1,h2,h3,h4{
  font-family:var(--display);font-weight:400;line-height:1.16;margin:0;color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em;text-wrap:balance;
}
h1{font-size:clamp(2.5rem,5.2vw,4.5rem);letter-spacing:.05em}
h2{font-size:clamp(1.95rem,3.3vw,2.8rem)}
h3{font-size:1.35rem;letter-spacing:.05em}
h1,h2,h3,p,li,blockquote{overflow-wrap:break-word}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
::selection{background:var(--tan);color:var(--choc)}
:focus-visible{outline:3px solid var(--tan-dk);outline-offset:3px}
button,a{-webkit-tap-highlight-color:rgba(194,158,114,.25)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(24px,4.5vw,72px)}
.narrow{max-width:860px}
.skip{position:absolute;left:-9999px;background:var(--tan);color:var(--choc);padding:14px 22px;z-index:300;font-weight:600}
.skip:focus{left:0;top:0}
#main{position:relative}
#main:focus{outline:none}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shared text pieces ---------- */
.eyebrow{margin:0 0 16px;font-size:.9rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--tan-dk)}
.lede{font-size:1.2rem;color:var(--soft);max-width:60ch}
.ruled{text-align:center;margin:0 auto clamp(36px,4.5vw,56px);max-width:1000px}
.ruled-title{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,36px)}
.ruled-title::before,.ruled-title::after{content:"";flex:1 1 0;max-width:200px;height:1px;background:currentColor;opacity:.35}
.ruled-title>span{flex:0 1 auto}
.section-intro{text-align:center;color:var(--soft);max-width:62ch;margin:calc(-1 * clamp(14px,2vw,28px)) auto clamp(44px,5vw,64px)}
.center-link{text-align:center;margin:clamp(40px,5vw,60px) 0 0}

/* ---------- buttons: square, small capitals, quick ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:58px;padding:16px 32px;border:1px solid transparent;border-radius:0;
  font-family:var(--body);font-size:.95rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .15s var(--ease), box-shadow .2s var(--ease);
}
.btn svg{flex:none;transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover .arw{transform:translateX(5px)}
.btn:active{transform:scale(.97);transition-duration:.06s}
.btn-tan{background:var(--tan);color:var(--choc)}
.btn-tan:hover{background:var(--tan-lt);box-shadow:0 14px 26px -16px rgba(0,0,0,.6)}
.btn-dark{background:var(--choc);color:var(--on-dark)}
.btn-dark:hover{background:var(--tan-dk)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--cream)}
.btn-line-light{background:transparent;color:var(--on-dark);border-color:rgba(244,238,228,.6)}
.btn-line-light:hover{background:var(--on-dark);color:var(--choc);border-color:var(--on-dark)}
.btn-lg{min-height:62px;padding:18px 36px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* text links: a fine underline that thickens and an arrow that nudges */
.more{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:.92rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:8px;color:var(--ink);transition:color .15s, text-decoration-thickness .15s;
}
.more svg{transition:transform .2s var(--ease)}
.more:hover{color:var(--tan-dk);text-decoration-thickness:2px}
.more:hover svg{transform:translateX(5px)}

/* ==========================================================================
   HEADER: a thin top strip, then the chocolate bar with the menu centred.
   Nothing in it changes size on scroll, so the page underneath never shifts.
   ========================================================================== */
.header{position:-webkit-sticky;position:sticky;top:0;z-index:90;transition:box-shadow .3s var(--ease)}
.header.scrolled{box-shadow:0 16px 34px -22px rgba(0,0,0,.65)}
.header .wrap{max-width:1600px}

.topbar{position:relative;z-index:2;background:var(--choc-2);color:var(--on-dark-soft);container:topbar / inline-size;font-size:1rem}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:10px 30px;min-height:46px;padding-top:2px;padding-bottom:2px}
.info-items{display:flex;align-items:center;gap:8px 30px;list-style:none;margin:0;padding:0;font-size:.92rem;letter-spacing:.04em;min-width:0}
.info-items li{display:flex;align-items:center;gap:9px;white-space:nowrap}
.info-items svg{width:16px;height:16px;flex:none;color:var(--tan)}
.info-items a{color:var(--on-dark);text-decoration:none}
.info-items a:hover{color:var(--tan-lt);text-decoration:underline}
@container topbar (max-width:66em){ .info-items li.ti-addr{display:none} }
@container topbar (max-width:44em){ .info-items li.ti-hours{display:none} }
@container topbar (max-width:30em){ .ts-group .ts-label{display:none} }

.mainbar{position:relative;z-index:3;container:mainbar / inline-size;font-size:1rem;background:var(--choc);color:var(--on-dark);border-bottom:1px solid rgba(194,158,114,.35)}
.header-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 28px;min-height:80px;padding-top:8px;padding-bottom:8px}
.brand{grid-column:1;grid-row:1;display:inline-flex;align-items:center;gap:14px;color:var(--on-dark);text-decoration:none;padding:4px 0}
.brand img{height:44px;width:auto;flex:none;max-width:none}
.brand-name{display:block;font-family:var(--display);font-size:1.28rem;letter-spacing:.09em;text-transform:uppercase;line-height:1}
.brand-sub{display:block;font-size:.78rem;letter-spacing:.32em;text-transform:uppercase;color:var(--on-dark-soft);margin-top:7px}

.nav{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;gap:2px}
.nav a{
  position:relative;display:inline-flex;align-items:center;min-height:48px;padding:10px 13px;
  font-size:.92rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--on-dark-soft);text-decoration:none;transition:color .15s var(--ease);
}
.nav a::after{content:"";position:absolute;left:13px;right:13px;bottom:8px;height:1px;background:var(--tan);transform:scaleX(0);transition:transform .2s var(--ease)}
.nav a:hover{color:var(--on-dark)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--on-dark)}
.nav a:active{transform:scale(.96)}
.nav .nav-call{display:none}

.header-actions{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:12px}
.header-book{min-height:50px;padding:12px 22px;font-size:.88rem}

.burger{
  display:none;align-items:center;justify-content:center;gap:10px;min-width:52px;height:50px;padding:0 14px;cursor:pointer;
  background:transparent;border:1px solid var(--rule-dark);color:var(--on-dark);
  font-family:var(--body);font-weight:500;font-size:.88rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.burger:hover{background:rgba(244,238,228,.08);border-color:var(--on-dark)}
.burger:active{transform:scale(.95)}
.burger i{display:block;width:20px;height:1.5px;background:currentColor;position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:currentColor;transition:transform .3s var(--ease)}
.burger i::before{top:-6px}
.burger i::after{top:6px}
.header.open .burger i{background:transparent}
.header.open .burger i::before{transform:translateY(6px) rotate(45deg)}
.header.open .burger i::after{transform:translateY(-6px) rotate(-45deg)}

/* Desktop: the menu always stays visible. If the chosen text size makes it
   too wide for one row, it moves to its own row under the brand. */
@media (min-width:1041px){
  @container mainbar (max-width:84em){   /* room for the full business name, menu and booking button on one row */
    .nav{grid-column:1 / -1;grid-row:2;justify-self:stretch;justify-content:center;flex-wrap:wrap;border-top:1px solid var(--rule-dark);padding-top:4px}
  }
}

/* Tablet and phone: a menu button with a drop-down */
@media (max-width:1040px){
  .burger{display:inline-flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;z-index:5;flex-direction:column;align-items:stretch;gap:0;
    justify-self:stretch;   /* the desktop centring would otherwise shrink the drop-down to a narrow panel */
    background:var(--choc);border-top:1px solid var(--rule-dark);box-shadow:0 30px 50px -30px rgba(0,0,0,.7);padding:8px 20px 22px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
  }
  .header.open .nav{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--ease), transform .25s var(--ease), visibility 0s}
  .nav a{min-height:60px;padding:16px 6px;font-size:1rem;border-bottom:1px solid var(--rule-dark);transition:color .15s, padding-left .2s var(--ease)}
  .nav a:hover{padding-left:16px}
  .nav a::after{display:none}
  .nav a[aria-current="page"]{color:var(--tan)}
  .nav .nav-call{display:flex;justify-content:center;gap:10px;margin-top:14px;background:var(--tan);color:var(--choc);border-bottom:0}
  .nav .nav-call:hover{padding-left:6px;background:var(--tan-lt)}
  .nav .nav-call svg{width:20px;height:20px}
}

/* ---------- text size control (top strip) ---------- */
.ts-group{display:flex;align-items:center;gap:10px;flex:none}
.ts-label{font-size:.88rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.ts-opts{position:relative;display:flex;padding:3px;border:1px solid rgba(244,238,228,.28)}
.ts-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);background:var(--tan);transition:transform .35s cubic-bezier(.34,1.32,.44,1)}
.ts-opts[data-active="1"] .ts-thumb{transform:translateX(100%)}
.ts-opts[data-active="2"] .ts-thumb{transform:translateX(200%)}
.ts-opt{
  position:relative;z-index:1;flex:1 1 0;min-width:44px;min-height:44px;
  display:flex;align-items:flex-end;justify-content:center;padding:0 8px 7px;
  background:none;border:0;cursor:pointer;font-family:var(--display);line-height:1;transition:background-color .15s;
}
.ts-opt:hover{background:rgba(244,238,228,.12)}
.ts-opt .glyph{color:var(--on-dark);transition:color .2s, transform .2s var(--ease)}
.ts-opt:hover .glyph{transform:translateY(-2px) scale(1.08)}
.ts-opt:nth-of-type(1) .glyph{font-size:1rem}
.ts-opt:nth-of-type(2) .glyph{font-size:1.25rem}
.ts-opt:nth-of-type(3) .glyph{font-size:1.52rem}
.ts-opt[aria-checked="true"] .glyph{color:var(--choc)}
.topbar :focus-visible,.mainbar :focus-visible{outline-color:var(--tan)}

/* ==========================================================================
   BANNERS: a full-width photo under a warm dark veil, copy centred over it
   ========================================================================== */
.banner{position:relative;display:grid;background:var(--choc);color:var(--on-dark);overflow:hidden;isolation:isolate}
.banner-home{min-height:clamp(560px, calc(100vh - var(--header-h)), 900px)}
.banner-page{min-height:clamp(380px, 52vh, 540px)}
.banner-img{position:absolute;inset:0;z-index:-2}
.banner-img img,.banner-img picture{display:block;width:100%;height:100%;object-fit:cover}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 62% 58% at 50% 50%,rgba(30,20,14,.5) 0%,rgba(30,20,14,0) 100%),linear-gradient(180deg,rgba(35,24,18,.7) 0%,rgba(35,24,18,.6) 45%,rgba(35,24,18,.82) 100%)}
.banner-page::before{background:linear-gradient(180deg,rgba(35,24,18,.7) 0%,rgba(35,24,18,.62) 50%,rgba(35,24,18,.8) 100%)}
.banner-in{display:grid;place-items:center;text-align:center;padding-top:clamp(56px,8vw,110px);padding-bottom:clamp(64px,9vw,120px)}
.banner-copy{max-width:900px;display:flex;flex-direction:column;align-items:center}
.banner h1{color:#FFFBF5;margin-bottom:24px;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.banner .eyebrow{color:#E6CBA5;font-size:.98rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.banner .lede{color:#F6EEE3;font-size:1.32rem;font-weight:500;line-height:1.65;margin:0 auto;max-width:40em;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.banner .btn-row{justify-content:center}
.banner h1.long{text-transform:none;letter-spacing:.01em;font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1.2}
.status{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 30px;padding:8px 18px;border:1px solid var(--rule-dark);background:rgba(35,24,18,.6);font-size:1rem;color:#EFE6DA}
.status b{color:var(--on-dark);font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:.88rem}
.status .dot{width:9px;height:9px;border-radius:50%;background:var(--tan);animation:pulse 2.4s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,158,114,.6)}70%{box-shadow:0 0 0 11px rgba(194,158,114,0)}100%{box-shadow:0 0 0 0 rgba(194,158,114,0)}}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:48px;height:48px;display:grid;place-content:center;color:var(--on-dark);border:1px solid var(--rule-dark);border-radius:50%;transition:background .15s, color .15s}
.scroll-cue svg{width:22px;height:22px}
.scroll-cue:hover{background:var(--on-dark);color:var(--choc)}
.crumbs{font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-soft);margin:0 0 24px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;align-items:center;list-style:none;padding:0}
.crumbs a{color:var(--on-dark);text-decoration:underline;text-decoration-color:rgba(214,184,143,.6);text-underline-offset:5px;padding:6px 0}
.crumbs a:hover{color:var(--tan-lt)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--tan)}
.banner .cat{color:var(--tan-lt);border-color:var(--tan-lt);margin-bottom:22px}
.byline{display:flex;align-items:center;gap:14px;margin-top:6px;color:var(--on-dark-soft);font-size:1.02rem;text-align:left}
.byline img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--tan);padding:3px}
.byline b{color:var(--on-dark);display:block;font-weight:500}

/* trust strip under the home banner */
.trust{background:var(--choc-2);color:var(--on-dark-soft)}
.trust ul{list-style:none;margin:0;padding:22px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 0}
.trust li{font-size:.92rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:4px clamp(18px,3vw,44px);position:relative}
.trust li+li::before{content:"";position:absolute;left:-3px;top:50%;width:5px;height:5px;margin-top:-2.5px;background:var(--tan);transform:rotate(45deg)}

/* ---------- bands ---------- */
.band{position:relative;padding:var(--band) 0;background:var(--cream)}
.band-beige{background:var(--beige)}
.band-dark{background:var(--choc);color:var(--on-dark)}
.band-dark h2,.band-dark h3{color:var(--on-dark)}
.band-dark .eyebrow{color:var(--tan)}
.band-dark p,.band-dark .lede{color:var(--on-dark-soft)}
.band-dark a:not(.btn){color:var(--on-dark)}
.band-dark :focus-visible,.footer :focus-visible,.cta :focus-visible,.banner :focus-visible{outline-color:var(--tan)}

/* ---------- photos ---------- */
.photo{position:relative;overflow:hidden;background:var(--beige)}
.photo img{width:100%;height:100%;object-fit:cover}

/* ---------- home: services as four tall cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,2.6vw,40px)}
.svc{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s var(--ease)}
.svc-img{overflow:hidden;aspect-ratio:4/5;background:var(--beige);margin-bottom:22px}
.svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.svc:hover .svc-img img{transform:scale(1.05)}
.svc:active{transform:scale(.985)}
.svc-num{font-size:.88rem;font-weight:500;letter-spacing:.2em;color:var(--tan-dk);margin-bottom:8px}
.svc h3{margin-bottom:10px;transition:color .15s}
.svc:hover h3{color:var(--tan-dk)}
.svc p{color:var(--soft);font-size:1.05rem;margin:0 0 12px;flex:1}
.svc .more{align-self:flex-start}
.svc:hover .more{color:var(--tan-dk);text-decoration-thickness:2px}
.svc:hover .more svg{transform:translateX(5px)}

/* ---------- split rows: photo one side, copy the other ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,104px);align-items:center}
/* a photo with a thin outline offset behind it */
.framed{position:relative;width:calc(100% - 22px);max-width:420px;margin:0 auto 22px}
.framed::before{content:"";position:absolute;inset:0;transform:translate(22px,22px);border:1px solid var(--tan-dk);pointer-events:none}
.framed .photo{position:relative}
.split-photo .photo img{aspect-ratio:4/5}
.split-copy h2{margin-bottom:22px}
.split-copy .lede{margin-bottom:1em}
.cred{display:grid;grid-template-columns:auto auto;justify-content:start;gap:16px 48px;margin-top:30px;padding-top:24px;border-top:1px solid var(--rule)}
.cred div{display:flex;flex-direction:column}
.cred b{font-family:var(--display);font-weight:400;font-size:2.5rem;letter-spacing:.05em;line-height:1;color:var(--choc)}
.cred div>span{font-size:.98rem;line-height:1.4;max-width:22ch;margin-top:8px;color:var(--soft)}

/* checklist */
.checks{list-style:none;margin:0;padding:0;display:grid}
.checks li{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--rule);font-weight:500}
.checks li:last-child{border-bottom:0}
.checks svg{width:24px;height:24px;flex:none;color:var(--tan-dk);margin-top:3px}
.band-dark .checks li,.card-dark .checks li{border-bottom-color:var(--rule-dark);color:var(--on-dark)}
.band-dark .checks svg{color:var(--tan)}

/* ---------- reviews ---------- */
.quotes{text-align:center}
.quote-mark{display:block;width:54px;height:54px;margin:0 auto 26px;padding:12px;border:1px solid var(--tan);border-radius:50%;color:var(--tan)}
.quote-mark svg{width:100%;height:100%}
.slider{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:clamp(12px,3vw,40px);max-width:1000px;margin:0 auto}
.slides{display:grid}
.slide{margin:0}
.js-slider .slide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s var(--ease), visibility 0s .6s}
.js-slider .slide.is-active{opacity:1;visibility:visible;transition:opacity .6s var(--ease) .05s, visibility 0s}
.slide+.slide{margin-top:44px}
.js-slider .slide+.slide{margin-top:0}
.stars{color:var(--tan);letter-spacing:.3em;font-size:1.05rem;margin-bottom:20px}
.slide blockquote{margin:0;font-family:var(--display);font-size:clamp(1.55rem,2.8vw,2.2rem);line-height:1.45;color:var(--on-dark)}
.slide figcaption{margin-top:26px;display:flex;flex-direction:column;gap:2px}
.slide figcaption b{font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:.92rem;color:var(--on-dark)}
.slide figcaption span{font-size:.95rem;color:var(--on-dark-soft)}
.slider-btn{
  display:none;width:56px;height:56px;place-content:center;cursor:pointer;background:transparent;color:var(--on-dark);
  border:1px solid var(--rule-dark);border-radius:50%;transition:background .15s, color .15s, border-color .15s, transform .15s;
}
.js-slider .slider-btn{display:grid}
.slider-btn svg{width:22px;height:22px}
.slider-btn:hover{background:var(--on-dark);color:var(--choc);border-color:var(--on-dark)}
.slider-btn:active{transform:scale(.92)}
.slider:not(.js-slider){grid-template-columns:1fr}
.dots{grid-column:1 / -1;display:flex;justify-content:center;gap:2px;margin-top:22px}
.dots button{width:44px;height:44px;display:grid;place-content:center;background:none;border:0;padding:0;cursor:pointer}
.dots button::before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--on-dark-soft);transition:background .2s}
.dots button:hover::before{background:var(--on-dark-soft)}
.dots button[aria-current="true"]::before{background:var(--tan);border-color:var(--tan)}

/* ---------- first visit: four steps with line icons ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,48px);text-align:center}
.steps li{display:flex;flex-direction:column;align-items:center}
.step-ic{width:64px;height:64px;color:var(--tan-dk);margin-bottom:18px}
.step-ic svg{width:100%;height:100%}
.steps .n{font-size:.88rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--tan-dk);margin-bottom:10px}
.steps p{font-weight:500;line-height:1.5;max-width:26ch;margin:0 auto}

/* ---------- inside the clinic: an editorial photo mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a b c" "a d d";gap:clamp(16px,2vw,28px)}
.mosaic figure{margin:0;display:flex;flex-direction:column;min-width:0}
.mosaic .m-a{grid-area:a}.mosaic .m-b{grid-area:b}.mosaic .m-c{grid-area:c}.mosaic .m-d{grid-area:d}
.mosaic .photo{flex:1}
.mosaic .m-b img,.mosaic .m-c img{aspect-ratio:1/1}
.mosaic .m-d img{aspect-ratio:2.05/1}
.mosaic .m-a .photo{position:relative}
.mosaic .m-a img{position:absolute;inset:0;object-position:22% 50%}
figcaption{font-size:.88rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-top:12px;text-align:center}

/* ---------- brands ---------- */
.brands{background:var(--cream);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:clamp(48px,6vw,72px) 0;text-align:center}
.brand-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 0}
.brand-row li{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:.1em;text-transform:uppercase;color:var(--soft);padding:2px clamp(22px,3.4vw,52px)}
.brand-row li+li{border-left:1px solid var(--rule)}
.brands .center-link{margin-top:28px}

/* ---------- visit: photo, map and details side by side ---------- */
.visit3{display:grid;grid-template-columns:1fr 1fr 1.05fr;gap:clamp(20px,2.6vw,40px);align-items:start}
.visit3>*{min-width:0}
.visit3 .photo img{aspect-ratio:3/4}
.visit3 .map{aspect-ratio:3/4}
.visit3 .map iframe{height:100%}
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:22px;align-content:start}
.info-list li{min-width:0}
.info-list h3{font-family:var(--body);font-size:.88rem;font-weight:500;letter-spacing:.2em;color:var(--tan-dk);margin-bottom:4px}
.info-list p{color:var(--ink);margin:0}
.info-list a,.map-note a{color:var(--ink);overflow-wrap:anywhere;display:inline-block;padding:4px 0;text-decoration:underline;text-decoration-color:rgba(46,33,25,.3);text-underline-offset:6px;transition:color .15s, text-decoration-color .15s}
.info-list a:hover,.map-note a:hover{color:var(--tan-dk);text-decoration-color:var(--tan-dk)}
.big{font-family:var(--display);font-size:1.5rem;letter-spacing:.03em;line-height:1.3}
.hours{list-style:none;margin:0;padding:0;max-width:420px}
.hours li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 20px;padding:8px 0;border-bottom:1px solid var(--rule);color:var(--soft)}
.hours li:last-child{border-bottom:0}
.hours li b{color:var(--ink);font-weight:500}
.hours li span{white-space:nowrap;font-variant-numeric:tabular-nums}
.hours li.today{color:var(--ink)}
.hours li.today b::after{content:"Today";margin-left:10px;font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;background:var(--choc);color:var(--on-dark);padding:3px 8px;vertical-align:middle}
.map{border:1px solid var(--rule);background:var(--beige);line-height:0}
.map iframe{display:block;width:100%;height:440px;border:0;filter:sepia(.18) saturate(.85)}
.map-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;color:var(--soft);font-size:1.02rem}
.map-note svg{width:20px;height:20px;flex:none;color:var(--tan-dk)}

/* ---------- closing booking band: copy beside a modest framed photo ---------- */
.cta{background:var(--choc);color:var(--on-dark);padding:clamp(72px,8vw,112px) 0}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px);align-items:center}
.cta-photo{position:relative;justify-self:center;width:100%;max-width:460px;margin:0 22px 22px 0}
.cta-photo::before{content:"";position:absolute;inset:0;transform:translate(22px,22px);border:1px solid var(--tan);pointer-events:none}
.cta-photo img{position:relative;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%}
.cta h2{color:var(--on-dark);margin-bottom:20px;max-width:16em}
.cta .eyebrow{color:var(--tan)}
.cta p{color:var(--on-dark-soft);font-size:1.18rem;max-width:42ch}
.cta .cta-hours{margin-top:28px;font-size:.98rem;color:var(--on-dark-soft)}

/* ---------- services page rows ---------- */
.svc-rows{display:grid;gap:clamp(64px,8vw,112px)}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center}
.svc-row:nth-child(even) .svc-row-img{order:2}
.svc-row-img img{aspect-ratio:4/3}
.svc-row .num{display:block;font-size:.9rem;font-weight:500;letter-spacing:.22em;color:var(--tan-dk);margin-bottom:12px}
.svc-row h2{margin-bottom:18px}

/* ---------- cards ---------- */
.grid{display:grid;gap:28px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card{background:var(--cream-2);border:1px solid var(--rule);padding:32px 30px}
.card h2,.card h3{font-size:1.3rem;margin-bottom:14px}
.card p{color:var(--soft);font-size:1.04rem}
.card-dark{background:var(--choc);border-color:var(--choc);color:var(--on-dark)}
.card-dark h2{color:var(--on-dark)}
.card-dark .note{color:var(--on-dark-soft)!important}
.card-dark .call{color:var(--on-dark)!important}

/* values (about, on chocolate) */
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-dark);border-bottom:1px solid var(--rule-dark)}
.value{padding:36px 30px 38px;text-align:center}
.value+.value{border-left:1px solid var(--rule-dark)}
.value .ic{width:58px;height:58px;display:grid;place-content:center;border:1px solid var(--tan);border-radius:50%;color:var(--tan);margin:0 auto 22px}
.value .ic svg{width:24px;height:24px}
.value h3{margin-bottom:10px}
.value p{font-size:1.04rem}

/* hearing aid styles */
.aid{background:var(--cream-2);border:1px solid var(--rule);display:flex;flex-direction:column}
.aid-fig{display:grid;place-items:center;padding:30px 16px;background:radial-gradient(ellipse 60% 60% at 50% 50%,#fff 0%,var(--beige) 85%);border-bottom:1px solid var(--rule)}
.aid-fig img{width:150px;max-width:100%;filter:drop-shadow(0 16px 18px rgba(46,33,25,.22))}
.aid h3{padding:24px 26px 0;margin-bottom:10px;font-size:1.2rem}
.aid p{padding:0 26px;color:var(--soft);font-size:1.02rem;flex:1}
.aid .best{margin:16px 26px 26px;padding-top:14px;border-top:1px solid var(--rule);font-size:.98rem;color:var(--ink);flex:0}
.aid .best b{display:block;font-size:.86rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--tan-dk);margin-bottom:2px}
.brand-cards{gap:40px 36px}
.brand-card{border-top:1px solid var(--ink);padding:26px 0 0}
.brand-card h3{font-size:1.6rem;margin-bottom:10px}
.brand-card p{color:var(--soft);font-size:1.04rem}

/* team */
.person{display:grid;grid-template-columns:300px 1fr;gap:clamp(36px,5vw,88px);align-items:start}
.person+.person{margin-top:clamp(64px,8vw,104px);padding-top:clamp(64px,8vw,104px);border-top:1px solid var(--rule)}
.person-rev{grid-template-columns:1fr 300px}
.person-rev .person-photo{order:2}
.person-photo{position:sticky;top:calc(var(--header-h) + 28px)}
.person-photo .photo img{aspect-ratio:4/5;object-position:50% 25%}
.person h2{font-size:clamp(2rem,3.2vw,2.6rem)}
.role{font-size:.9rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--tan-dk);margin:12px 0 26px}
.person .hi{font-family:var(--display);font-size:1.45rem;color:var(--ink);line-height:1.4}
.person p{color:var(--soft)}

/* closing line under the team bios */
.pullquote{margin:clamp(64px,8vw,104px) auto 0;padding-top:clamp(56px,7vw,88px);border-top:1px solid var(--rule);text-align:center;max-width:900px}
.pullquote .quote-mark{border-color:var(--tan-dk);color:var(--tan-dk);margin-bottom:28px}
.pullquote blockquote{margin:0;font-family:var(--display);font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-wrap:balance}

/* clinic gallery (about) */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.gallery figure{margin:0}
.gallery .photo img{aspect-ratio:4/5}

/* ---------- article (service detail + blog post) ---------- */
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:clamp(40px,6vw,104px);align-items:start}
.detail-grid>*{min-width:0}
.prose{max-width:70ch;font-size:1.18rem}
.prose h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin:1.6em 0 .55em}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--soft)}
.prose ul{padding-left:0;list-style:none;margin:0 0 1.2em;display:grid;gap:12px}
.prose ul li{position:relative;padding-left:30px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:7px;background:var(--tan);transform:rotate(45deg)}
.prose strong{color:var(--ink);font-weight:500}
.prose a,.post-foot a{color:var(--tan-dk);font-weight:500;text-decoration:underline;text-underline-offset:5px;transition:color .15s}
.prose a:hover,.post-foot a:hover{color:var(--ink)}
.prose .lead{font-family:var(--display);font-size:1.5rem;color:var(--ink);line-height:1.55}
.aside{position:sticky;top:calc(var(--header-h) + 28px);display:grid;gap:20px}
.aside .note{color:var(--soft);font-size:1.02rem;margin:16px 0 22px}
.aside .btn{width:100%}
.aside .call{display:block;text-align:center;margin-top:10px;padding:12px 0;color:var(--ink);text-decoration:underline;text-underline-offset:6px}
.aside .call:hover{color:var(--tan-lt)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(64px,7vw,96px)}
.pager a{display:block;padding:24px 28px;border:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:background .18s, color .18s, transform .15s}
.pager a:hover{background:var(--choc);color:var(--on-dark)}
.pager a:active{transform:scale(.98)}
.pager small{display:block;font-size:.86rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--tan-dk);margin-bottom:6px;transition:color .18s}
.pager a:hover small{color:var(--tan)}
.pager b{font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:.06em;text-transform:uppercase}
.pager .next{text-align:right}
.cat{display:inline-block;font-size:.86rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tan-dk);border:1px solid currentColor;padding:4px 10px}
.post-foot{margin-top:52px;padding:26px 30px;background:var(--beige);border-left:3px solid var(--tan);color:var(--ink);font-weight:500}

/* blog cards */
.post-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s var(--ease)}
.post-card .pc-img{overflow:hidden;aspect-ratio:16/10;background:var(--beige)}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.post-card:hover .pc-img img{transform:scale(1.05)}
.post-card:active{transform:scale(.985)}
.post-card .pc-body{padding:22px 0 8px;display:flex;flex-direction:column;flex:1}
.post-card .meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;font-size:.95rem;color:var(--soft)}
.post-card h2,.post-card h3{font-size:1.35rem;line-height:1.3;margin-bottom:12px;transition:color .15s}
.post-card:hover h2,.post-card:hover h3{color:var(--tan-dk)}
.post-card p{color:var(--soft);font-size:1.04rem;flex:1}
.post-card .more{margin-top:12px;align-self:flex-start}
.post-card:hover .more{color:var(--tan-dk);text-decoration-thickness:2px}
.post-card.featured{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:center}
.post-card.featured .pc-img{aspect-ratio:4/3}
.post-card.featured h2{font-size:clamp(1.8rem,3vw,2.5rem)}
.post-card.featured .latest{background:var(--choc);color:var(--on-dark);border-color:var(--choc)}

/* ---------- contact ---------- */
.visit-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,88px);align-items:start}
.visit-grid>*{min-width:0}
.clinic-photo{margin:36px 0 0}
.clinic-photo .photo img{aspect-ratio:3/2;object-position:50% 8%}
.book-card{background:var(--cream-2);border:1px solid var(--rule);border-top:3px solid var(--tan);padding:clamp(24px,3vw,44px)}
.book-card h2{font-size:clamp(1.6rem,2.4vw,2rem);margin-bottom:10px}
.book-card .sub{color:var(--soft);margin-bottom:22px}
/* booking form (Netlify Forms): two columns of square fields in the site's colours */
.booking-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 18px;margin:0}
.booking-form .full{grid-column:1 / -1}
.booking-form .field{display:flex;flex-direction:column;min-width:0}
.booking-form label{font-size:.88rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.booking-form label span{letter-spacing:.04em;text-transform:none;font-weight:400}
.booking-form input,.booking-form select,.booking-form textarea{
  width:100%;min-height:54px;padding:12px 14px;border:1px solid rgba(46,33,25,.3);border-radius:0;background:#FFFDF9;color:var(--ink);
  font:400 1.06rem/1.4 var(--body);transition:border-color .15s, box-shadow .15s;
}
.booking-form textarea{min-height:110px;resize:vertical}
.booking-form select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23765232' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.booking-form input::placeholder{color:#9A8D80}
.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{outline:none;border-color:var(--tan-dk);box-shadow:0 0 0 3px rgba(194,158,114,.35)}
.booking-form .fine{margin:0;font-size:.98rem;color:var(--soft);padding:12px 14px;background:var(--beige);border-left:3px solid var(--tan)}
.booking-form .btn{width:100%}
.booking-form .btn[disabled]{opacity:.6;cursor:progress}
.booking-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:0;font-size:.98rem;color:var(--soft)}
/* preferred contact method: two big tappable choices */
.booking-form .choice{border:0;margin:0;padding:0;min-width:0}
.booking-form .choice legend{padding:0;font-size:.88rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:7px}
.choice-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice-opt{position:relative;display:flex;margin:0!important;letter-spacing:0!important;text-transform:none!important}
.choice-opt input{position:absolute;opacity:0;width:1px;height:1px}
.choice-opt span{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:12px 16px;border:1px solid rgba(46,33,25,.3);background:#FFFDF9;color:var(--ink);font-size:1.08rem;font-weight:500;cursor:pointer;transition:border-color .15s, background .15s, box-shadow .15s}
.choice-opt span::before{content:"";width:20px;height:20px;border-radius:50%;border:2px solid var(--tan-dk);flex:none;transition:box-shadow .15s, background .15s}
.choice-opt:hover span{border-color:var(--tan-dk)}
.choice-opt input:checked + span{border-color:var(--choc);background:var(--beige)}
.choice-opt input:checked + span::before{background:var(--choc);box-shadow:inset 0 0 0 3px var(--beige)}
.choice-opt input:focus-visible + span{box-shadow:0 0 0 3px rgba(194,158,114,.55)}
/* the thank-you screen after a booking: large and simple */
.modal-thanks{width:min(620px, calc(100% - 32px));text-align:center}
.modal-thanks .modal-body{padding:clamp(40px,6vw,64px) clamp(24px,5vw,56px)}
.thanks-ic{display:block;width:84px;height:84px;margin:0 auto 22px;color:var(--tan-dk)}
.thanks-ic svg{width:100%;height:100%}
.modal-thanks h2{font-size:clamp(2.2rem,5vw,3rem);margin-bottom:16px}
.thanks-lede{font-size:1.35rem;line-height:1.55;color:var(--ink);max-width:28ch;margin:0 auto 14px}
.thanks-call{font-size:1.12rem;color:var(--soft);margin:0 0 30px}
.thanks-call a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:5px}
.modal-thanks .btn{min-width:220px}
.form-error{margin:0;color:#8A2B12;font-weight:500}
.form-error a{color:inherit}
.form-done{padding:28px 26px;background:var(--beige);border-left:3px solid var(--tan);outline:none}
.form-done h3{margin-bottom:10px}
.form-done p{margin:0;color:var(--soft)}

/* ---------- pop-ups ----------
   Native <dialog>: Esc closes it, focus stays inside while open, and the
   page behind can't scroll. A click on the dimmed backdrop also closes it. */
.modal{
  width:min(1000px, calc(100% - 32px));max-width:none;max-height:calc(100dvh - 40px);margin:auto;padding:0;border:0;
  background:var(--cream);color:var(--ink);box-shadow:0 40px 100px -30px rgba(0,0,0,.7);
  overflow:auto;overscroll-behavior:contain;
}
.modal::backdrop{background:rgba(35,24,18,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.modal[open]{animation:modalIn .35s var(--ease)}
.modal[open]::backdrop{animation:fadeIn .25s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
html:has(dialog[open]){overflow:hidden}
.modal-bar{position:sticky;top:0;height:0;z-index:3;display:flex;justify-content:flex-end}
.modal-close{
  margin:14px 14px 0 0;width:56px;height:56px;border:1px solid var(--rule);border-radius:50%;cursor:pointer;
  background:var(--cream);color:var(--ink);display:grid;place-content:center;transition:transform .2s var(--ease), background .15s, color .15s;
}
.modal-close svg{width:22px;height:22px}
.modal-close:hover{background:var(--choc);color:var(--on-dark);transform:rotate(90deg)}
.modal-close:active{transform:scale(.9)}
.modal-photo{line-height:0}
.modal-photo img{width:100%;aspect-ratio:21/8;object-fit:cover}
.modal-body{padding:clamp(24px,4vw,52px)}
.modal-body h2{margin-bottom:12px}
.modal-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,3vw,44px);margin-top:30px;align-items:start}
.modal .prose{font-size:1.1rem}
.modal .prose h3{font-size:clamp(1.25rem,2vw,1.5rem);margin:1.4em 0 .45em}
.modal .prose h3:first-child{margin-top:0}
.modal-aside{display:grid;gap:18px}
.modal-aside .card{padding:24px 22px}
.modal-aside h3{font-size:1.15rem;margin-bottom:10px}
.modal-aside .note{color:var(--soft);font-size:1rem;margin:0 0 16px}
.modal-aside .btn{width:100%;padding-left:14px;padding-right:14px}
.modal-aside .btn+.btn{margin-top:10px}
.modal-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}

/* the booking pop-up: same shell, narrower, with the form inside */
.modal-book{width:min(740px, calc(100% - 32px))}
.modal-book .sub{color:var(--soft);margin-bottom:0}
.book-form-wrap{margin-top:22px}
/* Guard: any display value on .modal would override the browser's own "a
   closed dialog is hidden" rule. Only an open dialog is ever laid out. */
dialog.modal:not([open]){display:none}


/* ---------- footer ---------- */
.footer{background:var(--choc-2);color:var(--on-dark-soft);padding:72px 0 34px;font-size:1.02rem}
.footer-top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding-bottom:40px;margin-bottom:48px;border-bottom:1px solid var(--rule-dark)}
.footer-top p{margin:0;max-width:44ch}
.footer a{color:var(--on-dark-soft);text-decoration:none;display:inline-block;overflow-wrap:anywhere;padding:3px 0;transition:color .15s, transform .2s var(--ease)}
.footer a:hover{color:var(--tan-lt);transform:translateX(4px)}
.footer .brand{display:inline-flex;align-items:center}
.footer .brand:hover{transform:none}
.footer-grid{display:grid;grid-template-columns:.8fr 1.1fr 1.2fr 1.3fr;gap:40px;margin-bottom:52px}
.footer-grid>*{min-width:0}
.footer h2{font-family:var(--body);font-size:.88rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--tan);margin-bottom:16px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.footer .hours{max-width:none}
.footer .hours li{color:var(--on-dark-soft);border-bottom-color:var(--rule-dark);padding:5px 0;font-size:.96rem;flex-wrap:nowrap;gap:12px}
.footer .hours li b{color:var(--on-dark);font-weight:400}
.footer .hours li.today b::after{content:none}
.footer .hours li.today b,.footer .hours li.today span{color:var(--tan)}
.footer-base{border-top:1px solid var(--rule-dark);padding-top:26px;display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;font-size:.95rem}

/* footer privacy link, 404 phone line, policy page */
.footer .footer-privacy{display:inline;margin-left:14px;padding:0;text-decoration:underline;text-underline-offset:4px}
.footer .footer-privacy:hover{transform:none}
.footer-credit{margin:28px 0 0;text-align:center;font-size:.92rem}
.footer .footer-credit a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0}
.footer .footer-credit a:hover{transform:none}
.footer-credit img{width:28px;height:28px;display:block}
.nf-call{margin-top:26px!important;font-size:1.15rem;color:var(--on-dark-soft)}
.nf-call a{color:var(--on-dark);font-weight:500;text-decoration:underline;text-underline-offset:5px}
.policy h2{font-size:clamp(1.35rem,2.2vw,1.7rem)}
@media (max-width:760px){ .footer .footer-privacy{display:inline-block;margin:6px 0 0;padding:9px 0} }

/* social links: round outline buttons */
.social,.footer .social{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.footer .social a,.social a{display:grid;place-content:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--rule-dark);color:var(--on-dark);transition:background .15s, color .15s, border-color .15s, transform .15s}
.social svg{width:20px;height:20px}
.footer .social a:hover,.social a:hover{background:var(--tan);border-color:var(--tan);color:var(--choc);transform:translateY(-2px)}
.social-light{margin-top:8px}
.social-light a{border-color:var(--rule);color:var(--ink)}
.social-light a:hover{background:var(--choc);border-color:var(--choc);color:var(--on-dark)}

/* ---------- mobile action bar ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(244,238,228,.97);border-top:1px solid var(--rule);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.actionbar.show{transform:none}
.actionbar .btn{flex:1;min-height:58px;padding:14px 12px}

/* ==========================================================================
   MOTION (only with html.motion, set in <head> when reduced motion is off)
   Banner copy rises line by line on load; photos and smaller pieces fade up
   as they scroll in. Nothing on screen at load is ever hidden.
   ========================================================================== */
.motion .banner-copy>*{animation:rise .9s var(--ease) both}
.motion .banner-copy>:nth-child(1){animation-delay:.1s}
.motion .banner-copy>:nth-child(2){animation-delay:.2s}
.motion .banner-copy>:nth-child(3){animation-delay:.3s}
.motion .banner-copy>:nth-child(4){animation-delay:.42s}
.motion .banner-copy>:nth-child(5){animation-delay:.54s}
.motion .banner-copy>:nth-child(6){animation-delay:.64s}
.motion .banner-img{animation:fadeIn 1.2s ease both}
.motion .scroll-cue svg{animation:nudge 2.4s var(--ease) 1.4s infinite}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes nudge{0%,60%,100%{transform:none}30%{transform:translateY(5px)}}
.fade.is-pending{opacity:0}
.fade.in{animation:fadeUp .8s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease), transform .8s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.split-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.split-words .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease);transition-delay:calc(var(--wi,0) * 50ms)}
.split-words.in .w>span{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.fade.is-pending{opacity:1;transform:none}
  .split-words .w>span{transform:none}
}

/* ==========================================================================
   RESPONSIVE (layout only; the header handles itself with container queries)
   ========================================================================== */
@media (max-width:1180px){
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
  .svc-img{aspect-ratio:4/3}
  .footer-grid{grid-template-columns:1fr 1fr}
  .visit3{grid-template-columns:1fr 1fr}
  .visit3 .info-list{grid-column:1 / -1;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}

@media (max-width:1040px){
  .split,.svc-row,.visit-grid,.detail-grid,.post-card.featured{grid-template-columns:1fr}
  .split-rev .split-photo{order:-1}
  .framed{max-width:360px}
  .svc-row:nth-child(even) .svc-row-img{order:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "a c" "d d"}
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .value:nth-child(3){border-left:0}
  .value:nth-child(n+3){border-top:1px solid var(--rule-dark)}
  .person{grid-template-columns:240px 1fr}
  .person-rev{grid-template-columns:1fr 240px}
  .person-photo{position:static}
  .aside{position:static}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .actionbar{display:flex}
  body{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}

@media (max-width:760px){
  body{font-size:1.1rem}
  .wrap{padding:0 20px}
  .header-in{min-height:68px;padding-top:6px;padding-bottom:6px;gap:6px 12px}
  .brand img{height:36px}
  .brand-name{font-size:1.1rem;letter-spacing:.08em;white-space:normal;line-height:1.1}
  .brand-sub{display:none}
  .brand{max-width:calc(100vw - 40px - 52px - 10px - 136px - 16px);gap:10px}
  .header-actions .header-book{display:none}
  .burger .burger-label{display:none}
  .burger{padding:0}
  .banner-home{min-height:calc(100svh - 68px)}
  .banner-page{min-height:0}
  .banner .banner-in{padding-top:64px;padding-bottom:72px}   /* .banner prefix: the phone .wrap padding reset must not wipe this */
  .banner .lede{font-size:1.15rem}
  .scroll-cue{display:none}
  .banner .eyebrow{font-size:.86rem;letter-spacing:.15em}
  .trust li{text-align:center}
  .trust ul{flex-direction:column;align-items:center;gap:4px}
  .trust li+li::before{display:none}
  .ruled-title::before,.ruled-title::after{max-width:36px}
  .section-intro{margin-top:-10px}
  .svc-grid,.g2,.g3,.steps,.gallery{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .mosaic{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "d"}
  .mosaic .m-a img{position:static;aspect-ratio:4/5}
  .mosaic .m-b img,.mosaic .m-c img{aspect-ratio:4/3}
  .mosaic .m-d img{aspect-ratio:3/2}
  .values{grid-template-columns:1fr}
  .value+.value{border-left:0;border-top:1px solid var(--rule-dark)}
  .visit3{grid-template-columns:1fr}
  .visit3 .map{aspect-ratio:4/3}
  .brand-row{gap:6px 0}
  .brand-row li{padding:2px 16px;font-size:1.3rem}
  .brand-row li+li{border-left:0}
  .status{display:none}
  .btn{white-space:normal;text-align:center}
  .btn-row .btn{width:100%}
  .card{padding:28px 24px}
  .cred{grid-template-columns:1fr 1fr;gap:16px 24px}
  .cred b{font-size:2.1rem}
  .slider{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
  .slider-btn{width:44px;height:44px}
  .map iframe{height:320px}
  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left}
  .modal{width:100%;max-height:100dvh;height:100dvh}
  .modal-grid{grid-template-columns:1fr}
  .modal-photo img{aspect-ratio:16/9}
  .prose{font-size:1.1rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 20px}
  .footer-grid>:nth-child(n+3){grid-column:1 / -1}
  .footer .brand{max-width:none}
  .footer .brand-sub{display:block}
  .footer ul{gap:0}
  .footer ul a{padding:9px 0}   /* 44px tap targets */
  .crumbs a{padding:11px 0}
  .cta-grid{grid-template-columns:1fr}
  .cta-photo{max-width:calc(100% - 14px);justify-self:start;margin:0 14px 14px 0}
  .cta-photo::before{transform:translate(14px,14px)}
  .person,.person-rev{grid-template-columns:1fr}
  .person-rev .person-photo{order:0}
  .person-photo{max-width:280px}
  .framed{width:calc(100% - 14px);margin-bottom:14px}
  .framed::before{transform:translate(14px,14px)}
  .gallery figure:last-child:nth-child(odd){grid-column:1 / -1}
  .gallery figure:last-child:nth-child(odd) img{aspect-ratio:3/2}
  .contact-grid .book-card{order:-1}
  .booking-form{grid-template-columns:1fr}
  .modal-thanks{width:calc(100% - 24px);height:auto;max-height:calc(100dvh - 24px)}
  .modal-thanks .btn{width:100%}

  /* the top strip folds away; the text size control moves into the bar
     beside the menu button, so the header is one short row */
  .topbar{background:none;container-type:normal;position:static}
  .topbar-in{min-height:0;padding:0}
  .info-items{display:none}
  .topbar .ts-group{position:absolute;top:0;bottom:0;right:calc(20px + 52px + 10px);z-index:4}
  .topbar .ts-group .ts-label{display:none}
}

@media (max-width:420px){
  .wrap{padding:0 16px}
  h1{font-size:2.2rem}
  h2{font-size:1.75rem}
  .brand img{height:32px}
  .brand-name{font-size:1rem}
  .topbar .ts-group{right:calc(16px + 52px + 8px)}
  .ts-opt{min-width:40px;padding:0 4px 7px}
  .ts-opt:nth-of-type(1) .glyph{font-size:.95rem}
  .ts-opt:nth-of-type(2) .glyph{font-size:1.15rem}
  .ts-opt:nth-of-type(3) .glyph{font-size:1.4rem}
  .actionbar{gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))}
}