/* ============================================================
   OLD ROCK GROUP — GLOBAL DESIGN SYSTEM
   "A record label, where every brand is a band on the same label."
   Bold, warm, rock-and-roll. Red + black parent, gold heritage.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bebas+Neue&family=Barlow+Condensed:wght@400;500;600;700&family=Sacramento&display=swap');

:root{
  /* ground + panels */
  --ink:#0c0c0e;
  --ink-2:#08080a;
  --panel:#16151a;
  --panel-2:#1c1b21;

  /* parent identity */
  --red:#e2231a;
  --red-deep:#a8120c;
  --red-glow:rgba(226,35,26,0.5);

  /* text */
  --cream:#f4f0e8;
  --cream-dim:#b6afa3;
  --cream-faint:#7d776c;

  /* heritage */
  --gold:#d8a93f;

  /* brand ambient accents */
  --rnr:#ff2d20;        --rnr-2:#edb13e;
  --hm:#ff5a1f;         --hm-2:#ffb02e;
  --afro:#e0734a;       --afro-2:#edb13e;
  --fusion:#ff4d6d;     --fusion-2:#28d0a8;
  --cafe:#d8a93f;
  --mb:#a7bd84;
  --rockstar:#a874ff;        /* Rockstar coffee: electric violet */

  /* tunable via Tweaks */
  --grain-opacity:0.05;
  --glow-strength:1;
  --line-opacity:0.045;

  --fs-display:'Anton', sans-serif;
  --fs-label:'Bebas Neue', sans-serif;
  --fs-body:'Barlow Condensed', sans-serif;
  --fs-script:'Sacramento', cursive;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--fs-body);
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--red); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

/* ---------- global grain + line texture (fixed overlay) ---------- */
.tex-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ============================================================
   APP SHELL
   ============================================================ */
#root{ position:relative; z-index:2; }
.page{ position:relative; }

/* orchestrated load-in: base state is ALWAYS visible (never stuck hidden,
   even if the tab is backgrounded / animations throttled). JS adds .animating
   for the entrance, then removes it so the element reverts to the visible base. */
.rise{ opacity:1; transform:none; }
.rise.animating{ animation:riseIn .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .rise.animating{ animation:none; }
}

/* ============================================================
   NAV
   ============================================================ */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:120;
  display:flex; align-items:center; justify-content:flex-end;
  padding:14px clamp(20px,5vw,64px);
  background:linear-gradient(180deg, rgba(8,8,10,0.96), rgba(8,8,10,0.74) 70%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(226,35,26,0.28);
  transition:border-color .3s;
}
/* oversized logo badge that hangs down into the hero */
.nav-logo{ position:absolute; left:clamp(20px,5vw,64px); top:8px; cursor:pointer; line-height:0; z-index:131; }
.nav-logo img{
  width:clamp(62px,8.5vw,104px); height:auto; aspect-ratio:1; border-radius:50%; display:block;
  box-shadow:0 0 0 1px rgba(244,240,232,0.16), 0 10px 28px rgba(0,0,0,0.65);
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.nav-logo:hover img{ transform:rotate(10deg) scale(1.04); box-shadow:0 0 0 1px rgba(244,240,232,0.3), 0 12px 32px rgba(0,0,0,0.7); }
.brandmark{ display:flex; align-items:center; gap:13px; cursor:pointer; }
.brandmark img{ width:46px; height:46px; border-radius:50%; box-shadow:0 0 0 1.5px rgba(216,169,63,0.5), 0 0 16px rgba(226,35,26,0.35), 0 6px 18px rgba(0,0,0,0.6); transition:box-shadow .3s, transform .3s; }
.brandmark:hover img{ box-shadow:0 0 0 1.5px rgba(216,169,63,0.85), 0 0 22px rgba(226,35,26,0.5), 0 6px 18px rgba(0,0,0,0.6); transform:rotate(8deg); }
.brandmark .wm{ line-height:1; }
.brandmark .wm b{ font-family:var(--fs-display); font-size:23px; letter-spacing:1px; color:var(--cream); text-transform:uppercase; display:block; }
.brandmark .wm b em{ color:var(--red); font-style:normal; }
.brandmark .wm span{ font-family:var(--fs-body); font-weight:600; font-size:8.5px; letter-spacing:4px; color:var(--cream-dim); text-transform:uppercase; white-space:nowrap; }

.cta{
  font-family:var(--fs-body); font-weight:600; font-size:12.5px; letter-spacing:1.6px;
  text-transform:uppercase; cursor:pointer; white-space:nowrap;
  background:var(--red); color:#fff; padding:10px 20px; border-radius:4px;
  box-shadow:0 6px 20px rgba(226,35,26,0.32); transition:background .2s, color .2s, box-shadow .2s;
}
.cta:hover{ background:#fff; color:var(--red); box-shadow:0 6px 24px rgba(255,255,255,0.18); }
.cta.active{ background:#fff; color:var(--red); }

/* hamburger (always visible) + header right group */
.nav-right{ display:flex; align-items:center; gap:14px; }
.burger{ display:flex; flex-direction:column; gap:5px; padding:8px; z-index:130; }
.burger span{ width:26px; height:2.5px; background:var(--cream); border-radius:2px; transition:.3s; }
.burger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); background:var(--red); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); background:var(--red); }

.mobile-menu{
  position:fixed; inset:0; z-index:115; background:#0a090c;
  display:flex; flex-direction:column; justify-content:safe center; gap:2px; padding:96px 8vw 44px;
  opacity:0; pointer-events:none; transition:opacity .3s; overflow-y:auto;
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 80% 12%, rgba(226,35,26,0.22), transparent 55%);
}
.mobile-menu a{
  font-family:var(--fs-display); font-size:clamp(30px,8vw,46px); text-transform:uppercase;
  color:var(--cream); letter-spacing:1px; padding:6px 0; position:relative; z-index:2;
  transition:color .2s, transform .2s; transform-origin:left;
}
.mobile-menu a small{ font-family:var(--fs-body); font-weight:600; font-size:11px; letter-spacing:3px; color:var(--cream-faint); display:block; }
.mobile-menu a:hover, .mobile-menu a.active{ color:var(--red); }
.mobile-menu .mm-foot{ margin-top:28px; font-family:var(--fs-label); letter-spacing:2px; font-size:13px; color:var(--cream-faint); }

@media(max-width:1080px){
  .burger{ display:flex; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  font-family:var(--fs-label); letter-spacing:1.8px; font-size:18px; line-height:1;
  padding:15px 30px; border-radius:4px; display:inline-flex; align-items:center; gap:9px;
  border:2px solid transparent; cursor:pointer; transition:.22s; text-transform:uppercase;
}
.btn .arr{ transition:transform .22s; }
.btn:hover .arr{ transform:translateX(4px); }
.btn-primary{ background:var(--red); color:#fff; box-shadow:0 10px 30px rgba(226,35,26,0.3); }
.btn-primary:hover{ background:#fff; color:var(--red); box-shadow:0 12px 34px rgba(255,255,255,0.16); }
.btn-ghost{ border-color:rgba(182,175,163,0.5); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--red); color:var(--red); }
.btn-light{ background:#fff; color:var(--red); }
.btn-light:hover{ background:var(--ink); color:#fff; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.wrap{ max-width:1320px; margin:0 auto; }
section.sec{ padding:clamp(64px,9vw,118px) clamp(20px,6vw,64px); position:relative; }
.kicker{ font-family:var(--fs-label); letter-spacing:3.5px; font-size:15px; color:var(--red); display:inline-block; }
.sec-head{ font-family:var(--fs-display); font-size:clamp(34px,5.6vw,68px); text-transform:uppercase; line-height:0.92; letter-spacing:0.5px; }
.sec-head em{ color:var(--red); font-style:normal; }
.sec-sub{ font-size:20px; color:var(--cream-dim); max-width:64ch; margin-top:18px; line-height:1.5; }
.eyebrow{ font-family:var(--fs-label); letter-spacing:4px; font-size:16px; color:var(--red); }

/* ============================================================
   HERO (HOME)
   ============================================================ */
.hero{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:120px clamp(20px,6vw,64px) 90px; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 82% 16%, rgba(226,35,26,calc(0.26*var(--glow-strength))), transparent 46%),
    radial-gradient(circle at 8% 92%, rgba(168,18,12,calc(0.16*var(--glow-strength))), transparent 44%),
    linear-gradient(158deg,#1c1417 0%, #0c0c0e 60%, #070708 100%);
}
/* diagonal line texture */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--line-opacity);
  background:repeating-linear-gradient(118deg, var(--red) 0 2px, transparent 2px 26px);
}
/* the master logo as a real spinning record — the hero's focal seal */
.hero .record{
  position:absolute; right:-6vw; top:50%; transform:translateY(-50%);
  width:min(52vw,600px); aspect-ratio:1; pointer-events:none; z-index:2;
}
.hero .record::before{
  content:""; position:absolute; inset:-8%; border-radius:50%;
  background:radial-gradient(circle, rgba(226,35,26,calc(0.4*var(--glow-strength))), transparent 60%);
  filter:blur(10px);
}
.hero .record img{
  position:relative; width:100%; height:100%; border-radius:50%; display:block;
  box-shadow:0 0 0 2px rgba(216,169,63,0.55), 0 0 0 10px rgba(12,12,14,0.6),
             0 0 0 11px rgba(216,169,63,0.18), 0 40px 90px rgba(0,0,0,0.75);
  animation:spin 26s linear infinite;
}
@media(prefers-reduced-motion:reduce){ .hero .record img{ animation:none; } }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* tweak-driven motion toggles */
body.no-motion .rise.animating{ animation:none !important; }
body.no-spin .hero .record img{ animation:none; }

/* ---------------- MARQUEE TICKER ---------------- */
.marquee{
  position:relative; z-index:2; overflow:hidden; padding:20px 0;
  border-top:1px solid rgba(226,35,26,0.28); border-bottom:1px solid rgba(226,35,26,0.28);
  background:linear-gradient(180deg, rgba(20,16,18,0.6), rgba(8,8,10,0.6));
}
.marquee-track{ display:flex; width:max-content; animation:marq 38s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
body.no-spin .marquee-track{ animation:none; }
.marquee-set{ display:flex; align-items:center; }
.marquee-set span{ font-family:var(--fs-display); font-size:clamp(26px,3.4vw,46px); text-transform:uppercase; color:var(--cream); padding:0 30px; letter-spacing:0.5px; white-space:nowrap; }
.marquee-set .dia{ width:11px; height:11px; background:var(--red); transform:rotate(45deg); flex-shrink:0; box-shadow:0 0 14px rgba(226,35,26,0.6); }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce){ .marquee-track{ animation:none; } }

.hero-inner{ position:relative; z-index:3; max-width:1320px; margin:0 auto; width:100%; }
.hero h1{
  font-family:var(--fs-display); font-size:clamp(52px,10.5vw,150px); line-height:0.88;
  text-transform:uppercase; letter-spacing:0.5px; margin:14px 0 0.66em; max-width:13ch;
  text-shadow:0 8px 50px rgba(0,0,0,0.5);
}
.hero h1 em{ color:var(--red); font-style:normal; }
.hero .script{ font-family:var(--fs-script); color:var(--gold); font-size:clamp(36px,6.4vw,76px); line-height:1; margin:0 0 24px; }
.hero p.lede{ max-width:58ch; font-size:21px; color:var(--cream-dim); margin-bottom:36px; line-height:1.55; }
.btnrow{ display:flex; gap:16px; flex-wrap:wrap; }

.scrollcue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--fs-label); letter-spacing:3px; font-size:12px; color:var(--cream-faint);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scrollcue .bar{ width:1px; height:42px; background:linear-gradient(var(--cream-faint), transparent); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue{ 0%,100%{ opacity:.3; transform:scaleY(.6); } 50%{ opacity:1; transform:scaleY(1); } }

/* ============================================================
   BRAND WALL — "the tracklist"
   ============================================================ */
.wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:20px; margin-top:52px; }
.tile{
  --c:var(--gold);
  position:relative; border-radius:14px; padding:32px 30px 28px; min-height:330px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  border:1px solid rgba(255,255,255,0.07);
  background:linear-gradient(165deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2));
  transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s;
}
.tile::before{ /* color wash from brand accent */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.9;
  background:radial-gradient(circle at 78% 6%, color-mix(in oklab, var(--c) 26%, transparent), transparent 58%);
}
.tile .tnum{
  position:absolute; right:18px; bottom:6px; font-family:var(--fs-display);
  font-size:118px; line-height:1; color:var(--c); opacity:0.12; pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.tile:hover{ transform:translateY(-8px); box-shadow:0 26px 60px rgba(0,0,0,0.6); border-color:color-mix(in oklab, var(--c) 50%, transparent); }
.tile:hover .tnum{ opacity:0.22; transform:translateY(-4px); }
.tile .t-top{ position:relative; z-index:2; }
.tile .t-kick{ font-family:var(--fs-label); letter-spacing:2.5px; font-size:13.5px; color:var(--c); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tile h3{ font-family:var(--fs-display); font-size:clamp(34px,3.4vw,46px); text-transform:uppercase; line-height:0.9; margin:10px 0 14px; color:var(--c); }
.tile p{ font-size:16.5px; line-height:1.5; color:var(--cream); opacity:.94; max-width:34ch; }
.tile .t-bot{ position:relative; z-index:2; }
.tile .price{ font-family:var(--fs-label); font-size:20px; letter-spacing:1px; color:var(--c); }
.tile .go{ font-family:var(--fs-label); letter-spacing:2px; font-size:15px; color:var(--c); margin-top:12px; display:flex; align-items:center; gap:7px; opacity:.92; }
.tile:hover .go{ opacity:1; }
.tile:hover .go .arr{ transform:translateX(4px); }
.tile .go .arr{ transition:transform .25s; }

.badge-soon{
  font-family:var(--fs-label); letter-spacing:1.5px; font-size:11px; padding:3px 10px; border-radius:30px;
  background:rgba(255,255,255,0.1); color:var(--cream); border:1px solid rgba(255,255,255,0.3);
}
.tile.franchise{ border:1.5px dashed rgba(226,35,26,0.6); background:linear-gradient(165deg,#1a1316,#0c0c0e); }
.tile.franchise::before{ display:none; }

/* ============================================================
   STATS
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:30px; }
.stat{ border-left:3px solid var(--red); padding-left:20px; }
.stat .n{ font-family:var(--fs-display); font-size:clamp(46px,5vw,64px); color:var(--red); line-height:0.9; }
.stat .l{ font-size:16px; color:var(--cream-dim); text-transform:uppercase; letter-spacing:1.5px; margin-top:10px; line-height:1.3; }

/* ============================================================
   FRANCHISE STRIP
   ============================================================ */
.fstrip{
  position:relative; overflow:hidden; border-radius:16px; color:#fff;
  padding:clamp(40px,5vw,62px) clamp(30px,4.5vw,56px);
  display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap;
  background:linear-gradient(118deg, var(--red) 0%, var(--red-deep) 100%);
  box-shadow:0 30px 70px rgba(168,18,12,0.32);
}
.fstrip::before{ content:""; position:absolute; inset:0; opacity:0.16; pointer-events:none; background:repeating-linear-gradient(118deg, #000 0 2px, transparent 2px 22px); }
.fstrip::after{ content:""; position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:50%; border:2px solid rgba(255,255,255,0.16); }
.fstrip h2{ font-family:var(--fs-display); font-size:clamp(30px,4.2vw,56px); text-transform:uppercase; line-height:1.0; max-width:18ch; position:relative; }
.fstrip p{ font-size:18px; max-width:46ch; margin-top:20px; color:#ffe2e0; position:relative; }
.fstrip .fs-cta{ position:relative; }

/* ============================================================
   CAFÉ "WHERE IT STARTED" / tinted sections
   ============================================================ */
.tint-cafe{ background:radial-gradient(circle at 84% 14%, rgba(216,169,63,0.14), transparent 52%), linear-gradient(160deg,#1c1712,#0c0c0e); }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; margin-top:46px; }
.two-col p{ color:var(--cream); font-size:18.5px; margin-bottom:16px; line-height:1.6; }
.taglist{ list-style:none; }
.taglist li{ font-family:var(--fs-label); letter-spacing:1.2px; font-size:22px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.1); display:flex; justify-content:space-between; gap:14px; align-items:baseline; flex-wrap:wrap; }
.taglist li .tag{ font-family:var(--fs-label); letter-spacing:1.5px; font-size:13px; padding:3px 11px; border-radius:30px; background:rgba(216,169,63,0.16); color:var(--gold); border:1px solid rgba(216,169,63,0.32); white-space:nowrap; }
.taglist li .tag.now{ background:rgba(167,189,132,0.16); color:var(--mb); border-color:rgba(167,189,132,0.35); }

/* ============================================================
   BRAND PAGES
   ============================================================ */
.bp-hero{
  min-height:78svh; display:flex; flex-direction:column; justify-content:center;
  padding:160px clamp(20px,6vw,64px) 80px; position:relative; overflow:hidden;
}
.bp-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--line-opacity); background:repeating-linear-gradient(118deg, currentColor 0 2px, transparent 2px 26px); z-index:2; }
/* user-uploaded food photo behind brand heroes */
.bp-hero-bg{ position:absolute; inset:0; z-index:0; }
.bp-hero-bg image-slot{ display:block; width:100%; height:100%; --is-radius:0px; }
.bp-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(circle at 82% 14%, color-mix(in oklab, var(--c) 26%, transparent), transparent 56%),
    linear-gradient(90deg, rgba(8,8,10,0.94) 0%, rgba(8,8,10,0.72) 44%, rgba(8,8,10,0.30) 100%),
    linear-gradient(0deg, rgba(8,8,10,0.88), rgba(8,8,10,0.05) 58%);
}
.bp-hero .bp-inner{ position:relative; z-index:3; max-width:1320px; margin:0 auto; width:100%; }
.bp-hero .kicker{ margin-bottom:14px; }
.bp-hero h1{ font-family:var(--fs-display); font-size:clamp(56px,12vw,168px); text-transform:uppercase; line-height:0.9; letter-spacing:0.5px; margin-bottom:0.6em; }
.bp-hero .script{ font-family:var(--fs-script); font-size:clamp(32px,5.4vw,66px); margin:0 0 20px; line-height:1; }
.bp-hero p.lede{ max-width:60ch; font-size:21px; color:var(--cream-dim); line-height:1.55; }
.bp-hero .btnrow{ margin-top:30px; }

.bp-body{ padding:clamp(56px,7vw,92px) clamp(20px,6vw,64px); }
.bp-body .wrap2{ max-width:1320px; margin:0 auto; }
.bp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,72px); align-items:start; }
.bp-cols h3{ font-family:var(--fs-display); font-size:clamp(26px,2.8vw,34px); text-transform:uppercase; margin-bottom:16px; line-height:1; }
.bp-cols p{ color:var(--cream-dim); font-size:18.5px; margin-bottom:16px; line-height:1.6; }
.menu-list{ list-style:none; }
.menu-list li{ font-family:var(--fs-label); letter-spacing:1px; font-size:23px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.1); display:flex; gap:14px; align-items:baseline; }
.menu-list li .mi{ color:inherit; opacity:.5; font-size:15px; min-width:26px; }

/* embedded menu slot */
.menu-embed{ margin-top:clamp(48px,6vw,72px); }
.embed-slot{
  border:1.5px dashed color-mix(in oklab, currentColor 45%, transparent);
  border-radius:14px; background:rgba(255,255,255,0.02);
  aspect-ratio:1/1.15; max-height:560px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; padding:30px;
  position:relative;
}
.embed-slot .sheet{ width:64px; height:80px; border-radius:6px; border:1.5px solid color-mix(in oklab, currentColor 40%, transparent); position:relative; opacity:.7; }
.embed-slot .sheet::before, .embed-slot .sheet::after{ content:""; position:absolute; left:12px; right:12px; height:2px; background:currentColor; opacity:.4; }
.embed-slot .sheet::before{ top:20px; box-shadow:0 10px 0 currentColor, 0 20px 0 currentColor, 0 30px 0 currentColor; }
.embed-slot .lab{ font-family:var(--fs-label); letter-spacing:2px; font-size:16px; }
.embed-slot .hint{ font-size:15px; color:var(--cream-faint); max-width:30ch; }

/* tint backgrounds (brand pages set --c too) */
.tint-rnr{ background:radial-gradient(circle at 80% 16%, rgba(255,45,32,0.2), transparent 52%), linear-gradient(160deg,#2a0a09,#120505); color:var(--rnr); }
.tint-hm{ background:radial-gradient(circle at 80% 16%, rgba(255,90,31,0.18), transparent 52%), linear-gradient(160deg,#1c1108,#0b0c10); color:var(--hm); }
.tint-afro{ background:radial-gradient(circle at 80% 16%, rgba(224,115,74,0.18), transparent 52%), linear-gradient(160deg,#2a1810,#15100b); color:var(--afro); }
.tint-fusion{ background:radial-gradient(circle at 80% 16%, rgba(255,77,109,0.16), transparent 52%), linear-gradient(160deg,#141a33,#0a0f1f); color:var(--fusion); }
.tint-mb{ background:radial-gradient(circle at 80% 16%, rgba(167,189,132,0.16), transparent 52%), linear-gradient(160deg,#1a1f12,#0c0e08); color:var(--mb); }
.tint-rockstar{ background:radial-gradient(circle at 80% 16%, rgba(168,116,255,0.18), transparent 52%), linear-gradient(160deg,#1a1330,#0b0a14); color:var(--rockstar); }
.tint-cafe2{ background:radial-gradient(circle at 80% 16%, rgba(216,169,63,0.16), transparent 52%), linear-gradient(160deg,#1c1712,#0c0c0e); color:var(--cafe); }

/* brand-colored solid button (uses --c) */
.btn-brand{ background:var(--c); color:#0c0c0e; box-shadow:0 10px 30px color-mix(in oklab, var(--c) 36%, transparent); }
.btn-brand:hover{ background:#fff; color:#0c0c0e; }
.accent{ color:var(--c); }

/* ============================================================
   STORY
   ============================================================ */
.story-hero{
  min-height:64svh; display:flex; flex-direction:column; justify-content:center;
  padding:170px clamp(20px,6vw,64px) 70px; position:relative; overflow:hidden;
  background:radial-gradient(circle at 70% 18%, rgba(216,169,63,0.16), transparent 54%), linear-gradient(160deg,#1c1712,#0b0a08);
}
.story-hero::before{ content:""; position:absolute; inset:0; opacity:var(--line-opacity); background:repeating-linear-gradient(118deg, var(--gold) 0 2px, transparent 2px 26px); }
.story-hero .si{ position:relative; z-index:2; max-width:1100px; margin:0 auto; width:100%; }
.story-hero h1{ font-family:var(--fs-display); font-size:clamp(48px,9vw,128px); text-transform:uppercase; line-height:0.88; margin-bottom:0.52em; }
.story-hero .sub{ font-family:var(--fs-script); color:var(--gold); font-size:clamp(30px,4.8vw,58px); margin-top:0; line-height:1; }

.story-body{ max-width:760px; margin:0 auto; padding:clamp(56px,8vw,100px) clamp(20px,6vw,40px); }
.story-body p{ font-size:clamp(20px,2.4vw,25px); line-height:1.72; color:var(--cream); margin-bottom:30px; }
.story-body p .lead-cap::first-letter{ }
.dropcap::first-letter{ font-family:var(--fs-display); font-size:3.1em; float:left; line-height:0.66; margin:10px 14px 0 0; color:var(--red); }
.pullquote{
  font-family:var(--fs-script); color:var(--gold); font-size:clamp(34px,5vw,58px); line-height:1.15;
  text-align:center; margin:clamp(40px,6vw,68px) 0; padding:0 4%; position:relative;
}
.pullquote::before, .pullquote::after{ content:""; display:block; width:54px; height:2px; background:rgba(216,169,63,0.5); margin:22px auto; }
.story-sig{ text-align:center; margin-top:60px; }
.story-sig .s1{ font-family:var(--fs-script); color:var(--gold); font-size:38px; }
.story-sig .s2{ font-family:var(--fs-label); letter-spacing:3px; font-size:14px; color:var(--cream-dim); margin-top:8px; }

/* ============================================================
   FRANCHISE PAGE
   ============================================================ */
.fr-hero{
  min-height:72svh; display:flex; flex-direction:column; justify-content:center;
  padding:168px clamp(20px,6vw,64px) 80px; position:relative; overflow:hidden;
  background:radial-gradient(circle at 76% 22%, rgba(226,35,26,0.22), transparent 52%), linear-gradient(160deg,#1c1417,#070708);
}
.fr-hero::before{ content:""; position:absolute; inset:0; opacity:var(--line-opacity); background:repeating-linear-gradient(118deg, var(--red) 0 2px, transparent 2px 26px); }
.fr-hero .fi{ position:relative; z-index:2; max-width:1320px; margin:0 auto; width:100%; }
.fr-hero h1{ font-family:var(--fs-display); font-size:clamp(44px,8.5vw,120px); text-transform:uppercase; line-height:0.9; margin:14px 0 0.55em; }
.fr-hero h1 em{ color:var(--red); font-style:normal; }

.cards3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; margin-top:46px; }
.fcard{ background:linear-gradient(165deg, var(--panel-2), var(--panel)); border:1px solid rgba(226,35,26,0.22); border-radius:14px; padding:32px 30px; position:relative; transition:transform .25s, box-shadow .25s; }
.fcard:hover{ transform:translateY(-5px); box-shadow:0 22px 50px rgba(0,0,0,0.5); }
.fcard.popular{ border-color:var(--red); box-shadow:0 0 0 1px var(--red), 0 24px 60px rgba(226,35,26,0.2); }
.fcard .ribbon{ position:absolute; top:-12px; left:30px; background:var(--gold); color:var(--ink); font-family:var(--fs-label); letter-spacing:1.5px; font-size:13px; padding:5px 14px; border-radius:30px; }
.fcard .tier{ font-family:var(--fs-label); letter-spacing:2.5px; color:var(--red); font-size:15px; }
.fcard h3{ font-family:var(--fs-display); font-size:clamp(26px,2.6vw,32px); text-transform:uppercase; margin:8px 0 6px; }
.fcard .invest{ font-family:var(--fs-body); color:var(--gold); font-weight:700; font-size:21px; margin-bottom:18px; }
.fcard ul{ list-style:none; }
.fcard li{ padding:9px 0; border-bottom:1px solid rgba(255,255,255,0.07); font-size:16.5px; color:var(--cream-dim); display:flex; gap:11px; align-items:flex-start; line-height:1.4; }
.fcard li::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--red); margin-top:8px; flex-shrink:0; }
.fcard.popular li::before{ background:var(--gold); }

.getgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:20px; margin-top:46px; }
.gcard{ background:var(--panel); border:1px solid rgba(255,255,255,0.07); border-radius:14px; padding:30px; transition:border-color .25s, transform .25s; }
.gcard:hover{ border-color:rgba(226,35,26,0.45); transform:translateY(-4px); }
.gcard .gnum{ font-family:var(--fs-label); letter-spacing:2px; color:var(--red); font-size:14px; }
.gcard h3{ font-family:var(--fs-display); font-size:24px; text-transform:uppercase; margin:8px 0 12px; line-height:1; }
.gcard p{ color:var(--cream-dim); font-size:16.5px; line-height:1.55; }

.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; counter-reset:s; margin-top:46px; }
.step{ position:relative; padding:30px 26px; background:linear-gradient(165deg, var(--panel-2), var(--panel)); border-radius:14px; border-top:3px solid var(--red); overflow:hidden; }
.step::before{ counter-increment:s; content:"0" counter(s); font-family:var(--fs-display); font-size:84px; color:var(--red); opacity:0.16; position:absolute; top:2px; right:18px; line-height:1; }
.step h4{ font-family:var(--fs-label); letter-spacing:1.5px; font-size:24px; margin-bottom:10px; position:relative; }
.step p{ font-size:16px; color:var(--cream-dim); line-height:1.5; position:relative; }

.editnote{ background:rgba(226,35,26,0.09); border:1px dashed rgba(226,35,26,0.6); border-radius:10px; padding:16px 20px; font-size:15px; color:#ff8c84; margin-top:34px; line-height:1.5; }

/* ============================================================
   FORMS
   ============================================================ */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:780px; margin-top:40px; }
.form .full{ grid-column:1/-1; }
.field label{ display:block; font-family:var(--fs-label); font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--cream-dim); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; background:rgba(0,0,0,0.35); border:1px solid rgba(226,35,26,0.28);
  border-radius:7px; color:var(--cream); font-family:var(--fs-body); font-size:17px; transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--cream-faint); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(226,35,26,0.16); }
.field select{ appearance:none; cursor:pointer; }
.form-done{ font-family:var(--fs-label); letter-spacing:2px; font-size:18px; color:var(--mb); padding:14px 0; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); margin-top:30px; }
.cinfo h3{ font-family:var(--fs-display); text-transform:uppercase; color:var(--gold); margin-bottom:14px; }
.cinfo p{ font-size:19px; margin-bottom:7px; color:var(--cream); }
.cinfo a{ color:var(--red); }
.cinfo a:hover{ text-decoration:underline; }
.cinfo .blk{ margin-bottom:30px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.foot{ background:var(--ink-2); padding:64px clamp(20px,6vw,64px) 40px; border-top:1px solid rgba(226,35,26,0.28); position:relative; z-index:2; }
.foot-top{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:44px 32px; align-items:start; }
.foot-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.foot-tag{ font-size:16px; color:var(--cream-dim); line-height:1.55; }
.foot-social{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-social a{ font-family:var(--fs-label); letter-spacing:1.5px; font-size:13px; color:var(--cream-dim); transition:color .2s; }
.foot-social a:hover{ color:var(--red); }
.foot-col{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; }
.foot-col h4{ font-family:var(--fs-label); letter-spacing:2.5px; font-size:14px; color:var(--gold); text-transform:uppercase; margin-bottom:5px; }
.foot-col span{ cursor:pointer; font-family:var(--fs-body); font-weight:600; font-size:14.5px; letter-spacing:0.4px; color:var(--cream-dim); transition:color .2s; white-space:nowrap; }
.foot-col span:hover{ color:var(--red); }
.foot-col p{ font-size:14.5px; color:var(--cream-dim); line-height:1.45; }
.foot-col a{ font-size:14.5px; color:var(--red); }
.foot-col a:hover{ text-decoration:underline; }
.foot-hours{ margin-top:4px; }
.foot-base{ max-width:1320px; margin:48px auto 0; padding-top:22px; border-top:1px solid rgba(255,255,255,0.07); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--cream-faint); letter-spacing:0.5px; }
@media(max-width:880px){
  .foot-top{ grid-template-columns:1fr 1fr; gap:38px 28px; }
  .foot-brand{ grid-column:1 / -1; }
}
@media(max-width:480px){
  .foot-top{ grid-template-columns:1fr; gap:32px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:820px){
  body{ font-size:17px; }
  .two-col, .bp-cols, .contact-grid, .form{ grid-template-columns:1fr; }
  .hero .record{ opacity:0.32; right:-34vw; top:38%; width:130vw; }
  .hero p.lede, .bp-hero p.lede{ font-size:19px; }
  .btn{ font-size:17px; padding:14px 26px; }
  .fstrip{ flex-direction:column; align-items:flex-start; }
}
@media(max-width:520px){
  .wall{ grid-template-columns:1fr; }
  .tile{ min-height:280px; }
}

/* ============================================================
   PRODUCTION ADDITIONS (Cowork hardening pass)
   ============================================================ */
/* Brand-tinted hero placeholder (replaces the prototype image drop slots).
   Swap in real photography later by giving .bp-hero-bg a background-image. */
.bp-hero-bg.ph-photo{
  background:
    radial-gradient(120% 90% at 78% 18%, color-mix(in srgb, var(--c) 42%, transparent) 0%, transparent 60%),
    radial-gradient(120% 110% at 12% 92%, color-mix(in srgb, var(--c) 26%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, #141318 0%, #0c0c0e 100%);
}
.bp-hero-bg.ph-photo::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,0.022) 0 2px, transparent 2px 9px);
  mix-blend-mode:overlay; opacity:.6;
}
/* Fallback for browsers without color-mix() */
@supports not (background: color-mix(in srgb, red, blue)){
  .bp-hero-bg.ph-photo{ background:linear-gradient(180deg, #1a1822 0%, #0c0c0e 100%); }
}
/* Inline form error / mailto fallback */
.form-err{ font-family:var(--fs-body); font-size:15px; color:var(--cream-dim); margin:4px 0 2px; }
.form-err a{ color:var(--red); }

/* Brand logo plate — real logos on a light card so they read on the dark heroes */
.bp-logo-h1{ margin:0 0 20px; line-height:0; }
.brand-plate{
  display:inline-block; background:#f5f2ec; border-radius:18px;
  padding:clamp(16px,2.1vw,26px) clamp(24px,3vw,40px);
  box-shadow:0 22px 55px rgba(0,0,0,0.5);
}
.brand-plate img{ display:block; height:clamp(72px,11vw,140px); width:auto; }
@media (max-width:560px){ .brand-plate{ border-radius:14px; } }

/* Home tile logo plate */
.tile-logo{ display:inline-block; background:#f5f2ec; border-radius:11px; padding:9px 13px; margin-bottom:14px; box-shadow:0 8px 22px rgba(0,0,0,0.35); }
.tile-logo img{ display:block; height:clamp(30px,4.2vw,44px); width:auto; }