/* McAuley Law LLC - site styles
   Version 1.3.0 (2026-10-09)
   Changelog: 1.3.0 mobile sideways scroll fixed: the hero watermark is a clipping window that ends at the
                    viewport edge (it hung 20vw past it and drifted 120px further), the hero copy's lift toward
                    the viewer is 100px below 960px wide (260px made it wider than a phone screen);
                    .mono replaces the inline style attributes (CSP); 320px-safe grid minimums
              1.2.0 hero glass panel for legibility; parallax travel 33% and 1.45x zoom on pull-in
              1.1.1 header = brand + call button only
              1.1.0 courthouse backdrop travels the whole page (--sp), lighter scrim, wider scene gaps
              1.0.1 nav split wide/mobile, svh hero
              1.0.0 initial cinematic single-page build.
   Tokens come from firm.json brand.colors (kept in sync by hand). */

/* ---------- fonts (self-hosted, latin subset, variable) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
  --navy: #000878;
  --ink: #05083a;
  --gold: #d0a000;
  --gold-soft: #e8d088;
  --limestone: #d9d4c7;
  --paper: #f6f3ec;
  --stone: #8a8578;
  --stone-dark: #4d4a42;
  --text: #171a2e;
  --text-on-dark: #f3f1ea;
  --red-bt: #c8102e;

  --display: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --header-h: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 62ch;
  --radius: 4px;
  --shadow-slab: 0 30px 60px -20px rgba(5, 8, 58, 0.45), 0 2px 0 rgba(255, 255, 255, 0.6) inset;

  /* motion progress variables, driven by site.js; defaults = final state */
  --scroll: 0;      /* page scroll in px */
  --sp: 0;          /* page progress 0..1 (courthouse parallax travel) */
  --hp: 0;          /* hero progress 0..1 */
  --p: 1;           /* per-scene entry progress 0..1 */
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.55;
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.08; margin: 0 0 0.5em; letter-spacing: 0.005em; }
h1 { font-size: clamp(2.2rem, 1.4rem + 4.2vw, 4.6rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
ul { padding-left: 1.2em; }
address { font-style: normal; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--gold); color: var(--ink); padding: 10px 16px; font-weight: 600;
  border-radius: var(--radius);
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- backdrop: the courthouse, fixed behind everything ---------- */
.backdrop {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: var(--ink);
}
/* Old-Courthouse.jpg is the parallax background of the whole page. The image is taller than
   the viewport (135%) and travels upward as the page scrolls (--sp = page progress 0..1), so
   the dome, the facade and finally the steps pass behind the content. It stays visible between
   scenes; the scrim only takes the edge off so the light copy in the hero stays readable. */
.backdrop img {
  width: 100%; height: 150%; object-fit: cover; object-position: 50% 30%;
  transform: translate3d(0, calc(var(--sp) * -33%), 0) scale(calc(1 + var(--hp) * 0.45));
  transform-origin: 50% 28%;
  will-change: transform;
}
.backdrop .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 8, 58, 0.50) 0%, rgba(5, 8, 58, 0.12) 40%, rgba(5, 8, 58, 0.18) 80%, rgba(5, 8, 58, 0.55) 100%);
}
.backdrop .scrim::after {
  content: ""; position: absolute; inset: 0;
  background: var(--navy);
  opacity: calc(var(--hp) * 0.22);
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: 16px;
  padding: 0 var(--gutter);
  color: var(--text-on-dark);
  background: linear-gradient(180deg, rgba(5, 8, 58, 0.85), rgba(5, 8, 58, 0.55));
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1px solid rgba(232, 208, 136, 0.18);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; margin-right: auto; }
.brand svg { height: 40px; width: auto; }
.mono { color: var(--text-on-dark); }
.brand-name {
  font-family: var(--display); font-weight: 600; font-size: 1.35rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-on-dark); line-height: 1;
}
.brand-name small { display: block; font-size: 0.55em; letter-spacing: 0.32em; color: var(--gold-soft); margin-top: 3px; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(10px, 2vw, 28px); }
.site-nav a { text-decoration: none; font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 10px 2px; display: inline-block; opacity: 0.92; }
.site-nav a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--gold); }
.menu { display: none; }
.menu > summary { list-style: none; cursor: pointer; font-weight: 600; padding: 10px 6px; min-height: 44px; display: none; align-items: center; }
.menu > summary::-webkit-details-marker { display: none; }
.btn-call {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  background: var(--gold); color: var(--ink);
  font-weight: 700; letter-spacing: 0.02em; text-decoration: none; border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 20px -8px rgba(208, 160, 0, 0.8);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn-call:hover { background: var(--gold-soft); transform: translateY(-1px); }
.btn-call svg { width: 18px; height: 18px; }

@media (max-width: 760px) {
  .brand-name { font-size: 1.05rem; }
  .brand-name small { display: none; }
  .site-nav { position: relative; }
  .site-nav .nav-wide { display: none; }
  .menu { display: block; }
  .menu > summary { display: inline-flex; }
  .menu[open] > summary { color: var(--gold-soft); }
  .menu ul {
    position: absolute; right: 0; top: calc(100% + 6px);
    flex-direction: column; gap: 0; min-width: 220px;
    background: var(--ink); border: 1px solid rgba(232, 208, 136, 0.25); border-radius: var(--radius);
    padding: 6px 0; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
  }
  .menu ul a { display: block; padding: 12px 18px; }
  .btn-call span.long { display: none; }
}
@media (min-width: 761px) { .btn-call span.short { display: none; } }

/* ---------- stage and scenes ---------- */
.stage { position: relative; z-index: 1; perspective: 1400px; perspective-origin: 50% 30%; }
.scene { position: relative; }
.scene-inner {
  width: min(100% - 2 * var(--gutter), 1180px);
  margin-inline: auto;
}

/* the slab: a limestone panel that rises out of depth as you reach it */
.slab {
  background: var(--paper);
  color: var(--text);
  border-radius: 6px;
  box-shadow: var(--shadow-slab);
  padding: clamp(32px, 6vw, 88px) clamp(20px, 5vw, 80px);
  transform-style: preserve-3d;
  transform:
    translate3d(0, calc((1 - var(--p)) * 90px), calc((1 - var(--p)) * -320px))
    rotateX(calc((1 - var(--p)) * 7deg));
  opacity: calc(0.15 + var(--p) * 0.85);
  will-change: transform, opacity;
}
.slab::before {
  /* limestone edge */
  content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  background: linear-gradient(180deg, rgba(217, 212, 199, 0.35), transparent 22%, transparent 78%, rgba(138, 133, 120, 0.18));
}
.slab.dark { background: var(--ink); color: var(--text-on-dark); }
.slab.navy { background: linear-gradient(160deg, var(--navy), var(--ink) 70%); color: var(--text-on-dark); }
.slab.dark::before, .slab.navy::before { background: linear-gradient(180deg, rgba(232, 208, 136, 0.12), transparent 22%); }

/* generous gaps so the courthouse shows between the slabs */
.scene + .scene { margin-top: clamp(96px, 22vh, 240px); }
.scene:last-of-type { margin-bottom: clamp(96px, 22vh, 240px); }

.eyebrow {
  font-family: var(--body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--navy); margin-bottom: 1.2em;
}
.dark .eyebrow, .navy .eyebrow, .hero .eyebrow { color: var(--gold-soft); }
.lede { font-size: 1.2em; max-width: var(--measure); }

/* ---------- hero ---------- */
.hero-track { height: 170vh; height: 170svh; min-height: 900px; }
.hero {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px;
  display: grid; align-items: center;
  color: var(--text-on-dark);
  transform-style: preserve-3d;
}
.hero-stage {
  position: relative;
  padding-top: var(--header-h);
  transform-style: preserve-3d;
}
.hero-copy {
  max-width: 820px;
  padding: clamp(22px, 3.5vw, 44px) clamp(22px, 3.5vw, 48px);
  background: rgba(5, 8, 58, 0.62);
  border: 1px solid rgba(232, 208, 136, 0.28);
  border-radius: 8px;
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
  /* --lift = how far the copy comes toward the viewer (perspective 1400px on .stage). 260px enlarges it
     ~23%; below 960px the copy spans the column, so that pushed it past the screen edge. 100px (~8%) fits
     inside the gutter at every width. */
  --lift: 260px;
  transform: translate3d(0, calc(var(--hp) * -140px), calc(var(--hp) * var(--lift)));
  opacity: calc(1 - var(--hp) * 1.6);
  will-change: transform, opacity;
}
@media (max-width: 959px) { .hero-copy { --lift: 100px; } }
.hero h1 { text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); font-size: clamp(2rem, 1.3rem + 3.4vw, 3.9rem); }
.hero .tagline { font-family: var(--display); font-style: italic; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); color: var(--gold-soft); margin-bottom: 1.6em; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-ghost {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
  border: 1px solid rgba(243, 241, 234, 0.6); border-radius: 999px; color: var(--text-on-dark);
  text-decoration: none; font-weight: 600;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.btn-ghost:hover { border-color: var(--gold-soft); background: rgba(232, 208, 136, 0.1); }
.hero .btn-call { font-size: 1.05rem; padding: 12px 24px; }

/* the monogram watermark floats at a different depth from the copy.
   It bleeds off the right edge of the screen. That crop used to come from the monogram hanging
   past the viewport (20vw on phones, +120px of drift), which widened the page on phones and let
   it scroll sideways. Now .hero-mark is a clipping window whose right edge stops at the viewport
   edge (right: -gutter); the monogram (.mono) drifts, turns and recedes inside it, rendered with
   the window's own perspective. Same crop, nothing past the edge. */
.hero-mark {
  --mark: clamp(220px, 34vw, 520px);   /* monogram size */
  --bleed: clamp(0px, 2vw, 40px);      /* how far the monogram hangs past the content column */
  --pad: calc(var(--mark) * 0.25);     /* room for the drop shadow and the turn, left/top/bottom */
  position: absolute; right: calc(-1 * var(--gutter)); top: 50%;
  width: calc(var(--pad) + var(--mark) + var(--gutter) - var(--bleed));
  height: calc(var(--mark) + 2 * var(--pad));
  overflow: hidden;
  perspective: 1400px; perspective-origin: 0% 50%;
  opacity: 0.16;
  transform: translateY(calc(-50% + var(--hp) * 60px));
  pointer-events: none;
}
.hero-mark .mono {
  position: absolute; left: var(--pad); top: var(--pad);
  width: var(--mark); height: var(--mark);
  transform:
    translate3d(calc(var(--hp) * 120px), 0, calc(var(--hp) * -400px))
    rotateY(calc(-14deg + var(--hp) * 30deg));
  will-change: transform;
}
.hero-mark svg { width: 100%; height: 100%; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4)); }
@media (max-width: 760px) {
  .hero-track { height: 140vh; height: 140svh; min-height: 0; }
  .hero { min-height: 0; }
  .hero-mark { --mark: 60vw; --bleed: 20vw; top: 22%; opacity: 0.12; }
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold-soft);
  opacity: calc(1 - var(--hp) * 4);
}
.scroll-cue::after {
  content: ""; display: block; width: 1px; height: 36px; margin: 8px auto 0;
  background: linear-gradient(var(--gold-soft), transparent);
}

/* ---------- practice areas ---------- */
.practice-grid {
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: 2.5rem;
}
.practice-item { border-top: 2px solid var(--limestone); padding-top: 1.1rem; }
.practice-item.featured { border-top-color: var(--gold); }
.practice-item h3 { margin-bottom: 0.35em; }
.practice-item p { margin: 0; color: var(--stone-dark); }
.practice-item .num { font-family: var(--display); font-size: 0.95rem; color: var(--stone); letter-spacing: 0.1em; display: block; margin-bottom: 0.6em; }

/* ---------- Bloomingtitle scene ---------- */
.title-scene { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: 1.1fr 1fr; align-items: center; }
.title-scene .script { width: min(100%, 520px); }
.title-scene .script img { width: 100%; height: auto; filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5)); }
.title-scene .facts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 10px; }
.title-scene .facts li { display: flex; gap: 12px; align-items: baseline; }
.title-scene .facts strong { color: var(--gold-soft); min-width: 7.5em; font-weight: 600; letter-spacing: 0.04em; font-size: 0.85rem; text-transform: uppercase; }
.title-scene .underwriter { display: flex; align-items: center; gap: 12px; margin-top: 1.6rem; opacity: 0.9; font-size: 0.9rem; }
.title-scene .underwriter img { height: 22px; width: auto; background: #fff; padding: 4px 8px; border-radius: 3px; }
@media (max-width: 860px) { .title-scene { grid-template-columns: 1fr; } .title-scene .script { order: -1; } }

/* ---------- attorney ---------- */
.attorney { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: minmax(220px, 380px) 1fr; align-items: start; }
.attorney figure { margin: 0; position: relative; transform-style: preserve-3d; }
.attorney figure img {
  width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 30px 60px -24px rgba(5, 8, 58, 0.6);
  transform: translate3d(0, calc((1 - var(--p)) * 40px), calc(var(--p) * 40px));
}
.attorney figure::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border: 1px solid var(--gold); border-radius: 4px; opacity: 0.8;
}
.attorney .role { font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.8rem; color: var(--navy); margin-bottom: 0.4em; }
.attorney h2 { margin-bottom: 0.3em; }
.attorney .creds { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 4px; color: var(--stone-dark); }
.attorney .creds li::before { content: "\2014\00a0"; color: var(--gold); }
details.admissions { margin-top: 1.4rem; border-top: 1px solid var(--limestone); border-bottom: 1px solid var(--limestone); }
details.admissions summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
details.admissions summary::-webkit-details-marker { display: none; }
details.admissions summary::after { content: "+"; font-family: var(--display); font-size: 1.6rem; color: var(--gold); line-height: 1; }
details.admissions[open] summary::after { content: "\2212"; }
details.admissions .cols { display: grid; gap: 20px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); padding: 0 0 18px; }
details.admissions h3 { font-family: var(--body); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-bottom: 0.6em; }
details.admissions ul { margin: 0; padding-left: 1.1em; color: var(--stone-dark); }
.team { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--limestone); display: flex; flex-wrap: wrap; gap: 8px 32px; }
.team div { color: var(--stone-dark); }
.team strong { display: block; color: var(--text); font-weight: 600; }
@media (max-width: 760px) { .attorney { grid-template-columns: 1fr; } .attorney figure { max-width: 320px; } }

/* ---------- trust strip ---------- */
.trust { text-align: center; }
.trust .badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(20px, 4vw, 56px); margin: 1.6rem 0 2rem; }
.trust .badges img { height: 64px; width: auto; }
.trust .badges img.wide { height: 44px; }
.trust .badges img.tiny { height: 28px; }
.trust .lists { display: grid; gap: 24px 48px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); text-align: left; max-width: 900px; margin-inline: auto; }
.trust .lists h3 { font-family: var(--body); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }
.trust .lists ul { margin: 0; padding-left: 1.1em; color: var(--stone-dark); }

/* ---------- location and contact ---------- */
.location { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: 1fr 1fr; align-items: start; }
.location address { font-size: 1.15em; line-height: 1.5; }
.location .links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.2rem; }
.btn-outline {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
  border: 1.5px solid var(--navy); color: var(--navy); border-radius: 999px; text-decoration: none; font-weight: 600;
}
.btn-outline:hover { background: var(--navy); color: #fff; }
.location .note { color: var(--stone-dark); }
@media (max-width: 760px) { .location { grid-template-columns: 1fr; } }

.contact-grid { display: grid; gap: 32px 48px; grid-template-columns: 1.2fr 1fr; align-items: end; }
.contact .big { font-family: var(--display); font-size: clamp(2rem, 1.2rem + 3.6vw, 4rem); font-weight: 600; text-decoration: none; line-height: 1.1; display: inline-block; }
.contact .big:hover { color: var(--gold-soft); }
.contact .lines { display: grid; gap: 10px; }
.contact .lines a { text-decoration-color: rgba(232, 208, 136, 0.5); }
.contact .lines .lbl { display: block; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-soft); }
.contact .note { font-size: 0.92rem; opacity: 0.85; max-width: 46ch; }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer {
  position: relative; z-index: 1;
  background: var(--ink); color: var(--text-on-dark);
  padding: clamp(40px, 6vw, 72px) var(--gutter) 40px;
  border-top: 1px solid rgba(232, 208, 136, 0.2);
  font-size: 0.95rem;
}
.site-footer .inner { width: min(100%, 1180px); margin-inline: auto; display: grid; gap: 40px 64px; grid-template-columns: 1.2fr 1fr; }
.site-footer h2 { font-size: 1.5rem; color: var(--gold-soft); }
.site-footer .policy p { opacity: 0.85; max-width: 70ch; }
.site-footer .colophon { grid-column: 1 / -1; border-top: 1px solid rgba(243, 241, 234, 0.15); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; opacity: 0.8; font-size: 0.88rem; }
.site-footer .disclaimer { font-style: italic; opacity: 0.9; max-width: 70ch; }
.site-footer a { text-decoration-color: rgba(232, 208, 136, 0.5); }
.site-footer .fb { display: inline-flex; gap: 8px; align-items: center; }
.site-footer .fb svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .site-footer .inner { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; color: var(--text-on-dark); padding: var(--gutter); }

/* ---------- motion gating ----------
   Everything above renders in its FINAL state by default (--p: 1, --hp: 0),
   so the page is complete with JS off. site.js sets html.js and drives the
   variables only when the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .backdrop img, .slab, .hero-copy, .hero-mark, .hero-mark .mono, .attorney figure img { transform: none !important; opacity: 1 !important; }
  .hero-mark { margin-top: calc(-1 * var(--pad)); } /* window is taller than the monogram; keep the old resting spot */
  .backdrop img { height: 100%; }
  .backdrop .scrim::after { opacity: 0.15; }
  .hero-track { height: auto; min-height: 0; }
  .hero { position: relative; height: auto; min-height: 0; padding: 18vh 0 12vh; }
  .scroll-cue { display: none; }
  * { transition: none !important; }
}
html.no-js .backdrop img { height: 100%; }
html.no-js .hero-track { height: auto; }
html.no-js .hero { position: relative; height: auto; padding: 18vh 0 12vh; }
html.no-js .scroll-cue { display: none; }