/* =============================================================
   ÉLAN INTERIORS — stylesheet
   Editorial premium interior design studio, warm paper feel.
   Sections:
     1. Root tokens
     2. Reset + base
     3. Typography
     4. Utilities
     5. Grain overlay + Intro curtain + Cursor
     6. Site header / navigation
     7. Hero
     8. Generic section framework
     9. Per-section styles (Vision → Contact)
    10. Marquees
    11. Buttons + forms
    12. Footer
    13. Keyframes
    14. Media queries
    15. Reduced-motion + print overrides
   ============================================================= */


/* -------------------------------------------------------------
   1. ROOT TOKENS
   ------------------------------------------------------------- */
:root {
  /* Palette */
  --ink: #0F0D0B;
  --espresso: #3D3631;
  --sage: #7A7F6E;
  --cream: #E9E6DF;
  --paper: #F7F4EE;
  --paper-2: #EFEAE0;
  --terracotta: #C86F4E;
  --champagne: #D9B382;
  --fog: #D7D4CD;
  --line: rgba(15, 13, 11, 0.12);
  --line-cream: rgba(233, 230, 223, 0.3);
  --muted: rgba(15, 13, 11, 0.55);
  --muted-cream: rgba(233, 230, 223, 0.7);

  /* Type stacks */
  --ff-display: "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Easing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);

  /* Spatial rhythm */
  --shell-x: clamp(20px, 4.2vw, 80px);
  --section-y: clamp(80px, 12vw, 180px);
  --grid-gap: clamp(16px, 2vw, 32px);

  /* z-layers */
  --z-nav: 100;
  --z-cursor: 9997;
  --z-grain: 9998;
  --z-curtain: 9999;
}


/* -------------------------------------------------------------
   2. RESET + BASE
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Lenis drives smooth scroll — keep CSS smooth-behavior off so it doesn't
     fight the JS on anchor jumps. */
  scroll-behavior: auto;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--ff-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide native cursor where we render a custom one (desktop only) */
@media (hover: hover) and (pointer: fine) {
  body,
  a,
  button {
    cursor: none;
  }
}

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

img {
  object-fit: cover;
}

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

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

ul,
ol {
  list-style: none;
}

input,
textarea,
select,
button {
  font-family: inherit;
}

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}


/* -------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------- */
.display,
h1,
h2,
h3,
.hero__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "wght" 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.display em,
h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 300;
}

h1,
.hero__title {
  font-size: clamp(56px, 11vw, 220px);
}

h2 {
  font-size: clamp(40px, 7vw, 120px);
}

h3 {
  font-size: clamp(24px, 3vw, 40px);
}

p {
  margin: 0;
}

/* Small caps label */
.label,
.hero__eyebrow span,
.section__label,
.curtain-meta,
.nav__links a,
.nav__meta,
.spotlight__eyebrow,
.testimonial figcaption {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
}

/* Mono utility */
.mono {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}


/* -------------------------------------------------------------
   4. UTILITIES
   ------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.is-hidden {
  display: none !important;
}


/* Reveal prep (JS toggles .is-revealed) */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s var(--ease-out),
    transform 1s var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Split text (JS injects .char / .line spans inside [data-split]).
   GSAP alone owns the hide/show — NO CSS transition here, or the transition
   will animate these chars INTO the hidden state when the class is first
   applied (fighting GSAP's reveal and producing a visible title that then
   slides away).  Keep it to layout + origin + will-change. */
[data-split] .char,
[data-split] .line {
  display: inline-block;
  transform-origin: bottom center;
  will-change: transform, opacity;
}

[data-split] .line {
  overflow: hidden;
}


/* -------------------------------------------------------------
   5. GRAIN + INTRO CURTAIN + CUSTOM CURSOR
   ------------------------------------------------------------- */

/* Grain overlay — SVG noise data URI */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  mix-blend-mode: multiply;
  opacity: 0.08;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

/* Intro curtain */
#intro-curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  background: var(--espresso);
  color: var(--cream);
  overflow: hidden;
}

#intro-curtain.is-hidden {
  pointer-events: none;
}

.curtain-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 5vw, 64px) var(--shell-x);
}

.curtain-mark {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  margin-bottom: auto;
}

.curtain-mark__letter {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(180px, 32vw, 520px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--cream);
}

.curtain-mark__word {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted-cream);
}

.curtain-meta {
  position: absolute;
  top: clamp(24px, 5vw, 64px);
  right: var(--shell-x);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.curtain-meta__label {
  color: var(--muted-cream);
}

.curtain-meta__count {
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

.curtain-progress {
  width: 100%;
  height: 1px;
  background: rgba(233, 230, 223, 0.18);
  overflow: hidden;
}

.curtain-progress__bar {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--cream);
  transform-origin: left center;
  /* No CSS transition here — GSAP drives the width per-frame and a transition
     would fight the tween and leave the bar visually stuck near 0%. */
}

/* Custom cursor */
#cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: normal;
  width: 0;
  height: 0;
}

.cursor-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}

.cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition:
    width 0.3s var(--ease-out),
    height 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    transform 0.15s var(--ease-out);
}

.cursor-label {
  position: absolute;
  top: 0;
  left: 24px;
  padding: 6px 10px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translate(8px, 8px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

body.is-cursor-label .cursor-label {
  opacity: 1;
  transform: translate(12px, 12px);
}

body.is-cursor-hover .cursor-ring {
  width: 56px;
  height: 56px;
  border-color: var(--terracotta);
}

body.is-dragging,
body.is-dragging * {
  cursor: grabbing !important;
}

@media (hover: none), (pointer: coarse) {
  #cursor {
    display: none;
  }
}


/* -------------------------------------------------------------
   6. SITE HEADER / NAVIGATION
   ------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: 16px var(--shell-x);
  /* Over the dark hero by default — keep cream text + soft dark glass pane */
  color: var(--cream);
  background: linear-gradient(
    to bottom,
    rgba(10, 8, 6, 0.55) 0%,
    rgba(10, 8, 6, 0.30) 70%,
    rgba(10, 8, 6, 0) 100%
  );
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid rgba(233, 230, 223, 0.08);
  transition:
    color 0.45s var(--ease-out),
    background 0.45s var(--ease-out),
    backdrop-filter 0.45s var(--ease-out),
    padding 0.45s var(--ease-out),
    border-color 0.45s var(--ease-out);
}

/* Once scrolled past the hero, switch to a bright paper-frosted glass pane
   with ink text — stays readable over every other section (including the
   dark testimonials band, because the pane is dense enough). */
.site-header.is-scrolled {
  color: var(--ink);
  background: rgba(247, 244, 238, 0.78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: rgba(15, 13, 11, 0.08);
  padding: 12px var(--shell-x);
  box-shadow: 0 10px 30px -20px rgba(15, 13, 11, 0.25);
}

/* Opt-in legacy hook kept for dark sections if ever needed (unused now). */
.site-header.is-inverted {
  color: var(--cream);
}

.site-nav {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  width: 100%;
}

.nav__mark {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
}

.nav__mark-letter {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.nav__mark-wordmark {
  font-family: var(--ff-sans);
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
}

.nav__mark-wordmark em {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--muted);
}

.site-header.is-inverted .nav__mark-wordmark em {
  color: var(--muted-cream);
}

.nav__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

.nav__links a {
  position: relative;
  display: inline-block;
  padding: 6px 2px;
  font-family: var(--ff-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: inherit;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.5s var(--ease-out);
}

.nav__links a:hover::after,
.nav__links a:focus-visible::after,
.nav__links a.is-active::after {
  width: 100%;
}

.nav__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--ff-mono);
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-header.is-inverted .nav__meta {
  color: var(--muted-cream);
}

.nav__clock {
  font-variant-numeric: tabular-nums;
}

/* V1 ↔ V2 edition switcher */
.nav__version {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 6px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.3s var(--ease-out), background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.nav__version:hover {
  opacity: 1;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
}

.site-header.is-scrolled .nav__version:hover {
  background: var(--ink);
  color: var(--paper);
}

.nav__version-label {
  opacity: 0.6;
}

.nav__version-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

.nav__version:hover .nav__version-arrow {
  transform: translateX(3px);
}

/* On mobile, float the version switcher as a bottom-right pill so it stays
   accessible when the .nav__meta (clock + location) is collapsed into
   the drawer and would otherwise hide this link. */
@media (max-width: 959.98px) {
  .nav__version {
    position: fixed;
    bottom: 18px;
    right: 18px;
    top: auto;
    z-index: 90;
    background: rgba(15, 13, 11, 0.9);
    color: var(--paper);
    border: 1px solid rgba(244, 239, 230, 0.14);
    padding: 10px 14px;
    opacity: 1;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35);
  }
  .nav__version-label { display: none; }
}

/* Toggle (mobile) */
.nav__toggle {
  display: none;
  position: relative;
  width: 56px;
  height: 56px;
  padding: 0;
  cursor: pointer;
}

.nav__toggle-line {
  position: absolute;
  left: 14px;
  right: 14px;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
}

.nav__toggle-line:nth-child(1) {
  top: 22px;
}

.nav__toggle-line:nth-child(2) {
  top: 30px;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-line:nth-child(2) {
  transform: translateY(-4px) rotate(-45deg);
}

.nav__toggle-label {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__toggle-label::before {
  content: "Index";
}

.nav__toggle[aria-expanded="true"] .nav__toggle-label::before {
  content: "Close";
}

.nav__toggle-label {
  color: transparent;
}


/* -------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  min-height: 680px;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #1C1915 0%, #2A241F 100%);
  color: var(--cream);
}

/* v3 has no WebGL canvas — hide harmlessly if a stray element exists. */
#canvas-hero { display: none; }

/* ---- v3 STUDIO PORTRAIT HERO ----
   A real photograph sits behind the hero instead of a 3D scene.  The
   image lives inside a 3D-perspective stage so mousemove can tilt it,
   shift it, and track a highlight across it — producing a convincing
   depth illusion without WebGL. */
.hero--photo {
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.hero--photo .hero__bg-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

.hero--photo .hero__bg-img {
  position: absolute;
  inset: -6% -6% -6% -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: 50% 50%;
  transform-origin: center center;
  transform: translate3d(0, 0, 0) scale(1.06);
  will-change: transform;
  /* JS drives the transform via quickSetter — keep transition short so a
     slight lerp feels buttery, not rubbery. */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tracking highlight that follows the cursor — reads as a soft spotlight
   grazing across the wood slats, reinforcing the parallax depth. */
.hero--photo .hero__bg-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 28vmax at var(--light-x, 50%) var(--light-y, 50%),
    rgba(255, 220, 170, 0.18) 0%,
    rgba(255, 200, 140, 0.08) 22%,
    rgba(0, 0, 0, 0) 55%
  );
  mix-blend-mode: screen;
  transition: background 0.25s linear;
  z-index: 1;
}

/* The veil darkens the photo just enough for cream hero type to read.
   Deeper at the top (so our nav doesn't clash with the busy wood slats)
   and at the bottom (where the hero foot meta sits).  A soft radial
   vignette keeps the subject in the middle of the photo legible. */
.hero--photo .hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 8, 6, 0.55) 0%,
      rgba(10, 8, 6, 0.22) 22%,
      rgba(10, 8, 6, 0.15) 45%,
      rgba(10, 8, 6, 0.55) 80%,
      rgba(10, 8, 6, 0.80) 100%
    ),
    radial-gradient(
      ellipse 60% 45% at 38% 72%,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 100%
    );
}

.hero--photo .hero__content {
  position: absolute;
  left: var(--shell-x);
  right: var(--shell-x);
  bottom: 8vh;
  z-index: 2;
}

/* Fallback veil for any hero that isn't .hero--photo (unchanged). */
.hero:not(.hero--photo) .hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 60% 70%,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

@keyframes hero-bg-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-2%, -1.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero__bg-img {
    animation: none;
    transform: scale(1.04);
  }
  .hero--photo .hero__bg-light {
    display: none;
  }
}

/* ============================================================
   V3 CLASSIC NAV — boxed logo card + original menu items
   ============================================================ */

/* The "classic" header tweak — a bit more top padding so the logo card
   has room to breathe above the hero photo. */
.site-header--classic {
  padding-top: 22px;
}

.site-header__subtitle {
  position: absolute;
  top: 100px;
  left: calc(var(--shell-x) + 14px);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.02em;
  color: var(--cream);
  opacity: 0.75;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.site-header--classic.is-scrolled ~ main .site-header__subtitle,
.site-header--classic.is-scrolled .site-header__subtitle {
  color: var(--ink);
  text-shadow: none;
}

/* The boxed logo card — cream panel with big italic É, uppercase
   ÉLAN INTERIORS wordmark, and script "Vision Beyond Borders" tagline. */
.logo-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 96px;
  min-height: 84px;
  padding: 10px 14px 12px;
  background: var(--cream);
  color: var(--espresso);
  text-decoration: none;
  border: 1px solid rgba(61, 54, 49, 0.08);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.logo-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.4);
}

.logo-card__glyph {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--espresso);
  margin-bottom: 2px;
}

.logo-card__wordmark {
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espresso);
  line-height: 1;
}

.logo-card__tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 300;
  font-size: 8px;
  letter-spacing: 0.02em;
  color: var(--espresso);
  opacity: 0.7;
  line-height: 1.2;
  margin-top: 2px;
}

/* The classic horizontal menu — centred in the nav grid, uppercase,
   wide letter-spacing, cream on dark (over hero) or ink on paper glass
   (when scrolled) — inherits from .site-nav / .site-header colour rules. */
.nav__links--classic {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 3.2vw, 52px);
  font-family: var(--ff-sans);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.nav__links--classic a {
  position: relative;
  padding: 6px 2px;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

.nav__links--classic a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.5s var(--ease-out);
}

.nav__links--classic a:hover::after,
.nav__links--classic a:focus-visible::after,
.nav__links--classic a.is-active::after {
  width: 100%;
}

/* Classic nav grid: give the logo card a fixed-ish column so the menu
   sits centered in the remainder. */
.site-nav--classic {
  grid-template-columns: 130px 1fr auto auto auto;
  align-items: start;
}

.site-nav--classic .nav__meta,
.site-nav--classic .nav__version {
  align-self: center;
}

/* When the header switches to the scrolled paper-glass state, the card
   keeps its cream-on-espresso treatment (it's the brand mark), but drop
   the shadow a touch. */
.site-header--classic.is-scrolled .logo-card {
  box-shadow: 0 6px 18px -14px rgba(0, 0, 0, 0.35);
}

@media (max-width: 959.98px) {
  /* Mobile: shrink the card, drop the script subtitle from the header
     so it doesn't clash with the photo; keep the card visible. */
  .site-header--classic {
    padding-top: 14px;
  }
  .site-header__subtitle { display: none; }
  .logo-card {
    width: 68px;
    min-height: 64px;
    padding: 6px 8px 8px;
  }
  .logo-card__glyph     { font-size: 30px; }
  .logo-card__wordmark  { font-size: 6.5px; letter-spacing: 0.18em; }
  .logo-card__tagline   { font-size: 6px; }
  .site-nav--classic {
    grid-template-columns: auto 1fr auto;
  }
  .nav__links--classic {
    /* Drawer already styles .nav__links via .is-open; the classic
       horizontal spacing doesn't apply in the drawer. */
    gap: 32px;
    font-size: inherit;
    letter-spacing: -0.01em;
  }
}

.hero__content {
  position: absolute;
  left: var(--shell-x);
  right: var(--shell-x);
  bottom: 8vh;
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--cream);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
}

.hero__eyebrow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: eyebrow-pulse 2.4s var(--ease-in-out) infinite;
}

.hero__title {
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 144, "wght" 300;
  font-size: clamp(80px, 16vw, 280px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--cream);
}

.hero__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 300;
}

.hero__tagline {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 36px);
  line-height: 1.25;
  max-width: 40ch;
  color: rgba(233, 230, 223, 0.85);
}

.hero__tagline em {
  color: var(--champagne);
}

/* Canadian / New Brunswick provenance badge, sits under the tagline */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin-top: clamp(12px, 1.6vw, 20px);
  padding: 8px 14px 8px 12px;
  border: 1px solid rgba(233, 230, 223, 0.28);
  border-radius: 999px;
  background: rgba(15, 13, 11, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
}

.hero__badge-leaf {
  flex-shrink: 0;
  color: var(--terracotta);
  filter: drop-shadow(0 0 6px rgba(200, 111, 78, 0.35));
}

.hero__foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  margin-top: clamp(24px, 4vw, 48px);
  padding-top: 24px;
  border-top: 1px solid rgba(233, 230, 223, 0.2);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted-cream);
}

.hero__foot-num {
  justify-self: start;
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: center;
  color: var(--cream);
  padding: 10px 14px;
  border: 1px solid rgba(233, 230, 223, 0.25);
  border-radius: 999px;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.hero__scroll svg {
  animation: subtle-bob 2s ease-in-out infinite;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--cream);
}

.hero__foot-motto {
  justify-self: end;
  color: var(--champagne);
}


/* -------------------------------------------------------------
   8. GENERIC SECTION FRAMEWORK
   ------------------------------------------------------------- */
.section {
  position: relative;
  padding-inline: var(--shell-x);
  padding-block: var(--section-y);
  color: var(--ink);
  background: var(--paper);
}

.section + .section {
  padding-top: var(--section-y);
}

.section__label {
  position: relative;
  display: flex;
  gap: 18px;
  padding-top: 16px;
  margin-bottom: clamp(40px, 6vw, 80px);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}

.section__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
}

.section__label span:first-child {
  color: var(--ink);
}

.section--testimonials .section__label {
  color: var(--muted-cream);
}

.section--testimonials .section__label span:first-child {
  color: var(--cream);
}

.section--testimonials .section__label::before {
  background: var(--line-cream);
}


/* -------------------------------------------------------------
   9. PER-SECTION STYLES
   ------------------------------------------------------------- */

/* ---- 01 / VISION ---- */
.section--vision {
  background: var(--paper);
}

.vision__heading {
  font-family: var(--ff-display);
  font-size: clamp(48px, 8vw, 140px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-bottom: clamp(48px, 6vw, 96px);
}

.vision__heading em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 300;
  color: var(--espresso);
}

.vision__body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  row-gap: 32px;
  align-items: end;
}

.vision__quote {
  grid-column: 1 / 8;
  position: relative;
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.35;
  color: var(--ink);
  padding-left: clamp(32px, 5vw, 64px);
}

.vision__quote::before {
  content: "\201C";
  position: absolute;
  top: -0.2em;
  left: 0;
  font-family: var(--ff-display);
  font-size: clamp(60px, 6vw, 100px);
  line-height: 1;
  color: var(--terracotta);
}

.vision__quote footer {
  margin-top: 20px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}

.vision__caption {
  grid-column: 9 / -1;
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 30ch;
}


/* ---- MARQUEE (shared) — Section 10 below styles both bands ---- */


/* ---- 02 / PHILOSOPHY ---- */
.section--philosophy {
  background: var(--paper);
}

.philosophy__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.philosophy__figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--paper-2);
}

.philosophy__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.philosophy__figure:hover img {
  transform: scale(1.03);
}

.philosophy__figure figcaption {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 8px 12px;
  background: rgba(247, 244, 238, 0.85);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.philosophy__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.philosophy__copy h2 {
  font-size: clamp(32px, 5vw, 80px);
  line-height: 1;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

.philosophy__copy h2 em {
  color: var(--espresso);
}

.philosophy__copy p {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 52ch;
}

.philosophy__mark {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--espresso);
  width: 120px;
}

.philosophy__mark svg {
  width: 120px;
  height: auto;
}

.philosophy__mark span {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ---- 03 / SERVICES ---- */
.section--services {
  background: var(--paper);
}

.services__heading {
  font-size: clamp(48px, 8vw, 140px);
  margin-bottom: clamp(40px, 6vw, 80px);
}

.services__heading em {
  color: var(--espresso);
}

.services__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.service {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  align-items: start;
  padding-block: clamp(24px, 3.5vw, 40px);
  border-top: 1px solid var(--line);
  transition:
    background-color 0.6s var(--ease-out),
    padding 0.6s var(--ease-out);
}

.service:hover {
  background: var(--paper-2);
}

.service__num {
  grid-column: 1 / span 2;
  padding-top: clamp(38px, 5vw, 56px);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.service__body {
  grid-column: 3 / span 8;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 100px);
  line-height: 1;
  letter-spacing: -0.02em;
  padding-block: 32px 12px;
  color: var(--ink);
  transition: transform 0.6s var(--ease-out), color 0.6s var(--ease-out);
}

.service:hover .service__title {
  transform: translateX(10px);
  font-style: italic;
  color: var(--espresso);
}

.service[data-service="hospitality"] .service__title,
.service[data-service="consultation"] .service__title {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 300;
}

.service__desc {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.6;
  max-width: 60ch;
  color: var(--muted);
}

.service__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--espresso);
}

.service__tags li {
  position: relative;
  padding-right: 20px;
}

.service__tags li:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--muted);
}

.service__pull {
  grid-column: 11 / -1;
  justify-self: end;
  padding-top: clamp(38px, 5vw, 56px);
  font-family: var(--ff-display);
  font-size: 40px;
  line-height: 1;
  color: var(--ink);
  transition: transform 0.6s var(--ease-out), color 0.6s var(--ease-out);
}

.service:hover .service__pull {
  transform: translateX(12px);
  color: var(--terracotta);
}


/* ---- 04 / PORTFOLIO ---- */
.section--portfolio {
  background: var(--paper);
  padding-inline: 0;
}

.section--portfolio .section__label,
.section--portfolio .portfolio__header {
  padding-inline: var(--shell-x);
}

.portfolio__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.portfolio__header h2 {
  font-size: clamp(48px, 8vw, 140px);
  line-height: 0.95;
}

.portfolio__header h2 em {
  color: var(--espresso);
}

.portfolio__hint {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.portfolio__hint-line {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--ink);
  transform-origin: left;
  animation: hint-line 3.6s var(--ease-in-out) infinite;
}

.portfolio__viewport {
  width: 100%;
  overflow: hidden;
  height: clamp(520px, 72vh, 780px);
  cursor: grab;
}

body.is-dragging .portfolio__viewport {
  cursor: grabbing;
}

.portfolio__track {
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  padding-inline: var(--shell-x);
  height: 100%;
  align-items: flex-start;
  will-change: transform;
}

.project {
  flex-shrink: 0;
  width: clamp(280px, 34vw, 520px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project__index {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.project__image {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-2);
}

.project__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 0.6s var(--ease-out);
  filter: saturate(0.92);
}

.project:hover .project__image img {
  transform: scale(1.04);
  filter: saturate(1.05);
}

.project__meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: font-style 0.4s var(--ease-out), color 0.4s var(--ease-out);
}

.project:hover .project__title {
  font-style: italic;
  color: var(--espresso);
}

.project__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.project__facts > div {
  display: inline-flex;
  gap: 6px;
}

.project__facts > div:not(:last-child)::after {
  content: "/";
  margin-left: 18px;
  color: var(--line);
}

.project__facts dt {
  color: var(--ink);
  opacity: 0.5;
}

.project__facts dd {
  margin: 0;
  color: var(--espresso);
}

.project__blurb {
  font-family: var(--ff-sans);
  font-size: 13px;
  line-height: 1.55;
  max-width: 32ch;
  color: var(--muted);
}


/* ---- 05 / SPOTLIGHT ---- */
.section--spotlight {
  background: var(--paper);
}

.spotlight__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.spotlight__figure {
  overflow: hidden;
  aspect-ratio: 5 / 7;
  background: var(--paper-2);
}

.spotlight__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}

.spotlight__figure:hover img {
  transform: scale(1.03);
}

.spotlight__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.spotlight__eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.spotlight__copy h2 {
  font-size: clamp(44px, 6vw, 100px);
  line-height: 1;
  max-width: 14ch;
}

.spotlight__copy h2 em {
  color: var(--espresso);
}

.spotlight__copy p {
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.65;
  max-width: 58ch;
  color: rgba(15, 13, 11, 0.75);
}

.spotlight__copy .btn {
  align-self: flex-start;
  margin-top: 16px;
}


/* ---- 06 / TESTIMONIALS ---- */
.section--testimonials {
  background: var(--espresso);
  color: var(--cream);
}

.section--testimonials::before,
.section--testimonials::after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
}

.testimonials__heading {
  font-size: clamp(48px, 7vw, 120px);
  line-height: 0.95;
  max-width: 14ch;
  color: var(--cream);
  margin-bottom: clamp(40px, 6vw, 80px);
}

.testimonials__heading em {
  font-style: italic;
  color: var(--champagne);
}

.testimonials__slider {
  position: relative;
  padding-block: 40px 104px;
  min-height: clamp(360px, 46vh, 560px);
}

.testimonial {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 104px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity 0.8s var(--ease-out),
    transform 0.8s var(--ease-out);
}

.testimonial.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* IMPORTANT: max-width on the blockquote resolves `ch` at the blockquote's
   inherited body font (~16px), giving ~260px — far too narrow for the big
   display type inside.  Put the measure on the <p> itself so `ch` is
   computed at the display font size. */
.testimonial blockquote {
  max-width: none;
}

.testimonial blockquote p {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 42px);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--cream);
  font-style: italic;
  max-width: min(62ch, 980px);
}

.testimonial blockquote p::before {
  content: "\201C";
  color: var(--champagne);
  margin-right: 4px;
}

.testimonial blockquote p::after {
  content: "\201D";
  color: var(--champagne);
  margin-left: 4px;
}

.testimonial figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.testimonial figcaption strong {
  color: var(--cream);
  font-weight: 400;
}

.testimonial figcaption span {
  color: var(--muted-cream);
}

.testimonials__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-cream);
  z-index: 2;
}

.testimonials__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  min-width: 56px;
  font-family: var(--ff-mono);
  font-size: 18px;
  color: var(--cream);
  border: 1px solid var(--line-cream);
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.testimonials__btn:hover,
.testimonials__btn:focus-visible {
  background: var(--cream);
  color: var(--espresso);
  border-color: var(--cream);
}

.testimonials__counter {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted-cream);
  font-variant-numeric: tabular-nums;
}


/* ---- 07 / CONTACT ---- */
.section--contact {
  background: var(--paper);
}

.contact__heading {
  font-size: clamp(48px, 8vw, 140px);
  line-height: 0.95;
  max-width: 14ch;
  margin-bottom: clamp(48px, 6vw, 96px);
}

.contact__heading em {
  color: var(--espresso);
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 5vw, 80px);
}

.contact__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact__col h3 {
  font-family: var(--ff-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact__col address {
  font-style: normal;
  font-family: var(--ff-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

.contact__col a {
  display: block;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.contact__col a:hover,
.contact__col a:focus-visible {
  color: var(--terracotta);
  transform: translateX(4px);
}

.contact__col--social ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact__col--social a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
  font-size: clamp(20px, 1.8vw, 28px);
}

.contact__col--social a span {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact__col--mailing p {
  font-family: var(--ff-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 32ch;
}

.mailing {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mailing input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.4s var(--ease-out);
}

.mailing input::placeholder {
  color: var(--muted);
}

.mailing input:focus {
  outline: none;
  border-bottom-color: var(--terracotta);
}

.mailing button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}

.mailing button svg {
  transition: transform 0.4s var(--ease-out);
}

.mailing button:hover,
.mailing button:focus-visible {
  background: var(--terracotta);
}

.mailing button:hover svg,
.mailing button:focus-visible svg {
  transform: translateX(4px);
}


/* -------------------------------------------------------------
  10. MARQUEES
   ------------------------------------------------------------- */
.marquee {
  width: 100%;
  overflow: hidden;
  padding-block: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.marquee--2 {
  background: var(--cream);
  border-color: rgba(15, 13, 11, 0.1);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  animation: marquee-scroll 40s linear infinite;
  will-change: transform;
}

.marquee--2 .marquee__track {
  color: var(--espresso);
  animation-duration: 48s;
  animation-direction: reverse;
}

.marquee__track span {
  white-space: nowrap;
}

.marquee__track em {
  font-family: var(--ff-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 500;
  color: var(--espresso);
}

.marquee--2 .marquee__track em {
  color: var(--terracotta);
}


/* -------------------------------------------------------------
  11. BUTTONS / FORMS (generic)
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}

.btn svg {
  transition: transform 0.4s var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.btn:hover svg,
.btn:focus-visible svg {
  transform: translateX(4px);
}

.btn--ghost {
  background: transparent;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--terracotta);
  color: var(--paper);
  border-color: var(--terracotta);
}


/* -------------------------------------------------------------
  12. FOOTER
   ------------------------------------------------------------- */
.footer {
  position: relative;
  padding-inline: var(--shell-x);
  padding-block: 80px clamp(40px, 6vw, 80px);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
}

.footer__big {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(120px, 28vw, 440px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--espresso);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  margin-left: -0.04em;
}

.footer__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer__meta p:first-child {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer__leaf {
  color: var(--terracotta);
  flex-shrink: 0;
}

.contact__note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--ff-sans);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  max-width: 32ch;
}


/* -------------------------------------------------------------
  13. KEYFRAMES
   ------------------------------------------------------------- */
@keyframes eyebrow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes subtle-bob {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}

@keyframes curtain-bar {
  from { width: 0%; }
  to { width: 100%; }
}

@keyframes letter-reveal {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes hint-line {
  0%, 100% { transform: scaleX(0.3); }
  50% { transform: scaleX(1); }
}


/* -------------------------------------------------------------
  14. MEDIA QUERIES (mobile-first, min-width)
   ------------------------------------------------------------- */

/* ≥ 640px — small tablets */
@media (min-width: 640px) {
  body {
    font-size: 16px;
  }

  .hero__content {
    gap: 24px;
  }

  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
  }
}

/* ≥ 960px — tablet / small desktop */
@media (min-width: 960px) {
  .nav__toggle {
    display: none;
  }

  .site-nav {
    grid-template-columns: auto 1fr auto;
  }

  .nav__links {
    display: flex;
  }

  .philosophy__grid {
    grid-template-columns: 7fr 5fr;
    gap: clamp(32px, 4vw, 80px);
  }

  .philosophy__copy {
    position: sticky;
    top: 120px;
    gap: 24px;
  }

  .spotlight__grid {
    grid-template-columns: 6fr 6fr;
    gap: clamp(40px, 5vw, 96px);
  }

  .contact__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 60px);
  }

  .portfolio__viewport {
    height: clamp(520px, 72vh, 780px);
  }
}

/* ≥ 1280px — desktop fine-tuning */
@media (min-width: 1280px) {
  .vision__heading {
    max-width: 16ch;
  }

  .service__title {
    font-size: clamp(56px, 6.5vw, 112px);
  }

  .philosophy__copy h2 {
    font-size: clamp(40px, 5vw, 88px);
  }
}

/* ≥ 1600px — wide desktop */
@media (min-width: 1600px) {
  :root {
    --shell-x: clamp(60px, 4.2vw, 120px);
  }

  .hero__title {
    font-size: clamp(140px, 15vw, 320px);
  }
}

/* BELOW 960px — mobile stack + off-canvas nav */
@media (max-width: 959.98px) {
  .site-nav {
    grid-template-columns: auto 1fr auto;
  }

  .nav__toggle {
    display: block;
    z-index: 110;
    color: inherit;
  }

  .nav__meta {
    display: none;
  }

  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    width: min(90vw, 520px);
    height: 100vh;
    padding: 120px var(--shell-x) 40px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    background: var(--espresso);
    color: var(--cream);
    transform: translateX(100%);
    z-index: 105;
  }
  /* Enable the slide transition only once the page has finished first paint,
     so a viewport resize (desktop → mobile) doesn't trigger a 0.6s tween from
     identity to translateX(100%) that can get stuck on hidden tabs. */
  body.is-ready .nav__links {
    transition: transform 0.6s var(--ease-in-out);
  }

  .site-nav[aria-expanded="true"] .nav__links,
  .nav__toggle[aria-expanded="true"] ~ .nav__links,
  .site-header:has(.nav__toggle[aria-expanded="true"]) .nav__links {
    transform: translateX(0);
  }

  .nav__links li {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 0.6s var(--ease-out),
      transform 0.6s var(--ease-out);
  }

  .site-header:has(.nav__toggle[aria-expanded="true"]) .nav__links li {
    opacity: 1;
    transform: translateY(0);
  }

  .site-header:has(.nav__toggle[aria-expanded="true"]) .nav__links li:nth-child(1) { transition-delay: 0.10s; }
  .site-header:has(.nav__toggle[aria-expanded="true"]) .nav__links li:nth-child(2) { transition-delay: 0.18s; }
  .site-header:has(.nav__toggle[aria-expanded="true"]) .nav__links li:nth-child(3) { transition-delay: 0.26s; }
  .site-header:has(.nav__toggle[aria-expanded="true"]) .nav__links li:nth-child(4) { transition-delay: 0.34s; }
  .site-header:has(.nav__toggle[aria-expanded="true"]) .nav__links li:nth-child(5) { transition-delay: 0.42s; }

  .nav__links a {
    font-family: var(--ff-display);
    font-size: clamp(28px, 6vw, 56px);
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--cream);
  }

  .nav__links a::after {
    display: none;
  }

  /* Clone of meta inside drawer bottom */
  .nav__links::after {
    content: "45.81°N · 64.68°W — Dieppe, NB";
    position: absolute;
    bottom: 40px;
    left: var(--shell-x);
    right: var(--shell-x);
    padding-top: 24px;
    border-top: 1px solid rgba(233, 230, 223, 0.2);
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--muted-cream);
  }

  .hero__foot {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: start;
  }

  .hero__foot-num,
  .hero__scroll,
  .hero__foot-motto {
    justify-self: start;
  }

  .vision__body {
    grid-template-columns: 1fr;
  }

  .vision__quote,
  .vision__caption {
    grid-column: 1 / -1;
    max-width: none;
  }

  .service {
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding-block: 32px;
  }

  .service__num,
  .service__body,
  .service__pull {
    grid-column: 1 / -1;
  }

  .service__num {
    padding-top: 0;
  }

  .service__title {
    padding-block: 8px;
    font-size: clamp(36px, 10vw, 64px);
  }

  .service__pull {
    justify-self: start;
    padding-top: 12px;
    font-size: 32px;
  }

  .portfolio__viewport {
    height: auto;
    overflow: visible;
  }

  .portfolio__track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    transform: none !important;
    padding-inline: var(--shell-x);
  }

  .project {
    width: 100%;
  }

  .testimonial blockquote {
    max-width: none;
  }

  .curtain-meta {
    position: static;
    align-items: flex-start;
    order: -1;
  }

  .curtain-inner {
    flex-direction: column;
    justify-content: space-between;
  }
}

/* ≤ 639px — phones */
@media (max-width: 639.98px) {
  .section__label {
    font-size: 11px;
    gap: 12px;
  }

  .portfolio__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .vision__heading,
  .services__heading,
  .contact__heading,
  .testimonials__heading {
    font-size: clamp(44px, 11vw, 72px);
  }

  .hero__content {
    bottom: 6vh;
    gap: 16px;
  }

  .hero__title {
    font-size: clamp(64px, 18vw, 120px);
  }

  .testimonials__nav {
    flex-wrap: wrap;
    gap: 12px;
  }

  .contact__col--social a {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .footer__big {
    font-size: clamp(100px, 36vw, 200px);
  }
}


/* -------------------------------------------------------------
  15. REDUCED MOTION + PRINT
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
    scroll-behavior: auto !important;
  }

  .marquee__track,
  .hero__eyebrow-dot,
  .hero__scroll svg,
  .portfolio__hint-line {
    animation: none !important;
  }

  [data-reveal],
  [data-split] .char,
  [data-split] .line {
    opacity: 1 !important;
    transform: none !important;
  }

  .project__image img,
  .philosophy__figure img,
  .spotlight__figure img {
    transition: none !important;
  }

  .project:hover .project__image img,
  .philosophy__figure:hover img,
  .spotlight__figure:hover img {
    transform: none !important;
  }
}

@media print {
  .grain-overlay,
  #intro-curtain,
  #cursor,
  .site-header,
  .marquee,
  .hero__scroll,
  .testimonials__nav {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .section {
    padding-block: 40px;
    page-break-inside: avoid;
  }
}

/* End of stylesheet */