/* ==========================================================================
   THIRD EYE MEDIA, THE HOMEPAGE
   Page-specific layer for /v6-2/ (2026-09-20; 1.1.0 the same evening: the
   journey rail became in-flow step tags, the pathway rows were tidied, the
   hero labels got a chip, the sent form hides; 1.2.0, the full pass: tighter
   chapter rhythm, a smaller hero statement so the diptych shows above the
   fold, larger client logos, the fan without the fade, the events head as
   two columns, the process line behind its numerals, readable pillar
   numerals, the footer's product list one per line; 1.3.0: the hero is the
   statement and one photograph, the diptych and the pathways are one section;
   1.4.0: the hero on the product pages' split, the diptych alone and taller,
   a campaign content chapter like the events one, the calendar's photographs
   in place of the year grid, the Sprint portfolio as Our Work, no process;
   1.5.0: the film card rotates, the push-in keeps its top edge; 1.6.0: how it
   grows rebuilt as two rows with photographs, the closing chapter's one
   button, the sent panel honours hidden; 1.8.0: stacked, every visual sits
   under its title and the button comes last; 1.9.0: the fan's film tile
   overlaps the main frame; captions carry data-img-caption for the admin).
   Loads after style.css (the
   design system) and sprint.css (the film and gallery strips, the shared
   lightbox, the hero shot crossfade). Everything here is new to this page:
   the diptych hero, the two pathways, the journey rail and its offers, the
   asset fan, the months grid, the river, the mosaic, the film card, the
   calendar year, the model tracks, the pillars, the work rows, the steps
   and the closing form. Motion is restrained and every piece of it stops
   under prefers-reduced-motion.
   ========================================================================== */

/* ---------------- rhythm: the chapters sit closer than on a product page ----------------
   The design system's .pad-y runs to 170px each side, which on a page of
   twelve chapters left bands of empty paper between every two (Trevor:
   "unneat"). The homepage's chapters take a tighter, still generous beat. */
.home .pad-y { padding-top: clamp(64px, 7.5vw, 112px); padding-bottom: clamp(64px, 7.5vw, 112px); }

/* ---------------- 01 hero: the product pages' split, with the homepage's loop ----------------
   Stacked, the photograph sits under the statement and the button is last,
   the same order as the offers (scoped to .home, so the product pages'
   heroes are untouched). */
@media (max-width: 900px) {
  .home .hero--sprint .hero__center--split { gap: 1rem; }
  .home .hero--sprint .hero__copy { display: contents; }
  .home .hero--sprint .hero__copy > * { order: 5; }
  .home .hero--sprint .hero__copy > .hero__eyebrow { order: 1; }
  .home .hero--sprint .hero__copy > h1 { order: 2; }
  .home .hero--sprint .hero__visual { order: 3; margin: 0.4rem 0 0.4rem; }
  /* the button follows the sub straight away (Trevor); the facts list closes the hero */
  .home .hero--sprint .hero__copy > .sub { order: 4; margin-top: 0; }
  .home .hero--sprint .hero__copy > .hero__cta { order: 5; margin-top: 0.4rem; }
  .home .hero--sprint .hero__copy > .hero__facts { order: 6; }
  /* the caption under the photograph repeats the strap; stacked, the copy follows the picture directly */
  .home .hero--sprint .hero__visual figcaption { display: none; }
  .home .hero--sprint .hero__copy > .hero__facts { margin-top: 1rem; }
}

   The structure is sprint.css's .hero--sprint (copy left, visual right) so the
   homepage reads like every other page. Only the photographs' focal points
   are set here; each image carries its own object-position inline. */
.hero--sprint .hero__visual__frame { aspect-ratio: 3 / 2; }
.hero--sprint .hero__visual__shot { object-position: 50% 24%; }

/* the three facts under the hero copy: a ruled list, the label in mono on
   the left and the words in the reading face, instead of three shouting
   lines of caps (Trevor, 2026-09-20) */
.hero__facts { display: grid; gap: 0; margin-top: 1.6rem; border-top: 1px solid var(--line); align-items: stretch; }
.hero__fact { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0 1rem; align-items: baseline; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.hero__fact dt { color: var(--accent-label); }
.hero__fact dd { margin: 0; color: var(--ink); font-size: 0.98rem; line-height: 1.45; }
@media (max-width: 520px) { .hero__fact { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; } }

/* the ghost button: outline, the square filled (the closing chapter) */
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--ghost .sq { background: var(--ink); }
.btn--ghost .sq::before { background-color: var(--paper); }

/* ---------------- 02 trust: the shared strip, nothing to add ---------------- */

/* ---------------- 03 what are you producing: the diptych and the two pathways ---------------- */
.ways { margin-top: clamp(2.4rem, 4.5vw, 4rem); }
.duo {
  display: flex;
  gap: clamp(0.6rem, 1vw, 0.9rem);
  min-height: clamp(440px, 64vh, 760px);
}
.duo__panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  text-decoration: none;
  color: #fff;
  transition: flex-grow 900ms cubic-bezier(0.22, 1, 0.36, 1);
  isolation: isolate;
}
.duo__panel.is-lead { flex-grow: 1.6; }
.duo__frame { position: absolute; inset: 0; display: block; }
.duo__frame .hero__visual__shot { object-position: 50% 24%; }
/* the crossfade rules come from sprint.css (.hero__visual__shot / .is-on) */
.duo__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 7, 0.78) 0%, rgba(8, 8, 7, 0.18) 42%, rgba(8, 8, 7, 0) 70%);
  z-index: 1;
}
.duo__label {
  position: absolute;
  z-index: 2;
  left: clamp(1rem, 2vw, 1.8rem);
  right: clamp(1rem, 2vw, 1.8rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  display: grid;
  gap: 0.3rem;
}
.duo .duo__k { color: var(--accent); font-size: 0.68rem; letter-spacing: 0.12em; width: max-content; max-width: 100%; padding: 0.3rem 0.5rem; background: rgba(8, 8, 7, 0.72); border-radius: 3px; }
.duo__label b {
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  max-width: 16ch;
  text-shadow: 0 1px 14px rgba(8, 8, 7, 0.6);
}
.duo .duo__go { color: rgba(255, 255, 255, 0.72); font-size: 0.66rem; letter-spacing: 0.1em; transition: color 300ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1); transform: translateY(0.35rem); opacity: 0; }
.duo__panel.is-lead .duo__go, .duo__panel:hover .duo__go, .duo__panel:focus-visible .duo__go { opacity: 1; transform: none; color: #fff; }
.duo__panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.duo__panel:not(.is-lead) .hero__visual__shot { filter: saturate(0.85); }

@media (prefers-reduced-motion: reduce) {
  .duo__panel, .duo .duo__go { transition: none; }
}
@media (max-width: 700px) {
  .duo { flex-direction: column; min-height: 0; }
  .duo__panel, .duo__panel.is-lead { flex: none; height: clamp(190px, 30vh, 260px); }
  .duo__label b { font-size: 1.15rem; }
}
/* ---------------- 04 the journey rail and the offers ---------------- */
.journey { position: relative; }
.journey__head { max-width: 44rem; margin-bottom: clamp(2.4rem, 5vw, 4.4rem); }
.journey__title {
  font-family: var(--font-disp);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.9rem;
}
/* the step tag: "01 Start here" / "02 Continue" at the head of each offer,
   in flow, so the commercial journey is read where the offer is read */
.offer__step { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--dim); font-size: 0.62rem; letter-spacing: 0.12em; margin-bottom: 0.2rem; }
.offer__step i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--ink); color: var(--paper); font-style: normal; font-size: 0.64rem; font-weight: 700; }
.offer__step--end i { background: var(--accent); color: #080807; }
.cal .offer__step i { background: var(--paper); color: var(--ink); }
.cal .offer__step--end i { background: var(--accent); color: #080807; }

.offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.6rem) 0;
  border-top: 1px solid var(--line);
}
.offer + .offer { border-top: 1px solid var(--line); }
.offer--rev .offer__copy { order: 2; }
.offer--rev .offer__visual { order: 1; }
.offer__copy { display: grid; gap: 1rem; max-width: 40rem; }
.offer .offer__k { color: var(--accent-label); }
.offer__title {
  font-family: var(--font-disp);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 3vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.2rem;
}
.offer__copy > p { color: var(--dim); line-height: 1.55; font-size: 1.02rem; }
.offer__key { color: var(--ink) !important; font-weight: 500; font-size: 1.12rem !important; padding-left: 1rem; border-left: 2px solid var(--accent); }
.offer__price { color: var(--accent-label); margin-top: 0.2rem; }
.offer__price b { font-family: var(--font-disp); font-weight: 400; font-size: 1.45rem; letter-spacing: 0; color: var(--ink); }
.offer__cta { display: grid; gap: 0.9rem; justify-items: start; margin-top: 0.3rem; }
/* the secondary path under a button: a sentence in the reading face, the
   link underlined, instead of a long mono caps line that wrapped and left
   its arrow stranded (Trevor, 2026-09-20) */
.offer__also { color: var(--dim); font-size: 0.95rem; line-height: 1.5; max-width: 40rem; }
.offer__alsolink { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; white-space: nowrap; }
.offer__alsolink .arr { display: inline-block; transition: transform 0.2s ease; }
.offer__alsolink:hover .arr, .offer__alsolink:focus-visible .arr { transform: translateX(4px); }
.cal .offer__also { color: var(--dim); }
.cal .offer__alsolink { color: var(--ink); }
@media (max-width: 520px) { .offer__alsolink { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .offer__alsolink .arr { transition: none; } }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips li { padding: 0.32rem 0.62rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.84rem; color: var(--dim); }
.offer__visual { margin: 0; }

/* the fan: one production, several assets. The tiles rest behind the main
   frame and fan out once the offer has arrived (the .rv .in flag app.js
   sets), each on its own delay. */
.fan { position: relative; aspect-ratio: 5 / 4; }
.fan__main { position: absolute; left: 0; top: 10%; width: 58%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; box-shadow: 0 28px 44px -30px rgba(8, 8, 7, 0.55); z-index: 3; background: var(--ink); }
.fan__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fan .fan__tag { position: absolute; left: 0.8rem; top: 0.8rem; padding: 0.3rem 0.55rem; background: rgba(8, 8, 7, 0.82); color: #fff; border-radius: 3px; font-size: 0.6rem; letter-spacing: 0.1em; }
.fan__tile { position: absolute; overflow: hidden; border-radius: 3px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 30px -22px rgba(8, 8, 7, 0.5); display: grid; grid-template-rows: 1fr auto; --dx: 0; --dy: 0; transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) scale(0.94); opacity: 0.001; transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease; }
.fan__tile img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.fan .fan__tile .mono { padding: 0.35rem 0.5rem; font-size: 0.58rem; letter-spacing: 0.1em; color: var(--dim); background: #fff; }
/* the film tile overlaps the main frame's right edge (Trevor, 2026-09-21) */
.fan__tile--film { left: 50%; top: 0; width: 46%; aspect-ratio: 16 / 10; z-index: 4; --dx: 10%; --dy: 0; transition-delay: 80ms; }
.fan__tile--social { left: 76%; top: 40%; width: 22%; aspect-ratio: 9 / 15; z-index: 5; --dx: 14%; --dy: 0; transition-delay: 160ms; }
.fan__tile--post { left: 50%; top: 56%; width: 24%; aspect-ratio: 1 / 1.2; z-index: 6; --dx: 8%; --dy: -8%; transition-delay: 240ms; }
.fan__tile--photo { left: 10%; top: 68%; width: 36%; aspect-ratio: 4 / 3.3; z-index: 5; --dx: 0; --dy: -10%; transition-delay: 320ms; }
.offer.in .fan__tile { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fan__tile { transform: none; opacity: 1; transition: none; } }

/* the months: a year of production in twelve cells */
.months { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
/* a text cell is a designed blank: a dotted ground (Trevor, 2026-09-20; the
   inner frame it had collided with the words on a phone and went, 2026-09-21) */
.months__cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 3px; border: 1px solid var(--line); background-color: #FCFCFA; background-image: radial-gradient(rgba(8, 8, 7, 0.16) 1px, transparent 1.2px); background-size: 9px 9px; background-position: 4px 4px; display: grid; align-content: end; gap: 0.2rem; padding: 0.7rem 0.75rem; }
.months__cell > .mono, .months__cell > b { position: relative; }
.months__cell > .mono { font-size: 0.58rem; letter-spacing: 0.1em; color: var(--dim); }
.months__cell b { font-weight: 500; font-size: 0.86rem; line-height: 1.25; color: var(--ink); }
.months__cell--img { padding: 0; border: 0; background: var(--ink); }
.months__cell--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1); }
.months__cell--img:hover img { transform: scale(1.05); }
.months__cell--img > .mono { position: absolute; left: 0.6rem; bottom: 0.55rem; right: 0.6rem; color: #fff; padding: 0.25rem 0.45rem; background: rgba(8, 8, 7, 0.78); border-radius: 3px; width: max-content; max-width: calc(100% - 1.2rem); }

/* ---- stacked (phones and small tablets): the visual sits under the title,
   the button is the last thing (Trevor, 2026-09-21). The copy block
   dissolves into the offer's grid (display: contents) so its children and
   the visual can be ordered as one column: tag, eyebrow, title, VISUAL,
   the paragraphs, chips and price, then the button. Desktop is untouched. ---- */
@media (max-width: 1080px) {
  .offer { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .offer__copy { display: contents; }
  .offer__copy > * { order: 5; }
  .offer__copy > .offer__step { order: 1; }
  .offer__copy > .offer__k { order: 2; }
  .offer__copy > .offer__title { order: 3; margin-top: 0; }
  .offer__visual, .offer--rev .offer__visual { order: 4; margin: 0.4rem 0 0.6rem; }
  .offer__copy > .offer__cta { order: 9; }
  .offer__copy > p, .offer__copy > .chips, .offer__copy > .offer__price { max-width: 40rem; }
  .fan { max-width: 40rem; }
}
@media (max-width: 700px) {
  .fan { aspect-ratio: 4 / 4.2; }
  .months { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .months__cell { padding: 0.55rem 0.6rem; }
  .months__cell b { font-size: 0.74rem; }
  .offer__title { font-size: clamp(1.6rem, 8vw, 2.2rem); }
}

/* ---------------- 05 events: the turn, and the river ---------------- */
.evt { padding-top: clamp(64px, 7.5vw, 112px); padding-bottom: clamp(56px, 6vw, 96px); overflow: hidden; }
.evt__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 6rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.evt__head > .slabel { grid-column: 1 / -1; }
@media (max-width: 1000px) { .evt__head { grid-template-columns: minmax(0, 1fr); row-gap: 1.4rem; } }
.evt__title {
  font-family: var(--font-disp);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 4.6vw, 4.8rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-top: 0.9rem;
  max-width: 14ch;
}
/* the right column: the lede, then the four kinds as a ruled list, so the
   chapter head reads as a composition and not a headline beside a paragraph
   (Trevor, 2026-09-20) */
.evt__side { display: grid; gap: 1.4rem; max-width: 34rem; padding-bottom: 0.4rem; }
.evt__lede { color: var(--dim); font-size: clamp(1.02rem, 1.3vw, 1.2rem); line-height: 1.55; }
.evt__kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.evt__kinds li { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-disp); text-transform: uppercase; font-size: clamp(1rem, 1.25vw, 1.2rem); letter-spacing: -0.005em; color: var(--ink); }
.evt__kinds li:nth-child(odd) { padding-right: 1rem; }
.evt__kinds li:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--line); }
.evt__kinds .mono { color: var(--accent); font-size: 0.62rem; letter-spacing: 0.12em; }
@media (max-width: 480px) { .evt__kinds { grid-template-columns: minmax(0, 1fr); } .evt__kinds li:nth-child(even) { padding-left: 0; border-left: 0; } .evt__kinds li:nth-child(odd) { padding-right: 0; } }
.river { position: relative; }
.river__track { display: flex; gap: clamp(0.6rem, 1vw, 1rem); width: max-content; padding-left: var(--gutter); will-change: transform; }
.river__shot { display: block; height: clamp(180px, 26vw, 360px); aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; background: #1a1a18; flex: none; }
.river__shot--tall { aspect-ratio: 4 / 3; }
.river__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1600ms cubic-bezier(0.22, 1, 0.36, 1); }
.river__shot:hover img { transform: scale(1.04); }
@keyframes river-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.river--flow .river__track { animation: river-drift var(--river-s, 60s) linear infinite; }
.river--flow:hover .river__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .river--flow .river__track { animation: none; }
  .river { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (hover: none) {
  /* on touch the river is scrolled by hand, and never plays under a thumb */
  .river--flow .river__track { animation: none; }
  .river { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .river__shot { scroll-snap-align: start; }
}
.journey--events { padding-top: clamp(40px, 5vw, 80px); }

/* the mosaic: three frames, one large; each frame a loop of four, in step */
.mosaic { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0.6rem; aspect-ratio: 5 / 3.4; }
.mosaic > span { position: relative; overflow: hidden; border-radius: 3px; background: var(--ink); min-height: 0; display: block; }
.mosaic__a { grid-row: 1 / span 2; }
/* the crossfade and push-in come from sprint.css (.hero__visual__shot / .is-on) */

/* the film card: one stage rotating through four films, four thumbnails below */
.filmcard { display: grid; gap: 0.6rem; }
.filmcard__stage { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: var(--ink); }
.filmcard__posters { position: absolute; inset: 0; display: block; }
/* the crossfade and push-in come from sprint.css (.hero__visual__shot / .is-on) */
.filmcard .filmcard__play { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
/* the badge must stay positioned: style.css draws the play mark as a ::before
   with inset 0 against its nearest positioned ancestor, and with the badge
   static that was the whole stage (a triangle the size of the poster) */
.filmcard .filmcard__play .portshot__badge { position: relative; left: auto; top: auto; transform: none; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: rgba(8, 8, 7, 0.72); border: 1px solid rgba(255, 255, 255, 0.5); display: grid; place-items: center; transition: transform 300ms ease, background 300ms ease; }
.filmcard .filmcard__play:hover .portshot__badge, .filmcard .filmcard__play:focus-visible .portshot__badge { transform: scale(1.06); background: var(--accent); border-color: var(--accent); }
.filmcard .filmcard__play:focus-visible { outline: none; }
.filmcard__cap { position: absolute; left: 0.9rem; bottom: 0.9rem; z-index: 3; display: grid; gap: 0.15rem; padding: 0.5rem 0.7rem; background: rgba(8, 8, 7, 0.82); border-radius: 4px; color: #fff; pointer-events: none; max-width: calc(100% - 1.8rem); }
.filmcard .filmcard__cap b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; letter-spacing: 0; text-transform: none; line-height: 1.25; color: #fff; }
.filmcard .filmcard__cap span { font-size: 0.6rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); }
.filmcard__thumbs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.filmcard__thumbs li { display: grid; gap: 0.35rem; }
.filmcard__thumb { display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: var(--ink); border: 0; padding: 0; cursor: pointer; opacity: 0.55; transition: opacity 300ms ease, box-shadow 300ms ease; }
.filmcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.filmcard__thumb:hover { opacity: 0.85; }
.filmcard__thumb.is-on { opacity: 1; box-shadow: 0 0 0 2px var(--accent); }
.filmcard__thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.filmcard__thumbs > li > .mono { color: var(--dim); font-size: 0.6rem; letter-spacing: 0.1em; }
@media (max-width: 520px) { .filmcard__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .filmcard__thumb { transition: none; } }

/* the push-in on every loop keeps its top edge, so the zoom never eats the
   headroom the focal point was chosen for (Trevor: heads were being cut) */
.home .hero__visual__shot { transform-origin: 50% 0; }

/* ---------------- 06 the calendar ---------------- */
.cal__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cal__copy { display: grid; gap: 1.1rem; max-width: 40rem; }
.cal__title {
  font-family: var(--font-disp);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 0.4rem;
}
.cal__copy > p { color: var(--dim); line-height: 1.55; }
.cal .offer__price b { color: var(--ink); }
.instead { display: grid; gap: 0.5rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.instead .instead__k { color: var(--accent-label); }
.instead__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.instead__list li { position: relative; color: var(--dim); font-size: 1.02rem; line-height: 1.45; width: max-content; max-width: 100%; }
.instead__list li::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(0.35s + var(--i) * 0.22s); }
.instead.in .instead__list li::after { transform: scaleX(1); }
.instead__then { color: var(--ink); font-weight: 500; font-size: 1.08rem; line-height: 1.4; margin-top: 0.4rem; opacity: 0; transform: translateY(6px); transition: opacity 600ms ease 1.7s, transform 600ms ease 1.7s; }
.instead.in .instead__then { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .instead__list li::after { transition: none; transform: scaleX(1); }
  .instead__then { transition: none; opacity: 1; transform: none; }
}

/* the calendar photographs: the Lockdown page's hero loop, as it is there */
.cal__show { margin: 0; display: grid; gap: 0.7rem; }
.cal__frame { display: block; width: 100%; aspect-ratio: 1563 / 1006; border-color: rgba(244, 244, 239, 0.18); background: #1a1a18; box-shadow: 0 30px 50px -36px rgba(0, 0, 0, 0.8); }
.cal .cal__show figcaption { color: var(--dim); }
@media (max-width: 1080px) {
  .cal__grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .cal__copy { display: contents; }
  .cal__copy > * { order: 5; }
  .cal__copy > .offer__step { order: 1; }
  .cal__copy > .slabel { order: 2; }
  .cal__copy > .cal__title { order: 3; margin-top: 0; }
  .cal__show { order: 4; margin: 0.4rem 0 0.6rem; max-width: 40rem; }
  .cal__copy > .offer__cta { order: 9; }
}
@media (max-width: 700px) {
  .cal__title { font-size: clamp(1.7rem, 8.5vw, 2.4rem); }
}

/* ---------------- 07 how it grows: two rows, start to partnership ---------------- */
.grow__tracks { display: grid; gap: clamp(1.4rem, 2.6vw, 2.2rem); margin-top: clamp(2.4rem, 4.5vw, 4rem); }
.growrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 clamp(1rem, 2vw, 1.6rem); align-items: stretch; padding-top: 1rem; border-top: 1px solid var(--line); }
.growrow .growrow__k { grid-column: 1 / -1; color: var(--accent-label); margin-bottom: 0.9rem; }
.grow__tile { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--ink); background: #FCFCFA; transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms ease; }
.grow__tile:hover, .grow__tile:focus-visible { transform: translateY(-3px); box-shadow: 0 24px 40px -30px rgba(8, 8, 7, 0.5); outline: none; }
.grow__pic { position: relative; display: block; min-height: 13rem; background: var(--ink); }
.grow__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.grow__body { display: grid; gap: 0.35rem; align-content: center; padding: 1.1rem 1.2rem; }
.grow__body > .mono { color: var(--dim); font-size: 0.62rem; letter-spacing: 0.12em; }
.grow__body b { font-family: var(--font-disp); font-weight: 400; text-transform: uppercase; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.05; letter-spacing: -0.01em; }
.grow__sub { color: var(--dim); font-size: 0.9rem; line-height: 1.45; }
.grow__alt { color: var(--ink); }
.grow__tile--end { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.grow__tile--end .grow__body > .mono { color: var(--accent); }
.grow__tile--end .grow__sub { color: rgba(232, 232, 227, 0.72); }
.grow__arrow { display: grid; align-content: center; justify-items: center; gap: 0.5rem; width: clamp(7rem, 10vw, 11rem); text-align: center; }
.grow__arrow i { position: relative; display: block; width: 100%; border-top: 1.5px dashed var(--ink); opacity: 0.55; }
.grow__arrow i::after { content: ""; position: absolute; right: -1px; top: -0.3rem; width: 0.55rem; height: 0.55rem; border-right: 1.5px solid var(--ink); border-top: 1.5px solid var(--ink); transform: rotate(45deg); }
.grow__arrow .mono { color: var(--dim); font-size: 0.6rem; letter-spacing: 0.1em; }
@media (max-width: 1000px) {
  .growrow { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
  .grow__arrow { width: auto; grid-template-columns: 2rem minmax(0, 1fr); justify-items: start; text-align: left; padding-left: 0.6rem; }
  .grow__arrow i { width: 0; height: 2rem; border-top: 0; border-left: 1.5px dashed var(--ink); }
  .grow__arrow i::after { right: auto; left: -0.32rem; top: auto; bottom: -1px; transform: rotate(135deg); }
}
@media (max-width: 520px) {
  /* stacked, the picture is a 4:3 frame rather than a 9rem strip, so a
     portrait shows the person and not a head cut at the neck (Trevor) */
  .grow__tile { grid-template-columns: minmax(0, 1fr); }
  .grow__pic { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .grow__tile { transition: none; } }

/* ---------------- 08 the pillars ---------------- */
.pillars { list-style: none; margin: clamp(2rem, 4vw, 3.4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.pillar { position: relative; display: grid; gap: 0.6rem; padding: clamp(1.4rem, 2.6vw, 2.4rem) clamp(1.2rem, 2.4vw, 2.2rem) clamp(1.6rem, 2.8vw, 2.6rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 300ms ease; }
.pillar:hover { background: rgba(8, 8, 7, 0.025); }
.pillar .pillar__n { font-size: clamp(1.6rem, 2.6vw, 2.4rem); color: rgba(8, 8, 7, 0.3); font-weight: 700; line-height: 1; transition: color 300ms ease; }
.pillar:hover .pillar__n { color: var(--accent); }
.pillar h3 { font-family: var(--font-disp); font-weight: 400; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.05; letter-spacing: -0.01em; }
.pillar p { color: var(--dim); line-height: 1.55; max-width: 38ch; }
@media (max-width: 700px) { .pillars { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- 09 our work ----------------
   The Sprint page's portfolio section, styled by sprint.css (.portgrid,
   .portcard, .portstrip); nothing to add here. */

/* ---------------- 11 start: the closing statement and the form ---------------- */
.start__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.4rem, 6vw, 7rem); align-items: start; }
/* explicit cells: the copy in column 1, the form and the sent panel share
   column 2 (only one of them is ever shown). Auto-placement had put the form
   in a second row under the sticky copy, which then slid over it. */
.start__copy { grid-column: 1; grid-row: 1; display: grid; gap: 1.2rem; position: sticky; top: calc(var(--header-h) + 32px); }
.start__form { grid-column: 2; grid-row: 1; }
.start__title {
  font-family: var(--font-disp);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 5.4vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  max-width: 10ch;
  margin-top: 0.4rem;
}
.start__lede { color: var(--dim); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; max-width: 40rem; }
.start__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.start .btn--ghost { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.start .btn--ghost .sq { background: var(--ink); }
.start .btn--ghost .sq::before { background-color: var(--paper); }
.start__where, .start__contact { color: var(--dim); line-height: 1.7; }
.start__contact a { color: var(--ink); text-decoration: none; }
.start__contact a:hover { text-decoration: underline; text-underline-offset: 3px; }
.start__form[hidden] { display: none; }
.start__form { display: block; padding: clamp(1.4rem, 2.6vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); }
.start__formtitle { font-family: var(--font-disp); font-weight: 400; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 1.4rem; }
.start__form .fld input[type="text"], .start__form .fld input[type="email"], .start__form .fld input[type="tel"], .start__form .fld textarea {
  width: 100%;
  background: rgba(244, 244, 239, 0.06);
  border: 1px solid rgba(244, 244, 239, 0.32);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.8rem 0.9rem;
  min-height: 48px;
  line-height: 1.4;
}
.start__form .fld textarea { resize: vertical; }
.start__form .fld input::placeholder, .start__form .fld textarea::placeholder { color: rgba(244, 244, 239, 0.42); }
.start__form .fld input:focus-visible, .start__form .fld textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.start__form .fld.bad input, .start__form .fld.bad textarea, .start__form .fld.bad .opts { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.start__form .opts { grid-template-columns: 1fr; }
.start__form .opts .opt { border-right: 0; }
.fld--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.start__submit { display: grid; gap: 0.7rem; justify-items: start; margin-top: 1.4rem; }
.start__status { color: var(--dim); min-height: 1.2em; }
.start__status[data-state="error"] { color: var(--accent); }
.start__done[hidden] { display: none; }
.start__done { grid-column: 2; grid-row: 1; align-self: start; display: grid; gap: 0.7rem; padding: clamp(1.4rem, 2.6vw, 2.2rem); border: 1px solid var(--accent); border-radius: var(--radius); }
.start__done h3 { font-family: var(--font-disp); font-weight: 400; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.1; }
.start__done p { color: var(--dim); }
.start__done a { color: var(--ink); }
@media (max-width: 1080px) {
  .start__grid { grid-template-columns: minmax(0, 1fr); }
  .start__copy { position: static; grid-row: 1; }
  .start__form { grid-column: 1; grid-row: 2; }
  .start__done { grid-column: 1; grid-row: 2; }
}

/* ---------------- footer: the product line ---------------- */
.footer__pages { display: grid; gap: 0.35rem; justify-items: start; }
.footer__pages a { color: inherit; }