/* ── self-hosted webfonts (SIL Open Font License) ── */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/CormorantGaramond-300-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/CormorantGaramond-400-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/CormorantGaramond-500-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/CormorantGaramond-600-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/CormorantGaramond-400-italic.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/CormorantGaramond-500-italic.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/InstrumentSans-400-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/InstrumentSans-500-normal.woff2') format('woff2')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/InstrumentSans-600-normal.woff2') format('woff2')}

/* ============================================================
   Brows & Ink Co. — site styles
   Palette and type follow logo concept 01 "The Stroke".
   ============================================================ */

:root{
  /* colour — sampled from the official mark: ink #090807, bronze #4E4438,
     disc #F4F1EE. Everything else is mixed from those three. */
  --ink:#14110F;
  --ink-soft:#241F1B;
  --porcelain:#F1ECE5;
  --paper:#FAF8F5;
  --bronze:#6E6153;      /* accent on light grounds — passes AA at 12px */
  --bronze-deep:#4E4438;
  --bronze-lit:#C0AE99;  /* accent on dark grounds only */
  --muted:#6E665D;
  --line:#E2D9CE;
  --line-soft:#EDE6DC;

  /* type */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* rhythm */
  --gutter:clamp(20px,5vw,64px);
  --maxw:1280px;
  --sec-y:clamp(64px,7.4vw,110px);
  --nav-h:86px;

  /* motion — one easing vocabulary, used everywhere.
     Never ease-in: it delays the first frame, which is the frame
     the eye is actually watching. */
  --ease:cubic-bezier(.4,0,.2,1);            /* colour + hover */
  --ease-out:cubic-bezier(.23,1,.32,1);      /* entrances: instant out, long settle */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* things moving across the screen */
  --t-press:.16s;   /* press feedback */
  --t-fast:.18s;
  --t-med:.24s;     /* hover, colour */
  --t-slow:.42s;    /* accordions, nav, menu */
  --t-reveal:.72s;  /* scroll entrances */
  --t-line:.86s;    /* hero line lift */
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--nav-h) + 18px);  /* anchors clear the fixed nav */
  scrollbar-gutter:stable;                       /* opening an FAQ never shifts the page */
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol,dl{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--porcelain);padding:12px 18px;z-index:200;border-radius:0 0 4px 0}
.skip:focus{left:0;top:0}

:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:2px}
::selection{background:var(--bronze);color:var(--porcelain)}

/* ── type primitives ─────────────────────────────── */
.display{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(50px,8.6vw,126px);
  line-height:.94;
  letter-spacing:-.022em;
  font-optical-sizing:auto;
}
.display em{font-style:italic;font-weight:300}

/* Each line rides up out of its own clip. The padding/margin pair widens the
   clip box just enough to let descenders (p, y) through uncut. */
.display .ln{
  display:block;overflow:hidden;
  padding-bottom:.14em;margin-bottom:-.14em;
}
.display .ln > span{
  display:block;
  transform:translateY(120%);
  transition:transform var(--t-line) var(--ease-out);
}
.display.is-lit .ln > span{transform:none}
.display .ln:nth-child(2) > span{transition-delay:.075s}
.display .ln:nth-child(3) > span{transition-delay:.15s}

.h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(31px,4.2vw,56px);
  line-height:1.06;
  letter-spacing:-.016em;
  font-optical-sizing:auto;
}

.eyebrow{
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bronze);
  margin:0 0 20px;
}

.sec-head{max-width:58ch;margin-bottom:clamp(34px,4.2vw,58px)}
.sec-lede{margin-top:20px;color:var(--muted);font-size:17px;max-width:52ch}

/* ── buttons ─────────────────────────────────────────
   One element, four skins, driven by three custom props.
   Colour-only transitions: no lift, no bounce, no shadow. */
.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--porcelain);
  --btn-bd:var(--ink);

  display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;
  padding:0 30px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:999px;
  font-size:13.5px;font-weight:500;line-height:1;letter-spacing:.01em;
  white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    background-color var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease),
    color var(--t-med) var(--ease),
    transform var(--t-press) var(--ease-out);
}
/* touch devices fire :hover on tap and then keep it — gate it out */
@media (hover:hover) and (pointer:fine){
  .btn:hover{--btn-bg:var(--bronze);--btn-bd:var(--bronze)}
}
.btn:active{transform:scale(.97)}

.btn-sm{min-height:42px;padding:0 22px;font-size:12.5px}

.btn-ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--line)}
.btn-invert{--btn-bg:var(--porcelain);--btn-fg:var(--ink);--btn-bd:var(--porcelain)}
.btn-ghost-invert{--btn-bg:transparent;--btn-fg:var(--porcelain);--btn-bd:rgba(243,236,230,.34)}

@media (hover:hover) and (pointer:fine){
  .btn-ghost:hover{--btn-bg:var(--ink);--btn-fg:var(--porcelain);--btn-bd:var(--ink)}
  .btn-invert:hover{--btn-bg:var(--bronze-lit);--btn-fg:var(--ink);--btn-bd:var(--bronze-lit)}
  .btn-ghost-invert:hover{--btn-bg:var(--porcelain);--btn-fg:var(--ink);--btn-bd:var(--porcelain)}
}

/* icon sitting inside a button — travels a hair on hover, never on tap */
.btn-ico{width:15px;height:15px;margin-left:9px;margin-right:-4px;flex:none;
  transition:transform var(--t-med) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn:hover .btn-ico{transform:translateX(2px)}
}

@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* ── brand mark ──────────────────────────────────── */
.brand{display:inline-flex;align-items:center;gap:13px}
.brand-mark{height:36px;width:auto;flex:none}
.brand-word{
  font-family:var(--serif);font-size:21px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.brand-word em{font-style:italic;font-weight:500;letter-spacing:0}
.brand-co{font-size:.72em;letter-spacing:.14em}

/* ── nav ─────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:
    background-color var(--t-slow) var(--ease),
    border-color var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease-out);
}
.nav.is-stuck{
  background:rgba(250,247,244,.88);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line-soft);
}
@media (prefers-reduced-transparency:reduce){
  .nav.is-stuck{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}
}
/* retreat on scroll down, return on scroll up */
.nav.is-hidden{transform:translateY(-100%)}

.nav-inner{
  max-width:var(--maxw);margin-inline:auto;padding:18px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav-links{display:flex;gap:32px}
.nav-links a{
  font-size:13.5px;letter-spacing:.02em;color:var(--muted);
  position:relative;padding-block:4px;
  transition:color var(--t-med) var(--ease);
}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--t-med) var(--ease);
}
/* scroll-spy: the section you are actually looking at */
.nav-links a.is-active{color:var(--ink)}
.nav-links a.is-active::after{transform:scaleX(1);transform-origin:left}
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--ink)}
  .nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
}
.nav-actions{display:flex;align-items:center;gap:14px}

.nav-toggle{
  display:none;width:44px;height:44px;padding:0;
  background:transparent;border:1px solid var(--line);border-radius:50%;
  cursor:pointer;position:relative;
  transition:border-color var(--t-med) var(--ease),
             background-color var(--t-med) var(--ease),
             transform var(--t-press) var(--ease-out);
}
@media (hover:hover) and (pointer:fine){.nav-toggle:hover{border-color:var(--ink)}}
.nav-toggle:active{transform:scale(.94)}
.nav-toggle span{
  position:absolute;left:14px;width:16px;height:1px;background:var(--ink);
  transition:transform var(--t-med) var(--ease),opacity var(--t-fast) var(--ease);
}
.nav-toggle span:nth-child(1){top:20px}
.nav-toggle span:nth-child(2){top:24px}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(2px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){transform:translateY(-2px) rotate(-45deg)}

/* mobile menu: animated open/close, no display jump */
.mobile-menu{
  display:none;
  overflow:hidden;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:
    grid-template-rows var(--t-slow) var(--ease),
    opacity var(--t-med) var(--ease),
    border-color var(--t-slow) var(--ease);
}
.mobile-menu-inner{min-height:0;overflow:hidden}
.mobile-menu-pad{
  display:flex;flex-direction:column;gap:2px;
  padding:4px var(--gutter) 28px;
}
.mobile-menu a{font-family:var(--serif);font-size:26px;padding:9px 0}
.mobile-menu .btn{font-family:var(--sans);font-size:13.5px;align-self:flex-start;margin-top:14px}

/* ── plates (image placeholders) ─────────────────────
   A photograph is missing, so say so quietly: warm paper, one hairline
   inset, one tracked label. No fake gradient standing in for an image. */
.plate{
  position:relative;overflow:hidden;border-radius:2px;
  background:linear-gradient(166deg,#F5F1EB 0%,#EEE7DC 56%,#E6DCCE 100%);
  color:var(--ink);
  isolation:isolate;
}
.plate-alt{
  background:linear-gradient(166deg,#F0EAE2 0%,#E7DED2 54%,#DCD1C1 100%);
}
/* media fills the frame; the gradient underneath is the loading colour */
.plate > img,
.plate > video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  object-fit:cover;display:block;
}
/* an empty plate keeps the considered-frame treatment */
.plate:empty::before{
  content:'';position:absolute;inset:14px;z-index:2;pointer-events:none;
  border:1px solid rgba(78,68,56,.13);
}
.plate[data-swap]:empty::after{
  content:attr(data-swap);
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(78,68,56,.38);
}

/* ── hero ────────────────────────────────────────── */
.hero{position:relative;padding-top:clamp(132px,15vw,190px);padding-bottom:clamp(58px,7vw,96px)}
.hero-inner{position:relative;z-index:2}
.hero-sub{
  margin-top:30px;max-width:46ch;
  font-size:clamp(16px,1.5vw,18.5px);color:var(--muted);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}

.hero-plate{
  max-width:var(--maxw);margin:clamp(48px,7vw,92px) auto 0;
  padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,270px);
  gap:clamp(20px,3vw,44px);align-items:start;
}
.plate-hero{aspect-ratio:16/6.4;width:100%}
.hero-video{background:var(--porcelain)}
.hero-stat{border-top:1px solid var(--line);padding-top:18px}
.hero-stat strong{
  display:block;font-family:var(--serif);font-size:clamp(27px,2.9vw,36px);
  font-weight:500;line-height:1;letter-spacing:-.012em;margin-bottom:9px;
}
.hero-stat span{font-size:14px;color:var(--muted);display:block;max-width:26ch}

/* ── service rail ───────────────────────────────────
   Standing, not scrolling. Motion for its own sake reads as decoration;
   a set line of names reads as a menu. */
.rail{
  border-block:1px solid var(--line-soft);
  background:var(--porcelain);
  padding-block:clamp(17px,2.2vw,25px);
}
.rail-inner{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:clamp(12px,2vw,28px);
}
.rail span{
  font-family:var(--serif);font-size:clamp(18px,2vw,26px);
  letter-spacing:.005em;white-space:nowrap;
}
.rail i{color:var(--bronze);font-style:normal;font-size:12px;opacity:.75}

/* ── services ────────────────────────────────────── */
.svc-list{border-top:1px solid var(--line);max-width:980px}
.svc{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(16px,3vw,44px);
  align-items:baseline;              /* price sits on the title's baseline */
  padding-block:clamp(24px,2.8vw,34px);
  border-bottom:1px solid var(--line);
  transition:border-color var(--t-med) var(--ease);
}
.svc-body h3{
  font-family:var(--serif);font-size:clamp(24px,2.5vw,32px);line-height:1.1;
  letter-spacing:-.012em;margin-bottom:11px;
  transition:color var(--t-med) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .svc:hover{border-bottom-color:var(--ink)}
  .svc:hover .svc-body h3{color:var(--bronze)}
}
.svc-body p{color:var(--muted);max-width:52ch;font-size:15.5px}
.svc-meta{text-align:right;white-space:nowrap}
.svc-meta strong{
  display:block;font-family:var(--serif);font-size:clamp(20px,2.1vw,25px);
  font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.svc-meta span{
  display:block;margin-top:7px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

/* ── studio ──────────────────────────────────────── */
.studio{background:var(--porcelain)}
.studio-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:clamp(32px,6vw,90px);align-items:center;
}
.plate-portrait{aspect-ratio:4/5;width:100%}
.studio-copy p{color:var(--muted);margin-top:22px;max-width:48ch;font-size:16.5px}
.studio-copy .h2{margin-bottom:4px}
.facts{margin-top:40px;border-top:1px solid var(--line);display:grid;gap:0}
.facts > div{display:grid;grid-template-columns:minmax(120px,.42fr) 1fr;gap:20px;padding-block:16px;border-bottom:1px solid var(--line)}
.facts dt{font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.facts dd{margin:0;color:var(--muted);font-size:15px}

/* ── process ─────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.step{border-top:1px solid var(--ink);padding-top:22px}
.step-n{display:block;font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.18em;color:var(--bronze);margin-bottom:24px}
.step h3{font-family:var(--serif);font-size:clamp(24px,2.6vw,32px);margin-bottom:12px}
.step p{color:var(--muted);font-size:15px}

/* ── gallery ─────────────────────────────────────── */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,22px)}
.g{margin:0}
.g-media{overflow:hidden;border-radius:3px}
.g .plate{
  width:100%;height:clamp(250px,26vw,380px);
  transition:transform var(--t-reveal) var(--ease-out),filter var(--t-slow) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .g:hover .plate{transform:scale(1.035);filter:brightness(1.02) saturate(1.04)}
}
.g figcaption{
  margin-top:12px;font-size:12.5px;letter-spacing:.08em;color:var(--muted);
  transition:color var(--t-med) var(--ease);
}
@media (hover:hover) and (pointer:fine){.g:hover figcaption{color:var(--ink)}}
.g1{grid-column:span 7}
.g2{grid-column:span 5}
.g3{grid-column:span 5}
.g4{grid-column:span 7}

/* ── quotes ──────────────────────────────────────── */
.quotes{background:var(--porcelain)}
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)}
.quote-grid blockquote{
  margin:0;padding:32px 30px;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:3px;
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
}
.quote-grid p{font-family:var(--serif);font-size:clamp(19px,2vw,24px);line-height:1.35}
.quote-grid cite{font-style:normal;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ── faq — button accordion, animates both ways ──── */
.faq-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.faq-grid .sec-head{margin-bottom:0}
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 0;
  background:none;border:0;text-align:left;cursor:pointer;
  font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);line-height:1.25;
  transform-origin:left center;
  transition:color var(--t-med) var(--ease),transform var(--t-press) var(--ease-out);
}
.faq-q > span:first-child{display:flex;align-items:baseline;gap:16px;min-width:0}
.faq-n{
  font-family:var(--sans);font-size:11px;font-variant-numeric:tabular-nums;
  letter-spacing:.14em;color:var(--bronze);flex:none;
  transition:color var(--t-med) var(--ease);
}
.faq-item.is-open .faq-n{color:var(--bronze)}
@media (hover:hover) and (pointer:fine){.faq-q:hover{color:var(--bronze)}}
.faq-q:active{transform:scale(.995)}
.faq-icon{position:relative;width:14px;height:14px;flex:none}
.faq-icon::before,.faq-icon::after{
  content:'';position:absolute;background:currentColor;
  transition:transform var(--t-med) var(--ease),opacity var(--t-med) var(--ease);
}
.faq-icon::before{left:0;top:6.5px;width:14px;height:1px}
.faq-icon::after{left:6.5px;top:0;width:1px;height:14px}
.faq-item.is-open .faq-icon::after{transform:rotate(90deg);opacity:0}

.faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--t-slow) var(--ease);
}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a p{
  padding:0 40px 24px 0;color:var(--muted);max-width:60ch;font-size:15.5px;
  opacity:0;transition:opacity var(--t-med) var(--ease);
}
.faq-item.is-open .faq-a p{opacity:1;transition-delay:.1s}

/* ── book ────────────────────────────────────────── */
.book{background:var(--ink);color:var(--porcelain);text-align:center}
.book .eyebrow{color:var(--bronze-lit)}
.book-display{font-size:clamp(46px,8vw,116px)}
.book-sub{margin:clamp(28px,3vw,40px) auto 0;max-width:44ch;color:rgba(243,236,230,.66);font-size:16.5px}
.book .hero-cta{justify-content:center;margin-top:40px}

/* ── footer ──────────────────────────────────────── */
.footer{background:var(--ink);color:var(--porcelain);padding-top:clamp(48px,6vw,80px);padding-bottom:32px;border-top:1px solid rgba(243,236,230,.12)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.footer .brand-mark{height:48px}
.footer-brand .brand-word{display:block;margin-top:14px}
.footer-brand p{margin-top:14px;color:rgba(243,236,230,.58);font-size:14.5px;max-width:30ch}
.footer-col h3{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-lit);margin-bottom:16px;font-weight:500}
.footer-col a,.footer-col p{display:block;color:rgba(243,236,230,.72);font-size:14.5px;padding-block:5px;transition:color var(--t-med) var(--ease)}
.footer-col a{width:fit-content}
@media (hover:hover) and (pointer:fine){.footer-col a:hover{color:var(--porcelain)}}
.footer-hours{margin-top:10px}
.footer-col a.footer-social{display:inline-flex;align-items:center;gap:9px;margin-top:4px}
.footer-social svg{width:16px;height:16px;flex:none}

/* Instagram button in the booking block */
.btn .ig{width:16px;height:16px;margin-right:10px;margin-left:-4px;flex:none}
.footer-base{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  margin-top:clamp(40px,5vw,64px);padding-top:22px;
  border-top:1px solid rgba(243,236,230,.12);
  font-size:12.5px;color:rgba(243,236,230,.5);
}

/* ── reveal ──────────────────────────────────────── */
.reveal{
  opacity:0;
  transform:translate3d(0,14px,0);
  filter:blur(5px);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out),
    filter var(--t-reveal) var(--ease-out);
  transition-delay:calc(var(--d,0) * 60ms);
}
.reveal.in{opacity:1;transform:none;filter:blur(0)}
/* blurring a full-bleed gradient panel costs more than it is worth */
.reveal-flat{filter:none}
.reveal-flat.in{filter:none}

/* ── mobile booking dock ─────────────────────────────
   99% of visits are phones, so the booking action is always one thumb
   away. Hidden on the hero (the hero has its own CTA) and hidden again
   once the booking block or footer is on screen, so it never doubles up. */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(27,24,22,.86);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-top:1px solid rgba(243,236,230,.14);
  transform:translateY(130%);
  visibility:hidden;
  transition:transform var(--t-slow) var(--ease-out),visibility 0s var(--t-slow);
}
.dock.is-up{
  transform:none;visibility:visible;
  transition:transform var(--t-slow) var(--ease-out);
}
.dock-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;border-radius:999px;
  background:var(--porcelain);color:var(--ink);
  font-size:14.5px;font-weight:500;letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--ease-out);
}
.dock-btn:active{transform:scale(.97)}
.dock-btn svg{width:17px;height:17px;flex:none}
@media (prefers-reduced-transparency:reduce){
  .dock{background:var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ── responsive ──────────────────────────────────── */
@media (max-width:1024px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .mobile-menu{display:grid;grid-template-rows:0fr;opacity:0}
  .mobile-menu.is-open{grid-template-rows:1fr;opacity:1;border-bottom-color:var(--line-soft)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .quote-grid{grid-template-columns:1fr;max-width:640px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  :root{--nav-h:78px}
  .dock{display:block}
  /* the reveal blur is the most expensive thing on the page — ease it off on phones */
  .reveal{filter:blur(3px)}
  /* notch-safe horizontal padding everywhere the gutter is used */
  .wrap,.nav-inner,.hero-plate,.mobile-menu-pad{
    padding-left:max(var(--gutter),env(safe-area-inset-left,0px));
    padding-right:max(var(--gutter),env(safe-area-inset-right,0px));
  }
  .hero-plate{grid-template-columns:1fr}
  .hero-stat{padding-bottom:0}
  .plate-hero{aspect-ratio:4/3}
  .studio-grid{grid-template-columns:1fr}
  .plate-portrait{aspect-ratio:1/1}
  .faq-grid{grid-template-columns:1fr}
  .gallery > .g{grid-column:span 12}
  .g .plate{height:auto;aspect-ratio:4/3}
  /* comfortable thumb targets */
  .footer-col a{padding-block:9px}
  .mobile-menu a{padding:12px 0}
  .mobile-menu-pad{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
  .faq-q{padding:24px 0}
}
@media (max-width:560px){
  .svc{grid-template-columns:minmax(0,1fr);row-gap:14px}
  /* the booking block already ends in a CTA; give the dock room to clear it */
  .book .hero-cta .btn{flex:1 1 100%}
  .svc-meta{text-align:left;display:flex;align-items:baseline;gap:14px}
  .svc-meta span{margin-top:0}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .facts > div{grid-template-columns:1fr;gap:4px}
  .hero-cta .btn{flex:1 1 auto}
  .nav-actions .btn{display:none}
  .brand-word{font-size:18px}
  .brand-mark{height:31px}
}

/* ── motion off ──────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;filter:none}
  .display .ln > span{transform:none}
  .faq-a{grid-template-rows:1fr}
  .faq-a p{opacity:1}
  .btn:active,.nav-toggle:active,.faq-q:active{transform:none}
}
.no-js .reveal{opacity:1;transform:none;filter:none}
.no-js .display .ln > span{transform:none}
.no-js .faq-a{grid-template-rows:1fr}
.no-js .faq-a p{opacity:1}