/* LuxAlta Marketing — black, gold, white. */
:root {
  --black: #0a0a0a;
  --ink: #111111;
  --panel: #151515;
  --line: rgba(201, 168, 106, 0.22);
  --line-soft: rgba(245, 241, 232, 0.08);
  --gold: #c9a86a;
  --gold-bright: #e2c78f;
  --gold-deep: #9c7a3c;
  --white: #f5f1e8;
  --muted: rgba(245, 241, 232, 0.78);
  --faint: rgba(245, 241, 232, 0.58);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, sans-serif;
  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

/* Type */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 22px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(48px, 8vw, 104px); letter-spacing: -0.01em; }
h2 { font-size: clamp(36px, 5vw, 60px); }
h3 { font-size: 28px; }
h1 em, h2 em { font-style: italic; color: var(--gold); }
.lede { font-size: clamp(17px, 1.6vw, 19px); color: var(--muted); max-width: 560px; }
.gold { color: var(--gold); }

/* Placeholder marker — anything the client still needs to supply */
.ph { outline: 1px dashed rgba(201, 168, 106, 0.55); outline-offset: 3px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--gold);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold) 45%, var(--gold-deep)); color: var(--black); border-color: transparent; }
.btn-gold:hover { background: var(--white); }
.btn-ghost { background: transparent; color: var(--white); }
.btn-ghost:hover { background: var(--gold); color: var(--black); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.text-link { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.text-link:hover { border-color: var(--gold); }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: background 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background: rgba(10, 10, 10, 0.88); backdrop-filter: blur(12px); border-color: var(--line-soft); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 92px; }
.logo { display: flex; align-items: center; gap: 12px; }
/* Client's monogram + their own LUXALTA / MARKETING lettering, side by side, unaltered.
   Sized so MARKETING stays legible (~8px caps, same as .eyebrow). */
.logo-mark-img { height: 50px; width: auto; }
.logo-word-img { height: 58px; width: auto; }
.logo-footer img { width: 190px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) { font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); transition: color 0.2s; }
.nav-links a:not(.btn):hover, .nav-links a[aria-current] { color: var(--white); }
.nav-links .btn { padding: 12px 22px; }
.nav-toggle { display: none; background: none; border: 0; color: var(--white); cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 1px; background: currentColor; margin: 6px 0; }

@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 92px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 24px;
    background: var(--black); padding: 32px var(--gutter) 40px; border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform 0.35s, opacity 0.35s, visibility 0.35s;
  }
  .nav.open .nav-links { transform: none; opacity: 1; visibility: visible; }
  .nav.open { background: var(--black); }
  .logo-mark-img { height: 40px; }
  .logo-word-img { height: 48px; }
}

/* Sections */
section { padding: clamp(96px, 12vw, 160px) 0; }
.rule { border-top: 1px solid var(--line-soft); }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 72px; }
.section-head p { color: var(--muted); margin: 0; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; } }

/* Hero */
.hero {
  min-height: 100vh; display: flex; align-items: center; padding-top: 140px;
  background:
    radial-gradient(ellipse 60% 50% at 80% 30%, rgba(201, 168, 106, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 90%, rgba(201, 168, 106, 0.06), transparent 70%);
  position: relative;
}
.hero > .wrap { width: 100%; }
.hero h1 { margin-bottom: 32px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 32px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--line-soft); font-size: 15px; color: var(--muted); }
.hero-meta strong { color: var(--white); font-weight: 500; }
.stars { color: var(--gold); letter-spacing: 3px; }

.page-hero { padding: 200px 0 100px; background: radial-gradient(ellipse 50% 60% at 85% 20%, rgba(201, 168, 106, 0.1), transparent 70%); }
.page-hero h1 { font-size: clamp(44px, 7vw, 88px); margin-bottom: 28px; }

/* Press strip */
.press { padding: 48px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.press-inner { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; justify-content: space-between; }
.press-label { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint); }
.press-logos { display: flex; gap: clamp(28px, 5vw, 64px); flex-wrap: wrap; align-items: center; }
.press-logos span { font-family: var(--serif); font-size: 22px; color: var(--faint); letter-spacing: 0.04em; white-space: nowrap; }

/* Before / After */
.shift { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.shift > div { padding: clamp(32px, 5vw, 56px); }
.shift > div + div { border-left: 1px solid var(--line); background: linear-gradient(160deg, rgba(201, 168, 106, 0.08), transparent 60%); }
.shift h3 { font-size: 15px; font-family: var(--sans); letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500; margin-bottom: 28px; color: var(--faint); }
.shift > div + div h3 { color: var(--gold); }
.shift ul { list-style: none; padding: 0; margin: 0; }
.shift li { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.shift li:last-child { border-bottom: 0; }
.shift > div:first-child li { color: var(--faint); }
@media (max-width: 720px) { .shift { grid-template-columns: 1fr; } .shift > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.pillar { background: var(--black); padding: 48px 40px 56px; }
.pillar .num { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 20px; margin-bottom: 48px; display: block; }
.pillar h3 { margin-bottom: 16px; }
.pillar p { color: var(--muted); margin: 0; font-size: 15px; }
@media (max-width: 860px) { .pillars { grid-template-columns: 1fr; } }

/* Packages */
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.package {
  border: 1px solid var(--line-soft); padding: 48px 40px; display: flex; flex-direction: column;
  background: var(--ink); position: relative;
}
.package.featured { border-color: var(--gold); background: linear-gradient(180deg, rgba(201, 168, 106, 0.1), var(--ink) 50%); }
.package.bespoke { border-color: var(--gold); background: radial-gradient(120% 60% at 50% 0%, rgba(201, 168, 106, 0.22), transparent 70%), var(--black); box-shadow: inset 0 0 0 1px rgba(201, 168, 106, 0.35); }
.package.bespoke h3, .package.bespoke .price { color: var(--gold-bright); }
.package .tag { position: absolute; top: -12px; left: 40px; background: var(--gold); color: var(--black); font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; padding: 5px 12px; font-weight: 600; }
.package h3 { font-size: 34px; margin-bottom: 8px; }
.package .for { color: var(--muted); font-size: 15px; margin: 0 0 32px; min-height: 48px; }
.price { font-family: var(--serif); font-size: 52px; line-height: 1; margin-bottom: 6px; }
.price-note { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 36px; }
.package ul { list-style: none; margin: 0 0 40px; padding: 0; flex: 1; }
.package li { padding: 11px 0 11px 26px; border-top: 1px solid var(--line-soft); font-size: 15px; position: relative; color: rgba(245, 241, 232, 0.85); }
.package li::before { content: ""; position: absolute; left: 0; top: 20px; width: 12px; height: 1px; background: var(--gold); }
.package .btn { width: 100%; }
.after-note { text-align: center; color: var(--faint); font-size: 13px; margin-top: 40px; }
@media (max-width: 960px) { .packages { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

/* Process */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; counter-reset: step; }
.step { border-top: 1px solid var(--gold); padding-top: 28px; }
.step .num { font-family: var(--serif); font-style: italic; font-size: 44px; color: var(--gold); line-height: 1; display: block; margin-bottom: 20px; }
.step h3 { font-size: 24px; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 960px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.quote blockquote { margin: 0 0 28px; font-family: var(--serif); font-size: 24px; line-height: 1.4; }
.quote blockquote::before { content: "\201C"; display: block; font-size: 64px; line-height: 0.6; color: var(--gold); margin-bottom: 16px; }
.quote cite { font-style: normal; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.quote cite strong { display: block; color: var(--white); font-weight: 500; margin-bottom: 4px; }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; gap: 48px; } }

/* Guarantee band */
.band { background: linear-gradient(135deg, #16120a, var(--black) 60%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.band h2 { margin-bottom: 24px; }
.band p { color: var(--muted); max-width: 620px; margin: 0 auto; }
.seal-mark { width: 120px; height: auto; margin: 0 auto 36px; }

/* FAQ */
.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-child { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  list-style: none; cursor: pointer; padding: 28px 48px 28px 0; position: relative;
  font-family: var(--serif); font-size: clamp(21px, 2.2vw, 26px);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-weight: 200; font-size: 28px; color: var(--gold); transition: transform 0.3s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--muted); margin: 0 0 28px; max-width: 680px; }

/* Final CTA */
.cta { text-align: center; }
.cta h2 { font-size: clamp(44px, 6.5vw, 84px); margin-bottom: 28px; }
.cta .lede { margin: 0 auto; }
.cta .btn-row { justify-content: center; }

/* Split / about */
.split { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(48px, 7vw, 112px); align-items: start; }
.split p { color: var(--muted); }
.portrait {
  aspect-ratio: 4 / 5; border: 1px solid var(--line);
  background: linear-gradient(160deg, #1b1712, #0d0d0d);
  display: grid; place-items: center; color: var(--faint); font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase;
  position: sticky; top: 120px;
}
img.portrait { width: 100%; height: auto; object-fit: cover; }
.signature { font-family: "Pinyon Script", var(--serif); font-size: clamp(28px, 8vw, 44px); line-height: 1.2; white-space: nowrap; color: var(--gold); margin-top: 40px; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.values h3 { font-size: 26px; margin-bottom: 12px; }
.values p { color: var(--muted); font-size: 15px; margin: 0; }
@media (max-width: 860px) { .split, .values { grid-template-columns: 1fr; } .portrait { position: static; } }


/* Forms */
.form { display: grid; gap: 20px; }
.form label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: grid; gap: 10px; }
.form input, .form select, .form textarea {
  background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--white);
  font-family: var(--sans); font-size: 16px; padding: 10px 0; outline: none; font-weight: 300;
}
.form select option { background: var(--black); }
.form input:focus, .form textarea:focus, .form select:focus { border-color: var(--gold); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.contact-list { list-style: none; padding: 0; margin: 40px 0 0; }
.contact-list li { padding: 20px 0; border-top: 1px solid var(--line-soft); }
.contact-list small { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.contact-list a, .contact-list span { font-family: var(--serif); font-size: 24px; }

/* Embeds + placeholders */
.embed { border: 1px solid var(--line); background: var(--ink); min-height: 200px; }
.embed iframe { width: 100%; border: 0; display: block; min-height: 640px; }
.embed iframe[src*="tally.so"] { min-height: 0; height: 320px; } /* Tally resizes it to fit each question */
.embed-empty { padding: 56px 40px; text-align: center; color: var(--faint); font-size: 14px; }
.embed-empty strong { display: block; color: var(--gold); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px; margin-bottom: 10px; }

/* Onboarding (welcome page) */
.progress { display: flex; gap: 0; margin: 48px 0 64px; border: 1px solid var(--line-soft); }
.progress li { flex: 1; list-style: none; padding: 18px 20px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); border-right: 1px solid var(--line-soft); }
.progress li:last-child { border-right: 0; }
.progress li b { font-family: var(--serif); font-style: italic; font-size: 20px; font-weight: 400; margin-right: 10px; letter-spacing: 0; text-transform: none; }
.progress li.done { color: var(--gold); }
.progress li.active { color: var(--white); background: rgba(201, 168, 106, 0.08); }
.progress { padding: 0; }
@media (max-width: 560px) { .progress li span { display: none; } }
.niche-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 40px; }
.niche-picker button {
  background: transparent; border: 1px solid var(--line-soft); color: var(--white); text-align: left;
  padding: 22px 24px; font-family: var(--serif); font-size: 21px; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.niche-picker button:hover { border-color: var(--gold); }
.niche-picker button[aria-pressed="true"] { border-color: var(--gold); background: rgba(201, 168, 106, 0.1); color: var(--gold-bright); }
.industry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.industry-grid div { background: var(--black); padding: 32px 28px; }
.industry-grid strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2; }
.locked { opacity: 0.35; pointer-events: none; filter: grayscale(1); }

/* Footer */
footer { border-top: 1px solid var(--line-soft); padding: 80px 0 40px; font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 64px; }
.foot-grid h4 { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin: 0 0 20px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 10px; color: var(--muted); }
.foot-grid a:hover { color: var(--white); }
.foot-grid p { color: var(--muted); max-width: 340px; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; color: var(--faint); font-size: 13px; padding-top: 28px; border-top: 1px solid var(--line-soft); }
@media (max-width: 960px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }

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

/* Hero and page intros animate on load via CSS, so above-the-fold copy never waits on JS */
.hero .reveal, .page-hero .reveal { opacity: 1; transform: none; animation: rise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero .reveal:nth-child(2), .page-hero .reveal:nth-child(2) { animation-delay: .12s; }
.hero .reveal:nth-child(3), .page-hero .reveal:nth-child(3) { animation-delay: .24s; }
.hero .reveal:nth-child(4), .page-hero .reveal:nth-child(4) { animation-delay: .36s; }
.hero .reveal:nth-child(5) { animation-delay: .48s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .hero .reveal, .page-hero .reveal { animation: none; } }

/* ---------- Handwritten intro ---------- */
.intro { display: none; }
.play-intro .intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200;
  background: #050505; transition: opacity 0.9s ease, visibility 0.9s;
}
.play-intro:not(.intro-done) body { overflow: hidden; }
.intro-done .intro { opacity: 0; visibility: hidden; }
.intro-inner { width: min(900px, 92vw); text-align: center; }
.intro svg { width: 100%; height: auto; overflow: visible; }
.intro-script {
  font-family: "Pinyon Script", cursive; font-size: 190px;
  fill: var(--gold); fill-opacity: 0;
  stroke: var(--gold-bright); stroke-width: 1.1; stroke-dasharray: 900; stroke-dashoffset: 900;
}
/* A clip sweeps left→right so letters appear in writing order while the pen strokes draw. */
.intro svg { clip-path: inset(-20% 100% -20% 0); }
.intro-go svg { animation: sweep 2.6s cubic-bezier(.45,.05,.35,1) forwards; }
.intro-go .intro-script { animation: pen 2.8s ease-in-out forwards, ink 0.9s ease 2.3s forwards; }
.intro-sub {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-size: 13px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold);
  opacity: 0; transform: translateY(8px); margin-top: -8px;
}
.intro-sub::before, .intro-sub::after { content: ""; width: 56px; height: 1px; background: var(--gold); opacity: 0.6; }
.intro-go .intro-sub { animation: fadeUp 0.9s ease 2.7s forwards; }
.intro-skip {
  position: absolute; right: var(--gutter); bottom: 32px; background: none; border: 0; cursor: pointer;
  color: var(--faint); font: 500 11px var(--sans); letter-spacing: 0.3em; text-transform: uppercase;
}
.intro-skip:hover { color: var(--white); }
@keyframes pen { to { stroke-dashoffset: 0; } }
@keyframes ink { to { fill-opacity: 1; stroke-opacity: 0.35; } }
@keyframes sweep { to { clip-path: inset(-20% -5% -20% 0); } }
@keyframes fadeUp { to { opacity: 1; transform: none; } }
/* Hold the hero's own entrance until the intro lifts. */
.play-intro:not(.intro-done) .hero .reveal { animation-play-state: paused; }

/* ---------- Audience doors ---------- */
.doors-label { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 30px); margin: 56px 0 20px; }
.doors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.door {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 172px;
  border: 1px solid var(--line-soft); padding: 26px 24px; background: rgba(10, 10, 10, 0.5);
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.door:hover { border-color: var(--gold); background: rgba(201, 168, 106, 0.08); transform: translateY(-3px); }
.door strong { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.15; display: block; }
.door span { color: var(--muted); font-size: 15px; }
.door .arrow { color: var(--gold); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.door.quiet { border-style: dashed; }
@media (max-width: 960px) { .doors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .doors { grid-template-columns: 1fr; } .door { min-height: 0; } }

/* ---------- Three ways to work ---------- */
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.way { background: var(--black); padding: 44px 36px; display: flex; flex-direction: column; gap: 14px; }
.way .from { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.way .from b { font-family: var(--serif); font-size: 34px; letter-spacing: 0; text-transform: none; color: var(--white); font-weight: 400; display: block; margin-top: 4px; }
.way p { color: var(--muted); font-size: 15px; margin: 0; flex: 1; }
@media (max-width: 860px) { .ways { grid-template-columns: 1fr; } }

/* ---------- Pillars: four services ---------- */
.pillars.four { grid-template-columns: repeat(4, 1fr); }
.pillars.four .pillar { padding: 40px 32px 48px; }
@media (max-width: 1060px) { .pillars.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pillars.four { grid-template-columns: 1fr; } }

/* ---------- Prices / products ---------- */
.price small { font-family: var(--sans); font-size: 14px; color: var(--muted); margin-left: 4px; }
.packages.two { grid-template-columns: repeat(2, 1fr); }
.packages.four { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.packages.four .package { padding: 40px 28px; }
.packages.four .price { font-size: 44px; }
@media (max-width: 1100px) { .packages.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .packages.four, .packages.two { grid-template-columns: 1fr; } }
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.product { display: flex; justify-content: space-between; gap: 32px; padding: 28px 0; border-top: 1px solid var(--line-soft); }
.product h3 { font-size: 24px; margin-bottom: 6px; }
.product p { color: var(--muted); font-size: 15px; margin: 0; }
.product-buy { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.price-sm { font-family: var(--serif); font-size: 30px; line-height: 1; }
@media (max-width: 760px) { .products { grid-template-columns: 1fr; } }
.subnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.subnav a { border: 1px solid var(--line-soft); padding: 10px 18px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.subnav a:hover { border-color: var(--gold); color: var(--white); }
.custom-band { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; margin-top: 48px; padding: 36px 40px; border: 1px dashed var(--line); }
.custom-band h3 { font-size: 30px; margin-bottom: 6px; }
.custom-band p { color: var(--muted); margin: 0; }
section[id] { scroll-margin-top: 92px; }

/* ---------- Price on application, add-ons, publications ---------- */
.price.poa { font-size: 30px; line-height: 1.15; color: var(--gold-bright); }
.price-sm.poa { font-size: 20px; color: var(--gold-bright); }
.addon-tick {
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px; cursor: pointer;
  font-size: 14px; color: var(--muted);
}
.product .addon-tick { margin: 14px 0 0; }
.addon-tick span { color: var(--gold); }
.addon-tick input { width: 18px; height: 18px; accent-color: var(--gold); margin: 0; }
.addon-tick:hover { color: var(--white); }
.addon-band { margin-top: 24px; }
.addon-band .eyebrow { margin-bottom: 10px; }
.addon-band p:last-child { max-width: 560px; }
.addon-buy { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.addon-buy small { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.pub-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.pub-groups > div { background: var(--black); padding: 32px 28px; }
.pub-groups h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.pub-groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pub-groups li { font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.pub-note { color: var(--muted); font-size: 14px; margin: 20px 0 0; }
@media (max-width: 960px) { .pub-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .pub-groups { grid-template-columns: 1fr; } }

/* =========================================================
   Draft 4 — product pages, method, access notice, apply, audit
   ========================================================= */
.price small { font-family: var(--sans); font-size: 15px; color: var(--muted); margin-left: 4px; }
.package .btn { margin-top: 8px; }
.addons { display: grid; gap: 10px; margin: -12px 0 20px; }
.tick { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--muted); }
.tick input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--gold); flex-shrink: 0; }
.tick:hover { color: var(--white); }
.tick span { color: var(--gold); white-space: nowrap; }
.access-box { border: 1px solid var(--line); background: rgba(201, 168, 106, 0.06); padding: 18px 18px 16px; margin-bottom: 16px; display: grid; gap: 12px; transition: border-color 0.2s; }
.access-box p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }
.access-box strong { color: var(--gold-bright); font-weight: 600; }
.access-box.nudge { border-color: var(--gold-bright); animation: nudge 0.5s; }
@keyframes nudge { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
.packages.three { grid-template-columns: repeat(3, 1fr); }
.packages.two { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
@media (max-width: 960px) { .packages.three, .packages.two { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* Method */
.method { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-top: 1px solid var(--gold); }
.method-step { padding: 28px 24px 8px 0; position: relative; }
.method-step .num { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--gold); display: block; margin-bottom: 14px; }
.method-step h3 { font-size: 26px; margin-bottom: 8px; letter-spacing: 0.02em; }
.method-step p { color: var(--muted); font-size: 15px; margin: 0; }
.method-step:not(:last-child)::after { content: "→"; position: absolute; right: 10px; top: 28px; color: var(--gold); opacity: 0.6; }
@media (max-width: 960px) { .method { grid-template-columns: 1fr 1fr; gap: 0 32px; } .method-step::after { display: none; } }
@media (max-width: 520px) { .method { grid-template-columns: 1fr; } }
.method-line { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 600; }

/* Objectives (homepage) */
.objectives { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.objective { border: 1px solid var(--line-soft); background: var(--ink); padding: 32px 26px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.25s, transform 0.25s; }
.objective:hover { border-color: var(--gold); transform: translateY(-3px); }
.objective .kicker { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.objective h3 { font-size: 28px; }
.objective .from { font-family: var(--serif); font-size: 30px; line-height: 1.1; }
.objective .from small { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.objective p { color: var(--muted); font-size: 15px; margin: 0; flex: 1; }
.objective .tiers { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }
.objective .text-link { align-self: flex-start; margin-top: 8px; }
@media (max-width: 1100px) { .objectives { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .objectives { grid-template-columns: 1fr; } }

/* Journey (numbered steps that really are a sequence) */
.journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px; counter-reset: j; }
.journey > div { border-top: 1px solid var(--gold); padding-top: 22px; }
.journey .num { font-family: var(--serif); font-style: italic; font-size: 38px; color: var(--gold); line-height: 1; display: block; margin-bottom: 14px; }
.journey h3 { font-size: 22px; margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--sans); font-weight: 600; font-size: 15px; }
.journey p { color: var(--muted); font-size: 15px; margin: 0; }

/* Stat strip (only real, confirmed figures) */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); }
.stat-strip > div { padding: 26px 24px; border-right: 1px solid var(--line); }
.stat-strip > div:last-child { border-right: 0; }
.stat-strip b { display: block; font-family: var(--serif); font-weight: 400; font-size: 36px; color: var(--gold-bright); line-height: 1.1; }
.stat-strip span { color: var(--muted); font-size: 14px; }
@media (max-width: 760px) { .stat-strip { grid-template-columns: 1fr 1fr; } .stat-strip > div:nth-child(2) { border-right: 0; } .stat-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* Small print / disclaimers */
.small-print { color: var(--faint); font-size: 13px; line-height: 1.6; max-width: 760px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }

/* Bespoke list */
.bespoke-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.bespoke-list li { background: var(--black); padding: 22px 24px; font-family: var(--serif); font-size: 22px; }
@media (max-width: 860px) { .bespoke-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .bespoke-list { grid-template-columns: 1fr; } }

/* Case study */
.case { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; border: 1px solid var(--line); padding: clamp(28px, 5vw, 56px); }
.case .headline-result { font-family: var(--serif); font-size: clamp(40px, 5vw, 64px); line-height: 1.05; color: var(--gold-bright); }
.case dl { margin: 0; display: grid; gap: 18px; }
.case dt { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.case dd { margin: 4px 0 0; color: var(--muted); }
@media (max-width: 860px) { .case { grid-template-columns: 1fr; gap: 32px; } }

/* Media by industry */
.media-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.media-grid > div { background: var(--black); padding: 26px 22px; }
.media-grid h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; line-height: 1.5; }
.media-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.media-grid li { font-family: var(--serif); font-size: 21px; line-height: 1.25; }
@media (max-width: 1100px) { .media-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .media-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .media-grid { grid-template-columns: 1fr; } }

/* Stepper (apply, audit) */
.stepper { border: 1px solid var(--line); background: var(--ink); padding: clamp(28px, 5vw, 56px); max-width: 760px; }
.stepper .count { font-size: 13px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; }
.stepper .bar { height: 2px; background: var(--line-soft); margin-bottom: 36px; }
.stepper .bar i { display: block; height: 100%; background: var(--gold); transition: width 0.3s; }
.stepper h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 28px; }
.stepper input[type=text], .stepper input[type=email], .stepper input[type=url], .stepper textarea {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--white);
  font: 400 20px var(--sans); padding: 12px 0; outline: none;
}
.stepper textarea { min-height: 110px; resize: vertical; font-size: 17px; }
.stepper input:focus, .stepper textarea:focus { border-color: var(--gold); }
.choices { display: grid; gap: 10px; }
.choices button {
  text-align: left; background: transparent; border: 1px solid var(--line-soft); color: var(--white);
  padding: 16px 20px; font: 400 17px var(--sans); cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.choices button:hover, .choices button:focus-visible { border-color: var(--gold); outline: none; }
.choices button[aria-pressed="true"] { border-color: var(--gold); background: rgba(201, 168, 106, 0.1); color: var(--gold-bright); }
.stepper .nav-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; }
.stepper .back { background: none; border: 0; color: var(--muted); cursor: pointer; font: 500 13px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.stepper .back:hover { color: var(--white); }
.stepper .hint { color: var(--faint); font-size: 13px; margin-top: 10px; }
.score { font-family: var(--serif); font-size: clamp(64px, 10vw, 110px); line-height: 1; color: var(--gold-bright); }
.score-bars { display: grid; gap: 12px; margin: 28px 0; }
.score-bars div { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 14px; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.score-bars .track { height: 6px; background: var(--line-soft); }
.score-bars .track i { display: block; height: 100%; background: var(--gold); }
.score-bars b { color: var(--white); font-weight: 500; text-align: right; letter-spacing: 0; }

/* Legal placeholder page */
.legal-list { display: grid; gap: 40px; max-width: 760px; }
.legal-list h2 { font-size: 30px; margin-bottom: 10px; }
.legal-list p { color: var(--muted); margin: 0; }
.foot-company { color: var(--faint); font-size: 13px; margin-top: 10px; }
.plain-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.plain-list li { position: relative; padding-left: 26px; color: var(--muted); }
.plain-list li::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 1px; background: var(--gold); }
.flow-step { margin-top: 80px; }
.flow-step:first-child { margin-top: 24px; }
.flow-step.is-done .step-body, .flow-step.is-done .lede { display: none; }
.flow-step.is-done h2::after { content: "  ✓"; color: var(--gold); font-size: 0.7em; }
.ways.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .ways.two { grid-template-columns: 1fr; } }
.embed-out { margin: 0; padding: 14px 20px; border-top: 1px solid var(--line-soft); font-size: 13px; }


/* Homepage audit teaser: explanation beside an example result */
.audit-teaser { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.audit-steps { list-style: none; counter-reset: a; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; }
.audit-steps li { counter-increment: a; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; }
.audit-steps li::before { content: counter(a); grid-row: span 2; width: 32px; height: 32px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold); font-family: var(--serif); font-size: 17px; }
.audit-steps b { font-weight: 600; color: var(--white); }
.audit-steps span { color: var(--muted); font-size: 15px; }
.hint-line { color: var(--faint); font-size: 13px; margin: 14px 0 0; }
.audit-preview { border: 1px solid var(--line); background: linear-gradient(160deg, rgba(201, 168, 106, 0.08), var(--ink) 55%); padding: clamp(28px, 4vw, 44px); }
.audit-preview .score { font-size: clamp(56px, 7vw, 84px); }
.audit-preview .score small { font-size: 24px; color: var(--muted); }
.audit-preview .score-bars { margin: 24px 0; }
.audit-preview .rec { margin: 0; padding-top: 20px; border-top: 1px solid var(--line-soft); color: var(--white); }
.audit-preview .rec span { display: block; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 6px; }
@media (max-width: 900px) { .audit-teaser { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .score-bars div { grid-template-columns: 84px 1fr 36px; gap: 10px; } }

/* Hero strip: framed panels under the hero buttons (replaces the loose "hero-meta" line) */
.hero-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 64px; border: 1px solid var(--line); background: rgba(17, 17, 17, 0.7); max-width: 900px; }
.hero-strip > * { display: flex; flex-direction: column; gap: 6px; padding: 22px 26px; border-right: 1px solid var(--line); transition: background 0.25s; }
.hero-strip > *:last-child { border-right: 0; }
.hero-strip a:hover { background: rgba(201, 168, 106, 0.08); }
.hero-strip .label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.hero-strip .figure { font-family: var(--serif); font-size: 30px; line-height: 1.15; color: var(--white); }
.hero-strip .figure b { font-weight: 500; color: var(--gold-bright); }
.hero-strip .figure small { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.hero-strip .figure-sm { color: var(--white); font-size: 15px; }
.hero-strip .go { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; margin-top: 4px; }
.hero-strip a:hover .go { color: var(--gold-bright); }
@media (max-width: 760px) {
  .hero-strip { grid-template-columns: 1fr; margin-top: 44px; }
  .hero-strip > * { border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 20px; }
  .hero-strip > *:last-child { border-bottom: 0; }
}

.product .delivery { margin-top: 10px; font-size: 13px; color: var(--gold); letter-spacing: 0.02em; }
@media (max-width: 1100px) { .method { grid-template-columns: repeat(3, 1fr); gap: 0 32px; } .method-step::after { display: none; } }

/* Brand story (homepage, straight after the hero) */
.story-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(40px, 6vw, 96px); align-items: start; }
.story-inner .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.story-copy p { color: var(--muted); font-size: clamp(17px, 1.5vw, 19px); margin: 0 0 18px; }
@media (max-width: 860px) { .story-inner { grid-template-columns: 1fr; } }

/* Bespoke intro, given more weight */
.lede-lg { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.35; color: var(--white); max-width: 900px; margin: -24px 0 48px; }

/* Price strip beside the final call to action */
.cta-strip { margin: 40px auto 8px; text-align: left; }

/* Publications: scrolling banner + "plus many more" */
.marquee { overflow: hidden; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 48px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
/* Pause on hover only where there is a real mouse: on phones a tap leaves :hover stuck and froze the banner. */
@media (hover: hover) and (pointer: fine) { .marquee:hover .marquee-track { animation-play-state: paused; } }
.marquee-track span { display: flex; align-items: center; padding: 26px 40px; font-family: var(--serif); font-size: 24px; color: var(--muted); white-space: nowrap; }
.marquee-track img { height: 26px; width: auto; max-width: 180px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.72; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; width: auto; } }
.many-more { margin: 18px 0 0; color: var(--gold); font-size: 14px; letter-spacing: 0.04em; }
.media-grid img { height: 22px; width: auto; max-width: 100%; object-fit: contain; object-position: left; filter: brightness(0) invert(1); opacity: 0.85; }

/* Audit: optional personal follow-up */
.followup { margin-top: 40px; padding: 28px; border: 1px solid var(--line); background: rgba(201, 168, 106, 0.05); }
.followup h3 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 8px; }
.followup h3 em { color: var(--gold); }
.followup .eyebrow { margin-bottom: 10px; }
.followup p { color: var(--muted); margin: 0 0 20px; }
.followup .embed { margin-top: 8px; }
@media (max-width: 700px) { .method { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .method { grid-template-columns: 1fr; } }
/* Media grid: wrap so the last row fills the width (5 industries never leave an empty cell) */
.media-grid { display: flex; flex-wrap: wrap; }
.media-grid > div { flex: 1 1 170px; }
/* Five objectives: one row on wide screens, then wrap so rows stay full */
.objectives.five { display: flex; flex-wrap: wrap; }
.objectives.five .objective { flex: 1 1 160px; }

/* Featured testimonial */
.quote-feature { margin: 40px 0 0; max-width: 900px; }
.quote-feature + .quote-feature { margin-top: 72px; padding-top: 64px; border-top: 1px solid var(--line-soft); }
.quote-feature blockquote { margin: 0; position: relative; padding-left: clamp(0px, 5vw, 72px); }
.quote-feature blockquote::before { content: "\201C"; position: absolute; left: 0; top: -12px; font-family: var(--serif); font-size: 68px; line-height: 1; color: var(--gold); }
.quote-feature p { font-family: var(--serif); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; margin: 0 0 14px; color: rgba(245, 241, 232, 0.88); }
.quote-feature figcaption { padding-left: clamp(0px, 5vw, 72px); margin-top: 8px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 600px) { .quote-feature blockquote { padding-top: 48px; } }

/* Legal documents (legal.html) */
.legal-toc { margin-top: 36px; }
.legal-toc ol { margin: 14px 0 0; padding-left: 22px; display: grid; gap: 8px; color: var(--muted); }
.legal-toc a, .legal-doc a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { color: var(--muted); margin-top: 28px; }
.legal-doc h2 { margin-bottom: 18px; }
.legal-doc h3 { font-size: 22px; margin: 32px 0 12px; }
.legal-doc p + p, .legal-doc ul + p, .legal-doc p + ul { margin-top: 12px; }
.legal-doc ul { color: var(--muted); margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.legal-doc strong { color: var(--white); font-weight: 600; }

/* Publication logos: every logo shown as a matching white outline */
.press-logos img { height: 24px; width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.6; }
.press-logos span { display: flex; align-items: center; }
.media-grid li { min-height: 28px; display: flex; align-items: center; }
/* Featured row: label above, logos spread across one line (wrapping neatly on small screens) */
.press-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
.press-logos { width: 100%; justify-content: space-between; gap: 24px 36px; }
@media (max-width: 700px) { .press-logos { justify-content: flex-start; } }
@media (max-width: 700px) {
  .press-logos { gap: 22px 18px; }
  .press-logos > span { flex: 0 0 calc((100% - 36px) / 3); }
  .press-logos img { max-width: 100%; height: 20px; }
  .press-logos .pub-name { font-size: 17px; }
}
@media (max-width: 700px) {
  .press-logos { column-gap: 4%; }
  .press-logos > span { flex: 0 0 30%; min-width: 0; white-space: normal; }
}
.founder-quote { margin: -8px 0 28px; padding-left: 20px; border-left: 2px solid var(--gold); font-family: var(--serif); font-size: clamp(20px, 2vw, 24px); line-height: 1.45; color: var(--white); }
/* Footer social links */
.socials { display: flex; gap: 14px; margin-top: 22px; }
.socials a { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); transition: color 0.2s; }
.socials a:hover { color: var(--gold-bright); }
.socials svg { color: var(--gold); }

/* PR page: bespoke teaser above the packages, and the full bespoke section */
.bespoke-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px 32px; flex-wrap: wrap; margin: 0 0 40px; padding: 20px 28px; border: 1px solid var(--line); border-left: 2px solid var(--gold); background: linear-gradient(90deg, #16120a, transparent 70%); color: var(--white); text-decoration: none; }
.bespoke-strip b { color: var(--gold); font-weight: 500; }
.bespoke-strip:hover .text-link { color: var(--gold-bright); }
.pr-bespoke { background: linear-gradient(135deg, #16120a, var(--black) 65%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.results-table { border: 1px solid var(--line); background: rgba(10, 10, 10, 0.4); }
.results-table > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.results-table > div + div { border-top: 1px solid var(--line-soft); }
.results-table span { padding: 22px 28px; }
.rt-head span { padding-top: 16px; padding-bottom: 16px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.rt-row span:first-child { font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--white); }
.rt-row span:last-child { color: var(--muted); border-left: 1px solid var(--line-soft); }
@media (max-width: 700px) {
  .results-table > div { grid-template-columns: 1fr; }
  .rt-head { display: none !important; }
  .rt-row span:first-child { padding-bottom: 6px; }
  .rt-row span:last-child { border-left: 0; padding-top: 0; }
}
.package .tier { margin: -4px 0 12px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.tier-key { margin-top: 28px; }
.tier-key b { color: var(--gold); font-weight: 500; }

/* PR Elite: compact landscape card under the one-off packages, gold metallic finish (kept modest so the
   fixed-price tiers stay the natural first step) */
.package.elite {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 48px; align-items: center;
  padding: 26px 32px; border: 1px solid transparent;
  background:
    radial-gradient(70% 160% at 0% 0%, rgba(226, 199, 143, 0.14), transparent 55%),
    linear-gradient(var(--black), var(--black)) padding-box,
    linear-gradient(135deg, var(--gold-bright), var(--gold) 35%, var(--gold-deep) 65%, var(--gold-bright)) border-box;
  box-shadow: 0 16px 40px -30px rgba(201, 168, 106, 0.45);
}
.package.elite .elite-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.package.elite h3 {
  font-size: 30px; margin: 0;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold) 45%, #f3e3bd 60%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.package.elite .elite-tag { padding: 3px 9px; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; color: var(--black); background: linear-gradient(135deg, var(--gold-bright), var(--gold) 50%, var(--gold-deep)); align-self: center; }
.package.elite .tier { margin: 0; }
.package.elite .for { font-family: var(--serif); font-size: 19px; color: var(--white); min-height: 0; margin: 8px 0 0; }
.package.elite .pitch { color: var(--muted); font-size: 14px; max-width: 560px; margin: 4px 0 0; }
.package.elite .elite-side { text-align: right; }
.package.elite .price { font-size: 22px; color: var(--gold-bright); margin-bottom: 12px; }
.package.elite .btn { width: auto; }
.package.elite .reassure { color: var(--faint); font-size: 12px; margin: 8px 0 0; }
@media (max-width: 960px) {
  .package.elite { grid-template-columns: 1fr; padding: 24px 22px; }
  .package.elite .elite-side { text-align: left; }
  .package.elite .btn { width: 100%; }
}

/* Marquee copies: a wrapper span holding the repeated logos, laid out inline with the originals */
.marquee-track .dup { display: contents; }
@media (prefers-reduced-motion: reduce) { .marquee-track .dup { display: none; } }
/* "Our clients have been featured in": the same scrolling treatment, faded at the edges */
.press-logos.is-scrolling { display: block; overflow: hidden; width: 100%; min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.press-logos.is-scrolling .marquee-track { animation-duration: 30s; }
.press-logos.is-scrolling .marquee-track span:not(.dup) { flex: none; padding: 0 32px; }
@media (hover: hover) and (pointer: fine) { .press-logos.is-scrolling:hover .marquee-track { animation-play-state: paused; } }
.press-logos.is-scrolling img { max-width: 150px; height: 22px; }

/* Tighter vertical rhythm on the long pages (home, PR, Social Media, Services), so the gaps between
   sections don't read as the end of the page. The homepage hero keeps its own full-height layout. */
.page-tight section { padding: clamp(56px, 6vw, 88px) 0; }
.page-tight .page-hero { padding: 160px 0 56px; }
.page-tight .hero { padding: 120px 0 24px; min-height: 84vh; min-height: 84svh; } /* slightly shorter than the screen, so the next section peeks in */
.page-tight .hero + section { padding-top: 40px; }
.page-tight .section-head { margin-bottom: 48px; }
@media (max-width: 860px) {
  .page-tight .page-hero { padding: 128px 0 40px; }
  .page-tight .section-head { margin-bottom: 32px; }
}

/* Engagement Network choice on monthly PR cards */
.eng-choice { border: 0; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 8px; }
.eng-choice legend { padding: 0; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

/* Pop-ups (Inner Circle, exit intent) */
.pop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity 0.3s ease; }
.pop.is-open { opacity: 1; }
.pop-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 5, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pop-panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto; background: var(--ink); border: 1px solid var(--line); padding: clamp(32px, 5vw, 52px); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: translateY(14px); transition: transform 0.3s ease; }
.pop.is-open .pop-panel { transform: none; }
.pop-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright), var(--gold-deep)); }
.pop-panel h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; margin: 10px 0 14px; }
.pop-panel h2 em { color: var(--gold); }
.pop-lede { color: var(--muted); margin: 0 0 22px; }
.pop-panel .hint-line { color: var(--faint); font-size: 13px; margin: 0; }
.pop-panel .btn-row { margin-top: 26px; }
.pop-form { border: 0; background: transparent; min-height: 0; }
.pop-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; background: none; border: 0; color: var(--muted); font-size: 28px; line-height: 1; cursor: pointer; }
.pop-x:hover, .pop-x:focus-visible { color: var(--gold); }
@media (max-width: 520px) { .pop-panel .btn-row .btn { width: 100%; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .pop, .pop-panel { transition: none; } }