/* 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 */
.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: 120px; 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; }
.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; }
}

/* ---- client logo -----------------------------------------------------------
   Her uploaded logo (submission 58) is a pure BLACK wordmark on transparency,
   and both placements sit on dark ground, so it 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. */
.foot-logo { filter: brightness(0) invert(1); opacity: .92; height: auto; }
@media (max-width: 900px) {
  /* 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 threw 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; }
}