/* ==========================================================================
   RAVN DIGITAL — V2 SITE STYLES
   One page. Sections below are labeled and ordered to match index.html.
   Edit within a labeled block only — don't let one section's fix touch another.
   ========================================================================== */

/* ─── DESIGN TOKENS ───────────────────────────────────────────────────── */
:root {
  --white: #FFFFFF;
  --off-white: #F7F6F3;
  --ink: #0A0A0A;
  --mid: #6A6A6A;
  --faint: #E5E3DE;
  --gold: #C5963A;
  --gold-light: #DEB96A;
}

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

html { scroll-behavior: smooth; }

/* Every anchor target lands with clearance below the fixed nav instead of underneath it */
[id] { scroll-margin-top: 130px; }

body {
  background: var(--white);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── NAV ─────────────────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 56px;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}

#nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  padding: 16px 56px;
  box-shadow: 0 1px 0 var(--faint);
}

.nav-logo img { height: 40px; display: block; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 44px;
}

.nav-center {
  display: flex;
  gap: 44px;
  list-style: none;
}

.nav-center a {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s ease;
}

#nav.scrolled .nav-center a { color: var(--mid); }
.nav-center a:hover { color: var(--gold) !important; }

.nav-cta {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--white);
  padding: 12px 22px;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.3s ease, color 0.3s ease;
}

.nav-cta:hover { background: var(--gold); color: var(--white); }

/* ─── HERO ────────────────────────────────────────────────────────────── */
.intro-view {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.intro-top { flex-shrink: 0; }

.hero {
  width: 100%;
  height: var(--hero-height, 62vh);
  min-height: 320px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
  pointer-events: none;
  z-index: 2;
}

.hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.hero-frame {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--white);
}

.hero-label {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 12px;
}

.hero-ring {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-ring svg { width: 18px; height: 18px; fill: var(--white); }

/* ─── POSITIONING STATEMENT ───────────────────────────────────────────── */
.brand-statement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 120px 56px 72px;
  align-items: center;
  background: var(--white);
  position: relative;
  z-index: 1;
}

.brand-statement h1 {
  font-family: 'Cormorant', serif;
  font-weight: 300;
  font-size: clamp(52px, 5.6vw, 92px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.brand-statement h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--mid);
}

/* Animated word container — now the whole h1, not just "performs.", since
   the animation covers the full "Media that performs." headline. Height is
   2 lines at the h1's own line-height (1.05em x 2 = 2.1em), sized in em so
   it always matches the current font-size at any viewport width without
   needing separate breakpoint rules. Shows the plain text now; swap in the
   After Effects export when it's ready (see the commented Lottie setup near
   the bottom of the script). */
.animated-word {
  display: block;
  height: 2.1em;
  line-height: 1.05;
  overflow: hidden;
}

.brand-statement .right p {
  font-family: 'Jost', sans-serif;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--mid);
  max-width: 460px;
}

/* ─── SHARED — scroll reveal (elements animate in as they enter view) ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }

/* Real Estate section entrance — quick upward crawl, slower opacity fade.
   The first two attempts at timing this were fragile: Real Estate sits with
   zero buffer above the fold by design (the earlier "zero creep" guarantee),
   so a trigger tied to the section's own position has almost no room to
   lead the reveal — depending on exact scroll speed, the fade could finish
   before the section was ever visible, or be nearly done by the time it
   was. Simplified to trigger on the very first scroll (reliable, no fold-
   position dependency) and lengthened the opacity duration substantially —
   long enough that it's still visibly mid-transition when the section comes
   into view regardless of how fast someone scrolls or how a given browser
   times things, rather than depending on split-second synchronization. */
#real-estate {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 2.8s ease, transform 0.7s ease;
}

#real-estate.is-visible { opacity: 1; transform: translateY(0); }

/* Section breather — after three attempts at making the transition into an
   event, the fix was to stop trying. Generous space and one thin line,
   nothing else — matching the same restraint every eyebrow accent on the
   site already uses, rather than inventing a new, louder pattern. */
.section-breather {
  display: flex;
  justify-content: center;
  padding: 110px 0;
}

.section-breather-line {
  width: 1px;
  height: 64px;
  background: var(--gold);
  opacity: 0.5;
}

/* ─── ABOUT ────────────────────────────────────────────────────────────── */
#about { padding: 110px 56px 140px; max-width: 1400px; margin: 0 auto; }

.about-header { max-width: 640px; margin-bottom: 88px; }

.about-header h2 {
  font-family: 'Cormorant', serif;
  font-weight: 300;
  font-size: clamp(38px, 4vw, 52px);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 24px;
}

.about-header > p {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--mid);
}

.about-bios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}

.about-bio-photo {
  aspect-ratio: 4 / 5;
  max-width: 50%;
  margin-bottom: 32px;
}

.about-bio-text h3 {
  font-family: 'Cormorant', serif;
  font-weight: 400;
  font-size: 30px;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.about-bio-title {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.about-bio-credentials {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  color: var(--mid);
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--faint);
}

.about-bio-copy {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--mid);
  margin-bottom: 24px;
}

.about-portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.about-portfolio-link:hover { color: var(--gold); border-color: var(--gold); }
.about-portfolio-link svg { transition: transform 0.3s ease; }
.about-portfolio-link:hover svg { transform: translateX(3px); }

/* ─── GET A QUOTE ──────────────────────────────────────────────────────── */
#quote { padding: 110px 56px 140px; max-width: 1400px; margin: 0 auto; }

.quote-header { max-width: 640px; margin-bottom: 72px; }

.quote-header h2 {
  font-family: 'Cormorant', serif;
  font-weight: 300;
  font-size: clamp(38px, 4vw, 52px);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 24px;
}

.quote-header > p {
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--mid);
}

.quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 640px) 1fr;
  gap: 80px;
  align-items: start;
}

.quote-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-group { margin-bottom: 28px; }

.form-group label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 12px;
}

.form-group .optional {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  margin-left: 6px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 15px 18px;
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--faint);
  border-radius: 2px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
}

.form-group textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.service-selector { margin-bottom: 28px; }

.service-selector label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 14px;
}

.service-selector .optional {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
}

.service-buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.service-btn {
  padding: 14px 16px;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--mid);
  background: var(--white);
  border: 1px solid var(--faint);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.service-btn:hover { border-color: var(--gold); color: var(--gold); }

.service-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

.quote-submit { width: 100%; text-align: center; margin-top: 8px; cursor: pointer; }

.quote-sidebar {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quote-sidebar-label {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 12px;
}

.quote-contact-link {
  font-family: 'Jost', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.3s ease;
}

.quote-contact-link:hover { color: var(--gold); }

.quote-location {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  margin-top: 8px;
  margin-bottom: 32px;
}

.quote-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--faint);
}

.quote-trust-item {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ─── SHARED TYPOGRAPHY — used everywhere, don't fork this per-section ── */
.eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.section-header-text .eyebrow-lg {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.32em;
  margin-left: -18px;
}

.eyebrow-lg::before {
  width: 56px;
  height: 2px;
}

.section-header {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  padding: 56px 56px 72px;
  max-width: 1400px;
  margin: 0 auto 0;
}

.section-header-text h2 {
  font-family: 'Cormorant', serif;
  font-weight: 400;
  font-size: clamp(36px, 3.5vw, 56px);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 20px;
}

.section-header-text h2 em { font-style: italic; font-weight: 300; color: var(--mid); }

.section-header-text p {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  max-width: 560px;
}

.section-header-media { border-radius: 4px; }

/* ─── SHARED — media placeholder (matches original thumb treatment) ──── */
.media-placeholder {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #111;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.media-placeholder:hover { transform: scale(1.015); }

/* Real photos/videos placed inside any placeholder (gallery tiles, section
   headers, pillar media, etc.) fill their box and crop to fit, regardless of
   the source file's own aspect ratio - this is what lets a photographer
   deliver whatever native ratio their camera shoots without needing to
   pre-crop every image to match each tile's specific shape. */
.media-placeholder img,
.media-placeholder video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Vimeo (or other) embeds - object-fit isn't reliable on iframes across
   browsers, so this fills the container by absolute positioning instead;
   the embedded player itself handles fitting its video inside that box. */
.media-placeholder iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
}

.media-placeholder .ph-label {
  position: relative;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
  text-align: center;
}

.media-placeholder.light { background: #F0EEEA; }
.media-placeholder.light .ph-label { color: var(--mid); opacity: 0.5; letter-spacing: 0.3em; }
.media-placeholder.light::after { display: none; }

.media-placeholder.ratio-16-9 { aspect-ratio: 16 / 9; }
.media-placeholder.ratio-4-3 { aspect-ratio: 4 / 3; }
.media-placeholder.ratio-9-16 { aspect-ratio: 9 / 16; max-width: 280px; }

/* ─── SHARED — pkg-card grid (packages, offerings, tiers, anything cards) ─ */
.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.pkg-card {
  border: 1px solid var(--faint);
  padding: 40px 32px;
  transition: border-color 0.3s;
  display: flex;
  flex-direction: column;
}

.pkg-card:hover { border-color: var(--gold); }

.pkg-tier {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.pkg-name {
  font-family: 'Cormorant', serif;
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 20px;
  line-height: 1.2;
}

.pkg-list { list-style: none; margin-bottom: 32px; flex-grow: 1; }

.pkg-list li {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px solid var(--faint);
}

.pkg-list li:last-child { border-bottom: none; }

.pkg-link {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s;
}

.pkg-link::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s;
}

.pkg-card:hover .pkg-link { color: var(--gold); }
.pkg-card:hover .pkg-link::after { width: 40px; }

/* ─── SHARED — gallery grid (thin-bordered thumbnail grid) ───────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

/* ─── SHARED — showcase item (media + text, alternating) ─────────────── */
.showcase-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.showcase-item.reverse { direction: rtl; }
.showcase-item.reverse > * { direction: ltr; }

.showcase-item.narrow-media { grid-template-columns: 280px 1fr; }

.showcase-text h3 {
  font-family: 'Cormorant', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.2;
}

.idx-num {
  display: block;
  font-family: 'Cormorant', serif;
  font-size: 56px;
  font-weight: 300;
  color: var(--faint);
  line-height: 1;
  margin-bottom: 4px;
}

.showcase-text p {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 12px;
}

/* ─── SHARED — capability strip ───────────────────────────────────────── */
.capability-strip {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
  padding: 4px 0;
}

.capability-strip span {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 16px 28px;
  border-left: 1px solid var(--faint);
}

.capability-strip span:first-child { border-left: none; }

/* ─── SHARED — stats / CTA dark band ──────────────────────────────────── */
.stats-cta {
  background: var(--off-white);
  padding: 110px 0;
}

.stats-cta-inner { max-width: 1400px; margin: 0 auto; padding: 0 56px; }

.stats-cta h3 {
  font-family: 'Cormorant', serif;
  font-size: clamp(36px, 3.5vw, 56px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  max-width: 700px;
  margin-bottom: 64px;
}

.stats-cta h3 em { font-style: italic; color: var(--mid); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 56px; }
.stat-item { border-left: 1px solid var(--faint); padding-left: 28px; }

.stat-number {
  font-family: 'Cormorant', serif;
  font-size: 52px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 12px;
}

.stat-desc {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.6;
}

.stat-source {
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--mid);
  opacity: 0.6;
  margin-top: 8px;
  letter-spacing: 0.05em;
}

.btn-gold {
  display: inline-block;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 16px 40px;
  text-decoration: none;
  transition: background 0.3s;
}

.btn-gold:hover { background: var(--gold-light); }

/* Social Media Content — full-bleed off-white band, deliberately distinct from
   the surrounding white sections (not dark — a full-bleed black slide was tried
   before and read as jarring against the rest of the page). This is the pillar
   we push hardest, so it gets more visual weight than a standard showcase-item:
   its own proof stats and a larger, layered viewer for vertical content. */
.social-feature {
  background: var(--off-white);
  padding: 110px 0;
}

.photos-feature { padding: 100px 0 110px; }

.photos-header-wrap { max-width: 1400px; margin: 0 auto; padding: 0 56px; }

.photos-feature .photo-gallery {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 56px;
  padding-right: 56px;
}

/* Shared header — identical position, size, and style for every single offering.
   Number, title, one-line intro. This is what makes every offering read as the
   same kind of thing, whatever comes below it varies per offering. */
.offer-header { max-width: 700px; margin-bottom: 48px; }

.offer-header h3 {
  font-family: 'Cormorant', serif;
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  margin: 6px 0 16px;
}

.offer-header h3 em { font-style: italic; font-weight: 300; color: var(--mid); }

.stats-headline {
  font-family: 'Cormorant', serif;
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 20px;
}

.stats-headline em { font-style: italic; font-weight: 300; color: var(--mid); }

.offer-header p {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.75;
  max-width: 620px;
}

.social-feature-content { max-width: 1400px; margin: 0 auto; padding: 0 56px; }

.social-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 700px) 300px;
  gap: 72px;
  align-items: center;
}

.social-feature-grid .offer-header { margin-bottom: 0; }
.offer-header-wide p { max-width: 100%; }

.reel-viewer { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

.punch-list {
  list-style: none;
  max-width: 480px;
}

.punch-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--faint);
}

.punch-item:first-child { padding-top: 0; }
.punch-item:last-child { border-bottom: none; }

.punch-lead {
  display: block;
  font-family: 'Cormorant', serif;
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: 1.3;
}

.punch-lead-sm { font-size: 22px; color: var(--mid); }

.punch-stat {
  display: block;
  font-family: 'Cormorant', serif;
  font-size: 42px;
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}

.punch-label {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.45;
  margin-bottom: 6px;
}

.punch-source {
  display: block;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--mid);
  opacity: 0.6;
}

/* ─── REAL ESTATE SECTION ─────────────────────────────────────────────── */
.re-offerings { padding: 88px 56px 100px; max-width: 1400px; margin: 0 auto; }

/* What We Do — quiet three-column breather between the brand statement and
   Real Estate. White background so it sits flush with the sections on
   either side rather than introducing a new tone into the page. */
.what-we-do { padding: 100px 56px; }

.what-we-do-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 48px;
  max-width: 1400px;
  margin: 0 auto;
}

.what-we-do-col { border-top: 2px solid var(--gold); padding-top: 20px; }

.what-we-do-label {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}

.what-we-do-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.what-we-do-list li {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--mid);
  padding-left: 18px;
  position: relative;
  margin-bottom: 11px;
}

.what-we-do-list li strong {
  font-weight: 600;
  color: var(--ink);
}

.what-we-do-list li:last-child { margin-bottom: 0; }

.what-we-do-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 1px;
  background: var(--gold);
}

.re-offerings .offer-block {
  margin-bottom: 90px;
  padding-top: 64px;
  border-top: 1px solid var(--faint);
}

.re-offerings .offer-block:first-child {
  padding-top: 0;
  border-top: none;
}

/* Signature Film — intro plus two real example cards, not a text list */
.signature-block { margin-bottom: 90px; }

.signature-intro { max-width: 640px; margin-bottom: 40px; }

.signature-intro h3 {
  font-family: 'Cormorant', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.2;
}

.signature-intro p {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
}

.signature-styles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.style-card h4 {
  font-family: 'Cormorant', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 18px 0 8px;
}

.style-card p {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.6;
}

/* Listing Photos — paginated gallery with arrow navigation */
.photo-gallery { display: flex; flex-direction: column; gap: 20px; }

.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

/* True masonry, computed in JS rather than relying on CSS multi-column's
   "balance" algorithm (which recalculates the whole layout on any content
   change - that's what was causing already-placed photos to jump columns
   when more were added). Column heights are tracked incrementally in JS: a
   new photo always goes into whichever column is shortest *at that moment*,
   and once placed, a photo's position is never recalculated - this is what
   real masonry libraries (Pinterest-style) actually do under the hood.
   Container is position:relative because tiles are placed with explicit
   position:absolute coordinates computed in JS, not CSS grid/column flow. */
.photo-gallery-lg .photo-grid {
  position: relative;
}

.photo-gallery-lg .photo-grid .media-placeholder {
  position: absolute;
}

/* Crop line — masonry columns naturally end at different heights (that's the
   whole point of masonry), which left a jagged, hole-like bottom edge before
   the "View More" button. wayupmedia.com's gallery avoids this with a hard
   crop instead of trying to force equal column heights; a soft fade over the
   last stretch keeps the cut from looking like a photo was sliced mid-frame. */
.photo-grid-clip {
  position: relative;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.photo-grid-clip { --clip-height: 760px; }
.photo-grid-clip.is-clipped { max-height: var(--clip-height); }
.photo-grid-clip:not(.is-clipped) { max-height: 4000px; }

.photo-grid-clip.is-clipped::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 130px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  pointer-events: none;
}

.photo-grid .media-placeholder {
  width: 100%;
  break-inside: avoid;
  margin-bottom: 14px;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.photo-grid .media-placeholder.is-in { opacity: 1; transform: scale(1); }

.gallery-view-more {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  margin: 8px auto 0;
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--faint);
  padding: 14px 30px;
  border-radius: 30px;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease;
}

.gallery-view-more svg {
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

.gallery-view-more:hover { border-color: var(--gold); color: var(--gold); }
.gallery-view-more:active svg { transform: translateY(2px); }
.gallery-view-more.is-expanded svg { transform: rotate(180deg); }

/* Social Media Content — stacked reel frames, not a flat box */
.reel-stack {
  position: relative;
  width: 240px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
}

/* Larger reel-stack variant for Social Media Content specifically — the base
   .reel-stack above stays the smaller size for any future supporting use;
   this is the section where the phone viewer IS the point, so it's bigger.
   Placed after the base rule deliberately: same specificity (single class
   each), so source order decides the winner — width/height need to land
   here, not before .reel-stack, or the base rule's width silently wins. */
.reel-stack-lg { width: 300px; height: 533.3px; margin: 0 auto; }

.reel-frame {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: #111;
  overflow: hidden;
}

.reel-back-1 { transform: rotate(-5deg) translateY(8px); opacity: 0.5; z-index: 1; }
.reel-back-2 { transform: rotate(6deg) translateY(14px); opacity: 0.28; z-index: 0; }

.reel-main {
  z-index: 2;
  box-shadow: 0 24px 48px rgba(0,0,0,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reel-main video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.showcase-item.narrow-media:hover .reel-main { transform: scale(1.02); }
.showcase-item.narrow-media:hover .reel-back-1 { transform: rotate(-7deg) translateY(10px); }
.showcase-item.narrow-media:hover .reel-back-2 { transform: rotate(8deg) translateY(18px); }
.reel-back-1, .reel-back-2 { transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1); }

.reel-progress {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 4px;
}

.reel-progress span {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
}

.reel-progress span.active { background: var(--gold); }

.reel-main .ph-label {
  position: relative;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.18);
}

/* Listing Films — video viewer: one player, switchable via thumbs */
/* Production Films — matches the live site's Production Films section
   exactly (layout, alternation, tag badges), reusing RAVN-V2's own
   .media-placeholder system for the video boxes rather than duplicating a
   second placeholder treatment alongside it. */
.film-showcase-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  margin-bottom: 80px;
}

.film-showcase-item:last-child { margin-bottom: 0; }

.film-showcase-reverse .film-showcase-video { order: 2; }
.film-showcase-reverse .film-showcase-text { order: 1; }

.film-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: 'Jost', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  backdrop-filter: blur(4px);
  z-index: 1;
}

.film-showcase-text h4 {
  font-family: 'Cormorant', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.2;
}

.film-showcase-text p {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 20px;
}

.film-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: color 0.3s ease;
}

.film-cta::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}

.film-cta:hover { color: var(--ink); }
.film-cta:hover::after { width: 40px; }

/* Project Showcase — one merged narrative across three stages (beginning,
   middle, end) instead of switchable tabs. Each stage gets a quiet numbered
   marker, reusing the same ghost-outline-numeral language as the rest of
   the site (matching idx-num, the side nav) rather than inventing a new
   pattern, just without the interactive/clickable behavior a tab implies —
   there's nothing to switch between anymore, so nothing here should look
   clickable. */
.showcase-stages {
  display: flex;
  flex-direction: column;
  gap: 88px;
}

/* Showcase groups - one per named service (matching the brochure's own
   names directly), each containing one or more existing stages. Heavier
   visual weight than .stage-marker below (thicker gold rule, larger
   heading) so a group reads as a bigger division than the individual
   pieces nested inside it. */
.showcase-group {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.showcase-group-header {
  padding-top: 28px;
  border-top: 3px solid var(--gold);
}

.showcase-group-title {
  font-family: 'Cormorant', serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 32px);
  color: var(--ink);
  line-height: 1.2;
  margin-bottom: 12px;
}

.showcase-group-intro {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  max-width: 640px;
}

.showcase-group-note {
  background: #F0EEEA;
  border-radius: 4px;
  padding: 24px 28px;
}

.showcase-group-note p {
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
}

.showcase-group-note strong {
  font-weight: 600;
  color: var(--ink);
}

.stage-marker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--faint);
}

.stage-num {
  font-family: 'Cormorant', serif;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
}

.stage-label {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}

.pillar-grid {
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  gap: 56px;
  align-items: start;
}

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

.pillar-loop { aspect-ratio: 16 / 9; }


.pillar-media-caption {
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 300;
  font-style: italic;
  color: var(--mid);
}

.pillar-text h4 {
  font-family: 'Cormorant', serif;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 20px;
}

.pillar-text > p {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 20px;
}

.pillar-text > p strong { color: var(--ink); font-weight: 500; }


/* Featured Brochure — moved to the top of Project Showcase, ahead of the
   three stages, since this brochure is the detailed sales tool for the
   whole section and deserves to be seen before someone decides whether to
   keep reading. Uses a custom-designed button image rather than a built
   card, so the button itself carries the full visual treatment. */
/* Wrapper for this specific offer-header - puts it side by side with the
   brochure button and a thin gold divider between them. Scoped overrides
   only, since .offer-header itself is shared by every offering site-wide
   and shouldn't change anywhere else. */
.offer-header-with-brochure {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 80px;
}

.offer-header-with-brochure .offer-header {
  max-width: none;
  margin-bottom: 0;
}

.offer-header-divider {
  width: 1px;
  height: 130px;
  background: var(--gold);
  opacity: 0.45;
}

.brochure-feature {
  display: flex;
  justify-content: center;
}

.brochure-button-link {
  display: inline-block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.brochure-button-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.brochure-button-img {
  display: block;
  max-width: 480px;
  width: 100%;
  height: auto;
}

.brochure-eyebrow {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.btn-brochure,
.btn-watch-full {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Before/After slider — drag to reveal. The "before" layer sits on top with
   a clip-path driven by one CSS custom property (--reveal), so JS only ever
   sets one value instead of juggling widths on two separate elements. */
.before-after-slider {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  cursor: ew-resize;
  --reveal: 50%;
}

.ba-layer { position: absolute; inset: 0; }
.ba-after { position: relative; }
.ba-before { clip-path: inset(0 50% 0 0); }

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--white);
  transform: translateX(-50%);
  pointer-events: none;
}

.ba-handle-line { position: absolute; inset: 0; background: var(--white); }

.ba-handle-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--ink);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  cursor: ew-resize;
}

.ba-tag {
  position: absolute;
  top: 16px;
  font-family: 'Jost', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(10, 10, 10, 0.55);
  padding: 6px 12px;
  pointer-events: none;
}

.ba-tag-before { left: 16px; }
.ba-tag-after { right: 16px; }

/* Brand Reel Film — single media placeholder, same width discipline as the video viewer */
.brand-feature-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.brand-feature-grid .offer-header { margin-bottom: 0; }

.offer-media-solo { aspect-ratio: 16 / 9; }


/* Services — readable list, no prices */
.services-feature {
  background: var(--off-white);
  padding: 100px 0 110px;
  position: relative;
}

.services-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  opacity: 0.7;
}

.services-content { max-width: 1400px; margin: 0 auto; padding: 0 56px; }

.services-content h3 {
  font-family: 'Cormorant', serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 40px;
  line-height: 1.2;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--faint);
}

.services-group-label {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.services-list {
  list-style: none;
}

.services-list li {
  font-family: 'Jost', sans-serif;
  font-size: 15px;
  font-weight: 300;
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--faint);
}

.services-list li:last-child { border-bottom: none; }

.services-note {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--gold);
  letter-spacing: 0.02em;
}

/* ─── CONSTRUCTION SECTION ────────────────────────────────────────────── */
/* No section-level constraint here, matching #real-estate — individual
   full-bleed offerings (stats-cta, social-feature, services-feature) each
   manage their own width. A leftover placeholder-era rule used to cap this
   whole section at 1240px, which broke every full-bleed child once real
   content replaced the placeholder text. */

/* ─── ABOUT SECTION ────────────────────────────────────────────────────── */
/* placeholder — built next checkpoint */
#about {
  padding: 120px 56px;
  max-width: 1240px;
  margin: 0 auto;
}

/* ─── QUOTE / CONTACT SECTION ─────────────────────────────────────────── */
/* placeholder — built next checkpoint */
#quote {
  padding: 120px 56px;
  max-width: 1240px;
  margin: 0 auto;
  background: var(--off-white);
}

/* ─── FOOTER ──────────────────────────────────────────────────────────── */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 56px;
  border-top: 1px solid var(--faint);
}

.footer-logo img { height: 26px; display: block; opacity: 0.8; }

.footer-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.footer-links a {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
}

.footer-links a:hover { color: var(--gold); }

.footer-copy {
  font-family: 'Jost', sans-serif;
  font-size: 11px;
  color: rgba(0,0,0,0.25);
  letter-spacing: 0.05em;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  #nav { padding: 20px 24px; }
  .nav-center { display: none; }

  .social-feature { padding: 64px 24px; }
  .social-feature-grid { grid-template-columns: 1fr; gap: 32px; }
  .punch-list { max-width: none; }
  .services-grid { grid-template-columns: 1fr; gap: 32px; }
  .brand-feature-grid { grid-template-columns: 1fr; gap: 32px; }
  .section-breather { padding: 72px 0; }
  #about { padding: 72px 24px 100px; }
  .about-header { margin-bottom: 56px; }
  .about-bios { grid-template-columns: 1fr; gap: 56px; }

  #quote { padding: 72px 24px 100px; }
  .quote-header { margin-bottom: 48px; }
  .quote-layout { grid-template-columns: 1fr; gap: 48px; }
  .quote-form-row { grid-template-columns: 1fr; gap: 0; }
  .service-buttons { grid-template-columns: 1fr 1fr; }
  #offer-c-showcase { margin-bottom: 40px; }
  .showcase-stages { gap: 56px; }
  .what-we-do { padding: 64px 24px; }
  .offer-header-with-brochure { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
  .offer-header-divider { width: 100%; height: 1px; }
  .brochure-feature { margin-bottom: 0; }
  .what-we-do-grid { grid-template-columns: 1fr; gap: 32px; }
  .section-header-text .eyebrow-lg { margin-left: -8px; }
  .film-showcase-item { grid-template-columns: 1fr; gap: 24px; margin-bottom: 48px; }
  .film-showcase-reverse .film-showcase-video,
  .film-showcase-reverse .film-showcase-text { order: initial; }
  .pillar-grid { grid-template-columns: 1fr; gap: 32px; }
  .reel-stack-lg { width: 220px; height: 391px; }



  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .brand-statement {
    grid-template-columns: 1fr;
    padding: 32px 24px 64px;
    gap: 24px;
  }
  .section-header { grid-template-columns: 1fr; padding: 64px 24px 0; gap: 32px; }

  .stats-cta { padding: 64px 24px; }
  .stats-cta-inner { padding: 0; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 32px; }
  .stat-item { padding-left: 8px; }
  .stat-number { font-size: 22px; margin-bottom: 6px; }
  .stat-desc { font-size: 9px; line-height: 1.4; }
  .stat-source { display: none; }

  .re-offerings { padding: 56px 24px 64px; }
  .showcase-item, .showcase-item.reverse, .showcase-item.narrow-media { grid-template-columns: 1fr; direction: ltr; gap: 24px; }
  .signature-styles { grid-template-columns: 1fr; gap: 32px; }
  .media-placeholder.ratio-9-16 { max-width: 200px; }
  .services-list { columns: 1; }

  .packages-grid { grid-template-columns: 1fr; }
  .capability-strip { flex-direction: column; }
  .capability-strip span { border-left: none; border-top: 1px solid var(--faint); padding: 14px 0; }
  .capability-strip span:first-child { border-top: none; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }

  footer { flex-direction: column; gap: 20px; padding: 32px 24px; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}