/* ── cs-tokens v1 — fluid design-token foundation. Paste verbatim; fill only the palette. ── */
:root {
  /* PALETTE — base + counterpoint. 2–4 hues total (tonal steps of one hue count as one). */
  --bg:      #FCF9F5;   /* warm cream-white — brand's own site bg */
  --card:    #F4E7E1;   /* soft blush surface — alternating section / card bg */
  --text:    #2B2622;   /* warm espresso near-black — >=7:1 on --bg */
  --muted:   #6B5F57;   /* captions/metadata ONLY, never body copy */
  --accent:  #C3953B;   /* BASE — antique gold, sampled from the V·ink cursive wordmark */
  --accent2: #C0827A;   /* COUNTERPOINT — muted rose/coral, the healed lip-blush tone */
  --accent-rgb: 195,149,59;                    /* --accent's 3 DECIMAL channels */
  --accent-light: rgba(var(--accent-rgb),.08); /* DERIVED — do NOT fill */
  --border:  rgba(0,0,0,.08);

  /* FLUID TYPE SCALE — 7 steps, clamp(min, preferred, max). Do NOT hard-code px on text. */
  --fs-xs:   clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem);
  --fs-sm:   clamp(0.875rem, 0.80rem + 0.38vw, 1.00rem);
  --fs-base: clamp(1.00rem, 0.90rem + 0.50vw, 1.25rem);
  --fs-lg:   clamp(1.25rem, 1.10rem + 0.75vw, 1.75rem);
  --fs-xl:   clamp(1.75rem, 1.50rem + 1.25vw, 2.50rem);
  --fs-2xl:  clamp(2.50rem, 2.00rem + 2.50vw, 4.00rem);
  --fs-3xl:  clamp(3.50rem, 2.50rem + 5.00vw, 6.00rem);

  /* FLUID SPACE SCALE — 7 steps. Use for padding/margin/gap; do NOT hard-code section px. */
  --sp-2xs:  clamp(0.25rem, 0.20rem + 0.25vw, 0.375rem);
  --sp-xs:   clamp(0.50rem, 0.40rem + 0.50vw, 0.75rem);
  --sp-sm:   clamp(0.75rem, 0.60rem + 0.75vw, 1.125rem);
  --sp-md:   clamp(1.00rem, 0.80rem + 1.00vw, 1.50rem);
  --sp-lg:   clamp(1.50rem, 1.20rem + 1.50vw, 2.25rem);
  --sp-xl:   clamp(2.00rem, 1.60rem + 2.00vw, 3.00rem);
  --sp-2xl:  clamp(3.00rem, 2.40rem + 3.00vw, 4.50rem);

  /* MOTION — duration + easing tokens. */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
}
body { background: var(--bg); color: var(--text); font-size: var(--fs-base); }

/* FOCUS-VISIBLE — required a11y floor, paste verbatim */
:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* ── BASE RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ── TYPOGRAPHY ── */
body {
  font-family: 'Lato', sans-serif;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
p  { font-size: var(--fs-base); line-height: 1.72; }

/* ── UTILITY ── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}
.eyebrow {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.section-title {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-2xl);
  font-weight: 400;
  color: var(--text);
  margin-bottom: var(--sp-md);
}
.section-intro {
  font-size: var(--fs-base);
  color: var(--muted);
  max-width: 56ch;
}

/* ── GOLD HAIRLINE DIVIDER ── */
.gold-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  margin: var(--sp-xl) auto;
}
.gold-rule::before,
.gold-rule::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
}

/* ── GOLD DIAMOND SVG ── */
.gold-diamond-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-md);
}
.gold-diamond-svg {
  width: 28px;
  height: 36px;
  overflow: visible;
}
.diamond-path {
  stroke: var(--accent);
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}
.diamond-path.draw {
  animation: drawDiamond 1.4s var(--ease-emphasis) 0.3s forwards;
}
@keyframes drawDiamond {
  to { stroke-dashoffset: 0; }
}

/* ── SECTION DIVIDER (gold diamond inline) ── */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  padding: var(--sp-xl) 0 var(--sp-lg);
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: var(--accent);
  opacity: 0.35;
}
.section-divider svg {
  flex-shrink: 0;
  width: 18px;
  height: 24px;
}

/* ── NAV ── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--sp-sm) 0;
  transition: background var(--dur-slow) var(--ease-standard),
              box-shadow var(--dur-slow) var(--ease-standard);
}
.site-nav.scrolled {
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.07);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--sp-lg);
}
.nav-logo-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
img.nav-logo {
  height: 42px;
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
.nav-links a {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #FCF9F5;
  padding: var(--sp-xs) var(--sp-xs);
  transition: color var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-nav.scrolled .nav-links a {
  color: var(--text);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--accent);
}
.nav-cta {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: #fff !important;
  padding: 11px var(--sp-md) !important;
  border-radius: 2px;
  min-height: 44px;
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.nav-cta:hover {
  background: #a87c30;
  color: #fff !important;
}

/* ── MOBILE HAMBURGER ── */
.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--sp-xs);
  background: none;
  border: none;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}
.nav-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #FCF9F5;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
  transform-origin: center;
}
.site-nav.scrolled .nav-burger span {
  background: var(--text);
}
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE DRAWER — ND-1: opaque panel ── */
.nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(43, 38, 34, 0.97); /* ND-1: alpha 0.97 >= 0.92 */
  z-index: 99;
  flex-direction: column;
  padding-top: 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.open {
  display: flex;
}
/* ND-2: 44px by padding; ND-3: color on the <a> directly */
.nav-drawer a {
  display: block;
  color: #FCF9F5; /* ND-3: color on the anchor itself */
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0.06em;
  padding: 13px var(--sp-xl); /* ND-2: 13px top + 13px bottom = 26px + fs-base line = 44px+ */
  min-height: 44px; /* ND-2: guaranteed floor */
  border-bottom: 1px solid rgba(195,149,59,0.15);
  transition: color var(--dur-fast) var(--ease-standard);
}
.nav-drawer a:hover,
.nav-drawer a[aria-current="page"] {
  color: var(--accent);
}
.nav-drawer .drawer-cta {
  margin: var(--sp-md) var(--sp-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px var(--sp-lg);
  min-height: 44px;
  border-radius: 2px;
  border-bottom: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.nav-drawer .drawer-cta:hover {
  color: #fff;
  background: #a87c30;
}

@media (max-width: 1024px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* ── HERO ── */
.hero-wrap {
  height: 200vh;
  position: relative;
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
#heroCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* CANVAS SCRIM LAW: gradient ancestor between canvas and text, alpha >= 0.25 */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(43,38,34,0.50) 0%,
    rgba(43,38,34,0.18) 45%,
    rgba(43,38,34,0.55) 100%
  );
  pointer-events: none;
}
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #FCF9F5;
  padding: var(--sp-xl) var(--sp-lg);
  pointer-events: none;
}
.hero-logo-img {
  height: 64px;
  width: auto;
  margin-bottom: var(--sp-md);
  filter: brightness(0) invert(1); /* white version on dark hero */
  pointer-events: auto;
}
.hero-kicker {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-2xl);
  font-weight: 400;
  color: #FCF9F5;
  margin-bottom: var(--sp-xs);
  letter-spacing: 0.02em;
}
.hero-sub {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 300;
  color: rgba(252,249,245,0.85);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--sp-lg);
}
.hero-cta-wrap {
  display: flex;
  gap: var(--sp-sm);
  pointer-events: auto;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px var(--sp-lg);
  background: var(--accent);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn-primary:hover {
  background: #a87c30;
  transform: translateY(-1px);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px var(--sp-lg);
  border: 1px solid rgba(252,249,245,0.7);
  color: #FCF9F5;
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.btn-outline:hover {
  background: rgba(252,249,245,0.12);
}
.hero-scroll-hint {
  position: absolute;
  bottom: var(--sp-xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2xs);
  color: rgba(252,249,245,0.65);
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
}
.hero-scroll-hint::after {
  content: '';
  display: block;
  width: 1px;
  height: 40px;
  background: rgba(195,149,59,0.7);
  animation: scrollLine 2s var(--ease-emphasis) infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── INNER PAGE HERO (no canvas) ── */
.page-hero {
  padding-top: calc(70px + var(--sp-2xl));
  padding-bottom: var(--sp-2xl);
  background: var(--card);
  text-align: center;
}
.page-hero .eyebrow { margin-bottom: var(--sp-xs); }
.page-hero h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-sm); }
.page-hero p { color: var(--muted); max-width: 52ch; margin: 0 auto; }

/* ── DISCIPLINES STRIP ── */
.disciplines {
  padding: var(--sp-2xl) 0;
  background: var(--bg);
}
.disciplines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
  margin-top: var(--sp-xl);
}
.discipline-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg);
  padding: 8px;                                              /* mat — GATE: padding>=8px */
  border: 1px solid rgba(195,149,59,0.25);
  box-shadow: inset 0 0 0 1px rgba(195,149,59,0.38);        /* GATE: inset inner rule */
}
.discipline-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.discipline-card:hover img {
  transform: scale(1.04);
}
.discipline-card-body {
  position: absolute;
  inset: 8px;
  background: linear-gradient(to top, rgba(43,38,34,0.78) 0%, transparent 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-lg);
  z-index: 3;
}
.discipline-card-body h3 {
  font-size: var(--fs-lg);
  color: #FCF9F5;
  margin-bottom: var(--sp-2xs);
}
.discipline-card-body p {
  font-size: var(--fs-xs);
  color: rgba(252,249,245,0.8);
  margin-bottom: var(--sp-sm);
}
.discipline-card-body a {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  min-height: 44px;
  padding: var(--sp-xs) 0;
}

@media (max-width: 768px) {
  .disciplines-grid { grid-template-columns: 1fr; }
  .discipline-card { aspect-ratio: 4/3; }
}

/* ── GALLERY STRIP (home) ── */
.gallery-strip {
  padding: var(--sp-2xl) 0;
  background: var(--card);
  overflow: hidden;
}
.gallery-strip-header {
  text-align: center;
  margin-bottom: var(--sp-xl);
}
.filmstrip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-xs);
}
.filmstrip-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(195,149,59,0.2);
}
.filmstrip-tile::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(195,149,59,0.4);
  pointer-events: none;
  z-index: 2;
}
.filmstrip-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.filmstrip-tile:hover img {
  transform: scale(1.06);
}
@media (max-width: 900px) {
  .filmstrip { grid-template-columns: repeat(3, 1fr); }
  .filmstrip-tile:nth-child(n+4) { display: none; }
}
@media (max-width: 480px) {
  .filmstrip { grid-template-columns: repeat(2, 1fr); }
  .filmstrip-tile:nth-child(n+3) { display: none; }
}

/* ── GALLERY PAGE GRID ── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-md);
  padding: var(--sp-2xl) 0;
}
.gallery-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg);
  padding: 8px;                                              /* mat — GATE: padding>=8px */
  border: 1px solid rgba(195,149,59,0.22);
  box-shadow: inset 0 0 0 1px rgba(195,149,59,0.38);        /* GATE: inset inner rule */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-emphasis),
              transform var(--dur-slow) var(--ease-emphasis);
}
.gallery-tile.revealed {
  opacity: 1;
  transform: translateY(0);
}
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.gallery-tile:hover img {
  transform: scale(1.05);
}
.gallery-tile-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  padding: var(--sp-md) var(--sp-sm) var(--sp-sm);
  background: linear-gradient(to top, rgba(43,38,34,0.72) 0%, transparent 100%);
  color: rgba(252,249,245,0.9);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  z-index: 3;
}

/* ── PROCESS STEPS ── */
.process {
  padding: var(--sp-2xl) 0;
  background: var(--bg);
}
.process-header {
  text-align: center;
  margin-bottom: var(--sp-xl);
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-md);
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(10% + var(--sp-lg));
  right: calc(10% + var(--sp-lg));
  height: 1px;
  background: rgba(195,149,59,0.35);
  z-index: 0;
}
.process-step {
  position: relative;
  text-align: center;
  z-index: 1;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-emphasis),
              transform var(--dur-slow) var(--ease-emphasis);
}
.process-step.revealed {
  opacity: 1;
  transform: translateY(0);
}
.step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-sm);
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-lg);
  color: var(--accent);
  font-weight: 400;
}
.process-step h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: var(--sp-2xs);
}
.process-step p {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-lg);
  }
  .process-steps::before { display: none; }
}
@media (max-width: 480px) {
  .process-steps { grid-template-columns: 1fr; }
}

/* ── TESTIMONIALS ── */
.testimonials {
  padding: var(--sp-2xl) 0;
  background: var(--card);
}
.testimonials-header {
  text-align: center;
  margin-bottom: var(--sp-xl);
}
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-lg);
}
.testimonial-card {
  background: var(--bg);
  padding: var(--sp-xl);
  border: 1px solid rgba(195,149,59,0.2);
  position: relative;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-emphasis),
              transform var(--dur-slow) var(--ease-emphasis);
}
.testimonial-card.revealed {
  opacity: 1;
  transform: translateY(0);
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: var(--sp-sm);
  left: var(--sp-lg);
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-2xl);
  color: var(--accent);
  opacity: 0.4;
  line-height: 1;
}
.testimonial-text {
  font-size: var(--fs-sm);
  color: var(--text);
  line-height: 1.7;
  margin-bottom: var(--sp-md);
  padding-top: var(--sp-lg);
}
.testimonial-name {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
@media (max-width: 900px) {
  .testimonials-grid { grid-template-columns: 1fr; }
}

/* ── OFFER CARD ── */
.offer-section {
  padding: var(--sp-2xl) 0;
  background: var(--bg);
}
.offer-card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid rgba(192,130,122,0.4);
  padding: var(--sp-2xl);
  text-align: center;
  position: relative;
}
.offer-card::before,
.offer-card::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(192,130,122,0.2);
  pointer-events: none;
}
.offer-card h3 {
  font-size: var(--fs-xl);
  margin: var(--sp-md) 0 var(--sp-sm);
  color: var(--text);
}
.offer-card p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--sp-md);
  line-height: 1.7;
}
.offer-card .btn-accent {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 13px var(--sp-lg);
  background: var(--accent2);
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background var(--dur-fast) var(--ease-standard);
}
.offer-card .btn-accent:hover {
  background: #a86060;
}

/* ── MULTI-BOOKING SAVE ── */
.savings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin-top: var(--sp-lg);
}
.savings-card {
  background: var(--bg);
  border: 1px solid rgba(195,149,59,0.25);
  padding: var(--sp-xl);
  text-align: center;
}
.savings-amount {
  font-family: 'Playfair Display', serif;
  font-size: var(--fs-2xl);
  color: var(--accent);
  display: block;
  margin-bottom: var(--sp-2xs);
}
.savings-label {
  font-size: var(--fs-sm);
  color: var(--muted);
}
@media (max-width: 540px) {
  .savings-grid { grid-template-columns: 1fr; }
}

/* ── VISIT / CONTACT SECTION ── */
.visit-section {
  padding: var(--sp-2xl) 0;
  background: var(--card);
}
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: start;
}
.visit-info h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-lg);
}
.contact-line {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-md);
  margin-bottom: var(--sp-lg);
}
.contact-line-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 14px;
}
.contact-line-body h4 {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-2xs);
}
.contact-line-body a,
.contact-line-body p {
  font-size: var(--fs-base);
  color: var(--text);
  transition: color var(--dur-fast) var(--ease-standard);
}
.contact-line-body a:hover {
  color: var(--accent);
}
.visit-map {
  background: var(--bg);
  aspect-ratio: 4/3;
  border: 1px solid rgba(195,149,59,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--sp-xl);
}
@media (max-width: 768px) {
  .visit-grid { grid-template-columns: 1fr; }
}

/* ── SERVICE PAGE LAYOUT ── */
.service-content {
  padding: var(--sp-2xl) 0;
}
.service-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: start;
  margin-bottom: var(--sp-2xl);
}
.service-intro-text h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-md);
}
.service-intro-text p {
  color: var(--muted);
  margin-bottom: var(--sp-md);
}
.service-intro-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(195,149,59,0.25);
}
.service-intro-img::after {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(195,149,59,0.35);
  pointer-events: none;
  z-index: 2;
}
.service-intro-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-techniques {
  margin-bottom: var(--sp-2xl);
}
.service-techniques h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-lg);
}
.techniques-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}
.technique-card {
  background: var(--card);
  padding: var(--sp-xl);
  border: 1px solid rgba(195,149,59,0.18);
  border-top: 3px solid var(--accent);
}
.technique-card h4 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-xs);
  color: var(--text);
}
.technique-card p {
  font-size: var(--fs-sm);
  color: var(--muted);
}
@media (max-width: 768px) {
  .service-intro { grid-template-columns: 1fr; }
  .techniques-grid { grid-template-columns: 1fr; }
}

/* ── SERVICE WORK GALLERY (2-col within page) ── */
.work-gallery {
  margin-bottom: var(--sp-2xl);
}
.work-gallery h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-lg);
  text-align: center;
}
.work-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-sm);
}
.work-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(195,149,59,0.2);
}
.work-tile::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(195,149,59,0.33);
  pointer-events: none;
  z-index: 2;
}
.work-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.work-tile:hover img { transform: scale(1.04); }

/* ── SERVICE CTA BAND ── */
.service-cta-band {
  background: var(--text);
  padding: var(--sp-2xl) 0;
  text-align: center;
}
.service-cta-band h2 {
  color: #FCF9F5;
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-sm);
}
.service-cta-band p {
  color: rgba(252,249,245,0.7);
  margin-bottom: var(--sp-lg);
  font-size: var(--fs-sm);
}

/* ── PRICES PAGE ── */
.prices-section {
  padding: var(--sp-2xl) 0;
}
.price-category {
  margin-bottom: var(--sp-2xl);
}
.price-category h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-sm);
  border-bottom: 1px solid rgba(195,149,59,0.3);
}
.price-table {
  width: 100%;
  border-collapse: collapse;
}
.price-table tr {
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease-standard);
}
.price-table tr:hover {
  background: var(--accent-light);
}
.price-table td {
  padding: var(--sp-sm) var(--sp-xs);
  font-size: var(--fs-sm);
  vertical-align: top;
}
.price-table td:last-child {
  text-align: right;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
.price-table .price-sub {
  color: var(--muted);
  font-size: var(--fs-xs);
}
.price-note {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: var(--sp-xs);
  font-style: italic;
}
.price-section-note {
  background: var(--card);
  border: 1px solid rgba(195,149,59,0.2);
  padding: var(--sp-lg);
  margin-top: var(--sp-xl);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ── FAQ PAGE ── */
.faq-section {
  padding: var(--sp-2xl) 0;
}
.faq-group {
  margin-bottom: var(--sp-2xl);
}
.faq-group h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-lg);
  color: var(--text);
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-md);
}
.faq-card {
  background: var(--card);
  padding: var(--sp-xl);
  border: 1px solid rgba(195,149,59,0.15);
  border-top: 3px solid var(--accent);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-emphasis),
              transform var(--dur-slow) var(--ease-emphasis);
}
.faq-card.revealed {
  opacity: 1;
  transform: translateY(0);
}
.faq-card h4 {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-xs);
}
.faq-card p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.68;
}
@media (max-width: 680px) {
  .faq-grid { grid-template-columns: 1fr; }
}

/* ── VOUCHERS PAGE ── */
.vouchers-section {
  padding: var(--sp-2xl) 0;
  background: var(--bg);
}
.voucher-card {
  max-width: 640px;
  margin: 0 auto var(--sp-2xl);
  background: var(--card);
  border: 1px solid rgba(195,149,59,0.35);
  padding: var(--sp-2xl);
  text-align: center;
  position: relative;
}
.voucher-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(195,149,59,0.2);
  pointer-events: none;
}
.voucher-card h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-sm);
}
.voucher-card p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--sp-md);
}
.voucher-terms {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: var(--sp-lg);
  margin-top: var(--sp-lg);
  text-align: left;
}
.voucher-terms h4 {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-sm);
}
.voucher-terms li {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: var(--sp-2xs) 0;
  border-bottom: 1px solid var(--border);
  padding-left: var(--sp-md);
  position: relative;
}
.voucher-terms li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 8px;
  top: 6px;
}
.voucher-terms li:last-child { border-bottom: none; }

/* ── CONTACT PAGE ── */
.contact-section {
  padding: var(--sp-2xl) 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl);
  align-items: start;
}
.contact-details h2 {
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-xl);
}
.contact-socials {
  display: flex;
  gap: var(--sp-sm);
  margin-top: var(--sp-lg);
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(195,149,59,0.4);
  color: var(--accent);
  font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.social-link:hover {
  background: var(--accent);
  color: #fff;
}
.contact-map {
  background: var(--card);
  border: 1px solid rgba(195,149,59,0.25);
  padding: var(--sp-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-md);
}
.contact-map h3 {
  font-size: var(--fs-lg);
  margin-bottom: var(--sp-xs);
}
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ── SECTION LEVEL CTA (page-level) ── */
.page-cta-section {
  padding: var(--sp-2xl) 0;
  background: var(--text);
  text-align: center;
}
.page-cta-section h2 {
  color: #FCF9F5;
  font-size: var(--fs-xl);
  margin-bottom: var(--sp-sm);
}
.page-cta-section p {
  color: rgba(252,249,245,0.7);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-lg);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── FOOTER ── */
.site-footer {
  background: #2B2622;
  color: #FCF9F5;
  padding: var(--sp-2xl) 0 var(--sp-lg);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-2xl);
  margin-bottom: var(--sp-2xl);
  padding-bottom: var(--sp-xl);
  border-bottom: 1px solid rgba(195,149,59,0.25);
}
.footer-brand img.footer-logo {
  height: 48px; /* logo-render-bounds: 24-96px — within required 24-96px range */
  width: auto;
  margin-bottom: var(--sp-md);
  filter: brightness(0) invert(1);
}
.footer-brand p {
  font-size: var(--fs-xs);
  color: rgba(252,249,245,0.65);
  line-height: 1.7;
}
.footer-links h4,
.footer-contact h4 {
  font-family: 'Lato', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-md);
}
.footer-links ul li a,
.footer-contact ul li a,
.footer-contact ul li span {
  display: block;
  font-size: var(--fs-xs);
  color: rgba(252,249,245,0.7);
  padding: var(--sp-2xs) 0;
  transition: color var(--dur-fast) var(--ease-standard);
  min-height: 32px;
  display: flex;
  align-items: center;
}
.footer-links ul li a:hover,
.footer-contact ul li a:hover {
  color: var(--accent);
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
.footer-copy {
  font-size: var(--fs-xs);
  color: rgba(252,249,245,0.45);
}
.footer-socials {
  display: flex;
  gap: var(--sp-sm);
}
.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: rgba(252,249,245,0.55);
  border: 1px solid rgba(252,249,245,0.2);
  font-size: var(--fs-xs);
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.footer-socials a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--sp-xl);
  }
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-emphasis),
              transform var(--dur-slow) var(--ease-emphasis);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero-sticky { position: relative; }
  .hero-wrap { height: auto; }
}