/* ==========================================================================
   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: 0;   /* no outline under the banner */
  /* 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; }
/* the last panel (LAB) fits in the space left above the contact band at
   the end of the page; its background video scrolls up with it (JS) */
.landing .landing-panel:last-child { min-height: calc(100svh - var(--end-h, 0px)); }
.landing-bgs { will-change: transform; }
/* 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: center top;
  aspect-ratio: auto !important;
}
.pj-feature-plans .pj-dots { justify-content: center; margin-left: 0; }
/* no outline on sliders when clicked or dragged (keyboard focus keeps it) */
.pj-track:focus:not(:focus-visible) { outline: none; }
/* stacked drawings (Monte Everest): centred in their column */
.pj-plan-stack { justify-content: center; }
.pj-plan-item .pj-media { margin: 0 auto; }

/* 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.72; }
.pj-ribbon.is-focus .pj-track {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.45) 0, #000 7%, #000 93%, rgba(0,0,0,0.45) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,0.45) 0, #000 7%, #000 93%, rgba(0,0,0,0.45) 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%; }
/* a subtle fade: the edge keeps 55 % of the picture */
.pj-ribbon:not(.is-focus) .pj-track { --al: 1; --ar: 1; }
.pj-ribbon.fade-l:not(.is-focus) .pj-track { --fl: 6%; --al: 0.55; }
.pj-ribbon.fade-r:not(.is-focus) .pj-track { --fr: 6%; --ar: 0.55; }
.pj-ribbon:not(.is-focus):not(.is-still) .pj-track {
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,var(--al)) 0, #000 var(--fl), #000 calc(100% - var(--fr)), rgba(0,0,0,var(--ar)) 100%);
          mask-image: linear-gradient(to right, rgba(0,0,0,var(--al)) 0, #000 var(--fl), #000 calc(100% - var(--fr)), rgba(0,0,0,var(--ar)) 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;
}
.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 a 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="studio"] .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; }

/* ==========================================================================
   LAB index — the three studies as questions (after the start)
   ========================================================================== */
.lab-index { padding: var(--space-xl) var(--edge); background: var(--color-graphite); color: var(--color-on-dark); }
.lab-index-head { max-width: var(--page-max); margin: 0 0 var(--space-l); }
.lab-index-head h2 { color: var(--color-on-dark); max-width: 22em; }
.lab-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.lab-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.lab-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #151617; }
.lab-card-media .img-slot, .lab-card-media img, .lab-card-media .ph { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-card-media img { filter: brightness(0.75); transition: transform 1.2s var(--ease), filter 0.6s ease, opacity 0.4s ease-out; }
.lab-card-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.6s ease;
}
.lab-card.is-playing .lab-card-video { opacity: 1; }
.lab-card:hover .lab-card-media img, .lab-card:focus-visible .lab-card-media img { transform: scale(1.04); filter: brightness(1); }
.lab-card-body { padding-top: var(--space-s); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.lab-card-kicker { margin: 0; font-size: var(--fs-xs); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--color-lab-accent); }
.lab-card h3 { margin: 0; color: var(--color-on-dark); }
.lab-card-cta {
  margin-top: auto; padding-top: var(--space-s);
  font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-on-dark-soft);
  transition: color 0.3s;
}
.lab-card:hover .lab-card-cta { color: var(--color-lab-accent); }
.lab-film-name { margin: 0 0 0.3rem; color: var(--color-on-dark); font-size: var(--fs-m); font-weight: 500; }
@media (max-width: 900px) { .lab-index-grid { grid-template-columns: 1fr; gap: var(--space-l); } }
@media (prefers-reduced-motion: reduce) { .lab-card-media img, .lab-card-video { transition: none; } }

/* ==========================================================================
   TYPE SCALE (Alam, Sep 2026) — applied site-wide, last so it wins:
     body 16–18 px, line height 1.5–1.7
     H1 32–48 px, line height 1.1–1.3
     H2 24–32 px · H3 18–24 px · captions and small text 12–14 px
   ========================================================================== */
:root {
  --fs-hero:  clamp(2rem, 3.4vw, 3rem);       /* H1 32–48 */
  --fs-title: clamp(2rem, 3.4vw, 3rem);       /* H1 32–48 */
  --fs-panel: clamp(1.5rem, 2.4vw, 2rem);     /* H2 24–32 */
  --fs-h2:    clamp(1.5rem, 2.4vw, 2rem);     /* H2 24–32 */
  --fs-l:     clamp(1.125rem, 1.5vw, 1.375rem); /* H3 18–22 */
  --fs-lede:  clamp(1.0625rem, 1.2vw, 1.125rem); /* body 17–18 */
  --fs-body:  1.0625rem;                      /* body 17 */
  --fs-m:     1.125rem;                       /* body 18 */
  --fs-s:     0.875rem;                       /* caption 14 */
  --fs-small: 0.8125rem;                      /* caption 13 */
  --fs-xs:    0.75rem;                        /* caption 12 */
  --fs-kicker: 0.8125rem;                     /* caption 13 */
  --lh-body:  1.6;
}
h1 { line-height: 1.2; }
h2 { line-height: 1.2; }
h3 { line-height: 1.3; }
p, li, dd { line-height: var(--lh-body); }
/* H1: page titles */
.landing-hero h1, .section-title, .services-hero-head .section-title,
.lab-hero .services-hero-head .section-title, .svc-p-title { font-size: var(--fs-title); line-height: 1.15; }
/* H2: section titles */
.landing-panel h2, .pj-title, .cta-band h2, .lab-film h2, .lab-index-head h2,
.lab-panel h2, .lab-block h2, .svc-faq-title { font-size: var(--fs-h2); }
.statement-text { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.4; }  /* lead, H2 lower range */
/* H3: subheadings */
.lab-ch h3, .lab-card h3, .service h3, .founder h3, .svc-p-h, .svc-faq-list summary,
.pj-slide-cap h4, .lab-fslide-side h4, .lab-ftext-group h4 { font-size: var(--fs-l); }
.lab-card h3 { font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.3; }
/* big numbers (stats, key figures) stay in the H2 range */
.stat .stat-num, .services-hero .stat .stat-num, .lab-fact dt { font-size: clamp(1.5rem, 2.4vw, 2rem); }
/* body copy */
.lab-lead-text p { font-size: var(--fs-m); line-height: 1.6; }
.lab-lead-text p + p { font-size: var(--fs-body); }
.lab-film-sub, .lab-panel .lb-body, .lab-block .lb-body, .lab-ch-intro { font-size: var(--fs-body); }
.pj-intro p, .pj-row-text p, .pj-aside p, .pj-text p, #who p, .founder p, .pj-ribbon-text p, .pj-bleed-text p { font-size: var(--fs-body); }
/* captions and small text 12–14 */
.pj-caption, .pj-notes p, .pj-meta p, .pj-slide-cap p, .lab-slide figcaption p, .lab-fact dd,
.lab-fslide-side p, .form-consent, .form-layer, .site-footer, .contact-promise { font-size: var(--fs-s); }
.form-consent { font-size: var(--fs-s) !important; }
/* type scale: remaining headings brought into range */
#projects-title, .svc-p-title { font-size: var(--fs-h2); }
.pj-title { font-size: clamp(1.375rem, 2vw, 1.5rem); line-height: 1.25; }   /* 22–24 */
.contact-option h2, .legal-sec h2 { font-size: 1.5rem; }                    /* 24 */
.legal-sec h3 { font-size: 1.125rem; }                                       /* 18 */
#who .section-kicker, .founders-title { font-size: 1rem; }                   /* same label size */
.lab-index .lb-kicker { font-size: var(--fs-xs); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--color-lab-accent); margin-bottom: var(--space-s); }

/* ==========================================================================
   Round 7 (Alam, Sep 2026)
   ========================================================================== */
/* big display titles, as on the landing: the landing headline and the
   category titles as before, and the page titles of Studio, Professional
   services and the LAB at the landing headline's size */
:root { --fs-display: clamp(2.4rem, 6.5vw, 5.2rem); --fs-display-2: clamp(2.2rem, 5.5vw, 4.2rem); }
.landing-hero h1 { font-size: var(--fs-display); line-height: 1.1; }
.landing-panel h2 { font-size: var(--fs-display-2); line-height: 1.1; }
body[data-page="studio"] .page-head .section-title,
.services-hero-head .section-title,
.lab-hero .services-hero-head .section-title { font-size: var(--fs-display); line-height: 1.05; }

/* studio, from the founders down: the landing's text sizes */
.founder p, .pj-intro p, .pj-row-text p, .pj-aside p, .pj-text p, .pj-ribbon-text p, .pj-bleed-text p { font-size: var(--fs-lede); }
.pj-title { font-size: var(--fs-h2); line-height: 1.2; }
.founder h3 { font-size: var(--fs-l); }

/* Urban Synapse: the video on the grid (project column), not edge to edge */
.pj-bleed.is-grid .pj-bleed-media { width: 100%; margin-left: 0; }

/* hover zoom: the drawing under the mouse grows until the mouse leaves */
.pj-ribbon.is-hoverzoom .pj-track { overflow: visible; }
.pj-ribbon.is-hoverzoom .pj-slide { position: relative; z-index: 1; }
.pj-ribbon.is-hoverzoom .pj-media {
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
  transform-origin: center center;
  background: #fff;
}
.pj-ribbon.is-hoverzoom .pj-slide:first-child .pj-media { transform-origin: left center; }
.pj-ribbon.is-hoverzoom .pj-slide:last-child .pj-media { transform-origin: right center; }
@media (hover: hover) and (min-width: 701px) {
  .pj-ribbon.is-hoverzoom .pj-slide:hover { z-index: 5; }
  .pj-ribbon.is-hoverzoom .pj-slide:hover .pj-media {
    transform: scale(1.85);
    box-shadow: 0 24px 60px rgba(20, 21, 22, 0.18);
  }
}
@media (prefers-reduced-motion: reduce) { .pj-ribbon.is-hoverzoom .pj-media { transition: none; } }

/* LAB banner: more saturated green */
body[data-page="lab"] .top-banner {
  background: color-mix(in srgb, var(--color-lab-accent) 78%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.6);
          backdrop-filter: blur(10px) saturate(1.6);
}

/* Contact: a very subtle line under the banner, like the footer's */
body[data-page="contact"] .top-banner { border-bottom: 1px solid var(--color-line); }

/* LAB index: one study large, the others beside it (bento), then what is
   in progress; no count shown, so more studies can be added */
.lab-index-grid.is-bento {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: var(--grid-gap);
}
.lab-index-grid.is-bento .lab-card:first-child { grid-row: span 2; }
.lab-index-grid.is-bento .lab-card:first-child .lab-card-media { aspect-ratio: auto; flex: 1; min-height: 22rem; }
.lab-index-grid.is-bento .lab-card:first-child h3 { font-size: var(--fs-h2); line-height: 1.2; max-width: 20em; }
.lab-index-grid.is-bento .lab-card:not(:first-child) { display: grid; grid-template-columns: minmax(0, 1fr); }
.lab-index-grid.is-bento .lab-card:nth-child(n+4) { grid-column: span 1; }
/* in progress */
.lab-wip { margin-top: var(--space-xl); }
.lab-wip-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: var(--space-m); }
.lab-wip-head p { margin: 0; font-size: var(--fs-xs); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--color-on-dark-soft); }
.lab-wip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-lab-accent);
  box-shadow: 0 0 0 0 rgba(198, 240, 78, 0.6);
  animation: lab-pulse 2s ease-out infinite;
}
@keyframes lab-pulse {
  0% { box-shadow: 0 0 0 0 rgba(198, 240, 78, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(198, 240, 78, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 240, 78, 0); }
}
.lab-wip-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-s);
}
.lab-wip-item {
  padding: var(--space-m) var(--space-s) var(--space-m);
  background: rgba(255, 255, 255, 0.035);
  border: 1px dashed rgba(169, 172, 168, 0.28);
  display: flex; flex-direction: column; gap: 0.6rem;
  min-height: 8.5rem;
  transition: background 0.3s, border-color 0.3s;
}
.lab-wip-item:hover { background: rgba(198, 240, 78, 0.06); border-color: rgba(198, 240, 78, 0.45); }
.lab-wip-tag { font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-lab-accent); opacity: 0.85; }
.lab-wip-item h3 { margin: 0; font-size: var(--fs-l); color: var(--color-on-dark-soft); font-weight: 400; }
@media (max-width: 900px) {
  .lab-index-grid.is-bento { grid-template-columns: 1fr; }
  .lab-index-grid.is-bento .lab-card:first-child { grid-row: auto; }
  .lab-index-grid.is-bento .lab-card:first-child .lab-card-media { aspect-ratio: 16 / 9; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .lab-wip-dot { animation: none; } }

/* LAB films: the text alternates sides from one study to the next */
.lab-film.is-right .lab-film-over { display: flex; justify-content: flex-end; }
.lab-film.is-right .lab-film-inner { max-width: 40rem; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
@media (max-width: 700px) {
  .lab-film.is-right .lab-film-inner { text-align: left; align-items: flex-start; }
}
/* phones: a static row (all pictures fit) stays three across */
@media (max-width: 700px) {
  .pj-ribbon.is-still .pj-slide,
  .pj-ribbon.is-still.per-view.is-many .pj-slide { flex-basis: calc((100% - 2 * var(--rg)) / 3); }
}

/* Studio, from the top down to the founders: the sizes of the 28 Sep,
   17:58 version (Alam) */
body[data-page="studio"] .page-head .section-title { font-size: clamp(1.9rem, 4.5vw, 3.4rem); line-height: 1.12; }
body[data-page="studio"] .statement-text { font-size: calc(clamp(1.5rem, 3.2vw, 2.4rem) * 0.7); line-height: 1.35; }
body[data-page="studio"] #who p { font-size: 1rem; line-height: 1.65; }
body[data-page="studio"] .studio-cue { font-size: 0.8rem; }

/* founders: body text the size of the "Quiénes somos" text */
body[data-page="studio"] .founder p:not(.founder-role) { font-size: 1rem; line-height: 1.65; }
/* the contact band comes a little earlier after the last project */
body[data-page="studio"] #projects-section { padding-bottom: var(--space-m); }

/* studio sliders: soft edges — pictures dissolve into the page at the
   sides instead of ending on a visible line while you drag */
.pj-ribbon.is-focus .pj-track {
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.35) 4%, #000 13%, #000 87%, rgba(0,0,0,0.35) 96%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, rgba(0,0,0,0.35) 4%, #000 13%, #000 87%, rgba(0,0,0,0.35) 96%, transparent 100%);
}
.pj-ribbon.fade-l:not(.is-focus) .pj-track { --fl: 10%; --al: 0; }
.pj-ribbon.fade-r:not(.is-focus) .pj-track { --fr: 10%; --ar: 0; }

/* text under a slider or a video runs edge to edge on the grid */
.pj-ribbon-text, .pj-bleed-text, .pj-ribbon-text p, .pj-bleed-text p { max-width: none; }
.pj-cell > .pj-caption { max-width: none; }

/* only sliders marked `fade: true` (MJ Oasis, first) fade at the
   sides and dim their neighbours; every other slider shows its pictures
   plainly */
body .pj-ribbon:not(.has-fade):not(.is-still) .pj-track { -webkit-mask-image: none; mask-image: none; }
body .pj-ribbon.is-focus:not(.has-fade) .pj-slide.is-dim { opacity: 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; }

/* slider with its texts on the right (Urban Synapse plans): one plan at a
   time on two grid columns; the third holds a counter, the text of the
   plan on screen (all texts share one cell, so nothing jumps) and the
   index of titles to jump between plans */
.pj-ribbon.has-side {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--grid-gap);
  align-items: center;
}
.pj-side-main { grid-column: 1 / 3; min-width: 0; }
.pj-side-notes { grid-column: 3; }
.pj-side-count {
  margin: 0 0 var(--space-s);
  font-size: 0.8rem; letter-spacing: 0.12em; font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
}
.pj-side-now { color: var(--color-ink); }
.pj-side-body { display: grid; }
.pj-side-text {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.pj-side-text.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s var(--ease) 0.1s, transform 0.45s var(--ease) 0.1s; }
.pj-side-text h4 { font-size: 1rem; font-weight: 500; margin: 0 0 0.4rem; color: var(--color-ink); }
.pj-side-text p { font-size: 0.9rem; line-height: 1.6; color: var(--color-ink-soft); margin: 0; }
.pj-side-index {
  list-style: none; margin: var(--space-m) 0 0; padding: var(--space-s) 0 0;
  border-top: 1px solid var(--color-line);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.pj-side-note {
  all: unset; cursor: pointer;
  display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.25rem 0;
  font-size: 0.8rem; color: var(--color-ink-soft); opacity: 0.7;
  transition: opacity 0.3s, color 0.3s;
}
.pj-side-no { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; min-width: 1.4rem; }
.pj-side-note:hover { opacity: 1; }
.pj-side-note.is-active { opacity: 1; color: var(--color-ink); }
.pj-side-note:focus-visible { outline: 1px solid var(--color-ink); outline-offset: 3px; }
@media (max-width: 900px) {
  .pj-ribbon.has-side { grid-template-columns: 1fr; }
  .pj-side-main, .pj-side-notes { grid-column: 1; }
  .pj-side-notes { margin-top: var(--space-m); }
}

/* Monte Everest: the photo in row 1, its caption in row 2; the stacked
   elevations in row 1 too, pushed down so the ground line of the lower
   one sits exactly on the bottom edge of the photo */
.pj-feature.is-stack { grid-template-rows: auto auto; row-gap: 0; }
.pj-feature.is-stack .pj-feature-photo { grid-row: 1; }
.pj-feature.is-stack .pj-feature-cap { grid-row: 2; grid-column: 1; margin-top: var(--space-s); }
.pj-feature.is-stack .pj-plan-stack { grid-row: 1; align-self: end; justify-content: flex-end; }
.pj-feature.is-stack .pj-plan-item .pj-media { display: block; }
@media (max-width: 900px) {
  .pj-feature.is-stack .pj-feature-cap { margin-bottom: var(--space-m); }
}

/* Urban Synapse plans: no dots (the index on the right does the job) and
   the plans a little smaller, centred in their two columns */
.pj-ribbon.has-side .pj-dots { display: none; }
.pj-ribbon.has-side .pj-side-main .pj-track { width: 80%; margin-inline: auto; }
@media (max-width: 900px) { .pj-ribbon.has-side .pj-side-main .pj-track { width: 88%; } }

/* phones (Alam, 30 Sep 2026): the Urban Synapse plans use the full screen
   width, and the four floors sit right under the plan as buttons (2 x 2),
   so you can switch floors while looking at the plan; the text follows */
@media (max-width: 700px) {
  .pj-ribbon.has-side .pj-side-main .pj-track {
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
  }
  .pj-ribbon.has-side .pj-side-notes { display: flex; flex-direction: column; margin-top: var(--space-s); }
  .pj-ribbon.has-side .pj-side-count { display: none; }
  .pj-ribbon.has-side .pj-side-index {
    order: -1;
    margin: 0; padding: 0; border-top: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  }
  .pj-ribbon.has-side .pj-side-index li { display: flex; }
  .pj-ribbon.has-side .pj-side-note {
    box-sizing: border-box; width: 100%; min-height: 44px;
    padding: 0.55rem 0.7rem; gap: 0.5rem; align-items: center;
    border: 1px solid var(--color-line);
    font-size: 0.78rem; line-height: 1.3; opacity: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .pj-ribbon.has-side .pj-side-note.is-active { border-color: var(--color-ink); color: var(--color-ink); }
  .pj-ribbon.has-side .pj-side-no { min-width: 0; }
  .pj-ribbon.has-side .pj-side-body { margin-top: var(--space-m); }
}

/* ==========================================================================
   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; }
}
/* the same 1 px bottom edge on every banner (invisible where no line is
   wanted), so the words sit at exactly the same height on every page */
body:not([data-page="contact"]) .top-banner { border-bottom: 1px solid transparent; }

/* phones: Monte Everest elevations follow the caption right away (the
   box no longer keeps the photo's 3:4 height, which left a white gap) */
@media (max-width: 700px) {
  .pj-feature.is-stack .pj-plan-stack { aspect-ratio: auto; justify-content: flex-start; }
}


/* phones: a row that fits on a laptop (the three Urban Synapse
   axonometrics) slides like the other carousels, one picture at a
   time, dots below */
@media (max-width: 700px) {
  .pj-ribbon.is-phone-slide .pj-slide,
  .pj-ribbon.is-phone-slide.per-view.is-many .pj-slide { flex-basis: 100%; }
  /* one picture at a time: nothing of the next one shows, no edge fade */
  .pj-ribbon.is-phone-slide .pj-track { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   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; }

/* tall drawings (Alquerías plans): as big as the screen height allows,
   centred in their slot, never cut (Alam, 30 Sep 2026) */
.pj-ribbon.is-tall .pj-media {
  width: min(100%, calc((100svh - var(--banner-h-top) - 5rem) * var(--ar, 0.5)));
  margin-inline: auto;
}

/* 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; }


/* phones (Alam, 30 Sep 2026): Urban Synapse plans change ONLY with the
   floor buttons: one whole plan at a time, nothing of the next one, and
   no swiping (the page still scrolls up and down) */
@media (max-width: 700px) {
  .pj-ribbon.has-side .pj-side-main .pj-track { overflow-x: hidden; touch-action: pan-y; -webkit-mask-image: none; mask-image: none; }
  .pj-ribbon.has-side .pj-slide { flex-basis: 100% !important; }
}
/* phones: the three Urban Synapse axonometrics come up closer to the plan
   text above them (less empty space) */
@media (max-width: 700px) {
  .pj-ribbon.has-side + .pj-ribbon { margin-top: -2.5rem; }
}

/* ==========================================================================
   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); }
}

/* ==========================================================================
   Page load (Alam, 30 Sep 2026): until script.js has built the page, only
   the empty top bar and the page colour show (no half-built flash: dark
   logo, light strip, empty blocks). Pages that open dark are dark at once.
   ========================================================================== */
html.is-rendering main,
html.is-rendering .site-footer,
html.is-rendering #bottom-banner,
html.is-rendering .top-banner > * { visibility: hidden; }
html.is-rendering body[data-page="landing"],
html.is-rendering body[data-page="services"],
html.is-rendering body[data-page="studio"],
html.is-rendering body[data-page="lab"] { background: var(--color-graphite); }