/* ============================================================================
   SOCIAL EVENTS page (built 2026-08-19 from the client's onboarding brief
   Q13/Q14; base file forked from the raw Aperol about page, all sections
   replaced). Shared section vocabularies are copied from css/services.css
   (twx/byo packages, kcx, cvs, rvw, jnl, vst, oalc ground) and
   css/single-service.css (stm bar, menu overlay, cpr strip, cst,
   bs backdrops, paged oalc, fin, sal footer) — keep in step with those
   files where marked. New sections built for this page: soc- hero, int-
   intro, gbf- guestbooks (the homepage's
   Beyond the Booth layout on this band's ground, owner pick 2026-08-20;
   replaced the spd- spreads, which replaced the weddings spx spotlight).
   ========================================================================== */

/* menu overlay: the homepage's Shutter Gold menu verbatim (geometry copied
   from css/single-service.css 2026-08-19), links adapted to cross-page targets */
.z-menu-open_0 { left: 12px; top: 4px; width: 30px; height: 48px; color: rgba(255,255,255,1); }
.z-menu-open_1 { left: 1068px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); }
.z-menu-open_2 { left: 1136px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); }
.z-menu-open_3 { left: 1103px; top: 754px; width: 28px; height: 21px; color: rgba(255,255,255,1); }
.z-menu-open_4 { left: 218px; top: 435px; width: 762px; height: 1px; background: currentColor; opacity:.5; transform: rotate(270deg); }
.z-menu-open_6 { left: 471px; top: 243px; width: 256px; height: 322px; }
.z-menu-open_7 { left: -15px; top: 54px; width: 1230px; height: 1px; background: currentColor; opacity:.5; }
.z-menu-open_8 { left: 803px; top: 318px; width: 320px; height: auto; }
.z-menu-open_9 { left: 795px; top: 425px; width: 327px; color: rgba(255,255,255,1); font-size: 17px; text-align: center; }
.z-menu-open_10 { left: 868px; top: 592px; width: 182px; height: 49px; }
.z-menu-open_11 { left: 6px; top: 211px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_12 { left: 6px; top: 266px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_13 { left: 6px; top: 321px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_14 { left: 6px; top: 376px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_15 { left: 6px; top: 431px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.z-menu-open_16 { left: 6px; top: 486px; width: 450px; color: rgba(255,255,255,1); text-transform: uppercase; font-size: 30px; }
.menu-overlay a.t-title { text-decoration: none; }
.menu-overlay a.t-title:hover { opacity: .7; }
.z-menu-open_19 { left: 122px; top: 640px; width: 219px; color: rgba(255,255,255,1); text-transform: uppercase; line-height: 1.6; letter-spacing: 0.1em; font-size: 13px; font-family: 'Red Hat Display'; font-weight: 500; font-style: normal; }
.z-menu-open_20 { left: 100px; top: 606px; width: 263px; color: rgba(255,255,255,1); font-size: 13px; }
.z-menu-open_21 { left: 100px; top: 674px; width: 263px; color: rgba(255,255,255,1); font-size: 13px; }

/* the white menu bar that slides down past the hero (script.js toggles
   .is-shown at scrollY > 700; the slide rule lives in style.css) */
.sec-stick-top-menu-white { --h: 53px; background: var(--white); position: fixed;
  top: 0; left: 0; right: 0; z-index: 40; transform: translateY(-100%);
  transition: transform .4s; border-bottom: 1px solid rgba(37,31,24,.28); }
.stm-in { height: 53px; display: flex; align-items: center; justify-content: center;
  gap: 44px; }
.stm-in a { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); }
.stm-in a:hover { opacity: .6; }
.stm-in a[aria-current] { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.stm-burger { position: absolute; left: 24px; top: 10px; width: 42px; height: 32px;
  background: none; border: 0; cursor: pointer; }
.stm-burger svg { fill: rgba(89,87,84,1); }
.stm-burger:hover { opacity: .55; }

/* floating hamburger shell over the hero. z 6 so the button outranks the
   hero's positioned children (same call as the corporate page). The hero is
   dark, so the burger runs cream. */
.sec-on-image-aperol-menu { --h: 1px; background: transparent; overflow: visible; z-index: 6; }
.wmenu-btn { left: calc(36px - var(--gutter)); top: 30px; width: 42px; height: 32px;
  background: none; border: 0; cursor: pointer; }
.wmenu-btn svg { fill: var(--cream); }
.wmenu-btn:hover { opacity: .55; }

/* ============ reveal plumbing: script.js stamps .rise-armed on every
   [data-rise] section, then .rise-in on first intersection; without JS
   nothing is ever hidden ============ */
[data-rise].rise-armed:not(.rise-in) .int-wrap,
[data-rise].rise-armed:not(.rise-in) .bdg-wrap,
[data-rise].rise-armed:not(.rise-in) .kcx-card,
[data-rise].rise-armed:not(.rise-in) .gbf-wrap,
[data-rise].rise-armed:not(.rise-in) .ovt-in { opacity: 0; transform: translateY(22px); }
.int-wrap, .bdg-wrap, .kcx-card, .gbf-wrap, .ovt-in {
  transition: opacity .9s ease, transform .9s cubic-bezier(.23,1,.32,1); }

/* ============ hero: the marquee wall (brief Q13 — open on the experience in
   action; three looping clips of real guests under a BLACK veil,
   centered type, celebration roll call on the bottom edge) ============ */
.sec-header-image { --h: max(100vh, 760px); background: var(--dark); overflow: hidden; }
.soc-wall { position: absolute; inset: 0; display: grid;
  grid-template-columns: 1fr 1fr 1fr; }
.soc-wall video { width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 30%; }
/* veil over the clip wall: BLACK, not the colorway tint (owner request
   2026-08-20) — same treatment as the .sec-reviews fixed-photo band below.
   Deliberately NOT color-mix(var(--dark)) any more, so it stays neutral
   black in every colorway instead of picking up each one's oxblood. */
.sec-header-image::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.76)); }
.soc-core { position: relative; z-index: 2; height: 100%; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: var(--cream); padding: 80px 24px 96px; }
.soc-logo { width: 290px; height: auto; margin-bottom: 30px;
  opacity: 0; animation: soc-rise .9s ease .15s forwards; }
.soc-kicker { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--teal);
  opacity: 0; animation: soc-rise .9s ease .3s forwards; }
.soc-h1 { font-family: var(--font-title); font-weight: 400;
  font-size: clamp(54px, 6.5vw, 82px); line-height: 1.04; text-transform: uppercase;
  letter-spacing: .03em; margin-top: 20px; }
.soc-h1 span { display: block; opacity: 0; animation: soc-rise 1s cubic-bezier(.23,1,.32,1) forwards; }
.soc-h1 span:nth-child(1) { animation-delay: .45s; }
.soc-h1 span:nth-child(2) { animation-delay: .58s; }
.soc-h1 span:nth-child(3) { animation-delay: .71s; }
/* the headline's first word was a teal MrsSaintDelafield script accent
   (.soc-scr, .74em, text-transform: none); dropped on owner request
   2026-08-20 so all three lines are one PonteLight cream title at the same
   size. Nothing else used the class, so the rule is gone rather than
   emptied. */
.soc-para { max-width: 620px; font-size: 16.5px; line-height: 1.75;
  color: color-mix(in srgb, var(--cream) 90%, transparent); margin-top: 26px;
  opacity: 0; animation: soc-rise 1s ease .9s forwards; }
.soc-ctas { display: flex; gap: 18px; margin-top: 38px;
  opacity: 0; animation: soc-rise 1s ease 1.05s forwards; }
.soc-cta { text-decoration: none; color: var(--cream);
  border: 1px solid rgba(252,251,249,.8); padding: 16px 32px; transition: all .4s; }
.soc-cta span { font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .2em; text-transform: uppercase; }
.soc-cta:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.soc-ghost { border-color: rgba(252,251,249,.4); }
.soc-ghost:hover { background: transparent; border-color: var(--cream); color: var(--cream); }
.soc-roll { position: absolute; left: 0; right: 0; bottom: 30px;
  font-family: var(--font-label); font-weight: 500; font-size: 10px;
  letter-spacing: .26em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 55%, transparent);
  opacity: 0; animation: soc-rise 1s ease 1.2s forwards; }
@keyframes soc-rise { from { opacity: 0; transform: translateY(16px); }
                      to { opacity: 1; transform: none; } }

/* ============ intro: more than a booth (her brief's own words) ============ */
.sec-intro { --h: auto; background: var(--white); padding: 118px 0 150px; }
/* service-area marquee: the weddings HERO's band (css/services.css
   .sec-header-image .twn-ticker, itself copied from home.css), moved here to
   this section's bottom edge on owner request 2026-08-20 — keep in step with
   both. The section's bottom padding is the band's clearance, so the int-snap
   polaroid still hangs clear of it. Colors ride the palette vars, so all six
   colorways remap the band with the page. */
.sec-intro .twn-ticker { position: absolute; left: 0; right: 0; bottom: 0;
  overflow: hidden; white-space: nowrap; background: var(--dark);
  border-top: 1px solid rgba(224,162,78,.42);
  border-bottom: 1px solid rgba(224,162,78,.42); padding: 17px 0; }
.twn-track { display: inline-block; animation: twn-tick 52s linear infinite; }
.twn-track span { font-family: 'Red Hat Display', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--teal); }
@keyframes twn-tick { from { transform: translateX(0); }
                      to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .twn-track { animation: none; } }
.int-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; display: grid;
  grid-template-columns: 1fr 440px; gap: 90px; align-items: center; }
.int-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink); opacity: .55; }
.int-script { font-family: var(--font-script); font-size: 56px; line-height: 1.05;
  margin-top: 14px; color: #5a1a12; }
.int-para { margin-top: 24px; max-width: 580px; font-size: 17px; line-height: 1.75;
  color: color-mix(in srgb, var(--ink) 86%, transparent); }
.int-rule { width: 72px; height: 1px; background: var(--ink); opacity: .4;
  margin: 32px 0 8px; }
.int-quiet { font-family: 'PonteExtraLightItalic', serif; font-size: 20px;
  line-height: 1.6; color: var(--ink); }
.int-photo { margin: 0; height: 620px; overflow: hidden; position: relative; }
.int-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.int-photo::after { content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(255,255,255,.55); pointer-events: none; }
/* taped snapshot tipped over the photo's bottom-right corner (owner request
   2026-08-20; tape recipe verbatim from the weddings scatter's .sct-fl in
   css/services.css). Anchored on .int-wrap, not the figure — the figure
   clips its children. */
.int-wrap { position: relative; }
.int-snap { position: absolute; right: -30px; bottom: -34px; width: 200px;
  height: 250px; background: #fff; padding: 7px; z-index: 2;
  transform: rotate(3deg); box-shadow: 0 14px 34px rgba(37,31,24,.2); }
.int-snap::before, .int-snap::after { content: ""; position: absolute; width: 74px;
  height: 24px; background: rgba(245,234,217,.85);
  border: 1px solid rgba(37,31,24,.08); box-shadow: 0 2px 6px rgba(37,31,24,.08); }
.int-snap::before { left: -26px; top: -10px; transform: rotate(-38deg); }
.int-snap::after { right: -26px; bottom: -10px; transform: rotate(-38deg); }
.int-snap img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* the cel- celebrations list and BOTH pq- pullquote bands were REMOVED on
   owner request 2026-08-20: the eight celebration titles now ride the
   twn-ticker marquee pinned under the intro instead, and neither the
   Emily & Grant nor the Jodi quote band survives (the reviews section
   still carries the real reviews). */

/* ============ packages: the weddings twins + build-your-own row, carried
   over from css/services.css VERBATIM on owner request 2026-08-19 (keep in
   step with that file's .sec-packages block). Entrance is IO-gated by
   script.js (.twx-prep on load, .twx-on in view); renders static without
   JS. ============ */
/* ground: THE dark-orange field — the same one the weddings hero and footer
   ride (`.sec-header-image`/`.sal-footer` in css/services.css, #5a1a12 +
   the baked per-colorway set), which this page already uses on
   .sec-guestbooks and .sec-final-cta. Owner request 2026-08-20; two earlier
   passes were rejected, var(--teal) #c0662f as too light and a
   teal/dark color-mix (#814122) as the wrong color. Baked per colorway
   rather than var-driven, exactly like the sections above — KEEP IN STEP
   with the services.css .sal-footer block. The copper accents (.twx-kicker,
   .cpr-lbl) read fine on this field, same as the weddings hero, so they
   keep var(--teal) and need no flip. */
.sec-packages { --h: auto; background: #5a1a12; }
:root[data-colorway="oxblood-glow"] .sec-packages { background: #5a1a12; }
:root[data-colorway="coffee-espresso"] .sec-packages { background: #241009; }
:root[data-colorway="ew-chestnut"] .sec-packages { background: #3a0e04; }
:root[data-colorway="ew-espresso"] .sec-packages { background: #2c0d06; }
:root[data-colorway="champagne-coffee"] .sec-packages { background: #34150f; }
:root[data-colorway="champagne-coffee-red"] .sec-packages { background: #34150f; }
.twx-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; padding: 130px 0 140px; }
.twx-head { text-align: center; margin-bottom: 36px; }
.twx-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--teal); }
.twx-script { font-family: var(--font-script); font-size: 54px; line-height: 1.1;
  margin-top: 4px; color: var(--cream); }
.twx-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.twx-twin { position: relative; background: var(--white);
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  padding: 34px 44px 40px; text-align: center; display: flex; flex-direction: column; }
.twx-twin::after { content: ''; position: absolute; inset: 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); pointer-events: none; }
.twx-mat { position: relative; padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); margin-bottom: 24px; }
.twx-ph { overflow: hidden; height: 200px; }
.twx-ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.twx-twin:hover .twx-ph img { transform: scale(1.05); }
.twx-ribbon { position: absolute; top: 22px; left: -9px; z-index: 2; background: var(--ink);
  color: var(--cream); font-family: var(--font-label); font-weight: 600; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; padding: 6px 14px; }
.twx-no { font-family: 'BilletScriptOpti', cursive; font-size: 22px; color: var(--teal); }
.twx-twin h2 { font-family: var(--font-serif); font-weight: 400; font-size: 31px;
  line-height: 1.1; margin: 4px 0 18px; }
.twx-inc { list-style: none; margin: 0 0 24px; padding: 0; }
.twx-inc li { padding: 9px 0; font-size: 14.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 82%, transparent); }
.twx-inc li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); }
.twx-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 30px; background: var(--ink); color: var(--cream); text-decoration: none;
  font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; border: 1px solid var(--ink); transition: all .4s; }
.twx-cta:hover { background: transparent; color: var(--ink); }
.twx-base { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; margin-top: 44px; }
.twx-lbl { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;
  font-family: var(--font-label); font-weight: 600; font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: color-mix(in srgb, var(--cream) 65%, transparent); }
.twx-lbl i { flex: 1; height: 1px; background: color-mix(in srgb, var(--cream) 25%, transparent); }
.byo-card { border: 1px solid color-mix(in srgb, var(--cream) 30%, transparent);
  padding: 34px 28px 30px; display: flex; flex-direction: column; align-items: center;
  text-align: center; color: var(--cream); transition: background .5s, border-color .5s; }
.byo-card:hover { background: color-mix(in srgb, var(--cream) 6%, transparent);
  border-color: color-mix(in srgb, var(--cream) 50%, transparent); }
.byo-cameo { width: 150px; height: 150px; border-radius: 50%; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cream) 45%, transparent); padding: 6px;
  margin-bottom: 20px; }
.byo-cameo .byo-ph { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.byo-ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.byo-card:hover .byo-ph img { transform: scale(1.08); }
.byo-t { font-family: var(--font-serif); font-size: 22px; margin-bottom: 8px; }
.byo-d { font-size: 13.5px; line-height: 1.55;
  color: color-mix(in srgb, var(--cream) 75%, transparent); margin-bottom: 18px; }
.byo-card a { margin-top: auto; font-family: var(--font-label); font-weight: 600;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream);
  text-decoration: none; border-bottom: 1px solid var(--teal); padding-bottom: 3px; }
.byo-card a:hover { color: var(--teal); }
.twx-prep .twx-twin, .twx-prep .twx-base { opacity: 0; transform: translateY(28px); }
.twx-on .twx-twin, .twx-on .twx-base { animation: twx-up .9s cubic-bezier(.2,.7,.2,1) forwards; }
.twx-on .twx-twin:nth-child(2) { animation-delay: .15s; }
.twx-on .twx-base { animation-delay: .3s; }
@keyframes twx-up { to { opacity: 1; transform: none; } }
/* ---- local divergence (owner 2026-08-19, "just the 3 main package
   options"): this page runs the twins card at THREE-UP. .twx-trio rides
   the .twx-duo container so script.js's entrance still attaches; sizes
   step down to the trio scale. The byo/twx-base rules above stay verbatim
   for keep-in-step with services.css but are unused on this page. ---- */
/* the kicker rides up a little, closing some of the wrap's 130px of lead-in
   (owner request 2026-08-20). Pulling the FIRST child up moves the script
   with it in normal flow, so the head keeps its own internal spacing and
   only the gap above it shrinks. Scoped here so the verbatim .twx-wrap
   padding copied from services.css stays in step with that file. */
.sec-packages .twx-kicker { margin-top: -50px; }
.twx-trio { grid-template-columns: 1fr 1fr 1fr; gap: 26px; }
.twx-trio .twx-twin { padding: 28px 32px 32px; }
.twx-trio .twx-mat { margin-bottom: 20px; }
.twx-trio .twx-ph { height: 172px; }
.twx-trio .twx-no { font-size: 21px; }
.twx-trio .twx-twin h2 { font-size: 27px; margin: 4px 0 14px; }
.twx-trio .twx-inc { margin: 0 0 22px; }
.twx-trio .twx-inc li { padding: 8px 0; font-size: 13.5px; }
.twx-trio .twx-cta { padding: 15px 26px; font-size: 11.5px; }
.twx-trio .twx-ribbon { top: 20px; }
/* Four experiences since 2026-09-08 (Editorial Portrait Lounge). One more
   column on the same card; gutter and list type step down so four fit the
   1200px canvas. These MUST sit after the .twx-trio card rules above: the
   container carries both classes and they have equal specificity, so source
   order decides. The .twx-ribbon it uses is the existing one further up. */
.twx-quad { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.twx-quad .twx-twin { padding: 24px 24px 28px; }
.twx-quad .twx-twin h2 { font-size: 22px; margin: 4px 0 12px; }
.twx-quad .twx-inc li { font-size: 12.5px; padding: 7px 0; }
.twx-quad .twx-cta { padding: 14px 12px; font-size: 11px; }
/* The lounge photo is the only PORTRAIT source in the row (1067x1600) and it
   is the only card with no inline height, so it takes .twx-trio's 172px box:
   a landscape letterbox cut out of a tall frame. Centred, that band opens at
   23% and slices the top off both heads (owner, 2026-09-08).
   RE-TUNED 2026-09-12 for her real photo (portrait-lounge-western-rich.jpg),
   which replaced the placeholder. Same pixel dimensions, but the couple stands
   further back: faces run 13%-28% of the source where the placeholder's ran
   20%-42%, so the old 31% anchor cut them. Anchored to open near 9% instead.
   Widest desktop box is the worst case (the 1200px wrap cap); as the window
   narrows the box shrinks and the visible band only grows. */
.twx-quad .twx-twin:nth-of-type(4) .twx-ph img { object-position: 50% 19%; }
.twx-on .twx-twin:nth-child(3) { animation-delay: .3s; }
.twx-on .twx-twin:nth-child(4) { animation-delay: .45s; }

/* ---- every-rental-includes strip inside the packages section (social-only;
   the weddings section has no equivalent) ---- */
.cpr-inc { margin-top: 64px; padding-top: 40px;
  border-top: 1px solid rgba(252,251,249,.25); text-align: center; }
.cpr-lbl { font-family: var(--font-script); font-size: 38px; color: var(--teal); }
.cpr-list { list-style: none; margin: 24px auto 0; padding: 0; max-width: 980px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 0; }
.cpr-list li { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(252,251,249,.8);
  padding: 0 22px; line-height: 1.7; }
.cpr-list li + li { border-left: 1px solid rgba(252,251,249,.3); }

/* the cst- personalization section (index + crossfading proof stage) was
   REMOVED on owner request 2026-08-20; its rules and the per-colorway
   deep-oxblood grounds it carried went with it. The templates section below
   still covers the custom-template half of that content. */

/* ============ custom templates: THE COLOUR MATCH (owner pick 2026-08-20).
   Diverged from services.css's tpx- duo stage on purpose — same prefix, new
   design, do NOT keep the two in step. The ground wash is applied inline by
   the tpx- module in script.js as color-mix over var(--cream), so it follows
   the colorway instead of a value baked here. ============ */
/* Generous top and bottom breathing room (owner 2026-08-20: "more section
   space above and below"). It was the tightest section on the page at 90/84
   while its neighbours run 118/150 (.sec-intro) and 110/110 (.sec-keychains);
   this now sits clear of both. The space is padding, not a min-height, so the
   row stays its natural size rather than stretching. */
.sec-templates { --h: auto; background: var(--cream); padding: 148px 0 140px;
  transition: background-color 1s ease; }
.tpx-wrap { width: min(1240px, calc(100% - 80px)); margin: 0 auto; }
.tpx-top { text-align: center; }
.tpx-kicker { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--ink); opacity: .55; }
.tpx-script { margin-top: 14px; font-family: var(--font-script); font-style: italic;
  font-size: 52px; line-height: 1; color: #5a1a12; }
.tpx-para { max-width: 660px; margin: 16px auto 0; font-size: 15px; line-height: 1.7;
  color: var(--ink); opacity: .85; }
.tpx-row { margin-top: 38px; display: flex; justify-content: center;
  align-items: flex-end; gap: 20px; }
.tpx-t { position: relative; display: block; background: #fff; padding: 8px;
  box-shadow: 0 14px 34px rgba(37,31,24,.14);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, filter .5s; }
.tpx-t img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tpx-card { width: 206px; height: 309px; }
.tpx-strip { width: 112px; height: 336px; }
.tpx-row.live .tpx-t { filter: saturate(.55) brightness(.98); }
.tpx-row.live .tpx-t.on { filter: none; transform: translateY(-10px);
  box-shadow: 0 28px 56px rgba(37,31,24,.26); }
.tpx-meta { margin-top: 26px; display: flex; align-items: center; justify-content: center;
  gap: 14px; min-height: 34px; }
.tpx-sw { width: 22px; height: 22px; background: var(--cream);
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  transition: background-color .6s ease; }
.tpx-mname { font-family: var(--font-label); font-weight: 600; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink); opacity: .6; }
.tpx-foot { margin-top: 26px; display: flex; align-items: center; justify-content: center;
  gap: 26px; flex-wrap: wrap; }
.tpx-lbl { font-family: var(--font-label); font-weight: 600; font-size: 10px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink); opacity: .5; }
.tpx-cta { display: inline-flex; padding: 15px 30px; border: 1px solid var(--ink);
  color: var(--ink); text-decoration: none; transition: all .4s; }
.tpx-cta span { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; }
.tpx-cta:hover { background: var(--ink); color: var(--white); }
/* deep-orange scripts (int- and tpx-) baked per colorway, mirroring the
   weddings page's tpx-script list */
:root[data-colorway="oxblood-glow"] .tpx-script, :root[data-colorway="oxblood-glow"] .int-script { color: #5a1a12; }
:root[data-colorway="coffee-espresso"] .tpx-script, :root[data-colorway="coffee-espresso"] .int-script { color: #241009; }
:root[data-colorway="ew-chestnut"] .tpx-script, :root[data-colorway="ew-chestnut"] .int-script { color: #3a0e04; }
:root[data-colorway="ew-espresso"] .tpx-script, :root[data-colorway="ew-espresso"] .int-script { color: #2c0d06; }
:root[data-colorway="champagne-coffee"] .tpx-script, :root[data-colorway="champagne-coffee"] .int-script { color: #34150f; }
:root[data-colorway="champagne-coffee-red"] .tpx-script, :root[data-colorway="champagne-coffee-red"] .int-script { color: #34150f; }

/* ============ backdrops: THE LOOKBOOK — the homepage's .sec-explore card
   grid, ported 2026-08-20 (owner pick from the backdrops variants round):
   four cards instead of the homepage's three, and the dark ground inverted to
   white with ink type. The bdg-* names are deliberate: css/home.css is never
   loaded on this page, so its dark-ground rules cannot collide, and keeping
   the names lets script.js's guarded carousel module wire the mobile arrows
   with no JS change. Keep in step with home.css if the card anatomy
   changes. ============ */
/* Window height (owner 2026-08-20), the same way the homepage does it. It is
   min-height, never a fixed height: the section still carries overflow:hidden,
   so a hard 100vh would clip the cards on a short window. The section is the
   flex container and .bdg-wrap is the single stretching child, which is what
   gives the wrap a DEFINITE height — that is the bit that matters, because
   .bdg-grid's `flex: 1 1 auto` can only grow against a definite parent, and a
   plain `height: 100%` would resolve to auto here (the parent's height is
   auto, min-height does not make it definite). Extra height therefore lands
   inside the cards, between the copy and the CTA, exactly as on the
   homepage. */
.sec-backdrops { --h: auto; min-height: 100vh; display: flex;
  background: var(--white); color: var(--ink); overflow: hidden; }
.bdg-wrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  justify-content: center; padding: 76px clamp(40px, 5vw, 90px) 60px; }
.bdg-crest { text-align: center; flex: 0 0 auto; margin-bottom: 18px; }
.bdg-eyebrow { font-family: var(--font-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3em; font-size: 12px;
  color: var(--teal); display: inline-flex; align-items: center; gap: 16px; }
.bdg-eyebrow::before, .bdg-eyebrow::after { content: ""; width: 38px; height: 1px;
  background: color-mix(in srgb, var(--ink) 30%, transparent); }
.bdg-crest .bdg-script { font-family: 'PonteExtraLight', serif; color: var(--ink);
  font-size: 44px; line-height: 1; margin-top: 10px; font-weight: 400;
  letter-spacing: -.01em; text-transform: uppercase; }
/* Three columns since revision round 3 (note 121) took the lookbook from four
   cards to three. Left at repeat(4, 1fr) the three cards filled columns one to
   three and sat hard against the left edge with an empty fourth column. These
   are home.css's own three-card values for this same ported component (gap and
   max-width included), which is what the "keep in step with home.css" note
   above asks for; `margin: 0 auto` then centres the row. flex: 0 0 auto stays,
   deliberately: the grid must keep its natural height so spare window height
   lands as padding, not inside the card frames. */
.bdg-grid { flex: 0 0 auto; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px);
  align-items: stretch; max-width: 1140px; width: 100%; margin: 0 auto; }
.bdg-card { display: flex; flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  background: transparent; padding: 14px;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease,
              border-color .5s ease;
  will-change: transform; }
.bdg-card:hover { transform: translateY(-6px);
  box-shadow: 0 26px 60px -24px rgba(0,0,0,.30);
  border-color: color-mix(in srgb, var(--teal) 60%, transparent); }
/* The cards keep the homepage's natural 4/5 frame and are NOT stretched to
   fill the window (owner request 2026-08-20: "I just wanted you to add more
   space above and below the section to make it window height, not stretch
   the cards"). An earlier pass made the frame elastic (flex: 1 1 auto) so
   every spare pixel landed on the photograph, which is what made the cards
   read too long. Now the grid takes its natural height and .bdg-wrap's
   justify-content: center turns the leftover viewport height into equal
   breathing room above and below. Same rule mobile uses. */
.bdg-frame { position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 4/5; flex: 0 0 auto; }
.bdg-frame img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.001);
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.bdg-card:hover .bdg-frame img { transform: scale(1.06); }
.bdg-body { padding: 14px 4px 4px; display: flex; flex-direction: column; flex: 0 0 auto; }
.bdg-no-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.bdg-no { font-family: var(--font-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .28em; font-size: 11px; color: var(--teal); }
.bdg-script-word { font-family: var(--font-script); color: var(--teal);
  font-size: 30px; line-height: .9; margin-left: auto;
  /* headroom so tall script ascenders are never clipped; the negative margin
     keeps the layout unchanged (same fix as the homepage) */
  padding-top: .55em; margin-top: -.55em; }
.bdg-title { font-family: var(--font-title); font-weight: 400; font-size: 22px;
  line-height: 1.1; letter-spacing: .01em; color: var(--ink); margin: 2px 0 8px; }
.bdg-hairline { height: 1px; width: 100%;
  background: color-mix(in srgb, var(--ink) 20%, transparent); margin: 0 0 10px; }
.bdg-copy { font-family: var(--font-body); font-weight: 400; font-size: 12.5px;
  line-height: 1.5; color: color-mix(in srgb, var(--ink) 76%, transparent);
  margin-bottom: 12px; }
.bdg-cta { margin-top: auto; align-self: flex-start; font-family: var(--font-label);
  font-weight: 600; text-transform: uppercase; letter-spacing: .24em; font-size: 11px;
  color: var(--ink); text-decoration: none; padding-bottom: 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 50%, transparent);
  transition: color .3s ease, border-color .3s ease; }
.bdg-cta:hover { color: var(--teal); border-color: var(--teal); }
.bdg-nav { display: none; }
/* Keep the four cards on the same baseline: a card with two lines of copy
   instead of three would otherwise end short. Subgrid puts every card on the
   PARENT's two rows, so all four frames share one height and all four bodies
   share another. Rows are auto/auto, NOT 1fr/auto — 1fr would hand the
   leftover column height back to the photo row and re-stretch the cards,
   which is the thing being fixed above. */
@supports (grid-template-rows: subgrid) {
  .bdg-grid { grid-template-rows: auto auto; }
  .bdg-card { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
}
.bdg-more { flex: 0 0 auto; text-align: center; margin-top: 26px; }
.bdg-more-note { max-width: 620px; margin: 0 auto 16px; font-size: 13px;
  line-height: 1.6; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.bdg-more-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; border: 1px solid var(--brown); color: var(--ink);
  text-decoration: none; padding: 15px 46px; font-family: var(--font-label);
  font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  transition: background .4s ease, color .4s ease, border-color .4s ease; }
.bdg-more-btn:hover { background: var(--brown); color: var(--cream);
  border-color: var(--brown); }

/* ============ enhancements: THE PROMENADE RAIL (the weddings page's
   add-on section verbatim — css/services.css .oalc-* rules, copied
   2026-08-19; keep in step) — EXCEPT the ground: solid dark maroon
   var(--dark) on owner request, not the fixed damask wallpaper. ============ */
.sec-other-a-la-carte { --h: auto; min-height: 900px;
  background: var(--dark); color: var(--cream);
  --oalc-gut: 90px; }
.oalc-wrap { padding: 112px 0 104px; display: flex; flex-direction: column; }
.oalc-head { padding: 0 var(--oalc-gut); display: flex; align-items: flex-end;
  justify-content: space-between; }
.oalc-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(252,251,249,.65);
  margin-bottom: 10px; }
.oalc-script { font-family: var(--font-script); font-size: 52px; line-height: 1; }
.oalc-btn { height: 54px; padding: 0 34px; border-color: rgba(252,251,249,.8);
  color: var(--cream); }
.oalc-btn:hover { background: var(--cream); color: var(--ink);
  border-color: var(--cream); }
.oalc-rail { margin-top: 46px; display: flex; gap: 28px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 6px var(--oalc-gut) 26px;
  scroll-padding-left: var(--oalc-gut); scrollbar-width: none; }
.oalc-rail::-webkit-scrollbar { display: none; }
.oalc-card { flex: 0 0 520px; scroll-snap-align: start; background: var(--white);
  border: 1px solid rgba(37,31,24,.14); color: var(--ink); }
.oalc-win { height: 380px; overflow: hidden; }
.oalc-win .ph { width: 100%; height: 100%; transition: transform 5s ease; }
.oalc-card:hover .oalc-win .ph { transform: scale(1.05); }
.oalc-plate { padding: 28px 30px 30px; }
.oalc-row { display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; margin-bottom: 12px; }
.oalc-t { font-family: var(--font-title); font-size: 32px; line-height: 1.1; }
.oalc-price { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(37,31,24,.6);
  white-space: nowrap; }
.oalc-d { font-family: var(--font-body); font-size: 15px; line-height: 1.65;
  color: rgba(37,31,24,.85); }
.oalc-ctrl { padding: 30px var(--oalc-gut) 0; display: flex; align-items: center; gap: 26px; }
.oalc-arrow { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(252,251,249,.8);
  background: none; cursor: pointer; color: var(--cream); font-size: 18px; line-height: 1;
  transition: all .3s; font-family: var(--font-body); }
.oalc-arrow:hover { background: var(--cream); color: var(--ink); }
.oalc-track { flex: 0 1 300px; height: 2px; background: rgba(252,251,249,.25); position: relative; }
.oalc-track i { position: absolute; left: 0; top: 0; height: 100%; width: 25%;
  background: var(--cream); transition: width .25s ease; }
.oalc-count { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; color: rgba(252,251,249,.7); }

/* ============ the guestbooks: the homepage's BEYOND THE BOOTH layout
   (owner pick 2026-08-20) on this band's own rust ground. Geometry is
   css/home.css's arc- and ftp- rules rebuilt under a scoped gbf- prefix (the
   two pages share no stylesheet, and script.js's homepage module keys off
   id="featured", so this section needs its own driver either way).
   DELIBERATELY DROPPED from the homepage recipe: the fixed damask wallpaper
   panel (same call as this page's oalc rail, 2026-08-19) and the gold
   hairline along the bottom right (owner 2026-08-20). Entrance rides the
   [data-rise] blanket via .gbf-wrap. ============ */
.sec-guestbooks { --h: auto; background: #5a1a12; color: var(--white);
  padding: 0; }
:root[data-colorway="oxblood-glow"] .sec-guestbooks { background: #5a1a12; }
:root[data-colorway="coffee-espresso"] .sec-guestbooks { background: #241009; }
:root[data-colorway="ew-chestnut"] .sec-guestbooks { background: #3a0e04; }
:root[data-colorway="ew-espresso"] .sec-guestbooks { background: #2c0d06; }
:root[data-colorway="champagne-coffee"] .sec-guestbooks { background: #34150f; }
:root[data-colorway="champagne-coffee-red"] .sec-guestbooks { background: #34150f; }
.gbf-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto;
  padding: 104px 0 108px; display: grid; grid-template-columns: 560px 1fr;
  gap: 70px; align-items: center; }

/* the matted photo, right */
/* sized down ~10% from 474/640 on owner request 2026-08-20; the window keeps
   its original proportions so the mat still reads even */
.gbf-slot { justify-self: end; width: 426px; }
.gbf-frame { background: var(--cream); padding: 20px 20px 15px;
  box-shadow: 0 46px 100px rgba(15,4,6,.62), 0 10px 26px rgba(15,4,6,.5); }
.gbf-window { position: relative; height: 574px; overflow: hidden;
  border: 1px solid rgba(163,86,32,.55); outline: 1px solid rgba(163,86,32,.25);
  outline-offset: 3px; }
.gbf-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s; }
.gbf-slide.is-on { opacity: 1; }
.gbf-slide .ph { width: 100%; height: 100%; object-fit: cover; }
.gbf-plate { text-align: center; padding-top: 13px; color: var(--ink); }
.gbf-b-num { font-family: 'MrsSaintDelafield', cursive; font-style: italic;
  font-size: 17px; color: #a34c22; }
.gbf-b-ttl { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; margin-top: 3px; }

/* the entry list, left */
.gbf-label { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .28em; text-transform: uppercase; color: rgba(252,251,249,.55); }
.gbf-title { font-family: var(--font-title); font-weight: 400; font-size: 46px;
  line-height: 1.1; margin: 18px 0 36px; }
.gbf-title em { font-family: var(--font-script); font-style: normal;
  font-size: .8em; text-transform: none; letter-spacing: 0; padding-right: 7px; }
.gbf-item { display: block; padding: 22px 0; border-top: 1px solid rgba(252,251,249,.2);
  text-decoration: none; color: rgba(252,251,249,1); opacity: .6; cursor: pointer;
  transition: opacity .5s; position: relative; }
.gbf-item:last-of-type { border-bottom: 1px solid rgba(252,251,249,.2); }
.gbf-item.is-on { opacity: 1; }
.gbf-no { display: block; font-family: var(--font-label); font-weight: 600;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 6px; }
.gbf-head { display: flex; align-items: baseline; gap: 16px; }
.gbf-ittl { font-family: var(--font-label); font-weight: 600; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; }
.gbf-arrow { margin-left: auto; font-size: 20px; opacity: 0; transform: translateX(-8px);
  transition: opacity .5s, transform .5s; }
.gbf-item.is-on .gbf-arrow { opacity: 1; transform: none; }
.gbf-desc { display: block; font-size: 15.5px; line-height: 1.6;
  color: rgba(252,251,249,.8); max-height: 0; overflow: hidden;
  transition: max-height .6s, margin-top .6s; max-width: 480px; }
.gbf-item.is-on .gbf-desc { max-height: 300px; margin-top: 10px; }
.gbf-note { display: block; margin-top: 9px; font-family: var(--font-label);
  font-weight: 500; font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(252,251,249,.6); }

/* ============ keepsake keychains: the keyline invitation card (round-2
   winner 07-the-keyline, 2026-08-19; strong visual attention per brief Q14).
   Gold stays a fixed brass hex so colorways never muddy the keyline. ===== */
/* ground: the fixed damask wallpaper under a dark wash, verbatim from the
   weddings enhancements rail (.sec-other-a-la-carte in css/services.css;
   owner request 2026-08-20). The gold-keylined cream card sits on it
   unchanged, so no text colors flip — all copy lives inside the card. */
.sec-keychains { --h: auto; padding: 110px 0;
  background:
    linear-gradient(color-mix(in srgb, var(--dark) 60%, transparent),
                    color-mix(in srgb, var(--dark) 60%, transparent)),
    url('../assets/wallpaper-bg.webp');
  background-size: auto, 520px auto; background-repeat: no-repeat, repeat;
  background-attachment: fixed; }
.kcx-card { width: min(1120px, calc(100% - 80px)); margin: 0 auto;
  border: 1px solid color-mix(in srgb, #c9a26a 65%, transparent);
  outline: 1px solid color-mix(in srgb, #c9a26a 30%, transparent);
  outline-offset: 5px; background: var(--cream); padding: 58px 64px;
  display: grid; grid-template-columns: 440px 1fr; gap: 64px;
  align-items: center; }
.kcx-photo { margin: 0; background: var(--white); padding: 10px;
  box-shadow: 0 16px 36px rgba(0,0,0,.1); }
.kcx-photo img { width: 100%; height: 520px; object-fit: cover; display: block; }
.kcx-kicker { font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .24em; text-transform: uppercase; opacity: .6; }
.kcx-script { font-family: var(--font-script); font-style: italic; font-size: 56px;
  line-height: 1.05; margin-top: 14px; }
.kcx-rule { width: 64px; height: 1px; margin-top: 26px;
  background: color-mix(in srgb, #c9a26a 80%, transparent); }
.kcx-para { margin-top: 24px; max-width: 470px; font-size: 17px; line-height: 1.7;
  opacity: .87; }
.kcx-btn { display: inline-flex; margin-top: 34px; padding: 16px 30px;
  width: max-content; }
/* trading cards card (round 3, note 122): the keychains card mirrored. Source
   order keeps the photo first for screen readers; grid placement moves it. */
.kcx-card-2 { margin-top: 46px; }
.kcx-flip { grid-template-columns: 1fr 440px; }
.kcx-flip .kcx-photo { grid-column: 2; grid-row: 1; }
.kcx-flip .kcx-side { grid-column: 1; grid-row: 1; }

/* ============ printed keepsakes: the two prints spread (design-variants
   pick 15, unfolded family — all four points as a 2x2 beside the pane, a
   small matted print tucked over its lower corner; slow crossfade only;
   brief Q14 camera-roll copy) ============ */
.sec-core-values { --h: 830px; background: var(--paper); }
.cvs-two { left: 0; top: 0; width: 1200px; height: 100%;
  display: grid; grid-template-columns: 470px 1fr; column-gap: 96px;
  align-items: center; padding: 88px 0 84px; }
.cvs-pane { position: relative; height: 580px; }
.cvs-shot { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.cvs-shot.on { opacity: 1; }
.cvs-shot .ph { width: 100%; height: 100%; filter: saturate(.9); }
.cvs-pane::after { content: ""; position: absolute; left: 14px; top: 14px;
  right: -14px; bottom: -14px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  pointer-events: none; }
.cvs-small { position: absolute; left: -34px; bottom: -38px; width: 190px;
  height: 246px; background: var(--white); padding: 9px; z-index: 3;
  transform: rotate(-4deg); box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.cvs-small .ph { width: 100%; height: 100%; filter: saturate(.94); }
.cvs-kicker { font-family: var(--font-label); font-weight: 600; font-size: 13px;
  letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  display: flex; align-items: center; gap: 16px; }
.cvs-kicker::after { content: ""; width: 64px; height: 1px; background: var(--ink);
  opacity: .4; }
.cvs-head { margin-top: 14px; font-family: var(--font-serif); font-weight: 400;
  font-size: 54px; line-height: 1; letter-spacing: .02em; }
.cvs-grid { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 52px; row-gap: 40px; }
.cvs-no { font-family: var(--font-serif); font-size: 20px; line-height: 1;
  letter-spacing: .08em; color: var(--teal); }
.cvs-ti { margin-top: 8px; font-family: var(--font-title); font-weight: 400;
  font-size: 24px; line-height: 1.18; }
.cvs-ti em { font-family: var(--font-script); font-style: normal; font-size: 27px;
  letter-spacing: 0; color: var(--teal); }
.cvs-body { margin-top: 10px; font-size: 14.5px; line-height: 1.64;
  color: color-mix(in srgb, var(--ink) 82%, transparent); }
.cvs-btn { display: inline-flex; width: max-content; margin-top: 42px;
  padding: 14px 26px; border: 1px solid var(--ink); color: var(--ink);
  text-decoration: none; transition: all .4s; }
.cvs-btn span { font-family: var(--font-label);
  font-weight: 600; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; }
.cvs-btn:hover { background: var(--ink); color: var(--white); }

/* the pol- "FROM REAL CELEBRATIONS" sticky polaroid reel (.sec-highlight-reel
   + .sec-polaroid-1/2/3 inside a .stick-wrap) was REMOVED on owner request
   2026-08-20, markup and rules both. .stick-wrap itself is a shared class in
   style.css and stays. */

/* ============ the energy on video: filmstrip band (weddings vst vocabulary;
   four portrait clips, outer two deliberately cut by the screen edges) ====== */
/* ground stays var(--cream): the darkroom var(--dark) was tried on owner
   request 2026-08-20 and reverted the same day. */
/* taller so the portrait clips are less cropped (owner 2026-08-20): tiles
   went 560 -> 720, section grows to match so nothing is sliced off */
.sec-full-image { --h: 820px; background: var(--cream); overflow: hidden; }
/* Three clips, not four (owner 2026-08-20), and the tiles now SIZE THEMSELVES
   from the viewport instead of being fixed at 440px: the strip is the full
   width of the section and each tile takes an equal share of what is left
   after the two gaps, so the row spans edge to edge at any window width with
   nothing sliced off. At 1440 that is 468px a tile, a little wider than the
   old fixed 440. Four fixed tiles measured 1814px against a 1440px window,
   which is why the first and last used to be cut by the screen edges. */
.vst-strip { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); display: flex; gap: 18px; width: 100%; }
.vst-tile { flex: 1 1 0; min-width: 0; height: 720px; object-fit: cover;
  object-position: 50% 35%; display: block; background: rgba(13,25,28,.08); }

/* ============ reviews: kind words slider (homepage vocabulary; party
   backdrop instead of the weddings shot) ============ */
.sec-reviews { --h: 100vh; position: relative; overflow: hidden; color: var(--cream);
  background-image: url("../assets/portfolio/36_Holiday-Social_Icon_Booth_Stock-2.jpg");
  background-size: cover; background-position: center;
  background-attachment: fixed; }
.sec-reviews::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.66)); }
.rvw { position: relative; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 140px; }
.rvw-eyebrow { font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .24em; text-transform: uppercase; color: rgba(252,251,249,.75); }
.rvw-script { font-family: var(--font-script); font-size: 48px; line-height: 1;
  color: #fff; margin-top: 12px; }
.rvw-rule { width: 420px; height: 1px; background: rgba(252,251,249,.45); }
.rvw-r-top { margin: 32px 0 26px; }
.rvw-r-bot { margin: 26px 0 24px; }
.rvw-stage { min-height: 190px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; width: 100%; }
.rvw-slide { display: none; }
.rvw-slide.on { display: block; }
.rvw-q { font-family: var(--font-title); font-size: 40px; line-height: 1.18;
  text-transform: uppercase; max-width: 860px; }
.rvw-q em { font-style: normal; }
.rvw-att { font-family: var(--font-heading); font-style: italic; font-size: 19px;
  color: rgba(252,251,249,.85); margin-top: 24px; }
.rvw-nav { display: flex; align-items: center; gap: 32px; }
.rvw-aro { background: none; border: 0; cursor: pointer; padding: 12px 8px;
  opacity: .85; transition: opacity .3s, transform .3s; }
.rvw-aro:hover { opacity: 1; }
.rvw-prev:hover { transform: translateX(-5px); }
.rvw-next:hover { transform: translateX(5px); }
.rvw-aro svg { width: 54px; height: 10px; fill: var(--cream); display: block;
  filter: drop-shadow(0 1px 5px rgba(13,25,28,.5)); }
.rvw-prev svg { transform: scaleX(-1); }
.rvw-count { font-family: var(--font-heading); font-style: italic; font-size: 16px;
  color: rgba(252,251,249,.7); min-width: 58px; }
.rvw-more { display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 30px; border: 1px solid rgba(252,251,249,.55);
  color: var(--cream); text-decoration: none; padding: 15px 42px;
  font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  transition: background .4s ease, color .4s ease, border-color .4s ease; }
.rvw-more:hover { background: var(--cream); color: var(--dark); border-color: var(--cream); }

/* ============ the planning process: the WEDDINGS page's spine (COPIED from
   css/services.css .sec-three-options / tos- — KEEP IN STEP; brought over on
   the owner's call 2026-08-20 from a screenshot). Deliberate deviations from
   the source: --h is auto and .tos-wrap is a flow element (services.html
   hangs it in the fixed 1200x980 .cv canvas, which a FOURTH entry overruns),
   a .tos-lede subtitle carries the process lede sentence, a fourth tos-in
   delay was added, and a mobile block stacks the thread down one rail.
   Entrance is IO-gated by script.js (.tos-prep on load, .tos-on in view);
   without JS the section renders static. ============ */
.sec-three-options { --h: auto; background: var(--dark); color: var(--cream); }
/* Tightened 2026-08-20 (owner: "make THE PLANNING PROCESS section shorter,
   maybe make the title fonts a little smaller"). The section ran 1595px tall.
   The biggest cost was .tos-title at 42px, which wrapped step 02 onto THREE
   lines inside the 460px column; at 31px the longest step fits in two, so the
   type shrink buys back more height than the padding does. Widths and the
   chip offsets are untouched on purpose: .tos-left .tos-chip { right: -87px }
   only centres on the thread while .tos-entry is exactly 460px wide, so
   changing the column width would knock every numbered chip off the line. */
.tos-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; padding: 64px 0 74px; }
.tos-top { text-align: center; margin-bottom: 38px; }
.tos-label { letter-spacing: .2em; font-size: 12px; color: rgba(252,251,249,.7); }
/* the .tos-script "Four simple steps" line was removed on owner request
   2026-08-20; the lede's top margin tightens from 14px to 8px so it sits up
   close under the label instead of leaving the script's gap behind. */
.tos-lede { max-width: 620px; margin: 8px auto 0; font-size: 14.5px; line-height: 1.65;
            color: rgba(252,251,249,.72); }
.tos-thread { position: relative; }
.tos-thread::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
                      width: 1px; background: rgba(252,251,249,.3); }
.tos-entry { position: relative; width: 460px; }
.tos-left { margin-left: 70px; text-align: right; }
.tos-right { margin-left: 670px; text-align: left; }
.tos-entry + .tos-entry { margin-top: 38px; }
.tos-chip { position: absolute; top: 4px; width: 34px; height: 34px; border-radius: 50%;
            border: 1px solid var(--teal); background: var(--dark); color: var(--teal);
            font-family: var(--font-label); font-weight: 600; font-size: 12px;
            letter-spacing: .05em; display: flex; align-items: center;
            justify-content: center; transition: background .45s, color .45s; z-index: 2; }
.tos-left .tos-chip { right: -87px; }
.tos-right .tos-chip { left: -87px; }
.tos-entry:hover .tos-chip { background: var(--teal); color: var(--white); }
.tos-title { font-family: var(--font-title); font-size: 31px; line-height: 1.08;
             margin-bottom: 10px; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.tos-left:hover .tos-title { transform: translateX(-8px); }
.tos-right:hover .tos-title { transform: translateX(8px); }
.tos-copy { font-size: 15px; line-height: 1.62; color: rgba(252,251,249,.8); }
.tos-cap { margin-top: 9px; font-family: 'PonteExtraLightItalic', serif; font-size: 16px;
           color: var(--teal); }
.tos-btn { display: flex; width: max-content; margin: 32px auto 0;
           padding: 15px 30px; border: 1px solid rgba(252,251,249,.8);
           color: var(--cream); text-decoration: none; transition: all .4s; }
.tos-btn span { font-family: var(--font-label); font-weight: 600; font-size: 12px;
                letter-spacing: .18em; text-transform: uppercase; }
.tos-btn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.tos-prep .tos-thread::before { transform: scaleY(0); transform-origin: top; }
.tos-on .tos-thread::before { animation: tos-draw 1.4s cubic-bezier(.2,.7,.2,1) .2s forwards; }
.tos-prep .tos-entry { opacity: 0; }
.tos-prep .tos-left { transform: translateX(-34px); }
.tos-prep .tos-right { transform: translateX(34px); }
.tos-on .tos-entry { animation: tos-in .9s cubic-bezier(.2,.7,.2,1) forwards; }
.tos-on .tos-entry:nth-child(1) { animation-delay: .5s; }
.tos-on .tos-entry:nth-child(2) { animation-delay: .75s; }
.tos-on .tos-entry:nth-child(3) { animation-delay: 1s; }
.tos-on .tos-entry:nth-child(4) { animation-delay: 1.25s; }
/* steps five to seven, added with the seven-step timeline (round 3, note 126).
   Without these the later entries keep .tos-prep's opacity:0 and never appear. */
.tos-on .tos-entry:nth-child(5) { animation-delay: 1.5s; }
.tos-on .tos-entry:nth-child(6) { animation-delay: 1.75s; }
.tos-on .tos-entry:nth-child(7) { animation-delay: 2s; }
@keyframes tos-draw { to { transform: scaleY(1); } }
@keyframes tos-in { to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .tos-wrap { width: auto; padding: 52px 24px 60px; }
  .tos-thread::before { left: 17px; }
  .tos-entry, .tos-left, .tos-right { width: auto; margin-left: 56px; text-align: left; }
  .tos-left .tos-chip, .tos-right .tos-chip { left: -56px; right: auto; }
  .tos-title { font-size: 25px; }
  .tos-prep .tos-left, .tos-prep .tos-right { transform: translateX(0); }
}

/* ============ final CTA: the overture (round 2 pick 2026-08-19, archived
   round in a_extra_sections/shuttergold/social-events-final-cta/): script +
   headline in cream straight on the oxblood ground, the practical half on a
   smaller sheet card, the gala 4x6 tucked over its lower right corner. This
   page's own design; NO LONGER in step with single-service.css's fin-
   clipboard (only the --fin-ox bakes below still mirror it). ============ */
.sec-final-cta { --h: max(100vh, 900px); --fin-ox: #5a1a12; background: var(--fin-ox);
  overflow: hidden; display: flex; align-items: center; justify-content: center; }
:root[data-colorway="coffee-espresso"] .sec-final-cta { --fin-ox: #241009; }
:root[data-colorway="ew-chestnut"] .sec-final-cta { --fin-ox: #3a0e04; }
:root[data-colorway="ew-espresso"] .sec-final-cta { --fin-ox: #2c0d06; }
:root[data-colorway="champagne-coffee"] .sec-final-cta { --fin-ox: #34150f; }
:root[data-colorway="champagne-coffee-red"] .sec-final-cta { --fin-ox: #34150f; }
.ovt-in { width: min(860px, calc(100% - 100px)); padding: 60px 0;
  text-align: center; color: var(--cream); }
/* the ovt-kicker line ("The only thing left to plan") was dropped on owner
   request 2026-08-20; the script line now opens the section */
.ovt-script { font-family: var(--font-script); font-size: 62px; line-height: 1; }
.ovt-head { font-family: var(--font-title); font-size: 30px; line-height: 1.4;
  margin-top: 26px; }
/* the script face reads small next to the serif caps, so it carries a size
   bump of its own (owner request 2026-08-20) */
.ovt-head em { font-family: var(--font-heading); font-style: italic;
  text-transform: none; letter-spacing: 0; font-size: 1.3em; }
.ovt-card { position: relative; width: 620px; max-width: 100%; margin: 40px auto 0;
  background: var(--cream); color: var(--ink); text-align: center;
  padding: 40px 56px 36px; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
.ovt-card::after { content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(37,31,24,.22); pointer-events: none; }
.ovt-para { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; }
.ovt-ctas { display: flex; gap: 16px; justify-content: center; margin-top: 24px; }
.ovt-btn { display: inline-block; font-family: var(--font-label); font-weight: 600;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cream); background: var(--fin-ox); text-decoration: none;
  border: 1px solid var(--fin-ox); padding: 15px 24px; transition: all .35s;
  white-space: nowrap; position: relative; z-index: 1; }
.ovt-btn:hover { background: transparent; color: var(--fin-ox); }
.ovt-btn.ovt-ghost { background: transparent; color: var(--ink);
  border-color: rgba(37,31,24,.4); }
.ovt-btn.ovt-ghost:hover { border-color: var(--ink); color: var(--ink); background: none; }
.ovt-meta { margin-top: 20px; font-family: var(--font-label); font-weight: 500;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }
/* the tipped gala-template piece on the card's bottom-right corner. LEAVE IT:
   it was briefly removed 2026-08-20 while centring the section and the owner
   put it straight back. Its 112px jut past the card is deliberate. */
.ovt-piece { position: absolute; z-index: 2; right: -112px; bottom: -74px;
  transform: rotate(7deg); background: var(--white); padding: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.ovt-piece img { display: block; width: 132px; height: 198px; object-fit: cover; }
/* round 4, note 152: two more prints on the card's free left side. They lean
   the other way from the original so the three read as a scattered set rather
   than a symmetrical pair, and they sit BESIDE the card, never above it: the
   headline above has no clearance to give. The strip keeps a true 2x6 ratio
   instead of being squeezed into the 4x6 frame. */
/* Owner 2026-09-13: the strip was covering almost all of the 4x6 behind it,
   "shift the one that's behind the photo strip a little bit up so you can see
   more of it". Straight up runs out fast: the headline's text ink ends only
   24px above this print, and the two overlap horizontally (the headline starts
   at x=301, the print ends at x=434 on a 1440 window), so more than ~20px puts
   a photo over her headline. The lift is therefore 10px, and the rest of the
   reveal comes from sliding this one left and dropping the strip a little,
   which costs nothing. Exposed area roughly doubles. */
.ovt-piece-2 { right: auto; left: -160px; bottom: auto; top: -14px;
  transform: rotate(-9deg); }
.ovt-piece-3 { right: auto; left: -74px; bottom: -90px; transform: rotate(-4deg); }
.ovt-piece-3 img { width: 88px; height: 264px; }
/* The card is a fixed 620px centred in a fluid container, so the narrower the
   window the closer the outer print gets to the edge. Below about 1080px it
   reaches it, and the section clips its own overflow, so the left pair pulls
   in. The original on the right has the whole gutter to itself and stays put. */
@media (max-width: 1080px) {
  .ovt-piece-2 { left: -112px; }
  .ovt-piece-3 { left: -50px; }
}

/* ============ footer: the homepage salone footer, carried over (cream under
   every colorway with ink text, the corporate page's call) ============ */
.sal-footer { background: var(--teal); color: var(--white); position: relative;
              overflow: hidden; }
.sal-grid { display: grid; grid-template-columns: 1fr 340px;
            width: min(1200px, calc(100% - 80px)); margin: 0 auto;
            padding: 78px 0 0; gap: 0 80px; }
.sal-invite { padding-right: 40px; }
.sal-logo { display: block; width: 240px; height: auto; margin-bottom: 26px; }
.sal-h { font-family: var(--font-serif); font-weight: 400; font-size: 74px;
         line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; }
.sal-h em { font-family: 'MrsSaintDelafield', cursive; font-style: normal;
            text-transform: none; font-size: 96px; letter-spacing: 0; line-height: .9; }
.sal-nl { display: flex; align-items: flex-end; max-width: 520px; }
.sal-nl .sal-go { background: transparent; border: 1px solid var(--white);
                  color: var(--white); font-family: var(--font-label);
                  font-weight: 600; font-size: 12px; letter-spacing: .18em;
                  text-transform: uppercase; padding: 14px 26px; margin-left: 0;
                  text-decoration: none; white-space: nowrap; transition: all .4s; }
.sal-nl .sal-go:hover { background: var(--white); color: var(--ink); }
.sal-rail { border-left: 1px solid rgba(255,255,255,.35); padding-left: 52px;
            display: flex; flex-direction: column; }
.sal-rail a { display: flex; align-items: center; justify-content: space-between;
              font-family: var(--font-label); font-weight: 600; font-size: 13px;
              letter-spacing: .2em; text-transform: uppercase; padding: 15px 0;
              border-bottom: 1px solid rgba(255,255,255,.3);
              text-decoration: none; }
.sal-rail a:first-child { padding-top: 4px; }
.sal-arw { opacity: 0; transform: translateX(-10px); transition: all .35s ease;
           font-family: var(--font-body); }
.sal-rail a:hover .sal-arw { opacity: 1; transform: none; }
.sal-ticker { margin-top: 64px; border-top: 1px solid rgba(255,255,255,.35);
              overflow: hidden; white-space: nowrap; padding: 20px 0 24px; }
.sal-ticker-track { display: inline-block;
                    animation: sal-tick 38s linear infinite; }
.sal-ticker span { font-family: var(--font-serif); font-size: 44px;
                   letter-spacing: .06em; text-transform: uppercase;
                   opacity: .55; padding-right: .6em; }
@keyframes sal-tick { from { transform: translateX(0); }
                      to { transform: translateX(-50%); } }
.sal-legal { display: flex; justify-content: space-between; align-items: center;
             width: min(1200px, calc(100% - 80px)); margin: 0 auto;
             padding: 16px 0 22px; font-family: var(--font-label);
             font-weight: 600; font-size: 11px; letter-spacing: .2em;
             text-transform: uppercase; opacity: .75; }
.sal-legal a { text-decoration: none; }
:root[data-colorway] .sal-footer { background: var(--cream); color: var(--ink); }
:root[data-colorway] .sal-nl .sal-go { border-color: var(--ink); color: var(--ink); }
:root[data-colorway] .sal-nl .sal-go:hover { background: var(--ink); color: var(--cream); }
:root[data-colorway] .sal-rail { border-left-color: color-mix(in srgb, var(--ink) 35%, transparent); }
:root[data-colorway] .sal-rail a { border-bottom-color: color-mix(in srgb, var(--ink) 30%, transparent); }
:root[data-colorway] .sal-ticker { border-top-color: color-mix(in srgb, var(--ink) 35%, transparent); }

/* ============ mobile layer (additive; the style.css blanket flows the .cv
   canvases, these re-layout the flow sections) ============ */
@media (max-width: 900px) {
  /* --- page chrome ---------------------------------------------------------
     Two things the shared blanket breaks on this page, both fixed here:
     (1) the floating hero hamburger is a `.cv > *`, so the blanket flowed it
         to static and it ballooned to 300x300, growing its 1px section and
         shoving the whole hero down the page. It goes back to an absolute
         42x32 box and the section back to 1px.
     (2) the fixed white bar's six desktop links measure well past 390px and
         were rendering clipped ("NGS  CORPORATE  SOCIAL EVENTS  ABOUT + HIGHLIGH")
         on every screen past the hero. The nav drops; the bar keeps its
         hamburger, which is the mobile way into the same links. Its height is
         restored explicitly because the burger is absolute and `.sec` is
         `height: auto` here, which would otherwise collapse the bar to 0. */
  .sec-on-image-aperol-menu { height: 1px; }
  .sec-on-image-aperol-menu .cv { height: 1px; }
  .sec-on-image-aperol-menu .wmenu-btn { position: absolute; left: 18px; top: 20px;
    width: 42px; height: 32px; }
  .sec-stick-top-menu-white { height: 53px; }
  .sec-stick-top-menu-white .stm-in { display: none; }
  .sec-stick-top-menu-white .stm-burger { left: 18px; }

  .soc-wall { grid-template-columns: 1fr; }
  .soc-wall video:nth-child(1), .soc-wall video:nth-child(3) { display: none; }
  .soc-logo { width: 220px; }
  .soc-h1 { font-size: clamp(38px, 11vw, 54px); }
  .soc-para { font-size: 15px; }
  .soc-ctas { flex-direction: column; width: 100%; max-width: 340px; }
  .soc-cta { text-align: center; }
  .soc-roll { display: none; }
  .int-wrap { width: auto; padding: 0 24px; display: block; }
  .int-photo { height: 420px; margin-top: 36px; }
  .int-snap { width: 132px; height: 165px; right: -6px; bottom: -26px; }
  /* bottom padding carries the marquee band plus the int-snap's overhang */
  .sec-intro { padding: 64px 0 124px; }
  .sec-intro .twn-ticker { padding: 14px 0; }
  .twn-track span { font-size: 11px; letter-spacing: .24em; }
  .int-script { font-size: 44px; }
  .twx-wrap { width: auto; padding: 60px 24px 68px; }
  /* MOBILE ONLY (owner request 2026-08-20): drop the head — "Vintage-inspired
     booths · Open-air & enclosed" and the "Take your pick" script — down off
     the section's top edge. The -50px pull-up on .twx-kicker above was tuned
     against the wrap's 130px DESKTOP lead-in; against the 60px mobile one it
     left the kicker only 10px from the top, all but touching the marquee band
     that closes the intro section. Neutralising it here restores the full
     60px. Only the kicker needs the rule: it is the head's first child, so in
     normal flow the script travels with it. */
  .sec-packages .twx-kicker { margin-top: 0; }
  .twx-duo { grid-template-columns: 1fr; gap: 26px; }
  .twx-twin { padding: 26px 24px 30px; }
  /* one column makes the lounge box wider without making it taller, so the
     letterbox gets thinner and the crop has to ride higher still to clear the
     hairline. Checked at 360, 390 and 430. */
  .twx-quad .twx-twin:nth-of-type(4) .twx-ph img { object-position: 50% 16%; }
  .twx-script { font-size: 42px; }
  .twx-base { grid-template-columns: 1fr; gap: 16px; margin-top: 36px; }
  /* every-rental strip: the desktop run is a wrapping row divided by left
     hairlines, which on one column leaves a stray tick beside each line.
     Stack it and hang the dividers off the top instead. */
  .cpr-inc { margin-top: 44px; padding-top: 32px; }
  .cpr-lbl { font-size: 32px; }
  .cpr-list { flex-direction: column; align-items: center; gap: 0;
    max-width: 320px; }
  .cpr-list li { padding: 11px 0; }
  .cpr-list li + li { border-left: 0;
    border-top: 1px solid rgba(252,251,249,.22); }
  /* templates colour match: the row wraps instead of scrolling, so all five
     designs stay visible and the strips keep their true 1:3 shape */
  .tpx-wrap { width: auto; padding: 0 24px; }
  .sec-templates { padding: 92px 0 88px; }
  .tpx-script { font-size: 42px; }
  .tpx-row { flex-wrap: wrap; gap: 14px; }
  .tpx-card { width: 148px; height: 222px; }
  .tpx-strip { width: 80px; height: 240px; }
  /* --- enhancements rail: the desktop 90px gutter plus a 520px card is wider
     than the phone, and the head is a flex row whose REQUEST INFORMATION
     button measured L279 R460 — 70px past the viewport, clipped by the
     section. The head stacks, the gutter drops to 24px, and the cards become
     a 78vw snap filmstrip so one card reads at a time with the next peeking. */
  .sec-other-a-la-carte { min-height: 0; --oalc-gut: 24px; }
  .oalc-wrap { padding: 64px 0 60px; }
  .oalc-head { display: block; }
  .oalc-kicker { font-size: 11px; letter-spacing: .24em; }
  .oalc-script { font-size: 40px; }
  .oalc-btn { margin-top: 20px; width: 100%; max-width: 340px; height: 50px; }
  .oalc-rail { margin-top: 28px; gap: 16px; }
  .oalc-card { flex: 0 0 78vw; }
  .oalc-win { height: 250px; }
  .oalc-plate { padding: 20px 22px 22px; }
  /* the price sits under the title instead of beside it: side by side, a long
     title plus "With audio guestbook" cannot both fit 78vw */
  .oalc-row { flex-direction: column; align-items: flex-start; gap: 4px;
    margin-bottom: 10px; }
  .oalc-t { font-size: 24px; }
  .oalc-price { text-align: left; }
  .oalc-d { font-size: 14px; }
  .oalc-ctrl { padding: 22px 24px 0; gap: 16px; }
  .oalc-arrow { width: 46px; height: 46px; flex: 0 0 auto; }
  .oalc-track { flex: 1 1 auto; }
  /* --- backdrops lookbook: one card at a time, arrows + swipe (mirrors the
     homepage's mobile treatment in css/home.css) */
  .sec-backdrops { padding: 60px 0 64px; min-height: 0; }
  .bdg-wrap { padding: 0 20px; }
  .bdg-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 0; max-width: 300px; scrollbar-width: none; }
  .bdg-grid::-webkit-scrollbar { display: none; }
  .bdg-card { flex: 0 0 100%; scroll-snap-align: start; }
  .bdg-frame { aspect-ratio: 4/5; flex: 0 0 auto; }   /* see the desktop note */
  .bdg-title { font-size: 20px; }
  .bdg-copy { font-size: 12px; margin-bottom: 10px; }
  .bdg-nav { display: flex; align-items: center; justify-content: center;
    gap: 28px; margin-top: 14px; }
  .bdg-aro { background: none; border: 0; cursor: pointer; padding: 10px 6px;
    opacity: .85; transition: opacity .3s; }
  .bdg-aro svg { width: 46px; height: 9px; fill: var(--ink); display: block; }
  .bdg-prev svg { transform: scaleX(-1); }
  .bdg-count { font-family: var(--font-heading); font-style: italic;
    font-size: 15px; color: color-mix(in srgb, var(--ink) 65%, transparent);
    min-width: 52px; text-align: center; }
  .bdg-eyebrow { transform: none !important; }        /* editor inline nudges */
  .bdg-crest .bdg-script { transform: none !important; font-size: 30px; }
  .bdg-crest { margin-bottom: 12px; }
  /* --- keychains: iOS ignores background-attachment: fixed, so the damask
     wallpaper rides a position:fixed pseudo-layer clipped to the section by
     clip-path (the established pattern from css/home.css's three-options,
     featured and reviews bands). The gold-keylined card stacks above it. */
  .sec-keychains { background: none; clip-path: inset(0); }
  .sec-keychains::before { content: ''; position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(color-mix(in srgb, var(--dark) 60%, transparent),
                      color-mix(in srgb, var(--dark) 60%, transparent)),
      url('../assets/wallpaper-bg.webp');
    background-size: auto, 520px auto; background-repeat: no-repeat, repeat; }
  .sec-keychains .kcx-card { position: relative; z-index: 1; }
  .kcx-card { width: auto; margin: 0 24px; padding: 28px; display: block; }
  .sec-keychains { padding: 64px 0; }
  .kcx-photo { margin-bottom: 32px; }
  .kcx-photo img { height: 420px; }
  .kcx-script { font-size: 44px; }
  .cvs-two { display: flex; flex-direction: column; gap: 44px;
    padding: 56px 20px 60px; }
  .cvs-pane { position: relative; width: 100%; height: 360px; }
  .cvs-shot { position: absolute; }
  .cvs-shot .ph { height: 100%; }
  .cvs-small { left: 10px; bottom: -28px; width: 150px; height: 194px; }
  .cvs-head { font-size: 38px; }
  .cvs-grid { grid-template-columns: 1fr; row-gap: 28px; }
  /* guestbooks: one column, photo above the list. Hover cannot happen on
     touch, so every entry opens and stays open here. */
  .gbf-wrap { width: auto; margin: 0 24px; padding: 64px 0 70px;
    display: block; }
  .gbf-slot { width: auto; margin-bottom: 30px; }
  .gbf-frame { padding: 12px 12px 9px; box-shadow: none; }
  .gbf-window { height: auto; aspect-ratio: 3 / 4; }
  .gbf-slide { opacity: 0; }
  .gbf-slide.is-on { opacity: 1; }
  .gbf-title { font-size: clamp(30px, 8.8vw, 38px); margin: 12px 0 26px; }
  .gbf-item, .gbf-item.is-on { opacity: 1; }
  .gbf-desc, .gbf-item.is-on .gbf-desc { max-height: none; margin-top: 10px;
    font-size: 15px; }
  .gbf-arrow { display: none; }
  /* --- the energy strip: this section is a `--h: 660px` band holding an
     ABSOLUTELY centred strip, and the shared `.sec { height: auto }` collapsed
     it to height 0 — the three clips were rendering entirely outside their own
     section and never appeared on a phone. The strip goes back into flow as a
     snap filmstrip; three 118px-wide tiles (what `flex: 1` gave at 390) were
     unreadable, so each takes 62vw and the next one peeks. */
  .sec-full-image { --h: auto; height: auto; padding: 44px 0; }
  .sec-full-image .vst-strip { position: static; transform: none; width: auto;
    gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 24px; scrollbar-width: none; }
  .sec-full-image .vst-strip::-webkit-scrollbar { display: none; }
  .sec-full-image .vst-tile { flex: 0 0 62vw; height: 380px;
    scroll-snap-align: center; }

  /* --- reviews: the photo rides a fixed ::after layer clipped to the section
     (same iOS-proof emulation as the keychains band); the existing ::before
     scrim and the quotes stack above it. Ported from css/home.css's reviews
     block — keep the two in step. The !important pair beats the inline
     font-size/transform the visual editor left on the script and attribution. */
  .sec-reviews { height: auto; min-height: 100vh; background: none;
    clip-path: inset(0); }
  .sec-reviews::after { content: ''; position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background: url("../assets/portfolio/36_Holiday-Social_Icon_Booth_Stock-2.jpg")
                center / cover no-repeat; }
  .sec-reviews::before { z-index: 1; }
  .rvw { height: auto; min-height: 100vh; padding: 90px 24px;
    position: relative; z-index: 2; }
  .rvw-script { font-size: 40px !important; }
  .rvw-att { font-size: 24px !important; transform: none !important; }
  .rvw-rule { width: min(420px, 78vw); }
  .rvw-q { font-size: clamp(24px, 6.6vw, 32px); }
  .rvw-stage { min-height: 150px; }
  .rvw-nav { gap: 22px; }
  .ovt-in { width: 100%; padding: 60px 20px 70px; }
  .ovt-piece { display: none; }
  .ovt-card { padding: 36px 26px 32px; }
  .ovt-script { font-size: 42px; }
  .ovt-head { font-size: 24px; }
  .ovt-ctas { flex-direction: column; align-items: center; }
  .sal-grid { grid-template-columns: 1fr; width: calc(100% - 48px);
    padding-top: 60px; gap: 0; }
  .sal-invite { padding-right: 0; }
  .sal-h { font-size: clamp(40px, 12vw, 54px); }
  .sal-h em { font-size: 1.25em; }
  .sal-nl { flex-direction: column; align-items: stretch; max-width: none; }
  .sal-nl .sal-go { margin: 18px 0 0; justify-content: center; display: flex; }
  .sal-rail { border-left: 0; padding-left: 0; margin-top: 48px; }
  .sal-rail a:first-child { border-top: 1px solid rgba(255,255,255,.3);
    padding-top: 15px; }
  .sal-arw { opacity: 1; transform: none; }
  .sal-ticker { margin-top: 44px; }
  .sal-ticker span { font-size: 26px; }
  .sal-legal { width: calc(100% - 48px); }

  /* --- menu overlay: the 1200px canvas becomes a scrollable column. Ported
     from css/home.css (same markup and z-menu-open_* classes on both pages) —
     keep the two in step. The style.css blanket already flowed the canvas
     children; these give them order, and the three social icons and the close
     button go back to absolute. */
  .menu-overlay .cv { width: auto; height: auto; min-height: 100%;
    display: flex; flex-direction: column; padding: 84px 28px 96px; }
  .menu-overlay .z-menu-open_0 { position: absolute; left: 16px; top: 12px;
    width: 30px; height: 48px; }
  .menu-overlay .z-menu-open_4, .menu-overlay .z-menu-open_6,
  .menu-overlay .z-menu-open_7 { display: none; }
  .menu-overlay .cv > .t-title { width: auto; text-align: left;
    font-size: 26px; margin: 9px 0; }
  .menu-overlay .z-menu-open_10 { order: 20; margin-top: 30px;
    width: 100%; max-width: 340px; height: 50px; }
  .menu-overlay .cv > .z-menu-open_8 { order: 21; margin: 34px 0 0;
    width: 200px; height: auto; }
  .menu-overlay .z-menu-open_9 { order: 22; width: auto; text-align: left;
    font-size: 14px; margin-top: 10px; }
  .menu-overlay .z-menu-open_19 { order: 23; margin-top: 28px; width: auto;
    text-align: left; }
  .menu-overlay .z-menu-open_20, .menu-overlay .z-menu-open_21 { order: 24;
    width: auto; text-align: left; margin-top: 6px; }
  .menu-overlay .z-menu-open_1, .menu-overlay .z-menu-open_2,
  .menu-overlay .z-menu-open_3 { position: absolute; bottom: 30px;
    width: 26px; height: 20px; }
  .menu-overlay .z-menu-open_1 { left: 30px; }
  .menu-overlay .z-menu-open_3 { left: 68px; }
  .menu-overlay .z-menu-open_2 { left: 106px; }
}