/* ==========================================================================
   EVENT PHOTOGRAPHY
   Page-specific styles for /v6-2/event-photography/.

   Loaded after style.css, sprint.css and lockdown.css, and only by this
   page. Everything it needs from the design system (nav, hero split, tier
   cards, howsteps, portfolio strips, FAQ, finale, footer) already exists in
   those three files; this file adds the handful of components that are new
   here and adjusts tier copy for a price ladder rather than a partnership
   ladder.

   v2 (2026-09-12): photography only. The three-card problem, the add-on
   menu, the deliverables table and the film strip went with the film. New
   here: the "once" split, the five-category photo grid, the uses list, the
   live-editing section, the case-study slots, the Lockdown benefits list.

   Every selector is scoped to markup only this page has, so nothing here
   can reach the Lockdown or Sprint pages even if the file were loaded there.
   ========================================================================== */

/* ---- 01 hero: a 3:2 frame, centred in its column (Trevor, 2026-09-12) ----
   sprint.css draws the frame 16:9 and full width. Photographs of people
   sit better in 3:2, and the frame no longer needs to fill the column. */
#main .hero--sprint .hero__visual { justify-self: center; align-self: center; width: min(100%, 53rem); }
#main .hero--sprint .hero__center--split { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); }
#main .hero--sprint .hero__center--split .hero__copy { max-width: 30rem; }
#main .hero--sprint .hero__visual__frame { aspect-ratio: 3 / 2; }
/* The two id-specific rules above outrank sprint.css's 900px stacking rule,
   so without this the hero stayed two narrow columns on a phone (Trevor,
   2026-09-14, seen on the ACFE gift page; the Photography page had the
   same fault). Restated at the same specificity. */
@media (max-width: 900px) {
  #main .hero--sprint .hero__center--split { grid-template-columns: minmax(0, 1fr); }
  #main .hero--sprint .hero__center--split .hero__copy { max-width: none; }
}

/* ---- 03 your event only happens once ----
   Merged with "what we photograph" (2026-09-13): the framing line above
   the five-category photo grid, one practical line under it. */

.once__line {
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  max-width: 34ch;
  margin: 2.2rem 0 1.4rem;
}
.once__line b { font-weight: 400; color: var(--accent-label); }
.once__foot { margin-top: 1.2rem; color: var(--dim); font-size: 0.92rem; }

/* ---- 04 what we photograph: five photographs, one line each ---- */

.shotcats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.6rem;
}
.shotcat {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius, 4px);
  background: var(--ink);
  aspect-ratio: 4 / 3;
}
.shotcat--lead { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; min-height: 100%; }
.shotcat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms ease;
}
.shotcat:hover img { transform: scale(1.03); }
.shotcat__text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.4rem 1.2rem 1.1rem;
  color: #fff;
  background: linear-gradient(to top, rgba(8, 8, 7, 0.78), rgba(8, 8, 7, 0.0));
  display: grid;
  gap: 0.25rem;
}
.shotcat__text .mono { color: rgba(255, 255, 255, 0.72); font-size: 0.68rem; }
.shotcat__text h3 {
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.shotcat--lead .shotcat__text h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.shotcat__text p { font-size: 0.86rem; line-height: 1.45; color: rgba(255, 255, 255, 0.88); max-width: 34ch; }

@media (max-width: 900px) {
  .shotcats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shotcat--lead { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
  .shotcats { grid-template-columns: minmax(0, 1fr); }
  .shotcat { aspect-ratio: 3 / 2; }
}

/* ---- 03b fast, reliable, briefed ----
   A timeline in photographs (Trevor, 2026-09-12, late). A dark panel with
   three stops on one track: the week before, on the day, before you leave.
   Each stop is a photograph with its figure stamped across the bottom, the
   claim underneath. The track is the ::before of the list; the nodes are
   the ::before of each "when" label, so the diagram is pure CSS. */

.assure {
  --assure-pad: clamp(1.4rem, 3vw, 2.6rem);
  list-style: none;
  margin: 2.6rem 0 0;
  padding: var(--assure-pad);
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.2rem, 2.6vw, 2.4rem);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius, 4px);
  overflow: hidden;
  isolation: isolate;
}
/* a faint halftone corner so the panel matches the hero's texture */
.assure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.2px) 0 0 / 14px 14px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 45%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 45%);
  pointer-events: none;
  z-index: 0;
}
.assure__stop { position: relative; z-index: 1; display: grid; grid-template-rows: auto auto 1fr; gap: 0.9rem; align-content: start; }
/* the track: each stop draws its own run of the line, from its node to the
   next stop's node; the label sits on the panel's own ink so the line
   breaks cleanly around the words instead of crossing them */
.assure__stop::before {
  content: "";
  position: absolute;
  left: 0.35rem; right: calc(-1 * clamp(1.2rem, 2.6vw, 2.4rem));
  top: 0.55rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  z-index: 0;
}
.assure__stop:last-child::before { display: none; }
.assure__when {
  position: relative;
  z-index: 1;
  justify-self: start;
  padding-left: 1.4rem;
  padding-right: 0.7rem;
  background: var(--ink);
  min-height: 1.1rem;
  line-height: 1.1rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(var(--mono-size, 0.75rem) - 1px);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.assure__when::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0.7rem; height: 0.7rem;
  margin-top: -0.35rem;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
}
.assure__stop--lead .assure__when { color: var(--accent); }
.assure__stop--lead .assure__when::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(232, 92, 32, 0.22); }
.assure__frame {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius, 4px);
  background: rgba(255, 255, 255, 0.06);
}
.assure__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1200ms ease;
}
.assure__stop:hover .assure__frame img { transform: scale(1.04); }
.assure__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 7, 0.35) 0%, rgba(8, 8, 7, 0) 40%);
  pointer-events: none;
}
.assure__text { display: grid; gap: 0.4rem; align-content: start; }
.assure__k { color: rgba(255, 255, 255, 0.6); }
.assure__stop--lead .assure__k { color: var(--accent); }
.assure__text h3 {
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
}
.assure__text p { color: rgba(255, 255, 255, 0.72); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 900px) {
  .assure { grid-template-columns: minmax(0, 1fr); gap: 2rem 0; }
  .assure__stop::before { top: 0.55rem; bottom: -2rem; left: 0.35rem; right: auto; width: 1px; height: auto; }
  .assure__stop { grid-template-columns: minmax(0, 1fr); }
  .assure__frame { aspect-ratio: 16 / 10; }
}

/* ---- 05 photos your team can actually use ----
   ".afterwards", not ".uses": lockdown.css already owns a .uses grid with a
   grey ground and a border, which is what painted the earlier version.

   Two beats (Trevor, 2026-09-13): text left with a collage of five
   gallery photographs right; then "One event, 12 places it can go.":
   twelve CSS-drawn frames, four per use, across the full width, the five
   photographs spread across them. Every frame is a mock: a phone, a post, a
   page, an email, a report spread, a slide, a browser, a poster, a
   profile, a pull-up banner. The grey "text" is a repeating gradient;
   nothing is a real word. */

/* beat 1: the lede and the collage */
.afterlede {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2rem clamp(2rem, 4vw, 4.5rem);
  align-items: center;
  margin-top: 2.4rem;
}
.afterlede__copy { display: grid; gap: 1rem; max-width: 30rem; }
.afterlede__big {
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.afterlede__copy p:not(.afterlede__big) { color: var(--dim); font-size: 0.98rem; line-height: 1.55; }
.collage {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(6rem, 1fr));
  gap: 0.6rem;
  aspect-ratio: 4 / 3;
}
.collage__item { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius, 4px); background: rgba(8, 8, 7, 0.06); }
.collage__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms ease; }
.collage__item:hover img { transform: scale(1.03); }
.collage__item--a { grid-column: 1 / 3; grid-row: 1 / 3; }
.collage__item--b { grid-column: 3; grid-row: 1; }
.collage__item--c { grid-column: 4; grid-row: 1; }
.collage__item--d { grid-column: 3 / 5; grid-row: 2 / 4; }
.collage__item--e { grid-column: 1 / 3; grid-row: 3; }
.collage__item--d img { object-position: 50% 20%; }

/* beat 2: the twelve frames */
.afterwards { margin-top: clamp(2.4rem, 5vw, 4rem); display: grid; gap: 0.6rem; }

.spread { display: grid; gap: 0; }
/* one row per use: the words on the left, the four frames on the right */
.spread__group {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  gap: 1rem clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding: 1.8rem 0;
  /* a faint line between the three groups (Trevor, 2026-09-13). --line is
     the page's own faint rule; the earlier --line-strong never existed,
     so no divider painted */
  border-top: 1px solid var(--line);
}
.spread__group:last-child { border-bottom: 1px solid var(--line); }
.spread__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 0.7rem; align-items: baseline; }
.spread__n { color: var(--accent-label); }
.spread__head h3 {
  font-family: var(--font-disp);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.spread__head p { grid-column: 2; color: var(--dim); font-size: 0.92rem; line-height: 1.5; }
.spread__tiles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.2rem; align-items: flex-end; justify-content: space-between; }
.tile { display: grid; gap: 0.5rem; justify-items: start; }
.tile__label { font-size: 0.7rem; color: var(--dim); }
.tile__frame {
  --h: 12.5rem;
  position: relative;
  display: block;
  height: var(--h);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 6px 18px -12px rgba(8, 8, 7, 0.5);
  transition: transform 400ms ease, box-shadow 400ms ease;
}
.tile:hover .tile__frame { transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(8, 8, 7, 0.55); }
.tile__frame img {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  display: block;
}
/* fake text: a repeating gradient of grey lines */
.tile__frame::after {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  height: 0;
  background: repeating-linear-gradient(to bottom, rgba(8, 8, 7, 0.28) 0 2px, transparent 2px 6px);
  pointer-events: none;
}
/* 01 tell the story */
.tile--phone .tile__frame { aspect-ratio: 9 / 16; border-radius: 0.6rem; border: 3px solid var(--ink); background: var(--ink); }
.tile--phone .tile__frame img { top: 12%; height: 62%; object-position: 50% 10%; }
.tile--phone .tile__frame::before { content: ""; position: absolute; top: 3%; left: 35%; right: 35%; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.35); }
.tile--phone .tile__frame::after { top: 78%; height: 12%; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.45) 0 2px, transparent 2px 6px); }
.tile--post .tile__frame { aspect-ratio: 1 / 1; }
.tile--post .tile__frame::before { content: ""; position: absolute; top: 8%; left: 8%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.tile--post .tile__frame img { top: 28%; height: 72%; }
.tile--post .tile__frame::after { top: 9%; left: 26%; height: 12%; }
.tile--paper .tile__frame { aspect-ratio: 3 / 4; }
.tile--paper .tile__frame img { top: 10%; height: 42%; left: 8%; right: 8%; width: 84%; }
.tile--paper .tile__frame::after { top: 58%; height: 32%; }
.tile--mail .tile__frame { aspect-ratio: 3 / 4; }
.tile--mail .tile__frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10%; background: var(--ink); }
.tile--mail .tile__frame img { top: 10%; height: 45%; }
.tile--mail .tile__frame::after { top: 62%; height: 28%; }
/* 02 report on it */
.tile--spread .tile__frame { aspect-ratio: 3 / 2; }
.tile--spread .tile__frame::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(8, 8, 7, 0.25); z-index: 1; }
.tile--spread .tile__frame img { left: 6%; width: 41%; top: 10%; height: 80%; }
.tile--spread .tile__frame::after { left: 56%; right: 8%; top: 14%; height: 60%; }
.tile--doc .tile__frame { aspect-ratio: 3 / 4; }
.tile--doc .tile__frame::before { content: ""; position: absolute; top: 8%; left: 8%; width: 30%; height: 4px; background: var(--accent); }
.tile--doc .tile__frame img { top: 20%; left: 8%; width: 84%; height: 32%; }
.tile--doc .tile__frame::after { top: 58%; height: 30%; }
.tile--chat .tile__frame { aspect-ratio: 1 / 1; background: #f2efe9; border: 0; }
.tile--chat .tile__frame::before { content: ""; position: absolute; left: 8%; bottom: 10%; width: 14%; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.tile--chat .tile__frame img { left: 28%; right: 8%; width: 64%; top: 14%; height: 56%; border-radius: 0.5rem 0.5rem 0.5rem 0; }
.tile--chat .tile__frame::after { left: 28%; right: 28%; top: 76%; height: 10%; }
.tile--slide .tile__frame { aspect-ratio: 16 / 9; background: var(--ink); border: 0; }
.tile--slide .tile__frame img { left: 50%; width: 44%; top: 12%; height: 76%; }
.tile--slide .tile__frame::before { content: ""; position: absolute; left: 8%; top: 16%; width: 30%; height: 5px; background: var(--accent); }
.tile--slide .tile__frame::after { left: 8%; right: 60%; top: 34%; height: 40%; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.45) 0 2px, transparent 2px 6px); }
/* 03 keep using it */
.tile--browser .tile__frame { aspect-ratio: 16 / 10; }
.tile--browser .tile__frame::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14%; background: #eae6de; border-bottom: 1px solid rgba(8,8,7,0.12); background-image: radial-gradient(circle, rgba(8,8,7,0.35) 1.4px, transparent 1.6px); background-size: 7px 7px; background-repeat: repeat-x; background-position: 5px 40%; }
.tile--browser .tile__frame img { top: 14%; height: 60%; }
.tile--browser .tile__frame::after { top: 80%; height: 12%; }
.tile--poster .tile__frame { aspect-ratio: 2 / 3; }
.tile--poster .tile__frame img { height: 72%; object-position: 50% 12%; }
.tile--poster .tile__frame::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: var(--accent); z-index: 1; }
.tile--poster .tile__frame::after { z-index: 2; bottom: 8%; height: 12%; left: 10%; right: 30%; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.8) 0 2px, transparent 2px 6px); }
.tile--avatar .tile__frame { aspect-ratio: 1 / 1; background: #f2efe9; border: 0; }
.tile--avatar .tile__frame img { left: 25%; width: 50%; top: 12%; height: 50%; border-radius: 50%; object-position: 50% 8%; }
.tile--avatar .tile__frame::after { left: 22%; right: 22%; top: 70%; height: 16%; }
.tile--banner .tile__frame { --h: 13.8rem; aspect-ratio: 1 / 2.6; border-radius: 2px; }
.tile--banner .tile__frame img { height: 58%; }
.tile--banner .tile__frame::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: var(--ink); }
.tile--banner .tile__frame::after { top: 64%; height: 18%; left: 14%; right: 14%; }

@media (max-width: 1200px) {
  .tile__frame { --h: 10rem; }
  .tile--banner .tile__frame { --h: 11rem; }
}
@media (max-width: 1000px) {
  .tile__frame { --h: 8rem; }
  .tile--banner .tile__frame { --h: 8.8rem; }
  .afterlede { grid-template-columns: minmax(0, 1fr); }
  .afterlede__copy { max-width: 40rem; }
}
@media (max-width: 900px) {
  .spread__group { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .spread__head p { grid-column: 2; }
}
@media (max-width: 600px) {
  /* on a phone each group is one swipeable row, so the four frames keep
     their rhythm instead of wrapping three and one */
  .spread__tiles { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 0.4rem; margin-right: calc(var(--wrap-pad, 1.2rem) * -1); padding-right: var(--wrap-pad, 1.2rem); }
  /* the strip bleeds to the right edge on purpose; the section clips it so
     the page itself never scrolls sideways (2026-09-19: 3px overflow) */
  .afterwards { overflow-x: clip; }
  .spread__tiles .tile { flex: 0 0 auto; scroll-snap-align: start; }
  .tile__frame { --h: 5.6rem; }
  .tile--banner .tile__frame { --h: 6.2rem; }
}

/* ---- 06 packages: the duration switch ---- */

.durswitch {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 auto 2rem;
  padding: 0.3rem;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
}
.durswitch__btn {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
  transition: background 0.18s ease, color 0.18s ease;
}
.durswitch__btn:hover { color: var(--ink); }
/* Active state in the accent, ink type on it: 7:1, comfortably AA (white on
   this orange is 3.4:1 and would fail). */
.durswitch__btn[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.durswitch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.durswitch__note {
  text-align: center;
  color: var(--dim);
  font-size: 0.9rem;
  margin: -1rem auto 2rem;
  max-width: 56ch;
}

/* Tier cards are Lockdown's, with the "pool" block carrying a price and a
   turnaround instead of an annual figure. This page's cards have SIX
   subgrid rows (head, pool, benefits, bonus, bottom line, button) so the
   film bonus sits on the same row on every card (Trevor, 2026-09-12:
   "make sure that they line up"); the entry card carries an empty bonus
   row to keep the count. */
.pkgs .tier { grid-row: span 6; }
.pkgs .tier__pool__tag { min-height: 1.2em; }
.pkgs .tier__pool__pay { color: var(--ink); }
.pkgs .tier__list--rate li::before { content: ""; }
.pkgs .tier__list li b { font-weight: 600; }
.pkgs .tier .tier__inclabel { color: var(--dim); }
/* Both single-day prices on one card as a two-row rate card: label left,
   figure right on one baseline, a hairline between the rows. The multi-day
   block swaps in when the switch says so (data-multi is set by
   photography.js, so with JS off the two prices stand). */
.tier__prices { display: grid; }
.tier__price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
}
.tier__price + .tier__price { border-top: 1px solid var(--line); }
.pkgs .tier__prices .tier__pool__tag { white-space: nowrap; font-size: calc(var(--mono-size) - 1px); }
.pkgs .tier__prices .tier__pool__fig {
  font-size: clamp(1.55rem, 2.3vw, 1.95rem);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* The turnaround reads as a sentence, not as a second row of mono caps. */
.pkgs .tier .tier__pool .tier__pool__pay {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dim);
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
}
.pkgs .tier__pool { padding: 0.4rem 0 0.9rem; gap: 0; }
.tier__multi { display: none; gap: 0.25rem; }
.tiers .tier .tier__multi__off { color: var(--accent-label); }

.pkgs .tier[data-multi="1"] .tier__prices { display: none; }
.pkgs .tier[data-multi="1"] .tier__multi { display: grid; }
.pkgs .tier__pool__fig--plan {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  font-family: var(--font-disp);
  font-weight: 400;
}
.pkgs .tier[data-multi="1"] .tier__pool__pay { font-style: italic; }
/* The entry package's limitation, understated: dim, not accent. */
.pkgs .tier .tier__bonusval--quiet { color: var(--dim); }
/* The film bonus on the card: its own subgrid row, aligned to the top of
   that row across cards, a labelled block with an orange rule. */
.tier__gift {
  align-self: start;
  padding: 0.7rem 0 0;
  border-top: 1px solid var(--accent);
  display: grid;
  gap: 0.15rem;
}
.tier__gift--none { border-top: 0; padding: 0; }
.tiers .tier .tier__gift .tier__gift__tag { color: var(--accent-label); font-size: calc(var(--mono-size) - 1px); }
.tier__gift__title { font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.tier__gift__sub { font-size: 0.86rem; line-height: 1.4; color: var(--dim); }

.pkgfoot__terms { display: block; margin: 2rem auto 0; max-width: 62rem; color: var(--dim); text-align: center; }

@media (max-width: 860px) {
  .durswitch { width: 100%; }
  .durswitch__btn { flex: 1; padding: 0.55rem 0.4rem; font-size: 0.66rem; }
}

/* ---- 07 need more? the add-ons, mapped to half day and full day ---- */

.addons {
  margin: 2.4rem auto 0;
  max-width: 68rem;
  display: grid;
  gap: 2rem;
}
.addons__group { display: grid; }
.addons__head, .addons__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem 9rem;
  gap: 1rem;
  align-items: baseline;
}
.addons__head { padding-bottom: 0.6rem; border-bottom: 2px solid var(--ink); }
.addons__head > .mono:first-child { color: var(--accent-label); }
.addons__col { color: var(--dim); text-align: right; }
.addons__row { padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.addons__what { display: grid; gap: 0.15rem; }
.addons__what b { font-weight: 600; font-size: 0.98rem; }
.addons__what span { font-size: 0.86rem; line-height: 1.45; color: var(--dim); }
.addons__price {
  font-family: var(--font-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.addons__note { text-align: center; color: var(--dim); margin-top: 1.6rem; }
.nomaths {
  margin: 2.4rem auto 0;
  max-width: 68rem;
  padding: 1.8rem 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius, 4px);
  background: var(--paper);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.3rem 2rem;
  align-items: center;
}
.nomaths__line {
  font-family: var(--font-disp);
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.nomaths > p:not(.nomaths__line) { color: var(--dim); }
.nomaths .btn { grid-row: 1 / span 2; grid-column: 2; }
@media (max-width: 640px) {
  .nomaths { grid-template-columns: minmax(0, 1fr); }
  .nomaths .btn { grid-row: auto; grid-column: auto; margin-top: 0.8rem; }
}
@media (max-width: 640px) {
  /* the row stacks (Trevor, 2026-09-15): the name, then the two figures as
     labelled chips on one line, then the words at full width (no "More"
     toggle, his call). A row with the same figure for both lengths
     shows it once, "per event". The header row keeps only its group name. */
  .addons__head { grid-template-columns: minmax(0, 1fr); }
  .addons__head .addons__col { display: none; }
  .addons__row { display: grid; gap: 0.35rem 0.6rem; grid-template-columns: repeat(2, max-content) minmax(0, 1fr); grid-template-areas: "name name name" "half full ." "desc desc desc"; }
  /* the name, the figures, then the words: .addons__what dissolves so its
     children take their own rows */
  .addons__what { display: contents; }
  .addons__what b { grid-area: name; display: block; }
  .addons__what > span { grid-area: desc; display: block; margin-top: 0.2rem; }
  .addons__more { display: none; }
  .addons__row .addons__price { font-size: 0.92rem; text-align: left; white-space: nowrap; padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); }
  .addons__row .addons__price::before { font-family: var(--font-mono); font-weight: 400; font-size: calc(var(--mono-size, 0.75rem) - 2px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); margin-right: 0.4rem; }
  .addons__row .addons__price:nth-of-type(1) { grid-area: half; }
  .addons__row .addons__price:nth-of-type(1)::before { content: "Half day"; }
  .addons__row .addons__price:nth-of-type(2) { grid-area: full; }
  .addons__row .addons__price:nth-of-type(2)::before { content: "Full day"; }
  .addons__row--same .addons__price:nth-of-type(1)::before { content: "Per event"; }
  .addons__row--same .addons__price:nth-of-type(2) { display: none; }
  .addons__row .addons__price--wide { grid-area: half; grid-column: half-start / full-end; white-space: normal; }
  .addons__row .addons__price--wide::before { content: none; }
}
@media (min-width: 761px) {
  .addons__more { display: none; }
}

/* ---- 08 our work: photographs only, one caption per project ---- */

.portcards--solo { grid-template-columns: minmax(0, 1fr); }
.portcard--bare { padding: 0; border: 0; background: none; }
.portcards--solo .portcard + .portcard { margin-top: 2.6rem; }
.portcard--bare .portcard__head { margin-bottom: 0.4rem; }
.portcard--bare > p { color: var(--dim); margin-bottom: 1rem; }
/* the film strip's fold (2026-09-13): the first data-visible tiles show,
   the rest wait behind "View more videos" */
[data-fold]:not(.is-open) .portstrip > li:nth-child(n + 5) { display: none; }
.portfold {
  margin-top: 1rem; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 0.92rem; color: var(--ink);
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: underline; text-underline-offset: 4px;
}
.portfold .chev { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border: 1px solid var(--ink); border-radius: 50%; font-size: 0.9rem; transition: transform 300ms ease; }
.portfold[aria-expanded="true"] .chev { transform: rotate(45deg); }
.portfold[hidden] { display: none; }
.portstrip .mono em {
  font-style: normal;
  color: var(--accent-label);
  display: block;
  font-size: calc(var(--mono-size) - 1px);
  margin-bottom: 0.15rem;
}

/* ---- 10 how it works: four steps, not Lockdown's five ---- */
/* ---- 10 how it works: a four-step diagram (2026-09-13) ----
   One track, an icon on each stop, the moment above it. The connectors
   are the ::before of each step (a line to the next icon) and the ::after
   of the icon (the arrowhead), so the diagram is pure CSS. v1 is in
   ALTERNATES.md §1. */
.howflow {
  list-style: none;
  margin: clamp(2.2rem, 4.5vw, 3.4rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2.4vw, 2.2rem);
}
.howflow__step { position: relative; display: grid; gap: 0.6rem; align-content: start; padding-right: 0.5rem; }
.howflow__when { color: var(--accent-label); font-size: calc(var(--mono-size, 0.75rem) - 1px); letter-spacing: 0.06em; text-transform: uppercase; min-height: 1.2rem; }
.howflow__icon {
  position: relative;
  z-index: 1;
  width: 4.2rem; height: 4.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  color: var(--accent);
  margin: 0.2rem 0 0.4rem;
}
.howflow__icon svg { width: 2rem; height: 2rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* step 04: the picture sits centred in the circle; the clock is larger and
   hangs off its corner, filled with the circle's paper so it reads over
   the frame (Trevor, 2026-09-13) */
/* drawn at 2.3rem instead of 2rem, so the stroke is thinned in step to
   keep the same line weight as the other three icons */
.howflow__icon--gallery svg { width: 2.3rem; height: 2.3rem; stroke-width: 1.39; }
.howflow__icon--gallery .howflow__clock { fill: var(--paper); }
/* the connector: from the right edge of this icon to the next step's icon */
.howflow__step::before {
  content: "";
  position: absolute;
  left: 4.2rem; right: calc(-1 * clamp(1rem, 2.4vw, 2.2rem));
  top: calc(1.2rem + 0.6rem + 0.2rem + 2.1rem);
  height: 0;
  border-top: 1.5px dashed rgba(8, 8, 7, 0.35);
}
.howflow__step::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(1rem, 2.4vw, 2.2rem) - 0.3rem);
  top: calc(1.2rem + 0.6rem + 0.2rem + 2.1rem - 0.32rem);
  width: 0.66rem; height: 0.66rem;
  border-top: 1.5px solid var(--ink);
  border-right: 1.5px solid var(--ink);
  transform: rotate(45deg);
}
.howflow__step:last-child::before, .howflow__step:last-child::after { display: none; }
.howflow__n { color: var(--accent-label); }
.howflow__step h3 {
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.howflow__step p { color: var(--dim); font-size: 0.95rem; line-height: 1.55; max-width: 30ch; }
@media (max-width: 900px) {
  .howflow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem clamp(1rem, 2.4vw, 2.2rem); }
  .howflow__step:nth-child(2)::before, .howflow__step:nth-child(2)::after { display: none; }
}
@media (max-width: 520px) {
  .howflow { grid-template-columns: minmax(0, 1fr); gap: 1.8rem 0; }
  .howflow__step { padding-left: 5.4rem; min-height: 4.6rem; }
  .howflow__icon { position: absolute; left: 0; top: 1.4rem; width: 4rem; height: 4rem; margin: 0; }
  .howflow__step::before { left: 2rem; right: auto; top: 5.6rem; bottom: -1.8rem; height: auto; width: 0; border-top: 0; border-left: 1.5px dashed rgba(8, 8, 7, 0.35); }
  .howflow__step::after { display: none; }
}

/* ---- 11 the calendar bridge ---- */

.bridge {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  align-items: start;
  padding: 2.2rem 2.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius, 4px);
  background: var(--paper);
}
.bridge h2 {
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0.4rem 0 0.8rem;
}
.bridge p { color: var(--dim); line-height: 1.55; }
.bridge__list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 1.4rem;
}
.bridge__list li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.4;
}
.bridge__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}
.bridge__side { display: grid; gap: 1rem; align-content: start; }
.bridge__img { margin: 0; }
/* the Lockdown hero's frame, at the Lockdown hero's ratio; the shots inside
   are sprint.css's .hero__visual__shot (crossfade + push-in), driven here
   by photography.js */
.bridge__frame {
  position: relative;
  aspect-ratio: 1563 / 1006;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius, 4px);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.bridge__start {
  border-left: 3px solid var(--accent);
  padding: 0.3rem 0 0.3rem 1rem;
  display: grid;
  gap: 0.4rem;
}
.bridge__start .mono { color: var(--accent-label); }
.bridge__start p { color: var(--ink); }
/* v3 (2026-09-13): the button sits under the list, in the copy column,
   the way the year-board version had it */
.bridge__cta { margin-top: 1.4rem; }
.bridge__facts { margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.bridge__fact { display: grid; gap: 0.15rem; padding-left: 1rem; border-left: 3px solid var(--accent); }
.bridge__fact dt { color: var(--accent-label); }
.bridge__fact dd { margin: 0; color: var(--ink); font-size: 0.95rem; line-height: 1.5; }
.bridge__fact dd b { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
@media (max-width: 860px) {
  .bridge { grid-template-columns: minmax(0, 1fr); padding: 1.6rem 1.4rem; }
}
@media (max-width: 520px) {
  .bridge__list { grid-template-columns: minmax(0, 1fr); }
}


/* ---- 13 form: a two-column row for the short fields ---- */

.fld-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1rem;
}
@media (max-width: 560px) {
  .fld-row { grid-template-columns: minmax(0, 1fr); }
}
.terms {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--dim);
}
.terms .mono { color: var(--dim); }

/* Reduced motion: the photo hover is the only animated thing this file adds. */
@media (prefers-reduced-motion: reduce) {
  .durswitch__btn, .shotcat img { transition: none; }
  .shotcat:hover img { transform: none; }
}

/* ---- 13 the two-step enquiry (2026-09-12) ----
   Reuses .progress, .fstep, .fld and .opts from style.css. What is new:
   the step title, the "not confirmed yet" tick under a field, the multi-day
   block, the back button, the file field, and the confirmation state. */
.fstep { border: 0; padding: 0; margin: 0; min-width: 0; }
.fstep__title {
  display: block;
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 1.2rem;
  padding: 0;
}
.fld .tbc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--dim-ink, var(--dim));
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-weight: 400;
}
.fld .tbc input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.fld input[type="date"], .fld input[type="number"] {
  width: 100%;
  font: inherit;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(8, 8, 7, 0.25);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  min-height: 48px;
}
.fld input[type="date"]:disabled { opacity: 0.45; }
.fld input[type="date"]:focus-visible, .fld input[type="number"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.fld.bad input[type="date"], .fld.bad input[type="number"] { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--ink); }
.multiday {
  margin: -0.2rem 0 1.2rem;
  padding: 1rem 1rem 0.2rem;
  border: 1px dashed rgba(8, 8, 7, 0.3);
  border-radius: var(--radius);
}
.multiday__label { display: block; margin-bottom: 0.9rem; color: var(--dim-ink, var(--dim)); }
.liveincl { margin: -0.6rem 0 1.2rem; }
.fld--file input[type="file"] {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 0.7rem;
  border: 1px dashed rgba(8, 8, 7, 0.3);
  border-radius: var(--radius);
  background: #fff;
}
.fld--file .micro { margin-top: 0.45rem; }
.fnav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }
.fnav .btn { margin-top: 0; }
.fback {
  background: none;
  border: 0;
  padding: 0.6rem 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  color: var(--dim-ink, var(--dim));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.fback:hover { color: var(--ink); }
.btn.is-busy { opacity: 0.6; pointer-events: none; }
.fdone { display: grid; gap: 0.9rem; }
/* The project's known trap: an author display rule beats the hidden
   attribute, so the confirmation showed under the live form. */
.fdone[hidden], .fdone__cal[hidden] { display: none; }
.fdone > .mono { color: var(--accent-label); }
.fdone h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.fdone > p { color: var(--dim-ink, var(--dim)); line-height: 1.55; }
.fdone__label { margin-top: 0.6rem; color: var(--dim-ink, var(--dim)); }
.fdone__steps { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.4rem; font-size: 0.95rem; line-height: 1.45; }
.fdone__cal {
  margin-top: 1rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid rgba(8, 8, 7, 0.18);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  display: grid;
  gap: 0.5rem;
  background: rgba(8, 8, 7, 0.03);
}
.fdone__cal .mono { color: var(--accent-label); }
.fdone__cal p { font-size: 0.92rem; line-height: 1.5; color: var(--dim-ink, var(--dim)); }
@media (max-width: 560px) {
  .fnav { flex-direction: column-reverse; align-items: stretch; }
  .fnav .btn { width: 100%; justify-content: space-between; }
}

/* ---- the package snapshot (2026-09-12) ----
   Opened by a card button. Same dialog chrome as the lightbox (#sbx in
   sprint.css): scrim, panel, mono bar. Two columns: choices on the left,
   the snapshot on the right. One exit. */
body.pkgcfg-open { overflow: hidden; }
.pkgcfg { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; }
.pkgcfg[hidden] { display: none; }
.pkgcfg__scrim { position: absolute; inset: 0; background: rgba(8, 8, 7, 0.55); }
.pkgcfg__panel {
  position: relative;
  width: min(66rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius, 4px);
  box-shadow: 0 30px 80px rgba(8, 8, 7, 0.35);
}
.pkgcfg__bar {
  position: sticky; top: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.pkgcfg__bar .mono { color: var(--dim); }
.pkgcfg__close { background: none; border: 0; cursor: pointer; font: inherit; font-family: var(--font-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); padding: 0.4rem 0; }
.pkgcfg__body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0; }
.pkgcfg__left { padding: 1.4rem 1.6rem 1.8rem; border-right: 1px solid var(--line); }
.pkgcfg__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.pkgcfg__tab {
  position: relative;
  background: none; border: 1px solid var(--line); border-radius: var(--radius, 4px);
  padding: 0.85rem 0.8rem; cursor: pointer; font: inherit; font-size: 0.92rem; font-weight: 600; text-align: left; color: var(--ink);
}
.pkgcfg__tab[aria-selected="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pkgcfg__tab--featured[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in srgb, var(--accent) 4%, var(--paper)); }
/* Three classes: the flag is a .mono element and `:root .mono` (0,2,0) wins
   the colour fight against one class, leaving orange text on an orange
   block (the trap lockdown.css names). */
.pkgcfg .pkgcfg__tab .pkgcfg__tab__flag {
  position: absolute; top: -0.6rem; right: 0.6rem;
  background: var(--accent-label); color: #fff;
  font-size: 0.6rem; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: var(--radius, 4px);
}
.pkgcfg__who { margin: 0.9rem 0 1.2rem; color: var(--dim); font-size: 0.92rem; line-height: 1.5; }
.pkgcfg__dur { display: inline-flex; gap: 0.3rem; padding: 0.25rem; border: 1px solid var(--line); border-radius: 999px; }
.pkgcfg__durbtn { border: 0; background: none; cursor: pointer; padding: 0.5rem 0.9rem; border-radius: 999px; font-family: var(--font-mono); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.pkgcfg__durbtn[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.pkgcfg__labelrow { display: flex; justify-content: space-between; align-items: baseline; margin: 1.5rem 0 0.6rem; }
.pkgcfg__label { display: block; margin: 0; color: var(--dim); }
.pkgcfg__reset { background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.82rem; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.pkgcfg__reset:hover { color: var(--ink); }
.pkgcfg__reset[hidden] { display: none; }
.pkgcfg__addons { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pkgcfg__addon { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.pkgcfg__addon.is-on { background: color-mix(in srgb, var(--accent) 4%, transparent); margin: 0 -0.6rem; padding-left: 0.6rem; padding-right: 0.6rem; }
.pkgcfg__addon.is-included { opacity: 0.85; }
.pkgcfg__addon.is-unavailable { opacity: 0.45; }
.pkgcfg__addon[hidden] { display: none; }
.pkgcfg__group { list-style: none; padding: 1rem 0 0.35rem; color: var(--accent-label); font-size: 0.66rem; border-bottom: 1px solid var(--line); }
.pkgcfg__group:first-child { padding-top: 0.2rem; }
.pkgcfg__addon--sub { padding-left: 1.4rem; }
.pkgcfg__addon--sub::before { content: ""; position: absolute; left: 0.45rem; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.pkgcfg__addon { position: relative; }
.pkgcfg__addon--station { flex-wrap: wrap; }
.pkgcfg__addon__main--static { cursor: default; grid-template-columns: minmax(0, 1fr); }
.pkgcfg__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 100%; margin-top: 0.2rem; }
.pkgcfg__chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 0.88rem; background: var(--paper); }
.pkgcfg__chip input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); }
.pkgcfg__chip.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--paper)); }
.pkgcfg__chip__price { font-size: 0.66rem; color: var(--dim); }
.pkgcfg__addon.is-unavailable .pkgcfg__addon__main { cursor: not-allowed; }
.pkgcfg__addon__main { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.1rem 0.7rem; align-items: center; cursor: pointer; min-width: 0; flex: 1 1 auto; }
.pkgcfg__addon__main input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); grid-row: span 2; }
.pkgcfg__addon__name { font-size: 0.95rem; font-weight: 600; }
.pkgcfg__addon__note { font-size: 0.82rem; color: var(--dim); line-height: 1.4; }
.pkgcfg__addon__right { display: flex; align-items: center; gap: 0.8rem; flex: none; }
.pkgcfg__addon__qty { display: inline-flex; align-items: center; gap: 0.2rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem; }
.pkgcfg__addon__qty[hidden] { display: none; }
.pkgcfg__addon__qty button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); }
.pkgcfg__addon__qty button:hover { background: rgba(8, 8, 7, 0.08); }
.pkgcfg__addon__qty [data-cfg-count] { min-width: 1.2rem; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; }
.pkgcfg__addon__price {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; line-height: 1.35;
  color: var(--ink); text-align: right;
  /* short labels ("R2,000 per hour, per person") stay on one line at their
     own width; the long first-time-bonus sentence ("Included as free
     first-time bonus. R5,000 per extra") wraps within this cap instead of
     forcing one unbroken line, which was starving .pkgcfg__addon__main
     down to a sliver (2026-09-13 fix) */
  min-width: 7.5rem; max-width: 11.5rem; white-space: normal;
}
.pkgcfg__addon__price.is-included { color: var(--accent-label); }
.pkgcfg__snap { padding: 1.4rem 1.6rem 1.8rem; background: #F6F6F2; display: grid; gap: 0.6rem; align-content: start; position: sticky; top: 0; align-self: start; }
.pkgcfg__snap__h { font-family: var(--font-disp); font-weight: 400; text-transform: uppercase; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.05; letter-spacing: -0.015em; }
.pkgcfg__snap__dur { color: var(--dim); }
.pkgcfg__snap__fig { display: grid; gap: 0.1rem; padding: 0.8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pkgcfg__snap__fig .mono { color: var(--dim); }
.pkgcfg__snap__fig strong { font-size: clamp(2rem, 3.4vw, 2.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.pkgcfg__snap__multi { padding: 0.8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--font-disp); font-size: 1.2rem; line-height: 1.2; }
.pkgcfg__snap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.92rem; }
.pkgcfg__snap__list li { position: relative; padding-left: 1rem; }
.pkgcfg__snap__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
.pkgcfg__snap__bonus { border-top: 1px solid var(--accent); padding-top: 0.6rem; display: grid; gap: 0.15rem; }
.pkgcfg__snap__bonus .mono { color: var(--accent-label); }
.pkgcfg__snap__bonus p { font-size: 0.9rem; line-height: 1.4; }
.pkgcfg__snap__fine { font-size: 0.8rem; color: var(--dim); }
.pkgcfg__go { margin-top: 0.6rem; justify-content: space-between; }
.pkgcfg__snap .micro { color: var(--dim); font-size: 0.82rem; }
@media (max-width: 860px) {
  .pkgcfg { padding: 0; align-items: end; }
  .pkgcfg__panel { max-height: 100vh; border-radius: 0; }
  .pkgcfg__body { grid-template-columns: minmax(0, 1fr); }
  .pkgcfg__left { border-right: 0; border-bottom: 1px solid var(--line); }
  .pkgcfg__snap { position: static; }
  .pkgcfg__tabs { grid-template-columns: minmax(0, 1fr); }
  .pkgcfg__addon { flex-wrap: wrap; }
  .pkgcfg__addon__right { width: 100%; justify-content: space-between; }
  .pkgcfg__addon__price { min-width: 0; }
}
/* the order carried into the form: a small receipt, not a run-on line */
.selstrip {
  margin: 0.9rem 0 0.2rem;
  padding: 0.9rem 1.1rem 1rem;
  border: 1px solid rgba(8, 8, 7, 0.18);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
}
.selstrip[hidden] { display: none; }
.selstrip__head { display: flex; justify-content: space-between; align-items: baseline; }
.selstrip__head .mono { color: var(--accent-label); }
.selstrip__change { color: var(--dim-ink, var(--dim)); font-size: 0.85rem; }
.selstrip__title { font-weight: 600; font-size: 1rem; }
.selstrip__items { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem 1.2rem; }
.selstrip__items li { position: relative; padding-left: 0.9rem; color: var(--dim-ink, var(--dim)); line-height: 1.4; }
.selstrip__items li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--accent); }
.selstrip__from { margin-top: 0.4rem; padding-top: 0.5rem; border-top: 1px solid rgba(8, 8, 7, 0.12); display: flex; align-items: baseline; gap: 0.5rem; }
.selstrip__from .mono { color: var(--dim-ink, var(--dim)); }
.selstrip__from b { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.selstrip__from[hidden] { display: none; }
.selstrip__text[hidden] { display: none; }
@media (max-width: 560px) { .selstrip__items { grid-template-columns: minmax(0, 1fr); } }

/* package names: the friendly name on top, the descriptive one under it */
.opt .opt__sub { display: block; font-size: 0.78rem; font-weight: 400; color: var(--dim-ink, var(--dim)); }
.pkgcfg__tab { display: grid; gap: 0.1rem; }
.pkgcfg__tab__sub { font-size: 0.72rem; font-weight: 400; color: var(--dim); }

/* more than one day: the "pick the other dates" affordance under the date,
   and the readout of the days once they are picked */
.fld .addday {
  display: block; margin-top: 0.45rem; padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 0.85rem;
  color: var(--accent-label); text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.fld .addday[hidden] { display: none; }
.fld .pickdays { margin: 0.5rem 0 0; padding: 0.55rem 0.7rem; border-left: 3px solid var(--accent); background: rgba(8, 8, 7, 0.04); line-height: 1.45; }
.fld .pickdays[hidden] { display: none; }
.fld .pickdays button { background: none; border: 0; padding: 0; margin-left: 0.3rem; cursor: pointer; font: inherit; color: var(--accent-label); text-decoration: underline; text-underline-offset: 3px; }
.orderednote { margin: -0.2rem 0 1rem; color: var(--dim-ink, var(--dim)); }
.orderednote[hidden] { display: none; }

/* the multi-day calendar inside the builder */
/* the multi-day flow reorders the left column: days, lengths, package, add-ons */
.pkgcfg__left { display: flex; flex-direction: column; }
.pkgcfg__sec { display: block; }
.pkgcfg__sec[hidden] { display: none; }
.pkgcfg__left[data-cfg-mode="single"] .pkgcfg__sec--pkg { order: 0; }
.pkgcfg__left[data-cfg-mode="single"] .pkgcfg__dur { order: 1; margin-top: 0.2rem; }
.pkgcfg__left[data-cfg-mode="single"] .pkgcfg__sec--addons { order: 2; }
.pkgcfg__left[data-cfg-mode="multi"] .pkgcfg__dur { order: 0; }
.pkgcfg__left[data-cfg-mode="multi"] .pkgcfg__sec--cal { order: 1; }
.pkgcfg__left[data-cfg-mode="multi"] .pkgcfg__sec--days { order: 2; }
.pkgcfg__left[data-cfg-mode="multi"] .pkgcfg__sec--pkg { order: 3; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.pkgcfg__left[data-cfg-mode="multi"] .pkgcfg__sec--addons { order: 4; }
.pkgcfg__step { display: flex; align-items: baseline; gap: 0.7rem; margin: 1.2rem 0 0.6rem; color: var(--ink); font-size: 0.72rem; }
.pkgcfg__step span { color: var(--accent-label); }
.pkgcfg__step[hidden] { display: none; }
.pkgcfg__sec--days { margin-top: 0.2rem; }
.pkgcfg__cal { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius, 4px); background: var(--paper); display: grid; gap: 0.7rem; }
.pkgcfg__cal[hidden] { display: none; }
.pkgcfg__cal__head { display: flex; justify-content: space-between; align-items: center; }
.pkgcfg__cal__month { font-family: var(--font-disp); font-size: 1.1rem; background: none; border: 0; cursor: pointer; color: var(--ink); padding: 0.2rem 0.6rem; border-radius: 6px; }
.pkgcfg__cal__month:hover:not(:disabled) { background: rgba(8, 8, 7, 0.06); }
.pkgcfg__cal__month:disabled { cursor: default; }
.pkgcfg__cal__grid[data-cal-view="months"], .pkgcfg__cal__grid[data-cal-view="years"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pkgcfg__cal__cell { padding: 0.8rem 0.4rem; border: 1px solid transparent; border-radius: 6px; background: rgba(8, 8, 7, 0.04); cursor: pointer; font: inherit; font-size: 0.9rem; color: var(--ink); }
.pkgcfg__cal__cell:hover:not(:disabled) { border-color: var(--ink); }
.pkgcfg__cal__cell.is-current { box-shadow: inset 0 0 0 1px var(--accent); }
.pkgcfg__cal__cell:disabled { opacity: 0.3; cursor: not-allowed; }
.pkgcfg__cal__nav { background: none; border: 1px solid var(--line); border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font: inherit; color: var(--ink); }
.pkgcfg__cal__nav:hover { border-color: var(--ink); }
.pkgcfg__cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.pkgcfg__cal__wd { text-align: center; font-size: 0.62rem; color: var(--dim); padding-bottom: 0.2rem; }
.pkgcfg__cal__day { aspect-ratio: 1; border: 1px solid transparent; border-radius: 6px; background: rgba(8, 8, 7, 0.04); cursor: pointer; font: inherit; font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.pkgcfg__cal__day:hover:not(:disabled) { border-color: var(--ink); }
.pkgcfg__cal__day:disabled { opacity: 0.3; cursor: not-allowed; }
.pkgcfg__cal__day.is-on { background: var(--accent); color: var(--ink); font-weight: 700; }
.pkgcfg__cal__day.is-half { background: color-mix(in srgb, var(--accent) 45%, var(--paper)); }
.pkgcfg__cal__count { color: var(--accent-label); }
.pkgcfg__daylist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pkgcfg__dayrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: center; padding: 0.4rem 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.pkgcfg__dayrow__len { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 999px; }
.pkgcfg__dayrow__len button { border: 0; background: none; cursor: pointer; padding: 0.3rem 0.7rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); }
.pkgcfg__dayrow__len button[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.pkgcfg__dayrow__drop { background: none; border: 0; cursor: pointer; font: inherit; font-size: 1.1rem; color: var(--dim); line-height: 1; padding: 0 0.2rem; }
.pkgcfg__dayrow__drop:hover { color: var(--ink); }
.pkgcfg__go:disabled { opacity: 0.45; pointer-events: none; }
.multiday__days { font-size: 0.92rem; line-height: 1.5; margin: -0.4rem 0 0.9rem; color: var(--ink); }
.multiday__days[hidden] { display: none; }


/* ---------------- the twelve frames, sized to the row (2.26.0, 2026-09-20) ----------------
   Trevor: "the presentation diagram goes below the annual report; give it a
   bit more padding and space". The frames are sized by HEIGHT (--h) and get
   their width from their aspect ratio, so the "Report on it" row, the widest
   of the three (a 3:2 spread, a page, a square and a 16:9 slide, 5.03 heights
   plus three gaps), overflowed its column between about 1200 and 1400 wide
   and wrapped the slide onto a second line. The height is now derived from
   the row's own width (a container query on the tile list) and capped at the
   old value, so all twelve frames scale together and every row stays one
   row. The gaps between frames and around each group open up a little too. */
.spread__group { padding: 2.2rem 0; }
.spread__tiles { container-type: inline-size; gap: 1rem 1.4rem; }
.tile__frame { --h: min(12.5rem, calc((100cqw - 4.6rem) / 5.15)); }
.tile--banner .tile__frame { --h: min(13.8rem, calc((100cqw - 4.6rem) / 5.15 * 1.1)); }
@media (max-width: 1200px) {
  .tile__frame { --h: min(10rem, calc((100cqw - 4.6rem) / 5.15)); }
  .tile--banner .tile__frame { --h: min(11rem, calc((100cqw - 4.6rem) / 5.15 * 1.1)); }
}
@media (max-width: 1000px) {
  .tile__frame { --h: min(8rem, calc((100cqw - 4.6rem) / 5.15)); }
  .tile--banner .tile__frame { --h: min(8.8rem, calc((100cqw - 4.6rem) / 5.15 * 1.1)); }
}
@media (max-width: 600px) {
  /* the swipeable strip: fixed heights again, the row is allowed to be wider than the screen */
  .tile__frame { --h: 5.6rem; }
  .tile--banner .tile__frame { --h: 6.2rem; }
}