/* Custom overrides for brand pages / contact page — on top of vds-223c04.webflow.css */

:root {
  --media-bg: #2c2c26;
  --card-title: #2f3020;
  --filter-bg: #f4ece0;
  --filter-border: #c9aa7c;
  --filter-border-soft: rgba(143, 98, 39, .25);
  --filter-border-softer: rgba(143, 98, 39, .18);
  --footer-divider: rgba(237, 230, 220, .18);
  /* 20-point zigzag clip-path used on every card image */
  --zigzag-clip: polygon(
    1.6em 0, calc(100% - 1.6em) 0,
    calc(100% - 0.736em) 0.304em,
    calc(100% - 1.136em) 1.136em,
    calc(100% - 0.304em) 0.736em,
    100% 1.6em, 100% calc(100% - 1.6em),
    calc(100% - 0.304em) calc(100% - 0.736em),
    calc(100% - 1.136em) calc(100% - 1.136em),
    calc(100% - 0.736em) calc(100% - 0.304em),
    calc(100% - 1.6em) 100%, 1.6em 100%,
    0.736em calc(100% - 0.304em),
    1.136em calc(100% - 1.136em),
    0.304em calc(100% - 0.736em),
    0 calc(100% - 1.6em), 0 1.6em,
    0.304em 0.736em,
    1.136em 1.136em,
    0.736em 0.304em
  );
}

/* ===== Brand hero (Desktop-9): left text + right square photo ===== */
/* padding-top clears the absolute .menu-wrap (top: 1.5em + ~4.75em logo height) */
.hero-brand {
  padding: 9em 0 2em;
  position: relative;
}
.hero-brand-block {
  display: flex;
  gap: 3em;
  align-items: stretch;
}
.hero-brand-block--index { max-width: 44em; }

.hero-brand-left {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  max-width: 38em;
  padding: 1em 0;
}
.hero-brand-left--wide { max-width: none; }
.hero-brand-left h1 { margin: 0; }

.hero-brand-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6em 1em;
  margin-bottom: .25em;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--brown);
}
.hero-brand-tags p { margin: 0; }
.hero-brand-tags .svg-project-icon { width: .5em; height: .5em; }

.hero-brand-text { max-width: 34em; margin: 0; }
.hero-brand-btn { align-self: flex-start; margin-top: .5em; }

.hero-brand-right {
  flex: 1 1 0;
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 30em;
  background: var(--media-bg);
  overflow: hidden;
  align-self: flex-start;
}
.hero-brand-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Brand filter dropdown (Desktop-10) ===== */
.brand-filter {
  position: absolute !important;
  top: 9em;
  right: 3em;
  z-index: 5;
  min-width: 17em;
  border: 1px solid var(--filter-border);
  background: var(--filter-bg);
  color: var(--brown);
  font-family: inherit;
  box-shadow: 0 6px 24px rgba(44, 44, 38, .12);
}
.brand-filter > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9em 1.15em;
  cursor: pointer;
  list-style: none;
  text-transform: capitalize;
  font-size: .95em;
  color: var(--brown);
}
.brand-filter > summary::after {
  content: "";
  flex-shrink: 0;
  width: .55em;
  height: .55em;
  margin-left: 1em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
}
.brand-filter[open] > summary::after { transform: rotate(-135deg); }

.brand-filter-body {
  padding: .9em 1.15em 1.1em;
  border-top: 1px solid var(--filter-border);
  display: flex;
  flex-direction: column;
  gap: .7em;
}
.brand-filter-item {
  display: flex;
  align-items: center;
  gap: .7em;
  cursor: pointer;
  user-select: none;
  font-size: .95em;
  color: var(--brown);
}
.brand-filter-item input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  border: 1.5px solid var(--filter-border);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}
.brand-filter-item input[type="checkbox"]:checked {
  background: var(--brown);
  border-color: var(--brown);
}
.brand-filter-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 25%;
  top: 8%;
  width: 35%;
  height: 65%;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* ===== Brand author byline (under hero paragraph) ===== */
.brand-byline {
  font-size: 0.95em;
  color: var(--green);
  margin: 0.25em 0 1em;
}
.brand-byline a {
  color: var(--dark-brown);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ===== Brand cards grid (use cases, care, etc.) ===== */
.brand-cards-section { padding: 1.5em 0 2.5em; }
.brand-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25em;
  max-width: 64em;
  margin: 0 auto;
}
.brand-cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
.brand-card-block {
  padding: 1.5em 1.5em 1.65em;
  background: var(--white);
  border-radius: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}
.brand-card-block h3 {
  margin: 0;
  font-size: 1.1em;
  color: var(--dark-brown);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.brand-card-block p {
  margin: 0;
  font-size: 0.95em;
  line-height: 1.55;
  color: var(--dark-grey);
}
.brand-card-block p strong { color: var(--dark-brown); }
@media (max-width: 991px) {
  .brand-cards-grid,
  .brand-cards-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .brand-cards-grid,
  .brand-cards-grid--3 { grid-template-columns: 1fr; }
}

/* ===== Brand comparison table ===== */
.brand-compare-section { padding: 2em 0 2.5em; }
.brand-compare-wrap {
  max-width: 64em;
  margin: 0 auto;
  overflow-x: auto;
}
.brand-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
.brand-compare-table th,
.brand-compare-table td {
  padding: 0.85em 0.85em;
  text-align: left;
  border-bottom: 1px solid var(--grey);
  vertical-align: top;
}
.brand-compare-table thead th {
  font-weight: 600;
  color: var(--dark-brown);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}
.brand-compare-table tbody th {
  font-weight: 500;
  color: var(--green);
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brand-compare-table td.is-active {
  background: rgba(105,61,34,0.06);
  color: var(--dark-brown);
  font-weight: 500;
}
@media (max-width: 767px) {
  .brand-compare-table { font-size: 0.85em; }
  .brand-compare-table th, .brand-compare-table td { padding: 0.6em 0.55em; }
}

/* ===== Brand meta block (lead-time, pricing) ===== */
.brand-meta-section { padding: 1.5em 0 2.5em; }
.brand-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1em 2em;
  max-width: 56em;
  margin: 0 auto;
  padding: 1.75em 2em;
  background: var(--white);
  border-radius: 0.5em;
}
.brand-meta-row { display: flex; flex-direction: column; gap: 0.3em; }
.brand-meta-label {
  font-size: 0.78em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
}
.brand-meta-value {
  font-size: 1.02em;
  color: var(--dark-grey);
  line-height: 1.45;
}
@media (max-width: 600px) {
  .brand-meta { grid-template-columns: 1fr; padding: 1.25em 1.25em; }
}

/* ===== Brand FAQ section (uses .brand-faq from brand.css) ===== */
.brand-faq-section { padding: 2em 0 3em; }
.brand-faq-section .brand-faq { max-width: 56em; margin: 1em auto 0; }
.brand-faq-section .faq-item h3 {
  font-size: 1.1em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--dark-brown);
}
.brand-faq-section .faq-item p {
  color: var(--dark-grey);
  line-height: 1.55;
  margin: 0;
}
/* Static FAQ on brand pages — no hover state (override global .faq-item:hover) */
.brand-faq-section .faq-item:hover {
  background-color: transparent;
  color: inherit;
}
.brand-faq-section .faq-item:hover h3 { color: var(--dark-brown); }
.brand-faq-section .faq-item:hover p { color: var(--dark-grey); }

/* ===== Brand SEO copy block (between hero and collections) ===== */
.brand-seo-section { padding: 3em 0 1.5em; }
.brand-seo-section .case-h2-h3-wrap.center {
  text-align: center;
  margin: 0 auto 1.5em;
  max-width: 32em;
}
.brand-seo-section .case-h2-h3-wrap.center > h2 {
  color: var(--dark-grey);
  margin: 0;
}
.brand-seo-text {
  max-width: 52em;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.brand-seo-text p { margin: 0; }
.brand-seo-section + .brand-collections-section { padding-top: 1.5em; }
@media (max-width: 767px) {
  .brand-seo-section { padding: 2em 0 1em; }
  .brand-seo-section + .brand-collections-section { padding-top: 1em; }
}

/* ===== Brand grid + collection grid (shared visual system) ===== */
.brand-grid-section { padding: 0 0 3.5em; }
.brand-collections-section { padding: 4em 0 2em; }
.brand-grid-section .case-h2-h3-wrap.center,
.brand-collections-section .case-h2-h3-wrap.center {
  text-align: center;
  margin: 2em 0 1.5em;
}
.brand-grid-section .case-h2-h3-wrap.center > h2,
.brand-collections-section .case-h2-h3-wrap.center > h2,
h2.brand-category-head {
  color: var(--dark-grey);
}

h2.brand-category-head {
  margin: 0;
  padding: 1.5em 0 1em;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 120%;
}

.brand-grid,
.brand-collections-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.25em 1.25em;
  margin-bottom: 1em;
}

.brand-card,
.brand-collection-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2em;
  align-self: start;
  text-decoration: none;
  color: inherit;
}

.brand-card-media,
.brand-collection-media {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--media-bg);
  clip-path: var(--zigzag-clip);
}
.brand-card-media img,
.brand-collection-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

h3.brand-card-title,
h3.brand-collection-title {
  margin: .25em 0 0;
  font-family: 'De Martega', Verdana, sans-serif;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--card-title);
}
h3.brand-card-title       { font-size: 3em; }
h3.brand-collection-title { font-size: 2.25em; }

.brand-card-desc,
.brand-collection-desc {
  margin: 0;
  font-size: 1em;
  line-height: 120%;
  letter-spacing: 0;
  color: var(--green);
}

/* ===== 404 tweaks ===== */
.hero-case .footer-link { text-decoration: underline; }

/* ===== Footer v2 — Figma Desktop 10 ===== */
.footer-section.fv2 {
  padding: 4em 0 0;
  position: static;
}
.div-block-2.fv2-wrap { margin-top: 0; }
.div-block-2.fv2-wrap .footer-spacer { display: none; }

.fv2-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr;
  gap: 2.5em 2.5em;
  padding-bottom: 3.5em;
}
.fv2-logo { display: flex; flex-direction: column; gap: .75em; }
.fv2-logo-img { width: 10em; height: auto; display: block; }
.fv2-col { display: flex; flex-direction: column; gap: 0; padding-top: .25em; }
.fv2-col--brand { padding-top: 0; }
.fv2-col--brand .fv2-logo-img { margin-bottom: 1em; }
.fv2-tagline {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--beige);
  opacity: .85;
  max-width: 22em;
}
.fv2-link {
  display: block;
  text-decoration: none;
  margin: 0 0 .35em;
}
.fv2-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.fv2-link--strong { font-weight: 500; opacity: 1; margin-top: .5em; }

.fv2-label {
  margin: 0 0 .55em;
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--beige);
  opacity: .65;
}
.fv2-label-mt { margin-top: 1.75em; }

.fv2-body {
  margin: 0 0 .2em;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--beige);
  text-decoration: none;
}
.fv2-underlink {
  margin: 0 0 .2em;
  font-size: .8125rem;
  color: var(--beige);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fv2-socials { display: flex; flex-direction: column; gap: .6em; margin-top: .1em; }
.fv2-social {
  display: flex;
  align-items: center;
  gap: .65em;
  font-size: .8125rem;
  color: var(--beige);
  text-decoration: none;
}
.fv2-social svg { width: 1em; height: 1em; flex-shrink: 0; }
.fv2-social:hover { opacity: .75; }

.fv2-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25em 0 2em;
  border-top: 1px solid var(--footer-divider);
}
.fv2-copy {
  margin: 0;
  font-size: .75rem;
  color: var(--beige);
  opacity: .65;
}
.fv2-legal { display: flex; gap: 2em; }
.fv2-legal a {
  font-size: .75rem;
  color: var(--beige);
  text-decoration: none;
  opacity: .65;
}
.fv2-legal a:hover { opacity: 1; }

/* ===== Contact page — NAP / area / FAQ ===== */
.contact-nap-section { margin-top: 6em; }

.contact-nap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em 2em;
  margin-top: 2em;
}
.contact-nap-card {
  display: flex;
  flex-direction: column;
  gap: .55em;
  padding: 1.75em 1.5em;
  background: var(--filter-bg);
  border: 1px solid var(--filter-border-softer);
}
.contact-nap-label {
  margin: 0 0 .15em;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brown);
}
.contact-nap-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--dark-green);
  text-decoration: none;
}
a.contact-nap-body { display: inline-block; }
.contact-nap-strong { font-size: 1.125rem; letter-spacing: .01em; }

.contact-nap-link {
  margin-top: auto;
  font-size: .875rem;
  color: var(--brown);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.contact-nap-link:hover { color: var(--dark-brown); }
.contact-nap-note {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--green);
}

.contact-area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  margin-top: 2em;
}
.contact-area-block {
  display: flex;
  flex-direction: column;
  gap: .6em;
  padding: 1.75em 1.5em 1.75em 1.75em;
  border-left: 2px solid var(--light-brown);
}
.contact-area-label {
  margin: 0;
  font-family: 'De Martega', Verdana, sans-serif;
  font-size: 1.5rem;
  line-height: 110%;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dark-green);
}
.contact-area-body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--dark-green);
}

.contact-faq {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 56em;
  margin: 1.5em auto 0;
}
.contact-faq-item {
  padding: 1.25em 0;
  border-bottom: 1px solid var(--filter-border-soft);
}
.contact-faq-item > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  cursor: pointer;
  list-style: none;
  font-family: 'De Martega', Verdana, sans-serif;
  font-size: 1.5rem;
  line-height: 120%;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--dark-green);
}
.contact-faq-item > summary::after {
  content: "";
  flex-shrink: 0;
  width: .65em;
  height: .65em;
  border-right: 1.5px solid var(--brown);
  border-bottom: 1.5px solid var(--brown);
  transform: rotate(45deg);
  transition: transform .25s;
}
.contact-faq-item[open] > summary::after { transform: rotate(-135deg); }
.contact-faq-item > p {
  max-width: 50em;
  margin: .9em 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dark-green);
}

.contact-faq-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5em;
  margin-top: 3em;
  text-align: center;
}

/* Hide native <details> markers across all custom accordions */
.brand-filter > summary::-webkit-details-marker,
.contact-faq-item > summary::-webkit-details-marker { display: none; }
.brand-filter > summary::marker,
.contact-faq-item > summary::marker { content: ""; }

/* ===== Responsive (consolidated) ===== */
@media (max-width: 1200px) {
  .fv2-grid { grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5em 2.5em; }
  .fv2-col--brand { grid-column: 1 / -1; max-width: 32em; padding-bottom: .5em; }
}
@media (max-width: 1024px) {
  .fv2-grid { grid-template-columns: 1fr 1fr; gap: 2.5em 3em; }
  .fv2-col--brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 768px) {
  .fv2-legal { flex-wrap: wrap; gap: 1em 1.5em; }
}
@media (max-width: 991px) {
  .brand-grid,
  .brand-collections-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-brand-block { flex-direction: column; }
  .hero-brand-right {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 10;
    max-height: 22em;
  }
  .brand-filter { position: static !important; margin: 1em 0 0; right: auto; top: auto; }
  .contact-nap-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-area-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fv2-grid { grid-template-columns: 1fr; }
  .fv2-bottom { flex-direction: column; align-items: flex-start; gap: 1em; }
}
@media (max-width: 520px) {
  .brand-grid,
  .brand-collections-grid { grid-template-columns: 1fr; gap: 1.5em; }
  .contact-nap-grid { grid-template-columns: 1fr; }
}

/* ===== Home FAQ — native <details>/<summary> accordion ===== */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  background-color: var(--beige);
  color: var(--dark-brown);
  padding: 1.25em 2.5em;
  border-bottom: 1px solid var(--dark-brown);
  position: relative;
  transition: background-color .25s ease, color .25s ease;
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75em;
  font-family: 'De Martega', serif;
  font-size: 1.125em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary > .svg-nfaq {
  flex-shrink: 0;
  transition: transform .3s ease;
}
.faq-item[open] > summary > .svg-nfaq { transform: rotate(180deg); }
.faq-item > p {
  margin: .75em 0 0;
  padding-top: .625em;
  font-size: .875em;
  line-height: 1.21;
  max-width: 45.25em;
}
.faq-item:hover { background-color: var(--dark-brown); color: var(--beige); }

/* ============================================================
   Projects section — per-pair scrolling (replaces broken IX2)
   Each card is paired with its image inside .project-pair so
   clicks always land on the visible card (no invisible overlay).
   ============================================================ */
.project-pair {
  position: relative;
  width: 100vw;
  height: 60em;
  overflow: hidden;
}
.project-pair > .project-bg-img-2 {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 60em;
  object-fit: cover;
  z-index: 0;
}
.project-pair > .project-card {
  position: absolute !important;
  top: 15.9em !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  opacity: 1 !important;
  display: flex !important;
}
@media (max-width: 991px) {
  .project-pair { height: 50em; }
  .project-pair > .project-bg-img-2 { height: 50em; }
  .project-pair > .project-card {
    top: 12em !important;
  }
}
@media (max-width: 767px) {
  .project-pair { height: 40em; }
  .project-pair > .project-bg-img-2 { height: 40em; }
  .project-pair > .project-card {
    top: 8em !important;
    width: 90vw !important;
    height: auto !important;
  }
}

/* ===== Mobile hamburger nav (CSS-only via :checked) ===== */
.vds-nav-toggle { position: absolute; left: -9999px; opacity: 0; }
.vds-hamburger { display: none; }
.vds-mobile-nav { display: none; }
.vds-nav-overlay { display: none; }

@media (max-width: 991px) {
  .vds-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    cursor: pointer;
    z-index: 102;
    position: relative;
    margin-right: auto;
  }
  .vds-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--dark-brown, #2c2c26);
    transition: transform .3s ease, opacity .2s ease;
    transform-origin: center;
  }
  .vds-nav-toggle:checked ~ .menu-wrap .vds-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .vds-nav-toggle:checked ~ .menu-wrap .vds-hamburger span:nth-child(2) { opacity: 0; }
  .vds-nav-toggle:checked ~ .menu-wrap .vds-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .vds-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 99;
    cursor: pointer;
  }
  .vds-nav-toggle:checked ~ .vds-nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .vds-mobile-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: min(85vw, 22em);
    height: 100vh;
    height: 100dvh;
    background: var(--beige, #f4ece0);
    padding: 5em 2em 2em;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    z-index: 100;
    overflow-y: auto;
    box-shadow: 2px 0 24px rgba(0, 0, 0, .15);
  }
  .vds-nav-toggle:checked ~ .vds-mobile-nav { transform: translateX(0); }

  .vds-mobile-nav-link {
    display: block;
    padding: .85em 0;
    font-family: 'Bricolage Grotesque', serif;
    font-size: 1.5rem;
    color: var(--dark-brown, #2c2c26);
    text-decoration: none;
    border-bottom: 1px solid rgba(143, 98, 39, .15);
  }
  .vds-mobile-nav-sub {
    display: block;
    padding: .55em 0 .55em 1em;
    font-size: .875rem;
    color: var(--dark-grey, #5a5a4f);
    text-decoration: none;
    border-bottom: 1px solid rgba(143, 98, 39, .08);
  }
  .vds-mobile-nav-cta {
    display: block;
    margin-top: 1.5em;
    padding: 1em 1.5em;
    background: var(--brown, #8f6227);
    color: var(--beige, #f4ece0);
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 4px;
  }
  .vds-mobile-nav-foot {
    display: flex;
    flex-direction: column;
    gap: .5em;
    margin-top: auto;
    padding-top: 2em;
    font-size: .875rem;
  }
  .vds-mobile-nav-foot a {
    color: var(--dark-brown, #2c2c26);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Prevent body scroll when menu open */
  body:has(.vds-nav-toggle:checked) { overflow: hidden; }
}

/* ===== Legal pages (imprint, privacy, cookie policy) ===== */
.legal-page {
  padding: 8em 0 5em;
  background: var(--filter-bg, #f4ece0);
  color: var(--dark-brown, #2c2c26);
}
.legal-page .container { max-width: 48em; }
.legal-page h1 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 1.5em;
  line-height: 1.1;
  color: var(--brown, #8f6227);
}
.legal-page h2 {
  font-family: 'Bricolage Grotesque', serif;
  font-size: 1.375rem;
  margin: 2em 0 .6em;
  color: var(--dark-brown, #2c2c26);
}
.legal-page h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1.4em 0 .4em;
  color: var(--dark-brown, #2c2c26);
}
.legal-page p,
.legal-page ul {
  font-size: .9375rem;
  line-height: 1.7;
  margin: 0 0 1em;
  color: var(--dark-grey, #5a5a4f);
}
.legal-page ul {
  padding-left: 1.5em;
}
.legal-page li { margin: .25em 0; }
.legal-page a {
  color: var(--brown, #8f6227);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-page a:hover { opacity: .8; }
.legal-page .legal-intro {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2em;
  padding-bottom: 1.5em;
  border-bottom: 1px solid rgba(143, 98, 39, .15);
}
.legal-page .legal-meta {
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid rgba(143, 98, 39, .15);
  font-size: .8125rem;
  font-style: italic;
  opacity: .7;
}