/* ═══ dbi services — shared design system, loaded by every mockup ═══
   Single source of truth for fonts, tokens, nav/footer, buttons, reveal, base sections.
   Spec: ../brand/brand-tokens.md · Page-specific primitives live in each page's <style>. */

/* ── FONTS ── */
    @font-face {
      font-family: "Instrument Serif";
      src: url("../brand/fonts/web/InstrumentSerif-Regular.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: block;
    }

@font-face {
      font-family: "Instrument Serif";
      src: url("../brand/fonts/web/InstrumentSerif-Italic.ttf") format("truetype");
      font-weight: 400;
      font-style: italic;
      font-display: block;
    }

@font-face {
      font-family: "CircularXX";
      src: url("../brand/fonts/web/CircularXXWeb-Light.woff2") format("woff2"),
        url("../brand/fonts/web/CircularXXWeb-Light.woff") format("woff");
      font-weight: 300;
      font-style: normal;
      font-display: block;
    }

@font-face {
      font-family: "CircularXX";
      src: url("../brand/fonts/web/CircularXXWeb-Regular.woff2") format("woff2"),
        url("../brand/fonts/web/CircularXXWeb-Regular.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: block;
    }

@font-face {
      font-family: "CircularXX";
      src: url("../brand/fonts/web/CircularXXWeb-Italic.woff2") format("woff2"),
        url("../brand/fonts/web/CircularXXWeb-Italic.woff") format("woff");
      font-weight: 400;
      font-style: italic;
      font-display: block;
    }

@font-face {
      font-family: "CircularXX";
      src: url("../brand/fonts/web/CircularXXWeb-Medium.woff2") format("woff2"),
        url("../brand/fonts/web/CircularXXWeb-Medium.woff") format("woff");
      font-weight: 500;
      font-style: normal;
      font-display: block;
    }

@font-face {
      font-family: "CircularXX";
      src: url("../brand/fonts/web/CircularXXWeb-Bold.woff2") format("woff2"),
        url("../brand/fonts/web/CircularXXWeb-Bold.woff") format("woff");
      font-weight: 600;
      font-style: normal;
      font-display: block;
    }

@font-face {
      font-family: "CircularXX";
      src: url("../brand/fonts/web/CircularXXWeb-Bold.woff2") format("woff2"),
        url("../brand/fonts/web/CircularXXWeb-Bold.woff") format("woff");
      font-weight: 700;
      font-style: normal;
      font-display: block;
    }

/* ═══════════════════════════════════════
       dbi services — Emotional Homepage v2
       Fully light theme · KISS · Lean UX
       Product Owner: Vincent Heimann
    ═══════════════════════════════════════ */

    /* ── DESIGN TOKENS ── */
    :root {
      --font-display: "Instrument Serif", Georgia, serif;
      --font-body: "CircularXX", system-ui, sans-serif;

      /* Fluid type scale */
      --text-xs: clamp(0.75rem, 0.70rem + 0.20vw, 0.825rem);
      --text-sm: clamp(0.875rem, 0.82rem + 0.28vw, 0.975rem);
      --text-base: clamp(1.0625rem, 1.00rem + 0.30vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1.00rem + 0.55vw, 1.35rem);
      --text-xl: clamp(1.4rem, 1.10rem + 1.10vw, 1.875rem);
      --text-2xl: clamp(1.9rem, 1.30rem + 2.10vw, 3.0rem);
      --text-hero: clamp(3rem, 1.00rem + 6.50vw, 7.0rem);

      /* Spacing */
      --s-1: .25rem;
      --s-2: .5rem;
      --s-3: .75rem;
      --s-4: 1rem;
      --s-5: 1.25rem;
      --s-6: 1.5rem;
      --s-8: 2rem;
      --s-10: 2.5rem;
      --s-12: 3rem;
      --s-16: 4rem;
      --s-20: 5rem;
      --s-24: 6rem;

      /* Radii */
      --r-sm: .25rem;
      --r-md: .5rem;
      --r-lg: .875rem;
      --r-xl: 1.25rem;
      --r-full: 9999px;

      /* Shadows */
      --shadow-sm: 0 1px 4px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .04);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, .07), 0 2px 6px rgba(0, 0, 0, .04);
      --shadow-lg: 0 12px 40px rgba(0, 0, 0, .09), 0 4px 12px rgba(0, 0, 0, .04);

      /* Corporate Brand Palette */
      --green: #00aaa0;
      --black: #000000;
      --mid-gray: #9d9d9d;
      --light-gray: #eeeeee;
      --dark-blue: #1f3249;
      --red-purple: #982260;
      --mid-blue: #28627f;
      --warm-yellow: #fbb900;
      --int-gray: #cccccc;

      /* Semantic Design Tokens */
      --teal: var(--green);
      --teal-dark: #008f86;
      /* Optimized dark green for interactive hover states */
      --teal-light: #e8f7f6;
      /* Tint of green for subtle container backgrounds */
      --teal-mid: rgba(0, 170, 160, .12);
      /* 12% alpha for focus rings and overlay shadows */

      /* Surfaces */
      --bg: #f1f1f1;
      /* Premium warm canvas for editorial feel and high readability */
      --bg-pure: #ffffff;
      --surface-2: var(--light-gray);
      /* Corporate Light Grey (#eeeeee) */
      --border: var(--int-gray);
      /* Corporate Intermediate Gray (#cccccc) for clean outlines */
      --divider: var(--light-gray);
      /* Subtle separator lines using Light Grey (#eeeeee) */

      /* Typography Colors */
      --text: var(--black);
      /* Corporate Black (#000000) for strong contrast */
      --text-muted: #5a5850;
      /* Soft dark gray for high readability in body text blocks */
      --text-faint: var(--mid-gray);
      /* Corporate Mid Gray (#9d9d9d) for metadata/subtle labels */

      /* Motion */
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
      --t-fast: 150ms;
      --t: 240ms;

      /* Layout */
      --w-narrow: 600px;
      --w-default: 920px;
      --w-wide: 1160px;
    }

/* ── RESET ── */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      scroll-padding-top: 64px;
    }

body {
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.65;
      color: var(--text);
      background: var(--bg);
      overflow-x: hidden;
    }

img {
      display: block;
      max-width: 100%;
      height: auto;
    }

a {
      color: inherit;
      text-decoration: none;
    }

button {
      cursor: pointer;
      background: none;
      border: none;
      font: inherit;
      color: inherit;
    }

h1,
    h2,
    h3 {
      text-wrap: balance;
      line-height: 1.08;
    }

p,
    li {
      text-wrap: pretty;
    }

:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 3px;
      border-radius: var(--r-sm);
    }

::selection {
      background: rgba(0, 170, 160, .15);
    }

/* ── SKIP LINK ── */
    .skip {
      position: absolute;
      top: -100%;
      left: 1rem;
      background: var(--teal);
      color: #fff;
      padding: .5rem 1rem;
      border-radius: var(--r-md);
      font-size: var(--text-sm);
      font-weight: 600;
      z-index: 9999;
    }

.skip:focus {
      top: 1rem;
    }

/* ── CONTAINERS ── */
    .wrap {
      max-width: var(--w-wide);
      margin-inline: auto;
      padding-inline: var(--s-6);
    }

.wrap--default {
      max-width: var(--w-default);
      margin-inline: auto;
      padding-inline: var(--s-6);
    }

.wrap--narrow {
      max-width: var(--w-narrow);
      margin-inline: auto;
      padding-inline: var(--s-6);
    }

/* ── SCROLL REVEAL ── */
    .reveal {
      opacity: 1;
      transform: none;
    }

.nav-logo img {
      height: 24px;
      width: auto;
    }

.logo-white {
      display: block;
    }

.logo-color {
      display: none;
    }

.nav.scrolled .logo-white {
      display: none;
    }

.nav.scrolled .logo-color {
      display: block;
    }

.nav-links {
      display: flex;
      align-items: center;
      gap: var(--s-8);
      list-style: none;
    }

/* Over hero: light text */
    .nav-links a {
      font-size: var(--text-sm);
      font-weight: 500;
      color: rgba(240, 239, 235, .75);
      transition: color var(--t-fast);
    }

.nav-links a:hover {
      color: #f0efeb;
    }

.nav.scrolled .nav-links a {
      color: var(--text-muted);
    }

.nav.scrolled .nav-links a:hover {
      color: var(--text);
    }

.nav-item-dropdown {
      position: relative;
    }

.nav-dropdown {
      list-style: none;
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: var(--s-3);
      min-width: 180px;
      padding: var(--s-2);
      background: var(--bg-pure);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-md);
      opacity: 0;
      visibility: hidden;
      transform: translateY(4px);
      transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    }

.nav-item-dropdown:hover .nav-dropdown,
    .nav-item-dropdown:focus-within .nav-dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

.nav-dropdown a {
      display: block;
      padding: var(--s-2) var(--s-3);
      border-radius: var(--r-sm);
      white-space: nowrap;
      color: var(--text-muted) !important;
    }

.nav-dropdown a:hover {
      background: var(--surface-2);
      color: var(--text) !important;
    }

/* Product entry in the Services dropdown (OMrun) — a product, not a service:
   thin divider + light teal row + small "Product" tag set it apart. */
.nav-dropdown-sep {
      height: 1px;
      margin: var(--s-2) var(--s-3);
      background: var(--border);
    }

.nav-dropdown a.nav-product-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--s-2);
      background: var(--teal-light);
      color: var(--text) !important;
    }

.nav-dropdown a.nav-product-link:hover {
      background: var(--teal-mid);
    }

.nav-product-tag {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--teal-dark);
      border: 1px solid var(--teal-dark);
      border-radius: var(--r-full);
      padding: 1px 7px;
      line-height: 1.5;
    }

.btn-nav {
      padding: var(--s-2) var(--s-5);
      border: 1px solid rgba(240, 239, 235, .25);
      color: rgba(240, 239, 235, .85);
      border-radius: var(--r-full);
      font-size: var(--text-sm);
      font-weight: 600;
      transition: background var(--t), color var(--t), border-color var(--t);
    }

.btn-nav:hover {
      background: rgba(255, 255, 255, .12);
      color: #fff;
      border-color: rgba(255, 255, 255, .35);
    }

.nav.scrolled .btn-nav {
      border-color: var(--border);
      color: var(--text-muted);
    }

.nav.scrolled .btn-nav:hover {
      background: var(--teal);
      color: #fff;
      border-color: transparent;
    }

.nav-burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      padding: var(--s-2);
    }

.nav-burger span {
      width: 22px;
      height: 1.5px;
      background: var(--text);
      display: block;
      border-radius: 2px;
      transition: transform var(--t), opacity var(--t);
    }

.nav.open .nav-burger span:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg);
    }

.nav.open .nav-burger span:nth-child(2) {
      opacity: 0;
    }

.nav.open .nav-burger span:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg);
    }

/* ════════════════════════════
       SHARED SECTION ELEMENTS
    ════════════════════════════ */
    section {
      padding-block: clamp(var(--s-16), 8vw, var(--s-24));
    }

.section-label {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--teal);
      margin-bottom: var(--s-6);
    }

.section-label::before {
      content: "";
      width: 20px;
      height: 1.5px;
      background: var(--teal);
      flex-shrink: 0;
    }

.section-label.centered {
      justify-content: center;
    }

.section-label.centered::before {
      display: none;
    }

.section-h2 {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 400;
      line-height: 1.10;
      color: var(--text);
      letter-spacing: -.01em;
    }

.section-h2 em {
      font-style: italic;
      color: var(--teal);
    }

/* ── BUTTONS ── */
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      padding: var(--s-4) var(--s-8);
      background: var(--teal);
      color: #fff;
      border-radius: var(--r-full);
      font-size: var(--text-sm);
      font-weight: 600;
      letter-spacing: .02em;
      transition: background var(--t) var(--ease-out),
        box-shadow var(--t) var(--ease-out),
        transform var(--t-fast);
    }

.btn-primary:hover {
      background: var(--teal-dark);
      box-shadow: 0 0 0 5px rgba(0, 170, 160, .18);
    }

.btn-primary:active {
      transform: scale(.98);
    }

.btn-primary .arrow {
      width: 15px;
      height: 15px;
      transition: transform var(--t) var(--ease-out);
    }

.btn-primary:hover .arrow {
      transform: translateX(4px);
    }

.btn-text {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--teal);
      border-bottom: 1px solid transparent;
      transition: gap var(--t) var(--ease-out), border-color var(--t);
    }

.btn-text:hover {
      gap: var(--s-3);
      border-bottom-color: var(--teal);
    }

.btn-text svg {
      width: 14px;
      height: 14px;
    }

/* Back/secondary CTA arrow — match the primary arrow's weight; nudge left on hover */
    .btn-secondary svg {
      width: 15px;
      height: 15px;
      flex-shrink: 0;
      transition: transform var(--t) var(--ease-out);
    }

#cta-back-hub:hover svg {
      transform: translateX(-3px);
    }

/* ════════════════════════════
       LAYER 1 — EMOTION
    ════════════════════════════ */

    /* ── HERO — full-bleed image ── */
    .hero {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background: #1a1f1e;
    }

/* Background image */
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

/* Gradient overlay: dark bottom-left for text, transparent top-right for image */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(135deg,
          rgba(14, 18, 17, .88) 0%,
          rgba(14, 18, 17, .72) 35%,
          rgba(14, 18, 17, .3) 60%,
          rgba(14, 18, 17, .08) 80%,
          transparent 100%),
        linear-gradient(to top,
          rgba(14, 18, 17, .6) 0%,
          transparent 50%);
    }

.hero-inner {
      position: relative;
      z-index: 2;
      max-width: var(--w-wide);
      margin-inline: auto;
      width: 100%;
      padding-inline: clamp(var(--s-6), 5vw, var(--s-12));
      padding-top: calc(64px + var(--s-16));
      padding-bottom: clamp(var(--s-16), 8vw, var(--s-24));
      display: grid;
      gap: var(--s-6);
    }

.hero-eyebrow {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--teal);
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    }

.hero-eyebrow::before {
      content: "";
      width: 24px;
      height: 1px;
      background: var(--teal);
      flex-shrink: 0;
    }

.hero-h1 em {
      font-style: italic;
      color: var(--teal);
    }

/* One-time reveal animation on the italic line */
    .hero-reveal {
      display: inline-block;
      animation: heroReveal 1s var(--ease-out) both;
      animation-delay: .4s;
    }

@keyframes heroReveal {
      from {
        opacity: 0;
        transform: translateY(.12em);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

.section-body {
      font-size: var(--text-base);
      color: var(--text-muted);
      line-height: 1.75;
      margin-top: var(--s-4);
      max-width: 60ch;
    }

/* ── FOOTER ── */
    footer {
      background: var(--bg);
      border-top: 1px solid var(--divider);
      padding-top: var(--s-12);
      padding-bottom: var(--s-8);
    }

.footer-grid {
      max-width: var(--w-wide);
      margin-inline: auto;
      padding-inline: var(--s-6);
      display: grid;
      grid-template-columns: 1.5fr repeat(3, 1fr);
      gap: var(--s-10);
    }

.footer-brand {
      display: grid;
      gap: var(--s-4);
      align-content: start;
    }

.footer-logo {
      height: 20px;
      width: auto;
    }

.footer-desc {
      font-size: var(--text-sm);
      color: var(--text-muted);
      line-height: 1.65;
      max-width: 26ch;
    }

/* ── FOOTER CERTS ROW ── */
    .footer-certs-row {
      max-width: var(--w-wide);
      margin-inline: auto;
      margin-top: var(--s-12);
      padding-inline: var(--s-6);
      padding-block: var(--s-12);
      border-top: 1px solid var(--divider);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--s-8);
    }

.footer-certs-label {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text-faint);
    }

.footer-certs {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-16);
      align-items: stretch;
      justify-content: center;
    }

.footer-certs img {
      height: 80px;
      width: auto;
      object-fit: contain;
      /* opacity: 0.65;
      transition: opacity var(--t) var(--ease-out); */
    }

.footer-col-title {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-faint);
      margin-bottom: var(--s-4);
    }

.footer-list {
      list-style: none;
      display: grid;
      gap: var(--s-3);
    }

.footer-list a {
      font-size: var(--text-sm);
      color: var(--text-muted);
      transition: color var(--t);
    }

.footer-list a:hover {
      color: var(--teal);
    }

.footer-bottom {
      max-width: var(--w-wide);
      margin-inline: auto;
      padding-inline: var(--s-6);
      padding-top: var(--s-8);
      margin-top: var(--s-8);
      border-top: 1px solid var(--divider);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--s-4);
      font-size: var(--text-xs);
      color: var(--text-faint);
    }

@media (prefers-reduced-motion: reduce) {
  *,
        *::before,
        *::after {
          animation-duration: .01ms !important;
          transition-duration: .01ms !important;
          scroll-behavior: auto !important;
        }
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
          opacity: 0;
          transform: translateY(20px);
          transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
        }

  .reveal.visible {
          opacity: 1;
          transform: none;
        }

  .reveal-d1 {
          transition-delay: .10s;
        }

  .reveal-d2 {
          transition-delay: .20s;
        }

  .reveal-d3 {
          transition-delay: .30s;
        }
}

@media (max-width: 820px) {
  .nav-links {
          display: none;
        }

  .nav-burger {
          display: flex;
        }

  .nav.open .nav-links {
          display: flex;
          flex-direction: column;
          gap: var(--s-6);
          position: fixed;
          inset: 0;
          background: var(--bg-pure);
          align-items: center;
          justify-content: center;
          font-size: var(--text-lg);
          z-index: 199;
        }

  .nav.open .nav-links a {
          color: var(--text);
          font-size: var(--text-xl);
        }

  .nav-dropdown {
          position: static;
          opacity: 1;
          visibility: visible;
          transform: none;
          box-shadow: none;
          border: none;
          background: transparent;
          margin-top: var(--s-2);
          padding: 0;
          text-align: center;
        }

  .nav-dropdown a {
          font-size: var(--text-base);
        }

  .nav-dropdown-sep {
          margin-inline: auto;
          width: 48px;
        }

  .nav-dropdown a.nav-product-link {
          display: inline-flex;
          justify-content: center;
          border-radius: var(--r-full);
          padding-inline: var(--s-4);
        }
}

@media (max-width: 800px) {
  .footer-grid {
          grid-template-columns: 1fr 1fr;
        }

  .footer-brand {
          grid-column: 1 / -1;
        }
}

@media (max-width: 480px) {
  .footer-grid {
          grid-template-columns: 1fr;
        }
}