/*
Theme Name: Vidian
Theme URI: https://vidian.sk
Author: Vidian
Author URI: https://vidian.sk
Description: Luxusná jednostránková téma pre prémiovú minerálnu vodu Vidian. Čierno-zlatý dizajn, one-page layout, plne responzívna.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vidian
Tags: black, gold, luxury, one-page, custom-menu, full-width-template
*/

/* =========================================================
   0. RESET
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { max-width: 100%; overflow-x: hidden; }

/* Stops the browser's own font-scaling from touching the page. Chrome
   doesn't do this by default, but Firefox for Android has an
   accessibility "Font Size" setting (Settings → Accessibility → Font
   Size, or "follow OS text size") that, when the phone/browser has a
   larger-than-default size set, rescales every bit of text on every
   page it loads — which is exactly what was breaking layout only on
   phones with that setting bumped up, only in Firefox, regardless of
   wifi/data. text-size-adjust:100% is the standard opt-out browsers
   expose for this: it tells the browser "always render text at the
   size the page's own CSS specifies, don't apply your own scaling on
   top of it." All three forms are needed for full coverage
   (-moz- for Firefox, -webkit- for old Safari/Chrome, unprefixed for
   current browsers) — but note this does override a real accessibility
   preference some visually-impaired visitors rely on to make small
   text readable; if that matters for this audience, the size slider
   should probably stay in the user's hands instead. */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Every top-level section fills exactly one viewport, on any screen size —
   scroll-snap guarantees you always land squarely on a section boundary,
   so you never see even a sliver of the section before/after it. */
html { scroll-snap-type: y mandatory; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
}
/* On mobile, even "proximity" still performs its own small corrective
   scroll adjustment once a gesture ends near a section boundary — on top
   of the reveal/header fixes above, that lingering correction is still
   perceptible as a catch/stutter. Turning scroll-snap off entirely on
   mobile makes the whole page — hero through contact — one continuous,
   ordinary scroll with nothing programmatic adjusting position, which is
   what "loads all at once, no progressive effects" comes down to. The
   matching scroll-snap-stop: normal override lives at the end of the file
   (see SCROLL-SNAP MOBILE OVERRIDE near the bottom) so it wins over the
   later, equal-specificity .vd-section / .vd-hero declarations instead of
   being silently shadowed by them. */
@media (max-width: 780px) {
  html { scroll-snap-type: none; }
}
body {
  margin: 0;
  background: var(--vd-black);
  color: var(--vd-white);
  font-family: var(--vd-font-body);
  font-weight: 300;
  font-size: 20.8px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================================================
   1. DESIGN TOKENS
========================================================= */
:root {
  --vd-black: #07070a;
  --vd-black-soft: #101013;
  --vd-black-elev: #17161a;
  --vd-gold: #c9a35f;
  --vd-gold-light: #ecd08c;
  --vd-gold-dim: #8c6f3f;
  --vd-white: #f4f2ec;
  --vd-grey: #a6a29a;
  --vd-line: rgba(201, 163, 95, 0.28);

  --vd-font-display: "Cormorant Garamond", "Times New Roman", serif;
  --vd-font-body: "Jost", "Montserrat", sans-serif;

  --vd-container: 1280px;
  --vd-gutter: clamp(24px, 5vw, 96px);
}

/* =========================================================
   2. TYPOGRAPHY
========================================================= */
h1, h2, h3, .vd-display {
  font-family: var(--vd-font-display);
  font-weight: 500;
  color: var(--vd-white);
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(3.38rem, 7.8vw, 6.5rem); }
h2 { font-size: clamp(2.6rem, 4.68vw, 3.9rem); text-transform: uppercase; letter-spacing: 0.02em; }
h3 { font-size: clamp(1.69rem, 2.6vw, 2.21rem); }
p { color: var(--vd-grey); font-weight: 300; }

.vd-gold-text { color: var(--vd-gold-light); font-style: normal; }

.vd-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: var(--vd-font-body);
  font-size: 0.99rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--vd-gold);
  margin-bottom: 18px;
}
.vd-eyebrow--left { justify-content: flex-start; }
.vd-diamond {
  width: 7px; height: 7px;
  border: 1px solid var(--vd-gold);
  transform: rotate(45deg);
  display: inline-block;
  flex-shrink: 0;
}
.vd-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 200px;
  margin: 0 auto 24px;
}
.vd-divider--left { margin-left: 0; margin-right: auto; }
.vd-divider span:not(.vd-diamond) {
  flex: 1;
  height: 1px;
  background: var(--vd-line);
}
.vd-divider-fade {
  display: block;
  width: 100%;
  max-width: 260px;
  height: 1px;
  margin: 6px auto 24px;
  background: linear-gradient(90deg, transparent 0%, var(--vd-gold) 50%, transparent 100%);
}
.vd-lede {
  max-width: 620px;
  margin: 0 auto;
  color: var(--vd-grey);
  font-size: 1.365rem;
}
.vd-copy p { margin: 0 0 1.2em; }
.vd-copy p:last-child { margin-bottom: 0; }
.vd-source-subheading {
  font-family: var(--vd-font-body);
  font-size: 1.105rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vd-gold);
  margin: 0 0 22px;
}

/* =========================================================
   3. LAYOUT HELPERS
========================================================= */
.vd-container { max-width: var(--vd-container); margin: 0 auto; padding: 0 var(--vd-gutter); }

/* One section = one full screen, on any device. Height is pinned to the
   viewport (with a dvh upgrade for mobile browser chrome), scroll-snap
   locks scrolling to section boundaries, and content is centered in the
   fixed-height box rather than pushing the box taller. overflow:hidden is
   a deliberate last-resort safety net only — the real fix for content
   that's too tall for a given screen is the vh-based spacing below, which
   shrinks automatically on shorter viewports. */
.vd-section {
  height: 100vh;
  height: 100dvh;
  padding: clamp(16px, 5vh, 90px) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}
.vd-section--alt { background: var(--vd-black-soft); }
main section[id] { scroll-margin-top: 0; }
/* On mobile the header is now always visible and solid (see HEADER
   section), overlaying the top ~97px of the viewport. scroll-margin-top:0
   means a menu tap / anchor jump lands each section's top edge — and so
   its heading — flush with the viewport top, directly underneath that
   fixed bar, hidden from view. Push the landing spot down by the header's
   height (+ a little breathing room) so the heading clears it. */
@media (max-width: 780px) {
  main section[id] { scroll-margin-top: 97px; }
}
/* Per-section fine-tuning of the above, mobile only. Every section lands
   right at the top, just clear of the fixed logo/header (~97px) — plain,
   uniform, no section borrowing space from whatever comes before it.
   #id selectors outrank the attribute selector above regardless of
   source order, so this can stay right next to it. */
@media (max-width: 780px) {
  #home { scroll-margin-top: 97px; }
  /* Was 97px, left over from before the mobile header was shrunk down to
     ~47px tall. The section's own padding-top (50px, further down in
     this file) already provides most of the real clearance the heading
     needs above the header — scroll-margin-top only needs a small
     buffer on top of that, not a second full offset stacked on it (97px
     stacked with the 50px padding put the heading ~140px down, a much
     bigger gap below the header than actually needed). 10px is enough
     buffer while landing the heading noticeably higher/closer to the
     header on a menu tap. */
  #our-story { scroll-margin-top: 10px; }
  /* Was 87px; reduced ~40px per request so a menu tap on "Collection"
     scrolls further down (less scroll-margin = deeper final scroll
     position), landing past the tail end of the previous section
     instead of leaving its bottom edge visible under the header. */
  #collection { scroll-margin-top: 47px; }
  /* Was 97px, then 57px. After removing the eyebrow line above (see the
     ".vd-source-section .vd-eyebrow { display:none }" rule further down),
     a menu tap still landed with ~135px of dead space above the heading —
     the section's own internal layout (its container is bottom-anchored
     via margin-top:auto, see ".vd-source-section > .vd-container") leaves
     that much empty flex space above its content on this viewport, and
     scroll-margin-top only shifts the whole section as one block, so a
     positive value can't remove space that lives *inside* the section.
     A negative value scrolls further than the section's own top edge,
     which tucks that dead space (plus the now-hidden divider) behind the
     fixed header instead — the heading becomes the first visible thing,
     landing right at the header's bottom edge (~47px) with no gap. */
  #the-source { scroll-margin-top: -11px; }
  /* Per follow-up screenshot: -40px landed the heading flush against the
     header with no breathing room at all. Nudged 25px lower (less
     negative) so there's a small comfortable gap between the header and
     the heading instead of them touching. Then nudged another 4px lower
     still per follow-up request: -15px → -11px. */
  /* Was 87px; same fix as Collection above — reduced ~40px so a menu tap
     on "Where Vidian Belongs" scrolls far enough that the previous
     section's (The Source) tail end no longer shows under the header. */
  #where-vidian-belongs { scroll-margin-top: 47px; }
  /* Was 87px; same fix as Collection/Where Vidian Belongs above — reduced
     ~40px so a menu tap on "Philosophy" scrolls far enough that the
     previous section's (Where Vidian Belongs) tail end no longer shows
     under the header. Then reduced a further ~15px per follow-up
     request, scrolling slightly deeper still. Then reduced another 10px
     so the closing tagline ("Purity Is Our Origin. Luxury Is Our
     Destination.") at the bottom of the section also fits on screen
     after the jump, not just the heading. */
  #philosophy { scroll-margin-top: 22px; }
  /* Was 97px, then 47px. At 47px, the section's centered content (height
     745px inside an 844px-tall section, ~49px of slack split evenly above
     and below at natural scroll-snap rest) got pushed down by the full
     47px, eating almost all of that bottom slack — the "Send Your
     Enquiry" button ended up just 2-3px above the viewport's bottom edge,
     effectively clipped on a menu tap even though it displays fine on a
     normal scroll-snap stop. Reduced to 15px — enough to still clear the
     header above the eyebrow (~17px buffer) while leaving the button a
     comfortable ~34px of breathing room below. */
  #contact { scroll-margin-top: -50px; }
  /* Per follow-up reference screenshot: the request changed from "give the
     eyebrow clearance" to "skip the eyebrow entirely" — land the jump with
     the "Let's Create Something Exceptional." heading as the first visible
     thing (no eyebrow, no divider above it) and the button fully visible
     with generous room at the bottom. Same negative-scroll-margin technique
     used for The Source above: a negative value scrolls past the section's
     own top edge, tucking the eyebrow + divider (~95px of natural-scroll
     offset) behind the fixed header instead of leaving them peeking out. */
}
/* Mobile only — The Source's body copy is split into two <p> paragraphs
   (see front-page.php / vidian_source_text: "...in perfect balance." /
   "To preserve this natural purity, ..."), which renders with a visible
   paragraph gap between them. Removing that break here so the two read as
   one continuous flow of text instead of two separate paragraphs —
   display:inline turns each <p> into a run of inline text with no forced
   line break before/after it, and the ::after rule adds back a normal
   word-space between them since the markup itself has no whitespace
   between the two <p> tags (they're echoed back-to-back in the PHP loop). */
@media (max-width: 780px) {
  .vd-source-section .vd-copy p { display: inline; }
  .vd-source-section .vd-copy p:first-of-type::after { content: " "; }
}
/* Mobile only — remove The Source's top "◇ THE SOURCE" eyebrow line.
   It's a normal block box in the vertical stack (divider → heading →
   subheading → divider → copy), so simply hiding it closes the gap on its
   own — everything below shifts up into its place with no extra margin
   adjustment needed. Scoped to .vd-source-section only so every other
   section's eyebrow (Collection, Contact, Philosophy, etc.) is untouched. */
@media (max-width: 780px) {
  .vd-source-section .vd-eyebrow { display: none; }
}
/* Mobile only — remove the small "─── ◇ ───" divider line between the
   subheading ("Of Vidian Premium Mineral Water.") and the body copy.
   There are two identical dividers in this section (one above the
   heading, one here) so the adjacent-sibling selector targets only this
   second one, right after .vd-source-subheading — the other stays. Same
   as the eyebrow above, hiding a normal block box closes the gap on its
   own with no extra margin needed. */
@media (max-width: 780px) {
  .vd-source-section .vd-source-subheading + .vd-divider { display: none; }
}
.vd-center { text-align: center; }
.vd-center-block { margin: 0 auto clamp(14px, 4vh, 40px); }
.vd-grid { display: grid; gap: 56px; }
@media (min-width: 860px) {
  .vd-grid--2 { grid-template-columns: 1fr 1fr; }
}

/* Our Story — full-section background photo, text sits on the darker left side */
.vd-our-story-section {
  position: relative;
  background-size: cover;
  background-position: center center;
  overflow: hidden;
}
.vd-our-story-scrim {
  position: absolute; inset: 0;
  background: transparent;
  z-index: 0;
}
.vd-our-story-section .vd-container { position: relative; z-index: 1; }
.vd-our-story-feature-row { width: 100%; padding-left: 56px; padding-right: 56px; }
#our-story .vd-feature-row { margin-top: clamp(14px, 3vh, 50px); padding-top: clamp(10px, 2vh, 30px); }

/* Collection — full-section background photo, text sits on the darker left side */
.vd-collection-section {
  position: relative;
  background-color: #000000;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
  overflow: hidden;
}
/* Full viewport width, whole photo intact (height auto keeps its
   aspect ratio). Positioned so the bottles line up beside the stacked
   750ml / 330ml specs (see "19. COLLECTION MOBILE" at the end of this
   file) instead of sitting below the button. */
@media (max-width: 780px) {
  .vd-collection-section {
    background-size: 160vw auto;
    background-position: center 28vh;
  }
}
.vd-collection-scrim {
  position: absolute; inset: 0;
  background: transparent;
  z-index: 0;
}
.vd-collection-section .vd-container { position: relative; z-index: 1; }

/* Thin black seam between Collection and The Source. */
.vd-section-divider {
  height: 10px;
  background: var(--vd-black);
}

/* The Source — full-section background video, scrubbed by scroll position
   (see main.js): it never autoplays, it simply advances frame-by-frame as
   the section moves through the viewport. Text sits on the darker left side. */
.vd-source-section {
  position: relative;
  background: var(--vd-black);
  overflow: hidden;
  padding-bottom: 0;
}
.vd-source-video {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  z-index: 0;
  pointer-events: none;
}
.vd-source-scrim {
  position: absolute; inset: 0;
  background: transparent;
  z-index: 0;
}
.vd-source-section .vd-container { position: relative; z-index: 1; }
/* Direct child only — .vd-source-feature-band also contains a nested
   .vd-container (for its gradient overlay) that must stay put. Pushing
   just this one down with margin-top:auto (a flex child of the section)
   moves the heading/copy block down to sit right above the icon band
   instead of centered near the top, with the band's own small margin-top
   below keeping the two close together. */
.vd-source-section > .vd-container { margin-top: auto; }
.vd-source-section .vd-copy { max-width: 860px; }
.vd-source-section h2,
.vd-source-section .vd-source-subheading,
.vd-source-section .vd-copy p {
  text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 1px 4px rgba(0,0,0,0.95);
}
.vd-source-section .vd-copy p { color: var(--vd-white); }
.vd-source-feature-band {
  position: relative;
  z-index: 1;
  margin-top: clamp(16px, 3vh, 40px);
  padding: clamp(16px, 3vh, 28px) 0 clamp(20px, 3.5vh, 34px);
}
.vd-source-feature-band .vd-container { position: relative; }
.vd-source-feature-band .vd-container::before {
  content: '';
  position: absolute;
  top: clamp(-28px, -3vh, -16px); bottom: clamp(-34px, -3.5vh, -20px);
  left: -100vw;
  right: -100vw;
  background: linear-gradient(to bottom, rgba(6,6,9,0.32) 0%, rgba(6,6,9,0.5) 40%, rgba(2,2,3,0.88) 100%);
  z-index: 0;
}
.vd-source-feature-band .vd-feature-row { position: relative; z-index: 1; }
.vd-source-section .vd-feature-row { border-top: none; margin-top: 0; padding-top: 0; }
.vd-source-section .vd-feature-label,
.vd-source-section .vd-feature-desc {
  text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,0.95);
}
.vd-source-section .vd-feature-label { font-weight: 700; }

/* Pull the left-aligned section copy closer to the viewport edge on wide
   screens, where the 1280px container's auto-centering otherwise leaves a
   large empty margin before the text starts. */
@media (min-width: 1300px) {
  .vd-our-story-section .vd-container,
  .vd-collection-section .vd-container,
  .vd-source-section .vd-container,
  .vd-contact-section .vd-container {
    margin-left: calc((100vw - 1280px) / 4);
    padding-left: 56px;
  }
}
.vd-source-section .vd-feature-icon { width: clamp(44px, 8vh, 92px); height: clamp(44px, 8vh, 92px); margin-bottom: clamp(8px, 2vh, 22px); }

/* =========================================================
   4. HEADER
========================================================= */
.vd-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 26px 0;
  background: transparent;
  transition: background 0.3s ease, padding 0.3s ease, transform 0.35s ease;
}
.vd-header.is-scrolled {
  background: transparent;
  padding: 16px 0;
}
.vd-header.is-hidden {
  transform: translateY(-100%);
}
/* On mobile the header/logo auto-hide (see main.js onScroll) fires on every
   scroll-snap jump between the full-height sections, so the logo keeps
   sliding away and snapping back — it reads as the page jerking/jumping
   rather than a smooth scroll. Keep the header pinned in place on mobile;
   the hide/show class still toggles harmlessly, it's just not rendered. */
@media (max-width: 780px) {
  .vd-header.is-hidden {
    transform: none;
  }
}
/* On mobile the header sits directly over whatever photo/video background
   the current section has (hero, Our Story, The Source, ...), so a
   transparent bar makes the logo and menu links hard to read once the
   underlying image is bright. Give it a solid black bar on mobile instead
   — same at rest and once scrolled, so there's no visible color change. */
@media (max-width: 780px) {
  .vd-header,
  .vd-header.is-scrolled {
    background: var(--vd-black);
  }
}
.vd-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  width: 100%;
  padding: 0 28px;
}
.vd-logo { display: flex; align-items: center; gap: 12px; font-family: var(--vd-font-display); font-size: 1.82rem; letter-spacing: 0.1em; color: var(--vd-white); }
.vd-logo svg { height: 30px; width: auto; color: var(--vd-gold); }

.vd-nav { flex: 1 1 auto; }
.vd-nav ul { display: flex; justify-content: space-between; gap: 30px; width: 100%; }
.vd-nav a {
  font-size: 1.04rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--vd-white); padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease; white-space: nowrap;
}
.vd-nav a:hover, .vd-nav .is-active > a { color: var(--vd-gold); border-color: var(--vd-gold); }

.vd-menu-toggle {
  display: none; background: none; border: 1px solid var(--vd-line);
  width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--vd-gold);
}
@media (max-width: 1340px) {
  .vd-nav { position: fixed; inset: 0; background: var(--vd-black); display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateX(100%); transition: transform 0.4s ease; }
  .vd-nav.is-open { transform: translateX(0); }
  .vd-nav ul { flex-direction: column; align-items: center; gap: 26px; }
  .vd-menu-toggle { display: flex; }
}

/* =========================================================
   5. BUTTONS
========================================================= */
.vd-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 34px; border: 1px solid var(--vd-gold); color: var(--vd-gold-light);
  font-size: 0.99rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--vd-black); transition: background 0.3s ease, color 0.3s ease;
}
.vd-btn:hover { background: var(--vd-black-elev); border-color: var(--vd-gold-light); }
.vd-btn--solid { background: var(--vd-gold); color: var(--vd-black); }
.vd-btn--solid:hover { background: var(--vd-gold-light); }
.vd-btn--outline { background: transparent; border-color: var(--vd-gold); color: var(--vd-gold-light); }
.vd-btn--outline:hover { background: rgba(201,163,95,0.1); border-color: var(--vd-gold-light); }

/* =========================================================
   6. HERO — full-bleed photo (hero-bg.jpg already renders the gold
   VIDIAN wordmark, spotlight and floor; HTML only adds the slogan,
   divider and CTA under it).
========================================================= */
.vd-hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; overflow: hidden;
  background: #000000;
  padding-bottom: 12vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.vd-hero-visual {
  position: absolute; inset: 0;
  background-size: 100% auto;
  background-position: center top -60px;
  background-repeat: no-repeat;
  z-index: 0;
}
/* On tall/narrow phone screens, background-size:100% auto scales the
   image down to a small fraction of the much taller viewport, so the
   fixed -60px desktop offset leaves the light beam at the very top of
   the image starting underneath the fixed header/logo. 120px clears
   the mobile header's own height (~94-97px) plus a small gap, so the
   beam visibly starts below the logo instead of behind it. */
@media (max-width: 780px) {
  .vd-hero-visual {
    background-position: center 120px;
  }
}
/* Superseded by section 24 further down, which shortens the mobile
   header bar and therefore needs a smaller clearance value here — see
   that section's comment for why this is restated instead of edited
   in place (equal-specificity/source-order — later rule wins). */
/* On mobile, the base background-position (center center, cover) lands the
   diamond from the Our Story photo up near the intro paragraph, overlapping
   and fighting with that text. Zooming in and pushing it down + left moves
   it clear of the paragraph so it settles low in the section, near/behind
   the last feature item, fully in view instead of clipped at the right
   edge — vw/vh keep both the size (aspect-ratio-locked, vw on both axes)
   and the position responsive across phone widths and heights. */
@media (max-width: 780px) {
  .vd-our-story-section {
    background-size: 150vw 100vw;
    background-position: -50vw calc(89vh + 7px);
    background-repeat: no-repeat;
    /* 60px taller than the standard 100vh/100dvh section (see .vd-section)
       so overflow:hidden clips 60px lower — that extra strip is what
       reveals more of the diamond photo sitting at the bottom of the
       background image instead of cutting it off with the rest of the
       section. Comes after .vd-section in the file, so it wins the
       equal-specificity tie on height. */
    height: calc(100vh + 120px);
    height: calc(100lvh + 120px);
  }
}
.vd-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(7,7,10,0.25) 68%, rgba(7,7,10,0.55) 100%);
  z-index: 1;
}
.vd-hero-content { position: relative; z-index: 2; padding: 0 var(--vd-gutter); max-width: 800px; }
.vd-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; margin: -1px;
}
.vd-hero-slogan {
  max-width: 560px; margin: 0 auto 40px;
  font-size: clamp(1.43rem, 2.86vw, 1.82rem);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--vd-white);
}

/* =========================================================
   7. FRAMED PHOTO (Our Story / The Source side images)
========================================================= */
.vd-frame {
  position: relative;
  aspect-ratio: 4/5;
  border: 1px solid var(--vd-line);
  background: linear-gradient(160deg, #131217 0%, #0a090c 100%);
  overflow: hidden;
}
.vd-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease; }
.vd-frame:hover img, .vd-frame.is-visible img { transform: scale(1.03); }
.vd-corner { position: absolute; width: 22px; height: 22px; border-color: var(--vd-gold); border-style: solid; border-width: 0; z-index: 2; }
.vd-corner--tl { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.vd-corner--br { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }

/* Collection: plain foreground product photo (already framed by its
   own dark background from the source photography). */
.vd-photo { text-align: center; }
.vd-photo img { max-height: 600px; margin: 0 auto; }

/* =========================================================
   8. FEATURE ROWS (icon + label + description, 4 columns)
========================================================= */
.vd-feature-row {
  margin-top: clamp(16px, 4vh, 90px); padding-top: clamp(12px, 2.5vh, 56px); border-top: 1px solid var(--vd-line);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vh, 32px); text-align: center;
}
.vd-feature-icon { width: clamp(32px, 4.5vh, 44px); height: clamp(32px, 4.5vh, 44px); margin: 0 auto clamp(8px, 1.5vh, 18px); color: var(--vd-gold); }
.vd-feature-icon svg { width: 100%; height: 100%; }
.vd-feature-icon img { max-width: 100%; max-height: 100%; width: auto; margin: 0 auto; }
.vd-feature-label { font-size: 1.014rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vd-gold); margin-bottom: 10px; }
.vd-feature-desc { font-size: 1.17rem; margin: 0; }
@media (max-width: 980px) { .vd-feature-row { grid-template-columns: repeat(2,1fr); gap: clamp(20px, 4vh, 44px) 32px; } }
/* Below 560px, stacking icon-over-text in one column (as the 2-col grid
   would otherwise do at very tight widths) makes each section far taller
   than the screen. A left-icon horizontal row is just as readable and
   costs a fraction of the vertical space, which keeps the section fitting
   one viewport instead of forcing scroll/crop. */
@media (max-width: 560px) {
  .vd-feature-row {
    grid-template-columns: 1fr; gap: clamp(6px, 1.4vh, 14px);
    margin-top: clamp(8px, 2vh, 24px); padding-top: clamp(6px, 1.5vh, 14px);
  }
  /* Icon in col 1 spanning both rows, label + description stacked in col 2 —
     grid (not flex) is what actually lets the icon sit beside a two-line
     text stack instead of every child becoming its own column. */
  .vd-feature-item { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 1px; align-items: start; text-align: left; }
  .vd-feature-icon { grid-column: 1; grid-row: 1 / 3; margin: 2px 0 0; }
  .vd-feature-item .vd-feature-label { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .vd-feature-item .vd-feature-desc { grid-column: 2; grid-row: 2; font-size: 0.85rem; }
  .vd-feature-item .vd-feature-dash { display: none; }
  .vd-feature-label { font-size: 0.86rem; }
  .vd-feature-icon,
  .vd-source-section .vd-feature-icon { width: clamp(22px, 5vh, 32px); height: clamp(22px, 5vh, 32px); margin-bottom: 0; }
  .vd-source-feature-band { padding: clamp(8px, 1.5vh, 16px) 0 clamp(10px, 2vh, 20px); }
  /* The Source's icon+text feature rows (Water / Natural Origin / Diamond
     Filtration / Crystal Clarity) — tighten the vertical gap between them
     beyond the general .vd-feature-row gap above (was ~12px on a typical
     phone). Two classes on the selector outrank the single-class rule
     regardless of source order, so this wins without needing !important. */
  .vd-source-section .vd-feature-row { gap: 4px; }
  /* #our-story .vd-feature-row (id + class) outranks the plain-class rule
     above on specificity alone, media query or not — restate it here with
     matching specificity so the tighter mobile spacing actually wins. */
  #our-story .vd-feature-row { margin-top: clamp(8px, 2vh, 24px); padding-top: clamp(6px, 1.5vh, 14px); }
  .vd-our-story-feature-row { padding-left: var(--vd-gutter); padding-right: var(--vd-gutter); }
}
/* Mobile only — shift The Source's whole content block (heading/copy text
   AND the icon feature band below it) up by 25px. Both are bottom-anchored
   as one unit via ".vd-source-section > .vd-container { margin-top: auto }"
   — the feature band simply follows right after in normal flow, so the
   pair always moves together. Adding padding-bottom here eats into the
   same flex space that margin-top:auto pushes against, moving the entire
   bottom-anchored unit up without touching either element directly.
   Placed after the ".vd-source-section { padding-bottom: 0 }" rule up
   above (same specificity, single class) so this wins the cascade tie by
   source order — an earlier attempt at this same rule lost to that one. */
@media (max-width: 780px) {
  .vd-source-section { padding-bottom: 25px; }
}

/* Our Story / The Source feature rows — vertical dividers between columns + gold dash under each label */
.vd-our-story-section .vd-feature-item,
.vd-source-section .vd-feature-item { position: relative; }
.vd-our-story-section .vd-feature-dash,
.vd-source-section .vd-feature-dash { display: block; width: 28px; height: 1px; margin: 0 auto 14px; background: var(--vd-gold); opacity: 0.85; }
@media (min-width: 561px) {
  .vd-our-story-section .vd-feature-item:not(:last-child)::after,
  .vd-source-section .vd-feature-item:not(:last-child)::after {
    content: ''; position: absolute; top: 4px; bottom: 4px; right: -16px;
    width: 1px; background: var(--vd-line);
  }
}
@media (max-width: 980px) and (min-width: 561px) {
  .vd-our-story-section .vd-feature-item:nth-child(2n)::after,
  .vd-source-section .vd-feature-item:nth-child(2n)::after { display: none; }
}

/* =========================================================
   9. COLLECTION
========================================================= */
.vd-spec-row { display: flex; gap: 40px; margin: 26px 0 34px; padding-top: 22px; position: relative; }
.vd-spec-row::before { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 2px; background: linear-gradient(90deg, var(--vd-gold), transparent); }
.vd-spec-col { padding-right: 40px; border-right: 1px solid var(--vd-line); }
.vd-spec-col:last-child { border-right: none; padding-right: 0; }
.vd-spec-size {
  font-family: var(--vd-font-display); font-size: 2.6rem; color: var(--vd-gold); margin-bottom: 8px;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.vd-spec-size span { font-size: 2.6rem; }
.vd-spec-col p { margin: 0; font-size: 1.196rem; }

/* =========================================================
   10. WHERE VIDIAN BELONGS
========================================================= */
/* The heading, the card grid and the tagline all live inside one
   .vd-container instead of being separate flex children of the
   section — turning the container itself into a full-height flex
   column lets the tagline get pushed down to the bottom edge (via
   margin-top:auto) while the grid above it is free to grow. */
/* Wider than the standard 1280px container — the card grid was still
   width-limited by the container even after the height cap was raised,
   so this gives the images more room to grow on large screens. The
   eyebrow/heading block and tagline both carry their own tighter
   max-width already, so they stay centered instead of stretching. */
/* Solid pure black instead of the ".vd-section--alt" alternate shade it
   shares with Collection/Contact (--vd-black-soft, #101013 — used
   elsewhere for a subtle alternating rhythm between sections). Those two
   other sections have their own photo/video covering that color anyway,
   so it only ever really showed here. Overridden with an ID selector
   (rather than editing .vd-section--alt itself) so Collection and
   Contact keep the shared alt color exactly as before — this rule only
   touches this one section, everywhere (desktop and mobile alike, not
   just the small-screen fixes elsewhere in this file). */
#where-vidian-belongs { background: var(--vd-black); }
#where-vidian-belongs .vd-container { height: 100%; display: flex; flex-direction: column; max-width: 1600px; }
#where-vidian-belongs .vd-tagline-row { margin-top: auto; padding-top: clamp(16px, 3vh, 40px); }
.vd-belongs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2.5vh, 24px); }
.vd-belongs-card { text-align: center; transition: transform 0.3s ease; }
.vd-belongs-card:hover { transform: translateY(-6px); }
.vd-belongs-card-media {
  /* Matches the new photos' own ~0.69 (700x1010ish) aspect ratio, so
     object-fit:contain below never has to letterbox or crop them. */
  aspect-ratio: 0.69; border: 1px solid var(--vd-line);
  overflow: hidden;
  transition: border-color 0.3s ease;
  /* Bigger still — pushed close to the section's own edges now that
     the tagline below is pinned to the bottom independently instead
     of trailing directly after the grid. Media-query tiers further
     down cap this back on shorter/narrower screens so it keeps
     fitting one viewport there. */
  max-height: 62vh;
  margin: 0 auto;
}
.vd-belongs-card-media img { width: 100%; height: 100%; object-fit: contain; object-position: center center; }
.vd-belongs-card:hover .vd-belongs-card-media { border-color: var(--vd-gold); }
.vd-belongs-card-label { margin-top: clamp(8px, 1.5vh, 18px); font-size: 0.988rem; letter-spacing: 0.12em; text-transform: uppercase; }
.vd-belongs-card-dash { display: block; width: 28px; height: 1px; margin: 12px auto 0; background: var(--vd-gold); opacity: 0.85; }
/* Below 900px the grid is 2 columns (2 rows of cards), and every label is
   now forced to 2 lines for a consistent look — together that's taller
   than the single-row layout, so the card photos need to give back a
   little height to keep still fitting one viewport on tablets. */
@media (max-width: 900px) { .vd-belongs-grid { grid-template-columns: repeat(2,1fr); } .vd-belongs-card-media { max-height: 22vh; } }

/* =========================================================
   11. PHILOSOPHY — cropped from the brand's own mockup art (marble +
   light-beam texture, and the four gold icon renders), with a dark
   scrim so the text stays crisp over the busier photographic backdrop.
========================================================= */
.vd-philosophy-section {
  position: relative;
  background-size: cover;
  background-position: top center;
  overflow: hidden;
}
.vd-philosophy-scrim {
  position: absolute; inset: 0;
  background: rgba(7, 7, 10, 0.72);
  z-index: 0;
}
.vd-philosophy-section .vd-container { position: relative; z-index: 1; }
.vd-philosophy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 3vh, 32px); text-align: center; }
.vd-philosophy-icon { width: clamp(52px, 7vh, 76px); height: clamp(42px, 5.5vh, 62px); margin: 0 auto clamp(8px, 1.8vh, 20px); display: flex; align-items: center; justify-content: center; }
.vd-philosophy-icon img { max-width: 100%; max-height: 100%; width: auto; margin: 0; }
.vd-philosophy-subtitle { font-style: italic; color: var(--vd-gold); font-size: 1.3rem; margin: 4px 0 12px; font-family: var(--vd-font-display); }
.vd-philosophy-desc { font-size: 1.144rem; margin: 0; }
@media (max-width: 980px) { .vd-philosophy-grid { grid-template-columns: repeat(2,1fr); gap: clamp(20px, 4vh, 48px) 32px; } }

/* =========================================================
   12. TAGLINE ROW
========================================================= */
.vd-tagline-row { margin-top: clamp(16px, 3.5vh, 72px); text-align: center; }
.vd-tagline { font-family: var(--vd-font-display); font-size: clamp(1.69rem, 3.12vw, 2.21rem); text-transform: uppercase; max-width: 760px; margin: 0 auto; color: var(--vd-white); }

/* =========================================================
   13. CONTACT — looping muted video fills the whole section only;
   it stays confined to this section (does not bleed into the
   footer below — the footer sits on its own solid black background).
========================================================= */
.vd-contact-section { position: relative; overflow: hidden; }
.vd-contact-video {
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
  pointer-events: none;
}
/* On a narrow mobile crop, object-fit:cover scales this landscape video
   up by height, and centering it (X:50%) lands squarely on the empty
   black water on the video's left half — the bottle itself, which sits
   well right-of-center in the source footage, falls completely outside
   the visible window. Shifting X toward the right edge slides the crop
   window over to where the bottle actually is; a full 100% swung the
   bottle all the way over to the LEFT edge of the screen (this is a
   crop-window move, so it runs opposite to where the number points —
   the more we reveal the source's right side, the further left the
   subject itself ends up sitting once caught). 75% — halfway back
   toward center from that — leaves it framed nearer the right edge
   instead. */
@media (max-width: 780px) {
  .vd-contact-video {
    object-position: 75% 40%;
  }
}
/* Mobile only — the section's base layout (see ".vd-section") centers its
   content vertically, which splits whatever extra room is left over
   evenly above AND below it. With this section's content now fairly
   short, that meant ~77px of empty space sitting unused above the
   eyebrow while the "Send Your Enquiry" button below had that same
   ~77px — not much margin for error once a real phone's browser chrome
   (address bar, etc.) eats into the actually-visible height, which this
   sandbox's headless testing can't reproduce. Switching to top-aligned
   with a small fixed offset (just enough to clear the fixed header)
   hands ALL of that leftover room to the bottom instead, roughly
   doubling the button's safety margin. */
@media (max-width: 780px) {
  .vd-contact-section {
    justify-content: flex-start;
    padding-top: 57px;
  }
}
.vd-contact-scrim {
  position: absolute; inset: 0;
  background: transparent;
  z-index: 1;
}
.vd-contact-section .vd-container { position: relative; z-index: 2; }
/* The "Whether you represent..." intro paragraph carries an inline
   max-width:460px (sized for the two-column desktop layout) — on mobile
   the single narrower column already made it wrap short of that cap, so
   tightening it further (needs !important to beat the inline style)
   wraps it onto 5 lines, matching the tighter/taller look asked for. */
@media (max-width: 780px) {
  #contact .vd-lede {
    max-width: 260px !important;
  }
}
.vd-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.vd-field { position: relative; margin-bottom: 30px; display: flex; align-items: flex-end; gap: 14px; }
.vd-field .vd-icon { color: var(--vd-gold); flex-shrink: 0; width: 20px; }
.vd-field input, .vd-field textarea {
  flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--vd-line);
  color: var(--vd-white); font-size: 1.235rem; letter-spacing: 0.05em; padding: 8px 0; outline: none;
}
.vd-field input::placeholder, .vd-field textarea::placeholder { color: var(--vd-grey); opacity: 0.8; }
.vd-field input:focus, .vd-field textarea:focus { border-color: var(--vd-gold); }
.vd-field textarea { resize: vertical; min-height: 70px; }
.vd-contact-direct { display: flex; align-items: center; gap: 18px; margin-top: 40px; }
.vd-contact-direct .vd-diamond-icon { width: 52px; height: 52px; border: 1px solid var(--vd-gold); transform: rotate(45deg); display: flex; align-items: center; justify-content: center; }
.vd-contact-direct .vd-diamond-icon span { transform: rotate(-45deg); color: var(--vd-gold); }
.vd-contact-direct .vd-label { font-size: 0.962rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--vd-grey); margin-bottom: 4px; }
.vd-contact-direct .vd-email { font-family: var(--vd-font-display); font-size: 1.625rem; }
.vd-form-status { margin-top: 16px; font-size: 1.105rem; }
.vd-form-status.success { color: var(--vd-gold-light); }
.vd-form-status.error { color: #d9776a; }
@media (max-width: 860px) { .vd-contact-grid { grid-template-columns: 1fr; } }
/* Mobile only — once the grid above stacks to a single column, its 64px
   "gap" becomes vertical space between the two stacked blocks: the direct-
   contact info (ending in "info@vidian.sk") and the form (starting with
   the Name field). Shrunk to the minimum that still reads as a deliberate
   break rather than the fields running into the email above them. */
@media (max-width: 780px) {
  .vd-contact-grid { gap: 8px; }
}

/* =========================================================
   13b. GENERIC ENTRY CONTENT (index.php fallback template —
   single posts, archives, search results, 404)
========================================================= */
.vd-entry-content { max-width: 760px; margin: 0 auto; }
.vd-entry-content p { margin: 0 0 1.3em; }
.vd-entry-content a { color: var(--vd-gold); border-bottom: 1px solid var(--vd-line); }
.vd-entry-content img { border: 1px solid var(--vd-line); margin: 1.5em 0; }
.vd-entry .vd-entry-content { margin-bottom: 3em; }
.nav-links { display: flex; justify-content: space-between; max-width: 760px; margin: 0 auto; font-size: 1.105rem; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-links a { color: var(--vd-gold); }

/* =========================================================
   14. FOOTER — sits below the Contact video on its own solid black
   background (the video no longer bleeds into it).
========================================================= */
.vd-footer {
  position: relative;
  border-top: 1px solid var(--vd-gold);
  padding: 34px 0;
  background: #000000;
}
.vd-footer-scrim {
  position: absolute; inset: 0;
  background: transparent;
  z-index: 0;
}
.vd-footer-inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px;
}
.vd-footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--vd-font-display); font-size: 1.495rem; letter-spacing: 0.08em;
  padding-right: 32px; border-right: 1px solid var(--vd-line);
}
.vd-footer-brand svg { color: var(--vd-gold); height: 22px; width: auto; }
.vd-footer-features { display: flex; flex-wrap: wrap; gap: 32px; flex: 1; }
.vd-footer-feature {
  display: flex; align-items: center; gap: 12px;
  padding-right: 32px; border-right: 1px solid var(--vd-line);
  font-size: 0.936rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--vd-white);
  line-height: 1.4;
}
.vd-footer-feature:last-child { border-right: none; padding-right: 0; }
.vd-footer-feature .vd-icon { width: 22px; height: 22px; color: var(--vd-gold); flex-shrink: 0; }
.vd-footer-feature .vd-icon svg { width: 100%; height: 100%; }
.vd-footer-copy { font-size: 0.936rem; color: var(--vd-grey); text-align: right; letter-spacing: 0.04em; }
.vd-footer-copy .vd-gold-text { display: block; margin-top: 2px; }
@media (max-width: 900px) {
  .vd-footer-brand, .vd-footer-feature { border-right: none; padding-right: 0; }
  .vd-footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .vd-footer-copy { text-align: left; }
}
/* On mobile: push the footer further down from the Contact video above it
   and give it more room (taller padding + bigger gaps) so the icon+text
   feature rows can stack one under another instead of wrapping into a
   cramped multi-column flex row. */
@media (max-width: 780px) {
  .vd-footer {
    margin-top: 48px;
    padding: 44px 0 36px;
  }
  .vd-footer-features {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
}

/* =========================================================
   14b. RESPONSIVE HEIGHT COMPRESSION — every section is a fixed 100vh
   box (see .vd-section above), so on shorter screens the content itself
   (not just the padding around it) has to shrink to keep fitting without
   scrolling or clipping. These tiers scale type, line-height and internal
   gaps down progressively as viewport height shrinks; nothing here removes
   or truncates content, it only makes it smaller. Width-based tweaks
   inside each tier handle phones in portrait, where a narrow column also
   inflates wrapped-text height independent of the screen's raw height.
========================================================= */
@media (max-height: 940px) {
  .vd-copy p { margin-bottom: 1em; }
  .vd-tagline-row { margin-top: clamp(14px, 3vh, 56px); }
}
/* .vd-belongs-card-media's cap in this tier and the next one (700px) was
   originally quite conservative (26vh / 18vh) — on a common small-laptop
   screen (around 1280–1440px wide, ~720–800px tall), that leaves the
   Where Vidian Belongs photos looking noticeably small with a lot of
   unused vertical space above/below them. Chrome's own UI chrome
   (tabs + toolbar + bookmarks bar) eats more of the screen than
   Firefox's or Opera's by default, so the *page's actual viewport height*
   on the same physical display crosses this breakpoint in Chrome when it
   doesn't in the other browsers — which is why the photos read as
   "smaller in Chrome" even though it's really just a shorter viewport
   tripping a size tier that was too aggressive to begin with. Raised
   both values; verified no overflow reappears down to 1280×720. */
@media (max-height: 820px) {
  h2 { font-size: clamp(2.15rem, 4.3vw, 3.4rem); }
  h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
  .vd-lede { font-size: 1.17rem; }
  .vd-copy p { margin-bottom: 0.85em; }
  .vd-eyebrow { margin-bottom: 12px; }
  .vd-divider { margin-bottom: 16px; }
  .vd-source-subheading { margin-bottom: 14px; }
  .vd-feature-desc { font-size: 1.05rem; }
  .vd-philosophy-desc { font-size: 1.02rem; }
  .vd-philosophy-subtitle { margin: 3px 0 8px; }
  .vd-belongs-card-media { max-height: 42vh; }
  .vd-hero-slogan { margin-bottom: 26px; }
  .vd-spec-row { margin: 18px 0 24px; padding-top: 16px; }
  .vd-field { margin-bottom: 22px; }
  .vd-contact-direct { margin-top: 26px; }
}
@media (max-height: 700px) {
  body { font-size: 17.5px; line-height: 1.5; }
  h1 { font-size: clamp(2.5rem, 6.5vw, 4.3rem); }
  h2 { font-size: clamp(1.86rem, 3.7vw, 2.6rem); }
  h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }
  .vd-lede { font-size: 1.02rem; }
  .vd-copy p { margin-bottom: 0.6em; }
  .vd-eyebrow { margin-bottom: 8px; font-size: 0.88rem; }
  .vd-divider { margin-bottom: 10px; width: 150px; }
  .vd-source-subheading { margin-bottom: 10px; }
  .vd-feature-row { margin-top: clamp(8px, 2vh, 24px); padding-top: clamp(6px, 1.5vh, 16px); gap: clamp(8px, 1.5vh, 18px); }
  .vd-feature-icon { width: clamp(24px, 4vh, 36px); height: clamp(24px, 4vh, 36px); margin-bottom: 6px; }
  .vd-feature-label { font-size: 0.88rem; margin-bottom: 4px; }
  .vd-feature-desc { font-size: 0.9rem; }
  .vd-source-section .vd-feature-icon { width: clamp(30px, 5vh, 50px); height: clamp(30px, 5vh, 50px); margin-bottom: 6px; }
  .vd-philosophy-grid { gap: clamp(10px, 2vh, 22px); }
  .vd-philosophy-icon { width: clamp(34px, 5vh, 48px); height: clamp(28px, 4vh, 38px); margin-bottom: 6px; }
  .vd-philosophy-desc { font-size: 0.86rem; }
  .vd-philosophy-subtitle { font-size: 1.02rem; margin: 2px 0 6px; }
  .vd-tagline-row { margin-top: clamp(8px, 2vh, 26px); }
  .vd-tagline { font-size: clamp(1.3rem, 2.7vw, 1.7rem); }
  .vd-belongs-grid { gap: clamp(8px, 1.8vh, 16px); }
  .vd-belongs-card-media { max-height: 34vh; }
  .vd-belongs-card-label { font-size: 0.85rem; margin-top: 5px; }
  .vd-spec-row { margin: 12px 0 16px; padding-top: 10px; gap: 24px; }
  .vd-spec-size, .vd-spec-size span { font-size: 2.1rem; }
  .vd-spec-col p { font-size: 1rem; }
  .vd-field { margin-bottom: 14px; }
  .vd-field textarea { min-height: 46px; }
  .vd-contact-direct { margin-top: 14px; }
}
@media (max-height: 560px) {
  body { font-size: 15.5px; line-height: 1.4; }
  h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); }
  h2 { font-size: clamp(1.56rem, 3.4vw, 2.1rem); }
  h3 { font-size: clamp(1.1rem, 1.9vw, 1.4rem); }
  .vd-lede { font-size: 0.92rem; }
  .vd-copy p { margin-bottom: 0.45em; }
  .vd-eyebrow { margin-bottom: 6px; font-size: 0.8rem; }
  .vd-divider { margin-bottom: 8px; width: 120px; }
  .vd-feature-row { margin-top: 6px; padding-top: 6px; gap: 8px; }
  .vd-philosophy-grid { gap: 8px; }
  .vd-belongs-card-media { max-height: 14vh; }
  .vd-tagline { font-size: clamp(1.1rem, 2.4vw, 1.4rem); }
  .vd-field { margin-bottom: 10px; }
}
/* Narrow phones: a ~340px-wide column wraps full-size body copy into far
   more lines than the same text takes on a wider screen, independent of
   how tall the screen is — so this needs a width trigger, not just the
   max-height tiers above. Placed after every base component rule (Where
   Vidian Belongs / Philosophy / Contact all live earlier in the file) so
   these overrides actually win the cascade instead of being clobbered by
   an unconditional rule of equal specificity declared later on. */
@media (max-width: 480px) {
  body { font-size: 16.5px; line-height: 1.55; }
  h1 { font-size: clamp(2.34rem, 9vw, 3.9rem); }
  h2 { font-size: clamp(1.95rem, 7.5vw, 2.86rem); }
  h3 { font-size: clamp(1.3rem, 5vw, 1.69rem); margin-bottom: 0.3em; }
  .vd-lede { font-size: 1.02rem; }
  .vd-copy p { margin-bottom: 0.55em; }
  .vd-eyebrow { font-size: 0.85rem; margin-bottom: 10px; }
  .vd-divider { margin-bottom: 12px; width: 130px; }
  .vd-source-subheading { font-size: 0.94rem; margin-bottom: 10px; }
  .vd-tagline { font-size: clamp(1.2rem, 5.5vw, 1.56rem); }
  .vd-tagline-row { margin-top: clamp(10px, 2.5vh, 30px); }
  .vd-belongs-grid { gap: 10px 16px; }
  .vd-belongs-card-media { max-height: 22vh; }
  .vd-belongs-card-label { font-size: 0.82rem; margin-top: 5px; }
  .vd-philosophy-grid { gap: 12px 18px; }
  .vd-philosophy-icon { width: clamp(30px, 5vh, 44px); height: clamp(26px, 4vh, 36px); margin-bottom: 4px; }
  .vd-philosophy-subtitle { font-size: 0.96rem; margin: 2px 0 5px; }
  .vd-philosophy-desc { font-size: 0.85rem; }
  /* Contact form: labels/placeholders stay legible, but the generous
     desktop spacing between fields is what pushes this below the fold. */
  .vd-field { margin-bottom: 14px; }
  .vd-field input, .vd-field textarea { font-size: 1rem; }
  .vd-field textarea { min-height: 44px; }
  .vd-contact-direct { margin-top: 16px; gap: 12px; }
  .vd-contact-direct .vd-diamond-icon { width: 40px; height: 40px; }
  .vd-contact-direct .vd-email { font-size: 1.2rem; }
}
@media (max-width: 480px) and (max-height: 760px) {
  body { font-size: 14.5px; line-height: 1.42; }
  .vd-copy p { margin-bottom: 0.4em; }
  .vd-center-block { margin-bottom: clamp(10px, 3vh, 20px); }
  .vd-philosophy-grid { gap: 8px 14px; }
  .vd-philosophy-icon { width: clamp(24px, 4vh, 32px); height: clamp(20px, 3.2vh, 26px); margin-bottom: 2px; }
  .vd-philosophy-subtitle { font-size: 0.86rem; margin: 1px 0 3px; }
  .vd-philosophy-desc { font-size: 0.76rem; }
  .vd-tagline-row { margin-top: clamp(6px, 1.5vh, 16px); }
  .vd-tagline { font-size: clamp(1.05rem, 4.5vw, 1.3rem); }
  .vd-lede { font-size: 0.9rem; margin-bottom: 0.4em; }
  .vd-field { margin-bottom: 8px; }
  .vd-field textarea { min-height: 34px; }
  .vd-contact-direct { margin-top: 8px; }
}
@media (max-width: 480px) and (max-height: 760px) {
  .vd-belongs-card-media { max-height: 19vh; }
  .vd-philosophy-grid { gap: 10px 20px; }
  .vd-philosophy-icon { width: clamp(30px, 4.5vh, 40px); height: clamp(26px, 3.8vh, 32px); margin-bottom: 4px; }
  .vd-philosophy-desc { font-size: 0.82rem; }
  .vd-philosophy-subtitle { font-size: 0.94rem; margin: 2px 0 4px; }
}

/* =========================================================
   15. SCROLL-REVEAL (progressive enhancement — see main.js)
========================================================= */
.vd-reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease; }
.vd-reveal.is-visible { opacity: 1; transform: translateY(0); filter: blur(0); }
.vd-reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.vd-reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }
.vd-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.vd-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.vd-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.24s; }
.vd-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .vd-reveal, .vd-reveal-stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* On mobile, each section is already a full 100vh scroll-snap "slide" —
   staggering its content in with the fade/blur/translate reveal as it
   scrolls into place reads as laggy, torn-looking rendering rather than a
   polished effect. Show everything already in its final state on mobile,
   same as the reduced-motion fallback above, so scrolling feels instant. */
@media (max-width: 780px) {
  .vd-reveal, .vd-reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* =========================================================
   16. SCROLL-SNAP MOBILE OVERRIDE
   Placed last on purpose: .vd-section and .vd-hero (declared earlier in
   this file, in "3. LAYOUT HELPERS" and "6. HERO") both set
   scroll-snap-stop: always at the same specificity as this rule. CSS
   breaks same-specificity ties by source order, so this override has to
   come after them (see also the html scroll-snap-type mobile override up
   in "0. RESET", which isn't shadowed by anything later and could stay
   where it was declared).
========================================================= */
@media (max-width: 780px) {
  .vd-section, .vd-hero {
    scroll-snap-stop: normal;
  }
}

/* =========================================================
   17. MOBILE VIEWPORT-HEIGHT UNIT OVERRIDE
   .vd-section and .vd-hero use height:100vh as a fallback, then
   100dvh (dynamic viewport height) as the enhancement. dvh is great for
   sizing correctly once the mobile browser's address bar has settled —
   but it also recomputes continuously WHILE it's expanding/collapsing
   during a scroll gesture, which forces the browser to re-layout these
   full-height sections mid-scroll. That shows up as a snag/jerk right
   as a section's edge crosses the viewport boundary — exactly the
   Home→Our Story and Contact→footer transitions reported as "sekne".
   A static unit fixes that (no more mid-scroll recalculation) — but
   svh (small viewport height, pinned to the address-bar-EXPANDED
   state) turned out to be too short: every section on this page was
   originally tuned against 100dvh once the address bar has already
   collapsed from scrolling (which is also what a plain headless
   browser — no toolbar at all — always renders), so switching to the
   shorter svh clipped content that depends on the full height: the
   Our Story diamond (revealed via the extra overflow: hidden headroom
   below) and the Contact section's send button both got cut off.
   lvh (large viewport height, pinned to the address-bar-COLLAPSED
   state) is the fix: still static like svh — so scrolling stays
   smooth — but tall enough to match the height everything here was
   actually tuned against. Placed last so it wins the
   equal-specificity/source-order tie against the 100dvh declared
   earlier in "3. LAYOUT HELPERS" and "6. HERO", but only inside this
   mobile media query. */
@media (max-width: 780px) {
  .vd-section, .vd-hero {
    height: 100lvh;
  }
}
/* .vd-our-story-section (in "6. HERO") also sets height: calc(100lvh +
   120px) on this same element — it's an equal-specificity class selector
   (0,1,0) just like the .vd-section rule directly above, so without this
   restatement the two would tie on source order and THIS block, being
   later in the file, would win and silently erase Our Story's extra
   120px of headroom (the exact strip that keeps the diamond photo from
   getting clipped by overflow:hidden). Repeating it here, last, keeps
   Our Story's taller height intact. */
@media (max-width: 780px) {
  .vd-our-story-section {
    height: calc(100vh + 120px);
    height: calc(100lvh + 120px);
  }
}

/* =========================================================
   18. MOBILE MENU-JUMP CONTENT POSITION — OUR STORY / COLLECTION
   .vd-section centers its content vertically (justify-content:center)
   inside a full-height box. That's fine when the content roughly fills
   the box, but Our Story and Collection both have comparatively short
   content — so centering leaves a large empty strip above the heading.
   Landing on these sections from the mobile menu (scroll-margin-top
   puts the section's own TOP right under the header) makes that empty
   strip read as "the content is too low, floating away from the logo"
   — scroll-margin-top only controls where the box starts, not where
   flex-centered content sits inside it. Switching to flex-start pins
   the heading right under the section's own top padding instead, so it
   lands directly under the header on a menu click. Where Vidian Belongs
   and Philosophy aren't included here: their content (image grid /
   4-item grid) is tall enough to already sit close to the top when
   centered, so they don't show this gap. */
@media (max-width: 780px) {
  .vd-our-story-section,
  .vd-collection-section {
    justify-content: flex-start;
  }
}

/* =========================================================
   19. COLLECTION MOBILE — INTRO TEXT WRAP + SPEC SIZE
========================================================= */
/* Wraps the "Two sizes. One standard of excellence..." intro onto 5
   lines (narrower column) instead of the 3 it wraps to by default. */
@media (max-width: 780px) {
  #collection .vd-lede {
    max-width: 180px;
  }
}
/* .vd-spec-size already has a max-height:700px tier further up (in
   "14b. RESPONSIVE HEIGHT COMPRESSION") that shrinks it on short
   screens only — this is a plain width-based mobile rule instead, so
   it applies uniformly regardless of device height. Placed last so it
   wins that tier's font-size on phones short enough to trigger both.
   1.3rem is half of the 2.6rem desktop base size. */
@media (max-width: 780px) {
  .vd-spec-size,
  .vd-spec-size span {
    font-size: 1.3rem;
  }
}
/* 750ml / 330ml stacked one above the other instead of side by side —
   the vertical divider (border-right) only made sense in a row, so it
   becomes a horizontal rule (border-bottom) between the stacked items
   instead. */
@media (max-width: 780px) {
  .vd-spec-row {
    flex-direction: column;
    gap: 14px;
  }
  .vd-spec-col {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--vd-line);
    padding-bottom: 14px;
  }
  .vd-spec-col:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* =========================================================
   20. WHERE VIDIAN BELONGS — MOBILE PHOTO LIGHTBOX
   Markup lives once at the end of front-page.php's belongs section;
   main.js only wires up the open/close behaviour on mobile widths (see
   isMobileViewport there) — on desktop the cards stay static, same as
   before. Closing never navigates anywhere: it's a fixed overlay on
   top of the page, so hiding it just reveals the Where Vidian Belongs
   section again, already scrolled to right where it was.
========================================================= */
.vd-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(7, 7, 10, 0.94);
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.vd-lightbox.is-open {
  display: flex;
}
.vd-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid var(--vd-gold);
}
.vd-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--vd-gold);
  background: transparent;
  color: var(--vd-gold);
  font-size: 1.8rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* Cards only look clickable/tappable on mobile, where the lightbox is
   actually wired up (see main.js). */
@media (max-width: 780px) {
  .vd-belongs-card-media {
    cursor: pointer;
  }
}

/* =========================================================
   21. COLLECTION MOBILE — TEXT SHIFT, SPEC DIVIDER
========================================================= */
/* Header logo hidden everywhere on mobile — just the menu icon stays.
   (Was Collection-only at first; superseded by this blanket rule — see
   "23. MOBILE HEADER — LOGO HIDDEN" further down. setActiveNav() in
   main.js still toggles .is-collection on scroll, but nothing reads it
   for the logo anymore, so it's a harmless no-op left in place in case
   a future section-specific header tweak wants that hook again.) */
/* Nudges the whole text block (eyebrow/heading/copy/specs/button) left.
   Was -40px; reduced to -20px so it stays safe under a bigger accessibility
   font size too (see the "TEXT-SIZE RESILIENCE" block at the end of this
   file) — at -40px, once this block's own width maxes out to the full
   viewport (which happens once wrapped lines get wide enough, well within
   the range a phone's font-size setting can trigger), the shift pushed
   text 16px past the section's left edge into the clipped zone. -20px
   still gives a visible left nudge at the normal size, but tested to stay
   flush with (never past) the edge regardless of how large the text gets. */
@media (max-width: 780px) {
  #collection .vd-container > .vd-reveal {
    margin-left: -20px;
  }
}
/* The border-bottom divider between the stacked 750ml and 330ml blocks
   (see "19. COLLECTION MOBILE" further up) removed — no rule between
   "Remarkable." and "330ml". */
@media (max-width: 780px) {
  .vd-spec-col {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

/* =========================================================
   22. THE SOURCE MOBILE — GOLD SUBHEADING, BOLD (matches the feature
   labels below it, e.g. "NATURAL ORIGIN" — same bold/gold/uppercase
   treatment as .vd-source-section .vd-feature-label further down).
========================================================= */
@media (max-width: 780px) {
  .vd-source-subheading {
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 12px;
  }
}

/* =========================================================
   23. MOBILE HEADER — LOGO HIDDEN
   Just the menu icon stays in the header on mobile; the wordmark/
   diamond logo mark is hidden on every section, not just Collection.
========================================================= */
@media (max-width: 780px) {
  .vd-logo {
    display: none;
  }
}

/* =========================================================
   24. MOBILE HEADER — BUTTON RIGHT-ALIGNED, HALF SIZE, SHORTER BAR
   With the logo hidden (section 23), the menu button was the only
   flex item left in .vd-header-inner's justify-content:space-between,
   which collapsed it to the left edge instead of the right — pin it
   with margin-left:auto instead of relying on space-between. Also
   halved the button's size and the header's vertical padding, so the
   bar above the first section is shorter and that section's content
   starts closer to the (now smaller) button.
========================================================= */
@media (max-width: 780px) {
  .vd-header,
  .vd-header.is-scrolled {
    padding: 13px 0;
  }
  .vd-menu-toggle {
    margin-left: auto;
    width: 21px;
    height: 21px;
  }
  .vd-menu-toggle svg {
    width: 9px;
    height: 7px;
  }
  /* Header bar is ~47px tall (13+21+13). Background image sits right at
     that boundary, just under the menu button — nudged up ~20px from
     the previous 65px offset. */
  .vd-hero-visual {
    background-position: center 45px;
  }
}

/* =========================================================
   LIGHTBOX CLOSE BUTTON — MOBILE, SIZED LIKE THE MENU BUTTON
   Base .vd-lightbox-close (44px, 1.8rem ×) is fine on desktop, but on
   mobile — where the lightbox is actually wired up (Where Vidian
   Belongs card tap-to-enlarge, see main.js) — that reads oversized
   next to everything else, especially the header's own menu button,
   which is only 21px. Matching that size keeps the two consistent.
========================================================= */
@media (max-width: 780px) {
  .vd-lightbox-close {
    width: 21px;
    height: 21px;
    font-size: 1rem;
  }
}

/* =========================================================
   HOME MOBILE — PULL TAGLINE CONTENT UP CLOSER TO THE IMAGE
   .vd-hero uses justify-content:flex-end + padding-bottom to anchor the
   slogan/CTA near the bottom — on mobile that leaves a large empty gap
   between the (now high, right-under-the-header) background image and
   the tagline text further down. Raising padding-bottom pulls that
   content block up (it still hugs the bottom of its own padding box,
   just a taller one), shrinking the gap without touching the image's
   own position.
========================================================= */
@media (max-width: 780px) {
  .vd-hero {
    padding-bottom: 32vh;
  }
}

/* =========================================================
   OUR STORY MOBILE — TEXT CLEAR OF THE HEADER
   Section 18 already switched this to justify-content:flex-start, but
   the padding-top it inherits from .vd-section is clamp(16px,5vh,90px)
   — on common phone heights 5vh comes out just under the ~47px fixed
   header, so the eyebrow still rendered a few px behind it. A fixed
   floor (matching the pattern already used for Contact/Philosophy)
   guarantees clearance regardless of viewport height.

   The background image (diamond photo) was NOT nudged up the same way
   Home's was: with background-size:cover on this tall (120px-oversized)
   section, even a 1-2% background-position shift moves the diamond a
   huge visible distance — every value tried put it directly behind the
   "Filtered through diamond crystals..." paragraph, hurting readability
   far more than the unchanged position did. Left as-is; the diamond
   still shows near the bottom, behind the feature icons, same as before. */
@media (max-width: 780px) {
  /* Pulls the whole section up 110px, overlapping Home by that amount
     (Our Story's own opaque background paints over the overlap since it
     comes later in document order). Started at -250px, confirmed to not
     cause the scroll-tearing issue an earlier, much smaller (~14px)
     version of this same trick was linked to, then iteratively dialed
     to this value. */
  #our-story {
    margin-top: -110px;
    padding-top: 50px;
  }
}

/* Installed-app mode only (opened from the phone's home screen icon
   after "Install app" — this theme ships a web manifest with
   "display": "standalone", which is what makes that install prompt
   available in the first place). display-mode:standalone is a
   standard CSS media feature reporting how the page is actually being
   displayed — unlike the old is-firefox/is-opera classes removed
   earlier, this isn't browser-sniffing, it's asking the browser a real
   question ("am I running full-screen, no address bar?") that any
   browser answers the same honest way.
   With no address bar at all (not even a collapsible one), the
   standalone window's real viewport height doesn't match what the
   100vh/100lvh sizing above was tuned against inside an ordinary
   browser tab — Home ends up rendering a little short, so the top of
   Our Story (the "OUR STORY" eyebrow) was peeking into view at the
   bottom of Home before any scrolling happened. Pushing Our Story's
   own content down an extra 80px (on top of the base padding-top:50px
   above, so 130px total in this mode) delays where it starts appearing
   without touching the -110px overlap that hides the seam between
   the two sections for everyone else — checked against a simulated
   no-chrome viewport (the closest stand-in available in this sandbox
   for a real installed app's viewport) with ~20px of buffer to spare
   below the fold, so there's some slack for device-to-device variance.
   Starting value — I can't install the actual app in this sandbox, so
   please check on your phone (Install app → open from the home screen
   icon) and let me know if it needs to be pushed down further or
   pulled back up. */
@media (max-width: 780px) and (display-mode: standalone) {
  #our-story {
    padding-top: 130px;
  }
}

/* =========================================================
   25. LANGUAGE SWITCHER (EN / AR) — header.
   Pure client-side toggle (see assets/js/i18n.js), no page reload and
   no layout/direction change — this only swaps text content, the page
   stays left-to-right in both languages. The button always shows the
   language a click will switch TO ("AR" while the page is in English,
   "EN" while it's in Arabic).
   There are TWO copies of the toggle in the markup (assets/js/i18n.js
   keeps both in sync — it updates every ".vd-lang-toggle" it finds,
   not just one), shown one at a time depending on viewport:
    - .vd-lang-switch — the desktop copy, last flex child in
      .vd-header-inner (after the nav): the nav has flex:1 1 auto and
      absorbs the space between the logo and this element, so it lands
      flush at the right edge of the header bar. Hidden once the nav
      becomes the off-canvas mobile overlay (see "24.MOBILE HEADER" /
      the @media(max-width:1340px) breakpoint below).
    - .vd-nav-lang — the mobile copy, living inside the off-canvas nav
      itself as the last item after the menu links (requested — not
      next to the hamburger button). Hidden above that same breakpoint. */
.vd-lang-switch {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.vd-lang-btn {
  background: none;
  border: 1px solid var(--vd-line);
  padding: 5px 11px;
  font-family: var(--vd-font-body);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--vd-gold);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.vd-lang-btn:hover { border-color: var(--vd-gold); background: rgba(201, 163, 95, 0.1); }

/* Mobile copy — hidden by default (desktop shows .vd-lang-switch in
   the header bar instead). */
.vd-nav-lang {
  display: none;
  align-items: center;
  gap: 12px;
}
.vd-nav-lang-label {
  font-family: var(--vd-font-body);
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vd-grey);
}

@media (max-width: 1340px) {
  /* Nav becomes the full-screen off-canvas overlay at this breakpoint
     (see "MOBILE MENU" / .vd-nav rules above) — swap which copy of the
     switcher is visible: hide the header-bar one, show the one now
     living inside the nav, placed last after the menu links with the
     same vertical rhythm as the links above it (.vd-nav ul's own
     26px gap). */
  .vd-lang-switch { display: none; }
  .vd-nav-lang { display: flex; margin-top: 26px; }
}

@media (max-width: 780px) {
  /* Only the menu button is left in the header bar on mobile (logo
     hidden, language switch now lives inside the nav overlay, nav
     itself is an off-canvas overlay removed from flex flow) —
     margin-left:auto on .vd-menu-toggle (see "24.") already pins it
     to the right on its own; nothing else to tighten here. */
  .vd-nav-lang-label { font-size: 0.8rem; }
  .vd-lang-btn { font-size: 0.7rem; padding: 3px 7px; }
}

/* Collection mobile — nudge "Discover More" down 15px, away from the
   750ml/330ml spec column above it. */
@media (max-width: 780px) {
  #collection .vd-btn {
    margin-top: 15px;
  }
}

/* =========================================================
   26. MOBILE TEXT-SIZE RESILIENCE
   Every section above is built as a fixed one-screen-tall box
   (height:100vh/100lvh + overflow:hidden — see ".vd-section" and the
   per-section restatements of it throughout this file) sized against
   the site's OWN font sizes. That's fine as long as nothing changes
   those sizes — but a visitor with a bigger text setting (an OS/browser
   accessibility "Font Size" preference, which no CSS is allowed to
   override — see the removed text-size-adjust attempt earlier in this
   file) makes every line of text taller and often wraps it onto more
   lines, so the same content needs more vertical room than the fixed
   box allows. With a hard height + overflow:hidden, the overflow was
   silently cut off — headings scrolling out of view above the section,
   buttons and form fields pushed past the bottom edge and clipped
   entirely.
   The fix: swap the fixed height for a height:auto + min-height pair.
   At the normal font size, content already fits inside one screen, so
   min-height alone determines the box size and it renders exactly as
   fixed-height did — pixel-identical, verified via screenshot
   comparison at default size. It's only when content needs MORE room
   than that (bigger text) that the box now grows to fit it instead of
   clipping it — pushing later sections further down the page rather
   than losing content. overflow-x stays hidden (several sections rely
   on it to hide intentional horizontal bleed from background photos/
   decorative elements); overflow-y is freed up so vertical growth is
   never clipped.
   Placed last in the file on purpose, same reasoning as the "17. MOBILE
   VIEWPORT-HEIGHT UNIT OVERRIDE" block above: every rule this needs to
   beat (the base ".vd-section" height/overflow, and each section's own
   restatement of overflow:hidden — .vd-our-story-section,
   .vd-collection-section, .vd-source-section, .vd-philosophy-section,
   .vd-contact-section) is a plain class selector of the same (0,1,0)
   specificity, so being last in source order is what makes this win. */
@media (max-width: 780px) {
  .vd-section,
  .vd-hero,
  .vd-our-story-section,
  .vd-collection-section,
  .vd-source-section,
  .vd-philosophy-section,
  .vd-contact-section {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100lvh;
    overflow-x: hidden;
    overflow-y: visible;
  }
  /* Our Story keeps its own extra +120px of headroom (see "17." above —
     it needs the taller box so overflow:hidden reveals more of the
     diamond photo at the bottom) — restated here as min-height so it
     still grows further still if the text itself also needs the room. */
  .vd-our-story-section {
    min-height: calc(100vh + 120px);
    min-height: calc(100lvh + 120px);
  }
}

/* =========================================================
   27. THE SOURCE / CONTACT — DESKTOP VIDEO, MOBILE IMAGE
   Both sections now render two background-media elements (see
   front-page.php): a <video> for desktop and an <img> for mobile,
   sharing the existing .vd-source-video / .vd-contact-video position/
   sizing rule (top:0/left:0/100%/100%/object-fit:cover etc. — unchanged
   above). Only one of the pair is ever shown per viewport; main.js
   mirrors this same 780px check before deciding which element's real
   asset to load, so the hidden element never costs any bandwidth
   either. Desktop is the default (video visible, img hidden); the
   mobile breakpoint flips it. ========================================= */
.vd-source-video--mobile,
.vd-contact-video--mobile {
  display: none;
}
@media (max-width: 780px) {
  .vd-source-video--desktop,
  .vd-contact-video--desktop {
    display: none;
  }
  .vd-source-video--mobile,
  .vd-contact-video--mobile {
    display: block;
  }
}