/* Dream Estate — homepage prototype
   Type & motion system modelled on normalisboring.es: rem scales with the viewport
   (1rem = 20px at 1920px), 12-col grid, uppercase serif display, thin editorial labels. */

@font-face {
  font-family: 'Luxiachy';
  src: url('../fonts/Luxiachy.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Hanken Grotesk (OFL), self-hosted variable font, latin + latin-ext subsets */
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --black: #111110;
  --white: #ffffff;
  --sand: #ECE6DC;      /* beige panels */
  --stone: #B9B3A9;     /* grey project tile */
  --sage: #D3DDD5;      /* the reference's pale blue, shifted to Dream Estate's green */
  --green: #52B69A;     /* brand accent from dreamestate.dk */
  --forest: #2F5D50;    /* closing panel */
  --grey: #77736D;

  --f-display: 'Luxiachy', 'Times New Roman', serif;
  --f-edit: 'Luxiachy', Georgia, serif;
  --f-sans: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

  --gap: 1.5rem;
  --padd: 1.65rem;
  --col: calc((100vw - var(--padd) * 2 - var(--gap) * 11) / 12);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

html { font-size: 1.0416666667vw; background: var(--black); }
@media (max-width: 1024px) { html { font-size: 1.953125vw; } }
@media (max-width: 768px)  { html { font-size: 2.604vw; } }
@media (max-width: 576px)  { html { font-size: 3.47vw; } }
@media (max-width: 468px)  { html { font-size: 4.27vw; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--white);
  color: var(--black);
  font-family: var(--f-sans);
  font-size: .85rem;
  line-height: 1.15rem;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
em { font-style: italic; }
/* Luxiachy has no italic, so the browser slants it; give the leaning last glyph room inside clip masks */
em, .edit-i, .menu__item .hint { padding-right: .2em; }
h1, h2, h3, h4 { font: inherit; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- type scale ---------- */
.t-sx  { font-family: var(--f-display); font-weight: 400; font-size: 12rem; line-height: 10.5rem; }
.t-sl  { font-family: var(--f-display); font-weight: 400; font-size: 9.5rem; line-height: 8.1rem; }
.t-s   { font-family: var(--f-display); font-weight: 400; font-size: 6.5rem; line-height: 5.85rem; }
.t-xxl { font-size: 3.5rem; line-height: 3.15rem; }
.t-xl  { font-family: var(--f-display); font-size: 3rem; line-height: 3.5rem; }
.t-l   { font-size: 2.25rem; line-height: 2.7rem; }
.t-m   { font-size: 1.65rem; line-height: 2.2rem; }
.t-pl  { font-size: 1rem; line-height: 1.4rem; }
.t-p   { font-size: .85rem; line-height: 1.15rem; }
.t-sub { font-size: .7rem; line-height: .9rem; letter-spacing: .04em; }
.up    { text-transform: uppercase; }
.ls    { letter-spacing: -.0826rem; }
.edit  { font-family: var(--f-edit); font-weight: 200; }
.edit-i{ font-family: var(--f-edit); font-weight: 200; font-style: italic; }
.disp  { font-family: var(--f-display); }
.sans  { font-family: var(--f-sans); }
.t-right { text-align: right; }
.t-center { text-align: center; }


/* split helpers */
.split-line { overflow: clip; padding: .06em 0; margin: -.06em 0; }
.char { display: inline-block; will-change: transform; }

/* background helpers hide hairline seams like the reference */
.bg-white { background: var(--white); box-shadow: 0 -1px 0 var(--white); }
.bg-black { background: var(--black); color: var(--white); box-shadow: 0 -1px 0 var(--black); }
.bg-sand  { background: var(--sand); box-shadow: 0 -1px 0 var(--sand); }
.bg-stone { background: var(--stone); box-shadow: 0 -1px 0 var(--stone); }
.bg-sage  { background: var(--sage); box-shadow: 0 -1px 0 var(--sage); }
.bg-forest{ background: var(--forest); color: var(--sand); box-shadow: 0 -1px 0 var(--forest); }

/* ---------- media: clip + parallax ---------- */
.media { position: relative; --clip: 0% 0% 0% 0%; clip-path: inset(var(--clip)); overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media .par { position: absolute; inset: -7.5% 0; height: 115%; }
.flip { position: relative; overflow: hidden; }
.flip > .media { position: absolute; inset: 0; }

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 100; background: var(--white);
  display: grid; place-items: center; pointer-events: none;
}
.loader__mark { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.loader__icon { width: 5.2rem; height: auto; overflow: visible; }
.loader__icon path { fill: none; stroke: var(--black); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.loader__word { display: flex; gap: .55em; font-family: var(--f-sans); font-size: 1.15rem; letter-spacing: .5em; text-transform: uppercase; margin-right: -.5em; }
.loader__word > span { overflow: clip; display: inline-flex; }
.loader__tag { font-family: var(--f-edit); font-style: italic; font-weight: 200; font-size: 1rem; overflow: clip; }
.loader__tag { text-align: center; line-height: 1.35; }
.loader__tag span { display: inline-block; padding: 0 .2em; }
.loader__pct { position: absolute; right: 5vw; bottom: 3vw; font-family: var(--f-edit); font-weight: 300; font-size: 3.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.loader__bar { position: absolute; left: 0; bottom: 0; height: .15rem; width: var(--progress, 0%); background: var(--black); transition: width .25s ease; }

/* ---------- header ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 50; pointer-events: none; mix-blend-mode: difference; color: var(--white); }
.header__logo {
  position: absolute; top: var(--padd); left: var(--padd); pointer-events: auto;
  display: flex; align-items: center; gap: .7rem; font-family: var(--f-sans); text-transform: uppercase;
  letter-spacing: .38em; font-size: .78rem; line-height: 1;
}
.header__logo svg { opacity: 0; width: 1.9rem; height: auto; overflow: visible; }
.header__logo svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.header__logo .w { overflow: clip; display: inline-block; }
.header__logo .w span { display: inline-block; }
.header__btn {
  position: absolute; top: calc(var(--padd) - .55rem); right: var(--padd); pointer-events: auto;
  height: 2.4rem; min-width: 2.4rem; padding: 0 1.25rem; border: 1.5px solid currentColor; border-radius: 3rem;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--f-edit); font-size: 1rem; font-weight: 300;
}
.header__btn span { display: block; }


/* ---------- cursor ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  width: .75rem; height: .75rem; margin: -.375rem 0 0 -.375rem;
  border-radius: 50%; background: var(--green); mix-blend-mode: difference;
}
/* the dot replaces the system pointer on mouse devices; touch keeps native behaviour */
@media (hover: hover) and (pointer: fine) and (min-width: 951px) {
  html, html * { cursor: none !important; }
}
@media (hover: none), (pointer: coarse), (max-width: 950px) { .cursor { display: none; } }

/* ---------- menu overlay ---------- */
.menu { position: fixed; inset: 0; z-index: 40; pointer-events: none; visibility: hidden; }
.menu.is-open { pointer-events: auto; }
.menu__bg { position: absolute; top: 0; right: 0; height: 100%; width: 0; background: var(--sage); }
.menu__inner { position: absolute; inset: 0; padding: 7rem var(--padd) var(--padd); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }
.menu__feat { grid-column: 1 / span 4; align-self: start; }
.menu__feat .media { aspect-ratio: 4 / 3; max-height: 17.5rem; --clip: 0% 0% 0% 100%; }
.menu__feat p { margin-top: .8rem; overflow: clip; }
.menu__nav { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: .2rem; }
.menu__nav .label { margin-bottom: 1.5rem; overflow: clip; }
.menu__item { display: grid; grid-template-columns: 3.5rem 1fr auto; align-items: baseline; padding: .55rem 0; border-top: 1px solid rgba(17,17,16,.18); overflow: clip; }
.menu__item:last-child { border-bottom: 1px solid rgba(17,17,16,.18); }
.menu__item .num { font-family: var(--f-edit); font-weight: 200; font-size: 1.4rem; }
.menu__item .ttl { font-family: var(--f-display); font-size: 3.4rem; line-height: 3.6rem; text-transform: uppercase; }
.menu__item .hint { font-family: var(--f-edit); font-style: italic; font-weight: 200; font-size: 1rem; }
.menu__foot { position: absolute; left: var(--padd); bottom: var(--padd); right: var(--padd); display: flex; justify-content: space-between; align-items: end; }
.menu__foot > * { overflow: clip; }

/* text roll hover */
.roll { position: relative; display: inline-block; overflow: clip; vertical-align: top; }
.roll .r2 { position: absolute; left: 0; top: 0; }

/* ---------- pill buttons with directional fill ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate;
  padding: calc(.6em - 2px) calc(1.3em - 2px); border: 1.5px solid currentColor; border-radius: 3em;
  font-family: var(--f-edit); font-weight: 300; white-space: nowrap;
}
.btn::before { content: ''; position: absolute; inset: -1px; z-index: -1; background: var(--fill, var(--black)); border-radius: inherit; transform: translate(var(--px, 0%), var(--py, 102%)); }
.btn__t { display: block; }
.btn--xl { padding: 1.05em 2.85em; }

/* ======================================================
   HORIZONTAL TRACK (desktop)
   ====================================================== */
.track-wrap { position: relative; }
.track { display: flex; width: max-content; height: 100vh; }
.track > section { position: relative; height: 100vh; flex: none; overflow: hidden; }

/* 1. hero — big wordmark in opposite corners, sans title + copy left, vertical nav right */
.p-hero { width: 100vw; }
.p-hero__logo { position: absolute; inset: 0; pointer-events: none; }
.p-hero__logo .w { position: absolute; font-family: var(--f-sans); font-weight: 300; text-transform: uppercase; font-size: 17.6vw; line-height: .74; letter-spacing: -.02em; white-space: nowrap; }
.p-hero__logo .w--a { left: .9vw; top: 4.3vh; }
.p-hero__logo .w--b { right: .5vw; bottom: 3.9vh; }
.p-hero__content { position: absolute; left: 1.9vw; top: 33.5vh; }
.p-hero__title { display: flex; flex-direction: column; font-family: var(--f-sans); font-weight: 300; text-transform: uppercase; font-size: 5.7vw; line-height: 6.4vw; letter-spacing: 0; }
.p-hero__title .tt { white-space: nowrap; }
.p-hero__p { max-width: 19vw; margin-top: 1.95vw; font-size: .9vw; line-height: 1.2vw; }
.p-hero__nav {
  position: absolute; right: 2.25vw; top: 37.7vh; display: flex; gap: 2.4vw;
  transform: translateY(-50%) rotate(-90deg); transform-origin: center; translate: 50% 0;
  font-family: var(--f-sans); text-transform: uppercase; font-size: .95vw; line-height: 1; white-space: nowrap;
}
.p-hero__nav a { display: inline-block; overflow: clip; }
.p-hero__foot { position: absolute; left: 1.9vw; bottom: 3.6vh; display: flex; flex-direction: column; gap: 1.6vw; }
.p-hero__icon { width: 4.3vw; height: auto; margin-left: 2.9vw; overflow: visible; opacity: 0; fill: none; stroke: var(--black); stroke-width: 1.4; }
.p-hero__copy { font-size: .9vw; line-height: 1; letter-spacing: .04em; }

/* image panel with flip overlay */
.p-img { display: flex; align-items: center; }
.p-img__big { height: 100%; aspect-ratio: 1.5; }
.p-img__over { position: absolute; top: 50%; translate: 0 -50%; }
.p-img--1 { padding-right: calc(var(--col) + var(--gap)); }
.p-img--1 .p-img__over { right: var(--padd); width: calc(var(--col) * 5.45 + var(--gap) * 5); aspect-ratio: 835/557; }
.p-img--2 .p-img__big { aspect-ratio: 1090/960; }
.p-img--2 { padding-right: calc(var(--col) * 2 + var(--gap)); }
.p-img--2 .p-img__over { right: calc(var(--col) + var(--padd)); width: calc(var(--col) * 5.2 + var(--gap) * 5); aspect-ratio: 668/554; }

/* text panel */
.p-text { width: calc(var(--col) * 10 + var(--gap) * 9 + var(--padd) * 2); padding: var(--padd) calc(var(--padd) * 2) 3.2rem; display: flex; flex-direction: column; justify-content: flex-end; }
.p-text__label { position: absolute; left: var(--padd); top: 50%; }
.p-text__title { margin-bottom: 4.4rem; text-transform: uppercase; font-size: 5.6rem; line-height: 5.4rem; padding-left: 3rem; }
.p-text__title .row { display: block; position: relative; white-space: nowrap; }
.p-text__title .slide { position: relative; display: inline-block; }
.p-text__body { display: flex; gap: var(--gap); }
.p-text__body p { width: calc(var(--col) * 2.9); }

/* black images + text */
.p-it { display: flex; align-items: center; gap: var(--gap); padding: 0 calc(var(--col) + var(--padd)) 0 0; }
.p-it__a { width: calc(var(--col) * 7 + var(--gap) * 6); aspect-ratio: 944/756; margin-left: calc(var(--gap) * -1); align-self: flex-start; }
.p-it__b { width: calc(var(--col) * 4 + var(--gap) * 3); aspect-ratio: 441/451; align-self: flex-end; }
.p-it__txt { width: calc(var(--col) * 8 + var(--gap) * 7); padding-left: calc(var(--col) * .6); }
.p-it__txt .line { opacity: .2; }

/* marquee strip */
.p-strip { width: 1.25em; font-size: 9.5rem; z-index: 3; }
.p-strip__in { position: absolute; left: 0; top: 0; width: 100vh; height: 1.25em; transform-origin: top left; rotate: -90deg; translate: 0 100vh; display: flex; align-items: center; overflow: hidden; }
.p-strip__row { display: flex; gap: 2.5rem; padding-right: 2.5rem; flex: none; animation: marq 9s linear infinite; }
.p-strip__row span { display: inline-flex; align-items: center; gap: 2.5rem; font-family: var(--f-display); font-size: 6.5rem; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.p-strip__row svg { width: .55em; height: .55em; }
@keyframes marq { to { transform: translateX(-100%); } }

/* values / terms */
.p-terms { width: 100vw; padding: 4.5rem var(--padd) var(--padd); display: flex; flex-direction: column; justify-content: space-between; }
.term { display: flex; align-items: flex-end; gap: 1.8rem; position: relative; }
.term--2 { justify-content: flex-end; }
.term__txt { width: calc(var(--col) * 2.03); padding-bottom: 1.4rem; }
.term__num { font-family: var(--f-edit); font-weight: 200; font-size: 1rem; padding-bottom: 1.6rem; }
.term__ttl { font-size: 9.5rem; line-height: .85; text-transform: uppercase; color: var(--white); mix-blend-mode: difference; }
.term--1 .term__ttl { font-family: var(--f-edit); font-weight: 200; }
.term--2 .term__ttl { font-family: var(--f-display); }
.term--3 .term__ttl { font-family: var(--f-sans); font-weight: 300; letter-spacing: -.05em; line-height: .72; }
.follow { position: absolute; left: 0; top: 0; width: 18rem; aspect-ratio: 1; margin: -9rem 0 0 -9rem; pointer-events: none; opacity: 0; }
.follow .media { position: absolute; inset: 0; --clip: 100% 0% 0% 0%; }
.follow .media.prev { z-index: 1; }
.follow .media.on { z-index: 2; }
.follow__txt { position: absolute; left: 100%; bottom: 0; margin-left: 1rem; width: 12rem; }

/* projects accordion */
.p-proj { width: calc(100vw * 3.2); }
.p-proj__stage { position: absolute; inset: 0 auto 0 0; width: 100vw; display: flex; }
.p-proj__intro { width: calc(var(--col) * 3 + var(--gap) * 2 + var(--padd)); flex: none; padding: 7rem var(--padd) var(--padd); display: flex; flex-direction: column; justify-content: space-between; background: var(--white); }
.p-proj__intro p { width: 15rem; }
.proj { position: relative; flex: none; width: 13.2vw; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.proj__img { height: 87vh; flex: none; overflow: hidden; }
.proj__img img, .proj__img video { display: block; width: 100%; height: 100%; object-fit: cover; }
.proj__meta { flex: 1; position: relative; min-width: 60vw; display: grid; place-items: center; padding: 1.25rem; }
.proj__meta > * { overflow: clip; }
.proj__yr  { position: absolute; left: 1.25rem; top: 1.25rem; }
.proj__pl  { position: absolute; right: 1.25rem; top: 1.25rem; }
.proj__no  { position: absolute; left: 1.25rem; bottom: 1.25rem; }
.proj__cta { position: absolute; right: 1.25rem; bottom: 1.25rem; }
.proj__ttl { font-size: 3.5rem; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.proj__tag { position: absolute; left: 1.25rem; bottom: calc(13vh + 1rem); writing-mode: vertical-rl; rotate: 180deg; color: var(--white); mix-blend-mode: difference; }

/* quote + vertical image column */
.p-quote { width: 100vw; display: flex; }
.p-quote__col { width: 42vw; flex: none; overflow: hidden; position: relative; }
.p-quote__strip { position: absolute; inset: 0 0 auto; display: flex; flex-direction: column; }
.p-quote__strip .tile { height: 50vh; flex: none; overflow: hidden; }
.p-quote__strip .tile img { width: 100%; height: 100%; object-fit: cover; }
.p-quote__strip .tile--cta { height: 30vh; background: var(--sage); display: flex; align-items: flex-end; justify-content: space-between; padding: var(--padd); }
.p-quote__content { flex: 1; padding: calc(var(--padd) * 4) calc(var(--padd) * 2) calc(var(--padd) * 2); display: flex; flex-direction: column; justify-content: space-between; }
.p-quote__title { font-family: var(--f-display); font-size: 4.6rem; line-height: 4.2rem; text-transform: uppercase; }
.p-quote__title .row { display: block; }
.p-quote__p { width: 70%; margin-left: auto; }

/* closing panel */
.p-close { width: 150vw; }
.p-close__in { position: absolute; left: 0; top: 0; width: 100vw; height: 100%; display: grid; place-items: center; }
.p-close__img { width: calc(var(--col) * 8 + var(--gap) * 7); max-width: 90%; aspect-ratio: 1226/689; }
.p-close__cap { position: absolute; left: var(--padd); bottom: var(--padd); right: var(--padd); display: flex; justify-content: space-between; }

/* ======================================================
   VERTICAL SECTIONS
   ====================================================== */
.v-chapter { padding: 9rem var(--padd) 6rem; text-align: center; }
.v-chapter__kicker { margin-bottom: 4.5rem; }
.v-double { display: flex; gap: var(--gap); padding: 0 var(--padd); align-items: flex-start; }
.v-double .media:first-child { width: calc(var(--col) * 6 + var(--gap) * 5); aspect-ratio: 4/5; max-height: 90vh; }
.v-double .media:last-child { width: calc(var(--col) * 4 + var(--gap) * 3); aspect-ratio: 3/4; margin-top: 12rem; margin-left: auto; margin-right: calc(var(--col) + var(--gap)); }
.v-lines { padding: 9rem var(--padd) 4rem; text-transform: uppercase; }
.v-lines .row { display: block; }
.v-lines .row--r { width: calc(var(--col) * 6 + var(--gap) * 5); margin-left: auto; text-align: right; }
.v-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); padding: 0 var(--padd) 6rem; }
.v-cols__l { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: .8rem; padding-top: .6rem; }
.v-cols__r { grid-column: 7 / span 6; font-family: var(--f-edit); font-weight: 300; }
.v-cols__r strong { font-family: var(--f-display); font-weight: 500; font-style: italic; }
.v-center { display: flex; justify-content: center; padding: 2rem var(--padd) 9rem; }

/* footer */
.footer { position: relative; padding: var(--padd); overflow: hidden; display: flex; flex-direction: column; }
.footer__links { display: flex; justify-content: flex-end; gap: 1.5rem; font-family: var(--f-display); font-weight: 500; text-transform: uppercase; }
.footer__word { order: 3; display: flex; justify-content: space-between; margin: 4rem -.4rem 0; overflow: clip; padding-bottom: .1em; }
.footer__word span { display: block; font-family: var(--f-sans); font-weight: 300; font-size: 11.6rem; line-height: .74; letter-spacing: -.04em; }
.footer__card { order: 2; align-self: flex-end; margin: 4rem calc(var(--col) * 1.5) 0 0; width: 21rem; text-align: center; }
.footer__card .media { aspect-ratio: 356/520; margin: .8rem 0; }
.footer__card .nm { font-family: var(--f-display); font-weight: 500; text-transform: uppercase; }
.footer__bar { order: 4; position: relative; display: flex; justify-content: space-between; align-items: end; padding-top: 2rem; text-transform: uppercase; }
.footer__legal { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 1.8rem; }

/* contact modal */
.modal { position: fixed; inset: 0; z-index: 90; display: none; }
.modal.is-open { display: block; }
.modal__bg { position: absolute; inset: 0; background: rgba(17,17,16,.55); }
.modal__box { position: absolute; right: 0; top: 0; height: 100%; width: min(42rem, 100%); background: var(--sand); padding: 6rem calc(var(--padd) * 2) var(--padd); overflow-y: auto; }
.modal__close { position: absolute; top: var(--padd); right: var(--padd); }
.modal__title { font-family: var(--f-display); font-size: 4rem; line-height: 3.6rem; text-transform: uppercase; margin-bottom: 2.5rem; }
.form { display: grid; gap: 1.4rem; }
.form label { display: grid; gap: .35rem; font-family: var(--f-edit); font-weight: 300; font-size: .9rem; }
.form input, .form textarea, .form select {
  font: inherit; font-family: var(--f-sans); font-size: 1rem; color: var(--black); background: transparent;
  border: 0; border-bottom: 1px solid rgba(17,17,16,.35); padding: .5rem 0; border-radius: 0; outline: none;
}
.form input:focus, .form textarea:focus, .form select:focus { border-bottom-color: var(--black); }
.form textarea { min-height: 6rem; resize: vertical; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form__note { font-size: .75rem; color: var(--grey); }

/* ======================================================
   TABLET: rem nearly doubles at <=1024px, so halve display type
   ====================================================== */
@media (max-width: 1024px) {
  .t-sx { font-size: 5.6rem; line-height: 5.4rem; }
  .t-s { font-size: 3.4rem; line-height: 3.2rem; }
  .t-xl { font-size: 1.8rem; line-height: 2.3rem; }
  .p-text__title { font-size: 3rem; line-height: 2.9rem; padding-left: 2rem; }
  .p-strip { font-size: 5rem; }
  .p-strip__row span { font-size: 3.6rem; }
  .term__ttl { font-size: 5rem; }
  .term__txt { width: calc(var(--col) * 3); }
  .cursor { width: .6rem; height: .6rem; }
  .follow { width: 11rem; margin: -5.5rem 0 0 -5.5rem; }
  .proj__ttl { font-size: 2rem; }
  .p-quote__title { font-size: 2.6rem; line-height: 2.5rem; }
  .menu__item .ttl { font-size: 2rem; line-height: 2.3rem; }
  .footer__word span { font-size: 6.2rem; }
  .footer__card { width: 13rem; }
  .loader__pct { font-size: 2.2rem; }
}

/* ======================================================
   MOBILE: stack the track vertically
   ====================================================== */
@media (max-width: 950px) {
  .header__logo { font-size: 1rem; }
  .track { display: block; width: 100%; height: auto; }
  .track > section { width: 100% !important; height: auto; min-height: 0; }
  .p-hero { height: 100svh !important; }
  .p-hero__logo .w { font-size: 27vw; }
  .p-hero__logo .w--a { top: 9vh; }
  .p-hero__logo .w--b { bottom: 12vh; }
  .p-hero__nav { display: none; }
  .p-hero__content { left: var(--padd); right: var(--padd); top: 30vh; }
  .p-hero__title { font-size: 8.6vw; line-height: 9.6vw; }
  .p-hero__p { max-width: 70vw; margin-top: 4vw; font-size: 3.6vw; line-height: 4.9vw; }
  .p-hero__foot { left: var(--padd); bottom: 3vh; gap: 3vw; }
  .p-hero__icon { width: 11vw; margin-left: 0; }
  .p-hero__copy { font-size: 3vw; }
  .p-img { display: block; padding: 0 !important; }
  .p-img__big { width: 100%; height: auto; }
  .p-img__over { position: relative; top: auto; translate: none; width: 70% !important; margin: -20% var(--padd) 0 auto; right: auto !important; }
  .p-text { padding: 6rem var(--padd); }
  .p-text__title { font-size: 3.4rem; line-height: 3.2rem; white-space: normal; padding-left: 0; }
  .p-text__title .row { white-space: normal; }
  .p-text__body { flex-direction: column; }
  .p-text__body p { width: 100%; }
  .p-text__label { position: static; margin-bottom: 2rem; }
  .p-it { display: flex; flex-direction: column; padding: 4rem var(--padd); }
  .p-it__a, .p-it__b, .p-it__txt { width: 100%; margin: 0; padding: 0; }
  .p-it__b { width: 60%; align-self: flex-end; }
  .p-it__txt { font-size: 1.9rem; line-height: 2.4rem; padding-top: 2rem; }
  .p-strip { height: 1.25em !important; font-size: 4rem; }
  .p-strip__in { position: relative; width: 100%; rotate: none; translate: none; }
  .p-strip__row span { font-size: 3.2rem; }
  .p-terms { gap: 3rem; padding: 4rem var(--padd); }
  .term { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .term--2 { align-items: flex-end; }
  .term__ttl { font-size: 4.2rem; }
  .term__txt { width: 100%; order: 3; padding: 0; }
  .term__num { padding: 0; }
  .follow { display: none; }
  .p-proj__stage { position: relative; width: 100%; flex-direction: column; }
  .p-proj__intro { width: 100%; gap: 2rem; padding: 4rem var(--padd); }
  .proj { width: 100% !important; }
  .proj__img { height: 60vw !important; }
  .proj__meta { min-width: 0; min-height: 12rem; }
  .proj__tag { display: none; }
  .proj__ttl { font-size: 2.4rem; white-space: normal; text-align: center; }
  .p-quote { flex-direction: column-reverse; }
  .p-quote__col { width: 100%; height: 70vw; }
  .p-quote__strip { position: relative; flex-direction: row; height: 100%; overflow-x: auto; }
  .p-quote__strip .tile { height: 100%; width: 70vw; }
  .p-quote__strip .tile--cta { display: none; }
  .p-quote__content { padding: 5rem var(--padd) 3rem; gap: 2rem; }
  .p-quote__title { font-size: 3rem; line-height: 2.9rem; }
  .p-quote__p { width: 100%; }
  .p-close { padding: 5rem 0; }
  .p-close__in { position: relative; height: auto; gap: 2rem; }
  .p-close__cap { position: static; padding: 0 var(--padd); }
  .t-sx { font-size: 5.6rem; line-height: 5rem; }
  .t-s { font-size: 3.4rem; line-height: 3.2rem; }
  .v-double { flex-direction: column; }
  .v-double .media { width: 100% !important; margin: 0 !important; }
  .v-double .media:last-child { width: 70% !important; margin-left: auto !important; }
  .v-cols__l, .v-cols__r { grid-column: 1 / -1; }
  .v-lines .row--r { width: 100%; }
  .footer__word { margin-top: 3rem; }
  .footer__word span { font-size: 5.2rem; }
  .footer__card { align-self: center; margin: 3rem auto 0; }
  .footer__bar { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .footer__legal { position: static; translate: none; flex-wrap: wrap; }
  .menu__inner { display: flex; flex-direction: column; }
  .menu__feat { display: none; }
  .menu__item .ttl { font-size: 2.6rem; line-height: 2.9rem; }
  .form .row2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .p-strip__row { animation: none; }
}

/* track-specific parallax: images slide along x instead of y */
.track .media .par { inset: 0; height: 100%; width: 100%; scale: 1.15; }
@media (min-width: 951px) {
  .proj { flex: 1 1 0; width: auto; min-width: 0; }
}