/* ============================================================
   FACTORY — meetthefactory.com
   css/style.css
   Mobile-first, breakpoints: 768 / 1024 / 1440
============================================================ */

/* ---------- TOKENS ---------- */
:root {
  --red:#fa1a47;
  --black:#000;
  --ink:#0a0a0a;
  --white:#fff;
  --paper:#f1f1f1;       /* alt section bg */
  --cap-navy:#0a1a52;
  --cap-blue:#0033dd;
  --cap-cyan:#cde9ee;
  --rule:#d8d8d8;
  --muted:#888;
  --mint:#bfeaea;        /* "About FACTORY" badge */

  --serif:'Times New Roman', Times, serif;
  --sans:Arial, Helvetica, sans-serif;

  --max:1440px;
  --pad:48px;
  --section-y:150px;

  /* content column starts after the inline scrollspy on desktop.
     v2: scrollspy is disabled, so this is 0 at every breakpoint — sections
     start flush with the body ‘s --pad on the left, matching the right edge. */
  --col-offset:0px;
}
@media (min-width:768px){ :root { --pad:60px; } }
@media (max-width:600px){ :root { --pad:28px; } }
@media (min-width:1024px){ :root { --pad:48px; } }
@media (min-width:1280px){ :root { --pad:64px; } }
@media (min-width:1440px){ :root { --pad:80px; } }

/* ---------- RESET ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  font-family:var(--serif);
  font-size:18px;
  line-height:1.5;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
html { overscroll-behavior-y:none; }
img,svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; background:none; border:0; padding:0; color:inherit; }
ul { list-style:none; padding:0; margin:0; }
p { margin:0 0 1em; }
em { font-style:italic; }
strong { font-weight:700; }
::selection { background:var(--red); color:var(--white); }

/* ---------- VIEWPORT FRAME ---------- */
body::before {
  content:"";
  position:fixed;
  inset:0;
  border:20px solid #fff;
  z-index:100;
  pointer-events:none;
}
/* phones only: drop the white viewport frame (tablet keeps it) */
@media (max-width:600px){
  body::before { display:none; }
}

/* ---------- LAYOUT ---------- */
.container {
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  position:relative;
}
.section { padding:var(--section-y) 0; position:relative; }
@media (max-width:768px){ :root { --section-y:75px; } }
.section--alt { background:var(--paper); }

/* v2: section eyebrows + dotted leaders disabled globally for v1 launch.
   Markup preserved on every page; remove these rules to bring them back. */
.eyebrow { display:none !important; }
.section__head:not(.imprint__head) { margin:0 !important; padding:0 !important; }

/* dotted leader + eyebrow head — eyebrow aligned with content column,
   dotted leader extends as a ::before from the eyebrow back to the page edge. */
.section__head {
  display:block;
  margin-bottom:30px;
  padding:8px 0 0;
}
.container.section__head {
  /* keep container constraints so the eyebrow aligns exactly with content */
  max-width:var(--max);
  padding-left:var(--pad);
  padding-right:var(--pad);
}
.section__head .eyebrow {
  position:relative;
  margin-left:var(--col-offset);
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--black);
  display:inline-block;
  padding-left:16px;
}
.section__head .eyebrow::before {
  content:"";
  position:absolute;
  right:100%;
  /* extend to the inside of the 20px frame on the viewport's left */
  left:calc(-1 * (var(--col-offset) + var(--pad) + max(0px, (100vw - var(--max)) / 2)));
  top:50%;
  height:6px;
  transform:translateY(-50%);
  background-image:radial-gradient(circle, currentColor 1.5px, transparent 1.7px);
  background-size:8px 6px;
  background-repeat:repeat-x;
  background-position:right center;
}
.section__head--light .eyebrow,
.capabilities .eyebrow { color:var(--white); }
.section__head--light .eyebrow::before,
.capabilities .eyebrow::before { color:var(--white); }
.why .eyebrow { color:var(--black); }
.why .eyebrow::before { color:var(--black); }

/* ---------- TYPOGRAPHY ---------- */
.display {
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  line-height:1.02;
  letter-spacing:-0.01em;
  margin:0;
  text-wrap:pretty;
  font-size:clamp(44px, 8vw, 96px);
}
.display strong { font-weight:700; }
.display--md { font-size:clamp(40px, 6.8vw, 90px); }
.display--light { color:var(--white); }

/* ---------- BUTTONS ---------- */
.btn-rect {
  display:inline-block;
  background:var(--red);
  color:var(--white);
  padding:18px 36px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:0;
  transition:background .2s ease;
}
.btn-rect:hover { background:var(--black); }

/* ============================================================
   HEADER (over hero)
============================================================ */
.site-header {
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  /* hero state: extra top padding so the logo clears the 20px white frame */
  padding-top:30px;
  padding-bottom:14px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  padding-top:14px;
  padding-bottom:14px;
}
/* solid white bar once scrolled → logo + hamburger go black */
.site-header.is-scrolled .site-header__logo { color: var(--black); }
.site-header.is-scrolled .hamburger { color: var(--black) !important; }
/* Logo + hamburger stay white on every page since the topbar is always dark */
html[data-active-theme="light"] .site-header__logo { color: var(--white); }
html[data-active-theme="light"] .hamburger { color: var(--white); }
.site-header__inner {
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-header__logo {
  flex:0 0 auto;
  min-width:0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 3.4vw, 32px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  white-space: nowrap;
}
/* ----- Logo icon ⇄ wordmark swap ----- */
.logo-swap {
  position:relative;
  display:inline-block;
  height:1em;
  line-height:1;
  overflow:hidden;
  vertical-align:bottom;
}
.logo-swap__icon {
  position:absolute;
  left:0;
  top:50%;
  height:1em;
  width:1em;
  /* asset is white already — no filter needed */
  filter:none;
  object-fit:contain;
  transform:translateY(-50%);
  opacity:1;
  transition:transform .4s cubic-bezier(.65,.05,.36,1), opacity .35s ease;
}
.logo-swap__text {
  display:block;
  transform:translateY(110%);
  opacity:0;
  transition:transform .4s cubic-bezier(.65,.05,.36,1), opacity .35s ease;
}
/* show-text state: triggered on hover OR when scrolled past the hero */
.site-header__logo:hover .logo-swap__icon,
.site-header.is-past-hero .site-header__logo .logo-swap__icon {
  transform:translateY(-160%);
  opacity:0;
}
.site-header__logo:hover .logo-swap__text,
.site-header.is-past-hero .site-header__logo .logo-swap__text {
  transform:translateY(0);
  opacity:1;
}
.site-header__right {
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}
.site-header__lang { display:flex; gap:8px; }
@media (max-width:480px){
  .lang { width:26px; height:26px; }
  .site-header__lang { gap:6px; }
  .site-header__right { gap:8px; }
  .hamburger { margin-left:8px; }
}

/* HAMBURGER */
.hamburger {
  display:none;
  width:44px; height:44px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  margin-left:16px;
  background:transparent;
  color:var(--white) !important;
}
.hamburger span {
  display:block;
  width:24px;
  height:2px;
  background:currentColor;
}
@media (max-width:1023px){
  /* hamburger now shown at all breakpoints — see global rule below */
}
.hamburger { display:flex; }
/* topbar is always dark — keep hamburger white on every page */
/* Hamburger color: always white over the dark hero, white on red, white on dark.
   On light sections, the page already shows the white frame, so keep red/black if needed.
   User asked: keep white through all breakpoints — so always white. */

/* FULL-BLEED MENU OVERLAY — sits inside the 20px frame, blurred backdrop
   reveals page content faintly behind. Covers topbar when open. */
.mobile-menu {
  position:fixed;
  top:20px;
  bottom:20px;
  left:20px;
  right:20px;
  z-index:120;
  background: rgba(20,20,20,0.55);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  color:var(--white);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:48px;
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
  visibility:hidden;
}
.mobile-menu.is-open {
  opacity:1;
  pointer-events:auto;
  visibility:visible;
}
html[data-active-theme="light"] .mobile-menu {
  background: rgba(241,241,241,0.55);
  color: var(--black);
}
.mobile-menu ul { display:grid; gap:24px; justify-items:center; }
.mobile-menu a {
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  font-size:clamp(40px, 9vw, 64px);
  line-height:1;
  color:inherit;
}
html[data-active-theme="light"] .mobile-menu__close { color: var(--black); }
.mobile-menu__contact { font-style:italic; font-weight:700; }
.mobile-menu__close {
  position:absolute;
  top:24px;
  right:24px;
  width:44px; height:44px;
  display:grid;
  place-items:center;
  color:var(--white);
}
.mobile-menu__close span {
  position:absolute;
  width:24px; height:2px;
  background:currentColor;
}
.mobile-menu__close span:nth-child(1) { transform:rotate(45deg); }
.mobile-menu__close span:nth-child(2) { transform:rotate(-45deg); }

body.menu-open { overflow:hidden; }
.lang {
  display:block;
  width:32px; height:32px;
  border-radius:50%;
  overflow:hidden;
  border:0;
  opacity:.9;
  transition:opacity .2s;
}
.lang--active, .lang:hover { opacity:1; }
.lang img { width:100%; height:100%; object-fit:cover; }

/* SCROLLSPY RAIL — v2: disabled for v1 launch (replaced by sticky topbar + drawer).
   Markup preserved on index.html; remove this rule + un-hide to bring it back. */
.scrollspy-rail { display:none !important; }

/* ============================================================
   LEFT SCROLLSPY — part of body flow, sticky inside <main>
   Aligned with the FACTORY logo column.
============================================================ */
.main { position:relative; }
.scrollspy-rail {
  position:absolute;
  top:0; bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--max);
  padding:0 var(--pad);
  pointer-events:none;
  z-index:30;
  display:none;
}
@media (min-width:1024px){ .scrollspy-rail { display:block; } }
.scrollspy {
  position:sticky;
  /* 63vh feels right at 1080-height; cap the px equivalent so the menu
     doesn't drift further down the page on taller viewports (1440+). */
  top:min(63vh, 680px);
  transform:translateY(-50%);
  width:max-content;
  pointer-events:auto;
  font-family:var(--sans);
  font-size:16px;
  line-height:0.6;
  color:var(--black);
}
.scrollspy ul { display:grid; gap:6px; }
.scrollspy a {
  color:inherit;
  opacity:.95;
  display:inline-block;
  padding:2px 0;
  transition:opacity .2s, color .2s;
}
.scrollspy__sep { height:14px; }
.scrollspy__contact { font-weight:700; }
.scrollspy a:hover { opacity:.6; }
.scrollspy a.is-active { opacity:1; font-weight:700; }

/* Scrollspy color is set per-element via [data-theme]; see further below. */

/* ============================================================
   RIGHT VERTICAL CONTACT TAB
   v2: disabled for v1 launch — markup preserved on every page,
   remove this single rule to bring it back.
============================================================ */
.contact-tab { display:none !important; }

/* ============================================================
   RIGHT VERTICAL CONTACT TAB
============================================================ */
.contact-tab {
  display:none;
  position:fixed;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  z-index:101;
  width:56px;
  background:var(--red);
  color:var(--white);
  text-align:center;
  padding:18px 0 22px;
  transition:background .25s ease;
}
@media (min-width:768px){ .contact-tab { display:flex; flex-direction:column; align-items:center; gap:60px; } }
.contact-tab__icon { display:block; }
.contact-tab__icon img { width:22px; height:22px; }
.contact-tab__label {
  display:inline-block;
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  letter-spacing:0.02em;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
/* Per-element themes (the actual color of each fixed UI element
   depends on the section sitting directly under THAT element). */
.contact-tab[data-theme="light"] { background:var(--black); color:var(--white); }
.contact-tab[data-theme="dark"]  { background:var(--red);   color:var(--white); }
.contact-tab[data-theme="red"]   { background:var(--mint);  color:var(--black); }
.contact-tab[data-theme="red"] .contact-tab__icon img { filter:invert(1); }

.scrollspy[data-theme="light"], .scrollspy[data-theme="light"] a { color:var(--black); }
.scrollspy[data-theme="dark"],  .scrollspy[data-theme="dark"] a  { color:var(--white); }
.scrollspy[data-theme="red"],   .scrollspy[data-theme="red"] a   { color:var(--white); }

/* v2: floating mobile contact button disabled for v1 launch —
   markup preserved on every page, remove this rule to bring it back. */
.contact-cta-mobile { display:none !important; }

.contact-cta-mobile {
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:40;
  background:var(--red);
  color:var(--white);
  padding:12px 22px;
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
@media (min-width:768px){ .contact-cta-mobile { display:none; } }

/* ============================================================
   HERO
============================================================ */
.hero {
  position:relative;
  color:var(--white);
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:100svh;
}

.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;
}
.hero__bg { position:absolute; inset:0; z-index:-1; overflow:hidden; }
.hero__bg img { width:100%; height:100%; object-fit:cover; }

/* Dual-layer "living light" morph — two copies of the soft gradient drift,
   scale and rotate in opposite directions with a slow cross-fade between them.
   Falls back to a clean static image under reduced-motion. */
.hero__bg-layer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  will-change:transform, opacity;
  transform-origin:center;
  backface-visibility:hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__bg-layer--a { animation: heroDriftA 10s ease-in-out infinite; }
  .hero__bg-layer--b { animation: heroDriftB 10s ease-in-out infinite; }
}
/* The infinite bg cross-fade triggers a stale-repaint ghosting of the outlined
   wordmark on Chromium/Android (Brave). Disable it on touch/small screens —
   the drift is subtle decoration and not worth the artifact. */
@media (hover: none), (max-width: 900px) {
  .hero__bg-layer--a,
  .hero__bg-layer--b { animation: none !important; }
  .hero__bg-layer--b { opacity: 0; }
  /* Solid white wordmark on mobile — the outline (inline-SVG or img) ghosts on
     Android/Brave; system text fills cleanly with no compositing artifacts. */
  .hero__factory {
    color: var(--white);
    -webkit-text-fill-color: var(--white);
    -webkit-text-stroke-width: 0;
  }
  .hero__factory-svg { display: none; }
}
@keyframes heroDriftA {
  0%   { transform:scale(1.06) translate(0, 0) rotate(0deg);        opacity:1; }
  50%  { transform:scale(1.28) translate(-6%, 4%) rotate(5deg);     opacity:0; }
  100% { transform:scale(1.06) translate(0, 0) rotate(0deg);        opacity:1; }
}
@keyframes heroDriftB {
  0%   { transform:scale(1.28) translate(6%, -4%) rotate(-5deg);    opacity:0; }
  50%  { transform:scale(1.06) translate(0, 0) rotate(0deg);        opacity:1; }
  100% { transform:scale(1.28) translate(6%, -4%) rotate(-5deg);    opacity:0; }
}

/* Large FACTORY wordmark filling the hero width */
.hero__wordmark {
  margin:0;
  color:var(--white);
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:0.85;
  user-select:none;
  position:relative;
}
.hero__factory {
  position:relative;
  display:inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  /* sized to the container content width so it never clips and stays centered
     between the left/right padding across breakpoints; capped at 270px */
  font-size: min(270px, 21.6cqi);
  line-height: 0.9;
  letter-spacing: -0.02em;
  white-space: nowrap;
  /* The span text is now an invisible layout box; the visible outline is drawn
     by the overlaid SVG (.hero__factory-svg) using a real SVG stroke, which is
     immune to the Chromium/Android stroke-ghosting bug. */
  color: transparent;
  -webkit-text-stroke-width: 0;
  text-stroke: 0;
}
.hero__factory-svg {
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  height:auto;
  overflow:visible;
  pointer-events:none;
}
.hero__factory-svg text {
  vector-effect: non-scaling-stroke;
  stroke-width: clamp(2px, 0.34cqi, 4px);
}
/* Lockup wraps the wordmark + subline; shrink-wraps to FACTORY width and
   stays centered, so the subline can anchor to the wordmark's left edge. */
.hero__lockup {
  position:relative;
  width:fit-content;
  margin:0 auto;
}
.hero__lead {
  position:absolute;
  top:100%;
  left:0;
  margin-top:24px;
  width:auto;
  max-width:min(90vw, 26ch);
  color:var(--white);
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(48px, 6vw, 84px);
  line-height:1.1;
  text-align:left;
}

.hero__inner {
  position:relative;
  width:100%;
  min-height:auto;
  padding-top:0;
  padding-bottom:0;
  container-type:inline-size;
}

@media (max-width:1024px){
  .hero__inner {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:32px;
    padding-top:0;
    padding-bottom:0;
    padding-left:calc(var(--col-offset) + var(--pad));
  }
  /* subline drops its indent and collapses to the left under the headline */
  .hero__lockup { margin:0; }
  .hero__lead { left:0; right:auto; }
  .hero__title {
    padding-left:0;
    font-size:clamp(48px, 8vw, 84px);
  }
  /* badge lifts above the headline at a fixed, readable size (no longer over the text) */
  .hero__badge {
    width:clamp(72px, 9vw, 88px);
    height:clamp(72px, 9vw, 88px);
    right:auto;
    left:0;
    top:auto;
    bottom:calc(100% + 14px);
    transform:none;
  }
}
@media (max-width:768px){
  .hero__inner { padding-left:var(--pad); }
  /* subline rejoins normal flow so the wordmark + subline center together
     (absolute positioning made it dangle off the bottom on short screens) */
  .hero__lockup { display:flex; flex-direction:column; }
  .hero__lead {
    position:static;
    max-width:min(92vw, 520px);
    width:auto;
    margin-top:20px;
  }
  .hero__lead br { display:none; }
}

/* Badge anchored to the FACTORY text box; sized + offset in em so it scales
   in lockstep with the wordmark font-size at every breakpoint. */
.hero__badge {
  position:absolute;
  width:0.75em;
  height:0.75em;
  right:0.7em;
  top:0;
  transform:translate(-18%, -79%);
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero__badge img { width:100%; height:100%; object-fit:contain; }

@media (max-width:480px){
  .hero__badge { display:none; }
}

/* ============================================================
   MOBILE POLISH (≤600px)
============================================================ */
@media (max-width:600px){
  /* Hero: give the wordmark right padding too so the 20px frame can't clip it,
     and size it to the (now symmetric) container width. */
  .hero__inner { padding-left:var(--pad); padding-right:var(--pad); }
  .hero__factory { font-size:min(21.6cqi, 17vw); }

  /* Testimonials: drop the big flanking padding (it squeezed text off-screen)
     and move the prev/next arrows below the quote, centered. */
  .clients__slide { padding:0; }
  .clients__slider-nav {
    position:static;
    transform:none;
    justify-content:center;
    gap:16px;
    margin-top:28px;
  }

  /* Logo wall: 1.3× scale is too strong on small tiles — ease it back. */
  .logo__img { transform:scale(1.08); }
}

/* ============================================================
   OUR APPROACH
============================================================ */
.approach__inner { padding-left:calc(var(--pad) + var(--col-offset)); }
.approach .display { max-width:none; margin-bottom:32px; }
/* split layout: intro left, key stats right */
.approach__inner--split { display:grid; grid-template-columns:1fr; gap:clamp(40px, 6vw, 72px); align-items:center; }
@media (min-width:900px){
  .approach__inner--split { grid-template-columns:1.8fr 0.6fr; gap:clamp(48px, 6vw, 130px); }
}
.stats__grid.approach__stats {
  display:flex;
  flex-direction:column;
  gap:clamp(26px, 3.2vw, 40px);
  border-left:2px solid var(--red);
  padding-left:clamp(24px, 3vw, 44px);
}
.approach__stats .stat { align-items:flex-start; text-align:left; gap:6px; }
.approach__stats .stat__num { font-size:clamp(40px, 4.4vw, 64px); }
.approach__stats .stat__label { color:var(--black); max-width:none; }
.approach__body {
  max-width:none;
  margin:0 0 40px;
}
.approach__body p {
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(22px, 2.8vw, 32px);
  line-height:1.4;
  margin:0;
}
.approach__body p + p { margin-top:1em; }

/* OUR WHY (red) */
.why { background:var(--red); color:var(--black); padding-top:var(--section-y); }
.why__inner { padding-left:calc(var(--pad) + var(--col-offset)); padding-top:8px; padding-bottom:8px; }
.why__body {
  position:relative;
  display:inline-block;
  margin:0;
  max-width:100%;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(40px, 7vw, 110px);
  line-height:1.12;
  letter-spacing:-0.015em;
  color:#000;
}
.why__body p { margin:0; font-weight:400; }
.why__body strong { font-weight:700; }

/* "We've got you!" badge — inline after the quote */
.why__badge {
  display:inline-block;
  vertical-align:middle;
  margin-left:0.3em;
  width:clamp(100px, 11vw, 142px);
  height:auto;
}
@media (max-width:600px){
  .why__badge {
    display:block;
    margin-left:0;
    margin-top:24px;
    width:120px;
  }
}

/* BY THE NUMBERS (stats) */
.stats__grid {
  list-style:none;
  margin:0;
  padding:0;
  width:100%;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(40px, 5vw, 56px) 24px;
}
@media (min-width:640px){ .stats__grid { grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1024px){ .stats__grid { grid-template-columns:repeat(5, 1fr); gap:32px; } }
.stat {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}
/* scroll-reveal: stats fade + rise as each enters view */
@media (prefers-reduced-motion: no-preference) {
  .js-stats .stat {
    opacity:0;
    transform:translateY(24px);
  }
  .js-stats .stat.is-revealed {
    opacity:1;
    transform:none;
    transition:opacity .55s ease, transform .55s cubic-bezier(.2,.65,.3,1);
    transition-delay:calc(var(--stat-i, 0) * 90ms);
  }
}
.stat__num {
  font-family: Arial, Helvetica, sans-serif;
  font-weight:700;
  font-size:clamp(40px, 5vw, 58px);
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--black);
}
.stat--accent .stat__num { color:var(--red); }
.stat__label {
  font-family:var(--sans);
  font-size:clamp(15px, 1.4vw, 17px);
  line-height:1.35;
  color:#6b6b6b;
  max-width:14ch;
}

/* CAPABILITIES (dark) */
.capabilities { background:var(--white); color:var(--black); }
.capabilities__inner { padding-left:calc(var(--pad) + var(--col-offset)); }
.capabilities .display { margin-bottom:32px; }
.capabilities .display--light { color:var(--black); }
.capabilities__lead {
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(20px, 2.6vw, 31px);
  line-height:1.45;
  margin:0 0 64px;
  color:var(--black);
}

.cap-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
@media (min-width:768px){ .cap-grid { grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1024px){ .cap-grid { grid-template-columns:repeat(3, 1fr); } }

.cap-tile { position:relative; aspect-ratio:1/1; overflow:hidden; }

/* scroll-reveal: tiles fade + rise in as each enters the viewport.
   Base state is the visible end-state so no-JS / print / reduced-motion are fine. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .cap-tile {
    opacity:0;
    transform:translateY(28px);
  }
  .js-reveal .cap-tile.is-revealed {
    opacity:1;
    transform:none;
    transition:opacity .6s ease, transform .6s cubic-bezier(.2,.65,.3,1);
  }
}
.cap-tile__media {
  position:absolute;
  inset:0;
  overflow:hidden;
  background:#222;
}
.cap-tile__media img {
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1);
  transition: transform .6s cubic-bezier(.2,.65,.3,1);
  will-change: transform;
}
.cap-tile:hover .cap-tile__media img { transform: scale(1.2); }

/* centered circular overlay */
.cap-tile__badge {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:64%;
  aspect-ratio:1/1;
  perspective:900px;
}
/* inner element flips on hover */
.cap-tile__flip {
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.45,.05,.25,1);
}
.cap-tile:hover .cap-tile__flip,
.cap-tile:focus-within .cap-tile__flip { transform:rotateY(180deg); }

/* the two circular faces */
.cap-tile__face {
  position:absolute;
  inset:0;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:9%;
  box-sizing:border-box;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.cap-tile__face--back { transform:rotateY(180deg); }

/* Mobile (1-col, large tiles): enlarge the circle, trim padding + text so the
   longest strings ("Promotional & Offer Communication", the digital-assets
   desc) fit cleanly — iOS/Safari wrapped them past the circle edge. */
@media (max-width:600px){
  .cap-tile__badge { width:82%; }
  .cap-tile__face { padding:6%; }
  .cap-tile__title { font-size:clamp(20px, 6.2vw, 30px); line-height:1.12; }
  .cap-tile__desc { font-size:clamp(16px, 4.6vw, 22px); line-height:1.34; }
}

/* colour variants now paint both faces so the circle keeps its look mid-flip */
.cap-tile__badge--white .cap-tile__face { background:#fff; color:#000; }
.cap-tile__badge--cyan  .cap-tile__face { background:var(--cap-cyan); color:#000; }
.cap-tile__badge--blue  .cap-tile__face { background:var(--cap-blue); color:#fff; }
.cap-tile__badge--red   .cap-tile__face { background:var(--red); color:#fff; }
.cap-tile__badge--outline .cap-tile__face { background:rgba(0,0,0,0.18); color:#fff; border:1.5px solid rgba(255,255,255,0.85); }
.cap-tile__badge--ink .cap-tile__face { color:#000; }

.cap-tile__title {
  font-family:var(--sans);
  font-size:clamp(18px, 1.9vw, 24px);
  font-weight:700;
  letter-spacing:0;
  line-height:1.18;
  margin:0;
  color:inherit;
}
.cap-tile__desc {
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px, 1.5vw, 19px);
  line-height:1.4;
  color:inherit;
  margin:0;
  max-width:none;
}

/* ============================================================
   PROCESS / FACTORY OS
============================================================ */
/* PROCESS / FACTORY OS */
.process { background:var(--paper); }
.process__inner { padding-left:calc(var(--pad) + var(--col-offset)); }
.process .display { margin-bottom:16px; }
.process__subhead { font-size:clamp(34px, 6vw, 80px); white-space:nowrap; }
@media (max-width:768px){
  .process__subhead { white-space:normal; font-size:clamp(26px, 7vw, 40px); }
}
.process__lead {
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(28px, 4vw, 60px);
  line-height:1.04;
  letter-spacing:-0.015em;
  color:var(--black);
  margin:0 0 48px;
}

/* 3-column layout (replaces the old accordion) */
.process-cols {
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  padding-top:clamp(40px, 5vw, 64px);
}
@media (min-width:768px){ .process-cols { grid-template-columns:repeat(3, 1fr); gap:clamp(32px, 4vw, 64px); } }

/* Justified-rows gallery — each row fills the body width at a shared height,
   item flex-grow set to its aspect ratio so the row auto-justifies. */
/* "The Work" heading above the gallery */
.os-gallery__head {
  margin-top:0;
}
.os-gallery__head .display { margin:0 0 24px; }
.os-gallery__lead {
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(22px, 2.8vw, 32px);
  line-height:1.4;
  color:var(--black);
  margin:0;
}

/* ============================================================
   MARQUEE GALLERY (Variant B) — full-bleed auto-scrolling rows
============================================================ */
/* The Work heading sits directly above the marquee — drop the doubled gap */
.work.section { padding-top:clamp(70px, 9vw, 130px); padding-bottom:var(--section-y); }
.work .os-gallery__head { margin-bottom:clamp(28px, 3.5vw, 48px); }
.mq {
  /* break out of the centered container to full viewport width (inside the 20px frame) */
  width:100vw;
  margin-left:calc(50% - 50vw);
  display:flex;
  flex-direction:column;
  gap:clamp(6px, 0.7vw, 10px);
  overflow:hidden;
}
.mq__row {
  overflow:hidden;
  cursor:grab;
  touch-action:pan-y;
}
.mq__row.is-dragging { cursor:grabbing; }
.mq__track {
  display:flex;
  gap:clamp(6px, 0.7vw, 10px);
  width:max-content;
  will-change:transform;
  user-select:none;
}
.mq__item {
  position:relative;
  flex:0 0 auto;
  height:clamp(150px, 17vw, 250px);
  aspect-ratio:var(--ar, 1.6);
  overflow:hidden;
}
.mq__item img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  -webkit-user-drag:none;
  pointer-events:none;
}
/* red overlay + caption on hover (matches variant A) */
.mq__item::after {
  content:"";
  position:absolute;
  inset:0;
  background:#fa1a47;
  opacity:0;
  transform:scale(0);
  transform-origin:center;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), opacity .4s ease;
  z-index:1;
}
.mq__item:hover::after { opacity:1; transform:scale(1); }
.mq__cap {
  position:absolute;
  left:0; right:0; top:50%;
  z-index:2;
  padding:0 12px;
  text-align:center;
  color:#fff;
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(18px, 2vw, 32px);
  line-height:1.3;
  opacity:0;
  transform:translateY(calc(-50% + 10px));
  transition:opacity .45s ease .08s, transform .45s cubic-bezier(.2,.7,.3,1) .08s;
  pointer-events:none;
}
.mq__cap em { font-style:normal; }
.mq__item:hover .mq__cap { opacity:1; transform:translateY(-50%); }
@media (prefers-reduced-motion: reduce) {
  .mq__track { will-change:auto; }
}
.process-col__title {
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  font-size:clamp(24px, 2.6vw, 32px);
  line-height:1.1;
  margin:0 0 20px;
  color:var(--black);
  display:flex;
  align-items:center;
  gap:16px;
}
.process-col__desc {
  font-family:var(--sans);
  font-style:normal;
  font-size:clamp(16px, 1.5vw, 20px);
  line-height:1.55;
  color:var(--black);
  margin:0 0 28px;
  max-width:34ch;
}
.process-list {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}
.process-list li {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:16px;
  align-items:start;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(16px, 1.6vw, 20px);
  line-height:1.3;
  color:var(--black);
}
.process-list__plus {
  font-family:var(--sans);
  font-style:normal;
  font-weight:400;
  color:var(--black);
  line-height:1.3;
}

/* ============================================================
   CLIENTS
============================================================ */
.clients__inner { padding-left:calc(var(--pad) + var(--col-offset)); }

.clients__quote {
  display:grid;
  grid-template-columns:1fr;
  align-items:center;
  gap:24px;
  margin-bottom:80px;
  position:relative;
}

.clients__quote blockquote {
  margin:0;
  padding-left:0.3em;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(24px, 3.2vw, 40px);
  line-height:1.04;
  letter-spacing:-0.015em;
  color:var(--black);
  max-width:none;
}
.clients__quote blockquote p { margin:0; }
.clients__quote blockquote strong { font-weight:700; }
.clients__mark {
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  font-size:clamp(180px, 22vw, 320px);
  line-height:.55;
  color:var(--red);
  align-self:center;
  user-select:none;
  margin-top:-0.05em;
}
.clients__cite {
  font-family:var(--sans);
  font-style:normal;
  font-size:clamp(16px, 1.7vw, 20px);
  line-height:1.4;
  color:var(--black);
  margin-top:24px;
  padding-left:0;
  text-align:left;
}
.clients__cite span {
  display:inline-block;
  font-family:var(--sans);
  font-style:normal;
  font-size:clamp(16px, 1.7vw, 20px);
  font-weight:700;
  letter-spacing:0.04em;
  margin-top:6px;
}
@media (max-width:768px){
  .clients__cite { padding-left:0; }
}
/* ---------- TESTIMONIAL SLIDER ---------- */
.clients__slider { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(24px, 4vw, 64px); width:100%; }
.clients__slider-viewport { overflow:hidden; min-width:0; }
.clients__slider-track {
  display:flex;
  transition: transform .55s cubic-bezier(.65,.05,.36,1);
  will-change: transform;
}
.clients__slide {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0;
}
/* prev / next arrows grouped at the right as their own column */
.clients__slider-nav {
  position:static;
  flex:0 0 auto;
  transform:none;
  display:flex;
  gap:14px;
  z-index:2;
}
.clients__arrow {
  appearance:none;
  border:0;
  cursor:pointer;
  width:clamp(46px, 4.2vw, 58px);
  aspect-ratio:1/1;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--red);
  color:#fff;
  transition:background .2s ease, color .2s ease, transform .2s ease;
}
.clients__arrow svg {
  width:52%;
  height:52%;
  display:block;
}
.clients__arrow:hover,
.clients__arrow:active,
.clients__arrow:focus-visible { background:#fff; color:var(--red); }
.clients__arrow:focus-visible { outline:2px solid var(--red); outline-offset:3px; }

/* slider stacks on narrow screens: text on top, controls below centered */
@media (max-width:768px){
  .clients__slider { grid-template-columns:1fr; align-items:stretch; gap:16px; }
  .clients__slider-nav { justify-content:flex-start; margin-bottom:clamp(32px, 8vw, 56px); }
  .clients__quote blockquote { font-size:clamp(22px, 6vw, 30px); }
  .clients__quote { margin-bottom:0; }
}
/* logo grid — 7×2 tile lockup, paper-bg gaps, generous internal padding */
.clients__grid-wrap { position:relative; }
.clients__grid {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:5px;
  background:transparent;
  border:0;
}
@media (min-width:640px){ .clients__grid { grid-template-columns:repeat(4, 1fr); } }
@media (min-width:1024px){ .clients__grid { grid-template-columns:repeat(5, 1fr); gap:5px; } }

.logo {
  background:var(--white);
  display:grid;
  place-items:center;
  text-align:center;
  aspect-ratio: 365 / 142;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  font-family:var(--serif);
  font-size:18px;
  color:var(--black);
  line-height:1.1;
  position: relative;
}
.logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.logo:hover::after { opacity: 1; }

/* image-based logos — uniform 365×142 canvas: fill the tile exactly (no distortion). */
.logo__img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.3);
  transition: filter 0.3s ease;
}
.logo:hover .logo__img { filter: grayscale(1); }
/* Row 2 source PNGs sit slightly lower in their 600×400 canvas than row 1.
   Tile aspect matches source, so object-position has no letterbox to nudge —
   shift the entire content box up via asymmetric padding instead. */
/* Row 2 override removed — zero padding + percentage-sized image keeps every
   logo perfectly centered without per-row nudges. */

/* CONTACT */
.contact { background:#b9efff; }
.contact__inner { padding-left:calc(var(--pad) + var(--col-offset)); }
.contact .display { margin-bottom:24px; }

/* centered block (contact) */
.contact__inner--center {
  max-width:var(--max);
  margin:0 auto;
  text-align:center;
  display:block;
}
.contact__inner--center .display { max-width:none; }
.contact__inner--center .contact__lead { max-width:720px; margin-left:auto; margin-right:auto; }
.contact__inner--center .contact-inline { max-width:640px; margin-left:auto; margin-right:auto; }
.contact__lead {
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(22px, 2.8vw, 32px);
  line-height:1.4;
  margin:0 0 6px;
  color:var(--black);
}

/* ---------- INLINE CONTACT FORM (email + button row, 50/50) ---------- */
.contact-inline {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  margin:28px 0 0;
  width:100%;
}
.contact-inline__email {
  flex:1 1 auto;
  min-width:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(16px, 1.6vw, 18px);
  padding:16px 20px;
  border:2px solid var(--black);
  background:var(--white);
  color:var(--black);
  outline:none;
  border-radius:0;
  transition:border-color .2s;
}
.contact-inline__email::placeholder { color:#9a9a9a; font-style:italic; }
.contact-inline__email:focus { border-color:var(--red); }
.contact-inline__btn {
  flex:0 0 auto;
  border:0;
  cursor:pointer;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(13px, 1.2vw, 15px);
}
.contact-inline__status {
  flex:1 0 100%;
  margin:4px 0 0;
}
.contact-inline__note {
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(14px, 1.4vw, 16px);
  line-height:1.5;
  color:var(--black);
  margin:0;
}
@media (max-width:520px){
  .contact-inline { flex-direction:column; }
}
.contact-inline__status {
  flex:1 0 100%;
  width:100%;
  margin:6px 0 0;
  font-family:var(--sans);
  font-size:clamp(14px, 1.4vw, 16px);
  color:var(--black);
}

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background:var(--red);
  color:var(--black);
  padding-top:120px;
  position:relative;
  overflow:hidden;
}
@media (max-width:900px){
  .site-footer__top { min-height:0; }
  .site-footer { padding-top:var(--section-y); }
  .site-footer__top { padding-bottom:var(--section-y); }
}
.site-footer__top { position:relative; z-index:1; }
.site-footer__top {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(48px, 7vw, 96px);
  align-items:stretch;
  padding-bottom:0;
  padding-left:var(--pad);
  padding-right:var(--pad);
}
@media (min-width:900px){
  .site-footer__top { grid-template-columns:1fr 1fr; align-items:center; min-height:clamp(560px, 72vh, 820px); }
}
/* left column: brand + legal, centered as one block */
.footer-left { display:flex; flex-direction:column; gap:clamp(32px, 4vw, 56px); }
/* right column: multilingual thank-you */
.footer-thanks { align-self:center; }
.footer-thanks .thanks__lead {
  font-size:clamp(28px, 3.6vw, 45px);
  line-height:1.2;
  color:var(--black);
}
.footer-thanks .thanks__sign {
  font-size:clamp(15px, 1.6vw, 20px);
  color:var(--black);
  margin-top:clamp(24px, 3vw, 40px);
}
@media (min-width:900px){
  .footer-thanks { text-align:right; }
}

/* FACTORY wordmark + city list (top-left) */
.footer-logo {
  display:block;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:700;
  font-size:clamp(48px, 9vw, 90px);
  line-height:0.9;
  letter-spacing:-0.02em;
  color:var(--black);
  margin:0 0 clamp(32px, 4vw, 56px);
}

/* Email + Phone block under the logo */
.footer-contact {
  display:flex;
  flex-direction:column;
  gap:clamp(22px, 2.6vw, 34px);
}
.footer-contact__item { display:flex; flex-direction:column; gap:4px; }
.footer-contact__label {
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(15px, 1.5vw, 18px);
  color:var(--black);
}
.footer-contact a {
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(20px, 2.4vw, 30px);
  line-height:1.15;
  color:var(--white);
  text-decoration:none;
  transition:color .2s, opacity .2s;
}
.footer-contact a:hover { opacity:1; color:var(--black); }
.footer-contact a { width:fit-content; }

/* legal links — bottom-left */
.footer-bottom {
  margin-top:clamp(40px, 6vw, 80px);
}
.footer-bottom__legal {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(20px, 4vw, 56px);
}
.footer-bottom a {
  font-family:Arial, Helvetica, sans-serif;
  font-style:italic;
  font-size:clamp(14px, 1.4vw, 17px);
  color:var(--white);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:color .2s, opacity .2s;
}
.footer-bottom a:hover { opacity:1; color:var(--black); }
.footer-bottom a { width:fit-content; }

/* ============================================================
   THANK YOU
============================================================ */
.thanks__lead {
  font-family:var(--serif);
  font-style:italic;
  font-weight:700;
  font-size:clamp(34px, 5.4vw, 84px);
  line-height:1.18;
  margin:0;
}
.thanks__sign {
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(16px, 1.8vw, 24px);
  margin:clamp(32px, 5vw, 64px) 0 0;
}
.thanks__sign strong { font-family:var(--sans); font-weight:700; font-style:normal; letter-spacing:0.02em; }
.thanks__heart { font-style:normal; }
.footer-thanks .thanks__sign { white-space:nowrap; }
.footer-thanks .thanks__heart { color:#fff; }

/* ============================================================
   SCROLL REVEAL (subtle fade-up; replays on re-entry)
============================================================ */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.3,1);
  }
  [data-reveal].is-inview {
    opacity: 1;
    transform: none;
  }
  [data-reveal][data-reveal-delay="1"] { transition-delay: .12s; }
  [data-reveal][data-reveal-delay="2"] { transition-delay: .24s; }
}

/* ============================================================
   A11Y
============================================================ */
:focus-visible {
  outline:2px solid var(--red);
  outline-offset:3px;
}
.hero :focus-visible,
.capabilities :focus-visible,
.contact-tab:focus-visible { outline-color:var(--white); }

/* ============================================================
   COOKIE CONSENT BANNER (fixed bottom)
============================================================ */
.consent {
  position:fixed;
  left:20px;
  right:20px;
  bottom:20px;
  z-index:130;
  display:flex;
  align-items:center;
  gap:clamp(20px, 4vw, 56px);
  padding:clamp(20px, 2.4vw, 28px) clamp(22px, 3vw, 40px);
  background:rgba(20,20,20,0.86);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  color:var(--white);
  box-shadow:0 12px 40px rgba(0,0,0,0.28);
  transform:translateY(calc(100% + 40px));
  opacity:0;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), opacity .5s ease;
  pointer-events:none;
}
.consent.is-visible {
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.consent__text {
  font-family:var(--sans);
  font-size:clamp(13px, 1.3vw, 15px);
  line-height:1.55;
  color:rgba(255,255,255,0.82);
  margin:0;
  max-width:760px;
}
.consent__text a {
  color:var(--white);
  text-decoration:underline;
  text-underline-offset:2px;
}
.consent__text a:hover { color:var(--red); }
.consent__actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  margin-left:auto;
}
.consent__btn {
  font-family:var(--sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:14px 26px;
  white-space:nowrap;
  border-radius:0;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.consent__btn--accept {
  background:var(--red);
  color:var(--white);
  border:2px solid var(--red);
}
.consent__btn--accept:hover { background:var(--white); color:var(--black); border-color:var(--white); }
.consent__btn--reject {
  background:transparent;
  color:var(--white);
  border:2px solid rgba(255,255,255,0.5);
}
.consent__btn--reject:hover { border-color:var(--white); background:rgba(255,255,255,0.08); }
.consent__btn:focus-visible { outline:2px solid var(--white); outline-offset:3px; }

@media (max-width:768px){
  .consent {
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    left:12px;
    right:12px;
    bottom:12px;
  }
  .consent__actions { margin-left:0; width:100%; }
  .consent__btn { flex:1 1 0; text-align:center; padding:14px 16px; }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}