/* menu overlay: the homepage's Shutter Gold menu verbatim (geometry copied
   from css/home.css 2026-08-16), 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). Same
   behavior as the weddings page, but with the real Shutter Gold links. */
.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, same treatment as services.html.
   z 6: the hero's br-left(2)/br-seam(4) sit in the root stacking context, and
   the section comes later in source — the shell must outrank them or the
   button paints behind the panel */
.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(--ink); }
.wmenu-btn:hover { opacity: .55; }

/* ============ corporate hero: the boardroom (round 1, 02 selected) ============
   dark type chamber left, looping activation video right (the matted inset
   print was cut on owner request 2026-08-16). Rides the colorway vars. */
.sec-header-image { --h: max(100vh, 720px); display: grid; grid-template-columns: 46% 54%;
  background: var(--cream); overflow: visible; }
/* light tan chamber (owner request 2026-08-16, was the dark maroon);
   panel type runs ink, the wordmark is the dark version */
.br-left { background: var(--cream); color: var(--ink); display: flex; flex-direction: column;
  justify-content: center; padding: 92px 64px 60px 96px;
  position: relative; z-index: 2; }
/* the wordmark leads the panel's stack, above the kicker (owner request
   2026-08-16; it was previously centered in the top band) */
.br-logo { width: 280px; height: auto; align-self: flex-start; margin-bottom: 24px;
  opacity: 0; animation: br-rise .8s ease .1s forwards; }
.br-kicker { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--teal); margin-bottom: 24px;
  opacity: 0; animation: br-rise .8s ease .2s forwards; }
/* one headline: DESIGNED FOR / BUSINESS as matching serif lines, then the
   script "Impact." smaller in the accent color (owner request 2026-08-16).
   Size capped so DESIGNED FOR, the longest line, fits the panel. */
.br-h1 { font-family: var(--font-title); font-weight: 400; font-size: clamp(44px, 4vw, 57px);
  line-height: 1.08; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 30px;
  text-align: left; }
.br-h1 span i { white-space: nowrap; }
.br-h1 span { display: block; overflow: hidden; }
.br-h1 span i { display: block; font-style: normal; transform: translateY(110%);
  animation: br-lift 1s cubic-bezier(.23,1,.32,1) forwards; }
.br-h1 span:nth-child(1) i { animation-delay: .4s; }
.br-h1 span:nth-child(2) i { animation-delay: .52s; }
.br-h1 span:nth-child(3) i { animation-delay: .64s; }
.br-h1 .br-h1-scr i { font-family: var(--font-script); text-transform: none;
  font-size: .9em; line-height: 1; color: var(--teal);
  /* the script's swash ascenders and descenders overshoot the em box in both
     directions; pad the clip box and pull the padding back out with margins
     so the lift animation can still hide it fully (110% > padded height) */
  padding: .32em .1em .28em 0; margin: -.06em 0 -.16em; }
@keyframes br-lift { to { transform: none; } }
@keyframes br-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.br-para { font-size: 15px; line-height: 1.8;
  color: color-mix(in srgb, var(--ink) 82%, transparent); max-width: 400px;
  margin-bottom: 32px; opacity: 0; animation: br-rise .9s ease .8s forwards; }
.br-ctas { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center;
  max-width: 420px; opacity: 0; animation: br-rise .9s ease .95s forwards; }
.br-cta { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .24em; text-transform: uppercase; text-decoration: none;
  padding: 15px 26px; border: 1px solid var(--ink); transition: background .35s ease, color .35s ease;
  white-space: nowrap; }
.br-cta:hover { background: var(--ink); color: var(--cream); }
.br-cta.ghost { border-color: color-mix(in srgb, var(--ink) 35%, transparent);
  color: color-mix(in srgb, var(--ink) 75%, transparent); }
.br-cta.ghost:hover { background: none; border-color: var(--teal); color: var(--teal); }
.br-types { margin-top: 28px; max-width: 420px; font-family: var(--font-label);
  font-weight: 500; font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  line-height: 2.1; color: color-mix(in srgb, var(--ink) 48%, transparent);
  opacity: 0; animation: br-rise .9s ease 1.1s forwards; }
.br-right { position: relative; overflow: hidden; }
.br-right > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 36% 32%; max-width: none; animation: br-push 26s ease-in-out infinite alternate; }
@keyframes br-push { from { transform: scale(1); } to { transform: scale(1.08); } }
.br-right::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgba(13,25,28,.12), transparent 40%, rgba(13,25,28,.38) 88%); }
/* Bottom scrim (round 3, note 104: "the bottom of the photo and logos are
   mushed together" on a tall desktop window). The ::after scrim runs at 200deg,
   so how much of the bottom-right it actually darkens depends on the wing's
   aspect ratio; on a tall window the crop lands the subject's white sleeve
   exactly where the white-bordered template cards and the ivory label sit, and
   they lose all separation. This band always darkens the bottom edge, whatever
   the crop. z-index 2 lifts it over the photo but under .br-tuck (z 3). */
.br-right::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: min(46%, 430px); z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(13,25,28,.58), rgba(13,25,28,.22) 46%, transparent); }
/* round-4 pick "the overlap": two real branded templates tucked over the
   photo's bottom corner (owner sized them up on selection) */
.br-tuck { position: absolute; right: 34px; bottom: 40px; z-index: 3; width: 400px; height: 330px; }
.br-tuck img { position: absolute; background: var(--white); padding: 7px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.br-tuck img:nth-of-type(1) { right: 128px; bottom: 16px; height: 300px; transform: rotate(-3.2deg); }
.br-tuck img:nth-of-type(2) { right: 0; bottom: 0; height: 258px; transform: rotate(2.4deg); }
.br-tuck-lbl { position: absolute; right: 4px; bottom: -26px;
  font-family: var(--font-label); font-weight: 600; font-size: 8.5px;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(252,251,249,.7);
  white-space: nowrap;
  /* ivory on whatever the crop happens to put behind it; the shadow keeps it
     readable where the photo goes pale (note 104) */
  text-shadow: 0 1px 5px rgba(13,25,28,.65); }
.br-seam { position: absolute; left: 46%; top: 0; bottom: 0; width: 1px;
  background: var(--teal); opacity: .55; z-index: 4; }
/* Tall desktop windows (note 104). The hero is max(100vh,720px), so on a
   portrait-ish monitor it grows to 1400px+ while .br-tuck stays pinned 40px
   off the bottom: the cards and their label end up crushed against the
   section's bottom edge and the trusted-by logos right below it. Floating the
   tuck as a percentage keeps it over the photo's lower third at any height.
   Landscape desktops (1440x900, 1512x982) are above 4/3 and untouched. */
@media (min-width: 861px) and (max-aspect-ratio: 4 / 3) {
  .br-tuck { bottom: 11%; }
}
/* ============ corporate packages: the triplets (variants round pick 01) ====
   the weddings Twins card language (services.css .twx-) extended to three
   matched cards on the dark ground, middle card ribboned. Rides the colorway
   vars. Entrance is IO-gated by script.js (.cpx-prep on load, .cpx-on in
   view); renders static without JS. Cards are the real corporate set: Icon /
   Legendary (their site's inclusions) / Classic Vintage Enclosed (tol copy).
   Ground: the same fixed damask-wallpaper-under-glaze the add-on rail uses
   (owner request 2026-08-16); the color-mix glaze re-tints per colorway. */
.sec-corp-packages { --h: auto;
  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; }
.cpx-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; padding: 110px 0 120px; }
.cpx-head { text-align: center; margin-bottom: 36px; }
/* the kicker rides a little higher than flow puts it, opening air above the
   script line without moving the rest of the head (owner request 2026-08-20) */
.cpx-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12.5px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--white);
  position: relative; top: -14px; }
.cpx-script { font-family: var(--font-script); font-size: 54px; line-height: 1.1;
  margin-top: 4px; color: var(--cream); }
.cpx-trio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; }
/* four experiences since 2026-09-08 (Editorial Portrait Lounge). Same card,
   one more column: the gutter and the list type step down so four fit the
   1200px canvas without the cards getting narrower than their type wants.
   Must follow .cpx-trio to win on equal specificity. */
.cpx-quad { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cpx-quad .cpx-card { padding-left: 24px; padding-right: 24px; }
.cpx-quad .cpx-card h2 { font-size: 22px; }
.cpx-quad .cpx-inc li { font-size: 12.5px; padding: 7px 0; }
.cpx-quad .cpx-cta { font-size: 11px; padding-left: 12px; padding-right: 12px; }
/* Her real lounge photo (portrait-lounge-western-rich.jpg, in 2026-09-12)
   stands the couple further back than the placeholder it replaced: faces run
   13%-28% of the source, and the 172px letterbox centred on a 1067x1600 frame
   opens at 23%, which cut both heads. The mobile override below was already
   near this value by coincidence and still reads correctly. */
.cpx-quad .cpx-card:nth-of-type(4) .cpx-ph img { object-position: 50% 19%; }
.cpx-card { position: relative; background: var(--white); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  padding: 28px 32px 32px; text-align: center; display: flex; flex-direction: column; }
.cpx-card::after { content: ''; position: absolute; inset: 7px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); pointer-events: none; }
.cpx-mat { position: relative; padding: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); margin-bottom: 20px; }
.cpx-ph { overflow: hidden; height: 172px; }
.cpx-ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1); }
.cpx-card:hover .cpx-ph img { transform: scale(1.05); }
.cpx-ribbon { position: absolute; top: 20px; 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; }
.cpx-no { font-family: 'BilletScriptOpti', cursive; font-size: 21px; color: var(--teal); }
.cpx-card h2 { font-family: var(--font-serif); font-weight: 400; font-size: 27px;
  line-height: 1.1; margin: 4px 0 14px; }
.cpx-inc { list-style: none; margin: 0 0 22px; padding: 0; }
.cpx-inc li { padding: 8px 0; font-size: 13.5px; line-height: 1.5;
  color: color-mix(in srgb, var(--ink) 82%, transparent); }
.cpx-inc li + li { border-top: 1px solid color-mix(in srgb, var(--ink) 11%, transparent); }
.cpx-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 26px; background: var(--ink); color: var(--cream); text-decoration: none;
  font-family: var(--font-label); font-weight: 600; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--ink);
  transition: all .4s; }
.cpx-cta:hover { background: transparent; color: var(--ink); }
.cpx-prep .cpx-card { opacity: 0; transform: translateY(28px); }
.cpx-on .cpx-card { animation: cpx-up .9s cubic-bezier(.2,.7,.2,1) forwards; }
.cpx-on .cpx-card:nth-child(4) { animation-delay: .3s; }
.cpx-on .cpx-card:nth-child(2) { animation-delay: .15s; }
.cpx-on .cpx-card:nth-child(3) { animation-delay: .3s; }
@keyframes cpx-up { to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .cpx-wrap { width: auto; padding: 60px 24px 68px; }
  .cpx-trio, .cpx-quad { grid-template-columns: 1fr; gap: 22px; }
  /* Editorial Portrait Lounge, card four: its photo is a 2:3 portrait and the
     200px card frame hides 205px of it, so the default centre anchor began the
     visible band 25% down and cut the tops of both heads off. Faces sit 17 to
     40%, so 18% starts the band at 9% and keeps them whole. The other three
     cards are fine as they are: Icon's faces sit low enough, and Legendary and
     Classic Vintage have no faces to lose. */
  .cpx-quad .cpx-card:nth-of-type(4) .cpx-ph img { object-position: 50% 18%; }
  .cpx-script { font-size: 42px; }
}
/* (the "gathering point" approach cover section was cut on owner request
   2026-08-16; its round archive lives in a_extra_sections/shuttergold/) */
/* ============ the planning process: the row (four-steps round 2, 06) ========
   the dossier tabs cut down to a static four-column row under one hairline:
   step label, serif lead (no script words in the leads, owner request), body
   copy, one centered CTA. No JS. Rides the colorway vars; entrance via the
   shared [data-rise] blanket. */
.sec-details { --h: auto; background: var(--cream); display: flex;
  align-items: center; min-height: max(100vh, 760px); }
.stp-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto;
  padding: 60px 0; text-align: center; }
.stp-script { font-family: var(--font-script); font-size: 46px; line-height: 1;
  color: var(--teal); }
.stp-ttl { font-family: var(--font-title); font-weight: 400; font-size: 52px;
  line-height: 1.05; margin: 8px 0 52px; }
.stp-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px;
  text-align: left; padding-top: 36px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); }
.stp-no { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--teal);
  margin-bottom: 14px; }
.stp-lead { font-family: var(--font-title); font-weight: 400; font-size: 21px;
  line-height: 1.25; margin-bottom: 12px; }
.stp-body { font-size: 13px; line-height: 1.65;
  color: color-mix(in srgb, var(--ink) 76%, transparent); }
.stp-foot { margin-top: 52px; }
.stp-cta { display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 34px; border: 1px solid var(--ink); color: var(--ink);
  text-decoration: none; font-family: var(--font-label); font-weight: 600;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  transition: background .4s, color .4s; }
.stp-cta:hover { background: var(--ink); color: var(--cream); }
@media (max-width: 900px) {
  .sec-details { min-height: 0; }
  .stp-wrap { width: auto; padding: 60px 24px 68px; }
  .stp-row { grid-template-columns: 1fr; gap: 30px; }
  .stp-ttl { font-size: 40px; }
}
.sec-text-and-image { --h: 895px; background: rgba(255,255,255,1); }
.z-text-and-image_0 { left: 667px; top: 60px; width: 419px; height: 711px; }
.z-text-and-image_1 { left: 114px; top: 505px; width: 465px; height: 1px; background: currentColor; opacity:.5; }
.z-text-and-image_2 { left: 114px; top: 60px; width: 486px; color: rgba(37,31,24,1); text-transform: none; line-height: 1.2; letter-spacing: -0.01em; font-size: 47px; text-align: left; font-family: 'PonteLight'; font-weight: 400; font-style: normal; }
.z-text-and-image_3 { left: 114px; top: 454px; width: 301px; font-size: 14px; text-align: left; }
.z-text-and-image_4 { left: 114px; top: 533px; width: 433px; color: rgba(37,31,24,1); font-size: 18px; }
.z-text-and-image_5 { left: 114px; top: 722px; width: 273px; height: 49px; }
/* Press band: trusted-by logo ticker (chosen from the press-variants round,
   01 ticker rail; logos ride an infinite marquee, no hover pause) */
.sec-press { --h: 300px; background: var(--dark);
  border-top: 1px solid rgba(245,234,217,.18);
  border-bottom: 1px solid rgba(245,234,217,.18);
  display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.prs-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .34em; text-transform: uppercase; color: var(--teal);
  text-align: center; margin-bottom: 38px; }
.prs-rail { position: relative; overflow: hidden; }
.prs-marq { display: flex; width: max-content; animation: prs-slide 80s linear infinite; }
@keyframes prs-slide { to { transform: translateX(-50%); } }
.prs-set { display: flex; align-items: center; gap: 58px; padding-right: 58px; }
.prs-set img { max-height: 78px; max-width: 186px; width: auto; height: auto;
  filter: grayscale(1) invert(1) sepia(.3) brightness(1.12); opacity: .92; }
.prs-dia { color: var(--teal); font-size: 11px; line-height: 1; }
.prs-rail { -webkit-mask: linear-gradient(90deg, transparent, #000 180px, #000 calc(100% - 180px), transparent);
  mask: linear-gradient(90deg, transparent, #000 180px, #000 calc(100% - 180px), transparent); }
/* the "A few of the brands…" subline was cut on owner request 2026-08-20;
   the band centers its kicker + rail on its own */
/* Gallery CTA: the print slot (design-variants round 4 pick, 2026-08-16).
   A branded four-frame strip prints out of a slot on a loop. Palette rides the
   colorway vars: --dark band, --cream ink, --teal accent slot. */
.sec-gallery-cta { --h: max(100vh, 820px); background: #6e1522; overflow: hidden; }
.sec-gallery-cta::before { content: ''; position: absolute; right: -120px; top: -180px;
  width: 640px; height: 640px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--brown), transparent 70%); opacity: .3; }
.ps-copy { left: 0; top: 50%; transform: translateY(-50%); width: 600px; }
.ps-kicker { font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--teal); }
.ps-script { font-family: var(--font-script); font-size: 56px; line-height: 1.05;
  color: color-mix(in srgb, var(--cream) 90%, transparent); margin: 14px 0 4px; }
.ps-title { font-family: var(--font-title); font-size: 46px; line-height: 1.12;
  color: var(--cream); margin-bottom: 22px; }
.ps-para { font-family: var(--font-body); font-size: 16.5px; line-height: 1.7;
  color: color-mix(in srgb, var(--cream) 82%, transparent); width: 540px; margin-bottom: 34px; }
.ps-ctas { display: flex; align-items: center; gap: 30px; }
.ps-btn { display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--cream); padding: 17px 40px; text-decoration: none;
  font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
  transition: background .35s, color .35s; }
.ps-btn:hover { background: var(--cream); color: #6e1522; }
.ps-link { font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--teal);
  text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--teal) 50%, transparent);
  padding-bottom: 3px; transition: border-color .35s; }
.ps-link:hover { border-color: var(--teal); }
.ps-meta { margin-top: 40px; font-family: var(--font-label); font-weight: 500;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 50%, transparent); }
.ps-rig { left: 800px; top: 50%; transform: translateY(-50%); width: 320px; }
.ps-slot { position: relative; width: 300px; margin: 0 auto; height: 18px; border-radius: 9px;
  background: linear-gradient(180deg, #1a0a0c, #0f0506); z-index: 4;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--cream) 8%, transparent), inset 0 3px 6px rgba(0,0,0,.8); }
.ps-slot::after { content: ''; position: absolute; left: 22px; right: 22px; top: 7px; height: 4px;
  border-radius: 2px; background: #000; }
.ps-lamp { position: absolute; right: 10px; top: 7px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 8px var(--teal);
  animation: ps-blink 9s linear infinite; }
@keyframes ps-blink { 0%, 74% { opacity: 1; } 76%, 88% { opacity: .15; } 90%, 100% { opacity: 1; } }
/* The window clips the strip as it rolls out, so its height must be at least
   the strip's own height (currently 576px: the real template at native aspect
   plus its footer). Shorter and the finished print is cut off at the end of
   the roll, which is what a 520px mobile override used to do before the real
   strip replaced the shorter mocked one. Re-measure if the strip is swapped. */
.ps-window { position: relative; width: 232px; height: 580px; margin: -2px auto 0; overflow: hidden; }
/* resting state: fully printed. script.js stamps .ps-go on the section once
   the template image has decoded AND the section scrolls into view, so the
   roll-out loop always starts clean from frame one (it used to start at page
   load, before the JPEG arrived, and popped in mid-cycle). */
.ps-strip { position: absolute; left: 50%; top: 0; width: 204px; margin-left: -102px;
  background: var(--white); padding: 9px 9px 0; box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transform: translateY(-2%); }
.sec-gallery-cta.ps-go .ps-strip { animation: ps-print 9s cubic-bezier(.25,.6,.3,1) infinite; }
.ps-strip img { display: block; width: 100%; height: 116px; object-fit: cover; margin-bottom: 8px;
  filter: saturate(.92); }
/* the real template strip: native aspect, no frame slicing */
.ps-strip .ps-real { height: auto; object-fit: unset; margin-bottom: 9px; }
.ps-strip footer { text-align: center; padding: 2px 0 10px; }
.ps-strip footer b { display: block; font-family: var(--font-script); font-weight: 400;
  font-size: 22px; line-height: 1.1; color: var(--brown); }
.ps-strip footer span { display: block; font-family: var(--font-label); font-weight: 600;
  font-size: 7.5px; letter-spacing: .3em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent); margin-top: 3px; }
@keyframes ps-print {
  0%       { transform: translateY(-104%); opacity: 1; }
  9%, 20%  { transform: translateY(-76%);  opacity: 1; }
  29%, 40% { transform: translateY(-52%);  opacity: 1; }
  49%, 60% { transform: translateY(-28%);  opacity: 1; }
  69%, 86% { transform: translateY(-2%);   opacity: 1; }
  94%      { transform: translateY(-2%);   opacity: 0; }
  100%     { transform: translateY(-104%); opacity: 0; }
}
.ps-cap { margin-top: 18px; text-align: center; font-family: var(--font-label);
  font-weight: 500; font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 50%, transparent); }
/* ============ footer: the homepage salone footer, carried over ============
   verbatim from css/home.css (.sal-* base + colorway override + mobile
   rules). Owner call 2026-07-25: on every colorway the footer rides the
   palette's lightest color with ink text. Not a .sec; flows auto height. */
.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-script { font-family: var(--font-script); font-size: 72px; line-height: 0.85;
              margin-bottom: 6px; }
.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-p { font-family: var(--font-body); font-size: 17px; line-height: 1.65;
         max-width: 440px; margin: 26px 0 38px; opacity: .9; }
.sal-nl { display: flex; align-items: flex-end; max-width: 520px; }
.sal-nl input { flex: 1; background: transparent; border: 0;
                border-bottom: 1px solid rgba(255,255,255,.6); outline: none;
                color: var(--white); font-family: var(--font-label);
                font-weight: 500; font-size: 13px; letter-spacing: .14em;
                text-transform: uppercase; height: 44px; }
.sal-nl input::placeholder { color: rgba(255,255,255,.65); }
.sal-nl button { 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: 18px;
                 cursor: pointer; transition: all .4s; }
.sal-nl button:hover { background: var(--white); color: var(--ink); }
.sal-nl .sal-tel { flex: 1; border-bottom: 1px solid rgba(255,255,255,.6);
                   color: var(--white); font-family: var(--font-label);
                   font-weight: 500; font-size: 13px; letter-spacing: .14em;
                   text-transform: uppercase; height: 44px;
                   display: flex; align-items: center; }
.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: 18px;
                  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-rail-foot { margin-top: auto; padding: 22px 0 8px; font-size: 11px;
                 letter-spacing: .18em; text-transform: uppercase;
                 font-family: var(--font-label); font-weight: 600; opacity: .75;
                 line-height: 2; }
.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-tel { color: var(--ink);
  border-bottom-color: color-mix(in srgb, var(--ink) 60%, transparent); }
: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-rail a:first-child { border-top-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); }
@media (max-width: 900px) {
  .sal-grid { grid-template-columns: 1fr; width: calc(100% - 48px);
    padding-top: 60px; gap: 0; }
  .sal-invite { padding-right: 0; }
  .sal-script { font-size: 50px; }
  .sal-h { font-size: clamp(40px, 12vw, 54px); }
  .sal-h em { font-size: 1.25em; }
  .sal-p { font-size: 16px; }
  .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); }
}

/* ============ corporate content pass (client brief Q13/Q14, 2026-08-16) ======
   New sections below. 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) .evt-wrap,
[data-rise].rise-armed:not(.rise-in) .swx-wrap,
[data-rise].rise-armed:not(.rise-in) .stp-wrap,
[data-rise].rise-armed:not(.rise-in) .cst-wrap,
[data-rise].rise-armed:not(.rise-in) .bkd-wrap,
[data-rise].rise-armed:not(.rise-in) .fin-wrap { opacity: 0; transform: translateY(22px); }
.evt-wrap, .swx-wrap, .stp-wrap, .cst-wrap, .bkd-wrap, .fin-wrap {
  transition: opacity .9s ease, transform .9s cubic-bezier(.23,1,.32,1); }

/* hero wing carries the motion brief: the looping activation clip */
.br-right > video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }

/* ---- event types: the lexicon (events-we-serve round, lexicon + tide hover
   selected). Dictionary spread: guide band, two ruled columns of headwords
   with italic numerals; hovering a title sweeps its ink teal left to right
   (background-clip text). Rides the colorway vars; entries ink in on the
   section's shared data-rise, staggered per row. ---- */
.sec-event-types { --h: auto; background: var(--dark); color: var(--cream);
  padding: 96px 0 100px; }
.evt-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; }
.evt-guide { display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 40%, transparent);
  padding-bottom: 12px; }
.evt-guide span { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; opacity: .65; }
.evt-headband { display: flex; align-items: baseline; gap: 26px; margin-top: 34px; }
.evt-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--teal); white-space: nowrap; }
.evt-script { font-family: var(--font-script); font-size: 56px; line-height: 1; }
.evt-lede { margin-top: 16px; max-width: 640px; font-size: 16px; line-height: 1.7;
  opacity: .8; }
.evt-columns { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 84px; }
.evt-entry { display: grid; grid-template-columns: 40px 1fr; padding: 19px 0 17px;
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 20%, transparent);
  cursor: default; transition: opacity .7s ease, transform .7s ease; }
.evt-entry i { font-family: var(--font-serif); font-style: italic; font-size: 14px;
  padding-top: 6px; opacity: .55; transition: color .3s, opacity .3s; }
.evt-entry:hover i { color: var(--teal); opacity: 1; }
.evt-term { font-family: var(--font-title); font-size: 22px; letter-spacing: .03em;
  line-height: 1.25; display: inline-block;
  background: linear-gradient(90deg, var(--teal) 0 50%, var(--cream) 50% 100%);
  background-size: 205% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background-position .55s ease; }
.evt-entry:hover .evt-term { background-position: 0 0; }
.sec-event-types.rise-armed:not(.rise-in) .evt-entry { opacity: 0;
  transform: translateY(12px); }
.evt-columns > div > .evt-entry:nth-child(1) { transition-delay: .1s; }
.evt-columns > div > .evt-entry:nth-child(2) { transition-delay: .18s; }
.evt-columns > div > .evt-entry:nth-child(3) { transition-delay: .26s; }
.evt-columns > div > .evt-entry:nth-child(4) { transition-delay: .34s; }
.evt-columns > div > .evt-entry:nth-child(5) { transition-delay: .42s; }
.evt-columns > div > .evt-entry:nth-child(6) { transition-delay: .5s; }
.evt-foot { display: flex; justify-content: space-between; align-items: center;
  margin-top: 42px; }
.evt-cta { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--cream);
  text-decoration: none; border-bottom: 1px solid var(--cream); padding-bottom: 6px;
  transition: opacity .4s; }
.evt-cta:hover { opacity: .6; }
.evt-folio { font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; opacity: .5; }

/* ---- pullquote band (weddings vocabulary) + dark variant ---- */
.sec-pullquote { --h: auto; background: var(--cream); padding: 96px 24px; }
.pq-wrap { max-width: 820px; margin: 0 auto; text-align: center; }
.pq-q { font-family: var(--font-title); font-size: 38px; line-height: 1.25;
  text-transform: uppercase; }
.pq-q em { font-family: var(--font-heading); font-style: italic;
  text-transform: none; letter-spacing: 0; }
.pq-att { margin-top: 22px; font-family: var(--font-heading); font-style: italic;
  font-size: 26px; opacity: .8; }
.sec-pullquote--dark { background: #5a1a12; color: var(--cream); }
.sec-pullquote--dark .pq-att { color: var(--teal); opacity: 1; }

/* ---- two audiences: the switch (variants round pick 04, replaced the cda
   split panels + video; owner brief: photos only). One matted photo stage +
   a two-way toggle that swaps photo and copy together. The active tab's
   progress hairline drives the auto-advance (animationend in script.js,
   animationend-driven, no timer) and hovering the toggle pauses it. Rides the colorway vars;
   entrance via the shared [data-rise] blanket above. */
/* dark maroon ground (owner request 2026-08-17; was paper) — type runs cream,
   the active tab chip inverts to cream-on-ink */
.sec-two-audiences { --h: auto; background: var(--dark); color: var(--cream); }
.swx-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; padding: 104px 0 112px;
  display: grid; grid-template-columns: 560px 1fr; gap: 76px; align-items: center; }
.swx-mat { background: var(--white); padding: 14px;
  outline: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); outline-offset: -7px;
  box-shadow: 0 26px 60px color-mix(in srgb, var(--dark) 14%, transparent); }
.swx-win { position: relative; height: 560px; overflow: hidden; }
.swx-win img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .8s ease, transform 4.5s ease; }
.swx-win img.is-on { opacity: 1; transform: scale(1); }
/* the "One booth, two jobs" script line was cut on owner request 2026-08-20;
   the kicker carries the spacing it used to provide */
.swx-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .26em; text-transform: uppercase; margin-bottom: 28px;
  color: color-mix(in srgb, var(--cream) 62%, transparent); }
.swx-toggle { display: flex; border: 1px solid color-mix(in srgb, var(--cream) 32%, transparent);
  width: max-content; margin-bottom: 34px; }
.swx-tab { position: relative; background: none; border: 0; cursor: pointer;
  padding: 14px 26px 16px; font-family: var(--font-label); font-weight: 600; font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 62%, transparent);
  transition: color .4s, background .4s; }
.swx-tab + .swx-tab { border-left: 1px solid color-mix(in srgb, var(--cream) 32%, transparent); }
.swx-tab.is-on { background: var(--cream); color: var(--ink); }
.swx-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
.swx-bar i { position: absolute; inset: 0; background: var(--teal); transform: scaleX(0);
  transform-origin: left; }
.swx-tab.is-on .swx-bar i { animation: swx-fill 5s linear forwards; }
.swx-toggle:hover .swx-bar i { animation-play-state: paused; }
@keyframes swx-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.swx-views { position: relative; }
.swx-view { position: absolute; left: 0; right: 0; top: 0; opacity: 0;
  transform: translateY(12px); transition: opacity .55s, transform .55s; pointer-events: none; }
.swx-view.is-on { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.swx-no { font-family: var(--font-script); font-size: 40px; color: var(--teal); }
.swx-ti { font-family: var(--font-title); font-weight: 400; font-size: 31px; line-height: 1.2;
  letter-spacing: .04em; margin-top: 10px; max-width: 480px; }
.swx-ti em { font-family: var(--font-heading); font-style: italic; font-size: 1.1em; }
.swx-d { margin-top: 16px; font-size: 15px; line-height: 1.75; max-width: 470px;
  color: color-mix(in srgb, var(--cream) 80%, transparent); }
.swx-cta { display: inline-block; margin-top: 26px; font-family: var(--font-label);
  font-weight: 600; font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  text-decoration: none; color: inherit; border-bottom: 1px solid var(--teal);
  padding-bottom: 5px; transition: color .35s; }
.swx-cta:hover { color: var(--teal); }

/* ---- every-rental-includes strip inside the packages section ---- */
/* Round 3, note 107: "make the background of that section just one color so
   its easy to read at a glance? I love the wall paper behind the package tho."
   So the damask stays on the section and only this panel gets a flat ground.
   --dark is opaque here on purpose: the section paints the wallpaper at 60%
   dark, and anything translucent would let the pattern back through. */
.cpr-inc { margin-top: 64px; padding: 40px 32px 42px;
  background: var(--dark); text-align: center; }
/* matches the "Take your pick" script above it (owner request 2026-08-20) */
.cpr-lbl { font-family: var(--font-script); font-size: 38px; color: var(--cream); }
.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); }

/* ---- corporate branding & customization: index + crossfading proof stage ---- */
.sec-customize { --h: auto; background: #5a1a12; color: var(--cream);
  padding: 118px 0; }
/* customize + the review band under it ride the deep-oxblood family the
   weddings guestbooks section uses (services.css .sec-guestbooks) — same
   baked per-colorway values, owner pick 2026-08-16 */
:root[data-colorway="oxblood-glow"] .sec-customize,
:root[data-colorway="oxblood-glow"] .sec-pullquote--dark { background: #5a1a12; }
:root[data-colorway="coffee-espresso"] .sec-customize,
:root[data-colorway="coffee-espresso"] .sec-pullquote--dark { background: #241009; }
:root[data-colorway="ew-chestnut"] .sec-customize,
:root[data-colorway="ew-chestnut"] .sec-pullquote--dark { background: #3a0e04; }
:root[data-colorway="ew-espresso"] .sec-customize,
:root[data-colorway="ew-espresso"] .sec-pullquote--dark { background: #2c0d06; }
:root[data-colorway="champagne-coffee"] .sec-customize,
:root[data-colorway="champagne-coffee"] .sec-pullquote--dark { background: #34150f; }
:root[data-colorway="champagne-coffee-red"] .sec-customize,
:root[data-colorway="champagne-coffee-red"] .sec-pullquote--dark { background: #34150f; }
.cst-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; display: grid;
  grid-template-columns: 46% 1fr; gap: 80px; align-items: center; }
.cst-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--teal); }
.cst-script { font-family: var(--font-script); font-size: 58px; line-height: 1;
  margin-top: 14px; }
.cst-para { margin-top: 24px; font-size: 15px; line-height: 1.8;
  color: rgba(252,251,249,.75); }
.cst-list { list-style: none; margin: 30px 0 0; padding: 0; }
.cst-list li { font-family: var(--font-title); font-size: 19px; letter-spacing: .05em;
  text-transform: uppercase; padding: 13px 0;
  border-bottom: 1px solid rgba(252,251,249,.16); }
.cst-list li::before { content: '+'; color: var(--teal); margin-right: 14px; }
.cst-btn { margin-top: 38px; padding: 16px 30px; width: max-content;
  border-color: rgba(252,251,249,.8); color: var(--cream); }
.cst-btn:hover { background: var(--cream); color: var(--ink); }
.cst-stage { position: relative; height: 660px; overflow: hidden; }
.cst-slide { position: absolute; inset: 0; margin: 0; opacity: 0;
  transition: opacity 1.2s ease; }
.cst-slide.is-on { opacity: 1; }
.cst-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the template artwork carries its event title along its TOP edge, so the
   default centred cover-crop ate it. Bias this slide's crop upward (owner
   report 2026-08-20) — the image sits lower in frame and the title clears. */
.cst-slide-tpl img { object-position: 50% 9%; }
.cst-slide figcaption { position: absolute; left: 22px; bottom: 22px;
  background: var(--cream); color: var(--ink); padding: 11px 18px;
  font-family: var(--font-label); font-weight: 600; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; }

/* ---- backdrops: THE BROADSHEET (design-variants round B pick, 2026-08-16) —
   newspaper masthead over a heavy rule, five hairline-divided columns.
   .bkd-wrap stays as the wrapper so the shared data-rise wiring keeps working.
   The custom-branded option stays a text treatment on purpose (client call,
   brief Q13/Q14: no photographed examples yet). ---- */
.sec-backdrops { --h: auto; background: var(--white); padding: 96px 0 100px; }
.bkd-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; }
.bs-head { text-align: center; padding-bottom: 40px; border-bottom: 2px solid var(--ink); }
.bs-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--teal); }
/* the "The backdrop collection" script line was cut on owner request
   2026-08-20; that wording moved into .bs-title. The head was re-spaced after
   the cut: a 12px kicker needs more air under it before a 40px display title
   than the script line used to leave. */
.bs-title { font-family: var(--font-title); font-weight: 400; font-size: 40px;
  line-height: 1.1; margin-top: 20px; }
.bs-dateline { margin-top: 16px; font-family: var(--font-label); font-weight: 500;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 45%, transparent); }
.bs-cols { display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
/* four columns since round 3 (note 109); must follow .bs-cols to win on
   equal specificity */
.bs-cols-4 { grid-template-columns: repeat(4, 1fr); }
.bs-col { padding: 34px 26px 38px;
  border-right: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  display: block; text-decoration: none; color: inherit; transition: background .35s; }
.bs-col:last-child { border-right: 0; }
.bs-col:hover { background: var(--cream); }
.bs-fig { position: relative; display: block; height: 190px; overflow: hidden;
  margin-bottom: 20px; }
.bs-fig img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.85); transition: filter .4s, transform .6s; }
.bs-fig img.bs-zoom { transform: scale(1.15); }
.bs-col:hover .bs-fig img { filter: saturate(1); transform: scale(1.04); }
.bs-col:hover .bs-fig img.bs-zoom { transform: scale(1.2); }
.bs-no { display: block; font-family: var(--font-label); font-weight: 600; font-size: 10px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--teal); }
.bs-name { display: block; font-family: var(--font-title); font-weight: 400; font-size: 25px;
  line-height: 1.1; margin: 8px 0 10px; }
.bs-d { font-size: 13px; line-height: 1.65; color: color-mix(in srgb, var(--ink) 72%, transparent); }
.bs-go { display: inline-block; margin-top: 16px; font-family: var(--font-label);
  font-weight: 500; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  padding-bottom: 2px; transition: color .35s, border-color .35s; }
.bs-col:hover .bs-go { color: var(--brown); border-color: var(--brown); }
.bs-custom .bs-fig { background: linear-gradient(160deg, var(--brown), var(--dark));
  display: flex; align-items: center; justify-content: center; }
.bs-custom .bs-fig i { font-style: normal; font-family: var(--font-script);
  font-size: 44px; color: var(--teal); transform: rotate(-3deg); }
.bs-foot { padding-top: 30px; display: flex; align-items: center;
  justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.bs-note { font-family: 'PonteExtraLightItalic', serif; font-style: italic; font-size: 17px;
  color: color-mix(in srgb, var(--ink) 75%, transparent); }
.bs-ctas { display: flex; align-items: center; gap: 26px; }
.bs-btn { display: inline-flex; white-space: nowrap; border: 1px solid var(--brown);
  padding: 15px 32px; text-decoration: none; font-family: var(--font-label);
  font-weight: 500; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brown); transition: background .35s, color .35s; }
.bs-btn:hover { background: var(--brown); color: var(--cream); }
.bs-link { font-family: var(--font-label); font-weight: 500; font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 65%, transparent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  padding-bottom: 3px; transition: color .35s, border-color .35s; }
.bs-link:hover { color: var(--brown); border-color: var(--brown); }

/* ---- corporate add-on rail: THE PAGED RAIL (enhancements round-2 winner,
   2026-08-16) — same white cards, but a clipped 1200 view paged three cards
   at a time by the site's long arrows; script.js's paged driver keys off
   .oalc-view (the weddings promenade keeps the scroll driver). ---- */
.sec-other-a-la-carte { --h: auto; min-height: 900px;
  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; color: var(--cream);
  --oalc-gut: 90px; }
.oalc-wrap { padding: 112px 0 104px; display: flex; flex-direction: column; }
.oalc-head { width: 1200px; max-width: calc(100% - 48px); margin: 0 auto;
  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-view { width: 1200px; max-width: calc(100% - 48px); margin: 46px auto 0;
  overflow: hidden; }
.oalc-rail { display: flex; gap: 28px;
  transition: transform .8s cubic-bezier(.25,.8,.25,1); }
.oalc-card { flex: 0 0 381px; background: var(--white);
  border: 1px solid rgba(37,31,24,.14); color: var(--ink); }
.oalc-win { height: 300px; overflow: hidden; }
.oalc-win .ph { width: 100%; height: 100%; transition: transform 5s ease; }
.oalc-card:hover .oalc-win .ph { transform: scale(1.05); }
/* the custom-branded-backdrop card: honest text treatment, no photo */
.oalc-win--text { background: var(--dark); color: var(--cream); display: flex;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 0 40px; }
.oalc-tw-script { font-family: var(--font-script); font-size: 40px; color: var(--teal); }
.oalc-tw-ttl { font-family: var(--font-title); font-size: 20px; letter-spacing: .08em; }
.oalc-plate { padding: 24px 26px 26px; }
.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: 25px; line-height: 1.1;
  text-transform: uppercase; }
.oalc-price { font-family: var(--font-label); font-weight: 600; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(37,31,24,.6);
  text-align: right; }
.oalc-d { font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  color: rgba(37,31,24,.85); }
.oalc-ctrl { width: 1200px; max-width: calc(100% - 48px); margin: 0 auto;
  padding-top: 32px; display: flex; align-items: center; gap: 28px; }
.oalc-aro { background: none; border: 0; cursor: pointer; padding: 12px 8px;
  opacity: .85; transition: opacity .3s, transform .3s; }
.oalc-aro:hover { opacity: 1; }
.oalc-prev:hover { transform: translateX(-5px); }
.oalc-next:hover { transform: translateX(5px); }
.oalc-aro svg { width: 54px; height: 10px; fill: var(--cream); display: block;
  filter: drop-shadow(0 1px 5px rgba(13,25,28,.5)); }
.oalc-prev svg { transform: scaleX(-1); }
.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: 33.4%;
  background: var(--cream); transition: left .6s cubic-bezier(.25,.8,.25,1); }
.oalc-count { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .2em; color: rgba(252,251,249,.7); }

/* ---- keychain spotlight (weddings vocabulary, corporate copy) ---- */
.sec-keychains { --h: auto; background: var(--cream); padding: 110px 0; }
.kcx-wrap { width: min(1200px, calc(100% - 80px)); margin: 0 auto; display: grid;
  grid-template-columns: 480px 1fr; gap: 90px; align-items: center; }
.kcx-photo { margin: 0; height: 560px; overflow: hidden; }
.kcx-photo img { width: 100%; height: 100%; 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-para { margin-top: 24px; max-width: 520px; font-size: 17px; line-height: 1.7;
  opacity: .87; }
.kcx-btn { display: inline-flex; margin-top: 36px; padding: 16px 30px;
  width: max-content; }

/* ---- final CTA: the clipboard (final-cta round, 04 selected; pieces layered
   ON TOP per owner 2026-08-17). One cream proof sheet carries the whole CTA on
   the deep-oxblood ground (same baked family as sec-customize, via --fin-ox);
   the OHM strip, a branded template, and two snapshots lie over the sheet's
   edges. .fin-wrap stays as the wrapper so the shared data-rise wiring keeps
   working; fixed 1200 canvas like the reference scatter. ---- */
.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; }
.fin-wrap { position: relative; width: 1200px; height: 900px; flex: 0 0 auto; }
.fin-piece { position: absolute; z-index: 2; background: var(--white); padding: 7px;
  box-shadow: 0 18px 40px rgba(0,0,0,.3); }
.fin-piece img { display: block; object-fit: cover; }
.fin-piece-strip { left: 118px; top: 348px; transform: rotate(-8deg); }
.fin-piece-strip img { width: 168px; height: 504px; }
.fin-piece-card { left: 866px; top: 130px; transform: rotate(7deg); }
.fin-piece-card img { width: 196px; height: 294px; }
.fin-piece-photo { left: 872px; top: 540px; transform: rotate(-5deg); }
.fin-piece-photo img { width: 214px; height: 160px; }
.fin-sheet { position: absolute; z-index: 1; left: 270px; top: 78px; width: 660px;
  height: 744px; background: var(--cream); color: var(--ink);
  box-shadow: 0 30px 70px rgba(0,0,0,.4); text-align: center; padding: 64px 70px 0; }
.fin-sheet::after { content: ""; position: absolute; inset: 16px;
  border: 1px solid rgba(37,31,24,.22); pointer-events: none; }
.fin-kicker { font-family: var(--font-label); font-weight: 500; font-size: 12px;
  letter-spacing: .26em; text-transform: uppercase; opacity: .55; }
.fin-script { font-family: var(--font-script); font-size: 54px; line-height: 1;
  margin-top: 18px; color: var(--fin-ox); }
.fin-head { font-family: var(--font-title); font-size: 30px; line-height: 1.4;
  margin-top: 28px; color: var(--fin-ox); }
.fin-head em { font-family: var(--font-heading); font-style: italic;
  text-transform: none; letter-spacing: 0; font-size: .96em; }
.fin-rule { width: 80px; height: 1px; background: rgba(37,31,24,.4);
  margin: 26px auto 0; }
.fin-para { font-family: var(--font-serif); font-size: 18px; line-height: 1.6;
  margin-top: 24px; }
.fin-ctas { display: flex; gap: 18px; justify-content: center; margin-top: 32px; }
.fin-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; }
.fin-btn:hover { background: transparent; color: var(--fin-ox); }
.fin-btn.fin-ghost { background: transparent; color: var(--ink);
  border-color: rgba(37,31,24,.4); }
.fin-btn.fin-ghost:hover { border-color: var(--ink); color: var(--ink); background: none; }
.fin-meta { margin-top: 24px; font-family: var(--font-label); font-weight: 500;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }

/* ---- branded templates: the proof belt (templates round, 04 selected
   2026-08-17) — the eight real client templates drifting on a continuous
   belt under the backdrops section; hover pauses. CSS only, no JS. ---- */
.sec-templates { --h: max(100vh, 860px); background: var(--dark); color: var(--cream);
  padding: 90px 0; overflow: hidden; display: flex; flex-direction: column;
  justify-content: center; }
.tpb-head { width: min(1200px, calc(100% - 80px)); margin: 0 auto; display: flex;
  justify-content: space-between; align-items: flex-end; gap: 40px; }
.tpb-kicker { font-family: var(--font-label); font-weight: 600; font-size: 12px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--teal); }
.tpb-script { font-family: var(--font-script); font-size: 56px; line-height: 1;
  margin-top: 14px; }
.tpb-para { max-width: 460px; font-size: 15px; line-height: 1.8;
  color: color-mix(in srgb, var(--cream) 72%, transparent); }
.tpb-beltwrap { margin-top: 44px; }
/* the gap rides the ITEM, not the flex container: the loop translates -50%
   of the belt, which only lands exactly on the start of set two when the
   trailing gap after the last print of set one is inside the measured width.
   With `gap` the belt was half a gap short and hitched every cycle
   (owner report 2026-08-20). */
.tpb-belt { display: flex; gap: 0; width: max-content;
  animation: tpb-drift 52s linear infinite; }
@media (hover: hover) {
  .tpb-beltwrap:hover .tpb-belt { animation-play-state: paused; }
}
@keyframes tpb-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tpb-pr { flex: 0 0 auto; background: var(--white); padding: 7px 7px 9px;
  position: relative; margin: 0 34px 0 0; }
.tpb-pr img { display: block; height: min(460px, 46vh); width: auto; }
.tpb-pr figcaption { position: absolute; left: 10px; bottom: 14px; background: var(--dark);
  color: var(--cream); padding: 8px 13px; font-family: var(--font-label);
  font-weight: 600; font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  opacity: 0; transition: opacity .35s; white-space: nowrap; }
.tpb-pr:hover figcaption { opacity: 1; }
.tpb-foot { width: min(1200px, calc(100% - 80px)); margin: 36px auto 0; display: flex;
  justify-content: space-between; align-items: center; }
.tpb-cta { display: inline-block; font-family: var(--font-label); font-weight: 600;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--cream);
  text-decoration: none; border-bottom: 1px solid var(--cream); padding-bottom: 6px; }
.tpb-cta:hover { opacity: .6; }
.tpb-hint { font-family: var(--font-label); font-weight: 500; font-size: 10px;
  letter-spacing: .24em; text-transform: uppercase;
  color: color-mix(in srgb, var(--cream) 40%, transparent); }

/* "Straight from the booth" matches the HOMEPAGE HERO ground per colorway
   (owner screenshot request 2026-08-17). Values mirror colorways.css
   .sec-letterbox-hero — keep in step if the generator changes a palette. */
:root[data-colorway="oxblood-glow"] .sec-gallery-cta { background: #6e1522; }
:root[data-colorway="coffee-espresso"] .sec-gallery-cta { background: #140b08; }
:root[data-colorway="ew-chestnut"] .sec-gallery-cta { background: #480903; }
:root[data-colorway="ew-espresso"] .sec-gallery-cta { background: #200904; }
:root[data-colorway="champagne-coffee"] .sec-gallery-cta { background: #150c0c; }
:root[data-colorway="champagne-coffee-red"] .sec-gallery-cta { background: #150c0c; }

/* the mobile-only backdrops lookbook (see the mobile layer at the end of this
   file) is hidden on desktop, where the broadsheet columns are the design */
.bdg-mob { display: none; }

/* ============================================================================
   MOBILE LAYER — corporate page (mobile-optimize skill, 2026-08-20)
   ADDITIVE ONLY. Everything lives in this one max-width:900px block; desktop
   is byte-identical (proven by segmented pixel-diff at 1440 and 1200).
   Shared plumbing (canvas unlock, the `.sec .cv > *` blanket, type scale)
   lives in style.css; this block re-flows the corporate sections on top of it.
   Overrides of the blanket are written `.sec-<x> .<class>` so they carry the
   (0,2,0) it needs to be beaten.
   ========================================================================= */
@media (max-width: 900px) {

  /* ---- menu overlay: this page doesn't load css/home.css, so the overlay's
     mobile rules are carried here verbatim (the markup is the same) ---- */
  .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; }

  /* ---- slide-down nav bar: six links can't fit a phone, and the overlay IS
     the mobile nav, so the bar keeps only its burger ---- */
  .stm-in { display: none; }
  .sec-stick-top-menu-white { --h: 48px; }
  .stm-burger { left: 16px; top: 8px; }

  /* ---- floating burger over the hero: the blanket flattens `.cv` children,
     so it has to be re-declared absolute ---- */
  .sec-on-image-aperol-menu .cv > .wmenu-btn { position: absolute;
    left: 18px; top: 20px; width: 38px; height: 28px; z-index: 6; }

  /* ---- hero: the chamber stacks over the photo wing ---- */
  .sec-header-image { grid-template-columns: 1fr; }
  .br-left { padding: 76px 24px 44px; }
  .br-logo { width: 196px; margin-bottom: 18px; }
  .br-kicker { font-size: 10px; letter-spacing: .22em; margin-bottom: 18px; }
  .br-h1 { font-size: clamp(33px, 9.6vw, 46px); margin-bottom: 22px; }
  .br-para { font-size: 15px; max-width: none; margin-bottom: 26px; }
  .br-ctas { max-width: none; gap: 12px; }
  .br-cta { flex: 1 1 100%; text-align: center; padding: 15px 16px;
    font-size: 11px; letter-spacing: .18em; }
  .br-types { max-width: none; margin-top: 22px; line-height: 2; }
  /* taller and aimed higher so the subject's head is not cropped (owner
     2026-08-20, mobile only): 64vw showed only the middle 43% of this
     portrait; 88vw shows 59% and the crop starts nearer the top. */
  .br-right { height: 88vw; min-height: 340px; }
  .sec-header-image .br-right > img { object-position: 50% 22%; }
  .br-seam { display: none; }
  /* the tucked templates scale with the wing so they stay in frame */
  .br-tuck { right: 14px; bottom: 16px; width: 226px; height: 186px; }
  .br-tuck img { padding: 5px; box-shadow: 0 12px 26px rgba(0,0,0,.45); }
  .br-tuck img:nth-of-type(1) { right: 72px; bottom: 10px; height: 168px; }
  .br-tuck img:nth-of-type(2) { right: 0; bottom: 0; height: 144px; }
  /* the tucked templates drop past the hero's bottom edge so they lap over
     the trusted-by banner (owner 2026-08-20, mobile only). The wing clips its
     children by default, so it is unclipped here and the hero is lifted above
     the following section so the overhang paints on top. */
  .sec-header-image .br-right { overflow: visible; }
  .sec-header-image { position: relative; z-index: 3; }
  .sec-header-image .br-tuck { bottom: -46px; z-index: 6; }
  .sec-press { position: relative; z-index: 1; }
  .br-tuck-lbl { display: none; }

  /* ---- trusted-by marquee ---- */
  .sec-press { padding: 52px 0 56px; }
  .prs-kicker { font-size: 11px; letter-spacing: .26em; margin-bottom: 26px; }
  .prs-set { gap: 34px; padding-right: 34px; }
  .prs-set img { max-height: 54px; max-width: 132px; }
  .prs-rail { -webkit-mask: linear-gradient(90deg, transparent, #000 44px,
                #000 calc(100% - 44px), transparent);
              mask: linear-gradient(90deg, transparent, #000 44px,
                #000 calc(100% - 44px), transparent); }

  /* ---- who it's for: photo over the switch ---- */
  .swx-wrap { grid-template-columns: 1fr; width: calc(100% - 48px);
    padding: 58px 0 64px; gap: 30px; }
  .swx-mat { padding: 10px; }
  .swx-win { height: 300px; }
  /* The window drops from 560px to 300px here, so a portrait photo loses 183px
     under object-fit: cover and the default 50% takes it all off the middle,
     which meant the visible band began 19% down the frame and sliced the
     faces. Both photos in this pair have their faces in the upper third (the
     team shot 12 to 30%, the brand shot 20 to 33%), so anchoring at 20% starts
     the band at 7.6% and clears both. Desktop is untouched. */
  .swx-win img { object-position: 50% 20%; }
  .swx-kicker { margin-bottom: 20px; }
  .swx-toggle { width: 100%; margin-bottom: 26px; }
  .swx-tab { flex: 1; padding: 13px 6px 15px; font-size: 10px; letter-spacing: .1em; }
  .swx-no { font-size: 34px; }
  .swx-ti { font-size: 24px; max-width: none; }
  .swx-d { font-size: 14.5px; max-width: none; }

  /* ---- packages + add-on rail: iOS ignores `background-attachment: fixed`,
     so the damask 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. This keeps the parallax on phones AND removes
     the hard tile seam that plain `scroll` attachment left at the band's foot
     (owner report 2026-08-20). Content stacks above with an explicit z-index. */
  .sec-corp-packages, .sec-other-a-la-carte {
    background: none; clip-path: inset(0); }
  .sec-corp-packages::before, .sec-other-a-la-carte::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; }
  .cpx-wrap, .oalc-wrap { position: relative; z-index: 1; }
  .cpx-head { margin-bottom: 26px; }
  .cpx-kicker { font-size: 11px; letter-spacing: .18em; top: -8px; }
  .cpx-ph { height: 200px; }
  .cpr-inc { margin-top: 44px; padding: 30px 20px 32px; }
  .cpr-lbl { font-size: 32px; }
  .cpr-list { flex-direction: column; gap: 10px 0; }
  .cpr-list li { padding: 0; }
  .cpr-list li + li { border-left: 0; }

  /* ---- customization: index over the proof stage ---- */
  .sec-customize { padding: 62px 0 66px; }
  .cst-wrap { grid-template-columns: 1fr; width: calc(100% - 48px); gap: 34px; }
  .cst-script { font-size: 44px; }
  .cst-para { font-size: 14.5px; }
  /* the caps entries wrap to a second line on a phone; flexing the row makes
     the text its own column so continuation lines align under the first line
     instead of sliding back under the "+" (owner request 2026-08-20) */
  .cst-list li { font-size: 17px; padding: 11px 0;
    display: flex; align-items: baseline; gap: 14px; }
  .cst-list li::before { margin-right: 0; flex: 0 0 auto; }
  .cst-btn { margin-top: 28px; }
  .cst-stage { height: 380px; }
  .cst-slide figcaption { left: 12px; bottom: 12px; padding: 9px 12px; font-size: 9px; }

  /* ---- pullquote bands ---- */
  .sec-pullquote { padding: 60px 24px; }
  .pq-q { font-size: clamp(23px, 6.6vw, 30px); }
  .pq-att { font-size: 22px; margin-top: 16px; }

  /* ---- backdrops: the phone gets the social events page's LOOKBOOK carousel
     (owner request 2026-08-20) instead of the broadsheet's five columns. The
     column grid stands down; the bdg-* block below is the same treatment as
     css/social-events.css, carried here with the custom-branded card kept as
     card five. script.js's guarded carousel module drives the arrows. ---- */
  .sec-backdrops { padding: 56px 0 60px; }
  .bkd-wrap { width: calc(100% - 40px); }
  .bs-head { padding-bottom: 24px; }
  .bs-title { font-size: 24px; margin-top: 15px; }
  .bs-dateline { font-size: 9px; letter-spacing: .18em; }
  .bs-cols { display: none; }
  .bs-foot { padding-top: 24px; gap: 18px; border-top: 0; }
  .bs-note { font-size: 15px; }
  .bs-ctas { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; }
  .bs-btn { justify-content: center; }
  .bs-link { text-align: center; }

  /* the lookbook itself: one card at a time, swipe + arrows */
  .bdg-mob { display: block; padding-top: 22px; }
  .bdg-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 0; max-width: 300px; margin: 0 auto; scrollbar-width: none; }
  .bdg-grid::-webkit-scrollbar { display: none; }
  .bdg-card { flex: 0 0 100%; scroll-snap-align: start; display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
    background: var(--white); padding: 10px 10px 14px; }
  .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; display: block; }
  /* the custom-branded card has no photograph on purpose (brief Q13/Q14) */
  .bdg-custom .bdg-frame { background: linear-gradient(160deg, var(--brown), var(--dark));
    display: flex; align-items: center; justify-content: center; }
  .bdg-custom .bdg-frame i { font-style: normal; font-family: var(--font-script);
    font-size: 46px; color: var(--teal); transform: rotate(-3deg); }
  .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: .2em; font-size: 10px;
    color: color-mix(in srgb, var(--ink) 55%, transparent); }
  .bdg-script-word { font-family: var(--font-script); color: var(--teal);
    font-size: 26px; line-height: 1; }
  .bdg-title { font-family: var(--font-title); font-weight: 400; font-size: 20px;
    line-height: 1.15; }
  .bdg-hairline { height: 1px; width: 100%; margin: 10px 0 12px;
    background: color-mix(in srgb, var(--ink) 20%, transparent); }
  .bdg-copy { font-family: var(--font-body); font-size: 12px; line-height: 1.6;
    color: color-mix(in srgb, var(--ink) 78%, transparent); margin-bottom: 10px; }
  .bdg-cta { margin-top: auto; align-self: flex-start; font-family: var(--font-label);
    font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    text-decoration: none; color: color-mix(in srgb, var(--ink) 70%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
    padding-bottom: 3px; }
  .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; }
  .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; }

  /* ---- templates belt ---- */
  .sec-templates { padding: 56px 0 60px; }
  .tpb-head { width: calc(100% - 48px); flex-direction: column;
    align-items: flex-start; gap: 14px; }
  .tpb-script { font-size: 42px; }
  .tpb-para { font-size: 14.5px; max-width: none; }
  .tpb-beltwrap { margin-top: 30px; }
  .tpb-pr { padding: 6px 6px 7px; margin-right: 18px; }
  .tpb-pr img { height: 250px; }
  .tpb-foot { width: calc(100% - 48px); margin-top: 26px;
    flex-direction: column; align-items: flex-start; gap: 12px; }
  .tpb-hint { font-size: 9px; }

  /* ---- add-on rail: the desktop pager becomes a swipe rail. The pager JS
     writes an inline transform on .oalc-rail, so !important is the only way
     to neutralize it (allowed here, mobile block only). ---- */
  .sec-other-a-la-carte { min-height: 0; }
  .oalc-wrap { padding: 60px 0 56px; }
  .oalc-head { flex-direction: column; align-items: flex-start; gap: 18px;
    max-width: calc(100% - 48px); }
  .oalc-script { font-size: 42px; }
  .oalc-btn { height: 48px; padding: 0 24px; }
  .oalc-view { width: 100%; max-width: none; margin-top: 28px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 24px;
    padding: 0 24px 4px; scrollbar-width: none; }
  .oalc-view::-webkit-scrollbar { display: none; }
  .oalc-rail { transform: none !important; gap: 18px; }
  .oalc-card { flex: 0 0 78%; scroll-snap-align: start; }
  .oalc-win { height: 230px; }
  /* title and price side by side get cramped at 390; stack them */
  .oalc-row { flex-direction: column; align-items: flex-start; gap: 6px;
    margin-bottom: 10px; }
  .oalc-price { text-align: left; }
  .oalc-plate { padding: 20px 22px 24px; }
  /* the long arrows + rule + count are the site's shared carousel vocabulary
     (backdrops, reviews, guestbooks all use them), so the swipe rail keeps
     them on mobile too rather than going bare (owner request 2026-08-20).
     script.js's mobile driver scrolls one card per arrow and keeps the fill
     and count in step with the swipe. */
  /* left-justified like the section's kicker, script and button above it
     (owner request 2026-08-21) — desktop already defaults to flex-start */
  /* left-justified like the kicker, script and button above it (owner request
     2026-08-21). NOTE: no `width: auto` here — auto cross-axis margins stop a
     column flex item from stretching, so the box would shrink to its content
     and those same auto margins would re-centre it. Keeping the desktop
     width (capped by max-width) makes the box span the 24px gutters, and
     flex-start then puts the arrow on the same left edge as the header. */
  .oalc-ctrl { display: flex; justify-content: flex-start; align-items: center;
    gap: 14px; max-width: calc(100% - 48px); padding-top: 24px; }
  /* arrows and count hold their size; only the rule gives ground, and the
     count must not wrap (it broke onto three lines at 390 before this) */
  .oalc-aro { flex: 0 0 auto; padding: 8px 2px; }
  .oalc-aro svg { width: 38px; height: 8px; }
  .oalc-count { flex: 0 0 auto; white-space: nowrap; font-size: 11px;
    letter-spacing: .14em; }
  .oalc-track { flex: 1 1 auto; min-width: 40px; }
  .oalc-track i { width: 14.3%; }   /* seven cards, one per swipe */

  /* ---- straight from the booth: the fixed canvas flows (the blanket
     flattens .ps-copy/.ps-rig; their transforms still need clearing) ---- */
  .sec-gallery-cta { padding: 60px 0 64px; }
  .sec-gallery-cta .cv { display: flex; flex-direction: column; gap: 32px;
    padding: 0 24px; }
  .sec-gallery-cta .ps-copy, .sec-gallery-cta .ps-rig { transform: none; }
  .ps-script { font-size: 42px; }
  .ps-title { font-size: 30px; }
  .ps-para { width: auto; font-size: 15.5px; margin-bottom: 26px; }
  .ps-ctas { flex-direction: column; align-items: stretch; gap: 18px; }
  .ps-btn { justify-content: center; }
  .ps-link { text-align: center; }
  .ps-meta { margin-top: 26px; }
  /* no .ps-window height override here on purpose: 520px cut 56px off the
     bottom of the finished print at the end of the roll (owner, 2026-09-08).
     It inherits the 580px that fits the strip. */

  /* ---- planning process (the row block above handles the grid) ---- */
  .stp-script { font-size: 38px; }

  /* ---- final CTA: the 1200x900 scatter canvas becomes a flowed sheet;
     the four layered pieces are decorative and would be cropped, so they
     stand down on phones ---- */
  .sec-final-cta { padding: 60px 24px 64px; display: block; }
  .fin-wrap { width: auto; height: auto; }
  .fin-piece { display: none; }
  .fin-sheet { position: static; width: auto; height: auto;
    padding: 42px 24px 46px; }
  .fin-sheet::after { inset: 10px; }
  .fin-script { font-size: 42px; }
  .fin-head { font-size: 23px; line-height: 1.45; margin-top: 22px; }
  .fin-para { font-size: 16px; }
  .fin-ctas { flex-direction: column; gap: 14px; margin-top: 28px; }
  .fin-btn { text-align: center; }
}