/* ==========================================================================
   STERLING — Food & Beverage Trading & Partnerships
   Single-page static stylesheet. No build step, no preprocessor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --bg: #0a0a0a;
  --panel: #0d0d0d;
  --panel-deep: #111;
  --gold: #c9a84c;
  --amber: #b8935a;
  --ink: #e8e4dc;
  --muted: #8d887e;

  /* Derived */
  --hairline: rgba(201, 168, 76, .25);
  --hairline-soft: rgba(201, 168, 76, .12);
  --gold-glow: rgba(201, 168, 76, .18);
  --ink-dim: rgba(232, 228, 220, .72);

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-ui: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --section-y: clamp(6rem, 12vh, 10rem);
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --frame: clamp(0px, 3vw, 44px);
  --maxw: 1360px;

  /* Motion */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --reveal: .9s var(--ease-out);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img,
video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

::selection { background: var(--gold); color: #0a0a0a; }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--panel);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   3. Shared typography primitives
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  letter-spacing: .04em;
  color: var(--gold);
  display: block;
}

.display {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.08;
  color: var(--ink);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  line-height: 1.14;
  color: var(--ink);
}

/* Ornamented heading: ~<>  HEADING  <>~ */
.ornate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.85rem, 2.4vw, 1.9rem);
}
.ornate--right { justify-content: flex-end; }
/* Shrink the text box to its widest line so flanking ornaments hug the words
   instead of drifting out to the cap width on short headings. */
.section-title.ornate > span:not(.ornament) { width: fit-content; max-width: 34ch; }

.ornament {
  /* Shrinkable: on narrow screens the hairline collapses toward zero so the
     ornament never pushes a long heading word out of the viewport. */
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--gold);
}
.ornament::before,
.ornament::after {
  content: "";
  display: block;
}
/* the diamond is the irreducible part of the mark */
.ornament::after { flex: 0 0 auto; }
/* hairline rule, held solid for most of its length then feathered off */
.ornament::before {
  flex: 0 1 auto;
  min-width: 0;
  width: clamp(22px, 3.4vw, 46px);
  height: 1px;
  background: linear-gradient(to right, rgba(201, 168, 76, 0) 0%, var(--gold) 45%, var(--gold) 100%);
}
/* diamond */
.ornament::after {
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(201, 168, 76, .45);
}
.ornament--flip {
  flex-direction: row-reverse;
}
.ornament--flip::before {
  background: linear-gradient(to left, rgba(201, 168, 76, 0) 0%, var(--gold) 45%, var(--gold) 100%);
}

.lede {
  color: var(--muted);
  font-size: clamp(.82rem, 1.1vw, .94rem);
  font-weight: 300;
  line-height: 2;
  letter-spacing: .04em;
}

.measure { max-width: 46ch; }
.measure-wide { max-width: 62ch; }
.center { text-align: center; margin-inline: auto; }

/* Label (Montserrat, tracked uppercase) */
.label {
  font-family: var(--font-ui);
  font-weight: 300;
  text-transform: uppercase;
  font-size: .66rem;
  letter-spacing: .22em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: .95rem 2.4rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: .64rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  transition: background-color .45s var(--ease-out),
              color .45s var(--ease-out),
              box-shadow .45s var(--ease-out);
}
.btn:hover,
.btn:focus-visible {
  background: var(--gold);
  color: #0a0a0a;
  box-shadow: 0 14px 34px var(--gold-glow);
}

.btn--ghost { border-color: var(--hairline); color: var(--ink); }
.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--gold); background: var(--gold); color: #0a0a0a; }

/* --------------------------------------------------------------------------
   5. Scroll-reveal (single shared IntersectionObserver → .is-visible)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity var(--reveal), transform var(--reveal);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Gold underline that scales in beneath revealed headings */
[data-underline] { position: relative; padding-bottom: 1.6rem; }
[data-underline]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--ease-out) .12s;
}
[data-underline].is-visible::after { transform: scaleX(1); }

[data-underline].is-centered::after,
.center[data-underline]::after { left: 50%; margin-left: -36px; }

[data-underline].is-right::after { left: auto; right: 0; transform-origin: right; }

/* --------------------------------------------------------------------------
   6. Page frame hairlines (echoes the reference's ruled edges)
   -------------------------------------------------------------------------- */
.page-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
}
.page-frame span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hairline-soft);
}
.page-frame span:first-child { left: var(--frame); }
.page-frame span:last-child { right: var(--frame); }
@media (max-width: 900px) { .page-frame { display: none; } }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem clamp(1.1rem, 4vw, 3.25rem);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease-out),
              border-color .5s var(--ease-out),
              padding .5s var(--ease-out);
}
.site-header.is-stuck {
  background: #0a0a0a;
  border-bottom-color: var(--hairline);
  padding-top: .8rem;
  padding-bottom: .8rem;
}

/* Monogram — script wordmark logo. */
.monogram {
  display: inline-flex;
  align-items: center;
}
.monogram__logo {
  display: block;
  height: 60px;
  width: auto;
}

/* Desktop nav */
.nav {
  display: flex;
  justify-content: center;
  gap: clamp(1.1rem, 2.6vw, 2.4rem);
}
.nav a {
  position: relative;
  display: inline-block;
  padding: .35rem 0;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: .66rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color .35s var(--ease-out);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .4s var(--ease-out);
}
.nav a:hover,
.nav a:focus-visible { color: var(--gold); }
.nav a:hover::after,
.nav a:focus-visible::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--gold); }

.header__right { display: flex; justify-content: flex-end; }

/* Hamburger */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  align-items: flex-end;
}
.burger span {
  display: block;
  height: 1px;
  width: 26px;
  background: var(--ink);
  transition: transform .4s var(--ease-out), opacity .3s var(--ease-out), width .4s var(--ease-out), background-color .3s var(--ease-out);
}
.burger span:nth-child(2) { width: 18px; }
.burger:hover span { background: var(--gold); }
.burger:hover span:nth-child(2) { width: 26px; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
}

/* --------------------------------------------------------------------------
   8. Slide-in overlay menu
   -------------------------------------------------------------------------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: #060606;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out);
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }

.menu-overlay__close {
  position: absolute;
  top: 1.4rem;
  right: clamp(1.1rem, 4vw, 3.25rem);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  transition: color .3s var(--ease-out), transform .4s var(--ease-out);
}
.menu-overlay__close:hover { color: var(--gold); transform: rotate(90deg); }

.menu-overlay__inner {
  text-align: center;
  padding: 2rem clamp(1.5rem, 6vw, 4rem);
}
.menu-overlay__nav {
  display: flex;
  flex-direction: column;
  gap: clamp(.9rem, 2.4vh, 1.6rem);
}
.menu-overlay__nav a {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: clamp(1.35rem, 5.2vw, 2rem);
  color: var(--ink);
  opacity: 0;
  transform: translateY(18px);
  transition: color .35s var(--ease-out), opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.menu-overlay.is-open .menu-overlay__nav a { opacity: 1; transform: none; }
.menu-overlay__nav a:hover,
.menu-overlay__nav a:focus-visible { color: var(--gold); }

.menu-overlay__meta {
  margin-top: clamp(2rem, 6vh, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 2.1;
}

/* --------------------------------------------------------------------------
   9. Hero slider (cross-fade only)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #060606;
}

.hero__slides {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }

/* Media layer (image or video) — parallax target */
.hero__media {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  will-change: transform;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media video { position: absolute; inset: 0; }
/* still image doubles as the video fallback / poster twin */
.hero__slide--video .hero__media img { position: absolute; inset: 0; z-index: 0; }
.hero__slide--video .hero__media video { z-index: 1; }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(6, 6, 6, .82) 0%, rgba(6, 6, 6, .42) 32%, rgba(6, 6, 6, .55) 68%, rgba(6, 6, 6, .9) 100%),
    radial-gradient(ellipse at center, rgba(6, 6, 6, .18) 0%, rgba(6, 6, 6, .74) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  padding: 7rem clamp(1.5rem, 4vw, 3.25rem) 8.5rem;
  text-align: center;
}

.hero__eyebrow { margin-bottom: clamp(.75rem, 2vh, 1.35rem); }

.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .14em;
  line-height: 1.06;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  color: var(--ink);
  text-shadow: 0 14px 44px rgba(0, 0, 0, .6);
}
.hero__title .ornament { transform: translateY(-.12em); }
.hero__title-text {
  display: block;
  min-width: 0;
  /* fit-content collapses the box onto the widest wrapped line, so the
     ornaments sit beside the words rather than at the 26ch cap. JS sizes
     this to the exact pixel width of that line with zero slack, so as a
     flex item it must never shrink further — the parent `.ornate` row is
     flex without wrap, and a WordPress-embedded page (core/theme CSS
     commonly forces `overflow-wrap: break-word` on headings) will happily
     split the last word's final characters onto their own line the
     instant this box is squeezed even 1px below that width. */
  width: fit-content;
  max-width: 26ch;
  flex-shrink: 0;
  overflow-wrap: normal;
  word-break: normal;
  text-align: center;
}

/* per-word stagger (spans injected by JS) */
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
}
.hero__slide.is-active .hero__title .word.is-in { opacity: 1; transform: none; }
.hero__title .word + .word { margin-left: .32em; }

.hero__body {
  margin: clamp(1.4rem, 3.4vh, 2.2rem) auto 0;
  max-width: 46ch;
  color: var(--ink-dim);
  font-size: clamp(.82rem, 1.1vw, .92rem);
  line-height: 2;
  letter-spacing: .05em;
}

.hero__cta { margin-top: clamp(1.8rem, 4vh, 2.75rem); }

/* Fade-up for the non-word hero parts, keyed off the active slide */
.hero__slide .hero__eyebrow,
.hero__slide .hero__body,
.hero__slide .hero__cta {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero__slide.is-active .hero__eyebrow { opacity: 1; transform: none; transition-delay: .12s; }
.hero__slide.is-active .hero__body { opacity: 1; transform: none; transition-delay: .52s; }
.hero__slide.is-active .hero__cta { opacity: 1; transform: none; transition-delay: .66s; }

/* Arrows */
.hero__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  color: rgba(232, 228, 220, .68);
  transition: color .35s var(--ease-out), transform .45s var(--ease-out);
}
.hero__arrow svg { width: 15px; height: 26px; }
.hero__arrow--prev { left: clamp(.35rem, 2.6vw, 2.4rem); }
.hero__arrow--next { right: clamp(.35rem, 2.6vw, 2.4rem); }
.hero__arrow:hover,
.hero__arrow:focus-visible { color: var(--gold); }
.hero__arrow--prev:hover { transform: translate(-5px, -50%); }
.hero__arrow--next:hover { transform: translate(5px, -50%); }

/* Numbered pagination */
.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(2rem, 6vh, 3.4rem);
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 1.6rem;
}
.hero__dot {
  position: relative;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--muted);
  padding-bottom: .5rem;
  transition: color .35s var(--ease-out);
}
.hero__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 22px;
  height: 1px;
  margin-left: -11px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .45s var(--ease-out);
}
.hero__dot:hover { color: var(--ink); }
.hero__dot[aria-selected="true"] { color: var(--gold); }
.hero__dot[aria-selected="true"]::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   10. Generic section shell
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding: var(--section-y) 0;
}
.section--panel { background: var(--panel); }
.section--deep { background: var(--panel-deep); }
.section--rule { border-top: 1px solid var(--hairline-soft); }

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   11. About
   -------------------------------------------------------------------------- */
.about__head { text-align: center; margin-bottom: clamp(2.75rem, 7vh, 4.75rem); }
.about__head .eyebrow { margin-bottom: 1rem; }
.about__head .section-title { margin-bottom: .75rem; }
.about__head .lede { max-width: 58ch; margin-inline: auto; }

.about__grid {
  display: grid;
  grid-template-columns: 1fr .82fr 1fr;
  gap: clamp(1.1rem, 3vw, 2.6rem);
  align-items: stretch;
}

.about__figure { position: relative; margin: 0; overflow: hidden; }
.about__figure img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: transform 1.1s var(--ease-out), filter .6s var(--ease-out);
}
.about__figure:hover img { transform: scale(1.045); filter: saturate(1) contrast(1.06); }
.about__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--hairline-soft);
  pointer-events: none;
}

/* Center decorative tile — pure CSS, no photo. A seamless mosaic of filled
   interlocking diamond tiles: a gold diamond grid, plus an amber copy of
   the same grid offset by half a cell in both axes so its diamonds land
   exactly in the gaps left by the gold ones — each tile is a discrete
   filled+stroked diamond (not a hairline intersection), so the two tones
   read as genuinely interlocking shapes rather than a crosshatch grid. */
.lattice {
  position: relative;
  min-height: 380px;
  background-color: transparent;
  background-image:
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiI+PHBhdGggZD0iTTM2IDAuNzUgTDcxLjI1IDM2IEwzNiA3MS4yNSBMMC43NSAzNiBaIiBmaWxsPSJyZ2JhKDIwMSwxNjgsNzYsMC4wNykiIHN0cm9rZT0icmdiYSgyMDEsMTY4LDc2LDAuNikiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9zdmc+"),
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3MiIgaGVpZ2h0PSI3MiI+PHBhdGggZD0iTTM2IDAuNzUgTDcxLjI1IDM2IEwzNiA3MS4yNSBMMC43NSAzNiBaIiBmaWxsPSJyZ2JhKDE4NCwxNDcsOTAsMC4wNSkiIHN0cm9rZT0icmdiYSgxODQsMTQ3LDkwLDAuNCkiIHN0cm9rZS13aWR0aD0iMS4xIi8+PC9zdmc+");
  background-size: 72px 72px, 72px 72px;
  background-position: 0 0, 36px 36px;
  background-repeat: repeat, repeat;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.lattice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, var(--bg) 100%);
  opacity: .55;
}

/* --------------------------------------------------------------------------
   12. Specialties
   -------------------------------------------------------------------------- */
.specialties { overflow: hidden; }

.specialties__feature {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  perspective: 1000px;
}

.specialties__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  z-index: 1;
}
.specialties__media img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}
.specialties__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(10, 10, 10, .78) 0%, rgba(10, 10, 10, .12) 46%, transparent 100%);
  pointer-events: none;
}

/* heading block overlaps the image's right edge */
.specialties__head {
  position: relative;
  z-index: 3;
  margin-left: clamp(-24rem, -21vw, -5rem);
  text-align: right;
  transform: translateZ(60px);
  transform-style: preserve-3d;
}
.specialties__head .eyebrow { margin-bottom: 1rem; }
.specialties__head .section-title {
  font-size: clamp(2rem, 6vw, 4rem);
  text-shadow: 0 18px 46px rgba(0, 0, 0, .72);
}
/* The heading is pulled left over the photo, so its leading ornament would
   strand itself mid-image, disconnected from the words. Keep the trailing
   mark only; the mobile override restores the left-aligned layout. */
@media (min-width: 768px) {
  .specialties__head .ornate > .ornament:not(.ornament--flip) { display: none; }
}
.specialties__head .lede { margin-left: auto; max-width: 44ch; margin-top: .9rem; }

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
  margin-top: clamp(3rem, 9vh, 6rem);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel-deep);
  border: 1px solid var(--hairline-soft);
  overflow: hidden;
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.card:hover,
.card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(201, 168, 76, .18);
  border-color: var(--hairline);
}

.card__media { position: relative; overflow: hidden; }
.card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: saturate(.9) brightness(.86);
  transition: transform 1s var(--ease-out), filter .55s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.06); filter: saturate(1) brightness(.98); }
.card__index {
  position: absolute;
  top: 1rem;
  left: 1.1rem;
  z-index: 2;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .3em;
  color: var(--gold);
}

.card__body { padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.card__title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: clamp(1.02rem, 1.6vw, 1.24rem);
  color: var(--ink);
  line-height: 1.35;
  /* Reserve two lines so the gold rule and body copy align across all cards
     regardless of title length. */
  min-height: 2.7em;
  margin-bottom: 1.15rem;
  position: relative;
  padding-bottom: 1.05rem;
}
.card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 1px;
  background: var(--gold);
  transition: width .5s var(--ease-out);
}
.card:hover .card__title::after { width: 64px; }
.card__text {
  color: var(--muted);
  font-size: .8rem;
  line-height: 2;
  letter-spacing: .035em;
}

/* --------------------------------------------------------------------------
   13. Stats band
   -------------------------------------------------------------------------- */
.stats {
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  background: var(--panel-deep);
  border-top: 1px solid var(--hairline-soft);
  border-bottom: 1px solid var(--hairline-soft);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}
.stat { position: relative; padding: .5rem clamp(.5rem, 2vw, 1.5rem); }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: var(--hairline);
}
.stat__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.3rem);
  line-height: 1;
  color: var(--gold);
  letter-spacing: .02em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .06em;
}
.stat__suffix { font-size: .48em; letter-spacing: .06em; }
.stat__label {
  margin-top: 1.1rem;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: .64rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   14. Split testimonial
   -------------------------------------------------------------------------- */
.testimonial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--panel);
  border-top: 1px solid var(--hairline-soft);
}

.testimonial__panel {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 11vh, 8rem) clamp(1.5rem, 6vw, 5.5rem);
  background: var(--panel);
  min-height: clamp(480px, 78vh, 760px);
}

.testimonial__quotemark {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(4.5rem, 10vw, 7.5rem);
  line-height: .6;
  color: var(--gold);
  opacity: .9;
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
  display: block;
}

.testimonial__stack { position: relative; text-align: center; max-width: 40ch; }

/* Own positioning context: inactive quotes are absolute, so they must overlay
   the quote area only — not the oversized quotation glyph above it. The
   min-height reserves room for the longest quote so cross-fades never jump. */
.testimonial__quotes {
  position: relative;
  min-height: 17em;
}

.quote {
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}
.quote.is-active { opacity: 1; visibility: visible; position: relative; }
.quote:not(.is-active) { position: absolute; inset: 0; pointer-events: none; }

.quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.02rem, 1.8vw, 1.34rem);
  line-height: 1.95;
  color: var(--ink-dim);
  letter-spacing: .015em;
}
.quote__name {
  display: block;
  margin-top: clamp(1.6rem, 4vh, 2.4rem);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}
.quote__role {
  display: block;
  margin-top: .55rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: .92rem;
  color: var(--muted);
  letter-spacing: .03em;
}

.testimonial__dots {
  display: flex;
  justify-content: center;
  gap: 1.35rem;
  margin-top: clamp(2rem, 5vh, 3rem);
}
.testimonial__dot {
  position: relative;
  font-family: var(--font-ui);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--muted);
  padding-bottom: .45rem;
  transition: color .35s var(--ease-out);
}
.testimonial__dot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 18px;
  margin-left: -9px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .4s var(--ease-out);
}
.testimonial__dot:hover { color: var(--ink); }
.testimonial__dot[aria-selected="true"] { color: var(--gold); }
.testimonial__dot[aria-selected="true"]::after { transform: scaleX(1); }

.testimonial__media { position: relative; overflow: hidden; }
.testimonial__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.testimonial__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(13, 13, 13, .55) 0%, transparent 38%);
}

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact { background: var(--bg); }
.contact__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: start;
}
.contact__head .eyebrow { margin-bottom: 1rem; }
.contact__head .section-title { margin-bottom: .9rem; }
.contact__head .lede { max-width: 48ch; }
.contact__cta { margin-top: 2.5rem; }

.contact__details {
  display: grid;
  gap: 1.9rem;
  padding-top: .5rem;
}
.contact__block { padding-bottom: 1.75rem; border-bottom: 1px solid var(--hairline-soft); }
.contact__block:last-child { border-bottom: 0; padding-bottom: 0; }
.contact__block .label { display: block; margin-bottom: .85rem; color: var(--gold); letter-spacing: .24em; }
.contact__block address,
.contact__block p {
  font-style: normal;
  color: var(--ink-dim);
  font-size: .85rem;
  line-height: 2.05;
  letter-spacing: .04em;
}
.contact__block a { transition: color .3s var(--ease-out); }
.contact__block a:hover { color: var(--gold); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  display: none;
  background: var(--panel-deep);
  border-top: 1px solid var(--hairline);
  padding: clamp(3rem, 7vh, 4.5rem) 0 clamp(2rem, 5vh, 3rem);
}
.site-footer__inner {
  display: grid;
  gap: clamp(1.75rem, 4vh, 2.75rem);
  justify-items: center;
  text-align: center;
}
.site-footer .monogram { align-items: center; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}
.footer-nav a {
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s var(--ease-out);
}
.footer-nav a:hover,
.footer-nav a:focus-visible { color: var(--gold); }
.footer__legal {
  font-size: .62rem;
  letter-spacing: .13em;
  color: rgba(141, 136, 126, .8);
  line-height: 2;
  max-width: 70ch;
}
.footer__rule {
  width: 100%;
  max-width: 260px;
  height: 1px;
  background: var(--hairline);
}

/* --------------------------------------------------------------------------
   17. Back-to-top
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: clamp(.85rem, 2.4vw, 1.9rem);
  bottom: clamp(1.1rem, 4vh, 2.2rem);
  z-index: 90;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--gold);
  background: rgba(10, 10, 10, .72);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility .45s, background-color .35s, color .35s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: #0a0a0a; }
.to-top svg { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .contact__grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr 1fr; }
  .lattice { grid-column: 1 / -1; min-height: 220px; }
  .cards { grid-template-columns: 1fr 1fr; }
  .testimonial { grid-template-columns: 1fr; }
  .testimonial__media { min-height: 62vh; }
}

@media (max-width: 767px) {
  /* heading overlap + parallax off on mobile */
  .specialties__feature { grid-template-columns: 1fr; perspective: none; }
  .specialties__head {
    margin-left: 0;
    transform: none;
    text-align: left;
    margin-top: clamp(1.75rem, 5vh, 2.5rem);
  }
  .specialties__head .ornate--right { justify-content: flex-start; }
  /* text is left-aligned here, so the reveal underline must be too */
  .specialties__head [data-underline].is-right::after {
    left: 0;
    right: auto;
    transform-origin: left;
  }
  .specialties__head .lede { margin-left: 0; }
  .hero__media { inset: 0; transform: none !important; }
  .specialties__media img { transform: none !important; }
  .cards { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .about__figure img { min-height: 300px; }
  .stats__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .stat + .stat::before { left: 22%; right: 22%; top: -1.25rem; bottom: auto; width: auto; height: 1px; }
  .hero__inner { padding-bottom: 6.5rem; }
  .hero__arrow { width: 40px; height: 40px; }
  .hero__arrow svg { width: 12px; height: 20px; }
}

@media (max-width: 480px) {
  body { font-size: 15px; }
  .hero__title { letter-spacing: .1em; }
  .hero__title .word + .word { margin-left: .22em; }
  .ornament::before { width: 14px; }
  .ornate { gap: .6rem; }
  .btn { padding: .85rem 1.6rem; letter-spacing: .2em; }
  .testimonial__panel { min-height: 0; }
  .to-top { width: 36px; height: 36px; }
}

@media (max-width: 360px) {
  :root { --gutter: 1rem; }
  .hero__inner { padding-left: 1.15rem; padding-right: 1.15rem; }
  .card__body { padding: 1.25rem; }
  .hero__dots { gap: 1.1rem; }
}

/* --------------------------------------------------------------------------
   19. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-underline]::after { transform: scaleX(1); }
  .hero__title .word { opacity: 1; transform: none; }
  .hero__slide .hero__eyebrow,
  .hero__slide .hero__body,
  .hero__slide .hero__cta { opacity: 1; transform: none; }
  .hero__media { transform: none !important; }
  .specialties__media img { transform: none !important; }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .menu-overlay, .to-top, .page-frame, .hero__arrow, .hero__dots { display: none !important; }
  body { background: #fff; color: #111; }
}