/* ============================================
   New Image Landscaping — Pine / Parchment / Brass theme
   Pine #14201a · Parchment #f4efe3 · Moss #4f5d40 · Brass #b98a4e
   ============================================ */

:root {
  --pine: #14201a;
  --pine-mid: #1f2e22;
  --parchment: #f4efe3;
  --moss: #4f5d40;
  --moss-dark: #3b4630;
  --brass: #b98a4e;
  --brass-dark: #9c7040;
  --paper: #faf7f0;
  --paper-deep: #f1ece0;
  --ink: #241f16;
  --ink-soft: #5a5140;
  --icon: #4f5d40;
  --border-hairline: rgba(36, 31, 22, 0.12);
  --white: #ffffff;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --max-width: 1180px;
  --radius: 4px;
  --shadow-soft: 0 16px 40px -20px rgba(20, 32, 26, 0.28);
  --transition: 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--pine);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.2rem; font-weight: 500; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: var(--moss-dark); text-decoration: none; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-dark);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--brass);
  display: inline-block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition);
}

.btn-primary {
  background: var(--brass);
  color: #1a1408;
}
.btn-primary:hover { background: var(--brass-dark); transform: translateY(-1px); }

.btn-secondary {
  background: transparent;
  border-color: var(--border-hairline);
  color: var(--pine);
}
.btn-secondary:hover { border-color: var(--pine); background: var(--paper-deep); }

.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,0.45);
  color: var(--white);
}
.btn-outline-light:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: transparent;
  opacity: var(--se-progress, 1);
  transition: background var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
  background: var(--pine);
  box-shadow: 0 4px 20px -6px rgba(0,0,0,0.3);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* top/bottom only — a `padding: 1.75rem 0` shorthand here would zero
     out the horizontal gutter inherited from .container. Invisible on
     desktop (the container's own centering margin fills the gap once
     the viewport exceeds --max-width), but on mobile .container spans
     the full viewport, so this was the only source of edge margin and
     the shorthand was silently deleting it. */
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.logo {
  display: flex;
  align-items: center;
}
.logo-lockup {
  height: 64px;
  width: auto;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-weight: 500;
  font-size: 0.92rem;
  color: rgba(244,239,227,0.88);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--transition);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--brass);
  transition: width var(--transition);
}
.nav-links a:hover { color: var(--parchment); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--brass); }

.nav-cta { display: flex; align-items: center; gap: 1.5rem; }
.nav-phone { font-weight: 600; font-size: 0.92rem; color: var(--parchment); }

.nav-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(244,239,227,0.45);
  border-radius: 50%;
  color: var(--parchment);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.nav-instagram:hover { border-color: var(--brass); color: var(--brass); background: rgba(244,239,227,0.08); }
.nav-instagram svg { width: 17px; height: 17px; }

/* Mobile-only call button — the full phone-number text doesn't fit next
   to the logo, Instagram icon and hamburger once the header has proper
   edge margins, so mobile gets a matching icon button instead (desktop
   keeps the text link via .nav-phone). */
.nav-phone-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(244,239,227,0.45);
  border-radius: 50%;
  color: var(--parchment);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.nav-phone-icon:hover { border-color: var(--brass); color: var(--brass); background: rgba(244,239,227,0.08); }
.nav-phone-icon svg { width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--parchment);
  margin: 6px 0;
  transition: transform var(--transition), opacity var(--transition);
}

@media (max-width: 860px) {
  /* padding-top/bottom only — a plain `padding: 1.1rem 0` shorthand here
     would zero out the horizontal gutter .nav-row inherits from
     .container, leaving the logo and hamburger flush against the
     screen edges. */
  .nav-row { position: relative; padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .logo-lockup { height: 58px; }
  .nav-toggle { order: 3; }
  .nav-cta { order: 2; }
  .nav-links {
    position: absolute;
    top: calc(100% - 19px);
    right: 0;
    left: auto;
    width: 220px;
    background: var(--pine);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 360ms ease;
    pointer-events: none;
  }
  .nav-links.open {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 1rem 1.5rem;
    width: 100%;
    color: rgba(244,239,227,0.88);
    text-align: left;
  }
  .nav-links a::after { display: none; }
  .nav-cta .nav-phone, .nav-cta .btn-outline-light { display: none; }
  .nav-phone-icon { display: inline-flex; }
  .nav-toggle { display: block; }

  .hero-copy h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero-tagline { font-size: 1rem; }
  .hero-motto { font-size: 1.1rem; }
  .hero-copy .eyebrow { font-size: 0.68rem; }
}

/* Hover-to-open is only for devices with a real cursor (narrow desktop
   windows, trackpads). On touch, :hover latches on after a tap and only
   releases on the next tap elsewhere, which made the menu need two taps
   to close. Keeping it out of the touch path and driving mobile purely
   off the JS-controlled .open class (with a click-outside handler) fixes
   that while preserving the polished hover behavior on desktop. */
@media (max-width: 860px) and (hover: hover) and (pointer: fine) {
  .nav-toggle:hover ~ .nav-links,
  .nav-links:hover {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }
}

/* ---------- Hero (video, homepage) ---------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  padding: 128px 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--parchment);
}
@media (max-width: 860px) {
  /* Center the copy block instead of pinning it to the bottom edge —
     flush-bottom felt cramped against the area-strip below. The extra
     padding-bottom (excluded from the centered region) nudges the
     visual center upward rather than landing dead-center. */
  .hero {
    padding-top: 96px;
    padding-bottom: 3rem;
    min-height: 0;
    justify-content: center;
  }
  /* The headline and CTA were hugging the screen edges at the base
     1.5rem container gutter — give the hero its own wider gutter. */
  .hero .container { padding-left: 1.85rem; padding-right: 1.85rem; }

  /* Lock the hero + area-strip pair to exactly one screen's worth of
     visible viewport, using the dynamic viewport unit so it tracks the
     browser chrome (address bar / tab strip) as it shows and hides,
     instead of the static `vh` value that made the fit inconsistent
     across Safari, in-app browsers, and full-screen mode. */
  .hero-viewport {
    display: flex;
    flex-direction: column;
    height: 100vh;   /* fallback for browsers without dvh support */
    height: 100dvh;
  }
  .hero-viewport .hero { flex: 1 1 auto; }
  .hero-viewport .area-strip { flex: 0 0 auto; }
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 0;
  background: var(--pine) center 55% / cover no-repeat;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(24,37,28,0.47) 0%, rgba(24,37,28,0.09) 34%, rgba(24,37,28,0.07) 55%, rgba(24,37,28,0.68) 100%),
    linear-gradient(100deg, rgba(24,37,28,0.32) 0%, rgba(24,37,28,0.16) 42%, rgba(24,37,28,0.05) 68%, rgba(24,37,28,0) 92%);
}
.hero-copy-wrap {
  position: relative;
  z-index: 2;
  padding: 4rem 0 2.25rem;
}
.hero-copy { max-width: 640px; }
.hero-copy .eyebrow { color: #F7F3E8; }
.hero-copy .eyebrow::before { background: #C28D4A; }
.hero-copy h1 {
  color: #F7F3E8;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.hero-tagline {
  font-size: 1.15rem;
  max-width: 500px;
  color: #F7F3E8;
  position: relative;
  z-index: 1;
}
.hero-tagline::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -2.5rem; bottom: -2.5rem;
  left: -3rem; right: -3rem;
  background: radial-gradient(ellipse closest-side, rgba(24,37,28,0.32) 0%, rgba(24,37,28,0.15) 50%, rgba(24,37,28,0) 100%);
  pointer-events: none;
}
.hero-motto {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: #F7F3E8;
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid #C28D4A;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero-actions .btn-primary { background: #C28D4A; color: #263A2C; }
.hero-actions .btn-primary:hover { background: #ad7a3c; }
.hero-actions .btn-outline-light { border-color: #F7F3E8; color: #F7F3E8; }
.hero-actions .btn-outline-light:hover { border-color: #F7F3E8; background: rgba(247,243,232,0.1); }

.hero-badges {
  display: flex;
  gap: 1.5rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.hero-badge { font-size: 0.85rem; color: rgba(244,239,227,0.82); display: flex; align-items: center; gap: 0.5rem; }
.hero-badge svg { width: 18px; height: 18px; color: var(--brass); flex-shrink: 0; }

@media (max-width: 860px) {
  .hero-copy-wrap { padding: 0; }
  .hero-copy .eyebrow { margin-bottom: 0.5rem; }
  .hero-motto { margin-top: 0.6rem; }
  .hero-actions { margin-top: 0.85rem; gap: 0.75rem; }
  .hero-actions .btn { padding: 0.65rem 1.3rem; font-size: 0.86rem; }
  .hero-badges { margin-top: 0.6rem; gap: 0.5rem 1.1rem; }
  .hero-badge { font-size: 0.78rem; }
}

/* Shorter phones (iPhone SE and similar, ~700px tall and under): the
   bigger logo plus the CTA row wrapping to two lines no longer leaves
   room for everything within one screen. Compact the copy block so it
   still fits without clipping into the header or the area-strip. */
@media (max-width: 860px) and (max-height: 720px) {
  .hero-copy h1 { font-size: 1.55rem; }
  .hero-tagline { font-size: 0.92rem; }
  .hero { padding-bottom: 1.25rem; }
  .hero-copy .eyebrow { margin-bottom: 0.3rem; }
  .hero-motto { margin-top: 0.4rem; font-size: 1rem; }
  .hero-actions { margin-top: 0.6rem; gap: 0.6rem; flex-wrap: nowrap; }
  .hero-actions .btn { padding: 0.55rem 0.9rem; font-size: 0.76rem; }
  .hero-badges { margin-top: 0.4rem; gap: 0.35rem 0.9rem; }
  .hero-badge { font-size: 0.7rem; }
}

.scroll-cue {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(244,239,227,0.7);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.scroll-cue .line { width: 1px; height: 34px; background: rgba(244,239,227,0.4); }

/* ---------- Page header (non-home pages) ---------- */
.page-header {
  padding: 11rem 0 3rem;
  background: var(--pine);
  text-align: center;
}
.page-header h1 { color: var(--parchment); }
.page-header p { color: rgba(244,239,227,0.78); }
.page-header .eyebrow { color: var(--brass); }

/* ---------- Story page ---------- */
.story-container { max-width: 700px; margin: 0 auto; }
.story-kicker {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--brass-dark);
  margin: 0 0 2rem;
}
.story-container p:not(.story-kicker) {
  font-size: 1.08rem;
  line-height: 1.75;
}

/* ---------- Service area strip ---------- */
.area-strip {
  background: var(--pine);
  color: var(--white);
  padding: 0.9rem 0;
}
.area-strip .container {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
}
.area-strip strong { color: var(--brass); font-weight: 600; }
.area-chip {
  color: rgba(255,255,255,0.72);
  padding-left: 1.1rem;
  border-left: 1px solid rgba(255,255,255,0.22);
}

@media (max-width: 860px) {
  .area-strip { padding: 0.7rem 0; }
  .area-strip .container {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .area-strip .container::-webkit-scrollbar { display: none; }
  .area-strip strong, .area-chip { white-space: nowrap; }
}

/* ---------- Sections ---------- */
section { padding: 6rem 0; }
.section-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.section-head.left { margin: 0 0 3rem; text-align: left; }

.grid {
  display: grid;
  gap: 1.75rem;
}
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2.25rem 1.85rem;
  border: 1px solid var(--border-hairline);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.card:hover { border-color: transparent; box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.card-icon {
  width: 40px; height: 40px;
  color: var(--icon);
  margin-bottom: 1.25rem;
}
.card-icon * { stroke-width: 1.25; }
.card a.card-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brass-dark);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  transition: gap var(--transition);
}
.card a.card-link:hover { gap: 0.6rem; }

.section-alt { background: var(--paper-deep); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--pine);
  color: var(--white);
  padding: 4.5rem 0;
  text-align: center;
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(255,255,255,0.7); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--pine);
  color: rgba(255,255,255,0.75);
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h4 { color: var(--white); font-family: var(--font-body); font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-grid a { color: rgba(255,255,255,0.75); }
.footer-grid a:hover { color: var(--brass); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-logo { height: 30px; width: auto; margin-bottom: 0.9rem; }
.footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  color: rgba(255,255,255,0.65);
  font-size: 0.95rem;
  margin: 0.25rem 0 1rem;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1.5rem;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}

/* ---------- Forms ---------- */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 860px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 560px;
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .contact-grid .card { padding: 1.5rem 1.25rem; }
  .field input, .field select, .field textarea { padding: 0.65rem 0.8rem; font-size: 0.92rem; }
  .form-grid { gap: 1rem; }
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.4rem; grid-column: span 1; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--paper-deep);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--moss);
}
.form-note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 1rem; }

/* ---------- Gallery ---------- */
.gallery-group { margin-bottom: 4rem; }
.gallery-group:last-child { margin-bottom: 0; }
.gallery-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-hairline);
}
.gallery-group-head h3 { margin: 0; font-size: 1.4rem; }
.gallery-group-head span { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.gallery-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .gallery-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-row { grid-template-columns: 1fr; } }
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  border: 1px solid var(--border-hairline);
  background: var(--paper-deep);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.gallery-note {
  text-align: center;
  max-width: 560px;
  margin: 3rem auto 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ---------- Scroll-expand hero intro (homepage, desktop only) ---------- */
.scroll-expand {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--pine);
  overflow: hidden;
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scroll-expand.is-expanded {
  opacity: 0;
  pointer-events: none;
}
.scroll-expand-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 55%;
  opacity: calc(1 - var(--se-progress, 0));
}
.scroll-expand-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 8, 0.42);
}
.scroll-expand-logo {
  position: absolute;
  z-index: 3;
  top: calc(16% - var(--se-progress, 0) * 10.3%);
  left: calc(50% - var(--se-progress, 0) * 39%);
  transform: translate(-50%, -50%) scale(calc(1 - var(--se-progress, 0) * 0.6));
  opacity: calc(1 - var(--se-progress, 0) * 1.7);
  pointer-events: none;
}
.scroll-expand-logo img {
  height: 84px;
  width: auto;
  filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.4));
}
.scroll-expand-media {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(300px + var(--se-progress, 0) * 1250px);
  height: calc(340px + var(--se-progress, 0) * 460px);
  max-width: 96vw;
  max-height: 90vh;
  border-radius: calc(20px - var(--se-progress, 0) * 20px);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.scroll-expand-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scroll-expand-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 1.2rem;
  z-index: 2;
  pointer-events: none;
  text-align: center;
  opacity: calc(var(--se-progress, 0) * 2.5);
}
.scroll-expand-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  color: #F7F3E8;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}
.scroll-expand-word-left { transform: translateX(calc(var(--se-progress, 0) * -18vw)); }
.scroll-expand-word-right { transform: translateX(calc(var(--se-progress, 0) * 18vw)); }
.scroll-expand-hint {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  opacity: calc(1 - var(--se-progress, 0) * 2.2);
  text-align: center;
}
.scroll-expand-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C28D4A;
  font-weight: 600;
}
.scroll-expand-cta { font-size: 0.85rem; color: rgba(247, 243, 232, 0.75); }

@media (max-width: 860px) {
  .scroll-expand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-expand { display: none; }
}