/* ==========================================================================
   EVENT PHOTOGRAPHY AND VIDEO
   Page-specific styles for /event-photography-and-video/ (2026-10-14).

   Loaded after style.css, sprint.css, lockdown.css, photography.css and
   reel.css, and only by this page. Every selector is scoped to markup only
   this page has (.hero--pv, #eventday, .pkgcmp, .fvsplit, .fvplayer,
   #more .morestrip, .offerbadge), so nothing here can reach another page.

     01  the hero: smaller type, a large photograph; the FREE offer pill
     03  the event day: six evenly spaced stops and three reassurance points
     04  our work: the film strip shows two rows of four
     05  the packages: a comparison table with a slim sticky head; chips on a phone
     06  the first-booking film player beside its copy (reel.css component)
     07  the add-ons as two rows of name chips
     08  how it works: about 15% smaller, connectors that clear the circles
     09  the FAQ under a standard chead

   1.1.0 (round 2, Trevor on a 16-inch MacBook): the hero and the
   first-booking section about 18% smaller with more space around them; the
   timeline down to five identical stops; the table's sticky head down to a
   thin bonus line and the package names, with prices and buttons moved to
   the bottom row.

   1.2.0 (round 3): a larger, taller hero photograph (desktop and phone); the
   event day rebuilt on a linear 09:00 to 16:30 scale with alternating labels
   (vertical and time-proportional on a phone); the "Best for" row gone and a
   small "Recommended" tag under Live Photo Desk's button; the first-booking
   bullets replaced by a voucher with a FREE stamp; six add-on chips in two
   rows of three; How it works connectors with clear gaps and visible
   arrowheads; the FAQ heading on the standard chead. The "Photos Your Team
   Can Actually Use." section was removed from the page; its styles live in
   photography.css (shared with /event-photography/), so nothing here changed
   for it.

   1.3.0 (round 4): the hero badge became a pill with a solid FREE tag; the
   event day has six evenly spaced stops (no time scale, no hour ticks) with
   "Next day" back on the rail and a three-point reassurance row; the film
   strip folds after eight; the first-booking section is round 2's copy and
   bullets again (the voucher and its styles are gone); How it works about
   15% smaller with smaller step titles. Later in round 4: the table's group
   titles float under its sticky head, the price row has more air, and the
   form names the package picked in the table (.pickedline).

   Mono elements take --accent-label from style.css's `:root .mono` (0,2,0);
   rules that need another colour use three classes. No animation here: the
   page is complete at rest, and nothing new fades in on scroll.
   ========================================================================== */

/* ---- 01 hero ----
   This page's hero only (.hero--pv). sprint.css sets the h1 at clamp(1.55rem, 2.6vw, 2.35rem) and the
   sub at clamp(1.08rem, 1.6vw, 1.35rem); here both run at about 82%. Round 3: the copy column keeps
   its width and layout, and the photograph takes the rest of the row, in a taller 4:3 frame (about
   twice round 2's area); on a phone it runs edge to edge at 5:4. */
.hero--pv .hero__copy h1 { font-size: clamp(1.35rem, 2.15vw, 1.95rem); line-height: 1.18; }
.hero--pv .hero__copy .sub { font-size: clamp(0.98rem, 1.27vw, 1.12rem); line-height: 1.55; }
@media (min-width: 901px) {
  #main .hero--pv .hero__center--split {
    grid-template-columns: minmax(0, 29rem) minmax(0, 1fr);
    width: min(100%, 1320px);
    gap: clamp(2.5rem, 5vw, 5.5rem);
  }
  #main .hero--pv .hero__center--split .hero__copy { max-width: 29rem; }
  #main .hero--pv .hero__visual { width: min(100%, 48rem); justify-self: end; }
  #main .hero--pv .hero__visual__frame { aspect-ratio: 4 / 3; max-height: calc(100vh - 190px); min-height: 22rem; }
  .hero--pv .hero__center { padding-top: 120px; padding-bottom: 5.4rem; }
  .hero--pv .hero__meta { margin-top: 1.3rem; }
}
@media (min-width: 901px) and (max-height: 760px) {
  /* a short laptop screen (1280 x 720): a little less air above, so the button stays in view */
  .hero--pv .hero__center { padding-top: 96px; padding-bottom: 3.6rem; }
}
@media (max-width: 900px) {
  #main .hero--pv .hero__visual__frame { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  /* edge to edge on a phone: the gutter is var(--gutter) on .hero__center */
  #main .hero--pv .hero__visual { justify-self: stretch; width: calc(100% + 2 * var(--gutter)); max-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  #main .hero--pv .hero__visual__frame { aspect-ratio: 5 / 4; border-radius: 0; border-left: 0; border-right: 0; }
}

/* the attraction offer, under the price line. Round 4: a compact pill, a solid accent FREE tag and one
   line of text, no icon. The tag is a .mono, so its colour rule carries three classes. */
.offerbadge {
  display: inline-flex; align-items: center; gap: 0.6rem; max-width: 100%;
  margin-top: 1rem; padding: 0.22rem 0.85rem 0.22rem 0.22rem;
  border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, #fff);
  color: var(--ink);
  font-size: 0.9rem; font-weight: 500; line-height: 1.3; white-space: nowrap;
}
.hero--pv .offerbadge .offerbadge__tag {
  flex: none; padding: 0.22rem 0.45rem 0.18rem; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: calc(var(--mono-size) - 3px); font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
}
.offerbadge__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hero--pv .hero__cta { margin-top: 1.35rem; }
/* style.css's stacked hero (under 900px) puts the price line after the button. Here the price line
   and the badge sit straight under the photograph, so the offer is inside the first screen of a
   390 x 844 phone; the sub and the button follow, the secondary link stays last. */
@media (max-width: 900px) {
  .hero--pv .hero__center--split > .hero__copy > .hero__meta { order: 4; margin-top: 0.15rem; }
  .hero--pv .hero__center--split > .hero__copy > .offerbadge { order: 4; margin-top: 0; justify-self: start; }
  .hero--pv .hero__center--split > .hero__copy > .sub { order: 5; }
  .hero--pv .hero__center--split > .hero__copy > .hero__cta { order: 6; margin-top: 0.2rem; }
  .hero--pv .hero__center--split > .hero__copy > p:last-child { order: 7; }
}
@media (max-width: 400px) {
  .offerbadge { font-size: 0.84rem; gap: 0.5rem; padding-right: 0.7rem; }
}

/* ---- 03 the event day ----
   Round 4: six stops, evenly spaced (--p: 0, 0.2 ... 1 along the rail), labels alternating below and
   above, starting below. The list is a three-row grid (labels above, the rail, labels below); every
   stop spans all three rows as a subgrid at the full width, so its node and label are placed by a
   margin from --p: the node centred at its point, the label centred on the node and clamped so the
   first starts at the left edge and the last ends at the right (no clipping at any width). The rail
   is solid to 16:30 and dashed to "Next day": the night in between.
   Under 1000px: a vertical rail on the left, the stops evenly spaced, the last stretch dashed. */
#eventday .chead__lede { max-width: min(100%, 760px); font-size: clamp(1rem, 1.4vw, 1.22rem); line-height: 1.55; }
#eventday .chead__title { font-size: clamp(1.6rem, 2.85vw, 2.65rem); }  /* scaled to match the first-booking section (2026-10-14) */
.dayline { --r: 1.5rem; --lw: 16rem; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.dayline__list {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto calc(2 * var(--r)) auto;
}
/* the rail, from the first node's centre to the last one's: solid for the day, dashed overnight */
.dayline__list::before {
  content: ""; position: relative; z-index: 0; grid-column: 1; grid-row: 2; align-self: center;
  margin: 0 var(--r); height: 2px;
  background:
    linear-gradient(90deg, var(--ink) 80%, transparent 80%),
    repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 11px);
}
.dayline__stop {
  position: relative; z-index: 1;
  grid-column: 1; grid-row: 1 / span 3;
  display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
  pointer-events: none;
}
.dayline__node, .dayline__label { pointer-events: auto; }
.dayline__node {
  grid-row: 2; align-self: center; justify-self: start;
  margin-left: calc((100% - 2 * var(--r)) * var(--p));
  width: calc(2 * var(--r)); height: calc(2 * var(--r)); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 1.5px solid var(--ink); color: var(--accent-label);
}
.dayline__node svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dayline__label {
  justify-self: start; width: var(--lw); max-width: 100%;
  margin-left: clamp(0px, calc(var(--r) + (100% - 2 * var(--r)) * var(--p) - var(--lw) / 2), calc(100% - var(--lw)));
  display: grid; gap: 0.3rem; align-content: start; justify-items: center; text-align: center;
}
.dayline__stop--below .dayline__label { grid-row: 3; align-self: start; padding-top: 1rem; }
.dayline__stop--above .dayline__label { grid-row: 1; align-self: end; padding-bottom: 1rem; }
.dayline__stop--first .dayline__label { justify-items: start; text-align: left; }
.dayline__stop--last .dayline__label { justify-items: end; text-align: right; }
.dayline__t {
  display: block;
  font-family: var(--font-disp); font-weight: 400; font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ink);
}
.dayline__label h3 {
  font-family: var(--font-disp); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1rem, 1.25vw, 1.15rem); line-height: 1.15; letter-spacing: -0.005em;
}
.dayline__label p { color: var(--dim); font-size: 0.93rem; line-height: 1.5; }
@media (max-width: 1200px) {
  .dayline { --lw: 13rem; }
}
@media (max-width: 1000px) {
  .dayline { --r: 1.4rem; }
  .dayline__list { display: block; max-width: 34rem; margin: 0 auto; }
  .dayline__list::before { display: none; }
  .dayline__stop {
    display: grid; grid-template-rows: none; grid-template-columns: calc(2 * var(--r)) minmax(0, 1fr); column-gap: 1.1rem;
    align-items: start; pointer-events: auto; min-height: 7.4rem;
  }
  .dayline__stop--last { min-height: 0; }
  .dayline__node { grid-column: 1; grid-row: 1; align-self: start; margin: 0; }
  .dayline__node svg { width: 1.3rem; height: 1.3rem; }
  .dayline__stop .dayline__label {
    grid-column: 2; grid-row: 1; align-self: start; width: auto; margin: 0; padding: 0.15rem 0 1.4rem;
    text-align: left; justify-items: start;
  }
  .dayline__t { font-size: clamp(1.2rem, 4.6vw, 1.45rem); }
  /* the rail to the next node's centre; dashed into "Next day" */
  .dayline__stop::before {
    content: ""; position: absolute; z-index: -1; left: calc(var(--r) - 1px); width: 2px;
    top: var(--r); bottom: calc(-1 * var(--r)); background: var(--ink);
  }
  .dayline__stop:has(+ .dayline__stop--next)::before { background: repeating-linear-gradient(180deg, var(--ink) 0 6px, transparent 6px 11px); }
  .dayline__stop--last::before { display: none; }
}
.dayassure {
  list-style: none; margin: clamp(2.6rem, 5vw, 3.8rem) 0 0; padding: clamp(1.4rem, 2.4vw, 2rem) 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem clamp(1rem, 2.4vw, 2.2rem);
}
.dayassure li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.dayassure__icon { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; color: var(--accent-label); background: var(--paper); }
.dayassure__icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dayassure h3 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.3; letter-spacing: -0.01em; text-transform: none; padding-top: 0.15rem; }
.dayassure p { color: var(--dim); font-size: 0.92rem; line-height: 1.5; margin-top: 0.15rem; }
@media (max-width: 760px) {
  .dayassure { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-left: auto; margin-right: auto; }
}

/* ---- 05 the packages: the comparison table ----
   A real table (explicit ARIA roles too, so the phone layout's display: block/grid keeps the
   semantics). The head is sticky under the site header (--header-h, measured by nav-theme.js) and,
   being the table's own head, lets go where the table ends. Round 2: the head is only a thin bonus
   line and the package names (under ~110px with the nav excluded); prices and the "Select package"
   buttons are the bottom row. Round 3: the "Best for" row is gone, and a small "Recommended" pill sits
   on Live Photo Desk's bottom edge, under its button. Live Photo Desk, the recommended
   package, is shown only by its column: tinted all the way down and outlined in the accent. */
.pkgcmp__wrap { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.pkgcmp {
  --pc-bg: #F6F6F2;                                         /* .surface--light, so the stuck head is opaque */
  --pc-rec: color-mix(in srgb, var(--accent) 7%, #F6F6F2);
  width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  font-size: 0.95rem; line-height: 1.4;
}
.pkgcmp__c0 { width: 22%; }
.pkgcmp thead { position: sticky; top: var(--header-h, 72px); z-index: 20; }
.pkgcmp th, .pkgcmp td { padding: 0.75rem 0.9rem; text-align: left; vertical-align: middle; background: var(--pc-bg); font-weight: 400; }
.pkgcmp .is-rec { background: var(--pc-rec); border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); }

/* the thin strip over the names: the first-booking bonus floats with them */
.pkgcmp__bonusrow td { padding: 0; background: var(--ink); }
.pkgcmp__bonus {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.3rem 1rem; color: var(--paper); font-size: 0.84rem; line-height: 1.3; text-align: center; white-space: nowrap;
}
.pkgcmp__bonus b { color: var(--accent); font-weight: 600; }
.pkgcmp__bonusicon svg { display: block; width: 1rem; height: 1rem; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }

/* one row of names */
.pkgcmp__heads > * { padding: 0.7rem 0.9rem 0.65rem; vertical-align: bottom; border-bottom: 1.5px solid var(--ink); }
.pkgcmp__heads > .is-rec { border-top: 2px solid var(--accent); }
.pkgcmp__name {
  display: block;
  font-family: var(--font-disp); font-weight: 400; text-transform: uppercase;
  font-size: clamp(0.98rem, 1.3vw, 1.2rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--ink);
}
.pkgcmp__chip, .pkgcmp__names { display: none; }

/* the rows */
.pkgcmp tbody th, .pkgcmp tbody td { border-bottom: 1px solid var(--line); }
.pkgcmp tbody th { font-size: 0.93rem; color: var(--ink); }
.pkgcmp tbody td { text-align: center; }
.pkgcmp__group > * { padding-top: 1.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ink) !important; }
/* Round 4: the group titles float. Each group row's cells are sticky just under the table's sticky
   head (--header-h from nav-theme.js plus --pc-head, the head's height, measured by photography.js
   2d; the fallback is the head's usual height). Sticky table cells are held inside the table, not
   their tbody, so every title that has scrolled past stays stuck at the same spot and the next one,
   later in the document and so painted on top, covers it: one title shows at a time. The cells keep
   their opaque backgrounds (--pc-bg, --pc-rec) so rows do not show through; z-index sits under the
   head (20). The padding above the title shrinks while it floats only visually: the cell is the same. */
.pkgcmp .pkgcmp__group > * { position: sticky; top: calc(var(--header-h, 72px) + var(--pc-head, 82px)); z-index: 15; }
.pkgcmp .pkgcmp__group .mono { font-weight: 700; font-size: var(--mono-size); letter-spacing: 0.08em; }
.pkgcmp__fig { font-size: 0.9rem; line-height: 1.35; }
.pkgcmp__yes svg { display: inline-block; vertical-align: middle; width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pkgcmp__no { display: inline-block; vertical-align: middle; width: 0.85rem; height: 1.5px; background: rgba(8, 8, 7, 0.32); }
.pkgcmp__fnmark { color: var(--accent-label); margin-left: 0.1rem; }

/* the bottom row: prices per day and the buttons */
.pkgcmp__foot th, .pkgcmp__foot td { vertical-align: top; padding-top: 1.7rem; padding-bottom: 2.3rem; border-top: 1.5px solid var(--ink); }
.pkgcmp__foot .is-rec { border-bottom: 2px solid var(--accent); position: relative; }
/* the quiet pill on the recommended column's bottom border (three classes: .mono paints the accent) */
.pkgcmp .pkgcmp__foot .pkgcmp__rectag {
  position: absolute; left: 50%; bottom: 0; z-index: 2; transform: translate(-50%, 50%);
  margin: 0; padding: 0.2rem 0.6rem 0.18rem; border: 1px solid var(--accent); border-radius: 999px;
  background: #fff; color: var(--accent-label);
  font-size: calc(var(--mono-size) - 2px); line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.pkgcmp__footlabel { display: table-cell; }
.pkgcmp__footk { display: block; font-weight: 600; font-size: 0.93rem; margin-bottom: 0.6rem; }
.pkgcmp .pkgcmp__footlabel .mono { display: block; line-height: 1.8; font-size: calc(var(--mono-size) - 0.5px); }
.pkgcmp__foot td { display: table-cell; }
.pkgcmp__foot td > * + * { margin-top: 1.1rem; }
.pkgcmp__name--foot { display: none; }
.pkgcmp .pkgcmp__price { display: grid; gap: 0.3rem; color: var(--dim); font-size: calc(var(--mono-size) - 0.5px); line-height: 1.5; }
.pkgcmp__price b { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--ink); text-transform: none; }
.pkgcmp__cta {
  display: flex; width: 100%; justify-content: space-between; text-align: left;
  font-size: 0.88rem; line-height: 1.2; padding-left: 0.8rem; gap: 0.5rem;
}
.pkgcmp__cta .sq::before { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

.pkgcmp__notes { margin-top: 1.4rem; display: grid; gap: 0.4rem; }
.pkgcmp__multi { font-size: 1rem; font-weight: 500; color: var(--ink); }
.pkgcmp__fn { font-size: 0.86rem; line-height: 1.5; color: var(--dim); }

@media (max-width: 1100px) {
  .pkgcmp__c0 { width: 19%; }
  .pkgcmp th, .pkgcmp td, .pkgcmp__heads > * { padding-left: 0.6rem; padding-right: 0.6rem; }
}

/* Phone: two package columns. The head is the bonus strip, four chips with the names only
   (photography.js 2b keeps data-show and aria-pressed in step) and a line naming the two columns on
   screen; the rows put each label on its own line over the two values; the bottom row shows the two
   packages' names, prices and buttons. */
@media (max-width: 760px) {
  .pkgcmp, .pkgcmp thead, .pkgcmp tbody, .pkgcmp tfoot, .pkgcmp tr, .pkgcmp th, .pkgcmp td { display: block; }
  .pkgcmp colgroup { display: none; }
  .pkgcmp { font-size: 0.92rem; }
  .pkgcmp thead { position: sticky; top: var(--header-h, 62px); background: var(--pc-bg); box-shadow: 0 1px 0 var(--ink); }
  .pkgcmp th, .pkgcmp td { padding: 0; }
  .pkgcmp .is-rec { border-left: 0; border-right: 0; }
  .pkgcmp__bonus { font-size: 0.78rem; padding: 0.35rem 0.5rem; gap: 0.4rem; white-space: normal; }

  .pkgcmp .pkgcmp__heads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; padding: 0.45rem 0 0.4rem; }
  .pkgcmp__heads > * { padding: 0; border: 0 !important; background: none !important; display: flex; }
  .pkgcmp__corner, .pkgcmp__heads .pkgcmp__name { display: none !important; }
  .pkgcmp__chip {
    display: flex; align-items: center; width: 100%; min-height: 2.75rem;
    padding: 0.35rem 0.4rem; border: 1px solid rgba(8, 8, 7, 0.28); border-radius: 3px;
    background: #fff; color: var(--ink); font: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1.2; text-align: left; cursor: pointer;
  }
  .pkgcmp__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .pkgcmp__chip:focus-visible { outline: 2px solid var(--accent-label); outline-offset: 2px; }

  .pkgcmp .pkgcmp__names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  .pkgcmp__names > td:first-child { display: none; }
  .pkgcmp__names > td { padding: 0.4rem 0.55rem; font-size: 0.76rem; font-weight: 600; line-height: 1.25; }

  .pkgcmp tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .pkgcmp tbody th, .pkgcmp tbody td { border-bottom: 0; }
  .pkgcmp tbody tr > th { grid-column: 1 / -1; padding: 0.7rem 0 0.3rem; font-size: 0.86rem; font-weight: 600; }
  .pkgcmp tbody td { text-align: left; padding: 0.15rem 0.55rem 0.65rem; }
  .pkgcmp__group { border-bottom: 1px solid var(--ink) !important; }
  /* the group titles float under the sticky chips and names: here the rows are blocks, so the sticky
     row is held inside its own tbody and the next group's title pushes it out */
  .pkgcmp .pkgcmp__group > * { position: static; }
  .pkgcmp tbody tr.pkgcmp__group { position: sticky; top: calc(var(--header-h, 62px) + var(--pc-head, 128px)); z-index: 15; background: var(--pc-bg); }
  .pkgcmp__group > th { padding-top: 1.3rem !important; padding-bottom: 0.4rem !important; border-bottom: 0 !important; }
  .pkgcmp__group > td { display: none !important; }

  .pkgcmp .pkgcmp__foot { display: block; }
  .pkgcmp .pkgcmp__foot tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 0.6rem; padding-top: 1.8rem; padding-bottom: 0.6rem; }
  .pkgcmp .pkgcmp__foot .pkgcmp__footlabel { grid-column: 1 / -1; display: block; padding: 0 0 0.1rem; border: 0; }
  .pkgcmp__footk { display: none; }
  .pkgcmp .pkgcmp__foot td { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem 0.75rem 1.7rem; border: 1px solid var(--line); border-radius: 3px; background: #fff; }
  .pkgcmp .pkgcmp__foot td.is-rec { position: relative; border: 2px solid var(--accent); background: var(--pc-rec); padding-bottom: 1.7rem; }
  .pkgcmp .pkgcmp__foot .pkgcmp__price { margin-bottom: 0.35rem; }
  .pkgcmp .pkgcmp__foot .pkgcmp__rectag { font-size: calc(var(--mono-size) - 2.5px); padding: 0.16rem 0.5rem 0.14rem; }
  .pkgcmp__foot td > * + * { margin-top: 0; }
  .pkgcmp__name--foot { display: block; font-size: 1rem; }
  .pkgcmp__foot .pkgcmp__price b { font-size: 0.88rem; }
  .pkgcmp__foot .pkgcmp__cta { margin-top: auto !important; font-size: 0.82rem; padding-left: 0.6rem; }

  /* the markup runs most to least (Live Content Desk first, 17 Oct 2026); on a phone the chips and
     columns run Live Photo Desk, Essential, then the rest. Row labels stay first. */
  .pkgcmp [data-col="live"] { order: 1; }
  .pkgcmp [data-col="essential"] { order: 2; }
  .pkgcmp [data-col="storytelling"] { order: 3; }
  .pkgcmp [data-col="desk"] { order: 4; }

  /* only the two columns data-show names (the chips in the head always show) */
  .pkgcmp:not([data-show~="essential"]) :is(tbody, tfoot, .pkgcmp__names) [data-col="essential"],
  .pkgcmp:not([data-show~="live"]) :is(tbody, tfoot, .pkgcmp__names) [data-col="live"],
  .pkgcmp:not([data-show~="storytelling"]) :is(tbody, tfoot, .pkgcmp__names) [data-col="storytelling"],
  .pkgcmp:not([data-show~="desk"]) :is(tbody, tfoot, .pkgcmp__names) [data-col="desk"] { display: none !important; }
}

/* ---- 06 the first-booking film player ----
   Copy left, the reel right (stacked under 900px, the player second). The reel is reel.css as on the
   video page; here its thumbnails carry visible labels, and a pressed play puts the film in the
   stage (.reel__frame, photography.js 2c), hiding the poster's play button and caption.
   Round 2: heading, intro and player at about 82%, a narrower block with more space around it, and
   a little less section padding, so copy, bullets and the whole player fit one 1440 x 900 screen.
   Round 4: round 2's bullets again (the round 3 voucher and its styles were removed). */
#first-video.pad-y { padding-top: clamp(72px, 8.5vw, 128px); padding-bottom: clamp(72px, 8.5vw, 128px); }
.fvsplit .chead__title { font-size: clamp(1.6rem, 2.85vw, 2.65rem); }
.fvsplit .chead__lede { font-size: clamp(1.05rem, 1.55vw, 1.42rem); }
.fvsplit .tier__list li { font-size: 0.9rem; }
.fvsplit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.4rem, 6.5vw, 6.5rem); align-items: center; width: min(100%, 1200px); margin: 0 auto; }
.fvsplit .chead--left { align-items: flex-start; text-align: left; }
.fvsplit .chead--left .slabel { justify-content: flex-start; }
.fvsplit .firstvideo__list { margin-top: 1.3rem; max-width: 34rem; gap: 0.4rem; }
.fvplayer { margin: 0; width: min(100%, 34rem); justify-self: center; }
.fvplayer .reel { gap: 0.75rem; }
.fvplayer .reel__thumb {
  aspect-ratio: auto; overflow: visible; display: grid; gap: 0.4rem; align-content: start;
  border: 0; background: none; padding: 0; text-align: left; color: var(--ink);
}
.fvplayer .reel__thumb img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 3px; border: 1px solid var(--line); }
.fvplayer .reel__thumbs .reel__thumb .mono {
  /* 2026-10-18 (Trevor): no names under the thumbnails; the lower third on the stage carries the title.
     Kept for screen readers (same sr-only pattern as reel.css). */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0;
}
.fvplayer .reel__thumb.is-on { box-shadow: none; }
.fvplayer .reel__thumb.is-on img { box-shadow: 0 0 0 2px var(--accent); }
/* the play label is a .mono, so `:root .mono` (0,2,0) paints it --accent-label over the photograph;
   three classes give it reel.css's intended white (the video page's hero has the same fault) */
.fvplayer .reel__play .reel__play__label { color: #fff; text-shadow: 0 1px 2px rgba(8, 8, 7, 0.6); }
.reel__frame { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; border: 0; background: var(--ink); }
.reel.is-playing .reel__play, .reel.is-playing .reel__cap, .reel.is-playing .reel__stage::after { display: none; }
@media (max-width: 900px) {
  .fvsplit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .fvplayer .reel__play .reel__play__label { display: none; }   /* the stage is short: the caption would sit on it */
}

/* ---- 07 the add-ons: six name chips, two rows of three (round 3) ---- */
#more { border-top: 1px solid var(--line); padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
#more .morestrip { margin: clamp(1.6rem, 3vw, 2.2rem) auto 0; max-width: 60rem; display: grid; justify-items: center; gap: 1.4rem; text-align: center; }
.morestrip__chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 0.55rem; }
.morestrip__chips li {
  border: 1px solid rgba(8, 8, 7, 0.22); border-radius: 3px; background: #fff;
  padding: 0.5rem 0.85rem; font-size: 0.95rem; line-height: 1.3; color: var(--ink); text-align: center;
}
.morestrip__note { color: var(--dim); font-size: 0.95rem; line-height: 1.5; max-width: 40rem; }
.morestrip__note a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 600px) {
  .morestrip__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0.45rem; }
  .morestrip__chips li { display: grid; place-items: center; padding: 0.55rem 0.5rem; font-size: 0.88rem; }
}

/* ---- 08 how it works: about 15% smaller, connectors that clear the circles ----
   Round 4: heading, circles, icons, body and spacing at about 85% of photography.css; the step titles
   smaller still, so they read as titles over the body rather than headlines. The connectors are
   restated for the smaller circle: the dashed line starts and ends with a gap, and the arrowhead (a
   0.66rem square turned 45deg, its tip about 0.14rem past its box) stops short of the next circle.
   --g is the column gap, --i the circle, --top the circle's centre from the step's top
   (the "when" line 1.2rem + row gap 0.5rem + circle margin 0.15rem + half the circle). */
#how.pad-y { padding-top: clamp(68px, 9.35vw, 145px); padding-bottom: clamp(68px, 9.35vw, 145px); }
#how .chead__title { font-size: clamp(1.6rem, 2.98vw, 2.75rem); }
#how .howflow {
  --g: clamp(0.85rem, 2vw, 1.9rem); --i: 3.55rem; --top: calc(1.2rem + 0.5rem + 0.15rem + var(--i) / 2);
  margin-top: clamp(1.9rem, 3.8vw, 2.9rem); column-gap: var(--g);
}
#how .howflow__step { gap: 0.5rem; }
#how .howflow__icon { width: var(--i); height: var(--i); margin: 0.15rem 0 0.35rem; }
#how .howflow__icon svg { width: 1.7rem; height: 1.7rem; }
#how .howflow__icon--gallery svg { width: 1.95rem; height: 1.95rem; }
#how .howflow__step h3 { font-size: clamp(0.92rem, 1.05vw, 1rem); line-height: 1.2; letter-spacing: 0; }
#how .howflow__step p { font-size: 0.84rem; line-height: 1.55; max-width: 34ch; }
#how .howflow__step::before { left: calc(var(--i) + 0.55rem); right: calc(0.7rem - var(--g)); top: var(--top); }
#how .howflow__step::after { right: calc(0.65rem - var(--g)); top: calc(var(--top) - 0.32rem); }
@media (max-width: 900px) {
  /* two columns: the connector runs 1 to 2 and 3 to 4; the step after a row end has none */
  #how .howflow { row-gap: 1.9rem; }
  #how .howflow__step:nth-child(2)::before, #how .howflow__step:nth-child(2)::after { display: none; }
}
@media (max-width: 520px) {
  /* one column: a dashed line down from each circle, ending in an arrowhead short of the next one.
     The circle sits 1.4rem from the step's top (photography.css); steps are 1.5rem apart. */
  #how .howflow { --i: 3.4rem; row-gap: 1.5rem; }
  #how .howflow__step { padding-left: 4.6rem; min-height: calc(1.4rem + var(--i)); }
  #how .howflow__icon { top: 1.4rem; margin: 0; }
  #how .howflow__step::before { left: calc(var(--i) / 2 - 0.75px); right: auto; top: calc(1.4rem + var(--i) + 0.5rem); bottom: calc(-1.5rem - 1.4rem + 0.75rem); }
  #how .howflow__step::after {
    display: block; left: calc(var(--i) / 2 - 0.33rem); right: auto; top: auto;
    bottom: calc(-1.5rem - 1.4rem + 0.55rem + 0.14rem); transform: rotate(135deg);
  }
  #how .howflow__step:nth-child(2)::before, #how .howflow__step:nth-child(2)::after { display: block; }
  #how .howflow__step:last-child::before, #how .howflow__step:last-child::after { display: none; }
}

/* ---- 09 the FAQ: the standard chead above the list (round 3) ---- */
#faq .faq { margin-top: clamp(2.2rem, 4.5vw, 3.4rem); }

/* Round 3 review: breathing room between the Our Work intro and the first gallery strip */
#work .portcards { margin-top: clamp(20px, 2.4vw, 40px); }
/* Round 4: the film strip folds after eight (data-visible="8": two rows of four, four rows of two on
   a phone). photography.css hides li:nth-child(n + 5) behind the fold; photography.js hides the
   tiles past data-visible inline, so this only stops the stylesheet hiding 5 to 8 (as video.css). */
#work [data-fold]:not(.is-open) .portstrip > li:nth-child(n + 5) { display: grid; }

/* ---- 11 the form: the package picked in the table (round 4; photography.js 2.25.0, module 2d) ---- */
.pickedline {
  margin: 0 0 1.1rem; padding: 0.55rem 0.8rem; border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, #fff); border-radius: 0 3px 3px 0;
  font-size: 0.92rem; line-height: 1.4; color: var(--ink);
}
.pickedline[hidden] { display: none; }
.pickedline b { font-weight: 600; }
.pickedline a { margin-left: 0.25rem; color: var(--ink); text-underline-offset: 3px; }

/* ---- the enquiry (Trevor, 2026-10-14): the form on its own, centred, with one line above it and the
   email fallback under it. The two-column finale panel becomes a single centred column. */
#book.finale__panel { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(1.25rem, 2.5vw, 2rem); }
#book .finale__intro { width: 100%; max-width: 760px; text-align: center; }
#book .finale__intro .qual { max-width: none; margin: 0 auto; }
#book .app-form { width: 100%; max-width: 760px; }
#book .finale__direct { margin: 0; text-align: center; }

/* ---- round 5 polish (Trevor, 2026-10-14) ----
   Hero: more room between the header and the eyebrow at every width; the price line is two lines with
   the figures in bold. Closing headline about 35% smaller so the form is never far away. */
.hero--pv .hero__eyebrow { margin-top: clamp(1.75rem, 5vh, 3.25rem); }
.hero--pv .hero__prices { line-height: 1.7; }
.hero--pv .hero__prices b { font-weight: 700; }
#book-section .finale__lines .ln { font-size: clamp(1.4rem, 5.3vw, 6.1rem); }
@media (max-width: 420px) { .hero--pv .hero__prices { font-size: 0.75em; letter-spacing: 0.03em; } }
@media (max-width: 380px) { .hero--pv .hero__prices { font-size: 0.68em; letter-spacing: 0.02em; } }

/* Phone footer (Trevor, 2026-10-14): the fixed Get My Quote bar covered the two labels at the foot of
   the band. Lift them clear of the bar (its height plus the home-indicator inset). */
@media (max-width: 640px) {
  .footer__band { min-height: calc(180px + 4.4rem); }
  .footer__band .inner { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
}

/* Closing headline (Trevor, 2026-10-14): "Content", not "Photographs". Centred to sit with the eyebrow and the
   centred form under it, no stagger, less air above, and the key word in the accent colour. */
#book-section { padding-top: clamp(72px, 9vw, 140px); }
#book-section .finale__lines { text-align: center; }
#book-section .finale__lines .ln { margin-left: 0; line-height: 0.98; text-wrap: balance; }
#book-section .finale__lines .ln__accent { font-style: normal; color: var(--accent-label); }
#book-section .chead__eyebrow { text-align: center; }
#book-section .finale__lines .arr { display: none; }
@media (max-width: 640px) { #book-section .finale__lines .ln { font-size: 1.85rem; line-height: 1.02; } }

/* Phone package picker (Trevor, 2026-10-14): a line saying how it works, the four chips in two rows
   with a tick on the two chosen, and "From R..." (the half-day price) under each name on screen.
   Desktop is unchanged: .pkgcmp__how and .pkgcmp__from only show under 760px. */
.pkgcmp__how, .pkgcmp__from { display: none; }
@media (max-width: 760px) {
  .pkgcmp__how { display: block; margin: 0 0 0.6rem; font-size: 0.86rem; line-height: 1.4; color: var(--dim); }
  .pkgcmp .pkgcmp__heads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.3rem; }
  .pkgcmp__chip { min-height: 2.3rem; font-size: 0.76rem; gap: 0.4rem; }
  .pkgcmp__chip::before {
    content: ""; flex: none; width: 0.85rem; height: 0.85rem; border: 1.5px solid currentColor; border-radius: 2px; opacity: 0.55;
  }
  .pkgcmp__chip[aria-pressed="true"]::before {
    opacity: 1; background: var(--paper);
    -webkit-mask: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='%23080807' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 100% 100%; border-color: var(--paper);
  }
  .pkgcmp__from { display: block; margin-top: 0.1rem; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em; color: var(--accent-label); }
}

/* How it works on a phone (Trevor, 2026-10-14): the dashed connector between the circles was too faint to
   read on a real screen. Same line as desktop, drawn darker so it reads in the vertical layout. */
@media (max-width: 900px) {
  #how .howflow__step::before { border-color: rgba(8, 8, 7, 0.72); border-width: 2px; }
}

/* SADC emblem on the logo wall (Trevor, 15 Oct 2026): about 25% larger than the other square marks; knockout hover keeps its white centre */
.brands__cell--sadc img { height: 78px; }
@media (max-width: 640px) { .brands__cell--sadc img { height: 62px; } }