/* ===================================================
   SDM Concierge — Homepage Styles
   Palette: light-grey base (#F1F3F5), dark text, single brass/gold accent
   Note: --overlay-gold and --overlay-text are for the two components that
   sit on top of a photo with a dark gradient (hero, featured service card)
   — those need light text regardless of the site's light theme.
   =================================================== */

:root{
  --black:#F1F3F5;
  --black-soft:#E7EAED;
  --panel:#FFFFFF;
  --panel-2:#E4E7EA;
  --gold:#8A6B32;
  --gold-bright:#AD8748;
  --white:#17181A;
  --muted:#5B5F63;
  --border:rgba(20,20,20,0.10);
  --border-strong:rgba(20,20,20,0.20);
  --radius:2px;

  --overlay-gold:#D4B375;
  --overlay-text:#F5F4F1;
  --overlay-text-muted:#D8D6CF;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

body{
  background:var(--black);
  color:var(--white);
  font-family:'Public Sans', sans-serif;
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer;}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

/* Headings: Cal Sans (single-weight display font — hierarchy comes from size, not weight).
   Everything else (paragraphs, subheadings, labels, UI text) inherits Public Sans from body. */
h1,h2,h3{
  font-family:'Cal Sans', sans-serif;
  font-weight:400;
  letter-spacing:-0.01em;
  color:var(--white);
}

.eyebrow{
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}

::selection{background:var(--gold); color:#0A0A0A;}

:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
}

.btn-primary{
  display:inline-block;
  background:var(--gold);
  color:#FFFFFF;
  padding:15px 30px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.02em;
  border:none;
  border-radius:var(--radius);
  transition:background .2s ease;
}
.btn-primary:hover{background:var(--gold-bright);}

.btn-ghost{
  display:inline-block;
  border:1px solid var(--border-strong);
  color:var(--white);
  padding:14px 29px;
  font-size:14px;
  border-radius:var(--radius);
  transition:border-color .2s ease, color .2s ease;
}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold-bright);}

/* ---------- NAV ---------- */
/* Header is fixed (not sticky) so it can overlay the hero image rather than
   push it down. JS toggles the "transparent" class while the hero is behind
   it; once scrolled past the hero, it reverts to the solid state below. */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(241,243,245,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  transition:background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
header.transparent{
  background:transparent;
  backdrop-filter:none;
  border-bottom-color:transparent;
}
header.transparent .nav-links a{
  color:var(--overlay-text-muted);
  text-shadow:0 1px 4px rgba(0,0,0,0.55);
}
header.transparent .nav-links a:hover{color:var(--overlay-text);}
header.transparent .nav-cta{
  border-color:var(--overlay-gold);
  color:var(--overlay-gold);
  text-shadow:0 1px 4px rgba(0,0,0,0.5);
}
header.transparent .nav-cta:hover{
  background:var(--overlay-gold);
  color:#FFFFFF;
  text-shadow:none;
}
header.transparent .nav-toggle{
  background:rgba(255,255,255,0.12);
  border-color:rgba(255,255,255,0.4);
}
header.transparent .nav-toggle svg{stroke:var(--overlay-text);}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:16px 32px;
  max-width:1200px; margin:0 auto;
}
.logo-mark{height:26px; width:auto;}
.nav-links{
  display:flex; gap:36px;
  font-size:14px;
  color:var(--muted);
}
.nav-links a:hover{color:var(--white);}
.nav-cta{
  border:1px solid var(--gold);
  color:var(--gold);
  padding:9px 20px;
  border-radius:var(--radius);
  font-size:13px;
  letter-spacing:0.04em;
  transition:background .2s ease, color .2s ease;
  white-space:nowrap;
}
.nav-cta:hover{background:var(--gold); color:#FFFFFF;}
.nav-toggle{
  display:none;
  width:44px; height:44px;
  background:var(--panel-2);
  border:1px solid var(--border-strong);
  border-radius:8px;
  align-items:center; justify-content:center;
}
.nav-toggle svg{width:18px; height:18px; stroke:var(--white); stroke-width:2;}
.mobile-menu{
  display:none;
  flex-direction:column;
  background:var(--black-soft);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
  padding:16px 32px;
  border-bottom:1px solid var(--border);
  font-size:15px;
  color:var(--white);
}
.mobile-menu .mobile-cta{
  margin:16px 32px;
  text-align:center;
  background:var(--gold);
  color:#FFFFFF;
  padding:12px;
  border-radius:var(--radius);
  font-weight:600;
  font-size:14px;
  border-bottom:none;
}

/* Matches the hero's mobile-safe breakpoint (1150px) exactly, so the nav
   collapses to the hamburger at the same point the hero switches to its
   compact layout — otherwise there's a gap where the full horizontal nav
   links have nowhere to go but overlap the hero heading. */
@media (max-width:1150px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-toggle{display:flex;}
}

/* ---------- HERO ---------- */
/* The hero's height is locked to the photo's own measured aspect ratio
   (2400x1339 — the actual file), so object-fit:cover never has anything
   to crop: the box is always exactly the same shape as the photo, at
   every viewport width. Heading/subheading/button and the quote form are
   absolutely positioned on top of the photo, never affecting its size. */
.hero{
  position:relative;
  width:100%;
  aspect-ratio:2400 / 1339;
  border-bottom:1px solid var(--border);
}
.hero-bg{
  position:absolute; inset:0;
  z-index:0;
}
/* <picture> is display:inline by default — display:contents keeps it out of
   the box model entirely so the <img> inside sizes exactly as it did before
   the wrapper was added (100% width/height at desktop, natural aspect at
   mobile), with zero layout side effects from the wrapping element. */
.hero-bg picture{display:contents;}
.hero-bg img{
  width:100%; height:100%;
  object-fit:cover;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0) 18%);
}
.hero-inner{
  position:absolute; top:0; left:0; right:0; z-index:1;
  max-width:1200px; margin:0 auto;
  padding:72px 32px 0;
  width:100%;
}
.hero-content{max-width:720px; margin:0 auto; text-align:center;}
.hero h1{
  font-size:clamp(22px, 4.6vw, 56px);
  line-height:1.06;
  margin:0 0 10px;
  color:var(--overlay-text);
  white-space:nowrap;
  text-shadow:0 2px 12px rgba(0,0,0,0.5);
}
.hero h1 em{
  font-style:italic;
  color:var(--overlay-gold);
}
.hero-content p{
  color:var(--overlay-text);
  font-size:16px;
  max-width:460px;
  margin:0 auto 14px;
  text-shadow:0 1px 2px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.6);
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
.hero .btn-ghost{
  color:var(--overlay-text);
  border-color:rgba(245,244,241,0.55);
  background:rgba(10,10,10,0.3);
  text-shadow:0 1px 6px rgba(0,0,0,0.5);
}
.hero .btn-ghost:hover{border-color:var(--overlay-gold); color:var(--overlay-gold);}

/* quick quote form card — a sibling of .hero (not nested inside it), pulled
   up with a negative margin so it overlaps only the road strip at the very
   bottom of the photo. Keeping it outside .hero means it can never force
   the aspect-ratio box to grow taller than the photo itself, which is what
   would reintroduce cropping. The overlap is a small fixed pixel amount,
   safely inside the road-only band below the wheels at every breakpoint. */
.quote-card{
  max-width:1200px; margin:-28px auto 0;
  position:relative; z-index:2;
  background:var(--panel);
  border:1px solid var(--border-strong);
  border-radius:4px;
  padding:28px 32px;
  display:grid;
  grid-template-columns:1.15fr 1.15fr 0.7fr 0.55fr 0.75fr 0.95fr auto;
  gap:16px;
  align-items:end;
}
.field label{
  display:block;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
.field input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-strong);
  color:var(--white);
  font-family:'Public Sans', sans-serif;
  font-size:14px;
  padding:6px 0;
}
.field input::placeholder{color:#5C5C58;}
.field input:focus{border-bottom-color:var(--gold);}
.field input::-webkit-calendar-picker-indicator{opacity:0.6;}
.quote-submit{
  background:var(--gold);
  color:#FFFFFF;
  border:none;
  padding:13px 16px;
  font-size:13px;
  font-weight:600;
  border-radius:var(--radius);
  white-space:nowrap;
  transition:background .2s ease;
}
.quote-submit:hover{background:var(--gold-bright);}
.quote-note{
  grid-column:1 / -1;
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
}

/* Tablet / resized-window range. Widened from 900px to 1150px (a bit further
   than the ~1024px originally asked for) because at these widths the hero's
   aspect-ratio-locked container gets short enough that the old desktop-scale
   heading/subheading/button no longer fit above the roofline — confirmed by
   screenshot at 900/1024/1100px, all three showed the button sitting
   directly on the vehicle's roof. Extending to 1150px (rather than stopping
   at 1024px) was needed so 1100px — one of the three widths asked to be
   tested — actually gets the fix too, instead of being left just outside it.
   Text is compacted (not just nudged) since the sky band here is genuinely
   short: padding and margins are cut hard and the heading no longer scales
   with viewport width in this range. */
@media (max-width:1150px){
  .hero-inner{padding:78px 20px 0;}
  .hero h1{font-size:14px; margin-bottom:0;}
  .hero-content p{font-size:11px; margin-bottom:0; max-width:600px;}
  .hero .btn-ghost{padding:2px 12px; font-size:10px;}
  .quote-card{
    grid-template-columns:1fr 1fr;
    margin-top:-22px;
  }
}
/* Mobile only: back to an overlay treatment (text and form layered on the
   photo, like desktop/tablet), but re-tuned specifically for mobilehero.jpeg's
   own geometry rather than reusing desktop's numbers. That photo was shot
   with extra empty sky at the top and extra road at the bottom specifically
   for this: measured directly (766x1200 source), the roofline sits at ~50%
   of the frame height and the wheels meet the road at ~73%, leaving a clear
   ~27%-tall road band below the vehicle. aspect-ratio is switched to match
   this photo exactly (as with desktop), so there's still zero cropping —
   only the crop target changes, not the no-crop guarantee. */
@media (max-width:560px){
  .hero{aspect-ratio:766 / 1200;}
  .hero-bg::after{
    background:linear-gradient(
      180deg,
      rgba(10,10,10,0.6) 0%,
      rgba(10,10,10,0) 35%,
      rgba(10,10,10,0) 80%,
      rgba(10,10,10,0.55) 100%
    );
  }
  .hero-inner{padding:64px 20px 0;}
  .hero h1{
    font-size:22px;
    white-space:normal;
    margin-bottom:10px;
  }
  .hero-content p{
    font-size:14px;
    margin-bottom:16px;
    max-width:none;
  }
  .hero .btn-ghost{padding:10px 20px; font-size:13px;}
  /* Card's top edge overlaps only the road band (measured safely below the
     73%-mark where the wheels meet the road); the rest of the form's height
     — most of it, given how many fields it has — flows normally below the
     photo on the page background, same overlap-then-flow pattern already
     used at every other breakpoint. */
  .quote-card{grid-template-columns:1fr; margin-top:-88px;}
}

/* ---------- BOOKING PAGE ---------- */
/* Header is position:fixed (~73px tall) and takes no flow space, so the
   first section on the page needs its own top padding to clear it. 72px
   only just cleared the header with no real breathing room (content sat
   flush against it); this adds the header clearance plus the site's
   standard 88px section rhythm on top, matching how other sections are
   spaced from whatever precedes them. */
.booking-intro{padding-top:160px;}
/* Dedicated classes for the booking-page intro block — not shared with
   .eyebrow/.section-head or anything else used on index.html. Centered,
   so no left-edge alignment concerns (and no glyph-shape compensation
   needed) the way the old left-aligned version required. */
.booking-intro-block{
  max-width:620px;
  margin:0 auto;
  text-align:center;
}
.booking-intro-eyebrow{
  display:block;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
  text-align:center;
}
.booking-intro-heading{
  font-size:clamp(28px,3.4vw,40px);
  margin-top:14px;
  text-align:center;
}
.booking-intro-text{
  color:var(--muted);
  margin-top:16px;
  font-size:15px;
  text-align:center;
}
.booking-section{padding:56px 0 120px;}
.booking-form{
  max-width:820px;
  margin:0 auto;
  background:var(--panel);
  border:1px solid var(--border-strong);
  border-radius:4px;
  padding:44px;
}
.booking-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 32px;
}
.booking-grid .field.full{grid-column:1 / -1;}
.field select,
.field textarea{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border-strong);
  color:var(--white);
  font-family:'Public Sans', sans-serif;
  font-size:14px;
  padding:6px 0;
}
.field select{cursor:pointer;}
.field select:focus,
.field textarea:focus{outline:none; border-bottom-color:var(--gold);}
.field textarea{resize:vertical; min-height:90px; line-height:1.5;}
.booking-submit-row{margin-top:36px;}
.booking-submit-row .quote-submit{width:100%;}
.booking-submit-row .quote-note{margin-top:14px; text-align:center;}
@media (max-width:700px){
  .booking-grid{grid-template-columns:1fr;}
  .booking-form{padding:32px 24px;}
}

/* ---------- SECTION SHELL ---------- */
section{padding:88px 0 0;}
.section-head{
  max-width:580px;
  margin-bottom:56px;
}
.section-head h2{
  font-size:clamp(28px,3.4vw,40px);
  margin-top:14px;
}
.section-head p{color:var(--muted); margin-top:16px; font-size:15px;}

/* ---------- SERVICES ---------- */
/* Horizontally scrollable row of cards. Every card's image sits in a fixed
   aspect-ratio box with object-fit:cover, so real photos of differing
   source dimensions (and placeholders) all line up identically. */
.services-slider{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:12px;
  -webkit-overflow-scrolling:touch;
}
.service-card{
  flex:0 0 280px;
  scroll-snap-align:start;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.service-card:hover{border-color:var(--border-strong); transform:translateY(-3px);}
.service-visual{
  aspect-ratio:4 / 3;
  background:var(--black-soft);
}
.service-visual img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.service-visual--placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.service-body{padding:20px;}
.service-body h3{
  font-size:18px;
  margin-bottom:8px;
}
.service-body p{
  color:var(--muted);
  font-size:13.5px;
}
@media (max-width:560px){
  .service-card{flex-basis:230px;}
}

/* ---------- FLEET ---------- */
.fleet-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.fleet-card{
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
  background:var(--panel);
  transition:border-color .2s ease, transform .2s ease;
}
.fleet-card:hover{border-color:var(--border-strong); transform:translateY(-3px);}
.fleet-visual{
  height:200px;
  background:linear-gradient(180deg, #F5F4F1 0%, #E7E5DE 100%);
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  border-bottom:1px solid var(--border);
  padding:12px 16px;
}
/* All fleet photos now share identical 1242x637 framing, so every card
   uses the same fixed-size box and object-fit:contain at every breakpoint —
   no per-vehicle sizing exceptions needed. */
.fleet-visual img{
  width:100%; height:100%;
  object-fit:contain;
}
.fleet-body{padding:24px;}
.fleet-body h3{font-size:19px; margin-bottom:6px;}
.fleet-cities{
  color:var(--muted);
  font-size:12.5px;
  margin-bottom:16px;
  letter-spacing:0.02em;
}
.fleet-price{
  display:flex; align-items:flex-start; justify-content:space-between;
  border-top:1px solid var(--border);
  padding-top:16px;
}
.fleet-price .amount{
  font-family:'Public Sans', sans-serif;
  font-weight:700;
  color:var(--gold-bright);
  font-size:18px;
}
.fleet-price .amount span{
  display:block;
  font-family:'Public Sans', sans-serif;
  font-weight:500;
  color:var(--muted);
  font-size:11px;
  margin-top:4px;
}
.fleet-price a{
  font-size:12.5px;
  color:var(--muted);
  border-bottom:1px solid var(--border-strong);
  padding-bottom:2px;
  white-space:nowrap;
  margin-left:12px;
}
.fleet-price a:hover{color:var(--gold-bright); border-color:var(--gold-bright);}

@media (max-width:860px){ .fleet-grid{grid-template-columns:1fr;} }

.fleet-footnote{
  margin-top:28px;
  font-size:13px;
  color:var(--muted);
}
.fleet-catalogue-btn{margin-top:20px;}
.interior-gallery-cta{display:inline-block; margin-top:32px;}
.services-cta{display:inline-block; margin-top:48px;}

/* ---------- INTERIOR GALLERY ---------- */
.interior-gallery{
  margin-top:64px;
}
.interior-gallery .section-head{margin-bottom:32px;}
.interior-slider{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.interior-slide{
  position:relative;
  height:460px;
  border-radius:6px;
  overflow:hidden;
  border:1px solid var(--border-strong);
}
@media (max-width:700px){
  .interior-slider{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:12px;
    -webkit-overflow-scrolling:touch;
  }
  .interior-slide{flex:0 0 240px; height:300px; scroll-snap-align:start;}
}
.interior-slide img{
  width:100%; height:100%;
  object-fit:cover;
}
.interior-slide .tag{
  position:absolute; bottom:14px; left:14px;
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--overlay-text);
  background:rgba(10,10,10,0.6);
  padding:6px 12px; border-radius:20px;
  backdrop-filter:blur(4px);
}

/* ---------- CITIES ---------- */
.cities-section{
  margin-top:88px;
  padding-bottom:64px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--black-soft);
}
.cities-section .section-head{margin-bottom:32px; padding-top:64px;}
.city-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  padding:0 32px 12px;
}
.city-slide{
  position:relative;
  height:220px;
  border-radius:6px;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--border-strong);
}
.city-slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
}
.city-slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,0.8) 100%);
  z-index:1;
}
.city-name{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  font-family:'Public Sans', sans-serif;
  font-weight:600;
  font-size:21px;
  color:var(--overlay-text);
  padding:20px 0;
  text-align:center;
  width:100%;
}
@media (max-width:900px){
  .city-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:560px){
  .city-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- PARTNERS / CLIENTS ---------- */
.partners{
  padding:56px 0 12px;
  background:var(--black-soft);
}
.partners .eyebrow{display:block; text-align:center; margin-bottom:12px;}
.partners .partners-sub{
  text-align:center;
  color:var(--muted);
  font-size:13.5px;
  max-width:520px;
  margin:0 auto 32px;
}
.marquee{overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%);}
.marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  animation:scrollmarquee 24s linear infinite;
}
/* The logo set is repeated 5x so the track never visibly runs dry on wide
   screens. translateX only lands exactly on the start of the next copy if
   every item (including the last one) carries identical trailing space —
   flexbox `gap` doesn't add space after the final item, which throws the
   math off and causes a visible snap at the loop point. margin-right on
   every badge keeps spacing uniform (seams included) and makes an exact
   1/5-of-total-width translate (-20%) line up perfectly every cycle. */
@keyframes scrollmarquee{ from{transform:translateX(0);} to{transform:translateX(-20%);} }
.badge{
  width:64px; height:64px;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  padding:6px;
  margin-right:56px;
}
.badge img{width:100%; height:100%; object-fit:contain;}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }

/* ---------- MEMBERSHIP BANNER ---------- */
.membership{
  padding:24px 0 64px;
}
.membership-inner{
  border:1px solid var(--gold);
  background:linear-gradient(120deg, rgba(138,107,50,0.12), rgba(241,243,245,0.4));
  border-radius:4px;
  padding:44px 44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
}
.membership-inner h3{font-size:24px; margin-bottom:8px;}
.membership-inner p{color:var(--muted); font-size:14px; max-width:460px;}
.membership-price{
  text-align:right;
  white-space:nowrap;
}
.membership-price .amount{
  font-family:'Public Sans', sans-serif;
  font-weight:700;
  font-size:26px;
  color:var(--gold-bright);
}
.membership-price .amount small{font-family:'Public Sans', sans-serif; font-weight:500; font-size:12px; color:var(--muted);}

/* ---------- REVIEWS SLIDER ---------- */
.reviews-slider{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:12px;
  -webkit-overflow-scrolling:touch;
}
.review-card{
  flex:0 0 320px;
  scroll-snap-align:start;
  border-top:2px solid var(--gold);
  padding-top:20px;
}
.review-card p.quote{
  font-family:'Public Sans', sans-serif;
  font-style:italic;
  font-weight:500;
  font-size:18px;
  line-height:1.5;
  margin-bottom:20px;
  color:var(--white);
}
.review-meta{
  font-size:12.5px;
  color:var(--muted);
  letter-spacing:0.02em;
}
/* ---------- PERSONAL SHOPPING STRIP ---------- */
.ps-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:4px;
  padding:44px;
  background:var(--panel);
}
.ps-strip h3{font-size:24px; margin-bottom:14px;}
.ps-strip p{color:var(--muted); font-size:14.5px; margin-bottom:20px;}
.ps-visual{
  height:180px;
  border:1px solid var(--border-strong);
  border-radius:4px;
  overflow:hidden;
  background:var(--black-soft);
}
.ps-visual img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width:760px){ .ps-strip{grid-template-columns:1fr;} }

/* ---------- INSTAGRAM EMBED ---------- */
.instagram-embed{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}
/* SnapWidget's single-row carousel content height is a fixed 4:9 ratio of
   its own width at every screen size (verified empirically) — aspect-ratio
   tracks that exactly, instead of a fixed px height that only matched the
   content at one specific width and left a gap everywhere else. */
.instagram-embed iframe{
  width:100%;
  aspect-ratio:9/4;
  border:none;
  overflow:hidden;
  display:block;
}

/* ---------- FINAL CTA ---------- */
.final-cta{
  text-align:center;
  padding:88px 0 110px;
}
.final-cta h2{
  font-size:clamp(30px,4.4vw,48px);
  max-width:680px;
  margin:0 auto 28px;
}
.final-cta h2 em{color:var(--gold-bright); font-style:italic;}

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--border);
  padding:56px 0 40px;
  background:var(--black-soft);
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:32px;
  margin-bottom:40px;
}
.footer-col h4{
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:16px;
}
.footer-col a, .footer-col p{
  display:block;
  font-size:14px;
  color:var(--white);
  margin-bottom:10px;
}
.footer-col a:hover{color:var(--gold-bright);}
.footer-social{
  display:flex;
  gap:14px;
  margin-top:4px;
}
.footer-social a{
  width:34px; height:34px;
  border:1px solid var(--border-strong);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease;
}
.footer-social a:hover{border-color:var(--gold-bright);}
.footer-social img{width:15px; height:15px;}
.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:12.5px;
  color:#7A7A74;
}

.placeholder-note{
  text-align:center;
  font-size:12px;
  color:#7A7A74;
  padding:14px 0 0;
}