/* ==========================================================================
   Sample Studios Art & Antiques — site.css
   Palette = the brand hexes: #484860 slate, #90a8c0 mist, #301818 oxblood.
   Neutrals: warm paper + kraft tag stock. Type: Gambarino (display),
   Libre Franklin (body), Courier Prime (typewriter hang-tags / labels).
   Native scroll only. Motion = CSS + one IntersectionObserver.
   ========================================================================== */

@font-face { font-family: "Gambarino"; src: url("/fonts/gambarino-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/fonts/libre-franklin-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/courier-prime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/courier-prime-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* brand (from the logo palette) */
  --slate: #484860;
  --mist: #90a8c0;
  --ox: #301818;
  /* derived tints / shades of the brand */
  --slate-d: #3a3a4f;
  --slate-l: #5d5d78;
  --mist-l: #b7c8d8;
  --mist-xl: #d6e0ea;
  --ox-d: #231111;
  --ox-l: #4a2a28;
  /* neutrals */
  --paper: #f4f1ec;
  --paper-2: #ebe6dd;
  --paper-3: #e2dbcf;
  --kraft: #e6d9c2;
  --kraft-d: #cdbb9c;
  --ink: #301818;
  --text: #33282a;
  --mute: #5f5452;
  --line: rgba(48, 24, 24, .16);
  --line-l: rgba(255, 255, 255, .18);
  --white: #fff;
  --fog: #e6e3ea;
  /* type */
  --f-d: "Gambarino", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-b: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --f-t: "Courier Prime", "Courier New", monospace;
  /* layout */
  --max: 1240px;
  --gut: max(clamp(18px, 5vw, 40px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --edge: max(var(--gut), calc((var(--vw, 100vw) - var(--max)) / 2));
  --hdr-h: 64px;
  --r: 4px;
  --sec: clamp(64px, 10vw, 128px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 960px) { :root { --hdr-h: 78px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); color-scheme: light; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--f-b); font-size: 1.0625rem; line-height: 1.62; font-weight: 400; overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
:where(ul, ol)[role="list"] { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(a, button, span, p, li, summary) > svg:where(:not([width])) { width: 1.15em; height: 1.15em; }
:focus-visible { outline: 3px solid var(--mist); outline-offset: 3px; }
.t-paper :focus-visible, .t-paper2 :focus-visible, .ftr-paper :focus-visible { outline-color: var(--slate); }
::selection { background: var(--mist); color: var(--ox); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--ox); color: #fff; padding: 12px 18px; border-radius: var(--r); text-decoration: none; font-weight: 600; transition: top .2s; }
.skip:focus { top: 12px; }
.tel { white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.sec { padding-block: var(--sec); position: relative; }
.sec-tight { padding-block: clamp(48px, 7vw, 88px); }
.t-paper { background: var(--paper); }
.t-paper2 { background: var(--paper-2); }
.t-ox { background: var(--ox); color: var(--fog); }
.t-slate { background: var(--slate); color: #eef0f5; }
.t-ox .dh, .t-slate .dh { color: #fff; }

/* ---------- type ---------- */
.dh { font-family: var(--f-d); font-weight: 400; font-size: clamp(2.15rem, 1.2rem + 4.4vw, 4.1rem); line-height: 1.02; letter-spacing: -.012em; color: var(--ink); font-synthesis: none; text-wrap: balance; }
.dh-sm { font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem); line-height: 1.06; }
.dh-xs { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem); line-height: 1.1; }
.ac { color: var(--slate); }
.t-ox .ac, .t-slate .ac, .on-photo .ac { color: var(--mist); }
.t-slate .ac { color: var(--mist-xl); }
.lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.25rem); line-height: 1.55; color: var(--mute); max-width: 58ch; }
.t-ox .lede, .t-slate .lede { color: #d9d4dc; }
.prose { max-width: 64ch; }
.prose .para + .para { margin-top: 1.05em; }
.prose .para p + p { margin-top: .55em; }
.prose a { color: var(--slate); font-weight: 600; }
.t-ox .prose a, .t-slate .prose a { color: var(--mist-l); }
.prose a.btn { color: inherit; }
.t-ox .prose p, .t-slate .prose p { color: #ddd8de; }
@media (min-width: 960px) {
  .prose .para p { display: inline; }
  .prose .para p + p { margin-top: 0; }
  .prose .para p + p::before { content: " "; }
}
.fine { font-size: .875rem; color: var(--mute); }
.t-ox .fine, .t-slate .fine { color: #c9c3cc; }

/* typewriter hang-tag kicker — the shop's price-tag stock, minus the prices */
.kick { display: inline-flex; align-items: center; gap: .55em; width: fit-content; max-width: 100%; flex-wrap: wrap; font-family: var(--f-t); font-weight: 700; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ox); background: var(--kraft); padding: .42em .9em .42em 1.9em; margin-bottom: 18px; position: relative; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); line-height: 1.3; }
.kick::before { content: ""; position: absolute; left: .78em; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--kraft-d); }
.t-paper2 .kick::before { background: var(--paper-2); }
.t-ox .kick::before { background: var(--ox); box-shadow: none; }
.t-slate .kick::before { background: var(--slate); box-shadow: none; }
.kick.k-photo::before { background: rgba(0, 0, 0, .55); box-shadow: none; }
.kick i { font-style: normal; opacity: .55; }
.kick-plain { font-family: var(--f-t); font-weight: 700; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.t-ox .kick-plain, .t-slate .kick-plain { color: var(--mist-l); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: .8em 1.35em; border-radius: var(--r); border: 1.5px solid transparent; font-family: var(--f-b); font-weight: 650; font-size: 1rem; line-height: 1.15; text-decoration: none; letter-spacing: .005em; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); touch-action: manipulation; }
.btn:active { transform: translateY(1px); }
.btn-slate { background: var(--slate); color: #fff; }
.btn-slate:hover { background: var(--slate-d); }
.btn-mist { background: var(--mist); color: var(--ox); }
.btn-mist:hover { background: var(--mist-l); }
.btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.btn-line { background: transparent; color: var(--ox); border-color: rgba(48, 24, 24, .45); }
.btn-line:hover { border-color: var(--ox); background: rgba(48, 24, 24, .04); }
.btn-wide { width: 100%; }
.cta-pair { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-pair .btn { flex: 1 1 220px; }
@media (min-width: 600px) { .cta-pair .btn { flex: 0 0 auto; } }
.link-arrow { display: inline-flex; align-items: center; gap: .45em; font-weight: 650; color: var(--slate); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.link-arrow svg { transition: transform .2s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.t-ox .link-arrow, .t-slate .link-arrow, .on-photo .link-arrow { color: var(--mist-l); }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; height: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); color: #fff; transition: background-color .3s var(--ease), transform .35s var(--ease), box-shadow .3s; }
.hdr.solid, body:not(.pg-home) .hdr { background: rgba(48, 24, 24, .97); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.hdr.hide { transform: translateY(-102%); }
.hdr.hide:focus-within { transform: none; }
.hdr-row { height: var(--hdr-h); display: flex; align-items: center; gap: 14px; width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.brand { display: inline-flex; flex-direction: column; justify-content: center; text-decoration: none; color: #fff; line-height: 1; min-width: 0; margin-right: auto; }
.brand-name { font-family: var(--f-d); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.75rem); letter-spacing: .005em; white-space: nowrap; }
.brand-sub { font-family: var(--f-t); font-weight: 700; font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist-l); margin-top: 5px; white-space: nowrap; }
.nav { display: none; }
.nav ul { display: flex; gap: clamp(14px, 1.8vw, 28px); }
.nav a { color: #f1edf0; text-decoration: none; font-weight: 550; font-size: .97rem; padding: 6px 0; border-bottom: 1.5px solid transparent; transition: border-color .2s, color .2s; }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--mist); color: #fff; }
.hdr-call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: var(--r); background: var(--mist); color: var(--ox); text-decoration: none; font-weight: 700; font-size: .95rem; flex: none; }
.hdr-call:hover { background: var(--mist-l); }
.hdr-call-txt { display: none; white-space: nowrap; }
@media (min-width: 560px) { .hdr-call-txt { display: inline; } .hdr-call { padding: 0 16px; } }
.burger { flex: none; width: 46px; height: 46px; display: inline-grid; place-content: center; gap: 5px; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: var(--r); background: transparent; }
.burger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1100px) { .nav { display: block; } .burger { display: none; } .brand { margin-right: 0; } .nav { margin-left: auto; margin-right: 8px; } }

.drawer { position: fixed; inset: 0; z-index: 55; background: var(--ox); color: #fff; padding: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 18px) var(--gut) calc(28px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
.drawer.open { opacity: 1; visibility: visible; transition: opacity .25s var(--ease); }
.drawer-main a { display: block; font-family: var(--f-d); font-size: 2rem; line-height: 1.15; padding: 8px 0; color: #fff; text-decoration: none; border-bottom: 1px solid var(--line-l); }
.drawer-main a[aria-current="page"] { color: var(--mist); }
.drawer-svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; margin-top: 22px; }
.drawer-svc a { display: block; padding: 8px 0; color: #ded8de; text-decoration: none; font-size: .97rem; }
.drawer-cta { display: grid; gap: 10px; margin-top: 26px; }
html.drawer-open { overflow: hidden; }

/* ---------- hero (home) ---------- */
.hero { position: relative; min-height: max(640px, 100svh); display: flex; align-items: center; color: #fff; background: var(--ox-d); overflow: hidden; isolation: isolate; padding: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 28px) 0 76px; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media .hf { position: absolute; inset: 0; overflow: hidden; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hf { animation: kb 28s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.hf-2, .hf-3 { opacity: 0; }
.hero-media.x3 .hf-1 { animation: kb 28s ease-in-out infinite alternate, x1 27s linear infinite; }
.hero-media.x3 .hf-2 { animation: kb2 26s ease-in-out infinite alternate, x2 27s linear infinite; }
.hero-media.x3 .hf-3 { animation: kb 30s ease-in-out infinite alternate-reverse, x3 27s linear infinite; }
@keyframes kb { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
@keyframes kb2 { from { transform: scale(1.1) translate3d(1.2%, 0, 0); } to { transform: scale(1.02) translate3d(-1%, 1%, 0); } }
@keyframes x1 { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes x2 { 0%, 30% { opacity: 0; } 36%, 63% { opacity: 1; } 69%, 100% { opacity: 0; } }
@keyframes x3 { 0%, 63% { opacity: 0; } 69%, 94% { opacity: 1; } 100% { opacity: 0; } }
.hero-scrim { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(ellipse 70% 58% at 50% 50%, rgba(35, 17, 17, .72) 0%, rgba(35, 17, 17, .5) 58%, rgba(35, 17, 17, .32) 100%),
  linear-gradient(180deg, rgba(35, 17, 17, .78) 0%, rgba(35, 17, 17, .18) 26%, rgba(35, 17, 17, .3) 70%, rgba(35, 17, 17, .9) 100%); }
.hero-in { width: 100%; max-width: calc(900px + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-mark { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 22px; }
.hero-mark .m-rule { display: flex; align-items: center; gap: 12px; font-family: var(--f-t); font-weight: 700; font-size: .75rem; letter-spacing: .32em; text-transform: uppercase; color: var(--mist-l); }
.hero-mark .m-rule::before, .hero-mark .m-rule::after { content: ""; width: clamp(28px, 8vw, 64px); height: 1px; background: currentColor; opacity: .7; }
.hero-mark .m-name { font-family: var(--f-d); font-size: clamp(2.6rem, 1.6rem + 5vw, 4.4rem); line-height: .95; color: #fff; letter-spacing: .005em; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(35, 17, 17, .55); border: 1px solid rgba(255, 255, 255, .28); font-size: .875rem; font-weight: 550; color: #f2eef2; margin-bottom: 20px; max-width: 100%; text-decoration: none; }
.pill svg { flex: none; color: var(--mist); }
.hero h1 { display: flex; flex-direction: column; align-items: center; gap: 12px; font-weight: 400; }
.h1-sm { font-family: var(--f-b); font-weight: 600; font-size: clamp(.95rem, .85rem + .45vw, 1.12rem); letter-spacing: .02em; color: #ece6ea; max-width: 34ch; line-height: 1.4; }
.h1-big { font-family: var(--f-d); font-size: clamp(2.9rem, 1.3rem + 7.4vw, 6.4rem); line-height: .98; letter-spacing: -.012em; color: #fff; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .3); }
.h1-big .ac { color: var(--mist); }
.hero-sub { margin-top: 18px; font-size: clamp(1.05rem, .98rem + .35vw, 1.22rem); line-height: 1.5; color: #ebe6ea; max-width: 44ch; }
.hero .cta-pair { justify-content: center; margin-top: 28px; width: 100%; max-width: 560px; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 28px; font-size: .92rem; color: #e9e3e8; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { color: var(--mist); flex: none; }
.trust .stars svg { color: var(--mist); }
.motion-btn { position: absolute; right: max(14px, env(safe-area-inset-right, 0px)); bottom: 14px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(35, 17, 17, .55); color: #fff; display: grid; place-items: center; }
.motion-btn svg { width: 14px; height: 14px; }
.motion-btn .i-play { display: none; }
.motion-btn[aria-pressed="true"] .i-play { display: block; }
.motion-btn[aria-pressed="true"] .i-pause { display: none; }
.hero-note { position: absolute; left: var(--gut); bottom: 18px; z-index: 2; font-size: .75rem; color: rgba(255, 255, 255, .78); max-width: calc(100% - var(--gut) - 74px); }
html.motion-off .hf, html.motion-off .kb > *, html.motion-off .kb img { animation-play-state: paused !important; }

/* ---------- goods line (what's on the floor, in the customers' words) ---------- */
.goods { background: var(--kraft); color: var(--ox); padding: 18px 0; border-block: 1px solid var(--kraft-d); }
.goods-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 0; font-family: var(--f-t); font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.goods-row li { white-space: nowrap; }
.goods-row li + li::before { content: "//"; margin: 0 .7em; opacity: .45; font-weight: 400; }
.goods-src { display: block; text-align: center; font-size: .78rem; color: #5a4a40; margin-top: 4px; font-family: var(--f-b); letter-spacing: 0; text-transform: none; font-weight: 500; }

/* ---------- intro split ---------- */
.intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
.intro-side { display: grid; gap: 18px; }
@media (min-width: 960px) { .intro { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; } }
.facts { border-top: 2px solid var(--ox); }
.facts > div { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .97rem; }
.facts dt { font-family: var(--f-t); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); padding-top: 3px; }
.facts dd a { color: var(--ox); font-weight: 600; }
.t-ox .facts { border-color: var(--mist); }
.t-ox .facts > div { border-color: var(--line-l); }
.t-ox .facts dt { color: var(--mist-l); }
.t-ox .facts dd, .t-ox .facts dd a { color: #f1edf0; }

/* ---------- photos: frameless, bleed to the edge on phones ---------- */
.ph { display: block; position: relative; overflow: hidden; background: var(--paper-3); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.r-43 { aspect-ratio: 4 / 3; }
.r-32 { aspect-ratio: 3 / 2; }
.r-11 { aspect-ratio: 1; }
.r-45 { aspect-ratio: 4 / 5; }
.r-34 { aspect-ratio: 3 / 4; }
.r-169 { aspect-ratio: 16 / 9; }
.ph-cap { position: absolute; left: 0; bottom: 0; right: 0; padding: 26px 14px 10px; font-size: .8rem; line-height: 1.35; color: #f4f0f2; background: linear-gradient(180deg, transparent, rgba(35, 17, 17, .82)); }
.bleed { margin-inline: calc(var(--gut) * -1); }
@media (min-width: 960px) { .bleed { margin-inline: 0; } }
.credit { font-size: .75rem; color: var(--mute); margin-top: 8px; }
.t-ox .credit { color: #bcb3b8; }

/* ---------- shop-floor mosaic ---------- */
.floor-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: end; margin-bottom: 34px; }
@media (min-width: 960px) { .floor-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; } }
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.mosaic .tile { position: relative; overflow: hidden; background: var(--paper-3); aspect-ratio: 1; }
.mosaic .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mosaic a.tile:hover img { transform: scale(1.04); }
.mosaic .t-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.mosaic .t-big { grid-column: span 2; aspect-ratio: 1; }
@media (min-width: 760px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mosaic .t-big { grid-row: span 2; }
}
.floor-foot { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; margin-top: 22px; }

/* ---------- services: numbered blocks ---------- */
.svc-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: clamp(36px, 6vw, 64px); }
@media (min-width: 960px) { .svc-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 60px; align-items: end; } }
.svc-big { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: clamp(44px, 7vw, 88px); }
.svc-big .ph { aspect-ratio: 4 / 3; margin-inline: calc(var(--gut) * -1); }
.svc-big-txt { position: relative; padding-top: 26px; }
.svc-num { font-family: var(--f-d); font-size: clamp(4.6rem, 3rem + 7vw, 8.5rem); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--slate); display: block; margin-bottom: 10px; letter-spacing: -.02em; }
.svc-big h3, .svc-item h3 { font-family: var(--f-d); font-weight: 400; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.04; color: var(--ink); margin-bottom: 14px; text-wrap: balance; }
.svc-big p.svc-line, .svc-item p.svc-line { color: var(--mute); max-width: 46ch; margin-bottom: 18px; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 0; font-family: var(--f-t); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); margin-bottom: 20px; }
.svc-tags li + li::before { content: "//"; margin: 0 .55em; opacity: .5; font-weight: 400; }
@media (min-width: 960px) {
  .svc-big { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
  .svc-big .ph { margin-inline: calc(var(--edge) * -1) 0; aspect-ratio: 5 / 4; }
  .svc-big.swap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .svc-big.swap .ph { order: 2; margin-inline: 0 calc(var(--edge) * -1); }
  .svc-big-txt { padding-top: 0; }
}
.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 46px 28px; border-top: 2px solid var(--ox); padding-top: 40px; }
@media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc-item { display: grid; align-content: start; gap: 0; text-decoration: none; color: inherit; }
.svc-item .ph { aspect-ratio: 4 / 3; margin-bottom: 18px; }
.svc-item .ph img { transition: transform .6s var(--ease); }
.svc-item:hover .ph img { transform: scale(1.04); }
.svc-item .svc-n { font-family: var(--f-t); font-weight: 700; font-size: .8rem; letter-spacing: .12em; color: var(--slate); margin-bottom: 8px; }
.svc-item h3 { font-size: clamp(1.55rem, 1.3rem + .8vw, 1.85rem); margin-bottom: 8px; }
.svc-item p.svc-line { margin-bottom: 12px; font-size: .98rem; }
.svc-item .more { font-weight: 650; color: var(--slate); display: inline-flex; align-items: center; gap: .4em; }
.svc-item:hover .more svg { transform: translateX(4px); }
.svc-item .more svg { transition: transform .2s var(--ease); }

/* ---------- signature: one piece, five lives ---------- */
.lives { background: var(--paper-2); }
.lives-head { max-width: 760px; margin-bottom: clamp(30px, 5vw, 56px); }
.lives-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; position: relative; }
.lives-fig { position: sticky; top: 8px; z-index: 2; background: var(--paper-2); padding: 10px 0 6px; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); border-bottom: 1px solid var(--line); }
.lives-fig svg { width: 100%; height: auto; max-height: 34vh; margin-inline: auto; overflow: visible; }
.lives-read { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--f-t); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-top: 6px; }
.lives-dots { display: flex; gap: 6px; }
.lives-dots button { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--slate); background: transparent; color: var(--slate); font-family: var(--f-t); font-weight: 700; font-size: .78rem; display: grid; place-items: center; padding: 0; }
.lives-dots button[aria-pressed="true"] { background: var(--slate); color: #fff; }
.life { min-height: 64vh; padding: 34px 0 10px; display: grid; align-content: start; gap: 0; opacity: .45; transition: opacity .4s var(--ease); }
.life.on { opacity: 1; }
.life .ph { aspect-ratio: 3 / 2; margin-bottom: 18px; }
.life h3 { font-family: var(--f-d); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem); line-height: 1.05; color: var(--ink); margin-bottom: 10px; }
.life p { color: var(--mute); max-width: 46ch; }
.life blockquote { margin-top: 14px; padding-left: 16px; border-left: 3px solid var(--slate); font-family: var(--f-d); font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
.life blockquote cite { display: block; font-style: normal; font-family: var(--f-b); font-size: .85rem; color: var(--mute); margin-top: 6px; }
.life:last-child { min-height: 0; padding-bottom: 0; }
@media (min-width: 960px) {
  .lives-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
  .lives-fig { grid-column: 2; grid-row: 1 / span 5; top: calc(var(--hdr-h) + 24px); margin: 0; padding: 0; border: 0; background: transparent; }
  .lives-fig svg { max-height: 62vh; }
  .life { grid-column: 1; min-height: 72vh; padding: 0 0 48px; }
}
/* the drawn dresser */
.dr .d-body, .dr .d-top, .dr .d-drw, .dr .d-leg { transition: fill .7s var(--ease), transform .7s var(--ease), opacity .5s; }
.dr .d-body { fill: #7b6a5f; }
.dr .d-top { fill: #6b5a50; }
.dr .d-drw { fill: #8a786b; stroke: #4a3c35; stroke-width: 2; }
.dr .d-leg { fill: #5e4e45; transform-box: fill-box; transform-origin: 50% 0; }
.dr .d-shadow { fill: rgba(48, 24, 24, .14); }
.dr .d-line { stroke: #4a3c35; stroke-width: 2; fill: none; }
.dr .scuffs, .dr .grain, .dr .dust, .dr .clamp, .dr .glue, .dr .sheen, .dr .htag, .dr .brush, .dr .block { transition: opacity .55s var(--ease), transform .7s var(--ease); }
.dr .grain, .dr .dust, .dr .clamp, .dr .glue, .dr .sheen, .dr .htag, .dr .brush, .dr .block { opacity: 0; }
.dr .scuffs path, .dr .scuffs circle { stroke: #e9dfd4; stroke-width: 2; fill: none; stroke-linecap: round; opacity: .75; }
.dr .grain path { stroke: #a7825a; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.dr .dust circle { fill: #d9c3a3; }
.dr .knob { fill: #3d3029; transition: fill .6s, opacity .4s, transform .5s var(--ease); transform-box: fill-box; transform-origin: 50% 50%; }
.dr .knob-gone { opacity: 0; }
.dr .sag { transform: translate(0, 6px) rotate(1.6deg); transform-box: fill-box; transform-origin: 0 0; }
.dr .wob { transform: rotate(9deg); }
.dr .clamp path, .dr .clamp rect { fill: none; stroke: var(--slate); stroke-width: 3; }
.dr .glue circle { fill: #f4f1ec; stroke: #a7825a; stroke-width: 1; }
.dr .sheen rect { fill: url(#sheenGrad); }
.dr .htag-card { fill: var(--kraft); stroke: var(--kraft-d); stroke-width: 1.5; }
.dr .htag-txt { font-family: var(--f-t); font-weight: 700; font-size: 11px; letter-spacing: .06em; fill: var(--ox); }
.dr .htag-str { stroke: #8b7a66; stroke-width: 1.5; fill: none; }
/* stage 1: stripped back to the wood */
.dr[data-stage="1"] .scuffs { opacity: 0; }
.dr[data-stage="1"] .grain, .dr[data-stage="1"] .dust, .dr[data-stage="1"] .block { opacity: 1; }
.dr[data-stage="1"] .d-body, .dr[data-stage="2"] .d-body { fill: #c9a47a; }
.dr[data-stage="1"] .d-top, .dr[data-stage="2"] .d-top { fill: #bb956a; }
.dr[data-stage="1"] .d-drw, .dr[data-stage="2"] .d-drw { fill: #d4b28a; stroke: #9b7a55; }
.dr[data-stage="1"] .d-leg, .dr[data-stage="2"] .d-leg { fill: #b48d63; }
/* stage 2: mended */
.dr[data-stage="2"] .scuffs, .dr[data-stage="3"] .scuffs, .dr[data-stage="4"] .scuffs { opacity: 0; }
.dr[data-stage="2"] .grain { opacity: 1; }
.dr[data-stage="2"] .clamp, .dr[data-stage="2"] .glue { opacity: 1; }
.dr[data-stage="2"] .sag, .dr[data-stage="3"] .sag, .dr[data-stage="4"] .sag { transform: none; }
.dr[data-stage="2"] .wob, .dr[data-stage="3"] .wob, .dr[data-stage="4"] .wob { transform: none; }
.dr[data-stage="2"] .knob-gone, .dr[data-stage="3"] .knob-gone, .dr[data-stage="4"] .knob-gone { opacity: 1; }
/* stage 3: a new finish in the shop's slate */
.dr[data-stage="3"] .d-body, .dr[data-stage="4"] .d-body { fill: var(--slate); }
.dr[data-stage="3"] .d-top, .dr[data-stage="4"] .d-top { fill: var(--ox); }
.dr[data-stage="3"] .d-drw, .dr[data-stage="4"] .d-drw { fill: #55556f; stroke: var(--mist); }
.dr[data-stage="3"] .d-leg, .dr[data-stage="4"] .d-leg { fill: var(--ox); }
.dr[data-stage="3"] .knob, .dr[data-stage="4"] .knob { fill: var(--mist-xl); }
.dr[data-stage="3"] .sheen, .dr[data-stage="3"] .brush { opacity: 1; }
.dr[data-stage="3"] .sheen { animation: sheen 2.4s var(--ease) .2s 1 both; }
@keyframes sheen { from { transform: translateX(-260px); } to { transform: translateX(300px); } }
/* stage 4: on the floor, tagged */
.dr[data-stage="4"] .htag { opacity: 1; animation: swing 1.6s var(--ease) both; }
@keyframes swing { 0% { transform: rotate(-16deg); } 45% { transform: rotate(9deg); } 75% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }
.dr .htag { transform-box: view-box; transform-origin: 318px 92px; }

/* ---------- trade band ---------- */
.trade-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
@media (min-width: 960px) { .trade-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; } .trade-grid .ph { margin-right: calc(var(--edge) * -1); } }
.trade-grid .ph { aspect-ratio: 4 / 3; }
@media (max-width: 959px) { .trade-grid .ph { margin-inline: calc(var(--gut) * -1); } }
.tsteps { counter-reset: ts; display: grid; gap: 0; margin: 26px 0 30px; border-top: 1px solid var(--line-l); }
.tsteps li { counter-increment: ts; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-l); }
.tsteps li::before { content: "0" counter(ts); font-family: var(--f-d); font-size: 2rem; line-height: 1; color: var(--mist); }
.tsteps strong { display: block; font-weight: 650; color: #fff; margin-bottom: 2px; }
.tsteps span { color: #d8d2d8; font-size: .97rem; }
.t-paper .tsteps, .t-paper2 .tsteps { border-color: var(--line); }
.t-paper .tsteps li, .t-paper2 .tsteps li { border-color: var(--line); }
.t-paper .tsteps li::before, .t-paper2 .tsteps li::before { color: var(--slate); }
.t-paper .tsteps strong, .t-paper2 .tsteps strong { color: var(--ink); }
.t-paper .tsteps span, .t-paper2 .tsteps span { color: var(--mute); }

/* ---------- full-bleed photo moment ---------- */
.pmoment { position: relative; min-height: clamp(460px, 78vh, 760px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate; padding: 80px 0 72px; background: var(--ox-d); }
.pmoment .pm-media { position: absolute; inset: 0; z-index: -2; }
.pmoment .pm-media picture { display: block; width: 100%; height: 100%; }
.pmoment .pm-media img { width: 100%; height: 100%; object-fit: cover; }
.kb img { animation: kb 30s ease-in-out infinite alternate; transform-origin: 50% 50%; }
.pmoment::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(35, 17, 17, .15) 0%, rgba(35, 17, 17, .35) 40%, rgba(35, 17, 17, .88) 100%); }
.pm-quote { font-family: var(--f-d); font-size: clamp(2.2rem, 1.2rem + 4.6vw, 4.6rem); line-height: 1.02; max-width: 15ch; text-wrap: balance; text-shadow: 0 2px 26px rgba(0, 0, 0, .35); }
.pm-cite { display: block; margin-top: 16px; font-size: .95rem; color: #ece6ea; }
.pm-cite strong { color: #fff; }
.pmoment .credit { color: rgba(255, 255, 255, .78); }

/* ---------- reviews ---------- */
.rv-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-bottom: 34px; align-items: end; }
@media (min-width: 960px) { .rv-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; } }
.rv-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.rv-score { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-d); font-size: 2.4rem; line-height: 1; color: var(--ink); }
.rv-score small { font-family: var(--f-b); font-size: .9rem; color: var(--mute); }
.stars { display: inline-flex; gap: 2px; color: var(--slate); }
.stars svg { width: 16px; height: 16px; }
.rv-wrap { position: relative; }
ul.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 84%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); padding: 4px var(--gut) 18px; margin-inline: calc(var(--gut) * -1); scrollbar-width: thin; overscroll-behavior-x: contain; }
.qcard { scroll-snap-align: start; display: flex; }
.qcard figure { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%; background: var(--white); padding: 24px 22px 22px; border-top: 3px solid var(--slate); }
.q-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.q-src { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--mute); font-weight: 550; }
.qcard blockquote { flex: 1; font-size: 1.02rem; line-height: 1.6; color: var(--text); }
.qcard figcaption { font-family: var(--f-t); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ox); }
.qmark { position: absolute; right: 14px; bottom: -8px; font-family: var(--f-d); font-size: 5.5rem; line-height: 1; color: var(--mist-xl); pointer-events: none; }
.rail-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.rail-btn { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ox); background: transparent; color: var(--ox); display: grid; place-items: center; }
.rail-btn[data-prev] svg { transform: rotate(180deg); }
.rail-btn:disabled { opacity: .35; cursor: default; }
@media (min-width: 960px) {
  ul.quotes { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding: 0; gap: 18px; }
  .rail-btns { display: none; }
}

/* ---------- visit ---------- */
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 960px) { .visit-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 72px; align-items: center; } }
.visit-grid .ph { aspect-ratio: 4 / 3; }
@media (max-width: 959px) { .visit-grid .ph { margin-inline: calc(var(--gut) * -1); } }
@media (min-width: 960px) { .visit-grid .ph { margin-left: calc(var(--edge) * -1); } }
.hours { width: 100%; border-collapse: collapse; font-size: .97rem; margin: 18px 0 8px; }
.hours th, .hours td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 600; color: var(--ink); width: 45%; }
.hours td { color: var(--mute); font-variant-numeric: tabular-nums; }
.hours tr.today th, .hours tr.today td { color: var(--slate); font-weight: 700; }
.addr { font-style: normal; font-size: 1.05rem; line-height: 1.55; }
.addr strong { display: block; font-family: var(--f-d); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin-bottom: 4px; }

/* ---------- towns ---------- */
.towns { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--ox); }
.town-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: padding .25s var(--ease), background-color .25s; }
.town-row:hover { padding-left: 10px; background: rgba(72, 72, 96, .05); }
.town-name { font-family: var(--f-d); font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.05; color: var(--ink); }
.town-min { font-family: var(--f-t); font-weight: 700; font-size: .85rem; letter-spacing: .06em; color: var(--slate); white-space: nowrap; }
.town-note { grid-column: 1 / -1; color: var(--mute); font-size: .95rem; }
@media (min-width: 760px) { .towns { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; } }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 2px solid var(--ox); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; font-family: var(--f-d); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.2; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 2px solid var(--slate); border-bottom: 2px solid var(--slate); transform: rotate(45deg) translate(-3px, -3px); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-a { padding: 0 0 22px; color: var(--mute); max-width: 68ch; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; color: #fff; padding: clamp(80px, 12vw, 150px) 0; background: var(--ox-d); text-align: center; }
.cta-band .cb-media { position: absolute; inset: 0; z-index: -2; }
.cta-band .cb-media picture { display: block; width: 100%; height: 100%; }
.cta-band .cb-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(35, 17, 17, .86), rgba(35, 17, 17, .66)); }
.cta-band .wrap { display: flex; flex-direction: column; align-items: center; }
.cta-band .dh { color: #fff; max-width: 17ch; }
.cta-sub { margin-top: 16px; color: #ebe6ea; max-width: 46ch; font-size: 1.08rem; }
.cta-band .cta-pair { justify-content: center; margin-top: 26px; width: 100%; max-width: 560px; }
.cta-hours { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: .92rem; color: #e1dbe0; }
.cta-hours svg { color: var(--mist); flex: none; }

/* ---------- contact + form ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; } }
.lead-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; background: var(--white); color: var(--text); padding: clamp(22px, 4vw, 38px); border-top: 4px solid var(--slate); }
.lead-form p { color: var(--text); }
.lead-form .fine, .lead-form .form-sub { color: var(--mute); }
.form-h { font-family: var(--f-d); font-weight: 400; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); line-height: 1.05; color: var(--ink); }
.form-sub { font-size: .97rem; margin-top: -6px; }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.fld .opt { font-weight: 400; color: var(--mute); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #b9afa9; border-radius: var(--r); background-color: #fff; color: var(--text); font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.fld textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.fld select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%), linear-gradient(135deg, var(--slate) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--slate); box-shadow: 0 0 0 3px rgba(72, 72, 96, .22); background-color: #fff; }
.fld-err { display: none; font-size: .85rem; color: #8c1d1d; font-weight: 600; }
.fld input[aria-invalid="true"] { border-color: #8c1d1d; }
.fld input[aria-invalid="true"] ~ .fld-err { display: block; }
.fld-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 600px) { .fld-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hp-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form button[type="submit"] { white-space: normal; }
.form-status:empty { display: none; }
.form-status { padding: 14px 16px; border-radius: var(--r); font-weight: 550; font-size: .97rem; }
.form-status.ok { background: #e7edf3; color: var(--ox); border-left: 4px solid var(--slate); }
.form-status.err { background: #f6e9e6; color: #5a1616; border-left: 4px solid #8c1d1d; }
.form-status a { color: inherit; font-weight: 700; }
.form-alt { font-size: .95rem; color: var(--mute); }
.form-alt a { color: var(--slate); font-weight: 650; }
.map { position: relative; aspect-ratio: 4 / 3; background: var(--paper-3); margin-top: 26px; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 959px) { .map { margin-inline: calc(var(--gut) * -1); } }

/* ---------- inner page hero ---------- */
.phero { position: relative; color: #fff; background: var(--ox); isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(460px, 64vh, 640px); padding: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 40px) 0 clamp(44px, 7vw, 76px); }
.phero-media { position: absolute; inset: 0; z-index: -2; }
.phero-media picture { display: block; width: 100%; height: 100%; }
.phero-media img { width: 100%; height: 100%; object-fit: cover; }
.phero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(35, 17, 17, .9) 0%, rgba(35, 17, 17, .78) 46%, rgba(35, 17, 17, .3) 100%), linear-gradient(180deg, rgba(35, 17, 17, .5) 0%, transparent 30%); }
.phero h1 { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-weight: 400; max-width: 900px; }
.phero .h1-sm { text-align: left; max-width: 46ch; }
.phero .h1-big { font-size: clamp(2.5rem, 1.3rem + 5.2vw, 5.2rem); text-align: left; max-width: 14ch; }
.phero-sub { margin-top: 16px; max-width: 52ch; color: #ebe6ea; font-size: 1.08rem; }
.phero .cta-pair { margin-top: 26px; }
.phero .credit { color: rgba(255, 255, 255, .72); margin-top: 18px; }
.crumbs { margin-bottom: 18px; font-size: .85rem; width: fit-content; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li { color: #ddd6dc; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumbs a { color: #fff; }
@media (min-width: 760px) and (max-width: 1199px) {
  .phero-scrim { background: linear-gradient(90deg, rgba(35, 17, 17, .9) 0%, rgba(35, 17, 17, .84) 70%, rgba(35, 17, 17, .5) 100%), linear-gradient(180deg, rgba(35, 17, 17, .5) 0%, transparent 30%); }
}
@media (max-width: 759px) {
  .phero { display: block; min-height: 0; padding: 0 0 44px; background: var(--ox); }
  .phero-media { position: relative; height: clamp(220px, 60vw, 330px); margin-top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px)); z-index: 0; }
  .phero-media::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(180deg, transparent, var(--ox)); }
  .phero-scrim { display: none; }
  .phero .wrap { position: relative; margin-top: -22px; }
  .phero .motion-btn { top: calc(var(--hdr-h) + env(safe-area-inset-top, 0px) + 12px); bottom: auto; }
}

/* ---------- inner content blocks ---------- */
.blocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--ox); }
.blk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 40px; padding: 30px 0; border-bottom: 1px solid var(--line); }
.blk h3 { font-family: var(--f-d); font-weight: 400; font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem); line-height: 1.08; color: var(--ink); }
.blk .bn { font-family: var(--f-t); font-weight: 700; font-size: .8rem; letter-spacing: .12em; color: var(--slate); display: block; margin-bottom: 8px; }
@media (min-width: 960px) { .blk { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); padding: 38px 0; } }
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; }
.duo .ph { aspect-ratio: 4 / 3; }
@media (max-width: 959px) { .duo .ph { margin-inline: calc(var(--gut) * -1); } }
@media (min-width: 960px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; } .duo .ph { margin-left: calc(var(--edge) * -1); } .duo.swap .ph { order: 2; margin-left: 0; margin-right: calc(var(--edge) * -1); } }
.checks { display: grid; gap: 0; margin-top: 18px; border-top: 1px solid var(--line); }
.checks li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.checks svg { color: var(--slate); margin-top: 4px; width: 18px; height: 18px; }
.t-ox .checks, .t-ox .checks li { border-color: var(--line-l); }
.t-ox .checks svg { color: var(--mist); }
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin-top: clamp(30px, 5vw, 48px); }
.strip .ph { aspect-ratio: 1; }
@media (min-width: 760px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) { .strip { margin-inline: calc(var(--gut) * -1); } }
.links-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 2px solid var(--ox); }
.links-grid a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; transition: padding .25s var(--ease); }
.links-grid a:hover { padding-left: 8px; color: var(--slate); }
.links-grid a svg { color: var(--slate); flex: none; }
@media (min-width: 760px) { .links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
.t-ox .links-grid { border-color: var(--mist); }
.t-ox .links-grid a { color: #fff; border-color: var(--line-l); }
.t-ox .links-grid a svg { color: var(--mist); }
.split-h { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); }
@media (min-width: 960px) { .split-h { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 60px; align-items: end; } }
.note-card { background: var(--kraft); color: var(--ox); padding: 22px 22px 20px; position: relative; }
.note-card p { color: var(--ox); }
.note-card .kick-plain { color: var(--ox); }

/* gallery page */
.gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.gal a { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--paper-3); }
.gal a.g-big { grid-column: span 2; grid-row: span 2; }
.gal a.g-tall { grid-row: span 2; aspect-ratio: auto; }
.gal a.g-wide { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.gal a.g-wide img { object-position: 30% 50%; }
@media (min-width: 760px) { .gal a.g-wide { aspect-ratio: 3684 / 850; } }
.gal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gal a:hover img { transform: scale(1.04); }
@media (min-width: 760px) { .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) { .gal { margin-inline: calc(var(--gut) * -1); } }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 92vh; width: auto; }
dialog.lightbox::backdrop { background: rgba(20, 10, 10, .9); }
dialog.lightbox img { max-width: min(96vw, 1400px); max-height: 82vh; width: auto; height: auto; object-fit: contain; margin-inline: auto; }
dialog.lightbox p { color: #eee; font-size: .92rem; text-align: center; padding: 10px 50px 0; }
.lb-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; font-size: 1.6rem; line-height: 1; }

/* ---------- footer ---------- */
.ftr { background: var(--ox-d); color: #d9d2d6; padding: clamp(56px, 8vw, 96px) 0 calc(96px + env(safe-area-inset-bottom, 0px)); font-size: .95rem; }
.ftr a { color: #f1ecef; text-decoration: none; }
.ftr a:hover { text-decoration: underline; }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
@media (min-width: 760px) { .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ftr-brand { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .ftr-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } .ftr-brand { grid-column: auto; } }
.ftr .brand { margin-bottom: 16px; }
.ftr-nap { display: grid; gap: 4px; font-style: normal; line-height: 1.5; }
.ftr-nap strong { color: #fff; font-weight: 650; }
.ftr-nap a { font-weight: 650; color: var(--mist-l); }
.ftr-hours { display: flex; gap: 8px; margin-top: 14px; }
.ftr-hours svg { color: var(--mist); flex: none; margin-top: 4px; }
.ftr-g { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--mist-l) !important; font-weight: 600; }
.ftr-h { font-family: var(--f-t); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist-l); margin-bottom: 12px; }
.ftr-col li { padding: 4px 0; }
.ftr-col a { display: inline-block; padding: 3px 0; }
.ftr-base { margin-top: 44px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 6px; font-size: .82rem; color: #b9b0b5; }
.actbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px max(12px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-right, 0px)); background: rgba(35, 17, 17, .96); transform: translateY(110%); transition: transform .3s var(--ease); }
.actbar.show { transform: none; }
.actbar .btn { min-height: 48px; padding: .6em .8em; }
@media (min-width: 960px) { .actbar { display: none; } .ftr { padding-bottom: clamp(56px, 8vw, 96px); } }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.on { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .hf, .kb img { animation: none !important; }
  .hf-2, .hf-3 { display: none; }
  .js .rv { opacity: 1; transform: none; }
}

/* ---------- print ---------- */
@media print { .hdr, .actbar, .drawer, .motion-btn, .hero-media, .cb-media { display: none !important; } .hero, .phero, .cta-band { color: #000; background: none; min-height: 0; } }

/* ==========================================================================
   Logo layer: their badge (gold lettering, oxblood scrolls) found on samplestudios-az.com.
   Logo gold runs buttons + accent words on dark; logo oxblood runs accent words on paper.
   ========================================================================== */
:root { --gold: #e39a1f; --gold-l: #f0b450; --gold-d: #c98612; --maroon: #6d1610; }
.ac { color: var(--maroon); }
.t-ox .ac, .t-slate .ac, .on-photo .ac, .h1-big .ac, .cta-band .ac, .pmoment .ac { color: var(--gold-l); }
.btn-gold { background: var(--gold); color: var(--ox); }
.btn-gold:hover { background: var(--gold-l); }
.hdr-call { background: var(--gold); }
.hdr-call:hover { background: var(--gold-l); }
.brand { flex-direction: row; align-items: center; gap: 10px; }
.brand-logo { height: 50px; width: auto; flex: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.brand-wm { display: inline-flex; flex-direction: column; min-width: 0; }
@media (max-width: 379px) { .brand-wm { display: none; } }
@media (min-width: 960px) { .brand-logo { height: 58px; } }
.brand-ftr .brand-logo { height: 72px; }
.hero-logo { width: clamp(176px, 46vw, 290px); height: auto; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .45)); }
.hero-mark { gap: 12px; margin-bottom: 18px; }
.lives { background: var(--paper); }
.lives-fig { background: var(--paper); }
@media (min-width: 960px) { .lives-fig { background: transparent; } }
.ph-sm { max-width: 300px; }
.life .ph-sm { aspect-ratio: 3 / 4; }
.trust .stars { gap: 1px; }
.kick.k-photo { color: var(--ox); }
.cta-band .kick, .pmoment .kick { margin-inline: auto; }
.pmoment .kick { margin-inline: 0; }
.note-card blockquote { margin: 0; }
.t-ox .facts dd a { color: var(--gold-l); }
.t-ox .lead-form .facts dd a { color: var(--ox); }
.t-ox .link-arrow { color: var(--gold-l); }

/* before / after pairs (the shop's own work) */
.pairs { display: grid; gap: clamp(28px, 4vw, 44px); }
.pairs-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 44px); }
@media (min-width: 760px) { .pairs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pair { margin: 0; }
.pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3px; }
.pair-ph { position: relative; overflow: hidden; background: var(--paper-3); aspect-ratio: 3 / 4; }
.pair-big .pair-ph { aspect-ratio: 1; }
@media (min-width: 960px) { .pair-big .pair-ph { aspect-ratio: 4 / 3; } }
.pair-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pair-tag { position: absolute; left: 10px; top: 10px; font-family: var(--f-t); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; background: var(--kraft); color: var(--ox); padding: 4px 9px 4px 18px; clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%); }
.pair-tag.pair-after { background: var(--gold); }
.pair figcaption { margin-top: 12px; font-size: .97rem; color: var(--mute); }
.pairs-2 .pair-row { max-width: 560px; }
@media (max-width: 759px) { .pair-big .pair-row { margin-inline: calc(var(--gut) * -1); } }
/* signature steps: inactive steps keep full opacity, photos desaturate until their step is live */
.life { opacity: 1; }
.life .ph img { transition: filter .6s var(--ease); }
.life:not(.on) .ph img { filter: grayscale(.85) contrast(.92) brightness(1.04); }
.life:not(.on) h3 { color: #8a7b78; }
.life h3 { transition: color .4s var(--ease); }
@media (max-width: 959px) { .life { min-height: 56vh; } }
@media (prefers-reduced-motion: reduce) { .life:not(.on) .ph img { filter: none; } .life:not(.on) h3 { color: var(--ink); } }
.hero-mark .m-rule { flex-wrap: nowrap; }
@media (max-width: 559px) { .hero-mark .m-rule { letter-spacing: .16em; font-size: .7rem; } .hero-mark .m-rule::before, .hero-mark .m-rule::after { width: 18px; } }
.dr .scuffs ellipse { stroke: #e9dfd4; stroke-width: 2; fill: none; opacity: .75; }
.lives-read > span:first-child { white-space: nowrap; }
@media (max-width: 420px) { .lives-dots { gap: 4px; } .lives-dots button { width: 30px; height: 30px; } .lives-read { font-size: .72rem; letter-spacing: .06em; } }
/* reviews: masonry columns on desktop so one long review never stretches the short ones */
@media (min-width: 960px) {
  ul.quotes { display: block; columns: 3; column-gap: 18px; }
  ul.quotes .qcard { display: block; break-inside: avoid; margin-bottom: 18px; }
  ul.quotes .qcard figure { height: auto; }
}
@media (min-width: 760px) and (max-width: 959px) { ul.quotes { grid-auto-columns: minmax(300px, 46%); } }
@media (max-width: 759px) { body { font-size: 1rem; line-height: 1.6; } .lede { font-size: 1.04rem; } }
@media (max-width: 559px) { .hero-mark .m-rule { flex-wrap: wrap; justify-content: center; text-align: center; } .hero-mark .m-rule::before, .hero-mark .m-rule::after { display: none; } }
.lives-read { flex-wrap: wrap; row-gap: 6px; }
/* overlay captions carry their own ink chip, never trusting the photo behind them */
.ph-cap { left: 8px; bottom: 8px; right: auto; width: fit-content; max-width: calc(100% - 16px); padding: 4px 9px; border-radius: 3px; background: rgba(35, 17, 17, .86); color: #f6f1f3; font-size: .75rem; }
.hero-mark .m-rule { color: #e3eaf1; text-shadow: 0 1px 10px rgba(20, 8, 8, .7); }
/* web-interface-guidelines pass */
html { -webkit-tap-highlight-color: rgba(72, 72, 96, .18); }
dialog.lightbox { overscroll-behavior: contain; }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { box-shadow: 0 0 0 3px rgba(72, 72, 96, .38); }
.lead-form button[type="submit"]:disabled { opacity: .75; cursor: progress; }
/* Vinted Go / SpeedX pick-up point */
.vgo-logo { display: block; width: auto; height: 40px; max-width: 100%; margin-bottom: 18px; }
.vgo-txt { max-width: 42ch; margin: 14px 0 22px; }
.vgo-note { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.vgo-note .vgo-logo { height: 34px; margin-bottom: 10px; }
.vgo-note p { margin: 0 0 12px; max-width: 42ch; }