/* ═══════════════════════════════════════
   STUDIO SGA — Portfolio Stylesheet
   ═══════════════════════════════════════ */

/* ─── FUTURA PT — local font (must be installed) ── */
@font-face {
  font-family: "Futura PT-Book";
  src: local("Futura PT-Book");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Futura PT";
  src: local("Futura PT");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Futura";
  src: local("Futura");
  font-weight: 500;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Futura PT Heavy";
  src: local("Futura PT Heavy");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

/* ─── RESET & BASE ───────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

:root {
  /* ── Colours ── */
  --dark:              #434040;
  --cream:             #F4F0E5;
  --light-bg:          #FFFEFB;
  --brown:             #7A3B26;
  --green:             #2D5D4F;
  --off-wht:           #F2EDE0;
  --near-blk:          #2B2B2B;

  /* Figma design tokens — mapped to site colours */
  --kadappa:           rgba(43, 43, 43, 1);    /* = --near-blk */
  --linen:             rgba(244, 240, 229, 1); /* = --cream    */
  --burnt-umber:       rgba(122, 59, 38, 1);   /* = --brown    */
  --emerald-granite:   rgba(45, 93, 79, 1);    /* = --green    */

  /* ── Typography ── */
  --font:              'Futura PT-Book', 'Futura PT', 'Jost', sans-serif;

  /* Figma type tokens */
  --desktop-navbar-title-font-family:  "Futura PT", Helvetica;
  --desktop-navbar-title-font-size:    20px;
  --desktop-navbar-title-font-weight:  400;
  --desktop-page-title-font-family:    "Futura", Helvetica;
  --desktop-page-title-font-size:      32px;
  --desktop-page-title-font-weight:    500;

  /* ── Easing ── */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  height: -webkit-fill-available; /* needed for iOS fill-available to propagate */
}

body {
  font-family: var(--font);
  background: var(--dark);
  background-image: url('../images/img_paper_texture.jpg');
  background-size: cover;
  background-attachment: fixed;
  color: var(--cream);
  overflow-x: clip;
  cursor: default;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ─────────────────────────────────────
   SITE HEADER — single fixed nav
   ───────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  height: 88px;
  margin-top: 0;
  padding-top: 32px;
  opacity: 1;
  pointer-events: auto;
  transition: color 0s;
  color: #000000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header.visible {
  opacity: 1;
  pointer-events: auto;
  color: var(--cream);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Toggle to brown text when scrolled onto light sections */
.site-header.header--light {
  color: var(--brown);
}

.site-header__logo {
  flex-shrink: 0;
  width: auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.site-header__logo svg {
  width: 90px !important;
  height: auto !important;
}

.site-header__links {
  display: flex;
  align-items: center;
  gap: clamp(32px, 10vw, 100px);
}

.site-header__links a {
  font-family: var(--desktop-navbar-title-font-family, var(--font));
  font-size: 16px;
  font-weight: var(--desktop-navbar-title-font-weight, 600);
  letter-spacing: 0;
  text-transform: uppercase;
  color: inherit;
  transition: opacity 0.2s;
}

.site-header__links a:hover { opacity: 0.45; }

/* Active page indicator — used on studio.html (STUDIO) and project.html (PROJECTS) */
.site-header__links .nav__link--active {
  opacity: 1;
}
.site-header__links .nav__link--active:hover { opacity: 1; }

/* ─── SECTIONS ───────────────────────── */
section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

/* ─────────────────────────────────────
   PRELOADER — three separate image panels
   ───────────────────────────────────── */
#preloader {
  display: var(--preloader-display, block);
  position: fixed;
  inset: 0;
  z-index: 500;
  overflow: hidden;
  background: var(--dark);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ─── THREE IMAGE PANELS ─────────────
   Each panel holds its own instance of
   the corridor image. Left panel slides UP,
   right panel slides DOWN, center narrows
   to become the hero-dark window.
   ─────────────────────────────────── */
.preloader__panel {
  position: absolute;
  top: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
  transition:
    width     1.1s var(--ease-expo),
    left      1.1s var(--ease-expo),
    height    1.1s var(--ease-expo),
    top       1.1s var(--ease-expo),
    transform 1.2s var(--ease-expo);
}

/* Separated initial positions — match Figma (72px left margin, 48px gaps, 400px wide panels on 1440) */
.preloader__panel--s { left: 5%;       width: 27.778%; }
.preloader__panel--g { left: 36.111%;  width: 27.778%; }
.preloader__panel--a { left: 67.222%;  width: 27.778%; }

.preloader__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Thin dividers — hidden until assembled */
.preloader__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(43, 43, 43, 0.5);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s var(--ease-expo);
}
.preloader__divider--1 { left: 33.333%; }
.preloader__divider--2 { left: 66.666%; }

/* Paper texture overlay */
.preloader__paper-texture {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url('../images/Paper Texture.png') center/cover no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.8;
}

/* SGA letters — absolute overlay spanning full preloader */
.preloader__sga {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}

.preloader__sga svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ─── LETTERS — aligned & visible from page load ─────────────
   Panels start at wide-gap (default) positions.
   Letters start straight/aligned with smooth transition ready.
   ─────────────────────────────────── */
.sga__s,
.sga__g,
.sga__a {
  opacity: 1;
  transform: translateY(0);
  transition: transform 1.1s var(--ease-expo);
}

/* ─── SCATTERED STATE ─────────────────────────────────────────
   JS adds .scattered after initial hold (~800ms).
   Letters shift to offset positions (no scale change).
   ─────────────────────────────────── */
#preloader.scattered .sga__s { transform-box: fill-box; transform-origin: center; transform: translateY(20vh) scale(0.85); }
#preloader.scattered .sga__g { transform-box: fill-box; transform-origin: center; transform: translateY(-20vh) scale(0.85); }
#preloader.scattered .sga__a { transform-box: fill-box; transform-origin: center; transform: translateY(-20px) scale(0.85); }

/* Panels tighten (7px gaps) simultaneously with letter scatter */
#preloader.scattered .preloader__panel--s { left: 0;        width: 32.917%; }
#preloader.scattered .preloader__panel--g { left: 33.403%;  width: 32.986%; }
#preloader.scattered .preloader__panel--a { left: 66.875%;  width: 32.917%; }


/* ─── DISASSEMBLY ─────────────────────────────────────────────
   S + A: original exits (down). G: shrinks to hero window size.
   ─────────────────────────────────── */
#preloader.disassemble .preloader__panel--s {
  transform: translateY(-110%);
  transition-duration: 0.85s;
  transition-delay: 0s;
}
#preloader.disassemble .preloader__panel--g {
  left: calc(50% - 70px);
  width: 140px;
  top: 50%;
  height: 250px;
  transform: translateY(-50%);
  transition-duration: 0.85s;
  transition-delay: 0s;
}
#preloader.disassemble .preloader__panel--a {
  transform: translateY(110%);
  transition-duration: 0.85s;
  transition-delay: 0s;
}
#preloader.disassemble .preloader__divider {
  opacity: 0;
  transition-delay: 0.1s;
}
#preloader.disassemble .sga__s {
  animation: sga-s-exit 0.85s var(--ease-expo) forwards;
}
#preloader.disassemble .sga__g {
  opacity: 0;
  transition: none;
}
#preloader.disassemble .sga__a {
  animation: sga-a-exit 0.85s var(--ease-expo) forwards;
}

@keyframes sga-s-exit {
  from { transform: translateY(20vh); opacity: 1; }
  to   { transform: translateY(150vh); opacity: 0; }
}
@keyframes sga-a-exit {
  from { transform: translateY(-20px); opacity: 1; }
  to   { transform: translate(120vw, -20px); opacity: 0; }
}

/* ─────────────────────────────────────
   HERO — unified sticky section
   Wrapper is tall (scroll space for
   transition + parallax). Inner content
   sticks to top while scroll drives
   the dark→light animation.
   ───────────────────────────────────── */
#hero-dark {
  position: relative;
  height: calc(100vh + 1340px);
  background-color: var(--cream);
  background-image: url('../images/img_paper_texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.hero-dark__content {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: var(--dark);
  background-image: url('../images/img_paper_texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-blend-mode: multiply;
}

/* ── Light transition — all timings use explicit cubic-bezier (vars break transition shorthand) ── */
.hero-dark__content.hero--transitioning {
  transition: background-color 1.4s cubic-bezier(0.16,1,0.3,1);
}
.hero-dark__content.hero--transitioning .hero-dark__left,
.hero-dark__content.hero--transitioning .hero-dark__right {
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1),
              color    1.4s cubic-bezier(0.16,1,0.3,1),
              right    1.4s cubic-bezier(0.16,1,0.3,1),
              left     1.4s cubic-bezier(0.16,1,0.3,1);
}
.hero-dark__content.hero--transitioning .hero-dark__window {
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1),
              opacity  0.8s cubic-bezier(0.16,1,0.3,1);
}
.hero-dark__content.hero--transitioning .hero-dark__trees {
  transition: transform 1.3s cubic-bezier(0.16,1,0.3,1) 0.25s,
              opacity  1.1s cubic-bezier(0.16,1,0.3,1) 0.25s;
}

/* ── Window: pinned to exact viewport centre
   Matches preloader G strip final position — no transition needed,
   it "stays" as the preloader disappears.                        */
.hero-dark__window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  height: 250px;
  overflow: hidden;
  border-radius: 2px;
  z-index: 1;
  opacity: 1; /* always visible — seamless hand-off from preloader */
}

.hero-dark__window img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Trees strip — landscape, expands left & right from centre between texts */
.hero-dark__trees {
  position: absolute;
  top: 50%;
  left: 50%; /* overridden by JS to midpoint between texts */
  width: 0;
  height: 50px;
  overflow: hidden;
  border-radius: 2px;
  z-index: 1;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.hero-dark__trees img,
.hero-dark__trees video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Work intro overlay — mirrors the actual work__label design.
   Line draws top→bottom during P1→P2.
   OUR WORK rises from below during P2→P3, centred in the column to the left of the line. */
.hero-work-intro {
  position: absolute;
  left: 24px;
  top: 0;
  width: 168px;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.hero-work-intro__line {
  position: absolute;
  right: 0;     /* line on the right edge */
  bottom: 0;    /* anchored at bottom — grows upward */
  top: auto;
  width: 1.5px;
  height: 0;    /* JS drives 0 → MAX_LINE_PCT% upward */
  background: var(--brown);
}

.hero-work-intro__label-wrap {
  position: absolute;
  right: 12px; /* sits close to the vertical line on the right edge */
  top: 50%;    /* JS drives translateY(calc(-50% + Ypx)) for centering + rise animation */
  display: flex;
  justify-content: flex-end;
  opacity: 0; /* driven by JS */
}

.hero-work-intro__label {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* matches work__label span — reads bottom-to-top */
  font-family: 'Futura PT', var(--font);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 24.96px;
  text-transform: uppercase;
  color: var(--brown);
}

/* ── STUDIO — JS alignHeroDarkO() sets final right value so O centres over strip */
.hero-dark__left {
  position: absolute;
  top: 50%;
  right: calc(50% + 10px); /* rough default — overridden by JS */
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  font-family: 'Futura PT', var(--font);
  font-size: clamp(52px, 9.7vw, 140px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-transform: uppercase;
  line-height: 1;
  z-index: 2;
}

/* ── SGA — JS alignHeroDarkO() sets left = winRect.right + gap */
.hero-dark__right {
  position: absolute;
  top: 50%;
  left: calc(50% + 67px); /* rough default — overridden by JS */
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  font-family: 'Futura PT', var(--font);
  font-size: clamp(52px, 9.7vw, 140px);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cream);
  text-transform: uppercase;
  line-height: 1;
  z-index: 2;
}

/* ── Characters: start close to final position but heavily tilted so the
   scramble is clearly visible on screen, then rise & straighten together.
   --char-y  : small offset below final pos (80–160px) — keeps them in view
   --char-rot: dramatic tilt so scramble reads clearly                    */
.hero-dark__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(var(--char-y, 120px)) rotate(var(--char-rot, 0deg));
  /* No transition — scroll drives opacity and transform via inline styles */
}

/* STUDIO — each letter at a different height + big individual tilt */
.hero-dark__left .hero-dark__char:nth-child(1) { --char-y: 140px; --char-rot: -38deg; --char-delay: 0.00s; }
.hero-dark__left .hero-dark__char:nth-child(2) { --char-y:  90px; --char-rot:  30deg; --char-delay: 0.06s; }
.hero-dark__left .hero-dark__char:nth-child(3) { --char-y: 160px; --char-rot: -34deg; --char-delay: 0.12s; }
.hero-dark__left .hero-dark__char:nth-child(4) { --char-y:  80px; --char-rot:  42deg; --char-delay: 0.18s; }
.hero-dark__left .hero-dark__char:nth-child(5) { --char-y: 130px; --char-rot: -26deg; --char-delay: 0.22s; }
.hero-dark__left .hero-dark__char:nth-child(6) { --char-y: 100px; --char-rot:  32deg; --char-delay: 0.27s; }

/* SGA — equally dramatic */
.hero-dark__right .hero-dark__char:nth-child(1) { --char-y: 120px; --char-rot: -36deg; --char-delay: 0.05s; }
.hero-dark__right .hero-dark__char:nth-child(2) { --char-y:  85px; --char-rot:  40deg; --char-delay: 0.13s; }
.hero-dark__right .hero-dark__char:nth-child(3) { --char-y: 150px; --char-rot: -30deg; --char-delay: 0.20s; }

/* Revealed state: perfectly straight, settled in final position */
.hero-dark__char.visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* ── Sub-line: pinned to bottom, three directional entrances */
.hero-dark__sub {
  position: absolute;
  bottom: 85px;
  left: 64px;
  right: 64px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: var(--desktop-page-title-font-family, var(--font));
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: normal;
  color: var(--cream);
}

.hero-dark__sub-left {
  opacity: 0;
  transform: translateX(-70px);
}
.hero-dark__sub-center {
  opacity: 0;
  transform: translateY(30px);
  color: rgba(244,240,229,0.5);
  font-style: italic;
}
.hero-dark__sub-right {
  opacity: 0;
  transform: translateX(70px);
}


/* ─────────────────────────────────────
   WORK SECTION
   ───────────────────────────────────── */
#work {
  background-color: var(--cream);
  background-image: url('../images/img_paper_texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  padding-top: 120px;
  padding-bottom: 10px;
  padding-left: 48px;
  padding-right: 48px;
  position: relative;
  isolation: isolate;
}

/* Paper texture overlay sits above project selection highlights */
#work::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/img_paper_texture.jpg') center/cover no-repeat fixed;
  mix-blend-mode: multiply;
  opacity: 0.06;
  pointer-events: none;
  z-index: 3;
}

.work__body {
  display: flex;
  gap: 16px;
  padding: 0;
  position: relative;
}

/* ─── LEFT SIDEBAR ───────────────────── */
.work__sidebar {
  width: 168px;
  flex-shrink: 0;
  position: relative;
  border-right: none; /* hero-work-intro__line provides the single visible line */
}

.work__sidebar-label {
  display: none; /* hero-work-intro__label is the single persistent OUR WORK */
  position: sticky;
  bottom: 64px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: 'Futura PT', var(--font);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 24.96px;
  text-transform: uppercase;
  color: var(--brown);
  padding-bottom: 8px; /* 2px gap from line at top */
}

/* Grid */
.work__grid {
  flex: 1;
  padding: 0;
  max-width: 1080px;
}

/* ─── PROJECT ROWS ───────────────────── */
.project {
  min-height: 410px;
  margin-bottom: 96px;
  opacity: 0;
  transform: translateY(70px);
  transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo), background 0.2s;
  cursor: pointer;
  position: relative;
}

/* Selection extends 10px toward the line, leaving 6px gap (Figma: selection x=174, line x=168) */
.project:hover {
  background: #FFFAEA;
  margin-left: -10px;
  padding-left: 10px;
}
/* Odd rows have 84px left padding — restore it + the 10px hover shift */
.project--odd:hover {
  padding-left: 94px;
}
.project.visible { opacity: 1; transform: translateY(0); }

/* ─── ODD ROWS (A01,C01,E01,G01,I01) ────────────────────────
   Figma: 74px offset | 302px text | 140px gap | 260px img1 | 10px | 260px img2
   ─────────────────────────────────────────────────────────── */
.project--odd {
  display: grid;
  grid-template-columns: 302px 140px 260px 10px 260px;
  grid-template-areas: "info . img1 . img2";
  align-items: start;
  padding: 25px 0;
  padding-left: 84px;
}

/* ─── EVEN ROWS (B01,D01,F01,H01) ───────────────────────────
   Figma: 260px img1 | 10px | 302px text | 140px | 260px img2
   ─────────────────────────────────────────────────────────── */
.project--even {
  display: grid;
  grid-template-columns: 260px 10px 302px 140px 260px;
  grid-template-areas: "img1 . info . img2";
  align-items: start;
  padding: 25px 0;
}

/* ─── INFO COLUMN ─── */
.project__left {
  grid-area: info;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.project__code {
  font-family: 'Futura PT Heavy', 'Futura PT', var(--font);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.6px;
  color: var(--green);
  text-transform: uppercase;
  display: block;
  margin-bottom: 25px;
}

.project__info {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.project__name {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.64px;
  line-height: 1.4;
}

.project__name span {
  font-weight: 400;
  opacity: 0.7;
}

.project__desc {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: var(--green);
  letter-spacing: 0.64px;
  line-height: 1.65;
}

/* ─── IMAGE COLUMNS ─── */
.project__img-col {
  display: flex;
  flex-direction: column;
}

.project__img-col-1 { grid-area: img1; }
.project__img-col-2 { grid-area: img2; }

.project__img-num {
  font-family: 'Futura PT Heavy', 'Futura PT', var(--font);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.6px;
  color: var(--green);
  margin-bottom: 8px;
  flex-shrink: 0;
}

.project__img-wrap {
  overflow: hidden;
}

/* Image 1 always fills row height */
.project__img-col-1 .project__img-wrap { height: 385px; }

/* Image 2 heights: even rows 288px, odd rows 219px */
.project--odd  .project__img-col-2 .project__img-wrap { height: 219px; }
.project--even .project__img-col-2 .project__img-wrap { height: 288px; }

.project__img-wrap img {
  border-radius: 2px;
  transition: transform 0.6s var(--ease-soft);
}

.project:hover .project__img-wrap img { transform: scale(1.03); }

/* ─────────────────────────────────────
   CONTACT
   ───────────────────────────────────── */
#contact {
  background-color: var(--cream);
  background-image: url('../images/img_paper_texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding-top: 48px;
  min-height: 0; /* override global section { min-height: 100vh } */
}

/* ─── "CONNECT WITH US" heading ─── */
.contact__heading {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--near-blk);
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding-left: 0;
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease-expo) 0.1s, transform 0.7s var(--ease-expo) 0.1s;
}
.contact__heading.visible { opacity: 1; transform: translateY(0); }

/* ─── Visiting cards layout ─── */
.contact__cards {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding-bottom: 40px;
}

.contact__card {
  flex: 1 1 0;
  min-width: 0;
  height: 360px;
  opacity: 0;
  transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo), box-shadow 0.4s ease;
}

.contact__card.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ─── Brown card: horizontal ticker (Figma 0.10_Contact) ─── */
.contact__card--front {
  transform: translateX(-80px);
  background: var(--brown);
  color: var(--cream);
  border-radius: 4px;
  display: flex;
  align-items: center;       /* vertically center the ticker */
  justify-content: center;
  overflow: hidden;
  padding: 0;
}

/* Ticker wrapper — clips to single line */
.contact__ticker {
  width: 100%;
  overflow: hidden;
}

/* Scrolling track — all items in one row */
.contact__ticker-track {
  display: flex;
  align-items: center;
  gap: 16px;
  white-space: nowrap;
  will-change: transform;
  animation: contactTicker 18s linear infinite;
}

@keyframes contactTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.contact__ticker-name {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.contact__ticker-role {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 400;
  color: rgba(244,240,229,0.6);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.contact__ticker-sep {
  font-size: 20px;
  color: rgba(244,240,229,0.4);
  flex-shrink: 0;
}

.contact__ticker-gap {
  flex-shrink: 0;
}

.contact__card--back {
  transform: translateX(80px);
  background-color: #F4F0E5;
  background-image: url('../images/card_texture.jpg');
  background-size: cover;
  background-blend-mode: multiply;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 30px;
  margin-left: 0;
}

.contact__card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.contact__card-brand {
  font-family: 'Futura PT', var(--font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--near-blk);
}

.contact__card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.contact__address-block {
  text-align: right;
}

.contact__card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.contact__card-header > span {
  font-family: 'Futura PT', var(--font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--near-blk);
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact__details a {
  font-family: 'Futura PT', var(--font);
  font-size: 22px;
  font-weight: 600;   /* Futura PT Demi */
  color: var(--near-blk);
  letter-spacing: 0;
  line-height: 1.25;
  transition: color 0.2s;
}

.contact__details a:hover { color: var(--brown); }

.contact__address {
  font-family: 'Futura PT', var(--font);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(43,43,43,0.5);
  line-height: 1.5;
  text-decoration: none;
  display: block;
}
a.contact__address:hover {
  color: rgba(43,43,43,0.8);
}

/* ─── Separator between cards and footer ─── */
.contact__sep {
  height: 2px;
  background-color: rgba(122,59,38,0.3);
  width: min(1240px, calc(100% - 48px));
  margin: 70px auto 70px;
}

/* ─────────────────────────────────────
   FOOTER (3-column: photo | address | nav)
   Figma: photo x=250 w=202, address x=722 w=268, links x=1118 w=143
   ───────────────────────────────────── */
.site-footer {
  background-color: var(--cream);
  background-image: url('../images/img_paper_texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  border-top: none;
}

.site-footer__grid {
  display: grid;
  /* 250px offset | 202px photo | 270px gap | 268px address | 128px gap | 220px nav */
  grid-template-columns: 202px 270px 268px 128px 250px;
  grid-template-areas: "photo . address . nav";
  padding: 60px 0 60px 250px;
  align-items: start;
  position: relative;
}

.site-footer__photo {
  grid-area: photo;
}

.site-footer__photo video {
  width: 202px;
  height: 170px;
  object-fit: cover;
  display: block;
}

.site-footer__address-col {
  grid-area: address;
  padding-top: 12px;
}

.site-footer__addr {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 400;
  color: rgb(43,43,43);
  line-height: 1.4;
  margin-bottom: 48px;
}

.site-footer__contact-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__contact-links a {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 400;
  color: rgb(43,43,43);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.site-footer__contact-links a:hover { color: var(--brown); }

.site-footer__nav-col {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 12px;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 40px;
}

.site-footer__nav a {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: rgba(10,20,47,0.75);
  line-height: 2;
  transition: color 0.2s;
}

.site-footer__nav a:hover { color: var(--brown); }

.site-footer__nav button {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: rgba(10,20,47,0.75);
  line-height: 2;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.2s;
}
.site-footer__nav button:hover { color: var(--brown); }

.site-footer__newsletter {
  display: flex;
  align-items: center;
  border: 1px solid rgba(43,43,43,0.25);
  border-radius: 40px;
  margin-bottom: 24px;
  height: 42px;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}

.site-footer__newsletter input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: var(--brown);
  padding: 0 14px;
  outline: none;
}

.site-footer__newsletter input::placeholder {
  color: var(--brown);
  opacity: 0.8;
}

.site-footer__newsletter button {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  margin: 0;
  background: var(--brown);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.site-footer__newsletter button:hover { opacity: 0.85; }

.site-footer__copy {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  color: rgba(10,20,47,0.65);
}

.site-footer__admin {
  position: absolute;
  bottom: 60px;
  right: 100px;
  font-size: 11px;
  color: rgba(43,43,43,0.3);
  transition: color 0.2s;
}

.site-footer__admin:hover { color: var(--brown); }

/* ─────────────────────────────────────
   SCROLL INDICATOR
   ───────────────────────────────────── */
.scroll-hint {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fade-in-hint 1s ease 1.2s forwards;
  z-index: 10;
}

.scroll-hint span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream);
}

.scroll-hint__line {
  width: 1px;
  height: 40px;
  background: var(--cream);
  animation: line-pulse 1.8s ease infinite 1.2s;
  transform-origin: top;
}

@keyframes fade-in-hint {
  to { opacity: 0.6; }
}

@keyframes line-pulse {
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50% { transform: scaleY(0.5); opacity: 0.2; }
}

/* ─────────────────────────────────────
   WORK HEADER scroll reveal
   ───────────────────────────────────── */
.work__title-left, .work__title-right {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1);
}
.work__header.revealed .work__title-left,
.work__header.revealed .work__title-right {
  opacity: 1;
}
.work__header.revealed .work__title-right {
  transition-delay: 0.1s;
}

/* ─────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1200px) {
  #work {
    padding-top: 60px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .project--odd {
    grid-template-columns: minmax(160px, 302fr) 40px minmax(0, 260fr) 6px minmax(0, 260fr);
    padding-left: 40px;
  }
  .project--even {
    grid-template-columns: minmax(0, 260fr) 6px minmax(160px, 302fr) 40px minmax(0, 260fr);
    padding-left: 0;
  }
  .project__img-col-1 .project__img-wrap,
  .project--odd  .project__img-col-2 .project__img-wrap,
  .project--even .project__img-col-2 .project__img-wrap {
    height: auto;
    aspect-ratio: 3/4;
  }
}

@media (max-width: 900px) {
  .hero-dark__title { gap: 20px; }
}

/* ─── Preloader — Mobile (max-width: 600px) ──────────────────────────────
   Problem: SVG uses preserveAspectRatio="xMidYMid slice" which on portrait
   screens (852px tall) scales by HEIGHT → 0.832x → 1198px wide SVG, cropping
   S and A completely off-screen.
   Fix: height:auto makes SVG scale to width instead (0.273x → 280px tall).
   flex-center vertically positions letters in the middle of the screen.     */

@media (max-width: 600px) {
  /* ── Panels: Figma 0.0_Pre-load (393px frame) ──────────────────────────
     Stone x=32 w=98, Shadow x=148 w=98, Forest x=263 w=98
     As %: 32/393=8.14%, 98/393=24.94%                                      */
  .preloader__panel--s { left: 8.14%;  width: 24.94%; }
  .preloader__panel--g { left: 37.66%; width: 24.94%; }
  .preloader__panel--a { left: 66.92%; width: 24.94%; }

  /* Dividers between panels */
  .preloader__divider--1 { left: 33.333%; }
  .preloader__divider--2 { left: 66.667%; }

  /* ── Scattered panels: Figma 0.1_Pre-load ──────────────────────────────
     Stone x=−2 w=130, Shadow x=132 w=130, Forest x=266 w=130              */
  #preloader.scattered .preloader__panel--s { left: 0;       width: 32.5%; }
  #preloader.scattered .preloader__panel--g { left: 33.75%;  width: 32.5%; }
  #preloader.scattered .preloader__panel--a { left: 67.5%;   width: 32.5%; }

  /* ── SGA SVG: scale to width so all letters are visible ────────────────
     height:auto → SVG = 393×280px, flex centers it at y≈286 in 852px screen
     Letters in SVG space y=249–766 → viewport y=354–495, center y≈425 ✓   */
  .preloader__sga {
    display: flex;
    align-items: center;
  }
  .preloader__sga svg {
    height: auto;
  }

  /* ── Scatter: CSS px on SVG elements = SVG user units (not viewport px) ─
     Scale = 393px / 1440 SVG-units = 0.273. So to move 144px on screen:
       144px ÷ 0.273 = 527 SVG user units.
     Figma 0.1_Pre-load: S center 570 (+144 from 426), G center 282 (−144) */
  #preloader.scattered .sga__s { transform: translateY(527px); }
  #preloader.scattered .sga__g { transform: translateY(-527px); }
  #preloader.scattered .sga__a { transform: translateY(201px); }  /* +55px on screen */

  /* ── Exit keyframes — from-state must match mobile scatter (SVG units) ── */
  @keyframes sga-s-exit {
    from { transform: translateY(527px);         opacity: 1; }
    to   { transform: translateY(4400px);        opacity: 0; }  /* 120vh/0.273≈4400 */
  }
  @keyframes sga-g-exit {
    from { transform: translateY(-527px);        opacity: 1; }
    to   { transform: translateY(-4400px);       opacity: 0; }
  }
  /* A exits RIGHT */
  @keyframes sga-a-exit {
    from { transform: translateY(201px);         opacity: 1; }
    to   { transform: translate(5280px, 201px);  opacity: 0; }  /* 120vw/0.273≈5280 */
  }
}

@media (max-width: 600px) {
  .site-header { padding: 16px 20px; }
  .site-header__links { display: none; }
  .hero-dark__content { padding: 0; height: 100dvh; background-attachment: scroll; }

  /* ── Hero window — Figma mobile: 77×264px in 393px frame → ~20vw wide ── */
  /* JS alignHeroDarkO() reads the window rect to position STUDIO & SGA    */
  .hero-dark__window {
    width: 20vw;
    height: calc(20vw * 264 / 77); /* preserves 77:264 Figma aspect ratio  */
  }

  /* ── Preloader disassemble: G panel must match hero window exactly ── */
  #preloader.disassemble .preloader__panel--g {
    left: calc(50% - 10vw);
    width: 20vw;
    height: calc(20vw * 264 / 77);
  }

  /* ── OUR WORK sidebar: shown on mobile (handled in 768px block) ── */

  /* ── Trees strip: slightly taller than STUDIO/SGA text (~72px) on mobile */
  .hero-dark__trees {
    height: 90px;
  }

  /* ── STUDIO / SGA — Figma mobile: 72px tall letters at 393px frame ──   */
  /* 72 / 393 = 18.3vw. Clamp keeps it in [60,80] across phone sizes.     */
  .hero-dark__left,
  .hero-dark__right {
    font-size: clamp(60px, 18.3vw, 80px);
  }

  /* ── Sub-line — Figma: centered col, 16px, gap 24px, bottom 75px ──    */
  /* Text at y=648/699/750 in 852px frame → bottom: 852-(750+27)=75px    */
  .hero-dark__sub {
    bottom: 75px;
    left: 24px;
    right: 24px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    font-size: 16px;
    text-align: center;
  }
  /* Mobile: left + right full slide (no fade), center from left */
  .hero-dark__sub-left   { transform: translateX(110vw);  opacity: 1; }
  .hero-dark__sub-right  { transform: translateX(110vw);  opacity: 1; }
  .hero-dark__sub-center { transform: translateX(-110vw); }
  .contact__cards { flex-direction: column; padding-left: 24px; padding-right: 24px; }
  .contact__card { width: 100%; margin-left: 0 !important; }
  .contact__sep { margin: 40px 24px; }
  .site-footer__grid {
    display: flex;
    flex-direction: column;
    padding: 40px 24px;
    gap: 40px;
  }
  .site-footer__photo video { width: 100%; height: auto; }
  .site-footer__addr { font-size: 18px; }
  .site-footer__admin { position: static; margin-top: 16px; }
}

/* ─────────────────────────────────────
   QUIZ CTA SECTION
   ───────────────────────────────────── */
.quiz-section {
  background-color: var(--off-wht);
  background-image: url('../images/img_paper_texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  border-top: 1px solid rgba(122,59,38,0.1);
  padding: 80px 0 80px;
  min-height: 0; /* override global section { min-height: 100vh } */
}

.quiz-section__inner {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.quiz-card--soon {
  background: #b0b0b0 !important;
  cursor: default;
  pointer-events: none;
  filter: grayscale(1);
}
.quiz-card--soon .quiz-card__desc { opacity: 0.7; font-style: italic; color: #444444; }

.quiz-card {
  display: flex;
  align-items: center;
  gap: 32px;
  background: #2d5d4f;
  border-radius: 2px;
  padding: 14px 24px 14px 56px;
  height: 128px;
  box-shadow: 0px 4px 4px 0px rgba(37,37,37,0.25);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo);
  cursor: pointer; /* full banner is clickable */
}

.quiz-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Plant illustration — bottom-right, mix-blend-mode: screen */
.quiz-card__plant {
  position: absolute;
  bottom: 0;
  right: 26px;
  width: 151px;
  height: 121px;
  mix-blend-mode: screen;
  overflow: hidden;
  pointer-events: none;
}
.quiz-card__plant img {
  position: absolute;
  left: 0;
  top: 5%;
  width: 103%;
  height: 245%;       /* extends far below container — top of plant (leaves) visible */
  object-fit: fill;
  display: block;
}

.quiz-card__arrow {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  transition: background 0.2s, transform 0.2s;
}

.quiz-card__arrow:hover {
  background: rgba(0,0,0,0.35);
  transform: scale(1.06);
}

.quiz-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.quiz-card__title {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 500;
  color: #f4f0e5;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.quiz-card__desc {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.33);
  letter-spacing: -0.08px;
  line-height: 18px;
  width: 345px;
  max-height: 59px;
  overflow: hidden;
}

.quiz-connect {
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-expo) 0.1s, transform 0.7s var(--ease-expo) 0.1s;
}

.quiz-connect.visible {
  opacity: 1;
  transform: translateY(0);
}

.quiz-connect__label {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--near-blk);
}

.quiz-connect__form {
  width: 100%;
}

.quiz-connect__row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  max-width: 600px;
}

.quiz-connect__input {
  flex: 1;
  height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(43,43,43,0.18);
  border-radius: 3px;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  color: var(--near-blk);
  letter-spacing: 0.02em;
  transition: border-color 0.2s;
}

.quiz-connect__input::placeholder { color: rgba(43,43,43,0.38); }
.quiz-connect__input:focus {
  outline: none;
  border-color: var(--green);
}

.quiz-connect__btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 3px;
  background: var(--brown);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  transition: background 0.2s, transform 0.15s;
}

.quiz-connect__btn:hover {
  background: #5c2c1c;
  transform: scale(1.05);
}

/* ─────────────────────────────────────
   QUIZ MODAL
   ───────────────────────────────────── */
/* Hide site header when quiz is open */
body.quiz-open .site-header { opacity: 0 !important; pointer-events: none !important; }
/* Hide mobile FAB when quiz is open */
body.quiz-open .mob-fab { opacity: 0 !important; pointer-events: none !important; }

.qm {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--ease-expo);
}
.qm.open {
  pointer-events: all;
  opacity: 1;
}
.qm__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 34, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qm__popup {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #24564D;
  background-image: url('../images/img_paper_texture.jpg');
  background-size: cover;
  background-position: center;
  background-blend-mode: multiply;
  border-radius: 4px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  transform: translateY(24px);
  transition: transform 0.4s var(--ease-expo);
}
.qm.open .qm__popup {
  transform: translateY(0);
}

/* ── Header ── */
.qm__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 28px 42px 12px;
}
.qm__title {
  flex: 1;
  font-family: 'Futura PT', var(--font);
  font-size: 18px;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.3;
  margin: 0;
}
.qm__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(866px, calc(100vw - 48px));
  height: min(690px, calc(100vh - 64px));
}

.qm__close {
  position: absolute;
  top: 28px;
  right: 42px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  z-index: 10;
}
.qm__close:hover { opacity: 1; }

/* ── Progress ── */
.qm__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 42px 14px;
}
.qm__prog-num {
  font-family: 'Futura PT', var(--font);
  font-size: 13px;
  color: var(--cream);
  letter-spacing: 1.6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.qm__track {
  flex: 1;
  height: 1px;
  background: rgba(244,240,229,0.22);
  position: relative;
}
.qm__track-fill {
  position: absolute;
  inset: 0;
  right: auto;
  height: 1px;
  background: var(--cream);
  width: 20%;
  transition: width 0.5s var(--ease-expo);
}
.qm__track-dot {
  position: absolute;
  top: 50%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--cream);
  transition: left 0.5s var(--ease-expo);
}

/* ── Body ── */
.qm__body {
  padding: 0 42px;
  min-height: 0;
  overflow: hidden;
  height: 100%;
}
.qm__step {
  display: flex;
  gap: 55px;
  height: 100%;
  align-items: flex-start;
  overflow: hidden;
}

/* Question text column */
.qm__q {
  width: 285px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 2px;
}
.qm__q-label {
  font-family: 'Futura PT', var(--font);
  font-size: 13px;
  font-weight: 600;
  color: rgba(244,240,229,0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}
.qm__q-text {
  font-family: 'Futura PT', 'Jost', sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  color: #F4F0E5;
  width: 285px;
  margin: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}
.qm__q-text--sm { font-family: 'Futura PT', 'Jost', sans-serif; font-size: 36px; font-style: normal; font-weight: 500; line-height: normal; color: #F4F0E5; }

/* Cards grid */
.qm__cards {
  flex: 1;
  display: grid;
  gap: 0; /* borders overlap — no gap */
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.qm__cards--4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* 2-option cards: full-width horizontal layout (illustration left, text right) */
.qm__cards--2 {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.qm__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px 14px;
  /* Collapsed dashed borders — no gap between adjacent cards */
  border-right:  1px dashed rgba(244,240,229,0.35);
  border-bottom: 1px dashed rgba(244,240,229,0.35);
  border-top: none;
  border-left: none;
  background: none;
  color: var(--cream);
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
}
/* Top border on first row */
.qm__cards--4 .qm__card:nth-child(-n+2),
.qm__cards--2 .qm__card:first-child { border-top: 1px dashed rgba(244,240,229,0.35); }
/* Left border on left column */
.qm__cards--4 .qm__card:nth-child(odd),
.qm__cards--2 .qm__card { border-left: 1px dashed rgba(244,240,229,0.35); }

.qm__card:hover {
  border-color: rgba(244,240,229,0.7);
  background: rgba(244,240,229,0.04);
}
.qm__card.selected {
  border: 1px solid var(--cream);
  background: rgba(244,240,229,0.08);
  position: relative;
  z-index: 2;
}
.qm__cards--4 .qm__card.selected,
.qm__cards--2 .qm__card.selected {
  border: 1px solid var(--cream);
}

/* 2-option card: horizontal layout */
.qm__cards--2 .qm__card {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  text-align: left;
  gap: 33px;
  flex: 0 0 250px;
  padding: 19px 42px 42px 29px;
  overflow: visible;
}

.qm__card-illo {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0; /* hide any alt text fallback */
}
.qm__card-illo img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 2-option: fixed illustration size on left */
.qm__cards--2 .qm__card-illo {
  flex: 0 0 164.55px;
  height: 188.99px;
  align-self: center;
  min-height: 0;
}
.qm__card-name {
  font-family: 'Futura PT', var(--font);
  font-size: 15px;
  font-weight: 400;
  color: var(--cream);
  white-space: nowrap;
}
.qm__cards--2 .qm__card-name { font-family: 'Futura PT', 'Jost', sans-serif; font-size: 22px; font-weight: 500; white-space: normal; word-break: break-word; overflow-wrap: break-word; max-width: 172px; }
.qm__card-desc {
  font-family: var(--font);
  font-size: 12px;
  color: rgba(244,240,229,0.65);
  line-height: 1.5;
  max-width: none;
}
.qm__cards--2 .qm__card-desc {
  font-family: 'Futura PT', 'Jost', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  color: rgba(244,240,229,0.6);
  max-width: 173px;
}
/* 2-option: text block on right — desc top, name bottom */
.qm__cards--2 .qm__card-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  flex: 1;
  gap: 0;
  padding-top: 13px;
  padding-bottom: 0;
}

/* Form step */
.qm__form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  scrollbar-width: none;
  height: 100%;
  min-height: 0;
  padding-top: 12px;
}
.qm__form::-webkit-scrollbar { display: none; }
.qm__field {
  position: relative;
  border: 1px solid rgba(244,240,229,0.35);
  height: 59px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-sizing: border-box;
}
.qm__field-label {
  position: absolute;
  top: -9px;
  left: 13px;
  background: #24564D;
  padding: 2px 6px;
  font-family: 'Futura PT', var(--font);
  font-size: 11px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  z-index: 1;
}
.qm__input,
.qm__select {
  background: none;
  border: none;
  color: rgba(244,240,229,0.5);
  font-family: var(--font);
  font-size: 15px;
  outline: none;
  padding: 0;
  width: 100%;
  -webkit-appearance: none;
}
.qm__input:focus { color: rgba(244,240,229,0.85); }
/* Custom dropdown */
.qm__field--dropdown { cursor: pointer; user-select: none; }
.qm__dropdown-val {
  flex: 1;
  color: rgba(244,240,229,0.45);
  font-family: var(--font);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qm__dropdown-val.has-value { color: rgba(244,240,229,0.85); }
.qm__dropdown-arrow {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244,240,229,0.7);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.qm__dropdown-arrow svg { display: block; }
.qm__field--dropdown.open .qm__dropdown-arrow { transform: rotate(180deg); }
.qm__dropdown-panel {
  position: absolute;
  top: calc(100% + 1px);
  left: -1px;
  right: -1px;
  background: var(--cream);
  z-index: 20;
  overflow: hidden;
}
.qm__dropdown-opt {
  padding: 16px 20px;
  color: #7a3b26;
  cursor: pointer;
  font-family: var(--font);
  font-size: 15px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.qm__dropdown-opt:last-child { border-bottom: none; }
.qm__dropdown-opt:hover { background: rgba(0,0,0,0.06); }
/* & separator */
.qm__amp {
  text-align: center;
  font-family: var(--font);
  color: rgba(244,240,229,0.55);
  font-size: 18px;
  line-height: 1;
  margin: -4px 0;
}
.qm__or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Futura PT', var(--font);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(244,240,229,0.5);
}
.qm__or::before,
.qm__or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(244,240,229,0.2);
}

/* Results */
.qm__results {
  flex: 1;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  height: 100%;
  min-height: 0;
  align-items: flex-start;
}
.qm__results::-webkit-scrollbar { display: none; }
.qm__result-card {
  flex-shrink: 0;
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}
.qm__result-img {
  flex: 1;
  width: 200px;
  min-height: 0;
  object-fit: cover;
  border-radius: 2px;
}
.qm__result-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-shrink: 0;
}
.qm__result-num {
  font-family: 'Futura PT', var(--font);
  font-size: 26px;
  color: var(--cream);
  letter-spacing: 2px;
  line-height: 1;
}
.qm__result-info { display: flex; flex-direction: column; gap: 1px; }
.qm__result-name {
  font-family: 'Futura PT', var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
}
.qm__result-type {
  font-family: var(--font);
  font-size: 11px;
  color: rgba(244,240,229,0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Footer ── */
.qm__footer {
  padding: 12px 42px 24px;
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.qm__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-family: 'Futura PT', var(--font);
  font-size: 14px;
  font-weight: 500;
  color: var(--cream);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.qm__btn--back { background: var(--brown); }
.qm__btn--next {
  background: rgba(244,240,229,0.12);
  border: 1px solid rgba(244,240,229,0.25);
}
.qm__btn--next:not(:disabled) {
  background: var(--brown);
  border-color: transparent;
}
.qm__btn:disabled { opacity: 0.35; cursor: not-allowed; }
.qm__btn:not(:disabled):hover { opacity: 0.82; transform: scale(1.02); }
/* Ensure hidden attribute works even when .qm__btn has display:flex */
.qm__btn[hidden] { display: none !important; }

/* ─────────────────────────────────────
   FOOTER
   ───────────────────────────────────── */
.site-footer {
  background-color: var(--cream);
  background-image: url('../images/img_paper_texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  border-top: none;
  padding: 28px 56px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.site-footer__left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.site-footer__left span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(43,43,43,0.6);
}

.site-footer__right {
  display: flex;
  gap: 32px;
}

.site-footer__right a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--near-blk);
  transition: opacity 0.2s;
}

.site-footer__right a:hover { opacity: 0.4; }

.site-footer__admin {
  opacity: 0.25;
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
}

/* ═══════════════════════════════════════
   MOBILE RESPONSIVE — max-width: 768px
   ═══════════════════════════════════════ */

/* ─── Mobile: fix background-attachment:fixed (causes grey bands on mobile browsers) ─── */
@media (max-width: 768px) {
  body,
  #hero-dark,
  .hero-dark__content,
  #work,
  .work,
  #contact,
  .contact,
  .site-footer,
  .quiz-section,
  .studio-team {
    background-attachment: scroll !important;
  }
}

/* ─── Mobile Nav / Hamburger ─── */
@media (max-width: 768px) {
  .site-header__links { display: none; }

  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: inherit; /* inherits cream on dark hero, brown on light sections */
  }

  /* Fullscreen mobile menu */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 57vw;
    z-index: 1020;
    background: var(--brown);
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 80px 28px 40px 28px;
  }

  .mobile-menu.open {
    transform: translateX(0);
  }

  .mobile-menu__close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--cream);
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex: 1;
    justify-content: center;
    width: 100%;
  }

  .mobile-menu__links a,
  .mobile-menu__projects-btn {
    font-family: 'Futura PT', var(--font);
    font-size: 16px;
    font-weight: 400;
    color: var(--cream);
    opacity: 0.75;
    text-transform: capitalize;
    letter-spacing: 0;
    text-decoration: none;
    line-height: 20px;
    margin-bottom: 10px;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-menu__links a:last-child {
    margin-bottom: 0;
    font-weight: 400;
    opacity: 0.75;
  }

  .mobile-menu__projects-btn:focus,
  .mobile-menu__projects-btn:focus-visible,
  .mobile-menu__projects-btn:active {
    outline: none;
    box-shadow: none;
    opacity: 0.75;
  }

  /* Newsletter + copyright */
  .mobile-menu__footer {
    width: 100%;
    margin-top: 36px;
  }

  .mobile-menu__footer .site-footer__newsletter {
    position: relative;
    width: 100%;
    background: var(--cream);
    border-radius: 999px;
    height: 44px;
    box-sizing: border-box;
  }

  .mobile-menu__footer .site-footer__newsletter input {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 44px;
    background: transparent;
    color: var(--brown);
    border: none;
    padding: 0 16px;
    font-size: 14px;
    outline: none;
    width: auto;
  }

  .mobile-menu__footer .site-footer__newsletter input::placeholder {
    color: rgba(122,59,38,0.55);
  }

  .mobile-menu__footer .site-footer__newsletter button {
    position: absolute;
    right: 5px;
    top: 5px;
    background: var(--brown);
    color: var(--cream);
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobile-menu__copy {
    font-family: 'Futura PT', var(--font);
    font-size: 14px;
    color: rgba(244,240,229,0.65);
    margin-top: 16px;
    line-height: 20px;
  }
}

@media (min-width: 769px) {
  .hamburger-btn { display: none; }
  .mobile-menu { display: none !important; }
}

/* ─── Mobile Hero ─── */
@media (max-width: 768px) {
  .site-hero {
    padding-top: 80px;
    min-height: 100vh;
    min-height: 100svh;
  }

  .hero__headline {
    font-size: clamp(28px, 8vw, 48px);
  }

  .hero__sub { font-size: 14px; }
}

/* ─── Mobile Work / Projects — Figma node 949-30464 ─── */
/* Frame 393px: OUR WORK label x=32, sidebar line x=59, content x=81 w=264  */
@media (max-width: 768px) {

  /* Reduce section top padding on mobile — Figma content starts at y≈293 */
  #work {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  /* work__body: no sidebar on mobile */
  .work__body {
    gap: 0;
    align-items: flex-start;
  }

  /* Sidebar: hidden on mobile — invisible anyway, just wastes space */
  .work__sidebar {
    display: none;
  }

  /* Hide sidebar label on mobile — hero-work-intro handles PROJECTS */
  .work__sidebar-label {
    display: none;
  }

  /* Grid: same content width as before, centred */
  .work__grid {
    flex: 1;
    min-width: 0;
    padding: 0 72px;
    overflow: hidden;
  }

  /* Projects: flex-column, gap 24px between sections, 80px between projects  */
  .project--odd,
  .project--even {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-bottom: 80px;
    gap: 12px;
  }

  /* Kill desktop hover shifts */
  .project--odd:hover,
  .project--even:hover {
    margin-left: 0;
    padding-left: 0;
  }

  /* Order: info → image 1 → image 2; remove intermediate-breakpoint padding */
  .project__left       { order: 0; margin-bottom: 0; padding-bottom: 0; grid-area: unset; width: 100%; }
  .project__img-col-1  { order: 1; margin-bottom: 0; padding: 0; width: 100%; }
  .project__img-col-2  { order: 2; margin-bottom: 0; padding: 0; width: 100%; }

  /* Image number label */
  .project__img-num { margin-bottom: 6px; font-size: 11px; letter-spacing: 1.1px; }

  /* Image 1: tall portrait — Figma 210×311 */
  .project__img-col-1 .project__img-wrap {
    height: auto;
    aspect-ratio: 210 / 311;
    width: 100%;
  }

  /* Image 2: shorter — avg of 182 & 228 ≈ 205px at 216 wide → ~216/205     */
  .project--odd  .project__img-col-2 .project__img-wrap,
  .project--even .project__img-col-2 .project__img-wrap {
    height: auto;
    aspect-ratio: 216 / 205;
    width: 100%;
  }

  .project__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Typography — exact Figma values */
  .project__code {
    font-size: 11px;
    letter-spacing: 1.1px;
    margin-bottom: 0;
  }

  .project__name {
    font-size: 14px;
    letter-spacing: 0.56px;
  }

  .project__desc {
    font-size: 14px;
    letter-spacing: 0.56px;
    line-height: 1.5;
  }
}

/* ─── Mobile Contact ─── */
@media (max-width: 768px) {
  .contact__cards {
    flex-direction: column;
    align-items: stretch;
    padding-left: 16px;
    padding-right: 16px;
    gap: 16px;
  }

  .contact__card {
    width: 100%;
    height: 280px;
    min-height: 280px;
    flex: none;
  }

  .contact__card--back { margin-left: 0; }

  /* Separator between cards on mobile — equal spacing top and bottom */
  #contact .contact__sep { margin: 40px 16px; }
}

/* ─── Mobile Quiz ─── */
@media (max-width: 768px) {
  .quiz-section {
    padding: 40px 0;
  }

  .quiz-section__inner {
    gap: 24px;
    width: calc(100% - 32px);
    margin: 0 16px;
  }

  .quiz-card {
    height: 108px;
    min-height: 108px;
    padding: 12px 14px 12px 8px;
    gap: 8px;
    border-radius: 2px;
  }

  .quiz-card__plant { display: block; }
  .quiz-card__plant img { display: block; }

  .quiz-card__desc { width: auto; max-width: 202px; }

  .quiz-connect__row {
    flex-wrap: wrap;
    gap: 8px;
  }

  .quiz-connect__input { min-width: 0; }
}

/* ─── Mobile Floating Action Buttons (Filter + Quiz) ───────────────────
   Figma node 1228-44150 "Bottom Buttons"
   Fixed overlay visible only while scrolling the work section.
   Filter: 56×56px dark (#2B2B2B) rounded-12 with filter icon
   Quiz:   90×56px green (#2D5D4F) rounded-12 with arrow + "Quiz" + plant  */

.mob-fab {
  display: none; /* hidden by default — JS shows on mobile */
}

@media (max-width: 768px) {
  .mob-fab {
    display: flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
    right: 24px;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .mob-fab.mob-fab--visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Filter button — 56×56 dark pill */
  .mob-fab__filter {
    width: 56px;
    height: 56px;
    background: var(--near-blk);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(18,18,18,0.25);
    flex-shrink: 0;
  }

  /* Quiz button */
  .mob-fab__quiz {
    width: 100px;
    height: 56px;
    background: var(--green);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px 0 8px;
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(37,37,37,0.25);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Icon circle (dark semi-transparent) */
  .mob-fab__quiz-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(17,17,17,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  /* "Quiz" label */
  .mob-fab__quiz-label {
    font-family: 'Futura PT', var(--font);
    font-size: 16px;
    font-weight: 500;
    color: var(--cream);
    position: relative;
    z-index: 1;
    white-space: nowrap;
  }

  /* Plant decoration — mix-blend-mode:screen, right side */
  .mob-fab__quiz-plant {
    position: absolute;
    right: 6px;
    top: 14px;
    bottom: -16px;
    width: 46px;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .mob-fab__quiz-plant img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
}

/* ─────────────────────────────────────
   DESKTOP FLOATING BUTTONS (desk-fab)
   Figma: Filter 64×64 dark, Quiz 120×64 green
   Visible during work section scroll
   ───────────────────────────────────── */
.desk-fab {
  display: none; /* hidden on mobile — only shows ≥769px */
}

@media (min-width: 769px) {
  .desk-fab {
    display: flex;
    gap: 8px;
    align-items: center;
    position: fixed;
    bottom: 56px;
    right: 48px;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .desk-fab.desk-fab--visible {
    opacity: 1;
    pointer-events: auto;
  }


  /* Filter: 64×64, dark bg */
  .desk-fab__filter {
    width: 64px;
    height: 64px;
    background: var(--near-blk);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(18,18,18,0.25);
    flex-shrink: 0;
  }

  .desk-fab__filter:hover { opacity: 0.85; }

  /* Quiz: 100×52, green bg */
  .desk-fab__quiz {
    width: 116px;
    height: 64px;
    background: var(--green);
    border: none;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px 0 10px;
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(37,37,37,0.25);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }

  .desk-fab__quiz-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(17,17,17,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    flex-shrink: 0;
  }

  .desk-fab__quiz-label {
    font-family: 'Futura PT', var(--font);
    font-size: 16px;
    font-weight: 500;
    color: var(--cream);
    white-space: nowrap;
  }

  .desk-fab__quiz-plant {
    position: absolute;
    right: 6px;
    top: 16px;
    bottom: -18px;
    width: 62px;
    mix-blend-mode: screen;
    pointer-events: none;
  }

  .desk-fab__quiz-plant img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
}

/* ─── Mobile Footer ─── */
@media (max-width: 768px) {
  .site-footer__grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 40px 24px;
    gap: 32px;
  }

  .site-footer__photo { width: 100%; }
  .site-footer__photo video { width: 100%; height: 160px; object-fit: cover; }

  .site-footer__addr { font-size: 18px; }
}

/* ═══════════════════════════════════════
   MOBILE PROJECTS — Figma: "Mobile | Projects Landing"
   ═══════════════════════════════════════ */

/* Horizontal carousel — hidden on all breakpoints (replaced by vertical layout) */
.mob-proj { display: none !important; }

@media (max-width: 768px) {
  /* work__body stays visible — mobile projects use the same vertical layout */

  .mob-proj {
    display: none !important;
  }

  /* ── Scroll progress bar ── */
  .mob-proj__bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 32px;
    margin-bottom: 28px;
  }

  .mob-proj__bar-label {
    font-family: 'Futura PT-Book', 'Futura PT', sans-serif;
    font-size: 16px;
    letter-spacing: 1.6px;
    color: var(--near-blk);
    flex-shrink: 0;
    width: 27px;
  }

  .mob-proj__bar-label:last-child {
    text-align: right;
    width: 30px;
  }

  .mob-proj__track {
    position: relative;
    flex: 1;
    height: 16px;
    margin: 0 8px;
    display: flex;
    align-items: center;
  }

  .mob-proj__track-base {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--near-blk);
    opacity: 0.25;
  }

  .mob-proj__track-fill {
    position: absolute;
    left: 0;
    height: 1px;
    background: var(--near-blk);
    width: 0;
    transition: width 0.08s linear;
  }

  .mob-proj__toggle {
    position: absolute;
    left: 0;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--green);
    transform: translate(-50%, -50%);
    transition: left 0.08s linear;
    will-change: left;
  }

  /* ── Horizontally scrollable cards ── */
  .mob-proj__cards {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    padding: 0 0 32px 52px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mob-proj__cards::-webkit-scrollbar { display: none; }

  /* ── Individual card ── */
  .mob-proj__card {
    flex-shrink: 0;
    width: 260px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
  }

  .mob-proj__card--tall { height: 448px; }
  .mob-proj__card--short { height: 354px; }

  /* Image */
  .mob-proj__img-wrap {
    width: 260px;
    border-radius: 2px;
    overflow: hidden;
    flex-shrink: 0;
  }

  .mob-proj__card--tall .mob-proj__img-wrap { height: 385px; }
  .mob-proj__card--short .mob-proj__img-wrap { height: 290px; }

  .mob-proj__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: multiply;
    transition: transform 0.4s cubic-bezier(0.25, 0, 0, 1);
  }

  .mob-proj__card:hover .mob-proj__img-wrap img {
    transform: scale(1.03);
  }

  /* Title block */
  .mob-proj__title {
    display: flex;
    align-items: flex-start;
    gap: 0;
    color: var(--green);
    flex: 1;
    padding-top: 12px;
  }

  .mob-proj__num {
    font-family: 'Futura PT-Heavy', 'Futura PT', sans-serif;
    font-size: 16px;
    letter-spacing: 4px;
    line-height: 1;
    flex-shrink: 0;
    width: 68px;
  }

  .mob-proj__name {
    font-family: 'Futura PT-Book', 'Futura PT', sans-serif;
    font-size: 16px;
    letter-spacing: 0.64px;
    line-height: 1.4;
    padding-top: 5px;
    width: 187px;
  }

  .mob-proj__name strong {
    font-family: 'Futura PT', sans-serif;
    font-weight: 600;
    display: block;
  }

  .mob-proj__name em {
    font-style: normal;
    font-weight: 300;
    opacity: 0.85;
  }

  /* Trailing spacer */
  .mob-proj__spacer {
    flex-shrink: 0;
    width: 32px;
  }
}

/* ═══════════════════════════════════════
   FILTER DRAWER
   ═══════════════════════════════════════ */
/* ─────────────────────────────────────
   FILTER PILL — button morphs into pill
   ───────────────────────────────────── */
.desk-fab__filter-wrap {
  display: flex;
  align-items: center;
  background: var(--near-blk);
  border-radius: 16px;
  height: 64px;
  width: 64px;
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(18,18,18,0.25);
  transition: width 0.35s var(--ease-expo);
  white-space: nowrap;
  cursor: pointer;
}

.desk-fab__filter-wrap.open {
  width: 340px;
}

.desk-fab__filter {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}

.filter-pill__options {
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
  pointer-events: none;
}

.desk-fab__filter-wrap.open .filter-pill__options {
  opacity: 1;
  pointer-events: auto;
}

.filter-pill__opt {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  padding: 8px 16px;
  border-radius: 10px;
  transition: background 0.2s, color 0.2s;
  line-height: 1;
  white-space: nowrap;
}

.filter-pill__opt--active {
  background: #fff;
  color: var(--near-blk);
}

.filter-pill__opt:not(.filter-pill__opt--active):hover {
  color: #fff;
}

.filter-pill__divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

.filter-drawer {
  position: fixed;
  inset: 0;
  z-index: 800;
  pointer-events: none;
}

.filter-drawer.open {
  pointer-events: auto;
}

/* Translucent backdrop */
.filter-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 43, 43, 0.6);
  opacity: 0;
  transition: opacity 0.35s var(--ease-expo);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.filter-drawer.open .filter-drawer__backdrop {
  opacity: 1;
}

/* Slide-in panel */
.filter-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: var(--near-blk);
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-expo);
  display: flex;
  flex-direction: column;
  padding: 48px 40px 64px;
}

.filter-drawer.open .filter-drawer__panel {
  transform: translateX(0);
}

.filter-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 56px;
}

.filter-drawer__title {
  font-family: 'Futura PT', var(--font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.5;
}

.filter-drawer__close {
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  padding: 4px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.filter-drawer__close:hover { opacity: 1; }

/* Category options */
.filter-drawer__options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.filter-drawer__opt {
  background: none;
  border: none;
  color: var(--cream);
  font-family: 'Futura PT', var(--font);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  padding: 12px 0;
  opacity: 0.3;
  transition: opacity 0.2s, transform 0.2s var(--ease-expo);
  line-height: 1.1;
  border-bottom: 1px solid rgba(244,240,229,0.08);
}

.filter-drawer__opt:last-child { border-bottom: none; }

.filter-drawer__opt:hover {
  opacity: 0.7;
  transform: translateX(6px);
}

.filter-drawer__opt--active {
  opacity: 1;
}

.filter-drawer__opt--active:hover {
  opacity: 1;
  transform: translateX(6px);
}

/* Project count */
.filter-drawer__count {
  font-size: 13px;
  color: var(--cream);
  opacity: 0.35;
  letter-spacing: 0.1em;
  margin-top: 40px;
}

/* Hidden project state */
.project--hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
}

.work-overlay__card.project--hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: opacity 0.3s ease, width 0.3s ease;
}

/* Mobile: bottom sheet instead of side panel */
@media (max-width: 768px) {
  .filter-drawer__panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 80svh;
    max-height: 80vh;
    height: auto;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  .filter-drawer.open .filter-drawer__panel {
    transform: translateY(0);
  }

  .filter-drawer__header {
    margin-bottom: 20px;
  }

  .filter-drawer__opt {
    font-size: 22px;
    padding: 8px 0;
  }
}

/* ═══════════════════════════════════════
   OUR WORK OVERLAY
   Full-screen horizontal projects view
   (Figma: Web | Our Work_LP, 0.8.1_Our Work_Scroll)
   ═══════════════════════════════════════ */

/* Nav PROJECTS button — styled to match links */
.site-header__projects-btn {
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  font-family: var(--font);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  opacity: 1;
  transition: opacity 0.2s;
}
.site-header__projects-btn:focus { outline: none; }
.site-header__projects-btn:hover { opacity: 1; }
.site-header.header--light .site-header__projects-btn { opacity: 0.7; }
.site-header.header--light .site-header__projects-btn:hover { opacity: 1; }

/* Studio page projects button — same style as site-header__projects-btn */
.studio-projects-btn {
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  font-family: var(--font);
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.studio-projects-btn:focus { outline: none; }
.studio-projects-btn:hover { opacity: 1; }
/* Inside mobile menu */
.mobile-menu__links .studio-projects-btn {
  font-family: 'Futura PT', var(--font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 20px;
  margin-bottom: 10px;
  opacity: 0.75;
  display: block;
  width: 100%;
  text-align: left;
  text-transform: capitalize;
}

/* Overlay container */
.work-overlay {
  position: fixed;
  inset: 0;
  z-index: 1010;
  display: none;
  flex-direction: column;
  pointer-events: none;
}
.work-overlay.open {
  display: flex;
  pointer-events: auto;
  animation: overlayFadeIn 0.45s cubic-bezier(0.16,1,0.3,1) forwards;
}
.work-overlay.closing {
  animation: overlayFadeOut 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
  pointer-events: none;
}

@keyframes overlayFadeIn {
  from { opacity: 1; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes overlayFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 1; transform: translateY(-100%); }
}

/* Paper texture background */
.work-overlay__bg {
  position: absolute;
  inset: 0;
  background-color: var(--cream);
  background-image: url('../images/img_paper_texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
}

/* ─── Nav bar ─── */
/* Full-width blur strip behind the nav — covers all edges */
.work-overlay::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 88px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 1;
  pointer-events: none;
}
.work-overlay__nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1240px, calc(100% - 48px));
  margin: 32px auto 0;
  height: 56px;
  color: var(--brown);
}

.work-overlay__logo {
  color: var(--brown);
  display: block;
  flex-shrink: 0;
}
.work-overlay__logo svg { display: block; width: 90px !important; height: auto !important; }

.work-overlay__nav-links {
  display: flex;
  gap: 218.5px;
  align-items: center;
}
.work-overlay__nav-links a,
.work-overlay__close-link {
  font-family: var(--desktop-navbar-title-font-family, var(--font));
  font-size: 16px;
  font-weight: var(--desktop-navbar-title-font-weight, 400);
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brown);
  opacity: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}
.work-overlay__nav-links a:hover,
.work-overlay__close-link:hover { opacity: 0.45; }
.work-overlay__close-link { opacity: 1; font-weight: 600; }
.wo-hamburger-btn { display: none; }

.work-overlay__close {
  position: absolute;
  right: max(24px, calc((100vw - 1240px) / 2));
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--near-blk);
  opacity: 0.5;
  padding: 4px;
  transition: opacity 0.2s;
}
.work-overlay__close:hover { opacity: 1; }

/* ─── Scroll progress bar ─── */
.work-overlay__scroll-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 60px;
  margin-top: 54px;
  margin-bottom: 28px;
}

.work-overlay__scroll-num {
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--near-blk);
  opacity: 0.45;
  flex-shrink: 0;
  font-family: var(--font);
}

.work-overlay__scroll-track {
  flex: 1;
  height: 1px;
  background: rgba(43, 43, 43, 0.15);
  position: relative;
}

.work-overlay__scroll-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--near-blk);
  width: 0%;
  transition: width 0.1s linear;
}

.work-overlay__scroll-dot {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--near-blk);
  transform: translate(-50%, -50%);
  transition: left 0.1s linear;
}

/* ─── Cards ─── */
.work-overlay__cards {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0 0 0 60px;
  scroll-padding-left: 60px;
  flex: 1;
  min-height: 0;
}
.work-overlay__cards::-webkit-scrollbar { display: none; }

.work-overlay__spacer { flex-shrink: 0; width: 60px; }

/* Card base */
.work-overlay__card {
  flex-shrink: 0;
  width: 260px;
  scroll-snap-align: start;
  cursor: pointer;
  position: relative;
}
.work-overlay__card:hover .work-overlay__img-wrap img {
  transform: scale(1.04);
}

/* Tall card: image + info below */
.work-overlay__card--tall {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: flex-start;
}
.work-overlay__card--tall .work-overlay__img-wrap {
  height: 385px;
  border-radius: 4px;
  overflow: hidden;
}
.work-overlay__card--tall .work-overlay__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-expo);
}
.work-overlay__card--tall .work-overlay__card-info {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding-top: 10px;
}

/* Short card: image + info overlaid at bottom */
.work-overlay__card--short {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: flex-start;
}
.work-overlay__card--short .work-overlay__img-wrap {
  height: 290px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.work-overlay__card--short .work-overlay__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-expo);
}
.work-overlay__card--short .work-overlay__card-info {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding-top: 10px;
}

/* Card info elements */
.work-overlay__card-info {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  padding-top: 10px;
}

.work-overlay__card-num {
  font-family: 'Futura PT', sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--green);
  letter-spacing: 0.02em;
  line-height: 1;
  grid-row: 1 / 3;
}

.work-overlay__card-dot {
  display: none;
}

.work-overlay__card-name {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.02em;
  line-height: 1.2;
  align-self: end;
}

.work-overlay__card-type {
  font-size: 13px;
  color: var(--green);
  opacity: 0.5;
  letter-spacing: 0.02em;
  align-self: start;
}

/* ─── FABs ─── */
.work-overlay__fabs {
  position: absolute;
  bottom: 40px;
  right: 48px;
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Overlay filter pill expands leftward */
.work-overlay__fabs .desk-fab__filter-wrap {
  flex-direction: row-reverse;
  transform-origin: right center;
}

.work-overlay__fabs .desk-fab__filter-wrap.open {
  width: 340px;
}

.work-overlay__fab-filter {
  width: 64px;
  height: 64px;
  background: var(--near-blk);
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.work-overlay__fab-filter:hover { opacity: 0.85; }

.work-overlay__fab-quiz {
  height: 64px;
  padding: 0 20px;
  background: var(--green);
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cream);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.work-overlay__fab-quiz-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .work-overlay__nav { padding: 20px 24px; }
  .work-overlay__nav-links { display: none; }
  .work-overlay__scroll-bar { padding: 0 24px; }
  .work-overlay__cards { padding: 0 24px; }
  .work-overlay__fabs { right: 24px; bottom: 24px; }
  .work-overlay__card--tall .work-overlay__img-wrap { height: 260px; }
  .work-overlay__card--short .work-overlay__img-wrap { height: 190px; }
  .work-overlay__card { width: 180px; }
}

/* ═══════════════════════════════════════
   POLISH PASS
   ═══════════════════════════════════════ */

/* ─── Paper Texture Overlay (hero) ─── */
#hero-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/img_paper_texture.jpg') repeat;
  opacity: 0.06;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 1;
}

/* ─── Project row hover tint — already defined at line ~638 (#FFFAEA) ─── */

/* ─── Quiz plant float animation ─── */
.quiz-card__plant img,
.mob-fab__quiz-plant img,
.desk-fab__quiz-plant img {
  animation: plantFloat 3.5s ease-in-out infinite;
}

@keyframes plantFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-6px) rotate(2deg); }
}

/* ─── Newsletter submit arrow rotation on hover ─── */
.site-footer__newsletter button svg {
  transition: transform 0.3s var(--ease-expo);
}
.site-footer__newsletter button:hover svg {
  transform: rotate(45deg);
}

/* ─── Contact card hover tilt ─── */
.contact__cards {
  perspective: 1200px;
}

.contact__card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.contact__card:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

/* ─── Mobile menu link stagger-in ─── */
.mobile-menu.open .mobile-menu__links a {
  animation: slideInUp 0.4s var(--ease-expo) both;
}
.mobile-menu.open .mobile-menu__links a:nth-child(1) { animation-delay: 0.05s; }
.mobile-menu.open .mobile-menu__links a:nth-child(2) { animation-delay: 0.10s; }
.mobile-menu.open .mobile-menu__links a:nth-child(3) { animation-delay: 0.15s; }
.mobile-menu.open .mobile-menu__links a:nth-child(4) { animation-delay: 0.20s; }
.mobile-menu.open .mobile-menu__links a:nth-child(5) { animation-delay: 0.25s; }

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 0.75; transform: translateY(0); }
}

/* ═══════════════════════════════════════
   MOBILE COMPREHENSIVE FIXES — max-width: 768px
   ═══════════════════════════════════════ */

/* ─── 1. NAV / HAMBURGER ─── */
@media (max-width: 768px) {
  /* Header: flush to edges with reasonable padding */
  .site-header,
  .site-header.visible,
  .site-header.header--light {
    width: 100%;
    left: 0;
    transform: none;
    padding: 0 20px;
    margin-top: 0;
    height: 56px;
    top: 0;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Logo: shrink to fit mobile nav bar */
  .site-header__logo {
    width: auto;
    height: auto;
  }
  .site-header__logo svg {
    width: 60px !important;
    height: auto !important;
  }

  /* Hamburger: always visible on mobile */
  .hamburger-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: inherit;
    z-index: 1001;
  }

  body.menu-open .hamburger-btn {
    display: none !important;
  }

  /* Staircase → X animation */
  .hbg-stair {
    transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: 12px 12px;
    transform-box: fill-box;
  }
  .hbg-x1, .hbg-x2 {
    opacity: 0;
    transform: rotate(-45deg) scale(0.5);
    transform-origin: 12px 12px;
    transform-box: fill-box;
    transition: opacity 0.25s ease 0.1s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  }
  .hamburger-btn.is-open .hbg-stair {
    opacity: 0;
    transform: rotate(45deg) scale(0.5);
  }
  .hamburger-btn.is-open .hbg-x1,
  .hamburger-btn.is-open .hbg-x2 {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }

  /* Desktop links: hidden on mobile */
  .site-header__links {
    display: none !important;
  }

  /* Mobile menu: slide in from right, above everything including work overlay */
  .mobile-menu {
    z-index: 1020;
  }

  /* Mobile menu close button: large tap target */
  .mobile-menu__close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile menu links: large tap targets */
  .mobile-menu__links a,
  .mobile-menu__projects-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ─── 2. HERO — preloader, text, window, trees ─── */
@media (max-width: 768px) {
  /* Hero section: full viewport height */
  body {
    background-color: var(--cream);
    background-image: url('../images/img_paper_texture.jpg');
    background-repeat: repeat-y;
    background-size: 200%;
    background-position: center top;
    background-attachment: scroll;
  }
  #hero-dark {
    height: calc(100dvh + 1340px);
    background-color: var(--cream);
    background-image: url('../images/img_paper_texture.jpg');
    background-repeat: repeat-y;
    background-size: 200%;
    background-position: center top;
    background-attachment: scroll;
  }
  #work::after {
    display: none;
  }

  /* Hero dark content: fill viewport — dvh for Android, -webkit-fill-available for iOS */
  .hero-dark__content {
    width: 100%;
    height: 100dvh;
    min-height: -webkit-fill-available;
  }

  /* STUDIO / SGA text: readable on small screens */
  .hero-dark__left,
  .hero-dark__right {
    font-size: clamp(44px, 13vw, 72px);
    letter-spacing: 0.02em;
  }

  /* Sub-line: centered column on mobile */
  .hero-dark__sub {
    bottom: 60px;
    left: 20px;
    right: 20px;
    font-size: 14px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
  }

  /* Work intro: show on mobile, aligned to sidebar column */
  .hero-work-intro {
    display: block;
    left: 0;
    width: 44px;
  }
  .hero-work-intro__label {
    font-size: 13px;
    letter-spacing: 10px;
  }

  /* Scroll hint: ensure it's visible */
  .scroll-hint {
    bottom: 16px;
  }
}

/* ─── 3. PROJECTS SECTION ─── */
@media (max-width: 768px) {
  /* Work section: remove excess padding, safe on phones */
  #work {
    padding-left: 0;
    padding-right: 0;
    background-attachment: scroll;
    background-size: 200%;
    background-position: center top;
    background-repeat: repeat-y;
    isolation: auto;
  }
  #work::after { display: none; }

  /* Sidebar: smaller width on very small phones */
  .work__sidebar {
    width: 44px;
    min-width: 44px;
  }

  /* Sidebar: no border — hero-work-intro provides the line */
  .work__sidebar {
    border-right: none;
    width: 44px;
    min-width: 44px;
  }
  .work__sidebar-label {
    display: none;
  }
  /* Grid: centred with equal padding */
  .work__grid {
    padding: 0 72px;
    overflow: hidden;
  }
  /* Sidebar: hidden — space handled by grid padding */
  .work__sidebar {
    display: none !important;
  }

  /* Project rows: stack vertically, images full width */
  .project--odd,
  .project--even {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 16px;
    margin-bottom: 56px;
  }

  /* Disable desktop hover shifts on touch */
  .project--odd:hover,
  .project--even:hover {
    background: transparent;
    margin-left: 0;
    padding-left: 0;
  }
  .project:hover {
    background: transparent;
    margin-left: 0;
    padding-left: 0;
  }
  .project:active {
    background: #FFFAEA;
  }

  /* Project images: full width aspect ratios */
  .project__img-col-1 .project__img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }

  .project--odd .project__img-col-2 .project__img-wrap,
  .project--even .project__img-col-2 .project__img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Project images: stretch to container */
  .project__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Disable parallax hover transform on touch */
  .project:hover .project__img-wrap img {
    transform: none;
  }
}

/* ─── 4. WORK OVERLAY ─── */
@media (max-width: 768px) {
  /* Nav inside overlay: show close button, hide desktop links */
  .work-overlay__nav {
    padding: 16px 20px;
    flex-shrink: 0;
  }

  .work-overlay__nav-links {
    display: none !important;
  }

  .wo-hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--brown);
  }

  /* Logo in overlay: smaller */
  .work-overlay__logo svg {
    width: 60px !important;
    height: auto !important;
  }

  /* Close button: large tap target */
  .work-overlay__close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Scroll bar: compact on mobile */
  .work-overlay__scroll-bar {
    padding: 8px 20px;
    flex-shrink: 0;
  }

  /* Cards: horizontal scroll, padding for first/last card */
  .work-overlay__cards {
    padding: 12px 20px 16px;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  /* Card sizes on mobile */
  .work-overlay__card {
    width: 160px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }

  .work-overlay__card--tall .work-overlay__img-wrap {
    height: 220px;
  }

  .work-overlay__card--short .work-overlay__img-wrap {
    height: 165px;
  }

  /* FABs: inside overlay, bottom-right */
  .work-overlay__fabs {
    bottom: 20px;
    right: 20px;
  }
}

/* ─── 5. FILTER PILL (mob-filter-pill) ─── */
@media (max-width: 768px) {
  /* mob-fab: always use flex row for the filter pill */
  .mob-fab {
    align-items: center;
    gap: 8px;
  }

  /* Filter pill inside mob-fab: correct sizing */
  #mob-filter-pill {
    height: 56px;
    width: 56px;
    border-radius: 16px;
  }

  #mob-filter-pill.open {
    width: 300px;
  }

  /* Filter button inside pill: correct tap target */
  #mob-filter-pill .desk-fab__filter {
    width: 56px;
    height: 56px;
    min-width: 56px;
    flex-shrink: 0;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
  }

  /* Filter options: visible when open */
  #mob-filter-pill .filter-pill__options {
    font-size: 13px;
  }

  #mob-filter-pill .filter-pill__opt {
    font-size: 13px;
    padding: 6px 10px;
  }
}

/* ─── 8. QUIZ SECTION ─── */
@media (max-width: 768px) {
  .quiz-section {
    padding: 40px 0;
  }

  .quiz-section__inner {
    width: calc(100% - 32px);
    gap: 16px;
  }

  .quiz-card {
    flex-direction: column;
    height: auto;
    min-height: 100px;
    padding: 16px;
    gap: 12px;
    align-items: flex-start;
  }

  .quiz-card__arrow {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .quiz-card__text {
    flex: 1;
    min-width: 0;
  }

  .quiz-card__title {
    font-size: 16px;
    white-space: normal;
  }

  .quiz-card__desc {
    font-size: 13px;
    width: auto;
    max-width: 100%;
    max-height: none;
    line-height: 1.45;
  }

  /* Quiz modal: bottom drawer on mobile */
  .qm { align-items: flex-end; position: fixed; }

  /* Wrap: slides in as one unit — close button on top, popup below */
  .qm__wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(100%);
    transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1);
    padding-bottom: 0;
  }
  .qm.open .qm__wrap { transform: translateY(0); }

  .qm__popup {
    width: 100%;
    height: 85vh;
    height: 85svh;
    flex-shrink: 0;
    border-radius: 20px 20px 0 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transform: none !important;
    transition: none !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 0;
    /* Extend background below for safe area / home indicator gap */
    box-shadow: 0 100px 0 0 #24564D;
  }

  /* Close button: sits above popup as natural flex child */
  .qm__close {
    position: static;
    transform: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brown);
    opacity: 1;
    color: var(--cream);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
  }
  .qm__close:hover { opacity: 0.85; }

  /* Header: hidden — close sits above the popup */
  .qm__header { display: none; }

  /* Progress bar */
  .qm__progress {
    flex-shrink: 0;
    padding: 32px 32px 16px;
    gap: 12px;
  }
  .qm__prog-num {
    font-size: 16px;
    letter-spacing: 1.6px;
  }

  /* Body fills remaining popup height */
  .qm__body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0 32px;
    display: flex;
    flex-direction: column;
  }

  /* Form step: scrollable when content overflows */
  .qm__body--form {
    overflow-y: auto;
  }

  /* Step: vertical stack, fills body */
  .qm__step {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    gap: 0;
  }

  /* Form step: natural height so body can scroll */
  .qm__step--form {
    flex: 0 0 auto;
    justify-content: flex-start;
    gap: 8px;
  }
  .qm__step--form .qm__q {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Question block — Figma: label at 85px from popup top, 24px gap to question */
  .qm__q {
    width: 100%;
    flex-shrink: 0;
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 24px;
  }
  .qm__q-label {
    font-size: 16px;
    letter-spacing: 1.6px;
  }
  .qm__q-text {
    font-size: 24px;
    line-height: 1.2;
  }

  /* 4-option cards: 2×2 grid, stretches to fill remaining step space */
  .qm__cards--4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
  }
  /* Each card: grid layout so illo fills top, name pins to bottom */
  .qm__cards--4 .qm__card {
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 16px 8px 12px;
    align-items: center;
    text-align: center;
    overflow: hidden;
    gap: 0;
    flex-direction: unset;
    justify-content: unset;
  }
  /* Illo: fills the top grid row, image fits inside */
  .qm__cards--4 .qm__card-illo {
    flex: unset;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: unset;
  }
  .qm__cards--4 .qm__card-illo img {
    width: 100%;
    height: 100%;
    max-height: 120px;
    object-fit: contain;
  }
  /* Name: auto height at bottom */
  .qm__cards--4 .qm__card-name {
    font-size: 14px;
    white-space: normal;
    text-align: center;
    padding-top: 8px;
    align-self: end;
  }
  .qm__cards--4 .qm__card.selected,
  .qm__cards--2 .qm__card.selected { border: 1px solid var(--cream); }

  /* 2-option cards: both visible without scrolling */
  .qm__cards--2 {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
  }
  .qm__cards--2 .qm__card {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 20px;
    row-gap: 0;
    padding: 16px 20px 16px 16px;
    flex: 1;
    min-height: 0;
    align-items: start;
    align-content: center;
    text-align: left;
  }
  /* Illustration: left column, spans both rows, fills card height */
  .qm__cards--2 .qm__card-illo {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 110px;
    height: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: unset;
    align-self: stretch;
  }
  .qm__cards--2 .qm__card-illo img {
    width: 100%;
    max-height: 140px;
    object-fit: contain;
  }
  /* Description (top-right) */
  .qm__cards--2 .qm__card-desc {
    grid-column: 2;
    grid-row: 1;
    font-family: 'Futura PT', var(--font);
    font-size: 13px;
    font-weight: 300;
    color: rgba(244,240,229,0.6);
    line-height: 1.4;
    align-self: center;
  }
  /* Title (bottom-right) */
  .qm__cards--2 .qm__card-name {
    grid-column: 2;
    grid-row: 2;
    font-size: 17px;
    font-weight: 500;
    color: var(--cream);
    white-space: normal;
    align-self: end;
    padding-top: 6px;
  }

  /* Form step: bordered inputs with floating chip labels */
  .qm__form {
    gap: 16px;
    overflow-y: visible;
    height: auto;
    flex-shrink: 0;
    width: 100%;
    margin-top: 4px;
    padding-top: 12px;
    padding-bottom: 16px;
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }
  .qm__field {
    position: relative;
    padding: 0 16px;
    border: 1px solid rgba(244,240,229,0.4);
    border-bottom-width: 1px;
    height: 59px;
    width: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  .qm__field-label {
    position: absolute;
    top: -9px;
    left: 13px;
    background: #24564D;
    padding: 2px 4px;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
    line-height: 1.2;
    z-index: 1;
  }
  .qm__input,
  .qm__select {
    font-size: 16px;
    padding: 0;
    color: rgba(244,240,229,0.85);
  }
  .qm__or { padding: 4px 0; font-size: 13px; }

  /* Footer */
  .qm__footer {
    flex-shrink: 0;
    padding: 16px 32px max(32px, env(safe-area-inset-bottom, 32px));
    justify-content: space-between;
  }
  .qm__btn {
    height: 48px;
    border-radius: 12px;
    width: 122px;
    justify-content: center;
    padding: 0 12px;
  }
  .qm__btn--back { background: var(--brown); color: var(--cream); }
  .qm__btn--next {
    background: #F7FAFB;
    border-color: transparent;
    color: #7A3B26;
  }
  .qm__btn--next:not(:disabled) { background: #F7FAFB; color: #7A3B26; }
  .qm__btn:disabled { opacity: 0.3; }

  /* Results: redo link top-right */
  .qm__redo-mobile { display: none; }

  /* Result cards: desktop horizontal scroll — keep base style, just bump sizes */
  .qm__result-card { width: 220px; }
  .qm__result-img { width: 220px; }
  .qm__result-num { font-size: 26px; letter-spacing: 2px; }
  .qm__result-name { font-size: 14px; }
  .qm__result-type { font-size: 12px; }

  /* Quiz connect form */
  .quiz-connect__row {
    flex-direction: column;
    gap: 8px;
  }

  .quiz-connect__btn {
    width: 100%;
    justify-content: center;
  }

  /* Mobile results: horizontal scroll — cards sized to show ~1.5 at a time */
  .qm__results {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    min-height: 0;
    gap: 12px;
    padding: 0 4px 8px;
    scroll-snap-type: x mandatory;
  }
  .qm__result-card {
    width: 54vw;
    flex-shrink: 0;
    height: 100%;
    scroll-snap-align: start;
  }
  .qm__result-img {
    width: 100%;
  }
  .qm__result-num  { font-size: 26px; letter-spacing: 2px; }
  .qm__result-name { font-size: 13px; }
  .qm__result-type { font-size: 11px; }
}

/* ─── 9. FOOTER / CONTACT ─── */
@media (max-width: 768px) {
  /* Contact section: full-width stack */
  #contact {
    padding-top: 40px;
    padding-bottom: 0;
  }
  .contact__card--front,
  .contact__card--back {
    border-radius: 0;
  }

  .contact__heading {
    width: calc(100% - 32px);
    padding: 0;
    margin: 0 16px 20px 16px;
  }

  .contact__cards {
    flex-direction: column;
    align-items: stretch;
    width: calc(100% - 32px);
    margin: 0 16px;
    padding: 0 0 0 0;
    gap: 16px;
  }

  .contact__card {
    width: 100%;
    max-width: 100%;
    height: 320px;
    min-height: 320px;
    flex: none;
  }

  .contact__card--front {
    transform: translateX(-80px);
  }

  .contact__card--back {
    transform: translateX(80px);
    margin-left: 0;
    padding: 20px;
  }

  .contact__sep {
    margin: 0 16px 12px 16px;
  }

  /* Footer: single column stack matching reference */
  .site-footer {
    padding: 20px 20px 32px 20px;
  }

  .site-footer__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  /* Order: address → photo → nav → newsletter → copy */
  .site-footer__address-col { order: 1; padding: 0 0 20px 0; }
  .site-footer__photo       { order: 2; margin-bottom: 24px; }
  .site-footer__nav-col     { order: 3; }

  .site-footer__photo video,
  .site-footer__photo img {
    width: 55%;
    height: 130px;
    object-fit: cover;
    border-radius: 2px;
  }

  .site-footer__addr {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .site-footer__contact-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .site-footer__contact-links a {
    font-size: 14px;
  }

  .site-footer__nav {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
  }

  .site-footer__nav a {
    font-size: 14px;
  }

  .site-footer__newsletter {
    margin-bottom: 24px;
  }

  .site-footer__copy {
    font-size: 11px;
  }

  .site-footer__admin {
    position: static;
    margin-top: 8px;
  }
}

/* ─── 10. MOB-FAB — floating buttons during projects scroll ─── */
@media (max-width: 768px) {
  /* Ensure mob-fab is properly layered above content */
  .mob-fab {
    z-index: 910;
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px));
    right: 16px;
  }

  /* Ensure mob-fab filter pill is correctly styled */
  .mob-fab .desk-fab__filter-wrap {
    height: 52px;
    width: 52px;
    border-radius: 14px;
  }

  .mob-fab .desk-fab__filter-wrap.open {
    width: 280px;
  }

  .mob-fab .desk-fab__filter {
    width: 52px;
    height: 52px;
    min-width: 52px;
  }

  /* Touch-friendly tap targets on filter options */
  .mob-fab .filter-pill__opt {
    min-height: 36px;
    font-size: 13px;
    padding: 6px 8px;
  }
}

/* ─── GENERAL MOBILE TOUCH FIXES ─── */
/* Hidden on desktop, shown only via mobile media query below */
.mob-bg-texture { display: none; }

@media (max-width: 768px) {
  /* On mobile: real fixed div is the only reliable static texture on iOS */
  .mob-bg-texture {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--cream);
    background-image: url('../images/img_paper_texture.jpg');
    background-size: cover;
    background-position: center;
    pointer-events: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: transform;
  }
  body {
    background: transparent;
  }
  #hero-dark,
  #work,
  #contact,
  .quiz-section,
  .site-footer,
  .hero-dark__content {
    background-color: transparent;
    background-image: none;
    background-attachment: scroll;
  }
  .work-overlay__bg {
    background-color: var(--cream);
    background-image: url('../images/img_paper_texture.jpg');
    background-size: cover;
    background-attachment: scroll;
  }

  /* Disable desktop hover transforms on touch devices */
  .project:hover {
    background: transparent;
  }

  .contact__card:hover {
    transform: none;
    box-shadow: none;
  }

  /* Ensure all sections don't overflow horizontally */
  section {
    overflow-x: hidden;
  }

  /* Prevent font size inflation on iOS */
  body {
    -webkit-text-size-adjust: 100%;
  }
}