/* The Shed Grooming Studio — shared visual system
   "classic shopfront": warm cream paper, espresso ink, brand-brown accent.
   Same class contract as the fadeculture build (header, hero, cards,
   price list, gallery, visit, booking shell, footer, actionbar) so the
   booking app and page chrome carry over unchanged. */
:root{
  --ink:#FBF7EE; --surface:#FFFFFF; --surface-2:#F4EDDC;
  --bone:#2B2114; --bone-dim:rgba(43,33,20,.74); --bone-faint:rgba(43,33,20,.14);
  --brass:#563D00; --brass-ink:#FBF7EE;
  --brass-deep:#422E00;
  --red:#A63D2F;
  --radius:14px; --gutter:min(100% - 48px,1120px);
  --ease:cubic-bezier(0.16,1,0.3,1);
  --font-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
}
/* Live backdrop: two warm washes of shop light drifting slowly behind the
   page. Transform-only, fixed, pointer-transparent. No grain. */
body::before{content:"";position:fixed;inset:-15%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 32% at 16% 14%,rgba(176,132,60,.13),transparent 70%),
    radial-gradient(34% 30% at 84% 26%,rgba(86,61,0,.08),transparent 70%),
    radial-gradient(44% 38% at 76% 86%,rgba(166,61,47,.06),transparent 70%);
  animation:shopdrift 38s ease-in-out infinite alternate;will-change:transform}
@keyframes shopdrift{from{transform:translate3d(-2.5%,-2%,0) scale(1)}
  to{transform:translate3d(2.5%,2%,0) scale(1.06)}}
::selection{background:var(--brass);color:var(--brass-ink)}
h1,h2,h3,.price{font-family:var(--font-display);letter-spacing:.01em;line-height:1.15;margin:0 0 .6rem;font-weight:700;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.5vw + 1rem,3.9rem)}
h2{font-size:clamp(1.55rem,3vw + .8rem,2.2rem)}
h3{font-size:1.25rem}
.lede{color:var(--bone-dim);font-size:clamp(1.05rem,1.4vw + .9rem,1.28rem);max-width:40ch}
a{color:var(--brass)}
img{max-width:100%;height:auto;display:block}
.wrap{width:var(--gutter);margin-inline:auto}
section{padding:clamp(2.5rem,6vw,4.25rem) 0}
/* Barber-pole divider: the shop's own iconography. Slow helical scroll. */
.pole{height:12px;border:0;margin:0;
  background:repeating-linear-gradient(-55deg,
    var(--brass) 0 16px, var(--ink) 16px 32px,
    var(--red) 32px 40px, var(--ink) 40px 56px);
  border-block:1px solid rgba(43,33,20,.25);
  animation:poleturn 12s linear infinite}
/* Shift equals one 56px pattern period projected on x (56 / sin(55deg)) */
@keyframes poleturn{to{background-position-x:-68.36px}}
/* Marquee ticker: services on a deeper cream band. */
.marquee{overflow:hidden;border-block:1px solid var(--bone-faint);
  background:var(--surface-2);padding:.9rem 0;position:relative;z-index:1}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-group{display:flex;align-items:center;gap:2.75rem;padding-right:2.75rem}
.mq-group span{font-family:var(--font-display);font-size:1.05rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass);white-space:nowrap}
.mq-sep{width:9px;height:9px;flex:none;color:var(--red)}
@keyframes marquee{to{transform:translateX(-50%)}}
/* skip link + focus */
.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--brass-ink);padding:.75rem 1.25rem;font-weight:700;z-index:200;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:4px}
/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(251,247,238,.96);backdrop-filter:blur(8px);border-bottom:2px solid var(--brass)}
.site-head .wrap{display:flex;align-items:center;gap:1rem;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--bone)}
.brand-logo{width:auto;height:58px;max-width:190px;object-fit:contain;flex:none}
.site-nav{display:flex;gap:1.1rem;margin-left:auto}
.site-nav a{color:var(--bone-dim);text-decoration:none;font-weight:600;font-size:.98rem;padding:.5rem .2rem}
.site-nav a[aria-current="page"]{color:var(--brass)}
.site-nav a:hover{color:var(--brass);text-decoration:underline;text-underline-offset:5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.7rem 1.5rem;border-radius:10px;font-weight:700;font-size:1rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .18s ease,transform .18s ease,box-shadow .2s ease}
.btn-gold{background:var(--brass);color:var(--brass-ink)}
.btn-gold:hover{background:var(--brass-deep);transform:translateY(-1px);box-shadow:0 8px 20px rgba(86,61,0,.25)}
.btn-ghost{border-color:var(--bone-faint);color:var(--bone);background:transparent}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.head-cta{margin-left:.5rem;white-space:nowrap}
/* hero */
.hero{position:relative;overflow:clip;padding:clamp(2.5rem,7vw,4.5rem) 0}
.hero-grid{position:relative;z-index:1;display:grid;gap:2.25rem;grid-template-columns:1.02fr .98fr;align-items:center}
.hero-photo{border-radius:var(--radius);overflow:hidden;border:1px solid var(--bone-faint);background:var(--surface)}
.hero-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
/* The authored moment: cape-lift reveal on load. */
html.js .hero h1{clip-path:inset(-6% 101% -6% 0);transition:clip-path .8s var(--ease)}
html.js body.loaded .hero h1{clip-path:inset(-6% -1% -6% 0)}
html.js .hero-copy > :not(h1){opacity:0;transform:translateY(16px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
html.js body.loaded .hero-copy > :not(h1){opacity:1;transform:none;transition-delay:.3s}
html.js .hero-photo{opacity:0;transform:scale(1.06);filter:blur(10px);
  transition:opacity .9s var(--ease),transform 1.15s var(--ease),filter .9s var(--ease)}
html.js body.loaded .hero-photo{opacity:1;transform:none;filter:blur(0);transition-delay:.12s}
.text-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1rem;font-weight:600}
.proof{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;list-style:none;padding:0}
.proof li{border:1px solid var(--bone-faint);border-radius:999px;padding:.45rem .95rem;font-size:.92rem;color:var(--bone-dim);background:var(--surface)}
.proof li b{color:var(--brass);font-family:var(--font-display);font-size:1.02rem;margin-right:.3rem}
/* cards: border carries the elevation; the container answers hover, never the image */
.cards{display:grid;gap:1.1rem;grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--bone-faint);border-radius:var(--radius);overflow:hidden;transition:transform .18s var(--ease),border-color .18s var(--ease)}
.card:hover{transform:translateY(-3px);border-color:rgba(86,61,0,.45)}
.card img{aspect-ratio:1/1;object-fit:cover;width:100%}
.card-body{padding:1.1rem 1.15rem 1.25rem}
.card-body .price{font-size:1.9rem;color:var(--brass)}
.card-body p{color:var(--bone-dim);margin:.4rem 0 0;font-size:.97rem}
/* service photos */
.service-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1.75rem 0 .6rem}
.service-photo-grid figure{margin:0;overflow:hidden;border-radius:var(--radius);border:1px solid var(--bone-faint);background:var(--surface)}
.service-photo-grid img{width:100%;aspect-ratio:1/1;object-fit:cover}
.service-photo-grid figcaption{padding:.75rem .9rem;color:var(--bone);font-family:var(--font-display);font-size:1.1rem}
.photo-disclaimer{margin:.35rem 0 1.5rem;color:var(--bone-dim);font-size:.84rem}
/* price rows (services page) */
.price-list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.9rem}
.price-list li{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;background:var(--surface);border:1px solid var(--bone-faint);border-radius:var(--radius);padding:1.05rem 1.2rem}
.price-list .p-name{font-family:var(--font-display);font-size:1.3rem}
.price-list .p-price{font-family:var(--font-display);font-size:1.7rem;color:var(--brass);grid-row:span 2;align-self:center}
.price-list .p-desc{color:var(--bone-dim);margin:0;font-size:.97rem;grid-column:1}
.flag{border:1px dashed var(--brass);border-radius:var(--radius);padding:1rem 1.2rem;background:rgba(86,61,0,.06);color:var(--bone-dim);margin-top:1.25rem}
.flag b{color:var(--brass)}
/* gallery */
.gallery{display:grid;gap:.8rem;grid-template-columns:repeat(4,1fr)}
.gallery figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--bone-faint);background:var(--surface)}
.gallery img{aspect-ratio:1/1;object-fit:cover;width:100%}
.gallery figcaption{font-size:.85rem;color:var(--bone-dim);padding:.55rem .8rem}
/* team */
.team-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(4,1fr)}
.team-card{background:var(--surface);border:1px solid var(--bone-faint);border-radius:var(--radius);overflow:hidden;text-align:center;transition:transform .18s var(--ease),border-color .18s var(--ease)}
.team-card:hover{transform:translateY(-3px);border-color:rgba(86,61,0,.45)}
.team-card img{aspect-ratio:1/1;object-fit:cover;width:100%}
.team-card .team-body{padding:1rem .8rem 1.2rem}
.team-card h3{margin:0 0 .15rem}
.team-card p{margin:0;color:var(--bone-dim);font-size:.92rem}
.quote{font-family:var(--font-display);font-size:clamp(1.2rem,2.4vw + .6rem,1.7rem);font-style:italic;color:var(--brass);max-width:34ch;margin:0 auto 2rem;text-align:center;line-height:1.4}
/* reviews: editorial, no card chrome — the quotes carry it */
.reviews{display:grid;gap:2rem;grid-template-columns:repeat(3,1fr);margin-top:1.5rem}
.review{border-top:2px solid var(--brass);padding-top:1.1rem}
.stars{display:flex;gap:.18rem;color:var(--brass);margin-bottom:.7rem}
.stars svg{width:17px;height:17px;fill:currentColor}
.review blockquote{margin:0;font-family:var(--font-display);font-size:1.18rem;line-height:1.5;font-style:italic}
.review cite{display:block;margin-top:.8rem;font-style:normal;font-weight:700;font-size:.92rem;font-family:var(--font-body)}
.review cite small{display:block;font-weight:400;color:var(--bone-dim)}
/* visit / hours */
.two-col{display:grid;gap:1.5rem;grid-template-columns:1fr 1fr;align-items:start}
.panel{background:var(--surface);border:1px solid var(--bone-faint);border-radius:var(--radius);padding:1.4rem}
.hours{width:100%;border-collapse:collapse;margin-top:.6rem}
.hours th,.hours td{text-align:left;padding:.55rem .4rem;border-bottom:1px solid var(--bone-faint);font-size:.98rem}
.hours td:last-child{text-align:right;color:var(--bone-dim)}
.hours tr.conflict td{background:rgba(166,61,47,.08)}
.notice{border:1px solid rgba(166,61,47,.55);background:rgba(166,61,47,.06);padding:.9rem 1.1rem;border-radius:12px;margin:1rem 0;color:var(--bone)}
.notice b{color:var(--red)}
/* book shell (home page) */
.steps{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);counter-reset:step}
.step{background:var(--surface);border:1px solid var(--bone-faint);border-radius:var(--radius);padding:1.3rem;position:relative;box-shadow:0 8px 22px rgba(43,33,20,.06)}
.step::before{counter-increment:step;content:"Step " counter(step);display:block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:.5rem}
/* invite band + footer */
.invite{background:var(--surface-2);border-block:1px solid var(--bone-faint);text-align:center}
.invite p{color:var(--bone-dim);max-width:52ch;margin:.5rem auto 0}
footer{background:#241C11;color:#EFE7D6;padding:2.5rem 0 calc(2.5rem + env(safe-area-inset-bottom))}
footer .foot-logo{height:64px;width:auto;margin-bottom:.8rem}
.foot-grid{display:grid;gap:1.5rem;grid-template-columns:1.3fr 1fr 1fr}
.foot-grid h3{font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:#C9A86A;font-family:var(--font-body)}
.foot-grid p,.foot-grid li{color:rgba(239,231,214,.78);font-size:.95rem}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.foot-grid a{color:rgba(239,231,214,.85)}
.copyright{margin-top:2rem;padding-top:1rem;border-top:1px solid rgba(239,231,214,.16);font-size:.85rem;color:rgba(239,231,214,.6);display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
/* sticky mobile bar */
.actionbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(36,28,17,.97);border-top:1px solid rgba(239,231,214,.16);padding:.55rem .8rem calc(.55rem + env(safe-area-inset-bottom));gap:.6rem}
.actionbar a{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-weight:700;text-decoration:none;font-size:.95rem}
.actionbar .a-book{background:var(--brass);color:var(--brass-ink)}
.actionbar .a-call,.actionbar .a-dir{border:1px solid rgba(239,231,214,.3);color:#EFE7D6}
/* breakpoints */
@media (max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .hero-photo img{aspect-ratio:16/9}
  .steps{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:1fr}
  .service-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.mobile-nav{display:none;position:relative}
.tel-note{font-size:.85rem;color:var(--bone-dim)}
@media (max-width:720px){
  .brand-logo{height:48px;max-width:150px}
  .site-nav{display:none}
  .mobile-nav{display:block;margin-left:auto}
  .mobile-nav summary{min-height:48px;display:flex;align-items:center;justify-content:center;min-width:88px;padding:.5rem 1.1rem;border:1px solid var(--bone-faint);border-radius:10px;font-weight:700;cursor:pointer;list-style:none}
  .mobile-nav summary::-webkit-details-marker{display:none}
  .mobile-nav summary:hover{border-color:var(--brass);color:var(--brass)}
  .mobile-nav[open] summary{border-color:var(--brass);color:var(--brass)}
  .mobile-nav-links{position:absolute;right:0;top:calc(100% + .5rem);min-width:230px;background:var(--surface);border:1px solid var(--bone-faint);border-radius:12px;padding:.4rem;box-shadow:0 18px 44px rgba(43,33,20,.2);z-index:70}
  .mobile-nav-links a{display:flex;align-items:center;min-height:48px;padding:.5rem .9rem;border-radius:8px;color:var(--bone);text-decoration:none;font-weight:600}
  .mobile-nav-links a:hover{background:rgba(86,61,0,.08);color:var(--brass)}
  .head-cta{margin-left:.5rem;padding-inline:.85rem;font-size:.9rem}
  .site-head .wrap{display:flex;gap:.5rem}
  .brand{font-size:1.05rem;gap:.4rem;flex:1 1 0;min-width:0}
  .mobile-nav{margin-left:auto;flex:0 0 auto}
  .mobile-nav summary{min-width:70px;padding-inline:.7rem}
  .head-cta{margin-left:0;flex:0 0 auto}
  .site-head .head-cta{width:auto}
  .actionbar{display:flex}
  body{padding-bottom:76px}
  footer{padding-bottom:calc(76px + 2rem + env(safe-area-inset-bottom))}
}
@media (max-width:560px){
  body{font-size:1rem}
  .head-cta{padding-inline:.6rem;font-size:.78rem;width:auto}
  .site-head .wrap{gap:.35rem}
  .mobile-nav summary{min-width:60px;padding-inline:.45rem}
  .cards{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;gap:.6rem}
  .team-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .btn{width:100%}
  .btn-row .btn{flex:1 1 100%}
  .text-links{gap:.3rem .9rem}
}
/* scroll reveals: one restrained system. Blocks rise; headings clear from a soft blur. */
html.js .rv{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
  transition-delay:var(--d,0s)}
html.js h2.rv{filter:blur(6px)}
html.js .rv.in{opacity:1;transform:none;filter:blur(0)}
.site-head{transition:box-shadow .3s ease}
.site-head.scrolled{box-shadow:0 10px 26px rgba(43,33,20,.14)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;filter:none;transition:none}
  html.js .hero h1{clip-path:none;transition:none}
  html.js .hero-copy > :not(h1){opacity:1;transform:none;transition:none}
  html.js .hero-photo{opacity:1;transform:none;filter:none;transition:none}
  body::before,.pole,.marquee-track{animation:none}
  .card:hover,.team-card:hover{transform:none}
  .btn-gold:hover{transform:none}
}

/* STAGE-ONLY: preview banner. Not part of the client deliverable. */
.stage-banner{background:#3E2E08;color:#F6EACB;border-bottom:2px solid var(--brass);font:700 .82rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;letter-spacing:.06em;text-align:center;padding:.55rem .9rem}
.stage-banner a{color:#F6EACB}