/*
Theme Name: Ferricio George Photo & Film
Theme URI: https://ferriciogeorge.com
Author: Ferricio George
Author URI: https://ferriciogeorge.com
Description: A dark, cinematic portfolio theme built for Ferricio George Photo & Film. Full-bleed imagery, editorial typography, and a category-based portfolio menu (Weddings, Lifestyle, Portraits, Film & Videography, Branding & Media). Built to be customized entirely through the WordPress editor — no coding required to add photos or text.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ferricio-george
*/

/* =========================================================
   0. RESET + ROOT VARIABLES
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fg-black);
  color: var(--fg-white);
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  margin: 0 0 0.5em;
  line-height: 1.2;
}
p { margin: 0 0 1.4em; }
button { font-family: inherit; cursor: pointer; }

:root {
  --fg-black: #0b0b0a;
  --fg-charcoal: #191917;
  --fg-charcoal-light: #232320;
  --fg-white: #f6f5f1;
  --fg-muted: #a3a29b;
  --fg-hairline: rgba(246, 245, 241, 0.16);
  --fg-gold: #f0da8f;
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

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

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  color: var(--fg-gold);
  font-weight: 500;
}

.btn {
  display: inline-block;
  padding: 0.9em 2em;
  border: 1px solid var(--fg-hairline);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  font-weight: 500;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.btn:hover { background: var(--fg-white); color: var(--fg-black); border-color: var(--fg-white); }
.btn-solid { background: var(--fg-white); color: var(--fg-black); }
.btn-solid:hover { background: transparent; color: var(--fg-white); border-color: var(--fg-hairline); }

/* =========================================================
   1. SITE HEADER / NAVIGATION
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 2.2rem 0 1.6rem;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow .4s ease;
}
/* On the homepage hero, the header floats transparent over the dark photo
   (white text). The moment you scroll past it, the header flips to a
   solid white bar with dark text — the same light/dark inversion Linda
   Vos's site uses, so the chrome never fights the photography. */
.site-header.is-scrolled {
  background: linear-gradient(to bottom, rgba(246,245,241,1) 0%, rgba(246,245,241,1) 70%, rgba(246,245,241,0) 100%);
  padding: 1.3rem 0 0.9rem;
}

/* Mobile only: extend the solid part of the scrolled bar further down so it
   fully covers behind the logo and hamburger button (desktop keeps 70%). */
@media (max-width: 860px) {
  .site-header.is-scrolled {
    background: linear-gradient(to bottom, rgba(246,245,241,0.7) 0%, rgba(246,245,241,0.7) 88%, rgba(246,245,241,0) 100%);
  }
}
.site-header.is-scrolled .site-title a,
.site-header.is-scrolled .primary-navigation a {
  color: var(--fg-black);
}
.site-header.is-scrolled .site-tagline {
  color: #6b6a63;
}
.site-header.is-scrolled .primary-menu-toggle {
  color: var(--fg-black);
}
.site-header.is-scrolled .custom-logo-link img {
  filter: invert(1);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-branding { display: flex; flex-direction: column; flex-shrink: 0; white-space: nowrap; }
.site-title {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.site-title a { color: var(--fg-white); }
.site-tagline {
  margin: 0.1em 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-family: 'Jost', sans-serif;
}
.custom-logo-link img { max-height: 54px; width: auto; }

/* primary menu */
.primary-menu-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--fg-white);
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.25em;
}
.primary-navigation ul.menu {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.6rem);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.primary-navigation a {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--fg-white);
  position: relative;
  padding: 0.3em 0;
  white-space: nowrap;
}
.primary-navigation > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--fg-gold);
  transition: width 0.3s ease;
}
.primary-navigation > ul > li > a:hover::after,
.primary-navigation > ul > li.current-menu-item > a::after,
.primary-navigation > ul > li.current_page_ancestor > a::after,
.primary-navigation > ul > li.current-menu-ancestor > a::after {
  width: 100%;
}

.primary-navigation li.menu-item-has-children { position: relative; }
.primary-navigation li.menu-item-has-children > a::before {
  content: '';
}
.primary-navigation .sub-menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 220px;
  background: var(--fg-charcoal);
  border: 1px solid var(--fg-hairline);
  padding: 0.6rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.primary-navigation li.menu-item-has-children:hover > .sub-menu,
.primary-navigation li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.primary-navigation .sub-menu li a {
  display: block;
  padding: 0.6em 1.4em;
  white-space: nowrap;
  letter-spacing: 0.08em;
}
.primary-navigation .sub-menu li a:hover { background: var(--fg-charcoal-light); }
.primary-navigation .sub-menu li a::after { display: none; }

/* Home page only: soft grey band spanning the full header (logo + nav),
   fading out at the outer edges, matching the width of the solid white
   .is-scrolled background. Hidden once scrolled, since the white bar
   already provides its own contrast at that point. */
.site-header .container {
  position: relative;
  z-index: 1;
}
.site-header-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.site-header.is-home .site-header-glow {
  opacity: 1;
  background: linear-gradient(to right, rgba(15,15,14,0) 0%, rgba(15,15,14,0.55) 6%, rgba(15,15,14,0.55) 94%, rgba(15,15,14,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.site-header.is-home.is-scrolled .site-header-glow {
  opacity: 0;
}

/* Mobile only: remove the grey header glow entirely (desktop keeps it). */
@media (max-width: 800px) {
  .site-header.is-home .site-header-glow {
    opacity: 0;
  }
}

/* =========================================================
   2. HERO (Home template)
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.65) 100%), var(--fg-charcoal);
  background-size: cover;
  background-position: center;
  color: var(--fg-white);
  overflow: hidden;
}
.hero.no-image {
  background: radial-gradient(ellipse at top, #2a2a26 0%, var(--fg-black) 70%);
}
.hero-placeholder-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  padding: 2rem;
  border: 1px dashed var(--fg-hairline);
  margin: 2rem;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter) 5.5rem;
  width: 100%;
}
.hero-content .eyebrow { display: block; margin-bottom: 1.1rem; }
.hero-title {
  font-size: clamp(2.4rem, 6vw, 5rem);
  max-width: 16ch;
  margin-bottom: 0.4em;
}
.hero-subtitle {
  max-width: 46ch;
  color: var(--fg-black);
  font-size: 1.05rem;
}
.hero-scroll-cue {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 1px; height: 46px;
  background: var(--fg-hairline);
}
.hero-scroll-cue::after {
  content: '';
  position: absolute;
  top: 0; left: -2.5px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fg-gold);
  animation: cue-drop 2.2s ease-in-out infinite;
}
@keyframes cue-drop {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 40px; opacity: 0; }
}

/* statement / quote band */
.statement-band {
  background: var(--fg-charcoal);
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
  text-align: center;
}
.statement-band blockquote {
  margin: 0 auto;
  max-width: 850px;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  color: var(--fg-white);
  font-weight: 400;
}
.statement-band cite,
.statement-subline {
  display: block;
  margin: 1.2rem auto 0;
  max-width: 600px;
  font-style: italic;
  font-family: 'Jost', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}
.accolade-line {
  margin-top: 1.6rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--fg-muted);
  opacity: 0.7;
}

/* Homepage photo mosaic — a dense, gapless grid of your best shots, no
   captions/labels, letting the photography speak for itself. This comes
   from a native WordPress "Gallery" block added to the Home page content
   — the rules below override the block's own default flex/gap styling
   so it renders as a tight 3-column mosaic instead of a spaced-out grid.
   .photo-mosaic-fallback is only used before you've added a Gallery block. */
.photo-mosaic .wp-block-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  width: 100%;
}
.photo-mosaic .wp-block-gallery figure.wp-block-image {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  display: block !important;
}
.photo-mosaic .wp-block-gallery figure.wp-block-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.photo-mosaic .wp-block-gallery figure.wp-block-image:hover img { transform: scale(1.05); }

.photo-mosaic-fallback {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.photo-mosaic-fallback .placeholder-figure {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  margin: 0;
}

/* home intro / about-teaser section */
.home-section {
  padding: clamp(4rem, 9vw, 7rem) 0;
}
.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3rem;
}
.section-heading h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.section-heading p { color: var(--fg-muted); }

.about-teaser-section { padding: 0; }
.about-teaser {
  position: relative;
  height: 780px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.about-teaser-image {
  position: absolute;
  inset: 0;
}
.about-teaser-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.about-teaser-copy {
  position: relative;
  z-index: 2;
  width: min(46%, 480px);
  margin-left: clamp(1.5rem, 3.5vw, 4rem);
  padding: clamp(2rem, 4vw, 3rem) 2rem clamp(2rem, 4vw, 3rem) var(--gutter);
}
.about-teaser-copy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: clamp(320px, 45vw, 620px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(25,25,23,0.65) 0%,
    rgba(25,25,23,0.65) 45%,
    rgba(25,25,23,0) 100%);
}
.about-teaser-copy .eyebrow { margin-bottom: 1rem; font-size: 1.44rem; }
.about-teaser-copy p { color: var(--fg-white); }

/* Push the copy box further toward center on wider screens, but never past
   the halfway line (48vw keeps a safety margin from the true 50% center). */
@media (min-width: 1150px) {
  .about-teaser-copy { margin-left: clamp(4rem, calc(48vw - 500px), 16rem); }
}
@media (max-width: 800px) {
  .about-teaser { height: 540px; align-items: flex-end; justify-content: flex-start; }
  .about-teaser-copy { width: 100%; margin-left: 0; padding: 0 var(--gutter) 2rem; }
  .about-teaser-copy::before { width: 100%; }
  .about-teaser-image img { -webkit-mask-image: none; mask-image: none; object-position: 75% 12%; }
}

/* =========================================================
   3. GENERIC PAGE HERO (Portfolio category / About / FAQ / Contact)
   ========================================================= */
.page-hero {
  padding: clamp(9rem, 18vw, 11rem) 0 clamp(3rem, 6vw, 4rem);
  text-align: center;
  background: var(--fg-charcoal);
  border-bottom: 1px solid var(--fg-hairline);
}
.page-hero .eyebrow { display: block; margin-bottom: 1rem; }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
.page-hero p.page-hero-sub { max-width: 56ch; margin: 0.8rem auto 0; color: var(--fg-muted); }

/* Portfolio category filter pills (links across the 5 category pages) */
.portfolio-subnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.5rem var(--gutter) 0;
}
.portfolio-subnav a {
  padding: 0.55em 1.3em;
  border: 1px solid var(--fg-hairline);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
}
.portfolio-subnav a:hover,
.portfolio-subnav a.is-active {
  background: var(--fg-white);
  color: var(--fg-black);
  border-color: var(--fg-white);
}

/* content area that wraps the_content() on inner pages */
.page-content-wrap {
  padding: clamp(3rem, 7vw, 5rem) 0 clamp(5rem, 9vw, 7rem);
}
.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content.wide { max-width: 100%; }
.entry-content > * + * { margin-top: 1.4em; }
.entry-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.6em; }
.entry-content h3 { font-size: 1.25rem; }
.entry-content a { border-bottom: 1px solid var(--fg-gold); }
.entry-content blockquote {
  border-left: 2px solid var(--fg-gold);
  padding-left: 1.4rem;
  font-style: italic;
  color: var(--fg-muted);
}

/* Gutenberg gallery / image blocks -> full-bleed grid look */
.entry-content .wp-block-gallery,
.entry-content .wp-block-image + .wp-block-image,
.entry-content ul.wp-block-gallery {
  margin-top: 1.4em;
}
.wp-block-gallery.columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wp-block-gallery.columns-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.wp-block-gallery figure { margin: 0; }
.wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; }
.placeholder-figure {
  aspect-ratio: 4/5;
  border: 1px dashed var(--fg-hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 1rem;
}

/* =========================================================
   4. ABOUT PAGE
   ========================================================= */
.about-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.about-layout .about-portrait img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.about-layout .about-portrait { position: sticky; top: 7rem; }
.stat-row {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--fg-hairline);
}
.stat-row .stat-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: var(--fg-gold);
  display: block;
}
.stat-row .stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
}

/* =========================================================
   5. FAQ PAGE
   ========================================================= */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-list details {
  border-bottom: 1px solid var(--fg-hairline);
  padding: 1.6rem 0;
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  color: var(--fg-white);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+';
  font-family: 'Jost', sans-serif;
  font-size: 1.4rem;
  color: var(--fg-gold);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .faq-answer {
  color: var(--fg-muted);
  margin-top: 1rem;
  padding-right: 2rem;
}

.faq-category { margin: 3.5rem 0 1.4rem; }
.faq-category:first-of-type { margin-top: 0; }
.faq-category h2 {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--fg-white);
}
.faq-category h2::before {
  content: '';
  flex: 0 0 44px;
  height: 1px;
  background: var(--fg-gold);
}
.faq-editor-note {
  margin-bottom: 2.5rem;
  text-align: center;
  color: var(--fg-muted);
}

/* =========================================================
   5b. PRICING PAGE
   ========================================================= */
.pricing-intro {
  max-width: 700px;
  margin: 2.5rem auto 0;
  text-align: center;
  color: var(--fg-muted);
  font-size: 1.1rem;
}
.pricing-form-wrap { max-width: 760px; margin: 3.5rem auto 0; }
.pricing-form-wrap .form-note {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 0.85rem;
  color: var(--fg-muted);
}

.pricing-contact-details {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--fg-hairline);
}
.pricing-contact-details .section-heading { text-align: center; margin: 0 0 1.5rem; max-width: none; }

/* Generic form styling — also matches Contact Form 7 / WPForms output
   once you install a form plugin and paste its shortcode in. */
.fgpf-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.fgpf-form-fields .field-full { grid-column: 1 / -1; }
.fgpf-form-fields label,
.wpcf7-form label,
.wpforms-field-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--fg-muted);
  margin-bottom: 0.5em;
}
.fgpf-form-fields input,
.fgpf-form-fields select,
.fgpf-form-fields textarea,
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=tel],
.wpcf7-form textarea,
.wpcf7-form select,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  width: 100%;
  background: var(--fg-charcoal);
  border: 1px solid var(--fg-hairline);
  color: var(--fg-white);
  padding: 0.8em 1em;
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
}
.fgpf-form-fields input:focus,
.fgpf-form-fields textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--fg-gold);
}
.fgpf-placeholder-form-note {
  border: 1px dashed var(--fg-hairline);
  padding: 2.2rem;
  color: var(--fg-muted);
  font-size: 0.85rem;
  text-align: center;
}
.fgpf-placeholder-form-note code {
  display: inline-block;
  margin-top: 0.6rem;
  background: var(--fg-charcoal-light);
  padding: 0.2em 0.5em;
  color: var(--fg-gold);
}

/* Contact Form 7 output on the Pricing page enquiry form. */
.wpcf7-form .fgpf-form-fields p { margin: 0; }
.wpcf7-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-muted) 50%),
    linear-gradient(135deg, var(--fg-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.3em) center, calc(100% - 1em) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.field-hint {
  display: block;
  font-size: 0.8rem;
  color: var(--fg-muted);
  margin-top: 0.15em;
}
.wpcf7-form .wpcf7-submit {
  margin-top: 0.6rem;
}
.wpcf7-not-valid-tip {
  display: block;
  color: #d98a7d;
  font-size: 0.8rem;
  margin-top: 0.15em;
}
.wpcf7-form-control.wpcf7-not-valid {
  border-color: #d98a7d;
}
.wpcf7-response-output {
  margin: 1.6rem 0 0;
  padding: 1em 1.4em;
  border: 1px solid var(--fg-hairline);
  font-size: 0.85rem;
  color: var(--fg-white);
}
.wpcf7-form.sent .wpcf7-response-output {
  border-color: var(--fg-gold);
  color: var(--fg-gold);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  border-color: #d98a7d;
  color: #d98a7d;
}

.keep-in-mind {
  background: var(--fg-charcoal);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  margin-top: clamp(3rem, 7vw, 5rem);
}
.keep-in-mind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  max-width: 1100px;
  margin: 2.5rem auto 0;
}
.keep-in-mind-grid h3 {
  font-size: 1.1rem;
  color: var(--fg-gold);
  margin-bottom: 0.6em;
}
.keep-in-mind-grid p { color: var(--fg-muted); font-size: 0.92rem; }

@media (max-width: 780px) {
  .fgpf-form-fields { grid-template-columns: 1fr; }
  .keep-in-mind-grid { grid-template-columns: 1fr; text-align: center; }
}

/* =========================================================
   6. CONTACT PAGE
   ========================================================= */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
}
.contact-method {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--fg-hairline);
}
.contact-method .eyebrow { display: block; margin-bottom: 0.5rem; }
.contact-method a { font-size: 1.1rem; }
.contact-form-slot {
  border: 1px dashed var(--fg-hairline);
  padding: 2.2rem;
  color: var(--fg-muted);
  font-size: 0.85rem;
}
.contact-form-slot code {
  display: inline-block;
  margin-top: 0.6rem;
  background: var(--fg-charcoal-light);
  padding: 0.2em 0.5em;
  color: var(--fg-gold);
}

/* =========================================================
   7. INSTAGRAM / FOLLOW STRIP (home)
   ========================================================= */
.follow-strip { background: var(--fg-charcoal); padding: clamp(3rem, 7vw, 5rem) 0; }
.wedding-cta .eyebrow { font-size: 1.44rem; }
.follow-strip .section-heading { margin-bottom: 2rem; }
.follow-along-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease, gap 0.25s ease;
}
.follow-along-link:hover { color: var(--fg-muted); gap: 0.85rem; }
.follow-along-arrow { display: inline-block; transition: transform 0.25s ease; }
.follow-along-link:hover .follow-along-arrow { transform: translateX(4px); }
.follow-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}
.follow-grid a { display: block; position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--fg-charcoal-light); }
.follow-grid img { width: 100%; height: 100%; object-fit: cover; }
.follow-grid .play-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-white);
  background: rgba(11,11,10,0.25);
}
.follow-grid .play-icon svg { width: 30px; height: 30px; }

/* Live Instagram feed (Smash Balloon) -- override plugin defaults to match
   the site's dark, borderless square-grid look used by the placeholder grid. */
.follow-grid-live { margin: 0; }
.follow-grid-live #sb_instagram.sbi { padding-bottom: 0 !important; max-width: 100% !important; }
.follow-grid-live .sb_instagram_header { display: none !important; }
.follow-grid-live #sbi_images { gap: 2px !important; grid-template-columns: repeat(6, 1fr) !important; }
.follow-grid-live .sbi_item { aspect-ratio: 1/1; }
.follow-grid-live .sbi_item:nth-child(n+7) { display: none !important; }
.follow-grid-live .sbi_item { background: var(--fg-charcoal-light); }
.follow-grid-live .sbi_photo_wrap { overflow: hidden; }
.follow-grid-live .sbi_photo_wrap img { width: 100%; height: 100%; object-fit: cover; }
.follow-grid-live .sbi_item .sbi_type_video:before,
.follow-grid-live .sbi_item .sbi_type_carousel:before { filter: none; }
.follow-grid-live #sbi_load,
.follow-grid-live .sbi_mod_error,
.follow-grid-live a[href*="smashballoon.com"] { display: none !important; }

/* =========================================================
   8. FOOTER
   ========================================================= */
.site-footer {
  background: var(--fg-black);
  border-top: 1px solid var(--fg-hairline);
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 2.5rem;
  text-align: center;
  align-items: center;
}
.footer-connect .eyebrow { display: block; margin-bottom: 1rem; }
.footer-social-empty {
  opacity: .5;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-brand img.footer-badge { max-width: 96px; margin: 0 auto 0.8rem; opacity: 0.9; }
.footer-brand .custom-logo-link { display: inline-block; }
.footer-brand .custom-logo { margin: 0 auto; }
.footer-brand .custom-logo-link img { max-height: 108px; }
.footer-brand .site-title { font-size: 1.3rem; }
.footer-nav ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-nav a {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--fg-muted);
}
.footer-nav a:hover { color: var(--fg-white); }
.footer-social { display: flex; gap: 1.1rem; justify-content: center; }
.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid var(--fg-hairline);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  color: var(--fg-muted);
  background: transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.footer-social a:hover { color: var(--fg-white); border-color: var(--fg-white); background: transparent; }
.footer-email {
  display: block;
  margin-top: 1.1rem;
  color: var(--fg-muted);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}
.footer-email:hover { color: var(--fg-white); }
.footer-bottom {
  text-align: center;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fg-hairline);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  text-transform: uppercase;
}

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .photo-mosaic .wp-block-gallery, .photo-mosaic-fallback { grid-template-columns: repeat(2, 1fr) !important; }
  .about-teaser, .about-layout, .contact-layout { grid-template-columns: 1fr; }
  .about-layout .about-portrait { position: static; max-width: 320px; margin: 0 auto; }
  .follow-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* With 10 flat nav items (Home + 5 categories + Pricing/About/FAQ/Contact),
   the hamburger menu takes over earlier than a typical site — below
   ~1100px, a one-line nav gets visually cramped even letter-spaced this
   tight, so it collapses to the mobile menu at a wider breakpoint than
   usual. Above 1100px there's room for the full row. */
@media (max-width: 860px) {
  .primary-menu-toggle { display: block; }
  .primary-navigation {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--fg-black);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    z-index: 99;
  }
  .primary-navigation.is-open { transform: translateY(0); }
  .primary-navigation ul.menu {
    flex-direction: column;
    gap: 1.6rem;
    text-align: center;
  }
  .primary-navigation .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: none;
    border: none;
    text-align: center;
    padding-top: 0.5rem;
  }
  .primary-navigation li.menu-item-has-children:hover > .sub-menu { transform: none; }
  .hero-content { padding-bottom: 5.25rem; }
}

@media (max-width: 560px) {
  .photo-mosaic .wp-block-gallery, .photo-mosaic-fallback { grid-template-columns: 1fr !important; }
  .wp-block-gallery.columns-3, .wp-block-gallery.columns-2 { grid-template-columns: 1fr; }
  .follow-grid { grid-template-columns: repeat(2, 1fr); }
}


/* =========================================================
   10. WEDDINGS PAGE
   ========================================================= */
.wedding-hero { min-height: 100vh; }
.wedding-hero .hero-content { padding-bottom: 1.75rem; }
.wedding-hero .hero-title {
  color: var(--fg-gold);
  display: inline-block;
  width: fit-content;
  padding: 0.2em 1.5em 0.2em 0.5em;
  margin-left: -0.5em;
  background: linear-gradient(to right, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.4) 55%, rgba(20,20,20,0) 100%);
}
.wedding-hero .hero-subtitle {
  color: var(--fg-black);
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.65rem, 2.6vw, 1.05rem);
  margin-top: 0.5em;
  font-weight: 500;
}

/* Mobile only: shift the crop so the couple (not the crowd/background) sits
   centered in frame -- desktop keeps the default centered crop. Also lift
   the title/subtitle text higher off the bottom edge on mobile. */
@media (max-width: 800px) {
  .wedding-hero { background-position: 44% 50%; }
  .wedding-hero .hero-content { padding-bottom: 6rem; }
}

.pricing-hero { min-height: 100vh; background-position: center bottom; }
.pricing-hero .hero-content { padding-bottom: 1.75rem; }

/* Mobile only: match the Weddings page's lifted hero text position. */
@media (max-width: 800px) {
  .pricing-hero .hero-content { padding-bottom: 6rem; }
}
.pricing-hero .hero-title {
  color: var(--fg-gold);
  display: inline-block;
  width: fit-content;
  padding: 0.2em 1.5em 0.2em 0.5em;
  margin-left: -0.5em;
  background: linear-gradient(to right, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.4) 55%, rgba(20,20,20,0) 100%);
}
.pricing-hero .hero-subtitle {
  color: var(--fg-black);
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.65rem, 2.6vw, 1.05rem);
  margin-top: 0.5em;
  font-weight: 500;
}

.narrow-copy { max-width: 700px; margin: 0 auto; text-align: center; }
.narrow-copy .eyebrow { display: block; margin-bottom: 1rem; }
.narrow-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom: 1.2rem; }

.wedding-info {
  background: var(--fg-charcoal);
  padding: clamp(3.5rem, 8vw, 6rem) 0;
  border-top: 1px solid var(--fg-hairline);
  border-bottom: 1px solid var(--fg-hairline);
}

/* Photo intro: copy on the left, a scattered "polaroids on a table" photo
   collage on the right. */
.wedding-collage-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(4rem, 9vw, 7rem) 0;
}
.wedding-collage-copy .eyebrow { display: block; margin-bottom: 0.8rem; }
.wedding-collage-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin: 0 0 1.2rem; max-width: 14ch; }
.wedding-collage-copy .entry-content { max-width: 48ch; font-size: 1.1rem; }

.wedding-collage-photos {
  position: relative;
  height: 620px;
  width: 100%;
  margin: 0 auto;
  max-width: 560px;
}
.polaroid {
  position: absolute;
  width: 210px;
  background: var(--fg-white);
  padding: 12px 12px 38px;
  box-shadow: 0 16px 30px rgba(0,0,0,0.4);
}
.polaroid-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--fg-charcoal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  overflow: hidden;
}
.polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.polaroid-1 { top: 0;   left: 0;   width: 200px; transform: rotate(-9deg); z-index: 1; }
.polaroid-2 { top: 6%;  left: 40%; width: 195px; transform: rotate(6deg);  z-index: 3; }
.polaroid-3 { top: 0;   left: 66%; width: 175px; transform: rotate(-4deg); z-index: 2; }
.polaroid-4 { top: 52%; left: 6%;  width: 190px; transform: rotate(8deg);  z-index: 4; }
.polaroid-5 { top: 48%; left: 44%; width: 205px; transform: rotate(-5deg); z-index: 5; }
.polaroid-6 { top: 24%; left: 74%; width: 150px; transform: rotate(11deg); z-index: 6; }
.polaroid-7 { top: 68%; left: 66%; width: 150px; transform: rotate(-8deg); z-index: 7; }
.polaroid-8 { top: 34%; left: 18%; width: 135px; transform: rotate(5deg); z-index: 8; }
.polaroid-9  { top: 4%;  left: -8%; width: 120px; transform: rotate(-13deg); z-index: -1; }
.polaroid-10 { top: 58%; left: -10%; width: 130px; transform: rotate(9deg);  z-index: -2; }
.polaroid-11 { top: 2%;  left: 90%; width: 120px; transform: rotate(10deg); z-index: -3; }
.polaroid-12 { top: 62%; left: 88%; width: 130px; transform: rotate(-11deg); z-index: -4; }
.polaroid-13 { top: 20%; left: -18%; width: 115px; transform: rotate(-15deg); z-index: 13; }
.polaroid-14 { top: 44%; left: -22%; width: 120px; transform: rotate(8deg);  z-index: 14; }
.polaroid-15 { top: 72%; left: -14%; width: 110px; transform: rotate(-6deg); z-index: 15; }

@media (max-width: 900px) {
  .wedding-collage-layout { grid-template-columns: 1fr; }
  .wedding-collage-photos { height: 580px; width: 100%; margin: 0 auto; max-width: 460px; overflow: hidden; }
}
@media (max-width: 480px) {
  .wedding-collage-photos { height: 560px; }
  .polaroid { width: 130px !important; padding: 8px 8px 26px; }
  .polaroid-9, .polaroid-10, .polaroid-11, .polaroid-12, .polaroid-13, .polaroid-14, .polaroid-15 { width: 90px !important; }
  .polaroid-9  { left: 0%; }
  .polaroid-10 { left: 2%; }
  .polaroid-11 { left: 76%; }
  .polaroid-12 { left: 74%; }
  .polaroid-13 { left: -10%; top: 14%; }
  .polaroid-14 { left: -12%; top: 42%; }
  .polaroid-15 { left: -8%;  top: 70%; }
}

/* Package features -- full-width photo that fades left to right into the
   page background, with the collection details sitting in the faded zone. */
.package-feature {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.package-feature + .package-feature { margin-top: 3px; }
.package-feature-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.package-feature-content {
  position: relative;
  z-index: 2;
  width: min(46%, 480px);
  padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(2rem, 4vw, 3rem) 2rem;
}
.package-feature-content::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(320px, 45vw, 620px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to left,
    rgba(25,25,23,0.65) 0%,
    rgba(25,25,23,0.65) 45%,
    rgba(25,25,23,0) 100%);
}
.package-feature-content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.package-feature-content .package-tagline {
  color: var(--fg-gold);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0 0 1.3rem;
  line-height: 1.5;
}
.package-feature-content .package-list {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
}
.package-feature-content .package-list li {
  color: var(--fg-white);
  font-size: 0.9rem;
  padding-left: 1.2em;
  position: relative;
  margin-bottom: 0.7em;
}
.package-feature-content .package-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1px;
  background: var(--fg-gold);
}

/* Enquire buttons on the Weddings page: keep only the top/bottom hairlines,
   drop the left/right verticals, and thicken the remaining lines slightly. */
.package-feature-content .btn {
  border-left: none;
  border-right: none;
  border-top-width: 2px;
  border-bottom-width: 2px;
}

.package-feature-photo--keepsake {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.package-feature-photo--intimate {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.package-feature-photo-strip-item {
  flex: 1 1 33.333%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--fg-charcoal-light);
  border-right: 1px solid var(--fg-black);
}
.package-feature-photo-strip-item:last-child { border-right: none; }
.package-feature-photo--timeless {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* EXPERIMENTAL: Intimate Affection text centered + enlarged to span from
   the center of the left photo strip to the center of the right one.
   Remove this block (and the --intimate content/wrapper classes in
   page-weddings.php) to revert to the standard right-aligned layout. */
.package-feature--intimate { justify-content: center; }
.package-feature-content--intimate {
  width: 66.667%;
  max-width: none;
  padding: clamp(2.5rem, 4vw, 3.5rem) 3rem;
  text-align: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.package-feature-content--intimate::before {
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to right,
    rgba(25,25,23,0) 0%,
    rgba(25,25,23,0.65) 18%,
    rgba(25,25,23,0.65) 82%,
    rgba(25,25,23,0) 100%);
}
.package-feature-content--intimate h3 { font-size: 1.8rem; }
.package-feature-content--intimate .package-tagline { font-size: 1rem; }
.package-feature-content--intimate .package-list { text-align: center; }
.package-feature-content--intimate .package-list li {
  font-size: 1rem;
  padding-left: 0;
}
.package-feature-content--intimate .package-list li::before { display: none; }
.package-feature-content--intimate .btn:hover {
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 25%,
    rgba(255,255,255,1) 75%,
    rgba(255,255,255,0) 100%);
  border-color: transparent;
  color: var(--fg-black);
}

/* EXPERIMENTAL: same centered/enlarged-then-reduced text treatment,
   applied to Keepsake Collection. Remove this block + the
   --keepsake-text classes in page-weddings.php to revert. */
.package-feature--keepsake-text { justify-content: center; }
.package-feature-content--keepsake-text {
  width: 66.667%;
  max-width: none;
  padding: clamp(2.5rem, 4vw, 3.5rem) 3rem;
  text-align: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.package-feature-content--keepsake-text::before {
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to right,
    rgba(25,25,23,0) 0%,
    rgba(25,25,23,0.65) 18%,
    rgba(25,25,23,0.65) 82%,
    rgba(25,25,23,0) 100%);
}
.package-feature-content--keepsake-text h3 { font-size: 1.8rem; }
.package-feature-content--keepsake-text .package-tagline { font-size: 1rem; }
.package-feature-content--keepsake-text .package-list { text-align: center; }
.package-feature-content--keepsake-text .package-list li {
  font-size: 1rem;
  padding-left: 0;
}
.package-feature-content--keepsake-text .package-list li::before { display: none; }
.package-feature-content--keepsake-text .btn:hover {
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 25%,
    rgba(255,255,255,1) 75%,
    rgba(255,255,255,0) 100%);
  border-color: transparent;
  color: var(--fg-black);
}

/* EXPERIMENTAL: same centered/enlarged-then-reduced text treatment,
   applied to Timeless Selection. Remove this block + the
   --timeless-text classes in page-weddings.php to revert. */
.package-feature--timeless-text { justify-content: center; }
.package-feature-content--timeless-text {
  width: 66.667%;
  max-width: none;
  padding: clamp(2.5rem, 4vw, 3.5rem) 3rem;
  text-align: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.package-feature-content--timeless-text::before {
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to right,
    rgba(25,25,23,0) 0%,
    rgba(25,25,23,0.65) 18%,
    rgba(25,25,23,0.65) 82%,
    rgba(25,25,23,0) 100%);
}
.package-feature-content--timeless-text h3 { font-size: 1.8rem; }
.package-feature-content--timeless-text .package-tagline { font-size: 1rem; }
.package-feature-content--timeless-text .package-list { text-align: center; }
.package-feature-content--timeless-text .package-list li {
  font-size: 1rem;
  padding-left: 0;
}
.package-feature-content--timeless-text .package-list li::before { display: none; }
.package-feature-content--timeless-text .btn:hover {
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 25%,
    rgba(255,255,255,1) 75%,
    rgba(255,255,255,0) 100%);
  border-color: transparent;
  color: var(--fg-black);
}

/* EXPERIMENTAL: 5-photo strip + centered/enlarged-then-reduced text
   treatment, applied to The Vow. Remove this block + the --vow /
   --vow-text classes in page-weddings.php to revert. */
.package-feature-photo--vow {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.package-feature--vow-text { justify-content: center; }
.package-feature-content--vow-text {
  width: 66.667%;
  max-width: none;
  padding: clamp(2.5rem, 4vw, 3.5rem) 3rem;
  text-align: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.package-feature-content--vow-text::before {
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to right,
    rgba(25,25,23,0) 0%,
    rgba(25,25,23,0.65) 18%,
    rgba(25,25,23,0.65) 82%,
    rgba(25,25,23,0) 100%);
}
.package-feature-content--vow-text h3 { font-size: 1.8rem; }
.package-feature-content--vow-text .package-tagline { font-size: 1rem; }
.package-feature-content--vow-text .package-list { text-align: center; }
.package-feature-content--vow-text .package-list li {
  font-size: 1rem;
  padding-left: 0;
}
.package-feature-content--vow-text .package-list li::before { display: none; }
.package-feature-content--vow-text .btn:hover {
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 25%,
    rgba(255,255,255,1) 75%,
    rgba(255,255,255,0) 100%);
  border-color: transparent;
  color: var(--fg-black);
}

/* EXPERIMENTAL: 3-photo strip + centered/enlarged-then-reduced text
   treatment, applied to Engagement Sessions. Remove this block + the
   --eng / --eng-text classes in page-weddings.php to revert. */
.package-feature-photo--eng {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.package-feature--eng-text { justify-content: center; }
.package-feature-content--eng-text {
  width: 66.667%;
  max-width: none;
  padding: clamp(2.5rem, 4vw, 3.5rem) 3rem;
  text-align: center;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.package-feature-content--eng-text::before {
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to right,
    rgba(25,25,23,0) 0%,
    rgba(25,25,23,0.65) 18%,
    rgba(25,25,23,0.65) 82%,
    rgba(25,25,23,0) 100%);
}
.package-feature-content--eng-text .eyebrow { text-align: center; }
.package-feature-content--eng-text h3 { font-size: 1.8rem; }
.package-feature-content--eng-text p { font-size: 1rem; }
.package-feature-content--eng-text .package-list { text-align: center; }
.package-feature-content--eng-text .package-list li {
  font-size: 1rem;
  padding-left: 0;
}
.package-feature-content--eng-text .package-list li::before { display: none; }
.package-feature-content--eng-text .btn:hover {
  background: linear-gradient(to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,1) 25%,
    rgba(255,255,255,1) 75%,
    rgba(255,255,255,0) 100%);
  border-color: transparent;
  color: var(--fg-black);
}

.engagement-feature .eyebrow { display: block; margin-bottom: 0.6rem; }
.engagement-feature .package-feature-content p { color: var(--fg-white); margin-bottom: 1.2rem; }

.wedding-cta .footer-email { display: block; text-align: center; }

@media (max-width: 800px) {
  .package-feature {
    min-height: 640px;
    align-items: flex-end;
    justify-content: flex-start;
  }
  /* The --intimate/--keepsake-text/--timeless-text/--vow-text/--eng-text
     variants each set their own align-self: stretch + display:flex +
     justify-content:center (desktop only, unscoped) so the text is
     vertically centered against the whole photo on desktop. On mobile we
     want that same idea -- text centered in its grey overlay box -- but
     with the box confined to a set height near the bottom of the taller
     photo above (align-self: flex-end) instead of stretching the full
     section. min-height gives the grey ::before overlay (which always
     matches this box's own height) real presence to center within; it
     grows automatically for packages with a longer list instead of
     clipping. Overriding align-self/display/justify-content here -- same
     specificity as those variant rules, later in the stylesheet, so it
     wins the same way the width/padding line already did for all 5
     packages. */
  .package-feature-content {
    width: 100%;
    padding: 1.5rem var(--gutter);
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 230px;
  }
  .package-feature-content::before { width: 100%; }
  .package-feature-photo {
    left: 0;
    right: 0;
    width: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }

  /* Smaller, more compact package text on mobile, across all 5 packages
     (Intimate's enlarged centered variant included) -- desktop sizes and
     spacing untouched. Tighter margins here shrink the text block so it
     fits within the lower third of the now-taller photo section above. */
  .package-feature-content h3,
  .package-feature-content--intimate h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
  .package-feature-content .package-tagline,
  .package-feature-content--intimate .package-tagline { font-size: 0.72rem; margin-bottom: 0.7rem; }
  .package-feature-content .package-list,
  .package-feature-content--intimate .package-list { margin-bottom: 0.9rem; }
  .package-feature-content .package-list li,
  .package-feature-content--intimate .package-list li { font-size: 0.78rem; margin-bottom: 0.4em; }

  /* Intimate Affection strip, mobile only: shift the middle photo so the
     bride's face is centered in her column instead of showing mostly dress
     fabric. Desktop crop is untouched. */
  .package-feature-photo--intimate .package-feature-photo-strip-item:nth-child(2) {
    background-position: 61% 50%;
  }

  /* Timeless Selection strip, mobile only: shift the rightmost photo so
     the bride is centered in her column. Desktop crop is untouched. */
  .package-feature-photo--timeless .package-feature-photo-strip-item:nth-child(3) {
    background-position: 75% 50%;
  }
}


/* =========================================================
   11. LIFESTYLE PAGE
   ========================================================= */
.lifestyle-hero { min-height: 100vh; }
.lifestyle-hero .hero-content { padding-bottom: 1.75rem; }

/* Mobile only: match the Weddings page's lifted hero text position. */
@media (max-width: 800px) {
  .lifestyle-hero .hero-content { padding-bottom: 6rem; }
}
.lifestyle-hero .hero-title {
  color: var(--fg-gold);
  display: inline-block;
  width: fit-content;
  padding: 0.2em 1.5em 0.2em 0.5em;
  margin-left: -0.5em;
  background: linear-gradient(to right, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.4) 55%, rgba(20,20,20,0) 100%);
}
.lifestyle-hero .hero-subtitle {
  color: var(--fg-black);
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.65rem, 2.6vw, 1.05rem);
  margin-top: 0.5em;
  font-weight: 500;
}

.lifestyle-collage-photos {
  position: relative;
  height: 620px;
  width: 100%;
  margin: 0 auto;
  max-width: 560px;
}

/* Session features -- same full-bleed fade-photo pattern as the Weddings
   package panels, kept as its own class here so future edits to one page
   never ripple into the other. */
.session-feature {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.session-feature + .session-feature { margin-top: 3px; }
.session-feature-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: var(--fg-charcoal-light);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.session-feature-placeholder {
  color: var(--fg-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px dashed var(--fg-hairline);
  padding: 0.8em 1.4em;
  position: relative;
  z-index: 1;
}
.session-feature-content {
  position: relative;
  z-index: 2;
  width: min(46%, 480px);
  padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(2rem, 4vw, 3rem) 2rem;
}
.session-feature-content::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(320px, 45vw, 620px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to left,
    rgba(25,25,23,0.62) 0%,
    rgba(25,25,23,0.62) 45%,
    rgba(25,25,23,0) 100%);
}
.session-feature-content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.session-feature-content .session-tagline {
  color: var(--fg-gold);
  font-size: 0.85rem;
  font-style: italic;
  margin: 0 0 1.3rem;
  line-height: 1.5;
}
.session-feature-content .session-list {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
}
.session-feature-content .session-list li {
  color: var(--fg-white);
  font-size: 0.9rem;
  padding-left: 1.2em;
  position: relative;
  margin-bottom: 0.7em;
}
.session-feature-content .session-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 1px;
  background: var(--fg-gold);
}

@media (max-width: 800px) {
  .session-feature {
    min-height: 420px;
    align-items: flex-end;
    justify-content: flex-start;
  }
  .session-feature-content { width: 100%; padding: 0 var(--gutter) 2rem; }
  .session-feature-content::before { width: 100%; }
  .session-feature-photo {
    left: 0;
    right: 0;
    width: auto;
    background-size: cover;
    background-position: center top;
  }
  .lifestyle-hero { background-position: 65% 50%; }

  /* Content page only (page-id-78, its 2 service packages: Product
     Photography and Website Content) -- slightly smaller, more compact
     text. Scoped to this page's body class so the shared .session-feature
     component on the Lifestyle page is completely untouched. */
  body.page-id-78 .session-feature-content h3 {
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
  }
  body.page-id-78 .session-feature-content .session-tagline {
    font-size: 0.78rem;
    margin-bottom: 0.9rem;
  }
  body.page-id-78 .session-feature-content .session-list {
    margin-bottom: 1.1rem;
  }
  body.page-id-78 .session-feature-content .session-list li {
    font-size: 0.82rem;
    margin-bottom: 0.45em;
  }
}

/* Lifestyle collage: photos 7 & 8 (Life 3, Life 33) shifted to show more
   of the top of the frame rather than a dead-center crop. */
.polaroid-7 .polaroid-photo img,
.polaroid-8 .polaroid-photo img {
  object-position: center top;
}

/* Life 33 (polaroid-8) sat over the faces in Life 18 (polaroid-4) below
   it -- shift it left on the Lifestyle page only, the shared .polaroid-8
   rule (also used by Weddings) stays untouched. */
.lifestyle-collage-photos .polaroid-8 { left: -9%; }

/* Couples session panel: 5 photos shown as vertical slivers side by side
   instead of one background photo -- the shared ::after fade overlay on
   .session-feature-photo still sits on top of all 5 and fades into the
   text exactly as the single-photo panels do. */
.session-feature-photo--strip {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  background: none;
}
.session-feature-strip {
  flex: 1 1 20%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

@media (max-width: 800px) {
  .session-feature-photo--strip { flex-direction: column; }
  .session-feature-strip { flex-basis: 20%; }
}


/* ==========================================================================
   12. PORTRAITS PAGE
   ========================================================================== */

.portrait-hero { min-height: 100vh; }
.portrait-hero .hero-content { padding-bottom: 1.75rem; }

/* Mobile only: match the Weddings page's lifted hero text position. */
@media (max-width: 800px) {
  .portrait-hero .hero-content { padding-bottom: 6rem; }
}

.portrait-hero .hero-title {
  color: var(--fg-gold);
  display: inline-block;
  width: fit-content;
  padding: 0.2em 1.5em 0.2em 0.5em;
  margin-left: -0.5em;
  background: linear-gradient(to right, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.4) 55%, rgba(20,20,20,0) 100%);
}


/* Main portrait photo sits in its own layer, scoped to this page only, so
   the black-and-white filter never touches the hero text on top of it. */
.portrait-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);
}

/* Photo collage replaced with vertical strips (same pattern as the
   Couples panel on Lifestyle) instead of the polaroid layout -- fills the
   same .portrait-collage-photos box. */

/* Personal Branding photo (p-02): the subject's face sits near the top of
   the source photo, which a center crop was cutting off -- shift the crop
   window up to reveal it. Scoped to this one panel's photo only. */
/* Plain side-by-side split (no diagonal): matches the Headshots panel --
   each photo gets its own half of the panel, full height, divided by a
   hairline. P02 and P03 both have their faces near the top of frame, so
   a shared top-aligned crop covers both without per-photo tuning. */
.portrait-feature-photo--branding {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.portrait-feature-photo--branding .portrait-collage-strip-item {
  flex: 1 1 0%;
  height: 100%;
  background-position: center top;
  border-right: 1px solid var(--fg-black);
}
.portrait-feature-photo--branding .portrait-collage-strip-item:last-child {
  border-right: none;
}

/* P17 (Personal Branding panel) is a tight, headless crop with a lot of
   empty floor at the bottom of frame -- zoom in slightly and shift the
   visible window down so the hands-on-knees detail is better framed.
   Same values work at every breakpoint since the vertical crop math here
   doesn't depend on the box's width, and the subject is horizontally
   centered in the source photo already. */
.portrait-feature-photo--branding .portrait-collage-strip-item.portrait-collage-strip-item--p17 {
  background-size: auto 130%;
  background-position: 50% 55%;
}
.portrait-feature-photo--branding .portrait-collage-strip-item.portrait-collage-strip-item--p14 {
  background-position: 79% top;
}
@media (max-width: 800px) {
  .portrait-feature-photo--branding .portrait-collage-strip-item.portrait-collage-strip-item--p14 {
    background-position: 70% top;
  }
}
/* Plain side-by-side split (no diagonal): each photo gets its own half of
   the panel, full height, divided by a hairline -- same shape as the
   Weddings multi-photo strips. Both P01 and P09 have their faces near
   the top of frame, so a shared top-aligned crop covers both. */
.portrait-feature-photo--headshots {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.portrait-feature-photo--headshots .portrait-collage-strip-item {
  flex: 1 1 0%;
  height: 100%;
  background-position: center top;
  border-right: 1px solid var(--fg-black);
}
.portrait-feature-photo--headshots .portrait-collage-strip-item:last-child {
  border-right: none;
}

/* Move P11 and P02's faces toward the center of their own headshot slot --
   these two photos have their face off-center horizontally, so the shared
   'center top' crop above cuts them off; override just the horizontal
   position for these two, keeping the top vertical anchor. Desktop and
   mobile values differ because the slot's width:height ratio changes the
   visible crop window. */
.portrait-feature-photo--headshots .portrait-collage-strip-item.portrait-collage-strip-item--p11 { background-position: 73% top; }
.portrait-feature-photo--headshots .portrait-collage-strip-item.portrait-collage-strip-item--p02 { background-position: 82% top; }
@media (max-width: 800px) {
  .portrait-feature-photo--headshots .portrait-collage-strip-item.portrait-collage-strip-item--p11 { background-position: 64% top; }
  .portrait-feature-photo--headshots .portrait-collage-strip-item.portrait-collage-strip-item--p02 { background-position: 69% top; }
}

/* Widen the photo strip block: give the photo column more of the grid
   (scoped to Portraits only -- the shared .wedding-collage-layout used by
   Weddings/Lifestyle stays untouched), and let the strip fill it instead
   of the shared 560px collage cap. */
/* Widened further and given more room than the shared 1240px container so
   each of the 6 strip photos gets meaningfully more pixels -- the whole
   point of a face-strip gallery is showing enough of each face. */
.container.portrait-collage-layout { max-width: 1680px; }

/* Stacked layout: intro copy sits above the photo strip (instead of
   side-by-side in a grid), and the strip itself is centered on the page
   rather than pushed into a wide right-hand column. Overrides the shared
   .wedding-collage-layout grid -- scoped to Portraits only. */
.portrait-collage-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 5vw, 3rem);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.portrait-collage-layout .wedding-collage-copy {
  max-width: 900px;
  text-align: center;
}
.portrait-collage-layout .wedding-collage-copy h2 {
  max-width: none;
}
.portrait-collage-layout .wedding-collage-copy .entry-content {
  max-width: 85ch;
  margin: 0 auto;
}
.portrait-collage-layout .portrait-collage-photos.portrait-collage-strip {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}
.portrait-collage-strip-item.portrait-collage-strip-item--p08 { background-position: 27% center; }
.portrait-collage-strip-item.portrait-collage-strip-item--p06 { background-position: 60% center; }
.portrait-collage-strip-item.portrait-collage-strip-item--p12 { background-position: 65% center; }
.portrait-collage-photos.portrait-collage-strip {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  max-width: none;
  width: 100%;
}
.portrait-collage-strip-item {
  flex: 1 1 20%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--fg-charcoal-light);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--fg-black);
}
.portrait-collage-strip-item:last-child { border-right: none; }
.portrait-collage-strip-placeholder {
  color: var(--fg-muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px dashed var(--fg-hairline);
  padding: 0.5em 0.35em;
  text-align: center;
}

@media (max-width: 800px) {
  .portrait-collage-photos.portrait-collage-strip { flex-direction: column; height: auto; }

  /* Show each photo in full instead of cropping it into a short strip band.
     Each item's box is switched to match its own photo's real aspect ratio,
     so the existing background-size: cover shows the whole image with
     nothing cut off (cover only crops when the box's proportions differ
     from the image's -- here they now match exactly). Desktop keeps the
     short side-by-side cropped strip with its own tuned crops untouched --
     this entire block only runs at or below 800px wide. */
  .portrait-collage-strip-item {
    flex: none;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--fg-black);
  }
  .portrait-collage-strip-item:last-child { border-bottom: none; }
  .portrait-collage-photos.portrait-collage-strip .portrait-collage-strip-item:nth-child(1) { aspect-ratio: 1024 / 683; }
  .portrait-collage-photos.portrait-collage-strip .portrait-collage-strip-item:nth-child(2) { aspect-ratio: 683 / 1024; }
  .portrait-collage-photos.portrait-collage-strip .portrait-collage-strip-item:nth-child(3) { aspect-ratio: 863 / 1024; }
  .portrait-collage-photos.portrait-collage-strip .portrait-collage-strip-item:nth-child(4) { aspect-ratio: 1024 / 683; }
  .portrait-collage-photos.portrait-collage-strip .portrait-collage-strip-item:nth-child(5) { aspect-ratio: 683 / 1024; }
  .portrait-collage-photos.portrait-collage-strip .portrait-collage-strip-item:nth-child(6) { aspect-ratio: 1024 / 683; }
}.portrait-hero .hero-subtitle {
  color: var(--fg-black);
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.65rem, 2.6vw, 1.05rem);
  margin-top: 0.5em;
  font-weight: 500;
}

.portrait-collage-photos {
  position: relative;
  height: 620px;
  width: 100%;
  margin: 0 auto;
  max-width: 560px;
}

/* Session-type panels -- same pattern as the Lifestyle page's
   .session-feature: full-width photo, no darkening overlay on the photo
   itself, and a decoupled right-to-left grey ::before backdrop behind the
   content box so the text stays readable while more of the photo shows
   through. Kept as its own class family so edits here never touch
   Lifestyle or Weddings. */
.portrait-feature {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}
.portrait-feature + .portrait-feature { margin-top: 3px; }

.portrait-feature-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: var(--fg-charcoal-light);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait-feature-placeholder {
  color: var(--fg-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px dashed var(--fg-hairline);
  padding: 0.8em 1.4em;
  position: relative;
  z-index: 1;
}

.portrait-feature-content {
  position: relative;
  z-index: 2;
  width: min(46%, 480px);
  padding: clamp(2rem, 4vw, 3rem) 2rem clamp(2rem, 4vw, 3rem) var(--gutter);
}
.portrait-feature-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: clamp(320px, 45vw, 620px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to right,
    rgba(25,25,23,0.62) 0%,
    rgba(25,25,23,0.62) 45%,
    rgba(25,25,23,0) 100%);
}

.portrait-feature-content h3 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.portrait-feature-content .portrait-tagline { color: var(--fg-gold); font-size: 0.85rem; font-style: italic; margin: 0 0 1.3rem; line-height: 1.5; }
.portrait-feature-content .portrait-list { list-style: none; margin: 0 0 1.8rem; padding: 0; }
.portrait-feature-content .portrait-list li {
  color: var(--fg-white);
  font-size: 0.9rem;
  padding-left: 1.2em;
  position: relative;
  margin-bottom: 0.7em;
}
.portrait-feature-content .portrait-list li::before {
  content: ''; position: absolute; left: 0; top: 0.55em; width: 6px; height: 1px; background: var(--fg-gold);
}

/* Enquire buttons on the Portraits page: match the Weddings-page treatment --
   keep only the top/bottom hairlines, drop the left/right verticals, and
   thicken the remaining lines slightly. */
.portrait-feature-content .btn {
  border-left: none;
  border-right: none;
  border-top-width: 2px;
  border-bottom-width: 2px;
}

@media (max-width: 800px) {
  .portrait-feature { min-height: 420px; align-items: flex-end; justify-content: flex-start; }
  .portrait-feature-content { width: 100%; padding: 0 var(--gutter) 2rem; }
  .portrait-feature-content::before { width: 100%; }
  .portrait-feature-photo { left: 0; right: 0; width: auto; background-size: cover; background-position: center top; }
}

/* Headshots & Branding photo panels are full-bleed with a fixed 480px
   height, so on a wide screen the box gets much wider relative to its
   height than the ~1425px width these face crops were tuned against --
   "cover" then scales the image up further and crops tighter, pushing
   the faces out of frame ("too zoomed in, can't see faces"). Keep the
   box's aspect ratio roughly constant above tablet width so the crop
   stays consistent regardless of screen width. */
@media (min-width: 801px) {
  .portrait-feature:has(> .portrait-feature-photo--headshots),
  .portrait-feature:has(> .portrait-feature-photo--branding) {
    min-height: 34vw;
  }
}

/* Headshots: text centered horizontally like the Weddings multi-photo
   panels (spanning from the center of the left photo to the center of
   the right photo, 25%-75% for a 2-photo split = 50% wide), but bottom-
   aligned rather than vertically centered/stretched -- the content box
   sits at its natural height at the bottom edge, not spanning the full
   photo height. */
@media (min-width: 801px) {
  .portrait-feature:has(> .portrait-feature-photo--headshots) {
    justify-content: center;
    align-items: flex-end;
  }
  .portrait-feature:has(> .portrait-feature-photo--headshots) .portrait-feature-content {
    width: 50%;
    max-width: none;
    padding: 0.55rem 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .portrait-feature:has(> .portrait-feature-photo--headshots) .portrait-feature-content::before {
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(to right,
      rgba(25,25,23,0) 0%,
      rgba(25,25,23,0.65) 18%,
      rgba(25,25,23,0.65) 82%,
      rgba(25,25,23,0) 100%);
  }
  .portrait-feature:has(> .portrait-feature-photo--headshots) .portrait-feature-content h3 {
    font-size: 1.15rem;
    margin-bottom: 0.15rem;
    line-height: 1.1;
  }
  .portrait-feature:has(> .portrait-feature-photo--headshots) .portrait-feature-content .portrait-tagline {
    font-size: 0.74rem;
    line-height: 1.15;
    margin: 0 0 0.25rem;
  }
  .portrait-feature:has(> .portrait-feature-photo--headshots) .portrait-feature-content .portrait-list {
    text-align: center;
    margin: 0 0 0.4rem;
  }
  .portrait-feature:has(> .portrait-feature-photo--headshots) .portrait-feature-content .portrait-list li {
    font-size: 0.74rem;
    padding-left: 0;
    margin-bottom: 0.12em;
    line-height: 1.1;
  }
  .portrait-feature:has(> .portrait-feature-photo--headshots) .portrait-feature-content .portrait-list li::before {
    display: none;
  }
  .portrait-feature:has(> .portrait-feature-photo--headshots) .portrait-feature-content .btn:hover {
    background: linear-gradient(to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,1) 25%,
      rgba(255,255,255,1) 75%,
      rgba(255,255,255,0) 100%);
    border-color: transparent;
    color: var(--fg-black);
  }
}

/* Personal Branding: same treatment as Headshots -- text centered
   horizontally between the two photo centers, bottom-aligned, and
   compact enough that the backdrop only covers the lower third. */
@media (min-width: 801px) {
  .portrait-feature:has(> .portrait-feature-photo--branding) {
    justify-content: center;
    align-items: flex-end;
  }
  .portrait-feature:has(> .portrait-feature-photo--branding) .portrait-feature-content {
    width: 50%;
    max-width: none;
    padding: 0.55rem 3rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .portrait-feature:has(> .portrait-feature-photo--branding) .portrait-feature-content::before {
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(to right,
      rgba(25,25,23,0) 0%,
      rgba(25,25,23,0.65) 18%,
      rgba(25,25,23,0.65) 82%,
      rgba(25,25,23,0) 100%);
  }
  .portrait-feature:has(> .portrait-feature-photo--branding) .portrait-feature-content h3 {
    font-size: 1.15rem;
    margin-bottom: 0.15rem;
    line-height: 1.1;
  }
  .portrait-feature:has(> .portrait-feature-photo--branding) .portrait-feature-content .portrait-tagline {
    font-size: 0.74rem;
    line-height: 1.15;
    margin: 0 0 0.25rem;
  }
  .portrait-feature:has(> .portrait-feature-photo--branding) .portrait-feature-content .portrait-list {
    text-align: center;
    margin: 0 0 0.4rem;
  }
  .portrait-feature:has(> .portrait-feature-photo--branding) .portrait-feature-content .portrait-list li {
    font-size: 0.74rem;
    padding-left: 0;
    margin-bottom: 0.12em;
    line-height: 1.1;
  }
  .portrait-feature:has(> .portrait-feature-photo--branding) .portrait-feature-content .portrait-list li::before {
    display: none;
  }
  .portrait-feature:has(> .portrait-feature-photo--branding) .portrait-feature-content .btn:hover {
    background: linear-gradient(to right,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,1) 25%,
      rgba(255,255,255,1) 75%,
      rgba(255,255,255,0) 100%);
    border-color: transparent;
    color: var(--fg-black);
  }
}

/* Quentin script font (self-hosted) - free for commercial use, DaFont, by Hermansyah */
@font-face {
  font-family: 'Quentin';
  src: url('assets/fonts/Quentin.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.script-accent {
  font-family: 'Quentin', cursive;
  color: var(--fg-gold);
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}


/* ==========================================================================
   13. CONTENT PAGE
   ========================================================================== */

.content-hero .hero-title {
  display: inline-block;
  width: fit-content;
  padding: 0.2em 1.5em 0.2em 0.5em;
  margin-left: -0.5em;
  background: linear-gradient(to right, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.4) 55%, rgba(20,20,20,0) 100%);
}

.content-hero .hero-subtitle {
  color: var(--fg-gold);
  font-weight: 700;
}


/* =========================================================
   14. FAQ PAGE
   ========================================================= */
.faq-hero {
  position: relative;
  overflow: hidden;
  text-align: left;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 0;
}
.faq-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center 20%;
  filter: grayscale(100%);
}
.faq-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  padding: 0 var(--gutter) 4.5rem;
}
.faq-hero h1 {
  display: inline-block;
  width: fit-content;
  padding: 0.2em 1.5em 0.2em 0.5em;
  margin-left: -0.5em;
  background: linear-gradient(to right, rgba(20,20,20,0.6) 0%, rgba(20,20,20,0.4) 55%, rgba(20,20,20,0) 100%);
}
.faq-hero .page-hero-sub {
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 780px) {
  .faq-hero-inner {
    background: rgba(11,11,10,0.62);
    padding: 1.5rem var(--gutter);
    padding-bottom: 6rem;
  }
  .faq-hero .page-hero-sub {
    color: var(--fg-white);
  }
}


/* ===== About page (hero split / quote / philosophy / CTA) ===== */
.about-hero {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.about-hero .container {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 2.75rem);
}
.about-hero-photo {
  position: relative;
  width: 100%;
}
.about-hero-photo img { width: 100%; height: auto; display: block; }
.about-hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,10,0) 45%, rgba(11,11,10,0.88) 100%);
}
.about-hero-photo-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.about-hero-photo-text .eyebrow { margin-bottom: 0.8rem; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
.about-hero-photo-text h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 0.4rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
.about-hero-subline {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--fg-muted);
  display: block;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.about-hero-copy p { color: var(--fg-muted); font-size: 1.02rem; }
.about-hero-copy p:last-of-type { margin-bottom: 0; }
.about-hero-copy { max-width: 800px; }

.about-quote {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center 30%;
}
.about-quote::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,10,0.55) 0%, rgba(11,11,10,0.72) 100%);
}
.about-quote-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: 0 var(--gutter);
}
.about-quote-inner blockquote {
  margin: 0 0 1.2rem;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.35;
  color: var(--fg-white);
}
.about-quote-inner cite {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  color: var(--fg-gold);
}

.about-philosophy {
  padding: clamp(4rem, 8vw, 7rem) 0;
  background: var(--fg-charcoal);
}
.about-philosophy .container {
  max-width: 720px;
  text-align: center;
}
.about-philosophy h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 1.4rem; }
.about-philosophy p { color: var(--fg-muted); font-size: 1.02rem; }

.about-cta {
  position: relative;
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-size: cover;
  background-position: center 38%;
}
.about-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,10,0.45) 0%, rgba(11,11,10,0.55) 40%, rgba(11,11,10,0.92) 100%);
}
.about-cta-inner {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter);
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.about-cta-inner .about-cta-meta {
  color: var(--fg-muted);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin-bottom: 1.1rem;
  display: block;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.about-cta-inner .eyebrow { margin-bottom: 0.8rem; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
.about-cta-inner h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  max-width: 20ch;
  margin: 0 auto 1.6rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55);
}