/* ─── SELF-HOSTED BRAND FONTS ─────────────────────────────────────── */
@font-face { font-family:"Roboto"; src:url("/project/fonts/Roboto-Light.woff2") format("woff2");   font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto"; src:url("/project/fonts/Roboto-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto"; src:url("/project/fonts/Roboto-Medium.woff2") format("woff2");  font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto"; src:url("/project/fonts/Roboto-Bold.woff2") format("woff2");     font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto"; src:url("/project/fonts/Roboto-Black.woff2") format("woff2");    font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto Condensed"; src:url("/project/fonts/Roboto_Condensed-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto Condensed"; src:url("/project/fonts/Roboto_Condensed-Bold.woff2") format("woff2");     font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Roboto Condensed"; src:url("/project/fonts/Roboto_Condensed-Black.woff2") format("woff2");    font-weight:900; font-style:normal; font-display:swap; }

/* ─── TOKENS ──────────────────────────────────────────────────────── */
:root {
  --ink:        #0E0E10;
  --ink-soft:   #1A1A1D;
  --paper:      #FFFFFF;
  --paper-2:    #F4F3F1;
  --paper-3:    #ECEAE6;
  --line:       rgba(14,14,16,0.12);
  --line-2:     rgba(14,14,16,0.22);
  --body:       #3A3A40;
  --muted:      #67676F;       /* darkened to meet WCAG AA (4.5:1) on light */

  --accent:     #DE0000;       /* tweakable — meets AA contrast on white & for white text */
  --accent-ink: #FFFFFF;       /* text on accent */

  --img-gray:   100%;          /* tweakable: 0% = full colour, 100% = B&W */

  --font-display: "Roboto Condensed", system-ui, sans-serif;  /* tweakable */
  --font-disp-weight: 900;
  --font-disp-tracking: -0.01em;
  --font-disp-transform: uppercase;
  --font-body: "Roboto", system-ui, sans-serif;

  --maxw: 1320px;
  --pad: 56px;
  --sectionY: 132px;           /* tweakable via density */
  --nav-h: 74px;
}

/* ─── RESET ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-weight: 300; line-height: 1.6;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }

/* ─── TYPE ────────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-display);
  font-weight: var(--font-disp-weight);
  letter-spacing: var(--font-disp-tracking);
  text-transform: var(--font-disp-transform);
  line-height: 0.92;
}
.eyebrow {
  font-family: var(--font-body); font-weight: 700;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px; color: var(--ink);
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; background: var(--accent); display: block;
}
.eyebrow.on-dark { color: #fff; }
.kicker {
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.lead { font-size: 20px; line-height: 1.55; color: var(--body); font-weight: 300; }
.body { font-size: 16px; line-height: 1.7; color: var(--body); font-weight: 300; }
.body-sm { font-size: 14px; line-height: 1.7; color: var(--body); font-weight: 400; }
em.hot { font-style: normal; color: var(--accent); }

/* ─── LAYOUT ──────────────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--sectionY) 0; }
.section-sm { padding: calc(var(--sectionY) * 0.62) 0; }
@media (max-width: 860px){ :root{ --pad: 24px; --sectionY: 84px; --nav-h: 64px; } }
@media (max-width: 560px){ :root{ --pad: 20px; --sectionY: 68px; } }

/* ─── BUTTONS ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 16px 28px; transition: all .18s cubic-bezier(.2,.8,.2,1);
  border: 1.5px solid transparent;
  min-height: 48px;
}
@media (max-width: 560px){ .btn { padding: 15px 22px; font-size: 12px; letter-spacing: 0.14em; } }
.btn .arr { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.btn:hover .arr { transform: translateX(5px); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { filter: brightness(.9); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { border-color: #fff; background: #fff; color: var(--ink); }
.btn-ghost-ink { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost-ink:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.link {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.link .arr { color: var(--accent); transition: transform .2s; }
.link:hover .arr { transform: translateX(5px); }
.link.on-dark { color: #fff; }

/* ─── UTILITY BAR ─────────────────────────────────────────────────── */
.util {
  background: var(--ink); color: rgba(255,255,255,.62);
  font-size: 11.5px; letter-spacing: 0.04em; font-weight: 400;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.util .wrap { display: flex; align-items: center; justify-content: space-between; height: 38px; }
@media (max-width: 560px){ .util { font-size: 11px; } .util .wrap { height: 34px; } .util-right { gap: 16px; } }
.util-left { display: flex; align-items: center; gap: 10px; }
.util-left .dot { width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.util-right { display: flex; align-items: center; gap: 26px; }
.util-right a { transition: color .15s; }
.util-right a:hover { color: #fff; }
@media (max-width: 860px){ .util-left span.tag { display: none; } }

/* ─── NAV ─────────────────────────────────────────────────────────── */
#nav {
  position: sticky; top: 0; z-index: 900; height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent; transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
#nav.solid { background: rgba(255,255,255,.97); box-shadow: 0 1px 0 var(--line), 0 16px 40px -28px rgba(0,0,0,.4); }
.nav-in { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { height: 34px; width: auto; }
@media (max-width: 560px){ .nav-logo img { height: 28px; } }
.nav-mid { display: flex; align-items: center; gap: 34px; }
.nav-mid a {
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.13em; text-transform: uppercase; color: #fff;
  position: relative; padding: 6px 0; transition: color .18s;
}
.nav-mid a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--accent); transition: width .25s cubic-bezier(.2,.8,.2,1);
}
.nav-mid a:hover::after, .nav-mid a.active::after { width: 100%; }
#nav.solid .nav-mid a { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-search { color:#fff; display:flex; align-items:center; transition: color .18s; }
#nav.solid .nav-search { color: var(--ink); }
.nav-cta { padding: 13px 22px; }
.hamb { display: none; flex-direction: column; gap: 5px; padding: 12px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.hamb span { width: 24px; height: 2px; background: #fff; display: block; transition: .3s; }
#nav.solid .hamb span { background: var(--ink); }
@media (max-width: 1040px){ .nav-mid, .nav-right .btn, .nav-search { display: none; } .hamb { display: flex; } }

/* mobile menu */
.mmenu { position: fixed; inset: 0; z-index: 950; background: var(--ink); color:#fff;
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 32px;
  transform: translateY(-100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.mmenu.open { transform: translateY(0); }
.mmenu a { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: 38px; letter-spacing: -0.01em; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 560px){ .mmenu a { font-size: 30px; padding: 12px 0; } .mmenu { gap: 4px; padding: 0 24px; } }
.mmenu .mclose { position: absolute; top: 24px; right: 28px; font-size: 30px; font-weight: 300; }

/* ─── HERO ────────────────────────────────────────────────────────── */
.hero { position: relative; margin-top: calc(-1 * var(--nav-h)); min-height: calc(100svh - 38px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; background: #050506; }
.hero-media > img, .hero-media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(var(--img-gray)) contrast(1.05) brightness(.82); }
.hero-media .scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(5,5,6,.55) 0%, rgba(5,5,6,.15) 34%, rgba(5,5,6,.55) 72%, rgba(5,5,6,.92) 100%); }
.hero-media .scrim-l { position:absolute; inset:0; background: linear-gradient(90deg, rgba(5,5,6,.7) 0%, rgba(5,5,6,.2) 42%, transparent 70%); }
.hero-rule { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); z-index: 3; }
.hero-in { position: relative; z-index: 2; width: 100%; padding-bottom: 120px; }
.hero-eye { margin-bottom: 26px; }
.hero h1 { color: #fff; font-size: clamp(42px, 8.4vw, 138px); margin-bottom: 28px; max-width: 16ch; }
.hero p.sub { color: rgba(255,255,255,.82); font-size: clamp(15px,1.5vw,20px); font-weight: 300; max-width: 56ch; line-height: 1.55; margin-bottom: 36px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 560px){
  .hero { min-height: calc(100svh - 34px); }
  .hero-in { padding-bottom: 44px; }
  .hero h1 { margin-bottom: 22px; line-height: 0.95; }
  .hero p.sub { margin-bottom: 28px; }
  .hero-btns { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-btns .btn { width: 100%; }
  .hero-eye { margin-bottom: 20px; }
  .hero-feature .wrap { height: 56px; gap: 14px; }
  .hf-left { font-size: 12px; gap: 12px; }
  .hf-dots span { width: 18px; }
}
.hero-feature {
  position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.18);
  background: rgba(5,5,6,.34); backdrop-filter: blur(2px);
}
.hero-feature .wrap { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 24px; }
.hf-left { display: flex; align-items: center; gap: 18px; color: rgba(255,255,255,.86); font-size: 13px; letter-spacing: .02em; }
.hf-left .idx { font-family: var(--font-display); font-weight: 900; color:#fff; font-size: 15px; letter-spacing: .04em; }
.hf-left .bar { width: 1px; height: 22px; background: rgba(255,255,255,.25); }
.hf-dots { display: flex; gap: 9px; align-items: center; }
.hf-dots span { width: 26px; height: 3px; background: rgba(255,255,255,.28); transition: background .2s; }
.hf-dots span.on { background: var(--accent); }
@media (max-width:860px){ .hero-feature .hf-left .tagline { display:none; } }

/* ─── INTRO STATEMENT ─────────────────────────────────────────────── */
.intro { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 72px; align-items: start; }
.intro h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.04; color: var(--ink); }
.intro .rt { padding-top: 8px; }
.intro .rt .body { margin-bottom: 28px; font-size: 17px; }
@media (max-width: 920px){ .intro { grid-template-columns: 1fr; gap: 28px; } }

/* ─── STATS ───────────────────────────────────────────────────────── */
.stats { background: var(--ink); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 18px 36px 18px 0; border-left: 1px solid rgba(255,255,255,.14); padding-left: 32px; }
@media (max-width: 560px){ .stat { padding: 28px 0 0; } .stat .lab { margin-top: 10px; } }
.stat:first-child { border-left: none; padding-left: 0; }
.stat .num { font-family: var(--font-display); font-weight: 900; font-size: clamp(52px, 5.6vw, 84px); line-height: 0.95; letter-spacing: -0.01em; }
.stat .num .u, .stat .num.u { color: var(--accent); }
.stat .lab { margin-top: 14px; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 600; line-height: 1.5; }
@media (max-width: 920px){ .stats-grid { grid-template-columns: 1fr 1fr; gap: 36px 0; } .stat:nth-child(odd){ border-left:none; padding-left:0; } .stat:nth-child(even){ padding-left:32px; } }
@media (max-width: 560px){ .stats-grid { grid-template-columns: 1fr; } .stat, .stat:nth-child(odd), .stat:nth-child(even){ border-left:none; padding-left:0; border-top:1px solid rgba(255,255,255,.14); padding-top:28px; } .stat:first-child{ border-top:none; padding-top:0; } }

/* ─── SECTION HEADER ──────────────────────────────────────────────── */
.shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }
.shead h2 { font-size: clamp(30px, 4vw, 62px); color: var(--ink); margin-top: 22px; line-height: 0.96; }
@media (max-width: 560px){ .shead { margin-bottom: 40px; } .shead h2 { margin-top: 16px; } }
.shead.on-dark h2 { color: #fff; }
.shead .body { max-width: 42ch; }
@media (max-width: 860px){ .shead { flex-direction: column; align-items: flex-start; gap: 18px; } }

/* ─── BUILD TILES (Turner-style interactive) ──────────────────────── */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tile { position: relative; min-height: 560px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: #0b0b0c; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(var(--img-gray)) brightness(.62); transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.tile::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgba(5,5,6,.55) 70%, rgba(5,5,6,.92) 100%); z-index: 1; }
.tile:hover img { transform: scale(1.07); filter: grayscale(0%) brightness(.74); }
.tile-in { position: relative; z-index: 2; padding: 40px; }
@media (max-width: 560px){ .tile-in { padding: 28px 24px; } .tile h3 { font-size: 28px; } .tile { min-height: 320px; } }
.tile .tnum { font-family: var(--font-display); font-weight: 900; font-size: 14px; color: var(--accent); letter-spacing: .1em; margin-bottom: 18px; }
.tile h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; color: #fff; font-size: 34px; line-height: 0.98; letter-spacing: -0.01em; }
.tile .tdesc { color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.6; margin-top: 16px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .45s ease, opacity .4s ease, margin .4s ease; }
.tile:hover .tdesc { max-height: 130px; opacity: 1; }
.tile .tlink { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.tile .tlink .arr { color: var(--accent); transition: transform .2s; }
.tile:hover .tlink .arr { transform: translateX(5px); }
.tile .tbar { position: absolute; top: 0; left: 0; height: 4px; width: 0; background: var(--accent); z-index: 3; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.tile:hover .tbar { width: 100%; }
@media (max-width: 980px){ .tiles { grid-template-columns: 1fr; } .tile { min-height: 380px; } .tile .tdesc { max-height: 130px; opacity: 1; } }

/* ─── PRODUCT PLATFORMS ───────────────────────────────────────────── */
.plat-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: stretch; }
.plat-media { position: relative; overflow: hidden; min-height: 560px; background: #0b0b0c; }
.plat-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(var(--img-gray)); transition: filter .5s ease, transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .45s ease; }
.plat-media:hover img { filter: grayscale(0%); transform: scale(1.05); }
.plat-media .plat-hover-img { opacity: 0; z-index: 2; pointer-events: none; filter: grayscale(var(--img-gray)); transform: scale(1.02); transition: opacity .35s ease, filter .5s ease, transform 1s cubic-bezier(.2,.8,.2,1); }
.plat-media.is-hovering .plat-hover-img { opacity: 1; filter: grayscale(0%); transform: scale(1.06); }
.plat-media.is-hovering > img:not(.plat-hover-img) { transform: scale(1.02); }
.fmt-list li { cursor: pointer; }
.plat-list { display: flex; flex-direction: column; justify-content: center; }
.fmt-list { list-style: none; border-top: 1px solid var(--line-2); }
.fmt-list li { display: flex; align-items: baseline; gap: 26px; padding: 17px 6px; border-bottom: 1px solid var(--line); transition: padding-left .3s cubic-bezier(.2,.8,.2,1); cursor: default; }
.fmt-list li:hover { padding-left: 18px; }
.fmt-list .fno { font-family: var(--font-display); font-weight: 900; font-size: 13px; color: var(--muted); min-width: 24px; }
.fmt-list .fname { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(19px, 1.85vw, 26px); color: var(--ink); letter-spacing: -0.005em; line-height: 1; transition: color .25s ease; }
.fmt-list li:hover .fname { color: var(--accent); }
.plat-pl { margin-top: 40px; background: var(--ink); color: #fff; padding: 38px 48px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
@media (max-width: 560px){ .plat-pl { padding: 28px 24px; gap: 24px; } .plat-pl-r { gap: 22px; } }
.plat-pl h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(24px, 2.4vw, 32px); color: #fff; line-height: 0.98; }
.plat-pl-r { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.plat-pl p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.7); max-width: 38ch; }
.fmt-pop { max-height: 0; overflow: hidden; transition: max-height .45s cubic-bezier(.2,.8,.2,1); background: #0b0b0c; }
.fmt-pop img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: grayscale(var(--img-gray)); opacity: 0; transform: scale(.98); transition: opacity .35s ease .05s, transform .5s cubic-bezier(.2,.8,.2,1) .05s, filter .4s ease; }
.fmt-list li.is-open + .fmt-pop { max-height: 60vw; border-bottom: 1px solid var(--line); }
.fmt-list li.is-open + .fmt-pop img { opacity: 1; transform: scale(1); filter: grayscale(0%); }
.fmt-list li .fchev { margin-left: auto; font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .3s ease, color .25s; display: none; }
.fmt-list li.is-open .fchev { transform: rotate(45deg); color: var(--accent); }
.fmt-list li.is-open .fname { color: var(--accent); }
@media (max-width: 920px){
  .plat-split { grid-template-columns: 1fr; gap: 32px; }
  .plat-media { display: none; }
  .plat-pl { flex-direction: column; align-items: flex-start; }
  .fmt-list li { cursor: pointer; }
  .fmt-list li:hover { padding-left: 6px; }
  .fmt-list li .fchev { display: inline-block; }
}
@media (min-width: 921px){
  .fmt-pop { display: none; }
}

/* ─── FRAGRANCE ───────────────────────────────────────────────────── */
.frag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.frag { background: var(--paper); padding: 38px 30px; transition: background .25s; }
@media (max-width: 560px){ .frag { padding: 28px 22px; } .frag .sw { margin-bottom: 22px; } .frag .fn { font-size: 22px; } }
.frag:hover { background: var(--paper-2); }
.frag .sw { width: 100%; height: 6px; margin-bottom: 30px; }
.frag .fn { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 24px; color: var(--ink); letter-spacing: -0.005em; }
.frag .ff { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 10px 0 18px; font-weight: 600; }
.frag .fnotes { font-size: 13px; color: var(--body); line-height: 1.6; }
@media (max-width: 1040px){ .frag-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .frag-grid { grid-template-columns: 1fr; } }

/* ─── GLOBAL MAP ──────────────────────────────────────────────────── */
.globe { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; }
.globe .mapwrap { background: transparent; padding: 16px; border: none; }
.gpoints { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.gpoint .gl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.gpoint .gv { font-size: 15px; color: var(--ink); font-weight: 400; }
@media (max-width: 920px){ .globe { grid-template-columns: 1fr; gap: 36px; } }

/* ─── NEWSROOM ────────────────────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.ncard { display: flex; flex-direction: column; }
.ncard .nimg { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #0b0b0c; }
.ncard .nimg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(var(--img-gray)); transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .4s; }
.ncard:hover .nimg img { transform: scale(1.05); filter: grayscale(0%); }
.ncard .ncat { position: absolute; top: 0; left: 0; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 8px 14px; z-index: 2; }
.ncard .nmeta { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 22px 0 12px; }
.ncard h3 { font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 1.25; color: var(--ink); letter-spacing: -0.01em; transition: color .2s; }
.ncard:hover h3 { color: var(--accent); }
.ncard .nx { font-size: 14px; color: var(--body); line-height: 1.6; margin-top: 12px; }
@media (max-width: 920px){ .news-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ─── CTA BAND ────────────────────────────────────────────────────── */
.cta-band { background: var(--accent); color: var(--accent-ink); text-align: center; position: relative; overflow: hidden; }
.cta-band .stripe { display: none; }
.cta-band .wrap { position: relative; z-index: 2; }
.cta-band h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(36px, 5.2vw, 86px); line-height: 0.94; letter-spacing: -0.01em; }
.cta-band p { max-width: 50ch; margin: 26px auto 40px; font-size: 18px; font-weight: 300; opacity: .92; }
@media (max-width: 560px){
  .cta-band p { font-size: 16px; margin: 20px auto 28px; }
  .cta-band .wrap > div { width: 100%; flex-direction: column; align-items: stretch !important; }
  .cta-band .wrap > div .btn { width: 100%; }
}
.cta-band .btn-light { background: #fff; color: var(--ink); }
.cta-band .btn-light:hover { background: var(--ink); color: #fff; }
.cta-band .btn-outline { background: transparent; color: var(--accent-ink); border-color: rgba(255,255,255,.55); }
.cta-band .btn-outline:hover { background: var(--accent-ink); color: var(--accent); }

/* ─── FOOTER ──────────────────────────────────────────────────────── */
footer { background: var(--ink); color: rgba(255,255,255,.6); }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 80px 0 64px; }
@media (max-width: 560px){ .foot-top { padding: 56px 0 40px; gap: 32px; } .foot-bot { padding: 22px 0; gap: 14px; font-size: 12px; } .foot-bot .legal { gap: 18px; flex-wrap: wrap; } }
.foot-logo img { height: 38px; margin-bottom: 24px; }
.foot-blurb { font-size: 14px; line-height: 1.7; max-width: 34ch; color: rgba(255,255,255,.55); }
.fcol h4 { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #fff; font-weight: 700; margin-bottom: 20px; }
.fcol a { display: block; font-size: 14px; padding: 7px 0; color: rgba(255,255,255,.6); transition: color .15s; }
.fcol a:hover { color: #fff; }
.foot-bot { border-top: 1px solid rgba(255,255,255,.1); padding: 26px 0; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; gap: 16px; }
.foot-bot .legal { display: flex; gap: 26px; }
@media (max-width: 920px){ .foot-top { grid-template-columns: 1fr 1fr; gap: 36px; } .foot-bot { flex-direction: column; align-items: flex-start; } }
@media (max-width: 520px){ .foot-top { grid-template-columns: 1fr; } }

/* ─── REVEAL (progressive enhancement) ────────────────────────────── */
/* Default = fully visible. The hidden/animated state is scoped to html.js so
   that if JS never runs (load failure, host MIME issue, etc.) nothing is hidden. */
.rv { opacity: 1; transform: none; }
.js .rv { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: .08s; } .js .rv.d2 { transition-delay: .16s; } .js .rv.d3 { transition-delay: .24s; } .js .rv.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce){ .js .rv { opacity: 1; transform: none; transition: none; } }

/* ─── PARTNERS MARQUEE ────────────────────────────────────────────── */
.partners { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.partners .shead { margin-bottom: 48px; align-items: center; }
.partners .shead h2 { font-size: clamp(28px, 3.2vw, 46px); margin-top: 18px; }
.plogos { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.plogos-track { display: inline-flex; align-items: center; gap: 88px; padding: 8px 0; white-space: nowrap; animation: ptrack 50s linear infinite; will-change: transform; }
.plogos:hover .plogos-track { animation-play-state: paused; }
.plogo { display: inline-flex; align-items: center; justify-content: center; height: 64px; flex: 0 0 auto; }
.plogo img { height: 100%; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(100%) brightness(0); opacity: 0.62; transition: filter .35s ease, opacity .35s ease, transform .35s ease; }
.plogo:hover img { filter: grayscale(0%) brightness(1); opacity: 1; transform: scale(1.04); }
@keyframes ptrack { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce){ .plogos-track { animation: none; } }
@media (max-width: 860px){ .plogos-track { gap: 56px; } .plogo { height: 48px; } .plogo img { max-width: 130px; } }

/* ─── MARQUEE ─────────────────────────────────────────────────────── */
.marq { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; background: var(--paper-2); }
.marq-in { display: inline-flex; gap: 60px; white-space: nowrap; animation: marq 30s linear infinite; }
.marq-item { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 17px; color: var(--ink); display: inline-flex; align-items: center; gap: 60px; letter-spacing: .02em; }
.marq-item::after { content: ""; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
@keyframes marq { from { transform: translateX(0);} to { transform: translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marq-in { animation: none; } }

/* ─── CONTACT / ENQUIRY ───────────────────────────────────────────── */
.enq-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; }
#enquiry .shead { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: end; }
#enquiry .shead .body { max-width: none; justify-self: start; }
@media (max-width: 980px){ #enquiry .shead { grid-template-columns: 1fr; gap: 18px; align-items: start; } }
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.fgroup { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.flabel { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--ink); }
.finput { width: 100%; border: 1px solid var(--line-2); border-radius: 0; background: var(--paper); padding: 14px 16px; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--ink); transition: border-color .15s ease; }
.finput:focus { outline: none; border-color: var(--accent); }
.finput::placeholder { color: var(--muted); }
select.finput { appearance: none; cursor: pointer; }
textarea.finput { resize: vertical; min-height: 130px; }
.form-note { border: 1px solid var(--accent); background: rgba(252,0,0,0.05); padding: 24px; }
.form-note .fn-t { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.form-note p { font-size: 14px; color: var(--body); line-height: 1.6; }
.ccards { border: 1px solid var(--line); background: var(--paper); }
.ccard { padding: 32px 34px; border-bottom: 1px solid var(--line); }
.ccard:last-child { border-bottom: none; }
.ccard .cl { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.ccard .cv { font-size: 17px; font-weight: 400; color: var(--ink); line-height: 1.5; }
.ccard .cs { font-size: 13.5px; color: var(--body); line-height: 1.7; margin-top: 6px; }
.ccard a.cv { display: inline-block; transition: color .15s; }
.ccard a.cv:hover { color: var(--accent); }
.deckbox { background: var(--ink); color: #fff; padding: 36px 34px; margin-top: 24px; }
.deckbox h3 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 26px; line-height: 0.98; margin: 14px 0 12px; }
.deckbox p { font-size: 13.5px; color: rgba(255,255,255,.7); line-height: 1.65; margin-bottom: 24px; }
@media (max-width: 980px){ .enq-grid { grid-template-columns: 1fr; gap: 48px; } }
@media (max-width: 560px){
  .form-grid2 { grid-template-columns: 1fr; }
  .ccard { padding: 26px 24px; }
  .deckbox { padding: 28px 24px; }
  .finput { padding: 13px 14px; font-size: 16px; }
  #enquiry-form .btn { width: 100%; }
}

/* ─── SEO injections (src/layout/home.css, added by build.mjs) ─── */
.hero h1.hero-eye { font-size: 12px; max-width: none; margin-bottom: 26px; line-height: 1.5; }
@media (max-width: 560px){ .hero h1.hero-eye { margin-bottom: 20px; } }
.hero .hero-head { color: #fff; font-size: clamp(42px, 8.4vw, 138px); margin-bottom: 28px; max-width: 16ch; }
@media (max-width: 560px){ .hero .hero-head { margin-bottom: 22px; line-height: 0.95; } }
.fmt-list .fbody { display: flex; flex-direction: column; gap: 6px; }
.fmt-list a.fname:hover { color: var(--accent); }
.fmt-list .fdesc { font-size: 13.5px; line-height: 1.5; color: var(--muted); font-weight: 400; }
.retail-proof { margin-top: 44px; }
.retail-proof .body { max-width: 78ch; }
.retail-proof strong { font-weight: 500; color: var(--ink); }
.fformats { border: 0; }
.fchecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 18px; padding-top: 4px; }
.fchecks label, .fdeck { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--body); font-weight: 400; cursor: pointer; }
.fchecks input, .fdeck input { accent-color: var(--accent); width: 18px; height: 18px; }
.fdeck { margin: 2px 0 22px; }
.fopt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.fsla { font-size: 13px; color: var(--muted); margin-top: 14px; }