/* ===========================================================================
   SBF 2026 — CLIENT DELIVERY PAGE · Review 10
   Family: `project` / "Film Download" — 613 delivery pages.

   TOKENS ARE NOT REDECLARED. Every value below resolves from tokens.css
   (ENG1WED-224 phase 1). A token redeclared here is a defect the cross-family
   gate is meant to fail on — see the ratified note at the head of tokens.css.
   The :root block in this review file is a REVIEW-ONLY reproduction so the page
   renders standalone; in the theme it comes from tokens.css and is deleted here.

   CHANGES 02 → 10, all per Stephan 2026-08-02:
   1. No film is listed twice. Review 02 carried a "Yours to keep" panel AND a
      film list, so every owned film appeared in both. Each film now appears
      exactly once.
   2. Previews were 260px thumbnails in a three-column row. They are now
      full-bleed 16:9 plates — the size you would actually watch a film at.
   3. "Unlock" ratified as the CTA verb.
   4. Hero is a still with the gradient. Copy sits at 109px — the settled
      alignment, same left edge as .site-head, as the ratified homepage and the
      investment guide set it. Review 04 shell-centred it; that was wrong.
   4b. Each film's title and action sit ABOVE its plate. Below, with five films
      stacked, a bar reads as the caption for the NEXT viewer.
   5. UPGRADES restored. Review 04 dropped it: the per-film upsells were merged
      into the film list, which only covers products that HAVE a Vimeo preview,
      so the whole no-preview catalogue — Archive Vault, HDR, Super8, Doc Edit,
      Movie Trailer, Content Creator — silently vanished. That was a gap, not a
      position. It is the highest-value inventory on the page ($595–$3,450
      against $200–$400 for the instant downloads).
   6. Scarcity is real, but not where the live site puts it. Anything already
      EDITED (Trailer, Speeches, Reel) is available for years — no deadline, and
      the page says so out loud, which is what makes the one real deadline read
      as a fact rather than a tactic. The live "(for a limited time only)"
      heading on 200 pages applies a deadline to both buckets and is wrong on one.
   7. What closes is a COMMISSIONING WINDOW, not the footage. Stephan keeps
      source 2-3 years; what ends at 18 months is his willingness to take on new
      builds from that wedding. The page must never claim the footage is deleted
      or released — that would be false, and false scarcity is what this section
      was reworked to remove. 18 months was chosen on measurement: at 12 the
      window closes ON the first anniversary (0% of 673 dated couples clear it)
      and at 24 it closes on the second; 18 clears the anniversary by six months
      and still leaves 55-59% of couples a second gift season inside it.
   8. Every Unlock is a WooCommerce add-to-cart control, not a styled link:
      Woo's own classes and data attributes so its cart JS binds. Prices render
      from get_price_html(); the catalogue is collection-tiered (Archive Vault
      is $1,500 / $1,000 / $500 depending on collection) so nothing is
      hardcoded. Cart and checkout remain un-redesigned per ADR-005 §6 — the
      seam is real and is named on the page.
   =========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:48px}

body.sbf-delivery{
  margin:0;overflow-x:hidden;
  background:var(--sbf-deep);color:var(--sbf-ink);
  font-family:var(--sbf-font-body);font-size:var(--sbf-size-body);line-height:var(--sbf-leading-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.sbf-delivery img{max-width:100%;display:block;border:0}
/* Colour is DECLARED, never inherited. Divi sets heading colours explicitly, so
   an inherited colour loses the cascade and every heading rendered Divi grey on
   a design that had already been approved. Anything Divi states, this states. */
.sbf-delivery h1,.sbf-delivery h2,.sbf-delivery h3,
.sbf-delivery h4,.sbf-delivery h5,.sbf-delivery h6{color:var(--sbf-ink)}
.sbf-delivery h1,.sbf-delivery h2{font-family:var(--sbf-font-display);font-weight:400;font-optical-sizing:auto;margin:0}
.sbf-delivery h1{font-size:var(--sbf-size-display);line-height:var(--sbf-leading-display);letter-spacing:var(--sbf-tracking-display)}
.sbf-delivery h2{font-size:var(--sbf-size-h2);line-height:var(--sbf-leading-h2);letter-spacing:var(--sbf-tracking-h2)}
.sbf-delivery h3{font-family:var(--sbf-font-display);font-size:var(--sbf-size-lead);font-weight:400;line-height:1.2;margin:0}
.sbf-delivery p{margin:0 0 1.15em}
.sbf-delivery p:last-child{margin-bottom:0}
.sbf-delivery a{color:inherit}
.sbf-delivery ul{list-style:none;margin:0;padding:0}

/* ---- shared idioms, identical to investment-guide / contact -------------- */
.wrap{width:100%;max-width:var(--sbf-shell);margin:0 auto;padding-inline:var(--sbf-gutter)}
.section{padding-block:clamp(64px,8vw,104px)}
.micro-label{font-family:var(--sbf-font-body);font-size:var(--sbf-size-micro);font-weight:700;letter-spacing:var(--sbf-tracking-micro);text-transform:uppercase;color:var(--sbf-soft);margin:0 0 16px}
.eyebrow{display:inline-flex;align-items:center;gap:.7em;margin:0 0 20px;font-family:var(--sbf-font-body);font-size:var(--sbf-size-meta);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sbf-quiet)}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--sbf-ember)}

.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sbf-font-body);font-size:var(--sbf-size-small);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:17px 32px;min-height:48px;border:0;border-radius:0;cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap;transition:background-color .22s ease,color .22s ease,border-color .22s ease,transform .22s ease}
body.sbf-delivery .btn-ember{background:var(--sbf-ember);color:var(--sbf-deep)}
body.sbf-delivery .btn-ember:hover{background:var(--sbf-ember-deep);transform:translateY(-1px)}
body.sbf-delivery .btn-quiet{background:transparent;color:var(--sbf-ink);border:1px solid var(--sbf-rule-strong)}
body.sbf-delivery .btn-quiet:hover{border-color:var(--sbf-ember);color:var(--sbf-ember)}
/* Third weight, between the two. Locked films need more presence than a
   hairline outline and less than the download they already paid for, or the
   page either buries the offer or shouts over the gift. */
body.sbf-delivery .btn-keep{background:transparent;color:var(--sbf-ember);border:1px solid var(--sbf-ember)}
body.sbf-delivery .btn-keep:hover{background:var(--sbf-ember);color:var(--sbf-deep)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--sbf-ember);outline-offset:3px}
body.sbf-delivery .link-quiet{display:inline-block;color:var(--sbf-soft);font-size:var(--sbf-size-micro);font-weight:700;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--sbf-rule-strong);padding-bottom:7px;transition:color .2s ease,border-color .2s ease}
body.sbf-delivery .link-quiet:hover{color:var(--sbf-ink);border-color:var(--sbf-ember)}
.ph-inline{display:inline-block;border:1px dashed var(--sbf-ember);padding:2px 8px;color:var(--sbf-ember);font-size:var(--sbf-size-micro);font-weight:700;letter-spacing:var(--sbf-tracking-micro);text-transform:uppercase}

.skip{position:fixed;top:-100px;left:16px;z-index:100;padding:12px 18px;background:var(--sbf-ink);color:var(--sbf-deep);font-family:var(--sbf-font-body);font-size:var(--sbf-size-small);text-decoration:none}
.skip:focus{top:16px;outline:2px solid var(--sbf-ember);outline-offset:3px}

/* ---- chrome — geometry copied from chrome.css, not invented -------------- */
.site-head{position:absolute;top:48px;right:58px;left:109px;z-index:40;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.site-brand-link,.site-menu-toggle{pointer-events:auto}
.site-brand-link{display:block;line-height:0}
.site-head .brand{display:block;width:196px;height:auto}
.site-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-width:88px;min-height:44px;padding:10px 0;border:0;border-bottom:1px solid var(--sbf-rule-strong);background:rgba(11,10,9,.25);color:var(--sbf-ink);font-family:var(--sbf-font-body);font-size:var(--sbf-size-micro);font-weight:700;line-height:1;letter-spacing:var(--sbf-tracking-micro);text-transform:uppercase;cursor:pointer}
.site-menu-toggle:hover,.site-menu-toggle:focus-visible{color:var(--sbf-ember);border-color:var(--sbf-ember)}
.site-menu-mark{position:relative;width:17px;height:11px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.site-menu-mark:after{content:"";position:absolute;top:4px;right:0;width:11px;border-top:1px solid currentColor}

.site-footer{min-height:327px;padding:65px 0 0;background:var(--sbf-deep);color:var(--sbf-ink);border-top:1px solid var(--sbf-rule);font-family:var(--sbf-font-body)}
.footer-grid{display:grid;width:80%;max-width:var(--sbf-shell-narrow);margin:0 auto;grid-template-columns:minmax(180px,1fr) minmax(0,1.25fr);gap:clamp(54px,8vw,120px);align-items:start}
.foot-brand img{display:block;width:150px;height:auto}
.footer-navigation{min-width:0}
.chrome-menu-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:clamp(30px,5vw,72px)}
.sbf-delivery .foot-col h2{margin:0 0 24px;color:var(--sbf-soft);font-family:var(--sbf-font-body);font-size:var(--sbf-size-micro);font-weight:700;line-height:var(--sbf-leading-micro);letter-spacing:var(--sbf-tracking-micro);text-transform:uppercase}
.foot-col ul{display:grid;gap:12px}
.foot-col a{display:inline;color:var(--sbf-ink);font-size:var(--sbf-size-small);line-height:var(--sbf-leading-small);letter-spacing:.01em;text-decoration:none}
.foot-col a:hover{color:var(--sbf-ember)}
.foot-base{width:80%;max-width:var(--sbf-shell-narrow);min-height:66px;margin:0 auto;padding:22px 0 28px;color:var(--sbf-soft);font-size:var(--sbf-size-meta);line-height:var(--sbf-leading-meta);letter-spacing:.04em}

/* ===========================================================================
   1 · HERO — a still, built as the other page families build it.

   SETTLED: hero copy sits at 109px, the same left edge as .site-head, exactly
   as the ratified homepage and the investment guide set it. Not shell-centred.
   Review 04 deviated from this; it should not have.
   =========================================================================== */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#050504;isolation:isolate}
/* Specificity, not politeness: a bare .hero-bg lost height:100% to an
   img{height:auto} rule from another stylesheet and the photo rendered at its
   natural 720px inside a 900px hero, dropping the copy into a black band below
   it instead of over the image. */
body.sbf-delivery .hero .hero-bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* The gradient. Two layers, not one: the diagonal protects the copy on the left
   while leaving the right side of the frame open, and the upward wash seats the
   whole image on the page ground so the section boundary never shows as a seam. */
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(11,10,9,.80) 0%,rgba(11,10,9,.42) 38%,rgba(11,10,9,.06) 66%,rgba(11,10,9,.30) 100%),
             linear-gradient(0deg,rgba(11,10,9,.78) 0%,rgba(11,10,9,0) 46%)}
.hero-inner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--sbf-gutter) clamp(52px,7vw,96px);padding-left:109px}
.hero-copy{max-width:760px}
.hero h1{color:var(--sbf-ink);text-shadow:0 1px 3px rgba(11,10,9,.92),0 3px 28px rgba(11,10,9,.78)}
.hero .eyebrow{color:var(--sbf-ink);opacity:.9;text-shadow:0 1px 3px rgba(11,10,9,.92)}
.hero-deck{max-width:57ch;margin:24px 0 0;color:var(--sbf-ink);font-size:clamp(17px,1.25vw,20px);line-height:1.62;font-weight:300;text-shadow:0 1px 3px rgba(11,10,9,.92)}
/* contact's .start-link, to the value. */
body.sbf-delivery .start-link{display:inline-flex;align-items:center;gap:18px;margin-top:28px;padding:0 0 8px;
  border-bottom:1px solid var(--sbf-ember);color:var(--sbf-ink);
  font-size:var(--sbf-size-small);font-weight:600;letter-spacing:0;text-decoration:none;text-transform:none}
.start-link::after{content:"↓";color:var(--sbf-ember);font:400 20px/1 var(--sbf-font-display)}
body.sbf-delivery .start-link:hover{color:var(--sbf-ember)}

/* ---- hero quick-access index -------------------------------------------
   The investment guide's component, values copied verbatim from
   investment-guide.css so the two surfaces are one component and not two
   lookalikes. Only the scope selector differs. */
body.sbf-delivery .hero-inner{width:auto;max-width:none;min-height:100svh;height:auto;margin:0;
  padding:clamp(150px,18vh,190px) var(--sbf-gutter) clamp(40px,7vh,74px);padding-left:109px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,430px);gap:clamp(50px,8vw,90px);align-items:end}
body.sbf-delivery .hero-copy{align-self:end}
body.sbf-delivery .guide-hero-index{align-self:end;border-top:1px solid var(--sbf-rule-strong)}
body.sbf-delivery .guide-index-link{width:100%;display:grid;grid-template-columns:34px 1fr;gap:14px;
  align-items:start;padding:17px 0;border-bottom:1px solid var(--sbf-rule);color:var(--sbf-ink);
  text-align:left;text-decoration:none;opacity:.58;transition:opacity .2s ease,color .2s ease}
body.sbf-delivery .guide-index-link:hover,
body.sbf-delivery .guide-index-link:focus-visible{opacity:1}
body.sbf-delivery .guide-index-number{color:var(--sbf-ember);font-family:var(--sbf-font-display);font-style:italic}
body.sbf-delivery .guide-index-copy{display:grid;gap:3px}
body.sbf-delivery .guide-index-copy strong{line-height:1.35;font-weight:600}
body.sbf-delivery .guide-index-copy small{color:var(--sbf-soft);line-height:1.4;letter-spacing:.11em;
  text-transform:uppercase;font-size:var(--sbf-size-micro)}
@media (max-width:900px){
  body.sbf-delivery .hero-inner{grid-template-columns:1fr;align-content:end;gap:34px}
  body.sbf-delivery .hero-copy{max-width:820px}
}
@media (max-width:640px){
  body.sbf-delivery .hero-inner{padding-left:20px}
  body.sbf-delivery .hero-deck--pre-event{max-width:100%;white-space:normal;overflow-wrap:anywhere}
}

/* ===========================================================================
   2 · THE FILMS — approved option D, shared edges.
   =========================================================================== */
.films{padding-block:clamp(56px,7vw,96px) 0}
.films-head{margin-bottom:clamp(36px,4.4vw,60px)}
.films-lead{max-width:58ch;margin:22px 0 0;color:var(--sbf-quiet);font-size:var(--sbf-size-lead);font-weight:300;line-height:1.55}

.film{margin-bottom:clamp(72px,9vw,140px)}
.film:last-child{margin-bottom:0}
.film.film--ceremony:last-child{margin-bottom:clamp(24px,3vw,32px)}

/* full-bleed stage, 2:1 as the homepage sets it */
.film-stage-shell{width:100%;max-width:var(--sbf-shell);margin:0 auto;padding-inline:var(--sbf-gutter)}
.film-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#080706;isolation:isolate}
.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.film-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.film-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(11,10,9,.34) 0%,rgba(11,10,9,0) 46%)}
.film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:grid;place-items:center;gap:14px;width:auto;padding:0;border:0;background:none;
  color:var(--sbf-ink);cursor:pointer}
.film-play::before{content:"";width:clamp(74px,6vw,96px);height:clamp(74px,6vw,96px);border-radius:50%;
  border:1px solid rgba(242,236,224,.9);background:rgba(11,10,9,.2);
  background-image:linear-gradient(transparent,transparent);transition:background-color .25s ease,transform .25s ease}
.film-play::after{content:"";position:absolute;top:calc(clamp(74px,6vw,96px)/2);left:50%;
  transform:translate(-40%,-50%);border-top:12px solid transparent;border-bottom:12px solid transparent;
  border-left:19px solid currentColor;pointer-events:none}
.film-play:hover::before{background-color:var(--sbf-ember-deep);transform:scale(1.04)}
.film-play-label{font-family:var(--sbf-font-body);font-size:var(--sbf-size-micro);font-weight:700;
  letter-spacing:var(--sbf-tracking-micro);text-transform:uppercase;color:var(--sbf-ink)}

/* the detail bar — left copy, right action */
/* The homepage sets this shell to 1540px because that is ITS measure. Copying
   the number verbatim put the film title 72px left of the section heading above
   it and the action 72px right — nothing on the page lined up with anything.
   Harmonising means matching the component's INTENT, not transplanting a width
   into a page with a different shell. */
.film-detail-shell{width:100%;max-width:var(--sbf-shell);margin:0 auto;padding-inline:var(--sbf-gutter)}
.film-details{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,84px);
  align-items:end;padding:clamp(18px,2vw,26px) 0 0}
.film-series{margin:0 0 10px;color:var(--sbf-ember);font-size:var(--sbf-size-micro);line-height:1.2;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.film-couple{font-family:var(--sbf-font-display);font-size:var(--sbf-size-h3);font-weight:400;
  line-height:1.08;letter-spacing:-.02em;color:var(--sbf-ink);margin:0 0 12px}
.film-truth{font-family:var(--sbf-font-display);font-style:italic;font-size:var(--sbf-size-lead);
  line-height:1.35;color:var(--sbf-ink);max-width:36ch;margin:0}

/* the action sits exactly where prev/next sits on the homepage */
.film-action{width:min(100%,470px);display:grid;gap:12px;justify-items:end;align-self:end;text-align:right}
.film-action-status{margin:0;color:var(--sbf-soft);font-size:var(--sbf-size-micro);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.film-action .amt{font-family:var(--sbf-font-display);font-size:var(--sbf-size-h3);line-height:1;
  letter-spacing:var(--sbf-tracking-h3);color:var(--sbf-ink)}
.film-action-note{margin:0;color:var(--sbf-soft);font-size:var(--sbf-size-meta);letter-spacing:.04em}

@media (max-width:900px){
  .film-details{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
  .film-copy,.film-action{min-width:0}
  .film-couple{overflow-wrap:anywhere}
  .film-action{width:100%;justify-items:start;text-align:left}
  .film-stage{aspect-ratio:16/10}
}
@media (max-width:640px){
  .film-action .btn{width:100%}
  .film-truth{font-size:var(--sbf-size-body)}
}

/* Specificity: `.sbf-delivery h3` (0,0,1,1) outranks a bare `.film-couple`
   (0,0,1,0), so the title rendered at the lead size instead of h3. Same trap
   the button colours hit earlier — a component must own its own values. */
body.sbf-delivery .film-couple{font-size:var(--sbf-size-h3);font-family:var(--sbf-font-display);
  font-weight:400;line-height:1.08;letter-spacing:-.02em;color:var(--sbf-ink);margin:0 0 12px}
body.sbf-delivery .film-truth{font-size:var(--sbf-size-lead);font-style:italic}
body.sbf-delivery .btn-ember{background:var(--sbf-ember);color:var(--sbf-deep)}
body.sbf-delivery .btn-keep{background:transparent;color:var(--sbf-ember);border:1px solid var(--sbf-ember)}

/* ===========================================================================
   2b · LIVE WEBCAST — the hub, before and during the ceremony.

   Modelled on the archived-ceremony page per Stephan 2026-08-19. The section
   reuses `.films-head`, `.film-stage-shell` and `.film-stage` unchanged, so a
   webcast plate and a film plate are ONE component rather than two lookalikes.
   Only what is genuinely new to a webcast is declared here.

   The fact list is proposal.css's `.hero-facts` — the closest kin, another
   per-client `project` page that states event facts — carried over at its own
   values. Two deliberate departures, both forced and both narrow:
     · flex, not `repeat(4,auto)`. The proposal hero always has exactly four
       facts; a webcast has two to four, because location and arrival time are
       per-couple and often absent. The rendered row is identical.
     · no text-shadow. Proposal's shadows exist to hold type legible over a
       photograph. There is no photograph behind this one.

   THE !important IS DIVI'S, NOT A PREFERENCE. Delivery pages drop Divi's CSS,
   but Divi falls back to a LINKED et-divi-customizer-global.min.css that still
   carries `p,a.et_pb_button{font-size:16px!important}`. Any paragraph here
   that does not out-shout it renders at 16px. Same trap, same reason, as the
   four declarations at the foot of this file — delete these when Divi is
   genuinely gone (ENG1WED-256), and the sizes must still hold.
   =========================================================================== */
.webcast{padding-bottom:clamp(64px,8vw,104px)}

/* The invitation line. Scoped to .webcast on purpose: the same fix is owed to
   every .films-lead on the site, but widening it here would change 69 archive
   pages and 495 delivery pages in a change that was authorised for one. Filed
   on ENG1WED-302 instead. */
body.sbf-delivery .webcast .films-lead{font-size:var(--sbf-size-lead)!important;line-height:1.55}

.webcast-facts{display:flex;flex-wrap:wrap;max-width:660px;margin:clamp(30px,3.6vw,44px) 0 0;
  padding-top:clamp(20px,2.4vw,26px);gap:clamp(24px,3.4vw,52px);
  border-top:1px solid var(--sbf-rule-strong)}
.webcast-facts .wf-item{min-width:0}
body.sbf-delivery .webcast-facts dt{margin:0;color:var(--sbf-ember);font-family:var(--sbf-font-body);
  font-size:var(--sbf-size-micro);font-weight:700;letter-spacing:var(--sbf-tracking-micro);
  text-transform:uppercase}
body.sbf-delivery .webcast-facts dd{margin:7px 0 0;color:var(--sbf-ink);
  font-size:var(--sbf-size-small);line-height:var(--sbf-leading-small)}
/* The guests' clocks sit UNDER the couple's, never beside it. The ceremony
   happens on Maui; "6:00 PM PDT" stated first is the wrong fact for anyone
   watching from the island. */
body.sbf-delivery .webcast-facts .wf-note{display:block;margin-top:5px;color:var(--sbf-soft);
  font-size:var(--sbf-size-micro);line-height:var(--sbf-leading-micro);letter-spacing:.04em}

/* The stage. One column until a chatroom exists, which is the state a hub is
   in for most of its life. */
.webcast-stage-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.4vw,30px)}
/* On the deep ground a #080706 plate is invisible, so the waiting state read as
   a line of text floating in a void rather than as the place the player will
   be. The hairline is the family's own rule weight and it draws the frame the
   viewer will fill. It belongs to the waiting state ONLY — once the iframe is
   in, the video defines its own edge and a border would box it. */
.webcast-stage-grid:not(.webcast-stage-grid--live) .webcast-stage{border:1px solid var(--sbf-rule)}
.webcast-stage-grid--chat{grid-template-columns:minmax(0,1fr) minmax(280px,360px);align-items:stretch}
/* The plate keeps the VIDEO's own ratio in every arrangement — with a chat
   column beside it as much as without. Driving its height off a min-height
   instead let the plate become some other shape and the player letterboxed
   itself inside it. The chat column stretches to whatever height 16/9 produces,
   which is the right dependency direction: the film decides, the chat follows. */
.webcast-stage-grid--live .webcast-stage{aspect-ratio:16/9}

/* The waiting state. A hub sits here for months, so it has to read as finished
   rather than empty — it states what will appear and when. The Divi page put a
   screenshot of somebody else's video player here instead, which promises a
   control that is not there. */
body.sbf-delivery .webcast-standing{position:absolute;inset:0;z-index:2;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:20px;
  margin:0;padding:clamp(28px,5vw,56px);text-align:center;
  color:var(--sbf-quiet);font-size:var(--sbf-size-lead)!important;font-weight:300;line-height:1.55}
/* The eyebrow's ember dash, not a new mark. */
.webcast-standing-mark{flex:0 0 auto;width:26px;height:1px;background:var(--sbf-ember)}

.webcast-chat{display:flex;flex-direction:column;min-height:0;
  padding:clamp(18px,2vw,24px);background:var(--sbf-elev)}
.webcast-chat .micro-label{margin-bottom:14px}
/* No min-height beside the player. The chat sits in a stretched grid column, so
   it already has a height — the film's. Giving it a floor of its own made the
   CHAT the tallest thing in the row, stretch dragged the plate to match, and
   the player rendered at 1.62 instead of 16/9. The film decides the height of
   this row; the chat follows it. A floor is only needed once they stack. */
.webcast-chat iframe{flex:1 1 auto;width:100%;min-height:0;border:0;background:var(--sbf-deep)}

/* Contact information, rendered ONLY when the page carries it. No page in the
   live-webcast category carries any today, so there is no default and no
   placeholder — an invented phone number on a page guests are sent is worse
   than no line at all. */
.webcast-contact{margin-top:clamp(32px,4vw,52px)}
.webcast-contact .micro-label{padding-top:clamp(20px,2.4vw,26px);border-top:1px solid var(--sbf-rule)}
.webcast-contact-list{display:flex;flex-wrap:wrap;gap:clamp(24px,3.4vw,52px)}
.webcast-contact-list li{display:grid;gap:6px;min-width:0}
.wc-label{color:var(--sbf-ember);font-family:var(--sbf-font-body);font-size:var(--sbf-size-micro);
  font-weight:700;letter-spacing:var(--sbf-tracking-micro);text-transform:uppercase}
body.sbf-delivery .wc-value{color:var(--sbf-ink);font-size:var(--sbf-size-small)}
body.sbf-delivery .webcast-contact-list a{color:var(--sbf-ink);font-size:var(--sbf-size-small);
  text-decoration:none;border-bottom:1px solid var(--sbf-rule-strong)}
body.sbf-delivery .webcast-contact-list a:hover{color:var(--sbf-ember);border-color:var(--sbf-ember)}

@media (max-width:900px){
  .webcast-stage-grid--chat{grid-template-columns:minmax(0,1fr)}
  .webcast-stage-grid--chat .webcast-stage{aspect-ratio:16/10;min-height:0}
  /* Stacked, the chat needs a real height of its own — it no longer inherits
     one from a sibling column. */
  .webcast-stage-grid--chat .webcast-chat{min-height:clamp(360px,60vw,460px)}
  .webcast-stage-grid--chat .webcast-chat iframe{min-height:clamp(280px,50vw,380px)}
  /* The family's mobile plate is 16/10 because it normally holds a POSTER, and
     a poster is cropped with object-fit:cover. A player cannot be cropped — at
     16/10 YouTube just letterboxes itself inside the plate and every mobile
     guest watches the ceremony with black bars. So wherever the plate actually
     holds a player, give it the video's own ratio. Declared after the --chat
     rule so it wins when a page has both. */
  .webcast-stage-grid--live .webcast-stage{aspect-ratio:16/9;min-height:0}
}
@media (max-width:640px){
  .webcast-facts{gap:20px 26px;margin-top:26px}
  body.sbf-delivery .webcast-standing{font-size:var(--sbf-size-body)!important;gap:16px}
  .webcast-contact-list{gap:22px 28px}
}

/* ===========================================================================
   3 · FRAMES — the stills, and their download, in one place.
   =========================================================================== */
.frames{padding-block:clamp(64px,8vw,104px)}
/* The stills bar now sits BELOW its grid, matching the film blocks: media first,
   then the bar that names it and acts on it. Consistency across the two sections
   matters more than either arrangement on its own. */
.frames-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,48px);align-items:end;margin-top:clamp(28px,3.4vw,44px)}
.frames-act{display:flex;flex-direction:column;align-items:flex-end;gap:12px;text-align:right}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding-inline:2px}
.fgrid li{position:relative;aspect-ratio:2/1;overflow:hidden;background:var(--sbf-elev)}
.fgrid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.fgrid li:hover img{transform:scale(1.035)}
.frames-more{margin-top:clamp(28px,3.2vw,40px)}

/* ===========================================================================
   4 · UPGRADES — the commercial section.

   It stays on the same deep ground as the rest of the delivery page. A raised
   brown panel and a full-width top rule made this section look like a different
   page family, and the rule visually ran through the film's Download control.

   What the live section does wrong is not that it sells — it is that it sells
   six things at identical volume, as grey placeholder tiles with 13px outline
   "Add to cart" buttons and no statement of what any of them IS. Aggressive
   means one obvious headline offer and a reason to want each of the rest.
   =========================================================================== */
.upgrades{background:var(--sbf-deep);padding-block:clamp(64px,8vw,104px)}
.up-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,4.4vw,60px)}
.up-lead{margin:0;max-width:52ch;color:var(--sbf-quiet);font-size:var(--sbf-size-lead);font-weight:300;line-height:1.55}

/* The lead offer. Wide, image-led, and the only one with a full paragraph. */
.up-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);
  align-items:center;padding-bottom:clamp(40px,4.6vw,64px);margin-bottom:clamp(40px,4.6vw,64px);
  border-bottom:1px solid var(--sbf-rule-strong)}
/* 16/9, not 3/2: the upgrade art is composed at 1600x900 and carries its own
   title and treatment, so any crop cuts the typography off. Matches .uc-art. */
.uh-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sbf-deep)}
.uh-art img{width:100%;height:100%;object-fit:cover}
.uh-copy h3{font-size:var(--sbf-size-h3);letter-spacing:var(--sbf-tracking-h3);margin-bottom:16px}
.uh-copy p{max-width:46ch;color:var(--sbf-quiet);font-weight:300;line-height:1.7}
.uh-why{margin-top:1.1em;color:var(--sbf-ink)!important;font-size:var(--sbf-size-small);line-height:1.6;
  padding-left:16px;border-left:1px solid var(--sbf-ember)}

.up-buy{display:flex;align-items:center;gap:clamp(16px,2vw,26px);flex-wrap:wrap;margin-top:clamp(22px,2.6vw,30px)}
.up-buy .amt{font-family:var(--sbf-font-display);font-size:var(--sbf-size-h3);line-height:1;letter-spacing:var(--sbf-tracking-h3);color:var(--sbf-ink)}

/* The rest. Real images, a reason each, one price, one control. */
.up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.2vw,44px)}
.up-card{display:flex;flex-direction:column}
.uc-art{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sbf-deep);margin-bottom:20px}
.uc-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.up-card:hover .uc-art img{transform:scale(1.035)}
.up-card h3{margin-bottom:10px}
.uc-line{flex:1 1 auto;margin:0;color:var(--sbf-quiet);font-size:var(--sbf-size-small);line-height:1.6}
.up-card .up-buy{margin-top:18px;justify-content:space-between}
.up-card .amt{font-size:var(--sbf-size-lead)}
.up-foot{margin-top:clamp(32px,3.6vw,48px);display:flex;flex-wrap:wrap;gap:10px}

/* The films carry NO deadline, and the page says so. Stephan, 2026-08-02: what
   is genuinely limited is anything not yet edited — those need the original
   footage, and the footage is not held forever. The already-cut films (Trailer,
   Speeches, Reel) are available for years.

   Stating the no-deadline case out loud is what makes the real deadline below
   credible. A blanket "limited time only" across both — which is what 200 live
   pages currently do — trains the couple to read every deadline as a tactic. */
.films-note{max-width:52ch;margin:14px 0 0;color:var(--sbf-soft);font-size:var(--sbf-size-small);line-height:1.6}

/* The one place urgency belongs, tied to its actual cause. Band level, not a
   badge per card — six countdowns would read as pressure, one fact reads as a
   fact. The date renders per couple from the event date; it is never written
   into the design. */
.up-deadline{margin-top:clamp(36px,4vw,56px);padding:clamp(22px,2.6vw,30px) clamp(24px,3vw,34px);
  border:1px solid var(--sbf-ember);background:rgba(217,126,92,.06)}
.ud-head{margin:0 0 8px;color:var(--sbf-ink);font-family:var(--sbf-font-display);
  font-size:var(--sbf-size-lead);line-height:1.3}
.ud-head time{color:var(--sbf-ember);white-space:nowrap}
.ud-body{margin:0;max-width:64ch;color:var(--sbf-quiet);font-size:var(--sbf-size-small);line-height:1.65}

/* Time remaining, stated once. COMMISSIONING window = event date + 18 months
   (Stephan, 2026-08-02), computed per couple — never a hardcoded string.

   This is a WORK window, not a deletion claim. Stephan keeps footage 2-3 years;
   what closes at 18 months is his willingness to take on new builds from that
   wedding. Saying "your footage is deleted" would be false, and false scarcity
   is the thing this whole section was reworked to avoid. */
.ud-left{display:inline-block;margin-left:14px;padding:3px 10px;vertical-align:middle;
  color:var(--sbf-ember);font-family:var(--sbf-font-body);font-size:var(--sbf-size-micro);
  font-weight:700;letter-spacing:var(--sbf-tracking-micro);text-transform:uppercase;
  border:1px solid var(--sbf-ember)}

/* The last 90 days. The band earns more weight, and ONLY this band — the films
   above still carry no deadline and must not inherit urgency they do not have.
   Past the window the band is removed entirely rather than shown as a dead
   offer. 18 months was chosen on measurement: at 12 months the window closes ON
   the first anniversary (0% of 673 couples clear of it) and at 24 it closes on
   the second. 18 clears the anniversary by six months and still gives 55-59% of
   couples a second gift season inside the window. */
.is-closing .up-deadline{background:rgba(217,126,92,.12);border-width:2px}
.is-closing .ud-left{background:var(--sbf-ember);color:var(--sbf-deep)}
.is-expired .upgrades{display:none}



/* ===========================================================================
   5 · CLOSER — the last thing the couple reads from PST.
   =========================================================================== */
.closer{border-top:1px solid var(--sbf-rule)}
.films + .closer{border-top:0}
.closer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.closer-grid h2{max-width:13ch}
.closer-copy{max-width:var(--sbf-text);color:var(--sbf-quiet);font-weight:300;line-height:1.7}
.closer-help{margin-top:1.6em;color:var(--sbf-soft);font-size:var(--sbf-size-small)}
.closer-help a{color:var(--sbf-ember);text-decoration:none;border-bottom:1px solid var(--sbf-rule-strong)}
.closer-help a:hover{border-color:var(--sbf-ember)}

/* ===========================================================================
   5 · MEDIAN VARIANT — 1 film, 1 download, no stills, no locked films.
   Median measured page is 1 vimeo + 1 download button, and 485 of 613 have no
   gallery. That page is hero + one film + closer, and it has to look finished
   rather than truncated — which is the argument for the full-height image hero
   carrying the page rather than the film count carrying it.
   =========================================================================== */

/* ===========================================================================
   6 · REVIEW-ONLY CONTROL — DOES NOT SHIP
   =========================================================================== */

/* ===========================================================================
   7 · RESPONSIVE
   =========================================================================== */
@media (max-width:1100px){
  .fgrid{grid-template-columns:repeat(3,1fr)}
  .up-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .frames-head,.closer-grid,.up-head,.up-hero{grid-template-columns:1fr;gap:22px}
  .uh-art{aspect-ratio:16/9}
  .frames-act{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;align-items:center;gap:18px}
  .footer-grid{grid-template-columns:1fr;gap:42px}
  .footer-navigation .chrome-menu-columns{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .closer-grid h2{max-width:16ch}
}
@media (max-width:640px){
  .site-head{top:30px;right:20px;left:20px}
  .site-head .brand{width:132px}
  /* the ratified homepage / investment guide mobile values. */
  .hero{height:100svh;min-height:520px}
  .hero-inner{padding-left:20px;padding-bottom:44px}
  .hero-deck{font-size:16px;line-height:1.58;margin-top:20px}
  .start-link{margin-top:22px}
  /* No download — and no unlock — may need a horizontal reach on a phone. */
  .frames-act .btn,.up-buy .btn{width:100%}
  .up-grid{grid-template-columns:1fr;gap:38px}
  .up-buy{align-items:stretch;flex-direction:column;gap:14px}
  .up-card .up-buy{flex-direction:row;align-items:center;gap:16px}
  .up-card .up-buy .btn{width:auto;flex:1 1 auto}
  .frames-act{flex-direction:column;align-items:stretch;text-align:left;gap:12px}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .site-footer{padding-top:56px}
  .footer-grid,.foot-base{width:auto;margin-inline:var(--sbf-gutter)}
  .foot-base{margin-top:44px}
  .footer-navigation .chrome-menu-columns{grid-template-columns:1fr;gap:52px}
  }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .fgrid li:hover img{transform:none}
}

/* Type scale for the film row. The film's name is the primary object and the
   price is secondary — equal sizes made the row read as a price tag with a
   caption.

   The !important is Divi's, not a preference. Removing Divi's inline customizer
   block made Divi fall back to a LINKED et-divi-customizer-global.min.css that
   still carries h3{font-size:24px !important}, so the title dropped to 24px
   again. Divi has two delivery paths for the same CSS and closing one opens the
   other. Tracked on ENG1WED-256; delete these four declarations when Divi's CSS
   is genuinely gone, and the sizes must still hold. */
body.sbf-delivery .film-couple{font-size:var(--sbf-size-h3) !important;line-height:1.08 !important}
body.sbf-delivery .film-action .amt{font-size:var(--sbf-size-lead)}
body.sbf-delivery .up-hero h3{font-size:var(--sbf-size-h3) !important}
body.sbf-delivery .up-card h3{font-size:var(--sbf-size-lead) !important}