/* ============================================================
   Alpha Media — "AM" brand system (carbon / Ranger Red / chrome)
   Carbon ground with warm ember glows, bone ink, Ranger Red as
   the one shot of color, chrome + dusk gradients for metal and
   sky. Montserrat for every word on the page — the Norican script
   lives only inside the logo files. Built, not decorated.
   ============================================================ */

:root {
  --carbon: #0b0b0c;                /* page canvas — primary ground */
  --coal: #121214;                  /* deep ground / alt-section bg */
  --coal-2: #17181b;                /* card & component surfaces */
  --bone: #f2efe9;                  /* primary ink on carbon */
  --smoke: #8b9097;                 /* long-form body text */
  --smoke-dim: #565b61;             /* secondary / faint text */
  --iron: #232528;                  /* hairlines, borders, dividers */
  --iron-2: #33363a;                /* stronger hairline for hover states */
  --red: #9a2b23;                   /* Ranger Red — the signal. CTAs, fills, the line */
  --oxblood: #5e1a15;               /* red, hover-down (fills) */
  --ember: #b23a30;                 /* red for small text on dark + hover-up */
  --red-wash: rgba(154, 43, 35, 0.12);
  --silver: #dfe2e5;                /* secondary light — photo captions, on-scrim text */
  --chrome: linear-gradient(168deg, #ffffff 0%, #e8eaec 38%, #b6bac0 72%, #8d9298 100%);
  --dusk: linear-gradient(180deg, #0e1118 0%, #151b2a 30%, #312832 55%, #7a4030 80%, #c08052 97%); /* reserved: end-cards & covers (brand kit) */

  --font-body: "Montserrat", ui-sans-serif, system-ui, Helvetica, Arial, sans-serif;

  --gut: clamp(22px, 5.5vw, 80px);
  --maxw: 1240px;
  --nav-h: 78px;
  --radius: 2px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

html { scroll-behavior: smooth; }

/* ---------------- Page-to-page transitions ----------------
   Cross-document view transitions: navigating between pages
   crossfades the content (old page eases out, new page rises in)
   while the header stays anchored. Browsers without support simply
   navigate normally. */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in {
  from { opacity: 0; transform: translateY(14px); }
}
::view-transition-old(root) { animation: vt-out 0.2s ease both; }
::view-transition-new(root) { animation: vt-in 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.site-header, .book-topbar { view-transition-name: site-header; }

body {
  background: var(--carbon);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

/* Ember glow lives on a fixed layer rather than background-attachment:
   fixed, which iOS Safari ignores and other mobile browsers repaint on
   every scroll frame. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 60% at 20% 0%, rgba(122, 64, 48, 0.16), transparent 55%),
    radial-gradient(100% 60% at 85% 100%, rgba(122, 64, 48, 0.10), transparent 60%),
    linear-gradient(165deg, var(--carbon) 0%, var(--coal) 100%);
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(38px, 5.4vw, 84px);
  line-height: 0.98;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
/* The script face is exclusive to the logo — emphasis words in headings
   render exactly like the rest of the headline (em kept in the markup
   for semantics only). */
h1 em, h2 em { font-style: normal; }

.kicker {
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.kicker::before { content: ""; width: 18px; height: 2px; background: var(--red); display: inline-block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.section {
  padding-top: clamp(64px, 10vh, 128px);
  padding-bottom: clamp(64px, 10vh, 128px);
}
.section-panel {
  background:
    radial-gradient(70% 100% at 15% 0%, rgba(122, 64, 48, 0.12), transparent 60%),
    var(--coal);
}
.hairline-top { border-top: 1px solid var(--iron-2); }

.section-kicker-line {
  margin: -16px 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}
.section-sub {
  margin: -8px 0 34px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--smoke);
  max-width: 58ch;
}

/* ---------------- Buttons ---------------- */
.btn {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.btn-primary, .btn-gold { background: var(--red); color: var(--bone); }
.btn-primary:hover, .btn-gold:hover { background: var(--oxblood); }
.btn-ghost { background: transparent; color: var(--bone); border-color: var(--iron-2); }
.btn-ghost:hover { border-color: var(--bone); }
.btn-on-photo { background: var(--silver); color: var(--carbon); }
.btn-on-photo:hover { background: #fff; }
.btn-ghost-on-photo { background: transparent; color: #fff; border-color: #ffffff99; }
.btn-ghost-on-photo:hover { border-color: #fff; }
.btn-text {
  color: var(--ember);
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.btn-text:hover { border-color: var(--bone); color: var(--bone); }

/* ---------------- Header ---------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
  border-bottom: 1px solid transparent;
  color: var(--silver);
}
.site-header.scrolled {
  background: rgba(11, 11, 12, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--iron-2);
  color: var(--bone);
}
.header-inner {
  max-width: var(--maxw);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.wordmark-logo { display: inline-flex; align-items: center; }
.logo-mark { flex: none; height: 26px; width: auto; display: block; }
.header-logo { height: 54px; }
.main-nav { display: flex; gap: 34px; }
.main-nav a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
.main-nav a:hover { opacity: 1; color: var(--ember); }
.btn-header { background: var(--red); color: var(--bone); border-radius: var(--radius); padding: 13px 22px; }
.btn-header:hover { background: var(--oxblood); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 0;
}
.menu-toggle span { width: 26px; height: 1.5px; background: currentColor; transition: transform 0.25s, opacity 0.25s; }
.menu-toggle.open span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle.open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--coal-2);
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--bone);
}
.mobile-menu.open { display: flex; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 28px; }
.mobile-menu nav a:not(.btn) {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 28px;
  text-transform: uppercase;
}

/* ---------------- Hero (stays a dark, dusk-lit frame regardless of the page theme) ---------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  color: var(--silver);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 10%, transparent 55%, rgba(0, 0, 0, 0.42)),
    radial-gradient(90% 60% at 50% 108%, rgba(122, 64, 48, 0.30), transparent 65%),
    linear-gradient(180deg, #0b0b0ca6 0%, #0b0b0c73 45%, #0b0b0ce6 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 120px var(--gut) 80px;
  animation: heroIn 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
.hero-headline {
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1.15;
}
.hero-tagline {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f2efe9d9;
}
.hero-actions {
  margin-top: 42px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  bottom: 34px; left: 50%;
  width: 1px; height: 54px;
  background: #ffffff40;
  overflow: hidden;
}
.hero-scroll span {
  position: absolute;
  top: -50%; left: 0;
  width: 100%; height: 50%;
  background: var(--red);
  animation: scrollHint 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scrollHint {
  0% { top: -50%; }
  100% { top: 110%; }
}

/* ---------------- Selected work — portrait carousel ---------------- */
.work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.work-arrows { display: flex; gap: 10px; }
.work-arrow {
  width: 44px; height: 44px;
  border: 1px solid var(--iron-2);
  border-radius: var(--radius);
  background: transparent;
  color: var(--bone);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s, background 0.16s, opacity 0.16s;
}
.work-arrow:hover { border-color: var(--bone); }
.work-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.work-scroller {
  margin-top: 26px;
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}
.work-scroller::-webkit-scrollbar { display: none; }

.work-item {
  flex: 0 0 clamp(230px, 26vw, 330px);
  scroll-snap-align: start;
  display: block;
}
.work-loc {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 10px;
  transition: color 0.2s;
}
.work-item figure {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--coal-2);
}
.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.work-item:hover img { transform: scale(1.04); }
.work-item:hover .work-loc { color: var(--ember); }
.work-name {
  margin-top: 12px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--bone);
}

/* ---------------- Services ---------------- */
.services-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--iron-2);
  border-left: 1px solid var(--iron-2);
}
.service {
  padding: 34px 30px 38px;
  border-right: 1px solid var(--iron-2);
  border-bottom: 1px solid var(--iron-2);
  transition: background 0.16s;
}
.service:hover { background: var(--coal); }
.service h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--bone);
}
.service p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--smoke);
}

/* ---------------- Pricing ---------------- */
.pricing-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* title / description / price / expandable detail / select button —
     a fixed row template shared by every card via subgrid below, so a
     2-line title or price in one card can't push its neighbors' rows
     out of alignment. */
  grid-template-rows: auto auto auto 1fr auto;
  gap: 1px;
  background: var(--iron);
  align-items: stretch;
}
.price-card {
  position: relative;
  background: var(--coal-2);
  padding: clamp(26px, 3vw, 38px) clamp(18px, 2.2vw, 30px);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 5;
  transition: background 0.2s;
}
.price-card:hover { background: var(--coal); }
.price-card.is-popular {
  box-shadow: inset 0 0 0 1px var(--red);
  background: linear-gradient(165deg, rgba(154, 43, 35, 0.14) 0%, var(--coal-2) 45%);
  z-index: 1;
}
.popular-tag {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--chrome);
  color: var(--carbon);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  padding: 3px 0;
}
.price-card h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(17px, 1.55vw, 21px);
  text-transform: uppercase;
}
.price {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 3vw, 42px);
  line-height: 1;
  margin: 14px 0 6px;
  color: var(--bone);
}
.price-label {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke);
}
.pk-desc {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--smoke);
}

/* Expandable per-service pricing — a native <details>/<summary>, so no JS
   is needed and the disclosure works identically everywhere. Its subgrid
   row is 1fr, so it stretches to keep the Select button below it pinned
   to the same baseline across every card in the row. */
.pricing-detail { margin: 18px 0; }
.pricing-detail summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ember);
  cursor: pointer;
  list-style: none;
  padding: 10px 0;
  border-top: 1px solid var(--iron);
}
.pricing-detail summary::-webkit-details-marker { display: none; }
.pricing-detail .chev {
  flex: none;
  width: 9px; height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.16s;
  margin-top: -3px;
}
.pricing-detail[open] .chev { transform: rotate(45deg); margin-top: 0; }
.pricing-detail .prow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 13.5px;
  color: var(--smoke);
  border-bottom: 1px solid var(--iron);
  font-variant-numeric: tabular-nums;
}
.pricing-detail .prow span:last-child { color: var(--bone); font-weight: 500; }
.pricing-note {
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--smoke-dim);
}

/* ---------------- About / Founders ---------------- */
.about-statement { max-width: 22ch; }
.about-statement em { font-size: 1.45em; }
.founders-grid {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 60px);
}
.founder-photo {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--coal);
  filter: grayscale(0.15);
}
.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.founder-card:hover .founder-photo img { transform: scale(1.04); }
.founder-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
}
.founder-head h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 27px);
  text-transform: uppercase;
}
.founder-head h3 a { transition: color 0.2s; }
.founder-head h3 a:hover { color: var(--ember); }
.founder-ig {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--smoke);
  border: 1px solid var(--iron-2);
  border-radius: var(--radius);
  padding: 7px 12px;
  white-space: nowrap;
  transition: all 0.2s;
}
.founder-ig:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--bone);
}
.founder-title {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--smoke-dim);
}
.founder-bio {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--smoke);
  max-width: 52ch;
}
.founders-foot {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 30px;
  border-top: 1px solid var(--iron-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 30px;
}
.founders-foot p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.7;
  color: var(--bone);
  max-width: 52ch;
}
.founders-foot .btn-text { white-space: nowrap; }

/* ---------------- Contact ---------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}
.contact-grid > div > p:not(.kicker) {
  color: var(--smoke);
  font-size: 15.5px;
  line-height: 1.7;
  max-width: 46ch;
}
.contact-line { margin-top: 22px; font-size: 17px; }
.socials { margin-top: 28px; display: flex; gap: 12px; }
.socials a {
  width: 42px; height: 42px;
  border: 1px solid var(--iron-2);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--bone);
  transition: all 0.2s;
}
.socials a:hover {
  border-color: var(--red);
  background: var(--red);
  color: var(--bone);
}

.contact-form {
  background: var(--coal-2);
  border: 1px solid var(--iron-2);
  padding: 34px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--smoke-dim);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* ≥16px so iOS Safari doesn't auto-zoom on focus */
  color: var(--bone);
  background: var(--coal-2);
  border: 1px solid var(--iron-2);
  border-radius: var(--radius);
  padding: 13px 16px;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.field textarea { resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-wash);
}
.contact-form .btn { width: 100%; }
.form-hint {
  margin-top: 12px;
  font-size: 12px;
  color: var(--smoke-dim);
  text-align: center;
}

/* ---------------- Footer ---------------- */
footer {
  padding: 0 0 0;
  background:
    radial-gradient(90% 120% at 50% 118%, rgba(122, 64, 48, 0.34), transparent 60%),
    var(--carbon);
  color: var(--bone);
  border-top: 1px solid var(--iron-2);
}
.footer-stripes { height: 3px; background: var(--chrome); }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  /* top/bottom only — the shorthand form was wiping out .container's
     horizontal gutter and pinning the footer to the screen edge */
  padding-top: 56px;
  padding-bottom: 48px;
}
.footer-logo { display: inline-flex; align-items: center; }
.footer-logo .logo-mark { height: 96px; }
.footer-brand p {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--smoke);
  max-width: 34ch;
}
.footer-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 14px;
}
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col a {
  font-size: 14px;
  color: var(--smoke);
  transition: color 0.16s;
}
.footer-col a:hover { color: var(--ember); }
.footer-bottom {
  border-top: 1px solid var(--iron-2);
  padding-top: 22px;
  padding-bottom: 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--smoke-dim);
}
.footer-bottom a:hover { color: var(--ember); }

/* ---------------- Section monogram (faint background A mark) ---------------- */
.has-mark { position: relative; overflow: hidden; }
.has-mark > .container { position: relative; z-index: 1; }
.section-mark {
  position: absolute;
  z-index: 0;
  width: clamp(380px, 46vw, 720px);
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}
.section-mark.mark-right { right: -8%; bottom: -14%; }
.section-mark.mark-left { left: -10%; top: -8%; }
/* On phones the monograms crowd the headings and straddle section
   rules — desktop/tablet only. */
@media (max-width: 720px) {
  .section-mark { display: none; }
}

/* ---------------- Collection page ---------------- */
.collection-body .site-header { position: sticky; }
.collection-main { padding: clamp(40px, 7vh, 80px) 0 clamp(64px, 10vh, 120px); }
.collection-back { display: inline-block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 34px; }
.collection-title {
  font-size: clamp(30px, 4.6vw, 56px);
  margin-bottom: clamp(30px, 5vh, 54px);
}
.collection-film { margin-bottom: clamp(30px, 5vh, 54px); }
.collection-film:empty { display: none; }
.collection-film > * + * { margin-top: clamp(14px, 1.8vw, 24px); }
.collection-film > video {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 80vh;
  background: var(--coal-2);
}

/* Portrait film + photo grid, composed as one row: the 9:16 video
   sets the row height, four stills fill the space beside it. */
.film-row {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 16fr);
  gap: clamp(14px, 1.8vw, 24px);
  align-items: stretch;
}
.film-row video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--coal-2);
}
.film-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: clamp(14px, 1.8vw, 24px);
  min-height: 0;
}
.film-row-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--coal-2);
}
.film-row-cell img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 720px) {
  .film-row { grid-template-columns: 1fr; }
  .film-row video { max-height: 76vh; width: auto; max-width: 100%; margin: 0 auto; }
  .film-row-grid { grid-template-rows: auto auto; }
  .film-row-cell { aspect-ratio: 1 / 1; }
}
.collection-gallery {
  columns: 2;
  column-gap: clamp(14px, 1.8vw, 24px);
}
.collection-gallery img {
  width: 100%;
  margin-bottom: clamp(14px, 1.8vw, 24px);
  background: var(--coal-2);
  break-inside: avoid;
}
.collection-cta {
  margin-top: clamp(36px, 6vh, 64px);
  padding-top: 34px;
  border-top: 1px solid var(--iron-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.collection-cta p { color: var(--smoke); font-size: 15.5px; }
@media (max-width: 640px) {
  .collection-gallery { columns: 1; }
}

/* ---------------- Reveal on scroll ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-content { animation: none; }
  .hero-scroll { display: none; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  /* 5 cards over 2 columns leaves the last one orphaned with an empty
     cell beside it — span it full-width instead. */
  .pricing-grid .price-card:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .main-nav, .btn-header { display: none; }
  .menu-toggle { display: flex; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .founders-grid { grid-template-columns: 1fr; }
  .founders-foot { flex-direction: column; gap: 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
  .form-row { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
}

/* ------------------------------------------------------------------
   Gold sweep — every two minutes a gilt wave rolls through the page
   TEXT, top-left to bottom-right. gold-sweep.js staggers each
   element's --sweep-delay by its viewport position; the glow itself
   is a brief color swell + soft gold drop shadow on the letterforms.
   Images and video are untouched. Skipped for reduced-motion users.
   ------------------------------------------------------------------ */
.gold-lit {
  animation: gold-text-pass 1.6s ease-in-out both;
  animation-delay: var(--sweep-delay, 0s);
}
@keyframes gold-text-pass {
  45%, 55% {
    color: #d9b47c;
    text-shadow: 0 2px 16px rgba(214, 175, 122, 0.5),
                 0 0 3px rgba(214, 175, 122, 0.35);
  }
}