/* =========================================================
   Frame Shop & Gallery — design tokens + shared components
   Direction: DIRECTION.md (corner-sample wall)
   ========================================================= */

:root {
  /* colour — from a framer's materials + the storefront sign */
  --ebony: #17130F;          /* ebonised moulding, page field */
  --walnut: #2A221C;         /* walnut stain, raised surfaces */
  --walnut-2: #362C24;
  --gilt: #C6A15B;           /* gold leaf, CTAs, rules */
  --gilt-lt: #E4C989;
  --gilt-dk: #8A6A2B;
  --sign-teal: #0B8A86;      /* sampled from the storefront sign — never altered */
  --teal-lt: #3FB3AC;        /* sign teal, lifted for text on ebony (7.3:1) */
  --teal-deep: #07524F;      /* sign teal, deepened for a field with gesso text (7.5:1) */
  --teal-ink: #085F5C;       /* sign teal for text on wall grey (4.9:1) */
  --gesso: #EEEAE2;          /* gesso / mat core, text on dark */
  --bevel: #FBFAF6;          /* the white core of a 45° mat cut */
  --stone: #A9A096;          /* muted text on dark (7.2:1) */
  --wall: #D6D1C8;           /* gallery-wall grey, the one light band */
  --wall-muted: #5E564D;     /* muted text on wall (4.7:1) */
  --ink: #17130F;
  --line: rgba(198, 161, 91, .28);
  --line-soft: rgba(238, 234, 226, .12);

  /* moulding finishes (used by frames + corner samples) */
  --m-gilt: linear-gradient(135deg, #6F5220 0%, #E9D294 22%, #B48B3E 40%, #F3E0A8 58%, #9A7630 78%, #5E4519 100%);
  --m-ebony: linear-gradient(135deg, #070605 0%, #2E2822 30%, #0E0C0A 55%, #3A332C 75%, #0A0807 100%);
  --m-walnut: repeating-linear-gradient(100deg, rgba(0,0,0,.18) 0 2px, transparent 2px 7px), linear-gradient(135deg, #3B2618 0%, #7A5235 35%, #4E3220 60%, #8C6040 80%, #3A2416 100%);
  --m-silver: linear-gradient(135deg, #6E7378 0%, #EEF0F2 25%, #9EA3A8 45%, #F6F7F8 62%, #82878C 82%, #5A5E62 100%);
  --m-oak: repeating-linear-gradient(95deg, rgba(90,60,25,.16) 0 1px, transparent 1px 6px), linear-gradient(135deg, #A57B4C 0%, #DDBE8E 35%, #B98F5D 60%, #E6CB9C 80%, #9C7244 100%);
  --m-teal: linear-gradient(135deg, #04302E 0%, #0B8A86 30%, #075F5C 55%, #12A39E 75%, #053E3C 100%);

  /* type */
  --f-display: "Libre Caslon Text", "Big Caslon", Georgia, serif;
  --f-body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
  --t-display: clamp(2.875rem, 1.6rem + 4.4vw, 5.5rem); /* 46 → 88 */
  --t-h2: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);        /* 36 → 60 */
  --t-h3: clamp(1.4375rem, 1.25rem + .6vw, 1.75rem);    /* 23 → 28 */
  --t-lead: clamp(1.1875rem, 1.1rem + .3vw, 1.3125rem); /* 19 → 21 */
  --t-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem);    /* 17 → 18 */
  --t-small: .9375rem;
  --t-placard: .8125rem;

  /* space — 8px base */
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2rem; --s-5: 3rem;
  --s-6: 4rem; --s-7: 6rem; --s-8: 8rem; --s-9: 10rem;
  --section: clamp(5.5rem, 3rem + 8vw, 10rem);   /* 88 → 160 */
  --gutter: clamp(1.25rem, .5rem + 3.2vw, 3.5rem); /* 20 → 56 */
  --container: 82.5rem; /* 1320 */

  /* depth — two stacked shadows: contact + ambient */
  --shadow-hang: 0 1px 2px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.25), 0 18px 36px -8px rgba(0,0,0,.45), 0 48px 90px -24px rgba(0,0,0,.6);
  --shadow-soft: 0 1px 2px rgba(0,0,0,.3), 0 24px 48px -20px rgba(0,0,0,.5);

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-micro: cubic-bezier(.33, 1, .68, 1);
  --ease-mask: cubic-bezier(.76, 0, .24, 1);
  --d-micro: 240ms;
  --d-enter: 900ms;
  --d-mask: 1200ms;

  /* layers */
  --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500;

  --topbar-h: 40px;
  --header-h: 92px;
  --header-h-sm: 66px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--ebony);
  color: var(--gesso);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.06; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gilt); }
.section--wall h1 em, .section--wall h2 em, .section--wall h3 em { color: var(--teal-ink); } /* gilt on wall grey is 1.6:1 */
p { margin: 0 0 1.1em; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--gilt); outline-offset: 3px; }
::selection { background: var(--gilt); color: var(--ebony); }

.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: var(--z-toast);
  background: var(--gilt); color: var(--ebony); padding: .75rem 1.25rem; font-weight: 700;
}
.skip-link:focus { top: var(--s-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* grain over dark fields */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/grain.png") repeat; background-size: 128px;
}

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section); }
.section--wall { background: var(--wall); color: var(--ink); }
.section--walnut { background: var(--walnut); }
.section--teal { background: var(--teal-deep); }
.grid-7-5 { display: grid; gap: var(--s-6) var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 960px) { .grid-7-5 { grid-template-columns: 7fr 5fr; align-items: end; } }

/* ---------- type helpers ---------- */
.placard {
  display: inline-flex; align-items: center; gap: .75rem;
  font: 700 var(--t-placard)/1.25 var(--f-body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--gilt);
}
.placard::before { content: ""; width: 14px; height: 14px; flex: none;
  background: linear-gradient(var(--gilt), var(--gilt)) top/100% 3px no-repeat, linear-gradient(var(--gilt), var(--gilt)) left/3px 100% no-repeat; }
.section--wall .placard { color: var(--teal-ink); }
.section--wall .placard::before { background: linear-gradient(var(--teal-ink), var(--teal-ink)) top/100% 3px no-repeat, linear-gradient(var(--teal-ink), var(--teal-ink)) left/3px 100% no-repeat; }
.display { font-size: var(--t-display); }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.15; }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--gesso); max-width: 38ch; }
.muted { color: var(--stone); }
.section--wall .muted { color: var(--wall-muted); }
.measure { max-width: 68ch; }
.section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-7); max-width: 46rem; }
.section-head p { color: var(--stone); margin: 0; max-width: 56ch; }
.section--wall .section-head p { color: var(--wall-muted); }
.rule { height: 1px; background: linear-gradient(90deg, var(--gilt), transparent); border: 0; margin: 0; transform-origin: left; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--gilt); --fg: var(--ebony);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 52px; padding: .9rem 1.75rem; border-radius: 0;
  background: var(--bg); color: var(--fg);
  font: 700 .875rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase;
  overflow: hidden; isolation: isolate; cursor: pointer;
  transition: color var(--d-micro) var(--ease-micro), transform var(--d-micro) var(--ease-micro);
}
.btn::before { /* gilt fill sweep */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gilt-lt);
  transform: scaleX(0); transform-origin: right; transition: transform 480ms var(--ease-out);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ghost { --bg: transparent; --fg: var(--gesso); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost::before { background: rgba(198,161,91,.14); }
.btn--teal { --bg: var(--sign-teal); --fg: #fff; }
.btn--teal::before { background: var(--teal-deep); }
.section--wall .btn--ghost { --fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,19,15,.35); }
.link-gilt { color: var(--gilt); background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size var(--d-micro) var(--ease-micro); padding-bottom: 2px; }
.link-gilt:hover { background-size: 100% 1px; }
.section--wall .link-gilt { color: var(--teal-ink); }

/* =========================================================
   THE FRAME — moulding + bevelled mat + glass sheen
   ========================================================= */
.frame {
  --moulding: var(--m-gilt);
  --mw: clamp(14px, 1.6vw, 26px);   /* moulding width */
  --mat: #F4F1EA;
  --matw: clamp(14px, 2.4vw, 38px);  /* mat border */
  position: relative; display: block;
  padding: var(--mw);
  background: var(--moulding);
  box-shadow: var(--shadow-hang), inset 0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,238,200,.18), inset 0 0 0 5px rgba(0,0,0,.28);
  transition: padding 700ms var(--ease-out);
}
.frame__mat {
  position: relative; padding: var(--matw); background: var(--mat);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.25);
  transition: background-color 700ms var(--ease-out), padding 700ms var(--ease-out);
}
.frame__art { position: relative; overflow: hidden; background: var(--walnut);
  /* the 45° bevel: white core line + shadow into the opening */
  box-shadow: 0 0 0 2px var(--bevel), 0 0 0 3px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.25); }
.frame__art img { width: 100%; height: 100%; object-fit: cover; }
.frame__art::after { /* glass sheen */
  content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.22) 48%, rgba(255,255,255,.05) 54%, transparent 62%);
  transform: translateX(-75%); transition: transform 1100ms var(--ease-out);
}
.frame:hover .frame__art::after, .frame.is-sheen .frame__art::after { transform: translateX(75%); }
.frame--ebony { --moulding: var(--m-ebony); }
.frame--walnut { --moulding: var(--m-walnut); }
.frame--silver { --moulding: var(--m-silver); }
.frame--oak { --moulding: var(--m-oak); }
.frame--teal { --moulding: var(--m-teal); }
.frame--shadowbox .frame__mat { padding: calc(var(--matw) * .6); box-shadow: inset 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.3); }

/* museum placard caption */
.label {
  display: grid; gap: .2rem; margin-top: var(--s-3); padding-left: var(--s-2);
  border-left: 1px solid var(--gilt);
}
.label__title { font-family: var(--f-display); font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; }
.label__meta { font-size: var(--t-small); color: var(--stone); font-variant-numeric: tabular-nums; }
.section--wall .label { border-color: var(--teal-ink); }
.section--wall .label__meta { color: var(--wall-muted); }

/* =========================================================
   CORNER SAMPLES — the signature
   ========================================================= */
.corner {
  --moulding: var(--m-gilt); --cw: 15px;
  position: relative; width: 64px; height: 64px; cursor: pointer;
  transition: transform var(--d-micro) var(--ease-micro);
}
.samples__wall { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.corner::before, .corner::after { content: ""; position: absolute; background: var(--moulding); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 0 0 3px rgba(255,240,210,.14); }
.corner::before { left: 0; top: 0; width: 100%; height: var(--cw); clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cw) 100%); }
.corner::after { left: 0; top: 0; width: var(--cw); height: 100%; clip-path: polygon(0 0, 100% var(--cw), 100% 100%, 0 100%); }
.corner:hover { transform: translateY(-4px) rotate(-2deg); }
.corner[aria-pressed="true"] { transform: translateY(-6px); }
.corner[aria-pressed="true"]::before { outline: 1px solid var(--gilt-lt); outline-offset: 5px; }
.corner--ebony { --moulding: var(--m-ebony); }
.corner--walnut { --moulding: var(--m-walnut); }
.corner--silver { --moulding: var(--m-silver); }
.corner--oak { --moulding: var(--m-oak); }
.corner--teal { --moulding: var(--m-teal); }
.corner--sm { width: 22px; height: 22px; --cw: 6px; filter: none; cursor: default; }
.corner--sm:hover { transform: none; }

/* =========================================================
   TOP BAR + HEADER
   ========================================================= */
.site-top { position: sticky; top: 0; z-index: var(--z-sticky); }
.topbar {
  height: var(--topbar-h); background: var(--teal-deep); color: var(--gesso);
  font-size: .875rem; letter-spacing: .01em; overflow: hidden;
  transition: height 420ms var(--ease-out), opacity 300ms var(--ease-micro);
}
.topbar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.topbar__list { display: flex; align-items: center; gap: var(--s-4); }
.topbar__item { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.topbar__item svg { width: 15px; height: 15px; color: var(--gilt-lt); }
.topbar a:hover { color: var(--gilt-lt); }
.social { display: flex; align-items: center; gap: .25rem; }
.social a { display: grid; place-items: center; width: 34px; height: 34px; transition: color var(--d-micro) var(--ease-micro); }
.social svg { width: 16px; height: 16px; }
.social a:hover { color: var(--gilt-lt); }
@media (max-width: 767px) { .topbar__hide-sm { display: none; } .topbar__list { gap: var(--s-2); } }

.header {
  position: relative; height: var(--header-h);
  background: transparent;
  transition: height 420ms var(--ease-out), background-color 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.brand { display: block; flex: none; }
.brand img { height: 50px; width: auto; transition: height 420ms var(--ease-out); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -6px rgba(0,0,0,.6), 0 0 0 3px #0B8A86; }
.is-scrolled .topbar { height: 0; opacity: 0; }
.is-scrolled .header {
  height: var(--header-h-sm);
  background: rgba(23, 19, 15, .72);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -20px rgba(0,0,0,.8);
}
.is-scrolled .brand img { height: 38px; }
.page-inner .header { background: var(--ebony); }

.nav { display: none; }
@media (min-width: 1080px) {
  .nav { display: flex; align-items: center; gap: var(--s-4); }
  .nav__list { display: flex; align-items: center; gap: var(--s-3); }
  .nav__link {
    position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .75rem 0;
    font-size: .9375rem; font-weight: 500; letter-spacing: .02em; color: var(--gesso);
  }
  .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1px; background: var(--gilt); transform: scaleX(0); transform-origin: right; transition: transform var(--d-micro) var(--ease-micro); }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after, .has-menu:focus-within > .nav__link::after { transform: scaleX(1); transform-origin: left; }
  .nav__link[aria-current="page"] { color: var(--gilt-lt); }
  .nav__link svg { width: 12px; height: 12px; transition: transform var(--d-micro) var(--ease-micro); }
  .has-menu { position: relative; }
  .has-menu:hover .nav__link svg, .has-menu.is-open .nav__link svg { transform: rotate(180deg); }
  .mega {
    position: absolute; top: 100%; left: 50%; z-index: var(--z-dropdown);
    width: min(680px, 80vw); padding: var(--s-3);
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-1);
    background: rgba(42, 34, 28, .96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: var(--shadow-hang), inset 0 0 0 1px var(--line);
    opacity: 0; visibility: hidden; transform: translate(-50%, 10px);
    transition: opacity var(--d-micro) var(--ease-micro), transform var(--d-micro) var(--ease-micro), visibility 0s linear var(--d-micro);
  }
  .has-menu:hover .mega, .has-menu.is-open .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
  .mega a { display: grid; grid-template-columns: 30px 1fr; gap: .9rem; align-items: start; padding: var(--s-2); transition: background-color var(--d-micro) var(--ease-micro); }
  .mega a:hover, .mega a:focus-visible { background: rgba(198,161,91,.1); }
  .mega .corner--sm { margin-top: .3rem; }
  .mega strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.125rem; line-height: 1.2; }
  .mega span { font-size: .875rem; color: var(--stone); line-height: 1.45; display: block; margin-top: .25rem; }
}
.header__actions { display: flex; align-items: center; gap: var(--s-2); }
.header__phone { display: none; }
@media (min-width: 1240px) { .header__phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9375rem; } .header__phone svg { width: 16px; height: 16px; color: var(--gilt); } }
.header .btn { min-height: 46px; padding: .8rem 1.35rem; }
@media (max-width: 1079px) { .header .btn { display: none; } }

.menu-toggle { display: grid; place-items: center; width: 48px; height: 48px; box-shadow: inset 0 0 0 1px var(--line); }
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--gesso); box-shadow: 0 -7px 0 var(--gesso), 0 7px 0 var(--gesso); }
@media (min-width: 1080px) { .menu-toggle { display: none; } }

/* mobile overlay menu */
.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(23, 19, 15, .9); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  display: flex; flex-direction: column; padding: var(--s-3) var(--gutter) var(--s-5);
  opacity: 0; visibility: hidden; transition: opacity 360ms var(--ease-out), visibility 0s linear 360ms;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-nav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-5); }
.mobile-nav__head img { height: 40px; width: auto; box-shadow: 0 0 0 3px #0B8A86; }
.mobile-nav__close { width: 48px; height: 48px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.mobile-nav__close svg { width: 20px; height: 20px; }
.mobile-nav ul { display: grid; gap: .25rem; }
.mobile-nav a.m-link { display: flex; align-items: center; min-height: 56px; font-family: var(--f-display); font-size: 2rem; letter-spacing: -.02em; border-bottom: 1px solid var(--line-soft); opacity: 0; transform: translateY(-14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), color var(--d-micro); }
.mobile-nav a.m-sub { font-size: 1.25rem; padding-left: var(--s-3); min-height: 48px; color: var(--stone); }
.mobile-nav.is-open a.m-link { opacity: 1; transform: none; }
.mobile-nav a.m-link[aria-current="page"] { color: var(--gilt); }
.mobile-nav__foot { margin-top: auto; padding-top: var(--s-5); display: grid; gap: var(--s-2); }

/* =========================================================
   HERO — the re-framing set piece
   ========================================================= */
.hero { position: relative; min-height: 92vh; padding-top: calc(var(--section) * .45); padding-bottom: var(--s-7); display: flex; align-items: flex-end; overflow: hidden; margin-top: calc(-1 * (var(--header-h) + var(--topbar-h))); padding-top: calc(var(--header-h) + var(--topbar-h) + var(--s-6)); }
.hero { background: linear-gradient(180deg, #120F0C 0%, #1C1712 38%, #221B15 70%, #17130F 100%); isolation: isolate; }
.hero__grid, .hero .container { position: relative; z-index: 2; }

/* gallery wall layers */
.hero__wall { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__wall > * { position: absolute; display: block; }
.hero__linen { inset: 0; opacity: .5;
  background:
    repeating-linear-gradient(0deg, rgba(238,234,226,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 1px, transparent 1px 4px),
    url("../img/grain.png"); background-size: auto, auto, 128px; }
.hero__rail { /* gilt picture rail the frame hangs from */
  left: 0; right: 0; top: calc(var(--topbar-h) + var(--header-h) + 6px); height: 12px;
  background: linear-gradient(180deg, #F0DCA2 0%, #B48B3E 35%, #6F5220 70%, #3A2A10 100%);
  box-shadow: 0 1px 0 rgba(255,240,200,.25) inset, 0 3px 4px rgba(0,0,0,.55), 0 14px 26px rgba(0,0,0,.35); opacity: .85; }
.hero__beam { /* ceiling spotlight cone onto the frame */
  top: calc(var(--topbar-h) + var(--header-h) - 40px); left: 50%; width: 120vw; height: 140%; transform: translateX(-50%);
  background: conic-gradient(from 180deg at var(--beam-x, 77%) 0%, transparent 0deg 161deg, rgba(255, 226, 170, .085) 168deg, rgba(255, 232, 186, .13) 180deg, rgba(255, 226, 170, .085) 192deg, transparent 199deg 360deg);
  -webkit-mask: linear-gradient(180deg, #000 0%, #000 55%, transparent 90%); mask: linear-gradient(180deg, #000 0%, #000 55%, transparent 90%);
  filter: blur(6px); }
.hero__pool { /* light pooled on the wall around the artwork, follows the pointer a little */
  inset: 0; background:
    radial-gradient(34vw 46vh at var(--spot-x, 77%) var(--spot-y, 46%), rgba(255, 224, 168, .16), rgba(255, 224, 168, .05) 45%, transparent 70%),
    radial-gradient(40vw 40vh at 0% 100%, rgba(11, 138, 134, .12), transparent 70%);
  transition: background-position 800ms var(--ease-out); }
.hero__wainscot { /* panelled lower wall + chair rail */
  left: 0; right: 0; bottom: 0; height: 8%; opacity: .85;
  background:
    linear-gradient(180deg, rgba(198,161,91,.55) 0 2px, rgba(0,0,0,.6) 2px 4px, transparent 4px),
    repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 2px), rgba(0,0,0,.35) calc(16.66% - 2px) calc(16.66% - 1px), rgba(238,234,226,.05) calc(16.66% - 1px) 16.66%),
    linear-gradient(180deg, #2A2018 0%, #1A140F 100%);
  box-shadow: 0 -24px 40px -20px rgba(0,0,0,.6); }

/* empty frames hung further back on the wall */
.ghost {
  --d: 20; border: 1px solid rgba(198,161,91,.16);
  box-shadow: inset 0 0 0 7px rgba(198,161,91,.035), 0 30px 50px -30px rgba(0,0,0,.8);
  transform: translate3d(calc(var(--mx, 0) * var(--d) * -1px), calc(var(--my, 0) * var(--d) * -1px), 0);
  transition: transform 900ms var(--ease-out);
  animation: drift 11s ease-in-out infinite alternate;
}
.ghost > span { position: absolute; inset: 14%; border: 1px solid rgba(238,234,226,.07); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.ghost::before { content: ""; position: absolute; top: -34px; left: 50%; width: 1px; height: 34px; background: linear-gradient(rgba(238,234,226,.12), rgba(238,234,226,.04)); }
.ghost--1 { width: 150px; height: 190px; left: 4%; top: 30%; opacity: .55; filter: blur(1.5px); animation-duration: 13s; }
.ghost--2 { width: 230px; height: 170px; left: 34%; top: 22%; opacity: .45; filter: blur(2.5px); animation-delay: -4s; }
.ghost--3 { width: 120px; height: 120px; left: 56%; top: 62%; opacity: .5; filter: blur(1px); animation-duration: 9s; animation-delay: -2s; }
.ghost--4 { width: 110px; height: 150px; right: 3%; top: 24%; opacity: .5; filter: blur(2px); animation-delay: -6s; }
.ghost--5 { width: 190px; height: 140px; left: 18%; top: 66%; opacity: .35; filter: blur(3px); animation-duration: 15s; }
@keyframes drift { from { translate: 0 0; } to { translate: 0 10px; } }
@media (max-width: 1019px) {
  .hero__beam { --beam-x: 50%; }
  .ghost--2, .ghost--3, .ghost--5 { display: none; }
  .ghost--1 { top: 12%; left: auto; right: 6%; }
  .ghost--4 { top: auto; bottom: 22%; right: auto; left: 4%; }
  .hero__wainscot { height: 7%; }
}
.hero__grid { position: relative; display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: end; }
.hero__grid > *, .page-hero__grid > * { min-width: 0; }
.hero .placard { flex-wrap: wrap; line-height: 1.6; }
@media (min-width: 1020px) { .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--gutter); } }
.hero__copy { display: grid; gap: var(--s-4); padding-bottom: var(--s-2); }
.hero__title { font-size: var(--t-display); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero__title .line > span { display: block; }
.hero__lead { font-size: var(--t-lead); color: var(--gesso); max-width: 34ch; margin: 0; }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.hero__call { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: .02em; min-height: 48px; }
.hero__call svg { width: 18px; height: 18px; color: var(--gilt); }
.hero__call:hover { color: var(--gilt-lt); }

.stage { position: relative; perspective: 1200px; display: grid; justify-items: center; gap: var(--s-4); }
.stage__frame { width: clamp(240px, min(380px, 78vw, (100vh - 330px) * .62), 380px); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.stage__frame .frame { --matw: clamp(18px, 3vw, 42px); transition: background 700ms var(--ease-out); }
.stage__frame .frame__art { aspect-ratio: 513 / 719; }
.stage__wire { position: absolute; top: -46px; left: 50%; width: 46%; height: 46px; transform: translateX(-50%); pointer-events: none; }
.stage__wire::before, .stage__wire::after { content: ""; position: absolute; bottom: 0; width: 50%; height: 1px; background: rgba(238,234,226,.35); }
.stage__wire::before { left: 0; transform-origin: right bottom; transform: rotate(-24deg) translateX(2px); right: 50%; }
.stage__wire::after { right: 0; transform-origin: left bottom; transform: rotate(24deg) translateX(-2px); }
.stage__hook { position: absolute; top: -52px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--gilt); transform: translateX(-50%); box-shadow: 0 2px 4px rgba(0,0,0,.6); }
.samples { width: 100%; max-width: 440px; display: grid; gap: var(--s-2); }
.samples__wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.5rem, 2vw, 1rem); justify-items: center; }
.samples__wall .corner { width: 100%; max-width: 64px; height: auto; aspect-ratio: 1; min-width: 44px; --cw: clamp(11px, 3.4vw, 15px); }
.samples__wall .corner { animation: sway 7s var(--ease-micro) infinite alternate; transform-origin: 30% 0; }
.samples__wall .corner:nth-child(2n) { animation-duration: 8.4s; animation-delay: -2s; }
.samples__wall .corner:nth-child(3n) { animation-duration: 6.2s; animation-delay: -4s; }
@keyframes sway { from { translate: 0 0; rotate: -1.2deg; } to { translate: 0 5px; rotate: 1.2deg; } }
.samples__readout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--t-small); }
.samples__readout strong { font-family: var(--f-display); font-weight: 400; font-size: 1.125rem; }
.samples__readout span { color: var(--stone); }
.samples__hint { font-size: .8125rem; color: var(--stone); margin: 0; }

/* trust strip */
.trust { border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--ebony); }
.trust ul { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .trust ul { grid-template-columns: repeat(4, 1fr); } }
.trust li { display: grid; gap: .25rem; padding: var(--s-4) var(--s-3); border-left: 1px solid var(--line-soft); }
.trust li:first-child { border-left: 0; }
@media (max-width: 899px) { .trust li:nth-child(3) { border-left: 0; } .trust li:nth-child(n+3) { border-top: 1px solid var(--line-soft); } }
.trust strong { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); line-height: 1; color: var(--gesso); }
.trust span { font-size: .875rem; color: var(--stone); }
.stars { display: inline-flex; gap: 2px; color: var(--gilt); }
.stars svg { width: 16px; height: 16px; }

/* =========================================================
   SERVICES — hung wall
   ========================================================= */
.wall { display: grid; gap: var(--s-7) var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 720px) { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
  .wall { grid-template-columns: repeat(12, 1fr); align-items: start; }
  .wall > :nth-child(1) { grid-column: 1 / span 5; }
  .wall > :nth-child(2) { grid-column: 7 / span 4; margin-top: var(--s-8); }
  .wall > :nth-child(3) { grid-column: 2 / span 4; margin-top: calc(-1 * var(--s-6)); }
  .wall > :nth-child(4) { grid-column: 7 / span 5; margin-top: var(--s-4); }
}
.piece { display: block; position: relative; }
.piece .frame { transition: transform 600ms var(--ease-out); }
.piece:hover .frame { transform: translateY(-6px); }
.piece .frame__art { aspect-ratio: 4 / 3; }
.piece--tall .frame__art { aspect-ratio: 3 / 4; }
.piece .label__title { transition: color var(--d-micro) var(--ease-micro); }
.piece:hover .label__title { color: var(--gilt-lt); }
.piece__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .4rem; font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt); }
.piece__more svg { width: 14px; height: 14px; transition: transform var(--d-micro) var(--ease-micro); }
.piece:hover .piece__more svg { transform: translateX(4px); }

/* CSS-made art for services without a photo */
.art-stitch { display: block; width: 100%; height: 100%; }
.art-jersey { width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #33302B, #1C1915); }
.art-jersey svg { width: 64%; height: auto; filter: drop-shadow(0 12px 14px rgba(0,0,0,.6)); }

/* =========================================================
   HERITAGE
   ========================================================= */
.heritage { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 960px) { .heritage { grid-template-columns: 7fr 5fr; } }
.heritage__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-hang); }
.heritage__media img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transform: translateY(var(--py, 0)); will-change: transform; }
.heritage__media figcaption { position: absolute; left: 0; bottom: 0; padding: var(--s-2) var(--s-3); background: rgba(23,19,15,.78); font-size: .8125rem; color: var(--gesso); }
.heritage__copy { display: grid; gap: var(--s-3); }
.count { font-family: var(--f-display); font-size: clamp(4rem, 2.5rem + 6vw, 8rem); line-height: .9; color: var(--gilt); letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; }
.pillars { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
.pillars li { display: grid; grid-template-columns: 22px 1fr; gap: var(--s-2); align-items: start; }
.pillars .corner--sm { margin-top: .35rem; }
.pillars strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; line-height: 1.25; }
.pillars p { margin: .2rem 0 0; color: var(--stone); font-size: var(--t-small); }

/* =========================================================
   GALLERY STRIP
   ========================================================= */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 30vw, 400px); gap: var(--s-6); overflow-x: auto; padding: var(--s-3) var(--gutter) var(--s-5); scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--gilt) transparent; align-items: end; }
.strip > * { scroll-snap-align: start; }
.strip .frame { --mw: 14px; --matw: 22px; }
.strip .frame__art { aspect-ratio: auto; }
.strip .frame__art img { height: auto; }
.strip .piece:nth-child(odd) { margin-bottom: var(--s-5); }
.strip-wrap { margin-inline: calc(-1 * var(--gutter)); }

/* =========================================================
   REVIEWS
   ========================================================= */
.reviews-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-5); }
@media (min-width: 960px) { .reviews-head { grid-template-columns: 1fr auto; align-items: end; } }
.score { display: flex; align-items: center; gap: var(--s-3); }
.score__num { font-family: var(--f-display); font-size: 4rem; line-height: 1; }
.score__meta { display: grid; gap: .25rem; font-size: var(--t-small); color: var(--wall-muted); }
.score__g { width: 34px; height: 34px; }
.score .stars { color: #A67C2E; }
.tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid rgba(23,19,15,.18); margin-bottom: var(--s-5); position: relative; }
.tab { position: relative; min-height: 48px; padding: .75rem 1.1rem; font-weight: 700; font-size: .9375rem; letter-spacing: .01em; color: var(--wall-muted); transition: color var(--d-micro) var(--ease-micro); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--teal-ink); }
.tab .n { font-weight: 500; opacity: .8; margin-left: .3rem; }
.tabs__ink { position: absolute; bottom: -1px; height: 2px; background: var(--sign-teal); transition: transform 420ms var(--ease-out), width 420ms var(--ease-out); left: 0; }
.review-grid { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (max-width: 719px) {
  .review-grid--carousel { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s-3); scroll-padding-inline: var(--gutter); }
  .review-grid--carousel > * { scroll-snap-align: start; }
}
@media (min-width: 720px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4);
  background: rgba(251, 250, 246, .62); color: var(--ink);
  box-shadow: 0 1px 2px rgba(23,19,15,.12), 0 18px 34px -22px rgba(23,19,15,.45), inset 0 0 0 1px rgba(255,255,255,.7);
}
.review[hidden] { display: none; }
.review__top { display: flex; align-items: center; gap: .85rem; }
.avatar { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--teal-deep); color: var(--gesso); font-weight: 700; font-size: .9375rem; }
.review__name { font-weight: 700; line-height: 1.2; }
.review__date { font-size: .8125rem; color: var(--wall-muted); }
.review .stars { color: #A67C2E; }
.review__text { margin: 0; font-size: 1rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.review.is-open .review__text { -webkit-line-clamp: unset; }
.review__more { align-self: flex-start; font-size: .8125rem; font-weight: 700; color: var(--teal-ink); min-height: 32px; }
.review__foot { margin-top: auto; padding-top: var(--s-2); border-top: 1px solid rgba(23,19,15,.1); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wall-muted); display: flex; align-items: center; gap: .5rem; }
.review__foot svg { width: 14px; height: 14px; }
.review--empty { background: transparent; box-shadow: inset 0 0 0 1px rgba(23,19,15,.25); justify-content: center; }
.review--empty h3 { font-size: 1.5rem; }
.reviews-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }

/* =========================================================
   PROCESS (a real sequence — numbered)
   ========================================================= */
.process { position: relative; display: grid; gap: var(--s-5); counter-reset: step; }
@media (min-width: 900px) { .process { grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } }
.process__line { display: none; }
@media (min-width: 900px) { .process__line { display: block; position: absolute; top: 28px; left: 0; right: 0; height: 1px; background: var(--line-soft); }
  .process__line::after { content: ""; position: absolute; inset: 0; background: var(--gilt); transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform 200ms linear; } }
.step { position: relative; display: grid; gap: var(--s-2); }
.step__n { counter-increment: step; width: 56px; height: 56px; display: grid; place-items: center; background: var(--ebony); box-shadow: inset 0 0 0 1px var(--gilt); font-family: var(--f-display); font-size: 1.5rem; color: var(--gilt); position: relative; }
.step__n::before { content: counter(step); }
.step h3 { font-size: 1.5rem; letter-spacing: -.01em; }
.step p { color: var(--stone); margin: 0; font-size: 1rem; }

/* =========================================================
   VISIT
   ========================================================= */
.visit { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .visit { grid-template-columns: 5fr 7fr; align-items: stretch; } }
.visit__card { display: grid; gap: var(--s-4); align-content: start; }
.visit dl { display: grid; gap: var(--s-3); margin: 0; }
.visit dt { font-size: var(--t-placard); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt); margin-bottom: .35rem; }
.visit dd { margin: 0; }
.hours { width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.hours td { padding: .45rem 0; border-bottom: 1px solid var(--line-soft); }
.hours td:last-child { text-align: right; color: var(--stone); }
.hours tr.is-today td { color: var(--gilt-lt); font-weight: 700; }
.map { position: relative; min-height: 380px; box-shadow: var(--shadow-hang); background: var(--walnut); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.areas { display: flex; flex-wrap: wrap; gap: .5rem; }
.areas li { padding: .35rem .8rem; font-size: .875rem; box-shadow: inset 0 0 0 1px var(--line); }

/* =========================================================
   FAQ
   ========================================================= */
.faq { display: grid; border-top: 1px solid var(--line-soft); }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; min-height: 64px; font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.625rem); letter-spacing: -.01em; line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; border-right: 1.5px solid var(--gilt); border-bottom: 1.5px solid var(--gilt); transform: rotate(45deg) translateY(-4px); transition: transform var(--d-micro) var(--ease-micro); }
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq summary:hover { color: var(--gilt-lt); }
.faq .faq__a { padding: 0 0 var(--s-4); color: var(--stone); max-width: 68ch; }
.faq .faq__a p:last-child { margin: 0; }

/* =========================================================
   QUOTE FORM
   ========================================================= */
.quote { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .quote { grid-template-columns: 5fr 7fr; align-items: start; } }
.quote__intro { display: grid; gap: var(--s-3); }
.quote__intro .h2 { color: var(--ink); }
.quote__direct { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.quote__direct a { display: inline-flex; align-items: center; gap: .75rem; font-weight: 700; min-height: 44px; }
.quote__direct svg { width: 20px; height: 20px; color: var(--teal-ink); }
.form-frame { --moulding: var(--m-ebony); --mw: 14px; padding: var(--mw); background: var(--moulding); box-shadow: var(--shadow-hang); }
.form { background: var(--bevel); color: var(--ink); padding: clamp(1.5rem, 1rem + 2.5vw, 3rem); display: grid; gap: var(--s-3); box-shadow: inset 0 2px 6px rgba(0,0,0,.25); }
.form__row { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field label, .field legend { font-size: .875rem; font-weight: 700; letter-spacing: .02em; }
.field .req { color: #8E3B2C; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .8rem 1rem; border-radius: 0;
  background: #fff; color: var(--ink); border: 1px solid #A39B90; font-size: 1rem;
  transition: border-color var(--d-micro) var(--ease-micro), box-shadow var(--d-micro) var(--ease-micro);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 22px, calc(100% - 16px) 22px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sign-teal); box-shadow: 0 0 0 3px rgba(11,138,134,.25); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #A3352A; box-shadow: 0 0 0 3px rgba(163,53,42,.15); }
.field__error { font-size: .8125rem; color: #A3352A; font-weight: 700; min-height: 0; }
.field__hint { font-size: .8125rem; color: var(--wall-muted); }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: 44px; padding: .6rem 1rem; border: 1px solid #A39B90; font-size: .9375rem; cursor: pointer; transition: background-color var(--d-micro), border-color var(--d-micro), color var(--d-micro); }
.choice input:checked + span { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--gesso); }
.choice input:focus-visible + span { outline: 2px solid var(--sign-teal); outline-offset: 2px; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: .75rem; align-items: start; font-size: .875rem; color: var(--wall-muted); }
.consent input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--sign-teal); }
.consent a { color: var(--teal-ink); text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { width: 100%; }
.form__status { font-size: .9375rem; font-weight: 700; }
.form__status.is-error { color: #A3352A; }
.form-success { display: none; text-align: center; padding: var(--s-5) var(--s-3); gap: var(--s-2); justify-items: center; }
.form.is-sent .form-body { display: none; }
.form.is-sent .form-success { display: grid; }
.check { width: 64px; height: 64px; }
.check circle { stroke: var(--sign-teal); stroke-width: 2; fill: none; stroke-dasharray: 190; stroke-dashoffset: 190; animation: draw 900ms var(--ease-out) forwards; }
.check path { stroke: var(--sign-teal); stroke-width: 3; fill: none; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 600ms var(--ease-out) 500ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* =========================================================
   CTA BAND + FOOTER
   ========================================================= */
.cta-band { position: relative; overflow: hidden; padding-block: var(--s-8); background: var(--teal-deep); }
.cta-band .container { display: grid; gap: var(--s-4); align-items: end; }
@media (min-width: 960px) { .cta-band .container { grid-template-columns: 1fr auto; } }
.cta-band h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); max-width: 18ch; }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cta-band .corner { position: absolute; right: -10px; top: -10px; width: 180px; height: 180px; --cw: 34px; opacity: .25; pointer-events: none; transform: rotate(90deg); }

.footer { background: var(--ebony); border-top: 1px solid var(--line-soft); padding-top: var(--s-8); font-size: var(--t-small); }
.footer__grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; } }
.footer__brand img { height: 56px; width: auto; box-shadow: 0 0 0 3px #0B8A86; margin-bottom: var(--s-3); }
.footer__brand p { color: var(--stone); max-width: 34ch; }
.footer h2 { font-family: var(--f-body); font-size: var(--t-placard); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt); margin-bottom: var(--s-3); line-height: 1.4; }
.footer li + li { margin-top: .35rem; }
.footer a { display: inline-flex; min-height: 32px; align-items: center; color: var(--gesso); transition: color var(--d-micro); }
.footer a:hover { color: var(--gilt-lt); }
.footer address { color: var(--stone); line-height: 1.7; }
.footer address a { color: var(--gesso); }
.footer .social { margin-top: var(--s-2); margin-left: -8px; }
.footer__bottom { margin-top: var(--s-7); padding-block: var(--s-4); border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); color: var(--stone); font-size: .875rem; }
.footer__bottom a { color: var(--gilt); min-height: 0; }
.footer__bottom a:hover { color: var(--gilt-lt); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); }

/* =========================================================
   MOBILE CALL / WHATSAPP BAR
   ========================================================= */
.mobile-bar { display: none; }
@media (max-width: 767px) {
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .mobile-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(23, 19, 15, .78); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 -1px 0 var(--line), 0 -12px 30px -12px rgba(0,0,0,.7);
  }
  .mobile-bar a { display: flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; font-weight: 700; font-size: .9375rem; letter-spacing: .04em; }
  .mobile-bar svg { width: 20px; height: 20px; }
  .mobile-bar__call { background: var(--gilt); color: var(--ebony); }
  .mobile-bar__wa { background: #1E8E4E; color: #fff; }
}

/* =========================================================
   DEMO POPUP
   ========================================================= */
.demo { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--gutter); }
.demo[hidden] { display: none; }
.demo__backdrop { position: absolute; inset: 0; background: rgba(10, 8, 6, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 500ms var(--ease-out); }
.demo__panel {
  --moulding: var(--m-gilt);
  position: relative; width: min(540px, 100%); padding: 12px; background: var(--moulding);
  box-shadow: var(--shadow-hang);
  opacity: 0; transform: translateY(-24px) scale(.97); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
}
.demo__inner {
  position: relative; padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  background: rgba(23, 19, 15, .86); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(228,201,137,.25);
  display: grid; gap: var(--s-3); max-height: calc(100vh - 3rem); overflow-y: auto;
}
.demo.is-open .demo__backdrop { opacity: 1; }
.demo.is-open .demo__panel { opacity: 1; transform: none; }
.demo__badge { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem; background: var(--sign-teal); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.demo__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.demo h2 { font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); }
.demo p { margin: 0; color: var(--stone); }
.demo__strong { color: var(--gesso) !important; font-family: var(--f-display); font-size: 1.375rem; line-height: 1.3; }
.demo__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.demo__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--gesso); }
.demo__close:hover { color: var(--gilt-lt); }
.demo__close svg { width: 20px; height: 20px; }

/* =========================================================
   INNER PAGES
   ========================================================= */
.page-hero { position: relative; padding-top: var(--s-7); padding-bottom: var(--s-7); overflow: hidden; border-bottom: 1px solid var(--line-soft); }
.page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50vw 60vh at 85% 20%, rgba(228,201,137,.12), transparent 60%); }
.page-hero__grid { position: relative; display: grid; gap: var(--s-6); align-items: end; }
@media (min-width: 960px) { .page-hero__grid { grid-template-columns: 7fr 5fr; } }
.page-hero h1 { font-size: clamp(2.625rem, 1.6rem + 4.2vw, 5rem); margin-top: var(--s-3); }
.page-hero .lead { margin-top: var(--s-3); }
.page-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; margin-top: var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; font-size: .8125rem; color: var(--stone); }
.crumbs li + li::before { content: "/"; margin-right: .5rem; color: var(--gilt-dk); }
.crumbs a:hover { color: var(--gilt-lt); }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); margin: var(--s-6) 0 var(--s-3); }
.prose h3 { font-size: 1.5rem; margin: var(--s-5) 0 var(--s-2); letter-spacing: -.01em; }
.prose p, .prose li { color: var(--gesso); }
.prose ul.ticks { display: grid; gap: .6rem; margin: 0 0 1.2em; }
.prose ul.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: .75rem; align-items: start; }
.prose ul.ticks .corner--sm { margin-top: .4rem; }
.two-col { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) { .two-col { grid-template-columns: 7fr 5fr; align-items: start; } }
.aside-stick { position: sticky; top: 100px; display: grid; gap: var(--s-4); }
.options { display: grid; gap: var(--s-3); grid-template-columns: 1fr; margin-top: var(--s-4); }
@media (min-width: 720px) { .options { grid-template-columns: repeat(3, 1fr); } }
.option { padding: var(--s-4); background: var(--walnut); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--line-soft); display: grid; gap: var(--s-2); align-content: start; }
.option h3 { font-size: 1.375rem; letter-spacing: -.01em; }
.option p { margin: 0; color: var(--stone); font-size: 1rem; }
.related { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .related { grid-template-columns: 1fr 1fr; } }
.related a { display: grid; grid-template-columns: 30px 1fr auto; gap: var(--s-2); align-items: center; padding: var(--s-3); box-shadow: inset 0 0 0 1px var(--line-soft); transition: background-color var(--d-micro), box-shadow var(--d-micro); }
.related a:hover { background: rgba(198,161,91,.08); box-shadow: inset 0 0 0 1px var(--line); }
.related strong { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; }
.related svg { width: 18px; height: 18px; color: var(--gilt); }

/* =========================================================
   REVEAL MOTION (JS adds .js to <html>)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(-24px); transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path var(--d-mask) var(--ease-mask); transition-delay: calc(var(--i, 0) * 110ms); }
  .js [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }
  .js [data-reveal="rule"] { opacity: 1; transform: scaleX(0); transition: transform var(--d-mask) var(--ease-mask); }
  .js [data-reveal="rule"].is-in { transform: scaleX(1); }
  .js .hero__title .line > span { transform: translateY(105%); transition: transform var(--d-enter) var(--ease-out); transition-delay: calc(200ms + var(--i, 0) * 80ms); }
  .js .is-loaded .hero__title .line > span { transform: none; }
  .js .hero [data-load] { opacity: 0; transform: translateY(-16px); transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); transition-delay: var(--delay, 0ms); }
  .js .is-loaded .hero [data-load] { opacity: 1; transform: none; }
  .js .stage__frame .frame__art img { clip-path: inset(0 0 100% 0); transition: clip-path var(--d-mask) var(--ease-mask) 500ms; }
  .js .is-loaded .stage__frame .frame__art img { clip-path: inset(0); }
  .js .samples__wall .corner { opacity: 0; transition: opacity var(--d-enter) var(--ease-out), transform var(--d-micro) var(--ease-micro), filter var(--d-micro) var(--ease-micro); transition-delay: calc(900ms + var(--i, 0) * 80ms), 0ms, 0ms; }
  .js .is-loaded .samples__wall .corner { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   SERVICES HUB, GALLERY GRID, LIGHTBOX
   ========================================================= */
.hub-row { margin-bottom: var(--s-8); }
.hub-row:last-child { margin-bottom: 0; }
.hub-row h2 a:hover { color: var(--gilt-lt); }
@media (min-width: 960px) { .hub-row--flip { grid-template-columns: 5fr 7fr; } .hub-row--flip > .piece { order: 2; } }

.gallery-grid { columns: 1; column-gap: var(--gutter); }
@media (min-width: 640px) { .gallery-grid { columns: 2; } }
@media (min-width: 1040px) { .gallery-grid { columns: 3; } }
.gallery-grid .piece { break-inside: avoid; margin: 0 0 var(--s-7); }
.gal-open { display: block; width: 100%; text-align: left; cursor: zoom-in; }
.gal-open .frame, .gal-open .frame__mat, .gal-open .frame__art { display: block; }
.gal-open .frame { transition: transform 600ms var(--ease-out); }
.gal-open:hover .frame { transform: translateY(-6px); }

.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-6) var(--s-8); }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(10, 8, 6, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox__figure { position: relative; margin: 0; max-width: min(820px, 100%); }
.lightbox__figure img { max-height: calc(100vh - 16rem); width: auto; margin-inline: auto; }
.lightbox__figure .frame__art { display: flex; justify-content: center; }
.lightbox__btn { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; color: var(--gesso); box-shadow: inset 0 0 0 1px var(--line); background: rgba(23,19,15,.6); transition: background-color var(--d-micro); }
.lightbox__btn:hover { background: rgba(198,161,91,.2); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__prev { left: var(--s-3); top: 50%; transform: translateY(-50%) rotate(180deg); }
.lightbox__next { right: var(--s-3); top: 50%; transform: translateY(-50%); }
.lightbox__close { right: var(--s-3); top: var(--s-3); }
@media (max-width: 719px) { .lightbox { padding: var(--s-7) var(--s-2); } .lightbox__prev, .lightbox__next { top: auto; bottom: var(--s-2); transform: none; } .lightbox__prev svg { transform: rotate(180deg); } }

/* =========================================================
   REVIEW CAROUSEL (home)
   ========================================================= */
.rc { position: relative; }
.rc__track {
  --per: 1; --gap: var(--s-3);
  display: grid; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; padding: var(--s-1) 2px var(--s-4); cursor: grab;
}
.rc__track::-webkit-scrollbar { display: none; }
.rc__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.rc__track.is-dragging * { pointer-events: none; user-select: none; }
.rc__track > * { scroll-snap-align: start; }
.rc__track:focus-visible { outline-offset: 6px; }
@media (min-width: 720px) { .rc__track { --per: 2; } }
@media (min-width: 1100px) { .rc__track { --per: 3; } }
@media (max-width: 719px) { .rc__track { grid-auto-columns: 86%; } }
.rc__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); }
.rc__btn {
  width: 52px; height: 52px; flex: none; display: grid; place-items: center;
  color: var(--ink); box-shadow: inset 0 0 0 1px rgba(23,19,15,.35);
  transition: background-color var(--d-micro) var(--ease-micro), color var(--d-micro) var(--ease-micro), opacity var(--d-micro);
}
.rc__btn svg { width: 20px; height: 20px; }
.rc__prev svg { transform: rotate(180deg); }
.rc__btn:hover:not([disabled]) { background: var(--teal-deep); color: var(--gesso); box-shadow: none; }
.rc__btn[disabled] { opacity: .3; cursor: default; }
.rc__dots { flex: 1; display: flex; justify-content: center; gap: .5rem; }
.rc__dots span { width: 22px; height: 2px; background: rgba(23,19,15,.22); transition: background-color var(--d-micro), width 420ms var(--ease-out); }
.rc__dots span.is-on { width: 44px; background: var(--sign-teal); }

/* =========================================================
   THE COLLECTION — salon hang on a picture rail
   ========================================================= */
.collection { background: linear-gradient(180deg, #17130F 0%, #1D1813 40%, #1A1511 100%); overflow: hidden; isolation: isolate; }
.collection__wall { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.collection__wall .hero__linen { position: absolute; inset: 0; }
.collection__head { display: grid; gap: var(--s-3) var(--gutter); align-items: end; margin-bottom: var(--s-6); }
.collection__head > p { margin: 0; max-width: 46ch; }
@media (min-width: 960px) { .collection__head { grid-template-columns: 7fr 5fr; } }
.collection__rail {
  position: relative; height: 12px;
  background: linear-gradient(180deg, #F0DCA2 0%, #B48B3E 35%, #6F5220 70%, #3A2A10 100%);
  box-shadow: inset 0 1px 0 rgba(255,240,200,.3), 0 3px 4px rgba(0,0,0,.55), 0 16px 28px rgba(0,0,0,.4);
}
.salon { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.salon__item { position: relative; padding-top: var(--drop, 40px); }
.hang { position: relative; display: grid; justify-items: center; text-align: center; gap: var(--s-2); color: var(--gesso); }
.hang__wire { position: absolute; top: calc(-1 * var(--drop, 40px) - 2px); left: 18%; width: 64%; height: calc(var(--drop, 40px) + 8px); overflow: visible; z-index: 1; }
.hang__wire path { fill: none; stroke: rgba(238,234,226,.32); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hang__nail { position: absolute; top: calc(-1 * var(--drop, 40px) - 6px); left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #F3E0A8, #8A6A2B 70%); box-shadow: 0 2px 3px rgba(0,0,0,.6); }
.hang__light { /* ceiling spot aimed at this frame */
  position: absolute; z-index: -1; pointer-events: none; left: 50%; top: calc(-1 * var(--drop, 40px) - 12px);
  width: 190%; height: calc(100% + var(--drop, 40px) + 40px); transform: translateX(-50%);
  background:
    conic-gradient(from 180deg at 50% 0%, transparent 0 158deg, rgba(255, 228, 176, .10) 168deg, rgba(255, 234, 190, .16) 180deg, rgba(255, 228, 176, .10) 192deg, transparent 202deg 360deg),
    radial-gradient(48% 34% at 50% 44%, rgba(255, 222, 160, .16), transparent 70%);
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent 96%); mask: linear-gradient(180deg, #000 55%, transparent 96%);
  opacity: .7;
}
.js .hang__light { opacity: 0; transition: opacity 1400ms var(--ease-out) calc(300ms + var(--i, 0) * 180ms); }
.js .salon__item.is-in .hang__light { opacity: .7; }
.hang:hover .hang__light, .hang:focus-visible .hang__light { opacity: 1 !important; transition-delay: 0ms; transition-duration: 400ms; }
.hang__body { display: block; width: 100%; transform-origin: 50% calc(-1 * var(--drop, 40px)); }
.hang__body .frame, .hang__body .frame__mat, .hang__body .frame__art { display: block; }
.hang__body .art-jersey { display: grid; }
.hang:hover .hang__body { animation: swing 1600ms var(--ease-out); }
@keyframes swing { 0% { transform: rotate(0); } 22% { transform: rotate(1.4deg); } 52% { transform: rotate(-.8deg); } 78% { transform: rotate(.3deg); } 100% { transform: rotate(0); } }
.hang:hover .frame__art::after, .hang:focus-visible .frame__art::after { transform: translateX(75%); }
.plaque {
  position: relative; display: grid; gap: .15rem; margin-top: var(--s-2); padding: .7rem 1.4rem .75rem; min-width: 74%;
  background: linear-gradient(135deg, #8A6A2B 0%, #E6CD8E 28%, #B48B3E 52%, #EAD39A 74%, #8A6A2B 100%);
  color: #2A1E0C; box-shadow: inset 0 0 0 1px rgba(255,240,200,.45), inset 0 0 0 3px rgba(90,65,20,.35), 0 2px 3px rgba(0,0,0,.5), 0 10px 18px -6px rgba(0,0,0,.6);
}
.plaque::before, .plaque::after { /* screw heads */
  content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #F6E7B8, #6F5220); box-shadow: 0 1px 0 rgba(255,240,200,.4);
}
.plaque::before { left: 7px; } .plaque::after { right: 7px; }
.plaque__title { font-family: var(--f-display); font-size: 1.1875rem; line-height: 1.2; letter-spacing: -.005em; text-shadow: 0 1px 0 rgba(255,240,200,.45); }
.plaque__meta { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .88; text-wrap: balance; }
.salon__desc { font-size: .9688rem; line-height: 1.6; color: var(--stone); max-width: 30ch; }
.hang .piece__more { margin-top: 0; }
.hang:hover .piece__more svg { transform: translateX(4px); }
@media (max-width: 1099px) {
  .salon { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(250px, 42%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--s-3); scroll-padding-inline: var(--gutter); }
  .salon::-webkit-scrollbar { display: none; }
  .salon__item { scroll-snap-align: start; }
}
@media (max-width: 639px) { .salon { grid-auto-columns: 78%; } }
@media (prefers-reduced-motion: reduce) { .js .hang__light { opacity: .7; } }