/* ============================================================
   Radial Engineering — faithful rebuild, elevated.
   Real palette + self-hosted Exo 2 / Roboto / Lora.
   ============================================================ */

@import url('../fonts/fonts.css');

:root{
  /* Real Radial palette (IDENTITY.md) */
  --red:       #eb2d2e;  /* brand red — logo, large display, borders, big accents */
  --red-fn:    #cf1f24;  /* functional red — buttons + small red text (AA on white) */
  --red-hover: #b3171c;
  --ink:       #282b39;  /* engineered dark — dark bands + footer */
  --ink-2:     #1f222e;
  --body:      #333333;
  --slate:     #445870;  /* subheads / secondary on light */
  --meta:      #5b6675;  /* small meta on light (AA) */
  --muted-dk:  #8b96a3;  /* muted text on dark */
  --surface:   #f4f8fa;  /* alternating light band */
  --panel:     #c6d4e6;
  --border:    #d7dde4;
  --border-2:  #c6c6c6;
  --white:     #ffffff;

  --maxw: 1180px;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --sect: clamp(4.5rem, 8vw, 7.5rem);
  --r: 6px;
  --shadow-card: 0 1px 2px rgba(40,43,57,.05), 0 10px 30px rgba(40,43,57,.07);
  --shadow-lift: 0 2px 6px rgba(40,43,57,.08), 0 22px 50px rgba(40,43,57,.14);
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:'Roboto',system-ui,sans-serif;
  font-weight:400;
  color:var(--body);
  background:var(--white);
  line-height:1.65;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  overflow-x:hidden;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:var(--red-fn); text-decoration:none; }
h1,h2,h3,h4,h5{
  font-family:'Exo 2',sans-serif;
  color:var(--ink);
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sect); }
.eyebrow{
  font-family:'Exo 2',sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:.16em;
  font-size:.74rem; color:var(--red-fn); margin:0 0 1rem;
}
.eyebrow.on-dark{ color:#ed7a7b; }  /* palette soft-red — AA (5.1:1) on navy */
.lead{ font-size:clamp(1.06rem,1rem + .4vw,1.22rem); color:var(--slate); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:'Exo 2',sans-serif; font-weight:600;
  font-size:.95rem; letter-spacing:.02em;
  padding:.95rem 1.7rem; min-height:48px;
  border-radius:var(--r); border:2px solid transparent;
  cursor:pointer; transition:transform .25s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn-red{ background:var(--red-fn); color:#fff; }
.btn-red:hover{ background:var(--red-hover); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--border-2); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-ghost.on-dark{ color:#fff; border-color:rgba(255,255,255,.4); }
.btn-ghost.on-dark:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.btn .arw{ transition:transform .25s var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{ display:flex; align-items:center; gap:1.5rem; height:72px; }
.brand{ display:flex; align-items:center; }
.brand img{ height:34px; width:auto; }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:.35rem; list-style:none; padding:0; margin:0; }
.nav-links a{
  font-family:'Exo 2',sans-serif; font-weight:600; font-size:.84rem;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink); padding:.85rem .7rem; min-height:44px; display:inline-flex; align-items:center;
  border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--red-fn); border-color:var(--red); }
.nav-search{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:var(--r); color:var(--slate);
  background:#fff; transition:border-color .2s,color .2s;
}
.nav-search:hover{ border-color:var(--ink); color:var(--ink); }
.nav-toggle{ display:none; width:44px; height:44px; border:1px solid var(--border); border-radius:var(--r);
  background:#fff; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:4px; }
.nav-toggle span{ width:20px; height:2px; background:var(--ink); display:block; }

/* ---------- Hero (dark photo band) ---------- */
.hero{ position:relative; background:var(--ink); color:#fff; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(80deg, rgba(31,34,46,.94) 0%, rgba(31,34,46,.72) 42%, rgba(31,34,46,.30) 100%); }
.hero-inner{ position:relative; z-index:2; padding-block:clamp(5rem,12vw,9rem); max-width:680px; }
.hero h1{ color:#fff; font-weight:800; font-size:clamp(2.4rem,2rem + 4vw,4.4rem); letter-spacing:-.02em; }
.hero .lead{ color:#e3e7ec; max-width:46ch; margin-bottom:2rem; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- Application strip ---------- */
.appstrip{ background:#fff; border-bottom:1px solid var(--border); }
.app-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.app{ text-align:center; padding:1.4rem .5rem; }
.app .glyph{ width:46px; height:46px; margin:0 auto .7rem; color:var(--slate); }
.app .glyph svg{ width:100%; height:100%; }
.app span{ font-family:'Exo 2',sans-serif; font-weight:600; font-size:.82rem; color:var(--ink);
  text-transform:uppercase; letter-spacing:.05em; display:block; }

/* ---------- Section heads ---------- */
.head-center{ text-align:center; max-width:640px; margin:0 auto clamp(2.5rem,5vw,3.5rem); }
.head-center h2{ font-weight:800; font-size:clamp(1.8rem,1.4rem + 2vw,2.7rem); }

/* ---------- Product cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.card{
  background:#fff; border:1px solid var(--border-2); border-radius:var(--r);
  overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex; flex-direction:column;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
.card-img{ aspect-ratio:16/10; background:var(--surface); overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .card-img img{ transform:scale(1.04); }
.card-body{ padding:1.4rem 1.4rem 1.6rem; flex:1; display:flex; flex-direction:column; }
.tag{ font-family:'Exo 2',sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--red-fn); margin-bottom:.5rem; }
.card-body h3{ font-size:1.18rem; font-weight:700; margin-bottom:.4rem; }
.card-body p{ color:var(--meta); font-size:.93rem; margin-bottom:1rem; }
.card-link{ margin-top:auto; font-family:'Exo 2',sans-serif; font-weight:600; font-size:.85rem;
  color:var(--red-fn); display:inline-flex; align-items:center; gap:.4em; min-height:44px; }
.card-link .arw{ transition:transform .25s var(--ease); }
.card-link:hover .arw{ transform:translateX(3px); }

/* ---------- Editorial split bands ---------- */
.editorial{ position:relative; min-height:clamp(320px,42vw,460px); display:flex; align-items:flex-end;
  color:#fff; overflow:hidden; }
.editorial img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.editorial::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(31,34,46,.30) 0%, rgba(31,34,46,.62) 55%, rgba(31,34,46,.94) 100%); }
.editorial .wrap{ position:relative; z-index:2; padding-block:clamp(2.5rem,5vw,4rem); }
.editorial h3{ color:#fff; font-weight:700; font-size:clamp(1.5rem,1.2rem + 1.6vw,2.2rem); max-width:18ch;
  text-shadow:0 1px 14px rgba(15,12,10,.55); }
.editorial a{ text-shadow:0 1px 12px rgba(15,12,10,.5); }
.editorial a{ font-family:'Exo 2',sans-serif; font-weight:600; color:#fff; display:inline-flex; align-items:center;
  gap:.4em; min-height:44px; border-bottom:2px solid var(--red); padding-bottom:2px; }
.editorial a:hover .arw{ transform:translateX(3px); }
.editorial a .arw{ transition:transform .25s var(--ease); }
.edit-2{ display:grid; grid-template-columns:1fr 1fr; }
@media(max-width:760px){ .edit-2{ grid-template-columns:1fr; } }

/* ---------- Product-line feature band ---------- */
.feature-band{ background:var(--surface); }
.fb-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.fb-img{ border-radius:var(--r); overflow:hidden; aspect-ratio:7/4; box-shadow:var(--shadow-card); }
.fb-img img{ width:100%; height:100%; object-fit:cover; }
.fb-copy h2{ font-weight:800; font-size:clamp(1.7rem,1.4rem + 1.6vw,2.4rem); }

/* ---------- Artist stories (gradient band) ---------- */
.artists{ background:linear-gradient(115deg, var(--red) 0%, #b6232c 38%, var(--ink) 100%); color:#fff; }
.artists .head-center h2{ color:#fff; }
.artists .head-center p{ color:rgba(255,255,255,.85); }
.artist-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.artist{ position:relative; aspect-ratio:1/1; border-radius:var(--r); overflow:hidden; }
.artist img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.artist:hover img{ transform:scale(1.05); }
.artist::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%, rgba(20,16,15,.78) 100%); }
.artist b{ position:absolute; left:.9rem; bottom:.75rem; z-index:2; color:#fff;
  font-family:'Exo 2',sans-serif; font-weight:700; font-size:.92rem; letter-spacing:.01em; }

/* ---------- Testimonial (Lora) ---------- */
.testi{ background:#fff; }
.testi-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.testi-img{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-card); }
.testi-img img{ width:100%; height:100%; object-fit:cover; }
.testi blockquote{ margin:0; }
.testi blockquote p{ font-family:'Lora',Georgia,serif; font-size:clamp(1.3rem,1.1rem + 1.1vw,1.8rem);
  line-height:1.42; color:var(--ink); font-style:italic; margin-bottom:1.2rem; }
.testi cite{ font-style:normal; font-family:'Exo 2',sans-serif; font-weight:700; color:var(--ink); display:block; }
.testi cite span{ display:block; font-family:'Roboto',sans-serif; font-weight:400; color:var(--meta); font-size:.9rem; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:#c4ccd6; padding-block:clamp(3.5rem,6vw,5rem) 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr; gap:2.5rem; }
.footer .flogo img{ height:48px; width:auto; margin-bottom:1rem; }
.footer p{ color:var(--muted-dk); font-size:.92rem; max-width:34ch; }
.footer h4{ font-family:'Exo 2',sans-serif; font-weight:700; color:#fff; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.1rem; }
.foot-links{ list-style:none; padding:0; margin:0; }
.foot-links li{ margin-bottom:.2rem; }
.foot-links a{ color:#c4ccd6; font-size:.93rem; display:inline-flex; min-height:40px; align-items:center;
  transition:color .2s; }
.foot-links a:hover{ color:#fff; }
.news input{ width:100%; padding:.85rem 1rem; min-height:48px; border:1px solid #3c4252;
  background:#1f222e; color:#fff; border-radius:var(--r); font-family:'Roboto'; font-size:.95rem; margin-bottom:.7rem; }
.news input::placeholder{ color:#7b8593; }
.foot-bottom{ border-top:1px solid #3c4252; margin-top:2.5rem; padding-top:1.6rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center; }
.foot-bottom small{ color:var(--muted-dk); font-size:.82rem; }
.foot-bottom .concept{ color:var(--muted-dk); font-size:.82rem; }
.foot-bottom .concept b{ color:#dfe4ea; font-weight:500; }
.social{ display:flex; gap:.5rem; }
.social a{ width:40px; height:40px; border:1px solid #3c4252; border-radius:50%; display:inline-flex;
  align-items:center; justify-content:center; color:#c4ccd6; transition:background .2s,border-color .2s; }
.social a:hover{ background:var(--red-fn); border-color:var(--red-fn); color:#fff; }
.social svg{ width:16px; height:16px; }

/* ---------- Breadcrumb ---------- */
.crumb{ background:var(--surface); border-bottom:1px solid var(--border); }
.crumb ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; padding:1rem 0; margin:0;
  font-size:.84rem; color:var(--meta); font-family:'Exo 2',sans-serif; font-weight:500; }
.crumb a{ color:var(--meta); } .crumb a:hover{ color:var(--red-fn); }
.crumb li[aria-current]{ color:var(--ink); }

/* ---------- Product hero ---------- */
.phero{ background:#fff; }
.phero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.phero-img{ border-radius:var(--r); overflow:hidden; aspect-ratio:12/5; background:var(--ink); box-shadow:var(--shadow-card); }
.phero-img img{ width:100%; height:100%; object-fit:cover; }
.phero h1{ font-weight:800; font-size:clamp(2.2rem,1.8rem + 2.4vw,3.4rem); }
.phero .price{ font-family:'Exo 2',sans-serif; font-weight:700; color:var(--ink); font-size:1.4rem; margin:.2rem 0 1.2rem; }
.spec-list{ list-style:none; padding:0; margin:1.4rem 0 1.8rem; }
.spec-list li{ display:flex; gap:.7rem; align-items:flex-start; padding:.5rem 0; border-bottom:1px solid var(--border);
  font-size:.95rem; color:var(--body); }
.spec-list li::before{ content:""; flex:none; width:8px; height:8px; margin-top:.55em; border-radius:50%;
  background:var(--red); }

/* ---------- Feature rows ---------- */
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.frow.flip .frow-img{ order:2; }
.frow-img{ border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-card); }
.frow-img img{ width:100%; height:100%; object-fit:cover; }
.frow h3{ font-weight:700; font-size:clamp(1.4rem,1.2rem + 1.2vw,2rem); }
@media(max-width:760px){ .frow,.frow.flip{ grid-template-columns:1fr; } .frow.flip .frow-img{ order:0; } }

/* ---------- Spec table ---------- */
.spectable{ width:100%; border-collapse:collapse; }
.spectable th,.spectable td{ text-align:left; padding:.95rem 1.1rem; border-bottom:1px solid var(--border);
  font-size:.94rem; }
.spectable th{ font-family:'Exo 2',sans-serif; font-weight:600; color:var(--slate); width:38%;
  background:var(--surface); }
.spectable td{ color:var(--body); }

/* ---------- Dark video / cta band ---------- */
.darkband{ background:var(--ink); color:#fff; }
.darkband h2{ color:#fff; font-weight:800; font-size:clamp(1.7rem,1.4rem + 1.6vw,2.5rem); }
.darkband p{ color:var(--muted-dk); }

/* ---------- Related products ---------- */
.rel-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; }
.rel{ background:#fff; border:1px solid var(--border-2); border-radius:var(--r); overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.rel:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.rel-img{ aspect-ratio:4/3; background:var(--surface); }
.rel-img img{ width:100%; height:100%; object-fit:cover; }
.rel-body{ padding:1rem 1.1rem 1.3rem; }
.rel-body h4{ font-family:'Exo 2',sans-serif; font-weight:700; font-size:1rem; color:var(--ink); margin-bottom:.3rem; }
.rel-body .rprice{ color:var(--red-fn); font-family:'Exo 2',sans-serif; font-weight:700; font-size:.95rem; }

/* ---------- Film page specifics ---------- */
.film-hero{ background:var(--ink-2); }
.film-hero::after{ background:linear-gradient(85deg, rgba(20,17,15,.92) 0%, rgba(20,17,15,.55) 55%, rgba(20,17,15,.2) 100%); }
.film-hero .lead{ color:#dfe4ea; }
.kicker-mono{ font-family:'Roboto',monospace; }
.offer{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.offer-card{ background:#fff; border:1px solid var(--border-2); border-radius:var(--r); padding:2rem 1.7rem;
  position:relative; transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.offer-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.offer-card.lead-rung{ border-color:var(--red); border-width:2px; }
.offer-card .rung{ font-family:'Exo 2'; font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red-fn); margin-bottom:.7rem; }
.offer-card h3{ font-weight:700; font-size:1.3rem; margin-bottom:.3rem; }
.offer-card .num{ font-family:'Exo 2'; font-weight:800; font-size:1.6rem; color:var(--ink); margin:.4rem 0 .8rem; }
.offer-card p{ color:var(--meta); font-size:.92rem; }
.beat{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; counter-reset:beat; }
.beat .b{ }
.beat .b .n{ font-family:'Exo 2'; font-weight:800; font-size:2.2rem; color:var(--red); line-height:1; margin-bottom:.6rem; }
.beat .b h3{ font-size:1.2rem; font-weight:700; margin-bottom:.4rem; }
.beat .b p{ color:var(--meta); font-size:.95rem; }
.filmstill{ border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-card); }
.filmstill img{ width:100%; height:auto; display:block; }
.pullquote{ max-width:760px; margin:0 auto; text-align:center; }
.pullquote p{ font-family:'Lora',Georgia,serif; font-style:italic; font-size:clamp(1.4rem,1.1rem + 1.5vw,2.1rem);
  line-height:1.4; color:var(--ink); }
.pullquote cite{ font-style:normal; font-family:'Exo 2'; font-weight:600; color:var(--meta); font-size:.92rem; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:980px){
  .foot-grid{ grid-template-columns:1fr 1fr; gap:2rem; }
  .rel-grid{ grid-template-columns:repeat(2,1fr); }
  .artist-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:860px){
  .nav-links,.nav-search{ display:none; }
  .nav-toggle{ display:flex; margin-left:auto; }
  .nav-links.open{ display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column;
    background:#fff; border-bottom:1px solid var(--border); padding:.5rem var(--gut) 1.2rem; gap:0; }
  .nav-links.open a{ width:100%; border-bottom:1px solid var(--border); padding:1rem 0; }
}
@media(max-width:760px){
  .cards{ grid-template-columns:1fr; }
  .app-row{ grid-template-columns:repeat(2,1fr); }
  .fb-grid,.phero-grid,.testi-grid,.offer,.beat{ grid-template-columns:1fr; }
  .testi-img,.fb-img{ order:-1; }
  .phero-img{ aspect-ratio:16/9; }
  .offer,.beat{ gap:1.2rem; }
}
@media(max-width:520px){
  .artist-grid{ grid-template-columns:repeat(2,1fr); }
  .rel-grid{ grid-template-columns:1fr; }
  .app-row{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-cta .btn{ width:100%; justify-content:center; }
}