/* ------------------------------------------------------------------
   Shared styles for the standalone SEO pages (/williamsville, /tonawanda,
   /services). Deliberately separate from index.html: these pages must NOT
   pull in the scroll-film engine or its 1,700 frames.
   Tokens mirror index.html so the pages feel like the same site.
------------------------------------------------------------------- */
:root{
  --ink:#0a0a0a; --coal:#111111; --smoke:#1c1c1c;
  --cream:#f7f4ef; --bone:#e9e4da; --mist:rgba(247,244,239,.62);
  --hair:rgba(247,244,239,.14);
  --disp:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body:'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  /* the retro script from the wordmark's "The" — used for the word List */
  --script:'Yellowtail', 'Snell Roundhand', cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--body);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:760px;margin:0 auto;padding:0 24px}

/* header */
.hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;
     justify-content:space-between;gap:14px;background:var(--ink);
     padding:calc(env(safe-area-inset-top) + 12px) 20px 12px}
.hdr .brand img{height:28px;width:auto;opacity:.95}
.hdr .book{text-decoration:none;border:1px solid var(--cream);border-radius:2px;
     padding:11px 18px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
     font-weight:600;white-space:nowrap}
.hdr .book:active{background:var(--cream);color:var(--ink)}

/* breadcrumb */

/* type */
h1{font-family:var(--disp);font-weight:800;text-transform:uppercase;line-height:.92;
   letter-spacing:.015em;font-size:clamp(38px,10vw,68px);margin:14px 0 0}
h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;line-height:.95;
   letter-spacing:.02em;font-size:clamp(26px,6.5vw,40px);margin:52px 0 0}
.lede{margin-top:18px;font-size:17.5px;color:var(--bone);max-width:60ch}
p{margin:16px 0 0;color:var(--bone)}
section{padding:0 0 8px}

/* hero image */
.hero{margin-top:28px;border:1px solid var(--hair);border-radius:3px;overflow:hidden;
      background:var(--coal)}
/* no forced aspect: both shopfront photos are near-square (1100x935 / 1100x1015), so a
   16:10 slot cropped the roofline away and left the building looking stretched. */
.hero img{width:100%;height:auto;filter:grayscale(1) contrast(1.05)}
/* The shop details sit INSIDE the hero so the desktop grid can pair them. On a phone
   that stacks, and a panel carrying its own border and radius inside the hero's border
   reads as a box drawn inside a box — so it goes flush and the two share one frame,
   parted by a single rule. */
.hero > .panel{margin:0;border:0;border-top:1px solid var(--hair);border-radius:0;
      background:transparent}

/* fact panel: address + hours */
.panel{margin-top:26px;border:1px solid var(--hair);border-radius:3px;background:var(--coal);
       padding:22px}
.panel h3{font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;
       letter-spacing:.05em;margin:0 0 14px}
.panel address{font-style:normal;font-size:17px;color:var(--cream);line-height:1.5}
.hours{margin:20px 0 0;display:grid;gap:9px}
.hours div{display:flex;justify-content:space-between;gap:18px;
       border-bottom:1px solid rgba(247,244,239,.07);padding-bottom:9px}
.hours dt{color:var(--mist);font-size:13.5px;letter-spacing:.06em}
.hours dd{margin:0;font-size:13.5px;color:var(--cream)}
.hours .closed dd{color:var(--mist)}
.row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.btn{flex:1 1 auto;text-align:center;text-decoration:none;border:1px solid var(--hair);
     border-radius:2px;padding:15px 18px;font-size:11px;letter-spacing:.26em;
     text-transform:uppercase;font-weight:600;transition:background .25s,border-color .25s}
.btn:hover{background:var(--smoke);border-color:rgba(247,244,239,.34)}
.btn.solid{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn.solid:hover{background:var(--bone)}

/* service list */
.svc{border-top:1px solid var(--hair);padding:26px 0 24px;display:grid;
     grid-template-columns:44px 1fr;column-gap:10px}
/* the one service with a page behind it */
.svc h3 .svclink{color:inherit;text-decoration:none}
.svcbtn{grid-column:2;justify-self:start;display:inline-flex;align-items:center;gap:.5em;margin-top:14px;
  padding:11px 18px;border:1px solid var(--cream);border-radius:2px;color:var(--cream);
  text-decoration:none;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  transition:background .25s,color .25s}
.svcbtn:hover{background:var(--cream);color:var(--ink)}
.svc em{grid-row:1/3;font-style:normal;font-family:var(--disp);font-weight:500;font-size:15px;
     color:var(--mist);padding-top:6px}
.svc h3{margin:0;font-family:var(--disp);font-weight:700;font-size:clamp(24px,6vw,34px);
     text-transform:uppercase;letter-spacing:.02em;line-height:1;
     display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.svc h3 i{font-style:normal;font-family:var(--body);font-weight:500;font-size:10.5px;
     letter-spacing:.22em;color:var(--mist);border:1px solid var(--hair);
     border-radius:2px;padding:5px 9px;white-space:nowrap}
/* price sits flush right on the title row, menu-board style */
.svc h3 .prc{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:.68em;
     letter-spacing:.03em;color:var(--cream);white-space:nowrap}
/* "walk-ins welcome" chip — shown beside hours and booking actions */
.walkin{display:inline-flex;align-items:center;gap:10px;margin:20px 0 0;padding:10px 14px;
     border:1px solid var(--hair);border-radius:2px;font-weight:600;
     font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--cream)}
.walkin svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;
     stroke-width:1.7;stroke-linecap:round}
.walkin em{font-style:normal;color:var(--mist)}
/* both must be pinned to column 2: the `em` only spans rows 1-2, so a third child
   would otherwise wrap back under the number. Same as the home page. */
.svc p{grid-column:2;margin-top:10px;font-size:15.5px}
.svc .note{grid-column:2;margin-top:10px;font-size:10.5px;letter-spacing:.22em;
     text-transform:uppercase;color:var(--mist)}

/* barber chips */

/* cross links */
.also{display:grid;gap:12px;margin-top:24px}
.also a{display:flex;align-items:center;justify-content:space-between;gap:14px;
     text-decoration:none;border:1px solid var(--hair);border-radius:3px;
     background:var(--coal);padding:18px 20px;transition:background .25s,border-color .25s}
.also a:hover{background:var(--smoke);border-color:rgba(247,244,239,.34)}
.also b{font-family:var(--disp);font-weight:700;font-size:21px;text-transform:uppercase;
     letter-spacing:.03em}
.also small{display:block;margin-top:3px;font-size:12.5px;color:var(--mist);letter-spacing:.02em}
.also .arw{font-size:20px;color:var(--mist)}

/* footer */
footer{border-top:1px solid var(--hair);margin-top:64px;
       padding:44px 24px calc(env(safe-area-inset-bottom) + 44px);text-align:center}
footer img{width:260px;height:auto;margin:0 auto;opacity:.9}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin-top:26px}
footer nav a{color:var(--mist);text-decoration:none;font-size:11px;letter-spacing:.2em;
       text-transform:uppercase}
footer nav a:hover{color:var(--cream)}
.socials{display:flex;justify-content:center;gap:26px;margin-top:24px}
.socials a{color:var(--mist)}
.socials svg{width:21px;height:21px;fill:currentColor}
footer small{display:block;margin-top:24px;color:var(--mist);font-size:11px;letter-spacing:.08em}
footer .credit{margin-top:9px;font-size:10px}
footer .credit a{color:var(--mist);text-decoration:underline;text-underline-offset:3px;transition:color .25s}
footer .credit a:hover{color:var(--cream)}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------------
   Bottom tab bar — mirrors index.html so the app-style menu is present
   on every page. On these pages the tabs are plain links (Home /
   Locations / Barbers point back at the home page's sections); the
   active tab is set statically per page with .on, no JS.
------------------------------------------------------------------- */
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:70;
      display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr;align-items:center;gap:2px;
      background:rgba(10,10,10,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
      border-top:1px solid var(--hair);
      padding:11px 10px calc(env(safe-area-inset-bottom) + 11px)}
#tabbar .tab{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
      text-decoration:none;color:var(--mist);padding:4px 2px;
      transition:color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1)}
#tabbar .tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.55;
      stroke-linecap:round;stroke-linejoin:round;
      transition:transform .45s cubic-bezier(.2,1.4,.35,1)}
#tabbar .tab span{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
      opacity:.75;transition:opacity .3s}
#tabbar .tab.on{color:var(--cream)}
#tabbar .tab.on svg{transform:translateY(-2px) scale(1.06)}
#tabbar .tab.on span{opacity:1}
#tabbar .tab:active{transform:scale(.93)}
#tabbar .tab.book{background:var(--cream);color:var(--ink);border-radius:3px;
      padding:10px 16px 9px;margin:0 6px;gap:4px}
#tabbar .tab.book svg{width:18px;height:18px;stroke-width:1.8}
#tabbar .tab.book span{opacity:1;font-size:8.5px;letter-spacing:.2em}
#tabbar .tab.book:active{transform:scale(.95)}
/* The Book chip repeats its flash — the one looping animation on the site, because
   it is the conversion CTA and it has to catch the eye from the corner of it.
   The band sweeps across roughly a fifth of the cycle and then rests, so it reads
   as an occasional glint, not a strobe. Cream face (#f7f4ef), so the band needs a
   high alpha plus overlay blending: plain white at .55 is invisible here. */
#tabbar .tab.book{overflow:hidden;isolation:isolate}
/* the glint animates TRANSFORM only (compositor thread) — animating `left` here
   forced main-thread layout+repaint every frame inside a backdrop-filtered bar,
   which saturated slow phones (PSI: "5 non-composited animations", huge TBT) */
#tabbar .tab.book::after{content:"";position:absolute;top:-40%;bottom:-40%;
      width:46px;left:0;pointer-events:none;z-index:1;
      transform:translateX(-70px) skewX(-16deg);will-change:transform;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
      mix-blend-mode:overlay;
      animation:tabcatch 4.6s cubic-bezier(.3,0,.2,1) 1.2s infinite}
#tabbar .tab.book svg,#tabbar .tab.book span{position:relative;z-index:2}
@keyframes tabcatch{
  0%{transform:translateX(-70px) skewX(-16deg)}
  20%{transform:translateX(340px) skewX(-16deg)}
  100%{transform:translateX(340px) skewX(-16deg)}
}
@media (min-width:760px){
  #tabbar{left:50%;right:auto;transform:translateX(-50%);bottom:18px;
        border:1px solid var(--hair);border-radius:5px;
        grid-template-columns:86px 86px auto 86px 86px;padding:12px 12px 13px}
}
@media (prefers-reduced-motion:reduce){#tabbar .tab.on svg{transform:none}}

/* clear the fixed bar */
footer{padding-bottom:calc(env(safe-area-inset-bottom) + 124px)}
@media (min-width:760px){footer{padding-bottom:calc(env(safe-area-inset-bottom) + 130px)}}

/* ------------------------------------------------------------------
   Page transition — the same six-slat curtain as the in-site Apply /
   Apprenticeship pages, now across real page loads too.
   The ENTRY half is pure CSS: the slats start covering the viewport and
   animate away on load. That matters — if it depended on JS there would
   be a flash of the page before the script ran, and a permanently black
   screen if the script never ran at all.
------------------------------------------------------------------- */
#curtain{position:fixed;inset:0;z-index:300;pointer-events:none;display:flex}
#curtain i{flex:1;background:var(--ink);transform:translateY(101%);
      transition:transform .44s cubic-bezier(.76,0,.24,1)}
#curtain.cover i{transform:translateY(0)}
#curtain.enter i{transform:translateY(0);
      animation:slat-lift .48s cubic-bezier(.22,1,.28,1) forwards}
@keyframes slat-lift{from{transform:translateY(0)}to{transform:translateY(-101%)}}
/* leaving: left-to-right. arriving: right-to-left, so the motion reads as continuous */
#curtain.cover i:nth-child(1),#curtain.enter i:nth-child(6){transition-delay:0ms;animation-delay:0ms}
#curtain.cover i:nth-child(2),#curtain.enter i:nth-child(5){transition-delay:32ms;animation-delay:32ms}
#curtain.cover i:nth-child(3),#curtain.enter i:nth-child(4){transition-delay:64ms;animation-delay:64ms}
#curtain.cover i:nth-child(4),#curtain.enter i:nth-child(3){transition-delay:96ms;animation-delay:96ms}
#curtain.cover i:nth-child(5),#curtain.enter i:nth-child(2){transition-delay:128ms;animation-delay:128ms}
#curtain.cover i:nth-child(6),#curtain.enter i:nth-child(1){transition-delay:160ms;animation-delay:160ms}
@media (prefers-reduced-motion:reduce){
  #curtain i{display:none}
}

/* ---------- Google reviews ---------- */
/* ---------- Google reviews — cream section ----------
   Reversed out of the dark page so it reads as a distinct block, using the same cream
   as the barbers section. Everything inside is re-toned for a light ground: the card
   borders, the quote colour and the star fill all had dark-page values. */
.reviews{background:var(--cream);color:var(--ink);position:relative;isolation:isolate;
     margin:56px -24px 0;padding:52px 24px 56px}
.reviews h2{color:var(--ink)}
.revrail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
     padding:24px 24px 8px 0;margin-right:-24px;-webkit-overflow-scrolling:touch;
     scrollbar-width:none}
.revrail::-webkit-scrollbar{display:none}
/* Now that the quote is clamped a card can no longer run away from its neighbours,
   so a shared height is safe — and it lines every attribution up along one baseline.
   (These were flex-start before, because an unclamped long review left a short one
   floating above ~400px of nothing, .who being pushed down by margin-top:auto.) */
.revrail{align-items:stretch}
.revrail > *{flex:0 0 80vw;max-width:340px;scroll-snap-align:start}
/* margin:0 because .rev is a <figure>, and the UA default of `1em 40px` was taking
   80px off every card's width and 32px off its height — which is why they sat
   narrower and shorter than the Google card sharing their grid row. */
.rev{margin:0;display:flex;flex-direction:column;border:1px solid rgba(10,10,10,.14);border-radius:3px;
     background:rgba(255,255,255,.62);padding:20px 19px}
.rev .stars{display:flex;gap:3px;color:#e7a900}          /* Google's own star gold */
.rev .stars svg{width:15px;height:15px;fill:currentColor}
.rev blockquote{margin:14px 0 0;font-size:15px;line-height:1.55;color:#232323}
/* .clamped is added by reviews.js, and only where the text really does overflow —
   so with JS off the whole review is still readable, merely ragged. */
.rev.clamped blockquote{display:-webkit-box;-webkit-box-orient:vertical;
     -webkit-line-clamp:6;overflow:hidden}
.revtoggle{align-self:flex-start;margin:11px 0 0;padding:0;background:none;border:0;
     font-family:inherit;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
     color:rgba(10,10,10,.6);border-bottom:1px solid rgba(10,10,10,.28);cursor:pointer}
.revtoggle:hover{color:var(--ink);border-bottom-color:var(--ink)}
.rev .who{margin-top:auto;padding-top:16px;display:flex;align-items:center;gap:11px}
.revpic{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 34px;
     background:rgba(10,10,10,.08)}
.revwho{display:flex;flex-direction:column;min-width:0}
.revwho b{font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--ink);
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.revwho b a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(10,10,10,.22)}
.revwho b a:hover{border-bottom-color:rgba(10,10,10,.6)}
.revwho i{font-style:normal;font-size:11.5px;color:rgba(10,10,10,.55);margin-top:2px}
/* the last card in the rail: straight through to that shop's listing */
.revmore{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
     text-align:center;text-decoration:none;border:1px solid rgba(10,10,10,.14);border-radius:3px;
     background:rgba(255,255,255,.62);padding:26px 18px;min-height:190px;
     transition:background .25s,border-color .25s}
.revmore:hover{background:#fff;border-color:rgba(10,10,10,.32)}
.revmore .g{width:34px;height:34px}
.revmore b{font-family:var(--disp);font-weight:700;font-size:22px;text-transform:uppercase;
     letter-spacing:.03em;color:var(--ink)}
.revmore small{font-size:12.5px;color:rgba(10,10,10,.6)}

/* ---------- barbers at this shop (mirrors the home page's cream team section) ---------- */
.team{background:var(--cream);color:var(--ink);position:relative;isolation:isolate;
      margin:56px -24px 0;padding:52px 24px 56px}
/* two crews back to back: one continuous cream block, no ink bar between them */
.team + .team{margin-top:0;padding-top:6px}
.team::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
      background:
        radial-gradient(ellipse 92% 70% at 50% 50%, transparent 52%, rgba(10,10,10,.10) 100%),
        radial-gradient(circle at 0% 0%,   rgba(10,10,10,.10), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(10,10,10,.10), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(10,10,10,.10), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(10,10,10,.10), transparent 34%)}
/* NO z-index on the children: the ::after vignette has to fall across the portraits
   too. Lifting them above it darkened the section background but not the photos, which
   is what made each portrait read as a white box sitting on the cream. */
.team h2{margin-top:0;color:var(--ink)}
.team .eyebrow{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:.44em;
      text-transform:uppercase;color:rgba(10,10,10,.5);margin-bottom:16px}
.team .eyebrow::before{content:"";width:26px;height:1px;background:var(--ink);opacity:.35}
.team p{color:rgba(10,10,10,.68)}
.teamgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px 14px;margin-top:30px;
      align-items:stretch}
.mate{text-decoration:none;display:flex;flex-direction:column;height:100%;text-align:center}
.mate .shot{position:relative;aspect-ratio:64/77;overflow:hidden;background:var(--cream)}
.mate .shot img{width:100%;height:100%;object-fit:cover;background:var(--cream);
      transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mate:hover .shot img{transform:scale(1.04)}
.mate b{display:block;margin-top:4px;font-family:var(--disp);font-weight:700;font-size:19px;
      text-transform:uppercase;letter-spacing:.04em;line-height:1.08;color:var(--ink)}
.mate span{display:block;margin-top:5px;font-size:9.5px;letter-spacing:.2em;
      text-transform:uppercase;color:rgba(10,10,10,.5);line-height:1.5}
.mate .ig{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:auto;
      padding-top:11px;font-style:normal;font-size:11.5px;color:rgba(10,10,10,.78);
      letter-spacing:.01em}
.mate .ig svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;
      opacity:.8;flex:0 0 auto}
@media (min-width:640px){ .teamgrid{grid-template-columns:repeat(3,1fr);gap:40px 20px} }

/* ---------- Jonny's List ---------- */
.listtools{position:sticky;top:calc(env(safe-area-inset-top) + 54px);z-index:10;
     background:var(--ink);padding:18px 0 14px;margin-top:26px}
.searchwrap{position:relative}
.searchwrap svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
     width:17px;height:17px;fill:none;stroke:var(--mist);stroke-width:1.8;
     stroke-linecap:round;pointer-events:none}
#listsearch{width:100%;background:var(--coal);border:1px solid var(--hair);border-radius:3px;
     color:var(--cream);font-family:var(--body);font-size:16px;padding:14px 14px 14px 42px;
     transition:border-color .25s,background .25s,box-shadow .25s}
#listsearch::placeholder{color:rgba(247,244,239,.32)}
#listsearch:focus{outline:none;border-color:var(--cream);background:var(--smoke);
     box-shadow:0 0 0 3px rgba(247,244,239,.08)}
#listchips{display:flex;gap:8px;overflow-x:auto;margin-top:12px;padding-bottom:2px;
     scrollbar-width:none;-webkit-overflow-scrolling:touch}
#listchips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;cursor:pointer;background:none;border:1px solid var(--hair);
     border-radius:100px;color:var(--mist);font-family:var(--body);font-weight:600;
     font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:10px 15px;
     transition:background .22s,color .22s,border-color .22s}

/* ---------- Jonny's List: categories first ----------
   Nothing is preselected, so the page opens on the categories themselves. They sit
   larger while you are choosing, then shrink back to filter chips once the list is
   open — same control, two states. */
#listroot.picking .chip{font-size:15px;padding:16px 22px;border-radius:40px}
#listroot.picking .chip small{display:inline-block;margin-left:9px;opacity:.5;font-size:12px}
#listroot.picking #listchips{gap:12px}
#listroot.picking .listcount,
#listroot.picking #listsearch{opacity:.55}
.chip small{display:none}
#listroot .pickhint{display:none}
#listroot.picking .pickhint{display:block;margin-top:26px;font-size:14px;color:var(--mist)}
@media (min-width:900px){
  #listroot.picking .chip{font-size:16.5px;padding:18px 26px}
}

.chip:hover{color:var(--cream);border-color:rgba(247,244,239,.34)}
.chip.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.listmeta{display:flex;align-items:center;justify-content:space-between;gap:14px;
     margin-top:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
     color:var(--mist)}
#listclear{background:none;border:0;cursor:pointer;color:var(--mist);font-family:var(--body);
     font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
     text-decoration:underline;text-underline-offset:3px;padding:0}
#listclear:hover{color:var(--cream)}
#listgrid{display:grid;gap:12px;margin-top:8px}
@media (min-width:640px){#listgrid{grid-template-columns:1fr 1fr}}
.lcard{border:1px solid var(--hair);border-radius:3px;background:var(--coal);padding:20px 19px}
.lcat{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--mist)}
.lcard h3{margin:9px 0 0;font-family:var(--disp);font-weight:700;font-size:24px;
     text-transform:uppercase;letter-spacing:.03em;line-height:1;color:var(--cream)}
.lcard p{margin-top:10px;font-size:14.5px;color:var(--bone)}
.lby{margin-top:10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
     color:var(--mist)}
.llinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.llinks a{text-decoration:none;border:1px solid var(--hair);border-radius:2px;
     padding:9px 13px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
     font-weight:600;color:var(--bone);transition:background .22s,border-color .22s}
.llinks a:hover{background:var(--smoke);border-color:rgba(247,244,239,.34);color:var(--cream)}
#listempty{border:1px solid var(--hair);border-radius:3px;background:var(--coal);
     padding:36px 22px;text-align:center;color:var(--mist);font-size:14.5px;margin-top:8px}
#listwarn{border:1px solid rgba(224,144,143,.45);border-radius:3px;
     background:rgba(224,144,143,.08);padding:15px 17px;margin-top:22px;
     font-size:13.5px;color:#e0908f}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
     clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* list cards with a photo */
.lcard{overflow:hidden;padding:0}
.lcard .lbody{padding:20px 19px}
.lpic{background:var(--smoke);border-bottom:1px solid var(--hair)}
.lpic img{width:100%;height:auto;display:block}
.lcard address{font-style:normal;margin-top:8px;font-size:13px;color:var(--mist);line-height:1.5}
.lsocial{display:flex;align-items:center;gap:8px}
.lsocial a{display:grid;place-items:center;width:38px;height:38px;padding:0;
     border:1px solid var(--hair);border-radius:2px;color:var(--mist)}
.lsocial a:hover{color:var(--cream)}
.lsocial svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}
.llinks{align-items:center}

/* the script face is optically smaller than the condensed display face, so it needs a
   size bump and its own tracking to sit level with the caps beside it. */
/* Yellowtail ships one upright-drawn weight and is already slanted, so do NOT set
   italic or a bold weight here — that would only trigger faux styling. */
.scr{font-family:var(--script);font-style:normal;font-weight:400;
     text-transform:none;letter-spacing:0;font-size:1.2em;line-height:.9;
     padding:0 .1em 0 .04em;
     /* the wordmark treats "The" as a lettered flourish, not just another word:
        tilted off the baseline with a tapered swash under it. same idea here. */
     position:relative;display:inline-block;transform:rotate(-3.5deg);
     transform-origin:50% 80%}
.scr::after{content:"";position:absolute;left:.02em;right:-.1em;bottom:-.05em;height:.15em;
     background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M4 12.4C40 5.6 104 2.2 160 3.2c12 .2 26 .9 36 2.1-11 .1-22 .3-33 .7C110 7 54 10.2 8 14.6c-2.6.3-4-.5-4-1.4 0-.4.3-.7 0-.8z' fill='%23f7f4ef'/%3E%3C/svg%3E") no-repeat center/100% 100%;pointer-events:none}

@media (prefers-reduced-motion: reduce){
  #tabbar .tab.book::after{animation:none;display:none}
}

/* ============================================================================
   DESKTOP / LARGE SCREENS
   These pages were capped at a 760px column, which read as a phone layout blown
   up on a monitor. Widen the shell, put the repeating blocks into real columns,
   and hold every prose block to a readable measure.
   ========================================================================== */
@media (min-width:1024px){
  .wrap{max-width:min(1320px, calc(100vw - 96px));padding:0 8px}

  /* rails become grids: on a desktop a horizontal scrollbar hides content rather
     than saving space */
  .revrail{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
        overflow:visible;scroll-snap-type:none;margin-right:0;padding-right:0;
        align-items:stretch}
  /* Three reviews plus the Google card left the card stranded alone on row two.
     The generator counts how many columns are free on the last row and the card
     spans exactly that, so the grid always comes out square. */
  .revmore{grid-column:span var(--span,3)}
  .revrail > *{flex:none;max-width:none;scroll-snap-align:none}
  #listchips{flex-wrap:wrap;overflow:visible}
  main.wrap{padding-bottom:40px}

  /* prose stays narrow even though the shell is wide */

  h1{font-size:clamp(48px,5.2vw,84px)}

  /* the shopfront photo and the details beside it, rather than stacked */
  /* The pairing only makes sense when there IS something to pair the photo with.
     The location pages have a photo-only hero, and it was being dropped into
     column one of a two-column grid — leaving half the row as dead black. */
  .hero:has(.panel){display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
        align-items:stretch;margin-top:34px}
  .hero:has(.panel) img{height:100%;object-fit:cover}
  /* photo-only: full width, but cropped to a letterbox — these source images are
     nearly square, so at full width they would stand over 1200px tall. */
  .hero:not(:has(.panel)){aspect-ratio:16/9;margin-top:34px}
  .hero:not(:has(.panel)) img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}
  .hero .panel{margin:0;border:0;border-radius:0;align-self:center;padding:30px 34px}

  /* locations hub: both shops side by side */
  main.wrap > .hero + .hero{margin-top:22px}

  .svc{padding:22px 0}
  .row{max-width:520px}
  .also{grid-template-columns:1fr 1fr}
  #listgrid{grid-template-columns:repeat(3,1fr);gap:16px}
}

@media (min-width:1440px){
  .wrap{max-width:min(1500px, calc(100vw - 120px))}
  .teamgrid{grid-template-columns:repeat(6,1fr);gap:34px 20px}
}

/* ---------- desktop header navigation ---------- */
.hdrnav{display:none}
.hdrnav a{text-decoration:none;color:inherit;opacity:.72;font-size:11px;letter-spacing:.2em;
     text-transform:uppercase;font-weight:600;padding:6px 0;position:relative;
     transition:opacity .25s;white-space:nowrap}
.hdrnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
     background:currentColor;transform:scaleX(0);transform-origin:left;
     transition:transform .28s cubic-bezier(.3,.9,.2,1)}
.hdrnav a:hover{opacity:1}
.hdrnav a:hover::after{transform:scaleX(1)}
.hdrnav a[aria-current="page"]{opacity:1}
.hdrnav a[aria-current="page"]::after{transform:scaleX(1)}

@media (min-width:1024px){
  #tabbar{display:none}
  .hdrnav{display:flex;align-items:center;gap:32px;margin-left:auto;margin-right:34px}
  .hdrnav a{font-size:12.5px;letter-spacing:.18em}
  .hdr{padding-left:40px;padding-right:40px;
       padding-top:calc(env(safe-area-inset-top) + 20px);padding-bottom:20px}
  .hdr .brand img{height:42px}
  .hdr .book{font-size:12.5px;padding:12px 24px}
  footer{padding-bottom:64px}
  /* body copy sized for a monitor rather than a phone */
  .lede{font-size:20px;line-height:1.62}
  .panel p,.svc p,.team > p,address{font-size:16.5px}
  .hours div{font-size:15px}
}


/* ---- private parties: film-poster editorial ---- */
.pp{padding-bottom:8px}
.pp-hero{display:grid;gap:34px;padding-top:10px}
.pp-copy h1{margin:0;font-size:clamp(58px,15vw,128px);line-height:.86}
.pp-copy .lede{max-width:46ch}
.pp-cta{display:flex;gap:12px;margin-top:26px;max-width:430px}
.pp-mail{margin-top:14px;font-size:14px;color:var(--mist)}
.pp-film{margin:8px 0 0;position:relative;max-width:400px}
.pp-film video{position:relative;z-index:1;width:100%;display:block;border-radius:4px;background:#000}
.pp-film::before{content:"";position:absolute;top:16px;left:16px;right:-16px;bottom:-16px;
  border:1px solid var(--hair);border-radius:4px}
.pp-film figcaption{position:relative;z-index:1;margin-top:26px;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--mist)}
.pp-ways{margin-top:64px;border-top:1px solid var(--hair)}
.pp-way{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:34px 0;border-bottom:1px solid var(--hair)}
.pp-way em{font-family:var(--disp);font-style:normal;font-weight:500;font-size:17px;color:var(--mist);padding-top:8px}
.pp-way h2{margin:0;font-size:clamp(30px,7vw,44px)}
.pp-way p{color:var(--bone);font-size:15px;max-width:44ch;margin:12px 0 0}
.pp-note{color:var(--mist);font-size:15.5px;line-height:1.7;max-width:56ch;margin:36px 0 56px}
.pp-band{background:var(--cream);color:var(--ink);padding:64px 0 68px;margin:0}
.pp-band h2{color:var(--ink);font-size:clamp(38px,8.5vw,64px);margin:0 0 18px}
.pp-band p{color:rgba(10,10,10,.72);font-size:16px;max-width:52ch;line-height:1.6}
.pp-band .row{display:flex;gap:12px;margin-top:26px;max-width:430px}
.pp-band .btn{border-color:rgba(10,10,10,.35);color:var(--ink)}
.pp-band .btn:hover{background:rgba(10,10,10,.06);border-color:var(--ink)}
.pp-band .btn.solid{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pp-band .btn.solid:hover{background:#242424}
.pp-bandmail{margin-top:16px;font-size:14px;color:rgba(10,10,10,.55)}
.pp-tail{padding-top:26px}
/* one orchestrated load moment */
@keyframes ppin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pp-copy h1,.pp-copy .lede,.pp-cta,.pp-mail,.pp-film{animation:ppin .7s cubic-bezier(.22,1,.28,1) both}
.pp-copy .lede{animation-delay:.1s}.pp-cta{animation-delay:.18s}
.pp-mail{animation-delay:.24s}.pp-film{animation-delay:.14s}
@media (prefers-reduced-motion:reduce){
  .pp-copy h1,.pp-copy .lede,.pp-cta,.pp-mail,.pp-film{animation:none}}
@media (min-width:900px){
  .pp-hero{grid-template-columns:1.1fr .9fr;gap:72px;align-items:center;min-height:66vh;padding-top:30px}
  .pp-film{justify-self:end;width:min(440px,36vw);margin-right:18px}
  /* the phone video is 9:16 — at desktop height that's a floor-to-ceiling strip jammed
     against the fold. Crop it to a 4:5 editorial card instead: whole card, its offset
     frame and the caption all sit inside the hero with air around them. */
  .pp-film video{aspect-ratio:4/5;height:auto;max-height:60vh;object-fit:cover}
  .pp-film figcaption{margin-top:20px}
  .pp-ways{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;border-top:1px solid var(--hair)}
  .pp-way:first-child{border-right:1px solid var(--hair);padding-right:64px}
  .pp-note{margin:44px 0 72px}
}