/* Victoria rebuild - shared stylesheet. Hand-tuned; geometry per page in css/<page>.css */
:root {
  --ink: #2E2A25;
  --black: #191613;
  --cream: #F4F1EB;
  --cream-text: #F2EFE8;
  --accent: #8A7A66;
  /* Accent marks sitting on the dark sections. It tracks --accent so a colorway
     that changes the accent changes both; it exists as its own token only so a
     build CAN give the dark ground a different accent when a brand's accent is
     too low-contrast there (the donor red this kit was re-cut from measured
     1.76:1 on near-black, which is what the token was originally added for). */
  --accent-lift: var(--accent);
  --font-serif: 'Nyght Serif Light', Georgia, serif;
  --font-italic: 'Nyght Serif Light Italic', Georgia, serif;
  --font-pop: 'Poppins', sans-serif;
  --font-mont: 'Montserrat', sans-serif;
  --gutter: max(0px, calc((100vw - 1200px) / 2));
}
@font-face {
  font-family: 'Nyght Serif Light';
  src: url('fonts/nyghtserif-light.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nyght Serif Light Italic';
  src: url('fonts/nyghtserif-lightitalic.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 0; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-pop); font-weight: 300; overflow-x: hidden;
}
img { max-width: none; }
video { max-width: none; }
a { color: inherit; }
a.plain { color: inherit; text-decoration: none; }
/* semantic headings render exactly like the <p> tags they replaced: geometry and
   type are class-driven, tags carry meaning only (element selectors lose to any
   class rule). margin 1em 0 mirrors the UA default p margin. */
h1, h2, h3 { font-size: inherit; font-weight: inherit; margin: 1em 0; }


/* section / canvas scaffolding */
.sec { position: relative; height: var(--h); }
.cv { position: relative; width: 1200px; height: 100%; margin: 0 auto; }
.cv > * { position: absolute; margin: 0; }
.sec.dark { color: var(--cream-text); }
.sec::before { z-index: 0; }
.cv { z-index: 1; }

/* text styles (engine st-d-*) */
.t-title    { font-family: var(--font-serif);  font-size: 50px; line-height: 1.1; letter-spacing: 0; font-weight: 400; }
.t-heading  { font-family: var(--font-italic); font-size: 35px; line-height: 1.2; letter-spacing: 0; font-weight: 400; }
.t-subheading { font-family: var(--font-pop); font-size: 22px; line-height: 1.3; font-weight: 300; }
.t-paragraph  { font-family: var(--font-pop); font-size: 16px; line-height: 1.6; letter-spacing: .02em; font-weight: 300; }
em, .it { font-family: var(--font-italic); font-style: normal; }
.t-title em, .t-heading em { font-family: var(--font-italic); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--font-mont); font-weight: 400; font-size: 14px; line-height: 1.3;
  text-decoration: none; padding: 14px 18px; cursor: pointer;
  transition: background-color .5s, border-color .5s, color .5s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--cream-text); }
.btn-secondary { border-color: var(--cream-text); color: var(--cream-text); font-family: var(--font-pop); font-weight: 300; }
.btn-secondary:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }

/* media */
.ph { object-fit: cover; width: 100%; height: 100%; display: block; }
.ico svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.ico { color: inherit; }

/* hamburger + overlay nav */
.burger {
  position: fixed; left: 40px; top: 18px; width: 40px; height: 46px;
  background: none; border: 0; padding: 6px; cursor: pointer; z-index: 900;
}
.burger svg { width: 100%; height: 100%; }
.burger-light { color: var(--cream-text); fill: var(--cream-text); }
.burger-dark { color: var(--ink); fill: var(--ink); }
.burger svg path { fill: currentColor; }
.nav-overlay {
  position: fixed; inset: 0; background: var(--cream); z-index: 1000;
  overflow: hidden; color: var(--ink);
}
.nav-overlay .cv { height: 100%; min-height: 700px; }
.ov-panel {
  /* The menu labels are 80px nowrap starting at x:60, so the room before this
     block is what caps a label's length. At left:624 that was 564px, and a
     client whose page is called "San Fernando" (604px) or "Studio Booth"
     (600px) had the end of the word painted over by this black panel: the
     visitor saw half an O. Moved to 700 for 640px of room, which clears every
     label the five-page model produces with margin to spare. The block is an
     empty decorative bleed, so only its left edge matters. */
  /* MOVED AGAIN to 840 (2026-09-17, layout gate): "Brand Activation" measures
     752px at 80px Nyght Serif, so it ended at 812 and the panel at 700 painted
     its last three letters ("ION") in near-black on near-black. 840 clears it
     by 28px. The gap is label-left (60) to panel-left, so it is the same at
     every desktop width: .cv is a fixed 1200 centred, and both numbers are
     relative to it. If this overlay ever gains the kit's featured column, note
     that .ov-feat-h/.ov-feat-title sit at 730/898 and would now straddle the
     panel edge; this build has no such elements. */
  left: 840px; top: 0; width: calc(576px + var(--gutter) + 40px); height: 100%;
  background: var(--black);
}
.ov-close {
  left: 60px; top: 41px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-pop); font-weight: 300; font-size: 16px; line-height: 1.8;
  color: var(--ink); padding: 0; position: absolute;
}
.ov-link {
  left: 60px; width: 441px; font-family: var(--font-serif); font-size: 80px;
  line-height: 1.1; text-transform: uppercase; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.ov-link:hover { font-family: var(--font-italic); }
.ov-feat-h { left: 730px; top: 114px; width: 428px; font-family: var(--font-italic); font-size: 40px; color: var(--cream-text); }
.ov-feat-title { left: 898px; width: 260px; font-family: var(--font-pop); font-weight: 300; font-size: 20px; line-height: 1.3; color: var(--cream-text); text-decoration: none; position: absolute; }
.ov-feat-desc { left: 898px; width: 260px; font-family: var(--font-pop); font-weight: 300; font-size: 15px; line-height: 1.4; color: var(--cream-text); opacity: .8; }
.ov-quick { width: 180px; font-family: var(--font-pop); font-weight: 300; font-size: 22px; line-height: 1.3; color: var(--cream-text); text-decoration: none; position: absolute; }
.ov-quick:hover, .ov-feat-title:hover { text-decoration: underline; }

/* marquees */
.marquee { display: flex; overflow: hidden; gap: 3rem; }
.marq-track { display: flex; gap: 3rem; flex-shrink: 0; min-width: 100%; justify-content: space-around; align-items: center; animation: marq 28s linear infinite; }
.marq-slow { animation-duration: 60s; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 3rem)); } }
.hero-marquee span {
  font-family: var(--font-serif); font-size: 235px; line-height: 280px;
  text-transform: uppercase; color: var(--cream-text); white-space: nowrap;
}
.faux-logo { color: var(--ink); white-space: nowrap; align-self: center; opacity: .92; }

/* rotators (crossfade) */
.rot-group .rot-item { opacity: 0; transition: opacity 1.2s ease; }
.rot-group .rot-item.is-on { opacity: 1; }
.fade-gal { position: absolute; }
.fade-gal .rot-item { position: absolute; inset: 0; }

/* rotating circular badge */
.rot-badge svg { width: 100%; height: 100%; overflow: visible; animation: spin 30s linear infinite; transform-origin: 50% 50%; }
.rot-badge text { fill: var(--cream-text); font-family: var(--font-pop); font-size: 12.5px; letter-spacing: .18em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* sticky composites */
.sticky-zone { position: relative; }
.stack { position: relative; }

/* portfolio filmstrip */
.filmstrip { overflow: hidden; }
.film-track { display: flex; gap: 26px; height: 100%; transition: transform .9s cubic-bezier(.5,0,.2,1); }
.film-track img,
.film-track video { flex: none; width: 588px; height: 100%; }

/* Contact line: her email and her PUBLIC number (909-830-1509), both tappable.
   The number shown here is deliberately NOT clients.notify_phone. That one is
   her private mobile for lead-alert texts and was never offered for
   publication; the two must stay apart if this line is ever edited.
   It lives in style.css rather than css/form.css because only the home page
   loads that file, and this line ships on all five.
   Links inherit the paragraph's ink and take a hairline rule instead of the
   UA's blue underline, which would be the only saturated colour in the
   section. The rule is a border-bottom, not text-decoration, so it clears the
   descenders in the email address. */
/* white-space: nowrap keeps the number whole (2026-09-17, layout gate): at 390
   and below the line wrapped inside the phone number as "(714)" / "209-3775",
   and its underline carried across the break with it. The pair is short enough
   that nowrap only moves the whole number to the second line; the longest
   single item, the email at 226px, still fits a 316px column. */
.cf-tel { color: inherit; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid rgba(46,42,37,.3); transition: border-color .2s ease; }
@media (hover: hover) { .cf-tel:hover { border-bottom-color: var(--ink); } }

/* contact form */
.contact-form { position: absolute; inset: 0; }
.cf-view { position: absolute; inset: 0; }
/* PADDING, NOT HEIGHT (2026-08-06, layout gate). The kit's 4px/10px padding
   left a 19px content box for 17px Poppins, whose line box needs 26px, so the
   descenders in "Type Of Event" and in the package select's own prompt were
   sheared flat -- visible on every page, in Chromium and WebKit alike, and
   silent to a scrollHeight probe because the UA clips a control's text without
   making it scrollable. 0/6 gives a 27px content box while keeping BOTH the
   34px height (so the underline and the 53px field pitch do not move) and the
   13.5px optical centre the kit had. Keep those two invariant if you retune. */
.field {
  position: absolute; background: transparent; border: 0; border-bottom: 1px solid rgba(46,42,37,.5);
  font-family: var(--font-pop); font-weight: 300; font-size: 17px; color: var(--ink);
  padding: 0 2px 6px; outline: none; height: 34px;
}
.field::placeholder { color: rgba(46,42,37,.75); }
.field:focus { border-bottom-color: var(--ink); }

/* ---------- Event date field (2026-08-21) ----------
   See the note atop script.js: this was a type="text" box that flipped itself
   to type="date" on focus so the placeholder could carry the wording, and
   Safari could not be trusted through the swap. It is a plain date box now and
   the wording is a real <label> above it. The label is a real <label for>, not
   decoration: the portal's contact-form editor rewords labels, so a client
   rewording this question keeps the visible wording in step
   (src/site_forms.js). */
.fd-wrap { display: block; }
.fd-label {
  display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .55; margin: 0 0 4px;
}
/* appearance:none: iOS Safari otherwise renders a native date control that
   blows out past the form's width, and an empty one can collapse to no height. */
.field-date {
  -webkit-appearance: none; appearance: none;
  min-width: 0; max-width: 100%; text-align: left;
}
.field-date::-webkit-date-and-time-value { text-align: left; margin: 0; min-width: 0; }
.field-date::-webkit-calendar-picker-indicator { margin-left: auto; opacity: .45; cursor: pointer; }

/* OPTIONAL package select + add-on checkbox group for the inquiry form.
   Present only when a client's onboarding asks for them; both RECONCILE from
   client_packages on every portal save (src/site_prices.js). This kit's
   desktop form is a fixed-coordinate canvas, so the BUILDER places these and
   shifts the fields/button below (and the section --h) by the added height;
   markup contract: templates/README.md "Reconciled form controls". */
select.field { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
                    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.2em; border-radius: 0; }
.addon-picks { border: 1px solid rgba(46,42,37,.5); padding: 14px 16px 18px; }
.addon-picks legend { font-family: var(--font-pop); font-weight: 300; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding: 0 6px; }
.addon-picks label { display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--font-pop); font-weight: 300; font-size: 15px; line-height: 1.5;
  color: var(--ink); margin-top: 9px; cursor: pointer; }
.addon-picks input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 auto;
  margin-top: 3px; accent-color: var(--accent); }
@media (min-width: 620px) {
  .addon-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .addon-picks legend { grid-column: 1 / -1; }
}

.field-area { resize: none; height: 137px; }

/* footer */
/* overflow: hidden clips .social-strip, which is wider than the viewport by
   design. body has overflow-x:hidden but html does not, so without this the
   whole page scrolls 32px sideways at 1440. Backported from the Viva build
   2026-08-05; mobile rendering at 390 is unchanged. */
.sec-footer { background: var(--black); overflow: hidden; }
.foot-kicker { font-family: var(--font-pop); font-size: 14px; font-weight: 300; }
.foot-r { text-align: right; }
.foot-wordmark { font-family: var(--font-serif); font-size: 52px; text-align: center; text-decoration: none; line-height: 1.3; }
/* width grown from the kit's 120 (2026-08-06, layout gate): the nav column is
   a fixed 46px pitch, so a link that wraps to two lines overruns the next one.
   "Studio Booth" needs 137px at 20px Poppins and was printing its second line
   on top of "Weddings" on all five pages. 160 clears the longest label with
   room to spare and still stops well short of the wordmark at 330. */
/* GROWN AGAIN to 200 (2026-09-17, layout gate): same failure, longer label.
   "Brand Activation" measures 163px at 20px Poppins, so at 160 it wrapped and
   its second line printed across "Weddings" 10px below it, on all five footers.
   200 clears it by 37px and still stops 130px short of the wordmark at 330.
   Desktop only in effect: the mobile blanket (.sec .cv > *, 0-2-0) resets this
   to width:auto below 901px, so the stacked footer is untouched. */
.foot-link { width: 200px; font-family: var(--font-pop); font-weight: 300; font-size: 20px; line-height: 1.4; text-decoration: none; }
.foot-link:hover { font-family: var(--font-italic); }
.foot-blurb { text-align: center; font-size: 14px; }
/* OPTIONAL client logo in the footer (the second of this kit's two logo
   slots; the first is .cur-logo on the home hero). The footer is --black, so
   a dark-on-transparent wordmark is forced to white in CSS rather than
   shipping a second inverted asset: brightness(0) flattens any antialiased
   greys to black first, invert(1) takes the lot to white, and neither touches
   alpha. Keeping the one true-to-original asset means it can still be dropped
   on a light section later by removing the filter. Drop the filter if the
   client's mark is already light; delete the <img> if they have no wordmark. */
.foot-logo { filter: brightness(0) invert(1); opacity: .92; height: auto; }
.foot-ico { opacity: .9; }
.social-strip {
  left: calc(-32px - var(--gutter)); width: calc(1264px + 2 * var(--gutter));
  height: 277px; display: flex; gap: 18px; overflow: hidden;
}
.social-strip img,
.social-strip video { flex: none; width: 296px; object-fit: cover; height: 100%; }
.foot-small { font-family: var(--font-pop); font-weight: 300; font-size: 10px; line-height: 1.6; text-decoration: none; }

/* parallax slide texts */
.px-slide { transition: none; }

/* ============================================================
   MOBILE LAYER (2026-07-15) — purely additive; desktop rendering
   above 900px is untouched. !important appears only to neutralize
   inline styles. Per-page section rules live in css/<page>.css. */
@media (max-width: 900px) {
  body { min-width: 0; overflow-x: hidden; }
  .sec, .cv { height: auto; }
  .cv { width: auto; }
  /* THE BLANKET — reflows every absolutely-positioned canvas child.
     The .sec prefix is load-bearing: (0,2,0) outranks the page
     stylesheets' .z-* geometry rules even though they load later. */
  .sec .cv > * { position: static; left: auto; top: auto; right: auto;
                 bottom: auto; width: auto; height: auto; white-space: normal; }
  .cv .ph { width: 100%; height: auto; }
  .cv .btn { position: static; width: 100%; max-width: 340px; height: 50px;
             align-self: center; }
  /* The package prompt is the longest string in the form and the only control
     with an arrow eating its right padding. At 390 the field box is 346px, the
     2.2em padding leaves 307px, and "Which package are you interested in?"
     measures 318px at 17px Poppins, so the question mark sat clipped under the
     arrow. 16px measures 299px (10px of slack) and is exactly the iOS floor, so
     a focus tap still does not zoom the page. It lives here rather than in
     form.css because only the home page loads that file; the other four pages
     reflow this form through the blanket above. Fit fix only: the prompt is the
     client's own onboarding wording and is not shortened. */
  select.field { font-size: 16px; }

  /* default mobile type scale; page css re-tunes its explicit px sizes */
  .t-title { font-size: 34px; }
  .t-heading { font-size: 26px; }
  .t-subheading { font-size: 18px; }
  .burger { left: 14px; top: 12px; }

  /* nav overlay → single-column menu (featured-blog column hidden) */
  .nav-overlay { overflow-y: auto; }
  .nav-overlay .cv { width: auto; height: auto; min-height: 100%;
                     padding: 86px 26px 44px; }
  .nav-overlay .cv > * { position: static; }
  .nav-overlay .ov-panel,
  .nav-overlay .ov-feat-h,
  .nav-overlay .cv > img,
  .nav-overlay .ov-feat-title,
  .nav-overlay .ov-feat-desc,
  .nav-overlay .cv > video { display: none; }
  .nav-overlay .ov-close { position: absolute; left: auto; right: 26px; top: 30px; }
  .nav-overlay .ov-link { display: block; width: auto; font-size: 42px;
                          line-height: 1.5; white-space: normal; }
  .nav-overlay .ov-quick { position: static; display: inline-block; width: auto;
                           margin: 28px 26px 0 0; font-size: 17px; color: var(--ink); }

  /* footer (markup positions via inline styles; flex-basis sidesteps them) */
  .sec-footer .cv { display: flex; flex-flow: row wrap; justify-content: center;
                    padding: 56px 24px 30px; }
  .sec-footer .cv > * { flex: 0 0 100%; text-align: center; }
  .sec-footer .foot-kicker { display: none; }
  .sec-footer .foot-wordmark { order: -3; font-size: 36px; }
  .sec-footer .foot-blurb { order: -2; max-width: 320px; margin: 18px auto 22px;
                            flex-basis: auto; }
  .sec-footer .foot-link { margin: 4px 0; font-size: 18px; }
  .sec-footer .foot-ico { flex: 0 0 auto; margin: 28px 12px 0; }
  .sec-footer .social-strip { flex: 0 0 100vw; height: 150px; margin: 32px -24px 0; }
  .sec-footer .social-strip img,
  .sec-footer .social-strip video { width: 132px; }
  .sec-footer .foot-small { margin-top: 18px; }
  .sec-footer .foot-small + .foot-small { margin-top: 6px; }
  /* The footer stack gives every child a full row (flex: 0 0 100%), which
     stretches the wordmark across the whole column. Capping the ELEMENT's
     width instead frees space on the flex line and lets the next item ride up
     beside it, which throws the mark off centre. So the BOX keeps the full row
     and the artwork is sized inside it: contain letterboxes the wordmark to
     the given height and object-position centres it on the line.
     Selector carries ".sec-footer .cv >" to outrank the mobile blanket
     (.sec .cv > *, which is 0-2-0 and otherwise wins the height back). */
  .sec-footer .cv > .foot-logo { width: 100%; max-width: none; height: 48px;
    object-fit: contain; object-position: center; margin: 0; }
}

/* ---- the accent, carried further through the site --------------------------
   Nothing here adds a visual DEVICE (no boxes, borders, scrims or shadows): it
   only recolours small type the kit already draws in neutral.

   The rules are split by GROUND, and the split is structural, not decorative:
     light ground (--cream #F4F1EB, .fl-cream, .fl-stone #ECE6DC)
        -> --accent
     dark ground  (#131313 section grounds / .fl-dark #221E1A / .fl-dark2 #2B2723 / #3B352E)
        -> --accent-lift, which tracks --accent (see :root)
   The kit palette's accent measures 3.4-4.3:1 on every one of those grounds, so
   both sides are legible with ONE colour and the two tokens resolve the same.
   The split is kept anyway, because a BUILD whose brand accent is legible on
   only one side can then re-point --accent-lift alone and every dark-ground
   mark follows. (The kit carried a donor client's red here until 2026-09-07;
   it measured 8.94:1 on cream but 1.83:1 on the dark bands, which is the
   lopsided case this structure exists for. See templates/README.md.)
   The .fl-* classes declare their own ground, so scoping to them keeps every
   one of these on the right side of that line automatically. Add new accent
   rules the same way, never unscoped. */

/* section kickers: the small uppercase label above almost every heading */
.fl-cream > .fl-wrap > .fl-kicker,
.fl-stone > .fl-wrap > .fl-kicker,
.fl-cream .fl-wrap .svc-found-head .fl-kicker,
.fl-cream .fl-wrap .occ-case-rail .fl-kicker,
.fl-stone .fl-wrap .occ-case-rail .fl-kicker,
.fl-stone .ss-carries-body .fl-kicker { color: var(--accent); opacity: 1; }
.fl-dark > .fl-wrap > .fl-kicker,
.fl-dark2 > .fl-wrap > .fl-kicker,
.fl-dark .fl-wrap .svc-addons-head .fl-kicker,
.fl-dark .fl-wrap .ss-film-head .fl-kicker { color: var(--accent-lift); opacity: 1; }

/* ordinals: ( 01 ) style numerals and the italic index marks */
.fl-cream .fl-num, .fl-stone .fl-num,
.fl-stone .pcard-num, .fl-cream .pcard-num,
.fl-stone .offer-num, .fl-cream .offer-num { color: var(--accent); opacity: 1; }
.fl-dark .fl-num, .fl-dark2 .fl-num,
.fl-dark .gd-idx, .fl-dark2 .gd-idx,
/* The featured package card declares its OWN #221E1A ground (patterns.css
   .pcard.is-featured) while sitting inside a LIGHT section, so the .fl-* scope
   above lands it in the cream group even though its ground is dark. It belongs
   here, with the dark-ground marks. */
.pcard.is-featured .pcard-num,
.fl-dark .pcard-num, .fl-dark2 .pcard-num { color: var(--accent-lift); opacity: 1; }

/* count-up figures */
.fl-cream .ct b { color: var(--accent); }
.fl-dark .ct b, .fl-dark2 .ct b { color: var(--accent-lift); }
/* ---- Event time combo menu (2026-08-13; enhancement lives in script.js).
   The wrap stays a plain block so it takes the input's cell in .form-row. */
.tc-wrap { position: relative; display: block; }
.tc-menu {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 100%;
  max-height: 236px; overflow: auto; background: #fff; border: 1px solid var(--cream);
  border-radius: 10px; padding: 6px; box-shadow: 0 12px 34px rgba(25, 22, 19, 0.26);
}
.tc-opt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  width: 100%; text-align: left; font: inherit; font-size: 0.9rem; color: var(--ink);
  padding: 7px 10px; border: 0; background: none; border-radius: 7px; cursor: pointer;
  white-space: nowrap;
}
.tc-opt .dur { color: var(--accent); font-size: 0.8rem; }
.tc-opt:hover { background: var(--cream); }
.tc-opt.hl { background: var(--accent); color: var(--cream-text); font-weight: 600; }
.tc-opt.hl .dur { color: var(--cream-text); }