/*
 * Data Driven by Design — styles
 *
 * Contents (same order as the page):
 *   1. Fonts
 *   2. Settings: colours, fonts, spacing and widths
 *   3. Base
 *   4. Shared pieces: text styles, buttons, links, icons, forms
 *   5. Header
 *   6. Hero
 *   7. BI Challenges
 *   8. We have a plan
 *   9. Our expertise
 *  10. Led by Pablo
 *  11. Contact
 *  12. Footer
 *  13. Portfolio window
 *  14. Privacy page, download page and admin
 *  15. Cookie banner
 *
 * Each section keeps its own small-screen rules right after it.
 */


/* 1. Fonts ------------------------------------------------------------------
 * Both files are served from this website (no external font services).
 * Newsreader Italic: Production Type, SIL Open Font License 1.1 (see fonts/).
 */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}


/* 2. Settings ---------------------------------------------------------------
 * Change colours, fonts, spacing and widths here; the rest of the file uses
 * these names.
 */
:root {
  /* Base colours */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text: #1d1d1d;              /* main text on light backgrounds */
  --color-text-soft: #3d3d3d;         /* secondary text on light backgrounds */
  --color-text-muted: #555555;        /* hero tagline */
  --color-text-on-dark: #cfcfcf;      /* secondary text on black */
  --color-text-on-dark-soft: #a8a8a8; /* small print on black */
  --color-line: #cfcfcf;              /* thin dividing lines on light backgrounds */
  --color-line-on-dark: #333333;      /* thin dividing lines on black */
  --color-grey: #808080;              /* inactive carousel dots */
  --color-hover: #f2f2f2;             /* hover in the share menu */
  --color-error: #ffb4b4;             /* form errors (on black) */

  /* Section backgrounds, in page order */
  --bg-header: var(--color-black);
  --bg-hero: var(--color-white);
  --bg-challenges: #f4f4f4;
  --bg-plan: #e4e4e4;
  --bg-expertise: #808080;
  --bg-about: #acaeaf;
  --bg-contact: var(--color-black);

  /* Fonts */
  --font-main: "Montserrat", system-ui, sans-serif;
  --font-quote: "Newsreader", Georgia, "Times New Roman", serif;
  --letter-spacing-wide: 0.32em;      /* uppercase labels */

  /* Spacing */
  --page-edge: clamp(16px, 5vw, 80px);      /* left/right margin of every section */
  --section-space: clamp(64px, 8vw, 104px); /* top/bottom space of sections */
  --header-height: 64px;

  /* Content widths */
  --width-intro: 640px;   /* section introductions */
  --width-text: 62ch;     /* comfortable line length for paragraphs */
  --width-content: 1080px;

  color-scheme: light;
}


/* 3. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-height); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1em; }
b { font-weight: 700; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ol, ul { list-style: none; margin: 0; padding: 0; }

/* Respect visitors who ask their system for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* 4. Shared pieces --------------------------------------------------------- */

/* Text only for screen readers */
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* "Skip to content" link, visible only when focused with the keyboard */
.skip {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--color-black); color: var(--color-white); padding: 10px 14px;
}
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.nowrap { white-space: nowrap; }

/* Small uppercase labels, used as section headings */
.label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  line-height: 1.6;
  margin: 0 0 1.5em;
}
.label--lg { font-size: 14px; }

/* Uppercase titles (slides, plan steps, Pablo's name) */
.title {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.25;
  margin-bottom: 1.2em;
}

/* Rotated bold text: "We have a plan", "Led by" */
.tilt {
  display: inline-block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  transform: rotate(-8deg);
  transform-origin: left center;
  margin: 0 0 1.4em;
}
.tilt--small { font-size: 20px; text-transform: none; letter-spacing: 0.1em; transform: rotate(-10deg); margin-bottom: 0.8em; }

/* Buttons. .btn is black; --inverse is white; --outline is a white border on black. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 28px;
  background: var(--color-black); color: var(--color-white);
  border: 1.5px solid var(--color-black);
  font: inherit; font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none;
  text-align: center; line-height: 1.4; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.btn:hover { background: var(--color-white); color: var(--color-black); }
.btn--small { min-height: 40px; padding: 8px 16px; font-size: 11px; letter-spacing: 0.18em; white-space: nowrap; }
.btn--inverse { background: var(--color-white); color: var(--color-black); border-color: var(--color-white); }
.btn--inverse:hover { background: var(--color-black); color: var(--color-white); }
.btn--outline { background: transparent; color: var(--color-white); border-color: var(--color-white); }
.btn--outline:hover { background: var(--color-white); color: var(--color-black); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Underlined text link (also used on a <button> in the admin page) */
.link {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.link:hover { text-decoration-thickness: 2px; }

/* Round icon buttons (LinkedIn, WhatsApp, share, email) */
.icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  color: inherit; text-decoration: none; cursor: pointer; list-style: none; border-radius: 50%;
  transition: opacity .15s;
}
.icon::-webkit-details-marker { display: none; }
.icon:hover { opacity: .7; }
.icon__svg { width: 22px; height: 22px; fill: currentColor; }

/* Portfolio form (contact section and portfolio window, both on black) */
.form { display: grid; gap: 16px; }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__field { display: grid; gap: 6px; font-size: 13px; letter-spacing: 0.06em; }
.form__field input {
  font: inherit; font-size: 16px; color: var(--color-white); background: transparent;
  border: 0; border-bottom: 1.5px solid #8a8a8a; padding: 10px 0; border-radius: 0;
}
.form__field input:focus { outline: none; border-bottom-color: var(--color-white); }
.form__field input:focus-visible { outline: 2px solid var(--color-white); outline-offset: 4px; }
.form__check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 13px; line-height: 1.5; color: #e0e0e0; cursor: pointer; }
.form__check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-white); }
.form__small { font-size: 12px; color: var(--color-text-on-dark-soft); margin: 0; }
.form .btn { justify-self: start; }
.form__status { min-height: 1.6em; margin: 0; font-size: 14px; }
.form__status[data-state="error"] { color: var(--color-error); }


/* 5. Header ---------------------------------------------------------------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--page-edge);
  background: var(--bg-header); color: var(--color-white);
}
.bar__brand {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
/* The supplied logo file is black; invert() shows it white on the black header. */
.bar__logo { width: 35px; height: auto; flex: none; filter: invert(1); }
.bar__nav { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }

@media (max-width: 640px) {
  .bar__brand { font-size: 9px; letter-spacing: 0.16em; gap: 10px; }
  .bar__logo { width: 28px; }
}
@media (max-width: 420px) {
  /* Logo only: the name is read by screen readers but hidden to save space. */
  .bar__brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar__nav { gap: 6px; }
  .bar .btn--small { padding: 8px 10px; font-size: 10px; letter-spacing: 0.12em; }
}


/* 6. Hero ------------------------------------------------------------------ */
.hero {
  background: var(--bg-hero); color: var(--color-text);
  padding: calc(var(--header-height) + clamp(96px, 14vw, 180px)) var(--page-edge) clamp(96px, 14vw, 180px);
}
.hero__inner { max-width: 1000px; }
.hero__kicker { color: var(--color-text-muted); margin-bottom: 2em; }
.hero__title {
  font-size: clamp(32px, min(5.4vw, 8.4svh), 72px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.12;
  max-width: 20ch;
  margin: 0 0 1.1em;
  text-wrap: balance;
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin: 0; }


/* 7. BI Challenges --------------------------------------------------------- */
.challenges { background: var(--bg-challenges); padding: 0 var(--page-edge) var(--section-space); }
.challenges__intro { max-width: var(--width-intro); padding-top: var(--section-space); margin-bottom: 40px; }
.challenges__intro p { font-size: 17px; margin: 0; }
.carousel { max-width: 960px; }

/* Arrows above the slide. Hidden until site.js shows them. */
.carousel__arrows { display: flex; gap: 8px; margin: -8px 0 32px -12px; }
.carousel__arrows[hidden], .carousel__dots[hidden] { display: none; }
.carousel__arrow {
  display: inline-grid; place-items: center; width: 48px; height: 44px; padding: 0;
  background: none; border: 0; color: var(--color-text); cursor: pointer;
}
.carousel__arrow svg { width: 30px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.carousel__arrow[data-carousel-prev]:hover svg { transform: translateX(-3px); }
.carousel__arrow[data-carousel-next]:hover svg { transform: translateX(3px); }

/* Dots below the slide, drawn with the dot of the 3P logo. Inactive dots keep
   at least 3:1 contrast; the active one uses the logo's own #111 and grows. */
.carousel__dots { display: flex; gap: 0; margin: 40px 0 0 -6px; padding-top: 12px; border-top: 1px solid var(--color-line); max-width: var(--width-text); }
.carousel__dot { display: inline-grid; place-items: center; width: 26px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer; }
.carousel__dot svg { width: 14px; height: auto; fill: var(--color-grey); transition: fill .2s, transform .2s; }
.carousel__dot:hover svg { fill: var(--color-text-soft); }
.carousel__dot[aria-current="true"] svg { fill: #111111; transform: scale(1.25); }

/* Without JavaScript the slides stack. With it (.is-ready) they share one grid
   cell, so the block is always as tall as the tallest slide and nothing jumps. */
.slides { display: grid; gap: 64px; }
.carousel.is-ready .slides { gap: 0; touch-action: pan-y; }
.carousel.is-ready .slide { grid-area: 1 / 1; transition: opacity .35s ease, visibility .35s; }
.carousel.is-ready .slide:not(.is-active) { opacity: 0; visibility: hidden; }

.slide__quote { margin: 0 0 40px; }
.slide__quote blockquote { margin: 0; }
.slide__quote p {
  font-family: var(--font-quote); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 4.2vw, 54px); letter-spacing: -0.005em; line-height: 1.14;
  max-width: 22ch; margin: 0 0 24px; text-wrap: balance;
}
.slide__quote figcaption { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-text-soft); }
.slide__label { font-size: 11px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; margin: 0 0 12px; padding-top: 24px; border-top: 1px solid var(--color-line); max-width: var(--width-text); }
.slide .title { margin: 0 0 20px; }
.slide__answer { max-width: var(--width-text); color: var(--color-text-soft); }
.slide__answer p:last-child { margin: 0; }

@media (max-width: 900px) {
  .slide__quote { margin-bottom: 32px; }
}


/* 8. We have a plan -------------------------------------------------------- */
.plan { background: var(--bg-plan); }
.plan__intro { max-width: var(--width-intro); padding: var(--section-space) var(--page-edge) 48px; box-sizing: content-box; }
.plan__lead { font-size: 17px; margin: 0; }

/* Two columns: 01 on the left; 02 and 03 stacked on the right. The second row
   takes any spare height, so 03 sits right after 02 with no gap. */
.steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr;
  max-width: var(--width-content); margin: 0 var(--page-edge); padding-bottom: var(--section-space);
  border-top: 1px solid var(--color-line);
}
.step { padding: 40px 0 0; }
.step--1 { grid-row: 1 / span 2; padding-right: clamp(32px, 5vw, 72px); }
.step--2, .step--3 { grid-column: 2; padding-left: clamp(32px, 5vw, 72px); border-left: 1px solid var(--color-line); }
.step--2 { padding-bottom: 40px; }
.step--3 { border-top: 1px solid var(--color-line); }
.step__number {
  display: block; font-size: clamp(48px, 5vw, 72px); font-weight: 900;
  line-height: 0.8; color: var(--color-white); letter-spacing: -0.02em; margin-bottom: 20px;
}
.step--1 .step__number { font-size: clamp(72px, 8vw, 120px); margin-bottom: 28px; }
.step .title { font-size: clamp(20px, 1.9vw, 24px); margin-bottom: 0.8em; }
.step--1 .title { font-size: clamp(26px, 2.8vw, 36px); }
.step__lead { font-size: 18px; font-weight: 600; }
.step p { color: var(--color-text-soft); max-width: 60ch; }
.step__lead, .step b { color: var(--color-text); }
.step p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  /* One column, in order 01, 02, 03. */
  .steps { grid-template-columns: 1fr; grid-template-rows: none; }
  .step--1, .step--2, .step--3 { grid-row: auto; grid-column: auto; padding: 40px 0; }
  .step--3 { padding-bottom: 0; }
  .step + .step { border-left: 0; border-top: 1px solid var(--color-line); }
}


/* 9. Our expertise --------------------------------------------------------- */
.expertise { background: var(--bg-expertise); color: var(--color-white); padding: var(--section-space) var(--page-edge) 64px; }
.expertise .label { margin-bottom: 20px; }
.expertise__intro { max-width: var(--width-text); margin: 0 0 48px; }
.expertise__caption { font-size: 12px; letter-spacing: 0.04em; max-width: 60ch; margin: 0; }

/* Logos wrap onto new lines with even gaps, aligned left. */
.logos {
  display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center;
  gap: 32px 56px; max-width: var(--width-content); margin: 0 0 48px;
}
.logos li { display: flex; align-items: center; height: 56px; flex: none; }

/* Logo heights are set one by one so they look the same size to the eye. */
.logo { width: auto; max-width: 100%; height: 26px; }
.logo--volkswagen, .logo--bmw { height: 44px; }
.logo--bvg { height: 38px; } /* solid heart: optically as large as the 44px roundels */
.logo--adidas { height: 36px; }
.logo--cosnova { height: 28px; }
.logo--aston-martin { height: 30px; }
.logo--airbus { height: 17px; }
.logo--coca-cola { height: 30px; }
.logo--audi { height: 24px; }

@media (max-width: 900px) {
  .logos { gap: 28px 40px; }
}
@media (max-width: 480px) {
  .logos { gap: 24px 32px; }
  .logo { height: 20px; }
  .logo--volkswagen, .logo--bmw { height: 36px; }
  .logo--bvg { height: 31px; }
  .logo--adidas { height: 30px; }
  .logo--cosnova, .logo--coca-cola, .logo--aston-martin { height: 24px; }
  .logo--airbus { height: 13px; }
  .logo--audi { height: 19px; }
}


/* 10. Led by Pablo --------------------------------------------------------- */
/* The portrait is a cut-out on the section grey and stands on the section's
   bottom edge, so the section has no bottom padding. */
.about { background: var(--bg-about); padding: clamp(32px, 4vw, 56px) var(--page-edge) 0; }
.about__inner {
  display: grid; grid-template-columns: clamp(300px, 38vw, 500px) minmax(0, 520px);
  gap: clamp(32px, 6vw, 96px); justify-content: start; align-items: end;
}
.about__photo { display: block; }
.about__photo img { display: block; width: 100%; height: auto; }
.about__text { align-self: center; padding: var(--section-space) 0; }
.about__text .title { margin-bottom: 1em; }
.about__text p { color: var(--color-text); }

@media (max-width: 900px) {
  /* Text first, then the portrait, still standing on the bottom edge. */
  .about { padding-top: var(--section-space); }
  .about__inner { grid-template-columns: 1fr; gap: 40px; justify-items: start; }
  .about__text { padding: 0; }
  .about__photo { order: 1; width: min(100%, 380px); }
}


/* 11. Contact -------------------------------------------------------------- */
.contact { background: var(--bg-contact); color: var(--color-white); padding: var(--section-space) var(--page-edge) 64px; }
.contact__main { max-width: 720px; }
.contact__title { font-size: clamp(30px, 4.4vw, 54px); font-weight: 700; letter-spacing: 0.04em; line-height: 1.15; margin: 0 0 0.7em; text-wrap: balance; }
.contact__lead { color: var(--color-text-on-dark); max-width: 560px; margin: 0 0 2.2em; }

/* LinkedIn, WhatsApp and share icons */
.icons { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 40px 0 0 -10px; }

/* Share menu, shown when the device has no share sheet */
.sharer { position: relative; }
.sharer__menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 5; min-width: 180px;
  background: var(--color-white); color: var(--color-text); border: 1px solid var(--color-line); padding: 6px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.sharer__menu a { display: block; padding: 10px 16px; font-size: 14px; text-decoration: none; }
.sharer__menu a:hover, .sharer__menu a:focus-visible { background: var(--color-hover); }

/* Portfolio request, below a thin line */
.contact__portfolio { max-width: 440px; margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--color-line-on-dark); }
.contact__portfolio-lead { color: var(--color-text-on-dark); }

@media (max-width: 900px) {
  .contact__portfolio { max-width: none; }
}


/* 12. Footer --------------------------------------------------------------- */
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 32px var(--page-edge) 40px;
  background: var(--color-black); color: var(--color-text-on-dark-soft);
  font-size: 12px; letter-spacing: 0.06em;
  border-top: 1px solid #222222;
}
.footer p { margin: 0; }
.footer__links { display: flex; align-items: center; gap: 12px; }
.footer__mail { width: 40px; height: 40px; margin-left: -10px; color: var(--color-white); }
.footer__mail .icon__svg { width: 20px; height: 20px; }


/* 13. Portfolio window ------------------------------------------------------ */
/* Scrolls inside itself if the screen is short, so nothing is cut off. */
.popup {
  width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  margin: auto; padding: 40px 32px 28px; border: 1px solid var(--color-line-on-dark);
  background: var(--color-black); color: var(--color-white);
  overscroll-behavior: contain;
}
.popup::backdrop { background: rgba(0,0,0,.5); }
.popup .label { margin: 0 0 12px; padding-right: 40px; }
.popup__lead { color: var(--color-text-on-dark); margin: 0 0 24px; }
.popup__close {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  display: grid; place-items: center; padding: 0; background: none; border: 0;
  color: var(--color-white); font: inherit; font-size: 30px; line-height: 1; cursor: pointer;
}
.popup__close:hover { opacity: .7; }
.popup__close:focus-visible { outline: 2px solid var(--color-white); outline-offset: -4px; }

@media (max-width: 480px) {
  .popup { padding: 36px 20px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .popup[open] { animation: popup-in .25s ease-out; }
  @keyframes popup-in { from { opacity: 0; transform: translateY(12px); } }
}


/* 14. Privacy page, download page and admin ------------------------------- */
.doc { max-width: 720px; padding: calc(var(--header-height) + 48px) var(--page-edge) 96px; box-sizing: content-box; }
.doc h1 { font-size: 26px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.5em; }
.doc h2 { font-size: 13px; letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; margin: 2.4em 0 1em; }
.doc p, .doc li { color: var(--color-text-soft); }
.doc ul { list-style: disc; padding-left: 1.2em; margin-bottom: 1em; }

/* Personal download page (/portfolio/) */
.download .label { margin-bottom: 12px; }
.download h1 { margin-bottom: 0.8em; }
.download form { margin: 32px 0; }
.download__note { font-size: 13px; }

.doc--wide { max-width: 1000px; }
.admin-login input { font: inherit; font-size: 16px; padding: 10px; border: 1.5px solid var(--color-text); width: min(360px, 100%); }
.table-wrap { overflow-x: auto; margin: 24px 0; }
.admin-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-line); white-space: nowrap; }
.admin-table td.admin-table__number { text-align: right; }
.admin-table th { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; }


/* 15. Cookie banner -------------------------------------------------------- */
/* Shown by analytics.js until the visitor accepts or rejects analytics cookies. */
.cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  max-width: 720px; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  padding: 20px 24px; border: 1px solid var(--color-line-on-dark);
  background: var(--color-black); color: var(--color-white);
}
.cookies[hidden] { display: none; }
.cookies__text { flex: 1 1 320px; margin: 0; font-size: 13px; line-height: 1.6; color: var(--color-text-on-dark); }
.cookies__text a { color: var(--color-white); text-underline-offset: 3px; }
.cookies__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.cookies .btn:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .cookies:not([hidden]) { animation: popup-in .25s ease-out; }
}