/* ============================================================
   JRAM THE GOAT — RGV MEDIA KIT
   Golden-hour editorial system on the locked palette.
   ============================================================ */

/* ============ PALETTE (locked) + derived tokens ============ */
:root{
  --blush:   #FFDCDC;   /* hero / accents */
  --cream:   #FFF2EB;   /* main background */
  --peach:   #FFE8CD;   /* cards / alt sections */
  --dpeach:  #FFD6BA;   /* borders / dividers / hovers */
  --ink:     #2C1A0E;   /* body text — warm espresso */
  --rose:    #C2607A;   /* CTA / links */
  --taupe:   #9C7B6E;   /* captions / subtext */

  --serif: 'Fraunces', Georgia, serif;
  --sans:  'Outfit', 'Helvetica Neue', sans-serif;

  /* derived — all mixed from the locked seven */
  --ink-deep:  #1F1108;                  /* darker espresso for the dark chapter */
  --rose-soft: #D8849A;                  /* rose lifted for dark backgrounds */
  --body-warm: #5A4536;                  /* long-form body text on cream */
  --line:      var(--dpeach);
  --shadow-warm: 44,26,14;               /* rgb triplet for shadows */
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --ease: cubic-bezier(.16,.8,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:300;
  background:var(--cream);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--rose);text-decoration:none}
ul{list-style:none}
strong{font-weight:500}

h1,h2,h3{font-family:var(--serif);font-weight:420;line-height:1.06;letter-spacing:-.015em}
h1,h2{text-wrap:balance}
h2 em, h1 em{font-style:italic;color:var(--rose);font-weight:380}
::selection{background:var(--rose);color:var(--cream)}

/* focus states — keyboard navigation stays visible everywhere */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--rose);outline-offset:3px;border-radius:6px;
}

/* ============ SHARED STRUCTURE ============ */
.section{padding:7.5rem 1.5rem}
.wrap{max-width:1120px;margin:0 auto}
.section-head{margin-bottom:3.5rem}
.section-head h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
.section-sub{
  color:var(--taupe);max-width:52ch;margin-top:1.25rem;font-size:1rem;
}

.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--taupe);font-weight:500;margin-bottom:1.4rem;
}
.eyebrow::before{
  content:"";width:2.2rem;height:1px;background:var(--rose);flex:none;opacity:.6;
}
.hero .eyebrow, .quote-band .eyebrow, .contact .eyebrow,
.section-head--center .eyebrow{justify-content:center}
.section-head--center{text-align:center}
.section-head--center .section-sub{margin-left:auto;margin-right:auto}
.hero .eyebrow::after, .contact .eyebrow::after,
.section-head--center .eyebrow::after{
  content:"";width:2.2rem;height:1px;background:var(--rose);flex:none;opacity:.6;
}

/* film grain — kills the flat-render look, sits over everything */
.grain{
  position:fixed;inset:-100px;z-index:200;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-stagger > *{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger.is-visible > *{opacity:1;transform:translateY(0)}
.reveal-stagger.is-visible > *:nth-child(1){transition-delay:.02s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.09s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.16s}
.reveal-stagger.is-visible > *:nth-child(4){transition-delay:.23s}
.reveal-stagger.is-visible > *:nth-child(5){transition-delay:.3s}
.reveal-stagger.is-visible > *:nth-child(6){transition-delay:.37s}
.reveal-stagger.is-visible > *:nth-child(7){transition-delay:.44s}
.reveal-stagger.is-visible > *:nth-child(8){transition-delay:.51s}

/* ============ NAV ============ */
nav{
  position:sticky;top:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 1.5rem;
  background:rgba(255,242,235,.8);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .35s ease, border-color .35s ease;
}
nav.is-scrolled{
  border-color:var(--line);
  box-shadow:0 10px 30px -22px rgba(var(--shadow-warm),.4);
}
.nav-name{font-family:var(--serif);font-size:1.2rem;font-weight:460}
.nav-name span{font-style:italic;color:var(--rose);font-weight:380}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-cta{
  background:var(--rose);color:#fff;border:none;cursor:pointer;
  font-family:var(--sans);font-weight:500;font-size:.85rem;white-space:nowrap;
  padding:.68rem 1.5rem;border-radius:999px;
  transition:background .25s ease, transform .2s ease-out, box-shadow .25s ease;
}
.nav-cta:hover{background:#a94e66;box-shadow:0 10px 24px -12px rgba(194,96,122,.7)}
.nav-cta:active{transform:scale(.96)}
/* secondary "Download PDF" — outlined in ink so its label never blends into
   the cream nav background; fills on hover, and visibly depresses on click
   (!important beats the magnetic inline transform so the press always shows) */
.nav-pdf{
  display:inline-flex;align-items:center;
  font-family:var(--sans);font-weight:500;font-size:.85rem;
  color:var(--ink);background:transparent;border:1px solid var(--ink);
  padding:.6rem 1.3rem;border-radius:999px;white-space:nowrap;cursor:pointer;
  transition:background .25s ease, color .25s ease, transform .12s ease-out;
}
.nav-pdf:hover{background:var(--ink);color:var(--cream)}
.nav-pdf:active{transform:scale(.93) !important}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:min(94vh, 980px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:5rem 1.5rem 6rem;
  background:linear-gradient(168deg, var(--blush) 0%, var(--cream) 62%);
  overflow:hidden;
}
#heroCanvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}
.hero-glow{
  position:absolute;inset:-10% 0;pointer-events:none;
  background:
    radial-gradient(42rem 42rem at 18% 8%, rgba(255,214,186,.55), transparent 60%),
    radial-gradient(36rem 36rem at 84% 30%, rgba(255,220,220,.6), transparent 65%),
    radial-gradient(30rem 30rem at 60% 100%, rgba(255,232,205,.5), transparent 70%);
}
.hero-inner{position:relative;z-index:2;max-width:900px}
.hero h1{
  font-size:clamp(2.9rem, 8vw, 6.2rem);
  margin:.75rem 0 1.5rem;
}
.hero h1 em{display:inline-block}
.hero .tagline{
  font-size:clamp(1rem, 2.2vw, 1.2rem);
  color:var(--body-warm);max-width:560px;margin:0 auto 3.5rem;
  font-weight:300;
}
.hero-stats{
  display:flex;justify-content:center;gap:0;flex-wrap:wrap;
}
.hero-stat{padding:0 2.75rem;position:relative}
.hero-stat + .hero-stat::before{
  content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:linear-gradient(rgba(194,96,122,0), rgba(194,96,122,.4), rgba(194,96,122,0));
}
.hero-stat .num{
  font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.1rem);
  display:block;font-weight:440;
}
.hero-stat .lbl{
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--taupe);
}
.scroll-cue{
  margin-top:4rem;font-size:.68rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--taupe);
  opacity:0;
  animation:heroIn .8s var(--ease) .85s forwards, bob 2.4s ease-in-out 1.7s infinite;
}
.scroll-cue::after{
  content:"";display:block;width:1px;height:2.4rem;margin:.7rem auto 0;
  background:linear-gradient(var(--rose), transparent);
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* orchestrated page-load entrance, staggered top to bottom */
@keyframes heroIn{from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)}}
.hero .eyebrow{opacity:0;animation:heroIn .8s var(--ease) .05s forwards}
.hero h1{opacity:0;animation:heroIn .9s var(--ease) .18s forwards}
.hero .tagline{opacity:0;animation:heroIn .9s var(--ease) .36s forwards}
.hero .hero-stats{opacity:0;animation:heroIn .9s var(--ease) .54s forwards}

/* ============ TICKER ============ */
.ticker{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--cream);
  overflow:hidden;padding:1rem 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Seamless loop: three IDENTICAL groups. Each group carries all of its own
   spacing (internal gap + a matching trailing padding-right), so a group is a
   perfect repeat unit and translating by exactly one group (-33.3333% of three)
   wraps with no measurable seam or dead gap, on any viewport. */
.ticker-track{
  display:flex;align-items:center;width:max-content;
  animation:tick 34s linear infinite;
}
.ticker-group{
  display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;flex:none;
}
.ticker-track span{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  color:var(--taupe);white-space:nowrap;font-weight:380;
}
.ticker-track i{color:var(--rose);font-style:normal;font-size:.7rem;opacity:.8}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}

/* ============ ABOUT ============ */
.about-grid{
  display:grid;grid-template-columns:1fr 1.15fr;gap:4.5rem;align-items:center;
}
.portrait{position:relative}
.portrait::before{
  content:"";position:absolute;inset:1.4rem -1.4rem -1.4rem 1.4rem;
  background:var(--blush);border-radius:var(--r-lg);z-index:-1;
}
/* overflow-hidden frame so the parallax image can drift without gaps */
.portrait-media{
  border-radius:var(--r-lg);overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 26px 50px -20px rgba(var(--shadow-warm),.38);
}
.portrait-photo{
  width:100%;height:120%;   /* extra height absorbs the parallax travel */
  object-fit:cover;object-position:center;
  will-change:transform;
}
.portrait figcaption{
  margin-top:1.6rem;font-family:var(--serif);font-style:italic;
  color:var(--taupe);font-size:.9rem;text-align:right;
}
.about h2{font-size:clamp(2.1rem,4.6vw,3.2rem);margin-bottom:1.4rem}
.about p{color:var(--body-warm);margin-bottom:1.1rem;max-width:56ch}
.audience-tags{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.75rem}
.tag{
  background:rgba(255,232,205,.65);border:1px solid var(--line);
  padding:.45rem 1.05rem;border-radius:999px;font-size:.8rem;color:var(--ink);
  transition:background .25s ease, transform .25s ease;
}
.tag:hover{background:var(--dpeach);transform:translateY(-2px)}

/* ============ SHOWCASE CAROUSEL ============ */
.showcase{
  background:var(--peach);text-align:center;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  /* --gap-x: horizontal distance of the side phones from center (bigger = wider gaps).
     --drop: how far the side phones fall below center for depth.
     --head-h: fixed height of the caption+tag block above each phone, so all three
     phones stay vertically aligned no matter how their titles wrap. */
  --cardw:300px;--phone-h:614px;--gap-x:94%;--drop:52px;--head-h:6.5rem;--stage-h:718px;
}
/* tight top/bottom + small heading gap so the phone and its stat overlay read
   as one group and both sit in-frame together when scrolled to */
.section.showcase{padding:3rem 1.5rem 2.5rem}
.showcase .section-head{margin-bottom:1.1rem}
.showcase h2{font-size:clamp(2.1rem,4.6vw,3.2rem)}
.carousel{
  position:relative;max-width:1500px;margin:0 auto;
  outline:none;user-select:none;-webkit-user-select:none;
}
.carousel::before{
  content:"";position:absolute;inset:-2rem -4rem;z-index:0;
  background:radial-gradient(24rem 20rem at 50% 52%, rgba(194,96,122,.16), transparent 68%);
  pointer-events:none;
}
.car-stage{
  position:relative;z-index:1;height:var(--stage-h);
  touch-action:pan-y;cursor:grab;
  user-select:none;-webkit-user-select:none;
}
.car-stage:active{cursor:grabbing}
.pcard{
  position:absolute;top:0;left:50%;width:var(--cardw);
  margin-left:calc(var(--cardw) / -2);
  transform-origin:center top;
  /* per-slot easing (--pease) + tiny stagger (--pdelay) set from JS give the
     ring a free-flowing, springy glide instead of a rigid lockstep move */
  transition-property:transform, opacity, filter;
  transition-duration:var(--pdur,.42s);
  transition-timing-function:var(--pease, cubic-bezier(.32,1.28,.5,1));
  transition-delay:var(--pdelay, 0s);
  will-change:transform,opacity;
  cursor:pointer; /* pointer on every phone, center included */
}
/* veil: fades a back phone toward the background for depth. It is clipped to the
   phone's rounded silhouette (border-radius:38px on .pphone::after) and NOT the
   rectangular card. A card-sized rectangle (the old .pcard::after) painted solid
   peach over the transparent corner-gaps beside the phone, masking the rose
   background glow (.carousel::before) and leaving a lighter rectangular patch
   around side phones that didn't match the background — measured ~13 RGB units
   off at the gap. Tinting only the rounded phone leaves the gaps untouched, so
   the glow reads continuously and all four corners meet the background cleanly. */
.pphone::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  border-radius:38px;background:var(--peach);opacity:var(--veil,0);
  transition:opacity var(--pdur,.42s) ease var(--pdelay,0s);
}
/* fixed-height header keeps every phone's top at the same Y across cards.
   Recede the caption/stats of back phones with the SAME depth cue via opacity
   (graded by --veil) rather than a peach fill, so nothing paints over the
   background — matching the phone's veil without any rectangle. */
.phead{
  height:var(--head-h);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  overflow:hidden;
  opacity:calc(1 - var(--veil,0) * 0.6);
  transition:opacity var(--pdur,.42s) ease var(--pdelay,0s);
}
.pphone{
  width:100%;aspect-ratio:264/540;
  border-radius:38px;background:var(--ink);padding:11px;
  position:relative;
  /* Depth shadow via drop-shadow, NOT box-shadow: a box-shadow's negative
     spread (needed to keep the glow tight) also shrinks the shadow's corner
     radius, so it turned boxy — and with the downward y-offset that squared-off
     shape poked past the phone's rounded BOTTOM corners as a hard rectangular
     edge (hidden up top where the offset tucks it behind the body). drop-shadow
     has no spread: it always traces the phone's actual rounded silhouette, so
     the shadow follows all four corners cleanly and the bottom matches the top. */
  filter:drop-shadow(0 26px 26px rgba(var(--shadow-warm),.34));
}
.pphone::before{
  content:"";position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:82px;height:21px;background:var(--ink);border-radius:12px;z-index:3;
}
/* screen radius matches the frame's INNER radius (38 − 11px padding) and its
   fallback colour matches the frame, so the rounded corners read as one solid
   dark frame instead of showing a lighter seam/peach edge at the corners */
.pscreen{
  width:100%;height:100%;border-radius:27px;overflow:hidden;
  background:var(--ink);position:relative;
}
/* The corner fix, at the source: Safari/WebKit does NOT clip a composited
   child (a <video>) to an ANCESTOR's border-radius + overflow:hidden, so the
   video's square corners bled over the frame's rounded corners — a light
   "corner piece" that never matched the dark bezel (invisible in Chrome, which
   clips correctly). Rounding the video element ITSELF makes WebKit clip the
   video's own box, so its corners are truly rounded on every engine. The 27px
   matches the screen radius; behind each rounded corner is the ink screen/frame,
   so the corner reads as one solid dark bezel that meets the page cleanly. */
.pvideo{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:27px;
  -webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;
}
/* double-tap "like" heart (TikTok-style) — a one-off pop over the active
   video. pointer-events:none so it never blocks a follow-up tap/swipe. */
.like-heart{
  position:absolute;z-index:6;pointer-events:none;
  width:74px;height:74px;margin:-37px 0 0 -37px;
  transform:rotate(var(--rot,-10deg)) scale(0);
  animation:likePop .8s cubic-bezier(.2,.75,.3,1) forwards;
  will-change:transform,opacity;
}
.like-heart svg{
  width:100%;height:100%;display:block;
  filter:drop-shadow(0 6px 16px rgba(44,26,14,.5));
}
@keyframes likePop{
  0%{transform:rotate(var(--rot,-10deg)) scale(0);opacity:0}
  18%{transform:rotate(var(--rot,-10deg)) scale(1.18);opacity:1}
  34%{transform:rotate(var(--rot,-10deg)) scale(.9);opacity:1}
  50%{transform:rotate(var(--rot,-10deg)) scale(1.03);opacity:1}
  72%{transform:rotate(var(--rot,-10deg)) scale(1);opacity:.95}
  100%{transform:rotate(var(--rot,-10deg)) scale(1.08) translateY(-30px);opacity:0}
}
@keyframes likeFade{0%{opacity:0;transform:scale(.85)}25%{opacity:1;transform:scale(1)}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .like-heart{animation:likeFade .45s ease forwards}
}
/* category pill — sits at the top of the header, above the stat numbers */
.ptag{
  display:block;width:fit-content;margin:0 auto .55rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  background:var(--cream);color:var(--ink);
  padding:.42rem .95rem;border-radius:999px;border:1px solid var(--line);
  box-shadow:0 6px 16px -10px rgba(var(--shadow-warm),.55);
  transition:transform .42s var(--pease, ease);
}
/* MOBILE (item 2): a side phone's label + numbers shrink so neighbouring
   phones' text doesn't overlap; they scale back to full size when centred.
   (.ptag on mobile is absolute with translateX(-50%), so keep that.) */
@media (max-width:820px){
  .pcard:not(.is-center) .pmeta{transform:scale(.78);transform-origin:bottom center}
  .pcard:not(.is-center) .ptag{transform:translateX(-50%) scale(.8)}
}
/* caption + stats, sitting above the phone (below the category tag) */
.pmeta{margin:0 0 .55rem;text-align:center;transition:transform .42s var(--pease, ease)}
.pmeta h3{font-size:1.02rem;font-style:italic;font-weight:400;line-height:1.15}
.pmeta-stats{font-size:1.05rem;color:var(--taupe);margin-top:.3rem}
.pmeta-stats b{font-weight:500;color:var(--body-warm)}

/* plain arrow glyphs — understated, parked in the open gutter to the sides of
   the phones (not over them), vertically centered. A soft cream halo keeps
   them legible on narrow screens where the phones fill the width. */
.car-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:5;background:none;border:none;box-shadow:none;padding:.4rem .55rem;
  color:var(--taupe);font-size:2.4rem;line-height:1;cursor:pointer;
  text-shadow:0 1px 6px rgba(255,242,235,.9);
  transition:color .2s ease, transform .2s ease;
}
.car-arrow span{pointer-events:none}
.car-arrow--prev{left:.75rem}
.car-arrow--next{right:.75rem}
.car-arrow:hover{color:var(--rose);transform:translateY(-50%) scale(1.18)}
.car-arrow:active{transform:translateY(-50%) scale(.9)}
.car-dots{display:flex;justify-content:center;gap:13px;margin-top:3rem}
.car-dots .cdot{
  width:7px;height:7px;border-radius:50%;background:var(--dpeach);
  transition:background .3s ease, transform .3s ease;
}
.car-dots .cdot.is-active{background:var(--rose);transform:scale(1.3)}
.reel-note{margin-top:1.1rem;font-size:.8rem;color:var(--taupe);font-style:italic;font-family:var(--serif)}
.reel-note a{color:var(--rose);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.reel-note a:hover{color:#a94e66}

/* ============ PILLARS (editorial index rows) ============ */
.pillar-list{border-top:1px solid var(--line)}
.pillar-row{
  display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:baseline;
  padding:1.8rem .5rem;border-bottom:1px solid var(--line);
  /* opacity + transform added so the reveal fade/slide plays (hover only
     animates background/padding, so this doesn't affect the hover) */
  transition:background .3s ease, padding .3s ease, opacity .7s var(--ease), transform .7s var(--ease);
}
.pillar-row:hover{background:rgba(255,232,205,.45);padding-left:1.25rem;padding-right:1.25rem}
.pillar-row h3{
  font-size:clamp(1.5rem,3vw,2.1rem);font-style:italic;font-weight:400;
}
.pillar-row p{color:var(--taupe);font-size:.95rem;max-width:48ch}

/* ============ RECEIPTS — the dark chapter ============ */
/* item 5: shorter Receipts + Coverage sections (tighter top/bottom + heading gap) */
.section.numbers{padding-top:5rem;padding-bottom:5rem}
.section.pillars{padding-top:5.75rem;padding-bottom:5.75rem}
.numbers .section-head{margin-bottom:2.5rem}
.pillars .section-head{margin-bottom:2.25rem}
.dark{
  background:linear-gradient(178deg, var(--ink) 0%, var(--ink-deep) 100%);
  color:var(--cream);position:relative;overflow:hidden;
}
.dark-glow{
  position:absolute;inset:-12% 0;pointer-events:none;
  background:
    radial-gradient(50rem 34rem at 82% 0%, rgba(194,96,122,.16), transparent 62%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(255,214,186,.08), transparent 60%);
}
.dark .wrap{position:relative;z-index:1}
.dark .eyebrow{color:var(--dpeach)}
.dark .eyebrow::before{background:var(--rose-soft)}
.dark h2 em{color:var(--rose-soft)}

.engagement-row{
  display:grid;grid-template-columns:auto 1fr;gap:3.5rem;align-items:center;
  padding:2.4rem 0 2.6rem;border-top:1px solid rgba(255,214,186,.14);
  border-bottom:1px solid rgba(255,214,186,.14);margin-bottom:2.75rem;
}
.engagement-num{
  font-family:var(--serif);font-style:italic;font-weight:380;
  font-size:clamp(4.5rem,11vw,8.5rem);line-height:.9;
  color:var(--dpeach);display:block;will-change:transform;
}
.engagement-lbl{
  display:block;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rose-soft);margin-top:1rem;
}
.engagement-copy p{
  color:rgba(255,232,214,.78);max-width:44ch;font-size:1.02rem;
}

.platform-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:3rem;
}
.platform-card{
  background:rgba(255,242,235,.045);
  border:1px solid rgba(255,214,186,.16);
  border-radius:var(--r-lg);padding:2.25rem 2.25rem 1.75rem;
  transition:border-color .3s ease, background .3s ease, transform .3s ease, opacity .7s var(--ease);
}
.platform-card:hover{
  border-color:rgba(255,214,186,.34);background:rgba(255,242,235,.07);
  transform:translateY(-4px);
}
.platform-head{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:1.4rem;border-bottom:1px solid rgba(255,214,186,.14);
}
.platform-head h3{font-size:1.7rem;font-style:italic;font-weight:400}
.platform-head .handle{font-size:.8rem;color:var(--rose-soft);letter-spacing:.05em;transition:color .2s ease}
a.handle:hover{color:var(--dpeach);text-decoration:underline;text-underline-offset:2px}
.platform-stats{display:grid;grid-template-columns:1fr 1fr;}
.pstat{padding:1.4rem 0 1.1rem}
.pstat:nth-child(odd){padding-right:1.25rem;border-right:1px solid rgba(255,214,186,.1)}
.pstat:nth-child(even){padding-left:1.25rem}
.pstat:nth-child(-n+2){border-bottom:1px solid rgba(255,214,186,.1)}
.pnum{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);display:block;font-weight:420}
.plbl{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,226,209,.55);display:block;margin-top:.25rem}

.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.aud-title{
  font-size:1.35rem;font-style:italic;font-weight:400;margin-bottom:1.75rem;
}
.bar-row{margin-bottom:1.5rem}
.bar-row .lbl{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.5rem;color:rgba(255,232,214,.85)}
.bar{height:8px;border-radius:999px;background:rgba(255,242,235,.1);overflow:hidden}
.bar-fill{
  height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg, var(--rose), var(--rose-soft));
  transition:width 1.2s var(--ease);
}
.aud-note{font-size:.85rem;color:rgba(255,226,209,.55);margin-top:1.75rem}
.aud-copy p{color:rgba(255,232,214,.78);font-size:.98rem;margin-bottom:1.75rem;max-width:46ch}
.city-list li{
  display:flex;align-items:baseline;gap:1.1rem;
  padding:.7rem 0;border-bottom:1px solid rgba(255,214,186,.12);
  font-family:var(--serif);font-size:1.1rem;
}
.city-list li span{
  font-family:var(--sans);font-size:.65rem;letter-spacing:.15em;
  color:var(--rose-soft);
}

/* ============ TESTIMONIAL ============ */
.quote-band{
  background:var(--peach);text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;
}
.quote-band .wrap{max-width:880px}
.quote-band blockquote{position:relative;will-change:transform}
/* redesigned quotation-mark icon — a soft, rounded filled double-quote glyph
   that sits as a rose accent above the pull quote */
.quote-mark{
  display:block;width:clamp(44px,5.5vw,60px);height:auto;margin:0 auto 1.9rem;
  fill:var(--rose);opacity:.9;
}
.quote-band blockquote p{
  font-family:var(--serif);font-style:italic;font-weight:380;
  font-size:clamp(1.45rem,3.2vw,2.3rem);line-height:1.32;color:var(--ink);
}
.quote-band cite{
  display:block;margin-top:2rem;font-style:normal;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);
}

/* ============ RATES — the menu ============ */
.rates{background:var(--cream)}
.menu-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch;
  max-width:1040px;margin:0 auto;
}
.tier{
  background:rgba(255,255,255,.6);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:2.5rem 2.1rem;
  display:flex;flex-direction:column;position:relative;
  /* opacity is listed so the scroll-reveal fade actually plays — a bare
     `transition:transform,box-shadow` here was clobbering the reveal-stagger
     opacity transition, making these cards pop in instantly */
  transition:transform .3s ease, box-shadow .3s ease, opacity .7s var(--ease);
}
.tier:hover{transform:translateY(-6px);box-shadow:0 26px 48px -24px rgba(var(--shadow-warm),.28)}
.tier h3{font-size:1.7rem;font-style:italic;font-weight:400}
.tier-desc{font-size:.88rem;color:var(--taupe);margin:.6rem 0 1.75rem;min-height:2.6em}
.tier-price{
  font-family:var(--serif);font-size:2.6rem;font-weight:420;line-height:1;
  padding-bottom:1.75rem;margin-bottom:1.6rem;
  border-bottom:1px solid var(--line);
}
.tier-price span{font-size:1rem;color:var(--taupe);font-family:var(--sans)}
.tier ul li{
  font-size:.88rem;color:var(--body-warm);
  padding:.55rem 0 .55rem 1.4rem;position:relative;
}
.tier ul li::before{
  content:"✦";position:absolute;left:0;top:.6rem;
  color:var(--rose);font-size:.6rem;
}
.tier--featured{
  background:linear-gradient(174deg, var(--ink), var(--ink-deep));
  border-color:var(--ink);color:var(--cream);
  box-shadow:0 34px 60px -26px rgba(var(--shadow-warm),.55);
}
.tier--featured:hover{box-shadow:0 40px 70px -26px rgba(var(--shadow-warm),.6)}
.tier--featured .tier-desc{color:rgba(255,226,209,.6)}
.tier--featured .tier-price{border-color:rgba(255,214,186,.18)}
.tier--featured ul li{color:rgba(255,232,214,.82)}
.tier--featured ul li::before{color:var(--rose-soft)}
.tier-badge{
  position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);
  background:var(--rose);color:#fff;font-size:.62rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  padding:.42rem 1.1rem;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 18px -8px rgba(194,96,122,.7);
}

/* ============ PROCESS ============ */
.process{
  background:var(--peach);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;
  max-width:980px;margin:0 auto;
}
.step{text-align:left;position:relative;padding-top:1rem}
.step-num{
  font-family:var(--serif);font-style:italic;font-size:3.4rem;font-weight:340;
  color:var(--rose);line-height:1;display:block;margin-bottom:1rem;
}
.step h3{font-size:1.25rem;margin-bottom:.5rem;font-weight:420}
.step p{font-size:.9rem;color:var(--body-warm);max-width:30ch}

/* ============ CONTACT ============ */
.contact{
  background:linear-gradient(180deg, var(--cream) 0%, var(--blush) 100%);
  text-align:center;padding-bottom:8.5rem;
}
.contact h2{font-size:clamp(2.2rem,5.4vw,3.8rem);margin-bottom:1.25rem}
.contact-sub{color:var(--body-warm);max-width:460px;margin:0 auto 3rem}
.contact-details{
  display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;
  font-size:.95rem;margin-bottom:3rem;
}
.contact-details div{transition:transform .25s ease, color .25s ease}
.contact-details div:hover{transform:translateY(-2px);color:var(--rose)}
.contact-details span{display:block;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:.2rem}
.contact-details a{color:inherit;text-decoration:none;transition:color .2s ease}
.contact-details a:hover{color:var(--rose);text-decoration:underline;text-underline-offset:2px}
/* Phone & email = click-to-copy buttons. Black by default, no permanent
   underline (only on hover, like the TikTok/Instagram links). On click they
   flash pink for ~1s then ease back to black — a button-press confirmation. */
.copy-email{
  font:inherit;color:var(--ink);background:none;border:0;padding:0;margin:0;cursor:pointer;
  position:relative;display:inline-block;
  text-decoration:none;text-underline-offset:2px;
  transition:color .3s ease;
}
.copy-email:hover,
.contact-details div:hover .copy-email{text-decoration:underline}
.copy-email.is-flash{color:var(--rose)}

/* hover tooltip for the social handles ("Visit TikTok?" / "Visit Instagram?") */
.tip{position:relative}
.tip::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:100%;margin-bottom:.55rem;
  transform:translateX(-50%) translateY(4px);
  background:var(--rose);color:#fff;
  font-family:var(--sans);font-weight:500;font-size:.62rem;letter-spacing:.02em;
  text-transform:none;padding:.34rem .62rem;border-radius:7px;white-space:nowrap;
  opacity:0;pointer-events:none;
  box-shadow:0 8px 20px -8px rgba(44,26,14,.5);
  transition:opacity .2s ease, transform .2s ease;
  z-index:30;
}
.tip::before{
  content:"";position:absolute;left:50%;bottom:100%;margin-bottom:.3rem;
  transform:translateX(-50%) translateY(4px);
  border:5px solid transparent;border-top-color:var(--rose);
  opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:30;
}
/* keyboard focus + JS-driven mobile tap show it everywhere; hover only on
   hover-capable devices (so a tap on mobile doesn't stick the tooltip open) */
.tip:focus-visible::after,.tip.tip-show::after{opacity:1;transform:translateX(-50%) translateY(0)}
.tip:focus-visible::before,.tip.tip-show::before{opacity:1;transform:translateX(-50%) translateY(0)}
@media (hover:hover){
  .tip:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
  .tip:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* secondary "Email" mention (process step 1) — pink mailto link, underline on hover */
.mail-link{color:var(--rose);text-decoration:none;text-underline-offset:2px}
.mail-link:hover{text-decoration:underline}
/* "Copied!" tooltip — pops in immediately, holds, then fades out */
.copy-email .copy-toast{
  position:absolute;bottom:100%;left:50%;margin:0 0 .6rem;transform:translateX(-50%);
  display:block;background:var(--rose);color:#fff;
  font-size:.62rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.34rem .62rem;border-radius:7px;white-space:nowrap;
  opacity:0;pointer-events:none;
  box-shadow:0 8px 20px -8px rgba(194,96,122,.75);
}
.copy-email .copy-toast::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--rose);
}
.copy-email .copy-toast.is-shown{animation:copyPop 1.7s ease forwards}
@keyframes copyPop{
  0%{opacity:0;transform:translateX(-50%) translateY(5px) scale(.92)}
  9%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  72%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-5px) scale(1)}
}
.cta-row{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.big-cta{
  display:inline-block;background:var(--rose);color:#fff;
  padding:1.05rem 2.7rem;border-radius:999px;font-weight:500;
  transition:background .25s ease, transform .2s ease-out, box-shadow .3s ease;
  box-shadow:0 16px 34px -14px rgba(194,96,122,.6);
}
.big-cta:hover{background:#a94e66;box-shadow:0 20px 40px -14px rgba(194,96,122,.75)}
.big-cta:active{transform:scale(.97)}
.ghost-cta{
  display:inline-block;color:var(--ink);
  padding:1.05rem 2.4rem;border-radius:999px;font-weight:500;
  border:1px solid var(--ink);
  transition:background .25s ease, color .25s ease, transform .2s ease-out;
}
.ghost-cta:hover{background:var(--ink);color:var(--cream)}

footer{
  text-align:center;padding:2.5rem 1.5rem;font-size:.75rem;color:var(--taupe);
  border-top:1px solid var(--line);background:var(--blush);
}
.footer-note{margin-top:.3rem}
.footer-note em{font-family:var(--serif)}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .platform-grid{grid-template-columns:1fr}
  .engagement-row{grid-template-columns:1fr;gap:1.5rem;text-align:left}
}

/* ---- carousel sizing + arrow placement across widths ----
   Wide screens keep the arrows in the open side space, clear of the
   phones; below ~820px the phones fill the width, so the arrows tuck to
   the very edges (kept legible by their glow). */
@media (max-width: 1360px){
  .showcase{--cardw:238px;--phone-h:487px;--gap-x:88%;--drop:42px;--head-h:6.3rem;--stage-h:588px}
  .car-arrow{font-size:2.4rem}
  .car-arrow--prev{left:.5rem}
  .car-arrow--next{right:.5rem}
}
@media (max-width: 1040px){
  .showcase{--cardw:200px;--phone-h:409px;--gap-x:84%;--drop:38px;--head-h:6.1rem;--stage-h:507px}
  .car-arrow{font-size:2.1rem}
  .car-arrow--prev{left:.5rem}
  .car-arrow--next{right:.5rem}
}
@media (max-width: 820px){
  /* phones fill the width; arrows tuck to the very edges with their glow.
     MOBILE: bigger phone (item 4) and the category notch drops BELOW the phone
     (item 3) — .ptag is positioned relative to .pcard, so phead's overflow
     doesn't clip it and the arrow centring (--head-h) is unaffected. */
  .showcase{--cardw:222px;--phone-h:454px;--gap-x:78%;--drop:34px;--head-h:4.5rem;--stage-h:572px}
  .section.showcase{padding:2.25rem 1.25rem 2rem}
  .car-arrow{font-size:2rem;padding:.3rem .2rem}
  .car-arrow--prev{left:.1rem}
  .car-arrow--next{right:.1rem}
  .ptag{
    position:absolute;left:50%;margin:0;
    top:calc(var(--head-h) + var(--phone-h) + .7rem);
    transform:translateX(-50%);
  }
}
@media (max-width: 440px){
  .showcase{--cardw:214px;--phone-h:438px;--gap-x:72%;--drop:28px;--head-h:4.4rem;--stage-h:556px}
}
@media (max-width: 760px){
  nav{padding:.8rem 1.1rem}
  .nav-name{font-size:1.05rem}
  .nav-right{gap:.5rem}
  .nav-cta,.nav-pdf{padding:.5rem .85rem;font-size:.74rem}
  .section{padding:4.5rem 1.25rem}
  .hero{padding:4rem 1.25rem 5rem;min-height:88vh}
  .hero .eyebrow{font-size:.58rem;letter-spacing:.18em}
  .hero .eyebrow::before,.hero .eyebrow::after{width:1.3rem}
  .hero-stats{flex-wrap:nowrap}
  .hero-stat{padding:0 1.1rem}
  .hero-stat .num{font-size:1.8rem}
  .about-grid{grid-template-columns:1fr;gap:3rem}
  .portrait{max-width:340px;margin:0 auto}
  .aud-grid{grid-template-columns:1fr;gap:3rem}
  .pillar-row{grid-template-columns:1fr;gap:.4rem;padding:1.6rem .25rem}
  .pillar-row:hover{padding-left:.25rem;padding-right:.25rem}
  .menu-grid{grid-template-columns:1fr;gap:2rem}
  .steps{grid-template-columns:1fr;gap:2.5rem}
  .contact-details{gap:1.5rem;flex-direction:column}
  .cta-row{flex-direction:column;align-items:center}
  /* stacked on mobile: the two pills size to their own text, so the longer
     "Download media kit (PDF)" label rendered wider than "Start the
     conversation". Give both a shared width so the stack reads as one matched
     pair rather than two mismatched buttons. */
  .cta-row .big-cta, .cta-row .ghost-cta{width:100%;max-width:18rem;text-align:center}
  .scroll-cue{margin-top:2.5rem}
  .section-head{margin-bottom:2.5rem}
  .engagement-row{padding:2.25rem 0 2.5rem;margin-bottom:2.5rem}
  .quote-mark{margin-bottom:1.4rem}
}
@media (max-width: 420px){
  .hero-stat{padding:0 1rem}
  .hero-stat .num{font-size:1.7rem}
}

/* ============ MOTION SAFETY ============ */
@media (prefers-reduced-motion: reduce){
  .hero .eyebrow, .hero h1, .hero .tagline, .hero .hero-stats, .scroll-cue{
    animation:none !important;opacity:1 !important;transform:none !important;
  }
  .reveal, .reveal-stagger > *{
    transition:none !important;opacity:1 !important;transform:none !important;
  }
  .bar-fill{transition:none !important}
  .ticker-track{animation:none !important}
  .pcard{transition:opacity .2s ease !important}
  [data-parallax]{transform:none !important}
  .tier, .platform-card, .tag,
  .nav-cta, .big-cta, .ghost-cta, .contact-details div, .pillar-row, .car-arrow{
    transition:none !important;
  }
}