/*
Theme Name: Élevé Balloons
Theme URI: https://eleveballoons.co
Author: Élevé Balloons
Description: Custom theme for Élevé Balloons — boutique balloon design & installation. Classic/hybrid PHP theme built from the approved "Version 1.0" static design prototype.
Version: 1.0.0
Text Domain: eleve-balloons
Requires PHP: 7.4
*/

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Manrope:wght@300;400;500;600;700&display=swap');

:root{
  --cream: #FFFDF9;
  --cream-2: #FBF2E5;
  --white: #FFFFFF;
  --ink: #201C18;
  --ink-soft: #8B8178;
  --rose: #E8598A;
  --rose-deep: #C93E6E;
  --blush: #F9C9DA;
  --blush-soft: #FDEEF3;
  --gold: #F2994A;
  --gold-soft: #FBDAAE;
  --sage: #2FAFA0;
  --sky: #4FB4DD;
  --line: rgba(32,28,24,0.12);
  --line-strong: rgba(32,28,24,0.22);
  --shadow: 0 20px 44px rgba(201,62,110,.16);

  --serif: 'Bricolage Grotesque', -apple-system, sans-serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; font-weight:400; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.1;
  margin:0 0 22px;
  color:var(--ink);
  letter-spacing:-0.3px;
}
h1{ font-size:clamp(42px, 7vw, 88px); font-weight:700; letter-spacing:-0.5px; }
h2{ font-size:clamp(30px, 4vw, 50px); letter-spacing:-0.4px; }
h3{ font-size:25px; font-weight:600; }
p{ margin:0 0 16px; color:var(--ink-soft); font-weight:400; max-width:52ch; }
.lede{ font-size:19px; line-height:1.65; color:var(--ink); }

.container{ max-width:1220px; margin:0 auto; padding:0 40px; }
.section{ padding:140px 0; }
.section--tight{ padding:100px 0; }
.section--panel{ background:var(--cream-2); }
.section--rose{ background: linear-gradient(180deg, var(--blush-soft), var(--cream)); }
.section.section--flush-top{ padding-top:0; }

/* General page template — plain editor content (anything that isn't a
   full-width block <section>) sits in the site's container width. */
.general-content{ padding-bottom:40px; }
.general-content.has-hero > section:first-child{ padding-top:0; }
.general-content:not(.has-hero){ padding-top:160px; }
.general-content > :not(section){ max-width:1220px; margin-left:auto; margin-right:auto; padding-left:40px; padding-right:40px; box-sizing:border-box; }
.general-content > :not(section):not(:last-child){ margin-bottom:1.1em; }
@media (max-width:900px){ .general-content > :not(section){ padding-left:22px; padding-right:22px; } }

.mark{
  font-family:var(--sans);
  font-weight:500;
  font-size:13px;
  letter-spacing:1.5px;
  color:var(--rose-deep);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
/* Every mark (tag) gets 14px of space before whatever follows it. */
.mark:not(:last-child){ margin-bottom:14px; }
.mark::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--gold); display:inline-block;
}

/* =========================================================
   PRODUCT QUICK-VIEW MODAL
========================================================= */
.price-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.btn--ghost{ border-color:var(--line-strong); color:var(--ink-soft); }
.btn--ghost:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

.modal-overlay{
  position:fixed; inset:0; z-index:1500;
  background:rgba(32,28,24,.55);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
}
.modal-overlay.is-open{ opacity:1; pointer-events:auto; }
.modal{
  background:var(--white);
  border-radius:24px;
  max-width:760px; width:100%; max-height:88vh; overflow-y:auto;
  position:relative;
  box-shadow:0 30px 70px rgba(32,28,24,.28);
  transform:translateY(-60px);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.modal-overlay.is-open .modal{ transform:translateY(0); }
/* Fade slider — stacked-absolute + opacity-crossfade, scoped under its
   own .modal-gallery-* names. */
.modal-gallery{
  position:relative; height:320px;
  border-radius:24px 24px 0 0; overflow:hidden;
  background:var(--ink-soft);
}
.modal-gallery-track{ position:absolute; inset:0; }
.modal-gallery-slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.modal-gallery-slide.is-active{ opacity:1; }
.modal-gallery-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.modal-gallery-nav,
.modal-gallery-dots{ display:none; }
.modal-gallery.has-multiple .modal-gallery-nav{
  display:flex; position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,253,249,.9); border:none; padding:0;
  align-items:center; justify-content:center;
  cursor:pointer; transition:background .25s ease;
}
.modal-gallery-nav:hover{ background:var(--white); }
.modal-gallery-nav svg{ width:16px; height:16px; color:var(--ink); }
.modal-gallery-prev{ left:16px; }
.modal-gallery-next{ right:16px; }
.modal-gallery.has-multiple .modal-gallery-dots{
  display:flex; position:absolute; left:0; right:0; bottom:16px; z-index:3;
  justify-content:center; gap:8px;
}
.modal-gallery-dots .dot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(255,253,249,.5); cursor:pointer; border:none; padding:0;
  transition:background .25s ease, transform .25s ease;
}
.modal-gallery-dots .dot.is-active{ background:var(--white); transform:scale(1.25); }
.modal-close{
  position:absolute; top:20px; right:20px; z-index:2;
  width:42px; height:42px; border-radius:50%;
  background:#fff; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 8px 20px rgba(32,28,24,.18);
  transition:background .25s ease, transform .25s ease;
}
/* Same rotate-on-hover as the Portfolio project overlay's close button
   (.project-overlay-close below) — background shift adapted for this
   button's light (white-on-cream) context instead of that one's dark
   (translucent-on-ink) one. */
.modal-close:hover{ background:var(--cream-2); transform:rotate(90deg); }
.modal-close span{ position:absolute; width:16px; height:2px; border-radius:2px; background:var(--ink); }
.modal-close span:first-child{ transform:rotate(45deg); }
.modal-close span:last-child{ transform:rotate(-45deg); }
.modal-body{ padding:42px; }
.modal-body h3{ font-size:28px; margin-bottom:8px; }
.modal-body .price-amount{ margin-bottom:18px; }
.modal-body ul{ display:flex; flex-direction:column; gap:9px; margin:22px 0 28px; }
.modal-body li{ font-size:14.5px; color:var(--ink-soft); position:relative; padding-left:20px; }
.modal-body li::before{ content:'●'; font-size:7px; position:absolute; left:0; top:7px; color:var(--rose); }
body.modal-open{ overflow:hidden; }
@media (max-width:600px){
  .modal-gallery{ height:220px; }
  .modal-gallery-nav{ width:34px; height:34px; }
  .modal-body{ padding:30px; }
  .price-actions{ justify-content:flex-start; }
}

/* Scroll-in reveal — H1 and H2 titles only. Scoped to headings so no other
   element can animate in, even if it carries the class. */
h1.reveal, h2.reveal{
  opacity:0;
  translate:0 32px;
  transition:opacity 1.3s cubic-bezier(.16,.8,.3,1), translate 1.3s cubic-bezier(.16,.8,.3,1);
}
h1.reveal.is-visible, h2.reveal.is-visible{ opacity:1; translate:0 0; }
.reveal-delay-1{ transition-delay:.2s; }
.reveal-delay-2{ transition-delay:.4s; }
.reveal-delay-3{ transition-delay:.6s; }

.step-card.reveal{
  translate:0 40px;
  transition:
    opacity 1.8s cubic-bezier(.19,1,.22,1),
    translate 1.8s cubic-bezier(.19,1,.22,1),
    transform .35s cubic-bezier(.25,1.05,.4,1),
    box-shadow .3s ease;
}
.step-card.reveal-delay-1{ transition-delay:.35s,.35s,0s,0s; }
.step-card.reveal-delay-2{ transition-delay:.7s,.7s,0s,0s; }
.step-card.reveal-delay-3{ transition-delay:1.05s,1.05s,0s,0s; }
.step-card.reveal.is-visible{ translate:0 0; }
@media (prefers-reduced-motion:reduce){
  h1.reveal, h2.reveal{ opacity:1; translate:0 0; transition:none; }
}

/* Buttons — rounded, balloon-inspired. Fixed height (not padding-
   derived) so every button variant lines up at the same 52px,
   regardless of what's inside (plain text, or an arrow badge taller
   than a line of text) — see .btn--arrow below. */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:52px;
  padding:0 36px;
  border:1.5px solid var(--ink);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  border-radius:50px;
  background:transparent;
  cursor:pointer;
}
.btn:hover{ background:var(--ink); color:var(--white); }
.btn-text-wrap{ display:inline-block; overflow:hidden; position:relative; vertical-align:top; }
.btn-text{ display:block; transition:transform .55s cubic-bezier(.25,1,.33,1); }
.btn-text::after{
  content:attr(data-text);
  position:absolute; left:0; bottom:-120%;
  transition:transform .55s cubic-bezier(.25,1,.33,1);
}
.btn:hover .btn-text,
.mobile-overlay a:hover .btn-text{ transform:translateY(-100%); }
.btn:hover .btn-text::after,
.mobile-overlay a:hover .btn-text::after{ transform:translateY(-20%); }
@media (prefers-reduced-motion:reduce){
  .btn-text, .btn-text::after{ transition:none; }
}
.btn--solid{ background:var(--rose); border-color:var(--rose); color:var(--white); }
.btn--solid:hover{ background:var(--rose-deep); border-color:var(--rose-deep); }

/* Outline button with a circular arrow badge — "View More" on the
   Products pricing rows. The arrow reads as "opens something new"
   (it opens the quick-view modal, not literally a new tab/window,
   but the visual language is the same). Badge inverts on hover so it
   stays legible once the pill itself flips to a solid ink fill.
   Vertical centering (and matching every other .btn's 52px height)
   comes from the base .btn rule above — this only adjusts horizontal
   padding to fit the badge snugly. */
.btn--arrow{ padding:0 6px 0 28px; gap:16px; }
.btn--arrow .btn-arrow{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:var(--ink); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s ease, color .25s ease;
}
.btn--arrow .btn-arrow svg{ width:15px; height:15px; }
.btn--arrow:hover .btn-arrow{ background:var(--white); color:var(--ink); }

/* =========================================================
   HEADER / NAV
========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:26px 0;
  transition:padding .35s ease, background .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled{
  padding:16px 0;
  /* Frosted glass: translucent white over a blur of whatever scrolls
     behind it, with a hairline edge and a soft shadow. */
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 32px rgba(32,28,24,.08);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.is-scrolled{ background:rgba(255,255,255,.94); }
}
/* Plain menu links go full ink on the glass so they stay crisp over images. */
.site-header.is-scrolled .main-nav li:not(.btn) > a{ color:var(--ink); }
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
}
.brand{
  font-family:var(--serif);
  font-size:27px;
  font-weight:600;
  letter-spacing:0.3px;
  color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
}
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--rose); display:inline-block; }

.main-nav ul{ display:flex; gap:38px; align-items:center; }
.main-nav a{
  font-size:14px;
  font-weight:500;
  color:var(--ink-soft);
  position:relative;
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a.is-active,
.main-nav a.current-menu-item{ color:var(--ink); font-weight:600; }
.main-nav .btn{ padding:0; font-size:13px; }
.main-nav .btn:hover{ color:var(--white); }
.main-nav .btn > a,
.main-nav .btn > a:hover{ display:flex; align-items:center; height:100%; padding:0 26px; color:inherit; font-weight:inherit; }

.site-header.header--light:not(.is-scrolled) .brand{ color:#fff; }
.site-header.header--light:not(.is-scrolled) .main-nav a{ color:rgba(255,255,255,.85); }
.site-header.header--light:not(.is-scrolled) .main-nav a:hover,
.site-header.header--light:not(.is-scrolled) .main-nav a.is-active{ color:#fff; }
.site-header.header--light:not(.is-scrolled) .main-nav .btn{ border-color:rgba(255,255,255,.7); color:#fff; }
.site-header.header--light:not(.is-scrolled) .main-nav .btn:hover{ background:#fff; color:var(--ink); }
.site-header.header--light:not(.is-scrolled) .main-nav .btn > a,
.site-header.header--light:not(.is-scrolled) .main-nav .btn > a:hover{ color:inherit; }
.site-header.header--light:not(.is-scrolled) .menu-toggle span{ background:#fff; }

.menu-toggle{
  display:none;
  flex-direction:column; gap:6px;
  background:none; border:none; cursor:pointer;
  padding:6px; z-index:1300; position:relative;
}
.menu-toggle span{
  width:24px; height:2px; border-radius:2px; background:var(--ink); display:block;
  transition:transform .3s ease, opacity .3s ease;
}
.menu-toggle.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.mobile-overlay{
  position:fixed; inset:0; z-index:1200;
  background:var(--cream);
  display:flex; flex-direction:column;
  justify-content:center;
  padding:40px;
  transform:translateY(-100%);
  transition:transform .5s cubic-bezier(.6,0,.2,1);
}
.mobile-overlay.is-open{ transform:translateY(0); }
.overlay-close{
  position:absolute; top:26px; right:26px;
  width:46px; height:46px; border-radius:50%;
  background:var(--cream-2); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; padding:0;
}
.overlay-close:hover{ background:var(--blush-soft); border-color:var(--rose); }
.overlay-close span{
  position:absolute; width:18px; height:2px; border-radius:2px; background:var(--ink);
}
.overlay-close span:first-child{ transform:rotate(45deg); }
.overlay-close span:last-child{ transform:rotate(-45deg); }
.mobile-overlay ul{ display:flex; flex-direction:column; gap:4px; }
.mobile-overlay a{
  font-family:var(--serif);
  font-size:42px;
  font-weight:500;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  display:flex; align-items:center; gap:16px;
}
.mobile-overlay ul a:hover{ color:var(--rose); }
.mobile-overlay .overlay-foot{
  margin-top:46px; display:flex; gap:24px;
}
.mobile-overlay .overlay-foot a{
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  padding:0;
  border-bottom:none;
  display:inline-flex;
  gap:0;
  color:var(--ink-soft);
}
.mobile-overlay .overlay-foot a:hover{ color:var(--rose-deep); }

/* =========================================================
   HERO — photo with parallax
========================================================= */
.hero{
  position:relative;
  min-height:94vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:150px 0 90px;
  overflow:hidden;
}
.hero-parallax{
  position:absolute; inset:0; z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.hero-layer{
  position:absolute; left:0; right:0; top:0; width:100%; height:100%;
  will-change:transform;
}
.hero-layer--back{
  top:0; height:calc(100% + 120px);
  overflow:hidden;
}
.hero-photo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.scene-wash{
  position:absolute; inset:0;
  background: radial-gradient(ellipse 90% 70% at 50% 62%, rgba(255,249,242,.74), rgba(255,249,242,.18) 55%, transparent 72%);
}
.hero-overlay{ position:absolute; inset:0; background:var(--ink); }

/* Hero Gallery: up to 3 full-bleed photos, each slowly zooming and
   drifting (Ken Burns), crossfading into the next. Not a slider — no
   controls. .hero-slides isolates the slides' z-index from the wash and
   overlay that sit above them. The incoming slide fades in over the
   outgoing one (.is-prev, kept opaque underneath) so the background never
   shows through mid-fade. */
.hero-slides{ position:absolute; inset:0; isolation:isolate; overflow:hidden; }
.hero-slide{
  opacity:0; transition:opacity 1.6s ease;
  transform-origin:center; will-change:transform, opacity;
  --kb-x:2.5%; --kb-y:1.5%;
}
.hero-slide:nth-child(2){ --kb-x:-2.5%; --kb-y:-1.5%; }
.hero-slide:nth-child(3){ --kb-x:2%; --kb-y:-2%; }
.hero-slide.is-active{ opacity:1; z-index:2; }
.hero-slide.is-prev{ opacity:1; z-index:1; transition:none; }
.hero-slide.is-active, .hero-slide.is-prev{ animation:hero-kenburns 12s ease-out forwards; }
.hero-slides--single .hero-slide{ animation:hero-kenburns 20s ease-in-out infinite alternate; }
@keyframes hero-kenburns{
  from{ transform:scale(1.02) translate(0, 0); }
  to{ transform:scale(1.16) translate(var(--kb-x), var(--kb-y)); }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide, .hero-slides--single .hero-slide{ animation:none !important; }
}
.hero .container{ position:relative; z-index:1; }

@media (min-width:981px){
  .hero{ min-height:100vh; }
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.3fr 0.9fr;
  gap:60px;
  align-items:end;
}
.hero h1{ margin-bottom:0; }
/* With an image overlay on (dark), the hero text flips to light. */
.hero.has-overlay h1{ color:#fff; }
.hero.has-overlay .hero-copy p{ color:rgba(255,255,255,.88); }
.hero.has-overlay .mark{ color:#ffe3ea; }
.hero.has-overlay .mark::before{ background:#fff; }
.hero.has-overlay .scroll-cue{ color:rgba(255,255,255,.8); }
.hero.has-overlay .scroll-cue .stem{ border-color:rgba(255,255,255,.55); }
.hero-copy p{ margin-top:24px; }
.hero-actions{ display:flex; gap:18px; margin-top:36px; flex-wrap:wrap; }
.hero-actions .btn:not(.btn--solid){ background:#fff; border-color:#fff; }
.hero-actions .btn:hover:not(.btn--solid){ background:var(--ink); border-color:var(--ink); color:#fff; }

.scroll-cue{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--ink-soft); font-size:12px;
}
.scroll-cue .stem{
  width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line-strong);
  position:relative;
}
.scroll-cue .stem::after{
  content:''; position:absolute; top:5px; left:50%; width:4px; height:4px; margin-left:-2px;
  border-radius:50%; background:var(--rose);
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}
@media (prefers-reduced-motion:reduce){ .scroll-cue .stem::after{ animation:none; } }

/* =========================================================
   SECTION HEADS
========================================================= */
.head-row{
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
  margin-bottom:60px; flex-wrap:wrap;
}
.head-row h2{ margin-bottom:0; }
.head-row .head-side{ max-width:340px; padding-bottom:6px; }

/* =========================================================
   ABOUT — large founder photo (left) beside tag / heading / lead text
========================================================= */
.about{
  display:grid;
  grid-template-columns: 0.85fr 1fr;
  gap:80px;
  align-items:center;
}
.about--no-photo{ grid-template-columns:minmax(0, 760px); }
.about-photo{ margin:0; }
.about-photo img{
  display:block; width:100%; aspect-ratio:4 / 5; object-fit:cover;
  border-radius:28px;
  box-shadow:0 24px 54px rgba(32,28,24,.12);
}
.about-caption{ margin-top:20px; }
.about-caption--solo{ margin-top:32px; }
.about-caption h4{ font-family:var(--sans); font-size:17px; font-weight:600; margin:0 0 3px; }
.about-caption span{ display:block; font-size:14px; color:var(--ink-soft); }
.pull{
  font-family:var(--serif); font-size:clamp(24px,2.6vw,32px); font-weight:500; color:var(--ink);
  line-height:1.4; max-width:44ch;
}

/* =========================================================
   PHILOSOPHY — boxed section, full-bleed image, overlaid text
========================================================= */
.philosophy-box{
  position:relative; overflow:hidden;
  min-height:560px; display:flex; align-items:center;
  border-radius:32px; background:var(--ink); color:#fff;
}
.philosophy-box-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.philosophy-box-overlay{ position:absolute; inset:0; background:var(--ink); }
.philosophy-box-copy{
  position:relative; z-index:1;
  width:100%; max-width:780px; padding:90px 80px;
}
.philosophy-box h2{ color:#fff; font-size:clamp(30px,4vw,52px); margin-bottom:22px; }
.philosophy-box p{ color:rgba(255,255,255,.9); max-width:58ch; }
.philosophy-box p:last-child{ margin-bottom:0; }
.philosophy-box .mark{ color:#ffe3ea; }
.philosophy-box .mark::before{ background:#fff; }
@media (max-width:980px){
  .philosophy-box{ min-height:440px; border-radius:24px; }
  .philosophy-box-copy{ padding:56px 32px; }
}

/* =========================================================
   SWIPE STAGE — two adjacent .swipe-panel blocks (About + Philosophy)
   pinned to one screen; scrolling drives a sideways swipe from the first
   to the second, then the page continues. main.js wraps the pair in
   .swipe-stage and only adds .is-active on desktop, without reduced
   motion, and when both panels fit the screen — otherwise they simply
   stack as normal sections.
========================================================= */
.swipe-stage.is-active{ position:relative; height:260vh; }
.swipe-stage.is-active .swipe-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden; background:var(--cream);
}
.swipe-stage.is-active .swipe-track{ display:flex; height:100%; will-change:transform; }
.swipe-stage.is-active .swipe-panel{
  flex:0 0 100%; box-sizing:border-box; height:100vh;
  padding:92px 0 36px; display:flex; align-items:center; overflow:hidden;
}
.swipe-stage.is-active .swipe-panel > .container{ width:100%; transform-origin:center center; }
/* The swipe is the animation here, so titles inside a pinned stage are
   simply visible instead of also waiting on their own fade-in. */
.swipe-stage.is-active h1.reveal, .swipe-stage.is-active h2.reveal{
  opacity:1; translate:0 0; transition:none;
}
/* Keep the tall About portrait inside the pinned screen. */
.swipe-stage.is-active .about-photo{ width:fit-content; margin-inline:auto; }
.swipe-stage.is-active .about-photo img{ width:auto; height:min(609px, calc(100vh - 300px)); }

/* =========================================================
   MASONRY WORK GRID (Portfolio)
========================================================= */
.work-grid{ position:relative; }
.grid-sizer, .grid-item{ width:31.5%; }
.grid-item{
  position:relative; display:block; overflow:hidden;
  margin-bottom:18px; border-radius:18px;
  box-shadow:0 14px 30px rgba(32,28,24,.08);
  cursor:pointer;
}
.grid-item:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }
.grid-item .art{ display:block; width:100%; height:100%; transition:transform .6s ease; background-size:cover; background-position:center; }
.grid-item:hover .art{ transform:scale(1.06); }
.grid-item.h-sm .art{ height:220px; }
.grid-item.h-md .art{ height:300px; }
.grid-item.h-lg .art{ height:380px; }
.grid-item .shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(32,28,24,.55));
}
.grid-item .cap{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:20px; }
.grid-item .cap h4{ font-size:19px; margin-bottom:2px; color:#fff; }
.grid-item .cap span{ font-size:12px; color:#fbe7e1; }

.grid-item-expand{
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,253,249,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; translate:0 -6px;
  transition:opacity .35s ease, translate .35s ease, background .25s ease;
}
.grid-item-expand svg{ width:16px; height:16px; color:var(--ink); }
.grid-item:hover .grid-item-expand,
.grid-item:focus-visible .grid-item-expand{ opacity:1; translate:0 0; }
@media (max-width:900px){
  .grid-sizer, .grid-item{ width:48.5%; }
}
@media (max-width:560px){
  .grid-sizer, .grid-item{ width:100%; }
}
@media (hover:none){
  .grid-item-expand{ opacity:1; translate:0 0; }
}

/* =========================================================
   SELECTED WORK — horizontally scrolling theme cards. A native
   overflow-x scroller (swipe / trackpad / shift+wheel) with scroll
   snapping. The track bleeds to the right edge of the viewport (its left edge lines up with
   the container) so the next card peeks in and shows it scrolls.
========================================================= */
.selected-work{ overflow-x:clip; }
/* Larger title in every mode. */
.selected-work .head-row h2{ font-size:clamp(44px, 6.4vw, 96px); line-height:1.03; }
.stack-arrow{ display:none; }
.theme-track{
  --track-gutter:max(40px, calc((100vw - 1220px) / 2 + 40px));
  display:flex; gap:28px;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:6px var(--track-gutter) 14px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-left:var(--track-gutter);
  scrollbar-width:none;
}
.theme-track::-webkit-scrollbar{ display:none; }
.theme-track:focus-visible{ outline:2px solid var(--rose); outline-offset:-2px; border-radius:12px; }
.theme-card{
  flex:0 0 min(1000px, 82vw);
  scroll-snap-align:start;
  height:560px;
  display:grid; grid-template-columns:1fr 1fr;
  background:var(--white); border-radius:32px; overflow:hidden;
  transition:background .3s ease, color .3s ease;
}
.theme-card-copy{
  padding:70px 60px; display:flex; flex-direction:column; justify-content:center;
}
.theme-card-copy h3{ font-size:clamp(28px,3vw,40px); margin:0 0 8px; }
.theme-card-copy p{ max-width:42ch; margin-bottom:30px; }
.theme-card-cta{ align-self:flex-start; }

/* Per-card color — same 5-value Band/Card palette and reverse-contrast
   rules as .flex-block-inner[data-bg]/.stat-icon-card: Ink/Rose flip to
   light-on-dark via .is-dark, with the same accent colors used elsewhere
   (gold-soft mark on Ink, #ffe3ea mark on Rose). The color lives on the
   card itself so the frame around the inset photo is one uniform color. */
.theme-card[data-bg="white"]{ background:var(--white); }
.theme-card[data-bg="cream"]{ background:var(--cream-2); }
.theme-card[data-bg="blush"]{ background:var(--blush-soft); }
.theme-card[data-bg="ink"]{ background:var(--ink); }
.theme-card[data-bg="rose"]{ background:linear-gradient(135deg, var(--rose), var(--rose-deep)); }
.theme-card.is-dark{ color:#fff; }
.theme-card.is-dark h3{ color:#fff; }
.theme-card.is-dark p{ color:rgba(255,255,255,.78); }
.theme-card[data-bg="ink"] .mark{ color:var(--gold-soft); }
.theme-card[data-bg="ink"] .mark::before{ background:var(--gold-soft); }
.theme-card[data-bg="rose"] .mark{ color:#ffe3ea; }
.theme-card[data-bg="rose"] .mark::before{ background:#fff; }
.theme-card.is-dark .btn--arrow{ border-color:rgba(255,255,255,.5); color:#fff; }
.theme-card.is-dark .btn--arrow:hover{ background:#fff; color:var(--ink); }
.theme-card.is-dark .btn-arrow{ background:#fff; color:var(--ink); }
.theme-card.is-dark .btn--arrow:hover .btn-arrow{ background:var(--ink); color:#fff; }

.theme-card-media{ position:relative; }
/* Last item in the row/stack: the View Full Portfolio button. */
.theme-card--portfolio{ flex-basis:min(440px, 72vw); grid-template-columns:1fr; place-items:center; }
.theme-card-media .art{
  position:absolute; inset:28px;
  border-radius:24px;
  background-size:cover; background-position:center;
}

/* Pinned + overlapping mode (desktop). main.js adds .is-stacking and drives
   each card's position from the scroll: the title screen first, then the
   cards slide up one after another, each overlapping the last, with the
   portfolio card at the end. */
.selected-work.is-stacking{ position:relative; padding:0; overflow-x:visible; }
.is-stacking .stack-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden; background:inherit;
}
.is-stacking .stack-intro{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:100px 0 120px; text-align:center; will-change:transform, opacity;
}
.is-stacking .stack-intro .container{ width:100%; }
.is-stacking .stack-intro .head-row{ flex-direction:column; align-items:center; text-align:center; gap:28px; }
.is-stacking .stack-intro .head-row h2{ font-size:clamp(64px, 11vw, 170px); line-height:1; margin:0 auto; max-width:14ch; }
.is-stacking .stack-intro .head-side{ max-width:46ch; padding:0; }
.is-stacking .stack-intro .head-side p{ margin:0 auto; }
.is-stacking .stack-arrow{
  display:flex; align-items:center; justify-content:center;
  position:absolute; bottom:44px; left:50%; margin-left:-26px;
  width:52px; height:52px; border-radius:50%;
  border:1.5px solid var(--ink); color:var(--ink);
  animation:nudge 1.8s ease-in-out infinite;
}
.is-stacking .stack-arrow svg{ width:20px; height:20px; }
@keyframes nudge{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(7px); }
}
.is-stacking .stack-cards{ position:absolute; inset:0; padding:0; max-width:none; pointer-events:none; }
.is-stacking .theme-track{
  position:absolute; inset:0; margin:0; padding:0; display:block;
  overflow:visible; scroll-snap-type:none;
}
.is-stacking .theme-card{
  position:absolute; left:50%; top:calc(50% + 28px);
  width:min(1000px, 82vw); height:min(560px, calc(100vh - 200px));
  margin:0; transform:translate(-50%, -50%);
  box-shadow:0 -14px 44px rgba(32,28,24,.14);
  will-change:transform; pointer-events:auto;
}
.is-stacking .theme-card--portfolio{ width:min(520px, 70vw); }
.is-stacking h2.reveal{ opacity:1; translate:0 0; transition:none; }
@media (prefers-reduced-motion:reduce){ .is-stacking .stack-arrow{ animation:none; } }

@media (max-width:900px){
  .selected-work .head-row h2{ font-size:clamp(40px, 11vw, 64px); }
  .theme-track{ --track-gutter:22px; gap:16px; }
  .theme-card{ flex-basis:86vw; height:auto; grid-template-columns:1fr; }
  .theme-card-media{ height:260px; }
  .theme-card-media .art{ inset:16px; border-radius:18px; }
  .theme-card-copy{ padding:40px 28px; }
  .theme-card--portfolio{ flex-basis:70vw; min-height:200px; }
}

.grid-item-enter{
  opacity:0; transform:translateY(24px);
  transition:opacity .55s ease, transform .55s ease;
}
.grid-item-enter.is-in{ opacity:1; transform:translateY(0); }

.scroll-sentinel{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:50px 0 10px;
  color:var(--ink-soft); font-size:13px; letter-spacing:.4px;
  min-height:30px;
}
.loader-dot{
  width:8px; height:8px; border-radius:50%; background:var(--rose);
  display:inline-block; animation:loaderPulse 1s ease-in-out infinite;
}
@keyframes loaderPulse{
  0%,100%{ opacity:.3; transform:scale(.75); }
  50%{ opacity:1; transform:scale(1); }
}
.scroll-sentinel.is-done .loader-dot{ display:none; }

/* Filters (Portfolio taxonomy) */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.filters a{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:var(--ink-soft);
  border:1.5px solid var(--line); padding:9px 20px; border-radius:30px;
}
.filters a.is-active, .filters a:hover{ color:#fff; background:var(--rose); border-color:var(--rose); }
.filter-icon{ display:inline-flex; width:15px; height:15px; flex-shrink:0; }
.filter-icon svg{ width:100%; height:100%; }

/* Placeholder duotone art (used only if a Project has no photo yet) */
.art-a{ background:linear-gradient(150deg,#F3B6A6,#D6577A); }
.art-b{ background:linear-gradient(150deg,#F4D9A6,#CBA052); }
.art-c{ background:linear-gradient(150deg,#C9D3B0,#A9B48C); }
.art-d{ background:linear-gradient(150deg,#F6D4CC,#E28FA0); }
.art-e{ background:linear-gradient(150deg,#EAC9E6,#B4779F); }

/* =========================================================
   PROJECT OVERLAY — full-screen single-project view w/ slider
========================================================= */
#project-overlay{
  position:fixed; inset:0; z-index:2000;
  background:var(--ink);
  opacity:0; pointer-events:none;
  transform:translateY(-100%);
  transition:opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column;
}
#project-overlay.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
body.project-overlay-open{ overflow:hidden; }

.project-overlay-close{
  position:absolute; top:26px; right:26px; z-index:5;
  /* 42px to match the copy-link button's own (content-driven) height,
     now that they sit side by side - was a fixed 46px. */
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,253,249,.12); border:1px solid rgba(255,253,249,.3);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .25s ease, transform .25s ease;
}
.project-overlay-close:hover{ background:rgba(255,253,249,.22); transform:rotate(90deg); }
.project-overlay-close span{ position:absolute; width:18px; height:2px; border-radius:2px; background:var(--cream); }
.project-overlay-close span:first-child{ transform:rotate(45deg); }
.project-overlay-close span:last-child{ transform:rotate(-45deg); }

/* Right side, next to the close button (42px wide, right:26px) with a
   14px gap between them - both top-right now instead of opposite
   corners. */
.project-overlay-copy{
  position:absolute; top:26px; right:82px; z-index:5;
  display:flex; align-items:center; gap:8px;
  padding:11px 20px 11px 16px; border-radius:50px;
  background:rgba(255,253,249,.12); border:1px solid rgba(255,253,249,.3);
  color:var(--cream); font-family:var(--sans); font-size:13px; font-weight:600;
  cursor:pointer; transition:background .25s ease, border-color .25s ease;
}
.project-overlay-copy:hover{ background:rgba(255,253,249,.22); }
.project-overlay-copy svg{ width:15px; height:15px; flex-shrink:0; }
.project-overlay-copy.is-copied{ background:var(--sage); border-color:var(--sage); }
@media (max-width:480px){
  .project-overlay-copy .copy-label{ display:none; }
  .project-overlay-copy{ padding:11px; }
}

.project-overlay-body{
  flex:1; display:grid; grid-template-columns:auto minmax(0, 480px);
  justify-content:center; align-items:center;
  max-width:1400px; width:100%; margin:0 auto;
  padding:90px 96px 50px; gap:50px;
  overflow-y:auto;
}
/* Always a 9:16 portrait. Width is derived from the free screen height
   (100vh minus the body's top/bottom padding) so the whole frame fits
   without scrolling; max-width keeps it from crowding the text on
   narrow screens, and height follows from aspect-ratio so the ratio
   never distorts. The image is cropped to fill (cover). */
.project-photo{
  position:relative; border-radius:22px; overflow:hidden; background:var(--ink-soft);
  width:calc((100vh - 140px) * 9 / 16); max-width:45vw;
  aspect-ratio:9 / 16;
}
.project-photo-art{ position:absolute; inset:0; background-size:cover; background-position:center; }

.project-nav{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,253,249,.9);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .25s ease;
}
.project-nav:hover{ background:var(--white); }
.project-nav svg{ width:18px; height:18px; color:var(--ink); }
#project-prev{ left:18px; }
#project-next{ right:18px; }

.project-info{ color:var(--cream); padding-top:6px; }
.project-info .project-count{
  display:block; font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:1.2px; color:rgba(255,253,249,.5); margin-bottom:16px;
}
.project-info .project-count:empty{ display:none; }
.project-nav.is-hidden{ display:none; }
.project-nav:disabled{ opacity:.5; cursor:progress; }
.project-info .project-cat{
  display:inline-block; font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; color:var(--gold-soft);
  margin-bottom:14px;
}
.project-info h3{ font-size:clamp(28px,3.4vw,42px); color:var(--cream); margin-bottom:22px; }
.project-info p{ color:rgba(255,253,249,.75); font-size:15.5px; line-height:1.7; max-width:44ch; }

@media (max-width:900px){
  .project-overlay-body{ display:block; padding:80px 22px 96px; }
  .project-photo{ width:100%; max-width:none; margin-bottom:26px; }
  .project-nav{ top:auto; bottom:24px; translate:none; }
  #project-prev{ left:22px; }
  #project-next{ right:22px; }
}
@media (max-width:600px){
  .project-nav{ width:38px; height:38px; }
}

/* =========================================================
   STEPS / HOW IT WORKS — playful numbered dots
========================================================= */
.steps-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:34px;
}
.step-card{
  background:var(--white);
  border-radius:20px;
  padding:38px 30px;
  box-shadow:0 14px 34px rgba(32,28,24,.06);
  position:relative;
  transition:transform .35s cubic-bezier(.25,1.05,.4,1), box-shadow .3s ease;
}
.step-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 34px rgba(32,28,24,.12);
}
.step-card .step-index{
  width:44px; height:44px; border-radius:50%;
  background:var(--rose); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-weight:600; font-size:18px;
  margin-bottom:20px;
  transition:transform .35s cubic-bezier(.25,1.05,.4,1);
}
.step-card:hover .step-index{ transform:scale(1.06); }
.step-card:nth-child(2) .step-index{ background:var(--gold); }
.step-card:nth-child(3) .step-index{ background:var(--sage); }
.step-card:nth-child(4) .step-index{ background:var(--sky); }
.step-card h3{ font-size:21px; margin-bottom:8px; transition:color .3s ease; }
.step-card:hover h3{ color:var(--rose-deep); }
.step-card p{ font-size:14.5px; margin:0; }

/* =========================================================
   PRICING (editorial rows, warm)
========================================================= */
.pricing-list{ display:flex; flex-direction:column; }
.price-row{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1.6fr auto;
  gap:30px;
  align-items:center;
  padding:34px 0;
  border-top:1px solid var(--line);
}
.pricing-list .price-row:last-child{ border-bottom:1px solid var(--line); }
.price-row.is-signature + .price-row{ border-top:none; }
.price-row.is-signature{
  background:var(--white); border-radius:20px; border-top:none;
  padding:34px 36px; box-shadow:0 14px 34px rgba(32,28,24,.08); margin:6px 0;
}
@media (min-width:901px){
  .price-row.is-signature{
    margin-left:-36px;
    margin-right:-36px;
    width:calc(100% + 72px);
  }
}
.price-row h3{ margin-bottom:6px; }
.price-row .tag{ font-size:12.5px; font-weight:500; color:var(--rose-deep); margin-bottom:10px; display:block; }
.price-amount{ font-family:var(--serif); font-size:34px; font-weight:600; color:var(--ink); }
.price-amount span{ font-family:var(--sans); font-size:13px; font-weight:400; color:var(--ink-soft); }
.price-row ul{ display:flex; flex-direction:column; gap:8px; }
.price-row li{ font-size:14.5px; color:var(--ink-soft); position:relative; padding-left:20px; }
.price-row li::before{ content:'●'; font-size:7px; position:absolute; left:0; top:7px; color:var(--rose); }
@media (max-width:900px){
  .price-row{ grid-template-columns:1fr; gap:14px; }
}

.addon-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.addon{
  background:var(--white); border-radius:18px; padding:32px;
  box-shadow:0 12px 28px rgba(32,28,24,.06);
  transition:transform .35s cubic-bezier(.25,1.05,.4,1), box-shadow .3s ease;
}
.addon:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 34px rgba(32,28,24,.12);
}
.addon-icon{
  width:44px; height:44px; border-radius:50%;
  background:var(--rose); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  transition:transform .35s cubic-bezier(.25,1.05,.4,1);
}
.addon-icon svg{ width:22px; height:22px; }
.addon:hover .addon-icon{ transform:scale(1.06); }
.addon:nth-child(2) .addon-icon{ background:var(--gold); }
.addon:nth-child(3) .addon-icon{ background:var(--sage); }
.addon h4{ font-size:18px; margin-bottom:8px; font-family:var(--serif); font-weight:600; }
.addon p{ font-size:14.5px; margin:0; }
@media (max-width:860px){ .addon-grid{ grid-template-columns:1fr; } }

/* =========================================================
   FAQ ACCORDION
========================================================= */
.accordion{ display:flex; flex-direction:column; }
.accordion-item{ border-top:1px solid var(--line); }
.accordion-item:last-child{ border-bottom:1px solid var(--line); }
.accordion-item.is-open:last-child{ border-bottom:none; }
.accordion-item.is-open + .accordion-item{ border-top:none; }
.accordion-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:28px 32px; background:none; border:none; cursor:pointer;
  text-align:left; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--ink);
}
.accordion-icon{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; position:relative;
  border:1.5px solid var(--line-strong);
  transition:background .25s ease, border-color .25s ease;
}
.accordion-icon span{
  position:absolute; top:50%; left:50%; width:12px; height:1.5px; background:var(--ink);
  transform:translate(-50%,-50%); transition:transform .25s ease;
}
.accordion-icon span:last-child{ transform:translate(-50%,-50%) rotate(90deg); }
.accordion-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
.accordion-panel-inner{ overflow:hidden; padding:0 32px; }
.accordion-panel-inner p{ padding-bottom:28px; margin:0; max-width:60ch; color:var(--ink-soft); }
.accordion-item.is-open{
  border-top-color:transparent;
  background:var(--white); border-radius:20px;
  box-shadow:0 14px 34px rgba(32,28,24,.08);
  margin:6px 0;
}
.accordion-item.is-open .accordion-icon{ background:var(--rose); border-color:var(--rose); }
.accordion-item.is-open .accordion-icon span{ background:#fff; }
.accordion-item.is-open .accordion-icon span:last-child{ transform:translate(-50%,-50%) rotate(90deg) scaleY(0); }
.accordion-item.is-open .accordion-panel{ grid-template-rows:1fr; }

/* =========================================================
   BOOKING FORM
========================================================= */
.booking-layout{
  display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:start;
}
.booking-form-card{
  background:var(--white); border-radius:24px; padding:50px;
  box-shadow:0 20px 46px rgba(32,28,24,.08);
}
.field{ margin-bottom:24px; }
.field label{
  display:block; font-size:13px; font-weight:500;
  color:var(--ink-soft); margin-bottom:9px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--cream); border:1.5px solid var(--line);
  border-radius:12px; padding:13px 16px; color:var(--ink); font-family:var(--sans); font-size:15px; font-weight:300;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--rose); }
.field textarea{ min-height:110px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.submit-row{ margin-top:36px; }
.submit-row .btn{ width:100%; justify-content:center; padding:0 17px; }
.form-notice{
  margin-bottom:24px; padding:16px 20px; border-radius:12px;
  font-size:14.5px; font-weight:500;
}
.form-notice--success{ background:var(--sage); color:#fff; font-weight:600; }
.form-notice--error{ background:#FBE2E2; color:#B23B3B; }


.sidebar-card{
  background:linear-gradient(160deg, var(--rose), var(--rose-deep));
  border-radius:24px; padding:46px; color:#fff;
}
.sidebar-card h3{ color:#fff; margin-bottom:8px; }
.sidebar-card p{ color:rgba(255,255,255,.85); }
.info-item{ padding:20px 0; border-top:1px solid rgba(255,255,255,.25); }
.info-item:first-of-type{ margin-top:26px; }
.info-item span{ display:block; font-size:11.5px; font-weight:500; letter-spacing:.5px; color:#ffe3ea; margin-bottom:6px; }
.info-item a, .info-item p{ color:#fff; margin:0; font-size:16px; }
.info-item a + a{ margin-left:14px; }

/* =========================================================
   PAGE HERO (interior pages)
========================================================= */
.page-hero{
  padding:180px 0 80px;
  background: linear-gradient(180deg, var(--blush-soft), var(--cream));
}

/* =========================================================
   CTA BAND (ACF Block)
========================================================= */
.cta-band{
  text-align:center; padding:90px 60px;
  /* Rose gradient is the default/fallback - matches every instance
     placed before the Background field existed (no data-bg attr, or
     an explicit data-bg="rose"). */
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color:#fff;
  border-radius:32px;
}
.cta-band h2{ max-width:16ch; margin:0 auto 30px; color:#fff; }
.cta-band .cta-lead{ max-width:46ch; margin:-12px auto 30px; opacity:.9; }
.cta-band .mark{ color:#ffe3ea; justify-content:center; }
.cta-band .mark::before{ background:#fff; }
.cta-band .btn--solid{ background:#fff; color:var(--rose-deep); border-color:#fff; box-shadow:none; }
.cta-band .btn--solid:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* Background field (added after the fact - see the
   wp-section-background-contrast note) reuses the exact per-background
   rules already established for the other 3 Flexible Content blocks,
   just scoped to .cta-band's own selectors instead of the generic
   .flex-block-inner wrapper, so its distinct centered/pill-button
   look stays untouched - only the background + resulting contrast
   changes. */
.cta-band[data-bg="white"],
.cta-band[data-bg="cream"],
.cta-band[data-bg="blush"]{ color:var(--ink-soft); }
.cta-band[data-bg="white"]{ background:var(--white); }
.cta-band[data-bg="cream"]{ background:var(--cream-2); }
.cta-band[data-bg="blush"]{ background:var(--blush-soft); }
.cta-band[data-bg="ink"]{ background:var(--ink); }

.cta-band[data-bg="white"] h2,
.cta-band[data-bg="cream"] h2,
.cta-band[data-bg="blush"] h2{ color:var(--ink); }
.cta-band[data-bg="white"] .mark,
.cta-band[data-bg="cream"] .mark,
.cta-band[data-bg="blush"] .mark{ color:var(--rose-deep); }
.cta-band[data-bg="white"] .mark::before,
.cta-band[data-bg="cream"] .mark::before,
.cta-band[data-bg="blush"] .mark::before{ background:var(--gold); }
/* Light backgrounds use the site's standard solid button (rose ->
   rose-deep hover) - the white-pill treatment above exists specifically
   so the button doesn't vanish into the Rose gradient; light
   backgrounds have no such problem. */
.cta-band[data-bg="white"] .btn--solid,
.cta-band[data-bg="cream"] .btn--solid,
.cta-band[data-bg="blush"] .btn--solid{ background:var(--rose); color:#fff; border-color:var(--rose); }
.cta-band[data-bg="white"] .btn--solid:hover,
.cta-band[data-bg="cream"] .btn--solid:hover,
.cta-band[data-bg="blush"] .btn--solid:hover{ background:var(--rose-deep); border-color:var(--rose-deep); }

/* Ink mirrors the CTA band's own "Split with Photo" precedent
   (gold-soft mark/gold dot, rose->rose-deep button - rose reads fine
   against ink, no need to flip to white). */
.cta-band[data-bg="ink"] h2{ color:#fff; }
.cta-band[data-bg="ink"] .mark{ color:var(--gold-soft); }
.cta-band[data-bg="ink"] .mark::before{ background:var(--gold); }
.cta-band[data-bg="ink"] .btn--solid{ background:var(--rose); color:#fff; border-color:var(--rose); }
.cta-band[data-bg="ink"] .btn--solid:hover{ background:var(--rose-deep); border-color:var(--rose-deep); }

/* =========================================================
   FOOTER
========================================================= */
.site-footer{ background:var(--ink); padding:110px 0; color:#e7dccf; }
.footer-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:50px;
  padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.14);
}
.site-footer .brand{ color:#fff; display:block; margin-bottom:16px; }
.site-footer .brand .dot{ background:var(--rose); }
.footer-col h4{ font-size:13px; letter-spacing:.5px; color:var(--gold-soft); font-family:var(--sans); font-weight:500; margin-bottom:18px; }
.footer-col a, .footer-col p{ display:block; padding:5px 0; font-size:14.5px; color:#cbbfae; margin:0; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{
  padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12px; letter-spacing:.3px; color:#8a7d6c;
}

/* =========================================================
   FLEXIBLE CONTENT BLOCKS — Feature/Media, Stats, Testimonial
   Each block outputs a wrapper with data-bg="{white|cream|blush|ink|rose}"
   (from the block's ACF "Background" field) plus .is-dark when that
   background is Ink or Rose — see inc/acf-blocks.php
   render_block_background_classes(). This is the literal CSS worked
   out on the section-layouts.html reference page; see the
   wp-section-background-contrast project-memory note for the full
   reasoning behind every rule below.
========================================================= */
.flex-block{ padding:90px 0; }
.flex-block-inner{
  border-radius:32px; padding:70px 60px;
  transition:background .3s ease, color .3s ease;
}

/* Section Background — the plain area BEHIND the card/band, a
   separate concept from the card/band's own color above. A bare
   attribute selector (no class dependency) so it applies identically
   to every block's own outer wrapper, whatever layout classes that
   wrapper already carries (.flex-block for Feature/Stats/Testimonial,
   .section.section--flush-top for CTA Band) — it only ever adds a
   background, never touches spacing. Cream matches the page's own
   background exactly, so it's a safe default for any instance that
   predates this field (zero visual change). */
[data-section-bg="white"]{ background:var(--white); }
[data-section-bg="cream"]{ background:var(--cream); }
[data-section-bg="blush"]{ background:var(--blush-soft); }

/* Auto-collapse the gap between two consecutive blocks that share the
   same Section Background, so they read as one continuous panel
   instead of doubling up padding on a color that never actually
   changes between them. Replaces manually toggling .section--flush-top
   inside a block template — that class stays for the unrelated
   hero-into-content pairing (page-hero followed by a plain section
   with no data-section-bg at all). Only removes the SECOND block's
   own top inset; the first block's bottom padding still applies, so
   there's still real breathing room between the two — just not double
   the color's worth of it. Requires the two blocks to be immediate
   DOM siblings (an empty paragraph block between them breaks this). */
[data-section-bg="white"] + [data-section-bg="white"],
[data-section-bg="cream"] + [data-section-bg="cream"],
[data-section-bg="blush"] + [data-section-bg="blush"]{ padding-top:0; }

@media (max-width:700px){
  .flex-block{ padding:60px 0; }
  .flex-block-inner{ padding:44px 28px; border-radius:24px; }
}

.flex-block-inner[data-bg="cream"]{ background:var(--cream-2); }
.flex-block-inner[data-bg="white"]{ background:var(--white); }
.flex-block-inner[data-bg="blush"]{ background:var(--blush-soft); }
.flex-block-inner[data-bg="ink"]{ background:var(--ink); }
.flex-block-inner[data-bg="rose"]{ background:linear-gradient(135deg, var(--rose), var(--rose-deep)); }

.flex-block-inner.is-dark{ color:#fff; }
.flex-block-inner.is-dark h1, .flex-block-inner.is-dark h2,
.flex-block-inner.is-dark h3, .flex-block-inner.is-dark h4{ color:#fff; }
.flex-block-inner.is-dark p{ color:rgba(255,255,255,.78); }
.flex-block-inner.is-dark .lede{ color:#fff; }
.flex-block-inner[data-bg="ink"] .mark{ color:var(--gold-soft); }
.flex-block-inner[data-bg="ink"] .mark::before{ background:var(--gold); }
.flex-block-inner[data-bg="rose"] .mark{ color:#ffe3ea; }
.flex-block-inner[data-bg="rose"] .mark::before{ background:#fff; }
.flex-block-inner.is-dark .btn:not(.btn--solid){ border-color:#fff; color:#fff; }
.flex-block-inner.is-dark .btn:not(.btn--solid):hover{ background:#fff; color:var(--ink); }
.flex-block-inner[data-bg="rose"] .btn--solid{ background:#fff; color:var(--rose-deep); border-color:#fff; }
.flex-block-inner[data-bg="rose"] .btn--solid:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.flex-block-inner.is-dark .stat-number-card .num{ color:#fff; }
.flex-block-inner.is-dark .stat-number-card .label{ color:rgba(255,255,255,.7); }
.flex-block-inner.is-dark .testi-centered .quote-mark{ color:rgba(255,255,255,.35); }
.flex-block-inner.is-dark .testi-centered blockquote{ color:#fff; }
.flex-block-inner[data-bg="ink"] .testi-centered .author,
.flex-block-inner[data-bg="ink"] .testi-centered .author span{ color:var(--gold-soft); }
.flex-block-inner[data-bg="rose"] .testi-centered .author,
.flex-block-inner[data-bg="rose"] .testi-centered .author span{ color:#ffe3ea; }
.flex-block-inner[data-bg="blush"] .testi-centered .author,
.flex-block-inner[data-bg="blush"] .testi-centered .author span{ color:var(--rose); }
.flex-block-inner[data-bg="cream"] .testi-centered .author,
.flex-block-inner[data-bg="cream"] .testi-centered .author span{ color:var(--rose-deep); }
.flex-block-inner[data-bg="white"] .testi-centered .author,
.flex-block-inner[data-bg="white"] .testi-centered .author span{ color:var(--rose); }
.flex-block-inner.is-dark .testi-card{ background:rgba(255,255,255,.1); }
.flex-block-inner.is-dark .testi-card blockquote{ color:#fff; }
.flex-block-inner[data-bg="ink"] .testi-card .author{ color:var(--gold-soft); }
.flex-block-inner[data-bg="rose"] .testi-card .author{ color:#ffe3ea; }
.flex-block-inner[data-bg="blush"] .testi-card{ background:var(--white); }
.flex-block-inner[data-bg="white"] .testi-card .author,
.flex-block-inner[data-bg="blush"] .testi-card .author{ color:var(--rose); }

/* ---- Feature / Media ---- */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.feature-media img,
.feature-media .ph-img{ width:100%; height:340px; object-fit:cover; border-radius:20px; }
.feature-copy p{ font-size:15px; }
.feature--bleed{ position:relative; border-radius:20px; overflow:hidden; min-height:420px; display:flex; align-items:flex-end; }
.feature--bleed img,
.feature--bleed .ph-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:0; }
.feature--bleed::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(32,28,24,0) 30%, rgba(32,28,24,.72));
}
.feature--bleed .bleed-card{ position:relative; z-index:1; color:#fff; padding:44px; max-width:480px; }
.feature--bleed .bleed-card .mark{ color:var(--gold-soft); }
.feature--bleed .bleed-card .mark::before{ background:#fff; }
.feature--bleed .bleed-card h3{ color:#fff; font-size:28px; }
.feature--bleed .bleed-card p{ color:rgba(255,255,255,.82); }
@media (max-width:760px){
  .feature{ grid-template-columns:1fr; gap:30px; }
  .feature-media{ order:-1; }
}

/* ---- Stats / Process ---- */
/* auto-fit (not a fixed repeat(3,...)) so this reads correctly
   whether an instance has 3 items (Add-ons) or 4 (How It Works) -
   the original static site used two different fixed column counts
   for those two cases; this one rule covers both. */
.stats-icons{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:24px; }
/* Each item is its OWN elevated card - matching .step-card /.addon on
   the live site - not one shared card holding every item together.
   Background driven by the block's Card Color field via
   eleve_card_bg_class(), same White/Cream/Blush/Ink/Rose choices and
   reverse-contrast handling as every other card/band in the theme. */
.stat-icon-card{
  text-align:left;
  background:var(--white); border-radius:20px; padding:38px 30px;
  box-shadow:0 14px 34px rgba(32,28,24,.06);
  transition:transform .35s cubic-bezier(.25,1.05,.4,1), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.stat-icon-card:hover{ transform:translateY(-5px); box-shadow:0 18px 34px rgba(32,28,24,.12); }
.stat-icon-card[data-bg="cream"]{ background:var(--cream-2); }
.stat-icon-card[data-bg="blush"]{ background:var(--blush-soft); }
.stat-icon-card[data-bg="ink"]{ background:var(--ink); }
.stat-icon-card[data-bg="rose"]{ background:linear-gradient(135deg, var(--rose), var(--rose-deep)); }
.stat-icon-card.is-dark{ color:#fff; }
.stat-icon-card.is-dark h4{ color:#fff; }
.stat-icon-card.is-dark p{ color:rgba(255,255,255,.72); }
.stat-icon-card .icon{
  width:48px; height:48px; border-radius:50%; background:var(--rose); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; font-family:var(--serif); font-weight:700;
  transition:transform .35s cubic-bezier(.25,1.05,.4,1);
}
.stat-icon-card:hover .icon{ transform:scale(1.06); }
.stat-icon-card:nth-child(2) .icon{ background:var(--gold); }
.stat-icon-card:nth-child(3) .icon{ background:var(--sage); }
.stat-icon-card:nth-child(4) .icon{ background:var(--sky); }
.stat-icon-card h4{ font-size:17px; margin-bottom:6px; transition:color .3s ease; }
.stat-icon-card:hover h4{ color:var(--rose-deep); }
.stat-icon-card.is-dark:hover h4{ color:#fff; }
.stat-icon-card p{ font-size:14px; margin:0; }
.stats-numbers{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; text-align:center; }
.stat-number-card{ padding:0 10px; }
.stat-number-card .num{ font-family:var(--serif); font-size:clamp(38px,5vw,56px); font-weight:700; color:var(--rose-deep); line-height:1; margin-bottom:10px; }
.stat-number-card .label{ font-size:13.5px; font-weight:600; letter-spacing:.3px; color:var(--ink-soft); text-transform:uppercase; }
@media (max-width:700px){
  .stats-icons, .stats-numbers{ grid-template-columns:1fr; }
}

/* ---- Testimonial ---- */
.testi-centered{ max-width:66ch; margin:0 auto; text-align:center; }
.testi-centered .quote-mark{ font-family:var(--serif); font-size:64px; color:var(--blush); line-height:1; margin-bottom:6px; }
.testi-centered blockquote{ margin:0 0 26px; font-family:var(--serif); font-size:clamp(22px,2.6vw,30px); font-weight:600; line-height:1.35; color:var(--ink); }
.testi-centered .author{ font-size:14px; color:var(--ink-soft); font-weight:600; }
.testi-centered .author span{ font-weight:400; color:var(--ink-soft); }
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.testi-card{ background:var(--cream-2); border-radius:18px; padding:30px; }
.testi-card blockquote{ margin:0 0 18px; font-size:15px; color:var(--ink); line-height:1.6; }
.testi-card .author{ font-size:13.5px; font-weight:600; color:var(--rose-deep); }
@media (max-width:900px){ .testi-grid{ grid-template-columns:1fr; } }

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:26px; }
  .about{ grid-template-columns:1fr; gap:34px; }
  .about-photo{ max-width:520px; order:2; } /* stacked: text first, photo after */
  .head-row{ flex-direction:column; align-items:flex-start; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .steps-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .main-nav{ display:none; }
  .menu-toggle{ display:flex; }
  .container{ padding:0 22px; }
  .section{ padding:100px 0; }
  .footer-grid{ grid-template-columns:1fr; }
  .booking-layout{ grid-template-columns:1fr; gap:40px; }
  .booking-form-card, .sidebar-card{ padding:32px; }
  .steps-grid{ grid-template-columns:1fr; }
  .cta-band{ padding:70px 30px; }
  .hero-lede{ display:none; }
  .hero{ min-height:75vh; }
  .scroll-cue{ display:none; }
}

/* =========================================================
   Booking form: Rental Items checklist
========================================================= */
.check-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
.field .check{
  display:flex; align-items:center; gap:10px; margin:0;
  font-size:14.5px; font-weight:400; color:var(--ink); cursor:pointer;
}
.field .check input{ width:18px; height:18px; padding:0; flex-shrink:0; accent-color:var(--rose); }
@media (max-width:600px){ .check-list{ grid-template-columns:1fr; } }

/* Booking cart: header count badge + modal Add/Remove actions */
.cart-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--rose); color:var(--white);
  font-size:11px; font-weight:700; line-height:1;
}
.cart-badge[hidden]{ display:none; }
.modal-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.modal-actions [hidden]{ display:none; }
.btn.is-added{ background:transparent; color:var(--ink); }