/* ==========================================================================
   Bliink — v2.0 Homepage
   Cinematic scrollytelling build on the brand system already validated
   across the v0.1 21-page build (see Bliink Landing Page/website/DESIGN.md):
   full-bleed photo hero, live conversation demo card, proof bar, thesis
   statement, three "brand rule" act chapters each with a sticky scroll-
   driven card stack, who-it's-for, customers, centered final CTA.
   ========================================================================== */

:root {
  /* --- palette (inherited, not re-decided here) --- */
  --white: #fdfbf6;        /* paper */
  --off-white: #faf3e7;    /* ivory */
  --ink: #17130f;
  --ink-soft: #2f2619;
  --muted: #c9bdae;           /* decorative + dark-bg text/accents only */
  --muted-deep: #766a5d;      /* graphite-soft, light-bg text, contrast-safe */
  --accent: #e8a33d;          /* amber — large fills, dark-bg text/accent */
  --accent-bright: #f4b95a;   /* hover fills on dark */
  --accent-deep: #8a5a1a;     /* amber-text — light-bg text/links, WCAG AA */
  --line-on-dark: rgba(250, 243, 231, 0.14);
  --line-on-light: rgba(74, 64, 56, 0.14);

  /* --- type (inherited) --- */
  --font: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --gutter: clamp(1.5rem, 5vw, 4rem);
  --nav-h: 80px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-soft);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark p { color: var(--white); }

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: var(--accent); }

.container { max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  font-weight: 700;
}
.on-dark .eyebrow { color: var(--accent); }

/* ==========================================================================
   Nav
   ========================================================================== */

.site-nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(17, 17, 17, 0.86);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-on-dark);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.brand-logo { height: 26px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-links a {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  transition: color 200ms var(--ease-standard);
}
.nav-links a:hover { color: var(--accent); }
.nav-links a[aria-current="page"] { color: var(--accent); }

.nav-cta {
  display: inline-flex; align-items: center;
  padding: 0.65rem 1.4rem;
  background: var(--accent); color: var(--ink);
  font-size: 0.85rem; font-weight: 600;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 200ms var(--ease-standard), transform 140ms var(--ease-out);
}
.nav-cta:hover { background: var(--accent-bright); }
.nav-cta:active { transform: scale(0.97); }

.nav-toggle { display: none; }
@media (max-width: 900px) {
  .nav-links {
    display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    padding: 1rem var(--gutter) 1.5rem;
    background: rgba(17, 17, 17, 0.98);
    border-bottom: 1px solid var(--line-on-dark);
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 0.85rem 0.5rem; }
  .nav-toggle { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--white); }
}
@media (max-width: 480px) { .nav-cta { display: none; } }

/* ==========================================================================
   Hero — full-bleed photography
   ========================================================================== */

.hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; overflow: clip; background: var(--ink); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(17,17,17,0.1) 0%, rgba(17,17,17,0.15) 45%, rgba(17,17,17,0.86) 100%);
}
.hero-content { position: relative; width: 100%; padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.hero-content .eyebrow { color: var(--accent); margin-bottom: 1rem; display: block; }
.hero h1 { color: var(--white); font-size: clamp(2.5rem, 5.6vw, 4.4rem); max-width: 20ch; font-weight: 600; }
.hero h1 em { font-style: italic; font-weight: 400; }
.hero .sub { margin-top: 1.5rem; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: rgba(255,255,255,0.78); max-width: 46ch; line-height: 1.6; }
.hero-cta-row { margin-top: 2.25rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

.hero.quiet { min-height: unset; align-items: flex-start; padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); background: var(--ink); }
.hero.quiet .hero-content { padding-bottom: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-accent {
  display: inline-flex; align-items: center; padding: 0.95rem 2rem;
  background: var(--accent); color: var(--ink);
  font-size: 0.92rem; font-weight: 600; border-radius: 999px;
  transition: background 200ms var(--ease-standard), transform 140ms var(--ease-out);
}
.btn-accent:hover { background: var(--accent-bright); }
.btn-accent:active { transform: scale(0.98); }

.btn-line {
  display: inline-flex; align-items: center; padding: 0.9rem 1.9rem;
  border: 1px solid rgba(255,255,255,0.4); color: var(--white);
  font-size: 0.92rem; font-weight: 500; border-radius: 999px;
  transition: border-color 200ms var(--ease-standard), background 200ms var(--ease-standard);
}
.btn-line:hover { border-color: var(--accent); background: rgba(232,163,61,0.08); }
.on-paper .btn-line { border-color: var(--line-on-light); color: var(--ink); }
.on-paper .btn-line:hover { border-color: var(--accent-deep); background: rgba(138,90,26,0.06); }

.channel-note { font-size: 0.78rem; color: rgba(255,255,255,0.5); }
.on-paper .channel-note { color: var(--muted-deep); }

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.section.on-dark { background: var(--ink); }
.section.on-paper { background: var(--white); }
.section.on-elevated { background: var(--off-white); }

.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin-top: 0.75rem; }
.section-head .lede { margin-top: 1.25rem; font-size: 1.1rem; color: var(--muted-deep); line-height: 1.6; }
.on-dark .section-head .lede { color: rgba(255,255,255,0.7); }

.photo-pair { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); margin-bottom: clamp(3rem, 6vw, 4.5rem); align-items: end; }
.photo-pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; border-radius: 4px; }
.photo-pair .tall { aspect-ratio: 3/4; }
@media (max-width: 780px) { .photo-pair { grid-template-columns: 1fr; } .photo-pair .tall { display: none; } }

.feature-photo { margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.feature-photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; }
.feature-photo figcaption { margin-top: 0.9rem; font-size: 0.76rem; color: var(--muted-deep); }

.sequence { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); }
@media (max-width: 820px) { .sequence { grid-template-columns: 1fr; } }
.sequence-item { border-top: 1px solid var(--line-on-light); padding-top: 1.5rem; }
.on-dark .sequence-item { border-color: var(--line-on-dark); }
.sequence-item .num { font-family: var(--font); font-weight: 700; font-size: 2.2rem; color: var(--accent-deep); display: block; margin-bottom: 0.75rem; }
.on-dark .sequence-item .num { color: var(--accent); }
.sequence-item h3 { font-size: 1.25rem; margin-bottom: 0.6rem; font-weight: 600; }
.sequence-item p { color: var(--muted-deep); line-height: 1.6; }
.on-dark .sequence-item p { color: rgba(255,255,255,0.7); }

.quote-block { max-width: 720px; }
.quote-block blockquote { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 500; font-style: italic; color: var(--ink); line-height: 1.45; margin: 0; }
.on-dark .quote-block blockquote { color: var(--white); }
.quote-block cite { display: block; margin-top: 1.25rem; font-style: normal; font-size: 0.85rem; font-weight: 600; color: var(--muted-deep); }
.on-dark .quote-block cite { color: rgba(255,255,255,0.6); }

.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.75rem, 3vw, 2.5rem); }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-grid h4 { font-size: 1.1rem; margin-bottom: 0.5rem; font-weight: 600; }
.feature-grid p { color: var(--muted-deep); font-size: 0.95rem; line-height: 1.6; }
.on-dark .feature-grid p { color: rgba(255,255,255,0.7); }

.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .card-grid, .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid, .card-grid.cols-3 { grid-template-columns: 1fr; } }
.pcard { border: 1px solid var(--line-on-light); border-radius: 8px; padding: 2rem 1.75rem; transition: border-color 200ms var(--ease-standard); }
.on-dark .pcard { border-color: var(--line-on-dark); }
.pcard:hover { border-color: var(--accent-deep); }
.on-dark .pcard:hover { border-color: var(--accent); }
.pcard h4 { font-size: 1.1rem; margin-bottom: 0.6rem; font-weight: 600; }
.pcard p { color: var(--muted-deep); font-size: 0.94rem; line-height: 1.6; }
.on-dark .pcard p { color: rgba(255,255,255,0.7); }
.pcard a { display: inline-block; margin-top: 1rem; font-size: 0.82rem; font-weight: 600; color: var(--accent-deep); }
.on-dark .pcard a { color: var(--accent); }
.pcard .attrib-title { font-size: 0.85rem; color: var(--muted-deep); margin-top: 0.2rem; }
.pcard.is-soon { opacity: 0.6; }
.pcard.is-soon:hover { border-color: var(--line-on-light); }
.soon-label { display: inline-block; margin-top: 1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-deep); }

.service-rows { display: flex; flex-direction: column; }
.service-row { display: grid; grid-template-columns: 240px 1fr auto; gap: 2rem; align-items: baseline; padding-block: 1.75rem; border-top: 1px solid var(--line-on-light); }
.on-dark .service-row { border-color: var(--line-on-dark); }
.service-rows .service-row:last-child { border-bottom: 1px solid var(--line-on-light); }
.on-dark .service-rows .service-row:last-child { border-color: var(--line-on-dark); }
@media (max-width: 700px) { .service-row { grid-template-columns: 1fr; gap: 0.5rem; } }
.service-row h3 { font-size: 1.25rem; font-weight: 600; }
.service-row p { color: var(--muted-deep); }
.on-dark .service-row p { color: rgba(255,255,255,0.7); }
.service-row a { font-size: 0.82rem; font-weight: 600; color: var(--accent-deep); white-space: nowrap; }
.on-dark .service-row a { color: var(--accent); }

.closing-line { margin-top: clamp(2rem, 4vw, 3rem); font-size: 1.3rem; font-weight: 500; font-style: italic; color: var(--ink); }
.on-dark .closing-line { color: var(--white); }

.faq-list { display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid var(--line-on-light); }
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--line-on-light); }
.faq-item summary { padding-block: 1.4rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent-deep); font-size: 1.3rem; transition: transform 200ms var(--ease-standard); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding-bottom: 1.4rem; color: var(--muted-deep); max-width: 62ch; line-height: 1.65; }

.prose { max-width: 680px; font-size: 1.08rem; line-height: 1.75; color: var(--ink-soft); }
.prose h2, .prose h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.prose p + p { margin-top: 1.2rem; }
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { margin: 1.2rem 0; padding-left: 1.4rem; list-style: disc; }
.prose ul li { margin-bottom: 0.5rem; }

.proof-bar { background: var(--ink); border-top: 1px solid var(--line-on-dark); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.proof-heading { text-align: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: rgba(253,251,246,0.6); }

/* proof-grid: real stat numbers, used on interior pages per the content
   system (homepage's own proof bar dropped the stats on Larry's request,
   but that was a homepage-specific edit — interior pages still carry the
   real, non-negotiable proof numbers per PRODUCT.md). */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
.proof-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .proof-grid, .proof-grid.cols-4 { grid-template-columns: 1fr; gap: 2rem; } }
.proof-stat .num { font-family: var(--font-mono); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; color: var(--accent); }
.proof-stat .label { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(253,251,246,0.6); }

.proof-logos-viewport {
  margin-top: clamp(1.5rem, 3vw, 2.25rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.proof-logos-track { display: flex; align-items: center; gap: clamp(2.5rem, 6vw, 4rem); width: max-content; animation: proof-logos-scroll 32s linear infinite; }
.proof-logos-track:hover { animation-play-state: paused; }
@keyframes proof-logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* fixed-box wrapper: every logo scales to fit the same footprint via
   object-fit:contain, so differing intrinsic aspect ratios/padding in the
   source files (some are near-square, some are wide wordmarks) still read
   as one consistent size, not just one consistent height. */
.proof-logo { display: flex; align-items: center; justify-content: center; height: 36px; width: 110px; flex-shrink: 0; }
.proof-logo img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; opacity: 0.7; filter: grayscale(1) brightness(1.7); transition: opacity 200ms var(--ease-standard); }
.proof-logo:hover img { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .proof-logos-track { animation: none; }
  .proof-logos-viewport { overflow-x: auto; }
}
.proof-note { margin-top: clamp(1.5rem, 3vw, 2rem); text-align: center; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: rgba(253,251,246,0.56); }

.final-cta { background: var(--ink); text-align: center; padding-block: clamp(5rem, 11vw, 8rem); }
.final-cta h2 { color: var(--white); font-size: clamp(2.1rem, 4.2vw, 3.2rem); max-width: 20ch; margin-inline: auto; font-weight: 600; }
.final-cta .cta-row { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.data-table th, .data-table td { text-align: left; padding: 0.8rem 0.9rem; border-top: 1px solid var(--line-on-light); }
.data-table th { color: var(--accent-deep); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out); }
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--ink); border-top: 1px solid var(--line-on-dark); padding-block: clamp(3.5rem, 6vw, 5rem) 2.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2.5rem; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand .brand-logo { margin-bottom: 1rem; }
.footer-brand p { color: rgba(255,255,255,0.55); font-size: 0.92rem; max-width: 30ch; }
.footer-col h5 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col a { font-size: 0.9rem; color: rgba(255,255,255,0.65); transition: color 160ms; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-on-dark); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.78rem; color: rgba(255,255,255,0.6); }

/* ==========================================================================
   Floating CTA
   ========================================================================== */
.float-cta {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 90;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.3rem; background: var(--accent); color: var(--ink);
  font-size: 0.85rem; font-weight: 600; border-radius: 999px;
  box-shadow: 0 14px 34px -10px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 200ms var(--ease-standard), transform 200ms var(--ease-out), visibility 200ms;
}
.float-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.float-cta:hover { background: var(--accent-bright); }
.float-cta:active { transform: scale(0.97); }

/* ==========================================================================
   Quote stack — repeated short pull-quotes, e.g. example customer requests
   Lighter-weight sibling of .quote-block.
   ========================================================================== */
.quote-stack { display: flex; flex-direction: column; gap: 1.5rem; max-width: 640px; }
.quote-stack .quote-line { padding-left: 1.5rem; border-left: 2px solid var(--accent-deep); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; font-style: italic; color: var(--ink); line-height: 1.5; }
.on-dark .quote-stack .quote-line { border-left-color: var(--accent); color: var(--white); }

/* Tag list — short preference labels, pill style */
.tag-list { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.tag-list .tag { padding: 0.7rem 1.35rem; border: 1px solid var(--line-on-light); border-radius: 999px; font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.on-dark .tag-list .tag { border-color: var(--line-on-dark); color: var(--white); }

/* Tight list — short declarative lines, not a numbered sequence */
.tight-list { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.5rem; }
.tight-list li { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500; color: var(--ink); padding-left: 1.4rem; position: relative; }
.tight-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); }
.on-dark .tight-list li { color: var(--white); }
.on-dark .tight-list li::before { background: var(--accent); }

/* ==========================================================================
   Scrollytelling components — full-bleed photo hero, live conversation demo
   card, centered thesis with side-peek photos, three brand-rule act chapters
   each with a sticky scroll-driven card stack, centered final CTA.
   ========================================================================== */

/* --- cinematic hero: full-bleed photo, corner-anchored copy --- */
.cine-hero { position: relative; height: 100vh; min-height: 640px; overflow: clip; background: var(--ink); }
.cine-hero-media { position: absolute; inset: 0; }
.cine-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.cine-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  /* horizontal layer protects the copy column's contrast against this photo's
     bright sky/horizon; vertical layer keeps the top/bottom cinematic
     vignette. Split hero puts text on the left, so the horizontal dim leans
     left rather than the old full-width centered treatment. */
  background:
    linear-gradient(90deg, rgba(23,19,15,0.62) 0%, rgba(23,19,15,0.4) 42%, rgba(23,19,15,0.14) 68%, rgba(23,19,15,0.05) 100%),
    linear-gradient(180deg, rgba(23,19,15,0.45) 0%, rgba(23,19,15,0.2) 25%, rgba(23,19,15,0.2) 55%, rgba(23,19,15,0.8) 100%);
}
.cine-hero-top { position: absolute; top: clamp(1.5rem, 4vw, 3rem); left: var(--gutter); z-index: 2; }
.cine-hero-top .eyebrow-lg { color: var(--white); font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }

.cine-hero-media img { animation: hero-scale-down 1.4s var(--ease-out) forwards; }
@keyframes hero-scale-down { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .cine-hero-media img { animation: none; } }

/* --- hero split: fantasy edition's two-column structure (copy | device),
   composited over the concierge edition's full-bleed dusk photo (kept as the
   hero background rather than fantasy's solid dark ground), per Larry's
   explicit direction this session. Desktop: absolutely fills the 100vh hero,
   vertically centered. Mobile: hero grows past 100vh and the grid collapses
   to one column so headline + phone don't fight for a fixed viewport. --- */
.hero-split {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-top: clamp(3rem, 7vw, 5rem);
}
.hero-split-headline {
  color: var(--white); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05;
  font-size: clamp(2.1rem, 4.4vw, 3.75rem);
  max-width: 14ch;
}
.hero-split-headline .word { display: inline-block; opacity: 0; transform: translateY(14px); animation: hero-word-rise 420ms var(--ease-out) forwards; }
.hero-split-headline .word-accent { font-style: italic; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }

/* --- phrase-accent: reusable emphasis device (italic + gold underline),
   same pattern as the hero's word-accent. On-dark contexts may reuse
   --accent directly; on-light contexts (like the thesis h2) use --accent-deep,
   the WCAG-safe text-on-light variant already established for this brand. --- */
.phrase-accent { font-style: italic; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
@keyframes hero-word-rise { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .hero-split-headline .word { opacity: 1; transform: none; animation: none; } }
.hero-split-lede { margin-top: 1.5rem; color: rgba(253,251,246,0.82); font-size: 1.05rem; line-height: 1.55; max-width: 38ch; }
.hero-split-copy .cta-row { margin-top: 1.75rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }

/* --- rolling "No [x]." line under the primary CTA: static prefix/suffix,
   a vertically-cycling word between them (script.js drives the loop). --- */
.hero-split-rolling { margin-top: 1rem; display: flex; align-items: baseline; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.03em; color: rgba(253,251,246,0.62); }
.hero-split-rolling .roll-window { display: inline-block; height: 1.3em; overflow: hidden; vertical-align: bottom; }
.hero-split-rolling .roll-track { display: flex; flex-direction: column; }
.hero-split-rolling .roll-item { height: 1.3em; line-height: 1.3em; color: var(--accent); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .hero-split-rolling .roll-track { transition: none !important; } }

.hero-split-phone { display: flex; flex-direction: column; align-items: center; }

@media (max-width: 900px) {
  .cine-hero { height: auto; min-height: 100vh; overflow: visible; }
  .hero-split { position: relative; grid-template-columns: 1fr; padding-block: clamp(6.5rem, 24vw, 8.5rem) clamp(3rem, 8vw, 4rem); }
  .hero-split-headline, .hero-split-lede { max-width: none; }
  .hero-split-copy .cta-row { align-items: stretch; }
  .hero-split-phone { margin-top: 1rem; }
}

/* --- phone photo: a real device mockup photograph (cropped tight to the
   phone itself), the live chat composited over its screen at the screen's
   exact measured position (this specific cropped image's screen sits at
   left 13.73%, top 6.09%, width 69.23%, height 86.79% of the frame;
   re-measure if the source photo ever changes). --- */
.phone-photo { position: relative; width: clamp(300px, 28.5vw, 390px); aspect-ratio: 598 / 1018; }
.phone-photo-img { width: 100%; height: 100%; object-fit: contain; }
.phone-photo-screen {
  /* re-measured via edge-scan from screen center outward to the bezel,
     verified against a debug overlay; do not eyeball-adjust without
     re-measuring the same way if the source photo ever changes */
  position: absolute; left: 16.22%; top: 6.97%; width: 67.73%; height: 86.25%;
  border-radius: 7% / 4%; overflow: clip;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}

/* --- phone mockup: a close recreation of a real WhatsApp thread (per
   Larry's reference screenshot), filling .phone-photo-screen exactly.
   Sent bubbles use WhatsApp's own green rather than the brand amber, to
   match the reference as closely as asked; flagged as a brand-consistency
   trade-off scoped to this one component, not a site-wide palette change. --- */
.phone-mock {
  position: relative; width: 100%; height: 100%; overflow: clip;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.04) 1px, transparent 1.4px),
    radial-gradient(circle at 62% 38%, rgba(255,255,255,0.035) 1px, transparent 1.4px),
    radial-gradient(circle at 85% 68%, rgba(255,255,255,0.035) 1px, transparent 1.4px),
    radial-gradient(circle at 32% 82%, rgba(255,255,255,0.04) 1px, transparent 1.4px),
    radial-gradient(circle at 75% 92%, rgba(255,255,255,0.03) 1px, transparent 1.4px),
    linear-gradient(180deg, #131b20 0%, #0b1014 100%);
  background-size: 42px 42px, 58px 58px, 50px 50px, 64px 64px, 46px 46px, 100% 100%;
  display: flex; flex-direction: column;
}

.phone-status-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.3rem 0.65rem 0.1rem; color: #fff; }
.phone-status-bar .time { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.01em; }
.phone-status-bar .status-icons { display: flex; align-items: center; gap: 0.25rem; color: #fff; }
.phone-status-bar .battery { width: 16px; height: 9px; border: 1px solid rgba(255,255,255,0.75); border-radius: 2px; padding: 1px; position: relative; display: inline-flex; }
.phone-status-bar .battery::after { content: ""; position: absolute; right: -3px; top: 2.5px; width: 2px; height: 3px; background: rgba(255,255,255,0.75); border-radius: 0 1px 1px 0; }
.phone-status-bar .battery-fill { display: block; height: 100%; width: 75%; background: #fff; border-radius: 0.5px; }

.phone-mock-head { flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.55rem 0.55rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.phone-mock-head .back-chevron { font-size: 1.2rem; font-weight: 600; color: rgba(255,255,255,0.85); line-height: 1; margin-right: -0.1rem; }
.phone-mock-head .dot { width: 28px; height: 28px; border-radius: 50%; background: #0d0b08; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.phone-mock-head .dot img { width: 58%; height: auto; }
.phone-mock-head .who { font-size: 0.82rem; color: var(--white); font-weight: 600; line-height: 1.25; }
.phone-mock-head .who span { display: block; font-size: 0.6rem; font-weight: 400; color: rgba(255,255,255,0.5); }

.phone-mock-thread { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; overflow-y: auto; scrollbar-width: none; padding: 0.5rem 0.55rem; }
.phone-mock-thread::-webkit-scrollbar { display: none; }

.chat-date-divider { align-self: center; margin-bottom: 0.15rem; }
.chat-date-divider span { display: inline-block; padding: 0.2rem 0.6rem; background: rgba(255,255,255,0.08); border-radius: 6px; font-size: 0.5rem; letter-spacing: 0.02em; color: rgba(255,255,255,0.65); font-weight: 500; }

.phone-mock-bubble { max-width: 88%; padding: 0.35rem 0.45rem 0.25rem; border-radius: 8px; display: flex; flex-direction: column; }
.phone-mock-bubble .bubble-text { font-size: 10.5px; line-height: 1.35; }
.phone-mock-bubble .bubble-meta { align-self: flex-end; margin-top: 2px; font-size: 7.5px; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.phone-mock-bubble .bubble-meta .check { flex-shrink: 0; }
.phone-mock-bubble.sent { align-self: flex-end; background: #005c4b; color: #e9edef; border-bottom-right-radius: 2px; font-weight: 400; }
.phone-mock-bubble.sent .bubble-meta { color: rgba(233,237,239,0.62); }
.phone-mock-bubble.sent .check { color: #53bdeb; }
.phone-mock-bubble.received { align-self: flex-start; background: #1f2c34; color: #e9edef; border-bottom-left-radius: 2px; }
.phone-mock-bubble.received .bubble-meta { color: rgba(233,237,239,0.45); }

.phone-input-bar { flex-shrink: 0; display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem 0.55rem; color: rgba(255,255,255,0.6); }
.phone-input-bar .plus { font-size: 1.05rem; line-height: 1; color: rgba(255,255,255,0.6); }
.phone-input-bar .input-pill { flex: 1; height: 20px; background: rgba(255,255,255,0.08); border-radius: 999px; }

/* --- manifesto: centered statement flanked by side-peek photos --- */
.manifesto-cine { position: relative; padding-block: clamp(5rem, 12vw, 9rem); background: var(--off-white); overflow: clip; }
.manifesto-cine-inner { max-width: 780px; margin: 0 auto; text-align: center; padding-inline: var(--gutter); position: relative; z-index: 2; }
.manifesto-cine h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 700; letter-spacing: -0.02em; }
.manifesto-cine p { margin-top: 1.5rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted-deep); line-height: 1.6; }
.manifesto-peek { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(90px, 12vw, 160px); aspect-ratio: 3/4; object-fit: cover; opacity: 0.9; }
.manifesto-peek.left { left: 0; border-radius: 0 16px 16px 0; }
.manifesto-peek.right { right: 0; border-radius: 16px 0 0 16px; }
@media (max-width: 900px) { .manifesto-peek { display: none; } }

/* --- pillar title card: numeral + giant headline over full-bleed photo --- */
.pillar-title-cine { position: relative; height: 90vh; min-height: 560px; display: flex; align-items: center; justify-content: center; overflow: clip; }
.pillar-title-media { position: absolute; inset: 0; }
.pillar-title-media img { width: 100%; height: 100%; object-fit: cover; }
.pillar-title-media::after { content: ""; position: absolute; inset: 0; background: rgba(17,17,17,0.42); }
.pillar-title-inner { position: relative; z-index: 2; text-align: center; }
.pillar-title-inner .num { display: block; color: var(--white); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.5rem); margin-bottom: 0.5rem; }
.pillar-title-inner h2 { color: var(--white); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(2.75rem, 7vw, 5.5rem); }

/* --- pillar body: two-column, sticky scroll-driven card stack on the right --- */
.pillar-body { background: var(--off-white); padding-block: clamp(4rem, 8vw, 6rem); }
.pillar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 980px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar-left { position: sticky; top: calc(var(--nav-h) + 3rem); }
.pillar-left h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 700; letter-spacing: -0.02em; }
.pillar-left p { margin-top: 1.25rem; font-size: 1.05rem; color: var(--muted-deep); line-height: 1.65; max-width: 46ch; }
@media (max-width: 980px) { .pillar-left { position: static; } }
.pillar-left .tight-list { margin-top: 2rem; }

.stack-track { position: relative; }
.stack-sticky { position: sticky; top: calc(var(--nav-h) + 1.5rem); height: 66vh; min-height: 420px; }
.stack-card {
  position: absolute; inset: 0;
  border-radius: 18px; overflow: clip;
  background: linear-gradient(155deg, var(--ink) 0%, var(--ink-soft) 100%);
  display: flex; align-items: flex-end;
  will-change: transform, opacity;
}
/* No transition here on purpose: script.js drives transform/opacity every scroll
   frame, and a CSS transition on top of that fights the scroll and reads as lag
   (see DIRECTION-NOTES.md). The motion already reads smooth from rAF's own
   update rate; this stays direct-manipulation, 1:1 with the scroll position. */
.stack-card-inner { position: relative; z-index: 2; padding: clamp(1.5rem, 3vw, 2.25rem); }
.stack-card-inner h3 { color: var(--white); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; letter-spacing: -0.01em; }
.stack-card-inner p { margin-top: 0.5rem; color: rgba(255,255,255,0.72); font-size: 0.98rem; }
.stack-card-tally { position: absolute; top: 1.5rem; right: 1.75rem; z-index: 2; color: rgba(255,255,255,0.55); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; font-weight: 600; }
.stack-card { box-shadow: 0 24px 48px -8px rgba(23,19,15,0.28); }
.pillar-body .closing-line { margin-top: clamp(2rem, 4vw, 3rem); }

/* --- pillar title parallax (JS-driven, respects reduced motion) --- */
.pillar-title-media img { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .pillar-title-media img { transform: none !important; } }

/* --- final CTA: centered --- */
.cine-final { background: var(--ink); text-align: center; padding-block: clamp(6rem, 13vw, 10rem); }
.cine-final .eyebrow { display: block; margin-bottom: 1rem; }
.cine-final h2 { color: var(--white); font-size: clamp(2.4rem, 5.5vw, 4.2rem); font-weight: 700; letter-spacing: -0.03em; max-width: 18ch; margin-inline: auto; }
.cine-final p { margin-top: 1.5rem; color: rgba(255,255,255,0.68); font-size: 1.1rem; max-width: 52ch; margin-inline: auto; }
.cine-final .cta-row { margin-top: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }

/* ==========================================================================
   Conversation thread — scripted typing sequence (script.js drives reveal)
   ========================================================================== */
.phone-mock-bubble { opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out); }
.phone-mock-bubble.is-in { opacity: 1; transform: translateY(0); }
.typing-indicator { align-self: flex-start; display: none; align-items: center; gap: 4px; padding: 0.5rem 0.65rem; border-radius: 8px; border-bottom-left-radius: 2px; background: #1f2c34; }
.typing-indicator.is-active { display: inline-flex; }
.typing-indicator span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.6); animation: typing-pulse 1s var(--ease-standard) infinite; }
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-pulse { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .phone-mock-bubble { opacity: 1; transform: none; transition: none; }
  .typing-indicator { display: none !important; }
}
.demo-card-section .under-card-note { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); text-align: center; font-family: var(--font-mono); letter-spacing: 0.03em; }

/* ==========================================================================
   Who it's for — address-style cards, hairline-divided, no icon tiles
   ========================================================================== */
.who-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } }
.who-card {
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.75rem, 3vw, 2.25rem);
  border-left: 1px solid var(--line-on-light);
  border-top: 2px solid transparent;
  transition: border-top-color 220ms var(--ease-standard);
  /* the grid stretches all four cards to equal height, but the headings
     wrap to a different number of lines per card; without this, each link
     just sits wherever normal flow lands it after its own heading, so the
     four "See X →" links land at four different heights. Anchoring the
     link to the bottom via margin-top:auto keeps them on one shared line
     regardless of heading length. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.who-grid .who-card:first-child { border-left: none; }
.who-card:hover, .who-card:focus-within { border-top-color: var(--accent); }
.who-card .eyebrow { display: block; margin-bottom: 1rem; }
.who-card p { font-size: clamp(1.05rem, 1.6vw, 1.2rem); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.35; }
.who-card a { display: inline-flex; align-items: center; min-height: 24px; margin-top: auto; padding-top: 1.1rem; font-size: 0.85rem; font-weight: 600; color: var(--accent-deep); }
.who-card a:hover { color: var(--accent); }
.on-paper .who-card a:hover { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .who-grid .who-card { border-left: none; border-top: 1px solid var(--line-on-light); }
  .who-grid .who-card:first-child { border-top: none; }
  .who-card:hover, .who-card:focus-within { border-top-color: var(--line-on-light); }
  .who-card:hover .eyebrow, .who-card:focus-within .eyebrow { color: var(--accent); }
}

/* ==========================================================================
   Customers — quiet roster, not a testimonial widget (no quotes on file)
   ========================================================================== */
.customers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 780px) { .customers-grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.customer-card { border-top: 1px solid var(--line-on-dark); padding-top: 1.75rem; }
.customer-card img { height: 33px; width: auto; opacity: 0.75; filter: grayscale(1) brightness(1.6); margin-bottom: 1.5rem; }
.customer-card .name { color: var(--white); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.customer-card .role { margin-top: 0.35rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; color: rgba(253,251,246,0.6); }