/* Self-hosted variable fonts. No third-party requests. */
@font-face{
  font-family:'Oswald'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Oswald'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/oswald-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Javi Hair Studio
   Three grounds (paper, stone, ink) alternating down the page, one amber
   accent shared between them. Every component reads the local ground's
   tokens (--bg/--fg/--mute/--rule/--acc/--card), so the same markup works
   on light and dark without a single override.
   ========================================================================== */

:root{
  /* dark ground */
  --ink:#15120E;
  --ink-2:#201C16;
  --ink-3:#2C261E;
  --ink-rule:rgba(247,242,234,.14);
  --on-ink:#F7F2EA;
  --on-ink-mute:#AFA69A;

  /* light grounds */
  --paper:#FBF8F3;
  --stone:#EDE5D8;
  --stone-2:#E1D6C4;
  --paper-rule:rgba(43,36,29,.16);
  --on-paper:#2B241D;
  --on-paper-mute:#6A5C4E;

  /* accent: two values so it stays legible on both grounds */
  --amber:#E9761F;        /* fills, and text on dark */
  --amber-ink:#A0480C;    /* amber as text on light */

  --shell:1240px;
  --gut:clamp(20px,5vw,56px);
  --sec:clamp(58px,8vw,110px);
  --r:2px;

  --disp:"Oswald",'Helvetica Neue',Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* ---------- the three grounds ---------- */
.g-paper{
  --bg:var(--paper); --fg:var(--on-paper); --mute:var(--on-paper-mute);
  --rule:var(--paper-rule); --acc:var(--amber-ink); --card:#FFFFFF;
  --card-rule:rgba(43,36,29,.12); --btn-fill:var(--amber-ink); --on-btn:#FFF9F3;
}
.g-stone{
  --bg:var(--stone); --fg:var(--on-paper); --mute:var(--on-paper-mute);
  --rule:rgba(43,36,29,.20); --acc:var(--amber-ink); --card:var(--paper);
  --card-rule:rgba(43,36,29,.14); --btn-fill:var(--amber-ink); --on-btn:#FFF9F3;
}
.g-ink{
  --bg:var(--ink); --fg:var(--on-ink); --mute:var(--on-ink-mute);
  --rule:var(--ink-rule); --acc:var(--amber); --card:var(--ink-2);
  --card-rule:rgba(247,242,234,.12); --btn-fill:var(--amber); --on-btn:#1A1209;
}
.g-paper,.g-stone,.g-ink{background:var(--bg); color:var(--fg)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--on-paper);
  font-family:var(--body); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}

/* ---------- layout ---------- */
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.section--tight{padding-block:clamp(44px,5.5vw,72px)}

/* ---------- type ---------- */
.kicker{
  font-family:var(--disp); font-weight:500; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--acc);
  display:flex; align-items:center; gap:12px; margin:0 0 16px;
}
.kicker::after{content:""; flex:1; height:1px; background:var(--rule); max-width:110px}
.kicker--plain::after{display:none}

h1,h2,h3,h4{font-family:var(--disp); font-weight:700; text-transform:uppercase;
  line-height:1.03; letter-spacing:.005em; margin:0; color:var(--fg)}
h1{font-size:clamp(2.5rem,7vw,5rem)}
h2{font-size:clamp(1.9rem,4.3vw,3.1rem)}
h3{font-size:clamp(1.1rem,1.9vw,1.42rem); line-height:1.16}
h4{font-size:1rem; letter-spacing:.06em}
.amber{color:var(--acc)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.lead{color:var(--mute); font-size:clamp(.95rem,1.35vw,1.05rem); max-width:56ch}
h1+.lead,h2+.lead,h3+.lead{margin-top:18px}
.small{font-size:.86rem; color:var(--mute)}

.sec-head{display:grid; grid-template-columns:minmax(0,1fr); gap:18px;
  align-items:end; margin-bottom:clamp(30px,4.5vw,52px)}
@media(min-width:900px){
  .sec-head{grid-template-columns:1.1fr .9fr; gap:48px}
  .sec-head .lead{justify-self:end}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  padding:15px 24px; border:1px solid var(--fg); background:transparent; color:var(--fg);
  font-family:var(--disp); font-weight:600; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer; border-radius:var(--r);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn svg{width:15px; height:15px; flex:none; transition:transform .25s ease}
.btn:hover{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn:hover svg{transform:translateX(3px)}
.btn:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
.btn--solid{background:var(--btn-fill); color:var(--on-btn); border-color:var(--btn-fill)}
.btn--solid:hover{background:transparent; color:var(--btn-fill); border-color:var(--btn-fill)}
.btn--solid:hover svg{transform:translateX(3px)}
.btn--sm{padding:11px 18px; font-size:.7rem}

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60;
  --hdr-fg:#F7F2EA; --hdr-rule:rgba(247,242,234,.24);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
/* The bar is its own light surface so the nav never sits directly on the hero photo. */
.hdr.is-stuck,.hdr.is-solid{
  --hdr-fg:var(--on-paper); --hdr-rule:rgba(43,36,29,.20);
  background:var(--paper); border-bottom-color:var(--paper-rule);
  box-shadow:0 6px 22px rgba(43,36,29,.06);
}
.hdr__in{display:flex; align-items:center; gap:24px; height:78px; color:var(--hdr-fg)}
@media(min-width:1024px){.hdr__in{height:84px}}

.brand{display:flex; align-items:center; gap:11px; flex:none; color:var(--hdr-fg)}
.brand__mark{width:37px; height:37px; flex:none}
.brand__name{font-family:var(--disp); font-weight:700; font-size:1.16rem;
  letter-spacing:.11em; text-transform:uppercase; line-height:1}
.brand__name small{display:block; font-size:.58rem; letter-spacing:.26em; color:var(--amber);
  font-weight:500; margin-top:5px}
.hdr.is-stuck .brand__name small,.hdr.is-solid .brand__name small{color:var(--amber-ink)}

.nav{display:none; margin-inline:auto}
@media(min-width:1024px){.nav{display:flex; gap:clamp(16px,2.2vw,32px)}}
.nav a{
  font-family:var(--disp); font-weight:500; font-size:.76rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--hdr-fg); opacity:.82; position:relative; padding-block:6px;
  transition:opacity .2s ease;
}
.hdr.is-solid .nav a,.hdr.is-stuck .nav a{opacity:.9}
.hdr.is-solid .nav a:hover,.hdr.is-stuck .nav a:hover,
.hdr.is-solid .nav a[aria-current="page"],.hdr.is-stuck .nav a[aria-current="page"]{opacity:1}
.nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .28s ease}
.hdr.is-stuck .nav a::after,.hdr.is-solid .nav a::after{background:var(--amber-ink)}
.nav a:hover{opacity:1}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{opacity:1}

.hdr__cta{display:none; margin-left:auto}
@media(min-width:1024px){.hdr__cta{display:inline-flex}}
.hdr__phone{
  display:inline-flex; align-items:center; gap:10px; padding:11px 18px;
  border:1px solid var(--hdr-rule); border-radius:100px; color:var(--hdr-fg);
  font-family:var(--disp); font-weight:600; font-size:.78rem; letter-spacing:.08em;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.hdr__phone svg{width:15px;height:15px;color:var(--amber);flex:none;transition:color .25s}
.hdr.is-stuck .hdr__phone svg,.hdr.is-solid .hdr__phone svg{color:var(--amber-ink)}
.hdr__phone:hover{background:var(--amber); border-color:var(--amber); color:#1A1209}
.hdr__phone:hover svg{color:#1A1209}

.burger{margin-left:auto; display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 10px; background:none; border:1px solid var(--hdr-rule);
  border-radius:var(--r); cursor:pointer}
@media(min-width:1024px){.burger{display:none}}
.burger span{display:block; height:1.5px; background:var(--hdr-fg); transition:transform .3s ease,opacity .2s ease}
.burger span:nth-child(2){width:70%}
body.nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
body.nav-open .hdr{--hdr-fg:var(--on-paper); --hdr-rule:rgba(43,36,29,.18)}

/* mobile drawer on paper, so opening the menu never plunges into black */
.drawer{
  position:fixed; inset:0; z-index:55; background:var(--paper); color:var(--on-paper);
  padding:96px var(--gut) 36px; display:flex; flex-direction:column; gap:4px;
  transform:translateY(-100%); opacity:0; visibility:hidden;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .3s ease,visibility .42s;
  overflow-y:auto;
}
body.nav-open .drawer{transform:translateY(0); opacity:1; visibility:visible}
@media(min-width:1024px){.drawer{display:none}}
.drawer a.drawer__link{font-family:var(--disp); font-weight:600; font-size:1.6rem;
  text-transform:uppercase; letter-spacing:.04em; padding:13px 0;
  border-bottom:1px solid var(--paper-rule)}
.drawer a.drawer__link[aria-current="page"]{color:var(--amber-ink)}
.drawer__foot{margin-top:auto; padding-top:28px; display:grid; gap:12px;
  --bg:var(--paper); --fg:var(--on-paper); --btn-fill:var(--amber-ink); --on-btn:#FFF9F3; --acc:var(--amber-ink)}
.drawer__foot .btn{justify-content:center}
body.nav-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative; min-height:clamp(560px,88svh,830px); display:grid; isolation:isolate;
  /* reserves room under the fixed header so the kicker can never ride up into it
     on a short viewport. The content itself stays bottom-anchored. */
  padding-top:clamp(118px,15vh,164px);
  color:var(--on-ink);
  --fg:var(--on-ink); --mute:#D6CDC0; --rule:var(--ink-rule); --acc:var(--amber);
  --bg:var(--ink); --btn-fill:var(--amber); --on-btn:#1A1209}
.hero__media{position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--ink)}
.hero__media img{width:100%; height:100%; object-fit:cover; object-position:center 38%;
  filter:brightness(.68) saturate(.9) contrast(1.05)}
.hero__media::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(21,18,14,.58) 0%,rgba(21,18,14,.14) 34%,rgba(21,18,14,.48) 76%,rgba(21,18,14,.92) 100%),
    linear-gradient(90deg,rgba(21,18,14,.80) 0%,rgba(21,18,14,.32) 46%,rgba(21,18,14,0) 88%)}
.hero__in{align-self:end; width:100%; max-width:var(--shell); margin-inline:auto;
  padding:0 var(--gut) clamp(34px,4.4vw,54px)}
.hero h1{max-width:16ch; margin-bottom:20px; text-shadow:0 4px 40px rgba(0,0,0,.45)}
.hero .kicker{color:#F0E8DC; opacity:.9}
.hero .kicker::after{max-width:70px}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:4px}
.hero__scroll{position:absolute; right:calc(var(--gut) - 6px); bottom:clamp(34px,4.4vw,54px); z-index:2;
  display:none; writing-mode:vertical-rl; font-family:var(--disp); font-size:.66rem;
  letter-spacing:.34em; text-transform:uppercase; color:rgba(247,242,234,.62)}
@media(min-width:1024px){.hero__scroll{display:flex; align-items:center; gap:14px}}
.hero__scroll::after{content:""; width:1px; height:60px; background:linear-gradient(var(--amber),transparent)}

/* photo banner on inner pages: shorter than the hero, same treatment */
.banner{position:relative; isolation:isolate; padding:clamp(120px,14vw,168px) 0 clamp(42px,5vw,66px);
  color:var(--on-ink);
  --fg:var(--on-ink); --mute:#D6CDC0; --rule:var(--ink-rule); --acc:var(--amber); --bg:var(--ink)}
.banner__media{position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--ink)}
.banner__media img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.66) saturate(.88) contrast(1.04)}
.banner__media::after{content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg,rgba(21,18,14,.66) 0%,rgba(21,18,14,.32) 44%,rgba(21,18,14,.88) 100%),
    linear-gradient(90deg,rgba(21,18,14,.74) 0%,rgba(21,18,14,.18) 62%,rgba(21,18,14,0) 100%)}
.banner h1{font-size:clamp(2.1rem,5.2vw,3.7rem); max-width:18ch}
.crumb{font-family:var(--disp); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mute); margin-top:16px}
.crumb a{display:inline-block; padding-block:4px}
.crumb a:hover{color:var(--acc)}

/* light page head, for pages with no photo (privacy, 404) */
.pagehead{padding:clamp(120px,14vw,164px) 0 clamp(30px,4vw,48px); border-bottom:1px solid var(--rule)}
.pagehead h1{font-size:clamp(2.1rem,5.2vw,3.5rem)}

/* ---------- info bar ---------- */
.infobar__grid{display:grid; gap:0}
@media(min-width:760px){.infobar__grid{grid-template-columns:repeat(3,1fr)}}
.infocard{padding:clamp(26px,3.4vw,38px) clamp(16px,3vw,30px); text-align:center;
  border-bottom:1px solid var(--rule)}
@media(min-width:760px){
  .infocard{border-bottom:0; border-right:1px solid var(--rule)}
  .infocard:last-child{border-right:0}
}
.infocard:last-child{border-bottom:0}
.infocard__ico{color:var(--acc); display:flex; justify-content:center; margin-bottom:12px}
.infocard__ico svg{width:22px;height:22px}
.infocard h3{font-size:.92rem; letter-spacing:.16em; margin-bottom:9px}
.infocard p{font-size:.93rem; color:var(--mute); line-height:1.62}
.infocard a.link{display:inline-flex; align-items:center; gap:7px; margin-top:11px; color:var(--acc);
  font-family:var(--disp); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  padding-block:3px}
.infocard a.link svg{width:12px;height:12px; transition:transform .25s}
.infocard a.link:hover svg{transform:translateX(4px)}

/* ---------- speciality cards ---------- */
.specs{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media(min-width:1000px){.specs{grid-template-columns:repeat(4,1fr)}}
.spec{position:relative; display:block; overflow:hidden; background:var(--card);
  aspect-ratio:3/4; border:1px solid var(--card-rule); border-radius:var(--r)}
.spec img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.04) brightness(.94);
  transition:filter .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.spec::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 46%,rgba(21,18,14,.62) 100%)}
.spec:hover img,.spec:focus-visible img{filter:grayscale(0) contrast(1) brightness(1); transform:scale(1.05)}
.spec__tag{position:absolute; left:11px; bottom:11px; right:11px; z-index:2;
  background:var(--paper); color:var(--on-paper); border:1px solid transparent;
  padding:11px 13px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  transition:background .3s ease,color .3s ease}
.spec__tag span{font-family:var(--disp); font-weight:600; font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; line-height:1.25}
.spec__tag svg{width:13px;height:13px;flex:none;color:var(--amber-ink); transition:transform .3s,color .3s}
.spec:hover .spec__tag{background:var(--amber); color:#1A1209}
.spec:hover .spec__tag svg{color:#1A1209; transform:translateX(3px)}
.center-cta{display:flex; justify-content:center; margin-top:clamp(28px,4vw,44px)}

/* ---------- split (image + text) ---------- */
.split{display:grid; gap:clamp(28px,5vw,60px); align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}
  .split--rev .split__media{order:2}}
.split__media{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--card-rule)}
.split__media img{width:100%; aspect-ratio:4/5; object-fit:cover}
.split__badge{position:absolute; right:0; bottom:0; background:var(--amber); color:#1A1209;
  padding:15px 20px; text-align:center; max-width:180px}
.split__badge strong{display:block; font-family:var(--disp); font-size:2rem; line-height:1}
.split__badge span{font-family:var(--disp); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase}

.ticks{list-style:none; margin:24px 0 28px; padding:0; display:grid; gap:11px}
.ticks li{display:flex; gap:12px; align-items:flex-start; color:var(--mute); font-size:.95rem}
.ticks svg{width:16px;height:16px;flex:none;color:var(--acc);margin-top:5px}

/* ---------- stats ---------- */
.stats{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); border-radius:var(--r); overflow:hidden}
.stat{background:var(--card); padding:clamp(24px,3.2vw,34px) 18px; text-align:center}
.stat strong{display:block; font-family:var(--disp); font-weight:700; font-size:clamp(1.9rem,3.8vw,2.7rem);
  line-height:1; color:var(--acc)}
.stat span{display:block; margin-top:9px; font-family:var(--disp); font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mute)}

/* ---------- price list ---------- */
.pricegrid{display:grid; gap:clamp(24px,4vw,52px)}
@media(min-width:860px){.pricegrid{grid-template-columns:1fr 1fr}}
.pricecol h3{font-size:1rem; letter-spacing:.16em; color:var(--acc);
  padding-bottom:13px; border-bottom:1px solid var(--rule); margin-bottom:4px}
.priceline{display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px dashed var(--rule)}
.priceline__name{font-size:.95rem; color:var(--fg)}
.priceline__name em{display:block; font-style:normal; font-size:.8rem; color:var(--mute); margin-top:3px}
.priceline__price{font-family:var(--disp); font-weight:600; font-size:1rem; letter-spacing:.03em;
  color:var(--fg); white-space:nowrap; font-variant-numeric:tabular-nums}
.pricenote{margin-top:20px; font-size:.83rem; color:var(--mute); line-height:1.62}

/* filter chips */
.chips{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:clamp(26px,4vw,40px)}
.chip{padding:9px 16px; border:1px solid var(--rule); background:transparent; border-radius:100px;
  font-family:var(--disp); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); cursor:pointer; transition:all .22s ease}
.chip:hover{color:var(--fg); border-color:var(--fg)}
.chip[aria-pressed="true"]{background:var(--btn-fill); border-color:var(--btn-fill); color:var(--on-btn)}

/* ---------- service cards ---------- */
.svcgrid{display:grid; gap:14px}
@media(min-width:720px){.svcgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.svcgrid{grid-template-columns:repeat(3,1fr)}}
.svc{background:var(--card); border:1px solid var(--card-rule); border-radius:var(--r);
  padding:clamp(22px,3vw,30px); display:flex; flex-direction:column; gap:13px;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.svc:hover{border-color:var(--acc); transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(43,36,29,.10)}
.g-ink .svc:hover{box-shadow:0 14px 34px rgba(0,0,0,.4)}
.svc__no{font-family:var(--disp); font-size:.7rem; letter-spacing:.2em; color:var(--acc)}
.svc h3{font-size:1.18rem}
.svc p{color:var(--mute); font-size:.92rem; margin:0}
.svc ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px}
.svc ul li{font-size:.74rem; padding:5px 11px; border:1px solid var(--rule); border-radius:100px;
  color:var(--mute)}
.svc__from{margin-top:auto; padding-top:13px; border-top:1px solid var(--rule);
  font-family:var(--disp); font-size:.78rem; letter-spacing:.1em; color:var(--fg)}
.svc__from b{color:var(--acc)}

/* ---------- gallery ---------- */
.gal{display:grid; gap:12px; grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gal{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.gal{grid-template-columns:repeat(4,1fr)}}
.gal figure{margin:0; overflow:hidden; border-radius:var(--r); background:var(--card);
  border:1px solid var(--card-rule); aspect-ratio:4/5}
.gal img{width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1)}
.gal figure:hover img{transform:scale(1.06)}

/* ---------- reviews ---------- */
.rating{display:grid; gap:clamp(24px,4vw,44px); align-items:center;
  background:var(--card); border:1px solid var(--card-rule); border-radius:var(--r);
  padding:clamp(26px,4vw,46px)}
@media(min-width:860px){.rating{grid-template-columns:auto 1px 1fr}}
/* text-led variant: the first column holds a heading, so give it real width */
@media(min-width:860px){.rating--split{grid-template-columns:1fr 1px 1.15fr}}
.rating__score{text-align:center}
.rating__score strong{font-family:var(--disp); font-weight:700; font-size:clamp(2.8rem,6.5vw,4.2rem);
  line-height:1; color:var(--fg)}
.rating__stars{color:var(--amber-ink); letter-spacing:.16em; font-size:1.05rem; margin-top:6px}
.g-ink .rating__stars{color:var(--amber)}
.rating__score span{display:block; margin-top:9px; font-size:.8rem; color:var(--mute)}
.rating__rule{background:var(--rule); display:none}
@media(min-width:860px){.rating__rule{display:block; align-self:stretch}}
.tags{display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; padding:0}
.tags li{list-style:none; font-family:var(--disp); font-size:.72rem; letter-spacing:.09em;
  text-transform:uppercase; padding:8px 14px; border:1px solid var(--rule);
  border-radius:100px; color:var(--fg)}
.tags li::before{content:"✓"; color:var(--acc); margin-right:8px}

/* ---------- CTA band ---------- */
.band{position:relative; isolation:isolate; padding-block:clamp(58px,8vw,110px); text-align:center;
  color:var(--on-ink);
  --fg:var(--on-ink); --mute:#D6CDC0; --rule:var(--ink-rule); --acc:var(--amber);
  --bg:var(--ink); --btn-fill:var(--amber); --on-btn:#1A1209}
.band__media{position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--ink)}
.band__media img{width:100%;height:100%;object-fit:cover; filter:brightness(.62) saturate(.85)}
.band__media::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(21,18,14,.74),rgba(21,18,14,.62) 50%,rgba(21,18,14,.80))}
.band h2{max-width:20ch; margin-inline:auto}
.band .lead{margin:18px auto 28px; text-align:center}
.band__actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}

/* ---------- contact ---------- */
.contact{display:grid; gap:clamp(30px,5vw,56px)}
@media(min-width:960px){.contact{grid-template-columns:1fr 1fr}}
.field{display:grid; gap:8px; margin-bottom:16px}
.field label{font-family:var(--disp); font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute)}
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; background:var(--card); color:var(--fg);
  border:1px solid var(--rule); border-radius:var(--r); font:inherit;
  /* 16px exactly. Anything smaller makes iOS Safari zoom the page on focus. */
  font-size:16px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field textarea{min-height:132px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(233,118,31,.18)}
.field select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A0480C' 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:16px; padding-right:42px}
.formnote{font-size:.82rem; color:var(--mute); margin-top:14px; line-height:1.6}

.detail{display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--rule)}
.detail:last-of-type{border-bottom:0}
.detail__ico{width:40px;height:40px;flex:none; display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:50%; color:var(--acc)}
.detail__ico svg{width:17px;height:17px}
.detail h3{font-size:.84rem; letter-spacing:.16em; margin-bottom:6px}
.detail p{font-size:.94rem; color:var(--mute); margin:0}
.detail a{display:inline-block; padding-block:3px}
.detail a:hover{color:var(--acc)}

.hours{list-style:none; margin:0; padding:0}
.hours li{display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px dashed var(--rule); font-size:.93rem}
.hours li:last-child{border-bottom:0}
.hours li span:first-child{color:var(--mute)}
.hours li.is-today span{color:var(--acc); font-weight:600}

.mapwrap{border:1px solid var(--card-rule); border-radius:var(--r); overflow:hidden; background:var(--card)}
.mapwrap iframe{display:block; width:100%; height:clamp(300px,42vw,440px); border:0;
  filter:grayscale(.28) contrast(1.02)}

/* ---------- footer ---------- */
.ftr{padding-top:clamp(48px,6.5vw,78px)}
.ftr__grid{display:grid; gap:clamp(30px,4vw,46px)}
@media(min-width:760px){.ftr__grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:1100px){.ftr__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.ftr h4{font-size:.78rem; letter-spacing:.2em; color:var(--acc); margin-bottom:16px}
.ftr__links{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.ftr__links a{display:inline-block; padding-block:4px; font-size:.92rem; color:var(--mute);
  transition:color .2s ease}
.ftr__links a:hover{color:var(--acc)}
.ftr p{color:var(--mute); font-size:.92rem}
.socials{display:flex; gap:10px; margin-top:18px}
.socials a{width:40px;height:40px; min-width:40px; min-height:40px; display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:50%; color:var(--fg); transition:all .25s ease}
.socials a svg{width:16px;height:16px}
.socials a:hover{background:var(--amber); border-color:var(--amber); color:#1A1209}
.ftr__bar{margin-top:clamp(36px,4.5vw,54px); padding-block:22px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.8rem; color:var(--mute)}
.ftr__bar a{display:inline-block; padding-block:4px}
.ftr__bar a:hover{color:var(--acc)}

/* sticky mobile call bar */
.callbar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:grid;
  grid-template-columns:1fr 1fr; gap:1px; background:rgba(43,36,29,.2);
  border-top:1px solid rgba(43,36,29,.2);
  transform:translateY(110%); transition:transform .35s cubic-bezier(.16,1,.3,1)}
.callbar.is-on{transform:translateY(0)}
@media(min-width:1024px){.callbar{display:none}}
.callbar a{background:var(--paper); color:var(--on-paper); padding:15px 10px; text-align:center;
  font-family:var(--disp); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:9px}
.callbar a svg{width:15px;height:15px;color:var(--amber-ink)}
.callbar a.is-primary{background:var(--amber-ink); color:#FFF9F3}
.callbar a.is-primary svg{color:#FFF9F3}
@media(max-width:1023px){body.has-callbar{padding-bottom:54px}}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(20px); transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* skip link */
.only-sm{display:none}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--amber-ink); color:#FFF9F3;
  padding:12px 18px; font-family:var(--disp); letter-spacing:.14em; text-transform:uppercase; font-size:.78rem}
.skip:focus{left:12px; top:12px}

/* ---------- small-screen fit-ups ---------- */
@media(max-width:480px){
  .hero .kicker{font-size:.62rem; letter-spacing:.13em}
  .banner .kicker{font-size:.66rem; letter-spacing:.15em}
  .btn{padding:14px 20px; font-size:.74rem}
}


/* --------------------------------------------------------------------------
   Hero on phones and tablets (below 900px)
   The block is centred in the space below the header, so the margin above and
   below it is even. On a modern phone that lands at roughly 20% / 20%.
   -------------------------------------------------------------------------- */
@media(max-width:899px){
  .hero{min-height:clamp(460px,68svh,560px); padding-top:78px}
  .hero__in{align-self:center; padding-bottom:0}
  .hero h1{margin-bottom:16px}
  .hero .lead{line-height:1.55; margin-bottom:22px !important}
  .hero__actions{gap:10px}
  .hero__actions .btn{flex:1 1 100%; justify-content:center}
}
/* Once both buttons fit on one row, use it. A stacked pair costs ~58px of
   height, the difference between a cramped margin and an even one. */
@media(min-width:356px) and (max-width:899px){
  .hero__actions .btn{flex:0 1 auto}
}

/* ==========================================================================
   Phone layout (below 760px)
   Same markup as desktop, only the rules below change. Keeping one codebase
   instead of a separate mobile site means every future edit happens once.
   ========================================================================== */
@media(max-width:759px){

  /* Info bar: all three across one line, cut down to what actually fits. */
  .infobar__grid{grid-template-columns:repeat(3,1fr)}
  .infocard{padding:22px 7px; border-bottom:0; border-right:1px solid var(--rule)}
  .infocard:last-child{border-right:0}
  .infocard__ico{margin-bottom:7px}
  .infocard__ico svg{width:17px; height:17px}
  .infocard h3{font-size:.64rem; letter-spacing:.08em; margin-bottom:5px}
  .infocard p{font-size:.75rem; line-height:1.45}
  .infocard a.link{display:none}      /* the whole bar is backed by the sticky call bar */
  .hide-sm{display:none}
  .only-sm{display:inline}
}


/* Small phones: shrink the hero type so the block clears the header comfortably. */
@media(max-width:430px){
  .hero h1{font-size:2.4rem; margin-bottom:16px}
  .hero .lead{font-size:.95rem}
  .hero .kicker{margin-bottom:13px}
  .hero__actions .btn{padding:14px 16px; font-size:.72rem}
}
@media(max-width:340px){
  .hero h1{font-size:2.1rem}
  .brand__name{font-size:1.04rem}
  .brand__mark{width:33px; height:33px}
}