/* ===========================================================================
   Variant 1A — override layer. Loads after styles.css in 1a.html only.

   2026-08-21 — "Merge" pass. Client asked to combine the restrained, big-photo
   layout of index.html with the strong 80s / blue-pink identity of the live
   Wix site (nostalgia-rush.com): neon hand-lettered wordmark, saturated
   blue→pink glow, punchier contrast. Same markup as index.html throughout —
   every change here is CSS-only, including the wordmark swap (background
   image over the existing text, which stays in the DOM for a11y).

   Reference points pulled straight off the live site (see
   assets/wordmark-neon.png, extracted from nostalgia-rush.com):
     - hand-lettered magenta script logo, transparent PNG
     - neon blue→pink double-triangle mark
     - hot magenta as the dominant pop color, cyan as the cool counterpart
   Kept OUT: the comic-starburst promo graphic and rainbow (blue/green/violet/
   pink) aurora — green read as a third color fighting the "blue-pink" brief,
   so it's dropped here in favor of a clean two-tone blue→pink sweep.
   =========================================================================== */

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  /* punchier, more saturated than the base file's cold single-accent take */
  --accent:      #2FE0FF; /* neon blue — top-of-page / "cool" moments */
  --accent-2:    #FF35C7; /* neon pink — bottom-of-page / "warm" moments, close to the live wordmark's magenta */
  --banner-pop:  #E8189F; /* brighter than the base's darkened banner-pop; still holds contrast on white */
  --panel:       #0B0812; /* faint blue-violet tint instead of neutral near-black */

  /* two-tone only — no green/violet mid-stops, so the sweep reads as one
     unmistakable "blue-pink" gesture rather than a rainbow */
  --glow-blue:   0, 208, 255;
  --glow-pink:   255, 45, 199;
}

/* ---------- logo mark: full triangle + wordmark lockup, CSS-only ---------- */
/* text node stays in the DOM (color: transparent, not display:none) so
   screen readers still get "Nostalgia Rush"; the glyphs occupy no visible
   pixels so they can't collide with the image sitting over them.
   2026-09-15: swapped the bare signature (wordmark-neon.png) for the full
   double-triangle lockup (logo-triangle.png, true alpha PNG) at Lucas's
   request — same treatment, just a wider source image (1109×647 vs
   2323×1193), so width/aspect-ratio moved with it. */
.top .mark {
  position: relative;
  color: transparent;
  display: inline-block;
  width: clamp(276px, 30vw, 380px);
  aspect-ratio: 1109 / 647;
  vertical-align: middle;
}
.top .mark:hover {
  color: transparent;
}
.top .mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/logo-triangle.png") no-repeat left center / contain;
  filter: drop-shadow(0 0 7px rgba(255, 45, 199, .4)) drop-shadow(0 0 14px rgba(0, 208, 255, .25));
}

/* ---------- hero: photo background + video card together ---------- */
/* same photo, same crop — only saturation/contrast move, so "high quality"
   photography stays intact and simply reads hotter. */
.hero-media img {
  filter: contrast(1.1) saturate(1.35) brightness(.95);
}
.quote-media img {
  filter: contrast(1.12) saturate(1.4) brightness(1.03);
}

/* Eyebrow tag above the homepage H1 (SEO: carries "saxophone player" next to
   the short H1). .hero-in's flex gap is 30px, sized for h1-to-video spacing;
   pull the tag tight against the h1 to match the eyebrow+headline grouping
   used on every other inner page (18px there). */
.hero-in .tag { margin-bottom: -12px; }

/* 2026-09-15: the promo video sits inside .hero-in, over the photo — Lucas
   wanted both back ("immediately show them what I am capable of," but the
   photo belongs too). It's an opaque panel (.video-feature already has a
   background), so it reads as a floating card rather than a hole in the
   photo — same visual logic as the polaroid floating over .book.
   Sized down on desktop (2026-09-15, second pass) so the card sits inside
   the text column and stops short of .hero-media's 45% starting edge —
   Lucas's own face in the photo was getting covered at the original
   760px width. Left full-width under 860px, where the photo is already a
   full-bleed background behind everything (not a side-by-side split), so
   there's nothing to collide with there. */
.hero-video {
  width: 100%;
  max-width: 820px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
@media (min-width: 861px) {
  .hero-video { max-width: min(460px, 42vw); }
}

/* stronger, two-tone aurora — same shape/position as the base file, pushed
   further past the first pass: bigger spread, hotter core, so it reads as a
   real light source in the corners instead of a tint. */
.hero::before {
  background:
    radial-gradient(78% 62% at 12% 10%, rgba(var(--glow-pink), .68), rgba(var(--glow-pink), .2) 45%, transparent 76%),
    radial-gradient(78% 62% at 90% 12%, rgba(var(--glow-blue), .72), rgba(var(--glow-blue), .22) 45%, transparent 76%);
}
.book::before {
  background:
    radial-gradient(78% 62% at 12% 94%, rgba(var(--glow-blue), .74), rgba(var(--glow-blue), .22) 45%, transparent 76%),
    radial-gradient(78% 62% at 90% 92%, rgba(var(--glow-pink), .7), rgba(var(--glow-pink), .2) 45%, transparent 76%);
}

/* ---------- buttons / nav — blue up top, pink down low ---------- */
/* mirrors the aurora's own blue→pink bookend: cool accent near the hero,
   warm accent by the time you reach the booking section. */
.top a:hover { color: var(--accent); text-shadow: 0 0 12px rgba(var(--glow-blue), .6); }

.btn:hover {
  box-shadow: 0 0 26px rgba(var(--glow-pink), .3);
}
.btn-line:hover {
  border-color: var(--accent-2);
  color: var(--accent-2);
  box-shadow: 0 0 22px rgba(var(--glow-pink), .35);
}

.q-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 18px rgba(var(--glow-blue), .35);
}

/* ---------- promo banner — thin neon top edge, hotter pop color ---------- */
.banner {
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--accent), var(--accent-2)) 1;
}
.b-dot { background: var(--banner-pop); }
@keyframes b-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232, 24, 159, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(232, 24, 159, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 24, 159, 0); }
}

/* 2026-09-15 — simplified to one line, sitewide, and the whole bar is now
   the link (no separate "Check 2027 dates" CTA sitting off to the side).
   Base .banner-in is a flex row with justify-content:space-between, tuned
   for two children (text block + CTA link); with only the sentence left,
   that would shove b-tag and b-main to opposite ends of the bar, so this
   pulls them back together on the left. */
a.banner-in {
  justify-content: flex-start;
  gap: 8px 10px;
  text-decoration: none;
  white-space: normal;
}
a.banner-in:hover .b-main { text-decoration: underline; }
a.banner-in:hover { color: var(--banner-pop); }

/* ---------- the "us." nudge arrow — pink, since it lands in the booking
   section where the aurora has already shifted warm ---------- */
.nudge { color: var(--accent-2); }

/* ---------- footer — pink to close the loop the blue nav mark opened ---------- */
footer a:hover { color: var(--accent-2); text-shadow: 0 0 10px rgba(var(--glow-pink), .5); }

/* 2026-09-15 — small, genuinely-visible keyword line, sitewide. Deliberately
   NOT display:none/clip-hidden "SEO text" — that's a real risk (Google's
   spam policies explicitly cover hidden text/links, and it can get a whole
   site penalized). This sits in the DOM and renders, just quietly, the same
   way the footer's own social links already do. */
.foot-tag {
  padding-block: 0 20px;
  font-family: var(--mono); font-size: .56rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); opacity: .65;
}

/* ---------- reviews: cyan count, pink open quote / blue close quote ---------- */
/* 2026-09-15: opening quote pink (accent-2), closing quote blue (accent) —
   Lucas's ask, both marks were blue before. */
.q-count { color: var(--accent); }
.quote blockquote::before {
  content: "\201C";
  color: var(--accent-2);
  margin-right: 2px;
}
.quote blockquote::after {
  content: "\201D";
  color: var(--accent);
  margin-left: 2px;
}

/* ===========================================================================
   Site nav — added for the multi-page pass (About/Video/Reviews/Weddings/
   Contact). Lives here rather than styles.css because it's new structure
   that only the merged pages use; 1a.html's .top now has three children
   (mark, .site-nav, .top-actions) instead of the base file's two.
   =========================================================================== */
.top { flex-wrap: nowrap; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.top-actions { display: flex; align-items: center; gap: 18px; }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 24px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
.site-nav a.is-active { color: var(--accent); }

@media (max-width: 860px) {
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 30;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    background: rgba(6, 4, 10, .97);
    backdrop-filter: blur(8px);
    font-size: 1.05rem;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .site-nav.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-toggle { display: flex; position: relative; z-index: 31; }
  .top-actions .nav-cta { display: none; }

  /* Mobile header: hamburger centered on top, logo centered below it. Both
     sit directly on the hero photo (no solid bar), so the photo itself is
     pushed down (see .hero-media / .inner-hero .hero-media below) to keep
     the subject's face clear of the larger logo instead. */
  .top {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 22px var(--pad) 20px;
  }
  .top-actions { order: 1; }
  .top .mark { order: 2; width: clamp(330px, 93vw, 450px); }
  .inner-hero-in { padding-top: 300px; }

  .hero-media { top: 0; }
}

/* ===========================================================================
   Homepage mobile: single-page accordion redesign (2026-09-16). Scoped to
   .hero / .acc so every other page's mobile header and layout are completely
   untouched — this only changes how 1a.html looks under 860px.
   =========================================================================== */
@media (max-width: 860px) {
  /* Small fixed text wordmark (left) + always-reachable hamburger (right),
     replacing the big centered stacked logo. Fixed so both stay usable no
     matter how far down the accordion the visitor has scrolled. */
  .hero .top {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 16px var(--pad);
    background: rgba(8, 6, 14, .72);
    z-index: 40;
  }
  .hero .top-actions { order: 0; }
  .hero .top .mark {
    order: 0;
    width: clamp(150px, 42vw, 210px);
    aspect-ratio: 10718 / 2047;
  }
  .hero .top .mark::before {
    background-image: url("assets/wordmark-neon.png");
    filter: drop-shadow(0 0 5px rgba(255, 45, 199, .55));
  }

  /* Match the exact same bottom-anchored spacing recipe used on every other
     inner page (.inner-hero-in), rather than a bespoke home-only value —
     simpler and keeps the title/tag placement consistent sitewide. */
  .hero-in { padding-bottom: 12px; gap: 6px; }
  /* The -12px tag pull-up (below) was calibrated against the old 30px base
     gap; against this tighter 6px mobile gap it goes negative and the tag
     collides with the H1. Cancel it here so mobile gets the same plain 6px
     eyebrow-to-headline spacing every other page uses. */
  .hero-in .tag { margin-bottom: 0; }
}

/* Accordion sections (About/Video/Weddings/Contact — new on mobile only —
   plus Reviews, reusing its existing desktop content). Desktop hides the new
   sections entirely below; Reviews' own desktop layout is untouched since
   its collapse behavior only exists inside this same mobile media query. */
.acc-new { display: none; }
.acc-head { display: none; }
.acc + .acc { border-top: 1px solid var(--line); }
/* containing block for #acc-reviews's absolutely-positioned .quote-media,
   so it sizes against the (collapsible, on mobile) body instead of escaping
   to the outer section — harmless on desktop, where this is a plain wrapper
   around the same content .quote-media always sat next to. */
.acc-body { position: relative; }

@media (max-width: 860px) {
  .acc-new { display: block; padding-block: 0; }
  #acc-reviews { padding-block: 0; }

  .acc-head {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 24px var(--pad);
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--text);
    text-align: left;
  }
  .acc-head .tag { margin: 0; }
  .acc-plus {
    position: relative;
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform .25s ease;
  }
  .acc-plus::before,
  .acc-plus::after {
    content: "";
    position: absolute;
    background: var(--text);
  }
  .acc-plus::before { left: 0; top: 50%; width: 100%; height: 2px; transform: translateY(-50%); }
  .acc-plus::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
  .acc-head[aria-expanded="true"] .acc-plus { transform: rotate(45deg); }

  .acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
  }
  .acc-body > .wrap { padding-block: 8px 40px; }

  /* Weddings accordion: full 9-item checklist needs tighter spacing than the
     standalone weddings.html page to stay compact once expanded on mobile. */
  #acc-weddings-body .pkg-list { gap: 6px; }
  #acc-weddings-body .pkg-list li { padding-bottom: 8px; font-size: .92rem; }
}

/* ===========================================================================
   Shared components for the new inner pages — built on the same tokens/
   utility classes as the home page (.wrap, .tag, .head, .btn, .rv, the
   two-tone aurora vars) so nothing here introduces a third visual language.
   =========================================================================== */

/* inner-page hero: shorter than the home hero, still full-bleed photo + nav */
.inner-hero {
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--black);
}
.inner-hero:has(.inner-hero-in:empty) {
  min-height: 30svh;
}
@media (max-width: 860px) {
  .inner-hero:has(.inner-hero-in:empty) { min-height: 400px; }
}
.inner-hero .hero-media { position: absolute; inset: 0; z-index: 0; }
@media (max-width: 860px) {
  .inner-hero .hero-media { top: 320px; }
}
.inner-hero .hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.1) saturate(1.35) brightness(1.05);
}
.inner-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(0deg, #000 0%, rgba(0,0,0,.4) 35%, rgba(0,0,0,.1) 65%, rgba(0,0,0,.3) 100%);
}
.inner-hero::before {
  content: "";
  position: absolute; top: -14%; left: -6%; right: -6%; height: 60%;
  z-index: 1; pointer-events: none;
  background:
    radial-gradient(156% 124% at 12% 10%, rgba(var(--glow-pink), .68), rgba(var(--glow-pink), .2) 45%, transparent 76%),
    radial-gradient(156% 124% at 90% 12%, rgba(var(--glow-blue), .72), rgba(var(--glow-blue), .22) 45%, transparent 76%);
  filter: blur(38px);
}
.inner-hero-in {
  position: relative; z-index: 2; width: 100%; max-width: 1240px;
  margin-inline: auto; padding: 130px var(--pad) 32px;
  display: flex; flex-direction: column; gap: 18px;
}
@media (max-width: 860px) {
  .inner-hero-in { padding-bottom: 12px; gap: 6px; }
}

/* Space between the hero title and the first line of body content, halved
   sitewide (2026-09-16) so it's consistent across every inner page — this
   targets only the hero-to-first-section gap, not section-to-section spacing
   further down the page (that stays the default `section` padding-block). */
.inner-hero + section { padding-top: clamp(36px, 5.5vw, 75px); }
.inner-hero-in h1 {
  margin: 0; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 3.2rem); text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.1; text-wrap: balance; max-width: 18ch;
}
.inner-hero-in .sub { margin: 0; max-width: 52ch; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.1rem); }

/* About page: "The Brand" and "Going the Distance" reused two different
   heading rules by accident (.book h2 is sized larger than plain .head h2,
   for CTA headlines like Weddings'/Contact's) — pin "Going the Distance"
   back to the standard .head size so both subsection headings match. */
#distance .head h1,
#distance .head h2 { font-size: clamp(1.35rem, 2.6vw, 2.1rem); max-width: 20ch; }

/* Large logo showcase next to "The Brand" copy — contain, not cover, so the
   triangle+wordmark never gets cropped like a photo would. */
.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line-2);
  padding: clamp(28px, 5vw, 64px);
}
.brand-logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(255, 45, 199, .35)) drop-shadow(0 0 26px rgba(0, 208, 255, .25));
}

/* article prose — About page bio copy */
.article { max-width: 720px; }
.article p { margin: 0 0 22px; color: var(--muted); font-size: 1.05rem; }
.article p b, .article p strong { color: var(--text); font-weight: 600; }
.article .lede { color: var(--text); font-size: clamp(1.05rem, 1.6vw, 1.25rem); }
.article-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
.article-grid .frame { overflow: hidden; background: var(--panel); border: 1px solid var(--line-2); }
.article-grid .frame img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .article-grid { grid-template-columns: 1fr; }
}

/* pill cloud — coverage cities on the About page */
.pill-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); padding: 9px 14px;
  border-radius: 999px; white-space: nowrap;
}
.pill.p-blue { border-color: rgba(var(--glow-blue), .5); color: var(--accent); }
.pill.p-pink { border-color: rgba(var(--glow-pink), .5); color: var(--accent-2); }

/* pull quote */
.pull {
  margin: 40px 0; padding-left: 22px; border-left: 2px solid var(--accent-2);
  font-family: var(--display); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.1rem, 2vw, 1.5rem); line-height: 1.3; max-width: 34ch;
}

/* social / video grid */
.tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px, 1.8vw, 22px); }
.tile {
  display: flex; flex-direction: column; gap: 14px; padding: 26px 22px;
  border: 1px solid var(--line-2); text-decoration: none; color: var(--text);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tile:hover { border-color: var(--accent-2); box-shadow: 0 0 24px rgba(var(--glow-pink), .25); transform: translateY(-2px); }
.tile .t-plat { font-family: var(--mono); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.tile .t-name { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; }
.tile .t-desc { color: var(--muted); font-size: .92rem; margin: 0; }
@media (max-width: 720px) { .tile-grid { grid-template-columns: 1fr; } }

.video-feature { position: relative; aspect-ratio: 16/9; background: var(--panel); border: 1px solid var(--line-2); overflow: hidden; display: block; }
.video-feature iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-feature img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.video-feature:hover img { transform: scale(1.03); }
.video-feature:hover .ig-play::before { border-color: var(--accent-2); box-shadow: 0 0 22px rgba(var(--glow-pink), .5); }
/* the homepage's featured clip is a <button> (opens a lightbox) instead of
   an <a> (Weddings' "Behind the Scenes" video stays a link to Instagram) —
   strip button UA defaults without touching .video-feature's own look. */
button.video-feature { appearance: none; padding: 0; font: inherit; text-align: inherit; cursor: pointer; width: 100%; }

/* Self-hosted video lightbox (2026-09-16) — plays in place, no external
   navigation. Opened/closed via script.js, guarded on [data-video-open]. */
.video-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(6, 4, 10, .92);
}
.video-lightbox[hidden] { display: none; }
.video-lightbox-backdrop { position: absolute; inset: 0; }
.video-lightbox-in { position: relative; z-index: 1; width: 100%; max-width: 420px; }
.video-lightbox-in video {
  display: block; width: 100%; max-height: 86svh;
  background: #000;
}
.video-lightbox-close {
  position: absolute; top: -46px; right: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--text); font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}
.video-lightbox-close:hover { border-color: var(--accent); color: var(--accent); }

/* Weddings page — package checklist beside the full, uncropped reference
   photo (Lucas: "I actually need the whole thing directly on the page...
   this will be a reference point for some of the equipment"). Deliberately
   NOT object-fit:cover — that would crop it right back down. */
.pkg-grid {
  display: grid; grid-template-columns: 1fr .8fr;
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.pkg-photo { margin: 0; }
.pkg-photo img { width: 100%; height: auto; display: block; border: 1px solid var(--line-2); }
.pkg-photo figcaption {
  margin-top: 12px; font-family: var(--mono); font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 860px) {
  .pkg-grid { grid-template-columns: 1fr; }
  .pkg-photo { max-width: 420px; }
}

/* 2026-09-15 — Video page now leads with real Instagram content instead of
   the YouTube promo (Lucas: "featuring my instagram's feed... not the
   youtube page"). Self-hosted thumbnails from his actual posts (see the
   comment in video.html on why not a live embed), each linking out to the
   real post — same 9-16 portrait crop as the reels themselves. */
.ig-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.ig-post {
  position: relative; display: block; aspect-ratio: 1/1; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line-2);
}
.ig-post img {
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.06) saturate(1.15);
  transition: transform .35s ease, filter .35s ease;
}
.ig-post:hover img { transform: scale(1.04); filter: contrast(1.1) saturate(1.25) brightness(1.05); }
.ig-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.ig-play::before {
  content: "";
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(10, 8, 16, .55);
  border: 1.5px solid rgba(255, 255, 255, .8);
  backdrop-filter: blur(2px);
  transition: border-color .25s, box-shadow .25s;
}
.ig-play::after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(2px);
}
.ig-post:hover .ig-play::before { border-color: var(--accent-2); box-shadow: 0 0 22px rgba(var(--glow-pink), .5); }
@media (max-width: 860px) {
  .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 560px) {
  .ig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* review list — Reviews page */
.review-list { display: flex; flex-direction: column; gap: 0; }
.review-card { padding: clamp(34px, 5vw, 56px) 0; border-top: 1px solid var(--line); }
.review-card:first-child { border-top: 0; }
.review-card blockquote {
  margin: 0 0 20px; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; font-size: clamp(1.2rem, 2.6vw, 1.8rem); line-height: 1.25; max-width: 34ch;
}
.review-card blockquote::before { content: "\201C"; color: var(--accent-2); margin-right: 3px; }
.review-card blockquote::after { content: "\201D"; color: var(--accent); margin-left: 2px; }
.review-card p.body { max-width: 60ch; color: var(--muted); margin: 0 0 18px; }
.review-card .meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.review-card .meta a { color: var(--accent); text-decoration: none; }
.review-card .meta a:hover { text-decoration: underline; }
.review-card .meta em { font-style: normal; color: var(--accent-2); }

/* review card with a real video thumbnail on the right — same idea as
   text-review, but for the plain-text Google-review cards that had empty
   space to the right of the quote */
.review-card.has-video { display: grid; grid-template-columns: 1fr 168px; gap: clamp(22px, 3.5vw, 36px); align-items: start; }
.review-card .rc-video {
  display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--line-2); box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.review-card .rc-video img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.review-card .rc-video:hover img { transform: scale(1.04); }
@media (max-width: 680px) {
  .review-card.has-video { grid-template-columns: 1fr; }
  .review-card .rc-video { max-width: 220px; margin-top: 18px; }
}

/* text-message reviews — real screenshot next to a pulled quote */
.text-review-list { display: flex; flex-direction: column; gap: 0; }
.text-review {
  display: grid; grid-template-columns: 168px 1fr; gap: clamp(22px, 3.5vw, 36px);
  align-items: start; padding: clamp(34px, 5vw, 56px) 0; border-top: 1px solid var(--line);
}
.text-review:first-child { border-top: 0; }
.text-review-img {
  width: 100%; display: block; border-radius: 16px; border: 1px solid var(--line-2);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.text-review blockquote {
  margin: 0 0 14px; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; font-size: clamp(1.1rem, 2.2vw, 1.5rem); line-height: 1.25; max-width: 34ch;
}
.text-review blockquote::before { content: "\201C"; color: var(--accent-2); margin-right: 3px; }
.text-review blockquote::after { content: "\201D"; color: var(--accent); margin-left: 2px; }
.text-review p.body { max-width: 58ch; color: var(--muted); margin: 0 0 14px; font-size: .92rem; font-style: italic; }
.text-review .meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--mono);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.text-review .meta em { font-style: normal; color: var(--accent-2); }
@media (max-width: 680px) {
  .text-review { grid-template-columns: 1fr; }
  .text-review-img { max-width: 220px; margin: 0 auto; }
}

/* package checklist + pricing — Weddings page */
.pkg-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 28px; }
.pkg-list li {
  display: flex; gap: 12px; align-items: baseline; color: var(--text); font-size: .98rem;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.pkg-list li::before { content: "\2022"; color: var(--accent-2); font-size: 1.2em; line-height: 1; }
@media (max-width: 720px) { .pkg-list { grid-template-columns: 1fr; } }

.price-table { display: flex; flex-direction: column; margin-top: 8px; }
.price-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 1px solid var(--line); }
.price-row .p-date { color: var(--text); }
.price-row .p-amt { font-family: var(--mono); letter-spacing: .08em; color: var(--accent); }
.price-row.is-booked .p-amt { color: var(--muted); }
.price-row.is-deal .p-amt { color: var(--accent-2); }
.price-row .p-note { font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }