/* NIA — Ivory Ink palette & editorial type system */
:root {
  --paper: #F2EEE3;
  --paper-soft: #E9E4D6;
  --ink: #0A0B14;
  --ink-soft: #161824;
  --graphite: #5B5A53;
  --stone: #8B867B;
  --rule: rgba(10, 11, 20, 0.12);
  --rule-ivory: rgba(242, 238, 227, 0.15);
  --acid: #D4FF3D;
  --acid-hover: #BFEB28;
  --vermillion: #E54B2B;

  --ff-display: "Fraunces", "PP Editorial New", Georgia, serif;
  --ff-body: "Inter", "Söhne", system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", "Söhne Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); font-family: var(--ff-body); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width: 100%; display: block; }

.mono { font-family: var(--ff-mono); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.mono-lower { font-family: var(--ff-mono); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 13px; }
.display { font-family: var(--ff-display); font-weight: 400; letter-spacing: -0.04em; line-height: 0.95; }
.display-italic { font-family: var(--ff-display); font-style: italic; font-weight: 400; letter-spacing: -0.03em; line-height: 1; }

.container { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.section { padding: 160px 0; position: relative; }
.section--ink { background: var(--ink); color: var(--paper); }
.section--paper { background: var(--paper); color: var(--ink); }
.section--soft { background: var(--paper-soft); color: var(--ink); }

.rule { border: none; border-top: 1px solid var(--rule); height: 0; }
.rule-ivory { border-top: 1px solid var(--rule-ivory); }

.section-number {
  position: absolute; top: 32px; right: 40px;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--stone);
}
.section--ink .section-number { color: rgba(242, 238, 227, 0.5); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 16px 28px; border-radius: 2px;
  transition: all 0.2s ease; white-space: nowrap;
}
.btn--acid { background: var(--acid); color: var(--ink); }
.btn--acid:hover { background: var(--acid-hover); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--acid); color: var(--ink); }
.btn--vermillion { background: var(--vermillion); color: var(--paper); }
.btn--vermillion:hover { background: var(--ink); color: var(--paper); }
.btn--ghost-ivory { color: var(--paper); padding: 16px 0; border-bottom: 1px solid rgba(242,238,227,0.3); border-radius: 0; }
.btn--ghost-ivory:hover { border-bottom-color: var(--acid); color: var(--acid); }
.btn--ghost-ink { color: var(--ink); padding: 16px 0; border-bottom: 1px solid var(--rule); border-radius: 0; }
.btn--ghost-ink:hover { border-bottom-color: var(--ink); }

/* Eyebrow */
.eyebrow { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
.section--ink .eyebrow { color: rgba(242,238,227,0.55); }

/* Focus */
:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }

/* Reveal animations */
[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
[data-reveal="up-slow"] { transform: translateY(64px); transition-duration: 1.2s; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-48px); }
[data-reveal="left"].is-revealed { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-revealed { transform: scale(1); }

/* Reveal word by word: wrap words in .word with --d */
.words .word { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.words.is-revealed .word { opacity: 1; transform: translateY(0); }

/* Magnetic button */
.magnet { transition: transform 0.2s cubic-bezier(.2,.7,.2,1); }

/* Marquee */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { display: flex; overflow: hidden; width: 100%; }
.marquee__track { display: flex; gap: 80px; animation: marquee 60s linear infinite; flex-shrink: 0; padding-right: 80px; }
.marquee--fast .marquee__track { animation-duration: 40s; }

/* Noise grain overlay for dark sections */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.4; mix-blend-mode: overlay;
}

/* Placeholder surface (for imagery we don't ship) */
.placeholder {
  background: repeating-linear-gradient(135deg, rgba(10,11,20,0.05) 0 1px, transparent 1px 8px);
  border: 1px solid var(--rule);
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--stone); display: flex; align-items: center; justify-content: center;
  position: relative;
}
.placeholder--dark {
  background: repeating-linear-gradient(135deg, rgba(242,238,227,0.05) 0 1px, transparent 1px 8px);
  border: 1px solid var(--rule-ivory); color: rgba(242,238,227,0.5);
}

/* ============================================
   RESPONSIVE — Tablet + Mobile
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }
  .section { padding: 100px 0; }
  .section-number { top: 20px; right: 24px; font-size: 10px; }
  .display { letter-spacing: -0.03em; }
}

/* Mobile */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  body { cursor: auto !important; }

  .container { padding: 0 20px; }
  .section { padding: 72px 0 !important; }
  .section-number { top: 12px; right: 20px; font-size: 9px; letter-spacing: 0.1em; }

  /* Kill any cursor overlays on touch */
  [class*="custom-cursor"], [id*="cursor"] { display: none !important; }

  /* NAV: collapse to hamburger */
  .nia-nav .nav-links,
  .nia-nav .nav-signin,
  .nia-nav .nav-demo,
  .nia-nav .lang-toggle { display: none !important; }
  .nia-nav .nav-burger { display: flex !important; }
  .nia-nav .nav-actions { display: none !important; }

  /* Default scaling for ALL displays — but not inside nav menu overlay */
  .display {
    font-size: clamp(36px, 10vw, 60px) !important;
    letter-spacing: -0.025em !important;
    line-height: 0.98 !important;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  h1.display { font-size: clamp(44px, 12vw, 72px) !important; line-height: 1.02 !important; margin-bottom: 32px !important; }
  /* Any inline-styled h1 / h2 with huge clamp: force cap */
  h1[style*="clamp(52"], h1[style*="clamp(60"], h1[style*="clamp(64"], h1[style*="clamp(72"], h1[style*="clamp(80"], h1[style*="clamp(88"], h1[style*="clamp(96"],
  h1[style*="fontSize: \"clamp(52"], h1[style*="fontSize: \"clamp(60"], h1[style*="fontSize: \"clamp(64"], h1[style*="fontSize: \"clamp(72"] {
    font-size: clamp(40px, 11vw, 60px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
  }
  h2[style*="clamp(64"], h2[style*="clamp(72"], h2[style*="clamp(80"], h2[style*="clamp(88"], h2[style*="clamp(96"],
  h2[style*="clamp(108"], h2[style*="clamp(128"] {
    font-size: clamp(36px, 10vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
  }

  /* Menu overlay keeps its own size */
  .nav-menu-overlay .display { font-size: 36px !important; }

  /* Never break buttons / mono bits */
  .btn, .mono, button {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  /* Long prose can wrap */
  p, li { overflow-wrap: break-word; }

  /* Grids → single column */
  [style*="grid-template-columns"],
  [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Preserve marquees */
  .marquee__track { gap: 32px !important; padding-right: 32px; animation-duration: 40s !important; }
  .marquee--fast .marquee__track { animation-duration: 28s !important; }
  .marquee__track .display { font-size: 36px !important; }
  .marquee__track > div { font-size: 20px !important; }

  /* Flex layouts: allow wrap */
  [style*="flex"][style*="row"] { flex-wrap: wrap !important; }

  /* Buttons smaller */
  .btn { padding: 12px 20px !important; font-size: 11px !important; letter-spacing: 0.04em !important; }

  /* Release sticky horizontal scroll — show content stacked */
  .sticky-wrap {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    overflow: visible !important;
  }

  /* === VERTICALES section — release 280vh height, stack cards === */
  .verticales-section {
    height: auto !important;
    min-height: auto !important;
    padding: 60px 0 !important;
  }
  .verticales-section .sticky-wrap > div {
    width: 100% !important;
    overflow: visible !important;
  }
  /* Inner horizontal flex → vertical stack */
  .verticales-section .sticky-wrap > div > div[style*="flex"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    transform: none !important;
    padding: 0 20px !important;
  }
  .verticales-section .vert-card {
    flex: initial !important;
    width: 100% !important;
    aspect-ratio: 4/5 !important;
    min-width: 0 !important;
  }
  .verticales-section .vert-card .display {
    font-size: clamp(32px, 9vw, 52px) !important;
  }

  /* === STORY section — release, show all steps stacked === */
  .story-section {
    height: auto !important;
    min-height: auto !important;
    padding: 80px 0 !important;
  }
  .story-section .sticky-wrap .container > div[style*="gridTemplateColumns"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* Hide the absolutely-positioned mini-mock carousel on mobile (too fragile) */
  .story-section [style*="minHeight: 500"] { display: none !important; }
  /* Make the step number smaller */
  .story-section [style*="fontSize: 200"] { font-size: 96px !important; }
  .story-section .display { font-size: clamp(40px, 10vw, 60px) !important; }
  .sticky-wrap > * {
    transform: none !important;
    width: 100% !important;
    display: block !important;
  }
  .sticky-wrap [style*="flex"][style*="row"] {
    flex-direction: column !important;
    width: 100% !important;
  }
  /* Vertical cards that were horizontal slides */
  .sticky-wrap > div > div[style*="flex"],
  .sticky-wrap section [style*="flex"][style*="Shrink: 0"] {
    flex-shrink: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Hero decorative N monogram */
  .hero-decor-monogram, [class*="vinyl-spin"], [class*="hero-orbit"] { display: none !important; }
  .hero-orbit-wrap { display: none !important; }

  /* Generic: all inline padding-top 160/180/200 (full-bleed page heroes) */
  [style*="padding-top: 160"], [style*="paddingTop: 160"],
  [style*="padding-top: 180"], [style*="paddingTop: 180"],
  [style*="padding-top: 200"], [style*="paddingTop: 200"],
  [style*="padding-top: 220"], [style*="paddingTop: 220"] { padding-top: 100px !important; }
  [style*="padding-bottom: 160"], [style*="paddingBottom: 160"],
  [style*="padding-bottom: 180"], [style*="paddingBottom: 180"],
  [style*="padding-bottom: 200"], [style*="paddingBottom: 200"] { padding-bottom: 60px !important; }

  /* Hero containers that use justify-content: space-between on a 100vh flex column → let content flow tight */
  section .container[style*="min-height: 100vh"][style*="space-between"],
  section .container[style*="minHeight: \"100vh\""][style*="space-between"],
  section > .container[style*="100vh"] {
    min-height: auto !important;
    justify-content: flex-start !important;
    gap: 40px !important;
  }
  section[style*="min-height: 100vh"], section[style*="minHeight: \"100vh\""] {
    min-height: auto !important;
  }

  /* Labels / Marques / Agences / Createurs: kill hero decorative absolute bg (55% right columns with spotlights, 3D vinyls, etc.) */
  section [style*="position: absolute"][style*="right: 0"][style*="55%"],
  section [style*="position: absolute"][style*="right: 0"][style*="50%"],
  section [style*="position: absolute"][style*="right: 0"][style*="45%"],
  section [style*="position: absolute"][style*="right: 0"][style*="40%"] {
    display: none !important;
  }
  /* Hero container: release 70% maxWidth cap */
  section [style*="max-width: 70%"], section [style*="maxWidth: 70"] { max-width: 100% !important; }
  section [style*="max-width: 68%"], section [style*="maxWidth: 68"] { max-width: 100% !important; }
  section [style*="max-width: 65%"], section [style*="maxWidth: 65"] { max-width: 100% !important; }
  section [style*="max-width: 60%"], section [style*="maxWidth: 60"] { max-width: 100% !important; }
  section [style*="max-width: 55%"], section [style*="maxWidth: 55"] { max-width: 100% !important; }
  section [style*="max-width: 50%"], section [style*="maxWidth: 50"] { max-width: 100% !important; }

  /* Hero: release min-height */
  .nia-hero { min-height: auto !important; }
  .nia-hero .container {
    min-height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
    gap: 32px;
  }

  /* Character questions — shrink character, fit text */
  .cq-outer {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    min-height: auto !important;
  }
  .cq-stage {
    height: 220px !important;
    max-width: 160px;
    margin: 0 auto;
  }
  .section svg[viewBox="0 0 200 240"] { max-width: 100% !important; margin: 0 auto; }
  .section [style*="gridTemplateColumns: \"60px 1fr 30px\""] {
    grid-template-columns: 36px 1fr 14px !important;
    gap: 10px !important;
  }
  .display-italic {
    font-size: clamp(18px, 5vw, 24px) !important;
    line-height: 1.25 !important;
    word-break: normal;
    overflow-wrap: break-word;
  }

  /* Hero orbit + decorative monogram — hide everything big floating in hero */
  .nia-hero .hero-orbit-wrap,
  .nia-hero [style*="width: 420"],
  .nia-hero [style*="height: 420"] { display: none !important; }

  /* Fixed/sticky heroes or sections — release */
  [style*="sticky"][style*="100vh"],
  [style*="height: \"100vh\""] {
    height: auto !important;
    min-height: auto !important;
    position: relative !important;
  }

  /* Decorative giant wordmarks */
  footer [style*="clamp(140px"],
  footer [style*="clamp(180px"],
  footer [style*="clamp(240px"] {
    font-size: clamp(72px, 22vw, 140px) !important;
    bottom: -30px !important;
  }

  /* Fixed pixel widths → fluid */
  [style*="width: \"600"], [style*="width: \"720"],
  [style*="width: \"800"], [style*="width: \"900"],
  [style*="width: \"1000"], [style*="width: \"1100"], [style*="width: \"1200"] {
    width: 100% !important;
    max-width: 100% !important;
  }
  [style*="minWidth"] { min-width: 0 !important; }

  /* maxWidth caps → allow full width */
  [style*="maxWidth: 800"], [style*="maxWidth: 900"], [style*="maxWidth: 1000"],
  [style*="maxWidth: 1100"], [style*="maxWidth: 1200"] {
    max-width: 100% !important;
  }

  /* Heavy vertical paddings collapse */
  [style*="padding: \"260px"], [style*="padding: \"220px"],
  [style*="padding: \"200px"], [style*="padding: \"180px"],
  [style*="padding: \"160px"], [style*="padding: \"140px"],
  [style*="padding: \"120px"] {
    padding: 72px 0 !important;
  }
  /* Margins */
  [style*="marginBottom: 120"], [style*="marginBottom: 160"], [style*="marginBottom: 180"] {
    margin-bottom: 48px !important;
  }
  [style*="marginTop: 120"], [style*="marginTop: 160"], [style*="marginTop: 180"] {
    margin-top: 48px !important;
  }

  /* Reveal: disable on mobile — things must always be visible */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Big inline-style vertical spacings → compress */
  [style*="marginBottom: 120"],
  [style*="marginBottom: 160"],
  [style*="marginBottom: 180"],
  [style*="marginBottom: 200"] { margin-bottom: 40px !important; }
  [style*="marginTop: 120"],
  [style*="marginTop: 160"],
  [style*="marginTop: 180"],
  [style*="marginTop: 200"] { margin-top: 40px !important; }

  /* Section padding 200/160/140 → tight */
  [style*="padding: \"200px 0\""],
  [style*="padding: \"160px 0\""],
  [style*="padding: \"140px 0\""],
  [style*="padding: \"120px 0\""] { padding: 72px 0 !important; }

  /* Any absolute-positioned decorative element at right: 40px etc. */
  [style*="right: \"40px\""][style*="position: \"absolute\""] { right: 20px !important; }

  /* Footer columns */
  footer .container [style*="gridTemplateColumns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 20px !important;
  }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .section { padding: 56px 0 !important; }
  .display { font-size: clamp(32px, 10vw, 52px) !important; }
  h1.display { font-size: clamp(36px, 11vw, 60px) !important; }
  footer .container [style*="gridTemplateColumns"] { grid-template-columns: 1fr !important; }
  .marquee__track .display { font-size: 32px !important; }
  .btn { padding: 10px 16px !important; font-size: 10px !important; }
}