/* ==========================================================================
   DUTCH DESIGN AGENCY — base.css
   Design tokens, reset, typography, buttons, utilities, preloader.
   Cloned from the live Webflow site (2026-07-01 snapshot) — exact parity.
   Loaded on every page BEFORE nav.css and footer.css.
   Never redeclare these tokens / @font-face / reset / base type in a page.
   ========================================================================== */

/* ---- Fonts (self-hosted, extracted from dd.agency) ---------------------- */
@font-face {
  font-family: 'Sequel Sans';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/SequelSans-Light.woff2') format('woff2'),
       url('../fonts/SequelSans-Light.woff') format('woff');
}
@font-face {
  font-family: 'Sequel Sans';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/SequelSans-Medium.woff2') format('woff2'),
       url('../fonts/SequelSans-Medium.woff') format('woff');
}
@font-face {
  font-family: 'PP Eiko';
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  src: url('../fonts/PPEiko-LightItalic.woff2') format('woff2');
}

/* ---- Fluid root (live site mechanism — ALL rem sizing depends on this) --- */
/* 1rem ≈ 17.6px @1440, ≈ 16px @1280, scales with viewport. */
@media (min-width: 768px) {
  html { font-size: calc(0.18940132605304227rem + 1.0140405616224648vw); }
}
@media (max-width: 767px) {
  html { font-size: calc(0rem + 4.266666666666667vw); }
}

/* ---- Tokens (live site values) ------------------------------------------- */
:root {
  --black: #000000;
  --dgrey: #1a1a1a;
  --grey: #ababab;
  --lgrey: #F2F2F2;
  --white: #FFFFFF;
  --offwhite: #FAF8F3;
  --red: #F20000;
  --green: #00F200;
  --blue: #2761E8;
  --footer-black: #0e0e0e;
  --line: rgba(0, 0, 0, 0.12); /* deprecated — use the rule tokens below */
  /* Hairline rule: ALL separator lines are 1px solid full ink — black on light bg, white on dark. */
  --rule-dark: 1px solid var(--black);
  --rule-light: 1px solid var(--white);
  --select: #00FF00; /* DDA signature green selection */

  --ff-sans: 'Sequel Sans', 'Helvetica Neue', Arial, sans-serif;
  --ff-serif: 'PP Eiko', Georgia, serif;

  /* Live font-size scale */
  --fs-3xl: 6.25rem;   /* lh 1    */
  --fs-2xl: 5rem;      /* lh 1.1  */
  --fs-xl: 3.75rem;    /* lh 1.1  */
  --fs-lg: 2.5rem;     /* lh 1.1  */
  --fs-md: 1.875rem;   /* lh 1.3  */
  --fs-sm: 1.25rem;    /* lh 1.5  */
  --fs-xs: 0.9375rem;  /* lh 1.5 — body default */
  --fs-2xs: 0.75rem;   /* lh 1.25 */

  /* Live spacing scale */
  --s-3xl: 12.5rem;
  --s-2xl: 9.375rem;
  --s-xl: 6.25rem;
  --s-lg: 5rem;
  --s-md: 3.75rem;
  --s-sm: 2.5rem;
  --s-30: 1.875rem;
  --s-xs: 1.25rem;
  --s-2xs: 0.9375rem;
  --s-3xs: 0.75rem;

  /* Live easing set */
  --ease-in: cubic-bezier(0.49, 0.025, 0.65, 0.65);
  --ease-out: cubic-bezier(0.28, 0.44, 0.49, 1);
  --ease-in-out: cubic-bezier(0.49, 0.025, 0.49, 1);
  --ease-in-out-soft: cubic-bezier(0.72, 0, 0.28, 1);
  --ease-in-out-hard: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
  --ease-bounce: cubic-bezier(0.6, 0, 0.1, 1.4);

  --nav-h: 3.938rem; /* header content height: 1.25 + 1.438 + 1.25rem */
  --gutter: 1.25rem; /* live .gl-page-width padding-inline */
  --maxw: 100%;

  --radius: 3px; /* live media/card radius */
}
@media (max-width: 767px) {
  :root { --gutter: 0.938rem; --nav-h: 3rem; }
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); overscroll-behavior: none; }

body {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--black);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--select); color: var(--black); }

/* ---- Typography (live: everything weight 300, letter-spacing 0) ---------- */
h1, h2, h3, h4 { font-weight: 300; line-height: 1.1; letter-spacing: 0; }

.display { font-size: var(--fs-2xl); font-weight: 300; line-height: 1.1; }
.h2 { font-size: var(--fs-xl); line-height: 1.1; }
.h3 { font-size: var(--fs-lg); line-height: 1.1; }
.serif { font-family: var(--ff-serif); font-style: italic; font-weight: 300; letter-spacing: 0; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0;
}
.lead { font-size: var(--fs-sm); line-height: 1.5; }
.dim { color: var(--grey); }

@media (max-width: 767px) {
  .display { font-size: var(--fs-lg); }
  .h2 { font-size: var(--fs-lg); }
  .h3 { font-size: var(--fs-md); }
}

/* ---- Layout helpers ------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding: var(--s-xl) 0; }
.section-tight { padding: var(--s-sm) 0; }

/* ---- Buttons (live system) ------------------------------------------------ */
/* Filled pill — .theme-button.theme-button-rounded */
.btn-pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.375rem; padding: 0.75rem 2.5rem;
  border-radius: 50rem; overflow: hidden;
  font-size: var(--fs-xs); font-weight: 300; line-height: 1;
  background: var(--black); color: var(--white);
}
.btn-pill > span { position: relative; z-index: 10; }
.btn-pill::after {
  content: ""; position: absolute; inset: 0; background: var(--blue);
  opacity: 0; transition: opacity 0.3s ease;
}
.btn-pill:hover::after { opacity: 1; }
.btn-pill--white { background: var(--white); color: var(--black); }
.btn-pill--white:hover { color: var(--white); }
.btn-pill--blue { background: var(--blue); }
.btn-pill--blue::after { background: var(--black); }

/* Oval image button — live "Show more" (white-oval.svg + label + arrow) */
.btn-oval {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem; width: 300px; height: 70px; color: inherit;
}
.btn-oval .btn-oval-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.btn-oval.btn-oval--dark .btn-oval-bg { filter: invert(1); }
.btn-oval span { position: relative; z-index: 2; font-size: var(--fs-xs); line-height: 1; }
.btn-oval img.btn-oval-arrow { position: relative; z-index: 2; width: 16px; height: auto; }
@media (max-width: 767px) { .btn-oval { width: 280px; } }

/* Text link underline hover — width 0 → 100% */
.link-underline { position: relative; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: currentColor; transition: width 0.2s ease;
}
.link-underline:hover::after { width: 100%; }

/* ---- Client logo marquee (shared band: homepage, pillar pages, …) -------- */
.logos-band { background: var(--black); overflow: hidden; padding: var(--s-2xl) 0; }
.logos-track { display: flex; width: max-content; align-items: center; }
.logos-chunk { flex: none; display: flex; align-items: center; gap: 10rem; padding-right: 10rem; animation: logos-scroll 45s linear infinite; }
.logos-chunk img { height: 4.2rem; width: auto; }
@keyframes logos-scroll { to { transform: translateX(-100%); } }

/* ---- Media wrapper -------------------------------------------------------- */
.media-round { border-radius: var(--radius); overflow: hidden; }

/* ---- Scroll reveal -------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Preloader — live look: black screen, smiley + spinning circular text ring.
   JS injects into <body> top. sessionStorage gate (html.visited) set in <head>.
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 999999;
  display: flex; align-items: center; justify-content: center;
  background: var(--black);
  animation: preloader-out 1.2s var(--ease-in-out-soft) 1.9s forwards;
}
.preloader-mark { position: relative; width: 8.75rem; height: 8.75rem; animation: preloader-fade 0.3s ease 1.7s forwards; }
.preloader-mark .preloader-smiley {
  position: absolute; inset: 0; margin: auto; width: 64%; height: auto;
}
.preloader-mark .preloader-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  animation: preloader-spin 10s linear infinite;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@keyframes preloader-fade { to { opacity: 0; } }
@keyframes preloader-out { to { transform: translateY(-102vh); visibility: hidden; } }

/* Skip preloader entirely for repeat visits within a session */
html.visited .preloader { display: none; }

/* ---- Idle screensaver (DVD bouncing wordmark) — injected by idle.js ------ */
.screensaver-wrapper {
  position: fixed; inset: 0; display: none;
  justify-content: center; align-items: center;
  pointer-events: none; z-index: 9000;
  opacity: 0; transition: opacity 0.3s ease;
}
.screensaver-wrapper.active { display: flex; opacity: 1; }
.screensaver-wrapper .ss_dvd { position: absolute; width: 15rem; }
.screensaver-wrapper .ss_dvd path { fill: #fff; }  /* wordmark stays white; ellipse fill is JS-driven */