/* Revive Your Roof — design system
   Palette is lifted straight from the logo vector, nothing eyeballed:
   #103e58 #0c2136 #0e3047 #859ca6 #838d95 #f9f9f4 #467233 #294a35 #a0b694
   Every colour below goes through a token. No inline hex anywhere in the HTML. */

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 500 800;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --navy-900: #0c2136;
  --navy-800: #0e3047;
  --navy: #103e58;
  --slate: #859ca6;
  --cream: #f9f9f4;
  --cream-2: #f1f1ea;
  --green: #467233;
  --green-dark: #365726;
  --green-deep: #294a35;
  --sage: #a0b694;
  --white: #fff;

  /* derived, contrast-checked against --cream (all >= 4.5:1) */
  --ink: var(--navy-900);
  --ink-muted: #4e5d68;
  --rule: #d9dcd2;
  --rule-dark: #1d3d52;

  --ff-head: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --wrap: 1180px;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --pad-y: clamp(3.25rem, 7vw, 5.5rem);
  --r: 14px;
  --r-sm: 9px;
  --shadow: 0 1px 2px rgba(12, 33, 54, .06), 0 8px 28px rgba(12, 33, 54, .09);
  --shadow-lg: 0 2px 6px rgba(12, 33, 54, .08), 0 22px 60px rgba(12, 33, 54, .16);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--green-dark); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--ff-head);
  line-height: 1.08;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.05rem, 5.2vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.4rem, 760px); margin-inline: auto; }
.section { padding-block: var(--pad-y); }
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.5rem); }
.section--navy { background: var(--navy-900); color: var(--cream); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy a { color: var(--sage); }
.section--alt { background: var(--cream-2); }
.section--rule { border-top: 1px solid var(--rule); }

.eyebrow {
  font-family: var(--ff-head);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--green); margin: 0 0 .85rem;
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.section--navy .eyebrow { color: var(--sage); }
.section--navy .eyebrow::after { background: var(--rule-dark); }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: var(--ink-muted); }
.section--navy .lede { color: var(--slate); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--ff-head); font-weight: 700; font-size: 1.02rem;
  line-height: 1.15; text-align: center; text-decoration: none;
  padding: 1rem 1.6rem; min-height: 54px; border-radius: var(--r-sm);
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--green); color: var(--white); }
.btn--primary:hover { background: var(--green-dark); color: var(--white); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.btn--onnavy { background: transparent; color: var(--white); border-color: var(--slate); }
.btn--onnavy:hover { background: var(--white); color: var(--navy-900); border-color: var(--white); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* ---------- top bar + header ---------- */
.topbar {
  background: var(--navy-900); color: var(--slate);
  font-size: .84rem; padding: .5rem 0;
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; justify-content: space-between; }
.topbar a { color: var(--cream); text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--sage); text-decoration: underline; }
.topbar__note { display: flex; align-items: center; gap: .45rem; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cream); border-bottom: 1px solid var(--rule);
}
.header .wrap { display: flex; align-items: center; gap: 1.2rem; padding-block: .7rem; }
.header__logo { flex: 0 0 auto; }
.header__logo img { width: 152px; }
.header nav { margin-left: auto; }
.header nav ul { display: flex; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.header nav a {
  font-family: var(--ff-head); font-weight: 600; font-size: .95rem;
  color: var(--navy-900); text-decoration: none; white-space: nowrap;
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
.header nav a:hover, .header nav a[aria-current='page'] {
  color: var(--green-dark); border-bottom-color: var(--green);
}
.header__cta { flex: 0 0 auto; }
.header__cta .btn { padding: .8rem 1.2rem; min-height: 48px; font-size: .95rem; }
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .header nav { display: none; }
  .header nav.is-open {
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); border-bottom: 1px solid var(--rule);
    box-shadow: var(--shadow); padding: .5rem 1.2rem 1.1rem;
  }
  .header nav.is-open ul { flex-direction: column; gap: 0; }
  .header nav.is-open a { display: block; padding: .95rem 0; border-bottom: 1px solid var(--rule); }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 48px; height: 48px; border-radius: var(--r-sm);
    background: transparent; border: 2px solid var(--navy); color: var(--navy);
    cursor: pointer;
  }
  .header__cta { display: none; }
}

/* ---------- hero ---------- */
.hero { background: var(--navy-900); color: var(--cream); position: relative; overflow: clip; }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
  padding-block: clamp(2.25rem, 5vw, 4rem);
}
.hero h1 { color: var(--white); margin-bottom: .55rem; }
.hero__sub { color: var(--slate); font-size: clamp(1.02rem, 1.6vw, 1.16rem); max-width: 46ch; }
.hero__proof { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.5rem; padding: 0; list-style: none; }
.hero__proof li {
  display: flex; align-items: center; gap: .45rem;
  font-size: .86rem; font-weight: 600; color: var(--cream);
  background: rgba(160, 182, 148, .13); border: 1px solid var(--rule-dark);
  border-radius: 999px; padding: .38rem .8rem;
}
.hero__media { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); max-width: 420px; margin-left: auto; }
.hero__media video, .hero__media img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  max-height: 560px; /* keep the copy column from being dwarfed */
}
.hero__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(12, 33, 54, .88), rgba(12, 33, 54, 0));
  color: var(--cream); font-size: .82rem; padding: 2.2rem .95rem .8rem;
}

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__media { max-width: 420px; margin-inline: auto; order: -1; }
  .hero__media video, .hero__media img { aspect-ratio: 4 / 5; }
}

/* ---------- lead form ---------- */
.leadform {
  background: var(--cream); color: var(--ink);
  border-radius: var(--r); padding: clamp(1.1rem, 2.4vw, 1.5rem);
  box-shadow: var(--shadow-lg); border-top: 5px solid var(--green);
}
.leadform h2, .leadform h3 { font-size: 1.22rem; margin-bottom: .3rem; color: var(--navy-900); }
.leadform__note { font-size: .85rem; color: var(--ink-muted); margin-bottom: .9rem; }
.field { margin-bottom: .7rem; }
.field label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .28rem; color: var(--navy-800); }
.field .req { color: var(--green-dark); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .7rem .8rem;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--white); border: 1.5px solid #b9c0b6; border-radius: var(--r-sm);
}
.field textarea { min-height: 86px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); outline: 3px solid rgba(70, 114, 51, .28); outline-offset: 0;
}
.field .hint { font-size: .78rem; color: var(--ink-muted); margin-top: .25rem; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
@media (max-width: 460px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.form-error { color: #8a2b16; font-size: .84rem; margin-top: .3rem; font-weight: 600; }
.leadform__fineprint { font-size: .78rem; color: var(--ink-muted); margin-top: .75rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- trust bar ---------- */
.trustbar { background: var(--cream-2); border-block: 1px solid var(--rule); padding: 1.1rem 0; }
.trustbar ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem;
  list-style: none; margin: 0; padding: 0;
}
.trustbar li {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--ff-head); font-weight: 600; font-size: .9rem; color: var(--navy-800);
}
.trustbar svg { flex: 0 0 auto; color: var(--green); }

/* ---------- cards ---------- */
.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 215px), 1fr)); }

.card {
  background: var(--cream); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem;
}
.section--alt .card { background: var(--cream); }
.card h3 { margin-bottom: .15rem; }
.card p { font-size: .96rem; color: var(--ink-muted); }
.card__link { margin-top: auto; padding-top: .7rem; font-weight: 600; font-family: var(--ff-head); font-size: .94rem; }
.card--link:hover { border-color: var(--green); }
.card figure { margin: -1.4rem -1.4rem .9rem; }
.card figure img { border-radius: var(--r) var(--r) 0 0; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

/* numbered process steps */
.steps { counter-reset: step; display: grid; gap: 1.1rem; padding: 0; list-style: none; margin: 0; }
.steps li {
  display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 1rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before {
  counter-increment: step; content: '0' counter(step);
  font-family: var(--ff-head); font-weight: 800; font-size: 1.5rem;
  color: var(--green); line-height: 1;
}
.section--navy .steps li { border-color: var(--rule-dark); }
.section--navy .steps li::before { color: var(--sage); }
.steps h3 { margin-bottom: .2rem; font-size: 1.12rem; }
.steps p { font-size: .96rem; color: var(--ink-muted); }
.section--navy .steps p { color: var(--slate); }
.steps__meta { font-size: .82rem; font-weight: 600; color: var(--green-dark); }
.section--navy .steps__meta { color: var(--sage); }

/* ---------- before / after ---------- */
.ba { display: grid; gap: 1rem; }
.ba__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .7rem; }
.ba figure { margin: 0; }
.ba img { border-radius: var(--r-sm); width: 100%; }
.ba figcaption { font-size: .88rem; color: var(--ink-muted); margin-top: .45rem; }
.ba__job { font-family: var(--ff-head); font-weight: 700; font-size: 1.05rem; color: var(--navy-900); margin-bottom: .5rem; }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: .8rem; }
.shots figure { margin: 0; }
.shots img { border-radius: var(--r-sm); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.shots figcaption { font-size: .84rem; color: var(--ink-muted); margin-top: .4rem; }

/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1rem; }
.review {
  background: var(--cream); border: 1px solid var(--rule); border-left: 4px solid var(--green);
  border-radius: var(--r-sm); padding: 1.2rem; display: flex; flex-direction: column; gap: .6rem;
}
.section--navy .review { background: var(--navy-800); border-color: var(--rule-dark); border-left-color: var(--sage); }
.review p { font-size: .98rem; margin: 0; }
.section--navy .review p { color: var(--cream); }
.review__by { font-size: .85rem; color: var(--ink-muted); margin-top: auto; }
.section--navy .review__by { color: var(--slate); }
.review__by strong { color: var(--navy-900); display: block; font-size: .92rem; }
.section--navy .review__by strong { color: var(--white); }
.stars { color: var(--green); letter-spacing: .1em; font-size: .95rem; }
.section--navy .stars { color: var(--sage); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.2rem 1.15rem 0; position: relative;
  font-family: var(--ff-head); font-weight: 600; font-size: 1.06rem; color: var(--navy-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--green); line-height: 1;
}
.faq details[open] summary::after { content: '\2013'; }
.faq details > div { padding-bottom: 1.2rem; color: var(--ink-muted); }
.faq details > div p:not(:last-child) { margin-bottom: .8rem; }

/* ---------- prose (about, blog, city copy) ---------- */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 1.2rem; }
.prose li { margin-bottom: .5rem; }
.prose blockquote {
  margin: 1.6rem 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 4px solid var(--green); color: var(--navy-800);
  font-size: 1.1rem;
}
.prose figure { margin: 1.8rem 0; }
.prose figure img { border-radius: var(--r-sm); }
.prose figcaption { font-size: .86rem; color: var(--ink-muted); margin-top: .5rem; }

/* ---------- misc blocks ---------- */
.split {
  /* 400px floor so this collapses to one column on tablets rather than
     squeezing a lead form into a 350px track */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(1.4rem, 3.5vw, 3rem); align-items: center;
}
.split img { border-radius: var(--r); }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.checks li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .65rem; align-items: start; }
.checks li::before {
  content: '\2713'; color: var(--green); font-weight: 700; font-size: 1.05rem; line-height: 1.5;
}
.section--navy .checks li::before { color: var(--sage); }

.callout {
  background: var(--cream-2); border: 1px solid var(--rule); border-left: 4px solid var(--green);
  border-radius: var(--r-sm); padding: 1.1rem 1.3rem; margin: 1.6rem 0;
}
.callout p { font-size: .97rem; }
.callout strong { color: var(--navy-900); }

.pricepoint { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; margin: 1.6rem 0 0; }
.pricepoint div { background: var(--cream); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 1.1rem; }
.section--navy .pricepoint div { background: var(--navy-800); border-color: var(--rule-dark); }
.pricepoint dt { font-family: var(--ff-head); font-weight: 700; font-size: 1.25rem; color: var(--green-dark); margin-bottom: .2rem; }
.section--navy .pricepoint dt { color: var(--sage); }
.pricepoint dd { margin: 0; font-size: .92rem; color: var(--ink-muted); }
.section--navy .pricepoint dd { color: var(--slate); }

.arealist { columns: 3 190px; column-gap: 1.6rem; list-style: none; padding: 0; margin: 0; }
.arealist li { break-inside: avoid; padding: .3rem 0; font-size: .96rem; }

.crumbs { font-size: .84rem; color: var(--ink-muted); padding-block: .9rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.crumbs li::after { content: '\203A'; margin-left: .35rem; color: var(--slate); }
.crumbs li:last-child::after { content: ''; }

.cta-band { background: var(--green-deep); color: var(--white); }
.cta-band h2 { color: var(--white); }
.cta-band p { color: #d7e2cf; }
.cta-band .btn--primary { background: var(--white); color: var(--green-deep); }
.cta-band .btn--primary:hover { background: var(--cream); color: var(--green-deep); }
.cta-band .btn--onnavy { border-color: #9fb894; }

.postmeta { font-size: .86rem; color: var(--ink-muted); margin-bottom: 1.4rem; }
.postlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.postlist li { border-bottom: 1px solid var(--rule); padding-bottom: 1.1rem; }
.postlist h3 { margin-bottom: .3rem; }
.postlist a { text-decoration: none; }
.postlist a:hover h3 { color: var(--green-dark); }

/* ---------- footer ---------- */
.footer { background: var(--navy-900); color: var(--slate); padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; font-size: .93rem; }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 2rem; }
.footer h3 {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--white); margin-bottom: .9rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.footer a { color: var(--cream); text-decoration: none; }
.footer a:hover { color: var(--sage); text-decoration: underline; }
.footer__logo img { width: 190px; margin-bottom: 1rem; }
.footer__bottom {
  margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-dark);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .85rem;
}

/* ---------- sticky mobile call bar ---------- */
.callbar { display: none; }
@media (max-width: 860px) {
  .callbar {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 60;
    background: var(--navy-900); border-top: 1px solid var(--rule-dark);
    padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); gap: .5rem;
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 52px; border-radius: var(--r-sm); text-decoration: none;
    font-family: var(--ff-head); font-weight: 700; font-size: .98rem;
  }
  .callbar__call { background: var(--green); color: var(--white); }
  .callbar__quote { background: transparent; color: var(--white); border: 2px solid var(--slate); }
  body { padding-bottom: 76px; }
}

/* ---------- storm banner ---------- */
.stormbar {
  background: var(--green-deep); color: var(--white);
  font-size: .9rem; padding: .6rem 0; text-align: center;
}
.stormbar a { color: var(--white); font-weight: 700; }
.stormbar p { margin: 0; }

@media print { .header, .footer, .callbar, .topbar { display: none; } }

/* ------------------------------------------------------------ scroll film
   Hidden by default; film.js un-hides it only on desktop with motion
   allowed and a decent connection. Everyone else gets the standard hero. */
#film { display: none; position: relative; background: var(--navy-deep); }
#film[data-active] { display: block; }
#film:not([hidden]) { display: block; }
.film__viewport { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.film__viewport canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film__veil {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: var(--navy-deep); transition: opacity .6s ease; color: var(--sage);
  font-family: var(--ff-head); letter-spacing: .12em; text-transform: uppercase; font-size: .82rem;
}
.film__veil.is-done { opacity: 0; pointer-events: none; }
.film__beat {
  position: absolute; z-index: 3; max-width: 560px; visibility: hidden; opacity: 0;
  will-change: transform, opacity;
  padding: 1.1rem 1.5rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(12,33,54,.62), rgba(12,33,54,.18));
  backdrop-filter: blur(3px);
}
.film__beat h2, .film__beat p.h {
  font-family: var(--ff-head); font-weight: 800; color: var(--white);
  font-size: clamp(2rem, 4.6vw, 4.2rem); line-height: 1.04; margin: 0 0 .5rem;
  text-shadow: 0 2px 24px rgba(12,33,54,.55);
}
.film__beat .sub {
  color: #fff; font-size: clamp(1rem, 1.4vw, 1.25rem); line-height: 1.45;
  text-shadow: 0 1px 3px rgba(12,33,54,.9), 0 2px 18px rgba(12,33,54,.7); margin: 0;
}
.film__beat--tl { top: 19vh; left: 6vw; }
.film__beat--tr { top: 19vh; right: 6vw; text-align: right; }
.film__beat--bl { bottom: 16vh; left: 6vw; }
.film__beat--br { bottom: 16vh; right: 6vw; text-align: right; }
.film__beat--c  { top: 46%; left: 50%; transform: translate(-50%,-50%); text-align: center; width: min(92vw, 760px); }
.film__beat--c .btn-row { justify-content: center; margin-top: 1rem; }
.film__beat .btn { margin-top: 1.1rem; }
.film__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,33,54,.35) 0%, rgba(12,33,54,0) 30%, rgba(12,33,54,0) 62%, rgba(12,33,54,.45) 100%);
}
.film__tour {
  position: absolute; z-index: 6; bottom: 26px; right: 26px; display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(249,249,244,.12); color: var(--white); border: 1px solid rgba(249,249,244,.35);
  backdrop-filter: blur(6px); border-radius: 999px; padding: .6rem 1.1rem; cursor: pointer;
  font-family: var(--ff-head); font-size: .85rem; letter-spacing: .04em; transition: opacity .3s ease;
}
.film__tour:hover { background: rgba(249,249,244,.22); }
.film__rail {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(249,249,244,.15);
}