/*
Theme Name: Evol Studios
Theme URI: https://evolstudios.ca/
Author: Evol Studios
Description: Custom cinematic, editorial theme for Evol Studios — relaxed wedding, family & portrait photography based in the GTA.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: evol-studios
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --color-ink: #000000;
  --color-ink-soft: #1A1A1A;
  --color-cream: #FFFFFF;
  --color-cream-deep: #F2F2F2;
  --color-card: #FFFFFF;
  --color-clay: #CBAF7F;
  --color-clay-dark: #B79868;
  --color-plum: #000000;
  --color-stone: #667085;
  --color-border: #E5E5E5;
  --color-hairline: #DDDDDD;

  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-script: "Allura", cursive;
  --font-nav: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  --max-width: 1200px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
}

/* ==========================================================================
   Self-hosted fonts (no external CDN dependency)
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Allura";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/allura-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/montserrat-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/montserrat-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

h1, h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-sm);
}
h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 var(--space-sm);
}
h1 { font-size: clamp(2.6rem, 5.6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
p { margin: 0 0 var(--space-sm); }

/* Italic accent word inside a bold headline — matches the inspo's "photos." treatment */
.heading-accent {
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--color-clay);
}

/* Cursive script — available for small taglines & signatures */
.script-accent {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--color-clay);
  letter-spacing: 0;
  line-height: 1;
  display: inline-block;
  text-transform: none;
}
h1 .script-accent, h2 .script-accent { font-size: 0.7em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-clay);
  margin-bottom: var(--space-xs);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--color-clay);
}

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

.section { padding: var(--space-xl) 0; }
.section--tight { padding: var(--space-lg) 0; }
.section--ink { background: var(--color-ink); color: var(--color-cream); }
.section--ink .eyebrow { color: var(--color-clay-dark); }
.section--deep { background: var(--color-cream-deep); }
.section--plum { background: var(--color-plum); color: #fff; }
.section--plum .eyebrow { color: var(--color-clay); }
.section--plum h1, .section--plum h2, .section--plum h3 { color: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 18px 40px;
  border: 1px solid var(--color-ink);
  border-radius: 0;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover { background: var(--color-ink); color: var(--color-cream); }
.btn--clay { background: var(--color-clay); border-color: var(--color-clay); color: #fff; }
.btn--clay:hover { background: var(--color-clay-dark); border-color: var(--color-clay-dark); color: #fff; }
.btn--ghost { border-color: rgba(249,245,239,0.5); color: var(--color-cream); }
.btn--ghost:hover { background: var(--color-cream); color: var(--color-ink); }

/* ==========================================================================
   Placeholder media block (swap for real photography)
   ========================================================================== */
.placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 4/5);
  background: linear-gradient(135deg, #E4D9C4, #C9B79A);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-clay);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.placeholder:hover::before { opacity: 0.28; }
.placeholder::after {
  content: attr(data-label);
  position: relative;
  z-index: 2;
  font-family: var(--font-label);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  opacity: 0.55;
  text-align: center;
  padding: 0 1rem;
}
.placeholder--wide { --ratio: 16/10; }
.placeholder--square { --ratio: 1/1; }
.placeholder--tall { --ratio: 3/4; }

/* Real uploaded photos — same sizing behavior as .placeholder so swapping
   one for the other never shifts layout. */
.media-photo {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio, 4/5);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.media-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-photo--wide { --ratio: 16/10; }
.media-photo--square { --ratio: 1/1; }
.media-photo--tall { --ratio: 3/4; }
.hero__media .media-photo { height: 100%; --ratio: auto; border: none; }
.service-card .media-photo { margin-bottom: var(--space-sm); }
.portfolio-grid .media-photo { --ratio: 4/5; }
.story-card__grid .media-photo { --ratio: 1/1; border: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: var(--space-sm) 0;
  color: #fff;
}
.site-header.is-solid {
  position: sticky;
  background: var(--color-cream);
  color: var(--color-ink);
  border-bottom: 1px solid var(--color-border);
}
/* The WP admin toolbar (visible only when logged in) pushes normal page
   content down automatically, but not absolutely-positioned elements like
   the transparent homepage header — so without this, the homepage header
   sits 32px higher than every other page whenever you're logged in and
   reviewing the site. Regular visitors never see the admin bar, so this
   only affects how it looks to you while logged in. */
@media screen and (min-width: 783px) {
  body.admin-bar .site-header { top: 32px; }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--color-clay);
  z-index: 999;
  transition: width 0.1s linear;
}
.site-logo {
  font-family: var(--font-nav);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-logo a { display: block; }
.site-logo img,
.site-logo .custom-logo,
.site-logo-swap__img { display: block; height: 100px; width: auto; max-width: 100%; }

/* Crossfades between the light (over-photo) and dark (solid-background)
   logo as the homepage header switches to is-solid on scroll — see the
   scroll listener in main.js and the header.php logo markup. */
.site-logo-swap { position: relative; display: inline-block; }
.site-logo-swap__light { transition: opacity 0.25s ease; }
.site-logo-swap__dark {
  position: absolute;
  top: 0; left: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.site-header.is-solid .site-logo-swap__light { opacity: 0; }
.site-header.is-solid .site-logo-swap__dark { opacity: 1; }

/* Boxed "evol / studios" wordmark — border + text use currentColor so it
   automatically flips between white (over the hero) and black (solid
   header), matching separate light/dark logo files without needing images. */
.site-logo-mark {
  display: inline-flex;
  flex-direction: column;
  border: 2px solid currentColor;
  padding: 0.5em 1em 0.4em;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: lowercase;
}
.site-logo-mark span { display: block; }

.primary-nav ul { display: flex; gap: var(--space-md); }
.primary-nav li { position: relative; }
.primary-nav a {
  font-family: var(--font-nav);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.primary-nav a:hover,
.primary-nav .current-menu-item a { border-color: var(--color-clay); color: var(--color-clay); }
.header-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-toggle { display: none; }

/* "Services" dropdown — shows the individual service pages (Wedding,
   Engagement, Family, Portrait) on hover/focus, so visitors can jump
   straight to the one they care about instead of stopping at the
   Services overview page first. */
.primary-nav .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  margin-bottom: 2px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
.primary-nav .sub-menu {
  display: none;
  position: absolute;
  /* Flush against the parent link with zero gap (no margin-top) —
     a gap here is dead space the mouse has to cross without hovering
     anything, which drops the :hover state and closes the menu before
     you can reach it. The extra top padding below gives the same
     visual breathing room without creating that dead zone. */
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 230px;
  padding: 0.75rem 0 0.5rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  box-shadow: 0 20px 40px rgba(31, 27, 22, 0.14);
  gap: 0;
}
.primary-nav li.menu-item-has-children:hover > .sub-menu,
.primary-nav li.menu-item-has-children:focus-within > .sub-menu {
  display: flex;
  flex-direction: column;
}
.primary-nav .sub-menu a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--color-ink);
  border-bottom: none;
  letter-spacing: 1px;
  white-space: nowrap;
}
.primary-nav .sub-menu a:hover { background: var(--color-cream-deep); color: var(--color-clay); }

@media (max-width: 860px) {
  .primary-nav { display: none; }
  .nav-toggle {
    display: inline-flex;
    background: none;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    color: inherit;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .primary-nav.is-open {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--color-ink);
    color: var(--color-cream);
    padding: var(--space-md);
  }
  .primary-nav.is-open ul { flex-direction: column; gap: var(--space-sm); }
  /* On mobile the flyout is already a static stacked list (no hover),
     so the Services sub-menu is just always expanded and indented
     underneath it, instead of relying on a hover state nobody can
     trigger with touch. */
  .primary-nav .sub-menu {
    display: flex !important;
    position: static;
    flex-direction: column;
    background: none;
    border: none;
    box-shadow: none;
    margin-top: 0.4rem;
    padding-left: var(--space-md);
    gap: 0.5rem;
  }
  .primary-nav .sub-menu a { color: var(--color-cream); opacity: 0.8; padding: 0; }
  .primary-nav .menu-item-has-children > a::after { border-color: var(--color-cream); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  background: linear-gradient(160deg, #262626, var(--color-plum) 60%);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.8), rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.1) 100%);
  z-index: 1;
}
.hero__media { position: absolute; inset: 0; }
.hero__media .placeholder { height: 100%; --ratio: auto; border: none; }
.hero__content {
  position: relative;
  z-index: 2;
  /* Only top/bottom padding here — left/right comes from the shared
     .container class this element is always paired with in markup.
     A padding shorthand here would zero those out (0 for left/right),
     which is what was making hero headlines run edge-to-edge on
     narrow viewports where .container's own centering margin
     disappears. */
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
  width: 100%;
}
.hero h1 { color: #fff; max-width: 16ch; }
.hero__lede { max-width: 46ch; font-size: 1.1rem; color: rgba(246,241,231,0.85); }
.hero__actions { display: flex; gap: var(--space-sm); margin-top: var(--space-md); flex-wrap: wrap; }

/* ==========================================================================
   Grids / layout helpers
   ========================================================================== */
.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--services { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 900px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .grid--services { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid--services { grid-template-columns: 1fr; }
}
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; gap: var(--space-md); }
}

.section-head { max-width: 640px; margin-bottom: var(--space-md); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Service card */
.service-card {
  display: block;
  padding: var(--space-md);
  background: var(--color-card);
  border: 1px solid var(--color-hairline);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(31,27,22,0.08); }
.service-card .placeholder { margin-bottom: var(--space-sm); }
.service-card h3 { margin-bottom: 0.4rem; }
.service-card__link {
  display: inline-block;
  margin-top: var(--space-xs);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-clay);
  color: var(--color-clay);
}

/* Portfolio */
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
@media (max-width: 700px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
.portfolio-grid .placeholder { --ratio: 4/5; }

/* Pricing */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
  background: var(--color-card);
  border: 1px solid var(--color-hairline);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
}
.pricing-card--featured { border-color: var(--color-clay); box-shadow: 0 20px 40px rgba(203,175,127,0.18); }
.pricing-card__price { font-family: var(--font-heading); font-size: 2.4rem; color: var(--color-clay); margin: var(--space-xs) 0; }
.pricing-card ul { margin: var(--space-sm) 0; flex-grow: 1; }
.pricing-card li { padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.pricing-note { font-size: 0.85rem; color: var(--color-stone); margin-top: var(--space-md); }

/* Contact */
.contact-form { display: grid; gap: var(--space-sm); max-width: 640px; }
.form-row { display: grid; gap: var(--space-md); grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: 0.4rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  background: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
}
.field textarea { resize: vertical; min-height: 140px; }
.form-notice { padding: 1rem; border: 1px solid var(--color-border); font-size: 0.92rem; }
.form-notice--success { border-color: #6b8f5a; background: #f1f6ee; }
.form-notice--error { border-color: var(--color-clay); background: #fbf0eb; }

.contact-meta { display: grid; gap: var(--space-sm); }
.contact-meta a { border-bottom: 1px solid var(--color-border); }

/* Footer */
.site-footer { background: var(--color-ink); color: var(--color-cream); padding: var(--space-lg) 0 var(--space-md); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); } }
.footer-grid h4 { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-stone); font-family: var(--font-body); }
.footer-grid li { padding: 0.3rem 0; }
.footer-social { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.footer-bottom {
  border-top: 1px solid rgba(246,241,231,0.15);
  padding-top: var(--space-md);
  font-size: 0.8rem;
  color: var(--color-stone);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* Pull quote */
.pull-quote {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.pull-quote blockquote {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  /* Testimonials vary a lot in length — a short one-liner and a full
     paragraph share this same style, so the size is kept moderate
     enough to read well either way instead of being tuned for a
     single short example quote. */
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.35;
  color: var(--color-clay);
}
.pull-quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-style: normal;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-stone);
}

/* Homepage testimonials ("Social Proof") — styled as proper cards to
   match the rest of the site's editorial language (hairline border,
   white card surface, hover lift), with the quotation mark redone as
   a large, low-opacity serif glyph sitting behind the text as a quiet
   accent instead of a default browser glyph stacked awkwardly on top. */
.testimonial-card {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-hairline);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  height: 100%;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(31,27,22,0.08);
}
.testimonial-card__mark {
  position: absolute;
  top: -0.4rem;
  left: var(--space-md);
  font-family: var(--font-heading);
  font-size: 5.5rem;
  line-height: 1;
  color: var(--color-clay);
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}
.testimonial-card p {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-sm);
}
.testimonial-card cite {
  position: relative;
  z-index: 1;
  display: block;
  font-style: normal;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-stone);
}

/* Signature */
.signature {
  font-family: var(--font-script);
  color: var(--color-clay);
  font-size: clamp(2.2rem, 4vw, 3rem);
  line-height: 1;
  margin: var(--space-sm) 0 0;
}

/* Animated hairline that draws in on scroll */
.draw-line {
  width: 100%;
  height: 1px;
  background: var(--color-hairline);
  position: relative;
  overflow: hidden;
  margin: var(--space-lg) 0;
}
.draw-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s ease;
}
.draw-line.is-visible::after { transform: scaleX(1); }

/* Icons */
.icon { width: 32px; height: 32px; color: var(--color-clay); }

/* Value props / "what makes it different" icon cards */
.icon-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .icon-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .icon-cards { grid-template-columns: 1fr; } }
.icon-card { text-align: center; padding: var(--space-md) var(--space-sm); }
.icon-card .icon { margin: 0 auto var(--space-sm); }
.icon-card h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.icon-card p { color: var(--color-stone); font-size: 0.95rem; }

/* Process steps */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); counter-reset: step; }
@media (max-width: 900px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-steps { grid-template-columns: 1fr; } }
.process-step { position: relative; padding-top: var(--space-md); }
.process-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--color-clay);
  color: var(--color-clay);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}
.process-step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.process-step p { color: var(--color-stone); font-size: 0.95rem; }

/* Wedding story cards */
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 900px) { .story-grid { grid-template-columns: 1fr; } }
.story-grid--wide { grid-template-columns: repeat(4, 1fr); gap: var(--space-xs); }
@media (max-width: 700px) { .story-grid--wide { grid-template-columns: repeat(2, 1fr); } }

/* Wedding story photo flow — one continuous sequence, each photo kept at
   its true shape (see .media-photo--natural), full width for landscape
   shots, side-by-side pairs for consecutive portrait shots. */
.story-flow {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* Reused inside the Portfolio page's Families/Portraits tabs, which
   are nested one level deeper inside .container than the dedicated
   wedding-story page is, so it needs its own centering. */
.portfolio-group .story-flow { margin: 0 auto; }
.story-flow__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 700px) { .story-flow__row { grid-template-columns: 1fr; } }

/* White matte border + a layered "smooth shadow" (several soft shadows
   stacked at increasing size/blur, instead of one flat box-shadow) —
   this reads as real depth/light falloff rather than a flat drop
   shadow, giving each photo a lifted, 3D, sitting-on-the-page feel. */
.media-photo--natural {
  aspect-ratio: auto;
  overflow: visible;
  background: #fff;
  padding: 10px;
  box-shadow:
    0 1px 1px rgba(20, 16, 12, 0.06),
    0 2px 2px rgba(20, 16, 12, 0.06),
    0 4px 4px rgba(20, 16, 12, 0.06),
    0 8px 8px rgba(20, 16, 12, 0.06),
    0 16px 16px rgba(20, 16, 12, 0.06),
    0 32px 32px rgba(20, 16, 12, 0.06);
}
.media-photo--natural img {
  height: auto;
  object-fit: initial;
  cursor: zoom-in;
}
.story-card { display: block; background: var(--color-card); border: 1px solid var(--color-hairline); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.story-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(31,27,22,0.08); }
.story-card__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.story-card__grid .placeholder { --ratio: 1/1; border: none; }
.story-card__body { padding: var(--space-md); }
.story-card__meta { font-family: var(--font-label); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-clay); margin-bottom: 0.6rem; }

/* Who this is for / not for you lists */
.fit-list { display: grid; gap: 0.9rem; }
.fit-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.fit-list .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.2rem; }
.fit-list--not .icon { color: var(--color-stone); }

/* Add-ons list */
.addon-list { display: grid; gap: 0; border-top: 1px solid var(--color-hairline); }
.addon-list li { display: flex; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--color-hairline); }
.addon-list li span:last-child { color: var(--color-clay); font-family: var(--font-heading); font-weight: 600; }

/* FAQ accordion (native details/summary — no JS needed) */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--color-hairline); }
.faq-item summary {
  cursor: pointer;
  padding: 1.25rem 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--color-clay);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 1.25rem; color: var(--color-stone); max-width: 65ch; }

/* Expanded multi-field form */
.form-grid { display: grid; gap: var(--space-md); grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .field--full { grid-column: 1 / -1; }

/* Next-steps list */
.next-steps { counter-reset: ns; display: grid; gap: var(--space-sm); }
.next-steps li { display: flex; gap: 1rem; align-items: flex-start; }
.next-steps li::before {
  counter-increment: ns;
  content: counter(ns);
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-clay);
  color: var(--color-clay);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
}

/* Package tiers */
.package-tag { font-family: var(--font-label); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-stone); }

/* Portfolio filter tabs */
.portfolio-tabs { display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap; }
.portfolio-tab {
  background: none;
  border: 1px solid var(--color-hairline);
  padding: 0.7rem 1.6rem;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-stone);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.portfolio-tab.is-active,
.portfolio-tab:hover { border-color: var(--color-clay); color: var(--color-clay); }
@media (max-width: 560px) {
  /* With 4 tabs, flex-wrap left one tab alone on its own row and
     another centered alone below it — an even 2x2 grid reads much
     cleaner than that ragged wrap. */
  .portfolio-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  .portfolio-tab { padding: 0.7rem 0.5rem; text-align: center; }
}

/* Utility */
.text-center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }

/* ==========================================================================
   Lightbox — wedding story photo flow
   ========================================================================== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(15, 13, 11, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.lightbox-frame {
  background: #fff;
  padding: 18px;
  box-shadow:
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.12),
    0 16px 16px rgba(0, 0, 0, 0.12),
    0 32px 32px rgba(0, 0, 0, 0.12),
    0 64px 64px rgba(0, 0, 0, 0.12);
  max-width: 88vw;
  max-height: 86vh;
  line-height: 0;
}
.lightbox-frame img {
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: fixed;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 2001;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { opacity: 1; }
.lightbox-close {
  top: 24px;
  right: 32px;
  font-size: 2.25rem;
  line-height: 1;
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 3rem;
  padding: 0 12px;
}
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
@media (max-width: 700px) {
  .lightbox-overlay { padding: 16px; }
  .lightbox-frame { padding: 10px; }
  .lightbox-prev, .lightbox-next { font-size: 2.25rem; }
}