/* Wedding Content Creation page. Flow layout inside the site's 1200px canvas; every media
   slot is a <video> whose poster is one of the client's existing photos until the clip lands
   in video/wcc/ (see video/wcc/README.md). Shares style.css and the header/menu/footer
   geometry from css/packages.css. */

/* THIS PAGE'S TYPE (owner, 2026-10-31: the fonts of bloomedny.com). Bloomed sets Span Compressed on every heading,
   nav item and button, IvyPresto Headline on body copy, Ballet on its script lines and Aboreto on its popup caps.
   Span Compressed is an Adobe Font (served only through an Adobe Fonts web project), so until the owner provides one,
   Instrument Serif, the closest free face, stands in for it; Ballet and Aboreto are the real ones. THE BODY FACE IS LATO
   300 (owner's pick from five paragraph options, 2026-10-31 night): the serif headings and the script stay the ornament,
   and the paragraph sizes below are the ones the owner approved on the comparison page (15px, 1.75 line height).
   Scoped to this page's OWN sections (.wcc) since 2026-11-10 (owner, launch day, on seeing the phone menu in Aboreto beside the booth
   pages' Mattone: "can we make the menu match? Everything else can stay the same"). The shared header, both menus and the footer
   are the same markup on every page and keep the site fonts and the geometry of css/packages.css; only the content sections below
   wear this page's type. Before that day the variables sat on :root and the chrome followed them. */
.wcc {
  --font-display: 'Instrument Serif', Georgia, serif;   /* stand-in for Span Compressed */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'Lato', Helvetica, Arial, sans-serif;    /* body copy (owner's pick) */
  --font-body: 'Lato', Helvetica, Arial, sans-serif;
  --font-caps: 'Aboreto', 'Instrument Serif', serif;    /* Bloomed's caps face */
  --font-script: 'Ballet', 'Instrument Serif', serif;   /* Bloomed's script face */
}
/* Aboreto is wide and Lato light is airy, so the sizes Mattone and Montserrat were set at are re-tuned here, inside .wcc only */
.wcc .t-subheading, .wcc-eyebrow { font-size: 13px; letter-spacing: .18em; }
.wcc .btn span { font-size: 11px; letter-spacing: .12em; }
.wcc .t-paragraph { font-size: 15px; line-height: 1.75; font-weight: 300; }
/* the header and footer logos are the A and B mark the owner dropped 2026-11-03 (img/logo-ab-mark-new.png, the hero's logo); since
   2026-11-06 every page wears it, at this geometry, in place of the original "AB photo booths" mark (owner: "on the entire site") */
.e-header-1_11 { left: calc(16px - var(--gutter)); top: 8px; width: 44px; height: 47px; background-image: url("../img/logo-ab-mark-new.png"); }
.e-footer-1_11 { left: 515px; top: 98px; width: 170px; height: 181px; background-image: url("../img/logo-ab-mark-new.png"); }

/* ---- flow inside the canvas (style.css makes .cv children absolute) ---- */
.wcc { height: auto; }
.wcc .cv { height: auto; }
.wcc .cv > *, .wcc .wcc-two > *, .wcc .wcc-copy > *,
.wcc .cards > *, .wcc .card > *, .wcc .addon > *, .wcc .faq > * { position: relative; }
.wcc ul { list-style: none; margin: 0; padding: 0; }

/* ---- type scale, the site's own ---- */
.wcc-eyebrow { margin: 0 0 18px; }
.wcc-display { font-family: var(--font-display); font-size: 84px; line-height: 1.01; text-align: center; }
.wcc-h2 { font-family: var(--font-display); font-size: 60px; line-height: 1.02; margin: 0 0 18px; }
.wcc-sub { font-family: var(--font-script); font-style: normal; text-transform: lowercase; letter-spacing: 0; font-size: 48px; line-height: 1.1; margin: 0 0 22px; }   /* every subheading on this page is the script face, lowercase (owner, 2026-10-31) */
.wcc-lede { font-size: 26px; line-height: 1.4; text-align: center; max-width: 760px; margin: 18px auto 34px; }
.wcc-p { font-family: var(--font-sans); font-size: 15px; line-height: 1.75; font-weight: 300; margin: 0 0 18px; }
.wcc-label { margin: 28px 0 10px; }
.center { text-align: center; }
.on-dark { color: var(--white); }
.wcc-btn { width: 214px; height: 47px; margin: 0; }
.center > .wcc-btn, .wcc-hero-inner > .wcc-btn, .wcc-cta-inner > .wcc-btn { margin-left: auto; margin-right: auto; }

/* ---- clips: a video with a photo poster, cover crop ---- */
.clip { position: relative; overflow: hidden; background: var(--black); margin: 0; }
.clip video { display: block; width: 100%; height: 100%; object-fit: cover; }
.clip.mono video { filter: grayscale(1); }

/* ---- arrow list (the packages page's "package includes" idiom) ---- */
.wcc-list li { display: flex; align-items: flex-start; gap: 20px; padding: 13px 0 12px; border-bottom: 1px solid var(--black); }
.wcc-list li:first-child { border-top: 1px solid var(--black); }
.wcc-list .t-paragraph { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; }
.wcc-list.tight li { padding: 10px 0 9px; gap: 16px; }
.wcc-list.tight .t-paragraph { font-size: 14px; }
.arrow { flex: none; width: 26px; height: 14px; margin-top: 3px; position: relative; }
.arrow::before { content: ""; position: absolute; left: 0; right: 4px; top: 6px; height: 1px; background: currentColor; }
.arrow::after { content: ""; position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* ---- hero: the scroll stack. 300vh tall; the panel pins under the header and the three clips swap with scroll progress ---- */
.wcc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.3; pointer-events: none; }
.wcc-stack { height: calc(100vh - 64px); background: var(--cream); }   /* ONE screen under the header since late 2026-10-31 (owner: no more swapping the clip with the scroll; it was a 300vh, then 200vh, pinned scroll stack); the arrows flip the clip by hand and the small clip parallaxes as the hero scrolls away */
.stack-pin { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }   /* equal halves even though the big clip plus its margin is 10px wider than the right half */
.stack-left { padding: 0 20px 0 170px; display: flex; flex-direction: column; justify-content: center; }   /* no centre hairline, and the copy moved to the right twice (60px, then 50px more; owner, 2026-10-31 night); the script line stops 15px short of the small clip */
.stack-logo { display: block; height: 128px; width: auto; align-self: flex-start; margin: 0 0 34px; }
.stack-title { margin: 0 0 22px; font-family: var(--font-display); font-weight: 400; font-size: 72px; line-height: 1; text-transform: uppercase; letter-spacing: -.005em; max-width: 560px; }
.stack-sub { margin: 0 0 40px; font-family: var(--font-script); font-style: normal; text-transform: lowercase; font-size: 46px; line-height: 1.1; }
.stack-btn { margin: 0; }
.stack-right { position: relative; display: flex; align-items: center; justify-content: flex-end; padding-right: 170px; }   /* the big clip's right edge sits 170px from the screen edge, the same as the copy's left edge on the other side (owner, 2026-10-31 night: "an equal distance to the edge of the screen") */
/* the small second clip (owner, 2026-10-31 night): about a quarter of the big one, pinned with the panel, its right edge touching the big clip's
   left edge, its bottom on the big clip's bottom, and its left edge 80px over the centre line; it plays on its own the whole time */
.stack-mini { position: absolute; z-index: 2; width: 240px; height: 300px; left: -58px; bottom: calc(50% - 399px); margin: 0; border: 1px solid var(--black); background: var(--black); }   /* 240 by 300, staggered over the big clip's bottom left corner and 70px below its bottom. With the big clip moved left for the equal margins its left edge is 10px past the centre line, and the small clip pokes 48px beyond that: any further left and it runs into the end of the script line (owner, 2026-10-31 night: "not side by side") */
.stack-mini video { display: block; width: 100%; height: 100%; object-fit: cover; }
.stack-mini { will-change: transform; }   /* wcc.js slides it up by 90px over the hero's scroll (the parallax the owner asked for) */
.stack-media { width: 560px; }   /* the big clip grew from 480 by 600 to 560 by 700 (owner, 2026-10-31 night); the arrows follow its right edge */
.stack-slides { position: relative; width: 560px; height: 700px; }
.stack-nav { display: flex; justify-content: flex-end; gap: 28px; margin-top: 18px; }
.stack-nav button { position: relative; width: 60px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--black); transition: opacity .3s; }
.stack-nav button::before { content: ""; position: absolute; left: 0; right: 10px; top: 11px; height: 1px; background: currentColor; }
.stack-nav button::after { content: ""; position: absolute; right: 8px; top: 7px; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.stack-nav .stack-prev { transform: rotate(180deg); }
.stack-nav button:hover { opacity: .45; }
.stack-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease, visibility 0s .6s; }
.stack-slide.on { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s ease; }
/* the hidden clips in a stack are visibility:hidden (inherited by the <video>, which a parent's opacity is not) and take no clicks, so the local editor's
   picker lands on the clip on show instead of the top one in paint order (found 2026-10-31 night) */
.stack-slide:not(.on), .fp-clip:not(.on) { pointer-events: none; }
.stack-clip { width: 560px; height: 700px; border: 1px solid var(--black); }   /* the thin black frame on the hero clip (owner, 2026-10-31) */

/* ---- hero fit on shorter and narrower desktop windows (layout gate, 2026-11-08). Nothing here changes the hero at 1440 wide and
   900 tall or larger, the size it was approved at; phones keep their own rules below.
   HEIGHT: the hero was exactly one screen (100vh less the header), but its pieces need 836px: the 700px clip, the arrows under it
   and the small clip that hangs 70px lower. On a laptop (a 1366 by 768 screen leaves about 650) the Inquire button and the arrows
   fell past the hero's bottom edge and the black band under it painted over them, so they could not be seen or pressed. One screen
   is now the hero's MINIMUM: it grows to fit, with the 47px above the clip and the 19px under the small clip it has at 1440 by 900.
   WIDTH: each side kept 170px to the screen edge at every width, so below 1440 the 560px clip slid left over the headline and the
   script line (at 1200 wide "NYC & LONG ISLAND" and "WEDDING DAY" were cut off by it). The side margins now give way first,
   170px at 1440 down to 50px at 1200, both sides equal, so the copy, the two clips and the space between them stay exactly as
   they are at 1440. ---- */
@media (min-width: 768px) {
  .wcc-stack { height: auto; min-height: calc(100vh - 64px); }
  .stack-pin { height: auto; min-height: calc(100vh - 64px); padding-top: 47px; padding-bottom: 47px; }
  .stack-left { padding-left: clamp(50px, calc(50vw - 550px), 170px); }
  .stack-right { padding-right: clamp(50px, calc(50vw - 550px), 170px); }
}

/* ---- intro: a charcoal band, a clip off each edge, the words centered between (proportions from the owner's blueprint) ---- */
.wcc-intro { position: relative; height: 1000px; background: var(--black); color: var(--cream); overflow: hidden; }   /* black, with room above and below (owner, 2026-10-31) */
.intro-clip { position: absolute; width: 24vw; min-width: 300px; max-width: 420px; height: 520px; margin: 0; }
.intro-left { left: 0; top: 340px; }
.intro-right { right: 0; top: 160px; }
.intro-copy { position: absolute; left: 50%; top: 250px; width: 700px; transform: translateX(-50%); text-align: center; }
.intro-title { max-width: 520px; margin: 0 auto 8px; font-family: var(--font-display); font-weight: 400; font-size: 54px; line-height: 1.02; text-transform: uppercase; letter-spacing: -.005em; color: var(--stone); }
.intro-accent { margin: 0 0 40px; font-family: var(--font-script); font-style: normal; text-transform: lowercase; font-size: 64px; line-height: 1.1; color: var(--stone); }   /* the blueprint's script face; the tall capital needs the room above */
.intro-text { width: 520px; margin: 0 auto; text-align: center; }   /* centred, paragraphs and button alike (owner, 2026-10-31 night: "make everything centered") */
.intro-p { font-family: var(--font-sans); font-size: 15px; line-height: 1.75; font-weight: 300; color: var(--cream); margin: 0 0 22px; text-align: center; }   /* text-align here too, because style.css's .t-paragraph sets left */
.intro-close { margin: 0; }
.intro-cta { margin: 36px auto 0; width: 214px; height: 47px; }
/* the outline buttons on the two dark bands fill white on hover (owner, 2026-10-31 night: "when you hover, it needs to be white"); style.css fades them to half white otherwise */
.intro-cta:hover, .pk-btn:hover { background: var(--white); border-color: var(--white); color: var(--black); }   /* the band's call to action, under the closer (owner, 2026-10-31 night) */

/* ---- the gallery: a white section, the five finished reels in one row across the screen (owner, 2026-10-31 night: no arrows, the reels
   sized to fill left to right, nothing autoplays, a play button on each plays that one with its sound) ---- */
.wcc-gal { background: var(--white); padding: 100px 0 90px; overflow: hidden; }
.wcc-gal .wcc-sub { margin-bottom: 48px; }
.gal-strip { width: 100%; padding: 0 16px; }
.gal-track { display: flex; justify-content: center; align-items: flex-start; gap: 14px; }
.reel-item { flex: none; width: clamp(220px, calc((100vw - 32px - 56px) / 5), 320px); }   /* five across with 14px gaps and 16px gutters: 270 wide at 1440 */
.gal-clip { width: 100%; aspect-ratio: 9 / 16; }
.reel-name { margin: 16px 0 0; text-align: center; font-family: var(--font-caps); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.4; color: var(--black); }   /* the couple's names under each reel (owner, 2026-10-31 night) */
.reel-name.todo { color: rgba(0,0,0,.35); }   /* a placeholder until the owner sends that couple's names */
.reel { cursor: pointer; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0; border: 1px solid var(--white); border-radius: 50%;
  background: rgba(0,0,0,.28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: pointer; display: grid; place-items: center;
  transition: opacity .35s ease, transform .35s ease, background .35s ease; }
.reel:hover .reel-play { transform: scale(1.06); background: rgba(0,0,0,.42); }
.reel-ico { display: block; width: 0; height: 0; margin-left: 5px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent var(--white); }
.reel.playing .reel-play { opacity: 0; }                       /* the button steps aside while its reel plays... */
.reel.playing:hover .reel-play { opacity: 1; }                 /* ...and comes back as a pause button under the pointer */
.reel.playing .reel-ico { width: 20px; height: 24px; margin: 0; border: 0; background: linear-gradient(to right, var(--white) 0 35%, transparent 35% 65%, var(--white) 65% 100%); }

/* ---- features: the thumbnail picker (the owner's pick, variant 05 of round two, 2026-10-31 night; six features, up from five at the owner's ask).
   One big clip on the left, the chosen feature's words beside it, six small stills under the words to pick the next from; only the chosen clip plays.
   The twelve-item arrow grid it replaced is gone. ---- */
.wcc-features { background: var(--white); padding: 100px 0 110px; }
.fp { display: grid; grid-template-columns: 480px 1fr; column-gap: 96px; margin-top: 52px; }
.fp-big { position: relative; width: 480px; height: 600px; border: 1px solid var(--black); background: var(--black); overflow: hidden; }
.fp-clip { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.fp-clip.on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
.fp-side { display: flex; flex-direction: column; justify-content: space-between; padding-top: 6px; }
.fp-panels { position: relative; }
.fp-panel { position: absolute; left: 0; right: 0; top: 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .5s ease, transform .6s ease, visibility 0s .5s; }
.fp-panel.on { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .5s ease, transform .6s ease; }
.fp-idx { color: #8a8378; }
.fp-title { font-family: var(--font-display); font-weight: 400; font-size: 50px; line-height: 1.02; text-transform: uppercase; letter-spacing: -.005em; margin: 0 0 24px; max-width: 560px; }
.fp-text { max-width: 470px; margin: 0; font-size: 16px; }
.fp-thumbs { display: flex; gap: 14px; align-items: flex-end; margin-top: 44px; }
.fp-th { width: 74px; height: 98px; padding: 0; border: 1px solid rgba(0,0,0,.22); background: var(--black); overflow: hidden; cursor: pointer; opacity: .55; transition: opacity .3s, border-color .3s, transform .35s; }
.fp-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-th:hover { opacity: 1; }
.fp-th.on { opacity: 1; border-color: var(--black); transform: translateY(-6px); }
.fp-count { font-family: var(--font-caps); font-size: 11px; letter-spacing: .18em; color: #8a8378; margin: 0 0 0 18px; align-self: center; }

/* ---- packages: a dark glass panel with underline tabs over a fixed still photo under a dark wash (clip-path keeps the fixed layer inside the section) ---- */
.wcc-pk { position: relative; overflow: hidden; clip-path: inset(0); color: var(--cream); padding: 110px 40px 120px; }
.pk-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.pk-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-wash { position: absolute; inset: 0; background: rgba(0,0,0,.64); }
.pk-in { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; }
.pk-head { text-align: center; margin-bottom: 54px; }
.pk-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 66px; line-height: 1; text-transform: uppercase; letter-spacing: .01em; color: var(--cream); }
.pk-script { margin: 6px 0 0; font-family: var(--font-script); font-size: 66px; line-height: 1.1; text-transform: lowercase; color: var(--stone); }
.pk-glass { max-width: 980px; margin: 0 auto; background: rgba(0,0,0,.5); border: 1px solid rgba(241,240,238,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 46px 70px 60px; }
.pk-tabs { display: flex; justify-content: center; gap: 56px; position: relative; border-bottom: 1px solid rgba(241,240,238,.35); }
.pk-tab { background: transparent; border: 0; cursor: pointer; color: var(--cream); font-family: var(--font-caps); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; padding: 0 4px 18px; opacity: .55; transition: opacity .4s; }
.pk-tab.on { opacity: 1; }
.pk-ink { position: absolute; bottom: -1px; height: 1px; background: var(--cream); transition: left .5s cubic-bezier(.2,.7,.2,1), width .5s cubic-bezier(.2,.7,.2,1); }
.pk-pane { display: none; padding-top: 44px; }
.pk-pane.on { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; animation: fadeIn .5s ease both; }
.pk-name { margin: 0 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 60px; line-height: 1; text-transform: uppercase; }
.pk-hours { margin: 0; font-family: var(--font-caps); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.pk-inc-label { margin-bottom: 6px; }
.pk-price { margin: 14px 0 22px; font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--stone); }
.pk-para { margin: 0 0 16px; font-family: var(--font-sans); font-size: 15px; line-height: 1.75; font-weight: 300; }
.pk-list { list-style: none; margin: 0; padding: 0; }
.pk-list li { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; font-weight: 300; padding: 10px 0 10px 30px; position: relative; border-bottom: 1px solid rgba(241,240,238,.25); }
.pk-list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 18px; height: 1px; background: var(--cream); }
.pk-btn { margin: 26px 0 0; width: 214px; height: 47px; }
.pk-addons { margin: 56px auto 0; max-width: 760px; text-align: center; border-top: 1px solid rgba(241,240,238,.45); padding-top: 28px; }
.pk-addons .pk-hours { margin-bottom: 14px; }
.pk-addons p { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.9; font-weight: 300; color: var(--cream); }
.pk-addons p b { font-weight: 400; font-family: var(--font-caps); font-size: 12px; letter-spacing: .14em; margin-left: 14px; }

/* ---- faq: a black band; "FAQ" in stone over a tall clip on the left, the numbered questions on the right with a plus that turns to a cross
   when open, an Inquire button under the list (owner's reference, 2026-10-31 night: a dark band, big FAQ, portrait, numbered rows, button) ---- */
.wcc-faq { background: var(--black); color: var(--cream); padding: 120px 0 130px; }
.faq-grid { display: grid; grid-template-columns: 330px 1fr; column-gap: 90px; align-items: start; }
.faq-side { padding-top: 0; }
.faq-main { padding-top: 74px; }   /* the closed list and its button (436px) sit centred on the FAQ title plus clip (583px); a fixed offset, so opening an answer never moves the left side (owner, 2026-10-31 night) */
.faq-title { margin: 0 0 26px; font-family: var(--font-display); font-weight: 400; font-size: 112px; line-height: .88; text-transform: uppercase; letter-spacing: -.01em; color: var(--stone); }
.faq-clip { width: 330px; height: 458px; margin: 0; border: 1px solid rgba(190,182,172,.5); }
.faq { margin: 0; border-top: 1px solid rgba(241,240,238,.28); }
.faq-item { border-bottom: 1px solid rgba(241,240,238,.28); }
.faq-item summary { list-style: none; cursor: pointer; padding: 25px 64px 24px 0; position: relative; font-family: var(--font-caps); font-size: 12px; letter-spacing: .18em; line-height: 1.5; text-transform: uppercase; color: rgba(241,240,238,.72); transition: color .3s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item[open] summary { color: var(--cream); }
.faq-n { display: inline-block; min-width: 56px; color: var(--stone); }
.faq-item summary::before, .faq-item summary::after { content: ""; position: absolute; right: 10px; top: 50%; background: var(--cream); transition: transform .35s ease, opacity .35s ease; }
.faq-item summary::before { width: 17px; height: 1px; }
.faq-item summary::after { width: 1px; height: 17px; margin-top: -8px; right: 18px; }
.faq-item[open] summary::after { transform: rotate(90deg); }
.faq-item .wcc-p { max-width: 640px; margin: 0 0 26px 56px; color: rgba(241,240,238,.85); }
.faq-cta { margin-top: 48px; width: 214px; height: 47px; background: var(--stone); border-color: var(--stone); color: var(--black); }
.faq-cta:hover { background: transparent; border-color: var(--stone); color: var(--stone); }

/* ---- call to action ---- */
/* ---- call to action (owner's blueprint, 2026-10-31 night): a full-bleed band, a clip pinned behind it under a dark wash so the words scroll
   over a still picture, a script line in stone over a big headline, a short paragraph, a filled button ---- */
.wcc-cta { position: relative; overflow: hidden; clip-path: inset(0); min-height: 800px; height: auto; display: grid; place-items: center; background: var(--black); color: var(--cream); padding: 120px 20px; }
.cta-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.cta-bg video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cta-wash { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.cta-in { position: relative; z-index: 1; width: 100%; max-width: 760px; margin: 0 auto; text-align: center; }
.cta-script { margin: 0 0 4px; font-family: var(--font-script); font-style: normal; text-transform: lowercase; font-size: 66px; line-height: 1.1; color: var(--stone); }
.cta-title { margin: 0 0 30px; font-family: var(--font-display); font-weight: 400; font-size: 92px; line-height: .96; text-transform: uppercase; letter-spacing: -.005em; color: var(--stone); }
.cta-p { max-width: 440px; margin: 0 auto 40px; text-align: center; color: rgba(241,240,238,.88); }
.cta-btn { width: 232px; height: 47px; margin: 0 auto; background: var(--stone); border-color: var(--stone); color: var(--black); }
.cta-btn:hover { background: var(--white); border-color: var(--white); color: var(--black); }

/* ---- side gutters below 1300 wide (layout gate, 2026-11-08). The reels heading, the features and the FAQ fill the 1200px canvas
   edge to edge, which is fine while the window is wider than the canvas; at 1200 wide (and on a tablet, which shows the 1200 layout
   scaled) "Every moment, delivered", the big clip, "FAQ" and its clip sat against the left edge of the screen and the FAQ rows ran
   to the right edge. The canvas now always keeps 50px each side, the hero's margin at that width. So the feature headings wrap
   exactly as they do at 1440, the features give the room back from the space between the clip and the words and between the
   six stills. Nothing changes from 1300 wide up.
   (This sits after the features' own rules on purpose: it has to win over their 96px and 14px gaps.) ---- */
@media (min-width: 768px) {
  .wcc .cv { max-width: calc(100% - 100px); }
}
@media (min-width: 768px) and (max-width: 1299px) {
  .fp { column-gap: 56px; }
  .fp-thumbs { gap: 10px; }
  .fp-count { white-space: nowrap; }   /* "01 / 06" broke onto two lines on an iPad, where Safari holds small text at 9px */
}

.gal-hint { display: none; margin: 22px 0 0; text-align: center; color: #8a8378; }   /* "Swipe for more reels", phones only */

/* =====================================================================================================================
   PHONES (below 768px, the site's Showit break; 2026-10-31 night). No reference exists for this page, so it is designed here:
   everything stacks in one column with 20px gutters, and anything that would mean a long scroll becomes a SWIPE (owner: "anything
   that requires a lot of scrolling should be a swipe on mobile"): the hero's three clips and the features clip swipe left and right
   (wcc.js), the package panes swipe between the three packages, and the five reels are a horizontal row you swipe through.
   The header, footer and both menus follow the Showit phone layout from css/packages.css; this page's own logo overrides are
   restated for phones because this stylesheet loads after that one.
   ===================================================================================================================== */
@media (max-width: 767px) {
  /* shared pieces: the A and B mark in the header, the footer and the phone menu (mark is 527 by 560) */
  .e-header-1_11 { left: calc(139.5 * var(--k)); top: calc(8.5 * var(--k)); width: calc(41 * var(--k)); height: calc(44 * var(--k)); }
  .e-footer-1_11 { left: calc(117 * var(--k)); top: calc(47 * var(--k)); width: calc(77 * var(--k)); height: calc(82 * var(--k)); background-image: url("../img/logo-ab-mark-new.png"); }
  .e-menu_mobile_9 { left: calc(111 * var(--k)); top: calc(102 * var(--k)); width: calc(86 * var(--k)); height: calc(91.5 * var(--k)); background-image: url("../img/logo-ab-mark-new.png"); background-size: contain; }

  .wcc .cv { padding: 0 20px; }
  .wcc-h2 { font-size: 40px; }
  .wcc-sub { font-size: 32px; }
  .wcc-eyebrow, .t-subheading.wcc-eyebrow { font-size: 11px; }

  /* the header stays out of sight until the visitor has scrolled past the hero, then slides down and stays (owner, 2026-10-31 night:
     "I don't want it to come up until you swipe past the hero section on mobile"); fixed, so the hero starts at the very top */
  .sec-header-1 { position: fixed; top: 0; left: 0; right: 0; transform: translateY(-100%); transition: transform .4s ease; }
  .sec-header-1.nav-show { transform: none; }

  /* hero: copy first, then the big clip with the small one staggered over its bottom left corner; swipe the big clip */
  .wcc-stack { height: auto; }
  /* order on phones (owner, 2026-10-31 night): logo, headline, script line, then the clips, then the Inquire button under them;
     .stack-left dissolves (display: contents) so its pieces and the clips share one column and can be reordered */
  .stack-pin { display: flex; flex-direction: column; height: auto; }
  .stack-left { display: contents; }
  .stack-logo { height: 82px; margin: 34px 20px 24px; }
  .stack-title { font-size: 40px; max-width: none; margin: 0 20px 14px; }
  .stack-sub { font-size: 30px; margin: 0 20px; }
  .stack-right { order: 1; display: block; padding: 26px 20px 74px; }
  .stack-btn { order: 2; align-self: flex-start; margin: 0 20px 56px; }
  .stack-media { width: 74vw; margin-left: auto; }
  .stack-slides { width: 100%; height: auto; aspect-ratio: 4 / 5; touch-action: pan-y; }
  .stack-clip { width: 100%; height: 100%; }
  .stack-nav { gap: 18px; margin-top: 14px; }
  .stack-nav button { width: 46px; }
  .stack-mini { left: 20px; bottom: 40px; width: 36vw; height: 45vw; }

  /* intro band: the words, then the two clips side by side and staggered */
  .wcc-intro { height: auto; display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 76px 20px 84px; }
  .intro-copy { position: static; grid-column: 1 / -1; grid-row: 1; width: auto; transform: none; }
  .intro-title { font-size: 34px; max-width: none; }
  .intro-accent { font-size: 46px; margin-bottom: 26px; }
  .intro-text { width: auto; }
  .intro-clip { position: static; width: auto; min-width: 0; max-width: none; height: auto; aspect-ratio: 3 / 4; grid-row: 2; }
  .intro-left { grid-column: 1; margin-top: 70px; }
  .intro-right { grid-column: 2; margin-top: 40px; margin-bottom: 30px; }

  /* packages: the glass panel stays, its two columns stack, and the pane swipes between the three packages */
  .wcc-pk { padding: 72px 14px 80px; }
  .pk-head { margin-bottom: 30px; }
  .pk-title { font-size: 40px; }
  .pk-script { font-size: 40px; }
  .pk-glass { padding: 26px 18px 34px; }
  .pk-tabs { gap: 14px; }
  .pk-tab { font-size: 10px; letter-spacing: .1em; padding: 0 2px 14px; white-space: nowrap; }
  .pk-pane { padding-top: 28px; touch-action: pan-y; }
  .pk-pane.on { grid-template-columns: 1fr; gap: 28px; }
  .pk-name { font-size: 42px; }
  .pk-price { font-size: 28px; }
  .pk-btn { width: 100%; max-width: 280px; }
  .pk-addons { margin-top: 38px; }
  .pk-addons p { font-size: 14px; line-height: 1.7; margin-bottom: 8px; }
  .pk-addons p b { display: block; margin: 2px 0 0; }

  /* reels: a horizontal row you swipe, one reel centred with the next peeking in */
  .wcc-gal { padding: 72px 0 24px; }   /* the bottom was 80px; with the features' own 72px top it left too much air under the swipe line (owner, 2026-10-31 night) */
  .wcc-gal .wcc-sub { margin-bottom: 34px; }
  .gal-strip { padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gal-strip::-webkit-scrollbar { display: none; }
  .gal-track { justify-content: flex-start; width: max-content; padding: 0 13vw; gap: 12px; }
  .reel-item { width: 74vw; scroll-snap-align: center; }   /* 74vw wide, 9:16 tall (the Reels ratio), the neighbours peeking in at each side; 64vw until the owner asked for them bigger */
  .reel-play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .gal-hint { display: block; }

  /* features: the big clip full width (swipe it), the words, then the six stills in a row */
  .wcc-features { padding: 72px 0 80px; }
  .fp { grid-template-columns: 1fr; row-gap: 28px; margin-top: 30px; }
  .fp-big { width: 100%; height: auto; aspect-ratio: 4 / 5; touch-action: pan-y; }
  .fp-title { font-size: 32px; }
  .fp-text { font-size: 15px; }
  .fp-thumbs { gap: 8px; margin-top: 26px; }
  .fp-th { flex: 1; width: auto; height: auto; aspect-ratio: 3 / 4; }
  .fp-count { display: none; }

  /* faq: the big "FAQ" beside a smaller clip, then the questions */
  .wcc-faq { padding: 72px 0 84px; }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-side { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
  .faq-title { font-size: 84px; margin: 0; }
  .faq-clip { width: 40vw; height: 50vw; }
  .faq-main { padding-top: 34px; }
  .faq-item summary { font-size: 11px; letter-spacing: .14em; padding: 20px 40px 20px 0; }
  .faq-n { min-width: 40px; }
  .faq-item .wcc-p { margin: 0 0 22px 40px; font-size: 14px; }
  .faq-cta { width: 100%; max-width: 280px; margin-top: 36px; }

  /* the caps face (Aboreto, the Inquire buttons' face) two sizes up everywhere on this page, phones only (owner, 2026-10-31 night: "too small") */
  .wcc .btn span { font-size: 13px; }
  .wcc-eyebrow, .t-subheading.wcc-eyebrow { font-size: 13px; }
  .pk-tabs { gap: 10px; }
  .pk-tab { font-size: 12px; letter-spacing: .08em; }
  .pk-hours { font-size: 14px; }
  .pk-addons p b { font-size: 14px; }
  .reel-name { font-size: 14px; }
  .gal-hint { font-size: 15px; }
  .faq-item summary { font-size: 13px; }

  /* the paragraph face (Lato) one size up on phones (owner, 2026-10-31 night) */
  .t-paragraph, .wcc-p, .intro-p, .pk-para { font-size: 16px; }
  .pk-list li, .pk-addons p { font-size: 15px; }
  .fp-text { font-size: 16px; }
  .faq-item .wcc-p { font-size: 15px; }

  /* FAQ on phones: the clip's outline is white (owner, 2026-10-31 night); everything else keeps its cream and stone (an all-white pass was undone) */
  .faq-clip { border-color: var(--white); }

  /* call to action */
  .wcc-cta { min-height: 580px; padding: 90px 24px; }
  .cta-script { font-size: 46px; }
  .cta-title { font-size: 54px; }
  .cta-p { font-size: 16px; }
}
/* the narrowest phones: the three package tabs at the larger caps size need the panel's side padding back */
@media (max-width: 380px) {
  .pk-glass { padding-left: 10px; padding-right: 10px; }
  .pk-tabs { gap: 8px; }
  .pk-tab { letter-spacing: .04em; }
}