/* ==========================================================================
   DLN Medical — base.css  (v1, 2026-10-07)
   Requires tokens.css first. Order: reset > type > layout > components.
   Class names are plain BEM-ish; no utility soup. See DIRECTION.md §6.
   ========================================================================== */

/* ---------- 1. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
p, h1, h2, h3, h4, h5, h6, li, dd, figcaption { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--teal-100); color: var(--ink); }

/* Focus: always visible on keyboard, never removed. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-1);
}
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -4rem; z-index: var(--z-skip);
  background: var(--ink); color: var(--on-dark); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2); text-decoration: none; font-weight: 600;
  transition: top var(--d-2) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

/* ---------- 2. Typography ------------------------------------------------ */
h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
  text-wrap: balance;
  color: var(--text);
}
.display { font-size: var(--t-5xl); line-height: var(--lh-tight); letter-spacing: -0.025em; font-weight: 350; }
h1, .h1 { font-size: var(--t-4xl); line-height: 1.08; letter-spacing: -0.022em; font-weight: 380; }
h2, .h2 { font-size: var(--t-3xl); line-height: 1.12; letter-spacing: -0.018em; }
h3, .h3 { font-size: var(--t-2xl); }
h4, .h4 { font-size: var(--t-xl); line-height: 1.3; }
h5, h6 { font-size: var(--t-base); font-weight: 600; }
/* Italic serif is the "voice" accent: use <em> inside headings for one word. */
:is(h1, h2, h3, .display) em { font-style: italic; font-weight: inherit; color: var(--teal-700); }

p { text-wrap: pretty; }
.prose > * + * { margin-top: 1em; }
.prose { max-width: var(--measure); }
.prose :is(h2, h3) { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--teal-700); }

.lede { font-size: var(--t-lg); line-height: 1.55; color: var(--text-soft); max-width: 40ch; }
.lede--en, .en {           /* English line beneath Albanian copy */
  font-family: var(--font-display); font-style: italic; color: var(--text-muted);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-text); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-soft);
}
.eyebrow::before {                     /* the split-circle tick: green | teal */
  content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; flex: none;
  background: linear-gradient(90deg, var(--brand-green) 50%, var(--brand-teal) 50%);
}
.eyebrow--plain::before { display: none; }
.small, small { font-size: var(--t-sm); }
.meta { font-size: var(--t-sm); color: var(--text-muted); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.index {                                /* section/card numbers: "01" */
  font-family: var(--font-display); font-style: italic; font-size: var(--t-lg);
  color: var(--text-muted); font-variant-numeric: lining-nums;
}

/* Links in running text */
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
.link {                                  /* animated underline, for nav/footer/inline CTAs */
  color: inherit; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--d-2) var(--ease-out), color var(--d-1);
  padding-bottom: 2px;
}
.link:hover, .link[aria-current="page"] { background-size: 100% 1px; color: inherit; }

/* ---------- 3. Layout primitives ---------------------------------------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.container--narrow { max-width: calc(48rem + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--sand { background: var(--surface-alt); }
.section--paper { background: var(--surface); }
.section--teal { background: var(--teal-50); }

/* Stack: vertical rhythm. Set --stack on the element to change the gap. */
.stack { display: flex; flex-direction: column; gap: var(--stack, var(--s-4)); }
.stack--lg { --stack: var(--s-6); }
.stack--sm { --stack: var(--s-2); }
/* Cluster: wrapping row of inline things (buttons, badges, meta). */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster, var(--s-3)); }
.cluster--between { justify-content: space-between; }

/* 12-column editorial grid. Children collapse to full width below 56rem. */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--grid-row, var(--s-7)); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 40rem) {
  .grid > .sm-6 { grid-column: auto / span 6; }
}
@media (min-width: 56rem) {
  .grid > [class*="span-"] { grid-column: auto / span var(--span, 12); }
  .grid > .span-3 { --span: 3; } .grid > .span-4 { --span: 4; } .grid > .span-5 { --span: 5; }
  .grid > .span-6 { --span: 6; } .grid > .span-7 { --span: 7; } .grid > .span-8 { --span: 8; }
  .grid > .span-9 { --span: 9; }
  .grid > .start-2 { grid-column-start: 2; } .grid > .start-3 { grid-column-start: 3; }
  .grid > .start-6 { grid-column-start: 6; } .grid > .start-7 { grid-column-start: 7; }
  .grid > .start-8 { grid-column-start: 8; } .grid > .start-9 { grid-column-start: 9; }
  .grid > .self-end { align-self: end; }    .grid > .self-center { align-self: center; }
}
/* Auto grid for card rows: min card width via --min. */
.auto-grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--min, 17rem)), 1fr)); }

/* ---------- 4. Rules, dividers, arch ------------------------------------- */
.rule { border: 0; border-top: 1px solid var(--line); width: 100%; }
.rule--ink { border-top-color: var(--ink); }
.rule--split {                          /* short two-tone brand rule */
  border: 0; height: 2px; width: 3rem;
  background: linear-gradient(90deg, var(--brand-green) 50%, var(--brand-teal) 50%);
}
.rule--dotted { border-top: 1px dotted var(--stone-strong); }
.arch {                                 /* signature frame for illustrations / photos */
  border-radius: var(--r-arch); background: var(--surface-alt); overflow: hidden;
  aspect-ratio: var(--arch-ratio, 4 / 5); position: relative; isolation: isolate;
}
.arch--teal { background: var(--teal-50); }
.arch--green { background: var(--green-50); }
.arch > img, .arch > svg { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 5. Buttons ---------------------------------------------------- */
.btn {
  --btn-bg: var(--teal-700); --btn-fg: var(--on-dark); --btn-bd: var(--teal-700);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 3rem; padding: 0.8em 1.35em; border-radius: var(--r-1);
  background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd);
  font-family: var(--font-text); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--d-1) var(--ease-soft), color var(--d-1) var(--ease-soft),
              border-color var(--d-1) var(--ease-soft), box-shadow var(--d-2) var(--ease-soft);
}
.btn:hover { --btn-bg: var(--teal-800); --btn-bd: var(--teal-800); color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn__arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--d-2) var(--ease-out); }
.btn:hover .btn__arrow, .btn-text:hover .btn__arrow { transform: translateX(4px); }
.btn--secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--ink); }
.btn--secondary:hover { --btn-bg: var(--ink); --btn-fg: var(--on-dark); --btn-bd: var(--ink); }
.btn--light { --btn-bg: var(--paper); --btn-fg: var(--teal-800); --btn-bd: var(--paper); }
.btn--light:hover { --btn-bg: var(--teal-50); --btn-bd: var(--teal-50); --btn-fg: var(--teal-800); }
.btn--sm { min-height: 2.5rem; padding: 0.55em 1em; }
.btn--lg { min-height: 3.5rem; padding: 1em 1.7em; font-size: var(--t-base); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] {
  --btn-bg: var(--sand); --btn-fg: var(--ink-muted); --btn-bd: var(--stone);
  cursor: not-allowed; transform: none;
}
/* Text button: the secondary action next to a .btn. Never two filled buttons side by side. */
.btn-text {
  display: inline-flex; align-items: center; gap: 0.55em; min-height: 3rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-decoration: none;
}
.btn-text span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size var(--d-2) var(--ease-out); }
.btn-text:hover { color: var(--teal-700); }
.btn-text:hover span { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- 6. Badges & tags --------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.3em 0.7em; border-radius: var(--r-2); border: 1px solid var(--line);
  background: var(--paper); color: var(--ink-soft);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.04em; line-height: 1.3;
}
.badge--teal { background: var(--teal-50); border-color: var(--teal-100); color: var(--teal-800); }
.badge--green { background: var(--green-50); border-color: var(--green-100); color: var(--green-800); }
.badge--ink { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.badge--dot::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; }
.badge--live::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--brand-green); box-shadow: 0 0 0 0 rgb(142 198 65 / 0.6); animation: badge-live 2.4s var(--ease-breath) infinite; }
@keyframes badge-live { 70% { box-shadow: 0 0 0 0.45em rgb(142 198 65 / 0); } 100% { box-shadow: 0 0 0 0 rgb(142 198 65 / 0); } }

/* ---------- 7. Section header ------------------------------------------- */
/* <header class="section-head"> index + eyebrow / title / lede, asymmetric */
.section-head {
  display: grid; gap: var(--s-4) var(--gutter); margin-bottom: var(--s-8);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
  grid-template-columns: 1fr;
}
.section-head__index { display: flex; align-items: baseline; gap: var(--s-4); }
.section-head__title { max-width: 18ch; }
.section-head__lede { color: var(--text-soft); max-width: 46ch; }
@media (min-width: 56rem) {
  .section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .section-head__index { grid-column: 1 / -1; }
  .section-head__title { grid-column: 1 / span 7; }
  .section-head__lede { grid-column: 8 / span 5; }
}

/* ---------- 8. Cards ------------------------------------------------------ */
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--surface); border-radius: var(--r-3); box-shadow: var(--sh-1);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  transition: box-shadow var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
}
.card__index { font-family: var(--font-display); font-style: italic; color: var(--text-muted); }
.card__title { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.25; font-weight: 400; }
.card__text { color: var(--text-soft); font-size: var(--t-sm); line-height: 1.6; }
.card__foot { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--t-sm); }
.card__media { margin: calc(-1 * clamp(1.25rem, 1rem + 1vw, 2rem)); margin-bottom: var(--s-3); border-radius: var(--r-3) var(--r-3) 0 0; overflow: hidden; background: var(--surface-alt); }
/* Whole-card link: put .card__link on the title's <a>; its ::after covers the card. */
.card__link { color: inherit; text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.card--link:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.card--link:hover .card__arrow { transform: translateX(4px); color: var(--teal-700); }
.card__arrow { width: 1.25rem; height: 1.25rem; transition: transform var(--d-2) var(--ease-out), color var(--d-1); }
.card--flat { box-shadow: none; background: transparent; border-top: 1px solid var(--ink); border-radius: 0; padding-inline: 0; }
.card--sand { background: var(--surface-alt); box-shadow: none; }
.card--feature { background: var(--teal-50); box-shadow: none; }

/* ---------- 9. Forms ------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.label { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.label .opt { font-weight: 400; color: var(--text-muted); }
.hint { font-size: var(--t-xs); color: var(--text-muted); }
.input, .select, .textarea {
  width: 100%; min-height: 3rem; padding: 0.7em 0.9em;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--stone-strong); border-radius: var(--r-1);
  font-size: var(--t-base); line-height: 1.4;
  transition: border-color var(--d-1) var(--ease-soft), box-shadow var(--d-2) var(--ease-soft);
}
.input::placeholder, .textarea::placeholder { color: #6e7273; opacity: 1; }  /* 4.9:1 on white */
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-soft); }
.input:focus, .select:focus, .textarea:focus,
.input.is-focus, .select.is-focus, .textarea.is-focus {
  outline: none; border-color: var(--teal-700);
  box-shadow: 0 0 0 3px var(--teal-100);
}
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 1px; }
.textarea { min-height: 8rem; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231c2321' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9em center; background-size: 1em;
}
[aria-invalid="true"].input, [aria-invalid="true"].select, [aria-invalid="true"].textarea {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-50);
}
.field__error { display: flex; gap: 0.4em; align-items: flex-start; font-size: var(--t-xs); font-weight: 600; color: var(--danger); }
.field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--danger); color: #fff; font-size: 0.85em; line-height: 1; }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--sand); border-color: var(--stone); color: var(--ink-muted); cursor: not-allowed; }
.check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); color: var(--ink-soft); cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.15em;
  border: 1px solid var(--stone-strong); border-radius: var(--r-1); background: var(--paper) center / 0.85rem no-repeat;
  transition: background-color var(--d-1), border-color var(--d-1);
}
.check input[type="radio"] { border-radius: 50%; }
.check input:checked { background-color: var(--teal-700); border-color: var(--teal-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 0 30%, transparent 33%); background-size: 100%; }
.check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid > .full { grid-column: 1 / -1; } }

/* ---------- 10. Icons (sprite in illustrations/icons.svg) --------------- */
.icon {
  width: var(--icon-size, 1.5rem); height: var(--icon-size, 1.5rem); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  --icon-accent: var(--brand-teal);
  stroke-dasharray: 1 0;                /* every sprite path has pathLength="1" */
}
.icon--lg { --icon-size: 2.5rem; stroke-width: 1.25; }
.icon--xl { --icon-size: 3.5rem; stroke-width: 1; }
.icon--mono { --icon-accent: currentColor; }
@keyframes icon-draw { from { stroke-dasharray: 1 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1 1; stroke-dashoffset: 0; } }
:is(a, button, .icon-tile):is(:hover, :focus-visible) .icon, .icon.is-drawing { animation: icon-draw 0.9s var(--ease-in-out) both; }

/* ---------- 11. Header & navigation ------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgb(248 245 239 / 0.94); border-bottom: 1px solid transparent;
  transition: border-color var(--d-3) var(--ease-out), background-color var(--d-3) var(--ease-out);
}
@supports (backdrop-filter: blur(1px)) { .site-header { background: rgb(248 245 239 / 0.86); backdrop-filter: saturate(1.2) blur(10px); } }
.site-header__inner { display: flex; align-items: center; gap: var(--s-5); min-height: 5.5rem; transition: min-height var(--d-3) var(--ease-out); }
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header.is-scrolled .site-header__inner { min-height: 4rem; }
.site-header.is-scrolled .brand__mark { width: 2.1rem; height: 2.1rem; }

/* Brand lockup: raster mark (official PNG/SVG) + CSS wordmark. Do not redraw the mark. */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); flex: none; }
.brand__mark { width: 2.6rem; height: 2.6rem; flex: none; transition: width var(--d-3) var(--ease-out), height var(--d-3) var(--ease-out); }
.wordmark { display: inline-flex; align-items: baseline; gap: 0.3em; font-size: 1.3rem; line-height: 1; white-space: nowrap; }
.wordmark__dln { font-family: var(--font-text); font-weight: 650; letter-spacing: 0.06em; }
.wordmark__medical { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.brand--stacked { flex-direction: column; gap: 0.6rem; text-align: center; }
.brand--stacked .wordmark { flex-direction: column; align-items: center; gap: 0.15em; }
.brand--stacked .wordmark__medical { font-size: 0.82em; }

.nav { margin-left: auto; display: none; }
.nav__list { display: flex; gap: clamp(1rem, 0.2rem + 1.6vw, 2.2rem); list-style: none; padding: 0; }
.nav__link { color: var(--ink); text-decoration: none; font-size: var(--t-sm); font-weight: 500; padding-block: 0.4em; position: relative; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--d-2) var(--ease-out); }
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { color: var(--teal-700); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-1); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; }
.lang a { padding: 0.45em 0.6em; color: var(--ink-soft); text-decoration: none; min-width: 2.75rem; min-height: 2.25rem; display: grid; place-items: center; }
.lang a[aria-current="true"] { background: var(--ink); color: var(--on-dark); border-radius: 2px; }
.site-header__actions { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.site-header__cta { display: none; }

.nav-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-1); color: var(--ink); }
.nav-toggle__bars { width: 1.4rem; height: 10px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--d-2) var(--ease-out), top var(--d-2) var(--ease-out); }
.nav-toggle__bars::before { top: 0; } .nav-toggle__bars::after { top: 8.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 4.25px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { top: 4.25px; transform: rotate(-45deg); }

@media (min-width: 60rem) {
  .nav { display: block; }
  .site-header__actions { margin-left: var(--s-5); }
  .site-header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* Mobile drawer: <div class="drawer" id="menu" data-drawer hidden> ... */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: flex; justify-content: flex-end; }
.drawer__scrim { position: absolute; inset: 0; background: rgb(28 35 33 / 0.32); opacity: 0; transition: opacity var(--d-3) var(--ease-out); }
.drawer__panel {
  position: relative; width: min(24rem, 100%); height: 100%; overflow-y: auto;
  background: var(--linen); box-shadow: var(--sh-3);
  padding: var(--s-5) var(--gutter) var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-6);
  transform: translateX(100%); transition: transform var(--d-3) var(--ease-out);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; }
.drawer__list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.drawer__list li { border-bottom: 1px solid var(--line); }
.drawer__list a { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink); text-decoration: none; }
.drawer__list a[aria-current="page"] { color: var(--teal-700); }
.drawer__list a span { font-family: var(--font-text); font-size: var(--t-xs); color: var(--text-muted); font-style: normal; }
.drawer__close { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
body.has-drawer { overflow: hidden; }

/* ---------- 12. Footer ---------------------------------------------------- */
.site-footer { background: var(--sand); color: var(--ink-soft); font-size: var(--t-sm); padding-top: var(--s-9); position: relative; overflow: hidden; }
.site-footer__grid { display: grid; gap: var(--s-7) var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .site-footer__grid { grid-template-columns: 5fr 2fr 2fr 3fr; } }
.site-footer h2 { font-family: var(--font-text); font-size: var(--t-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--s-4); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.site-footer a { color: var(--ink); }
.site-footer__statement { font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1.2; color: var(--ink); max-width: 16ch; }
.site-footer__base { margin-top: var(--s-8); padding-block: var(--s-5); border-top: 1px solid var(--stone); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); justify-content: space-between; color: var(--ink-muted); font-size: var(--t-xs); }

/* Partner slot (Widex etc.): we never draw their logo; the official file goes in here. */
.partner-slot { display: inline-flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-2); background: var(--paper); }
.partner-slot__logo { width: 7.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px dashed var(--stone-strong); border-radius: var(--r-1); font-size: 0.6875rem; color: var(--ink-muted); text-align: center; line-height: 1.2; }
.partner-slot__logo img { max-width: 100%; max-height: 100%; }
.partner-slot__text { font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.4; max-width: 22ch; }

/* ---------- 13. Steps (process) ------------------------------------------ */
.steps { list-style: none; padding: 0; display: grid; gap: var(--s-6); counter-reset: step; position: relative; }
.steps__item { position: relative; padding-left: 3.25rem; }
.steps__item::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0.1em; font-family: var(--font-display); font-style: italic; font-size: var(--t-lg); color: var(--teal-700); }
.steps__title { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.25; margin-bottom: var(--s-2); }
.steps__text { color: var(--text-soft); font-size: var(--t-sm); }
@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(var(--steps, 4), 1fr); gap: var(--gutter); }
  .steps__item { padding-left: 0; padding-top: 0.5rem; }
  .steps__item::before { position: static; display: block; margin-bottom: var(--s-3); }
}

/* ---------- 14. Marquee (see motion.js) --------------------------------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: var(--s-4); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: var(--s-7); animation: marquee var(--marquee-duration, 40s) linear infinite; }
.marquee__track > * { display: inline-flex; align-items: center; gap: var(--s-7); white-space: nowrap; font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink-soft); }
.marquee__track > *::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: linear-gradient(90deg, var(--brand-green) 50%, var(--brand-teal) 50%); }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track, .marquee.is-paused .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-1 * var(--marquee-shift, 50%))); } }
@media (prefers-reduced-motion: reduce) { .marquee { padding-inline: var(--gutter); } .marquee__track { animation: none; flex-wrap: wrap; width: auto; gap: var(--s-2) var(--s-5); } .marquee__track > * { gap: var(--s-5); white-space: normal; } .marquee { mask-image: none; -webkit-mask-image: none; } .marquee [aria-hidden="true"] { display: none; } }

/* ---------- 15. Motion hooks (motion.js toggles .is-in) ----------------- */
/* Content stays visible without JS: hiding only applies once <html class="js">. */
.js [data-reveal] {
  opacity: 0;
  transition: opacity var(--d-4) var(--ease-out), transform var(--d-4) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal=""], .js [data-reveal="up"] { transform: translate3d(0, var(--reveal-shift), 0); }
.js [data-reveal="left"] { transform: translate3d(calc(-1 * var(--reveal-shift)), 0, 0); }
.js [data-reveal="right"] { transform: translate3d(var(--reveal-shift), 0, 0); }
.js [data-reveal="scale"] { transform: scale(0.97); }
.js [data-reveal="clip"] { clip-path: inset(0 0 100% 0); transition-property: clip-path, opacity; opacity: 1; }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"].is-in { clip-path: inset(0 -2% 0 -2%); }
[data-parallax] { will-change: transform; }
.count { font-variant-numeric: tabular-nums lining-nums; }

/* Loader (brand motif): <div class="loader" role="status"><svg>…motif…</svg><span class="visually-hidden">Duke u ngarkuar…</span></div> */
.loader { display: inline-grid; place-items: center; width: var(--loader-size, 3.5rem); aspect-ratio: 1; }
[data-loop].is-paused, [data-loop].is-paused * { animation-play-state: paused !important; }
.stack > .partner-slot { align-self: flex-start; }