/* =========================================================
   Shadowbox — Colors & Typography
   Interior visual design studio · monochrome, editorial
   ========================================================= */

/* ---- Webfonts (DM Sans + DM Mono — substituted for Aeonik per client) ---- */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Italic-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("fonts/DMMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* =========================================================
   1. COLORS
   ---------------------------------------------------------
   Shadowbox is essentially monochrome. The brand voice is
   "shadow on a white wall" — black wordmark on white paper.
   Imagery carries the warmth (oak, taupe, putty); the
   palette stays disciplined.
   ========================================================= */
:root {
  /* Core mono — paper & ink */
  --sb-paper:        #FFFFFF;     /* canvas — galleries, presentation white */
  --sb-paper-warm:   #FAF8F5;     /* the off-white in moodboards / IG frames */
  --sb-bone:         #F0EBE3;     /* warm putty, used in plans / soft sections */
  --sb-stone:        #D6CFC4;     /* taupe accent, drawn from interiors */
  --sb-ash:          #9A9590;     /* mid-grey (slagschaduw / drop shadow tone) */
  --sb-graphite:     #3A3835;     /* almost-black with warmth */
  --sb-ink:          #111111;     /* the wordmark black */
  --sb-void:         #000000;     /* hard black, used sparingly */

  /* Interior accents — drawn from rendered scenes */
  --sb-oak:          #B89572;     /* warm oak / brass tone */
  --sb-clay:         #8C6A4F;     /* deeper wood */
  --sb-sage:         #7A8475;     /* muted green-grey */
  --sb-slate-blue:   #6B7C8A;     /* moody bedroom blue-grey */
  --sb-terracotta:   #B4715A;     /* rare pop, used in plan keys */

  /* Functional / state */
  --sb-line:         #E5E1DA;     /* hairline rules on paper */
  --sb-line-strong:  #1A1A1A;     /* signature 1px black rule */
  --sb-shadow-soft:  rgba(17,17,17,0.06);
  --sb-shadow-cast:  rgba(17,17,17,0.18);   /* "slagschaduw" — drop shadow */

  /* Semantic — fg / bg / accents */
  --sb-fg:           var(--sb-ink);
  --sb-fg-muted:     var(--sb-ash);
  --sb-fg-soft:      var(--sb-graphite);
  --sb-bg:           var(--sb-paper);
  --sb-bg-warm:      var(--sb-paper-warm);
  --sb-bg-inverse:   var(--sb-ink);
  --sb-fg-inverse:   var(--sb-paper);
  --sb-accent:       var(--sb-oak);
  --sb-rule:         var(--sb-line-strong);

  /* =======================================================
     2. TYPE — DM Sans (display + body) + DM Mono (caption,
     numerics, plan callouts). Wordmark uses wide tracking,
     lowercase always.
     ======================================================= */
  --sb-font-sans:    "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sb-font-mono:    "DM Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
  --sb-font-display: var(--sb-font-sans);

  /* Type scale — editorial, generous */
  --sb-fs-xs:    11px;
  --sb-fs-sm:    13px;
  --sb-fs-base:  15px;
  --sb-fs-md:    17px;
  --sb-fs-lg:    22px;
  --sb-fs-xl:    32px;
  --sb-fs-2xl:   48px;
  --sb-fs-3xl:   72px;
  --sb-fs-4xl:   112px;

  /* Line heights */
  --sb-lh-tight: 1.02;
  --sb-lh-snug:  1.18;
  --sb-lh-body:  1.55;
  --sb-lh-loose: 1.72;

  /* Letter spacing — wordmark style is wide */
  --sb-tracking-tight:  -0.02em;
  --sb-tracking-normal: 0em;
  --sb-tracking-wide:   0.06em;
  --sb-tracking-wider:  0.18em;       /* captions / nav */
  --sb-tracking-mark:   0.32em;       /* the "s h a d ⌬ w b o x" feel */

  /* Weights */
  --sb-w-light:    300;
  --sb-w-regular:  400;
  --sb-w-medium:   500;
  --sb-w-semibold: 600;
  --sb-w-bold:     700;

  /* =======================================================
     3. SPACING / RADII / SHADOWS
     ======================================================= */
  --sb-space-1:  4px;
  --sb-space-2:  8px;
  --sb-space-3:  12px;
  --sb-space-4:  16px;
  --sb-space-5:  24px;
  --sb-space-6:  32px;
  --sb-space-7:  48px;
  --sb-space-8:  64px;
  --sb-space-9:  96px;
  --sb-space-10: 144px;

  /* Radii — kept square. Shadowbox is architectural; rounded corners are rare. */
  --sb-radius-0:  0px;
  --sb-radius-1:  2px;
  --sb-radius-2:  4px;
  --sb-radius-pill: 999px;

  /* Borders */
  --sb-border-hair:  1px solid var(--sb-line);
  --sb-border-rule:  1px solid var(--sb-line-strong);

  /* Shadows — the "slagschaduw" / cast shadow is the brand. */
  --sb-shadow-1: 0 1px 2px rgba(17,17,17,0.04);
  --sb-shadow-2: 0 8px 24px rgba(17,17,17,0.08);
  --sb-shadow-cast: 6px 8px 0 rgba(17,17,17,0.12);   /* offset, no blur — a real shadow */
  --sb-shadow-frame: 0 24px 60px rgba(17,17,17,0.14);

  /* Page rhythm */
  --sb-content-max: 1200px;
  --sb-frame-pad:   clamp(20px, 4vw, 64px);
}

/* =========================================================
   SEMANTIC TYPE STYLES
   --------------------------------------------------------
   Use these like utilities. `sb-display`, `sb-h1`, etc.
   ========================================================= */
.sb-base, body.sb-body {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-base);
  line-height: var(--sb-lh-body);
  color: var(--sb-fg);
  background: var(--sb-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — for titles, hero pages */
.sb-display {
  font-family: var(--sb-font-display);
  font-size: var(--sb-fs-4xl);
  font-weight: var(--sb-w-light);
  line-height: var(--sb-lh-tight);
  letter-spacing: var(--sb-tracking-tight);
  color: var(--sb-fg);
}

/* Wordmark — the lowercase, wide-tracked treatment used in the corner of imagery */
.sb-wordmark {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-md);
  font-weight: var(--sb-w-regular);
  letter-spacing: var(--sb-tracking-mark);
  text-transform: lowercase;
  color: var(--sb-fg);
}

.sb-h1 {
  font-family: var(--sb-font-display);
  font-size: var(--sb-fs-3xl);
  font-weight: var(--sb-w-light);
  line-height: var(--sb-lh-tight);
  letter-spacing: var(--sb-tracking-tight);
}
.sb-h2 {
  font-family: var(--sb-font-display);
  font-size: var(--sb-fs-2xl);
  font-weight: var(--sb-w-light);
  line-height: var(--sb-lh-snug);
  letter-spacing: var(--sb-tracking-tight);
}
.sb-h3 {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-xl);
  font-weight: var(--sb-w-medium);
  line-height: var(--sb-lh-snug);
  letter-spacing: -0.005em;
}
.sb-h4 {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-lg);
  font-weight: var(--sb-w-medium);
  line-height: 1.3;
}

.sb-lede {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-md);
  font-weight: var(--sb-w-light);
  line-height: var(--sb-lh-loose);
  color: var(--sb-fg-soft);
  text-wrap: pretty;
  max-width: 56ch;
}

.sb-body {
  font-family: var(--sb-font-sans);
  font-size: var(--sb-fs-base);
  line-height: var(--sb-lh-body);
  color: var(--sb-fg);
  text-wrap: pretty;
}

.sb-small {
  font-size: var(--sb-fs-sm);
  line-height: 1.5;
  color: var(--sb-fg-soft);
}

/* Eyebrow / caption — uppercase, wide-tracked, mono */
.sb-eyebrow {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-xs);
  font-weight: var(--sb-w-regular);
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-wider);
  color: var(--sb-fg-muted);
}

.sb-caption {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-xs);
  letter-spacing: var(--sb-tracking-wide);
  color: var(--sb-fg-muted);
}

.sb-mono {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-sm);
  letter-spacing: 0;
}

/* Quote — stylistic */
.sb-quote {
  font-family: var(--sb-font-sans);
  font-style: italic;
  font-weight: var(--sb-w-light);
  font-size: var(--sb-fs-xl);
  line-height: 1.35;
  color: var(--sb-fg);
  max-width: 28ch;
}

/* Section header — used for page-level dividers */
.sb-section-label {
  font-family: var(--sb-font-mono);
  font-size: var(--sb-fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-wider);
  color: var(--sb-fg);
  border-top: 1px solid var(--sb-line-strong);
  padding-top: 12px;
}

/* =========================================================
   Mobile + tablet responsive overrides
   Tuned for design that was built at 1440px desktop-first.
   ========================================================= */

/* Global guards — kill any horizontal scroll on every viewport */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
img, video { max-width: 100%; height: auto; }

/* Italic em sublines inside large display headings: cancel the parent's
   negative letter-spacing so italics breathe a bit more. */
h1 em, h2 em {
  letter-spacing: 0.005em;
  font-style: italic;
}

/* Tablet (≤1024px) — slightly smaller padding */
@media (max-width: 1024px) {
  section[style*="padding: 120px 48px"],
  section[style*="padding: 144px 48px"],
  section[style*="padding: 160px 48px"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* Mobile (≤880px) — collapse, shrink, breathe */
@media (max-width: 880px) {
  /* Prevent any tiny horizontal overflow that breaks the "full-bleed" look */
  html, body { overflow-x: hidden !important; }

  /* HeroFull (homepage) — fix overflow, push content down a touch, bump
     eyebrow scale, nudge the em-subline closer + further right under
     "Visualiseer". The huge h1 floor (48px from desktop clamp) was the
     root cause of the off-screen "Visualiseer…" cropping. */
  section[data-hero-full] {
    height: auto !important;
    min-height: calc(100svh - 60px) !important;
  }
  section[data-hero-full] > div[style*="position: relative"] {
    padding: 22vh 26px 64px !important;
    gap: 14px !important;
  }
  section[data-hero-full] h1 {
    font-size: clamp(34px, 9vw, 46px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.03em !important;
  }
  section[data-hero-full] h1 em {
    padding-left: 1.6em !important;
    margin-top: -6px !important;
    font-size: 0.62em !important;
    display: block !important;
  }
  section[data-hero-full] span[data-hero-eyebrow] > span {
    font-size: 13px !important;
    letter-spacing: 0.16em !important;
  }
  section[data-hero-full] p {
    font-size: 15px !important;
  }
  section[data-hero-full] > span[style*="position: absolute"] {
    right: 16px !important; bottom: 16px !important;
  }

  /* Section padding */
  section[style*="padding"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section[style*="padding: 120px"],
  section[style*="padding: 144px"],
  section[style*="padding: 160px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
  section[style*="padding: 96px"] {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Inner div containers with hardcoded desktop padding — shrink on mobile.
     These are common on contact (form wrapper) + studio (split-screen inner cols). */
  div[style*="padding: 48px"] {
    padding: 24px !important;
  }
  div[style*="padding: 80px 48px"] {
    padding: 48px 20px !important;
  }
  div[style*="padding: 120px 48px"] {
    padding: 56px 20px !important;
  }
  div[style*="padding: 144px 48px"] {
    padding: 64px 20px !important;
  }
  /* Min-heights that force overflow on small screens */
  div[style*="minHeight: 560"], div[style*="min-height: 560"] {
    min-height: 320px !important;
  }
  div[style*="minHeight: 720"], div[style*="min-height: 720"] {
    min-height: 360px !important;
  }
  /* Studio image full-bleed in split layouts */
  section[style*="grid-template-columns: 1fr 1fr"] > div[style*="background: \`url"] {
    min-height: 280px !important;
  }

  /* Collapse every common multi-col grid to single column */
  section[style*="grid-template-columns: 5fr 7fr"],
  section[style*="grid-template-columns: 7fr 5fr"],
  section[style*="grid-template-columns: 5fr 6fr"],
  section[style*="grid-template-columns: 6fr 5fr"],
  section[style*="grid-template-columns: 7fr 4fr"],
  section[style*="grid-template-columns: 4fr 7fr"],
  section[style*="grid-template-columns: 4fr 8fr"],
  section[style*="grid-template-columns: 8fr 4fr"],
  section[style*="grid-template-columns: 1fr 3fr"],
  section[style*="grid-template-columns: 1fr 2fr"],
  section[style*="grid-template-columns: 2fr 1fr"],
  section[style*="grid-template-columns: 2.2fr"],
  section[style*="grid-template-columns: 1fr 1fr"],
  section[style*="grid-template-columns: repeat(2"],
  section[style*="grid-template-columns: repeat(3"],
  section[style*="grid-template-columns: repeat(4"],
  section[style*="grid-template-columns: repeat(5"],
  section[style*="grid-template-columns: repeat(6"],
  section[style*="grid-template-columns: repeat(12"],
  div[style*="grid-template-columns: 5fr 7fr"],
  div[style*="grid-template-columns: 7fr 5fr"],
  div[style*="grid-template-columns: 5fr 6fr"],
  div[style*="grid-template-columns: 6fr 5fr"],
  div[style*="grid-template-columns: 7fr 4fr"],
  div[style*="grid-template-columns: 4fr 7fr"],
  div[style*="grid-template-columns: 4fr 8fr"],
  div[style*="grid-template-columns: 8fr 4fr"],
  div[style*="grid-template-columns: 1fr 3fr"],
  div[style*="grid-template-columns: 1fr 2fr"],
  div[style*="grid-template-columns: 2fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: repeat(2"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(5"],
  div[style*="grid-template-columns: repeat(6"],
  div[style*="grid-template-columns: repeat(12"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Project page Process timeline: collapse 4-col to single column */
  div[style*="grid-template-columns: 0.6fr 0.9fr 3fr 6fr"],
  div[style*="grid-template-columns: 0.6fr 1.1fr 2fr 0.8fr 0.7fr 0.4fr"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  /* Span overrides — full width on mobile */
  article[style*="grid-column: span"] {
    grid-column: 1 / -1 !important;
  }

  /* Headings — cap on mobile so they don't overflow */
  h1[style*="clamp(56px"],
  h1[style*="clamp(64px"],
  h1[style*="clamp(48px"] {
    font-size: clamp(40px, 11vw, 64px) !important;
  }
  h2[style*="clamp(40px"],
  h2[style*="clamp(36px"] {
    font-size: clamp(32px, 8vw, 44px) !important;
  }

  /* Hero block padding: pull lead+CTAs out of bottom 1/3 of viewport so the
     buttons aren't tucked behind kitchen detail */
  section[style*="height: \"calc(100vh - 60px)\""] > div[style*="padding: \"min(140px"],
  section[style*="height: calc(100vh - 60px)"] > div[style*="padding: min(140px"] {
    padding: 88px 20px 48px !important;
  }

  /* Project hero banner shorter on phones */
  div[style*="height: \"clamp(320px, 36vw, 520px)\""],
  div[style*="height: clamp(320px, 36vw, 520px)"] {
    height: clamp(220px, 60vw, 360px) !important;
  }

  /* Reveal slider maxWidth gone on mobile — let it span the column */
  div[style*="maxWidth: 1000"][style*="aspect"],
  div[style*="maxWidth: 720"][style*="aspect"],
  div[style*="maxWidth: 960"][style*="aspect"] {
    max-width: none !important;
  }

  /* Carousel — narrower tile per viewport */
  a[data-tile] {
    width: 82vw !important;
  }

  /* Nav — hamburger + right-side slide drawer */
  nav { padding: 12px 16px !important; }
  nav .sb-nav-desktop { display: none !important; }
  nav .sb-nav-burger { display: inline-block !important; }
  /* Drawer + backdrop now live OUTSIDE the nav (sibling of <nav>),
     so they escape the sticky stacking context that breaks position:fixed
     on iOS Safari. Target them globally. */
  .sb-nav-backdrop { display: block !important; }
  .sb-nav-drawer { display: block !important; }
  /* Mobile wordmark visible, desktop one hidden */
  .sb-nav-mark .sb-nav-mark-desktop { display: none !important; }
  .sb-nav-mark .sb-nav-mark-mobile { display: inline-flex !important; }

  /* Footer collapses */
  footer {
    grid-template-columns: 1fr !important;
    padding: 40px 20px 24px !important;
    gap: 32px !important;
  }

  /* Eyebrow / mono captions stay readable */
  span[style*="DM Mono"][style*="fontSize: 10"],
  span[style*="DM Mono"][style*="fontSize: 11"] {
    font-size: 10px !important;
  }

  /* Generic max-width text containers — strip every ch-cap on mobile so
     content can fill its column. Covers h1/h2/h3/p/blockquote/div/span. */
  [style*="maxWidth: 12ch"],
  [style*="maxWidth: 14ch"],
  [style*="maxWidth: 16ch"],
  [style*="maxWidth: 18ch"],
  [style*="maxWidth: 20ch"],
  [style*="maxWidth: 22ch"],
  [style*="maxWidth: 24ch"],
  [style*="maxWidth: 26ch"],
  [style*="maxWidth: 28ch"],
  [style*="maxWidth: 30ch"],
  [style*="maxWidth: 32ch"],
  [style*="maxWidth: 36ch"],
  [style*="maxWidth: 40ch"],
  [style*="maxWidth: 44ch"],
  [style*="maxWidth: 48ch"],
  [style*="maxWidth: 52ch"],
  [style*="maxWidth: 56ch"],
  [style*="maxWidth: 60ch"] {
    max-width: 100% !important;
  }
}

/* Small phones (≤480px) — extra-tight */
@media (max-width: 480px) {
  section[style*="padding"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  h1[style*="clamp"] { font-size: clamp(36px, 11vw, 56px) !important; }
  a[data-tile] { width: 88vw !important; }
}

/* =========================================================
   Mobile-specific component overrides (data-attrs)
   ========================================================= */
@media (max-width: 880px) {
  /* HeroFull: shorter, no Beringen-eyebrow, tighter inner padding */
  section[data-hero-full] {
    height: auto !important;
    min-height: 540px !important;
  }
  section[data-hero-full] > div:nth-of-type(2) {
    padding: 96px 22px 40px !important;
  }
  span[data-hero-eyebrow] { display: none !important; }
  section[data-hero-full] h1 br + em { font-size: 0.65em !important; }

  /* MonogramRow: stack the two halves, wrap badges, shrink type */
  div[data-monogram-row] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 16px 20px !important;
  }
  div[data-monogram-row] > div {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
    width: 100%;
  }
  /* Hide the "·" separator spans */
  div[data-monogram-row] > div:last-child span[style*="color: #D6CFC4"] {
    display: none !important;
  }
  div[data-monogram-row] > div:last-child > span {
    font-size: 9px !important;
    letter-spacing: 0.14em !important;
  }

  /* DriePaden head: collapse, eyebrow first/inline, no right-orphan */
  div[data-driepaden-head] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 28px !important;
  }
  div[data-driepaden-head] > span:last-of-type {
    /* the "DRIE PADEN · 03" eyebrow */
    align-self: flex-start !important;
    text-align: left !important;
    border-top: none !important;
    padding-top: 0 !important;
    font-size: 10px !important;
    opacity: 0.7;
  }

  /* Proces: hide 5-step grid, show inline brass CTA, hide bottom right link */
  div[data-proces-grid] { display: none !important; }
  div[data-proces-cta] { display: none !important; }
  a[data-proces-mobile-cta] {
    display: inline-block !important;
    align-self: flex-start;
  }

  /* ManifestoQuote: single column, monogram top, body left-aligned */
  section[data-manifesto] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 64px 22px !important;
  }
  section[data-manifesto] blockquote {
    max-width: none !important;
    font-size: clamp(26px, 7.4vw, 38px) !important;
    text-align: left !important;
  }
  section[data-manifesto] p { max-width: none !important; }

  /* Footer: compact mobile layout
     Row 1: Brand strip (monogram + wordmark only, no description, slim socials)
     Row 2: Diensten | Studio (the nav)  — 2 cols
     Row 3: Studio Beringen (contact info) — full width
     Row 4: Legal — full width, stacked */
  footer[data-footer] {
    grid-template-columns: 1fr 1fr !important;
    gap: 22px 18px !important;
    padding: 28px 20px 18px !important;
  }
  /* Brand cell: full width, hide description on mobile, slim socials */
  footer[data-footer] > div:nth-child(1) { grid-column: 1 / -1 !important; }
  footer[data-footer] > div:nth-child(1) > p { display: none !important; }
  footer[data-footer] > div:nth-child(1) > div:last-child {
    margin-top: 12px !important;
    gap: 10px !important;
  }
  footer[data-footer] > div:nth-child(1) > div:last-child a {
    font-size: 9px !important;
  }
  /* Hide Voor wie column on mobile (duplicates Studio nav) */
  footer[data-footer] > div:nth-child(3) { display: none !important; }
  /* Studio Beringen: full width, compact horizontal block */
  footer[data-footer] > div:nth-child(5) {
    grid-column: 1 / -1 !important;
    border-top: 1px solid #E5E1DA;
    padding-top: 14px !important;
    margin-top: 4px !important;
  }
  footer[data-footer] > div:nth-child(5) ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 16px !important;
  }
  footer[data-footer] > div:nth-child(5) li {
    font-size: 12px !important;
    margin-top: 0 !important;
    line-height: 1.5 !important;
  }
  /* Bottom legal: stacked tight */
  footer[data-footer] > div:last-child {
    grid-column: 1 / -1 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding-top: 14px !important;
    margin-top: 8px !important;
  }
  footer[data-footer] > div:last-child > span:last-child {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  footer[data-footer] h5 {
    font-size: 9px !important;
    margin-bottom: 8px !important;
    padding-top: 8px !important;
  }
  footer[data-footer] a, footer[data-footer] li {
    font-size: 12px !important;
  }

  /* Contact page: explicit form + body section overrides
     The Body grid is 7fr 4fr (form + sidebar). The form has padding 48px
     (already collapsed via [data-contact-form] below), and the section has
     padding 80px 48px 120px which is caught by the generic section[style*="padding"]
     rule. This adds belt-and-braces width caps. */
  section[data-contact-body] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 48px 16px 64px !important;
  }
  div[data-contact-form] {
    padding: 22px 18px !important;
    min-height: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Inputs/textareas: ensure they never exceed container */
  div[data-contact-form] input,
  div[data-contact-form] textarea,
  div[data-contact-form] select {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Step1 segment cards (3-up) — smaller padding on mobile */
  div[data-contact-form] button[style*="padding: 32px 28px"] {
    padding: 22px 18px !important;
    min-height: 0 !important;
  }
  /* StepHeader spans: shrink connector dashes + labels */
  div[data-contact-form] > div:first-child {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Reviews — collapse header on mobile, and turn the trio into a single
     swipe carousel: only the center (featured) card is visible, outer
     two are hidden. The featured card already sits at child index 2. */
  div[data-reviews-head] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-bottom: 28px !important;
  }
  div[data-reviews-trio] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  div[data-reviews-trio] > *:nth-child(1),
  div[data-reviews-trio] > *:nth-child(3) {
    display: none !important;
  }

  /* FAQ groups — 1 col on mobile */
  div[data-faq-group] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Proces FULL phase grid — 1 col on mobile */
  section[data-proces-full] > div > div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Werk page rows: collapse 6-col grid, image at top, table-header hidden */
  div[data-werk-head] { display: none !important; }
  a[data-werk-row] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 20px !important;
  }
  a[data-werk-row] > div[style*="aspectRatio"] {
    aspect-ratio: 4 / 3 !important;
    width: 100% !important;
  }
  a[data-werk-row] > span[style*="justifySelf: end"] {
    justify-self: flex-start !important;
  }
}

/* Mobile footer (≤880px) — shrink the legal/cookie/privacy row so it
   matches the muted scale of the rest of the footer (was 10px mono with
   wide tracking, which looked chunky next to the 13px body links). */
@media (max-width: 880px) {
  footer[data-footer] > div:last-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
  }
  footer[data-footer] > div:last-child > span:last-child {
    gap: 14px !important;
  }
}

/* Small phones (≤480px) — extra-tight footer to single column */
@media (max-width: 480px) {
  footer[data-footer] {
    grid-template-columns: 1fr !important;
    padding: 32px 18px 20px !important;
  }
}

/* Result strip: hide horizontal scrollbar */
.sb-strip::-webkit-scrollbar { display: none; }
.sb-strip { -ms-overflow-style: none; scrollbar-width: none; }