/* ==========================================================================
   INNSPACE Lab
   Visual language adapted from vicaria.com.co: white ground, sentence-case
   display headings, wide-tracked Roboto eyebrows, dark-teal bands, centred
   composition, soft radii. Brand teal (#1B4351) stands in for Vicaría's
   #003E52. Two-tone palette: teal accents on light grounds, sand on dark.
   Display face is the client's Koln Messe-Deutz; body stays Roboto.
   ========================================================================== */

/* Koln Messe-Deutz — supplied by the client, installed locally.
   fsType 0 (installable), full Latin-1 + punctuation coverage verified.
   Regular only: never request a bold/italic weight from it, or the browser
   synthesises one and the thin deco strokes smear. Display use only —
   the lowercase i is dotless, which is fine large and poor at body size. */
@font-face{
  font-family:'Koln Messe-Deutz';
  src:url('../fonts/KolnMesseDeutz.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --teal:        #1B4351;   /* brand — bands, headings */
  --teal-deep:   #12303B;   /* footer */
  --teal-soft:   #E8EEF0;   /* tinted panels */
  /* Sand #EAE0D3 is 1.3:1 on white — it cannot carry text or graphics on the
     light sections. So the accent role splits by ground: teal accents on
     light (10.67:1), sand accents on dark (8.18:1). No orange remains. */
  --sand:        #EAE0D3;   /* brand neutral; alternating section ground */
  --accent:      #1B4351;   /* accent on light grounds */
  --accent-ink:  #1B4351;   /* fills sitting under white text */
  --accent-light:#EAE0D3;   /* accent on dark grounds */
  --accent-dark: #12303B;   /* hover for accent fills */

  --ink:         #4B4F58;   /* body copy */
  --ink-strong:  #23282D;
  --ink-mute:    #5A6069;   /* dark enough for the sand ground (4.9:1), not just white */

  --bg:          #FFFFFF;
  --bg-alt:      #EAE0D3;
  --line:        #E3E0DB;

  --font-head: 'Koln Messe-Deutz', 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  --step--1: .8125rem;
  --step-0:  1rem;
  --step-1:  clamp(1.05rem, 1rem + .25vw, 1.2rem);
  --step-2:  clamp(1.35rem, 1.15rem + .9vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.4rem + 2.2vw, 2.75rem);
  --step-4:  clamp(2rem, 1.2rem + 3.4vw, 3.6rem);

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --bay:    clamp(4rem, 9vh, 7.5rem);
  --maxw:   1200px;

  --radius: 4px;
  --shadow: 0 10px 34px rgba(27,67,81,.10);
  --shadow-lg: 0 18px 50px rgba(27,67,81,.16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  font-weight:400;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--accent); color:#fff; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--accent-ink); color:#fff; padding:.75rem 1.25rem;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; }

/* Vicaría's signature: small caps label, very wide tracking */
.eyebrow{
  font-family:var(--font-body);
  font-weight:500;
  font-size:var(--step--1);
  letter-spacing:.62em;
  text-transform:uppercase;
  margin:0 0 1.25rem;
  color:var(--accent-ink);
}
.eyebrow--light{ color:rgba(255,255,255,.92); }

/* flag glyph that precedes section titles */
.flag{
  display:inline-block;
  width:26px; height:16px;
  margin-right:.75rem;
  vertical-align:baseline;
  background:var(--accent);
  clip-path:polygon(0 0, 100% 0, 72% 100%, 0 100%);
  flex:none;
}

/* -------------------------------------------------------------- preloader */
.preloader{
  position:fixed; inset:0; z-index:400;
  background:var(--teal);
  display:grid; place-items:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ width:min(72vw,420px); text-align:center; color:#fff; }
.preloader__label{
  display:block;
  font-family:var(--font-body); font-weight:500;
  font-size:var(--step--1); letter-spacing:.62em; text-transform:uppercase;
  margin-bottom:1.25rem; color:rgba(255,255,255,.85);
}
.preloader__rule{ height:2px; background:rgba(255,255,255,.22); position:relative; }
.preloader__rule i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--accent-ink); display:block; }
.preloader__count{
  display:block; margin-top:1rem;
  font-family:var(--font-body); font-weight:500; font-size:.8rem;
  letter-spacing:.2em; color:rgba(255,255,255,.7);
  font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------------------------- nav */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; gap:2rem;
  padding:.85rem var(--gutter);
  background:var(--teal);
  transition:box-shadow .35s var(--ease), padding .35s var(--ease);
}
.nav.is-stuck{ box-shadow:0 6px 24px rgba(0,0,0,.18); padding-block:.6rem; }

.nav__brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none; flex:none; }
.nav__brand img{ width:clamp(46px,4.6vw,66px); height:auto; }

/* two-line lockup: wordmark over a tracked-out LAB */
.nav__brandtext{ display:flex; flex-direction:column; gap:.3em; }
.nav__brandname{
  color:#fff; line-height:1;
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.15rem,1.55vw,1.45rem); letter-spacing:.16em; text-transform:uppercase;
}
.nav__brandsub{
  /* body face, not the display one — Koln's thin strokes break up at 10px */
  color:rgba(255,255,255,.7); line-height:1;
  font-family:var(--font-body); font-weight:500;
  font-size:.625rem; letter-spacing:.5em; text-transform:uppercase;
}

.nav__links{ display:flex; gap:2.1rem; margin-left:auto; }
.nav__links a{
  text-decoration:none;
  font-family:var(--font-head); font-weight:400;
  font-size:.95rem; color:rgba(255,255,255,.86);
  padding-block:.65rem;
  position:relative;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:.35rem;
  height:2px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a:hover{ color:#fff; }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__num{ display:none; }

.nav__cta{
  font-family:var(--font-body); font-weight:500; font-size:.85rem;
  letter-spacing:.04em;
  text-decoration:none;
  background:var(--accent-ink); color:#fff;
  padding:.8rem 1.4rem;
  border-radius:999px;
  white-space:nowrap;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.nav__cta:hover{ background:var(--accent-dark); transform:translateY(-1px); }

.nav__toggle{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:0;
  background:none; border:0; cursor:pointer;
  place-items:center; gap:6px;
}
.nav__toggle span{ display:block; width:22px; height:2px; background:#fff; transition:transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

@media (max-width:940px){
  .nav__cta{ display:none; }
  .nav__toggle{ display:grid; }
  .nav__links{
    position:fixed; inset:0;
    background:var(--teal);
    flex-direction:column; justify-content:center; align-items:center;
    gap:1.75rem; padding:var(--gutter); margin:0;
    transform:translateY(-100%);
    transition:transform .5s var(--ease);
    z-index:-1;
  }
  .nav__links.is-open{ transform:translateY(0); }
  .nav__links a{ font-family:var(--font-head); font-size:var(--step-2); color:#fff; }
}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;
  min-height:min(92vh,820px);
  display:grid; place-items:center;
  text-align:center;
  padding:9rem var(--gutter) 5rem;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute; inset:0; z-index:-2;
}
/* The render is a bright daylit interior, so it needs both a darkened image
   and a strong scrim before white type clears 4.5:1 over it. Worst-case
   (pure white pixel) composites to ~rgb(60,81,89) => 8.1:1 against white. */
.hero__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.62) saturate(.85);
}
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(18,48,59,.86) 0%, rgba(18,48,59,.70) 45%, rgba(18,48,59,.90) 100%);
}
.hero__body{ max-width:60rem; }
.hero__title{
  font-family:var(--font-head); font-weight:400;
  font-size:var(--step-4);
  line-height:1.15;
  color:#fff;
  margin:0 0 1.5rem;
  text-wrap:balance;
}
.hero__lede{
  color:rgba(255,255,255,.88);
  font-size:var(--step-1);
  max-width:46rem; margin:0 auto 2.5rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

.btn{
  display:inline-block;
  font-family:var(--font-body); font-weight:500; font-size:.9rem;
  text-decoration:none;
  padding:1rem 2rem;
  border-radius:999px;
  background:var(--accent-ink); color:#fff;
  border:2px solid var(--accent-ink);
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-2px); }
.btn--ghost{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
.btn--ghost:hover{ background:#fff; border-color:#fff; color:var(--teal); transform:translateY(-2px); }

.hero__scroll{
  position:absolute; bottom:1.75rem; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.75);
  font-size:.7rem; letter-spacing:.4em; text-transform:uppercase;
}

/* ------------------------------------------------------------ quote band */
.quote{
  position:relative;
  background:var(--bg-alt);
  padding:var(--bay) var(--gutter);
  text-align:center;
  overflow:hidden;
}
.quote__mark{
  position:absolute; top:50%; left:50%;
  width:min(46rem,90vw); height:auto;
  transform:translate(-50%,-50%);
  opacity:.045; pointer-events:none;
}
.quote__inner{ position:relative; max-width:52rem; margin-inline:auto; }
.quote__text{
  font-family:var(--font-head); font-weight:400;
  font-size:var(--step-3); line-height:1.25;
  color:var(--accent-ink);
  margin:0 0 .75rem;
  text-wrap:balance;
}
.quote__by{ margin:0 0 1.5rem; color:var(--ink-mute); font-size:.95rem; }
.quote__sub{ margin:0; color:var(--ink); font-size:var(--step-1); }

/* -------------------------------------------------------------- sections */
.section{
  padding:var(--bay) var(--gutter);
}
.section--alt{ background:var(--bg-alt); }
.section__inner{ max-width:var(--maxw); margin-inline:auto; }

.section__head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.section__head--center{ text-align:center; }
.section__title{
  font-family:var(--font-head); font-weight:400;
  font-size:var(--step-3);
  line-height:1.2;
  color:var(--teal);
  margin:0;
  display:flex; align-items:center;
}
.section__head--center .section__title{ justify-content:center; }
.section__note{ margin:.85rem 0 0; color:var(--ink-mute); font-size:.95rem; }

/* ---------------------------------------------------------------- studio */
.studio__grid{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr; align-items:start; }
@media (min-width:900px){ .studio__grid{ grid-template-columns:1.15fr .85fr; } }

.studio__lead p{ margin:0 0 1.35rem; }
.studio__lead .lede{
  border-left:4px solid var(--accent);
  padding-left:1.25rem;
  font-size:var(--step-1);
  color:var(--ink-strong);
}
.studio__lead em{ color:var(--teal); font-style:italic; }

.studio__aside{ display:grid; gap:1.5rem; }
.studio__img{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:#fff; }

.facts{ margin:0; border-top:1px solid var(--line); }
.facts__row{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:.85rem 0; border-bottom:1px solid var(--line);
}
.facts__row dt{
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:500;
}
.facts__row dd{ margin:0; text-align:right; color:var(--ink-strong); font-weight:500; }
.is-placeholder{ color:var(--ink-mute); font-weight:400; }

/* ------------------------------------------------------------------ work */
.work{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.75rem,3.5vw,2.75rem);
  grid-template-columns:1fr;
}
@media (min-width:900px){ .work{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .work{ grid-template-columns:repeat(3,1fr); } }

.project{ display:flex; }
.project__link{
  display:flex; flex-direction:column;
  font:inherit; color:inherit; text-align:left;
  border:0; padding:0; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  box-shadow:var(--shadow);
  width:100%;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.project__link:hover,
.project__link:focus-visible{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }

.project__figure{ margin:0; position:relative; overflow:hidden; background:var(--bg-alt); }
.project__figure img{
  width:100%; aspect-ratio:16 / 10; object-fit:cover;
  filter:saturate(.86);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.project__link:hover .project__figure img,
.project__link:focus-visible .project__figure img{ transform:scale(1.06); filter:saturate(1); }

/* honest empty state for projects with no imagery yet */
.project__figure--empty{
  aspect-ratio:16 / 10;
  display:grid; place-items:center;
  background:var(--teal-soft);
  color:var(--teal);
  text-align:center; padding:1.5rem;
}
.project__figure--empty span{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; font-weight:500;
}

.project__index{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  background:var(--accent-ink); color:#fff;
  font-family:var(--font-body); font-weight:500; font-size:.7rem;
  letter-spacing:.08em;
  padding:.3rem .6rem; border-radius:999px;
}
.project__body{ padding:1.5rem 1.5rem 1.75rem; display:flex; flex-direction:column; flex:1; }
.project__name{
  font-family:var(--font-head); font-weight:400; font-size:var(--step-2);
  color:var(--teal); margin:0 0 .85rem; line-height:1.2;
  transition:color .25s var(--ease);
}
.project__link:hover .project__name{ color:var(--accent-ink); }

.project__spec{
  display:flex; flex-wrap:wrap; gap:.3rem 1.1rem;
  margin:0 0 1rem; padding-bottom:1rem;
  border-bottom:1px solid var(--line);
  font-size:.78rem;
}
.project__spec > div{ display:flex; gap:.4rem; }
.project__spec dt{ color:var(--ink-mute); letter-spacing:.08em; text-transform:uppercase; }
.project__spec dd{ margin:0; color:var(--ink-strong); font-weight:500; }
.project__desc{ margin:0; font-size:.95rem; }

/* -------------------------------------------------------------- services */
.services{ display:grid; gap:clamp(1.5rem,3vw,2.25rem); grid-template-columns:1fr; }
@media (min-width:820px){ .services{ grid-template-columns:repeat(3,1fr); } }

.service{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.75rem,3vw,2.5rem);
  text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.service:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.service__num{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center;
  margin:0 auto 1.5rem;
  background:var(--teal-soft); color:var(--teal);
  font-family:var(--font-body); font-weight:500; font-size:1rem;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.service:hover .service__num{ background:var(--accent-ink); color:#fff; }
.service__name{
  font-family:var(--font-head); font-weight:400; font-size:var(--step-2);
  color:var(--teal); margin:0 0 .9rem; line-height:1.25;
}
.service p{ margin:0; font-size:.95rem; }

/* --------------------------------------------------------------- contact */
.contact{
  position:relative;
  padding:var(--bay) var(--gutter);
  text-align:center;
  overflow:hidden;
  isolation:isolate;
}
.contact__bg{ position:absolute; inset:0; z-index:-2; }
.contact__bg img{ width:100%; height:100%; object-fit:cover; }
.contact::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(18,48,59,.90), rgba(18,48,59,.94));
}
.contact__inner{ max-width:var(--maxw); margin-inline:auto; }
.contact .section__title{ color:#fff; justify-content:center; }
.contact__lead{ color:rgba(255,255,255,.86); font-size:var(--step-1); max-width:38rem; margin:0 auto 2.5rem; }
.contact__mail{
  display:inline-block;
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.3rem,4.6vw,2.6rem);
  color:#fff; text-decoration:none;
  border-bottom:3px solid var(--accent);
  padding-bottom:.25rem;
  word-break:break-word;
  transition:color .3s var(--ease);
}
.contact__mail:hover{ color:var(--accent-light); }

.contact__list{
  display:grid; gap:2rem; grid-template-columns:1fr;
  margin:clamp(2.5rem,5vw,4rem) 0 0;
}
@media (min-width:700px){ .contact__list{ grid-template-columns:repeat(4,1fr); } }
.contact__list > div{ display:flex; flex-direction:column; gap:.4rem; }
.contact__list dt{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent-light); font-weight:500;
}
.contact__list dd{ margin:0; color:#fff; }
.contact__list a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); }
.contact__list a:hover{ color:var(--accent-light); border-color:var(--accent-light); }
.contact__list .is-placeholder{ color:rgba(255,255,255,.55); }

/* ---------------------------------------------------------------- footer */
.footer{ background:var(--teal-deep); color:rgba(255,255,255,.84); }
.footer__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:2rem var(--gutter);
  display:flex; flex-wrap:wrap; gap:.75rem 2rem; justify-content:space-between;
  font-size:.85rem;
}
.footer__top{ text-decoration:none; }
.footer__top:hover{ color:var(--accent-light); }

/* --------------------------------------------------------------- reveals */
.reveal,.reveal-plate{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-in,.reveal-plate.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-plate{ opacity:1 !important; transform:none !important; transition:none !important; }
  .project__figure img{ transition:none; }
  .preloader{ display:none; }
}

/* ------------------------------------------------------- project detail */
/* "View project" affordance on the cover */
.project__open{
  position:absolute; left:50%; bottom:.9rem; transform:translate(-50%,6px);
  background:rgba(255,255,255,.94); color:var(--teal);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  padding:.5rem .9rem; border-radius:999px;
  opacity:0; transition:opacity .3s var(--ease), transform .3s var(--ease);
  pointer-events:none;
}
.project__link:hover .project__open,
.project__link:focus-visible .project__open{ opacity:1; transform:translate(-50%,0); }
.project__figure--empty{ position:relative; }

.modal{
  width:min(1100px, 94vw);
  max-height:90vh;
  padding:0;
  border:0;
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
}
.modal::backdrop{ background:rgba(18,48,59,.78); }
.modal[open]{ display:flex; flex-direction:column; }

.modal__scroll{ overflow-y:auto; overscroll-behavior:contain; }

.modal__close{
  position:absolute; top:.6rem; right:.6rem; z-index:3;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:var(--teal); color:#fff;
  border:0; border-radius:50%;
  font-size:1.5rem; line-height:1; cursor:pointer;
  transition:background .25s var(--ease);
}
.modal__close:hover{ background:var(--accent-dark); }

.modal__head{
  padding:clamp(1.75rem,4vw,3rem) clamp(1.25rem,4vw,3rem) 0;
  max-width:60rem;
}
.modal__title{
  font-family:var(--font-head); font-weight:400;
  font-size:var(--step-3); line-height:1.15;
  color:var(--teal); margin:0 0 1rem;
}
.modal__spec{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem;
  margin:0 0 1.25rem; padding-bottom:1.25rem;
  border-bottom:1px solid var(--line);
  font-size:.8rem;
}
.modal__spec > div{ display:flex; gap:.45rem; }
.modal__spec dt{ color:var(--ink-mute); letter-spacing:.1em; text-transform:uppercase; }
.modal__spec dd{ margin:0; color:var(--ink-strong); font-weight:500; }
.modal__desc{ margin:0; max-width:52ch; }

.modal__body{ padding:clamp(1.5rem,3.5vw,2.5rem) clamp(1.25rem,4vw,3rem) clamp(2rem,4vw,3rem); }

.detail__h{
  font-family:var(--font-head); font-weight:400;
  font-size:var(--step-2); color:var(--teal);
  margin:2rem 0 1rem; line-height:1.2;
}
.detail__h:first-child{ margin-top:0; }

.detail__gallery{
  display:grid; gap:1rem;
  grid-template-columns:1fr;
}
@media (min-width:700px){ .detail__gallery{ grid-template-columns:repeat(2,1fr); } }
.detail__gallery figure{ margin:0; border-radius:var(--radius); overflow:hidden; background:var(--bg-alt); }
.detail__gallery img{ width:100%; aspect-ratio:16/10; object-fit:cover; }

.detail__plan{ margin:0; border-radius:var(--radius); overflow:hidden; background:var(--bg-alt); }
.detail__plan img{ width:100%; height:auto; }

.detail__empty{
  margin:0;
  background:var(--teal-soft); color:var(--teal);
  border-radius:var(--radius);
  padding:2.5rem 1.5rem; text-align:center;
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
}

/* the page must not scroll behind an open dialog */
body.has-modal{ overflow:hidden; }
/* =========================================================================
   PANELS + HORIZONTAL TRACK
   Vertical (mobile-first) is the base. The horizontal reading order only
   switches on at desktop widths — horizontal scrolling on a touch device
   fights the browser's own back-swipe gesture.
   ========================================================================= */

.panel{
  position:relative;
  padding:var(--bay) var(--gutter);
}
.panel--alt{ background:var(--bg-alt); }
.panel__inner{ max-width:var(--maxw); margin-inline:auto; width:100%; }

/* ------------------------------------------------------------- partners */
/* A bare logo band: hairline rules top and bottom, no plates, no captions. */
.partners{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:clamp(3rem,9vw,8rem);
  padding-block:clamp(2.5rem,6vw,4rem);
  border-block:1px solid rgba(27,67,81,.14);
  /* the rules are sized to the logos, not to the page — a full-width hairline
     around two small marks reads as an unfinished row */
  max-width:min(100%,42rem); margin-inline:auto;
}

.partner{ display:flex; align-items:center; }

/* The two marks have very different proportions (720 is a wide lockup, Dushi a
   near-square stack), so equal pixel height would leave 720 looking oversized.
   --mark scales each one to roughly equal ink area instead. */
.partner__mark{
  display:block;
  height:calc(var(--mark,1) * clamp(4.75rem,11vw,9rem));
  width:auto; max-width:100%;
  object-fit:contain;
}
.partner--720{ --mark:.78; }
.partner--dushi{ --mark:1; }

/* ------------------------------------------------- contact foot (in panel) */
.contact__foot{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; justify-content:center;
  margin-top:clamp(2rem,5vw,3.5rem);
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.84);
  font-size:.85rem;
}

/* --------------------------------------------------------- progress rail */
.progress{ display:none; }

/* =========================================================================
   HORIZONTAL MODE
   ========================================================================= */
@media (min-width:900px) and (min-height:520px){

  html,body{ height:100%; overflow:hidden; }

  .track{
    display:flex;
    height:100vh; height:100dvh;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x proximity;
    /* Firefox */
    scrollbar-width:auto;
    scrollbar-color:var(--teal) rgba(27,67,81,.10);
  }

  /* A real, draggable scrollbar. Sideways scrolling gives no other signal that
     there is more to the right, and a wheel gesture alone is a poor affordance.
     This takes over the strip the decorative progress rail used to occupy. */
  .track::-webkit-scrollbar{ height:12px; }
  .track::-webkit-scrollbar-track{ background:rgba(27,67,81,.10); }
  .track::-webkit-scrollbar-thumb{
    background:var(--teal);
    border-radius:999px;
    /* transparent border + content-box clip insets the thumb without shrinking
       the hit area — the whole 12px stays draggable */
    border:3px solid transparent;
    background-clip:content-box;
  }
  .track::-webkit-scrollbar-thumb:hover{
    background:var(--teal-deep);
    background-clip:content-box;
  }

  .panel{
    flex:0 0 100vw;
    height:100%;
    scroll-snap-align:start;
    display:flex; flex-direction:column; justify-content:center;
    padding:clamp(5.5rem,11vh,7.5rem) var(--gutter) clamp(2rem,5vh,4.5rem);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  /* the projects lane is as wide as its cards need */
  .panel--wide{ flex:0 0 auto; }

  /* hero fills its own panel rather than setting its own height */
  .panel.hero{
    min-height:0;
    display:grid; place-items:center;
    padding:7.5rem var(--gutter) 5rem;
    overflow:hidden;
  }
  .panel.quote{ overflow:hidden; }
  /* the watermark is a square; unconstrained it exceeds short viewports */
  .panel.quote .quote__mark{ max-height:74vh; width:auto; }
  .panel.contact{ overflow-y:auto; }

  .hero__scroll{ bottom:2.25rem; }

  /* ---- studio reads as two columns so it fits one screen ---- */
  #studio .studio__grid{ grid-template-columns:1.05fr .95fr; align-items:center; gap:clamp(2rem,4vw,4rem); }
  #studio .studio__lead p{ margin-bottom:clamp(.45rem,1.5vh,1rem); }
  /* A panel that overflows vertically defeats the point of the format, so
     the tallest panel's parts are capped against the viewport height. */
  #studio .section__head{ margin-bottom:clamp(1rem,2.5vh,2rem); }
  #studio .studio__img img{ max-height:30vh; object-fit:cover; }
  #studio .facts__row{ padding-block:clamp(.4rem,1vh,.85rem); }

  /* ---- projects: heading sits beside the row of cards ---- */
  .projects__lane{
    display:flex; align-items:center;
    gap:clamp(2.5rem,5vw,5rem);
    height:100%;
  }
  .projects__head{
    flex:0 0 clamp(16rem,22vw,22rem);
    margin-bottom:0;
    text-align:left;
  }
  .projects__head .section__title{ justify-content:flex-start; }
  .projects__head .section__note{ margin-top:1rem; }

  .work{
    display:flex;
    gap:clamp(1.5rem,2.5vw,2.25rem);
    grid-template-columns:none;
    align-items:stretch;
  }
  .work > .project{ flex:0 0 clamp(19rem,23vw,23rem); }

  /* ---- services / partners centred within their panel ---- */
  #services .panel__inner,
  #partners .panel__inner{ margin-block:auto; }

  /* A panel that scrolls vertically defeats the horizontal format, so the
     vertical rhythm is measured in vh here rather than rem. Checked against
     700px-tall laptops, which is where this first breaks. */
  .panel .section__head{ margin-bottom:clamp(1rem,3vh,2.5rem); }
  .panel.quote .quote__text{ margin-bottom:.6rem; }
  .panel.quote .quote__by{ margin-bottom:clamp(.75rem,2vh,1.5rem); }
  .panel.contact .contact__list{ margin-top:clamp(1.5rem,4vh,3.5rem); }
  .panel.contact .contact__foot{ margin-top:clamp(1rem,3vh,3rem); padding-top:1rem; }
  .panel.contact .contact__lead{ margin-bottom:clamp(1.25rem,3.5vh,2.5rem); }
  #partners .partners{ padding-block:clamp(1.5rem,5vh,3.5rem); }
  #partners .partner__mark{ height:calc(var(--mark,1) * clamp(3.5rem,16vh,9rem)); }

  /* The old 3px progress rail lived at bottom:0, exactly where the scrollbar
     now sits. The scrollbar shows the same position and can actually be
     dragged, so the rail stays hidden (base rule) rather than overlapping it. */
}

/* Short-but-usable windows (laptops, and any display running at 125–150%
   scaling) stay horizontal, but the body rhythm tightens so the studio panel —
   the tallest one — still fits without scrolling inside itself. */
@media (min-width:900px) and (min-height:520px) and (max-height:820px){
  #studio .studio__lead p{ line-height:1.5; }
  #studio .studio__lead .lede{ line-height:1.4; }
  #studio .studio__img img{ max-height:26vh; }
  #studio .section__head{ margin-bottom:clamp(.5rem,2vh,2rem); }
}

/* Shorter still (roughly a 1366x768 laptop, or any screen at 150% scaling).
   Everything gives a little so the panels keep fitting one screen each. */
@media (min-width:900px) and (min-height:520px) and (max-height:660px){
  .panel{ padding-top:clamp(5rem,10vh,7.5rem); padding-bottom:clamp(1.5rem,3.5vh,4.5rem); }
  #studio .studio__lead p{ line-height:1.45; margin-bottom:.4rem; }
  #studio .studio__lead .lede{ font-size:1rem; }
  #studio .studio__img img{ max-height:20vh; }
  .work > .project .project__desc{ line-height:1.45; }
  #studio .facts__row{ padding-block:.25rem; }
  /* a shallower card cover buys back the height the descriptions need */
  .work > .project .project__figure img,
  .work > .project .project__figure--empty{ aspect-ratio:16/9; }
  #services .section__head{ margin-bottom:clamp(.5rem,1.5vh,1.5rem); }
  #services .service{ padding-block:clamp(.4rem,1.2vh,1.25rem); }
}

/* Very short desktop windows keep the vertical layout — a 100vh panel with
   this much type in it would otherwise clip. */
@media (min-width:900px) and (max-height:519px){
  .track{ display:block; }
}