/* =========================================================
   VORO v2 THEME LAYER
   Loaded AFTER styles.css. Overrides only — it changes how the
   existing markup looks and never changes what a page says.
   Remove the <link> to this file and the old site comes back
   exactly as it was.

   TO CHANGE THE ACCENT: edit the three --accent* lines below.
   The yellow alternative is commented beside them.
========================================================= */

:root {
  /* ---- Accent ----
     Bright warm yellow, matching the v2 preview.
     For your old brand gold instead, swap in:
       --accent:#D4AF37; --accent-ink:#0B1420; --accent-text:#8A6A00; */
  --accent:      #FFD84D;
  --accent-ink:  #0B1420;   /* text that sits ON the accent */
  --accent-text: #8A6300;   /* darkened, for small text on paper */

  /* ---- Surfaces: two grounds, no card colours ---- */
  --bg-dark:       #0B1420;
  --bg-card:       #16222F;
  --bg-card-deep:  #16222F;
  --bg-light-edge: #16222F;
  --bg-shadow:     rgba(11,20,32,0.35);

  --paper:   #F6F3EC;
  --paper-2: #ECE6DB;

  --text-headline: #F6F3EC;
  --text-main:     #131C26;
  --text-muted:    #5B6774;
  --on-ink:        #F6F3EC;
  --on-ink-muted:  #94A5B7;

  --line-ink:   rgba(246,243,236,0.16);
  --line-paper: rgba(19,28,38,0.13);

  /* ---- The bevels die here. One shadow, or none. ---- */
  --shadow-outset: 0 18px 50px -22px rgba(11,20,32,0.38);
  --shadow-inset:  none;
  --shadow-hover:  0 26px 60px -24px rgba(11,20,32,0.45);
  --bevel:         none;

  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  --radius: 14px;
  --gutter: clamp(1.25rem, 4vw, 3.75rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   REMOVALS — the three dated flourishes
========================================================= */
body::before { display: none !important; }          /* film grain */
.cursor-dot, .cursor-ring { display: none !important; }
body, .btn, a, button, summary, [role="button"] { cursor: auto; }
a, .btn, button, summary, [role="button"] { cursor: pointer; }

/* Intro gate: neutralised in case .intro-on is ever set again. */
.intro, html.intro-on .intro { display: none !important; }
html.intro-on { --intro-dur: 0s; --title-cue: 0s; --hero-cue: 0s; }

body { background-color: var(--paper); color: var(--text-main); }

/* =========================================================
   TYPOGRAPHY — sentence case, tight, grotesk
========================================================= */
h1, h2, h3, h4, h5, h6,
.nav__logo, .footer__logo,
.section-title, .cta-section__title, .hero__title,
.manifesto__line, .price-card__cost, .work-result__num,
.founder-card__name, .timeline__title, .call-step__title {
  font-family: var(--font-display) !important;
  text-transform: none !important;
  letter-spacing: -0.032em !important;
  line-height: 0.95;
  font-weight: 700;
}

/* Small structural labels keep their caps — they read as UI, not voice. */
.label, .label--sm, .footer__heading, .price-card__name,
.timeline__when, .founder-card__role, .call-step__num, .tag {
  font-family: var(--font-body) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-weight: 600;
}
.label, .label--sm { color: var(--accent-text); }
.section--cinema .label, .cta-section .label,
.footer .footer__heading { color: var(--accent); }

body, p, li, input, textarea, select, .btn, .nav__link {
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

/* =========================================================
   BUTTONS — flat fill or hairline
========================================================= */
.btn, .quick-form__btn, .voro-form__submit, .nav__cta, .sticky-cta__btn {
  background: transparent !important;
  border: 1px solid var(--line-paper) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
  color: var(--text-main);
  transition: transform 0.18s var(--ease), background-color 0.18s, border-color 0.18s;
}
.btn:hover, .quick-form__btn:hover, .voro-form__submit:hover {
  box-shadow: none !important;
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); box-shadow: none !important; }

.btn--primary, .quick-form__btn, .voro-form__submit,
.nav__cta, .sticky-cta__btn {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: var(--accent-ink) !important;
}
.btn--primary:hover, .nav__cta:hover { filter: brightness(1.06); }

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

/* =========================================================
   CARDS — hairline, one shadow, no bevel
========================================================= */
.service-card, .ai-card, .founder-card, .price-card,
.work-result, .review-card, .call-step, .faq__item, .client-card {
  background: var(--paper) !important;
  border: 1px solid var(--line-paper) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: border-color 0.25s, transform 0.25s var(--ease) !important;
}
.service-card:hover, .ai-card:hover, .founder-card:hover,
.price-card:hover, .review-card:hover {
  border-color: var(--text-main) !important;
  transform: translateY(-3px) !important;
  box-shadow: none !important;
}
.price-card--alt {
  background: var(--bg-dark) !important;
  border-color: transparent !important;
  color: var(--on-ink) !important;
}
.price-card--alt .price-card__lead,
.price-card--alt .price-card__list { color: var(--on-ink-muted) !important; }
.price-card--alt:hover { border-color: var(--accent) !important; }

.work-result__num, .price-card__cost {
  color: var(--text-main);
  font-family: var(--font-display) !important;
}
.price-card--alt .price-card__cost { color: var(--on-ink) !important; }

/* =========================================================
   NAV — transparent over the hero, solid once past it
========================================================= */
.nav {
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  padding: 1.1rem var(--gutter) !important;
}
.nav.scrolled, .nav.is-stuck {
  background: rgba(11,20,32,0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-ink) !important;
}
.nav__link {
  color: var(--on-ink) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500;
  opacity: 0.82;
}
.nav__link:hover { opacity: 1; }
.logo-lockup__name { font-family: var(--font-display) !important; letter-spacing: -0.05em !important; }
.logo-lockup__tagline { text-transform: none !important; letter-spacing: 0 !important; color: var(--on-ink-muted); }

/* =========================================================
   HERO — full bleed, bottom left, big
========================================================= */
.hero {
  height: 100svh !important;
  min-height: 100svh;
  align-items: flex-end !important;
  text-align: left !important;
  padding: 0 !important;
}

/* Cover without depending on object-fit painting. */
.hero__bg-video {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto; max-width: none;
  object-fit: cover;
}

/* Scrim only where the text is, so the showreel stays visible. */
.hero__gradient {
  background:
    linear-gradient(to top, rgba(11,20,32,0.92) 0%, rgba(11,20,32,0.55) 32%, rgba(11,20,32,0) 62%),
    linear-gradient(to right, rgba(11,20,32,0.55) 0%, rgba(11,20,32,0) 55%) !important;
}

.hero__content {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 7vh, 6rem);
  text-align: left;
}
.hero__title {
  font-size: clamp(2.85rem, 8vw, 7rem) !important;
  line-height: 0.92 !important;
  max-width: 15ch;
  text-shadow: none !important;
  margin: 0 0 1.5rem;
}
.voro-key { color: inherit !important; }
.hero__title em, .hero__accent { font-style: normal; color: var(--accent); }

.hero__sub {
  margin: 0 0 2.2rem !important;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
  text-shadow: none !important;
  color: rgba(246,243,236,0.86) !important;
}
.hero__actions { justify-content: flex-start !important; gap: 1.25rem; }
.hero__reassure {
  margin: 1.25rem 0 0 !important;
  text-align: left !important;
  color: var(--on-ink-muted) !important;
  text-shadow: none !important;
}
.hero__proof {
  margin-top: clamp(2.25rem, 5vh, 3.5rem) !important;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-ink);
  justify-content: flex-start;
}
.hero__proof-num {
  font-family: var(--font-display) !important;
  font-size: clamp(2.4rem, 4vw, 3.6rem) !important;
  color: var(--on-ink) !important;
  letter-spacing: -0.03em;
  text-shadow: none !important;
}
.hero__proof-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.82rem !important;
  color: var(--on-ink-muted) !important;
  text-shadow: none !important;
  max-width: 22ch;
}
.hero__proof-label strong { color: var(--on-ink); font-weight: 600; }
.hero__scroll { opacity: 0.5; }

/* =========================================================
   SECTIONS
========================================================= */
.section--paper { background: var(--paper) !important; color: var(--text-main); }
.recent-project, .story-how, .offer, .reviews-section,
.testimonial, .faq, .book-section, .founders, .manifesto {
  background: var(--paper) !important;
}
.offer, .reviews-section { background: var(--paper-2) !important; }

.section-title, .cta-section__title {
  font-size: clamp(2rem, 4.6vw, 3.9rem) !important;
  max-width: 20ch;
}
.section-title em, .cta-section__title em, .manifesto__line em {
  font-style: normal;
  color: var(--accent-text);
}
.cta-section__title em { color: var(--accent); }

.cta-section { background: var(--bg-dark) !important; }
.cta-section__bg { opacity: 0.28 !important; }
.manifesto { color: var(--text-main); }

.timeline__marker {
  background: var(--paper) !important;
  border: 1px solid var(--line-paper) !important;
  box-shadow: none !important;
  color: var(--text-main);
}
.timeline__marker--accent {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: transparent !important;
}

.faq__item { padding: 0.25rem 1.25rem; }
.faq__item summary {
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
}

.recent-project__frame, .testimonial__frame {
  box-shadow: var(--shadow-outset) !important;
  border-radius: var(--radius) !important;
}

.footer { background: var(--bg-dark) !important; }
.footer__link, .footer__desc, .footer__copy { color: var(--on-ink-muted) !important; }
.footer__link:hover { color: var(--on-ink) !important; }
.footer__motto em { color: var(--accent); }

.sticky-cta {
  background: rgba(11,20,32,0.92) !important;
  border-top: 1px solid var(--line-ink) !important;
  box-shadow: none !important;
}
.sticky-cta__text { color: var(--on-ink) !important; }

.quick-form input, .voro-form input, .quick-form textarea {
  background: var(--paper) !important;
  border: 1px solid var(--line-paper) !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  color: var(--text-main) !important;
}

/* The 11 MB background becomes the 0.4 MB one. */
.cta-section__bg { background-image: url('opt/cta-bg.jpg') !important; }

/* =========================================================
   CLEANUP — glows, faux italics, chip labels
========================================================= */

/* The old display type carried a glow to survive on video. The new
   type doesn't need it, and on paper it just reads as blur. */
h1, h2, h3, h4, h5, h6,
.section-title, .cta-section__title, .hero__title, .page-hero__title,
.manifesto__line, .manifesto__sub, .timeline__title, .founder-card__name,
.price-card__cost, .work-result__num, .hero__proof-num, .hero__proof-label,
.hero__sub, .hero__reassure, .page-hero__sub, .recent-project__sub {
  text-shadow: none !important;
}

/* <em> marks the accent phrase. It is a colour change, not an italic —
   Bricolage has no true italic, so the browser was slanting it by hand. */
h1 em, h2 em, h3 em,
.section-title em, .page-hero__title em, .cta-section__title em,
.manifesto__line em, .hero__title em, .recent-project__sub em,
.cta-strip__text em, .footer__motto em {
  font-style: normal !important;
  font-weight: inherit;
}
.section-title em, .manifesto__line em,
.recent-project__sub em, .cta-strip__text em { color: var(--accent-text) !important; }
.hero__title em, .page-hero__title em,
.cta-section__title em, .footer__motto em { color: var(--accent) !important; }

/* Section labels were pills. Now they are just labels. */
.label, .label--sm {
  display: block !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  font-size: 0.8125rem !important;
}

/* Page heroes on the inner pages: same treatment as the homepage. */
.page-hero__title { font-size: clamp(2.4rem, 6vw, 5rem) !important; }
.page-hero__pill {
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  border: 1px solid var(--line-ink) !important;
  background: transparent !important;
}

/* =========================================================
   RHYTHM — match the v2 preview
   The old sections were built tight: .recent-project and
   .testimonial were padding: clamp(1rem, 2vw, 1.75rem).
   v2 breathes at clamp(4.5rem, 9vw, 8.5rem), and that space
   is most of what reads as "modern" next to the type.
========================================================= */
.recent-project, .story-how, .offer, .reviews-section,
.testimonial, .founders, .faq, .book-section, .manifesto,
.cta-section, .clients-logo-section, .examples {
  padding-block: clamp(4.5rem, 9vw, 8.5rem) !important;
}
.cta-strip { padding-block: clamp(3rem, 6vw, 5rem) !important; }

.container {
  max-width: 1320px !important;
  padding-inline: var(--gutter) !important;
}

/* Lead paragraphs: the measured, muted line under each title. */
.offer__lead, .recent-project__sub, .manifesto__sub, .page-hero__sub {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem) !important;
  line-height: 1.55 !important;
  max-width: 54ch;
  color: var(--text-muted) !important;
  margin-top: 0.5rem;
}

/* Titles sit closer to their label and further from what follows,
   so each block reads as one unit. */
.section-title, .cta-section__title {
  margin-bottom: 1.25rem !important;
  line-height: 0.95 !important;
}
.label, .label--sm { margin-bottom: 0.9rem !important; }

/* Stat tiles and result cards, spaced like v2's proof row. */
.work-results { gap: 1.25rem !important; margin-top: 2rem !important; }
.work-result { padding: 1.5rem 1.9rem !important; }
.work-result__num {
  font-size: clamp(2.2rem, 3.4vw, 3rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;
}
.work-result__label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--text-muted) !important;
}

/* Media frames: one soft shadow, generous radius, room around them. */
.recent-project__media { margin-top: clamp(2rem, 4vw, 3rem) !important; }
.recent-project__frame, .testimonial__frame, .founders__video-wrap {
  border-radius: var(--radius) !important;
  box-shadow: 0 18px 50px -22px rgba(11,20,32,0.38) !important;
}

/* =========================================================
   PAPER SECTIONS — re-scope the tokens
   styles.css:2746 redeclares the whole palette on
   .section--paper, including --accent: #b8860b and the
   bevel/shadow set. Those beat a :root value inside those
   sections, which is why the page still read gold. Same
   selector, loaded later, so these win.
========================================================= */
.section--paper {
  --accent:      #FFD84D;
  --accent-ink:  #0B1420;
  --accent-text: #8A6300;

  --bg-dark:       var(--paper);
  --bg-card:       var(--paper);
  --bg-card-deep:  var(--paper);
  --bg-light-edge: var(--paper);
  --bg-shadow:     rgba(11,20,32,0.35);

  --text-headline: #131C26;
  --text-main:     #131C26;
  --text-muted:    #5B6774;

  --bevel:         none;
  --shadow-outset: 0 18px 50px -22px rgba(11,20,32,0.38);
  --shadow-hover:  0 26px 60px -24px rgba(11,20,32,0.45);
  --shadow-inset:  none;
}

/* In v2 a section heading is one colour — the accent lives on the
   buttons, the labels and the hero line, not inside the headline.
   Two-tone headings were part of the old look. */
.section-title em, .story-how .section-title em,
.offer .section-title em, .founders .section-title em {
  color: inherit !important;
}

/* Small emphasis inside body copy keeps the darkened accent, where
   it reads as a highlighted number rather than a second headline. */
.recent-project__sub em, .cta-strip__text em, .manifesto__line em {
  color: var(--accent-text) !important;
}