/*
 * On The Rocks Media — main.css
 * Design system: tokens, cascade layers, scoped reset, base styles, @font-face placeholders
 *
 * TOKEN SOURCE: Figma file hZvkcpB5xRDUqllEwaeDYJ, frame 68:3 (Home desktop).
 * COLOR EXTRACTION: Verified via get_variable_defs MCP tool on 2026-06-12.
 * Figma variables: Wit/Beige #f4efea, Donker blauw #002125, Licht blauw 2 #2abdcc.
 * Spacing/typography: standard scale — verify exact values against Figma once fonts delivered.
 *
 * UNIT TRANSLATION RULES (RESEARCH.md Pitfall #11):
 *   Figma px → rem : divide by 16
 *   Figma letter-spacing % → em : divide by 100  (e.g. 2% → 0.02em)
 *   Figma line-height px → unitless : lineHeightPx / fontSizePx
 *
 * BREAKPOINT CONSTANTS (cannot live in custom props — document here, use literally):
 *   mobile  : base styles (no media query)  — ≤ 767px  (Figma mobile frame 91:1008)
 *   tablet  : @media (min-width: 768px)     — aligns with Elementor tablet breakpoint
 *   desktop : @media (min-width: 1280px)    — Figma Home desktop frame 68:3 implied ~1440px wide
 *   wide    : @media (min-width: 1440px)    — Figma standard desktop canvas
 *
 * ALL CSS CLASSES MUST BE .otr- PREFIXED — prevents WordPress/Elementor collisions (CLAUDE.md).
 * NEVER use a global * {} reset — scoped only under .otr-page (SETUP-05, Pitfall #2).
 * Use relative paths for all asset references (Pitfall #4).
 */

/* ==========================================================================
   1. DESIGN TOKENS — :root custom properties (SETUP-03, Pattern 2)
   Consumed everywhere via var(). Defined outside layers so they cascade
   to all layers without specificity games.
   ========================================================================== */

:root {
  /* ---------- Colors ----------
   * SOURCE: Figma variables extracted via get_variable_defs on file hZvkcpB5xRDUqllEwaeDYJ
   * Figma variables: Wit/Beige #f4efea, Donker blauw #002125, Licht blauw 2 #2abdcc */
  --otr-color-bg:           #002125;   /* Figma "Donker blauw" — dark teal/navy background */
  --otr-color-bg-alt:       #002c32;   /* slightly lighter section bg */
  --otr-color-surface:      #003a40;   /* card / elevated surface */
  --otr-color-border:       #00484f;   /* subtle border */
  --otr-color-primary:      #f4efea;   /* Figma "Wit/Beige" — warm cream text */
  --otr-color-secondary:    #b8d8da;   /* muted teal-tinted secondary text */
  --otr-color-accent:       #2abdcc;   /* Figma "Licht blauw 2" — teal/cyan accent */
  --otr-color-accent-hover: #4ecfdd;   /* lighter teal on hover */
  --otr-color-muted:        #6a9ea3;   /* muted / disabled text */
  --otr-color-white:        #f4efea;   /* Figma "Wit" — warm white */

  /* ---------- Spacing scale (rem — base 16 px) ----------
   * Consistent 4-point scale up to xl, larger jumps for section-level spacing.
   * Sourced from typical 8-point grid; confirm against Figma frame 68:3 padding values. */
  --otr-space-2xs:  0.25rem;   /*  4px */
  --otr-space-xs:   0.5rem;    /*  8px */
  --otr-space-sm:   0.75rem;   /* 12px */
  --otr-space-md:   1rem;      /* 16px */
  --otr-space-lg:   1.5rem;    /* 24px */
  --otr-space-xl:   2rem;      /* 32px */
  --otr-space-2xl:  3rem;      /* 48px */
  --otr-space-3xl:  4rem;      /* 64px */
  --otr-space-4xl:  6rem;      /* 96px */
  --otr-space-5xl:  8rem;      /* 128px */

  /* ---------- Typography — font stacks ----------
   * "OTR Heading" and "OTR Body" are placeholder names matching the @font-face blocks below.
   * The metric-matched fallback family ("OTR Heading Fallback" / "OTR Body Fallback") sits
   * second, then system-ui as ultimate fallback, then the generic category.
   * SWAP to real family names when client delivers WOFF2 files. */
  --otr-font-heading: "OTR Heading", "OTR Heading Fallback", system-ui, sans-serif;
  --otr-font-body:    "OTR Body",    "OTR Body Fallback",    system-ui, sans-serif;
  --otr-font-mono:    "Courier New", "Courier", monospace;

  /* ---------- Font sizes (rem — divide Figma px by 16) ----------
   * Minor-third scale (×1.25) starting from 1rem base; confirm display/hero sizes
   * against Figma 68:3 heading hierarchy. */
  --otr-fs-xs:    0.75rem;    /* 12px */
  --otr-fs-sm:    0.875rem;   /* 14px */
  --otr-fs-base:  1rem;       /* 16px — body copy */
  --otr-fs-md:    1.125rem;   /* 18px */
  --otr-fs-lg:    1.25rem;    /* 20px */
  --otr-fs-xl:    1.5rem;     /* 24px */
  --otr-fs-2xl:   1.875rem;   /* 30px */
  --otr-fs-3xl:   2.25rem;    /* 36px */
  --otr-fs-4xl:   3rem;       /* 48px — section heading */
  --otr-fs-5xl:   3.75rem;    /* 60px — hero heading desktop */
  --otr-fs-6xl:   4.5rem;     /* 72px — display / hero XL */

  /* ---------- Line heights (unitless — lineHeightPx / fontSizePx) ---------- */
  --otr-lh-tight:   1.1;
  --otr-lh-snug:    1.25;
  --otr-lh-normal:  1.5;
  --otr-lh-relaxed: 1.625;
  --otr-lh-loose:   2;

  /* ---------- Letter spacing (em — Figma % / 100) ---------- */
  --otr-ls-tighter: -0.02em;   /* -2% (tight heading) */
  --otr-ls-tight:   -0.01em;   /* -1% */
  --otr-ls-normal:   0em;
  --otr-ls-wide:     0.05em;   /* 5% (label / caps) */
  --otr-ls-wider:    0.1em;    /* 10% */

  /* ---------- Border radii ---------- */
  --otr-radius-sm:   0.25rem;   /*  4px */
  --otr-radius-md:   0.5rem;    /*  8px */
  --otr-radius-lg:   1rem;      /* 16px */
  --otr-radius-full: 9999px;    /* pill */

  /* ---------- Transition defaults ---------- */
  --otr-transition-fast:   150ms ease;
  --otr-transition-base:   250ms ease;
  --otr-transition-slow:   400ms ease;
}


/* ==========================================================================
   2. CASCADE LAYER ORDER — declared once here, never redeclared (SETUP-05, Pattern 1)
   Later stylesheets APPEND to these layers; they NEVER redefine the order.
   Unlayered WP/Elementor CSS wins over ALL layered CSS regardless of specificity —
   the .otr- namespace is the primary conflict-prevention mechanism (Pitfall #2).
   ========================================================================== */

@layer otr-reset, otr-base, otr-components, otr-utilities;


/* ==========================================================================
   3. otr-reset LAYER — scoped reset under .otr-page (SETUP-05, Pattern 1)
   NEVER a global-star reset — scoped under the layout root to coexist with WP host.
   ========================================================================== */

@layer otr-reset {
  /* box-sizing: border-box via root + inherit (avoids bare star selector) */
  .otr-page {
    box-sizing: border-box;
  }

  /* Propagate border-box to all descendants without a bare star selector */
  .otr-page section,
  .otr-page article,
  .otr-page aside,
  .otr-page main,
  .otr-page header,
  .otr-page footer,
  .otr-page nav,
  .otr-page div,
  .otr-page span,
  .otr-page a,
  .otr-page h1,
  .otr-page h2,
  .otr-page h3,
  .otr-page h4,
  .otr-page h5,
  .otr-page h6,
  .otr-page p,
  .otr-page ul,
  .otr-page ol,
  .otr-page li,
  .otr-page figure,
  .otr-page figcaption,
  .otr-page blockquote,
  .otr-page input,
  .otr-page button,
  .otr-page textarea,
  .otr-page select,
  .otr-page form,
  .otr-page label {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  /* Prevent media from overflowing their containers (Pitfall #9) */
  .otr-page img,
  .otr-page picture,
  .otr-page svg,
  .otr-page video {
    max-width: 100%;
    display: block;
    box-sizing: border-box;
  }

  /* Remove list styling — restore as needed in components */
  .otr-page ul,
  .otr-page ol {
    list-style: none;
  }

  /* Inherit font in form elements */
  .otr-page input,
  .otr-page button,
  .otr-page textarea,
  .otr-page select {
    font: inherit;
  }
}


/* ==========================================================================
   3b. Drag-to-scroll carousels
   Every carousel is a real overflow-x scroller, so touch gets native momentum
   swiping for free. OTR.dragScroll adds mouse dragging on top and sets
   .otr-dragging for the duration of the gesture.
   ========================================================================== */

.otr-hero__cards,
.otr-cases__grid,
.otr-cases__row,
.otr-reviews__track {
  cursor: grab;
  overscroll-behavior-x: contain;
}

.otr-dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
  scroll-behavior: auto; /* never fight a smooth-scroll mid-drag */
}

/* Suppress hover states and image ghosting while a drag is in progress. */
.otr-dragging a,
.otr-dragging img { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .otr-hero__cards,
  .otr-cases__grid,
  .otr-cases__row,
  .otr-reviews__track { scroll-behavior: auto; }
}

/* ==========================================================================
   4. otr-base LAYER — base/global styles scoped to .otr-page (Pattern 1)
   ========================================================================== */

@layer otr-base {
  .otr-page {
    font-family: var(--otr-font-body);
    font-size: var(--otr-fs-base);
    line-height: var(--otr-lh-normal);
    color: var(--otr-color-primary);
    background-color: var(--otr-color-bg);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  .otr-page h1,
  .otr-page h2,
  .otr-page h3,
  .otr-page h4,
  .otr-page h5,
  .otr-page h6 {
    font-family: var(--otr-font-heading);
    line-height: var(--otr-lh-tight);
    letter-spacing: var(--otr-ls-tighter);
    color: var(--otr-color-primary);
  }

  .otr-page a {
    color: var(--otr-color-accent);
    text-decoration: none;
    transition: color var(--otr-transition-fast);
  }

  .otr-page a:hover,
  .otr-page a:focus {
    color: var(--otr-color-accent-hover);
  }

  .otr-page p {
    max-width: 70ch;
    line-height: var(--otr-lh-relaxed);
  }
}


/* Global: remove browser default body margin */
html, body { margin: 0; padding: 0; }

/* Extra tokens for Home page components */
:root {
  --otr-font-heading:   "DM Sans", "OTR Heading", system-ui, sans-serif;
  --otr-font-body:      "DM Sans", "OTR Body",    system-ui, sans-serif;
  --otr-font-accent:    "Roboto Serif", Georgia, serif;
  --otr-color-bg-light: #f7f7f7;
  --otr-color-bg-warm:  #f4efea;
  --otr-fs-display:     clamp(2rem, 4.4vw, 5.3125rem);
  --otr-fs-headline:    clamp(2rem,   4vw,   4.0625rem);
  --otr-fs-section:     clamp(1.5rem, 3vw,   2.8125rem);
  --otr-fs-body-lg:     clamp(1rem,   1.5vw, 1.5625rem);
  --otr-fs-nav:         1.125rem;
  --otr-radius-card:    1.25rem;
  --otr-section-px:     clamp(1.5rem, 10.4vw, 12.4375rem);
  --otr-section-py:     clamp(4rem,   7vw,    7.5rem);
}

/* Mobile padding token — must be unlayered to beat the unlayered :root above */
@media (max-width: 767px) {
  :root { --otr-section-px: 1rem; }
}

/* ==========================================================================
   5. otr-components LAYER — all page components
   ========================================================================== */

@layer otr-components {

/* --------------------------------------------------
   BUTTONS
   -------------------------------------------------- */
.otr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(2.75rem, 4vw, 3.6875rem);
  padding: 0 clamp(1.125rem, 1.5vw, 1.75rem);
  border-radius: var(--otr-radius-full);
  font-family: var(--otr-font-body);
  font-size: clamp(0.9375rem, 1.2vw, var(--otr-fs-nav));
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: opacity 150ms ease, background 150ms ease, transform 150ms ease;
}
.otr-btn--light  { background: var(--otr-color-primary); color: var(--otr-color-bg); }
.otr-btn--light:hover  { background: #e8e4df; color: var(--otr-color-bg); }
.otr-btn--dark   { background: var(--otr-color-bg);      color: var(--otr-color-primary); font-weight: 400; }
.otr-btn--dark:hover   { opacity: .85; color: var(--otr-color-primary); }
.otr-btn--accent { background: var(--otr-color-accent); color: var(--otr-color-primary); }
.otr-btn--accent:hover { background: var(--otr-color-accent-hover); color: var(--otr-color-primary); }
.otr-btn--outline { background: transparent; color: var(--otr-color-primary); border: 1px solid var(--otr-color-primary); font-weight: 400; }
.otr-btn--outline:hover { background: rgba(244,239,234,.1); color: var(--otr-color-primary); }

.otr-btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(2.75rem, 4vw, 3.6875rem); height: clamp(2.75rem, 4vw, 3.6875rem);
  border-radius: 50%;
  text-decoration: none; cursor: pointer; border: none; flex-shrink: 0;
  transition: transform 150ms ease, opacity 150ms ease;
}
.otr-btn-circle:hover { transform: scale(1.06); }
.otr-btn-circle--light   { background: var(--otr-color-primary); color: var(--otr-color-bg); }
.otr-btn-circle--dark    { background: var(--otr-color-bg);      color: var(--otr-color-primary); }
.otr-btn-circle--outline { background: transparent; color: var(--otr-color-primary); border: 1px solid var(--otr-color-primary); }
.otr-btn-circle--accent  { background: var(--otr-color-accent); color: var(--otr-color-primary); border-color: var(--otr-color-accent); }

/* ── Paired buttons ─────────────────────────────────────────────────────────
   A text pill and its arrow circle read as one control, so hovering either has
   to drive both. On hover the two slide toward each other, closing most of the
   8px gap, and both take the same hover colour — whichever half the cursor is
   actually over.

   The pill holds its position — only the arrow circle slides toward it, closing
   most of the 8px gap so the two read as one control.

   The direction comes from document order rather than being hardcoded per
   group, because the circle sits left of the pill in some places and right of
   it in others: a circle that comes first slides right, one that comes last
   slides left.

   They stay two separate links pointing at the same href, so keyboard focus,
   middle-click and right-click still work per element.

   Deliberately not included: .otr-reviews__nav (prev and next are independent
   controls) and .otr-dienst-item__row (a list row, not a button pair).

   Browsers without :has() keep the plain per-element hover. */
:root { --otr-pair-shift: 6px; }   /* of the 8px gap, leaving a 2px seam */

/* Circle before the pill: slide right, toward it. */
:is(.otr-hero__cta-group, .otr-cta__actions, .otr-services__cta, .otr-cases__more,
    .otr-sdienst-hero__ctas, .otr-dienst-hero__cta, .otr-svac-form__actions,
    .otr-contact-form__actions):is(:has(:hover), :has(:focus-visible))
  > :is(.otr-btn-circle, .otr-hero__circle-btn):first-child {
  transform: translateX(var(--otr-pair-shift));
}
/* Circle after the pill: slide left. */
:is(.otr-hero__cta-group, .otr-cta__actions, .otr-services__cta, .otr-cases__more,
    .otr-sdienst-hero__ctas, .otr-dienst-hero__cta, .otr-svac-form__actions,
    .otr-contact-form__actions):is(:has(:hover), :has(:focus-visible))
  > :is(.otr-btn-circle, .otr-hero__circle-btn):last-child {
  transform: translateX(calc(var(--otr-pair-shift) * -1));
}
/* The pill itself never moves. */
:is(.otr-hero__cta-group, .otr-cta__actions, .otr-services__cta, .otr-cases__more,
    .otr-sdienst-hero__ctas, .otr-dienst-hero__cta, .otr-svac-form__actions,
    .otr-contact-form__actions):is(:has(:hover), :has(:focus-visible)) > .otr-btn {
  transform: none;
}

/* Same hover colour on both halves, fired from either one. */
:is(.otr-hero__cta-group, .otr-cta__actions, .otr-services__cta, .otr-cases__more,
    .otr-sdienst-hero__ctas, .otr-dienst-hero__cta, .otr-svac-form__actions,
    .otr-contact-form__actions):is(:has(:hover), :has(:focus-visible))
  :is(.otr-btn--outline, .otr-btn-circle--outline) {
  background: rgba(244,239,234,.1);
}
:is(.otr-hero__cta-group, .otr-cta__actions, .otr-services__cta, .otr-cases__more,
    .otr-sdienst-hero__ctas, .otr-dienst-hero__cta, .otr-svac-form__actions,
    .otr-contact-form__actions):is(:has(:hover), :has(:focus-visible))
  :is(.otr-btn--dark, .otr-btn-circle--dark, .otr-hero__circle-btn) {
  opacity: .85;
}
:is(.otr-hero__cta-group, .otr-cta__actions, .otr-services__cta, .otr-cases__more,
    .otr-sdienst-hero__ctas, .otr-dienst-hero__cta, .otr-svac-form__actions,
    .otr-contact-form__actions):is(:has(:hover), :has(:focus-visible))
  :is(.otr-btn--light, .otr-btn-circle--light) {
  background: #e8e4df;
}
:is(.otr-hero__cta-group, .otr-cta__actions, .otr-services__cta, .otr-cases__more,
    .otr-sdienst-hero__ctas, .otr-dienst-hero__cta, .otr-svac-form__actions,
    .otr-contact-form__actions):is(:has(:hover), :has(:focus-visible))
  :is(.otr-btn--accent, .otr-btn-circle--accent) {
  background: var(--otr-color-accent-hover);
}

.otr-tag {
  display: inline-flex; align-items: center;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--otr-radius-full);
  border: 1px solid var(--otr-color-primary);
  color: var(--otr-color-primary);
  font-size: 1rem; font-weight: 400; line-height: 1;
  white-space: nowrap;
}

/* --------------------------------------------------
   MEGA MENU
   -------------------------------------------------- */
.otr-megamenu {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--otr-color-bg-warm);
  border-radius: 0 0 var(--otr-radius-card) var(--otr-radius-card);
  z-index: 98;
  clip-path: inset(0 0 100% 0 round 0 0 1.25rem 1.25rem);
  transition: clip-path 380ms cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.otr-megamenu--open {
  clip-path: inset(0 0 0% 0 round 0 0 1.25rem 1.25rem);
  pointer-events: all;
}
.otr-megamenu__inner {
  padding: clamp(2rem,4vw,3.5rem) var(--otr-section-px) clamp(2.5rem,4vw,4rem);
}
.otr-megamenu__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem,3vw,3rem) clamp(2rem,5vw,5rem);
}
.otr-megamenu__col { display: flex; flex-direction: column; }
.otr-megamenu__label {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
  height: 3.625rem; padding: 0 1.375rem;
  border: 1px solid var(--otr-color-bg);
  border-radius: var(--otr-radius-full);
  font-size: clamp(1rem, 1.5vw, 1.5625rem); font-weight: 400;
  color: var(--otr-color-bg); text-decoration: none;
  margin-bottom: var(--otr-space-lg);
  transition: background 150ms ease, color 150ms ease;
}
.otr-megamenu__label:hover { background: var(--otr-color-bg); color: var(--otr-color-primary); }
.otr-megamenu__list { list-style: none; padding-left: 1.375rem; }
.otr-megamenu__item { border-bottom: 1px solid var(--otr-color-bg); }
.otr-megamenu__link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: clamp(0.625rem,1vw,0.875rem) 0;
  text-decoration: none; color: var(--otr-color-bg);
  transition: opacity 150ms ease;
}
.otr-megamenu__link:hover { opacity: .7; color: var(--otr-color-bg); }
.otr-megamenu__link-info { display: flex; flex-direction: column; gap: 0.2rem; }
.otr-megamenu__link-title { font-size: var(--otr-fs-nav); font-weight: 700; color: var(--otr-color-bg); }
.otr-megamenu__link-sub { font-size: var(--otr-fs-sm); color: rgba(0,33,37,.5); }
.otr-megamenu__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--otr-color-bg);
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: transparent;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.otr-megamenu__arrow svg { transition: transform 200ms ease; }
.otr-megamenu__link:hover .otr-megamenu__arrow {
  background: var(--otr-color-accent);
  color: #fff;
  transform: scale(1.05);
}
.otr-megamenu__link:hover .otr-megamenu__arrow svg { transform: rotate(45deg); }
.otr-megamenu__link:hover { opacity: 1; }

/* active "What we do" state */
.otr-nav__link--sub.otr-nav__link--active { font-weight: 700; }
.otr-nav__link--sub.otr-nav__link--active .otr-nav__chevron { transform: rotate(180deg); }
.otr-nav__chevron { transition: transform 250ms ease; }

/* --------------------------------------------------
   NAV
   -------------------------------------------------- */
.otr-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center;
  gap: var(--otr-space-xl);
  padding: 1.1875rem var(--otr-section-px);
  transition: background 250ms ease;
}
.otr-nav--scrolled,
.otr-nav--menu-open {
  background: rgba(0,33,37,.95);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(244,239,234,.06);
}
.otr-nav--dark {
  background: rgba(0,33,37,.95);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
@media (min-width: 768px) {
  .otr-nav--dark {
    left: clamp(1rem, 5.2vw, 6.25rem);
    right: clamp(1rem, 5.2vw, 6.25rem);
    top: 1.25rem;
    border-radius: 100px;
    padding-left: clamp(0.5rem, 5.2vw, 6.1875rem);
    padding-right: clamp(0.5rem, 5.2vw, 6.1875rem);
  }
}

/* WordPress admin bar. It is fixed at the top of the viewport, so anything of
   ours that is also fixed to the top has to move down by its height — otherwise
   the nav slides underneath it and the logo gets clipped. Only ever applies for
   logged-in users; on the static build .admin-bar never exists. */
.admin-bar .otr-nav          { top: 32px; }
.admin-bar .otr-mobile-menu  { top: 32px; }
@media (min-width: 768px) {
  .admin-bar .otr-nav--dark  { top: calc(1.25rem + 32px); }
}
@media screen and (max-width: 782px) {
  .admin-bar .otr-nav         { top: 46px; }
  .admin-bar .otr-mobile-menu { top: 46px; }
  .admin-bar .otr-nav--dark   { top: 46px; }
}
.otr-nav__logo img { display: block; width: 125px; height: auto; }
.otr-nav__links {
  display: flex; align-items: center;
  gap: clamp(1.25rem, 3vw, 4.5rem);
  margin-left: auto;
}
.otr-nav__link {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem); font-weight: 400;
  color: var(--otr-color-primary); text-decoration: none;
  white-space: nowrap;
  background: none; border: none; padding: 0; cursor: pointer;
  transition: opacity 150ms ease;
}
.otr-nav__link:hover { opacity: .65; color: var(--otr-color-primary); }
.otr-nav__chevron { width: .75rem; flex-shrink: 0; }
.otr-nav__actions { display: flex; align-items: center; gap: 0.5rem; }
.otr-nav__actions .otr-btn { height: 2.625rem; padding: 0 1.25rem; font-size: 0.875rem; }
.otr-nav__actions .otr-nav__lang { width: 2.625rem; height: 2.625rem; }
.otr-nav__lang {
  display: flex; align-items: center; justify-content: center;
  width: clamp(2.75rem, 4vw, 3.6875rem); height: clamp(2.75rem, 4vw, 3.6875rem);
  border-radius: 50%; border: 1px solid var(--otr-color-primary);
  background: transparent; cursor: pointer; padding: 0;
  transition: background 150ms ease;
}
.otr-nav__lang:hover { background: rgba(244,239,234,.1); }
.otr-nav__lang img { pointer-events: none; width: 20px; height: auto; }
.otr-nav__actions .otr-nav__lang img { width: 18px; }
.otr-nav__hamburger {
  display: none; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  margin-left: auto;
  background: transparent; border: none; cursor: pointer; padding: 0;
  color: var(--otr-color-primary);
  position: relative; z-index: 301;
}
.otr-icon-close { display: none; }
.otr-nav--menu-open .otr-icon-bars  { display: none; }
.otr-nav--menu-open .otr-icon-close { display: block; }

/* --------------------------------------------------
   MOBILE MENU
   -------------------------------------------------- */
.otr-mobile-menu {
  position: fixed; inset: 0; z-index: 300;
  background: var(--otr-color-bg-warm);
  transform: translateY(-105%);
  transition: transform 480ms cubic-bezier(.4,0,.2,1);
  overflow-y: auto; overflow-x: hidden;
  pointer-events: none;
  display: none;
  flex-direction: column;
}
.otr-mobile-menu--open { transform: translateY(0); pointer-events: all; }

/* top bar: logo + close */
.otr-mobile-menu__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.125rem 1.25rem;
  background: rgba(0,33,37,.98);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 1;
}
.otr-mobile-menu__logo img { display: block; }
.otr-mobile-menu__close {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--otr-color-primary);
}

.otr-mobile-menu__inner {
  display: flex; flex-direction: column; justify-content: space-between;
  flex: 1;
  padding: 2rem 1.25rem 2.5rem;
}

.otr-mobile-menu__nav { display: flex; flex-direction: column; gap: 0; flex: 1; }

.otr-mobile-menu__link {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 1rem 0;
  font-family: var(--otr-font-body);
  font-size: clamp(1.75rem, 8vw, 2.25rem);
  font-weight: 400; line-height: 1.1;
  color: var(--otr-color-bg);
  text-decoration: none;
  border: none; border-bottom: 1px solid rgba(0,33,37,.12);
  background: none; cursor: pointer;
  transition: color 150ms ease;
  letter-spacing: -0.02em;
}
.otr-mobile-menu__group { border-top: 1px solid rgba(0,33,37,.12); }
.otr-mobile-menu__link:hover { color: var(--otr-color-accent); }
.otr-mobile-menu__link--toggle { border-bottom: none; }

.otr-mobile-menu__chevron {
  flex-shrink: 0;
  color: rgba(0,33,37,.3);
  transition: transform 300ms ease;
}
.otr-mobile-menu__link--toggle[aria-expanded="true"] .otr-mobile-menu__chevron {
  transform: rotate(180deg);
  color: var(--otr-color-accent);
}

/* services accordion */
.otr-mobile-menu__sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 450ms cubic-bezier(.4,0,.2,1);
  border-bottom: 1px solid rgba(0,33,37,.12);
}
.otr-mobile-menu__sub--open { max-height: 80rem; }

.otr-mobile-menu__services {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem 1rem;
  padding: 1.25rem 0 1.75rem;
}

.otr-mobile-menu__svc-label {
  display: inline-flex; align-items: center;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: .01em;
  color: var(--otr-color-bg);
  border: 1px solid rgba(0,33,37,.3);
  border-radius: var(--otr-radius-full);
  text-decoration: none; margin-bottom: 0.625rem;
  transition: background 150ms ease, color 150ms ease;
}
.otr-mobile-menu__svc-label:hover {
  background: var(--otr-color-bg);
  color: var(--otr-color-primary);
  border-color: var(--otr-color-bg);
}

.otr-mobile-menu__svc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }

.otr-mobile-menu__svc-link {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.375rem 0;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,33,37,.06);
  transition: opacity 150ms ease;
}
.otr-mobile-menu__svc-list li:last-child .otr-mobile-menu__svc-link { border-bottom: none; }
.otr-mobile-menu__svc-link strong {
  font-size: 0.875rem; font-weight: 400; line-height: 1.2;
  color: var(--otr-color-bg);
}
.otr-mobile-menu__svc-link span {
  font-size: 0.6875rem; font-weight: 400; line-height: 1.3;
  color: rgba(0,33,37,.45);
}
.otr-mobile-menu__svc-link:hover { opacity: .6; }

/* footer */
.otr-mobile-menu__footer {
  padding-top: 2rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  border-top: 1px solid rgba(0,33,37,.12);
  margin-top: 2rem;
}
.otr-mobile-menu__footer .otr-btn { align-self: flex-start; padding-left: 1.25rem; padding-right: 1.25rem; }
.otr-mobile-menu__contacts { display: flex; flex-direction: column; gap: 0.375rem; }
.otr-mobile-menu__contact-link {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.9375rem; color: rgba(0,33,37,.5);
  text-decoration: none; transition: color 150ms ease;
}
.otr-mobile-menu__contact-link:hover { color: var(--otr-color-bg); }
.otr-mobile-menu__label {
  font-weight: 700; font-size: 0.6875rem; letter-spacing: .1em;
  color: rgba(0,33,37,.3); text-transform: uppercase;
  flex-shrink: 0; width: 1rem;
}

/* --------------------------------------------------
   HERO
   -------------------------------------------------- */
.otr-hero {
  position: relative;
  height: 80vh;
  height: 80svh;
  min-height: 600px;
  background: var(--otr-color-bg);
  overflow: hidden;
  display: flex; align-items: stretch;
}
.otr-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.otr-hero__bg-img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; opacity: .6; display: block; }

.otr-hero__inner {
  position: relative; z-index: 2;
  width: 50%;
  padding: 7.5rem var(--otr-section-px) clamp(8rem, 14vh, 12rem);
  display: flex; flex-direction: column; justify-content: center;
}
.otr-hero__title {
  font-family: var(--otr-font-body);
  font-size: var(--otr-fs-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--otr-color-primary);
  margin-bottom: var(--otr-space-2xl);
}
.otr-hero__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-hero__cta-group { display: flex; align-items: center; gap: 0.5rem; }
.otr-hero__circle-btn { display: block; width: clamp(2.75rem, 4vw, 3.6875rem); height: clamp(2.75rem, 4vw, 3.6875rem); flex-shrink: 0; transition: transform 300ms ease; }
.otr-hero__circle-btn:hover { transform: scale(1.06); }
.otr-hero__circle-btn img { display: block; width: 100%; height: 100%; }

.otr-hero__scroll {
  position: absolute; z-index: 2;
  left: var(--otr-section-px);
  bottom: 2.5rem;
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  color: var(--otr-color-primary); opacity: .8;
}
.otr-hero__scroll-text {
  writing-mode: vertical-lr;
  font-size: var(--otr-fs-nav); font-weight: 200; font-style: italic;
  font-family: var(--otr-font-accent); letter-spacing: .04em;
}
.otr-hero__scroll-arrow { display: block; }
.otr-hero__fade-right {
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 3;
  width: clamp(80px, 14vw, 220px);
  background: linear-gradient(to right, transparent, var(--otr-color-bg));
  pointer-events: none;
}

.otr-hero__cards {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 52%;
  display: flex; align-items: center;
  gap: 1.25rem;
  padding: 5rem 0 5rem 2rem;
  overflow-x: auto; scroll-snap-type: none;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  pointer-events: all; cursor: grab;
}
.otr-hero__cards::-webkit-scrollbar { display: none; }
.otr-hero__cards--dragging { cursor: grabbing; user-select: none; }
.otr-hero__card { flex: 0 0 clamp(180px, 19vw, 260px); aspect-ratio: 387/676; border-radius: var(--otr-radius-card); overflow: hidden; position: relative; transition: transform 500ms cubic-bezier(.25,.46,.45,.94); }
.otr-hero__card:hover { transform: scale(1.02); }
.otr-hero__card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.otr-hero__card-gradient {
  position: absolute; bottom: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(to bottom, transparent, var(--otr-color-bg));
  pointer-events: none;
}
.otr-hero__card-gradient--right {
  top: 0; bottom: 0; right: 0; left: auto;
  height: auto; width: 55%;
  background: linear-gradient(to right, transparent, var(--otr-color-bg));
}

/* --------------------------------------------------
   MARQUEE
   -------------------------------------------------- */
.otr-marquee {
  background: var(--otr-color-bg-warm);
  margin: -3.8125rem clamp(1rem,5.2vw,6.25rem) 0;
  border-radius: var(--otr-radius-card);
  position: relative; z-index: 10;
  overflow: hidden;
  padding: 2.4375rem 0;
}
.otr-marquee__track {
  display: flex; align-items: center;
  gap: clamp(2rem,8vw,8rem);
  animation: otr-marquee 22s linear infinite;
  width: max-content;
}
.otr-marquee__track:hover { animation-play-state: paused; }
.otr-marquee__logo { height: 2.75rem; width: auto; object-fit: contain; flex-shrink: 0; display: block; }
@keyframes otr-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------
   SERVICES / WHAT WE DO
   -------------------------------------------------- */
.otr-services {
  background: var(--otr-color-bg-light);
  padding: calc(var(--otr-section-py) + 3.8125rem + 2.5rem) 0 var(--otr-section-py);
  margin-top: -3.8125rem;
}
.otr-services__inner {
  padding: 0 var(--otr-section-px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem,5vw,6rem); align-items: start;
}
.otr-services__title {
  font-family: var(--otr-font-body);
  font-size: var(--otr-fs-display);
  font-weight: 400; line-height: 1.06; letter-spacing: -.01em;
  color: var(--otr-color-bg); margin-bottom: var(--otr-space-xl);
}
.otr-services__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-services__body { font-size: var(--otr-fs-body-lg); line-height: 1.6; color: var(--otr-color-bg); margin-bottom: var(--otr-space-xl); max-width: 32ch; }
.otr-services__prompt { font-size: var(--otr-fs-nav); color: var(--otr-color-bg); margin-bottom: var(--otr-space-lg); max-width: none; }
.otr-services__cta { display: flex; align-items: center; gap: 0.5rem; }
.otr-services__meta { font-size: var(--otr-fs-body-lg); color: rgba(0,33,37,.5); margin-bottom: var(--otr-space-lg); max-width: none; }
.otr-services__list { list-style: none; border-top: 1px solid var(--otr-color-bg); }
.otr-services__item { border-bottom: 1px solid var(--otr-color-bg); }
.otr-services__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(.875rem,1.5vw,1.375rem) 0;
  text-decoration: none; color: var(--otr-color-bg);
  transition: color 150ms ease;
}
.otr-services__text { display: flex; flex-direction: column; gap: .375rem; }
.otr-services__name { font-size: var(--otr-fs-section); font-weight: 400; line-height: 1.06; }
.otr-services__tags {
  font-size: var(--otr-fs-nav); color: rgba(0,33,37,.45);
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 250ms ease, opacity 200ms ease;
}
.otr-services__link:hover .otr-services__tags {
  max-height: 2em; opacity: 1;
}
.otr-services__arrow-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border-radius: 50%; border: 1px solid var(--otr-color-bg);
  color: var(--otr-color-bg);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.otr-services__arrow-circle svg {
  transition: transform 200ms ease;
}
.otr-services__link:hover .otr-services__arrow-circle {
  background: var(--otr-color-accent);
  border-color: var(--otr-color-accent);
  color: #fff;
}
.otr-services__link:hover .otr-services__arrow-circle svg {
  transform: rotate(45deg);
}

/* --------------------------------------------------
   CASES / PORTFOLIO
   -------------------------------------------------- */
.otr-cases { background: var(--otr-color-bg-warm); padding: var(--otr-section-py) 0; overflow: hidden; }
.otr-cases__header { padding: 0 var(--otr-section-px); text-align: center; margin-bottom: clamp(2rem,4vw,4rem); }
.otr-cases__eyebrow { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; font-size: var(--otr-fs-nav); color: var(--otr-color-bg); margin-bottom: var(--otr-space-md); max-width: none; }
.otr-cases__title { font-family: var(--otr-font-body); font-size: var(--otr-fs-headline); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; color: var(--otr-color-bg); }
.otr-cases__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }

.otr-cases__grid {
  display: flex; gap: 1.25rem;
  padding: 0 var(--otr-section-px);
  overflow-x: auto; scroll-snap-type: none;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.otr-cases__grid::-webkit-scrollbar { display: none; }
/* Desktop: rows are invisible wrappers — cards participate directly in grid flex */
.otr-cases__row { display: contents; }

.otr-case-card { flex: 0 0 clamp(220px,28vw,454px); }
.otr-case-card__link { display: block; text-decoration: none; color: inherit; }
.otr-case-card__img-wrap {
  position: relative; border-radius: var(--otr-radius-card); overflow: hidden;
  aspect-ratio: 454/676;
}
.otr-case-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.otr-case-card__link:hover .otr-case-card__img { transform: scale(1.04); }
.otr-case-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,33,37,.5) 0%, transparent 30%, transparent 55%, var(--otr-color-bg) 100%);
  pointer-events: none;
}
.otr-case-card__arrow {
  position: absolute; top: 1rem; right: 1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(244,239,234,.15); border: 1px solid rgba(244,239,234,.35);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--otr-color-primary); pointer-events: none;
}
.otr-case-card__title {
  position: absolute; top: var(--otr-space-xl); left: var(--otr-space-xl); right: var(--otr-space-xl);
  font-family: var(--otr-font-body); font-size: clamp(1.5rem,2.5vw,2.8125rem);
  font-weight: 400; line-height: 1.06; color: var(--otr-color-primary);
}
.otr-case-card__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-case-card__tags {
  position: absolute; bottom: var(--otr-space-xl); left: var(--otr-space-xl);
  display: flex; flex-wrap: wrap; gap: .5rem;
}

.otr-cases__more { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: clamp(2rem,4vw,4.5rem); padding: 0 var(--otr-section-px); }

/* --------------------------------------------------
   REVIEWS
   -------------------------------------------------- */
.otr-reviews { background: var(--otr-color-bg); padding: var(--otr-section-py) var(--otr-section-px); }
.otr-reviews__inner {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: clamp(3rem,6vw,8rem); align-items: start;
}
.otr-reviews__title { font-family: var(--otr-font-body); font-size: clamp(1.75rem, 3vw, 3.25rem); font-weight: 400; line-height: 1.18; color: var(--otr-color-primary); margin-bottom: var(--otr-space-xl); }
.otr-reviews__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-reviews__meta { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); margin-bottom: var(--otr-space-md); flex-wrap: wrap; }
.otr-reviews__count { font-size: var(--otr-fs-body-lg); color: var(--otr-color-primary); margin-bottom: 0; max-width: none; }
.otr-reviews__rating-stars { font-size: 1.25rem; color: var(--otr-color-accent); letter-spacing: .08em; white-space: nowrap; }

/* Real horizontal scroller, not a translated slider: that is what gives touch
   its native momentum swipe. The prev/next buttons scroll it by one card. */
.otr-reviews__track {
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: var(--otr-space-xl);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  cursor: grab;
}
.otr-reviews__track::-webkit-scrollbar { display: none; }
.otr-reviews__slider {
  display: flex; gap: 1.5rem;
}
.otr-reviews__nav { display: flex; gap: 1rem; }
.otr-reviews__btn { flex-shrink: 0; }
.otr-reviews__btn[disabled] { opacity: .35; cursor: default; }

.otr-review-card {
  flex: 0 0 calc(50% - 0.75rem);
  display: grid; grid-template-columns: 1fr auto; gap: var(--otr-space-lg) var(--otr-space-md);
  padding: clamp(1.5rem,2.5vw,2.5rem) clamp(1.5rem,2.5vw,2.5rem) clamp(1.5rem,2.5vw,2.5rem) 0;
  border-radius: var(--otr-radius-card);
}
.otr-review-card__logo { height: 2.5rem; width: auto; object-fit: contain; object-position: left center; display: block; grid-column: 1 / -1; grid-row: 1; align-self: center; }
.otr-review-card__stars { font-size: 1.375rem; color: var(--otr-color-accent); letter-spacing: .05em; grid-column: 1 / -1; grid-row: 2; align-self: center; white-space: nowrap; }
.otr-review-card__service { font-size: 1.5625rem; color: var(--otr-color-primary); font-weight: 400; max-width: none; grid-column: 1 / -1; }
.otr-review-card__text { font-family: var(--otr-font-body); font-size: var(--otr-fs-nav); line-height: 1.67; color: var(--otr-color-primary); max-width: none; grid-column: 1 / -1; }
.otr-review-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; grid-column: 1 / -1; }
.otr-review-card__author { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; font-size: var(--otr-fs-nav); color: var(--otr-color-primary); }
.otr-review-card__verified { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; font-size: var(--otr-fs-nav); color: var(--otr-color-accent); }

/* --------------------------------------------------
   CTA
   -------------------------------------------------- */
.otr-cta { position: relative; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; background: var(--otr-color-bg); }
.otr-cta__bg { position: absolute; inset: 0; pointer-events: none; }
.otr-cta__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center 80%; display: block; }
.otr-cta__bg-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,33,37,1) 0%, rgba(0,33,37,.95) 35%, rgba(0,33,37,.7) 60%, rgba(0,33,37,.3) 80%, rgba(0,33,37,.05) 100%); }
.otr-cta__content { position: relative; z-index: 2; text-align: center; padding: clamp(6rem,12vw,10rem) var(--otr-section-px) clamp(4rem,8vw,7rem); }
.otr-cta__title { font-family: var(--otr-font-body); font-size: var(--otr-fs-display); font-weight: 400; line-height: 1.06; letter-spacing: -.01em; color: var(--otr-color-primary); margin-bottom: var(--otr-space-2xl); }
.otr-cta__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-cta__actions { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: var(--otr-space-2xl); }
.otr-cta__contacts { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem,5vw,5rem); }
.otr-cta__contacts p { font-size: var(--otr-fs-nav); color: var(--otr-color-primary); max-width: none; }
.otr-cta__contacts a { color: var(--otr-color-primary); text-decoration: none; }
.otr-cta__contacts a:hover { color: var(--otr-color-accent); }
.otr-cta__label { color: var(--otr-color-accent); font-weight: 700; }

/* --------------------------------------------------
   FOOTER
   -------------------------------------------------- */
.otr-footer { background: transparent; position: relative; z-index: 3; }
.otr-footer__inner {
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: clamp(3rem,6vw,8rem); align-items: start;
  padding: clamp(4rem,6vw,7rem) var(--otr-section-px) clamp(3rem,4vw,5rem);
  border-bottom: 1px solid rgba(244,239,234,.2);
}
.otr-footer__logo { display: block; width: 125px; height: auto; margin-bottom: var(--otr-space-xl); }
.otr-footer__tagline { font-size: var(--otr-fs-body-lg); line-height: 1.2; color: var(--otr-color-primary); max-width: none; }
.otr-footer__tagline em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-footer__nav { display: flex; flex-direction: column; gap: var(--otr-space-lg); }
.otr-footer__nav a { font-size: var(--otr-fs-nav); font-weight: 400; color: var(--otr-color-primary); text-decoration: none; line-height: 1; transition: opacity 150ms ease; }
.otr-footer__nav a:hover { opacity: .6; color: var(--otr-color-primary); }
.otr-footer__contact { display: flex; flex-direction: column; gap: var(--otr-space-lg); }
.otr-footer__contact p { font-size: var(--otr-fs-nav); font-weight: 400; color: var(--otr-color-primary); max-width: none; }
.otr-footer__contact a { color: var(--otr-color-primary); text-decoration: none; }
.otr-footer__contact a:hover { color: var(--otr-color-accent); }
.otr-footer__label { color: var(--otr-color-accent); font-weight: 700; }
.otr-footer__address { font-style: normal; font-size: var(--otr-fs-nav); font-weight: 400; line-height: 1.8; color: var(--otr-color-primary); }
.otr-footer__social-grid { display: flex; gap: .5rem; }
.otr-footer__social-dot { display: flex; align-items: center; justify-content: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: rgba(217,217,217,.2); flex-shrink: 0; color: var(--otr-color-primary); transition: background 150ms ease; }
.otr-footer__social-dot:hover { background: rgba(217,217,217,.35); }
.otr-footer__social-dot svg { width: 1rem; height: 1rem; display: block; }
.otr-footer__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--otr-space-xl); }
.otr-footer__certified { display: block; }
.otr-footer__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--otr-space-xl);
  padding: var(--otr-space-xl) var(--otr-section-px);
  border-top: 1px solid rgba(244,239,234,.2);
  background: var(--otr-color-bg);
}
.otr-footer__copy { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-size: 0.8125rem; font-weight: 300; color: var(--otr-color-primary); max-width: none; }
.otr-footer__copy a { color: var(--otr-color-primary); text-decoration: none; }
.otr-footer__copy a:hover { color: var(--otr-color-accent); }
.otr-footer__credit { font-size: 0.8125rem; font-weight: 300; color: var(--otr-color-primary); max-width: none; white-space: nowrap; }

/* --------------------------------------------------
   RESPONSIVE
   -------------------------------------------------- */

/* Short viewport */
@media (max-height: 720px) {
  .otr-hero { min-height: 560px; }
}

/* Tablet ≤ 1023px */
@media (max-width: 1023px) {
  .otr-nav__actions > .otr-btn { padding-left: 0.875rem; padding-right: 0.875rem; font-size: 0.875rem; }
  .otr-hero__inner      { width: 100%; padding-right: var(--otr-section-px); }
  .otr-hero__cards      { display: none; }
  .otr-hero__fade-right { display: none; }

  .otr-services__inner  { grid-template-columns: 1fr; }

  .otr-reviews__inner   { grid-template-columns: 1fr; gap: var(--otr-space-2xl); }

  .otr-footer__inner    { grid-template-columns: 1fr 1fr; }
}

/* Mobile ≤ 767px */
@media (max-width: 767px) {
  :root { --otr-section-px: 1rem; }

  /* Nav */
  .otr-nav                      { padding-left: 1rem; padding-right: 1rem; }
  .otr-nav__links               { display: none; }
  .otr-nav__actions > .otr-btn  { display: none; }
  .otr-nav__lang                { display: none; }
  .otr-nav__hamburger           { display: flex; }
  .otr-mobile-menu              { display: flex; }

  /* Hero — Figma: 745px tall, title@108px, btn@311px, cards@420px */
  .otr-hero {
    height: 745px;
    min-height: unset;
    flex-direction: column;
    overflow: hidden;
    position: relative;
  }
  .otr-hero__inner {
    position: relative; z-index: 2;
    width: 100%;
    padding: 108px 1.875rem 0;
    text-align: center;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    gap: 2.375rem;
  }
  .otr-hero__title      { font-size: 2.8125rem; line-height: 1.22; margin-bottom: 0; }
  .otr-hero__cta-group  { justify-content: center; margin-top: 0; padding-bottom: 0; }
  .otr-hero__cta-group .otr-btn { padding-left: 1.5rem; padding-right: 1.5rem; }
  .otr-hero__circle-btn { display: none; }
  .otr-hero::before,
  .otr-hero::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 3rem; z-index: 4; pointer-events: none;
  }
  .otr-hero::before { left: 0; background: linear-gradient(90deg, var(--otr-color-bg) 0%, transparent 100%); }
  .otr-hero::after  { right: 0; background: linear-gradient(-90deg, var(--otr-color-bg) 0%, transparent 100%); }

  /* Cards — absolute, exact Figma position */
  .otr-hero__cards {
    display: flex;
    position: absolute;
    top: 420px;
    bottom: auto;
    left: 0;
    right: auto;
    width: 100%;
    height: 242px;
    padding: 0;
    gap: 10px;
    align-items: stretch;
    /* Must stay a scroller on mobile, otherwise the strip cannot be swiped —
       overflow:hidden here silently killed the touch gesture. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
  }
  .otr-hero__cards::-webkit-scrollbar { display: none; }
  .otr-hero__card { flex: 0 0 163px; height: 242px; }

  /* Marquee: no overlap on mobile (Figma: starts at exact hero bottom) */
  .otr-marquee { margin-left: 0; margin-right: 0; border-radius: 0; margin-top: 0; }
  /* Services: reset desktop overlap, reduce gap after marquee */
  .otr-services { margin-top: 0; padding-top: clamp(2.5rem, 6vw, 4rem); }
  .otr-services__link { padding: 1.375rem 0; }
  .otr-services__name { font-size: 2.1875rem; }

  .otr-cases__grid {
    display: flex; flex-direction: column; gap: 0.75rem;
    overflow-x: visible; padding: 0;
  }
  .otr-cases__grid > .otr-case-card { display: none; }
  .otr-cases__row {
    display: flex; gap: 0.75rem;
    overflow-x: auto; scroll-snap-type: none;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 0 1rem;
  }
  .otr-cases__row::-webkit-scrollbar { display: none; }
  .otr-cases__row--offset { padding-left: 1.5rem; }
  .otr-case-card { flex: 0 0 75vw; scroll-snap-align: start; }

  .otr-reviews__inner  { display: block; }
  .otr-reviews__left   { text-align: center; padding-bottom: var(--otr-space-md); }
  .otr-reviews__title  { font-size: 2.8125rem; margin-bottom: var(--otr-space-lg); }
  .otr-cases__title    { font-size: 2.8125rem; }
  .otr-services__title { font-size: 2.8125rem; }
  .otr-reviews__meta   { justify-content: center; margin-bottom: 0; }
  .otr-reviews__nav    { justify-content: center; margin-top: var(--otr-space-xl); gap: 1.25rem; }
  .otr-reviews__btn    { width: 3.75rem; height: 3.75rem; }
  .otr-review-card     { flex: 0 0 80vw; }

  .otr-cta { min-height: 0; }
  .otr-cta__bg { bottom: auto; height: 55vh; }
  .otr-cta__bg-overlay { background: linear-gradient(to bottom, rgba(0,33,37,1) 0%, rgba(0,33,37,.75) 20%, rgba(0,33,37,.55) 45%, rgba(0,33,37,.85) 70%, rgba(0,33,37,1) 100%); }
  .otr-cta__content  { padding-top: 3rem; padding-bottom: 3rem; }
  .otr-cta__title    { font-size: clamp(2.5rem, 12vw, var(--otr-fs-display)); margin-bottom: var(--otr-space-xl); }
  .otr-cta__actions  { margin-bottom: var(--otr-space-xl); flex-wrap: wrap; justify-content: center; }
  .otr-cta__contacts { flex-direction: column; gap: var(--otr-space-md); }

  .otr-footer__inner {
    grid-template-columns: auto 1fr;
    gap: var(--otr-space-md) clamp(1.5rem, 8vw, 3rem);
  }
  .otr-footer__logo    { margin-bottom: 0; }
  .otr-footer__brand   { display: contents; }
  .otr-footer__brand > a { grid-column: 1; grid-row: 1; align-self: start; }
  .otr-footer__tagline { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0; font-size: 1.5625rem; line-height: 1.2; }
  .otr-footer__nav     { grid-column: 1; grid-row: 2; align-self: start; }
  .otr-footer__meta    { grid-column: 2; grid-row: 2; align-self: start; align-items: flex-start; }
  .otr-footer__contact { grid-column: 1 / -1; grid-row: 3; gap: 0.25rem; margin-top: var(--otr-space-xl); }
  .otr-footer__address { margin-top: var(--otr-space-sm); }
  .otr-footer__bottom  { flex-direction: column; align-items: flex-start; gap: var(--otr-space-sm); }
}

/* Small mobile ≤ 480px */
@media (max-width: 480px) {
  .otr-hero__cta-group { flex-wrap: wrap; }
  .otr-hero__cta-group { gap: 0.375rem; }
}

}


/* ==========================================================================
   6. otr-utilities LAYER — reserved for utility classes (Phase 2+)
   ========================================================================== */

@layer otr-utilities {
  /* Visually hidden (accessible hidden — screen-reader visible) */
  .otr-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}


/* ==========================================================================
   7. @font-face PLACEHOLDERS (SETUP-04, Pattern 4)

   PHASE 1: Metric-matched SYSTEM FONT placeholders only.
   No real WOFF2 files exist yet — client font delivery is deferred.
   Phase 1 ships with local() system fonts using size-adjust/ascent-override
   to minimize CLS when real fonts are swapped in.

   When client delivers WOFF2 files:
   1. Add WOFF2 files to assets/fonts/
   2. Uncomment the real @font-face blocks below
   3. Tune size-adjust + ascent-override to match the specific metrics of the
      delivered typeface (numbers below are starting-point estimates)
   4. Add <link rel="preload" as="font" type="font/woff2" crossorigin
          href="assets/fonts/otr-heading-700.woff2"> for the 1-2 critical weights
      (DO NOT preload until WOFF2 files exist — double-download risk)
   ========================================================================== */

/* --- PLACEHOLDER: metric-matched heading fallback (Phase 1) --- */
@font-face {
  font-family: "OTR Heading Fallback";
  src: local("Arial Black"), local("Arial");
  size-adjust: 98%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* --- PLACEHOLDER: metric-matched body fallback (Phase 1) --- */
@font-face {
  font-family: "OTR Body Fallback";
  src: local("Arial"), local("Helvetica");
  size-adjust: 100%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* ==========================================================================
   DIENST PAGE — what-we-do.html
   ========================================================================== */

.otr-page--light { background: #fff; }

/* HERO */
.otr-dienst-hero {
  position: relative;
  min-height: clamp(60vh, 70vh, 80vh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--otr-color-bg);
}
.otr-dienst-hero__bg { position: absolute; inset: 0; }
.otr-dienst-hero__bg-img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.otr-dienst-hero__bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,33,37,1) 0%, rgba(0,33,37,.95) 28%, rgba(0,33,37,.5) 52%, rgba(0,33,37,0) 72%);
}
.otr-dienst-hero__content {
  position: relative; z-index: 2;
  padding: clamp(9rem,14vw,13rem) var(--otr-section-px) clamp(9rem,14vw,13rem);
  max-width: 65%;
}
.otr-dienst-hero__title {
  font-size: var(--otr-fs-display); font-weight: 400;
  color: var(--otr-color-primary); line-height: 1.06;
  margin-bottom: var(--otr-space-xl);
}
.otr-dienst-hero__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-dienst-hero__body {
  font-size: var(--otr-fs-nav); color: var(--otr-color-primary);
  line-height: 1.67; margin-bottom: var(--otr-space-3xl);
  max-width: 42ch; opacity: .85;
}
.otr-dienst-hero__cta { display: flex; align-items: center; gap: 0.5rem; }

/* DIENSTEN GRID */
.otr-dienst-grid {
  background: #fff;
  padding: clamp(5rem,9vw,9rem) var(--otr-section-px);
}
.otr-dienst-grid__title {
  font-size: var(--otr-fs-display); font-weight: 400;
  color: var(--otr-color-bg); line-height: 1.0;
  margin-bottom: clamp(3rem,5vw,5rem);
}
.otr-dienst-grid__title em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-dienst-grid__list {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem,5vw,6rem);
  list-style: none; padding: 0; margin: 0;
}
.otr-dienst-item {
  padding: clamp(2rem,3.5vw,3.5rem) 0;
  border-bottom: 1px solid var(--otr-color-bg);
}
.otr-dienst-item__name {
  font-size: clamp(1.75rem,2.5vw,2.8125rem); font-weight: 400;
  color: var(--otr-color-bg); line-height: 1.1;
  margin-bottom: var(--otr-space-xl);
}
.otr-dienst-item__row {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: var(--otr-space-xl);
}
.otr-dienst-item__body {
  font-size: var(--otr-fs-nav); color: var(--otr-color-bg);
  line-height: 1.67; flex: 1; opacity: .7;
}
.otr-dienst-item { position: relative; cursor: pointer; }
.otr-dienst-item .otr-btn-circle { flex-shrink: 0; align-self: center; }
.otr-dienst-item .otr-btn-circle--outline {
  color: var(--otr-color-bg);
  border-color: var(--otr-color-bg);
}
/* stretch the circle link across the whole item so the full row is clickable */
.otr-dienst-item .otr-btn-circle::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
/* hover whole item -> fill button blue (pointer devices only, avoids stuck hover on touch) */
@media (hover: hover) {
  .otr-dienst-item:hover .otr-btn-circle--outline {
    background: var(--otr-color-accent);
    border-color: var(--otr-color-accent);
    color: var(--otr-color-primary);
  }
}

/* --------------------------------------------------
   SINGLE DIENST — wrapper + hero + floating image + media
   -------------------------------------------------- */

/* Wrapper — custom props als single source of truth voor hero/float sizing */
.otr-sdienst-top {
  position: relative;
  --_hero-h:   clamp(480px, 44vw, 646px);
  --_hero-pt:  clamp(9rem, 14vw, 13rem);
  --_media-pt: clamp(5rem, 9vw, 9rem);
}

/* Hero: full-width, zelfde dark teal bg als homepage */
.otr-sdienst-hero {
  background: var(--otr-color-bg);
  position: relative; overflow: hidden;
  padding: var(--_hero-pt) var(--otr-section-px) clamp(5rem,10vw,9rem);
  min-height: var(--_hero-h);
}
.otr-sdienst-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
}
.otr-sdienst-hero__bg-img {
  width: 100%; height: 100%; object-fit: cover; mix-blend-mode: lighten; display: block;
}
.otr-sdienst-hero__content {
  position: relative; z-index: 2;
  /* tekst eindigt altijd aan linkerkant van float; min 260px zodat het nooit te smal wordt */
  max-width: max(260px, calc(100% - (var(--_hero-h) + var(--_media-pt) - var(--_hero-pt)) - clamp(2rem, 4vw, 4rem)));
}
.otr-sdienst-hero__title {
  font-family: var(--otr-font-body); font-size: var(--otr-fs-display);
  font-weight: 400; line-height: 1.05; letter-spacing: -.02em;
  color: var(--otr-color-primary); margin: 0 0 var(--otr-space-lg);
}
.otr-sdienst-hero__body {
  font-size: var(--otr-fs-body); line-height: 1.65;
  color: var(--otr-color-primary); opacity: .85;
  margin: 0 0 var(--otr-space-xl);
}
.otr-sdienst-hero__ctas { display: flex; align-items: center; gap: 0.5rem; }

/* Floating product image — overlapt hero + media via absolute + pointer-events none */
.otr-sdienst-float {
  position: absolute;
  right: var(--otr-section-px);
  top: var(--_hero-pt); /* = hero padding-top, H1 bovenrand */
  /* width/height gekoppeld: bottom = hero_h + media_pt → lijnt uit met video card top */
  width: calc(var(--_hero-h) + var(--_media-pt) - var(--_hero-pt));
  height: calc(var(--_hero-h) + var(--_media-pt) - var(--_hero-pt)); /* 1:1 */
  border-radius: var(--otr-radius-card);
  overflow: hidden;
  z-index: 5;
  pointer-events: none;
}
.otr-sdienst-float__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Media sectie: 2 kolommen, beige bg */
.otr-sdienst-media {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--otr-color-primary);
}
.otr-sdienst-media__left {
  padding: var(--_media-pt) clamp(1rem,2vw,2rem) var(--_media-pt) var(--otr-section-px);
}
.otr-sdienst-media__video {
  position: relative; overflow: hidden;
  background: var(--otr-color-bg);
  border-radius: var(--otr-radius-card);
  height: clamp(320px, 40vw, 652px);
}
.otr-sdienst-media__thumb {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.otr-sdienst-media__overlay {
  position: absolute; inset: 0; background: rgba(0,33,37,.92);
}
.otr-sdienst-media__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: var(--otr-color-primary);
}
.otr-sdienst-media__play svg { width: 64px; height: 64px; opacity: .7; transition: opacity 200ms; }
.otr-sdienst-media__play:hover svg { opacity: 1; }

/* Rechts: tekst op zelfde hoogte als video card top */
.otr-sdienst-media__right {
  display: flex; flex-direction: column; justify-content: center;
  /* padding-left = linkerkant float = 50vw - section_px - float_breedte */
  padding: var(--_media-pt) var(--otr-section-px) var(--_media-pt)
    max(1.5rem, calc(50vw - var(--otr-section-px) - (var(--_hero-h) + var(--_media-pt) - var(--_hero-pt))));
}
.otr-sdienst-media__quote {
  font-family: var(--otr-font-body); font-size: clamp(3rem,5.5vw,5.3125rem);
  font-weight: 400; line-height: 1.05; letter-spacing: -.02em;
  color: var(--otr-color-bg); margin: 0 0 var(--otr-space-lg);
}
.otr-sdienst-media__quote em {
  font-family: var(--otr-font-accent); font-style: italic; font-weight: 300;
}
.otr-sdienst-media__body {
  font-size: var(--otr-fs-body); line-height: 1.65; color: var(--otr-color-bg); margin: 0;
}

/* SINGLE DIENST — Het proces */
.otr-proces {
  background: var(--otr-color-bg);
  padding: var(--otr-section-py) 0;
  overflow: hidden;
}
.otr-proces__header {
  padding: 0 var(--otr-section-px);
  margin-bottom: clamp(1.5rem,3vw,3rem);
}
.otr-proces__title {
  font-family: var(--otr-font-body); font-size: var(--otr-fs-display);
  font-weight: 400; letter-spacing: -.02em; color: var(--otr-color-primary);
  margin: 0;
}
.otr-proces__title em {
  font-family: var(--otr-font-accent); font-style: italic; font-weight: 300;
}

.otr-proces__steps {
  position: relative;
  padding: 0 var(--otr-section-px);
}
.otr-proces__centerline {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; transform: translateX(-50%);
  pointer-events: none;
}
.otr-proces__centerline-track {
  position: absolute; inset: 0;
  background: var(--otr-color-primary); opacity: .25;
}
.otr-proces__centerline-progress {
  position: absolute; top: 0; left: -2px;
  height: 0; width: 5px;
  background: var(--otr-color-accent);
  will-change: height;
}
.otr-proces__centerline-marker {
  position: absolute; bottom: -8px; left: 50%;
  width: 14px; height: 14px;
  background: var(--otr-color-bg); /* dekt blauwe lijn af */
  border: 4px solid var(--otr-color-bg-warm);
  transform-origin: center center;
  transform: translateX(-50%) rotate(45deg);
  will-change: transform;
}

.otr-proces__step {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(2rem,4vw,3.5rem) 0;
}
.otr-proces__step-spacer { display: none; }

/* Links: content groeit, circle rechts ervan — allebei in linker helft */
.otr-proces__step--left {
  padding-right: calc(50% + clamp(2rem, 3vw, 3.5rem));
}
.otr-proces__step--left .otr-proces__step-content { flex: 1; order: 1; }
.otr-proces__step--left .otr-proces__step-num     { order: 2; flex-shrink: 0; }

/* Rechts: circle links, content groeit rechts ervan — allebei in rechter helft */
.otr-proces__step--right {
  padding-left: calc(50% + clamp(2rem, 3vw, 3.5rem));
}
.otr-proces__step--right .otr-proces__step-content { flex: 1; order: 2; }
.otr-proces__step--right .otr-proces__step-num     { order: 1; flex-shrink: 0; }

.otr-proces__step-title {
  font-family: var(--otr-font-body); font-size: clamp(1.75rem,3.5vw,2.8125rem);
  font-weight: 400; line-height: 1.1; color: var(--otr-color-primary);
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
}
.otr-proces__step-title em {
  font-family: var(--otr-font-accent); font-style: italic; font-weight: 300;
}
.otr-proces__step-rule {
  border: none; border-top: 2px solid rgba(244,239,234,.35);
  margin: 1.25rem 0 0;
}
.otr-proces__step-body {
  font-size: var(--otr-fs-body); line-height: 1.65;
  color: var(--otr-color-primary); opacity: .75; margin: 0;
}
.otr-proces__step-num {
  width: 44px; height: 44px; border: 1px solid rgba(244,239,234,.4);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--otr-color-bg);
  position: relative; z-index: 2;
  align-self: start;
  margin-top: calc(clamp(1.75rem, 3.5vw, 2.8125rem) * 1.1 + clamp(1rem, 2vw, 1.5rem) + 0.5rem);
}
.otr-proces__step-num span {
  font-family: var(--otr-font-accent); font-style: italic;
  font-size: 1.5rem; line-height: 1; color: var(--otr-color-primary);
}

.otr-proces__cta {
  display: flex; align-items: center; gap: 0.5rem;
  padding: clamp(3rem,6vw,5rem) var(--otr-section-px) 0;
  justify-content: center;
}

/* Single dienst + proces mobile */
@media (max-width: 767px) {
  .otr-sdienst-float { display: none; }

  .otr-sdienst-media { grid-template-columns: 1fr; }
  .otr-sdienst-media__left { padding: var(--otr-space-xl) var(--otr-section-px) 0; }
  .otr-sdienst-media__video { height: 240px; }
  .otr-sdienst-media__right {
    justify-content: flex-start;
    padding: var(--otr-space-xl) var(--otr-section-px);
  }

  .otr-proces__steps { padding: 0 var(--otr-section-px); }

  /* Mobile: rij — circle links, content rechts, lijn door circles */
  .otr-proces__step,
  .otr-proces__step--left,
  .otr-proces__step--right {
    flex-direction: row;
    align-items: flex-start;
    padding-left: 0;
    padding-right: 0;
    gap: 1.25rem;
  }
  .otr-proces__step--left .otr-proces__step-num,
  .otr-proces__step--right .otr-proces__step-num {
    order: 1;
    flex-shrink: 0;
    margin-top: 0; /* reset desktop offset */
  }
  .otr-proces__step--left .otr-proces__step-content,
  .otr-proces__step--right .otr-proces__step-content {
    order: 2;
    flex: 1;
  }

  /* Centerlijn door midden van 44px circle: section-px + 22px */
  .otr-proces__centerline {
    left: calc(var(--otr-section-px) + 22px);
    transform: translateX(-50%);
  }
}

/* CASES LIGHT VARIANT */
.otr-cases--light { background: var(--otr-color-primary); }
.otr-cases--light .otr-cases__eyebrow { color: var(--otr-color-bg); opacity: .5; }
.otr-cases--light .otr-cases__title { color: var(--otr-color-bg); }
.otr-cases--light .otr-cases__title em { color: var(--otr-color-bg); }

/* Infinite scroll grid: stack rows vertically, each row is its own scrollable strip */
.otr-cases__infinite-grid {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 0;
}
.otr-cases__infinite-grid .otr-cases__row {
  display: flex; flex-direction: row; gap: 0.75rem;
  overflow-x: auto; scrollbar-width: none;
  padding: 0; flex: none;
}
.otr-cases__infinite-grid .otr-cases__row::-webkit-scrollbar { display: none; }
.otr-cases__infinite-grid .otr-case-card { flex: 0 0 clamp(220px, 28vw, 454px); }

/* FILTER TABS */
.otr-cases__filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: center;
  padding: 0 var(--otr-section-px);
  margin-bottom: var(--otr-space-xl);
}
.otr-cases__filter {
  padding: 0.5rem 1.25rem; border-radius: 999px;
  border: 1px solid var(--otr-color-bg);
  background: transparent; color: var(--otr-color-bg);
  font-family: var(--otr-font-body); font-size: var(--otr-fs-sm);
  cursor: pointer; transition: background 150ms ease, color 150ms ease;
}
.otr-cases__filter:hover { background: rgba(0,33,37,.08); }
.otr-cases__filter--active { background: var(--otr-color-bg); color: var(--otr-color-primary); }
/* An active filter must not react to hover — you are already on it. Needed
   explicitly because :hover on the base class (0,2,0) outweighs the single
   --active class (0,1,0), so the hover tint would win and land behind the
   light active text. */
.otr-cases__filter--active:hover { background: var(--otr-color-bg); color: var(--otr-color-primary); }

/* MOBILE — dienst page */
@media (max-width: 767px) {
  .otr-break-desktop { display: none; }
  .otr-dienst-hero__content { max-width: 100%; padding-top: 8rem; }
  .otr-dienst-hero__title { font-size: clamp(2.5rem,10vw,4rem); }
  .otr-dienst-grid { padding-left: var(--otr-section-px); padding-right: var(--otr-section-px); }
  .otr-dienst-grid__title { font-size: clamp(2.5rem,10vw,4rem); }
  .otr-dienst-grid__list { grid-template-columns: 1fr; }
  .otr-dienst-item { border-bottom-width: 0.5px; }
  .otr-dienst-item__name { font-size: 2.1875rem; }
  .otr-cases--light .otr-cases__filters { padding-left: var(--otr-section-px); padding-right: var(--otr-section-px); }
  .otr-cases__infinite-grid .otr-case-card { flex: 0 0 75vw; }
}

/* --------------------------------------------------
   WORK / CASES OVERVIEW PAGE
   -------------------------------------------------- */

/* Active nav link (non-sub) */
.otr-nav__link--active:not(.otr-nav__link--sub) { font-weight: 700; }

/* Hero */
.otr-work-hero {
  position: relative; z-index: 0;
  background: var(--otr-color-bg);
  overflow: hidden;
  padding: clamp(8rem,14vw,13rem) var(--otr-section-px) clamp(20rem,30vw,26rem);
}
.otr-work-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.otr-work-hero__bg-img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: lighten; opacity: 0.55;
}
.otr-work-hero__title {
  font-family: var(--otr-font-body);
  font-size: clamp(2.5rem, 6vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--otr-color-primary);
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
}
.otr-work-hero__title em {
  font-family: var(--otr-font-accent);
  font-style: italic; font-weight: 300;
}

/* Filter pills */
.otr-work-filters {
  display: flex; flex-wrap: wrap;
  gap: clamp(0.4rem, 0.75vw, 0.75rem);
}
.otr-work-filter {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: clamp(2.75rem, 4vw, 3.6875rem);
  padding: 0 clamp(1rem, 1.5vw, 1.5rem);
  border-radius: var(--otr-radius-full);
  border: 1px solid rgba(244,239,234,0.35);
  background: transparent;
  color: var(--otr-color-primary);
  font-family: var(--otr-font-body);
  font-size: clamp(0.875rem, 1.1vw, var(--otr-fs-nav));
  font-weight: 400; white-space: nowrap; cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, opacity 200ms ease;
}
.otr-work-filter:hover {
  border-color: var(--otr-color-accent);
  background: rgba(244,239,234,0.08);
}
.otr-work-filter--active {
  border-color: var(--otr-color-primary);
  background: rgba(244,239,234,0.12);
}
/* Same specificity fix as .otr-cases__filter--active above: hold the active
   look while hovered instead of letting the base hover tint through. */
.otr-work-filter--active:hover {
  border-color: var(--otr-color-primary);
  background: rgba(244,239,234,0.12);
}
.otr-work-filter__x {
  display: none;
  position: relative; width: 0.75rem; height: 0.75rem; flex-shrink: 0;
}
.otr-work-filter__x::before,
.otr-work-filter__x::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 0.75rem; height: 1.5px; background: currentColor;
  border-radius: 1px; transform-origin: center center;
}
.otr-work-filter__x::before { transform: translate(-50%,-50%) rotate(45deg); }
.otr-work-filter__x::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.otr-work-filter--active .otr-work-filter__x { display: block; }
.otr-work-filter--clear { border-color: transparent; opacity: 0.55; }
.otr-work-filter--clear:hover { opacity: 1; border-color: rgba(244,239,234,0.35); }

/* Grid wrapper */
.otr-work-grid-wrap {
  background: var(--otr-color-bg-warm);
  padding: clamp(3rem, 5vw, 6rem) var(--otr-section-px) clamp(1rem, 1.5vw, 2rem);
}
.otr-work-grid-wrap--overlap {
  position: relative; z-index: 1;
  margin-top: -22rem;
  background: linear-gradient(to bottom, transparent 22rem, var(--otr-color-bg-warm) 22rem);
}
.otr-work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 1.25vw, 1.5rem);
}
.otr-work-item--full { grid-column: 1 / -1; }

/* Case item */
.otr-work-item__link { display: block; text-decoration: none; }
.otr-work-item__img-wrap {
  border-radius: var(--otr-radius-card);
  overflow: hidden; position: relative;
  aspect-ratio: 750 / 804;
}
.otr-work-item--full .otr-work-item__img-wrap { aspect-ratio: 1520 / 804; }
.otr-work-item__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 500ms ease;
}
.otr-work-item__link:hover .otr-work-item__img { transform: scale(1.04); }

/* CTA overlay (pill + circle) on case image */
.otr-work-item__cta-wrap {
  position: absolute; bottom: clamp(0.75rem,1.5vw,1.25rem); left: clamp(0.75rem,1.5vw,1.25rem);
  display: inline-flex; align-items: center; gap: 0.375rem;
  pointer-events: none; user-select: none;
  transition: transform 250ms ease;
}
.otr-work-item__cta {
  display: inline-flex; align-items: center;
  height: 2.625rem; padding: 0 1.25rem;
  border-radius: var(--otr-radius-full);
  border: 1px solid var(--otr-color-primary);
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff;
  font-family: var(--otr-font-body); font-size: 0.875rem;
  font-weight: 400; white-space: nowrap; line-height: 1;
}
.otr-work-item__cta-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.625rem; height: 2.625rem;
  border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--otr-color-primary);
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff;
}
.otr-work-item__link:hover .otr-work-item__cta-wrap { transform: translateY(-3px); }

/* Meta below image */
.otr-work-item__meta {
  padding: clamp(1.25rem, 2vw, 2rem) 0 clamp(2rem, 4vw, 4.5rem);
}
.otr-work-item__top {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
}
.otr-work-item__brand {
  font-family: var(--otr-font-accent);
  font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.5625rem);
  color: var(--otr-color-bg); line-height: 1; margin: 0; white-space: nowrap;
}
.otr-work-item__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.otr-work-item__tag {
  display: inline-flex; align-items: center;
  height: 2.5rem; padding: 0 1rem;
  border-radius: var(--otr-radius-full);
  border: 1px solid var(--otr-color-bg);
  color: var(--otr-color-bg);
  font-family: var(--otr-font-body);
  font-size: clamp(0.875rem, 1vw, var(--otr-fs-nav));
  font-weight: 400; line-height: 1; white-space: nowrap;
}
.otr-work-item__title {
  font-family: var(--otr-font-body);
  font-size: clamp(1.75rem, 3.5vw, 4.0625rem);
  font-weight: 400; line-height: 1.23; letter-spacing: -0.01em;
  color: var(--otr-color-bg); margin: 0;
}

/* No results */
.otr-work-empty {
  text-align: center; padding: 4rem 0;
  color: var(--otr-color-bg); font-size: var(--otr-fs-lg);
  margin: 0;
}

.otr-work-grid-wrap--light { background: #ffffff; padding-top: clamp(3rem, 5vw, 6rem); padding-bottom: clamp(3rem, 5vw, 6rem); }

/* Dark section: cases 4-6 + quote. Gradient fades in ~20% from top of case 4. */
.otr-work-grid-wrap--dark {
  padding-top: 0;
  background-color: var(--otr-color-bg);
  background-image:
    linear-gradient(to bottom, var(--otr-color-bg-warm) 7%, transparent 7%),
    url('../assets/images/cases/backgroundcasesnew.jpg');
  background-blend-mode: normal, lighten;
  background-size: 100% auto, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: top, center top;
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}
.otr-work-grid-wrap--dark .otr-work-grid,
.otr-work-grid-wrap--dark .otr-work-quote { position: relative; z-index: 1; }
.otr-work-grid-wrap--dark .otr-work-item__brand,
.otr-work-grid-wrap--dark .otr-work-item__title { color: var(--otr-color-primary); }
.otr-work-grid-wrap--dark .otr-work-item__tag {
  color: var(--otr-color-primary); border-color: rgba(244,239,234,0.35);
}

/* Quote / testimonial */
.otr-work-quote {
  position: relative; z-index: 1;
  padding: clamp(5rem, 9vw, 10rem) var(--otr-section-px);
  text-align: center;
}
.otr-work-quote__inner { position: relative; max-width: 70rem; margin: 0 auto; }
.otr-work-quote__inner::before,
.otr-work-quote__inner::after {
  position: absolute; font-family: var(--otr-font-accent); font-style: normal; font-weight: 400;
  font-size: clamp(8rem, 16vw, 16rem); line-height: 1;
  color: var(--otr-color-accent); opacity: 0.1; pointer-events: none;
}
.otr-work-quote__inner::before { content: '\201C'; top: -3rem; left: 0rem; }
.otr-work-quote__inner::after  { content: '\201D'; top: calc(100% - 3rem); right: 1rem; }
.otr-work-quote__text {
  font-family: var(--otr-font-body);
  font-size: clamp(1.5rem, 2.8vw, 2.8125rem);
  font-weight: 400; line-height: 1.35;
  color: var(--otr-color-primary); margin: 0; max-width: none;
}
.otr-work-quote__text em {
  font-family: var(--otr-font-accent);
  font-style: italic; font-weight: 300;
}
.otr-work-quote--light {
  padding-top: clamp(7rem, 12vw, 12rem);
  padding-bottom: clamp(10rem, 16vw, 16rem);
}
.otr-work-quote--light .otr-work-quote__inner {
  max-width: 52rem;
}
.otr-work-quote--light .otr-work-quote__text {
  color: var(--otr-color-bg);
}

/* --------------------------------------------------
   SINGLE CASE PAGE
   -------------------------------------------------- */

/* Hero */
.otr-case-hero {
  position: relative;
  background: var(--otr-color-bg);
  padding: clamp(8rem,13vw,12rem) var(--otr-section-px) clamp(18rem, 28vw, 28rem);
}
.otr-case-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.otr-case-hero__bg-img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: lighten; opacity: 0.55;
}
.otr-case-hero__meta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.75rem; margin-bottom: clamp(1rem, 2vw, 2rem);
  position: relative; z-index: 2;
}
.otr-case-hero__brand {
  font-family: var(--otr-font-accent);
  font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.5625rem);
  color: var(--otr-color-primary); margin: 0; line-height: 1; white-space: nowrap;
}
.otr-case-hero__tag {
  display: inline-flex; align-items: center;
  height: 2.5rem; padding: 0 1rem;
  border-radius: var(--otr-radius-full);
  border: 1px solid var(--otr-color-primary);
  color: var(--otr-color-primary);
  font-family: var(--otr-font-body);
  font-size: clamp(0.875rem, 1vw, var(--otr-fs-nav));
  font-weight: 400; line-height: 1; white-space: nowrap;
}
.otr-case-hero__title {
  font-family: var(--otr-font-body);
  font-size: clamp(2rem, 3.5vw, 4.0625rem);
  font-weight: 400; line-height: 1.23; letter-spacing: -0.01em;
  color: var(--otr-color-primary); margin: 0;
  position: relative; z-index: 2;
}

/* Hero image: sits at bottom of dark section, extends into light below */
.otr-case-hero__img-wrap {
  margin-top: calc(-1 * clamp(13rem, 22vw, 22rem));
  margin-bottom: 0;
  padding-left: var(--otr-section-px);
  padding-right: var(--otr-section-px);
  position: relative; z-index: 2;
}
.otr-case-hero__img-card {
  border-radius: var(--otr-radius-card);
  overflow: hidden; aspect-ratio: 1520/804;
}
.otr-case-hero__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Body wrapper — light beige bg */
.otr-case-body {
  background: var(--otr-color-bg-warm);
  padding-top: 0;
}

/* Content: text left + team credits right */
.otr-case-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 8vw, 10rem);
  padding: clamp(3rem, 5vw, 5rem) var(--otr-section-px) clamp(3rem, 5vw, 6rem);
  align-items: start;
}
.otr-case-content__title {
  font-family: var(--otr-font-body);
  font-size: clamp(2rem, 3.5vw, 4.0625rem);
  font-weight: 400; line-height: 1.23; letter-spacing: -0.01em;
  color: var(--otr-color-bg); margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
}
.otr-case-content__title em {
  font-family: var(--otr-font-accent);
  font-style: italic; font-weight: 300;
}
.otr-case-content__body {
  font-family: var(--otr-font-body);
  font-size: var(--otr-fs-nav);
  line-height: 1.7; color: var(--otr-color-bg);
  margin: 0; max-width: 55ch;
}

/* Team credits */
.otr-case-credits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 5rem);
  align-content: start;
  padding-top: clamp(0.5rem, 1vw, 1.5rem);
}
.otr-case-credits__group { display: flex; flex-direction: column; gap: 0.25rem; }
.otr-case-credits__role {
  font-family: var(--otr-font-accent);
  font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.5625rem);
  color: var(--otr-color-bg); margin: 0; line-height: 1.4;
}
.otr-case-credits__name {
  font-family: var(--otr-font-body);
  font-size: var(--otr-fs-nav); line-height: 1.5;
  color: var(--otr-color-bg); margin: 0;
}

/* Gallery */
.otr-case-gallery {
  padding: 0 var(--otr-section-px) clamp(3rem, 5vw, 5rem);
  display: flex; flex-direction: column;
  gap: clamp(1rem, 1.25vw, 1.5rem);
}
.otr-case-gallery + .otr-case-gallery { padding-top: 0; }
.otr-case-gallery__mixed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 1.25vw, 1.5rem);
}
.otr-case-gallery__stack {
  display: flex; flex-direction: column;
  gap: clamp(1rem, 1.25vw, 1.5rem);
}
.otr-case-gallery__img-wrap {
  border-radius: var(--otr-radius-card);
  overflow: hidden; position: relative;
}
.otr-case-gallery__img-wrap--tall  { aspect-ratio: 750/804; }
.otr-case-gallery__img-wrap--short { aspect-ratio: 750/392; }
.otr-case-gallery__img-wrap--wide  { aspect-ratio: 1520/804; }
.otr-case-gallery__img-wrap--wide-short { aspect-ratio: 1520/392; }
.otr-case-gallery__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Single case quote — light bg, dark text */
.otr-case-quote {
  position: relative; text-align: center; overflow: hidden;
  padding: clamp(5rem, 9vw, 10rem) var(--otr-section-px);
}
.otr-case-quote__deco {
  position: absolute; font-family: var(--otr-font-body); font-weight: 400;
  font-size: clamp(8rem, 18vw, 25rem); line-height: 1;
  color: rgba(42,189,204,0.08); pointer-events: none; user-select: none;
}
.otr-case-quote__deco--open { top: -0.1em; left: var(--otr-section-px); }
.otr-case-quote__deco--close { bottom: -0.4em; right: var(--otr-section-px); }
.otr-case-quote__inner { position: relative; max-width: 70rem; margin: 0 auto; }
.otr-case-quote__text {
  font-family: var(--otr-font-body);
  font-size: clamp(1.5rem, 2.8vw, 2.8125rem);
  font-weight: 400; line-height: 1.35;
  color: var(--otr-color-bg); /* dark on light */
  margin: 0; max-width: none;
}
.otr-case-quote__text em {
  font-family: var(--otr-font-accent);
  font-style: italic; font-weight: 300;
}
.otr-case-quote__author {
  margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  font-family: var(--otr-font-accent);
  font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.5625rem);
  color: var(--otr-color-accent);
}

/* Single case — mobile */
@media (max-width: 767px) {
  .otr-case-hero { padding-bottom: 9rem; }
  .otr-case-hero__brand { font-size: 1.5rem; }
  .otr-case-hero__title { font-size: clamp(2.5rem, 9vw, 3.5rem); }
  .otr-case-hero__img-wrap { margin-top: -7rem; margin-bottom: 0; }
  .otr-case-body { padding-top: 0; }
  .otr-case-content { grid-template-columns: 1fr; gap: 3rem; padding-bottom: 2rem; }
  .otr-case-credits { grid-template-columns: 1fr 1fr; }
  .otr-case-gallery__mixed { grid-template-columns: 1fr; }
  .otr-case-gallery__img-wrap--tall,
  .otr-case-gallery__img-wrap--short { aspect-ratio: 4/3; }
  .otr-case-gallery__img-wrap--wide,
  .otr-case-gallery__img-wrap--wide-short { aspect-ratio: 4/3; }
}

/* Mobile */
@media (max-width: 767px) {
  .otr-work-hero { padding-bottom: 5rem; }
  .otr-work-grid-wrap--overlap {
    margin-top: -7rem;
    background: linear-gradient(to bottom, transparent 7rem, var(--otr-color-bg-warm) 7rem);
  }
  .otr-work-filter { height: 2.625rem; font-size: 0.875rem; padding: 0 0.875rem; }
  .otr-work-grid { grid-template-columns: 1fr; }
  .otr-work-item--full { grid-column: 1; }
  .otr-work-item__img-wrap,
  .otr-work-item--full .otr-work-item__img-wrap { aspect-ratio: 4/3; }
  .otr-work-item__title { font-size: clamp(1.5rem, 7vw, 2.5rem); }
}

/* ==========================================================================
   CULTURE PAGE
   ========================================================================== */

/* Hero */
.otr-culture-hero {
  background: var(--otr-color-bg);
  color: var(--otr-color-primary);
  padding: clamp(8rem, 13vw, 12rem) var(--otr-section-px) clamp(8rem, 12vw, 10rem);
  position: relative;
  overflow: hidden;
}
.otr-culture-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.otr-culture-hero__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: lighten;
  opacity: 0.6;
  display: block;
}
.otr-culture-hero__inner {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(4rem, 7vw, 7rem);
}
.otr-culture-hero__title {
  font-family: var(--otr-font-body);
  font-size: clamp(2.5rem, 6vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--otr-color-primary);
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.otr-culture-hero__title em {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
}
.otr-culture-hero__intro {
  font-family: var(--otr-font-body);
  font-size: var(--otr-fs-nav);
  line-height: 1.7;
  color: var(--otr-color-primary);
  opacity: 0.85;
  max-width: 65ch;
}

/* Beige body wrapper */
.otr-culture-body {
  background: var(--otr-color-bg-warm);
  padding-top: 0;
}

/* Culture cards — overlap dark hero into beige */
.otr-culture-cards-wrap {
  padding: 0 var(--otr-section-px) clamp(3rem, 5vw, 5rem);
  margin-top: calc(-1 * clamp(6rem, 10vw, 8rem));
  position: relative;
  z-index: 2;
}
.otr-culture-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.5rem);
}
.otr-culture-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--otr-radius-card);
  cursor: pointer;
}
.otr-culture-card__img-wrap {
  aspect-ratio: 3/4;
}
.otr-culture-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.otr-culture-card:hover .otr-culture-card__img {
  transform: scale(1.04);
}
.otr-culture-card__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 33, 37, 0.92);
  color: #fff;
  padding: 1.5rem 1.75rem 2rem;
  transform: translateY(calc(100% - 5rem));
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.otr-culture-card:hover .otr-culture-card__panel {
  transform: translateY(0);
}
.otr-culture-card__title {
  font-family: var(--otr-font-body);
  font-size: clamp(1rem, 1.75vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
}
.otr-culture-card__title em {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
}
.otr-culture-card__text {
  font-family: var(--otr-font-body);
  font-size: var(--otr-fs-base);
  line-height: 1.65;
  color: #fff;
  margin-top: 0.875rem;
  opacity: 0;
  transition: opacity 0.3s ease 0.15s;
}
.otr-culture-card:hover .otr-culture-card__text {
  opacity: 0.75;
}

/* Werkwijze */
.otr-culture-werkwijze {
  padding: clamp(2.5rem, 5vw, 5rem) var(--otr-section-px) clamp(5rem, 9vw, 9rem);
}
.otr-culture-werkwijze__inner {
  display: block;
}
.otr-culture-werkwijze__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(2.5rem, 5vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--otr-color-bg);
  text-align: center;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.otr-culture-werkwijze__heading em {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
}
.otr-werkwijze-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: start;
}
.otr-werkwijze-item {
}
.otr-werkwijze-item__head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.otr-werkwijze-item__num {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.75rem, 2.5vw, 2.8125rem);
  line-height: 1.1;
  color: var(--otr-color-bg);
  flex-shrink: 0;
}
.otr-werkwijze-item__title {
  font-family: var(--otr-font-body);
  font-size: clamp(1.75rem, 2.5vw, 2.8125rem);
  font-weight: 400;
  color: var(--otr-color-bg);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.otr-werkwijze-item__text {
  font-family: var(--otr-font-body);
  font-size: var(--otr-fs-nav);
  line-height: 1.75;
  color: var(--otr-color-bg);
}

/* Team section */
.otr-culture-team {
  background: var(--otr-color-bg-warm);
  position: relative;
  z-index: 1;
  padding: clamp(8rem, 12vw, 12rem) var(--otr-section-px) clamp(2rem, 4vw, 4rem);
  color: var(--otr-color-primary);
  overflow: hidden;
}
.otr-culture-team__bg {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: 8%;
  background-color: var(--otr-color-bg);
  background-image: linear-gradient(rgba(0,33,37,.55), rgba(0,33,37,.55)),
    url('../assets/images/cases/backgroundculture.jpg');
  background-size: cover;
  background-position: center;
  pointer-events: none;
}
.otr-culture-team__inner {
  position: relative;
  z-index: 1;
}
.otr-culture-team__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.otr-culture-team__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(2.5rem, 5vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--otr-color-primary);
}
.otr-culture-team__heading em {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
}
.otr-culture-team__intro {
  font-family: var(--otr-font-body);
  font-size: var(--otr-fs-body-lg);
  line-height: 1.75;
  color: var(--otr-color-primary);
  opacity: 0.6;
  max-width: 36rem;
}
.otr-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}
.otr-team-card__imgs {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--otr-radius-card);
  overflow: hidden;
  background: var(--otr-color-surface);
}
.otr-team-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.5s ease;
}
.otr-team-card__img--hover {
  opacity: 0;
}
.otr-team-card:hover .otr-team-card__img--hover {
  opacity: 1;
}
.otr-team-card:hover .otr-team-card__img:not(.otr-team-card__img--hover) {
  opacity: 0;
}

/* Values */
.otr-culture-values {
  background: var(--otr-color-bg-warm);
  padding: clamp(1.5rem, 3vw, 3rem) var(--otr-section-px) clamp(6rem, 10vw, 10rem);
  margin-top: 0;
  position: relative;
  z-index: 2;
}
.otr-culture-values__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(2.5rem, 5vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--otr-color-bg);
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
}
.otr-culture-values__heading em {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
}
.otr-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(3rem, 6vw, 8rem);
}
.otr-values-item {
  padding: clamp(2rem, 3.5vw, 3.5rem) 0;
  border-bottom: 1px solid var(--otr-color-bg);
}
.otr-values-item:nth-child(odd) {
  padding-right: 0;
}
.otr-values-item:nth-child(even) {
  padding-left: 0;
}
.otr-values-item__title {
  font-family: var(--otr-font-body);
  font-size: clamp(1.375rem, 2.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--otr-color-bg);
  margin-bottom: 1.75rem;
}
.otr-values-item__title em {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
}
.otr-values-item__text {
  font-family: var(--otr-font-body);
  font-size: var(--otr-fs-base);
  line-height: 1.75;
  color: var(--otr-color-bg);
}

/* Instagram */
.otr-culture-instagram {
  background: var(--otr-color-bg);
  padding: clamp(6rem, 10vw, 10rem) var(--otr-section-px);
  overflow: hidden;
}
.otr-culture-instagram__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
.otr-culture-instagram__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(2.5rem, 5vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--otr-color-primary);
}
.otr-culture-instagram__heading em {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
}
.otr-culture-instagram__handle {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
  font-size: var(--otr-fs-body-lg);
  color: var(--otr-color-accent);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.125rem;
}
.otr-instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.5rem, 1vw, 1rem);
}
.otr-instagram-item {
  aspect-ratio: 1;
  background: var(--otr-color-surface);
  border-radius: var(--otr-radius-md);
}

/* Culture page — mobile */
@media (max-width: 767px) {
  .otr-culture-hero { padding-bottom: 7rem; }
  .otr-culture-cards-wrap {
    margin-top: -5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 3rem;
  }
  .otr-culture-cards { grid-template-columns: 1fr; gap: 1rem; }
  .otr-culture-card__title { font-size: 1.375rem; }
  .otr-culture-card__img-wrap { aspect-ratio: 4/3; }
  .otr-culture-card__panel {
    transform: translateY(0);
    position: static;
    border-radius: 0 0 var(--otr-radius-card) var(--otr-radius-card);
  }
  .otr-culture-card__text { opacity: 0.75; }
  .otr-werkwijze-grid { grid-template-columns: 1fr; gap: 2rem; }
  .otr-culture-team__header { grid-template-columns: 1fr; }
  .otr-team-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .otr-culture-team__bg { bottom: 5%; }
  .otr-culture-values { padding-top: 1rem; margin-top: 0; }
  .otr-values-grid { grid-template-columns: 1fr; }
  .otr-values-item:nth-child(-n+2) { border-top: none; }
  .otr-values-item:first-child { border-top: 1px solid rgba(0,33,37,0.15); }
  .otr-values-item:nth-child(odd) { border-right: none; padding-right: 0; }
  .otr-values-item:nth-child(even) { padding-left: 0; }
  .otr-instagram-grid { grid-template-columns: repeat(2, 1fr); }
  .otr-culture-instagram__header { flex-direction: column; gap: 0.75rem; }
}

/*
 * REAL @font-face BLOCKS — uncomment when WOFF2 files are delivered to assets/fonts/
 * Relative paths resolve correctly in both dev (browser-sync) and WordPress child theme
 * (get_stylesheet_directory_uri() + '/css/main.css' → '../assets/fonts/' steps back to theme root).
 *
 * @font-face {
 *   font-family: "OTR Heading";
 *   src: url("../assets/fonts/otr-heading-700.woff2") format("woff2");
 *   font-weight: 700;
 *   font-style: normal;
 *   font-display: swap;
 * }
 *
 * @font-face {
 *   font-family: "OTR Heading";
 *   src: url("../assets/fonts/otr-heading-400.woff2") format("woff2");
 *   font-weight: 400;
 *   font-style: normal;
 *   font-display: swap;
 * }
 *
 * @font-face {
 *   font-family: "OTR Body";
 *   src: url("../assets/fonts/otr-body-400.woff2") format("woff2");
 *   font-weight: 400;
 *   font-style: normal;
 *   font-display: swap;
 * }
 *
 * @font-face {
 *   font-family: "OTR Body";
 *   src: url("../assets/fonts/otr-body-700.woff2") format("woff2");
 *   font-weight: 700;
 *   font-style: normal;
 *   font-display: swap;
 * }
 */

/* ============================================================
   VACATURE PAGE
   ============================================================ */

/* Screen-reader only utility */
.otr-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* HERO */
.otr-vacature-hero {
  background: var(--otr-color-bg-warm);
  padding: clamp(10rem, 16vw, 19rem) var(--otr-section-px) clamp(3rem, 5vw, 5rem);
  position: relative;
  z-index: 1;
}

.otr-vacature-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 5rem);
  margin-bottom: clamp(3rem, 5vw, 6rem);
}

.otr-vacature-hero__content {
  flex: 1;
}

.otr-vacature-hero__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(2.75rem, 4.5vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--otr-color-bg);
  margin-bottom: clamp(1.75rem, 3vw, 3rem);
}

.otr-vacature-hero__heading em {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
}

.otr-vacature-hero__text {
  font-family: var(--otr-font-body);
  font-size: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
  line-height: 1.75;
  color: var(--otr-color-bg);
  max-width: 38rem;
}

.otr-vacature-hero__portrait {
  flex: 0 0 clamp(280px, 43%, 655px);
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 655 / 538;
}

.otr-vacature-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Banner bridge — own element between hero and jobs so both bg colors show behind it */
.otr-vacature-banner {
  position: relative;
  z-index: 5;
  margin-top: clamp(-5rem, -9.4vw, -11.25rem);
  margin-bottom: clamp(-5rem, -9.4vw, -11.25rem);
  margin-left: var(--otr-section-px);
  margin-right: var(--otr-section-px);
  border-radius: 20px;
  overflow: hidden;
  height: clamp(180px, 20vw, 362px);
}

.otr-vacature-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* VACATURES JOBS */
.otr-vacature-jobs {
  background: var(--otr-color-bg);
  padding: clamp(8rem, 12vw, 14rem) var(--otr-section-px) clamp(5rem, 8vw, 10rem);
  color: var(--otr-color-primary);
  position: relative;
  z-index: 1;
}

.otr-vacature-jobs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(4rem, 8vw, 10rem);
}

.otr-job-item {
  padding: clamp(2.5rem, 4vw, 4rem) 0 clamp(1.5rem, 2.5vw, 2.5rem);
  border-bottom: 1px solid var(--otr-color-primary);
  position: relative;
}
.otr-job-item__arrow::after {
  content: '';
  position: absolute;
  inset: 0;
}

.otr-job-item__title {
  font-family: var(--otr-font-body);
  font-size: clamp(1.75rem, 2.5vw, 2.8125rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--otr-color-primary);
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

.otr-job-item__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}

.otr-job-item__text {
  font-family: var(--otr-font-body);
  font-size: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
  line-height: 1.75;
  color: var(--otr-color-primary);
  flex: 1;
}

.otr-job-item__arrow {
  flex-shrink: 0;
  width: 59px;
  height: 59px;
  border: 1px solid var(--otr-color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--otr-color-primary);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.otr-job-item__arrow:hover {
  background: var(--otr-color-primary);
  color: var(--otr-color-bg);
}

/* Cases on beige bg (vacature page) */
.otr-cases--beige {
  background: var(--otr-color-bg-warm);
  padding-top: clamp(6rem, 10vw, 12rem);
}
.otr-cases--overlap-top {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-top: clamp(8rem, 12vw, 14rem);
}
.otr-culture-team--bridge {
  z-index: 2;
  padding-bottom: 0;
}
.otr-culture-team--bridge::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: clamp(4rem, 7vw, 8rem);
  background: var(--otr-color-bg-warm);
  z-index: 0;
}

/* Mobile */
@media (max-width: 767px) {
  .otr-vacature-hero {
    padding-top: clamp(6rem, 14vw, 9rem);
    padding-bottom: clamp(7rem, 14vw, 11rem);
  }

  .otr-vacature-hero__inner {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .otr-vacature-hero__content {
    padding-top: 0;
  }

  .otr-vacature-hero__portrait {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .otr-vacature-hero__banner {
    height: clamp(140px, 45vw, 220px);
    margin-bottom: -4rem;
    border-radius: 14px;
  }

  .otr-vacature-jobs {
    padding-top: clamp(6rem, 10vw, 9rem);
  }

  .otr-vacature-jobs__grid {
    grid-template-columns: 1fr;
  }

  .otr-job-item__title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }
}

/* ================================================
   SINGLE VACATURE (svac)
   ================================================ */

.otr-svac-hero {
  background: var(--otr-color-bg-warm);
  padding: clamp(10rem, 16vw, 19rem) var(--otr-section-px) clamp(1rem, 1.5vw, 1.5rem);
  position: relative;
  z-index: 1;
}
.otr-svac-hero__inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(3rem, 5vw, 6rem);
}
.otr-svac-hero__content { flex: 1; min-width: 0; }
.otr-svac-hero__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(2.75rem, 4.5vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--otr-color-bg);
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.otr-svac-hero__heading em {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
}
.otr-svac-hero__text {
  font-size: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
  line-height: 1.75;
  color: var(--otr-color-bg);
  max-width: 38rem;
}
.otr-svac-hero__text + .otr-svac-hero__text { margin-top: 1.5rem; }
.otr-svac-hero__portrait {
  flex: 0 0 clamp(260px, 40%, 655px);
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 655 / 635;
}
.otr-svac-hero__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.otr-svac-body {
  background: var(--otr-color-bg-warm);
  padding: 0 var(--otr-section-px) clamp(4rem, 6vw, 8rem);
  position: relative;
  z-index: 1;
}
.otr-svac-section { padding-top: clamp(4rem, 6vw, 8rem); }
.otr-svac-section:first-child { padding-top: clamp(1rem, 1.5vw, 1.5rem); }
.otr-svac-section__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(1.875rem, 2.8vw, 2.8125rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--otr-color-bg);
  margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
}
.otr-svac-section__heading em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-svac-section__list {
  max-width: 44rem;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.otr-svac-section__list li {
  font-size: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
  line-height: 1.75;
  color: var(--otr-color-bg);
}
.otr-svac-section__text {
  font-size: clamp(0.9rem, 1vw + 0.5rem, 1.125rem);
  line-height: 1.75;
  color: var(--otr-color-bg);
  max-width: 44rem;
  margin-top: 1.5rem;
}
.otr-svac-section__link { color: var(--otr-color-bg); text-decoration: underline; text-underline-offset: 3px; }

.otr-svac-divider {
  background: var(--otr-color-bg-warm);
  padding: 0 var(--otr-section-px);
  position: relative;
  z-index: 1;
}
.otr-svac-divider__line { height: 1px; background: var(--otr-color-bg); }

.otr-svac-form {
  background: var(--otr-color-bg-warm);
  padding: clamp(4rem, 6vw, 8rem) var(--otr-section-px) clamp(5rem, 8vw, 10rem);
  position: relative;
  z-index: 1;
}
.otr-svac-form__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(2.75rem, 4.5vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--otr-color-bg);
  margin-bottom: clamp(2rem, 3vw, 3.5rem);
}
.otr-svac-form__heading em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-svac-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  max-width: clamp(28rem, 55%, 54rem);
  margin-bottom: clamp(2rem, 3vw, 3rem);
}
.otr-svac-form__input {
  width: 100%;
  height: 51px;
  border: 1px solid var(--otr-color-bg);
  border-radius: 100px;
  padding: 0 1.5rem;
  font-family: var(--otr-font-body);
  font-size: 1.125rem;
  color: var(--otr-color-bg);
  background: transparent;
  outline: none;
  appearance: none;
}
.otr-svac-form__input::placeholder { color: rgba(0,33,37,0.5); }
.otr-svac-form__input:focus { border-color: var(--otr-color-bg); box-shadow: 0 0 0 2px rgba(0,33,37,0.12); }
.otr-svac-form__file-row { display: contents; }
.otr-svac-form__file-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 51px;
  border: 1px solid var(--otr-color-bg);
  border-radius: 100px;
  padding: 0 0.5rem 0 1.5rem;
  cursor: pointer;
  gap: 1rem;
}
.otr-svac-form__file-text {
  font-family: var(--otr-font-body);
  font-size: 1.125rem;
  color: rgba(0,33,37,0.5);
  flex: 1;
}
.otr-svac-form__file-btn {
  height: 39px;
  padding: 0 1.25rem;
  border-radius: 100px;
  background: rgba(0,33,37,0.1);
  border: 1px solid rgba(0,33,37,0.2);
  font-family: var(--otr-font-body);
  font-size: 1rem;
  color: rgba(0,33,37,0.6);
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.otr-svac-form__file-note { font-size: 0.875rem; color: rgba(0,33,37,0.5); padding-left: 1.5rem; }
.otr-svac-form__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.otr-cases--dark { background: var(--otr-color-bg); }
.otr-cases--dark .otr-cases__eyebrow,
.otr-cases--dark .otr-cases__title,
.otr-cases--dark .otr-cases__title em { color: var(--otr-color-primary); }
.otr-cases--dark .otr-cases__more a { color: var(--otr-color-primary); }

.otr-btn-circle--light { border-color: var(--otr-color-primary); color: var(--otr-color-primary); }

.otr-team {
  background: var(--otr-color-bg);
  padding: clamp(5rem, 8vw, 10rem) 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.otr-team__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(3rem, 5.5vw, 6.25rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--otr-color-primary);
  text-align: right;
  padding: 0 var(--otr-section-px);
  margin-bottom: clamp(2.5rem, 4vw, 5rem);
}
.otr-team__heading em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-team__wave {
  width: 100%;
  height: clamp(60px, 7vw, 110px);
  margin-bottom: clamp(3rem, 5vw, 6rem);
}
.otr-team__wave svg { width: 100%; height: 100%; display: block; }
.otr-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  padding: 0 var(--otr-section-px);
}
.otr-team-card__photo {
  width: 100%;
  aspect-ratio: 493 / 668;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
}
.otr-team-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.otr-team-card__photo--placeholder { background: rgba(255,255,255,0.08); }
.otr-team-card__name {
  font-family: var(--otr-font-body);
  font-size: clamp(1.5rem, 2.3vw, 2.8125rem);
  font-weight: 400;
  line-height: 1.0;
  color: var(--otr-color-primary);
  margin-bottom: 0.375rem;
}
.otr-team-card__name em { font-family: var(--otr-font-accent); font-style: italic; font-weight: 300; }
.otr-team-card__role { font-size: clamp(0.875rem, 1vw + 0.4rem, 1.125rem); color: rgba(244,239,234,0.6); line-height: 1.4; }

@media (max-width: 767px) {
  .otr-svac-hero {
    padding-top: clamp(8rem, 18vw, 11rem);
    padding-bottom: clamp(3rem, 5vw, 5rem);
  }
  .otr-svac-hero__inner { flex-direction: column; gap: 2rem; }
  .otr-svac-hero__portrait { flex: 0 0 auto; width: 100%; aspect-ratio: 4 / 3; }
  .otr-svac-form__fields { max-width: 100%; }
  .otr-team__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.otr-contact-hero {
  background: var(--otr-color-bg-warm);
  padding: clamp(10rem, 16vw, 18rem) var(--otr-section-px) clamp(6rem, 10vw, 12rem);
}
.otr-contact-hero__inner {
  display: flex;
  gap: clamp(4rem, 8vw, 10rem);
  align-items: flex-start;
}
.otr-contact-hero__info {
  flex: 0 0 clamp(240px, 30%, 480px);
}
.otr-contact-hero__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(3rem, 5.5vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--otr-color-bg);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.otr-contact-hero__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--otr-fs-body-lg);
  color: var(--otr-color-bg);
  line-height: 1.7;
}
.otr-contact-hero__meta a {
  color: inherit;
  text-decoration: none;
}
.otr-contact-hero__meta a:hover { text-decoration: underline; }
.otr-contact-hero__label {
  font-weight: 700;
  color: var(--otr-color-accent);
}
.otr-contact-hero__address {
  margin-top: 1rem;
  font-style: normal;
  line-height: 1.7;
}
.otr-contact-form {
  flex: 1;
  min-width: 0;
}
.otr-contact-form__heading {
  font-family: var(--otr-font-body);
  font-size: clamp(3rem, 5.5vw, 5.3125rem);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--otr-color-bg);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.otr-contact-form__heading em {
  font-family: var(--otr-font-accent);
  font-style: italic;
  font-weight: 300;
}
.otr-contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.otr-contact-form__input {
  width: 100%;
  height: 51px;
  border: 1px solid var(--otr-color-bg);
  border-radius: 100px;
  padding: 0 1.5rem;
  font-family: var(--otr-font-body);
  font-size: 1.125rem;
  color: var(--otr-color-bg);
  background: transparent;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.otr-contact-form__input::placeholder { color: rgba(0,33,37,0.5); }
.otr-contact-form__input:focus { border-color: var(--otr-color-accent); }
.otr-contact-form__textarea {
  width: 100%;
  min-height: 130px;
  border: 1px solid var(--otr-color-bg);
  border-radius: 25px;
  padding: 1rem 1.5rem;
  font-family: var(--otr-font-body);
  font-size: 1.125rem;
  color: var(--otr-color-bg);
  background: transparent;
  outline: none;
  resize: vertical;
  appearance: none;
  -webkit-appearance: none;
}
.otr-contact-form__textarea::placeholder { color: rgba(0,33,37,0.5); }
.otr-contact-form__textarea:focus { border-color: var(--otr-color-accent); }
.otr-contact-form__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Mobile */
@media (max-width: 767px) {
  .otr-contact-hero { padding-top: clamp(8rem, 18vw, 11rem); }
  .otr-contact-hero__inner { flex-direction: column; gap: 3rem; }
  .otr-contact-hero__info { flex: none; width: 100%; }
}