/* ==========================================================================
   ARQTK — styles-classic.css
   Used by index.html, services.html and lab.html (Alam, Sep 2026: these
   three pages keep the look of the 28 Sep, 17:58 version). The other pages
   use styles.css. Shared parts (banner, footer, colours) live in both files:
   change them in both.
   ========================================================================== */
/* ==========================================================================
   ARQTK — styles.css
   All colors, type sizes and spacing live in :root below.
   Re-skin the whole site by editing ONLY these variables.
   ========================================================================== */

:root {
  /* ---- Palette (graphite / muted grays / off-white) ---- */
  --color-bg:        #f4f3f0;  /* off-white page background */
  --color-surface:   #eceae6;  /* slightly darker surface */
  --color-graphite:  #232526;  /* near-black graphite — dark sections, headings */
  --color-graphite-2:#33363a;  /* lighter graphite — cards on dark */
  --color-ink:       #26282a;  /* body text on light */
  --color-ink-soft:  #6b6e70;  /* secondary text */
  --color-line:      #d7d4cf;  /* hairlines on light */
  --color-line-dark: #45484c;  /* hairlines on dark */
  --color-on-dark:   #eceae6;  /* text on graphite */
  --color-on-dark-soft: #a9aca8;

  /* ---- LAB accent — used ONLY on the LAB page ---- */
  --color-lab-accent: #C6F04E; /* acid green / chartreuse (AA on graphite) */

  /* ---- Custom cursor (JS-driven dot). Overridden on the LAB page ---- */
  --cursor-color: #26282a;

  /* ---- Typography ---- */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fs-hero:    clamp(2.4rem, 6.5vw, 5.2rem);
  --fs-title:   clamp(1.9rem, 4.5vw, 3.4rem);
  --fs-panel:   clamp(2.2rem, 5.5vw, 4.2rem);
  --fs-statement: clamp(1.5rem, 3.2vw, 2.4rem);
  --fs-lede:    clamp(1.05rem, 1.8vw, 1.35rem);
  --fs-body:    1rem;
  --fs-small:   0.8rem;
  --fs-kicker:  0.8rem;
  /* one type scale for the whole site (≈ ×1.125–1.25 steps):
     12.8 · 14.4 · 16 · 18 · 21.6 · 27 · 40 · 54 px at 1440 px */
  --fs-xs: 0.8rem;
  --fs-s:  0.9rem;
  --fs-m:  1.125rem;
  --fs-l:  1.35rem;
  --fs-h2: clamp(1.6rem, 2.8vw, 2.5rem);
  --measure: 38em;           /* ≈ 65–75 characters per line */
  --lh-body:    1.65;
  --ls-kicker:  0.18em;

  /* ---- Spacing rhythm ---- */
  --space-xs: 0.5rem;
  --space-s:  1rem;
  --space-m:  2rem;
  --space-l:  4rem;
  --space-xl: clamp(4rem, 10vh, 8rem);
  --space-xxl: clamp(6rem, 18vh, 14rem);  /* extra whitespace (LAB examples) */
  --gutter:   clamp(1.25rem, 4vw, 4rem);
  --content-max: 1280px;
  --page-max: var(--content-max);   /* the LAB widens it */
  --grid-gap: var(--space-l);
  /* left/right edge of the content column, also used by the banner so
     the logo lines up with the text below */
  --edge: max(var(--gutter), calc((100% - var(--page-max)) / 2));
  --text-max: 42em;
  /* studio projects: a narrower column than the rest of the site, so
     the pictures never dominate the screen (Alam, Sep 2026) */
  --pj-max: 1120px;

  /* ---- Fixed banner (bottom banner removed) ---- */
  --banner-h-top: 2rem;
  --banner-h-bottom: 0rem;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;
}

/* Page colours (Alam, Sep 2026): studio on white, contact on ivory */
body[data-page="studio"] { --color-bg: #ffffff; }
body[data-page="contact"] { --color-bg: #f7f4eb; }

/* The LAB page recolors the cursor (and nothing else outside its section) */
body[data-page="lab"] { --cursor-color: var(--color-lab-accent); }

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--banner-h-bottom); /* room for the fixed bottom banner */
  overflow-x: hidden; /* full-bleed images use 100vw — avoid a stray x-scrollbar */
}

/* LAB page is dark end to end */
body[data-page="lab"] { background: var(--color-graphite); --page-max: 1600px; }

img { display: block; max-width: 100%; }

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 0 0 var(--space-s);
}

p { margin: 0 0 var(--space-s); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-graphite);
  outline-offset: 3px;
}
.section-lab :focus-visible,
body[data-page="lab"] :focus-visible { outline-color: var(--color-lab-accent); }
body[data-page="landing"] :focus-visible, body[data-page="services"] :focus-visible,
.top-banner :focus-visible, .cta-band :focus-visible, .studio-intro-bg ~ * .page-head :focus-visible {
  outline-color: var(--color-on-dark);
}
body[data-page="landing"] .cta-band :focus-visible, .svc-panel :focus-visible { outline-color: var(--color-ink); }
body[data-page="lab"] .top-banner :focus-visible { outline-color: var(--color-graphite); }

/* skip link: hidden until focused */
.skip-link {
  position: fixed; left: var(--gutter); top: 0.4rem; z-index: 400;
  padding: 0.5rem 0.9rem;
  background: var(--color-ink); color: var(--color-bg);
  font-size: var(--fs-s); text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s;
}
.skip-link:focus { transform: none; }

/* ==========================================================================
   Custom cursor — a dot that follows the pointer (desktop only, added by JS).
   Grows over links/buttons; turns acid green on the LAB page.
   ========================================================================== */
#cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--cursor-color);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease), height 0.25s var(--ease),
              background 0.4s, opacity 0.3s;
  opacity: 0;
  mix-blend-mode: exclusion; /* stays visible on light and dark */
}
#cursor.visible { opacity: 1; }
#cursor.grow { width: 34px; height: 34px; }
/* LAB: explicit green dot (no blend trick), swapping to graphite over
   the green top banner so the pointer is never lost */
body[data-page="lab"] #cursor { mix-blend-mode: normal; }
body[data-page="lab"] #cursor.on-banner { background: var(--color-graphite); }
/* hide the native cursor only when the custom one is active */
html.custom-cursor, html.custom-cursor a, html.custom-cursor button,
html.custom-cursor input, html.custom-cursor textarea, html.custom-cursor label {
  cursor: none;
}

/* ==========================================================================
   Fixed top banner
   ========================================================================== */
.top-banner {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--banner-h-top);
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: 0 var(--edge);
  /* 45 % opaque on every page (Alam, Sep 2026) */
  background: color-mix(in srgb, var(--color-bg) 45%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
  /* own compositing layer: prevents the vertical repaint streaks that
     backdrop-filter shows in Chrome while the pointer moves */
  transform: translateZ(0);
  will-change: backdrop-filter;
}
/* Banner colors per page — all translucent (45% of each section's color),
   studio/contact keep the page background, landing + services graphite,
   the LAB banner acid green. */
body[data-page="landing"] .top-banner,
body[data-page="studio"] .top-banner,
body[data-page="services"] .top-banner {
  background: color-mix(in srgb, var(--color-graphite) 45%, transparent);
  border-bottom-color: var(--color-line-dark);
  color: var(--color-on-dark);
}
body[data-page="lab"] .top-banner {
  background: color-mix(in srgb, var(--color-lab-accent) 45%, transparent);
  border-bottom-color: var(--color-lab-accent);
  color: var(--color-graphite);
}

.brand { display: flex; align-items: center; text-decoration: none; padding: 0.45rem 0; }
/* the wordmark is an inline SVG using currentColor:
   dark gray on light banners, light on graphite, dark on the green LAB */
.brand-logo { height: 0.95rem; width: auto; display: block; color: var(--color-ink); }
body[data-page="landing"] .brand-logo,
body[data-page="studio"] .brand-logo,
body[data-page="services"] .brand-logo { color: var(--color-on-dark); }
body[data-page="lab"] .brand-logo { color: var(--color-graphite); }
.brand-fallback { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.14em; }

.main-nav { display: flex; gap: clamp(0.9rem, 2.5vw, 2.2rem); margin-left: auto; }
/* the banner is very see-through: a soft shadow keeps the light links
   readable when a white area passes under the dark banners */
body[data-page="landing"] .top-banner, body[data-page="studio"] .top-banner,
body[data-page="services"] .top-banner { text-shadow: 0 0 6px rgba(20, 21, 22, 0.55); }
.main-nav a {
  text-decoration: none;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  padding: 0.3rem 0;
  line-height: 1.2;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-ink);
}
/* a lighter soft tone than --color-on-dark-soft: at 75 % the banner lets
   white areas through, and this keeps the links at ≥ 4.5:1 there */
body[data-page="landing"] .main-nav a, body[data-page="studio"] .main-nav a,
body[data-page="services"] .main-nav a { color: #d4d3cf; }
body[data-page="landing"] .main-nav a:hover, body[data-page="studio"] .main-nav a:hover,
body[data-page="services"] .main-nav a:hover,
body[data-page="landing"] .main-nav a[aria-current="page"],
body[data-page="studio"] .main-nav a[aria-current="page"],
body[data-page="services"] .main-nav a[aria-current="page"] {
  color: var(--color-on-dark);
  border-bottom-color: var(--color-on-dark);
}
/* landing: the section currently on screen is highlighted in the nav */
body[data-page="landing"] .main-nav a.is-section {
  color: var(--color-on-dark);
  border-bottom-color: var(--color-on-dark);
}
body[data-page="lab"] .main-nav a { color: rgba(38, 40, 42, 0.78); }
body[data-page="lab"] .main-nav a:hover,
body[data-page="lab"] .main-nav a[aria-current="page"] {
  color: var(--color-graphite);
  border-bottom-color: var(--color-graphite);
}

.lang-toggle { display: flex; align-items: center; gap: 0.35rem; font-size: var(--fs-small); }
.lang-toggle button {
  font: inherit;
  letter-spacing: 0.08em;
  background: none;
  border: none;
  padding: 0.3rem 0.3rem;
  min-width: 24px;
  line-height: 1.2;
  cursor: pointer;
  color: var(--color-ink-soft);
}
body[data-page="landing"] .lang-toggle button,
body[data-page="studio"] .lang-toggle button,
body[data-page="services"] .lang-toggle button { color: #d4d3cf; }
body[data-page="lab"] .lang-toggle button { color: rgba(38, 40, 42, 0.78); }
.lang-toggle button[aria-pressed="true"] { color: var(--color-ink); font-weight: 700; }
body[data-page="landing"] .lang-toggle button[aria-pressed="true"],
body[data-page="studio"] .lang-toggle button[aria-pressed="true"],
body[data-page="services"] .lang-toggle button[aria-pressed="true"] { color: var(--color-on-dark); }
body[data-page="lab"] .lang-toggle button[aria-pressed="true"] { color: var(--color-graphite); }
body[data-page="lab"] .lang-sep { color: rgba(38, 40, 42, 0.35); }
.lang-sep { color: var(--color-line); }

/* ==========================================================================
   Hamburger (mobile-only, activated in the 700px media query below)
   ========================================================================== */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}

/* ==========================================================================
   LANDING — full-screen panels; background images cross-fade on scroll
   ========================================================================== */
.landing-bgs {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--color-graphite);
}
.landing-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.landing-bg.active { opacity: 1; }
/* the BIM ARQTK video (panel 02) is very light: a slightly deeper veil */
.landing-bg:nth-child(3)::after { background: rgba(20, 21, 22, 0.56); }
.landing-bg img, .landing-bg .ph {
  width: 100%; height: 100%;
  object-fit: cover;
}
.landing-bg .ph { border: none; background-color: var(--color-graphite-2); color: var(--color-on-dark-soft); }
.landing-bg::after {
  /* darkening veil so panel text stays readable over any image */
  content: "";
  position: absolute; inset: 0;
  background: rgba(20, 21, 22, 0.45);
}

.landing { position: relative; z-index: 1; color: var(--color-on-dark); }
.landing-panel {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: var(--banner-h-top) var(--gutter) var(--banner-h-bottom);
}
.landing-panel-inner { max-width: var(--content-max); width: 100%; margin: 0 auto; }
/* section index: small, light numerals followed by a hairline */
.landing-num {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  font-variant-numeric: tabular-nums lining-nums;
  color: rgba(236, 234, 230, 0.8);
  margin: var(--space-m) 0 0.35rem;    /* sits low, right above the title */
}
/* (no line after the number — Alam, Sep 2026) */
.landing-panel p.landing-num { font-size: 0.875rem; }
.landing-panel h2 { font-size: var(--fs-panel); max-width: 14em; }
.landing-panel p { font-size: var(--fs-lede); color: var(--color-on-dark-soft); max-width: 34em; }
.landing-link {
  display: inline-block;
  margin-top: var(--space-m);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-on-dark);
  border-bottom: 1px solid var(--color-on-dark);
  padding-bottom: 0.3rem;
  transition: opacity 0.3s;
}
.landing-link:hover { opacity: 0.6; }

/* the opening lander (panel 0) — brand statement + clear scroll cue */
.landing-hero h1 {
  font-size: var(--fs-hero);
  font-weight: 500;
  max-width: 13em;
  margin-bottom: var(--space-s);
}
.landing-hero p {
  font-size: var(--fs-lede);
  color: var(--color-on-dark-soft);
  max-width: 34em;
}
.scroll-hint {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: var(--space-l);
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
}
/* scroll cues disappear as soon as scrolling starts */
.scroll-hint { transition: opacity 0.6s var(--ease); }
html.is-scrolled .scroll-hint { opacity: 0; }
.scroll-hint-line {
  display: block;
  width: 1px;
  height: 3rem;
  background: var(--color-on-dark-soft);
  transform-origin: top;
  animation: scroll-hint 2.2s var(--ease) infinite;
}
@keyframes scroll-hint {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(0.9rem); opacity: 0; }
}

/* ==========================================================================
   Generic section scaffolding
   ========================================================================== */
.section {
  padding: var(--space-xl) var(--gutter);
  scroll-margin-top: var(--banner-h-top);
}
.page-head { padding-top: calc(var(--banner-h-top) + var(--space-xl)); }
.section-head { max-width: var(--content-max); margin: 0 auto var(--space-l); }
.section-kicker {
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-s);
}
.section-title { font-size: var(--fs-title); }
.section-lede { font-size: var(--fs-lede); color: var(--color-ink-soft); max-width: var(--text-max); }

/* ==========================================================================
   THE STUDIO — opening statement + who-we-are over a fixed background
   photo that fades out (driven by script.js) right after the who block.
   ========================================================================== */
.studio-intro-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--color-graphite);
  opacity: 1;
  transition: opacity 1.1s var(--ease);   /* same crossfade as the landing */
}
.studio-intro-bg.is-hidden { opacity: 0; }
/* while the who-we-are text is over the photo: a soft veil for legibility */
.studio-intro-bg::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: rgba(20, 21, 22, 0.42);
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  pointer-events: none;
}
.studio-intro-bg.is-reading::before { opacity: 1; }
.studio-intro-bg img, .studio-intro-bg .ph {
  width: 100%; height: 100%;
  object-fit: cover;
}
.studio-intro-bg .ph {
  border: none;
  background-color: var(--color-graphite-2);
  color: var(--color-on-dark-soft);
}
.studio-intro-bg::after {
  /* light shading only at the top and bottom edges: the photo keeps its
     own colour; the white text stays legible */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(20, 21, 22, 0.38) 0%, rgba(20, 21, 22, 0) 30%,
    rgba(20, 21, 22, 0) 70%, rgba(20, 21, 22, 0.42) 100%);
}
/* page content sits above the fixed photo — every direct child except
   the photo layer gets its own stacking level, otherwise text drops
   behind the photo once its reveal animation (transform) finishes */
body[data-page="studio"] main { position: relative; z-index: 1; }
body[data-page="studio"] main > :not(.studio-intro-bg) {
  position: relative;
  z-index: 1;
}

/* first screen: title, statement in the upper band (above the faces),
   scroll cue at the bottom */
body[data-page="studio"] .page-head {
  padding-top: calc(var(--banner-h-top) + var(--space-m));
  padding-bottom: 0;
}
body[data-page="studio"] .page-head .section-head { margin-bottom: 0; }
body[data-page="studio"] #page-kicker { display: none; }
body[data-page="studio"] .page-head .section-title,
.statement-text, #who .section-kicker, #who p {
  color: var(--color-on-dark);
  text-shadow: 0 1px 14px rgba(20, 21, 22, 0.35);
  transition: color 0.9s var(--ease), text-shadow 0.9s var(--ease);
}
.studio-statement {
  position: relative;
  min-height: calc(100vh - var(--banner-h-top) - var(--space-m) - 4.5rem);
  padding: 11vh var(--gutter) 0;
}
.studio-statement-inner { max-width: var(--content-max); margin: 0 auto; width: 100%; }
.statement-text {
  font-size: calc(var(--fs-statement) * 0.7);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.35;
  max-width: 26em;
  margin: 0;
}
/* scroll cue under the statement, the same as the landing's */
.studio-cue {
  color: var(--color-on-dark);
  text-shadow: 0 1px 10px rgba(20, 21, 22, 0.4);
}
.studio-cue .scroll-hint-line { background: currentColor; }

/* who we are: starts below the first screen, over the lower band */
/* the bottom room lets the photo crossfade to white after the text has
   been read, before the founders (solid white) come up */
#who { padding-top: var(--space-l); padding-bottom: 26vh; }
/* "QUIÉNES SOMOS" and "FUNDADORES": capitals, the same size */
#who .section-kicker, .founders-title {
  font-size: 1rem;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
}
#who .who-inner { max-width: var(--content-max); margin: 0 auto; }
#who p { font-size: var(--fs-body); max-width: var(--measure); }

/* once the photo has faded, the text turns dark on the white page */
body.studio-bg-off #who p { color: var(--color-ink); text-shadow: none; }
body.studio-bg-off #who .section-kicker { color: var(--color-ink-soft); text-shadow: none; }
.studio-cue { transition: opacity 0.6s var(--ease); }
body.studio-bg-off .studio-cue { opacity: 0; }

/* everything after the who block gets a solid background, so the
   fading photo only lives behind the intro */
#projects-section .section-head { max-width: var(--pj-max); }
/* no solid band: the page is white already, so the photo fades into it
   with no visible edge or line before the founders */
#founders-section { padding-top: 0; }
body[data-page="studio"] .section-contact { background: var(--color-bg); }

/* ==========================================================================
   THE STUDIO — editorial project scroll
   Each project: full-width cover with title, then detail images with
   description space. The page simply grows with every project added.
   ========================================================================== */
.projects {
  max-width: var(--pj-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-xxl);
}
.project { width: 100%; }

/* full-bleed cover: breaks out of the content column to span the
   whole viewport width */
.project-cover {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.project-cover img, .project-cover .ph {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}


.project-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-m);
}
.project-title-row h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); margin: 0; }
.project-meta {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin: 0;
}
.project-body { color: var(--color-ink-soft); max-width: 38em; margin-top: var(--space-s); }

/* detail rows: image + description, alternating alignment for an
   organic, non-gridded editorial rhythm */
.project-detail-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-m) var(--space-l);
  align-items: end;
  margin-top: var(--space-l);
}
.project-detail-row:nth-child(even) {
  grid-template-columns: 1fr 2fr;
}
.project-detail-row:nth-child(even) .project-detail-media { order: 2; }
.project-detail-row:nth-child(even) .project-detail-text  { order: 1; text-align: right; }
.project-detail-media img, .project-detail-media .ph {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.project-detail-text { font-size: var(--fs-body); color: var(--color-ink-soft); }

/* ==========================================================================
   THE STUDIO — project layout blocks (full / header / wide / pair / text /
   carousel / feature). Built by renderProjectBlock() in script.js.
   ========================================================================== */
.pj { display: flex; flex-direction: column; gap: var(--space-l); }
/* the space between projects = the space inside a project */
#projects.projects { gap: var(--space-l); }

/* image slot locked to the picture's own proportions (set inline) */
.pj-media { width: 100%; overflow: hidden; }
.pj-media img, .pj-media video, .pj-media .ph {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pj-media .ph { aspect-ratio: auto !important; }

/* full-bleed: breaks out of the content column */
.pj-full { width: 100vw; margin-left: calc(50% - 50vw); }
.pj-full .pj-media { max-height: calc(100vh - var(--banner-h-top)); }

/* header: index, title, fact sheet + intro */
.pj-header { padding-top: var(--space-m); }
.pj { scroll-margin-top: calc(var(--banner-h-top) + var(--space-m)); }

/* same family and case everywhere; hierarchy through size and tone:
   title 2.4rem ink · intro 1rem soft · meta 0.9rem (first line ink) ·
   captions 0.9rem soft */
:root { --grid-gap: var(--space-l); }
.pj-head-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s) var(--grid-gap);
  align-items: start;
  margin-top: var(--space-s);
}
.pj-intro { grid-column: 1 / 3; }
.pj-meta { grid-column: 3; }
.pj-meta p {
  margin: 0;
  /* right-aligned: the lines end where the pictures end */
  text-align: right;
  font-size: var(--fs-s);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
}
.pj-meta p:first-child { color: var(--color-ink); }
.pj-index {
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-xs);
}
.pj-title { font-size: var(--fs-h2); margin: 0; }
.pj-intro p:last-child { margin-bottom: 0; }
.pj-head-grid {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) 2fr;
  gap: var(--space-m) var(--space-l);
  align-items: start;
}
.pj-facts { margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.pj-fact dt {
  font-size: var(--fs-kicker);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.pj-fact dd { margin: 0.15rem 0 0; font-size: 0.95rem; line-height: 1.45; }
.pj-intro p, .pj-aside p, .pj-text p { color: var(--color-ink-soft); max-width: var(--measure); }

/* text | media rows (1/3 + 2/3), alternating sides, text sits low */
.pj-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m) var(--grid-gap);
  align-items: end;
}
.pj-row .pj-row-text { grid-column: 1; }
.pj-row .pj-row-media { grid-column: 2 / 4; }
.pj-row.is-flip .pj-row-media { grid-column: 1 / 3; grid-row: 1; }
.pj-row.is-flip .pj-row-text { grid-column: 3; }
/* single photos never exceed ~68 % of the screen height (max-width set
   in script.js); they stay on the outer edge of the grid */
.pj-row:not(.is-flip) .pj-row-media > .pj-media { margin-left: auto; }
/* half-size media (one column), on the outer edge; text on the other */
.pj-row.is-half .pj-row-text { grid-column: 1 / 3; }
.pj-row.is-half .pj-row-media { grid-column: 3; }
.pj-row.is-half.is-flip .pj-row-media { grid-column: 1; }
.pj-row.is-half.is-flip .pj-row-text { grid-column: 2 / 4; }
/* centred media, big; the text under it */
.pj-row.is-center { display: flex; flex-direction: column; align-items: center; gap: var(--space-m); }
.pj-row.is-center .pj-row-media { width: 100%; margin: 0 auto; }
.pj-row.is-center .pj-dots { justify-content: center; margin-left: 0; }
.pj-row.is-center .pj-row-text { max-width: var(--measure); align-self: flex-start; }
/* crossfading carousel: pictures stacked, the active one fades in */
.pj-fade-stage { display: grid; cursor: grab; touch-action: pan-y; outline-offset: 4px; }
html.custom-cursor .pj-fade-stage { cursor: none; }
.pj-fade-slide { grid-area: 1 / 1; opacity: 0; transition: opacity 0.9s var(--ease); pointer-events: none; }
.pj-fade-slide.is-on { opacity: 1; }
.pj-fade-slide img { user-select: none; -webkit-user-drag: none; }
.pj-fade .pj-dots { justify-content: center; margin-left: 0; }
/* two photos side by side in a row: a small gap */
.pj-row .pj-pair { gap: 1rem; }
/* a single portrait photo takes one column */
.pj-row.is-narrow .pj-row-media { grid-column: 2; }
.pj-row.is-narrow.is-flip .pj-row-media { grid-column: 1; }
.pj-row.is-narrow.is-flip .pj-row-text { grid-column: 2; }
.pj-row-media { min-width: 0; }
.pj-row-text p { color: var(--color-ink-soft); margin: 0 0 var(--space-s); }
.pj-row-text p:last-child { margin-bottom: 0; }
.pj-row-text { text-align: left; }
.pj-row .pj-carousel .pj-slide { flex-basis: 100%; }
.pj-row .pj-carousel { margin: 0; }

/* wide image, optionally with its text beside it */
.pj-fig { margin: 0; }
.pj-wide.has-text {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-m) var(--space-l);
  align-items: end;
}
.pj-caption {
  font-size: var(--fs-s);
  line-height: var(--lh-body);
  color: var(--color-ink-soft);
  margin: var(--space-xs) 0 0;
}

/* rows sharing one height: each cell's flex-grow = its aspect ratio */
.pj-pair-wrap { margin: 0; }
/* wide pair: the two pictures share the full grid width */
.pj-cell > .pj-caption { margin-top: var(--space-s); max-width: var(--measure); }

.pj-pair { display: flex; gap: var(--grid-gap); align-items: flex-start; }
/* feature: photo (2 columns, or 1 if portrait) + drawings in the rest,
   same height, drawings change with dots */
.pj-feature {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-s) var(--grid-gap);
  align-items: start;
}
.pj-feature-photo { grid-column: 1 / 3; margin: 0; }
.pj-feature-plans { grid-column: 3; display: flex; flex-direction: column; align-self: stretch; }
.pj-feature.is-portrait .pj-feature-photo { grid-column: 1; }
.pj-feature.is-portrait .pj-feature-plans { grid-column: 2 / 4; }
.pj-plan-track { flex: 1 1 auto; min-height: 0; gap: 0; }
.pj-plan-track .pj-slide { flex: 0 0 100%; position: relative; }
.pj-plan-slide .img-slot { position: absolute; inset: 0; }
.pj-plan-slide img, .pj-plan-slide .ph {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: left top;
  aspect-ratio: auto !important;
}
.pj-feature-plans .pj-dots { justify-content: flex-start; }

/* text-only block aligns with the intro column */
.pj-text { display: grid; grid-template-columns: minmax(14rem, 1fr) 2fr; column-gap: var(--space-l); }
.pj-text p { grid-column: 2; }

/* ---------- horizontal scroller (inline carousel + lightbox) ---------- */
.pj-track {
  position: relative;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  outline-offset: 4px;
}
.pj-track::-webkit-scrollbar { display: none; }
.pj-track.dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
/* tracks driven by the glide engine (script.js) scroll freely; the
   engine eases them to rest */
.pj-track.is-glide { scroll-snap-type: none; scroll-behavior: auto; -webkit-user-select: none; user-select: none; }
html.custom-cursor .pj-track { cursor: none; }
.pj-slide { flex: 0 0 86%; scroll-snap-align: start; }
.pj-track img, .pj-track video { user-select: none; -webkit-user-drag: none; pointer-events: none; }

.pj-dots { display: flex; justify-content: flex-start; align-items: center; gap: 0; margin-top: var(--space-s); margin-left: -6px; }
.pj-dot {
  width: 24px; height: 24px;
  padding: 8.5px;                 /* 7 px dot, 24 px hit area (WCAG 2.5.8) */
  border: 0;
  border-radius: 50%;
  background: var(--color-line);
  background-clip: content-box;
  cursor: pointer;
  transition: background-color 0.3s;
}
.pj-dot[aria-current="true"] { background-color: var(--color-ink); }
.pj-arrow {
  width: 32px; height: 32px;
  padding: 0; border: 0; background: none;
  color: var(--color-ink-soft);
  font-size: 1rem; line-height: 1;
  cursor: pointer;
  transition: color 0.2s, opacity 0.2s;
}
.pj-arrow:first-child { margin-right: 2px; }
.pj-arrow:last-child { margin-left: 2px; }
.pj-arrow:hover { color: var(--color-ink); }
.pj-arrow:disabled { opacity: 0.3; cursor: default; }
body[data-page="lab"] .pj-arrow { color: var(--color-on-dark-soft); }
body[data-page="lab"] .pj-arrow:hover { color: var(--color-lab-accent); }
.pj-lightbox .pj-arrow { color: #fff; }

/* pause / play control on looping video (WCAG 2.2.2) */
.has-vtoggle { position: relative; }
.vtoggle {
  position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%;
  background: rgba(20, 21, 22, 0.35); color: #fff;
  cursor: pointer; opacity: 0.75;
  transition: opacity 0.2s;
}
.vtoggle:hover, .vtoggle:focus-visible { opacity: 1; }
.vtoggle[hidden] { display: none; }
.vtoggle-fixed { position: fixed; right: var(--gutter); bottom: 1.25rem; z-index: 60; }



/* clickable slides open the lightbox */
.pj-slide.is-zoom { cursor: zoom-in; }
html.custom-cursor .pj-slide.is-zoom { cursor: none; }

/* ---------- ribbon on the grid ---------- */
.pj-ribbon { width: 100%; }
.pj-ribbon-track { gap: var(--grid-gap); }
.pj-ribbon .pj-slide { margin: 0; }
/* slide = one or two grid columns */
.pj-ribbon.span-1 .pj-slide { flex: 0 0 calc((100% - 2 * var(--grid-gap)) / 3); }
.pj-ribbon.span-2 .pj-slide { flex: 0 0 calc((200% - var(--grid-gap)) / 3); }
.pj-ribbon .pj-dots { justify-content: flex-start; }
/* perView: N pictures per screen width */
.pj-ribbon { --rg: var(--grid-gap); }
.pj-ribbon.is-tight { --rg: 1rem; }
.pj-ribbon .pj-ribbon-track { gap: var(--rg); }
.pj-ribbon.per-view .pj-slide { flex: 0 0 calc((100% - (var(--per) - 1) * var(--rg)) / var(--per)); }
.pj-ribbon.dots-center .pj-dots { justify-content: center; margin-left: 0; }
/* all pictures fit: a plain row, nothing to drag */
.pj-ribbon.is-still .pj-track { cursor: default; overflow: hidden; }
/* focus sliders stay on the grid (the project column): one or two
   pictures sharp in the middle, the neighbours faded towards the edges */
.pj-ribbon.is-focus .pj-slide {
  flex: 0 0 calc(var(--fw, 0.4) * var(--tw, 100%));
  transition: opacity 0.7s var(--ease);
}
.pj-ribbon.is-focus .pj-slide.is-dim { opacity: 0.28; }
.pj-ribbon.is-focus .pj-track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
/* the other scrollers fade out on the side where there is more to see */
.pj-ribbon:not(.is-focus) .pj-track { --fl: 0%; --fr: 0%; }
.pj-ribbon.fade-l:not(.is-focus) .pj-track { --fl: 9%; }
.pj-ribbon.fade-r:not(.is-focus) .pj-track { --fr: 9%; }
.pj-ribbon:not(.is-focus):not(.is-still) .pj-track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%);
}
.pj-ribbon-text { margin-top: var(--space-m); max-width: var(--measure); }
.pj-ribbon-text p { color: var(--color-ink-soft); }
/* one shared text under a whole scroller, in two columns */
.pj-notes {
  margin-top: var(--space-m);
  columns: 2;
  column-gap: var(--grid-gap);
}
.pj-notes p {
  break-inside: avoid;
  margin: 0 0 var(--space-s);
  font-size: var(--fs-s);
  color: var(--color-ink-soft);
}
.pj-notes strong { font-weight: 500; color: var(--color-ink); }
/* full-bleed picture or video (edge to edge of the window) */
.pj-bleed-media { width: 100vw; margin-left: calc(50% - 50vw); }
.pj-bleed-media .pj-media { max-height: calc(100vh - var(--banner-h-top)); aspect-ratio: auto !important; }
.pj-bleed-media .pj-media video, .pj-bleed-media .pj-media img { aspect-ratio: 16 / 9; max-height: calc(100vh - var(--banner-h-top)); }
.pj-bleed-text { max-width: var(--measure); margin-top: var(--space-m); }
.pj-bleed-text p { color: var(--color-ink-soft); }
/* stacked drawings beside a photo (no scroller) */
.pj-plan-stack { gap: var(--space-s); }
.pj-plan-item { margin: 0; }
.pj-slide-cap { padding-top: var(--space-s); }
.pj-slide-cap h4 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  margin: 0 0 0.4rem;
}
.pj-slide-cap p { font-size: var(--fs-s); color: var(--color-ink-soft); max-width: var(--measure); margin: 0; }

/* ---------- numbered principles ---------- */
.pj-list-title, .pj-text-title {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin: 0 0 var(--space-m);
}
.pj-text-title { grid-column: 2; }
.pj-list-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-l) var(--space-m);
}
.pj-list-num { display: block; font-size: 0.9rem; color: var(--color-ink-soft); }
.pj-list-grid h5 { font-size: 1.05rem; font-weight: 500; margin: 0.4rem 0 0.5rem; }
.pj-list-grid p { font-size: 0.9rem; color: var(--color-ink-soft); margin: 0; }

/* ---------- lightbox: expands to the center, dark backdrop ---------- */
html.lb-open { overflow: hidden; }
.pj-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 21, 22, 0);
  transition: background 0.45s var(--ease);
}
.pj-lightbox.open { background: rgba(20, 21, 22, 0.38); }
.pj-lb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.5rem var(--gutter) 2rem;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
}
.pj-lightbox.open .pj-lb-stage { opacity: 1; transform: none; }
.pj-lb-track { gap: 2rem; }
.pj-lb-track .pj-slide {
  flex: 0 0 100%;
  height: calc(100vh - 11rem);
  display: flex; align-items: center; justify-content: center;
}
.pj-lb-track .img-slot {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.pj-lb-track .img-slot img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  background: #fff;
  pointer-events: auto;
}
.pj-lightbox .pj-dot { background-color: rgba(255, 255, 255, 0.5); }
.pj-lightbox .pj-dot[aria-current="true"] { background-color: #fff; }
.pj-lb-count {
  text-align: center;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  color: #fff;
  margin: 0.4rem 0 0;
}
.pj-lb-close {
  position: absolute;
  top: 1rem; right: var(--gutter);
  z-index: 1;
  width: 2.6rem; height: 2.6rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--color-ink);
  font-size: 1.5rem; line-height: 1;
  cursor: pointer;
}
.pj-lb-close:hover { background: var(--color-surface); }
.pj-lightbox :focus-visible { outline-color: var(--color-on-dark); }

@media (max-width: 700px) {
  :root { --grid-gap: var(--space-s); }
  .pj-head-grid, .pj-wide.has-text, .pj-text, .pj-row, .pj-row.is-flip,
  .pj-head-body, .pj-feature { grid-template-columns: 1fr; }
  .pj-row > *, .pj-head-body > *, .pj-feature > * { grid-column: 1 !important; grid-row: auto !important; }
  .pj-row .pj-row-media { order: -1; }
  .pj-feature-plans { aspect-ratio: 3 / 4; }
  .pj-ribbon.span-1 .pj-slide { flex-basis: 70%; }
  .pj-ribbon.span-2 .pj-slide { flex-basis: 90%; }
  /* phones: half-size ribbons show about two, the others one and a bit */
  .pj-ribbon.per-view .pj-slide { flex-basis: 88%; }
  .pj-ribbon.is-focus .pj-slide { flex-basis: calc(0.72 * var(--tw, 100%)); }
  .pj-ribbon.per-view.is-many .pj-slide { flex-basis: calc((100% - var(--rg)) / 2.2); }
  .pj-notes { columns: 1; }
  .pj-row:not(.is-flip) .pj-row-media > .pj-media { max-width: none !important; }
  .pj-row:not(.is-flip) .pj-row-text { text-align: left; }
  .pj-meta p { text-align: left; }
  .pj-meta { margin-top: var(--space-s); }
  .pj-head-body { grid-template-columns: 1fr; }
  .pj-pair-wrap.is-wide .pj-pair { flex-direction: column; }
  .pj-pair-wrap.is-wide .pj-cell { flex: none !important; width: 100%; }

  .pj-text p { grid-column: 1; }

  .pj-list-grid { grid-template-columns: 1fr 1fr; }

  .pj-text-title { grid-column: 1; }
  .studio-statement { padding-top: 6vh; }
  #who { padding-top: var(--space-m); }
  .pj-slide { flex-basis: 90%; }
  .pj-lb-track .pj-slide { height: calc(100vh - 12rem); }
}
@media (prefers-reduced-motion: reduce) {
  .pj-fade-slide, .pj-ribbon.is-focus .pj-slide { transition: none; }
  .pj-lb-stage, .pj-lightbox { transition: none; }
  .pj-track { scroll-behavior: auto; }
}

/* Founders block */
.founders {
  max-width: var(--content-max);
  margin: 0 auto;
}
/* centred on the page (Alam, Sep 2026): title above, the two founders
   side by side in the middle of the screen */
.founders {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* on the left, in the same style as "Quiénes somos" */
.founders-title {
  align-self: flex-start;
  font-size: var(--fs-kicker);
  font-weight: 400;
  letter-spacing: var(--ls-kicker);
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-l);
}
.founders-grid {
  width: 100%;
  max-width: 42rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}

.founder p { max-width: var(--measure); }
.founder-portrait img, .founder-portrait .ph {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.founder h3 { font-size: var(--fs-l); margin-top: var(--space-m); }
.founder .founder-role {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-s);
}
.founder p { color: var(--color-ink-soft); max-width: 34em; }

/* ==========================================================================
   PROFESSIONAL SERVICES — overview grid (dark, technical)
   ========================================================================== */
.section-services {
  background: var(--color-graphite);
  color: var(--color-on-dark);
}
.section-services .section-kicker,
.section-services .section-lede { color: var(--color-on-dark-soft); }

.services-list {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* never wider than the column */
  gap: 1px;                       /* hairline grid */
  background: var(--color-line-dark);
  border: 1px solid var(--color-line-dark);
}
.service {
  background: var(--color-graphite);
  padding: var(--space-l) var(--space-m);
  display: flex;
  flex-direction: column;
  transition: background 0.4s;
  cursor: pointer;
  /* near-squares of equal height (the tallest text sets the row), so the
     three buttons line up on the bottom edge */
  min-height: 27rem;
  min-width: 0;
}
.service:focus-visible { outline: 2px solid var(--color-on-dark); outline-offset: -4px; }
.service:hover { background: var(--color-graphite-2); }
.service h3 { font-size: var(--fs-l); }
.service > p { color: var(--color-on-dark-soft); max-width: 32em; }

/* minimalist per-service canvas animation */
.service-anim {
  width: 100%;
  flex: 1 1 auto;
  min-height: 5rem;          /* shrinks so the button always sits on the card's bottom edge */
  margin: var(--space-s) 0;
}
.service-anim canvas { width: 100%; height: 100%; display: block; }

.service-cta {
  margin-top: auto;
  align-self: flex-start;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-on-dark);
  border: 1px solid var(--color-on-dark);
  padding: 0.7rem 1.4rem;
  transition: background 0.3s, color 0.3s;
}
.service-cta:hover, .service:hover .service-cta { background: var(--color-on-dark); color: var(--color-graphite); }

/* ==========================================================================
   Service panel — a card expands (clip-path) into a light, full panel
   with the dossier content. Built by openService() in script.js.
   ========================================================================== */
html.svc-open { overflow: hidden; }
.svc-panel {
  position: fixed;
  inset: var(--banner-h-top) 0 0 0;
  z-index: 90;
  background: #ffffff;
  color: var(--color-ink);
  clip-path: inset(0px 0px 0px 0px);
  transition: clip-path 0.75s var(--ease);
}
.svc-p-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.4s ease 0.25s;
}
.svc-panel.open .svc-p-scroll { opacity: 1; }
.svc-p-close {
  position: absolute;
  top: var(--space-s); right: var(--gutter);
  z-index: 2;
  display: flex; align-items: center; gap: 0.6rem;
  background: none; border: 0; padding: 0.3rem 0;
  font: inherit; font-size: var(--fs-small); color: var(--color-ink);
  cursor: pointer;
}
.svc-p-close span[aria-hidden] { font-size: 1.6rem; line-height: 1; }
.svc-p-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
  display: flex; flex-direction: column; gap: var(--space-xl);
}
/* the same invisible 3-column grid as the studio */
.svc-p-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m) var(--grid-gap);
  align-items: end;
}
.svc-p-row > .svc-p-col { grid-column: 1; }
.svc-p-row > .svc-p-media { grid-column: 2 / 4; margin: 0; }
.svc-p-row > .svc-p-media.is-narrow { grid-column: 3; }
.svc-p-head > .svc-p-media.is-narrow { grid-column: 2 / 4; justify-self: end; width: calc((100% - var(--grid-gap)) / 2); }
.svc-p-row.is-flip > .svc-p-media { grid-column: 1 / 3; grid-row: 1; }
.svc-p-row.is-flip > .svc-p-col { grid-column: 3; }
.svc-p-title { font-size: var(--fs-title); margin: 0 0 var(--space-s); }
.svc-p-tagline { font-size: var(--fs-lede); line-height: 1.45; color: var(--color-ink-soft); margin: 0; }
.svc-p-h { font-size: var(--fs-l); font-weight: 500; margin: 0 0 var(--space-m); }
.svc-p-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.svc-p-steps li {
  display: grid;
  grid-template-columns: 4rem 9rem 1fr 2fr;
  gap: var(--space-s);
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--color-line);
}
.svc-p-num, .svc-p-verb { font-size: var(--fs-s); color: var(--color-ink-soft); }
.svc-p-steps strong { font-weight: 500; }
.svc-p-steps p { margin: 0; color: var(--color-ink-soft); }
.svc-p-note { margin: var(--space-m) 0 0; color: var(--color-ink-soft); font-style: italic; max-width: 44em; }
.svc-p-packages { display: flex; flex-direction: column; gap: var(--space-xl); }
.svc-p-packages > .svc-p-h { margin-bottom: 0; }
.svc-p-pack { align-items: start; }
.svc-p-packname { font-size: var(--fs-m); font-weight: 500; margin: 0 0 var(--space-s); }
.svc-p-items { margin: 0; }
.svc-p-items dt { font-weight: 500; margin-top: 0.8rem; }
.svc-p-items dd { margin: 0.15rem 0 0; font-size: var(--fs-s); color: var(--color-ink-soft); max-width: var(--measure); }
.svc-p-outcome { margin: var(--space-m) 0 0; font-size: var(--fs-s); font-style: italic; color: var(--color-ink); }
.svc-p-foot { border-top: 1px solid var(--color-line); padding-top: var(--space-l); }
.svc-p-closing { font-size: var(--fs-lede); margin: 0 0 var(--space-m); }
.svc-p-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.svc-p-actions .sd-cta { margin-top: 0; }
.sd-cta.is-quiet { border-color: var(--color-line); }
@media (max-width: 900px) {
  .services-list { grid-template-columns: 1fr; }
  .service { min-height: 0; }
  .service-anim { flex: none; height: 11rem; }
}
@media (max-width: 700px) {
  .svc-p-row { grid-template-columns: 1fr; }
  .svc-p-row > * { grid-column: 1 !important; grid-row: auto !important; width: auto !important; }
  .svc-p-row > .svc-p-media { order: -1; }
  .svc-p-steps li { grid-template-columns: 3rem 1fr; }
  .svc-p-steps li p { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-panel, .svc-p-scroll { transition: none; }
}

/* ==========================================================================
   PROFESSIONAL SERVICES — detail sections (scroll below the grid)
   ========================================================================== */
.service-detail {
  padding: var(--space-xl) var(--gutter);
  border-top: 1px solid var(--color-line);
}
.service-detail-inner { max-width: var(--content-max); margin: 0 auto; }
.service-detail h2 { font-size: var(--fs-title); }
.service-detail .sd-body {
  font-size: var(--fs-lede);
  color: var(--color-ink-soft);
  max-width: var(--text-max);
  margin-bottom: var(--space-l);
}
.sd-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--space-m);
}
.sd-figure img, .sd-figure .ph {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.sd-figure figcaption {
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
  margin-top: var(--space-xs);
  letter-spacing: 0.03em;
}
.sd-cta {
  display: inline-block;
  margin-top: var(--space-l);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  padding: 0.7rem 1.4rem;
  transition: background 0.3s, color 0.3s;
}
.sd-cta:hover { background: var(--color-ink); color: var(--color-bg); }

/* ==========================================================================
   ARQTK LAB — dark, expressive; the ONLY place the accent appears
   ========================================================================== */
.section-lab {
  background: var(--color-graphite);
  color: var(--color-on-dark);
}
.lab-inner { max-width: var(--content-max); margin: 0 auto; }
.section-lab .section-title,
body[data-page="lab"] .page-head .section-title { color: var(--color-lab-accent); }
.lab-kicker { color: var(--color-lab-accent); }
.section-lab .section-lede { color: var(--color-on-dark-soft); }

/* LAB content blocks — lots of breathing room by design */
.lab-block {
  padding: var(--space-xxl) var(--gutter);
  border-top: 1px solid var(--color-line-dark);
  background: var(--color-graphite);
  color: var(--color-on-dark);
}
.lab-block-inner { max-width: var(--content-max); margin: 0 auto; }
.lab-block .lb-kicker {
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--color-lab-accent);
  margin-bottom: var(--space-s);
}
.lab-block h2 { font-size: var(--fs-title); }
.lab-block .lb-body {
  font-size: var(--fs-lede);
  color: var(--color-on-dark-soft);
  max-width: var(--text-max);
}
.lab-block .lb-media { margin: var(--space-l) 0 var(--space-s); }
.lab-block .lb-media img, .lab-block .lb-media .ph {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.lab-block .lb-media .ph {
  background-color: var(--color-graphite-2);
  color: var(--color-on-dark-soft);
  border-color: var(--color-line-dark);
}
/* LAB reads sideways (desktop): one row of full-screen panels moved by
   the vertical scroll (script.js · setupLabHorizontal) */
.lab-h { position: relative; }
.lab-h-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.lab-h-track { display: flex; height: 100%; width: max-content; will-change: transform; }
.lab-horizontal .lab-h-track > .page-head,
.lab-horizontal #lab-blocks > .lab-block {
  flex: 0 0 auto;
  width: 100vw;
  height: 100vh;
  padding: calc(var(--banner-h-top) + var(--space-m)) var(--gutter) 4.5rem;  /* room for the guide */
  display: flex;
  align-items: center;
  border-top: 0;
  border-left: 1px solid var(--color-line-dark);
}
.lab-horizontal .lab-h-track > .page-head { border-left: 0; }
.lab-horizontal #lab-blocks { display: flex; height: 100%; }
.lab-horizontal .lab-inner, .lab-horizontal .lab-block-inner { width: 100%; }
/* panel layout (desktop and phone): text column + media on two */
.lab-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: var(--grid-gap);
  row-gap: var(--space-m);
  align-items: center;
  max-width: var(--page-max);
  margin: 0 auto;
}
.lab-panel > .section-head, .lab-panel > .lab-text { grid-column: 1; margin: 0; }
.lab-panel > .lb-media, .lab-panel > .lab-vscroll-wrap { grid-column: 2; margin: 0; min-width: 0; }
.lab-panel .lb-media video, .lab-panel .lb-media img, .lab-panel .lb-media .ph {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
}
.lab-panel h2 { font-size: var(--fs-h2); }
.lab-panel .lb-kicker { font-size: var(--fs-xs); }
.lab-panel .lb-body { font-size: var(--fs-m); line-height: 1.6; color: var(--color-on-dark-soft); max-width: var(--measure); }
.lab-location { font-size: var(--fs-body); color: var(--color-on-dark); margin: 0 0 var(--space-m); }
.lab-panel > .section-head .section-lede { font-size: var(--fs-lede); }
.lab-horizontal .lab-h-track > .page-head .lab-inner { width: 100%; }

/* study: vertical scroller of the solutions, perpendicular to the page */
.lab-vscroll-wrap { position: relative; display: flex; gap: var(--space-s); align-items: center; }
.lab-vscroll {
  flex: 1 1 auto;
  height: calc(100vh - var(--banner-h-top) - 10rem);
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.lab-vscroll::-webkit-scrollbar { display: none; }
.lab-vslide {
  height: 100%;
  margin: 0;
  scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center;
}
.lab-vimgs { flex: 1 1 auto; min-height: 0; display: flex; gap: var(--space-s); }
.lab-vimgs .img-slot { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; }
.lab-vimgs img, .lab-vimgs .ph { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.lab-vimgs .ph { aspect-ratio: 16 / 9; height: auto; align-self: center; }
.lab-vimgs video { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.lab-vsteps { margin: var(--space-s) 0 0; padding-left: 1.6rem; max-width: var(--measure); }
.lab-vsteps li { margin-bottom: 0.5rem; padding-left: 0.3rem; }
.lab-vsteps li::marker { color: var(--color-lab-accent); }
/* text-only intro panel */
.lab-panel.is-solo { grid-template-columns: minmax(0, 1fr); }
.lab-panel.is-solo > .section-head { max-width: 46rem; }
.lab-horizontal .lab-h-track > .page-head { width: 62vw; }
.lab-panel.is-solo .section-title { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.lab-vslide figcaption {
  flex: 0 0 auto;
  display: grid; grid-template-columns: 2.6rem 1fr; column-gap: var(--space-xs);
  padding-top: var(--space-s);
  color: var(--color-on-dark-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.lab-vbody { grid-column: 2; }
.lab-vbody p { margin: 0.3rem 0 0; max-width: var(--measure); }
.lab-vslide figcaption strong, .lab-hslide figcaption strong { color: var(--color-on-dark); font-weight: 500; font-size: var(--fs-m); }
.lab-vsub { display: block; margin-top: var(--space-m); }
.lab-vnum { color: var(--color-lab-accent); grid-column: 1; grid-row: 1; }
.lab-vslide-text figcaption { padding-top: 0; }
.lab-vslide-text .lab-vbody { font-size: 1em; }
.lab-vslide-text ul, .lab-hslide-text ul { margin: var(--space-s) 0; padding-left: 1.2rem; max-width: var(--measure); }
.lab-vslide-text li { margin-bottom: 0.45rem; }
.lab-vside { display: flex; flex-direction: column; align-items: center; }
.lab-vhint {
  grid-column: 2; margin: 0;
  font-size: 0.9rem; color: var(--color-on-dark-soft);
  transition: opacity 0.6s;
}
.lab-vhint.is-done { opacity: 0.35; }

/* LAB: vertical page; each study reads sideways in its own scroller */
body[data-page="lab"] .lab-block { padding: var(--space-xl) var(--gutter); }
body[data-page="lab"] .page-head { padding-bottom: var(--space-l); }
.lab-hscroll { grid-column: 2; min-width: 0; }
.lab-htrack { gap: var(--space-m); }
.lab-htrack .lab-hslide {
  flex: 0 0 100%;
  height: min(74vh, 44rem);
  margin: 0;
  display: flex; flex-direction: column;
}
.lab-hslide .lab-vimgs { flex: 1 1 auto; min-height: 0; }
.lab-hslide-text { justify-content: center; }
.lab-hslide-text figcaption { overflow-y: auto; }
.lab-hfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-m); margin-top: var(--space-s); }
.lab-hfoot .pj-dots { margin-top: 0; }
.lab-hfoot .lab-vhint { grid-column: auto; }
body[data-page="lab"] .pj-dot { background-color: rgba(169, 172, 168, 0.35); }
body[data-page="lab"] .pj-dot[aria-current="true"] { background-color: var(--color-lab-accent); }


/* LAB section 4 (figures), compact: header + one horizontal scroller.
   Slide = the 3-column grid: image on 2/3, step text + legend on 1/3
   (legend top-aligned under the text); wide strips take the full width
   with the text and legend in a row under them. The PNGs keep their own
   #1E1E1E ground: no frame, shadow or filter. No zoom. */
.lab-figs { max-width: var(--page-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-m); }
.lab-figs-head { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.lab-figs-head > .lab-text { grid-column: 1 / 3; }
.lab-figs-head .lb-body { max-width: var(--measure); }
.lab-ftrack { gap: var(--grid-gap); align-items: stretch; }
.lab-fslide {
  flex: 0 0 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-s);
  align-items: start;
  height: min(68vh, 40rem);
}
.lab-fslide-media { grid-column: 1 / 3; height: 100%; min-height: 0; }
.lab-fslide-media .img-slot { height: 100%; display: flex; align-items: flex-start; }
.lab-fslide-media img, .lab-fslide-media .ph {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; object-position: left top; display: block;
}
.lab-fslide-media .ph { width: 100%; }
.lab-fslide-media .img-slot { background: none; }
.lab-fslide-side { grid-column: 3; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.lab-fslide-side h3, .lab-ftext-group h3 { font-size: var(--fs-m); font-weight: 500; color: var(--color-on-dark); margin: 0; }
.lab-fslide-side p, .lab-ftext-group p { color: var(--color-on-dark-soft); margin: 0 0 0.4rem; max-width: var(--measure); }
.lab-fslide-side .lab-vnum, .lab-ftext-group .lab-vnum { display: block; }
.lab-flegend { display: block; align-self: flex-start; max-width: 100%; width: auto; height: auto; margin-top: var(--space-s); }
/* full-width strips (05, 06): strip on top, text + legend in a row below */
/* the strip takes whatever height the text row leaves (no overlap) */
.lab-fslide.is-wide { grid-template-rows: minmax(0, 1fr) auto; }
.lab-fslide.is-wide .lab-fslide-media { grid-column: 1 / -1; grid-row: 1; height: 100%; }
.lab-fslide.is-wide .lab-fslide-side { grid-row: 2; }
.lab-fslide.is-wide .lab-fslide-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
.lab-fslide.is-wide .lab-fslide-side > .lab-flegend { grid-column: 1; grid-row: 1 / span 4; margin-top: 0; }
.lab-fslide.is-wide .lab-fslide-side > :not(.lab-flegend) { grid-column: 2 / 4; }
/* final text slide */
.lab-fslide.is-text { align-content: center; }
.lab-fslide-text { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-m); }
.lab-ftext-group ul { margin: 0; padding-left: 1.2rem; color: var(--color-on-dark-soft); }
.lab-ftext-group li { margin-bottom: 0.35rem; }
@media (max-width: 700px) {
  .lab-figs-head, .lab-fslide, .lab-fslide.is-wide .lab-fslide-side, .lab-fslide-text { grid-template-columns: 1fr; }
  .lab-figs-head > *, .lab-fslide > *, .lab-fslide-side > *, .lab-fslide-text > * { grid-column: 1 !important; grid-row: auto !important; }
  .lab-fslide { height: auto; }
  .lab-fslide-media { height: auto; }
  .lab-ftrack { align-items: flex-start; }
  .lab-hfoot { flex-wrap: wrap; row-gap: 0.2rem; }
  .lab-hfoot .lab-vhint { flex: 1 0 100%; }
}

/* LAB films: the video fills the screen, darkened (40 %), with the
   kicker, title, subtitle and button on top. Its top and bottom melt
   into the graphite page, so no edge or line shows between sections.
   The button fades in the study below. */
body[data-page="lab"] .lab-block { border-top: 0; }
body[data-page="lab"] .lab-block.lab-film { padding: 0; }
.lab-film-stage {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: var(--color-graphite);
}
.lab-film-media { position: absolute; inset: 0; }
.lab-film-media .img-slot,
.lab-film-media video,
.lab-film-media img,
.lab-film-media .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-film-media .ph { border: none; background-color: var(--color-graphite-2); color: var(--color-on-dark-soft); }
/* 40 % darker */
.lab-film-media::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
/* top and bottom fade into the page colour */
.lab-film-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    var(--color-graphite) 0%, rgba(35, 37, 38, 0) 22%,
    rgba(35, 37, 38, 0) 45%, rgba(35, 37, 38, 0.75) 78%, var(--color-graphite) 100%);
  pointer-events: none;
}
.lab-film-over {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 var(--edge) var(--space-xl);
}
.lab-film-inner { max-width: var(--page-max); }
.lab-film .lb-kicker { font-size: var(--fs-xs); }
.lab-film h2 {
  font-size: clamp(2.2rem, 4.8vw, 4.4rem);
  color: var(--color-on-dark);
  max-width: 16em;
  margin-bottom: var(--space-s);
}
.lab-film-sub { font-size: var(--fs-lede); color: rgba(236, 234, 230, 0.86); max-width: 36em; margin: 0 0 var(--space-s); }
.lab-film-toggle {
  display: inline-flex; align-items: center; gap: 0.9rem;
  margin-top: var(--space-m);
  font: inherit; font-size: var(--fs-small);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-lab-accent);
  background: rgba(20, 21, 22, 0.25);
  border: 1px solid var(--color-lab-accent);
  padding: 0.8rem 1.3rem;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.lab-film-toggle:hover { background: var(--color-lab-accent); color: var(--color-graphite); }
.lab-film-plus { position: relative; width: 0.7rem; height: 0.7rem; transition: transform 0.4s var(--ease); }
.lab-film-plus::before, .lab-film-plus::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: currentColor;
}
.lab-film-plus::after { transform: rotate(90deg); }
.lab-film.is-open .lab-film-plus { transform: rotate(45deg); }
/* the study opens softly: it grows, then fades and rises in */
.lab-film-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.9s var(--ease), opacity 0.6s ease;
}
.lab-film.is-open .lab-film-more {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.9s var(--ease), opacity 1.1s ease 0.25s;
}
.lab-film-clip { min-height: 0; overflow: hidden; }
.lab-study-body {
  padding: var(--space-m) var(--edge) var(--space-xxl);
  display: flex; flex-direction: column; gap: var(--space-xl);
  transform: translateY(1.2rem);
  transition: transform 1.1s var(--ease) 0.2s;
}
.lab-film.is-open .lab-study-body { transform: none; }

/* ---- study template ----
   hierarchy: film title (h2, above) → opening text (large, light) with
   key figures (green numbers) → chapters: green number + title (h3) →
   body text (soft) → captions (small) */
.lab-lead {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  row-gap: var(--space-m);
  align-items: start;
}
.lab-lead-text { grid-column: 1 / 3; }
.lab-lead-text p {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.5;
  color: var(--color-on-dark);
  max-width: 34em;
  margin: 0 0 var(--space-s);
}
.lab-lead-text p + p { font-size: var(--fs-m); color: var(--color-on-dark-soft); }
.lab-facts { grid-column: 3; margin: 0; display: flex; flex-direction: column; gap: var(--space-m); }
.lab-fact dt {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-lab-accent);
  font-variant-numeric: tabular-nums;
}
.lab-fact dd { margin: 0.3rem 0 0; font-size: var(--fs-s); color: var(--color-on-dark-soft); max-width: 22em; }

.lab-ch-head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: var(--space-m); }
.lab-ch-num { font-size: var(--fs-s); letter-spacing: 0.12em; color: var(--color-lab-accent); font-variant-numeric: tabular-nums; }
.lab-ch h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 500; color: var(--color-on-dark); margin: 0; }
.lab-ch-intro { font-size: var(--fs-m); line-height: 1.6; color: var(--color-on-dark-soft); max-width: var(--measure); margin: 0 0 var(--space-l); }
.lab-ch-body { color: var(--color-on-dark-soft); max-width: var(--measure); }
.lab-ch-body p { margin: 0 0 0.8rem; }
.lab-ch-body ul { padding-left: 1.2rem; margin: 0 0 0.8rem; }
.lab-ch-body li { margin-bottom: 0.4rem; }
.lab-ch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--grid-gap); }
.lab-ch.is-card .lab-ch-head { margin-bottom: var(--space-s); }
.lab-vsteps { margin: 0; padding-left: 1.6rem; }
.lab-vsteps li { margin-bottom: 0.5rem; padding-left: 0.3rem; }
.lab-vsteps li::marker { color: var(--color-lab-accent); }
.lab-vnum { color: var(--color-lab-accent); font-variant-numeric: tabular-nums; }

/* pictures with their description, changed by sliding */
.lab-slider-track { gap: var(--grid-gap); }
.lab-slide {
  flex: 0 0 100%;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: var(--grid-gap);
  align-items: end;
}
.lab-slide figcaption { color: var(--color-on-dark-soft); padding-bottom: 0.4rem; }
.lab-slide figcaption .lab-vnum { display: block; margin-bottom: 0.3rem; }
.lab-slide figcaption strong { display: block; color: var(--color-on-dark); font-weight: 500; font-size: var(--fs-m); margin-bottom: 0.4rem; }
.lab-slide figcaption p { margin: 0; max-width: 24em; }
.lab-simgs img, .lab-simgs video, .lab-simgs .ph { width: 100%; height: auto; display: block; }
.lab-simgs .ph { aspect-ratio: 16 / 9; }
.lab-slider .pj-dots { justify-content: flex-start; }
body[data-page="lab"] .pj-dot { background-color: rgba(169, 172, 168, 0.35); }
body[data-page="lab"] .pj-dot[aria-current="true"] { background-color: var(--color-lab-accent); }

/* figures that change by sliding (Rio) */
.lab-ftrack .lab-fslide { flex: 0 0 100%; margin: 0; height: min(62vh, 38rem); }
.lab-fwrap .pj-dots { justify-content: flex-start; }
.lab-fafter { margin-top: var(--space-xl); }
.lab-fafter .lab-fslide { height: auto; }
@media (max-width: 700px) { .lab-ftrack .lab-fslide { height: auto; } }
/* figures read top to bottom */
.lab-fstack { display: flex; flex-direction: column; gap: var(--space-xl); }
.lab-fstack .lab-fslide { height: min(60vh, 36rem); }
.lab-fslide-side h4 { font-size: var(--fs-m); font-weight: 500; color: var(--color-on-dark); margin: 0.2rem 0 0.4rem; }
.lab-ftext-group h4 { font-size: var(--fs-m); font-weight: 500; color: var(--color-on-dark); margin: 0.2rem 0 0.4rem; }

@media (max-width: 700px) {
  .lab-film-over { padding-bottom: var(--space-l); }
  .lab-lead, .lab-ch-grid, .lab-slide { grid-template-columns: 1fr; }
  .lab-lead-text, .lab-facts { grid-column: 1; }
  .lab-facts { flex-direction: row; flex-wrap: wrap; gap: var(--space-m) var(--space-l); }
  .lab-slide { row-gap: var(--space-s); }
  .lab-fstack .lab-fslide { height: auto; }
}

/* LAB start: full-bleed video (A00, black and white) with title, text
   and the scroll cue, placed like the Professional services hero; its
   bottom melts into the page */
.lab-hero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  background: var(--color-graphite);
  color: var(--color-on-dark);
  overflow: hidden;
}
.lab-hero-media { position: absolute; inset: 0; }
.lab-hero-media .img-slot, .lab-hero-media video, .lab-hero-media img, .lab-hero-media .ph {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* the opening video in colour (Alam, Sep 2026) */
.lab-hero-media .ph { border: none; background-color: var(--color-graphite-2); color: var(--color-on-dark-soft); }
.lab-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--color-graphite) 0%, rgba(35, 37, 38, 0.7) 30%, rgba(20, 21, 22, 0.35) 65%, rgba(20, 21, 22, 0.15) 100%);
  pointer-events: none;
}
.lab-hero-over {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 var(--edge) var(--space-xl);
}
.lab-hero .services-hero-head .section-title { color: var(--color-on-dark); }
.lab-hero-cue { margin-top: 0; color: rgba(236, 234, 230, 0.8); }
.lab-hero-cue .scroll-hint-line { background: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .lab-film-more, .lab-film-plus, .lab-study-body { transition: none; }
}

/* LAB navigation guide (bottom bar, fills as you scroll down) */
.lab-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  padding: 1.6rem var(--edge) 0.9rem;
  /* soft graphite ground so the guide never sits on top of text */
  background: linear-gradient(to top, rgba(35, 37, 38, 0.96) 55%, rgba(35, 37, 38, 0));
  color: var(--color-on-dark);
  font-size: var(--fs-s);
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s;
}
.lab-nav.is-on { opacity: 1; pointer-events: auto; }
/* the cue has the landing's style: small caps + an animated line */
.lab-nav-hint { transition: opacity 0.6s; }
.lab-nav .scroll-hint { margin: 0; align-items: center; }
.lab-nav .scroll-hint-line { height: 1.8rem; }
.lab-nav.is-moved .lab-nav-hint { opacity: 0.45; }
.lab-nav-ctrl { display: flex; align-items: center; gap: var(--space-s); }
.lab-nav-count { min-width: 5.5em; text-align: center; letter-spacing: 0.08em; }
.lab-nav-btn {
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--color-on-dark-soft); border-radius: 50%;
  background: none; color: var(--color-on-dark);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.lab-nav-btn:hover { border-color: var(--color-lab-accent); color: var(--color-lab-accent); }
.lab-nav-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(169, 172, 168, 0.2); }
.lab-nav-bar span { display: block; height: 100%; width: 0; background: var(--color-lab-accent); }
.lab-vdots { display: flex; flex-direction: column; gap: 2px; }
.lab-vdots .pj-dot { background-color: rgba(169, 172, 168, 0.35); }
.lab-vdots .pj-dot[aria-current="true"] { background-color: var(--color-lab-accent); }
@media (max-width: 700px) {
  .lab-panel { grid-template-columns: 1fr; }
  .lab-panel > * { grid-column: 1 !important; }
  .lab-vscroll { height: 75vh; }
  .lab-hscroll { grid-column: 1; }
  .lab-htrack .lab-hslide { height: 70vh; }
  .lab-nav-hint { display: none; }
  .lab-vhint { grid-column: 1; }
}

#lab-canvas { height: calc(100vh - var(--banner-h-top) - 8rem); }

#lab-canvas {
  width: 100%;
  height: clamp(18rem, 55vh, 32rem);
  display: block;
  border: 1px solid var(--color-line-dark);
}
.lab-canvas-caption {
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  color: var(--color-on-dark-soft);
  margin-top: var(--space-xs);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.section-contact {
  border-top: 1px solid var(--color-line);
  padding-bottom: calc(var(--space-xl) + var(--banner-h-bottom));
}
body[data-page="lab"] .section-contact {
  border-top-color: var(--color-line-dark);
  color: var(--color-on-dark);
}
body[data-page="lab"] .section-contact .contact-info p { color: var(--color-on-dark-soft); }
.contact-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-l);
}
.contact-info p { color: var(--color-ink-soft); }
.contact-info .contact-lines { margin-top: var(--space-m); display: grid; gap: 0.4rem; }
.contact-info a { text-decoration: none; border-bottom: 1px solid var(--color-line); }
.contact-info a:hover { border-bottom-color: currentColor; }

/* the two doors on the contact page (hire the studio / join the team) */
.contact-options {
  max-width: var(--content-max);
  margin: 0 auto var(--space-l);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}
.contact-option {
  border: 1px solid var(--color-line);
  padding: var(--space-m);
}
.contact-option h2 { font-size: var(--fs-l); }
.contact-option p { color: var(--color-ink-soft); margin: 0; }
.contact-option a { color: var(--color-ink); }

/* subtle wireframe social icons (bottom-left of the contact info) */
.contact-social { display: flex; gap: 0.9rem; margin-top: var(--space-m); }
.contact-info a.social-icon {
  padding: 5px;               /* 20 px icon, 30 px hit area */
  margin: -5px;
  display: inline-flex;
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  color: var(--color-ink-soft);
  border-bottom: none;
  transition: color 0.3s;
}
.contact-info a.social-icon:hover { color: var(--color-ink); }
body[data-page="lab"] .contact-info a.social-icon { color: var(--color-on-dark-soft); }
body[data-page="lab"] .contact-info a.social-icon:hover { color: var(--color-lab-accent); }
.social-icon svg { width: 100%; height: 100%; }

.contact-form { display: grid; gap: var(--space-s); align-content: start; }
.contact-form label {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  display: grid;
  gap: 0.4rem;
}
body[data-page="lab"] .contact-form label { color: var(--color-on-dark-soft); }
.contact-form input,
.contact-form textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-ink-soft);
  padding: 0.6rem 0;
  border-radius: 0;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-bottom-color: currentColor; }
.contact-form textarea { min-height: 8rem; resize: vertical; }
.contact-form button {
  font: inherit;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-graphite);
  color: var(--color-on-dark);
  border: 1px solid var(--color-graphite);
  padding: 0.9rem 2rem;
  cursor: pointer;
  justify-self: start;
  transition: background 0.3s, color 0.3s;
}
.contact-form button:hover { background: transparent; color: var(--color-graphite); }
body[data-page="lab"] .contact-form button {
  background: var(--color-lab-accent);
  border-color: var(--color-lab-accent);
  color: var(--color-graphite);
}
body[data-page="lab"] .contact-form button:hover { background: transparent; color: var(--color-lab-accent); }
.contact-form button[disabled] { opacity: 0.5; cursor: wait; }
.form-status { font-size: var(--fs-small); min-height: 1.2em; margin: 0; }
.form-layer { font-size: var(--fs-small); color: var(--color-ink-soft); margin: 0; }
.form-consent { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; letter-spacing: 0 !important; text-transform: none !important; }
.form-consent input { width: 18px !important; height: 18px; flex: 0 0 18px; margin-top: 0.1rem; accent-color: var(--color-ink); }
.form-consent a { color: inherit; }

/* ==========================================================================
   Site footer (every page) + legal page
   ========================================================================== */
.site-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
  padding: 0.6rem var(--gutter);
}
body[data-page="landing"] .site-footer, body[data-page="landing"] .cta-band { position: relative; z-index: 1; }
.site-footer-inner {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-s);
}
.site-footer nav { display: flex; flex-wrap: wrap; column-gap: var(--space-m); }
.site-footer a { color: inherit; text-decoration: none; display: inline-block; padding: 0.3rem 0; }
.site-footer-inner > span { padding: 0.3rem 0; }

.site-footer-inner { align-items: center; row-gap: 0; }

/* services FAQ: quiet list on the light page ground */
.svc-faq { background: var(--color-bg); }
.svc-faq-inner {
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap);
}
.svc-faq-title { grid-column: 1; font-size: var(--fs-l); font-weight: 500; margin: 0; }
.svc-faq-list { grid-column: 2 / 4; border-top: 1px solid var(--color-line); }
.svc-faq-list details { border-bottom: 1px solid var(--color-line); }
.svc-faq-list summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: var(--space-m);
  padding: 0.9rem 0; font-weight: 500;
}
.svc-faq-list summary::-webkit-details-marker { display: none; }
.svc-faq-list summary::after { content: "+"; color: var(--color-ink-soft); font-weight: 400; }
.svc-faq-list details[open] summary::after { content: "\2212"; }
.svc-faq-list details p { color: var(--color-ink-soft); max-width: var(--measure); margin: 0 0 1rem; }
.site-footer a:hover { color: var(--color-ink); }
body[data-page="landing"] .site-footer { background: #f7f4eb; border-top-color: var(--color-line); }
body[data-page="lab"] .site-footer, body[data-page="services"] .site-footer,
body[data-page="studio"] .site-footer {
  background: var(--color-graphite); border-top-color: var(--color-line-dark); color: var(--color-on-dark-soft);
}
body[data-page="lab"] .site-footer a:hover, body[data-page="services"] .site-footer a:hover,
body[data-page="studio"] .site-footer a:hover { color: var(--color-on-dark); }
/* LAB: the band and the footer in dark gray, darker than the page */
body[data-page="lab"] .cta-band, body[data-page="lab"] .site-footer {
  background: #151617;
  color: var(--color-on-dark);
  border-top: 0;
}
body[data-page="lab"] .cta-band p, body[data-page="lab"] .site-footer { color: var(--color-on-dark-soft); }
body[data-page="lab"] .site-footer a:hover { color: var(--color-on-dark); }
.legal-body { max-width: var(--content-max); margin: 0 auto; }
.legal-sec { max-width: var(--measure); padding-top: var(--space-l); scroll-margin-top: calc(var(--banner-h-top) + var(--space-m)); }
.legal-sec h2 { font-size: var(--fs-l); }
.legal-sec h3 { font-size: var(--fs-body); font-weight: 500; margin: var(--space-m) 0 var(--space-xs); }
.legal-sec p { color: var(--color-ink-soft); }
.legal-dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.5rem var(--space-m); margin: var(--space-s) 0; }
.legal-dl dt { font-weight: 500; }
.legal-dl dd { margin: 0; color: var(--color-ink-soft); }
@media (max-width: 700px) { .legal-dl { grid-template-columns: 1fr; } .legal-dl dd { margin-bottom: 0.6rem; } }
.form-status.ok { color: #3e7d32; }
.form-status.error { color: #b3452f; }
body[data-page="lab"] .form-status.ok { color: var(--color-lab-accent); }

/* ==========================================================================
   Image placeholders — shown until the real file exists in /images.
   They display the required filename + aspect ratio.
   ========================================================================== */
.ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  background:
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(127,127,127,0.06) 12px 24px),
    var(--color-surface);
  border: 1px dashed var(--color-ink-soft);
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-align: center;
  padding: var(--space-s);
  min-height: 6rem;
}
.ph code { font-family: inherit; font-weight: 700; overflow-wrap: anywhere; }
.ph { min-width: 0; overflow: hidden; }

/* ==========================================================================
   Video support — .mp4/.webm (and GIFs) behave exactly like images
   wherever media appears; loops are set by script.js
   ========================================================================== */
video { display: block; max-width: 100%; }
.project-cover video, .project-detail-media video, .sd-figure video {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}
.lb-media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.founder-portrait video {
  width: 100%; max-width: 22rem; aspect-ratio: 3 / 4;
  object-fit: cover; filter: grayscale(35%);
}
.landing-bg video, .studio-intro-bg video { width: 100%; height: 100%; object-fit: cover; }
/* full-screen background media follows the window size, not a fixed ratio */
.landing-bg .img-slot, .studio-intro-bg .img-slot { width: 100%; height: 100%; }

/* ==========================================================================
   Reveal-on-scroll (subtle fade; disabled under reduced motion)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ==========================================================================
   Reduced motion — kill all non-essential animation
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .landing-bg { transition: none; }
  .project-cover img { transition: none; }
  .scroll-hint-line { animation: none; }
  .studio-intro-bg { transition: none; }
  #cursor { display: none !important; }
  html.custom-cursor, html.custom-cursor a, html.custom-cursor button,
  html.custom-cursor input, html.custom-cursor textarea, html.custom-cursor label {
    cursor: auto;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .services-list { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .statement-inner { grid-template-columns: 1fr; }
  .project-detail-row,
  .project-detail-row:nth-child(even) { grid-template-columns: 1fr; }
  .project-detail-row:nth-child(even) .project-detail-media { order: 1; }
  .project-detail-row:nth-child(even) .project-detail-text  { order: 2; text-align: left; }
}

/* ==========================================================================
   Media fade-in (blur-up style): media start invisible and fade in
   over 0.4s once loaded (script.js adds .loaded). Containers keep
   their aspect-ratio, so there is no layout shift (CLS ≈ 0).
   ========================================================================== */
.img-slot img, .img-slot video { opacity: 0; transition: opacity 0.4s ease-out; }
.img-slot img.loaded, .img-slot video.loaded { opacity: 1; }
/* studio projects: pictures pop in softly as they come into view */
.pj .pj-media img, .pj .pj-media video {
  transform: scale(1.035);
  transition: opacity 1.1s ease, transform 1.6s var(--ease);
}
.pj .pj-media:not(.in-view) img.loaded, .pj .pj-media:not(.in-view) video.loaded { opacity: 0; }
.pj .pj-media.in-view img.loaded, .pj .pj-media.in-view video.loaded { transform: none; }

/* ==========================================================================
   Services hero video loop
   ========================================================================== */
.services-hero {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  background: var(--color-graphite);
  color: var(--color-on-dark);
  overflow: hidden;
}
.services-hero-media { position: absolute; inset: 0; }
.services-hero-media .img-slot,
.services-hero-media video,
.services-hero-media .img-slot img,
.services-hero-media .ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.services-hero-media .ph {
  border: none;
  background-color: var(--color-graphite-2);
  color: var(--color-on-dark-soft);
}
/* veil: darker at the bottom, where the text sits */
.services-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20, 21, 22, 0.78) 0%, rgba(20, 21, 22, 0.45) 45%, rgba(20, 21, 22, 0.2) 100%);
  pointer-events: none;
}
.services-hero-media .vtoggle { z-index: 3; bottom: 1.25rem; right: var(--gutter); }
.services-hero-over {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 0 var(--edge) var(--space-xl);
}
.services-hero-head { max-width: var(--content-max); margin: 0 0 var(--space-l); }
.services-hero-head .section-title { font-size: var(--fs-hero); margin-bottom: var(--space-s); }
.services-hero-head .section-lede { color: rgba(236, 234, 230, 0.86); max-width: 36em; margin: 0; }
.services-hero .stats { margin: 0; max-width: 60rem; }
.services-hero .stat .stat-num { font-size: clamp(1.5rem, 3vw, 2.6rem); line-height: 1.15; white-space: nowrap; }
.services-hero .stat .stat-label { color: rgba(236, 234, 230, 0.78); }
.section-services { padding-top: var(--space-xl); }

/* ==========================================================================
   Stats (count-up) — inside the dark services header
   ========================================================================== */
.stats {
  max-width: var(--content-max);
  margin: 0 auto var(--space-l);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m) var(--grid-gap);
}
.stat .stat-num {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
.stat .stat-label {
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-dark-soft);
  margin: 0.2rem 0 0;
}

/* ==========================================================================
   Scan-to-BIM case: stacked point-cloud → model crossfade
   ========================================================================== */
.case-section { background: var(--color-surface); }
.case-inner { max-width: var(--content-max); margin: 0 auto; }
.case-compare { position: relative; overflow: hidden; margin: var(--space-l) 0; }
.case-compare .img-slot img, .case-compare .ph {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.case-layer-top {
  position: absolute;
  inset: 0;
  opacity: 0;             /* driven by scroll progress in script.js */
  will-change: opacity;
}
.case-label {
  position: absolute;
  bottom: 1rem;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(20, 21, 22, 0.6);
  color: var(--color-on-dark);
  padding: 0.3rem 0.7rem;
}
.case-label-cloud { left: 1rem; }
.case-label-model { right: 1rem; }
.case-bullets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
  margin: var(--space-l) 0;
}
.case-bullet .cb-num {
  font-size: var(--fs-kicker);
  letter-spacing: var(--ls-kicker);
  color: var(--color-ink-soft);
  margin-bottom: 0.3rem;
}
.case-bullet h3 { font-size: 1.1rem; }
.case-bullet p { color: var(--color-ink-soft); margin: 0; }
@media (max-width: 900px) { .case-bullets { grid-template-columns: 1fr; } }

/* ==========================================================================
   Energy certificates (CEE) — Valencia
   ========================================================================== */
.cee-section { border-top: 1px solid var(--color-line); }
.cee-inner { max-width: var(--content-max); margin: 0 auto; }
.cee-price { font-size: var(--fs-lede); margin: var(--space-m) 0; }

/* ==========================================================================
   CTA band — consistent footer block on every page → contact.html
   ========================================================================== */
.cta-band {
  position: relative;
  z-index: 1;
  background: var(--color-graphite);
  color: var(--color-on-dark);
  padding: var(--space-l) var(--gutter);
}
/* one compact row: question + promise on the left, action on the right */
.cta-band-inner {
  max-width: var(--page-max); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: end;
}
.cta-band-inner > h2, .cta-band-inner > p { grid-column: 1 / 3; }
.cta-band-inner > .cta-btn { grid-column: 3; grid-row: 1 / span 2; justify-self: start; align-self: end; }
.cta-band h2 { font-size: var(--fs-h2); max-width: 18em; margin-bottom: 0.4rem; }
.cta-band p { color: var(--color-on-dark-soft); max-width: var(--measure); margin: 0; }
.cta-btn {
  display: inline-block;
  margin-top: 0;
  padding: 0.9rem 2rem;
  border: 1px solid var(--color-on-dark);
  color: var(--color-on-dark);
  text-decoration: none;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.3s, color 0.3s, transform 0.15s;
}
.cta-btn:hover { background: var(--color-on-dark); color: var(--color-graphite); }
body[data-page="lab"] .cta-btn { border-color: var(--color-lab-accent); color: var(--color-lab-accent); }

/* landing: light band at the end of the dark panels */
/* opaque, the same ivory as the footer below */
body[data-page="landing"] .cta-band { background: #f7f4eb; color: var(--color-ink); }
body[data-page="landing"] .cta-band p { color: var(--color-ink-soft); }
body[data-page="landing"] .cta-btn { border-color: var(--color-ink); color: var(--color-ink); }
body[data-page="landing"] .cta-btn:hover { background: var(--color-ink); color: #f7f4eb; }
body[data-page="lab"] .cta-btn:hover { background: var(--color-lab-accent); color: var(--color-graphite); }

/* ==========================================================================
   Landing hero particle overlay (dots assembling into an outline)
   ========================================================================== */
.landing-hero { position: relative; }

/* keep full-screen placeholder labels away from the foreground text */
.landing-bg .ph, .studio-intro-bg .ph {
  justify-content: flex-end;
  padding-bottom: 16vh;
}

/* ==========================================================================
   Contact conversion extras
   ========================================================================== */
.contact-promise {
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  border-left: 2px solid var(--color-ink);
  padding-left: 0.8rem;
}
.contact-form select {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-ink-soft);
  padding: 0.6rem 0;
  border-radius: 0;
}
.contact-form select:focus { outline: none; border-bottom-color: currentColor; }

/* ==========================================================================
   Micro-interactions (150–300ms, transform/opacity only)
   ========================================================================== */
.service, .case-bullet {
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, background 0.4s;
}
/* the two contact boxes are static (no hover effect) */
.case-bullet:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(20, 21, 22, 0.08);
}
.service:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
button:active, .sd-cta:active, .service-cta:active, .cta-btn:active { transform: scale(0.98); }

/* LAB-only: brief fading trail behind the green cursor */
.cursor-trail {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-lab-accent);
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  animation: trail-fade 0.45s ease-out forwards;
}
@keyframes trail-fade {
  to { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .img-slot img, .img-slot video { opacity: 1; transition: none; }
  .pj .pj-media img, .pj .pj-media video { transform: none !important; opacity: 1 !important; }
  .cursor-trail { display: none; }
  .service, .contact-option, .founder, .case-bullet { transition: none; }
  .contact-option:hover, .founder:hover, .case-bullet:hover, .service:hover {
    transform: none; box-shadow: none;
  }
}

@media (max-width: 700px) {
  :root { --banner-h-top: 3.4rem; }
  .founders-grid { grid-template-columns: 1fr; max-width: 26rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .cta-band-inner, .svc-faq-inner { grid-template-columns: 1fr; }
  .cta-band-inner > *, .svc-faq-inner > * { grid-column: 1 !important; grid-row: auto !important; }
  .cta-band-inner > .cta-btn { margin-top: var(--space-m); }
  .svc-faq-title { margin-bottom: var(--space-s); }
  .contact-options { grid-template-columns: 1fr; }
  .case-bullets { grid-template-columns: 1fr; }
  .stats { gap: 1.2rem 2rem; }

  /* mobile top banner: logo left, ES/EN pushed right, hamburger in the top-right corner */
  .nav-toggle { display: flex; order: 4; }
  .lang-toggle { margin-left: auto; order: 3; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    margin: 0;
    flex-direction: column;
    padding: 0.4rem var(--gutter) 1rem;
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-line);
  }
  body[data-page="landing"] .main-nav,
  body[data-page="services"] .main-nav {
    background: color-mix(in srgb, var(--color-graphite) 90%, transparent);
    border-bottom-color: var(--color-line-dark);
  }
  body[data-page="lab"] .main-nav {
    background: color-mix(in srgb, var(--color-lab-accent) 92%, transparent);
    border-bottom-color: var(--color-lab-accent);
  }
  .top-banner.nav-open .main-nav { display: flex; }
  .main-nav a { padding: 0.85rem 0; font-size: 0.8rem; }
}

/* 404 */
.notfound { min-height: 70vh; }
.notfound-links { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }
.notfound-links .sd-cta { margin-top: 0; }

/* landing: the last panel (ARQTK LAB) is shorter, so the contact band
   arrives earlier and the LAB title stays on screen above it */
.landing .landing-panel:last-child { min-height: 72svh; }

/* landing: tighter rhythm — the lander and the three category panels are
   shorter, so "01 Studio" follows the scroll cue more closely */
.landing .landing-hero { min-height: 84svh; }
.landing .landing-panel:not(.landing-hero) { min-height: 76svh; }
.landing .landing-panel:last-child { min-height: 72svh; }

/* services: the FAQ joins the dark page; the contact band and the footer
   below it take the light ground instead */
body[data-page="services"] .svc-faq { background: var(--color-graphite); color: var(--color-on-dark); }
body[data-page="services"] .svc-faq-list,
body[data-page="services"] .svc-faq-list details { border-color: var(--color-line-dark); }
body[data-page="services"] .svc-faq-list summary::after,
body[data-page="services"] .svc-faq-list details p { color: var(--color-on-dark-soft); }
body[data-page="services"] .svc-faq :focus-visible { outline-color: var(--color-on-dark); }
body[data-page="services"] .cta-band { background: var(--color-bg); color: var(--color-ink); }
body[data-page="services"] .cta-band p { color: var(--color-ink-soft); }
body[data-page="services"] .cta-btn { border-color: var(--color-ink); color: var(--color-ink); }
body[data-page="services"] .cta-btn:hover { background: var(--color-ink); color: var(--color-bg); }
body[data-page="services"] .cta-band :focus-visible { outline-color: var(--color-ink); }
body[data-page="services"] .site-footer {
  background: var(--color-bg); border-top-color: var(--color-line); color: var(--color-ink-soft);
}
body[data-page="services"] .site-footer a:hover { color: var(--color-ink); }

/* LAB studies: smaller titles; the videos 40 % darker again (0.6 → 0.36
   of the picture shows) for stronger contrast with the text on top */
.lab-film h2 { font-size: clamp(1.8rem, 3.2vw, 2.9rem); }
.lab-film-media::before { background: rgba(0, 0, 0, 0.64); }

/* services: the hairline under the top banner, much more see-through */
body[data-page="services"] .top-banner { border-bottom-color: rgba(236, 234, 230, 0.1); }

/* "Have a project in mind?" band: the same space above and below the
   content, and less of it (was 64 px / 64 px, then 32 px / 64 px) */
.cta-band { padding-top: 1.3rem; padding-bottom: 1.75rem; }   /* the top is a little less: the heading line already carries some air above the letters */
.cta-band h2 { margin-top: 0; }

/* ==========================================================================
   LAB · instrument layer — makes the page read like a live research
   console: corner marks and readouts over each video (study number and
   the video's running time), a slow scan line, a fine dot grid, a light
   that follows the mouse, titles that decode into place, and a rail with
   the studies at the right edge. All decorative (aria-hidden), and still
   under prefers-reduced-motion.
   ========================================================================== */
body[data-page="lab"] { --lab-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }
.lab-hud {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  font-family: var(--lab-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(198, 240, 78, 0.78);
  --hud-top: calc(var(--banner-h-top) + 1.4rem);
  --hud-side: clamp(1rem, 2.4vw, 2rem);
}
/* corner marks */
.lab-hud-c { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(198, 240, 78, 0.6); }
.lab-hud-c.is-tl { top: var(--hud-top); left: var(--hud-side); border-top-width: 1px; border-left-width: 1px; }
.lab-hud-c.is-tr { top: var(--hud-top); right: var(--hud-side); border-top-width: 1px; border-right-width: 1px; }
.lab-hud-c.is-bl { bottom: 1.4rem; left: var(--hud-side); border-bottom-width: 1px; border-left-width: 1px; }
.lab-hud-c.is-br { bottom: 1.4rem; right: var(--hud-side); border-bottom-width: 1px; border-right-width: 1px; }
/* readouts */
.lab-hud-tag, .lab-hud-tc { position: absolute; top: calc(var(--hud-top) + 5px); line-height: 1; white-space: nowrap; }
.lab-hud-tag { left: calc(var(--hud-side) + 30px); display: flex; align-items: center; gap: 0.6rem; }
.lab-hud-tc { right: calc(var(--hud-side) + 30px); font-variant-numeric: tabular-nums; color: rgba(236, 234, 230, 0.7); }
.lab-hud-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-lab-accent);
  box-shadow: 0 0 8px rgba(198, 240, 78, 0.8);
  animation: lab-blink 1.8s steps(2, jump-none) infinite;
}
@keyframes lab-blink { 50% { opacity: 0.15; } }
/* fine dot grid, strongest in the middle band */
.lab-hud-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(236, 234, 230, 0.16) 1px, transparent 1.3px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 30%, #000 62%, transparent 92%);
          mask-image: linear-gradient(to bottom, transparent 8%, #000 30%, #000 62%, transparent 92%);
  opacity: 0.55;
}
/* the text sits above the instrument layer */
.lab-film-over, .lab-hero-over { z-index: 2; }
/* kicker as a readout: [01] PARAMETRIC DESIGN */
body[data-page="lab"] .lab-film .lb-kicker { font-family: var(--lab-mono); letter-spacing: 0.18em; }
.lab-kno { color: rgba(236, 234, 230, 0.6); margin-right: 0.35rem; }
/* titles decoding into place */
.lab-dec-word { white-space: nowrap; }
.lab-dec-ch { display: inline-block; overflow: hidden; text-align: center; vertical-align: top; }

/* rail with the studies, right edge (desktop) */
.lab-rail {
  position: fixed; right: clamp(0.8rem, 1.6vw, 1.6rem); top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.9rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}
.lab-rail.is-on { opacity: 1; visibility: visible; transition: opacity 0.5s var(--ease); }
.lab-rail-item {
  all: unset; cursor: pointer;
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--lab-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(236, 234, 230, 0.45);
  transition: color 0.3s;
}
.lab-rail-item::after {
  content: ""; width: 14px; height: 1px; background: currentColor;
  transition: width 0.4s var(--ease);
}
.lab-rail-label {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  transition: max-width 0.5s var(--ease), opacity 0.3s;
}
.lab-rail-item:hover, .lab-rail-item:focus-visible { color: var(--color-on-dark); }
.lab-rail-item:hover .lab-rail-label, .lab-rail-item:focus-visible .lab-rail-label { max-width: 18rem; opacity: 1; }
.lab-rail-item.is-active { color: var(--color-lab-accent); }
.lab-rail-item.is-active::after { width: 34px; }
.lab-rail-item:focus-visible { outline: 1px solid var(--color-lab-accent); outline-offset: 4px; }

@media (max-width: 900px) {
  .lab-rail { display: none; }
  .lab-hud { font-size: 0.6rem; --hud-top: calc(var(--banner-h-top) + 1rem); }
  .lab-hud-tc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-hud-dot { animation: none; }
}

/* LAB bottom: a subtle line above the dark band and above the footer,
   like the hairline under the banner of Professional services */
body[data-page="lab"] .cta-band { border-top: 1px solid rgba(236, 234, 230, 0.1); }
body[data-page="lab"] .site-footer { border-top: 1px solid rgba(236, 234, 230, 0.1); }

/* services FAQ: the questions stand out a little — a small index number,
   the question in full white and slightly larger, the +/− in a thin
   circle, and a soft highlight on hover or when open */
body[data-page="services"] .svc-faq-list { counter-reset: faq; }
body[data-page="services"] .svc-faq-list summary {
  counter-increment: faq;
  align-items: center;
  padding: 1.05rem 0.6rem 1.05rem 0;
  font-size: 1.05rem;
  color: var(--color-on-dark);
  transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}
body[data-page="services"] .svc-faq-list summary::before {
  content: counter(faq, decimal-leading-zero);
  flex: 0 0 auto;
  width: 1.6rem;
  font-size: 0.75rem; font-weight: 400; letter-spacing: 0.1em;
  color: var(--color-on-dark-soft); opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
body[data-page="services"] .svc-faq-list summary { justify-content: flex-start; gap: 0.8rem; }
body[data-page="services"] .svc-faq-list summary::after {
  margin-left: auto;
  flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  border: 1px solid rgba(236, 234, 230, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; line-height: 1;
  color: var(--color-on-dark-soft);
  transition: border-color 0.3s, color 0.3s;
}
body[data-page="services"] .svc-faq-list summary:hover,
body[data-page="services"] .svc-faq-list details[open] summary {
  background: rgba(236, 234, 230, 0.035);
  padding-left: 0.6rem;
}
body[data-page="services"] .svc-faq-list summary:hover::after,
body[data-page="services"] .svc-faq-list details[open] summary::after {
  border-color: rgba(236, 234, 230, 0.6); color: var(--color-on-dark);
}
body[data-page="services"] .svc-faq-list details p { padding-left: 3rem; font-size: 0.95rem; line-height: 1.65; }
@media (max-width: 700px) {
  body[data-page="services"] .svc-faq-list summary { font-size: 1rem; }
  body[data-page="services"] .svc-faq-list summary::before { width: 1.4rem; }
  body[data-page="services"] .svc-faq-list details p { padding-left: 2.8rem; }
}

/* LAB: seamless passage between the studies — longer, eased fades into
   the page colour at the top and bottom of every video (no band or edge
   where one study ends and the next begins), and only the top corner
   marks, so nothing frames the seam */
.lab-film-media::after {
  background: linear-gradient(to bottom,
    var(--color-graphite) 0%,
    rgba(35, 37, 38, 0.82) 7%,
    rgba(35, 37, 38, 0.55) 15%,
    rgba(35, 37, 38, 0.25) 24%,
    rgba(35, 37, 38, 0.07) 32%,
    rgba(35, 37, 38, 0) 40%,
    rgba(35, 37, 38, 0) 48%,
    rgba(35, 37, 38, 0.1) 58%,
    rgba(35, 37, 38, 0.32) 68%,
    rgba(35, 37, 38, 0.6) 79%,
    rgba(35, 37, 38, 0.86) 90%,
    var(--color-graphite) 100%);
}
.lab-film .lab-hud-c.is-bl, .lab-film .lab-hud-c.is-br { display: none; }
.lab-film .lab-hud-grid {
  -webkit-mask-image: linear-gradient(to bottom, transparent 14%, #000 34%, #000 56%, transparent 78%);
          mask-image: linear-gradient(to bottom, transparent 14%, #000 34%, #000 56%, transparent 78%);
}

/* ==========================================================================
   LAB · inside an opened study — easier to follow:
   a map of the chapters stays under the banner while you read (the one on
   screen lit, the read ones checked off, a thin progress line), labels
   over the opening text and the key figures, figures that count up, and
   a button at the end to close the study and go back to its title
   ========================================================================== */
.lab-film-clip { overflow: hidden; overflow: clip; }   /* clip keeps the map sticky */
.lab-map {
  position: sticky; top: var(--banner-h-top); z-index: 6;
  margin: calc(-1 * var(--space-m)) calc(-1 * var(--edge)) 0;
  padding: 0 var(--edge);
  background: rgba(35, 37, 38, 0.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(236, 234, 230, 0.08);
}
.lab-map-in {
  display: flex; align-items: center; gap: var(--space-m);
  min-height: 3.2rem;
  overflow-x: auto; scrollbar-width: none;
}
.lab-map-in::-webkit-scrollbar { display: none; }
.lab-map-label {
  flex: 0 0 auto;
  font-family: var(--lab-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-lab-accent);
}
.lab-map-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.3rem 1.6rem; }
.lab-map-list li { flex: 0 0 auto; }
.lab-map-item {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  padding: 0.9rem 0;
  font-size: 0.85rem; color: var(--color-on-dark-soft); opacity: 0.6;
  transition: opacity 0.3s, color 0.3s;
  white-space: nowrap;
}
.lab-map-no { font-family: var(--lab-mono); font-size: 0.7rem; letter-spacing: 0.1em; }
.lab-map-item.is-past { opacity: 0.85; }
.lab-map-item.is-past .lab-map-no { color: var(--color-lab-accent); }
.lab-map-item.is-active { opacity: 1; color: var(--color-on-dark); }
.lab-map-item.is-active .lab-map-no { color: var(--color-lab-accent); }
.lab-map-item:hover { opacity: 1; }
.lab-map-item:focus-visible { outline: 1px solid var(--color-lab-accent); outline-offset: 3px; }
.lab-map-bar {
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--color-lab-accent);
  transform-origin: left; transform: scaleX(var(--prog, 0));
  transition: transform 0.2s linear;
}
/* small labels over the opening text and the figures */
.lab-label {
  margin: 0 0 var(--space-s);
  font-family: var(--lab-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(236, 234, 230, 0.55);
}
.lab-lead .lab-lead-label { grid-column: 1 / 3; grid-row: 1; margin-bottom: 0; }
.lab-lead .lab-lead-text { grid-column: 1 / 3; grid-row: 2; }
.lab-lead .lab-facts-wrap { grid-column: 3; grid-row: 1 / span 2; }
.lab-lead .lab-facts-wrap .lab-facts { grid-column: auto; }
.lab-facts-wrap .lab-fact { border-top: 1px solid rgba(236, 234, 230, 0.1); padding-top: 0.8rem; }
/* chapters: a hairline leads into each number */
.lab-ch-head { position: relative; padding-top: var(--space-s); border-top: 1px solid rgba(236, 234, 230, 0.08); }
/* end of the study */
.lab-study-end { display: flex; justify-content: flex-start; padding-top: var(--space-m); border-top: 1px solid rgba(236, 234, 230, 0.08); }
.lab-back-arrow { font-size: 0.9rem; line-height: 1; }
@media (max-width: 900px) {
  .lab-lead .lab-lead-label, .lab-lead .lab-lead-text, .lab-lead .lab-facts-wrap { grid-column: 1; grid-row: auto; }
  .lab-map-in { gap: var(--space-s); }
  .lab-map-label { display: none; }
  .lab-map-item { font-size: 0.8rem; }
}
/* keep the opened study as wide as the screen (the chapter map scrolls
   sideways inside itself on small screens) */
.lab-film-more { grid-template-columns: minmax(0, 1fr); }
.lab-film-clip, .lab-study-body, .lab-map { min-width: 0; }
.lab-lead { grid-template-rows: auto 1fr; }
.lab-lead .lab-lead-text { align-self: start; }
.lab-lead .lab-lead-label + .lab-lead-text { margin-top: calc(-1 * var(--space-s)); }
@media (max-width: 700px) {
  .lab-lead { grid-template-columns: minmax(0, 1fr); }
  .lab-lead .lab-facts-wrap { margin-top: var(--space-s); }
}

/* ==========================================================================
   LAB · warehouse: options compared at a glance
   picture of the chosen option (2 columns) + its text (1 column); under
   them every option in a row, with bars for less heat, more daylight and
   extra cost against the current state; the chosen row is lit
   ========================================================================== */
.lab-cmp { display: flex; flex-direction: column; gap: var(--space-l); }
.lab-cmp-top {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-gap); align-items: end;
}
.lab-cmp-stage { grid-column: 1 / 3; display: grid; }
.lab-cmp-frame {
  grid-area: 1 / 1; margin: 0;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.lab-cmp-frame.is-active { opacity: 1; }
.lab-cmp-frame img, .lab-cmp-frame .ph { width: 100%; height: auto; display: block; }
.lab-cmp-cap { grid-column: 3; }
.lab-cmp-capno { font-family: var(--lab-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--color-lab-accent); }
.lab-cmp-cap h4 { font-size: var(--fs-m); font-weight: 500; color: var(--color-on-dark); margin: 0.3rem 0 0.5rem; }
.lab-cmp-cap p { color: var(--color-on-dark-soft); margin: 0; line-height: 1.6; }

.lab-cmp-list { display: flex; flex-direction: column; border-top: 1px solid rgba(236, 234, 230, 0.1); }
.lab-cmp-head, .lab-cmp-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  column-gap: var(--space-m); align-items: center;
}
.lab-cmp-head { padding: 0.7rem 0.8rem; }
.lab-cmp-hint, .lab-cmp-hk {
  font-family: var(--lab-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(236, 234, 230, 0.55);
}
.lab-cmp-row {
  all: unset; box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  column-gap: var(--space-m); align-items: center;
  padding: 0.85rem 0.8rem;
  border-top: 1px solid rgba(236, 234, 230, 0.08);
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.lab-cmp-row:hover { background: rgba(236, 234, 230, 0.03); }
.lab-cmp-row.is-active { background: rgba(198, 240, 78, 0.07); box-shadow: inset 2px 0 0 var(--color-lab-accent); }
.lab-cmp-row:focus-visible { outline: 1px solid var(--color-lab-accent); outline-offset: -1px; }
.lab-cmp-name { display: flex; gap: 0.8rem; align-items: baseline; color: var(--color-on-dark-soft); font-size: 0.95rem; }
.lab-cmp-row.is-active .lab-cmp-name { color: var(--color-on-dark); }
.lab-cmp-no { font-family: var(--lab-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: rgba(236, 234, 230, 0.5); }
.lab-cmp-row.is-active .lab-cmp-no { color: var(--color-lab-accent); }
.lab-cmp-base { grid-column: 2 / -1; font-size: 0.85rem; color: rgba(236, 234, 230, 0.5); }
.lab-cmp-cell { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.lab-cmp-bar { flex: 1 1 auto; height: 4px; background: rgba(236, 234, 230, 0.08); position: relative; overflow: hidden; }
.lab-cmp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); background: var(--color-lab-accent); opacity: 0.75; }
.lab-cmp-cell.is-cost .lab-cmp-fill { background: rgba(236, 234, 230, 0.7); }
.lab-cmp-row.is-active .lab-cmp-fill { opacity: 1; }
.lab-cmp-val { flex: 0 0 3.6rem; text-align: right; font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--color-on-dark); }
.lab-cmp-na { font-size: 0.8rem; color: rgba(236, 234, 230, 0.4); }
@media (max-width: 900px) {
  .lab-cmp-top { grid-template-columns: 1fr; row-gap: var(--space-m); }
  .lab-cmp-stage, .lab-cmp-cap { grid-column: 1; }
  .lab-cmp-head { display: none; }
  .lab-cmp-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0.6rem; column-gap: 0.9rem; }
  .lab-cmp-name { grid-column: 1 / -1; }
  .lab-cmp-base { grid-column: 1 / -1; }
  .lab-cmp-cell { flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .lab-cmp-cell::before { font-family: var(--lab-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 234, 230, 0.5); }
  .lab-cmp-val { flex: none; text-align: left; }
}

/* close at the end of a study: small and quiet */
.lab-back {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--lab-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(236, 234, 230, 0.6);
  padding: 0.4rem 0;
  transition: color 0.3s;
}
.lab-back:hover { color: var(--color-lab-accent); }
.lab-back:focus-visible { outline: 1px solid var(--color-lab-accent); outline-offset: 4px; }
.lab-back .lab-back-arrow { font-family: inherit; font-size: 0.85rem; transition: transform 0.3s var(--ease); }
.lab-back:hover .lab-back-arrow { transform: translateY(-2px); }
.lab-study-end { padding-top: var(--space-s); }

/* Rio study: the steps read top to bottom; each map with its step text
   and legend beside it, its chart right under it */
.lab-study-body .lab-fstack { gap: var(--space-l); }
.lab-study-body .lab-fstack .lab-fslide { height: auto; }
.lab-study-body .lab-fstack .lab-fslide-media { height: auto; }
.lab-study-body .lab-fstack .lab-fslide-media img { max-height: 70vh; width: auto; max-width: 100%; }
.lab-study-body .lab-fstack .lab-fslide + .lab-fslide { padding-top: var(--space-l); border-top: 1px solid rgba(236, 234, 230, 0.06); }
.lab-study-body .lab-fstack .lab-fslide.is-chart { border-top: 0; padding-top: 0; margin-top: calc(-1 * var(--space-s)); }
@media (max-width: 900px) { .lab-cmp-cell::before { content: attr(data-k); } }

/* ---- LAB comparison, one view: picture left, options + results right ---- */
.lab-cmp {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-gap); row-gap: var(--space-m); align-items: start;
}
.lab-cmp-stage { grid-column: 1 / 3; display: grid; }
.lab-cmp-side { grid-column: 3; display: flex; flex-direction: column; gap: var(--space-s); }
.lab-cmp-hint {
  margin: 0; font-family: var(--lab-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(236, 234, 230, 0.55);
}
.lab-cmp-list { display: flex; flex-direction: column; border-top: 1px solid rgba(236, 234, 230, 0.1); }
.lab-cmp-opt {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid rgba(236, 234, 230, 0.07);
  font-size: 0.9rem; color: var(--color-on-dark-soft);
  transition: background 0.3s var(--ease), color 0.3s;
}
.lab-cmp-opt:hover { background: rgba(236, 234, 230, 0.03); color: var(--color-on-dark); }
.lab-cmp-opt.is-active { background: rgba(198, 240, 78, 0.08); color: var(--color-on-dark); box-shadow: inset 2px 0 0 var(--color-lab-accent); }
.lab-cmp-opt.is-active .lab-cmp-no { color: var(--color-lab-accent); }
.lab-cmp-opt:focus-visible { outline: 1px solid var(--color-lab-accent); outline-offset: -1px; }
.lab-cmp-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin-top: 0.3rem; }
.lab-cmp-m { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.lab-cmp-mk { font-family: var(--lab-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 234, 230, 0.55); }
.lab-cmp-mv {
  font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--color-lab-accent);
}
.lab-cmp-m.is-cost .lab-cmp-mv { color: var(--color-on-dark); }
.lab-cmp-m.is-na .lab-cmp-mv { font-size: 0.85rem; font-weight: 400; color: rgba(236, 234, 230, 0.4); padding: 0.45rem 0; }
.lab-cmp-res.is-base .lab-cmp-mv { color: rgba(236, 234, 230, 0.4); }
.lab-cmp .lab-cmp-bar { flex: none; height: 4px; }
.lab-cmp .lab-cmp-fill { width: 0; opacity: 1; transition: width 0.65s var(--ease); }
.lab-cmp-note { font-size: 0.88rem; line-height: 1.6; color: var(--color-on-dark-soft); }
.lab-cmp-note p { margin: 0; }
.lab-cmp-note .lab-cmp-base { display: block; font-family: var(--lab-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(236, 234, 230, 0.5); margin-bottom: 0.3rem; }
@media (max-width: 900px) {
  .lab-cmp { grid-template-columns: 1fr; }
  .lab-cmp-stage, .lab-cmp-side { grid-column: 1; }
}
/* phones (Alam, 30 Sep 2026): the results sit right under the picture, so
   both are seen together; the options to choose from come underneath,
   then the short note */
@media (max-width: 700px) {
  .lab-cmp { row-gap: var(--space-s); }
  .lab-cmp-side { gap: 0.7rem; }
  .lab-cmp-res { order: -2; margin-top: 0; }
  .lab-cmp-hint { order: -1; margin-top: 0.5rem; }
  .lab-cmp-note { order: 1; }
  .lab-cmp-opt { min-height: 44px; align-items: center; padding: 0.5rem 0.6rem; font-size: 0.88rem; }
}

/* ---- chapters with short lists (Building repurposing): one row each,
   title on the left third, content on the right two thirds, so every
   chapter has its own place to jump to ---- */
.lab-ch-grid { display: flex; flex-direction: column; gap: 0; }
.lab-ch.is-card {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap);
  padding: var(--space-l) 0;
  border-top: 1px solid rgba(236, 234, 230, 0.08);
}
.lab-ch.is-card > .lab-ch-head { grid-column: 1; margin: 0; padding-top: 0; border-top: 0; align-self: start; }
.lab-ch.is-card > :not(.lab-ch-head) { grid-column: 2 / 4; }
.lab-ch.is-card .lab-vsteps, .lab-ch.is-card ul { margin-top: 0; }
@media (max-width: 900px) {
  .lab-ch.is-card { grid-template-columns: 1fr; }
  .lab-ch.is-card > * { grid-column: 1 !important; }
  .lab-ch.is-card > .lab-ch-head { margin-bottom: var(--space-s); }
}

/* ---- close in the chapter bar, top right ---- */
.lab-map-close {
  all: unset; cursor: pointer; flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0 0.5rem 0.8rem;
  font-family: var(--lab-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(236, 234, 230, 0.7);
  transition: color 0.3s;
}
.lab-map-close:hover { color: var(--color-lab-accent); }
.lab-map-close:focus-visible { outline: 1px solid var(--color-lab-accent); outline-offset: 3px; }
.lab-map-x { position: relative; width: 0.8rem; height: 0.8rem; }
.lab-map-x::before, .lab-map-x::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 1px; background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.lab-map-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* keep it visible while the list scrolls sideways on phones */
.lab-map-in { position: relative; }
@media (max-width: 900px) {
  .lab-map-close {
    position: sticky; right: 0;
    background: linear-gradient(to right, rgba(35, 37, 38, 0), rgba(35, 37, 38, 0.95) 30%);
    padding-left: 1.4rem;
  }
  .lab-map-close span:first-child { display: none; }
}

/* LAB warehouse comparison: the picture melts into the page — its edges
   fade out and it sits on the page colour, so no hard frame shows */
.lab-cmp-stage { background: var(--color-graphite); }
.lab-cmp-frame img, .lab-cmp-frame .ph {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-composite: intersect;
}

/* ==========================================================================
   LAB · calmer reading while scrolling
   - blocks fade in gently (shorter move, longer fade) and start just
     before they enter the screen
   - (the calm wheel and the gentle settling on whole pieces live in
     script.js: labSmoothScroll)
   - every figure fits on one screen together with its text and legend
   ========================================================================== */
body[data-page="lab"] .lab-study-body .reveal {
  transform: translateY(0.7rem);
  transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* a figure never taller than the screen left under the banner and the bar */
.lab-study-body .lab-fstack .lab-fslide-media img {
  max-height: calc(100svh - var(--banner-h-top) - 8rem);
}
.lab-study-body .lab-fstack .lab-fslide.is-wide .lab-fslide-media img { max-height: 46svh; width: 100%; object-fit: contain; }
.lab-study-body .lab-fstack .lab-fslide.is-chart .lab-fslide-media img { max-height: 48svh; }
.lab-cmp-frame img { max-height: calc(100svh - var(--banner-h-top) - 8rem); object-fit: contain; }

/* figures: the space between them is a gap, not padding, so a figure that
   settles under the bar starts right at its picture */
.lab-study-body .lab-fstack .lab-fslide + .lab-fslide { padding-top: var(--space-s); }

/* ==========================================================================
   LAB · a study reads as tabs: one part at a time under the pinned bar
   ========================================================================== */
.lab-pane[hidden] { display: none; }
.lab-pane { opacity: 0; transform: translateY(0.6rem); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.lab-pane.is-active { opacity: 1; transform: none; }
.lab-pane.is-leaving { opacity: 0; transition-duration: 0.45s; }
.lab-pane > .lab-lead, .lab-pane > .lab-ch { padding-top: var(--space-m); }
.lab-pane > .lab-ch { border-top: 0; }
.lab-pane > .lab-ch > .lab-ch-head { border-top: 0; padding-top: 0; }
.lab-map-item .lab-map-no + .lab-map-t { margin-left: 0; }
/* link to the next part, at the end of each part */
.lab-next {
  all: unset; cursor: pointer;
  display: flex; align-items: baseline; gap: 0.8rem;
  margin-top: var(--space-xl); padding: var(--space-m) 0 0;
  border-top: 1px solid rgba(236, 234, 230, 0.08);
  width: 100%;
  color: var(--color-on-dark-soft);
  transition: color 0.3s;
}
.lab-next-k { font-family: var(--lab-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236, 234, 230, 0.5); }
.lab-next-no { font-family: var(--lab-mono); font-size: 0.75rem; color: var(--color-lab-accent); }
.lab-next-t { font-size: var(--fs-m); color: var(--color-on-dark); }
.lab-next-arrow { transition: transform 0.3s var(--ease); }
.lab-next:hover .lab-next-arrow { transform: translateX(4px); }
.lab-next:hover .lab-next-t { color: var(--color-lab-accent); }
.lab-next:focus-visible { outline: 1px solid var(--color-lab-accent); outline-offset: 4px; }
/* the calm wheel handles the easing itself */
html.lab-calm-scroll { scroll-behavior: auto; }

/* ==========================================================================
   LAB · parts laid out on the three columns of the grid
   ========================================================================== */
/* the question: text | the study's film | key figures */
.lab-lead { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
.lab-lead .lab-lead-label { grid-column: 1; grid-row: 1; }
.lab-lead .lab-lead-text { grid-column: 1; grid-row: 2; }
.lab-lead .lab-lead-text p { font-size: clamp(1.05rem, 1.35vw, 1.25rem); max-width: none; }
.lab-lead .lab-lead-text p + p { font-size: var(--fs-s); }
.lab-lead-media {
  grid-column: 2; grid-row: 1 / span 2;
  position: relative; margin: 0; align-self: stretch; min-height: 20rem;
  overflow: hidden;
}
.lab-lead-media .img-slot, .lab-lead-media video, .lab-lead-media img, .lab-lead-media .ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.lab-lead-media video, .lab-lead-media img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.lab-lead-media .lab-hud-c { z-index: 1; width: 14px; height: 14px; }
.lab-lead-media .lab-hud-c.is-tl { top: 0; left: 0; }
.lab-lead-media .lab-hud-c.is-tr { top: 0; right: 0; }
.lab-lead-media .lab-hud-c.is-bl { bottom: 0; left: 0; }
.lab-lead-media .lab-hud-c.is-br { bottom: 0; right: 0; }
.lab-lead .lab-facts-wrap { grid-column: 3; grid-row: 1 / span 2; }

/* chapters: the title on top, then the content across the three columns */
.lab-pane > .lab-ch.is-card { display: block; padding: var(--space-m) 0 0; }
.lab-pane > .lab-ch.is-card > .lab-ch-head { margin-bottom: var(--space-m); }

/* points as tiles */
.lab-ch-body.is-tiles { display: grid; gap: var(--grid-gap); }
.lab-ch-body.is-tiles.per-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lab-ch-body.is-tiles.per-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lab-tile {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-s);
  min-height: 11rem;
  padding: var(--space-m) var(--space-m) var(--space-m);
  background:
    radial-gradient(rgba(236, 234, 230, 0.07) 1px, transparent 1.3px) 0 0 / 18px 18px,
    rgba(236, 234, 230, 0.025);
  border-top: 1px solid rgba(198, 240, 78, 0.45);
  transition: background-color 0.4s var(--ease);
}
.lab-tile::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 12px; height: 12px;
  border-right: 1px solid rgba(198, 240, 78, 0.45); border-bottom: 1px solid rgba(198, 240, 78, 0.45);
}
.lab-tile-no {
  font-family: var(--lab-mono); font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1;
  letter-spacing: 0.02em; color: var(--color-lab-accent);
}
.lab-tile p { margin: auto 0 0; font-size: 1rem; line-height: 1.55; color: var(--color-on-dark); max-width: 26em; }
.lab-tile:hover { background-color: rgba(236, 234, 230, 0.045); }

/* text | points | closing text */
.lab-ch-body.is-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
.lab-ch-body.is-cols .lab-col p { margin: 0 0 0.9rem; color: var(--color-on-dark-soft); line-height: 1.65; }
.lab-ch-body.is-cols .lab-col:first-child p:first-child { color: var(--color-on-dark); font-size: 1.05rem; }
.lab-col-tiles { display: flex; flex-direction: column; gap: 0.7rem; }
.lab-col-tiles .lab-tile { min-height: 0; padding: var(--space-s) var(--space-s) var(--space-s); flex-direction: row; align-items: baseline; gap: 0.9rem; }
.lab-col-tiles .lab-tile-no { font-size: 1.1rem; }
.lab-col-tiles .lab-tile p { margin: 0; font-size: 0.92rem; }

@media (max-width: 900px) {
  .lab-lead, .lab-ch-body.is-tiles.per-3, .lab-ch-body.is-tiles.per-2, .lab-ch-body.is-cols { grid-template-columns: minmax(0, 1fr); }
  .lab-lead .lab-lead-label, .lab-lead .lab-lead-text, .lab-lead-media, .lab-lead .lab-facts-wrap { grid-column: 1; grid-row: auto; }
  .lab-lead-media { min-height: 0; aspect-ratio: 16 / 10; }
  .lab-ch-body.is-tiles { gap: 0.8rem; }
  .lab-tile { min-height: 0; }
  .lab-ch-body.is-cols .lab-col + .lab-col { margin-top: var(--space-m); }
}

/* LAB: the hairline under the green banner and the chapter bar, softer */
body[data-page="lab"] .top-banner { border-bottom-color: rgba(198, 240, 78, 0.28); }
.lab-map { border-bottom-color: rgba(236, 234, 230, 0.05); }
.lab-map-bar { opacity: 0.45; }
.lab-pane .lab-ch-body.is-tiles, .lab-pane .lab-ch-body.is-cols { max-width: none; width: 100%; }
/* less empty space between the chapter bar and the part under it */
.lab-study-body > .lab-tabs { margin-top: calc(var(--space-s) - var(--space-xl)); }

/* ==========================================================================
   LAB · the three studies as three tall cards side by side
   (each .lab-film is display: contents, so its card sits in row 1 of the
   grid and its study, when opened, spans the full width in row 2)
   ========================================================================== */
#lab-blocks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 1px;
  background: var(--color-graphite);
}
#lab-blocks > .lab-film { display: contents; }
#lab-blocks .lab-film-stage {
  grid-row: 1;
  height: min(88svh, 52rem); min-height: 30rem;
  cursor: default;
}
#lab-blocks .lab-film-more { grid-column: 1 / -1; grid-row: 2; }
/* card: slightly brighter on hover, the open one lit, the others quieter */
#lab-blocks .lab-film-media::before { transition: background 0.6s var(--ease); }
#lab-blocks .lab-film-stage:hover .lab-film-media::before { background: rgba(0, 0, 0, 0.5); }
#lab-blocks.has-open .lab-film-stage:not(.is-current) { opacity: 0.55; }
#lab-blocks .lab-film-stage { transition: opacity 0.6s var(--ease); }
#lab-blocks .lab-film-stage.is-current { box-shadow: inset 0 -2px 0 var(--color-lab-accent); }
/* card text: kicker, title, button (the long subtitle stays for the study) */
#lab-blocks .lab-film-over { padding: 0 clamp(1.2rem, 2.4vw, 2.2rem) clamp(1.6rem, 4vh, 3rem); }
#lab-blocks .lab-film h2 { font-size: clamp(1.4rem, 2.1vw, 2rem); max-width: 14em; }
#lab-blocks .lab-film-sub { display: none; }
#lab-blocks .lab-film-toggle { margin-top: var(--space-s); }
/* card readout: study number only, no timecode, no dot grid */
#lab-blocks .lab-hud-tc, #lab-blocks .lab-film .lab-hud-grid { display: none; }
#lab-blocks .lab-hud { --hud-side: 1rem; }
#lab-blocks .lab-hud-tag { left: calc(var(--hud-side) + 26px); }
/* no rail: the three cards are always side by side */
.lab-rail { display: none !important; }
@media (max-width: 900px) {
  #lab-blocks { grid-template-columns: minmax(0, 1fr); row-gap: 1px; }
  #lab-blocks .lab-film-stage, #lab-blocks .lab-film-more { grid-row: auto; grid-column: 1; order: var(--o); }
  #lab-blocks .lab-film-stage { height: 72svh; }
  #lab-blocks.has-open .lab-film-stage:not(.is-current) { opacity: 1; }
}

/* the study's film beside the question: shown whole, no faded edges */
.lab-lead-media video, .lab-lead-media img { -webkit-mask-image: none; mask-image: none; }

/* "Request a proposal" on the LAB: white, not green */
body[data-page="lab"] .cta-btn { border-color: var(--color-on-dark); color: var(--color-on-dark); }
body[data-page="lab"] .cta-btn:hover { background: var(--color-on-dark); color: var(--color-graphite); }

/* ==========================================================================
   LAB · one study at a time (replaces the three side-by-side cards)
   the three stages share one place; the one shown cross-fades in softly;
   three small dots at the bottom centre switch between them. The videos
   are shown whole: the stage has the video's own 16:9 shape.
   ========================================================================== */
#lab-blocks { grid-template-columns: minmax(0, 1fr); column-gap: 0; position: relative; }
#lab-blocks .lab-film-stage {
  grid-row: 1; grid-column: 1;
  height: auto; min-height: 0;
  aspect-ratio: 16 / 9;
  opacity: 0; visibility: hidden;
  transition: opacity 0.9s var(--ease), visibility 0s linear 0.9s;
  box-shadow: none;
}
#lab-blocks .lab-film-stage.is-shown { opacity: 1; visibility: visible; transition: opacity 0.9s var(--ease); }
#lab-blocks.has-open .lab-film-stage:not(.is-current) { opacity: 0; }
#lab-blocks.has-open .lab-film-stage.is-shown { opacity: 1; }
#lab-blocks .lab-film-stage.is-current { box-shadow: none; }
/* whole video, never cropped */
#lab-blocks .lab-film-media video, #lab-blocks .lab-film-media img { object-fit: contain; }
/* a much lighter fade: only a soft shade behind the text at the bottom */
#lab-blocks .lab-film-media::after {
  background: linear-gradient(to bottom, rgba(35, 37, 38, 0) 55%, rgba(35, 37, 38, 0.55) 100%);
}
#lab-blocks .lab-film-over { padding: 0 var(--edge) clamp(3.6rem, 8vh, 5rem); }
#lab-blocks .lab-film h2 { font-size: clamp(1.8rem, 3.2vw, 2.9rem); max-width: 16em; }
/* the dots */
.lab-dots {
  grid-row: 1; grid-column: 1;
  align-self: end; justify-self: center;
  z-index: 4;
  display: flex; gap: 0.9rem;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
}
.lab-dot {
  all: unset; cursor: pointer;
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(236, 234, 230, 0.35);
  transition: background 0.3s, transform 0.3s var(--ease);
  padding: 0; box-sizing: content-box; border: 6px solid transparent; background-clip: content-box;
}
.lab-dot:hover { background-color: rgba(236, 234, 230, 0.7); }
.lab-dot.is-active { background-color: var(--color-lab-accent); transform: scale(1.15); }
.lab-dot:focus-visible { outline: 1px solid var(--color-lab-accent); outline-offset: 2px; }

/* the opening video whole too (desktop): the start takes its 16:9 shape */
@media (min-width: 901px) {
  .lab-hero { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .lab-hero-media video, .lab-hero-media img { object-fit: contain; }
}
/* the study's film beside the question: whole, in its own shape */
.lab-lead-media { min-height: 0; aspect-ratio: 16 / 9; align-self: start; }
.lab-lead-media .img-slot, .lab-lead-media video, .lab-lead-media img { object-fit: contain; }

@media (max-width: 900px) {
  /* phones: the whole video on top, the text under it, the dots below */
  #lab-blocks .lab-film-stage, #lab-blocks .lab-film-more { order: 0; }
  #lab-blocks .lab-film-more { grid-row: 2; }
  #lab-blocks .lab-film-stage { aspect-ratio: auto; height: auto; }
  #lab-blocks .lab-film-media { position: relative; aspect-ratio: 16 / 9; }
  #lab-blocks .lab-film-over { position: relative; padding: var(--space-s) var(--gutter) 3.2rem; }
  #lab-blocks .lab-hud { display: none; }
  .lab-dots { margin-bottom: 1rem; }
  .lab-hero { height: auto; min-height: 0; }
  .lab-hero-media { position: relative; aspect-ratio: 16 / 9; }
  .lab-hero-media video, .lab-hero-media img { object-fit: contain; }
  .lab-hero-over { position: relative; padding-top: var(--space-m); }
}
/* phones (Alam, 30 Sep 2026): the LAB opening fills the whole screen,
   the video behind the text; the three studies only appear on scrolling */
@media (max-width: 700px) {
  .lab-hero { height: 100svh; min-height: 30rem; }
  .lab-hero-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .lab-hero-media video, .lab-hero-media img { object-fit: cover; }
  .lab-hero-over {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 0 var(--gutter) calc(var(--space-l) + 1.4rem);
  }
}
/* direct cross-fade between studies */
#lab-blocks .lab-film-stage { transition: opacity 0.7s var(--ease), visibility 0s linear 0.7s; }
#lab-blocks .lab-film-stage.is-shown { z-index: 2; transition: opacity 0.7s var(--ease); }
#lab-blocks .lab-film-stage.is-leaving { opacity: 1; visibility: visible; z-index: 1; transition: none; }

/* ==========================================================================
   LAB · the three studies one above the other again (no dots): each
   study's video in full (16:9), its opened study right under it
   ========================================================================== */
#lab-blocks .lab-film-stage {
  grid-row: auto; order: var(--o);
  opacity: 1; visibility: visible; z-index: auto;
  transition: none;
}
#lab-blocks .lab-film-more { grid-row: auto; order: var(--o); }
#lab-blocks.has-open .lab-film-stage:not(.is-current) { opacity: 1; }
.lab-dots { display: none; }

/* ==========================================================================
   LAB · a part that holds figures (Rio): title and intro on one line,
   then the steps one at a time, each fitting on one screen
   ========================================================================== */
.lab-ch.is-compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-s); }
.lab-ch.is-compact > .lab-ch-head { grid-column: 1; margin: 0; align-self: start; }
.lab-ch.is-compact > .lab-ch-intro { grid-column: 2 / 4; margin: 0; font-size: 0.95rem; max-width: none; }
.lab-ch.is-compact > .lab-fstep { grid-column: 1 / -1; }

.lab-fstep-nav {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem;
  padding: 0.6rem 0; margin: var(--space-s) 0 var(--space-m);
  border-top: 1px solid rgba(236, 234, 230, 0.08);
  border-bottom: 1px solid rgba(236, 234, 230, 0.08);
}
.lab-fstep-btn {
  all: unset; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.85rem; color: var(--color-on-dark-soft); opacity: 0.6;
  transition: opacity 0.3s, color 0.3s;
}
.lab-fstep-no { font-family: var(--lab-mono); font-size: 0.72rem; letter-spacing: 0.08em; }
.lab-fstep-btn:hover { opacity: 1; }
.lab-fstep-btn.is-active { opacity: 1; color: var(--color-on-dark); box-shadow: inset 0 -1px 0 var(--color-lab-accent); }
.lab-fstep-btn.is-active .lab-fstep-no { color: var(--color-lab-accent); }
.lab-fstep-btn:focus-visible { outline: 1px solid var(--color-lab-accent); outline-offset: 3px; }

.lab-fstep-panel[hidden] { display: none; }
.lab-fstep-panel {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: var(--space-s);
  align-items: start;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.lab-fstep-panel.is-active { opacity: 1; }
.lab-fstep-media { grid-column: 1 / 3; display: grid; }
.lab-fstep-fig { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease); }
.lab-fstep-fig.is-active { opacity: 1; visibility: visible; }
/* each figure fits under the banner, the chapter bar, the title line and the steps */
.lab-fstep-fig img, .lab-fstep-fig .ph {
  display: block; width: auto; max-width: 100%; height: auto;
  max-height: calc(100svh - var(--banner-h-top) - 15rem);
  object-fit: contain;
}
.lab-fstep-side { grid-column: 3; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.lab-fstep-side h4 { font-size: var(--fs-m); font-weight: 500; color: var(--color-on-dark); margin: 0.1rem 0 0.2rem; }
.lab-fstep-side p { font-size: 0.92rem; line-height: 1.6; color: var(--color-on-dark-soft); margin: 0 0 0.3rem; }
.lab-fstep-side .lab-flegend { width: 100%; height: auto; max-height: 38svh; object-fit: contain; object-position: left top; margin-top: 0.4rem; }
.lab-fstep-switch { display: inline-flex; gap: 0; margin: 0.3rem 0; border: 1px solid rgba(236, 234, 230, 0.2); align-self: flex-start; }
.lab-fstep-sw {
  all: unset; cursor: pointer;
  padding: 0.35rem 0.8rem;
  font-family: var(--lab-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-on-dark-soft);
  transition: background 0.3s, color 0.3s;
}
.lab-fstep-sw + .lab-fstep-sw { border-left: 1px solid rgba(236, 234, 230, 0.2); }
.lab-fstep-sw.is-active { background: rgba(198, 240, 78, 0.12); color: var(--color-on-dark); }
.lab-fstep-sw:focus-visible { outline: 1px solid var(--color-lab-accent); outline-offset: 2px; }
/* a set of three maps in a row: full width, text and legend under it */
.lab-fstep-panel.is-wide .lab-fstep-media { grid-column: 1 / -1; }
.lab-fstep-panel.is-wide .lab-fstep-fig img { max-height: 42svh; width: 100%; }
.lab-fstep-panel.is-wide .lab-fstep-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap); }
.lab-fstep-panel.is-wide .lab-fstep-side > * { grid-column: 2 / 4; }
.lab-fstep-panel.is-wide .lab-fstep-side > .lab-flegend { grid-column: 1; grid-row: 1 / span 6; max-height: 30svh; margin-top: 0; }
/* the last step: the texts in three columns */
.lab-fstep-panel.is-text { display: block; }

@media (max-width: 900px) {
  .lab-ch.is-compact { grid-template-columns: minmax(0, 1fr); }
  .lab-ch.is-compact > * { grid-column: 1 !important; }
  .lab-fstep-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 1.2rem; }
  .lab-fstep-nav::-webkit-scrollbar { display: none; }
  .lab-fstep-btn { white-space: nowrap; }
  .lab-fstep-panel, .lab-fstep-panel.is-wide .lab-fstep-side { grid-template-columns: minmax(0, 1fr); }
  .lab-fstep-panel > *, .lab-fstep-panel.is-wide .lab-fstep-side > * { grid-column: 1 !important; grid-row: auto !important; }
  .lab-fstep-fig img { max-height: none; width: 100%; }
}
/* fit each figure to the screen height by its own shape (--r = width/height) */
.lab-fstep-media { justify-items: start; }
.lab-fstep-fig { width: min(100%, calc((100svh - var(--banner-h-top) - 13.5rem) * var(--r, 1.5))); }
.lab-fstep-fig .img-slot, .lab-fstep-fig img { width: 100%; max-height: none; }
.lab-fstep-panel.is-wide .lab-fstep-media { justify-items: center; }
.lab-fstep-panel.is-wide .lab-fstep-fig { width: min(100%, calc(34svh * var(--r, 2.8))); }
.lab-fstep-panel.is-wide .lab-fstep-fig img { max-height: none; }
.lab-fstep-panel.is-wide .lab-fstep-side > .lab-flegend { max-height: 24svh; }
/* a tighter title line and step row */
.lab-pane > .lab-ch.is-compact { padding-top: var(--space-s); }
.lab-ch.is-compact .lab-ch-head h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.lab-fstep-nav { margin: 0.2rem 0 var(--space-s); padding: 0.3rem 0; }
@media (max-width: 900px) { .lab-fstep-fig, .lab-fstep-panel.is-wide .lab-fstep-fig { width: 100%; } }
.lab-fstep-panel[hidden], .lab-pane[hidden] { display: none !important; }
/* stacked studies: a short, soft blend at the top of each video so one
   study hands over to the next without a hard line (much lighter than the
   old fades) */
#lab-blocks .lab-film-media::after {
  background: linear-gradient(to bottom,
    rgba(35, 37, 38, 0.9) 0%, rgba(35, 37, 38, 0) 9%,
    rgba(35, 37, 38, 0) 55%, rgba(35, 37, 38, 0.55) 92%, rgba(35, 37, 38, 0.8) 100%);
}

/* LAB: no faded edges between the stacked studies */
#lab-blocks .lab-film-media::after { background: none; }

/* warehouse comparison: the pictures whole, no faded edges */
.lab-cmp-frame img, .lab-cmp-frame .ph { -webkit-mask-image: none; mask-image: none; }

/* Rio steps: a stepper (numbered circles on a line, the title under each),
   so it no longer looks like the chapter bar at the top */
.lab-fstep-nav {
  position: relative;
  display: flex; flex-wrap: nowrap; gap: 0;
  border: 0; padding: 0; margin: var(--space-s) 0 var(--space-m);
}
.lab-fstep-nav::before {
  content: ""; position: absolute; left: 0; right: 0; top: 15px; height: 1px;
  background: rgba(236, 234, 230, 0.14);
}
.lab-fstep-btn {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0; opacity: 1; box-shadow: none; text-align: center;
  color: var(--color-on-dark-soft);
}
.lab-fstep-btn.is-active { box-shadow: none; }
.lab-fstep-no {
  position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-graphite);
  border: 1px solid rgba(236, 234, 230, 0.3);
  font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--color-on-dark-soft);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.lab-fstep-t { font-size: 0.78rem; line-height: 1.35; max-width: 12em; opacity: 0.7; transition: opacity 0.3s, color 0.3s; }
.lab-fstep-btn:hover .lab-fstep-no { border-color: var(--color-on-dark); color: var(--color-on-dark); }
.lab-fstep-btn:hover .lab-fstep-t { opacity: 1; }
.lab-fstep-btn.is-active .lab-fstep-no { background: var(--color-lab-accent); border-color: var(--color-lab-accent); color: var(--color-graphite); }
.lab-fstep-btn.is-active .lab-fstep-t { opacity: 1; color: var(--color-on-dark); }
@media (max-width: 900px) {
  .lab-fstep-nav { overflow-x: auto; }
  .lab-fstep-btn { flex: 0 0 6.5rem; }
  .lab-fstep-nav::before { right: auto; width: calc(6.5rem * 6); }
  .lab-fstep-t { white-space: normal; }
}
/* the stepper is a little taller than the old row: the figures give way */
.lab-fstep-fig { width: min(100%, calc((100svh - var(--banner-h-top) - 17.5rem) * var(--r, 1.5))); }
.lab-fstep-panel.is-wide .lab-fstep-fig { width: min(100%, calc(31svh * var(--r, 2.8))); }
@media (max-width: 900px) { .lab-fstep-fig, .lab-fstep-panel.is-wide .lab-fstep-fig { width: 100%; } }
.lab-fstep-panel:not(.is-wide) .lab-fstep-side .lab-flegend { max-height: 32svh; }

/* ==========================================================================
   Top banner: identical on every page and in both languages
   (same explicit sizes in styles.css and styles-classic.css; each link is
   as wide as its longer language, the label centred in it)
   ========================================================================== */
.top-banner { font-size: 16px; line-height: 1.65; }
.main-nav a {
  display: inline-grid; justify-items: center;
  font-size: 12.8px; letter-spacing: 1.024px; line-height: 1.2;
  padding: 0; border-bottom: 0 !important;
}
.main-nav a > .nav-label, .main-nav a > .nav-alt { grid-area: 1 / 1; padding: 0.3rem 0; }
.main-nav a > .nav-alt { visibility: hidden; height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; }
.main-nav a > .nav-label { border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.main-nav a:hover > .nav-label,
.main-nav a[aria-current="page"] > .nav-label,
.main-nav a.is-section > .nav-label { border-bottom-color: currentColor; }
.lang-toggle { font-size: 12.8px; line-height: 21.12px; }
.lang-toggle button { font-size: 12.8px; letter-spacing: 1.024px; line-height: 1.2; }
.lang-sep { font-size: 12.8px; line-height: 21.12px; }
@media (max-width: 900px) {
  .main-nav a { display: grid; justify-items: start; }
}

/* ==========================================================================
   LAB · Building repurposing: "Goals and limits" and "What comes next"
   ========================================================================== */
.lab-ch-body.is-limits {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap);
  max-width: none; width: 100%; align-items: start;
}
/* goals: an arrow up, the aim, and a line that pushes outward */
.lab-goal {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 0.8rem; align-items: baseline;
  padding: 1rem 0 0.9rem;
  border-bottom: 1px solid rgba(236, 234, 230, 0.08);
}
.lab-goal-sym { font-size: 1.6rem; line-height: 1; color: var(--color-lab-accent); }
.lab-goal p { margin: 0; font-size: 1.05rem; color: var(--color-on-dark); }
.lab-goal-bar {
  grid-column: 2; height: 2px; margin-top: 0.7rem;
  background: linear-gradient(to right, var(--color-lab-accent), rgba(198, 240, 78, 0));
  width: calc(40% + var(--i, 0) * 20%);
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.1s var(--ease) calc(0.15s + var(--i, 0) * 0.15s);
}
.lab-pane.is-active .lab-goal-bar { transform: scaleX(1); }
/* rules: dashed boxes, each with its sign */
.lab-rules { display: flex; flex-direction: column; gap: 0.8rem; }
.lab-rules .lab-label { margin-bottom: 0.2rem; }
.lab-rule {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 0.9rem; align-items: center;
  padding: 0.9rem 1rem;
  border: 1px dashed rgba(236, 234, 230, 0.28);
}
.lab-rule-sym {
  font-family: var(--lab-mono); font-size: 1.5rem; line-height: 1; text-align: center;
  color: var(--color-on-dark);
}
.lab-rule p { margin: 0; font-size: 0.98rem; color: var(--color-on-dark-soft); }

/* roadmap: today (filled) and the next steps (open) on a line that fades
   on into what comes later */
.lab-ch-body.is-roadmap { max-width: none; width: 100%; }
.lab-road {
  list-style: none; margin: var(--space-m) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--grid-gap);
  position: relative;
}
.lab-road::before {
  content: ""; position: absolute; left: 0; right: -4%; top: 9px; height: 1px;
  background: linear-gradient(to right, var(--color-lab-accent) 0, var(--color-lab-accent) 18%,
    rgba(236, 234, 230, 0.35) 34%, rgba(236, 234, 230, 0.35) 80%, rgba(236, 234, 230, 0) 100%);
}
.lab-road-node { position: relative; padding-top: 2.2rem; }
.lab-road-dot {
  position: absolute; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid rgba(236, 234, 230, 0.55); background: var(--color-graphite);
}
.lab-road-node.is-now .lab-road-dot { background: var(--color-lab-accent); border-color: var(--color-lab-accent); box-shadow: 0 0 0 6px rgba(198, 240, 78, 0.12); }
.lab-road-k { display: block; font-family: var(--lab-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236, 234, 230, 0.55); margin-bottom: 0.5rem; }
.lab-road-node.is-now .lab-road-k { color: var(--color-lab-accent); }
.lab-road-node p { margin: 0; font-size: 1.1rem; line-height: 1.45; color: var(--color-on-dark); max-width: 18em; }
.lab-road-node:not(.is-now) p { color: var(--color-on-dark-soft); }

@media (max-width: 900px) {
  .lab-ch-body.is-limits { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-m); }
  .lab-road { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-m); padding-left: 2.2rem; }
  .lab-road::before { left: 8px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
    background: linear-gradient(to bottom, var(--color-lab-accent) 0, var(--color-lab-accent) 22%, rgba(236, 234, 230, 0.35) 40%, rgba(236, 234, 230, 0) 100%); }
  .lab-road-node { padding-top: 0; }
  .lab-road-dot { left: -2.2rem; }
}

/* LAB · the question: the text first, the study's video bigger right under
   it (two columns wide), the key figures in the third column */
.lab-lead { grid-template-rows: auto auto 1fr; row-gap: var(--space-s); }
.lab-lead .lab-lead-label { grid-column: 1 / 3; grid-row: 1; }
.lab-lead .lab-lead-text { grid-column: 1 / 3; grid-row: 2; }
.lab-lead .lab-lead-text p { max-width: 42em; }
.lab-lead-media { grid-column: 1 / 3; grid-row: 3; margin-top: var(--space-s); width: 100%; }
.lab-lead .lab-facts-wrap { grid-column: 3; grid-row: 1 / span 3; }
@media (max-width: 900px) {
  .lab-lead .lab-lead-label, .lab-lead .lab-lead-text, .lab-lead-media, .lab-lead .lab-facts-wrap { grid-column: 1; grid-row: auto; }
}
/* the video as big as the screen allows while the part still fits */
@media (min-width: 901px) {
  .lab-lead-media { width: min(100%, calc((100svh - var(--banner-h-top) - 19rem) * 16 / 9)); }
}

/* LAB: a study folded away because another one opens closes at once,
   so the page does not slide under the one being opened */
.lab-film.lab-snap .lab-film-more,
.lab-film.lab-snap .lab-study-body,
.lab-film.lab-snap .lab-film-plus { transition: none !important; }

/* ==========================================================================
   Phones and tablets: nothing hides off the side of the screen
   - the tabs of an opened LAB study wrap onto a second line instead of
     scrolling sideways, so every part is seen at once (close stays top right)
   - the Rio steps become a grid of numbered circles, three per row
   ========================================================================== */
@media (max-width: 900px) {
  .lab-map-in {
    flex-wrap: nowrap; align-items: flex-start;
    overflow: visible; min-height: 0;
    padding: 0.35rem 0;
  }
  .lab-map-list { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 0 1.1rem; }
  .lab-map-item { padding: 0.45rem 0; }
  .lab-map-close {
    position: static; background: none;
    padding: 0.45rem 0 0.45rem 0.8rem; align-self: flex-start;
  }
  .lab-fstep-nav {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0.6rem; overflow: visible;
  }
  .lab-fstep-nav::before { display: none; }
  .lab-fstep-btn { flex: none; min-width: 0; }
  .lab-fstep-t { white-space: normal; max-width: none; }
}

/* phones: the step title of a service (e.g. "Procurement & coordination")
   takes the full width instead of the narrow number column */
@media (max-width: 700px) {
  .svc-p-steps li strong { grid-column: 1 / -1; }
}

/* service panel: the Close button sits on a small solid tab, so text
   scrolling underneath never runs into it */
.svc-p-close {
  background: var(--svc-close-bg, #fff);
  padding: 0.35rem 0.4rem 0.35rem 0.75rem;
  margin-right: -0.4rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   Moving between pages (Alam, 30 Sep 2026): a short crossfade instead of a
   blank flash, in browsers that support it (Chrome, Edge, Safari 18.2+)
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* a video waiting to play sits invisible over its poster (script.js,
   makeLoopVideo); iPhone needs it in the page to load and play it */
video.vid-pending {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  opacity: 0 !important; pointer-events: none;
}
:where(.img-slot):has(> video.vid-pending) { position: relative; }

/* loading (Alam, 30 Sep 2026): while a picture loads its space stays
   calm, no box, no label; it fades in once ready. The filename label of
   a missing file only shows when the site is opened locally. */
.ph:not(.is-missing),
html:not(.is-local) .ph.is-missing {
  background: transparent !important;
  border-color: transparent !important;
  color: transparent !important;
}
.ph:not(.is-missing) > *,
html:not(.is-local) .ph.is-missing > * { visibility: hidden; }

/* phones only: full-screen button in the corner of each video (script.js,
   addFullscreenButton). Laptops never get the button. */
:where(.img-slot.has-vfull) { position: relative; }
.vfull {
  position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 6;
  width: 40px; height: 40px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(20, 21, 22, 0.55); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.vfull:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

:where(.landing-panel.has-vfull) { position: relative; }

/* ==========================================================================
   Phone held sideways (short, wide screen) — Alam, 30 Sep 2026: every
   opening fills exactly one screen, headings follow the screen HEIGHT so
   they never crowd the top bar, the LAB video fills its opening too
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --fs-hero:  clamp(1.6rem, 8.5vh, 2.4rem);
    --fs-panel: clamp(1.5rem, 8vh, 2.2rem);
    --fs-lede:  clamp(0.95rem, 4.2vh, 1.1rem);
  }
  .services-hero, .lab-hero { height: 100svh; min-height: 0; aspect-ratio: auto; }
  .services-hero-head { margin-bottom: 0.8rem; }
  .services-hero .stat .stat-num { font-size: clamp(1.2rem, 6.5vh, 1.7rem); }
  .lab-hero-media { position: absolute; inset: 0; aspect-ratio: auto; }
  .lab-hero-media video, .lab-hero-media img { object-fit: cover; }
  .lab-hero-over { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--gutter) 1.2rem; }
  .page-head .section-title { font-size: var(--fs-hero); }
}