/* ==========================================================================
   Design Republic — built in the Septiembre Arquitectura design language.
   Two-color world (crimson + cream), fluid-rem scaling, editorial type, motion.
   Stack: Lenis + GSAP/ScrollTrigger + Swiper + Splitting (loaded in HTML).
   ========================================================================== */

/* ---- tokens --------------------------------------------------------------- */
:root {
  --black-1: #000;
  --white-1: #FFFBF2;   /* warm cream */
  --white-2: #FFFFFF;
  --red-1:   #9B0000;   /* crimson */
  --content-color: var(--red-1);

  --padding-fluid: 4rem;
  --padding: .8rem;
  --header-height: 8.4rem;

  --font-1: "Jost", system-ui, sans-serif; /* body/UI — geometric sans matching the DR logo wordmark */
  --font-2: "Jost", system-ui, sans-serif; /* display / wordmark — same geometric family as the logo */

  --ease-out-cubic: cubic-bezier(.215,.61,.355,1);
  --ease-in-out:    cubic-bezier(.42,0,.58,1);
  --ease-circ:      cubic-bezier(.785,.135,.15,.86);
  --ease-underline: cubic-bezier(.19,1,.155,1.01);

  --w-100vw: calc(100vw - 7.5px);
}
@media (max-width:1025px)   { :root { --padding-fluid: 2.5rem; --w-100vw:100%; } }
@media (max-width:767.98px) { :root { --padding-fluid: 2rem; } }

/* ---- the critical fluid-rem root sizing ---------------------------------- */
@media (min-width:1025.1px)                       { html { font-size: .609759vw; } }  /* 10px @1640 */
@media (min-width:767.98px) and (max-width:1025px){ html { font-size: 1.302086vw; } } /* 10px @768  */
@media (max-width:767.98px)                       { html { font-size: 2.564105vw; } } /* 10px @390  */

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-1);
  background: var(--white-1);
  color: var(--red-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip (not hidden) so body stays out of the scroll-container chain — hidden would coerce overflow-y to auto and break position:sticky on .hero-stage / .colorizer-inner */
  font-size: 1.6rem;
  line-height: 1.4;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--red-1); color: var(--white-1); }
@media (min-width:1025.1px){
  ::-webkit-scrollbar { width: 7.5px; }
  ::-webkit-scrollbar-track { background: var(--white-1); }
  ::-webkit-scrollbar-thumb { background: var(--red-1); }
}
body[data-pg="pg-home"], body[data-pg="pg-project"] { background: var(--white-1); }

/* respect reduced-motion: damp infinite/long animations + transitions site-wide */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- helpers -------------------------------------------------------------- */
.font-1 { font-family: var(--font-1); }
.font-2 { font-family: var(--font-2); }
.white-1 { color: var(--white-1); }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.container { max-width: 130rem; margin-inline: auto; padding-inline: var(--padding); }
.container-fluid { width: 100%; padding-inline: var(--padding-fluid); }

.link-underline { position: relative; display: inline-block; }
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: -.2rem; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-circ);
}
@media (hover:hover){ .link-underline:hover::after { transform: scaleX(1); } }

/* type scale (subset of the .fs--N ramp, rem = px/10 @ design width) */
.fs--header{font-size:1.4rem;line-height:1.2;}
.fs--12{font-size:1.2rem;line-height:1.4;}
.fs--13{font-size:1.3rem;line-height:1.5;}
.fs--14{font-size:1.4rem;line-height:1.5;}
.fs--16{font-size:1.6rem;line-height:1.5;}
.fs--18{font-size:1.8rem;line-height:1.5;}
.fs--24{font-size:2.4rem;line-height:1.2;}
.fs--28{font-size:2.8rem;line-height:1.2;}
.fs--50{font-size:5rem;line-height:1.04;}

/* ==========================================================================
   HEADER
   ========================================================================== */
#header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-height); z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--padding-fluid);
  color: var(--content-color);
  transition: color .5s var(--ease-in-out), transform .6s var(--ease-in-out), opacity .6s var(--ease-in-out);
  mix-blend-mode: normal;
}
body[data-load="loading"] #header { transform: translateY(3rem); opacity: 0; }
.logo { display: flex; align-items: center; }
.logo-img {
  display: block; height: 7rem; aspect-ratio: 371.8 / 315.3;
  background-color: currentColor;
  -webkit-mask: url(../dr-logo.svg) center / contain no-repeat;
          mask: url(../dr-logo.svg) center / contain no-repeat;
}
.menu--list { display: flex; gap: 3.4rem; align-items: center; }
.menu--list a { font-size: 1.4rem; font-weight: 300; position: relative; }
.menu--list a::after {
  content: ""; position: absolute; left: 0; bottom: -.4rem; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-circ);
}
@media (hover:hover){ .menu--list a:hover::after { transform: scaleX(1); } }
.header-right { display: flex; align-items: center; gap: 3.4rem; }
.lang-link { font-size: 1.4rem; text-transform: uppercase; font-weight: 300; }
.menu-toggle { display: none; }

@media (max-width:1025px){
  .menu--list { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 3rem;
    background: var(--red-1); color: var(--white-1); transform: translateY(-100%); transition: transform .6s var(--ease-out-cubic); z-index: 95; }
  .menu--list a { font-family: var(--font-2); font-size: 4rem; font-weight: 400; }
  body.menu-open .menu--list { transform: translateY(0); }
  body.menu-open { overflow: hidden; }
  body.menu-open #header { color: var(--white-1); }
  .header-right .lang-link { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; min-height: 4.4rem; z-index: 96; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .1em; }
}

/* ==========================================================================
   CUSTOM CURSOR
   ========================================================================== */
.cursor-wrapper {
  position: fixed; top: 0; left: 0; width: 200px; height: 200px; margin: -100px;
  pointer-events: none; z-index: 1600000;
  transform: translate(var(--cx, -100px), var(--cy, -100px));
  transition: transform .12s var(--ease-out-cubic), opacity .3s ease;
  display: grid; place-items: center;
}
.cursor-wrapper .dot {
  width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--red-1);
  display: grid; place-items: center; color: var(--white-1); font-size: 1.2rem; letter-spacing: .02em;
  transition: width .35s var(--ease-out-cubic), height .35s var(--ease-out-cubic), background .3s ease, color .3s ease;
}
.cursor-wrapper .dot span { opacity: 0; transition: opacity .2s ease; white-space: nowrap; }
body[data-cursor="label"] .cursor-wrapper .dot { width: 6.4rem; height: 6.4rem; }
body[data-cursor="label"] .cursor-wrapper .dot span { opacity: 1; }
body[data-cursor="dark"] .cursor-wrapper .dot { background: var(--white-1); color: var(--red-1); }
body[data-cursor="hidden"] .cursor-wrapper { opacity: 0; }
.cursor-wrapper.clicked .dot { transform: scale(.8); }
@media (max-width:1025px), (hover:none) { .cursor-wrapper { display: none; } }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
#loader {
  position: fixed; inset: 0; z-index: 110; background: var(--white-1);
  display: grid; place-items: center;
  transition: opacity .5s var(--ease-in-out) .3s, visibility .5s .3s;
}
#loader.done { opacity: 0; visibility: hidden; }
#loader .loader-word { font-family: var(--font-2); color: var(--red-1); font-size: clamp(3.6rem, 7vw, 9rem);
  letter-spacing: -.03em; opacity: 0; transform: translateY(2rem); animation: fadeInUp .8s var(--ease-out-cubic) .3s forwards; }
#loader .loader-num { position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); font-size: 1.4rem;
  letter-spacing: .1em; color: var(--red-1); opacity: 0; animation: fadeInUp .8s var(--ease-out-cubic) .4s forwards; }
#loader .loader-num::after { content: "%"; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   SHARED reveal primitives (driven by JS .in class)
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(2.4rem); transition: opacity .9s var(--ease-out-cubic), transform .9s var(--ease-out-cubic); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="scale"] { transform: scale(.9); }
[data-reveal="scale"].in { transform: scale(1); }
[data-reveal="clip"] { opacity: 1; clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); transform: none; transition: clip-path .8s var(--ease-out-cubic) .15s; }
[data-reveal="clip"].in { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }

/* ==========================================================================
   HERO  (pinned title sequence — covers rise from below and scatter on scroll)
   ========================================================================== */
.hero { position: relative; height: 500svh; background: var(--white-1); }
/* cream bg on the stage itself = the blend target for the difference-mode wordmark */
.hero-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--white-1); }

/* pinned wordmark — difference blend reads crimson on cream, inverts over covers.
   Direct child of the stage (no isolating wrapper) so it blends against the cream + covers below it. */
.container-text {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: flex-end;
  z-index: 4; pointer-events: none;
  mix-blend-mode: difference;
}
/* #64FBF2 chosen so difference(#64FBF2, cream #FFFBF2) ≈ crimson #9B0000 */
.text-septiembre { font-family: var(--font-2); font-size: 21rem; line-height: 1; letter-spacing: -.07em; white-space: nowrap; color: #64FBF2; }
.text-arquitectura { font-family: var(--font-1); font-weight: 700; font-size: 4.7rem; letter-spacing: -.06em; text-transform: lowercase; color: #64FBF2; margin-right: 2rem; margin-top: -3.8rem; }
.scroll-text { position: absolute; bottom: 6rem; left: 50%; transform: translateX(-50%); font-family: var(--font-2); font-size: 1.6rem; text-transform: uppercase; letter-spacing: .04em; color: var(--red-1); z-index: 5; pointer-events: auto; }
.scroll-text::after { content: ""; display: block; width: 1px; height: 3.6rem; margin: .8rem auto 0; background: var(--red-1); transform-origin: top; animation: scrollLine 1.8s var(--ease-in-out) infinite; }
@keyframes scrollLine { 0%{transform:scaleY(0);} 40%{transform:scaleY(1);} 100%{transform:scaleY(0); transform-origin:bottom;} }

/* initial centred portrait — clip-wipes up on load, un-zooms */
/* centring handled by GSAP (xPercent/yPercent) so its y can also be scrolled */
.initial-img { position: absolute; top: 49%; left: 50%; width: 30.5rem; z-index: 2; overflow: hidden; clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); }
.initial-img .container-img { position: relative; width: 100%; transform: scale(1.2); }
.initial-img .container-img::after { content: ""; display: block; width: 100%; padding-top: 151.47%; }
.initial-img .container-img .media { position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; object-fit: cover; }
.initial-img.aos-animate { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); transition: clip-path .8s var(--ease-out-cubic) .2s; }
.initial-img.aos-animate .container-img { transform: scale(1); transition: transform 1s var(--ease-out-cubic); }

/* rising / scattering covers */
.gallery-wrapper { position: absolute; inset: 0 auto auto 0; height: 100svh; width: 100%; z-index: 3; }
.project-item-wrapper { position: absolute; inset: 0 auto auto 0; width: var(--w-100vw); height: 100svh; pointer-events: none; transform: translateY(100svh); }
.project-item-wrapper a { position: absolute; top: var(--pt, auto); right: var(--pr, auto); display: block; pointer-events: all; will-change: transform; }
.project-item-wrapper a .container-img { position: relative; width: var(--img-w); will-change: transform; }
.project-item-wrapper a .container-img::after { content: ""; display: block; width: 100%; height: calc(var(--img-w) * var(--img-ratio, 1)); }
.project-item-wrapper a .container-img .media { position: absolute; inset: 0 auto auto 0; width: 100%; height: 100%; object-fit: cover; }

/* desktop scatter — ported 1:1 from Septiembre */
@media (min-width:1025.1px){
  .project-item-wrapper:nth-child(1){ --pt:9.5%;  --pr:73.8%; --img-ratio:.6;   --img-w:23.659vw; }
  .project-item-wrapper:nth-child(2){ --pt:18%;   --pr:42.3%; --img-ratio:1.47; --img-w:23.659vw; }
  .project-item-wrapper:nth-child(3){ --pt:9.5%;  --pr:12.5%; --img-ratio:1.01; --img-w:16.342vw; }
  .project-item-wrapper:nth-child(4){ --pt:44.5%; --pr:77.6%; --img-ratio:1.48; --img-w:16.342vw; }
  .project-item-wrapper:nth-child(5){ --pt:52.5%; --pr:var(--padding-fluid); --img-ratio:.61; --img-w:30.366vw; }
}

/* tablet 768–1025 */
@media (min-width:767.98px) and (max-width:1025px){
  .container-text { align-items: center; }
  .text-septiembre { font-size: 9rem; white-space: normal; text-align: center; }
  .text-arquitectura { font-size: 3.3rem; margin-right: 0; margin-top: -1rem; }
  .initial-img { width: 35vw; }
  .project-item-wrapper:nth-child(1){ --pt:9.5%;  --pr:60%; --img-ratio:.6;   --img-w:36vw; }
  .project-item-wrapper:nth-child(2){ --pt:29%;   --pr:34%; --img-ratio:1.47; --img-w:32vw; }
  .project-item-wrapper:nth-child(3){ --pt:9.5%;  --pr:var(--padding-fluid); --img-ratio:1.01; --img-w:26vw; }
  .project-item-wrapper:nth-child(4){ --pt:64%;   --pr:71%; --img-ratio:1.48; --img-w:25vw; }
  .project-item-wrapper:nth-child(5){ --pt:72%;   --pr:var(--padding-fluid); --img-ratio:.61; --img-w:36vw; }
}

/* mobile ≤767.98 */
@media (max-width:767.98px){
  .hero { height: 300svh; }
  .container-text { align-items: center; width: 100%; }
  .text-septiembre { font-size: 6rem; white-space: normal; text-align: center; }
  .text-arquitectura { font-size: 2rem; margin-right: 0; margin-top: 0; transform: translateY(-.6rem); }
  .initial-img { width: 16.5rem; }
  .project-item-wrapper:nth-child(1){ --pt:9.5%;  --pr:55%; --img-ratio:.6;   --img-w:41vw; }
  .project-item-wrapper:nth-child(2){ --pt:31%;   --pr:30%; --img-ratio:1.47; --img-w:38vw; }
  .project-item-wrapper:nth-child(3){ --pt:9.5%;  --pr:var(--padding-fluid); --img-ratio:1.01; --img-w:33vw; }
  .project-item-wrapper:nth-child(4){ --pt:66%;   --pr:66%; --img-ratio:1.48; --img-w:30vw; }
  .project-item-wrapper:nth-child(5){ --pt:70%;   --pr:var(--padding-fluid); --img-ratio:.61; --img-w:40vw; }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about { position: relative; z-index: 2; background: var(--white-1); }
.colorizer { height: 250svh; margin-bottom: 16rem; }
.colorizer-inner { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.colorizer-text { font-family: var(--font-2); font-size: clamp(2.8rem, 6.2vw, 6.4rem); line-height: 1.08; letter-spacing: -.02em; text-align: center; }
.colorizer-text .lead { font-family: var(--font-1); font-weight: 700; letter-spacing: -.01em; }
.colorizer-text .word { color: rgba(155,0,0,.16); transition: color .35s var(--ease-out-cubic); }
.colorizer-text .word.lit { color: var(--red-1); }

.about-panel { position: relative; padding-block: 12rem; }
.about-panel .panel-bg { position: absolute; left: calc(-1 * var(--padding-fluid)); right: calc(-1 * var(--padding-fluid)); top: 0; height: 100%; background: var(--red-1); border-radius: 1rem; z-index: 0; }
.about-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; color: var(--white-1); }
.about-grid > * { min-width: 0; }
.about-col-1 { padding-top: 4rem; }
.about-col-1 .about-title { font-family: var(--font-2); font-size: clamp(3.2rem,5vw,5rem); line-height: 1.04; }
.about-col-1 .about-paragraph { max-width: 38.3rem; margin-top: 2.4rem; font-size: 1.6rem; line-height: 1.6; opacity: .92; }
.about-col-1 .about-vision { max-width: 38.3rem; margin-top: 2.4rem; font-size: 1.6rem; line-height: 1.6; opacity: .92; }
.about-col-2 { padding-top: 9rem; }
.slider-about { border-radius: .6rem; overflow: hidden; height: 52rem; }
.slider-about .swiper-slide { height: 100%; }
.slider-about .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.about-col-2 .swiper-pagination { color: var(--white-1); font-size: 1.4rem; margin-top: 1.4rem; position: static; text-align: left; }
.about-col-2 .cap { margin-top: 1.4rem; font-size: 1.4rem; opacity: .85; }
@media (max-width:767.98px){ .about-grid { grid-template-columns: 1fr; gap: 3rem; } .about-col-2 { padding-top: 0; } }

/* ==========================================================================
   PROJECTS
   ========================================================================== */
.projects { padding-top: 11.7rem; padding-bottom: 12rem; background: var(--white-1); color: var(--red-1); position: relative; z-index: 2; }
.projects-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 4rem; flex-wrap: wrap; margin-bottom: 4rem; }
.projects-eyebrow { font-size: 1.4rem; letter-spacing: .14em; text-transform: uppercase; }
.projects-title { font-family: var(--font-2); font-size: clamp(4rem, 7vw, 9rem); line-height: .95; letter-spacing: -.02em; }
.category-list { display: flex; flex-wrap: wrap; gap: 2.6rem; margin-bottom: 1.6rem; }
.category-list button { font-size: 1.6rem; font-weight: 300; text-transform: lowercase; position: relative; transition: font-weight .2s; color: var(--red-1); opacity: .55; }
.category-list button::after { content:""; position:absolute; left:0; bottom:-.4rem; height:1px; width:100%; background: currentColor; transform: scaleX(0); transform-origin:left; transition: transform .3s var(--ease-circ); }
@media (hover:hover){ .category-list button:hover { font-weight: 700; opacity: 1; } }
.category-list button.active { font-weight: 700; opacity: 1; }
.category-list button.active::after { transform: scaleX(1); }
.category-description { max-width: 54.4rem; font-size: 1.4rem; line-height: 1.6; text-transform: uppercase; letter-spacing: .02em; min-height: 6rem; margin-bottom: 4rem; opacity: .85; }

.project-list { position: relative; border-top: 1px solid rgba(155,0,0,.2); }
.project-item { border-bottom: 1px solid rgba(155,0,0,.2); }
.project-item a { display: flex; align-items: baseline; gap: 2rem; padding: 2.6rem 0; }
.project-item .p-title { font-family: var(--font-2); font-size: clamp(2.2rem, 2.8vw, 2.8rem); flex: 0 0 46%; line-height: 1.1;
  background-image: linear-gradient(currentColor,currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size 1s var(--ease-underline); }
.project-item .p-loc { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .04em; flex: 0 0 38%; opacity: .8; }
.project-item .p-year { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .04em; flex: 1; text-align: right; opacity: .8; }
@media (hover:hover){ .project-item a:hover .p-title { background-size: 100% 1px; } }
.project-item.dimmed { opacity: .38; }
.accordion-img {
  position: fixed; pointer-events: none; width: 41.9rem; aspect-ratio: 4/3; right: var(--padding-fluid); top: 50%;
  transform: translateY(-50%) scale(.95); opacity: 0; z-index: 5; overflow: hidden; border-radius: .4rem;
  transition: opacity .6s var(--ease-out-cubic), transform .8s var(--ease-out-cubic);
}
.accordion-img img { width: 100%; height: 100%; object-fit: cover; }
.accordion-img.show { opacity: 1; transform: translateY(-50%) scale(1); }
.portfolio-block { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; margin-top: 6rem; flex-wrap: wrap; }
.portfolio-block p { max-width: 30rem; font-size: 1.4rem; line-height: 1.6; text-transform: uppercase; letter-spacing: .02em; }
.portfolio-link { display: inline-flex; align-items: center; gap: 1.2rem; font-family: var(--font-2); font-size: 2.4rem; transition: transform .4s var(--ease-out-cubic); }
.portfolio-link svg { width: 1.8rem; height: 1.8rem; transition: transform .4s var(--ease-out-cubic); }
@media (hover:hover){
  .portfolio-link:hover { transform: translateX(.6rem); }
  .portfolio-link:hover svg { transform: rotate(45deg); }
}
@media (max-width:767.98px){
  .category-list { gap: 1.4rem 2.2rem; }
  .category-list button { padding-block: 1rem; }
  .project-item a { flex-wrap: wrap; gap: .6rem; }
  .project-item .p-title { flex: 0 0 100%; }
  .project-item .p-loc, .project-item .p-year { flex: 1; text-align: left; }
  .accordion-img { display: none; }
}

/* ==========================================================================
   CONCEPTS  (pinned horizontal scroll)
   ========================================================================== */
.concepts { position: relative; background: var(--white-1); overflow: hidden; }
.concepts-pin { height: 100svh; }
.h-track { display: flex; flex-wrap: nowrap; height: 100svh; will-change: transform; }
.concept-panel { position: relative; flex: 0 0 100vw; height: 100svh; padding: var(--header-height) var(--padding-fluid) 4rem;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 2rem 4rem; align-items: center; transition: color .4s var(--ease-in-out); }
.concept-panel.is-red { background: var(--red-1); color: var(--white-1); }
.concept-panel.is-cream { background: var(--white-1); color: var(--red-1); }
.concept-slogan { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 4; align-self: start; text-align: right; text-transform: lowercase; letter-spacing: -.03em;
  font-family: var(--font-1); font-weight: 700; font-size: clamp(3rem, 6vw, 7.2rem); line-height: 1; }
.concept-slogan .contrast-text { font-family: var(--font-2); font-weight: 400; }
.concept-media { position: absolute; z-index: 1; left: var(--cm-x, 4vw); bottom: var(--cm-y, 10svh);
  width: var(--cm-w, 44vw); aspect-ratio: 3/2; overflow: hidden; }
.concept-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2); transform: scale(1.05); transition: transform .8s var(--ease-out-cubic); }
@media (hover:hover){ .concept-panel:hover .concept-media img { transform: scale(1.1); } }
/* bigger photos, each panel gets its own size / offset (no tilt) */
.h-track .concept-panel:nth-child(1) .concept-media{ --cm-w:46vw; --cm-x:3vw;  --cm-y:11svh; }
.h-track .concept-panel:nth-child(2) .concept-media{ --cm-w:41vw; --cm-x:11vw; --cm-y:17svh; }
.h-track .concept-panel:nth-child(3) .concept-media{ --cm-w:49vw; --cm-x:2vw;  --cm-y:13svh; }
.h-track .concept-panel:nth-child(4) .concept-media{ --cm-w:53vw; --cm-x:6vw;  --cm-y:7svh; }
.concept-title { grid-column: 1 / -1; grid-row: 2; align-self: start; pointer-events: none; position: relative; z-index: 3; }
.concept-title .text { font-family: var(--font-2); font-size: clamp(6rem, 14vw, 18rem); line-height: .85; letter-spacing: -.05em; text-transform: lowercase; position: relative; display: inline-block; }
.concept-title .number { position: absolute; top: -.2em; left: 100%; font-family: var(--font-1); font-size: 1.6rem; letter-spacing: .04em; }
.concept-body { position: absolute; right: var(--padding-fluid); bottom: 14rem; width: 29.5rem; max-width: 40vw; z-index: 4; }
.concept-body .ct-title { font-weight: 700; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1rem; }
.concept-body .ct-text { font-size: 1.4rem; line-height: 1.6; text-transform: uppercase; letter-spacing: .02em; opacity: .9; }
.thumb-rail { position: absolute; right: 7.4rem; bottom: 4rem; z-index: 20; display: flex; gap: 1.2rem; }
.thumb-rail .thumb { width: 8.8rem; aspect-ratio: 16/9; overflow: hidden; opacity: .55; transition: opacity .4s var(--ease-circ), outline-color .4s; outline: 1px solid transparent; outline-offset: .4rem; }
.thumb-rail .thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.thumb-rail .thumb.active { opacity: 1; outline-color: currentColor; }
.concepts-mobile { display: none; }
@media (max-width:767.98px){
  .concepts-pin, .h-track, .concept-panel { display: none; }
  .concepts-mobile { display: block; }
  .concept-card { padding: 6rem var(--padding-fluid); border-bottom: 1px solid rgba(155,0,0,.2); }
  .concept-card .text { font-family: var(--font-2); font-size: 5rem; line-height: .9; text-transform: lowercase; letter-spacing: -.04em; }
  .concept-card .ct-media { margin: 2rem 0; aspect-ratio: 3/2; overflow: hidden; }
  .concept-card .ct-media img { width: 100%; height: 100%; object-fit: cover; }
  .concept-card .ct-text { font-size: 1.4rem; line-height: 1.6; text-transform: uppercase; }
}
/* reduced-motion: skip the horizontal pin, reuse the vertical card fallback */
@media (prefers-reduced-motion: reduce){
  .concepts-pin, .h-track { display: none; }
  .concepts-mobile { display: block; }
}

/* ==========================================================================
   TEAM  (red section)
   ========================================================================== */
.team { background: var(--red-1); color: var(--white-1); padding-top: 16rem; padding-bottom: 10rem; position: relative; z-index: 2; }
.team-title { font-family: var(--font-1); font-weight: 700; font-size: clamp(4rem, 9vw, 11rem); letter-spacing: -.06em; line-height: .9; text-transform: lowercase; }
.team-title .ch { display: inline-block; transform: translateX(4rem); opacity: 0; transition: transform .8s var(--ease-out-cubic), opacity .8s var(--ease-out-cubic); }
.team-title.in .ch { transform: none; opacity: 1; }
.team-title .num { font-family: var(--font-1); font-size: .22em; vertical-align: super; margin-left: .4rem; }
.team-intro { max-width: 60rem; margin-top: 2.4rem; font-size: 1.6rem; line-height: 1.6; opacity: .92; }
.team-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; margin-top: 6rem; }
.member-card .member-img { aspect-ratio: 3/4; overflow: hidden; margin-bottom: 1.2rem; }
.member-card .member-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s var(--ease-out-cubic), transform .8s var(--ease-out-cubic); transform: scale(1.02); }
@media (hover:hover){ .member-card:hover .member-img img { filter: grayscale(0); transform: scale(1); } }
@media (hover:none){ .member-card .member-img img { filter: grayscale(0); transform: none; } }
.member-card .m-name { font-family: var(--font-2); font-size: 2rem; line-height: 1.1; }
.member-card .m-role { font-size: 1.3rem; margin-top: .4rem; opacity: .8; text-transform: uppercase; letter-spacing: .03em; }
.bottom-lists { display: grid; grid-template-columns: 1.2fr 1fr; gap: 6rem; margin-top: 10rem; align-items: start; }
.bottom-lists h3 { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 2.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,251,242,.25); }
.client-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6rem; align-items: center; }
.client-grid .cl { aspect-ratio: 3/2; background: var(--white-1); border-radius: .4rem; display: grid; place-items: center; padding: 1rem; }
.client-grid .cl img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.cert-grid { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.cert-grid img { height: 22rem; width: auto; border-radius: .3rem; }
.awards-intro, .clients-intro { font-size: 1.4rem; line-height: 1.6; opacity: .85; margin-bottom: 2rem; }
@media (max-width:1025px){ .team-list { grid-template-columns: repeat(3,1fr); } .bottom-lists { grid-template-columns: 1fr; } .client-grid { grid-template-columns: repeat(4,1fr); } }
@media (max-width:767.98px){ .team-list { grid-template-columns: repeat(2,1fr); } .client-grid { grid-template-columns: repeat(3,1fr); } }

/* ==========================================================================
   FOOTER / CONTACT
   ========================================================================== */
#footer { background: var(--red-1); color: var(--white-1); padding: 6rem var(--padding-fluid) 3rem; position: relative; z-index: 2; }
.newsletter { border-top: 1px solid rgba(255,251,242,.25); border-bottom: 1px solid rgba(255,251,242,.25); padding: 8rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.newsletter h2 { font-family: var(--font-2); font-size: clamp(3.4rem, 6vw, 7.2rem); line-height: .95; letter-spacing: -.02em; }
.newsletter .nl-sub { font-size: 1.6rem; opacity: .85; margin-top: 1.6rem; max-width: 36rem; }
.nl-form { position: relative; max-width: 46rem; margin-left: auto; width: 100%; }
.nl-field { position: relative; }
.nl-field input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,251,242,.5); color: var(--white-1); font-size: 1.8rem; padding: 1.2rem 5rem 1.2rem 0; }
.nl-field input:focus { outline: none; border-color: var(--white-1); }
.nl-field label { position: absolute; left: 0; top: 1.4rem; font-size: 1.8rem; opacity: .7; pointer-events: none; transition: all .3s var(--ease-out-cubic); }
.nl-field input:focus + label, .nl-field input:not(:placeholder-shown) + label { top: -1rem; font-size: 1.2rem; opacity: 1; }
.bt-submit { position: absolute; right: 0; top: .6rem; width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 1px solid var(--white-1); display: grid; place-items: center; overflow: hidden; transition: color .4s; z-index: 1; }
.bt-submit svg { width: 1.6rem; height: 1.6rem; position: relative; z-index: 2; }
.bt-submit::before { content:""; position:absolute; inset:0; background: var(--white-1); transform: scale(0); border-radius:50%; transition: transform .4s var(--ease-out-cubic); }
@media (hover:hover){
  .bt-submit:hover { color: var(--red-1); }
  .bt-submit:hover::before { transform: scale(1); }
}
.nl-feedback { margin-top: 1.4rem; font-size: 1.4rem; opacity: 0; transform: translateY(.6rem); transition: all .4s; }
.nl-feedback.show { opacity: 1; transform: none; }

.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 4rem; padding: 6rem 0; border-top: 1px solid rgba(255,251,242,.25); }
.footer-col h4 { font-size: 1.3rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2rem; opacity: .7; }
.footer-col p, .footer-col a { font-size: 1.6rem; line-height: 1.7; }
.footer-brand .fb-word { font-family: var(--font-2); font-size: clamp(3rem,5vw,5.6rem); letter-spacing: -.02em; line-height: 1; }
.footer-brand .fb-tag { font-size: 1.4rem; opacity: .8; margin-top: 1rem; }
.contact-line { display: block; margin-bottom: .4rem; }
.mail-link { font-family: var(--font-2); font-size: clamp(2rem,2.6vw,2.8rem); }
.social-list { display: flex; flex-direction: column; gap: .8rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-top: 3rem; border-top: 1px solid rgba(255,251,242,.25); flex-wrap: wrap; }
.footer-bottom .rights { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.footer-bottom .legal { display: flex; gap: 2rem; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .06em; }
.back-to-top { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .08em; }
.back-to-top svg { width: 1.2rem; height: 1.2rem; }
@media (max-width:767.98px){ .newsletter, .footer-main { grid-template-columns: 1fr; gap: 2.4rem; } .nl-form { margin-left: 0; } .footer-bottom .legal a, .back-to-top { padding-block: .8rem; } }

/* ==========================================================================
   PROJECT PAGE  (project.html)
   ========================================================================== */
.project-intro { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: var(--header-height) var(--padding-fluid) 4rem; align-items: center; }
.project-close { position: fixed; top: 2.4rem; left: var(--padding-fluid); z-index: 80; width: 4rem; height: 4rem; display: grid; place-items: center; color: var(--red-1); }
.project-close svg { width: 1.8rem; height: 1.8rem; }
.pi-title { line-height: .9; margin-bottom: 3rem; }
.pi-title .t1 { font-family: var(--font-1); font-weight: 700; font-size: clamp(3rem,5vw,5.6rem); display: block; letter-spacing: -.02em; }
.pi-title .t2 { font-family: var(--font-2); font-size: clamp(5rem,9vw,11rem); display: block; letter-spacing: -.02em; position: relative; }
.pi-title .num { font-family: var(--font-1); font-size: 1.4rem; vertical-align: super; margin-left: .6rem; }
.pi-subtitle { font-weight: 700; font-size: 1.6rem; margin-bottom: 1.4rem; }
.pi-paragraph { max-width: 42rem; font-size: 1.5rem; line-height: 1.65; text-align: justify; opacity: .9; }
.pi-scroll { margin-top: 4rem; font-size: 1.4rem; }
.pi-media { aspect-ratio: 3/4; min-height: 67rem; max-height: 86svh; overflow: hidden; }
.pi-media img { width: 100%; height: 100%; object-fit: cover; }

.project-info { padding: 10rem var(--padding-fluid); }
.credits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 6rem; max-width: 100rem; }
.credit-row { display: grid; grid-template-columns: 14rem 1fr; gap: 2rem; padding-bottom: 1.4rem; border-bottom: 1px solid rgba(155,0,0,.18); font-size: 1.5rem; }
.credit-row .k { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 1.3rem; }

.project-media { padding: 0 var(--padding-fluid) 10rem; display: flex; flex-direction: column; gap: 3rem; }
.pm-row { display: grid; gap: 3rem; }
.pm-row.two { grid-template-columns: 1fr 1fr; }
.pm-row.one { grid-template-columns: 1fr; }
.pm-row .ph { overflow: hidden; }
.pm-row .ph img { width: 100%; height: 100%; object-fit: cover; }
.pm-row.two .ph { aspect-ratio: 4/5; }
.pm-row.one .ph { aspect-ratio: 16/9; }

.next-project { background: var(--red-1); color: var(--white-1); padding: 10rem var(--padding-fluid); }
.next-project .np-label { font-size: 1.4rem; text-transform: uppercase; letter-spacing: .1em; opacity: .8; margin-bottom: 2rem; }
.next-project a { display: inline-block; }
.next-project .np-title { font-family: var(--font-2); font-size: clamp(4rem,9vw,11rem); line-height: .95; letter-spacing: -.02em;
  background-image: linear-gradient(currentColor,currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 1s var(--ease-underline); }
@media (hover:hover){ .next-project a:hover .np-title { background-size: 100% 1px; } }
@media (max-width:767.98px){
  .project-intro { grid-template-columns: 1fr; }
  .pi-media { min-height: 60svh; order: -1; }
  .credits-grid, .pm-row.two { grid-template-columns: 1fr; }
}

/* loading state for js-rendered project page */
.proj-loading { min-height: 100svh; display: grid; place-items: center; font-family: var(--font-2); font-size: 3rem; }