/* ═══════════════════════════════════════════════════════════
   Talisha Grobler — media kit
   Mobile-first. One accent colour, used sparingly.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* ── The one accent colour. Change this and the whole site follows. ── */
  --accent:        #FF2D6F;
  --accent-press:  #E01257;
  --accent-soft:   #FFEFF4;

  /* Neutrals */
  --ink:      #131215;
  --ink-soft: #5C5A61;
  --ink-mute: #8E8B93;
  --line:     #EAE7E4;
  --tint:     #F8F6F4;
  --paper:    #FFFFFF;
  --dark:     #131215;
  --dark-2:   #1E1C20;

  /* Placeholder blocks */
  --ph-bg:   #F1EEEB;
  --ph-bg-2: #EBE7E3;
  --ph-ink:  #A9A4A0;

  --radius:    14px;
  --radius-lg: 22px;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* How long one full loop of the brand marquee takes. More brands = longer. */
  --marquee-speed: 42s;

  --gutter:  clamp(20px, 5vw, 56px);
  --section: clamp(68px, 11vw, 132px);
  --maxw:    1180px;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:78px; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:800; letter-spacing:-.028em; line-height:1.02; margin:0; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
  font-size:14px; font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

/* ── Type helpers ──────────────────────────────────────── */
.kicker{
  font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:14px;
}
.accent-kicker{ color:var(--accent); }
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:600; color:var(--ink-soft);
  background:var(--accent-soft); border-radius:99px; padding:7px 15px 7px 12px;
  margin-bottom:26px;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 0 rgba(255,45,111,.5); animation:pulse 2.6s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(255,45,111,0);} 100%{ box-shadow:0 0 0 0 rgba(255,45,111,0);} }

.section{ padding-block:var(--section); }
.section-tint{ background:var(--tint); }
.section-head{ max-width:620px; margin-bottom:clamp(34px,5vw,54px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(30px,5.2vw,48px); }
.section-head .sub{ color:var(--ink-soft); margin-top:16px; font-size:17px; }

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 26px; border-radius:99px; border:1.5px solid transparent;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:10px 19px; font-size:14px; }
.btn-block{ width:100%; padding-block:17px; }

.btn-accent{ background:var(--accent); color:#fff; box-shadow:0 6px 20px -8px rgba(255,45,111,.75); }
.btn-accent:hover{ background:var(--accent-press); box-shadow:0 10px 26px -8px rgba(255,45,111,.85); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }

.btn-ghost-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,.3); }
.btn-ghost-dark:hover{ border-color:#fff; }

.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }

.btn.is-disabled{ pointer-events:none; opacity:.45; }

.link-arrow{
  font-weight:600; text-decoration:none; color:var(--ink);
  border-bottom:2px solid var(--accent); padding-bottom:2px;
}
.link-arrow::after{ content:" →"; color:var(--accent); }

/* ═══ HEADER ═══════════════════════════════════════════ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px -20px rgba(0,0,0,.6); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:66px; }

.wordmark{
  font-family:var(--font-display); font-weight:800; font-size:16px;
  letter-spacing:-.03em; text-decoration:none;
}

.nav{ display:none; }
.nav a{
  text-decoration:none; font-size:14.5px; font-weight:500; color:var(--ink-soft);
  padding:6px 2px; position:relative; transition:color .15s ease;
}
.nav a:hover{ color:var(--ink); }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
.nav a:hover::after{ transform:scaleX(1); }

.header-cta{ display:none; }

.nav-toggle{
  width:40px; height:40px; border:1px solid var(--line); border-radius:10px;
  background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer; padding:0;
}
.nav-toggle span{ width:16px; height:1.8px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.8px) rotate(-45deg); }

/* Mobile drop panel */
.nav.is-open{
  display:flex; flex-direction:column; gap:2px;
  position:absolute; left:0; right:0; top:66px;
  background:#fff; border-bottom:1px solid var(--line);
  padding:10px var(--gutter) 22px;
  box-shadow:0 20px 40px -28px rgba(0,0,0,.5);
}
.nav.is-open a{ font-size:17px; font-weight:600; color:var(--ink); padding:13px 0; border-bottom:1px solid var(--line); }
.nav.is-open a::after{ display:none; }
.nav.is-open .nav-cta{
  margin-top:16px; border:none; background:var(--accent); color:#fff;
  text-align:center; border-radius:99px; padding:15px; 
}

@media (min-width:900px){
  .nav{ display:flex; gap:30px; }
  .header-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .nav .nav-cta{ display:none; }
}

/* ═══ PLACEHOLDERS ═════════════════════════════════════ */
.ph{
  position:relative;
  background:
    linear-gradient(135deg, var(--ph-bg) 0%, var(--ph-bg-2) 100%);
  border-radius:var(--radius-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:20px;
  color:var(--ph-ink); overflow:hidden;
}
.ph::after{
  content:""; position:absolute; inset:8px; border-radius:calc(var(--radius-lg) - 8px);
  border:1.5px dashed rgba(0,0,0,.09); pointer-events:none;
}
.ph-label{ font-size:13px; font-weight:600; letter-spacing:.02em; color:#8D8883; }
.ph-hint{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:#B3AEA9; }

.ph-hero{ aspect-ratio:4/5; }
.ph-about{ aspect-ratio:4/5; border-radius:var(--radius-lg); }
.ph-shop{ aspect-ratio:4/3; min-height:220px; }
.ph-video{ aspect-ratio:9/16; border-radius:var(--radius); }
.ph-video::after{ border-radius:calc(var(--radius) - 8px); }
.ph-logo{ aspect-ratio:16/7; border-radius:var(--radius); background:#fff; border:1px solid var(--line); }
.ph-logo::after{ border-color:rgba(0,0,0,.07); border-radius:calc(var(--radius) - 8px); }
.ph-logo span{ font-size:12.5px; font-weight:600; color:#B0ABA6; letter-spacing:.02em; }

/* ═══ HERO ═════════════════════════════════════════════ */
.hero{
  padding-top:clamp(44px,8vw,84px);
  padding-bottom:clamp(56px,9vw,104px);
  background:
    radial-gradient(900px 480px at 88% -6%, var(--accent-soft), transparent 62%),
    var(--paper);
}
.hero-grid{ display:grid; gap:clamp(38px,6vw,72px); align-items:center; }

.hero h1{
  font-size:clamp(44px,12.5vw,90px);
  letter-spacing:-.045em;
  line-height:.96;
}
.hero h1 em{
  font-style:normal;
  color:var(--accent);
  position:relative;
  white-space:nowrap;
}
.hero h1 em::after{
  content:""; position:absolute; left:-.02em; right:-.02em; bottom:.07em; height:.085em;
  background:var(--accent); opacity:.22; border-radius:3px;
}
.lede{
  font-size:clamp(17px,2.4vw,20px); color:var(--ink-soft);
  max-width:30ch; margin-top:24px; line-height:1.5;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-foot{ margin-top:28px; font-size:14px; color:var(--ink-mute); }
.hero-foot a{ color:var(--ink-soft); text-decoration-color:var(--accent); text-underline-offset:3px; }

.hero-photo{ position:relative; }
.hero-img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.45);
}
.hero-badge{
  position:absolute; left:-10px; bottom:26px;
  background:#fff; border-radius:16px; padding:14px 20px;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.42);
  display:flex; flex-direction:column; line-height:1.2;
}
.hero-badge strong{ font-family:var(--font-display); font-size:26px; color:var(--accent); }
.hero-badge span{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-mute); margin-top:3px; }

@media (min-width:900px){
  .hero-grid{ grid-template-columns:1.08fr .92fr; }
  .hero-badge{ left:-28px; }
}

/* ═══ STATS ════════════════════════════════════════════ */
/* Phone | stats | phone. On narrow screens the grid goes full width and
   the two phones drop underneath it, side by side. */
.stats-layout{
  display:grid; gap:clamp(20px,3vw,34px);
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "grid grid"
    "pl   pr";
  align-items:center;
}
.phone-left{  grid-area:pl; justify-self:center; }
.phone-right{ grid-area:pr; justify-self:center; }
.stats-grid{  grid-area:grid; }

@media (min-width:1080px){
  .stats-layout{
    grid-template-columns:clamp(180px,16vw,208px) 1fr clamp(180px,16vw,208px);
    grid-template-areas:"pl grid pr";
  }
}

.stats-grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){ .stats-grid{ grid-template-columns:repeat(3,1fr); gap:16px; } }

/* ═══ PHONE MOCKUPS ════════════════════════════════════ */
.phone{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-decoration:none; color:inherit; width:100%;
  max-width:208px;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.phone:hover{ transform:translateY(-5px); }

.phone-shell{
  /* The 9:19.5 ratio lives on the screen now, not here. With it on the
     shell, the bezel padding came off both dimensions and left the screen
     at 2.239 while the screenshots are 2.167, so object-fit:cover quietly
     shaved a few pixels off each side. The shell sizes around the screen
     instead, and the images fit with nothing cropped. */
  position:relative; display:block; width:100%;
  background:linear-gradient(155deg,#3A3A3E,#131215 42%,#131215 70%,#35343A);
  border-radius:clamp(24px,3vw,32px);
  padding:clamp(4px,.65vw,6px);
  box-shadow:0 24px 48px -26px rgba(0,0,0,.62), 0 2px 5px rgba(0,0,0,.22);
  transition:box-shadow .25s ease;
}
.phone:hover .phone-shell{ box-shadow:0 34px 60px -26px rgba(0,0,0,.72), 0 2px 5px rgba(0,0,0,.22); }

/* Dynamic island */
.phone-island{
  position:absolute; top:clamp(9px,1.1vw,13px); left:50%; transform:translateX(-50%);
  width:31%; height:clamp(12px,1.5vw,17px);
  background:#08070A; border-radius:99px; z-index:2;
}

.phone-screen{
  position:relative; display:block; width:100%;
  aspect-ratio:9/19.5;          /* exactly the screenshots' own ratio */
  border-radius:clamp(20px,2.5vw,27px);
  overflow:hidden; background:var(--ph-bg);
}
/* Screenshot and placeholder both fill the screen box absolutely, so the
   screen keeps its shape from aspect-ratio alone. */
.phone-screen img,
.ph-phone{
  position:absolute; inset:0;
  width:100%; height:100%;
}
.phone-screen img{ object-fit:cover; object-position:top; }
.ph-phone{ border-radius:0; gap:4px; }
.ph-phone::after{ border-radius:0; inset:10px; }

.phone-cap{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; color:var(--ink-soft);
  transition:color .2s ease;
}
.phone-cap .ico{ width:15px; height:15px; }
.phone:hover .phone-cap{ color:var(--accent); }

.stat{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 18px 18px;
  transition:border-color .2s ease, transform .2s ease;
}
.stat:hover{ border-color:#D9D4CF; transform:translateY(-2px); }
.stat-platform{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:16px; min-height:18px;
}
.stat-value{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(25px,4.4vw,32px); letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat-value .unit{ font-size:.62em; color:var(--accent); margin-left:1px; }
.stat-label{ font-size:13px; color:var(--ink-soft); margin-top:7px; }
.stats-note{ margin-top:22px; font-size:13px; color:var(--ink-mute); }

/* The Instagram and TikTok cards are links to the profiles. */
.stat-link{ text-decoration:none; color:inherit; display:block; }
.stat-link:hover{ border-color:var(--accent); }
.stat-link:hover .stat-platform{ color:var(--accent); }
/* Handles keep their own casing — uppercasing an @handle looks wrong. */
.stat-platform .handle{ text-transform:none; letter-spacing:0; font-size:12.5px; }

.ico{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; }
.ico .fill{ fill:currentColor; stroke:none; }

/* ═══ ABOUT ════════════════════════════════════════════ */
.about-grid{ display:grid; gap:clamp(32px,5vw,64px); align-items:center; }
@media (min-width:860px){ .about-grid{ grid-template-columns:.85fr 1.15fr; } }

/* ═══ SELF-ACTIVATING PHOTO SLOTS ══════════════════════
   Each slot holds the real <img> plus a grey placeholder. The placeholder
   is hidden by default, so once the file exists the photo just appears.
   If the file is missing the <img> fires onerror, removes itself and adds
   .no-photo, which reveals the placeholder. No broken-image icon either way,
   and no markup to edit when the photo finally lands. */
.photo-slot{ position:relative; }
.photo-slot .ph{ display:none; }
.photo-slot.no-photo .ph{ display:flex; }

.about-img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:0 26px 52px -34px rgba(0,0,0,.42);
}
.about-copy h2{ font-size:clamp(30px,5vw,46px); margin-bottom:20px; }
.about-copy p:not(.kicker){ color:var(--ink-soft); font-size:16.5px; margin-bottom:16px; max-width:56ch; }
.about-copy p strong{ color:var(--ink); font-weight:600; }
.about-list{ margin-top:26px; display:grid; gap:11px; }
.about-list li{
  position:relative; padding-left:26px; font-size:15.5px; color:var(--ink);
}
.about-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%;
  border:2.5px solid var(--accent);
}

/* ═══ BRAND MARQUEE ════════════════════════════════════ */
/* Full-bleed: sits outside .wrap so it runs edge to edge. */
.marquee{
  overflow:hidden;
  padding-block:6px;
  /* Fade the logos out at both edges so they don't hard-cut at the bezel. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track{
  display:flex;
  width:max-content;
}
/* script.js clones the row into an even number of copies, then adds
   .is-looping. Every copy is identical, so shifting by exactly half the
   track lands on a frame indistinguishable from the start — a seamless
   loop with no jump. Without JS the row just sits still. */
.marquee-track.is-looping{
  animation:marquee var(--marquee-speed) linear infinite;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
/* Deliberately NOT paused on hover, the strip keeps moving. Only a
   keyboard user tabbing into it stops it, so focus doesn't slide away. */
.marquee:focus-within .marquee-track{ animation-play-state:paused; }

.marquee-row{
  display:flex; align-items:center;
  gap:clamp(12px,2.4vw,22px);
  padding-inline:clamp(6px,1.2vw,11px);
}
.marquee-item{
  flex:none;
  display:grid; place-items:center;
  /* A DEFINITE width, not min-width. With flex:none and only a min-width,
     the cell has no resolvable width, so a logo's intrinsic size (some are
     ~2000px wide) drives the layout and percentage caps on the <img> below
     can't resolve — the logo blows out of the cell. */
  width:clamp(150px,17vw,196px);
  height:clamp(70px,8vw,88px);
  padding:0 clamp(12px,1.8vw,22px);
  overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.marquee-item:hover{
  border-color:#DCD7D2; transform:translateY(-2px);
  box-shadow:0 14px 28px -22px rgba(0,0,0,.55);
}
/* Text stand-ins for the real logo files. Once you drop in an <img>,
   these span rules stop applying and the img rules below take over. */
.marquee-item span{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(14px,1.55vw,17px); letter-spacing:-.02em;
  color:#9C9792; white-space:nowrap;
  transition:color .22s ease;
}
.marquee-item:hover span{ color:var(--ink); }
.marquee-item img{
  /* Absolute max-height — a percentage here depends on the parent having a
     definite height at layout time, which is fragile inside a flex track. */
  max-width:100%;
  max-height:clamp(30px,3.6vw,42px);
  width:auto; height:auto;
  object-fit:contain;
  filter:grayscale(1); opacity:.62;
  transition:filter .22s ease, opacity .22s ease;
}
.marquee-item:hover img{ filter:grayscale(0); opacity:1; }

/* Someone who asked for less motion gets a static, swipeable strip instead. */
@media (prefers-reduced-motion:reduce){
  .marquee{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    -webkit-mask-image:none; mask-image:none;
  }
  .marquee-track{ animation:none; }
}

/* ═══ SMALL BRANDS NOTE ════════════════════════════════ */
.small-brands{
  margin-top:clamp(38px,5.5vw,62px);
  max-width:660px; margin-inline:auto; text-align:center;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,44px);
}
.small-brands h3{
  font-size:clamp(21px,3vw,28px); line-height:1.15; margin-bottom:16px;
}
.small-brands p{
  color:var(--ink-soft); font-size:16px; margin-bottom:24px;
}
/* Centred text is fine over three or four lines, but on a phone this
   paragraph wraps to ten — ragged both sides is genuinely harder to read,
   so left-align it there and keep the heading centred. */
@media (max-width:620px){
  .small-brands p{ text-align:left; }
}

/* ═══ VIDEOS ═══════════════════════════════════════════ */
.video-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:760px){ .video-grid{ grid-template-columns:repeat(3,1fr); gap:20px; } }

.video-card a{ text-decoration:none; display:block; }
.video-card .ph-video,
.video-card .video-thumb{
  position:relative; display:grid; place-items:center;
  width:100%; aspect-ratio:9/16; border-radius:var(--radius);
  overflow:hidden; background:var(--ph-bg);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.video-thumb img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.video-card:hover .ph-video,
.video-card:hover .video-thumb{ transform:translateY(-4px); box-shadow:0 22px 40px -24px rgba(0,0,0,.5); }
.video-card:hover .video-thumb img{ transform:scale(1.045); }

.play{
  position:absolute; z-index:2; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 6px 18px -6px rgba(0,0,0,.35);
  display:grid; place-items:center; z-index:2;
  transition:background .2s ease, transform .2s ease;
}
.play::before{
  content:""; border-style:solid; border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent var(--ink);
  margin-left:3px;
}
.video-card:hover .play{ background:var(--accent); transform:scale(1.08); }
.video-card:hover .play::before{ border-left-color:#fff; }
.ph-video .ph-label{ position:absolute; bottom:16px; }

.video-meta{ padding:13px 2px 0; }
.video-meta h3{
  font-size:15.5px; font-weight:600; font-family:var(--font-body);
  letter-spacing:-.01em; line-height:1.35; color:var(--ink);
}
.video-meta p{ font-size:13px; color:var(--ink-mute); margin-top:5px; }
.video-meta .watch::after{ content:" →"; color:var(--accent); }
.video-card:hover .video-meta .watch{ color:var(--ink-soft); }
.video-meta .views{ color:var(--accent); font-weight:600; }
.video-foot{ margin-top:36px; }

/* ═══ SALT STUDIO ══════════════════════════════════════ */
.shop-band{
  display:grid; gap:clamp(28px,4vw,54px); align-items:center;
  background:var(--tint); border-radius:var(--radius-lg);
  padding:clamp(28px,5vw,56px);
}
@media (min-width:820px){ .shop-band{ grid-template-columns:1.1fr .9fr; } }
.shop-copy h2{ font-size:clamp(30px,5vw,46px); margin-bottom:16px; }
.shop-copy p:not(.kicker){ color:var(--ink-soft); max-width:46ch; margin-bottom:28px; font-size:16.5px; }
.ph-shop{ background:linear-gradient(135deg,#EDE9E5,#E4DFDA); }
.shop-img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:0 22px 44px -30px rgba(0,0,0,.4);
}

/* ═══ CONTACT ══════════════════════════════════════════ */
.section-dark{ background:var(--dark); color:#fff; }
.section-dark .kicker{ color:rgba(255,255,255,.5); }
.contact-grid{ display:grid; gap:clamp(38px,5vw,72px); align-items:start; }
@media (min-width:880px){ .contact-grid{ grid-template-columns:1fr 1fr; } }

.contact-copy h2{ font-size:clamp(32px,5.4vw,52px); }
.lede-dark{
  font-size:clamp(16.5px,2vw,19px); color:rgba(255,255,255,.72);
  margin-top:20px; max-width:40ch; line-height:1.55;
}
.contact-list{ margin-top:38px; display:grid; gap:16px; }
.contact-list li{
  display:flex; gap:14px; align-items:baseline;
  font-size:15.5px; color:rgba(255,255,255,.86);
}
.contact-list li span{
  font-family:var(--font-display); font-size:12px; font-weight:800;
  color:var(--accent); letter-spacing:.06em; flex:none; padding-top:2px;
}
.contact-direct{ margin-top:38px; font-size:14.5px; color:rgba(255,255,255,.5); }

/* Decorative, and it fills the empty half of this column on a wide screen.
   Hidden on narrow screens so nothing sits between the copy and the form. */
.contact-photo{ display:none; margin-top:38px; max-width:300px; }
@media (min-width:880px){ .contact-photo{ display:block; } }
.contact-photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:0 26px 52px -30px rgba(0,0,0,.8);
}
.ph-contact{
  aspect-ratio:4/5; border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#26242A,#1C1A1F);
}
.ph-contact::after{ border-color:rgba(255,255,255,.1); }
.ph-contact .ph-label{ color:rgba(255,255,255,.42); }
.ph-contact .ph-hint{ color:rgba(255,255,255,.26); }
.contact-direct a{ color:#fff; text-decoration-color:var(--accent); text-underline-offset:4px; text-decoration-thickness:2px; }

/* Form */
.form-card{
  background:var(--dark-2); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-lg); padding:clamp(24px,3.6vw,38px);
}
.field{ margin-bottom:20px; }
.field label{
  display:block; font-size:13.5px; font-weight:600; margin-bottom:8px;
  color:rgba(255,255,255,.82);
}
.req{ color:var(--accent); }
.field input, .field textarea{
  width:100%; padding:14px 16px; font:inherit; font-size:15.5px;
  background:rgba(255,255,255,.05); color:#fff;
  border:1.5px solid rgba(255,255,255,.13); border-radius:11px;
  transition:border-color .15s ease, background .15s ease;
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.55; }
.field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,.3); }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); background:rgba(255,255,255,.08);
}
.field.has-error input, .field.has-error textarea{ border-color:#FF6B6B; }
.err{ font-size:12.5px; color:#FF8A8A; margin-top:7px; display:none; }
.field.has-error .err{ display:block; }

.gotcha{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

.form-fineprint{ font-size:12.5px; color:rgba(255,255,255,.38); margin-top:14px; text-align:center; }
.form-status{ font-size:13.5px; margin-top:14px; text-align:center; display:none; }
.form-status.is-visible{ display:block; }
.form-status.is-error{ color:#FF8A8A; }
.form-status.is-note{ color:#FFD08A; }
#submitBtn.is-busy{ opacity:.6; pointer-events:none; }

.form-success{ text-align:center; padding:18px 0 6px; }
.form-success .tick{
  width:56px; height:56px; margin:0 auto 22px; border-radius:50%;
  background:var(--accent); display:grid; place-items:center;
  animation:pop .45s cubic-bezier(.2,1.3,.4,1);
}
@keyframes pop{ from{ transform:scale(.4); opacity:0; } }
.form-success .tick svg{ width:26px; height:26px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.form-success h3{ font-size:26px; margin-bottom:12px; }
.form-success p{ color:rgba(255,255,255,.66); font-size:15.5px; max-width:36ch; margin:0 auto 26px; }

/* ═══ FOOTER ═══════════════════════════════════════════ */
.site-footer{ background:var(--dark); color:#fff; padding-top:clamp(48px,7vw,80px); padding-bottom:34px; border-top:1px solid rgba(255,255,255,.08); }
.footer-inner{ display:grid; gap:30px; padding-bottom:38px; }
@media (min-width:760px){ .footer-inner{ grid-template-columns:1fr auto; align-items:start; } }
.footer-brand .wordmark{ font-size:19px; display:block; }
.footer-tag{ color:rgba(255,255,255,.44); font-size:14.5px; margin-top:8px; }
.footer-contact{ display:flex; flex-direction:column; gap:18px; }
@media (min-width:760px){ .footer-contact{ align-items:flex-end; } }
.footer-mail{ font-size:15.5px; text-decoration-color:var(--accent); text-underline-offset:4px; text-decoration-thickness:2px; }
.socials{ display:flex; align-items:center; gap:10px; }
.socials a{
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.16);
  display:grid; place-items:center; color:#fff;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.socials a:hover{ background:var(--accent); border-color:var(--accent); }
.socials .ico{ width:17px; height:17px; }
.footer-salt{
  width:auto !important; border-radius:99px !important; padding:0 18px;
  font-size:13px; font-weight:600; text-decoration:none;
}
.footer-legal{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.08);
  font-size:12.5px; color:rgba(255,255,255,.36);
}
.to-top{ text-decoration:none; color:rgba(255,255,255,.36); }
.to-top:hover{ color:#fff; }

/* ═══ SCROLL REVEAL (progressive — content is visible if JS is off) ═══ */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; } }

/* ═══ PORTRAIT PHOTOS IN SINGLE-COLUMN LAYOUT ══════════
   Once the hero and about grids collapse to one column, a 4:5 photo set to
   width:100% becomes enormous: at an 820px viewport both were rendering
   738x923, a slab taller than the window that pushed all the copy off
   screen. Cap and centre them instead. */
@media (max-width:899px){
  .hero-photo{ max-width:400px; margin-inline:auto; width:100%; }
}
@media (max-width:859px){
  .about-grid > .photo-slot,
  .about-grid > .ph{ max-width:400px; margin-inline:auto; width:100%; }
}

/* ═══════════════════════════════════════════════════════
   AUDIENCE CHARTS
   Laid out like the Instagram and TikTok analytics screens:
   show first, read second.

   Bars read their length from an inline --v (0-100 of the track).
   The gender gauges are one SVG arc each, where stroke-dasharray
   controls how far the coloured part travels round the semicircle.

   Instagram is the site pink, TikTok a blue. The pair was checked for
   colour-blind separation rather than picked by eye, and every value is
   printed next to its mark, so colour is never the only cue.
   ═══════════════════════════════════════════════════════ */
:root{
  --ig:      #FF2D6F;
  --ig-soft: #FFC9DB;
  --tt:      #2A78D6;
  --tt-soft: #C3DAF6;
  --track:   #EFECE8;
}

.charts{
  display:grid; gap:14px; grid-template-columns:1fr;
  margin-top:clamp(28px,4vw,42px);
}
@media (min-width:820px){
  .charts{ grid-template-columns:1fr 1fr; }
  .chart-card.wide{ grid-column:1 / -1; }
}

.chart-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(20px,2.6vw,28px);
}
.chart-card h3{
  font-size:clamp(16px,1.9vw,18px); letter-spacing:-.02em; margin-bottom:18px;
}

/* Platform label */
.plat{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mute); margin-bottom:16px;
}
.dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.dot-ig{ background:var(--ig); }
.dot-tt{ background:var(--tt); }

/* ── Gender gauges ────────────────────────────────────── */
.gauge-row{ display:grid; gap:26px; }
@media (min-width:560px){ .gauge-row{ grid-template-columns:1fr 1fr; gap:34px; } }
.gauge-cell{ text-align:center; }
.gauge-cell .plat{ justify-content:center; }

.gauge{ position:relative; margin:0; }
.gauge svg{ width:100%; max-width:230px; height:auto; display:block; margin:0 auto; }
.g-track{ stroke:var(--track); }
.g-value{ stroke-linecap:butt; }
.ig      { stroke:var(--ig); }
.ig-soft { stroke:var(--ig-soft); }
.tt      { stroke:var(--tt); }
.tt-soft { stroke:var(--tt-soft); }

/* The number sits inside the arc's opening. */
.gauge figcaption{
  position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  line-height:1.05;
}
.gauge figcaption b{
  display:block;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(26px,3.6vw,32px); letter-spacing:-.03em;
}
.gauge figcaption span{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute);
}

.gauge-split{
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  margin-top:16px; font-size:13px; color:var(--ink-soft);
}
.gauge-split span{ display:inline-flex; align-items:center; gap:6px; }
.sw{ width:10px; height:10px; border-radius:3px; flex:none; }
.sw-ig{ background:var(--ig); } .sw-ig-soft{ background:var(--ig-soft); }
.sw-tt{ background:var(--tt); } .sw-tt-soft{ background:var(--tt-soft); }

/* ── Two panels side by side ──────────────────────────── */
.panel-row{ display:grid; gap:28px; }
@media (min-width:560px){ .panel-row{ grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px); } }

/* ── Bar lists ────────────────────────────────────────── */
.bars{ display:grid; gap:13px; }
.bars li{
  display:grid;
  /* 94px fits "United Kingdom" on one line at 12.5px; at 78px both the
     US and UK rows wrapped to two lines and threw the row rhythm out. */
  grid-template-columns:94px 1fr 50px;
  align-items:center; gap:11px;
}
.b-label{
  font-size:12.5px; color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.b-track{
  display:block; height:9px; border-radius:99px;
  background:var(--track); overflow:hidden;
}
.b-fill{
  display:block; height:100%; width:calc(var(--v) * 1%);
  min-width:4px; border-radius:99px;
}
.f-ig{ background:var(--ig); }
.f-tt{ background:var(--tt); }
/* Kept for safety: if an .is-na fill ever comes back, it must stay at zero
   even once the card is drawn in. */
.b-fill.is-na,
.js-motion .chart-card.is-drawn .b-fill.is-na{ width:0; min-width:0; }
.b-val{
  font-size:13px; font-weight:600; color:var(--ink);
  font-variant-numeric:tabular-nums; text-align:right;
}
.b-val.is-na{ color:var(--ink-mute); font-weight:500; }

@media (max-width:430px){
  .bars li{ grid-template-columns:82px 1fr 44px; gap:8px; }
  .b-label{ font-size:12px; }
  .b-val{ font-size:12px; }
}

/* ── Download PDF band ────────────────────────────────── */
.analytics-cta{
  display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between;
  margin-top:16px; padding:clamp(22px,3vw,30px);
  background:var(--tint); border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
.analytics-cta h3{ font-size:clamp(18px,2.2vw,21px); margin-bottom:5px; }
.analytics-cta p{ font-size:14px; color:var(--ink-soft); max-width:46ch; }

/* ═══════════════════════════════════════════════════════
   MOTION
   Every rule here is gated behind .js-motion, a class script.js puts on
   <html> the moment it runs. That way nothing is ever hidden or shrunk
   unless the code that will reveal it is definitely alive: with JS off,
   or if the script throws, the page renders fully and static.

   Everything also stops at prefers-reduced-motion.
   ═══════════════════════════════════════════════════════ */

/* Scroll progress, a hairline across the top of the header. */
.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  transform:scaleX(var(--p, 0)); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--accent), #FF7AA2);
  pointer-events:none;
}

/* Reveal on scroll. Slightly deeper and softer than a plain fade. */
.js-motion .reveal{
  opacity:0; transform:translateY(22px) scale(.985);
  transition:opacity .75s cubic-bezier(.22,.68,.3,1),
             transform .75s cubic-bezier(.22,.68,.3,1);
  will-change:opacity, transform;
}
.js-motion .reveal.is-in{ opacity:1; transform:none; }

/* Hero photo drifts a little slower than the page. */
.js-motion .hero-img{ will-change:transform; }

/* Charts draw themselves in when they scroll into view. */
.js-motion .chart-card .b-fill{
  width:0;
  transition:width 1s cubic-bezier(.22,.68,.3,1);
}
.js-motion .chart-card.is-drawn .b-fill{ width:calc(var(--v) * 1%); }

.js-motion .g-value{
  stroke-dashoffset:var(--dash);
  transition:stroke-dashoffset 1.25s cubic-bezier(.3,.7,.25,1);
}
.js-motion .chart-card.is-drawn .g-value{ stroke-dashoffset:0; }

/* Counters hold their width while they tick, so nothing jitters. */
.js-motion .stat-value{ font-variant-numeric:tabular-nums; }

/* Buttons lean very slightly toward the cursor. */
.btn{ will-change:transform; }

/* Glow inside the analytics bubbles.
   Contained on purpose: clipped to the card it belongs to, so it never
   roams across the page. The pseudo-element sits in the card's own
   stacking context at z-index -1, which paints it above the card's
   background but below its content, and pointer-events can't reach it. */
.spot{ position:relative; isolation:isolate; }
.spot::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
             rgba(255,45,111,.12), transparent 62%);
  transition:opacity .35s ease;
}
.spot.is-lit::before{ opacity:1; }

/* Nav follows the section you're reading. */
.nav a.is-current{ color:var(--ink); }
.nav a.is-current::after{ transform:scaleX(1); }

@media (prefers-reduced-motion:reduce){
  .js-motion .reveal{ opacity:1; transform:none; transition:none; }
  .js-motion .chart-card .b-fill{ width:calc(var(--v) * 1%); transition:none; }
  .js-motion .g-value{ stroke-dashoffset:0; transition:none; }
  .scroll-progress{ display:none; }
  .spot::before{ display:none; }
}