/* ==========================================================================
   OverCap v2 — shared stylesheet (redesign/launch-v4)
   Plain-CSS reimplementation of the "dc" v2 design foundation.
   Structure:
     1. @font-face (NimbusSanL)          5. Layout container + section rhythm
     2. Design tokens (:root)            6. Typography helpers
     3. Base / reset                     7. Buttons, arrow-links, circle CTA
     4. Header / nav / dropdown /        8. Generic blocks (grid, card, rule)
        mobile menu / footer             9. Forms  10. Utilities  11. Responsive
   Single light brand theme — no dark-mode toggle. Dark *sections* use
   .oc-section--dark (ground = --switch-bg).
   ========================================================================== */

/* ============================ 1 · FONTS ================================== */
@font-face {
  font-family: "NimbusSanL";
  src: url("/build/ds/fonts/NimbusSanL-Regular.woff2") format("woff2"),
       url("/build/ds/fonts/NimbusSanL-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "NimbusSanL";
  src: url("/build/ds/fonts/NimbusSanL-Bold.woff2") format("woff2"),
       url("/build/ds/fonts/NimbusSanL-Bold.woff") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============================ 2 · TOKENS ================================= */
/* Inlined from public/build/ds/tokens/*.css so load order can never leave a
   page unstyled. Keep in sync with the DS token files if those change. */
:root {
  /* colors */
  --bright: #fefefb;
  --dark: #021022;
  --dark-max: #101821;
  --grey: #eaf1fa;
  --switch-bg: #173d6b;
  --primaryblue: #2494ea;
  --blue-deep: #1368d3;
  --blue-on-dark: #66aaff;
  --argentum: #f5ab3b;
  --accent-orange: #ee833b;
  --green-solution: #2f8f4f;
  --panel-lavender: #e9ecf8;
  --danger: #d42016;
  --selection: #aa8e71;

  --surface-page: var(--bright);
  --surface-quiet: var(--grey);
  --surface-invert: var(--switch-bg);
  --surface-accent: var(--argentum);
  --text-body: var(--dark);
  --text-on-dark: var(--bright);
  --text-muted: rgba(2, 16, 34, 0.6);
  --text-eyebrow: var(--argentum);
  --text-link: var(--primaryblue);
  --text-link-on-dark: var(--blue-on-dark);
  --border-rule: var(--dark);
  --border-rule-invert: var(--bright);
  --border-input: rgba(2, 16, 34, 0.1);
  --accent: var(--primaryblue);
  --accent-warm: var(--argentum);

  /* typography */
  --font-sans: "NimbusSanL", "Arial", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: var(--font-sans);
  --font-display: var(--font-sans);
  --weight-regular: 400;
  --weight-bold: 700;
  --text-h1: 70px;   --lh-h1: 1.08;  --ls-h1: -0.005em;
  --text-h2: 44px;   --lh-h2: 1.12;  --ls-h2: -0.005em;
  --text-h3: 24px;   --lh-h3: 1.33;  --ls-h3: -0.0025em;
  --text-display-xl: 96px; --lh-display-xl: 0.979; --ls-display-xl: -0.0025em;
  --text-link-big: 72px;
  --text-body-size: 18px; --lh-body: 1.56; --ls-body: 0.005em;
  --text-small: 16px; --lh-small: 1.625;
  --text-md-title: 18px; --lh-md-title: 1.78; --ls-md-title: -0.0025em;
  --text-eyebrow-size: 12px; --lh-eyebrow: 1.33; --ls-eyebrow: 0.055em;
  --leading-tight: 1.08; --leading-snug: 1.33; --leading-normal: 1.56;

  /* spacing */
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.875rem; --space-8: 2.5rem;
  --space-10: 3.125rem; --space-12: 3.75rem; --space-16: 5rem; --space-20: 6.25rem;
  --space-24: 7.5rem; --space-32: 10rem; --space-36: 11.25rem; --space-40: 12.5rem;
  --gap-grid: 40px; --gap-grid-row: 60px;
  --container-max: 1637px;
  --container-gutter: 40px;   /* v2 uses min(calc(100% - 80px), 1637px) => 40px each side */

  /* effects / motion */
  --radius-circle: 50%;
  --border-width: 2px;
  --rule: 2px solid var(--border-rule);
  --rule-invert: 2px solid var(--border-rule-invert);
  --shadow-overlay: 0 24px 60px rgba(2, 16, 34, 0.18);
  --dur-fast: 0.3s; --dur-base: 0.45s; --dur-slow: 0.65s;
  --ease-link: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out-soft: cubic-bezier(0.72, 0, 0.28, 1);
  --ease-header: cubic-bezier(0.39, 0.575, 0.565, 1);

  /* responsive section padding (caps lowered to match the design frame:
     the dc was authored on a ~1280px frame, so on wide browsers the vw
     terms hit larger caps than intended — pull the caps back). */
  --section-pad: clamp(80px, 9vw, 150px);
  --section-pad-sm: clamp(70px, 9vw, 132px);
}

/* ============================ 3 · BASE / RESET ========================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* The design frame renders more compact than a wide browser at 100%; scale
   the whole desktop view down a notch so it matches the design. Mobile is
   unchanged (there the fluid sizes already match the design's small end). */
@media (min-width: 1024px) {
  body { zoom: 0.75; }
}
::selection { background: var(--selection); color: var(--bright); }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--dark); }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--primaryblue); outline-offset: 3px; }

.oc-page { display: flex; flex-direction: column; min-height: 100vh; }
.oc-main { flex: 1; }

/* ============================ 4 · CHROME ================================ */
/* ---- container ---------------------------------------------------------- */
.oc-container {
  width: min(calc(100% - 80px), var(--container-max));
  margin-inline: auto;
}

/* ---- header ------------------------------------------------------------- */
.oc-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bright);
  transition: transform var(--dur-base) var(--ease-header),
              box-shadow var(--dur-fast) ease;
}
.oc-header.is-hidden { transform: translateY(-100%); }
.oc-header.is-scrolled { box-shadow: 0 2px 0 0 var(--dark); }

.oc-header__bar {
  width: min(calc(100% - 80px), var(--container-max));
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px;
  padding: 40px 0 20px;
  position: relative;
  transition: padding var(--dur-fast) ease;
}
.oc-header.is-scrolled .oc-header__bar { padding-top: 20px; }
/* make room for the decorative circle on the right, at rest */
.oc-header:not(.is-scrolled) .oc-header__bar { padding-right: clamp(120px, 15vw, 260px); }

.oc-wordmark {
  color: var(--dark); font-weight: 700;
  font-size: 18px; line-height: 28px; letter-spacing: 0.005em;
  text-transform: uppercase; text-decoration: none;
}
.oc-wordmark:hover { color: var(--dark); }

/* decorative "Talk to us" circle, top-right of the header */
.oc-header__circle-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.oc-talk-circle {
  position: absolute;
  top: clamp(-90px, -6vw, -40px); right: clamp(-60px, -3vw, -20px);
  display: flex; align-items: center; justify-content: center;
  width: clamp(150px, 18vw, 300px); height: clamp(150px, 18vw, 300px);
  border-radius: 50%;
  background: var(--blue-deep); color: var(--bright);
  font-size: clamp(14px, 1.3vw, 24px);
  padding-top: clamp(30px, 3vw, 60px);
  pointer-events: auto;
  transition: transform var(--dur-fast) var(--ease-link);
}
.oc-talk-circle:hover { transform: scale(1.05); color: var(--bright); }
.oc-header.is-scrolled .oc-talk-circle { opacity: 0; pointer-events: none; }
/* Inline nav "Talk to us" is the scrolled-state CTA: the decorative circle
   is the rest-state CTA, so hide the inline button until the header compacts. */
.oc-header:not(.is-scrolled) .oc-nav__cta { display: none; }

/* ---- desktop nav -------------------------------------------------------- */
.oc-nav {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px clamp(20px, 3vw, 56px);
  font-size: 18px;
}
.oc-nav__link {
  color: var(--dark); text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-link);
}
.oc-nav__link:hover { color: var(--dark); border-bottom-color: var(--dark); }
.oc-nav__link.is-active { border-bottom-color: var(--dark); }

/* dropdown ("What we build") */
.oc-nav__dd { position: relative; }
.oc-nav__dd-trigger {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 6px 0; color: var(--dark); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-link);
}
.oc-nav__dd-trigger:hover,
.oc-nav__dd.is-active .oc-nav__dd-trigger { border-bottom-color: var(--dark); }
.oc-nav__dd-trigger svg { transition: transform var(--dur-fast) ease; }
.oc-nav__dd.is-open .oc-nav__dd-trigger svg { transform: rotate(180deg); }

.oc-nav__menu {
  position: absolute; top: 100%; left: -24px; padding-top: 12px; z-index: 30;
  display: none;
}
.oc-nav__dd.is-open .oc-nav__menu { display: block; }
.oc-nav__menu-inner {
  background: var(--bright);
  border-top: 2px solid var(--dark);
  box-shadow: var(--shadow-overlay);
  padding: 12px 24px;
  display: flex; flex-direction: column;
  width: 300px;
}
.oc-nav__menu-inner a {
  color: var(--dark); text-decoration: none; padding: 12px 0;
  border-bottom: 1px solid var(--grey);
  transition: color var(--dur-fast) var(--ease-link);
}
.oc-nav__menu-inner a:last-child { border-bottom: 0; }
.oc-nav__menu-inner a:first-child { font-weight: 700; }
.oc-nav__menu-inner a:hover { color: var(--blue-deep); }

/* ---- mobile menu -------------------------------------------------------- */
.oc-burger {
  display: none;
  align-items: center; gap: 10px;
  background: none; border: 0; padding: 10px 0; min-height: 44px;
  font-size: 18px; color: var(--dark); cursor: pointer;
}
.oc-mobile {
  position: fixed; inset: 0; z-index: 70; /* above the cookie banner (z-index 60) */
  background: var(--switch-bg); color: var(--bright);
  padding: 40px; overflow: auto;
  display: none; flex-direction: column;
}
.oc-mobile.is-open { display: flex; }
body.oc-no-scroll { overflow: hidden; }
.oc-mobile__top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 60px;
}
.oc-mobile__top .oc-wordmark { color: var(--bright); }
.oc-mobile__nav { display: flex; flex-direction: column; gap: 4px; }
.oc-mobile__nav > a,
.oc-mobile__group {
  border-top: 2px solid var(--bright);
  padding: 12px 0;
}
.oc-mobile__nav > a {
  color: var(--bright); text-decoration: none;
  font-size: 32px; font-weight: 700; line-height: 1.2;
}
.oc-mobile__group { display: flex; flex-direction: column; gap: 8px; }
.oc-mobile__group > a:first-child {
  color: var(--bright); font-size: 32px; font-weight: 700; line-height: 1.2;
}
.oc-mobile__group > a + a {
  color: var(--blue-on-dark); font-size: 18px; padding: 6px 0;
}
.oc-mobile__nav > a:last-of-type { border-bottom: 2px solid var(--bright); }
.oc-mobile__foot { margin-top: auto; padding-top: 60px; }

/* circular icon button (mobile close) */
.oc-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid currentColor; background: none; cursor: pointer;
  color: var(--bright);
  transition: transform var(--dur-fast) var(--ease-link);
}
.oc-icon-btn:hover { transform: scale(1.1); }

/* ---- footer ------------------------------------------------------------- */
.oc-footer {
  background: var(--argentum); color: var(--dark);
  padding: clamp(100px, 10vw, 140px) 0 40px;
}
.oc-footer__mail {
  display: inline-flex; align-items: center; gap: 24px;
  color: var(--bright); text-decoration: none;
  font-size: clamp(32px, 4.5vw, 72px); line-height: 1;
  letter-spacing: -0.005em; font-weight: 700;
  margin-bottom: clamp(80px, 8vw, 120px);
  word-break: break-all;
}
.oc-footer__mail:hover { color: var(--dark); }
.oc-footer__mail svg { flex-shrink: 0; }
.oc-footer__cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  border-top: 2px solid var(--dark); padding-top: 30px;
}
.oc-footer__h { font-weight: 700; line-height: 1.78; margin-bottom: 8px; }
.oc-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.oc-footer__nav a { color: var(--dark); text-decoration: none; }
.oc-footer__nav a:hover { text-decoration: underline; color: var(--dark); }
.oc-footer__social {
  display: inline-flex; width: 44px; height: 44px;
  align-items: center; justify-content: center; border-radius: 50%;
  background: var(--bright); margin-top: 20px;
  transition: transform var(--dur-fast) var(--ease-link);
}
.oc-footer__social:hover { transform: scale(1.1); }
.oc-footer__legal {
  margin-top: 60px; padding-top: 24px; border-top: 2px solid var(--dark);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 8px 40px;
  font-size: 14px; line-height: 1.6;
}
.oc-footer__legal p { margin: 0; }
.oc-footer__legal p + p { max-width: 820px; }

/* ============================ 5 · SECTIONS ============================== */
.oc-section { padding: var(--section-pad) 0; }
.oc-section--sm { padding: var(--section-pad-sm) 0; }
.oc-section--flush-top { padding-top: 0; }
.oc-section--flush-bottom { padding-bottom: 0; }
.oc-section--dark { background: var(--switch-bg); color: var(--bright); }
.oc-section--dark a { color: var(--blue-on-dark); }
.oc-section--dark a:hover { color: var(--bright); }
.oc-section--accent { background: var(--argentum); color: var(--dark); }

/* ============================ 6 · TYPOGRAPHY =========================== */
.oc-eyebrow {
  font-size: var(--text-eyebrow-size);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--argentum);
  margin: 0;
}
.oc-h1 {
  font-size: clamp(42px, 5.5vw, 70px);
  line-height: var(--lh-h1); letter-spacing: var(--ls-h1);
  font-weight: 700; text-wrap: pretty;
}
.oc-h2 {
  font-size: clamp(32px, 3.5vw, 44px);
  line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  font-weight: 700; text-wrap: pretty;
}
/* larger H2 used for hero-scale section heads ("Two markets. One data layer.") */
.oc-h2--display { font-size: clamp(42px, 5.5vw, 70px); line-height: var(--lh-h1); }
.oc-h3 {
  font-size: var(--text-h3);
  line-height: var(--lh-h3); letter-spacing: var(--ls-h3);
  font-weight: 700;
}
.oc-h3--lg { font-size: 32px; line-height: 1.2; }
.oc-lead {
  font-size: clamp(19px, 1.5vw, 21px); line-height: 1.4;
  text-wrap: pretty;
}
.oc-body { font-size: var(--text-body-size); line-height: var(--lh-body); }
.oc-measure { max-width: 900px; }        /* readable text column */
.oc-measure-wide { max-width: 1250px; }
.oc-accent-text { color: var(--blue-deep); }   /* inline highlight in headings on light */
.oc-accent-gold { color: var(--argentum); }
.oc-muted { color: var(--text-muted); }
.oc-on-dark-muted { color: var(--blue-on-dark); }
.oc-stat {
  font-size: clamp(56px, 7vw, 96px); line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl); font-weight: 700;
}

/* ============================ 7 · BUTTONS / LINKS ====================== */
.oc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 32px; min-height: 56px;
  font-weight: 700; font-size: 18px; line-height: 1;
  border: 2px solid transparent; border-radius: 0;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-link),
              color var(--dur-fast) var(--ease-link),
              transform var(--dur-fast) var(--ease-link);
}
.oc-btn:active { transform: scale(0.97); }
.oc-btn--sm { padding: 10px 22px; min-height: 40px; font-size: 16px; }
.oc-btn--lg { padding: 18px 40px; min-height: 56px; }

.oc-btn--dark { background: var(--dark); color: var(--bright); border-color: var(--dark); }
.oc-btn--dark:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--bright); }

.oc-btn--primary { background: var(--primaryblue); color: var(--bright); border-color: var(--primaryblue); }
.oc-btn--primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--bright); }

/* outline / secondary — transparent with 2px rule */
.oc-btn--outline { background: transparent; color: var(--dark); border-color: var(--dark); }
.oc-btn--outline:hover { background: var(--dark); color: var(--bright); }
.oc-section--dark .oc-btn--outline { color: var(--bright); border-color: var(--bright); }
.oc-section--dark .oc-btn--outline:hover { background: var(--bright); color: var(--dark); }

/* arrow-link: label + circular arrow glyph, the signature CTA */
.oc-arrow-link {
  display: inline-flex; align-items: center; gap: 16px;
  color: var(--dark); text-decoration: none; font-weight: 700;
  transition: color var(--dur-fast) var(--ease-link);
}
.oc-arrow-link::after {
  content: ""; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid currentColor;
  background: no-repeat center / 16px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 31 32' fill='none'%3E%3Cpath d='M1.285 16.137H29.57M15.427 30.279L29.57 16.137 15.427 1.995' stroke='%23021022' stroke-width='2'/%3E%3C/svg%3E");
  transition: transform var(--dur-fast) var(--ease-link);
}
.oc-arrow-link:hover { color: var(--blue-deep); }
.oc-arrow-link:hover::after { transform: scale(1.1); }
.oc-arrow-link--on-dark { color: var(--bright); }
.oc-arrow-link--on-dark::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 31 32' fill='none'%3E%3Cpath d='M1.285 16.137H29.57M15.427 30.279L29.57 16.137 15.427 1.995' stroke='%23fefefb' stroke-width='2'/%3E%3C/svg%3E");
}
.oc-arrow-link--on-dark:hover { color: var(--blue-on-dark); }

/* underlined text link (contact email, inline emphasis) */
.oc-ul-link {
  color: var(--dark); text-decoration: none;
  border-bottom: 2px solid var(--dark);
  transition: color var(--dur-fast) var(--ease-link), border-color var(--dur-fast) var(--ease-link);
}
.oc-ul-link:hover { color: var(--blue-deep); border-bottom-color: var(--blue-deep); }

/* ============================ 8 · GENERIC BLOCKS ====================== */
.oc-grid { display: grid; gap: var(--gap-grid-row) var(--gap-grid); }
.oc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.oc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.oc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* card: transparent block separated by a 2px top rule (the house treatment) */
.oc-card {
  border-top: 2px solid var(--dark); padding-top: 32px;
  display: flex; flex-direction: column; gap: 20px;
}
.oc-card--accent { border-top-color: var(--argentum); }
.oc-section--dark .oc-card { border-top-color: var(--bright); }
.oc-section--dark .oc-card--accent { border-top-color: var(--argentum); }
.oc-card__push { margin-top: auto; }   /* pin an arrow-link to the card bottom */

/* pale-lavender solutions panel (large square + centered icon) */
.oc-panel {
  background: var(--panel-lavender); padding: 40px;
  display: flex; flex-direction: column; gap: 20px;
}

/* hairline rule */
.oc-rule { border: 0; border-top: 2px solid var(--dark); margin: 0; }
.oc-section--dark .oc-rule { border-top-color: var(--bright); }

/* editorial "row list" — the homepage platforms list (name / line / arrow) */
.oc-rows { display: flex; flex-direction: column; }
.oc-row {
  display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: baseline;
  padding: 32px 0; border-top: 2px solid var(--dark);
  color: var(--dark); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-link);
}
.oc-row:hover { color: var(--blue-deep); }
.oc-row__name { flex: 1 1 240px; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -0.005em; }
.oc-row__line { flex: 2 1 320px; text-wrap: pretty; }
.oc-row__arrow { flex-shrink: 0; align-self: center; }

/* numbered step token (the "how we build" stages) */
.oc-step-num {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  border: 2px solid var(--dark); background: var(--bright); color: var(--dark);
}
.oc-step-num--filled { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--bright); }
.oc-section--dark .oc-step-num { border-color: var(--bright); background: transparent; color: var(--bright); }
.oc-section--dark .oc-step-num--filled { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--bright); }

/* full-bleed-within-column image */
.oc-img { display: block; width: 100%; height: auto; }
.oc-img--16-7 { aspect-ratio: 16 / 7; }
.oc-img--16-6 { aspect-ratio: 16 / 6; }
.oc-img--4-5 { aspect-ratio: 4 / 5; }
.oc-img--1-1 { aspect-ratio: 1 / 1; }
.oc-img--cover { object-fit: cover; }

/* ============================ 9 · FORMS =============================== */
.oc-field { display: flex; flex-direction: column; gap: 8px; }
.oc-field__label {
  font-size: var(--text-eyebrow-size); line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-weight: 700; color: var(--text-muted);
}
.oc-input, .oc-select, .oc-textarea {
  width: 100%; font: inherit; color: var(--dark);
  background: var(--grey);
  border: 0; border-bottom: 2px solid var(--border-input);
  border-radius: 0;
  padding: 16px 16px;
  transition: border-color var(--dur-fast) var(--ease-link);
}
.oc-textarea { min-height: 140px; resize: vertical; }
.oc-input:focus, .oc-select:focus, .oc-textarea:focus {
  outline: none; border-bottom-color: var(--primaryblue);
}
.oc-input::placeholder, .oc-textarea::placeholder { color: var(--text-muted); }
.oc-field--error .oc-input,
.oc-field--error .oc-textarea,
.oc-field--error .oc-select { border-bottom-color: var(--danger); }
.oc-field__error { color: var(--danger); font-size: 14px; }
/* form card on a dark section */
.oc-form-card {
  background: var(--bright); color: var(--dark);
  padding: clamp(32px, 4vw, 60px);
  display: flex; flex-direction: column; gap: 32px;
}

/* ============================ 10 · UTILITIES ========================== */
.oc-stack > * + * { margin-top: 24px; }
.oc-flow > * + * { margin-top: 16px; }
.oc-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 48px; }
.oc-between { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; }
.oc-mt-sm { margin-top: 24px; } .oc-mt { margin-top: 40px; } .oc-mt-lg { margin-top: 80px; }
.oc-mb-sm { margin-bottom: 24px; } .oc-mb { margin-bottom: 40px; } .oc-mb-lg { margin-bottom: 80px; }
.oc-text-right { text-align: right; }
.oc-push-right { margin-left: auto; }
.oc-hide-wide { display: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* cookie / clipboard notice (kept from legacy layout) */
.oc-notice {
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 80;
  max-width: 520px;
  background: var(--dark); color: var(--bright);
  padding: 24px 28px; box-shadow: var(--shadow-overlay);
  display: none;
}
.oc-notice.is-shown { display: block; }
.oc-notice p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.oc-notice a { color: var(--blue-on-dark); }
.oc-notice__btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: none; border: 0; color: var(--bright); cursor: pointer; font-weight: 700;
}

/* ============================ 11 · RESPONSIVE ========================= */
@media (max-width: 760px) {
  .oc-container, .oc-header__bar { width: calc(100% - 40px); }
  .oc-header:not(.is-scrolled) .oc-header__bar { padding-right: 0; }
  .oc-nav { display: none; }
  .oc-header__circle-wrap { display: none; }
  .oc-burger { display: flex; }
  .oc-hide-wide { display: revert; }
  .oc-header__bar { padding-top: 24px; }
}
@media (max-width: 480px) {
  .oc-mobile { padding: 24px; }
  .oc-btn { width: 100%; }
  .oc-cluster .oc-btn { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---- Cookie consent banner ------------------------------------------------ */
.oc-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: var(--dark, #021022);
  color: var(--bright, #fefefb);
  padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(2,16,34,.25);
}
.oc-cookie__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 32px;
}
.oc-cookie__text { margin: 0; font-size: 15px; line-height: 1.5; max-width: 70ch; }
.oc-cookie__text a { color: var(--blue-on-dark, #66aaff); }
.oc-cookie__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.oc-cookie .oc-btn--outline { color: var(--bright); border-color: rgba(254,254,251,.5); }
.oc-cookie .oc-btn--outline:hover { border-color: var(--bright); }
/* "Accept all" sits on the dark banner — make it a bright button (dark-on-dark otherwise). */
.oc-cookie .oc-btn--dark { background: var(--bright); color: var(--dark); border-color: var(--bright); }
.oc-cookie .oc-btn--dark:hover { background: var(--argentum); border-color: var(--argentum); color: var(--dark); }
@media (max-width: 640px) {
  .oc-cookie__inner { flex-direction: column; align-items: flex-start; }
  .oc-cookie__actions { width: 100%; }
  .oc-cookie__actions .oc-btn { flex: 1 1 auto; text-align: center; }
}