/* Candidate-C-local token override — see brand-tokens-v2.css header for why
   this replaces ../../shared/brand-tokens.css (keeps Candidates A + B intact). */
@import './brand-tokens-v2.css';

/* ── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--gray-700);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }

/* ── Utilities ──────────────────────────────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* Reachable by screen readers, invisible on screen — used for the headings that
   label the tour tablist and its panel. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.accent-rule {
  display: block; width: 32px; height: 2px;
  background: var(--accent); margin-bottom: 18px;
}
.accent-rule--center { margin-left: auto; margin-right: auto; }

.section-eyebrow {
  font-size: var(--eyebrow-size); font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
/* Heading 2 — Montserrat SemiBold (600) per the style guide */
.section-headline {
  font-family: var(--display);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight); color: var(--gray-900);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading); margin-bottom: 18px;
}
/* Body — Inter Regular */
.section-sub {
  font-size: 0.97rem; font-weight: var(--body-weight);
  color: var(--gray-500); line-height: 1.85; max-width: 540px;
}
.section-sub--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header { margin-bottom: 48px; }
.section-header--center { text-align: center; }
.section-header--center .section-sub { margin: 0 auto; }
.section-header--center .accent-rule { margin-left: auto; margin-right: auto; }

/* ── Fade-in (initial load elements) ───────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-in.visible { opacity: 1; transform: none; }
.fade-in.delay-1 { transition-delay: 0.1s; }
.fade-in.delay-2 { transition-delay: 0.2s; }
.fade-in.delay-3 { transition-delay: 0.3s; }
.fade-in.delay-4 { transition-delay: 0.4s; }

/* ── Scroll-reveal (images + sections — fade + scale) ───────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1),
              transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in.visible { opacity: 1; transform: none; transition: none; }
  .reveal, .reveal.visible   { opacity: 1; transform: none; transition: none; }
}

/* ── Buttons ───────────────────────────────────────────────────────────────────
   TWO styles site-wide, per the reference mockup's BUTTON STYLE panel:
     .btn--primary   → solid Slate Blue fill, white uppercase label
     .btn--secondary → white fill, Slate Blue border + Slate Blue label
   The former .btn--outline / .btn--outline-light variants are gone; every
   instance across all six pages now uses one of the two above. Uppercase +
   letter-spacing matches the mockup's button label treatment. */
.btn {
  display: inline-block; font-family: var(--sans);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.11em;
  text-transform: uppercase; text-decoration: none;
  padding: 14px 30px; border-radius: var(--radius); cursor: pointer;
  transition: background 0.22s, color 0.22s, border-color 0.22s;
  border: 1px solid transparent; line-height: 1;
}
.btn--primary {
  background: var(--accent); color: var(--white); border-color: var(--accent);
}
.btn--primary:hover { background: var(--accent-light); border-color: var(--accent-light); }
.btn--secondary {
  background: var(--white); color: var(--accent); border-color: var(--accent);
}
.btn--secondary:hover { background: var(--accent-tint); }
/* Keyboard focus is never suppressed — visible on both fills and both surfaces. */
.btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.section-packages .btn:focus-visible,
.section-booking-cta .btn:focus-visible {
  outline-color: var(--accent-on-dark);
}

/* ── Nav ─────────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 68px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(13,13,13,0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background 0.35s, box-shadow 0.35s;
}
.nav.scrolled {
  background: rgba(255,255,255,0.97);
  border-bottom-color: var(--gray-100);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
.nav__brand {
  font-family: var(--display); font-size: 1.02rem; font-weight: 700;
  color: var(--white); letter-spacing: 0.01em; text-decoration: none; flex-shrink: 0;
  transition: color 0.35s;
}
.nav.scrolled .nav__brand { color: var(--gray-900); }
/* Slate is too dark to read on the transparent (over-image) nav — lifted slate
   there, true brand slate once the nav goes white on scroll. */
.nav__brand span { color: var(--accent-on-dark); }
.nav.scrolled .nav__brand span { color: var(--accent); }
.nav__links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav__links a {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.09em;
  text-transform: uppercase; color: rgba(255,255,255,0.88);
  text-decoration: none; transition: color 0.2s;
}
.nav.scrolled .nav__links a { color: var(--gray-700); }
.nav__links a:hover { color: var(--accent-on-dark); }
.nav.scrolled .nav__links a:hover { color: var(--accent); }
/* Nav CTA = the primary button, per the reference mockup's nav bar */
.nav__cta {
  background: var(--accent) !important; color: var(--white) !important;
  padding: 10px 20px; border-radius: var(--radius);
  letter-spacing: 0.08em !important;
  border: 1px solid var(--accent); transition: background 0.2s !important;
}
.nav__cta:hover { background: var(--accent-light) !important; border-color: var(--accent-light) !important; }
.nav.scrolled .nav__cta:hover { color: var(--white) !important; }
.nav__hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 6px; margin-left: auto;
}
.nav__hamburger span {
  display: block; width: 22px; height: 2px; background: var(--white);
  transition: transform 0.25s, opacity 0.25s, background 0.35s; border-radius: 1px;
}
.nav.scrolled .nav__hamburger span { background: var(--gray-700); }
.nav--open .nav__hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__hamburger span:nth-child(2) { opacity: 0; }
.nav--open .nav__hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────────────────────────── */
.section-hero {
  position: relative;
  height: 100vh; min-height: 580px;
  overflow: hidden;
}
.hero-slides {
  position: absolute; inset: 0;
}
.hero-slide {
  position: absolute; inset: 0;
  animation: hero-cf 18s linear infinite;
}
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
}
/* z-index stacking: slide1 on top so its fade reveals slide2 below */
.hero-slide:nth-child(1) { z-index: 3; animation-delay: 0s; }
.hero-slide:nth-child(2) { z-index: 2; animation-delay: -12s; }
.hero-slide:nth-child(3) { z-index: 1; animation-delay: -6s; }

@keyframes hero-cf {
  0%, 30%   { opacity: 1; }
  40%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide:nth-child(1) { opacity: 1; }
}

.hero-overlay {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(
    to top,
    rgba(13,13,13,0.82) 0%,
    rgba(13,13,13,0.38) 42%,
    rgba(13,13,13,0.10) 100%
  );
  pointer-events: none;
}

/* Trust strip — overlays the bottom of the hero */
.hero-trust {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  background: rgba(13,13,13,0.68);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 0;
}
.hero-trust__inner {
  max-width: var(--max-w); width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 0 24px;
}
.hero-trust__stat {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center;
  padding: 16px 12px;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.hero-trust__stat:last-child { border-right: none; }
.hero-trust__stat-num {
  font-family: var(--display); font-size: 1.5rem; font-weight: 700;
  color: var(--white); line-height: 1;
}
.hero-trust__stat-label {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.55);
}

.hero-content {
  /* EDIT 1: increased breathing room around headline + CTAs */
  position: absolute; bottom: 116px; left: 0; right: 0; z-index: 10;
  padding: 0 max(32px, calc((100% - var(--max-w)) / 2 + 32px));
  max-width: calc(var(--max-w) + 64px);
}
.hero__eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(255,255,255,0.72); margin-bottom: 20px;
}
/* Heading 1 — Montserrat Bold (700), large and strong, per the style guide */
.hero__headline {
  font-family: var(--display);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight); color: var(--white);
  line-height: var(--h1-leading);
  margin-bottom: 20px; max-width: 760px; letter-spacing: var(--h1-tracking);
}
/* Hero subheadline — names the full service list required by the launch
   checklist, so it runs a touch wider than the H1 measure. */
.hero__sub {
  font-size: 1.06rem; line-height: 1.6; font-weight: 400;
  color: rgba(255,255,255,0.86);
  margin-bottom: 34px; max-width: 660px;
}
/* Montserrat is used upright throughout — no italic display face is loaded, so
   the second line simply continues the Bold H1 (matches the reference hero). */
.hero__headline em { font-style: normal; color: var(--white); }

/* Hero CTA pair — solid slate primary + white/slate-outline secondary. Both
   sit on dark imagery; the white secondary fill keeps the slate label legible
   there while still being the exact secondary style from the reference. */
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.hero__cta { display: inline-flex; align-items: center; padding: 17px 36px; }

/* ── Package Snapshot (compact) ─────────────────────────────────────────────── */
.section-packages {
  padding: 80px 24px;
  background: var(--gray-900);
}
.section-packages .section-headline { color: var(--white); }
.section-packages .section-eyebrow { color: var(--accent-on-dark); }
.section-packages .accent-rule { background: var(--accent-on-dark); }
.section-packages .section-sub { color: rgba(255,255,255,0.5); }
.section-packages .section-header { max-width: var(--max-w); margin: 0 auto 40px; }

.pkg-compact-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,0.06);
}
.pkg-compact-card {
  background: rgba(255,255,255,0.03);
  display: flex; flex-direction: column;
  border: 1px solid transparent;
  transition: background 0.25s;
}
.pkg-compact-card:hover { background: rgba(255,255,255,0.06); }
.pkg-compact-card--featured {
  border-color: var(--accent-on-dark);
  background: rgba(58,75,99,0.32);
}

/* EDIT 2: image-led compact card with hover/tap/focus feature reveal */
.pkg-compact-media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; cursor: pointer;
  background: var(--gray-900);
}
.pkg-compact-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), filter 0.4s ease;
}
.pkg-compact-media-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(13,13,13,0.55) 0%, rgba(13,13,13,0) 55%);
  transition: opacity 0.4s ease;
}
.pkg-compact-flag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--white);
  background: var(--accent); padding: 5px 10px; border-radius: var(--radius);
}

/* Reveal panel — sits over the image, hidden until hover/focus/tap */
.pkg-compact-reveal {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: 22px 22px; gap: 10px;
  background: rgba(13,13,13,0.82);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
.pkg-compact-reveal-title {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent-on-dark);
}
.pkg-compact-features { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.pkg-compact-features li {
  position: relative; padding-left: 18px;
  font-size: 0.74rem; line-height: 1.4; color: rgba(255,255,255,0.9);
}
.pkg-compact-features li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px;
  /* subtle check mark drawn with a border — no boxed white card, matches
     Candidate C's understated language */
  border-right: 1.5px solid var(--accent-on-dark);
  border-bottom: 1.5px solid var(--accent-on-dark);
  transform: translateY(-2px) rotate(45deg);
}

/* Reveal triggers: desktop hover, keyboard focus-within, touch .is-revealed */
.pkg-compact-card:hover  .pkg-compact-reveal,
.pkg-compact-card:focus-within .pkg-compact-reveal,
.pkg-compact-card.is-revealed .pkg-compact-reveal {
  opacity: 1; transform: none; pointer-events: auto;
}
.pkg-compact-card:hover  .pkg-compact-media img,
.pkg-compact-card:focus-within .pkg-compact-media img,
.pkg-compact-card.is-revealed .pkg-compact-media img {
  transform: scale(1.04); filter: brightness(0.5);
}

/* Toggle button — the accessible tap target (shown on touch, hidden where
   hover already reveals) */
.pkg-compact-reveal-toggle {
  position: absolute; bottom: 12px; right: 12px; z-index: 4;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(13,13,13,0.55); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.pkg-compact-reveal-toggle:hover { border-color: var(--white); background: rgba(13,13,13,0.75); }
.pkg-compact-toggle-icon { position: relative; width: 12px; height: 12px; display: block; }
.pkg-compact-toggle-icon::before,
.pkg-compact-toggle-icon::after {
  content: ''; position: absolute; background: var(--white);
  transition: transform 0.25s ease;
}
.pkg-compact-toggle-icon::before { top: 5px; left: 0; width: 12px; height: 2px; }
.pkg-compact-toggle-icon::after  { left: 5px; top: 0; width: 2px; height: 12px; }
.pkg-compact-card.is-revealed .pkg-compact-toggle-icon::after { transform: rotate(90deg); }
@media (hover: hover) {
  .pkg-compact-reveal-toggle { display: none; }
}

.pkg-compact-body {
  padding: 24px 24px 28px;
  display: flex; flex-direction: column; flex: 1;
}
.pkg-compact-name {
  font-family: var(--display); font-size: 1.15rem; font-weight: 600;
  color: var(--white); margin-bottom: 8px;
}
.pkg-compact-tagline {
  font-size: 0.82rem; color: rgba(255,255,255,0.45); font-style: italic;
  line-height: 1.5; margin-bottom: 20px; flex: 1;
}
.pkg-compact-price {
  font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-bottom: 20px;
}
.pkg-compact-price strong {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  color: var(--white); margin-left: 4px;
}
.pkg-compact-card .btn { width: 100%; text-align: center; font-size: 0.68rem; }

@media (prefers-reduced-motion: reduce) {
  .pkg-compact-media img,
  .pkg-compact-reveal,
  .pkg-compact-toggle-icon::before,
  .pkg-compact-toggle-icon::after { transition: none; }
}

/* ── Featured Portfolio (homepage masonry/grid) ────────────────────────────── */
.section-portfolio-home {
  padding: 100px 0 0;
  background: var(--white);
}
.section-portfolio-home .section-header {
  max-width: var(--max-w); margin: 0 auto 52px; padding: 0 24px;
}

/* 3-col grid, generous row heights, some items spanning 2 rows */
.pf-home-grid {
  max-width: 100%; /* full-bleed feel */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 320px;
  gap: 5px;
}
.pf-home-item {
  position: relative; overflow: hidden; background: var(--gray-100);
  cursor: pointer;
}
.pf-home-item--wide  { grid-column: span 2; }
.pf-home-item--tall  { grid-row: span 2; }
.pf-home-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94);
}
.pf-home-item:hover img { transform: scale(1.04); }
.pf-home-caption {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.65) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.3s;
  display: flex; align-items: flex-end; padding: 20px 24px;
}
.pf-home-item:hover .pf-home-caption,
.pf-home-item:focus .pf-home-caption { opacity: 1; }
.pf-home-caption-text {
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-on-dark);
}

.portfolio-home-footer {
  max-width: var(--max-w); margin: 0 auto;
  padding: 48px 24px;
  text-align: center;
}

/* ── Pricing Preview (minimal) ─────────────────────────────────────────────── */
.section-pricing-preview {
  padding: 80px 24px;
  background: var(--off-white);
}
.section-pricing-preview .section-header {
  max-width: 760px; margin: 0 auto 40px; text-align: center;
}
.section-pricing-preview .section-sub { margin: 0 auto; }
.section-pricing-preview .accent-rule { margin: 0 auto 18px; }

.pricing-min-list {
  max-width: 520px; margin: 0 auto;
  list-style: none;
}
.pricing-min-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--gray-100);
}
.pricing-min-item:first-child { border-top: 1px solid var(--gray-100); }
.pricing-min-name {
  font-size: 0.9rem; font-weight: 500; color: var(--gray-700);
}
.pricing-min-from {
  font-size: 0.72rem; color: var(--gray-300); margin-left: auto;
}
.pricing-min-price {
  font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--gray-900);
}
.pricing-min-note {
  max-width: 520px; margin: 16px auto 0;
  font-size: 0.78rem; color: var(--gray-500); font-style: italic; line-height: 1.6;
}
.pricing-preview-footer {
  max-width: 520px; margin: 28px auto 0; text-align: center;
}

/* ── EDIT 3: Add-On Services showcase (homepage) ────────────────────────────── */
.section-addons-showcase {
  padding: 80px 24px;
  background: var(--off-white);
}
.section-addons-showcase .section-header { margin-bottom: 40px; }

/* Horizontal scroll row — compact + image-led, deliberately lighter than the
   package cards so packages keep visual priority */
.addons-showcase-row {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 4px 4px 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.addons-showcase-row:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px;
}
.addon-card {
  flex: 0 0 218px; scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.addon-card__media {
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px;
  background: var(--gray-100);
}
.addon-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
}
.addon-card:hover .addon-card__media img { transform: scale(1.05); }
.addon-card__body {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 14px 2px 0;
}
.addon-card__name {
  font-size: 0.86rem; font-weight: 600; color: var(--gray-900); line-height: 1.35;
}
.addon-card__price {
  font-size: 0.8rem; font-weight: 600; color: var(--accent);
  white-space: nowrap; flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .addon-card__media img { transition: none; }
}

/* ── How It Works ───────────────────────────────────────────────────────────── */
.section-how-it-works {
  padding: 80px 24px;
  background: var(--white);
}
.section-how-it-works .section-header {
  max-width: var(--max-w); margin: 0 auto 48px; text-align: center;
}
.section-how-it-works .section-sub { margin: 0 auto; }
.section-how-it-works .accent-rule { margin: 0 auto 18px; }
.how-steps {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.how-step { display: flex; flex-direction: column; gap: 12px; }
.how-step__num {
  font-family: var(--display); font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--accent);
}
.how-step__title {
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  color: var(--gray-900); margin-bottom: 4px;
}
.how-step__desc {
  font-size: 0.88rem; font-weight: 400; color: var(--gray-500); line-height: 1.8;
}

/* ── Testimonials ───────────────────────────────────────────────────────────── */
.section-testimonials {
  padding: 80px 24px;
  background: var(--gray-50);
}
.section-testimonials .section-header {
  max-width: var(--max-w); margin: 0 auto 48px; text-align: center;
}
.section-testimonials .accent-rule { margin: 0 auto 18px; }
.testimonials-list {
  max-width: 800px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--gray-100);
}
.testimonial {
  background: var(--white); padding: 36px 32px;
  display: flex; flex-direction: column; gap: 12px;
}
.testimonial__stars { color: var(--accent); font-size: 0.85rem; letter-spacing: 0.04em; }
.testimonial__text {
  font-family: var(--sans); font-size: 1rem; font-style: normal;
  color: var(--gray-700); line-height: 1.7; flex: 1;
}
.testimonial__footer {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.testimonial__name {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gray-900); font-style: normal;
}
.testimonial__time {
  font-size: 0.72rem; color: var(--gray-300);
}
.testimonial__time::before { content: '·'; margin-right: 8px; }

/* ── Booking CTA (full-bleed image background) ──────────────────────────────── */
.section-booking-cta {
  position: relative; overflow: hidden;
  padding: 120px 24px;
}
.section-booking-cta__bg {
  position: absolute; inset: 0; z-index: 0;
}
.section-booking-cta__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
}
.section-booking-cta__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, rgba(13,13,13,0.82) 0%, rgba(13,13,13,0.55) 100%);
}
.booking-cta__inner {
  position: relative; z-index: 2;
  max-width: 620px; margin: 0 auto; text-align: center;
}
.booking-cta__eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent-on-dark); margin-bottom: 14px;
}
.booking-cta__headline {
  font-family: var(--display); font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: var(--h2-weight); color: var(--white);
  letter-spacing: var(--h2-tracking); line-height: 1.2; margin-bottom: 18px;
}
.booking-cta__sub {
  font-size: 0.97rem; font-weight: 400; color: rgba(255,255,255,0.65);
  line-height: 1.8; margin-bottom: 36px;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.footer {
  background: var(--gray-900);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding: 48px 24px 36px;
}
.footer__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
}
.footer__brand {
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  color: var(--white); text-decoration: none;
}
.footer__brand span { color: var(--accent-on-dark); }
.footer__nav {
  display: flex; gap: 28px; list-style: none; justify-content: center;
}
.footer__nav a {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gray-500); text-decoration: none;
  transition: color 0.2s;
}
.footer__nav a:hover { color: var(--accent-on-dark); }
.footer__copy { font-size: 0.7rem; color: var(--gray-700); text-align: right; letter-spacing: 0.03em; }

/* ── Lightbox (premium) ─────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.96);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox__img {
  max-width: min(90vw, 1280px); max-height: 85vh;
  object-fit: contain; width: auto; height: auto; display: block;
  transition: opacity 0.22s ease;
}
.lightbox__img.fading { opacity: 0; }
.lightbox__close {
  position: absolute; top: 20px; right: 24px;
  width: 44px; height: 44px; background: none;
  border: 1px solid rgba(255,255,255,0.25); color: var(--white);
  font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s, color 0.2s;
}
.lightbox__close:hover { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: 1px solid rgba(255,255,255,0.25);
  color: var(--white); width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.1rem;
  transition: border-color 0.2s, color 0.2s;
}
.lightbox__nav:hover { border-color: var(--accent-on-dark); color: var(--accent-on-dark); }
.lightbox__prev { left: 20px; }
.lightbox__next { right: 20px; }
.lightbox__meta {
  position: absolute; bottom: 24px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 24px; padding: 0 80px;
}
.lightbox__caption {
  font-size: 0.75rem; color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em; text-align: center;
}
.lightbox__counter {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--accent-on-dark); white-space: nowrap; flex-shrink: 0;
}

/* ── Form ────────────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 20px; }
.form__honeypot {
  position: absolute !important; left: -9999px !important;
  opacity: 0; pointer-events: none;
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form__field { display: flex; flex-direction: column; gap: 7px; }
.form__label {
  font-size: 0.67rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--gray-700);
}
.form__input {
  font-family: var(--sans); font-size: 0.95rem; color: var(--gray-900);
  background: var(--white); border: 1px solid var(--gray-100);
  border-radius: 2px; padding: 13px 15px; line-height: 1.5; width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form__input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(58,75,99,0.1);
}
.form__input::placeholder { color: var(--gray-300); }
.form__select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1L6 6L11 1' stroke='%233A4B63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 40px; cursor: pointer;
}
.form__textarea { resize: vertical; min-height: 120px; font-family: var(--sans); }
.form__submit {
  align-self: flex-start; border: none; cursor: pointer; min-width: 180px; position: relative;
}
.form__submit-loading { display: none; }
.form.is-loading .form__submit-text { display: none; }
.form.is-loading .form__submit-loading { display: inline; }
.form.is-loading .form__submit { opacity: 0.75; cursor: wait; }
.form__message { font-size: 0.88rem; line-height: 1.6; padding: 0; transition: all 0.3s; }
.form__message.success {
  padding: 14px 18px; background: rgba(58,75,99,0.08);
  border-left: 3px solid var(--accent); color: var(--gray-900);
}
.form__message.error {
  padding: 14px 18px; background: rgba(180,50,50,0.06);
  border-left: 3px solid #b43232; color: var(--gray-900);
}

/* ── Pricing Page ───────────────────────────────────────────────────────────── */
.page-pricing { padding-top: 68px; }

.pricing-hero-band {
  background: var(--gray-900); padding: 72px 24px 64px;
}
.pricing-hero-band .section-header { max-width: var(--max-w); margin: 0 auto; }
.pricing-hero-band .section-headline { color: var(--white); }
.pricing-hero-band .section-eyebrow { color: var(--accent-on-dark); }
.pricing-hero-band .accent-rule { background: var(--accent-on-dark); }
.pricing-hero-band .section-sub { color: rgba(255,255,255,0.5); }

.pricing-packages-section { padding: var(--section-pad); background: var(--off-white); }
.pricing-packages-grid {
  max-width: var(--max-w); margin: 48px auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start;
}

/* Package cards (full version, pricing page) */
.pkg-card {
  background: var(--white); border: 1px solid var(--gray-100);
  border-top: 2px solid transparent; padding: 32px 24px;
  display: flex; flex-direction: column; transition: box-shadow 0.25s;
}
.pkg-card:hover { box-shadow: 0 6px 28px rgba(13,13,13,0.06); }
.pkg-card--featured { border-top-color: var(--accent); }
.pkg-badge {
  display: inline-block; font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.pkg-name {
  font-family: var(--display); font-size: 1.2rem; font-weight: 600;
  color: var(--gray-900); margin-bottom: 6px;
}
.pkg-tagline {
  font-size: 0.82rem; color: var(--gray-500); font-style: italic;
  margin-bottom: 8px; line-height: 1.5;
}
.pkg-price { font-size: 0.8rem; color: var(--gray-500); margin-bottom: 14px; }
.pkg-price strong {
  font-family: var(--display); font-size: 1.4rem; font-weight: 600;
  color: var(--gray-900); margin-left: 4px;
}
.pkg-best-for {
  font-size: 0.82rem; color: var(--gray-500); line-height: 1.65; margin-bottom: 18px;
  padding-bottom: 18px; border-bottom: 1px solid var(--gray-100);
}
.pkg-features { list-style: none; margin-bottom: 24px; flex: 1; }
.pkg-features li {
  font-size: 0.83rem; color: var(--gray-700); padding: 9px 0 9px 18px;
  border-bottom: 1px solid var(--gray-100); position: relative; line-height: 1.45;
}
.pkg-features li:last-child { border-bottom: none; }
.pkg-features li::before {
  content: ''; position: absolute; left: 0; top: 17px;
  width: 8px; height: 1px; background: var(--accent);
}
.pkg-card .btn { width: 100%; text-align: center; margin-top: auto; }

/* Pricing image divider */
.pricing-img-break {
  width: 100%; height: 300px; overflow: hidden; position: relative;
}
.pricing-img-break img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
}
.pricing-img-break__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(13,13,13,0.6) 0%, rgba(13,13,13,0.2) 60%, transparent 100%);
}

.pricing-table-section { padding: var(--section-pad); background: var(--white); }
.pricing-table-section .section-header { max-width: var(--max-w); margin: 0 auto 40px; }
.pricing-table-wrap {
  max-width: var(--max-w); margin: 0 auto;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--gray-100);
}
.pricing-table {
  width: 100%; min-width: 580px; border-collapse: collapse; font-size: 0.88rem;
}
.pricing-table thead th {
  background: var(--gray-900); color: var(--white);
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 18px 20px; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.08);
}
.pricing-table thead th:first-child {
  text-align: left; position: sticky; left: 0; z-index: 2;
  background: var(--gray-900); border-right: 1px solid rgba(255,255,255,0.12);
}
.pricing-table tbody td {
  padding: 16px 20px; text-align: center;
  border-bottom: 1px solid var(--gray-100); border-right: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.pricing-table tbody td:first-child {
  text-align: left; font-weight: 500; font-size: 0.83rem; color: var(--gray-900);
  position: sticky; left: 0; z-index: 1; background: var(--white);
  border-right: 1px solid var(--gray-200, #D5D1CB);
}
.pricing-table tbody tr:nth-child(even) td { background: var(--gray-50); }
.pricing-table tbody tr:nth-child(even) td:first-child { background: var(--gray-50); }
.pricing-table tbody tr:last-child td { border-bottom: none; }
.pricing-table .price-cell {
  font-family: var(--display); font-weight: 600; font-size: 1rem; color: var(--gray-900);
}
.pricing-table .price-cell.custom {
  font-family: var(--sans); font-size: 0.8rem; font-style: italic;
  font-weight: 400; color: var(--gray-500);
}
/* Approved delivery times — deliberately heavier than the square-footage
   footnote below it, since turnaround is a question every agent asks. */
.pricing-delivery-note {
  max-width: var(--max-w); margin: 22px auto 0; padding: 14px 18px;
  border-left: 3px solid var(--slate);
  background: var(--accent-tint);
  font-size: 0.9rem; font-weight: 500; color: var(--gray-700); line-height: 1.6;
}
.pricing-table-note {
  max-width: var(--max-w); margin: 14px auto 0;
  font-size: 0.78rem; font-style: italic; color: var(--gray-500); line-height: 1.6; padding: 0 4px;
}

.addons-section { padding: 60px 24px; background: var(--off-white); }
.addons-inner { max-width: 800px; margin: 0 auto; }
.addons-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 48px; margin-top: 32px; border-top: 1px solid var(--gray-100);
}
.addon-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--gray-100); gap: 16px;
}
.addon-item-name { font-size: 0.9rem; color: var(--gray-700); }
.addon-item-price {
  font-family: var(--display); font-size: 0.95rem; font-weight: 600;
  color: var(--accent); white-space: nowrap;
}
.whats-included-section { padding: var(--section-pad); background: var(--white); }
.whats-included-section .section-header { max-width: var(--max-w); margin: 0 auto 40px; }
.whats-included-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
}
.included-card { padding: 24px 0; border-top: 2px solid var(--gray-100); }
.included-card--featured { border-top-color: var(--accent); }
.included-pkg-name {
  font-family: var(--display); font-size: 1rem; font-weight: 600;
  color: var(--gray-900); margin-bottom: 14px;
}
.included-features { list-style: none; }
.included-features li {
  font-size: 0.82rem; color: var(--gray-500); padding: 7px 0 7px 16px;
  border-bottom: 1px solid var(--gray-100); position: relative; line-height: 1.4;
}
.included-features li:last-child { border-bottom: none; }
.included-features li::before {
  content: ''; position: absolute; left: 0; top: 14px;
  width: 7px; height: 1px; background: var(--accent);
}
.faq-section { padding: var(--section-pad); background: var(--off-white); }
.faq-section .section-header { max-width: 720px; margin: 0 auto 40px; }
.faq-list { max-width: 720px; margin: 0 auto; }
details.faq-item { border-bottom: 1px solid var(--gray-100); }
details.faq-item:first-child { border-top: 1px solid var(--gray-100); }
details.faq-item summary {
  list-style: none; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; padding: 22px 0; cursor: pointer;
  font-family: var(--display); font-size: 1.02rem; font-weight: 600;
  color: var(--gray-900); user-select: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+'; color: var(--accent); font-size: 1.5rem;
  font-family: var(--sans); font-weight: 300; line-height: 1;
  flex-shrink: 0; transition: transform 0.25s;
}
details[open].faq-item summary::after { transform: rotate(45deg); }
.faq-answer {
  padding: 0 0 22px; font-size: 0.92rem; color: var(--gray-500);
  line-height: 1.85; max-width: 640px;
}

/* ── Portfolio Page ─────────────────────────────────────────────────────────── */
.page-portfolio { padding-top: 68px; }
.portfolio-hero-band {
  background: var(--gray-900); padding: 72px 24px 64px;
}
.portfolio-hero-band .section-header { max-width: var(--max-w); margin: 0 auto; }
.portfolio-hero-band .section-headline { color: var(--white); }
.portfolio-hero-band .section-eyebrow { color: var(--accent-on-dark); }
.portfolio-hero-band .accent-rule { background: var(--accent-on-dark); }
.portfolio-hero-band .section-sub { color: rgba(255,255,255,0.5); }

.portfolio-body { padding-bottom: 100px; background: var(--white); }
.portfolio-category { padding: 60px 24px 0; }
.portfolio-category-header {
  max-width: var(--max-w); margin: 0 auto 20px;
  display: flex; align-items: center; gap: 16px;
}
.portfolio-category-label {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap;
}
.portfolio-category-rule { flex: 1; height: 1px; background: var(--gray-100); }
/* Per-category frame count — quiet, so it reads as metadata not a label */
.portfolio-category-count {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--gray-300); font-variant-numeric: tabular-nums; flex-shrink: 0;
}

/* CSS masonry via columns */
.portfolio-masonry {
  max-width: var(--max-w); margin: 0 auto;
  columns: 3; column-gap: 6px;
}
.portfolio-masonry-item {
  break-inside: avoid; margin-bottom: 6px;
  overflow: hidden; background: var(--gray-100);
  cursor: pointer; position: relative;
  display: block;
}
.portfolio-masonry-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
/* height:auto is required — the tiles now carry intrinsic width/height
   attributes, and without it the height attribute is taken as a literal pixel
   height and every frame renders stretched. */
.portfolio-masonry-item img {
  width: 100%; height: auto; display: block;
  transition: transform 0.65s ease;
}
.portfolio-masonry-item:hover img { transform: scale(1.03); }
.portfolio-masonry-caption {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.6) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.28s;
  display: flex; align-items: flex-end; padding: 14px 18px;
}
.portfolio-masonry-item:hover .portfolio-masonry-caption { opacity: 1; }
.portfolio-masonry-caption-text {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.85);
}

/* ── STEP 4d — Photographer's Favorites ──────────────────────────────────────
   Set apart from the general gallery on three axes: a Soft Gray band instead
   of white, a slate hairline capping the section, and a two-column masonry so
   each frame lands roughly 50% larger than the three-column grid above. */
.top-picks-section {
  margin-top: 90px; padding: 76px 24px 20px;
  background: var(--soft-gray);
  border-top: 2px solid var(--accent);
}
.top-picks-section .section-header {
  max-width: 760px; margin: 0 auto 48px;
}
.top-picks-section .section-sub strong {
  color: var(--gray-900); font-weight: 600;
}
.top-picks-masonry {
  max-width: var(--max-w); margin: 0 auto;
  columns: 2; column-gap: 20px;
}
/* Larger, more deliberate treatment than a general-gallery tile */
.portfolio-masonry-item--feature {
  margin-bottom: 20px; border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 2px 18px rgba(13,13,13,0.07);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.portfolio-masonry-item--feature:hover,
.portfolio-masonry-item--feature:focus-visible {
  box-shadow: 0 10px 34px rgba(13,13,13,0.16);
  transform: translateY(-3px);
}
.portfolio-masonry-item--feature:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.portfolio-masonry-item--feature .portfolio-masonry-caption {
  padding: 20px 24px;
}
.portfolio-masonry-item--feature .portfolio-masonry-caption-text {
  font-size: 0.68rem; letter-spacing: 0.16em;
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-masonry-item--feature,
  .portfolio-masonry-item--feature:hover { transition: none; transform: none; }
}

/* ── Services Page ──────────────────────────────────────────────────────────── */
.page-services { padding-top: 68px; }
.services-hero-band {
  background: var(--gray-900); padding: 72px 24px 64px;
}
.services-hero-band .section-header { max-width: var(--max-w); margin: 0 auto; }
.services-hero-band .section-headline { color: var(--white); }
.services-hero-band .section-eyebrow { color: var(--accent-on-dark); }
.services-hero-band .accent-rule { background: var(--accent-on-dark); }
.services-hero-band .section-sub { color: rgba(255,255,255,0.5); }

.services-grid-section { padding: 80px 24px 100px; background: var(--white); }
.services-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
/* Image-forward cards: image takes ~60% of card height */
.service-card { display: flex; flex-direction: column; background: var(--white); }
.service-card__img-wrap {
  aspect-ratio: 3/2; overflow: hidden; background: var(--gray-100); flex-shrink: 0;
}
.service-card__img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.65s ease;
}
.service-card:hover .service-card__img-wrap img { transform: scale(1.04); }

/* Listing Video thumbnail — a real <button> so it is keyboard-reachable and
   announced as a control. Button chrome is stripped; the card styling above
   still applies because it keeps the .service-card__img-wrap class. */
.service-card__video-trigger {
  position: relative; display: block; width: 100%; padding: 0;
  border: 0; appearance: none; cursor: pointer; font: inherit; color: inherit;
}
.service-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(var(--scrim-rgb), 0.55);
  border: 1px solid rgba(255,255,255,0.75);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.service-card__play svg { width: 26px; height: 26px; fill: var(--white); margin-left: 3px; }
.service-card__video-trigger:hover .service-card__play,
.service-card__video-trigger:focus-visible .service-card__play {
  background: var(--slate); transform: translate(-50%, -50%) scale(1.06);
}

/* ── Listing Video modal ──────────────────────────────────────────────────────
   Inherits the .lightbox backdrop + .lightbox__close button treatment; only
   the media box differs. [hidden] needs an explicit rule because .lightbox
   sets display:flex, which would otherwise win. */
.video-modal[hidden] { display: none; }
.video-modal__frame {
  width: min(92vw, 1100px); max-height: 85vh;
  display: flex; align-items: center; justify-content: center;
}
.video-modal__video {
  width: 100%; max-height: 85vh; display: block;
  background: #000; outline: none;
}
.service-card__body {
  padding: 24px 0 0; display: flex; flex-direction: column; flex: 1;
}
.service-card__name {
  font-family: var(--display); font-size: 1.15rem; font-weight: 600;
  color: var(--gray-900); margin-bottom: 10px;
}
.service-card__desc {
  font-size: 0.88rem; font-weight: 400; color: var(--gray-500);
  line-height: 1.8; margin-bottom: 12px; flex: 1;
}
.service-card__note {
  font-size: 0.76rem; font-style: italic; color: var(--accent);
  padding-top: 12px; border-top: 1px solid var(--gray-100);
}

/* ── About Page ─────────────────────────────────────────────────────────────── */
.page-about { padding-top: 68px; }
.about-hero-img {
  width: 100%; height: 420px; overflow: hidden; position: relative;
}
.about-hero-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
}
.about-hero-img__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,13,13,0.1) 0%, rgba(13,13,13,0.5) 100%);
}
.about-body { padding: 80px 24px 100px; background: var(--white); }
.about-inner { max-width: 680px; margin: 0 auto; }
.about-eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.about-heading {
  font-family: var(--display); font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 600; color: var(--gray-900); margin-bottom: 36px;
  padding-bottom: 24px; border-bottom: 1px solid var(--gray-100);
}
.about-bio { display: flex; flex-direction: column; gap: 22px; margin-bottom: 40px; }
.about-bio p { font-size: 1rem; line-height: 1.9; color: var(--gray-700); }
.about-placeholder-note {
  font-size: 0.74rem; color: var(--gray-300); font-style: italic;
  padding: 10px 14px; border-left: 2px solid var(--gray-100); margin-bottom: 40px;
}
.about-cta { padding-top: 28px; border-top: 1px solid var(--gray-100); }

/* ── Blog Index ─────────────────────────────────────────────────────────────── */
.page-blog { padding-top: 68px; }
.blog-hero-band {
  background: var(--gray-900); padding: 72px 24px 64px;
}
.blog-hero-band .section-header { max-width: var(--max-w); margin: 0 auto; }
.blog-hero-band .section-headline { color: var(--white); }
.blog-hero-band .section-eyebrow { color: var(--accent-on-dark); }
.blog-hero-band .accent-rule { background: var(--accent-on-dark); }
.blog-hero-band .section-sub { color: rgba(255,255,255,0.5); }
.blog-grid-section { padding: 80px 24px 100px; background: var(--white); }
.blog-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 28px;
}
.blog-card { display: flex; flex-direction: column; background: var(--white); }
.blog-card__img-wrap {
  aspect-ratio: 3/2; overflow: hidden; background: var(--gray-100); flex-shrink: 0;
}
.blog-card__img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.65s ease;
}
.blog-card:hover .blog-card__img-wrap img { transform: scale(1.04); }
.blog-card__body { padding: 22px 0 0; display: flex; flex-direction: column; flex: 1; }
.blog-card__date {
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gray-300); margin-bottom: 8px;
}
.blog-card__title {
  font-family: var(--display); font-size: 1.1rem; font-weight: 600;
  color: var(--gray-900); margin-bottom: 10px; line-height: 1.35;
}
.blog-card__excerpt {
  font-size: 0.88rem; color: var(--gray-500); line-height: 1.8;
  margin-bottom: 14px; flex: 1;
}
.blog-card__link {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; text-decoration: none;
  color: var(--accent);
  padding: 9px 16px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  transition: background 0.2s, color 0.2s;
}
.blog-card__link span { transition: transform 0.2s; }
.blog-card__link:hover { background: var(--accent); color: var(--white); }
.blog-card__link:hover span { transform: translateX(3px); }
.blog-card__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Blog Post ──────────────────────────────────────────────────────────────── */
.page-blog-post { padding-top: 68px; }
.blog-post-hero-img { width: 100%; height: 420px; overflow: hidden; position: relative; }
.blog-post-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.blog-post-hero-img__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(13,13,13,0.1) 0%, rgba(13,13,13,0.5) 100%);
}
.blog-post-body { padding: 80px 24px 100px; background: var(--white); }
.blog-post-inner { max-width: 720px; margin: 0 auto; }
.blog-post-eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px;
}
.blog-post-heading {
  font-family: var(--display); font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 600; color: var(--gray-900); margin-bottom: 14px; line-height: 1.25;
}
.blog-post-date {
  font-size: 0.82rem; color: var(--gray-300); font-style: italic;
  padding-bottom: 24px; border-bottom: 1px solid var(--gray-100); margin-bottom: 36px;
}
.blog-post-content { display: flex; flex-direction: column; gap: 22px; margin-bottom: 48px; }
.blog-post-content p { font-size: 1rem; line-height: 1.9; color: var(--gray-700); }
.blog-post-content h2 {
  font-family: var(--display); font-size: 1.5rem; font-weight: 600;
  color: var(--gray-900); margin-top: 10px; line-height: 1.3;
}
.blog-post-content h3 {
  font-family: var(--display); font-size: 1.2rem; font-weight: 600;
  color: var(--gray-900); margin-top: 6px; line-height: 1.35;
}
.blog-post-content ul,
.blog-post-content ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: 10px; }
.blog-post-content li { font-size: 1rem; line-height: 1.8; color: var(--gray-700); }
.blog-post-content figure { margin: 8px 0; }
.blog-post-content figure img { width: 100%; border-radius: var(--radius); }
.blog-post-content figcaption { font-size: 0.78rem; color: var(--gray-300); font-style: italic; margin-top: 8px; }
.blog-post-footer-nav {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 20px; padding-top: 28px; border-top: 1px solid var(--gray-100);
}
.blog-post-back-link {
  font-size: 0.85rem; font-weight: 600; color: var(--accent); text-decoration: none;
}
.blog-post-back-link:hover { text-decoration: underline; }
.blog-post-back-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Booking Page ───────────────────────────────────────────────────────────── */
.page-booking { padding-top: 68px; }
.booking-band {
  background: var(--gray-900); padding: 72px 24px 64px;
}
.booking-band .section-header { max-width: var(--max-w); margin: 0 auto; }
.booking-band .section-headline { color: var(--white); }
.booking-band .section-eyebrow { color: var(--accent-on-dark); }
.booking-band .accent-rule { background: var(--accent-on-dark); }
.booking-band .section-sub { color: rgba(255,255,255,0.5); }

.booking-body { padding: 80px 24px 100px; background: var(--white); }
.booking-split {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 420px; gap: 80px; align-items: start;
}
.booking-form-wrap {
  background: var(--gray-50); border: 1px solid var(--gray-100); padding: 48px 40px;
}
.booking-aside { position: sticky; top: 96px; }
.booking-aside-img {
  aspect-ratio: 3/4; overflow: hidden; background: var(--gray-100);
  margin-bottom: 24px;
}
.booking-aside-img img { width: 100%; height: 100%; object-fit: cover; }
.booking-aside-note {
  font-size: 0.82rem; color: var(--gray-500); line-height: 1.75;
}
.booking-aside-note strong { color: var(--gray-900); font-weight: 600; }

/* ── Matterport 3D Tours Page ───────────────────────────────────────────────── */
.page-matterport { padding-top: 68px; }

.matterport-hero-band {
  background: var(--gray-900); padding: 72px 24px 64px;
}
.matterport-hero-band .section-header { max-width: var(--max-w); margin: 0 auto; }
.matterport-hero-band .section-headline { color: var(--white); }
.matterport-hero-band .section-eyebrow { color: var(--accent-on-dark); }
.matterport-hero-band .accent-rule { background: var(--accent-on-dark); }
.matterport-hero-band .section-sub { color: rgba(255,255,255,0.5); }
.matterport-hero-band .section-sub strong { color: var(--white); font-weight: 600; }

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

/* Tour selector — three tabs reading as cards, not chips: each carries its own
   one-line description, so the choice is made before the tour loads. */
.tour-selector { padding: 64px 24px 0; }
.tour-tabs {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.tour-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; cursor: pointer;
  padding: 20px 22px 22px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-top: 2px solid var(--gray-100);
  border-radius: var(--radius);
  font-family: var(--sans);
  transition: border-color 0.22s, background 0.22s, transform 0.22s;
}
.tour-tab:hover { border-color: var(--med-gray); transform: translateY(-2px); }
.tour-tab[aria-selected="true"] {
  background: var(--accent-tint);
  border-color: var(--gray-100);
  border-top-color: var(--accent);
  transform: none;
}
.tour-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tour-tab__index {
  font-family: var(--display); font-size: 0.68rem; font-weight: 600;
  letter-spacing: var(--eyebrow-tracking); color: var(--med-gray);
}
.tour-tab[aria-selected="true"] .tour-tab__index { color: var(--accent); }
.tour-tab__label {
  font-family: var(--display); font-size: 1.02rem; font-weight: 600;
  color: var(--gray-900); line-height: 1.3;
}
.tour-tab__desc {
  font-size: 0.82rem; color: var(--gray-500); line-height: 1.65;
}

/* Active tour — aspect-ratio keeps the frame proportional, min-height keeps it
   usable on phones (a squeezed Matterport tour is worse than none). */
.tour-stage { padding: 28px 24px 0; }
.tour-embed {
  position: relative;
  max-width: var(--max-w); margin: 0 auto;
  aspect-ratio: 16 / 9;
  min-height: 400px; max-height: 680px;
  background: var(--gray-900);
  border-radius: var(--radius); overflow: hidden;
}
.tour-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0; display: block;
}
.tour-embed:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tour-stage__now {
  max-width: var(--max-w); margin: 16px auto 0;
  font-size: 0.8rem; color: var(--gray-500); letter-spacing: 0.02em;
}
.tour-stage__now strong { color: var(--gray-900); font-weight: 600; }
.tour-stage__hint {
  max-width: var(--max-w); margin: 4px auto 0;
  font-size: 0.78rem; font-style: italic; color: var(--med-gray);
}
.tour-stage__noscript {
  max-width: var(--max-w); margin: 16px auto 0;
  font-size: 0.85rem; color: var(--gray-700);
}
.tour-stage__noscript a { color: var(--accent); }

/* What's-included recap — package-card DNA (hairline border, accent price,
   ticked feature list) at two-up instead of four-up. */
.tour-included { padding: var(--section-pad); background: var(--off-white); }
.tour-included .section-header { max-width: 760px; margin: 0 auto 48px; }
.tour-included-grid {
  max-width: 900px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start;
}
.tour-included-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 32px 28px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-top: 2px solid var(--gray-100);
  border-radius: var(--radius);
}
.tour-included-card--featured { border-top-color: var(--accent); }
.tour-included-card__eyebrow {
  font-size: var(--eyebrow-size); font-weight: 600;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.tour-included-card__name {
  font-family: var(--display); font-size: 1.25rem; font-weight: 600;
  color: var(--gray-900); margin-bottom: 4px;
}
.tour-included-card__price {
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  color: var(--accent); margin-bottom: 14px;
}
.tour-included-card__desc {
  font-size: 0.86rem; color: var(--gray-500); line-height: 1.75; margin-bottom: 18px;
}
.tour-included-card__features {
  list-style: none; margin: 0 0 24px; padding-top: 18px; flex: 1;
  border-top: 1px solid var(--gray-100);
}
.tour-included-card__features li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  font-size: 0.85rem; color: var(--gray-700); line-height: 1.6;
}
.tour-included-card__features li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-size: 0.8rem; font-weight: 600;
}
.tour-included-card__cta { align-self: flex-start; margin-top: auto; }

/* Final CTA — flat slate band rather than the image-backed CTA used elsewhere,
   so it reads as a close to the page, not a second hero. */
.tour-cta { background: var(--accent); padding: 80px 24px; text-align: center; }
.tour-cta__inner { max-width: 720px; margin: 0 auto; }
.tour-cta__eyebrow {
  font-size: var(--eyebrow-size); font-weight: 600;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--accent-on-dark); margin-bottom: 14px;
}
.tour-cta__headline {
  font-family: var(--display); font-size: var(--h2-size); font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking); line-height: var(--h2-leading);
  color: var(--white); margin-bottom: 14px;
}
.tour-cta__sub {
  font-size: 0.92rem; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 30px;
}
.tour-cta .btn--primary {
  background: var(--white); color: var(--accent); border-color: var(--white);
}
.tour-cta .btn--primary:hover { background: var(--accent-tint); border-color: var(--accent-tint); }
.tour-cta .btn:focus-visible { outline-color: var(--white); }

/* ── Individual service pages ───────────────────────────────────────────────────
   One shared skin for photography / listing-video / floor-plans / drone /
   twilight / virtual-staging. Deliberately built on the same primitives as
   matterport-tours.html — identical dark hero band, the portfolio's masonry
   tile (so the lightbox tiles look the same everywhere), and the flat slate
   .tour-cta as the page close — so the seven service pages read as one set. */
.page-service { padding-top: 68px; }

.service-hero-band { background: var(--gray-900); padding: 72px 24px 64px; }
.service-hero-band .section-header { max-width: var(--max-w); margin: 0 auto; }
.service-hero-band .section-headline { color: var(--white); }
.service-hero-band .section-eyebrow { color: var(--accent-on-dark); }
.service-hero-band .accent-rule { background: var(--accent-on-dark); }
.service-hero-band .section-sub { color: rgba(255,255,255,0.5); max-width: 680px; }
.service-hero-band .section-sub strong { color: var(--white); font-weight: 600; }

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

/* Examples */
.service-examples { padding: 72px 24px 0; }
.service-examples .section-header { max-width: 760px; margin: 0 auto 40px; }
.service-examples--alt { background: var(--off-white); padding-bottom: 72px; margin-top: 72px; }

/* Single hero-scale example, used where the library holds one true frame for
   the service (the aerial and the twilight sets) rather than a full grid. */
.service-feature {
  max-width: var(--max-w); margin: 0 auto;
  border-radius: var(--radius); overflow: hidden;
  background: var(--gray-100);
}
.service-feature img { width: 100%; height: auto; }
.service-feature-caption {
  max-width: var(--max-w); margin: 14px auto 0;
  font-size: 0.82rem; color: var(--gray-500); line-height: 1.7;
}
/* There is no global <a> rule in this stylesheet — links are styled per
   component — so the inline links in the body copy on these pages need their
   own, or they fall back to the browser's default blue. */
.service-feature-caption a,
.service-fact__desc a,
.service-note a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--gray-100); transition: border-color 0.2s;
}
.service-feature-caption a:hover,
.service-fact__desc a:hover,
.service-note a:hover { border-color: var(--accent); }
.service-feature-caption a:focus-visible,
.service-fact__desc a:focus-visible,
.service-note a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Inline video example — <video controls> is keyboard-reachable on its own, so
   no modal here: this page IS the example. preload="none" keeps the 121 MB
   file off the initial load; the poster carries the first impression. */
.service-video {
  max-width: var(--max-w); margin: 0 auto;
  border-radius: var(--radius); overflow: hidden; background: var(--gray-900);
}
.service-video video { width: 100%; height: auto; display: block; max-height: 78vh; }
.service-video:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Honest-scope note — used where the published library is thinner than the
   gallery slot (drone, twilight, staging). Never dressed up as a caption. */
.service-note {
  max-width: var(--max-w); margin: 22px auto 0;
  padding: 16px 20px;
  background: var(--off-white); border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  font-size: 0.84rem; color: var(--gray-500); line-height: 1.75;
}
.service-note strong { color: var(--gray-900); font-weight: 600; }

/* Price + delivery + deliverables, three-up */
.service-facts { padding: var(--section-pad); }
.service-facts .section-header { max-width: 760px; margin: 0 auto 44px; }
.service-facts-grid {
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start;
}
.service-fact {
  display: flex; flex-direction: column; height: 100%;
  padding: 30px 26px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-top: 2px solid var(--gray-100);
  border-radius: var(--radius);
}
.service-fact--accent { border-top-color: var(--accent); }
.service-fact__label {
  font-size: var(--eyebrow-size); font-weight: 600;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.service-fact__value {
  font-family: var(--display); font-size: 1.35rem; font-weight: 600;
  color: var(--gray-900); line-height: 1.25; margin-bottom: 10px;
}
.service-fact__desc { font-size: 0.85rem; color: var(--gray-500); line-height: 1.75; }
.service-fact__list { list-style: none; margin: 0; padding: 0; }
.service-fact__list li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: 0.85rem; color: var(--gray-700); line-height: 1.6;
}
.service-fact__list li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--accent); font-size: 0.8rem; font-weight: 600;
}

/* Sibling-service links, so a visitor can move between the seven pages without
   bouncing back through services.html each time. */
.service-more { padding: 0 24px 80px; }
.service-more__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding-top: 34px; border-top: 1px solid var(--gray-100);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
}
.service-more__label {
  font-size: var(--eyebrow-size); font-weight: 600;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--med-gray);
}
.service-more__links { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; }
.service-more__links a {
  font-size: 0.85rem; color: var(--gray-700); text-decoration: none;
  border-bottom: 1px solid var(--gray-100); transition: color 0.2s, border-color 0.2s;
}
.service-more__links a:hover { color: var(--accent); border-color: var(--accent); }
.service-more__links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Services card: 3D Tours live-examples link ─────────────────────────────── */
.service-card__link {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px; align-self: flex-start;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; text-decoration: none;
  color: var(--accent);
  padding: 9px 16px;
  border: 1px solid var(--accent); border-radius: var(--radius);
  transition: background 0.2s, color 0.2s;
}
.service-card__link span { transition: transform 0.2s; }
.service-card__link:hover { background: var(--accent); color: var(--white); }
.service-card__link:hover span { transform: translateX(3px); }
.service-card__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Portfolio: Matterport cross-link banner ────────────────────────────────── */
.tour-banner {
  display: block; margin: 84px 0 0;
  background: var(--accent); padding: 52px 24px;
}
.tour-banner__inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.tour-banner__text { max-width: 620px; }
.tour-banner__eyebrow {
  font-size: var(--eyebrow-size); font-weight: 600;
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--accent-on-dark); margin-bottom: 12px;
}
.tour-banner__headline {
  font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.25;
  color: var(--white); margin-bottom: 10px;
}
.tour-banner__sub {
  font-size: 0.9rem; color: rgba(255,255,255,0.72); line-height: 1.75;
}
.tour-banner__cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); color: var(--accent); border-color: var(--white);
}
.tour-banner__cta:hover { background: var(--accent-tint); border-color: var(--accent-tint); }
.tour-banner__cta span { transition: transform 0.2s; }
.tour-banner__cta:hover span { transform: translateX(3px); }
.tour-banner .btn:focus-visible { outline-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .tour-tab, .service-card__link span,
  .tour-banner__cta span { transition: none; }
  .tour-tab:hover { transform: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pkg-compact-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-packages-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .whats-included-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .footer__copy { text-align: center; }
  .footer__nav { flex-wrap: wrap; gap: 16px; }
  .booking-split { grid-template-columns: 1fr; gap: 48px; }
  .booking-aside { position: static; }
  .booking-aside-img { aspect-ratio: 16/9; }

  /* Adding "3D Tours" makes seven nav items; tighten the tracking so the row
     still fits on one line between here and the 768px hamburger handoff. */
  .nav__links { gap: 20px; }
  .nav__links a { font-size: 0.72rem; letter-spacing: 0.06em; }
  .nav__cta { padding: 10px 15px; }
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-masonry { columns: 2; }
  .top-picks-section { padding: 60px 20px 16px; margin-top: 64px; }
  .testimonials-list { grid-template-columns: 1fr; }

  .nav { padding: 0 20px; }
  .nav__links { gap: 13px; }
  .nav__brand { font-size: 0.92rem; }

  /* Tours page */
  .tour-tabs { grid-template-columns: 1fr; gap: 12px; }
  .tour-tab { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .tour-tab__desc { flex-basis: 100%; }
  .tour-included-grid { grid-template-columns: 1fr; }
  .tour-banner__inner { flex-direction: column; align-items: flex-start; gap: 28px; }

  /* Service pages */
  .service-facts-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --section-pad: 60px 20px; }

  /* Mobile section reorder */
  .site-main { display: flex; flex-direction: column; }
  .section-hero           { order: 1; }
  .section-packages       { order: 2; }
  .section-portfolio-home { order: 3; }
  .section-addons-showcase { order: 4; }
  .section-how-it-works   { order: 5; }
  .section-testimonials   { order: 6; }
  .section-booking-cta    { order: 7; }

  /* Nav mobile */
  .nav { padding: 0 20px; }
  .nav__links {
    display: none; position: fixed; top: 68px; left: 0; right: 0;
    background: var(--gray-900); flex-direction: column; gap: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3); z-index: 199;
  }
  .nav.scrolled .nav__links { background: var(--white); }
  .nav--open .nav__links { display: flex; }
  .nav__links li { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .nav.scrolled .nav__links li { border-bottom-color: var(--gray-100); }
  .nav__links a { display: block; padding: 16px 24px; font-size: 0.88rem; }
  .nav__cta { margin: 16px 24px !important; display: block !important; text-align: center; border-radius: 2px !important; }
  .nav__hamburger { display: flex; }

  /* Hero — nav is position:fixed at 68px tall on every breakpoint, so the
     content block is anchored from the top (not the bottom) with a fixed
     offset: this guarantees the headline clears the nav with room to spare
     on every viewport height, rather than relying on the section being tall
     enough for bottom-anchoring to happen to clear it. */
  .section-hero { height: 85vh; min-height: 800px; }
  .hero-content { padding: 0 20px; top: 108px; bottom: auto; }
  .hero__headline { font-size: clamp(2rem, 8vw, 2.8rem); margin-bottom: 16px; }
  .hero__sub { font-size: 0.94rem; margin-bottom: 26px; }
  .hero__actions { margin-bottom: 32px; }
  .hero-trust__inner { gap: 0; }
  /* Text now sits higher in the hero (see top-anchoring above), in the part of
     the desktop gradient that was tuned to stay light near the top of the
     image. Deepen and extend the dark scrim for mobile only so the headline
     and paragraph stay legible against bright imagery; desktop is untouched. */
  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(13,13,13,0.88) 0%,
      rgba(13,13,13,0.72) 45%,
      rgba(13,13,13,0.46) 100%
    );
  }

  /* Packages */
  .pkg-compact-grid { grid-template-columns: 1fr; gap: 1px; }

  /* Portfolio home */
  .pf-home-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 220px;
  }
  .pf-home-item--wide { grid-column: span 1; }

  /* Pricing preview */
  .pricing-min-list { max-width: 100%; }

  /* How it works */
  .how-steps { grid-template-columns: 1fr; gap: 24px; }

  /* Pricing page */
  .pricing-packages-grid { grid-template-columns: 1fr; }
  .addons-grid { grid-template-columns: 1fr; gap: 0; }
  .whats-included-grid { grid-template-columns: 1fr; }

  /* Services */
  .services-grid { grid-template-columns: 1fr; gap: 36px; }
  .service-card__play { width: 56px; height: 56px; }
  .service-card__play svg { width: 22px; height: 22px; }

  /* Video modal: full-width video, and enough headroom that it can never sit
     under the close button on a short/landscape phone viewport. */
  .video-modal { padding: 76px 12px 20px; align-items: center; }
  .video-modal__frame { width: 100%; max-height: 72vh; }
  .video-modal__video { max-height: 72vh; }

  /* About */
  .about-hero-img { height: 280px; }

  /* Blog */
  .blog-grid { grid-template-columns: 1fr; gap: 36px; }
  .blog-post-hero-img { height: 280px; }
  .blog-post-footer-nav { flex-direction: column; align-items: flex-start; }

  /* Booking */
  .booking-form-wrap { padding: 28px 20px; }

  /* Footer */
  .footer__nav { gap: 12px; }

  /* Form */
  .form__row { grid-template-columns: 1fr; gap: 20px; }

  /* Portfolio masonry */
  .portfolio-masonry { columns: 2; }
  .top-picks-masonry { columns: 1; column-gap: 0; }

  /* Pricing img break */
  .pricing-img-break { height: 200px; }

  /* Tours page — a 16/9 frame at phone width collapses to ~210px tall, which
     is unusable for a walkable tour, so go portrait and hold a tall floor. */
  .tour-selector { padding: 40px 20px 0; }
  .tour-stage { padding: 20px 20px 0; }
  .tour-embed { aspect-ratio: 4 / 5; min-height: 440px; max-height: 620px; }
  .tour-included-card { padding: 26px 22px; }
  .tour-cta { padding: 60px 20px; }
  .tour-banner { margin-top: 60px; padding: 40px 20px; }
  .tour-banner__cta { width: 100%; justify-content: center; }

  /* Service pages */
  .service-examples { padding: 52px 20px 0; }
  .service-examples--alt { margin-top: 52px; padding-bottom: 52px; }
  .service-fact { padding: 26px 22px; }
  .service-more { padding: 0 20px 60px; }
  .service-video video { max-height: 62vh; }
}

@media (max-width: 480px) {
  .pf-home-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
  }
  .pf-home-item--wide { grid-column: span 1; }
  .portfolio-masonry { columns: 1; }
  .top-picks-masonry { columns: 1; }
  .hero-trust__stat-num { font-size: 1.2rem; }

  .tour-embed { min-height: 420px; }
  .tour-tab { padding: 16px 18px 18px; }
}