/* ═══════════════════════════════════════════════════════════════
   EXPOSURE MEDIA — shared stylesheet
   Loaded by every page. Design system is locked: Cormorant Garamond
   Light Italic for accents, Montserrat for display/titles, IBM Plex
   Mono for body/UI. Gold #D4A843, Charcoal #2B2B2B.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --charcoal: #2B2B2B;
  --gold: #D4A843;
  --light-gray: #D8D8D8;
  --off-white: #F7F5F0;
  --white: #FFFFFF;

  /* Elevation. Two layers each: a tight contact shadow that grounds the
     element, plus a wide diffuse one that lifts it off the page. The
     inset highlight along the top edge is the soft bezel — it reads as
     light catching a raised surface. */
  --radius: 11px;      /* buttons, chips — soft enough to lose the harsh corner */
  --radius-lg: 16px;   /* cards, panels, media */
  --radius-sm: 9px;    /* form fields */
  /* A blurred 1px inset rather than a hard line — a crisp white rule across
     the top of a mid-tone button reads as a glare streak, not a bevel. */
  --bezel: inset 0 1px 1px rgba(255, 255, 255, 0.42);
  --bezel-gold: inset 0 1px 1px rgba(255, 255, 255, 0.18);
  --bezel-dark: inset 0 1px 1px rgba(255, 255, 255, 0.10);
  --lift-1: 0 1px 2px rgba(43, 43, 43, 0.07), 0 3px 8px rgba(43, 43, 43, 0.07);
  --lift-2: 0 2px 4px rgba(43, 43, 43, 0.08), 0 8px 20px rgba(43, 43, 43, 0.11);
  --lift-3: 0 4px 8px rgba(43, 43, 43, 0.09), 0 16px 34px rgba(43, 43, 43, 0.15);
  --press: 0 1px 2px rgba(43, 43, 43, 0.12);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  /* This is what paints the rubber-band / overscroll area past the ends of
     the page. Without an explicit background here, the canvas inherits
     body's light background and you get a white bar flashing in under the
     footer when you scroll past the bottom. Charcoal matches both the
     footer and the nav, so overscrolling at either end looks deliberate. */
  background: var(--charcoal);
}

body {
  background: var(--off-white);
  color: var(--charcoal);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  overflow-x: hidden;
}

a { color: inherit; }

/* ── LOGO ── */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { display: block; height: 2.1rem; width: auto; }
footer .logo img { height: 2.5rem; }

#siteNav .logo { position: relative; }
#siteNav .logo .logo-dark { display: none; }
#siteNav .logo .logo-light { display: block; }

/* ── NAV ──
   Dark translucent glass bar on every screen size. Solid/visible at the
   top of the page, easing toward see-through as you scroll into content —
   the reverse of a typical "transparent until scrolled" nav, by request. */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 4rem;
  background: rgba(43, 43, 43, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.3s, backdrop-filter 0.3s, transform 0.3s ease, opacity 0.3s ease;
  color: var(--white);
}

nav.scrolled {
  background: rgba(43, 43, 43, 0.26);
}

nav ul { list-style: none; display: flex; gap: 2.5rem; }

nav ul a {
  text-decoration: none;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.3s, color 0.3s;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.2rem;
}

nav ul a:hover { opacity: 1; color: var(--gold); border-color: var(--gold); }
nav ul a.active { opacity: 1; color: var(--gold); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px; height: 20px;
  background: none; border: none; padding: 0;
  cursor: pointer;
  z-index: 101;
  color: inherit; /* buttons don't inherit text color — currentColor needs this */
}
.nav-toggle span {
  display: block; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { display: none; }  /* desktop; the mobile query re-enables it */

/* ── FIXED BACKGROUND SCENE ── */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.oak-surface {
  position: absolute; inset: 0;
  background-color: #4f341f;
  background-image: url('/assets/slat-wall.jpg');
  background-size: cover;
  background-position: center;
}

.oak-surface::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, rgba(247, 245, 240, 0.04), rgba(43, 43, 43, 0.22) 100%);
}

.polaroid-field {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 420vh;
  will-change: transform;
}

.polaroid {
  position: absolute;
  background: var(--white);
  border-radius: 4px;
  box-shadow: 0 18px 34px rgba(43, 43, 43, 0.22), 0 2px 6px rgba(43, 43, 43, 0.1);
}

.polaroid .photo {
  width: 100%;
  aspect-ratio: 46 / 62;
  background-size: cover;
  background-position: center;
  background-color: var(--light-gray);
  filter: saturate(0.94) contrast(1.02);
}

/* ── CONTINUOUS GLASS PANEL ── */
.glass-shell {
  position: relative;
  z-index: 1;
  background: rgba(247, 245, 240, 0.18);
  backdrop-filter: blur(2px) saturate(1.1);
  -webkit-backdrop-filter: blur(2px) saturate(1.1);
}

/* ── HERO (homepage) ── */
#hero.block {
  padding-top: 8.5rem;
  min-height: 74vh;
  display: flex;
  align-items: center;
}
/* The hero is a flex container, so without an explicit width its panel
   shrinks to fit its text instead of honouring max-width — which is what
   made it narrower than every other panel on the page. */
#hero.block .section-inner { margin: 0 auto; width: 100%; }

/* Interior pages get a shorter hero so they don't each read as a homepage */
#hero.block.page-hero { min-height: 0; padding-top: 8.5rem; padding-bottom: 2.5rem; }

.hero-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 1.35rem;
  color: var(--charcoal);
  opacity: 0.75;
  margin-bottom: 1.25rem;
}

.hero-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--charcoal);
  margin-bottom: 1.5rem;
}

.page-hero .hero-title { font-size: clamp(2.1rem, 4.8vw, 3.4rem); }
.hero-title span { color: var(--gold); }

.hero-sub {
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  opacity: 0.65;
  margin-bottom: 2.5rem;
  text-transform: uppercase;
}

/* ── BUTTONS ──
   Raised rather than drawn: a soft bezel along the top edge, a shadow
   underneath, and a small lift on hover so they feel like objects you
   can press rather than rectangles of text. */
.btn {
  display: inline-block;
  padding: 0.9rem 2.5rem;
  border: none;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  text-decoration: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  box-shadow: var(--bezel), var(--lift-1);
  transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease),
              background 0.26s var(--ease), color 0.26s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--bezel), var(--lift-3);
}

.btn:active { transform: translateY(0); box-shadow: var(--press); }

.btn-gold {
  background: var(--gold);
  color: var(--charcoal);
  box-shadow: var(--bezel-gold), var(--lift-2),
              0 6px 18px rgba(212, 168, 67, 0.28);
}

.btn-gold:hover {
  background: var(--gold);
  color: var(--charcoal);
  transform: translateY(-2px);
  box-shadow: var(--bezel-gold), var(--lift-3),
              0 12px 28px rgba(212, 168, 67, 0.38);
}

.btn-gold:active { transform: translateY(0); box-shadow: var(--press); }

.btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── GENERIC SECTION ── */
section.block { position: relative; padding: 4.5rem 2rem; }

.section-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  background: rgba(247, 245, 240, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(43, 43, 43, 0.1);
  padding: 2.6rem 2.5rem;
}

.section-inner.wide { max-width: 1000px; }  /* kept as a hook; width is uniform */

.section-label {
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
}

.section-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.1rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
  color: var(--charcoal);
}

.section-accent {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300;
  font-size: 1.5rem;
  color: var(--charcoal);
  opacity: 0.8;
}

.section-body {
  font-size: 0.88rem;
  line-height: 1.95;
  opacity: 0.7;
  max-width: 600px;
  margin: 0 auto 1.7rem;
}

.section-body:last-child { margin-bottom: 0; }
.section-body + .section-body { margin-top: -1.5rem; }

/* ── SERVICE CARDS ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 2.25rem;
  text-align: left;
}

.service-card {
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  background: var(--white);
  box-shadow: var(--bezel), var(--lift-1);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  text-decoration: none;
  display: block;
  color: inherit;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--bezel), var(--lift-3);
}

.service-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.9rem;
  color: var(--charcoal);
}

.service-card p { font-size: 0.82rem; line-height: 1.85; opacity: 0.65; }

.service-number {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}

.card-link {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.service-card:hover .card-link { border-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   SERVICES PICKER
   Two-stage drill-down: pick a medium, then the kind of work. All
   eight panels are rendered in the HTML and hidden with CSS rather
   than injected by JS — so the copy is still in the page for search
   engines, and it all stays readable if the script never runs.
   ═══════════════════════════════════════════════════════════════ */

.picker {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.75rem;
}

.picker-option {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 1.5rem 2.75rem;
  cursor: pointer;
  min-width: 232px;
  box-shadow: var(--bezel), var(--lift-1);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
              background 0.28s var(--ease), color 0.28s var(--ease);
}

.picker-option:hover {
  transform: translateY(-2px);
  box-shadow: var(--bezel), var(--lift-3);
}

.picker-option:active { transform: translateY(-1px); box-shadow: var(--press); }

.picker-option[aria-pressed="true"] {
  background: var(--gold);
  color: var(--charcoal);
  box-shadow: var(--bezel-gold), var(--lift-2),
              0 10px 26px rgba(212, 168, 67, 0.34);
}

/* Once a work type is chosen the medium row minimizes rather than leaving:
   it scales down and fades back, staying live so it doubles as the way to
   switch media — which is why there's no separate "change selection" link.
   Scaling is a compositor transform, so it stays smooth; the max-height
   shrinking alongside it is what lets the work types rise into the space. */
.picker.medium-row {
  max-height: 240px;
  /* Must stay visible: overflow clipping is applied in the element's own
     coordinate space, BEFORE the transform — so hiding it here would slice
     the bottom off the buttons and then shrink the slice. Visible overflow
     lets max-height control the layout height while scale() handles what
     you actually see. */
  overflow: visible;
  transform-origin: top center;
  transition: max-height 0.5s var(--ease),
              transform 0.5s var(--ease),
              opacity 0.42s var(--ease),
              margin-top 0.5s var(--ease);
}

.picker.medium-row.minimized {
  max-height: 44px;   /* the 64px row's visual height at scale(0.68) */
  transform: scale(0.68);
  opacity: 0.5;
  margin-top: 0.5rem;
  margin-bottom: 0.35rem;
}

.picker.medium-row.minimized:hover { opacity: 0.92; }

.type-picker {
  max-height: 0;
  overflow: visible;
  opacity: 0;
  margin-top: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;
  transition: max-height 0.5s var(--ease),
              opacity 0.38s var(--ease),
              transform 0.5s var(--ease),
              margin-top 0.5s var(--ease);
}

.type-picker.open {
  max-height: 340px;
  opacity: 1;
  margin-top: 1.5rem;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--charcoal);
  background: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.6rem;
  cursor: pointer;
  box-shadow: var(--bezel), var(--lift-1);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), color 0.25s var(--ease);
}

.chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--bezel), var(--lift-2);
}

.chip:active { transform: translateY(0); box-shadow: var(--press); }

.chip[aria-pressed="true"] {
  background: var(--gold);
  color: var(--charcoal);
  box-shadow: var(--bezel-gold), var(--lift-2),
              0 8px 20px rgba(212, 168, 67, 0.30);
}

/* The nav is fixed, so a plain scrollIntoView tucks the heading underneath
   it. Offset the anchor by roughly the bar's height. */
#offer, #faqs, [id] { scroll-margin-top: 92px; }

.picker-hint {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.05rem;
  opacity: 0.6;
  margin-top: 1.5rem;
}

/* Two stages occupying the same spot: the picker, then the answer. Only
   one is ever mounted, so the content genuinely replaces the buttons
   rather than pushing them around. */
.stage { animation: panelIn 0.4s ease both; }

@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Panels: with JS active, only the selected one shows. Without JS every
   panel shows in sequence, each with its own visible heading — so the copy
   is always readable and always indexable. */
.js-on .offer-panel { display: none; }
.js-on .offer-panel.active { display: block; }

#offerStage { margin-top: 2.5rem; }
#introStage { margin-top: 0; }

.offer-panel + .offer-panel { margin-top: 3.5rem; }
.js-on .offer-panel + .offer-panel { margin-top: 0; }

.offer-panel h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.2;
  margin-bottom: 1.15rem;
  color: var(--charcoal);
}

.offer-panel .section-body { margin-bottom: 1.6rem; }

.offer-panel .panel-kicker {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

/* Pricing sits inside the drilled-in stage, so it only turns up once
   someone has actually seen what they'd be paying for. */
.offer-footer {
  margin-top: 2.25rem;
  padding-top: 0;
}

.offer-footer .section-body { margin-bottom: 1.5rem; }


@media (max-width: 700px) {
  .picker-option { min-width: 0; width: 100%; padding: 1.15rem 1.5rem; font-size: 0.78rem; }
  /* Stacked, so the scaled row needs proportionally more room than desktop. */
  .picker.medium-row.minimized { max-height: 82px; }
  .picker { gap: 0.7rem; }
  .chip { padding: 0.6rem 1.1rem; font-size: 0.62rem; letter-spacing: 0.14em; }
  .type-picker.open { max-height: 420px; }
}

/* ── CHECK LIST (service detail pages) ── */
.check-list {
  list-style: none;
  text-align: left;
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 0.9rem;
}

.check-list li {
  position: relative;
  padding-left: 2rem;
  font-size: 0.85rem;
  line-height: 1.8;
  opacity: 0.78;
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.65em;
  width: 10px; height: 1px;
  background: var(--gold);
}

/* ── FAQ ──
   Collapsed by default, so the whole block is a short stack of one-line
   questions instead of a wall of answers. Built on <details>/<summary>,
   which means no JavaScript and correct keyboard behavior for free. */
.faq-list { text-align: left; max-width: 660px; margin: 0 auto; display: grid; gap: 0.6rem; }

.faq-item {
  border: none;
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 0 1.25rem;
  box-shadow: var(--bezel), var(--lift-1);
  transition: box-shadow 0.28s var(--ease), transform 0.28s var(--ease);
}

.faq-item:hover { transform: translateY(-1px); box-shadow: var(--bezel), var(--lift-2); }
.faq-item.is-open { box-shadow: var(--bezel), var(--lift-2); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0.25rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--charcoal);
  opacity: 0.82;
  transition: opacity 0.25s, color 0.25s;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { opacity: 1; color: var(--gold); }
.faq-item.is-open summary { opacity: 1; }

/* Thin plus that becomes a minus when open. */
.faq-mark {
  position: relative;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
}
.faq-mark::before,
.faq-mark::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 11px; height: 1px;
  background: var(--gold);
  transition: transform 0.28s ease;
}
.faq-mark::after { transform: rotate(90deg); }
.faq-item.is-open .faq-mark::after { transform: rotate(0deg); }

.faq-item p {
  font-size: 0.8rem;
  line-height: 1.95;
  opacity: 0.65;
  padding: 0 0.25rem 1.5rem;
  max-width: 58ch;
}

/* ── GALLERY GRID ── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}

.gallery-item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--light-gray);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-1);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--lift-3); }

.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.gallery-item:hover img { transform: scale(1.05); }

.gallery-empty {
  grid-column: 1 / -1;
  border-radius: var(--radius-lg);
  padding: 3rem 1.5rem;
  border: 1px dashed rgba(43, 43, 43, 0.25);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  opacity: 0.6;
  line-height: 1.9;
}

/* ── CONTACT ── */
.contact-form {
  display: flex; flex-direction: column; gap: 1rem;
  max-width: 520px; margin: 2.5rem auto 0;
  text-align: left;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  background: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 3px rgba(43, 43, 43, 0.09);
  color: var(--charcoal);
  padding: 0.9rem 1.1rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  outline: none;
  transition: box-shadow 0.3s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

.contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232B2B2B' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(43, 43, 43, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  box-shadow: inset 0 1px 3px rgba(43, 43, 43, 0.06), 0 0 0 2px rgba(212, 168, 67, 0.55);
}

.contact-form textarea { min-height: 130px; resize: vertical; }

.contact-form button {
  background: var(--gold);
  color: var(--charcoal);
  border: none;
  border-radius: var(--radius);
  padding: 0.95rem;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--bezel-gold), var(--lift-2), 0 6px 18px rgba(212, 168, 67, 0.28);
  transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease);
}
.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: var(--bezel-gold), var(--lift-3), 0 12px 28px rgba(212, 168, 67, 0.38);
}
.contact-form button:active { transform: translateY(0); box-shadow: var(--press); }

.contact-direct {
  margin-top: 1.75rem;
  font-size: 0.78rem;
  line-height: 2.1;
  opacity: 0.7;
  letter-spacing: 0.05em;
}
.contact-direct a { color: var(--gold); text-decoration: none; }
.contact-direct a:hover { text-decoration: underline; }

/* ── FOOTER ── */
footer {
  position: relative;
  z-index: 2;
  background: var(--charcoal);
  color: var(--light-gray);
  text-align: center;
  padding: 2.75rem 2rem 2rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
}

.footer-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  margin: 1rem 0 2rem;
  text-transform: none;
}

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-bottom: 2.25rem;
}

.footer-nav a {
  text-decoration: none;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.6;
  transition: opacity 0.3s, color 0.3s;
}
.footer-nav a:hover { opacity: 1; color: var(--gold); }

.footer-meta { font-size: 0.66rem; line-height: 2.2; opacity: 0.5; }
.footer-meta a { color: inherit; text-decoration: none; }
.footer-meta a:hover { color: var(--gold); }

.footer-areas {
  margin-top: 1.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  opacity: 0.38;
  line-height: 2;
}

footer .copyright {
  opacity: 0.35;
  text-transform: uppercase;
  margin-top: 2rem;
  font-size: 0.6rem;
}

/* ═══════════════════════════════════════════════════════════════
   CLEAN MODE  (body.clean)
   Used on the service / transactional pages. Same type system, same
   nav and footer, but no wood scene, no Polaroids and no frosted
   glass — these are the pages someone reads when they're seriously
   evaluating, so they get editorial calm instead of atmosphere.
   Also much lighter to load, which matters for the pages Google
   sends commercial-intent traffic to.
   ═══════════════════════════════════════════════════════════════ */

body.clean { background: var(--off-white); }

/* The nav's translucency exists to let the wood scene show through. On a
   clean page there's nothing behind it but white, so the same rgba reads
   as washed-out grey — and fading toward transparent on scroll would just
   dissolve it into the page. Solid charcoal at both states instead. */
body.clean nav,
body.clean nav.scrolled {
  background: var(--charcoal);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.clean .glass-shell {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.clean .section-inner {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  max-width: 820px;
}

body.clean .section-inner.wide { max-width: 820px; }

body.clean section.block { padding: 3.6rem 2rem; }

/* Alternating bands give the page structure without decoration. */
body.clean section.block:nth-of-type(even) {
  background: var(--white);
}

body.clean #hero.block.page-hero {
  min-height: 0;
  padding-top: 9rem;
  padding-bottom: 3rem;
  background: var(--white);
}

/* A short gold rule under the hero eyebrow — the one flourish that
   survives into clean mode, so it still reads as the same brand. */
body.clean .hero-eyebrow { position: relative; padding-bottom: 1.25rem; }
body.clean .hero-eyebrow::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 34px; height: 2px;
  margin-left: -17px;
  background: var(--gold);
}

body.clean .service-card {
  background: var(--white);
  border-color: rgba(43, 43, 43, 0.12);
}
body.clean section.block:nth-of-type(even) .service-card { background: var(--off-white); }

body.clean .faq-item { background: var(--white); border-color: rgba(43, 43, 43, 0.12); }
body.clean section.block:nth-of-type(even) .faq-item { background: var(--off-white); }

body.clean .contact-form input,
body.clean .contact-form textarea,
body.clean .contact-form select { background: var(--white); }
body.clean section.block:nth-of-type(even) .contact-form input,
body.clean section.block:nth-of-type(even) .contact-form textarea,
body.clean section.block:nth-of-type(even) .contact-form select { background: var(--off-white); }

@media (max-width: 700px) {
  body.clean section.block { padding: 2.5rem 1.5rem; }
  body.clean #hero.block.page-hero { padding-top: 8.5rem; padding-bottom: 3rem; }
}

/* ── SCROLL REVEAL ── */
.fade-in {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0) scale(1); }

.reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* --reveal-opacity lets each element reveal to ITS OWN resting opacity */
.fade-in.visible .reveal-item {
  opacity: var(--reveal-opacity, 1);
  transform: translateY(0);
}

.fade-in.visible .reveal-item.r1 { transition-delay: 0.28s; }
.fade-in.visible .reveal-item.r2 { transition-delay: 0.40s; }
.fade-in.visible .reveal-item.r3 { transition-delay: 0.52s; }
.fade-in.visible .reveal-item.r4 { transition-delay: 0.64s; }
.fade-in.visible .reveal-item.r5 { transition-delay: 0.76s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in, .reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .polaroid-field { transform: none !important; }
}

/* ── MOBILE ── */
@media (max-width: 700px) {
  nav { padding: 1rem 1.25rem; flex-direction: row; justify-content: center; align-items: center; }
  nav.nav-hidden { opacity: 0; pointer-events: none; }
  .logo img { height: 1.6rem; }
  nav ul { display: none; }

  .nav-toggle {
    display: flex;
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
  }

  /* Always laid out; visibility + transform carry the animation. Toggling
     display would cancel the transition outright, which is what made the
     hamburger snap open instead of sliding. */
  .mobile-menu {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99;
    flex-direction: column;
    background: var(--white);
    padding: 5.25rem 1.5rem 1.5rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: var(--lift-3);
    transition: transform 0.42s var(--ease),
                opacity 0.3s var(--ease),
                visibility 0.42s;
    max-height: 100vh;
    overflow-y: auto;
  }
  .mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Links cascade in behind the panel rather than arriving all at once. */
  .mobile-menu a, .mobile-menu .submenu-label {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  }
  .mobile-menu.open a, .mobile-menu.open .submenu-label {
    opacity: 1;
    transform: none;
  }
  .mobile-menu.open a:nth-child(1)  { transition-delay: 0.10s; }
  .mobile-menu.open a:nth-child(2)  { transition-delay: 0.14s; }
  .mobile-menu.open a:nth-child(3)  { transition-delay: 0.18s; }
  .mobile-menu.open a:nth-child(4)  { transition-delay: 0.22s; }
  .mobile-menu.open a:nth-child(5)  { transition-delay: 0.26s; }
  .mobile-menu.open a:nth-child(6)  { transition-delay: 0.30s; }
  .mobile-menu a {
    text-decoration: none;
    color: var(--charcoal);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.8rem;
    padding: 1rem 0;
    text-align: center;
  }
  
  #hero.block { padding-top: 8rem; min-height: auto; }
  #hero.block.page-hero { padding-top: 7.5rem; min-height: auto; }
  section.block { padding: 2.75rem 1.25rem; }
  .section-inner { padding: 1.85rem 1.35rem; border-radius: 14px; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
  .footer-nav { gap: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICES: REEL + DICTIONARY DEFINITION
   Three states share one block — the reel opens the page, a
   definition of the chosen medium sits in the middle, and the work
   type detail is the answer. Each replaces the last in place.
   ═══════════════════════════════════════════════════════════════ */

.reel {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0 auto 2.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--charcoal);
  box-shadow: var(--lift-3);
}

.reel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.reel-placeholder {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  background: linear-gradient(145deg, #34291f 0%, #221a13 100%);
  color: rgba(247, 245, 240, 0.5);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.reel-play {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: rgba(212, 168, 67, 0.16);
  box-shadow: inset 0 0 0 1px rgba(212, 168, 67, 0.5);
  position: relative;
}
.reel-play::after {
  content: '';
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 15px solid var(--gold);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

/* ── Dictionary entry ── */
.definition {
  display: none;
  text-align: left;
  max-width: 640px;
  margin: 2.25rem auto 0;
  padding: 1.6rem 1.8rem 1.7rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--bezel), var(--lift-2);
}

.definition.active { display: block; animation: panelIn 0.42s var(--ease) both; }

.def-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1.15rem;
  padding-bottom: 0.9rem;
  /* the one rule that earns its keep: a dictionary headword sits above a
     rule, and it's inside a card rather than separating two sections */
  box-shadow: 0 1px 0 rgba(43, 43, 43, 0.09);
}

.def-word {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}

.def-phonetic {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.def-pos {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  opacity: 0.5;
}

.def-senses { list-style: none; display: grid; gap: 1.15rem; }

.def-senses li { display: flex; gap: 0.75rem; }

.def-num {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--gold);
  flex: 0 0 auto;
  line-height: 1.78;   /* matches .def-text so numerals sit on the first line */
}

.def-text { font-size: 0.82rem; line-height: 1.78; opacity: 0.74; }
.def-text em { font-style: italic; opacity: 0.9; }

.def-lead {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--charcoal);
  opacity: 0.85;
  margin-right: 0.15rem;
}

@media (max-width: 700px) {
  .reel { margin-bottom: 1.5rem; }
  .definition { padding: 1.35rem 1.25rem; }
  .def-word { font-size: 1.2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MOTION
   Anything that appears or disappears gets a transition. `hidden`
   and `display` can't be animated, so stages are faded first and
   only unmounted once they're invisible.
   ═══════════════════════════════════════════════════════════════ */

#reelStage, #introStage, #offerStage {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}

#reelStage.is-in, #introStage.is-in, #offerStage.is-in {
  opacity: 1;
  transform: none;
}

/* The hint line fades rather than blinking out. */
.picker-hint {
  transition: opacity 0.3s var(--ease), max-height 0.34s var(--ease), margin-top 0.34s var(--ease);
  overflow: hidden;
  max-height: 3rem;
}
.picker-hint.is-out { opacity: 0; max-height: 0; margin-top: 0; }

/* Definitions crossfade between media without remounting the stage. */
.definition { transition: opacity 0.3s var(--ease); }

/* ── FAQ accordion ──
   <details> opens instantly by default. The wrapper animates its own
   height so the answer unrolls instead of appearing. */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease), opacity 0.26s var(--ease);
  opacity: 0;
}
/* Driven by a class, NOT by [open]: a closed <details> doesn't render its
   children at all, so flipping `open` gives the transition no previous
   value to animate from and it snaps. The script sets `open` first, then
   adds this a frame later, once there's something to animate. */
.faq-item.is-open .faq-body { grid-template-rows: 1fr; opacity: 1; }
.faq-body > div { overflow: hidden; }

.faq-item summary { transition: opacity 0.25s var(--ease), color 0.25s var(--ease); }

/* ── Images ──
   Photos fade up as they decode rather than popping in. */
.polaroid .photo { transition: opacity 0.6s var(--ease); }
.gallery-item img { opacity: 0; transition: opacity 0.5s var(--ease), transform 0.35s var(--ease); }
.gallery-item img.loaded { opacity: 1; }

/* ── Nav ── */
nav ul a, .footer-nav a { transition: opacity 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.nav-toggle span { transition: transform 0.35s var(--ease), opacity 0.25s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  #reelStage, #introStage, #offerStage,
  .faq-body, .picker-hint, .gallery-item img, .polaroid .photo {
    transition: none !important;
  }
  #reelStage, #introStage, #offerStage { opacity: 1; transform: none; }
}

/* Closing state for the FAQ: the JS holds `open` until this finishes. */


/* Quote form sits inside the drill-down, so it echoes the selection back. */
.quote-for {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 0.3rem;
}
.quote-for strong { color: var(--gold); font-weight: 500; }