/* ============================================================
   Digital Adaption — Design System
   Single source of truth for the whole site.
   Build the GLOBAL pieces (tokens, header, footer, buttons,
   cards) once, then every page reuses them. Do not restyle
   per page — change tokens here and the whole site follows.
   ============================================================ */

/* ---- Fonts (or self-host these three families) ---- */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---- 1. TOKENS ---- */
:root {
  /* surfaces */
  --da-bg:#F3F1EB;          /* page ground (warm off-white) */
  --da-surface:#FFFFFF;     /* cards */
  --da-surface-2:#FAF8F3;   /* secondary bands */
  /* ink */
  --da-ink:#14100D;         /* headings / strong text */
  --da-muted:#5E5A52;       /* body text */
  --da-faint:#938D81;       /* meta / captions */
  /* lines */
  --da-line:#E4E0D6;        /* hairline borders */
  --da-line-2:#D5CFC1;      /* stronger borders */
  /* primary (deep petrol/teal) */
  --da-primary:#0C3B45;
  --da-primary-700:#082D35; /* hover / pressed */
  --da-primary-100:#E2ECEC; /* tint fills */
  --da-on-primary:#7FD8CE;  /* teal for labels/icons on dark */
  /* accent (small text + links — this darker step meets contrast) */
  --da-accent:#0E7C74;
  --da-accent-600:#0C6960;
  /* spark (warm accent — use SPARINGLY: one detail per view) */
  --da-spark:#C4562A;

  /* type */
  --da-heading:'Schibsted Grotesk', system-ui, sans-serif;
  --da-body:'Instrument Sans', system-ui, sans-serif;
  --da-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* radii */
  --da-r-sm:10px; --da-r-md:16px; --da-r-lg:18px; --da-r-xl:22px; --da-r-pill:999px;

  /* shadows (tuned to the light ground) */
  --da-shadow-sm:0 1px 2px rgba(20,16,13,.05), 0 1px 3px rgba(20,16,13,.04);
  --da-shadow-md:0 4px 12px rgba(20,16,13,.06), 0 2px 4px rgba(20,16,13,.04);
  --da-shadow-lg:0 18px 46px rgba(12,59,69,.12), 0 6px 14px rgba(20,16,13,.05);

  /* layout */
  --da-maxw:1180px;
  --da-gutter:clamp(20px, 5vw, 56px);   /* page side padding */
  --da-section:clamp(56px, 8vw, 96px);  /* section vertical rhythm */
}

/* ---- 2. BASE ---- */
*,*::before,*::after { box-sizing:border-box; }
body {
  margin:0; background:var(--da-bg); color:var(--da-ink);
  font-family:var(--da-body); font-size:16px; line-height:1.6;
  text-wrap:pretty; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4 { font-family:var(--da-heading); margin:0; letter-spacing:-0.02em; line-height:1.14; }
p { margin:0; }
a { color:var(--da-accent-600); text-decoration:none; }
a:hover { color:var(--da-primary); }
img { max-width:100%; display:block; }
.da-num { font-variant-numeric:tabular-nums; }

/* ---- 3. LAYOUT ---- */
.da-wrap { max-width:var(--da-maxw); margin:0 auto; padding-inline:var(--da-gutter); }
.da-section { padding-block:var(--da-section); }
.da-section-tight { padding-block:clamp(40px,6vw,72px); }

.da-band-soft { background:var(--da-surface-2); border-block:1px solid var(--da-line); }
.da-band-dark { background:var(--da-primary); color:#fff; }
.da-band-dark h1,.da-band-dark h2,.da-band-dark h3 { color:#fff; }

/* dot-grid texture — put on a position:relative wrapper; it fades out downward */
.da-texture { position:relative; overflow:hidden; }
.da-texture > .da-texture-fx {
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(12,59,69,.06) 1.1px, transparent 1.1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 82%);
  mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 82%);
}
.da-band-dark .da-texture-fx { background-image:radial-gradient(circle, rgba(255,255,255,.06) 1.1px, transparent 1.1px); -webkit-mask-image:none; mask-image:none; }

/* grids — all collapse to 1 column at 860px */
.da-g2,.da-g3,.da-g4 { display:grid; gap:22px; }
.da-g2 { grid-template-columns:repeat(2,1fr); }
.da-g3 { grid-template-columns:repeat(3,1fr); }
.da-g4 { grid-template-columns:repeat(4,1fr); }
.da-split { display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,5vw,64px); align-items:center; }

/* ---- 4. TYPOGRAPHY HELPERS ---- */
.da-display { font-weight:700; font-size:clamp(36px,4.8vw,58px); line-height:1.05; }
.da-h1 { font-weight:700; font-size:clamp(34px,4.4vw,54px); line-height:1.06; }
.da-h2 { font-weight:700; font-size:clamp(28px,3.4vw,42px); }
.da-h3 { font-weight:600; font-size:20px; line-height:1.25; }
.da-lead { font-size:18px; line-height:1.62; color:var(--da-muted); }
.da-body-muted { font-size:15.5px; line-height:1.6; color:var(--da-muted); }
.da-accent { color:var(--da-accent-600); }
.da-measure { max-width:60ch; }

/* index / eyebrow label with crosshair marker — see markup snippet in RULESET */
.da-idx { display:inline-flex; align-items:center; gap:10px; font-family:var(--da-mono);
  font-weight:500; font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--da-muted); }
.da-idx svg { flex:none; color:var(--da-accent); }
.da-idx b { color:var(--da-accent-600); font-weight:600; }
.da-band-dark .da-idx { color:rgba(255,255,255,.7); }
.da-band-dark .da-idx svg,.da-band-dark .da-idx b { color:var(--da-on-primary); }

.da-mono { font-family:var(--da-mono); }
.da-kicker { font-family:var(--da-mono); font-weight:500; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--da-accent-600); }
.da-meta { font-family:var(--da-mono); font-size:12.5px; color:var(--da-faint); }

/* ---- 5. BUTTONS ---- */
.da-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--da-heading);
  font-weight:600; font-size:15px; padding:13px 22px; border-radius:11px;
  border:1px solid transparent; cursor:pointer; transition:.16s ease; text-decoration:none; }
.da-btn-primary { background:var(--da-primary); color:#fff; }
.da-btn-primary:hover { background:var(--da-primary-700); color:#fff; transform:translateY(-1px); box-shadow:var(--da-shadow-md); }
.da-btn-ghost { background:var(--da-surface); color:var(--da-ink); border-color:var(--da-line-2); }
.da-btn-ghost:hover { border-color:var(--da-primary); color:var(--da-primary); }
/* on dark bands */
.da-btn-onlight { background:#fff; color:var(--da-primary); }
.da-btn-onlight:hover { background:#fff; color:var(--da-primary); transform:translateY(-1px); box-shadow:var(--da-shadow-md); }
.da-btn-outline-light { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.da-btn-outline-light:hover { color:#fff; border-color:#fff; }
.da-btn-block { width:100%; justify-content:center; }
:focus-visible { outline:2px solid var(--da-accent); outline-offset:2px; }

/* ---- 6. CARDS, CHIPS, PILLS ---- */
.da-card { background:var(--da-surface); border:1px solid var(--da-line); border-radius:var(--da-r-md);
  padding:26px; box-shadow:var(--da-shadow-sm); transition:.18s ease; }
.da-card-hover:hover { transform:translateY(-3px); box-shadow:var(--da-shadow-lg); border-color:var(--da-line-2); }
.da-panel { background:var(--da-surface); border:1px solid var(--da-line); border-radius:var(--da-r-lg);
  box-shadow:var(--da-shadow-lg); overflow:hidden; }
.da-panel-head { padding:16px 22px; border-bottom:1px solid var(--da-line); display:flex; align-items:center; justify-content:space-between; }

.da-chip { display:inline-flex; align-items:center; padding:7px 14px; border-radius:var(--da-r-pill);
  border:1px solid var(--da-line-2); background:var(--da-surface); font-size:14px; font-weight:500; color:var(--da-muted); }
.da-pill-file { font-family:var(--da-mono); padding:6px 12px; border-radius:8px;
  border:1px solid rgba(255,255,255,.25); font-size:12px; color:rgba(255,255,255,.9); }

/* numbered swatch (problem cards etc.) */
.da-numtile { width:40px; height:40px; border-radius:var(--da-r-sm); background:var(--da-primary-100);
  color:var(--da-primary); display:flex; align-items:center; justify-content:center;
  font-family:var(--da-mono); font-weight:600; font-size:15px; }

/* ---- 7. FORM FIELDS ---- */
.da-label { display:block; font-family:var(--da-heading); font-weight:600; font-size:13.5px; color:var(--da-ink); margin-bottom:7px; }
.da-field { width:100%; font-family:var(--da-body); font-size:15px; color:var(--da-ink);
  background:var(--da-surface); border:1px solid var(--da-line-2); border-radius:var(--da-r-sm);
  padding:12px 14px; transition:.14s ease; }
.da-field::placeholder { color:var(--da-faint); }
.da-field:focus { outline:none; border-color:var(--da-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--da-accent) 18%, transparent); }

/* ---- 8. HEADER + NAV + MOBILE MENU (pure CSS, no JS) ---- */
.da-header { position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--da-bg) 86%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--da-line); }
.da-header-row { display:flex; align-items:center; gap:20px; height:70px; }
.da-brand { font-family:var(--da-heading); font-weight:800; font-size:19px; letter-spacing:-0.02em; color:var(--da-ink); text-decoration:none; margin-right:auto; }
.da-brand span { color:var(--da-accent-600); }
.da-navlinks { display:flex; gap:26px; align-items:center; }
.da-navlink { font-family:var(--da-heading); font-weight:500; font-size:15px; color:var(--da-muted); }
.da-navlink:hover { color:var(--da-ink); }
.da-navlink[aria-current="page"] { color:var(--da-ink); }
.da-burger { display:none; width:42px; height:42px; border:1px solid var(--da-line-2);
  border-radius:var(--da-r-sm); background:var(--da-surface); cursor:pointer;
  align-items:center; justify-content:center; color:var(--da-ink); }
.da-burger:hover { border-color:var(--da-primary); color:var(--da-primary); }
.da-menu-toggle { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.da-mobilemenu { display:none; flex-direction:column; padding:8px var(--da-gutter) 20px;
  border-top:1px solid var(--da-line); background:var(--da-bg); }
.da-mobilemenu .da-navlink { padding:14px 0; border-bottom:1px solid var(--da-line); }
.da-menu-toggle:checked ~ .da-header .da-mobilemenu { display:flex; }

@media (max-width:860px) {
  .da-navlinks { display:none; }
  .da-burger { display:inline-flex; }
  .da-cta-desktop { display:none; }
  .da-g2,.da-g3,.da-g4 { grid-template-columns:1fr; }
  .da-split { grid-template-columns:1fr; }
}

/* ---- 9. FOOTER ---- */
.da-footer { border-top:1px solid var(--da-line); }
.da-footer-row { padding:40px var(--da-gutter) 56px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:baseline; }

/* ---- 10. MOTION (optional; degrade gracefully) ---- */
@keyframes da-settle { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes da-draw   { from { height:0; } to { height:var(--da-h,26px); } }
.da-set { opacity:0; animation:da-settle .6s cubic-bezier(.2,.7,.3,1) forwards; }
.da-s1{animation-delay:.05s}.da-s2{animation-delay:.18s}.da-s3{animation-delay:.31s}.da-s4{animation-delay:.5s}.da-s5{animation-delay:.66s}
@media (prefers-reduced-motion:reduce){
  .da-set { animation:none !important; opacity:1 !important; transform:none !important; }
  .da-btn:hover,.da-card-hover:hover { transform:none !important; }
}