/* Victoria rebuild - shared stylesheet. Hand-tuned; geometry per page in css/<page>.css */
:root {
  --ink: #161616;
  --black: #111111;
  --cream: #F7F7F7;
  --cream-text: #F5F5F5;
  --accent: #3D3D3D;
  --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 {
  left: 624px; 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 form */
.contact-form { position: absolute; inset: 0; }
.cf-view { position: absolute; inset: 0; }
.field {
  position: absolute; background: transparent; border: 0; border-bottom: 1px solid rgba(22,22,22,.5);
  font-family: var(--font-pop); font-weight: 300; font-size: 17px; color: var(--ink);
  padding: 4px 2px 10px; outline: none; height: 34px;
}
.field::placeholder { color: rgba(22,22,22,.75); }
.field:focus { border-bottom-color: var(--ink); }

/* 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(22,22,22,.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; }
.foot-link { width: 160px; 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; }
  /* 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; }
}