/* ==========================================================================
   219 DONDUKOV — "Urban Minimal"
   Студена, архитектурна, минималистична визия: каменно-бяло + графит,
   един стоманено-син акцент, една топла (медна) нишка от реалната фасада.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p { margin: 0; }

:root{
  /* -- surfaces -- */
  --paper:    oklch(0.975 0.006 250);
  --paper-2:  oklch(0.950 0.008 250);
  --stone:    oklch(0.900 0.012 252);
  --white:    oklch(0.995 0.002 250);

  /* -- ink -- */
  --ink:      oklch(0.205 0.020 255);
  --ink-soft: oklch(0.400 0.018 255);
  --muted:    oklch(0.545 0.016 255);

  /* -- lines -- */
  --line:     oklch(0.865 0.012 255);
  --line-2:   oklch(0.78 0.014 255);

  /* -- steel accent (cool, primary) -- */
  --steel:      oklch(0.460 0.078 250);
  --steel-deep: oklch(0.350 0.070 252);
  --steel-soft: oklch(0.930 0.024 250);

  /* -- copper thread (warm, from the real facade panels — used sparingly) -- */
  --copper:      oklch(0.620 0.116 45);
  --copper-deep: oklch(0.500 0.116 42);

  /* -- night band (contrast section) -- */
  --night:    oklch(0.175 0.016 255);
  --night-2:  oklch(0.240 0.020 255);
  --on-night: oklch(0.960 0.008 250);
  --on-night-soft: oklch(0.780 0.020 255);

  --ok:   oklch(0.560 0.100 155);

  --radius:    3px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 2px oklch(0.22 0.02 255 / .06), 0 8px 20px -10px oklch(0.22 0.02 255 / .18);
  --shadow-md: 0 4px 10px oklch(0.22 0.02 255 / .08), 0 30px 60px -30px oklch(0.20 0.03 255 / .35);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --wrap: 1320px;
  --gut:  clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(.22,1,.36,1);
  --hdr-h: 84px;
}

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap{ max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.u-mono{ font-family: var(--f-mono); letter-spacing: .02em; }

/* ---------------------------------------------------------------- type -- */
h1,h2,h3,h4{ font-family: var(--f-display); font-weight: 500; letter-spacing: -0.01em; }
.eyebrow{
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--f-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--steel-deep); margin-bottom: 1.1rem;
}
.eyebrow::before{ content:""; width: 26px; height: 1px; background: currentColor; opacity: .55; }
.sec-title{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.12; color: var(--ink); max-width: 22ch; }
.sec-lead{ font-size: 1.05rem; color: var(--ink-soft); max-width: 46ch; margin-top: 1rem; }

/* ---------------------------------------------------------------- misc -- */
.ic{ width: 1.05em; height: 1.05em; flex: none; }
.fp{ width: 100%; height: auto; color: var(--steel); }
.fp path{ transition: stroke-dashoffset 1.3s var(--ease); }
::selection{ background: var(--steel); color: var(--white); }

.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--f-mono); font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .95em 1.7em; border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; transition: transform .35s var(--ease), background-color .25s, border-color .25s, color .25s;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--ink); color: var(--white); }
.btn--primary:hover{ background: var(--steel-deep); }
.btn--outline{ border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--outline:hover{ border-color: var(--ink); }
.btn--on-night{ border-color: color-mix(in oklch, var(--on-night) 35%, transparent); color: var(--on-night); }
.btn--on-night:hover{ background: var(--on-night); color: var(--night); }
.btn--block{ width: 100%; }
.btn--sm{ padding: .7em 1.2em; font-size: .74rem; }
.btn .ic{ width: .95em; height: .95em; transition: transform .3s var(--ease); }
.btn:hover .ic{ transform: translateX(3px); }

/* --------------------------------------------------------------- header -- */
.hdr{
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--hdr-h);
  display: flex; align-items: center;
  background: transparent; border-bottom: 1px solid transparent;
  opacity: 0; transform: translateY(-100%); pointer-events: none;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), height .3s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.hdr.is-solid{
  background: color-mix(in oklch, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-color: var(--line); height: 72px;
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.hdr__row{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.brand{ display: flex; align-items: baseline; gap: .5rem; font-family: var(--f-display); }
.brand--logo{
  align-items: center;
}

.brand__logo{
  width: clamp(3.45rem, 4.7vw, 4.4rem);
  height: clamp(3.45rem, 4.7vw, 4.4rem);
  object-fit: contain;
}

.brand__mark{ font-size: 1.6rem; font-weight: 600; color: var(--ink); }
.hdr:not(.is-solid) .brand__mark{ color: var(--white); }
.brand__sub{ font-family: var(--f-mono); font-size: .68rem; letter-spacing: .16em; color: var(--muted); }
.hdr:not(.is-solid) .brand__sub{ color: color-mix(in oklch, var(--white) 70%, transparent); }

.nav{ display: flex; align-items: center; gap: 2.1rem; }
.nav__a{ font-size: .87rem; color: var(--ink-soft); position: relative; padding: .3rem 0; }
.hdr:not(.is-solid) .nav__a{ color: color-mix(in oklch, var(--white) 88%, transparent); }
.nav__a::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px; background: var(--steel); transition: right .3s var(--ease); }
.nav__a:hover::after{ right: 0; }
.hdr__aside{ display: flex; align-items: center; gap: 1.4rem; }
.hdr__tel{ display: none; }
.hdr__burger{ display: none; background: none; border: 0; cursor: pointer; color: var(--ink); padding: .3rem; }
.hdr:not(.is-solid) .hdr__burger{ color: var(--white); }

@media (max-width: 980px){
  .nav{ display: none; }
  .hdr__burger{ display: inline-flex; }
}

/* mobile drawer */
.drawer{
  position: fixed; inset: 0; z-index: 90; background: var(--night);
  display: flex; flex-direction: column; padding: 6.5rem var(--gut) 2rem;
  transform: translateY(-100%); transition: transform .45s var(--ease);
}
.drawer.is-open{ transform: translateY(0); }
.drawer__a{ font-family: var(--f-display); font-size: 2rem; color: var(--on-night); padding: .5rem 0; border-bottom: 1px solid color-mix(in oklch, var(--on-night) 14%, transparent); }
.drawer__close{ position: absolute; top: 1.9rem; right: var(--gut); background: none; border: 0; color: var(--on-night); cursor: pointer; }
.drawer__foot{ margin-top: auto; color: var(--on-night-soft); font-family: var(--f-mono); font-size: .85rem; }

/* ----------------------------------------------------------------- hero -- */
.hero{
  position: relative; min-height: 100svh; overflow: hidden; background: var(--night);
}
.hero__media{ position: absolute; inset: 0; }
.hero__media img, .hero__media video{ width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------- marquee -- */
.marquee{
  background: var(--ink); color: var(--paper); overflow: hidden; white-space: nowrap;
  padding: .9rem 0; border-bottom: 1px solid color-mix(in oklch, var(--white) 10%, transparent);
}
.marquee__track{
  display: inline-flex; align-items: center; gap: 1.4rem; width: max-content;
  font-family: var(--f-mono); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  animation: marquee 26s linear infinite;
}
.marquee__track span{ opacity: .92; }
.marquee__track i{ width: 4px; height: 4px; border-radius: 50%; background: var(--copper); display: inline-block; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* -------------------------------------------------------------- section -- */
.section{ position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section--tint{ background: var(--paper-2); }
.folio{
  display: flex; align-items: flex-start; gap: clamp(1.5rem, 3vw, 2.6rem);
}
.folio__num{
  font-family: var(--f-mono); font-size: .8rem; color: var(--steel); writing-mode: vertical-rl;
  transform: rotate(180deg); letter-spacing: .1em; padding-top: .3rem; flex: none; display: none;
}
@media (min-width: 1180px){ .folio__num{ display: block; } }

/* ---------------------------------------------------------------- about -- */
.about__grid{ display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.about__media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.about__media img{ aspect-ratio: 4/5; object-fit: cover; }
.about__badge{
  position: absolute; left: 1.2rem; bottom: 1.2rem; background: var(--white); padding: .9rem 1.2rem; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); font-family: var(--f-mono); font-size: .74rem; color: var(--ink-soft); display: flex; gap: .6rem; align-items: center;
}
.about__badge b{ color: var(--steel-deep); font-size: 1.1rem; font-family: var(--f-display); }
.points{ margin-top: 2.4rem; display: grid; gap: 1.4rem; }
.point{ display: grid; grid-template-columns: 2px 1fr; gap: 1.1rem; }
.point::before{ content:""; background: var(--line-2); }
.point b{ display: block; font-family: var(--f-body); font-weight: 600; color: var(--ink); margin-bottom: .2rem; }
.point span{ color: var(--muted); font-size: .95rem; }

/* ------------------------------------------------------------- location -- */
.loc__grid{ display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.ruler{ position: relative; height: 56px; margin: 2.6rem 0 1rem; }
.ruler__line{ position: absolute; left:0; top: 50%; height: 1px; background: var(--steel); width: 0; transition: width 1.4s var(--ease) .15s; }
[data-reveal].is-in .ruler__line{ width: 100%; }
.ruler__tick{ position: absolute; top: 50%; width: 1px; height: 14px; background: var(--line-2); transform: translateY(-50%); opacity: 0; transition: opacity .4s var(--ease); }
[data-reveal].is-in .ruler__tick{ opacity: 1; }
.ruler__you, .ruler__dest{ position: absolute; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; opacity: 0; transition: opacity .5s var(--ease); }
[data-reveal].is-in .ruler__you{ opacity: 1; transition-delay: .1s; }
[data-reveal].is-in .ruler__dest{ opacity: 1; transition-delay: 1.35s; }
.ruler__you{ left: 0; } .ruler__dest{ left: 100%; }
.ruler__dot{ width: 9px; height: 9px; border-radius: 50%; background: var(--steel); box-shadow: 0 0 0 4px var(--steel-soft); }
.ruler__lbl{ font-family: var(--f-mono); font-size: .7rem; color: var(--muted); white-space: nowrap; }
.ruler__mid{ position: absolute; left: 50%; top: -1.5rem; transform: translateX(-50%); font-family: var(--f-mono); font-size: .82rem; color: var(--copper-deep); background: var(--paper); padding: 0 .6rem; }

.loc-items{ display: grid; gap: 0; border-top: 1px solid var(--line); }
.loc-item{ display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.4rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.loc-item__d{ font-family: var(--f-display); font-size: 1.9rem; color: var(--steel-deep); }
.loc-item__d small{ font-family: var(--f-mono); font-size: 1rem; margin-left: .1em; color: var(--muted); }
.loc-item__t{ font-weight: 600; margin-bottom: .25rem; }
.loc-item__x{ color: var(--muted); font-size: .92rem; }
.map{ margin-top: 2.4rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); filter: grayscale(.25) contrast(1.02); }
.map iframe{ width: 100%; height: 320px; border: 0; display: block; }

/* ---------------------------------------------------------- typologies -- */
.typo-note{ font-family: var(--f-mono); font-size: .82rem; color: var(--muted); margin-top: .6rem; }
.typo-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; perspective: 900px; }
.typo-card{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 2rem 1.9rem; display: flex; flex-direction: column; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.typo-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.typo-card__plan{ width: 100%; max-width: 148px; margin-bottom: 1.6rem; }
.typo-card__name{ font-size: 1.4rem; }
.typo-card__rooms{ font-family: var(--f-mono); font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.typo-card__specs{ display: flex; justify-content: space-between; align-items: baseline; margin: 1.6rem 0; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.typo-card__area{ font-family: var(--f-mono); font-size: .85rem; color: var(--ink-soft); }
.typo-card__price{ font-family: var(--f-display); font-size: 1.3rem; color: var(--ink); }
.typo-card__price small{ display: block; font-family: var(--f-mono); font-size: .68rem; color: var(--muted); font-weight: 400; }
.typo-card .btn{ margin-top: auto; }

@media (max-width: 900px){ .typo-grid{ grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- gallery -- */
.filters{ display: flex; gap: .7rem; flex-wrap: wrap; margin: 2.6rem 0 2.2rem; }
.filter{
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .55em 1.1em; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; cursor: pointer;
  color: var(--ink-soft); transition: background-color .25s, color .25s, border-color .25s;
}
.filter.is-active, .filter:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); }
.gal{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gal__item{ position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4/5; background: var(--stone); }
.gal__item:nth-child(4n+1){ grid-row: span 2; aspect-ratio: 4/9.4; }
.gal__item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.gal__item:hover img{ transform: scale(1.06); }
.gal__cap{
  position: absolute; inset: auto 0 0 0; padding: 1rem 1.1rem; font-family: var(--f-mono); font-size: .72rem; color: var(--white);
  background: linear-gradient(0deg, oklch(0.1 0.02 255 / .75), transparent);
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.gal__item:hover .gal__cap{ opacity: 1; transform: translateY(0); }
.gal__item[hidden]{ display: none; }

@media (max-width: 980px){ .gal{ grid-template-columns: repeat(2, 1fr); } .gal__item:nth-child(4n+1){ grid-row: span 1; aspect-ratio: 4/5; } }

/* --------------------------------------------------------- construction -- */
.night{ background: var(--night); color: var(--on-night); }
.night .eyebrow{ color: var(--copper); }
.night .eyebrow::before{ background: var(--on-night-soft); }
.night .sec-title{ color: var(--on-night); }
.night .sec-lead{ color: var(--on-night-soft); }
.constr__wrap{ display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.constr__badge{
  display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-mono); font-size: .78rem;
  color: var(--copper); border: 1px solid color-mix(in oklch, var(--copper) 45%, transparent); padding: .5em 1em; border-radius: 999px; margin-bottom: 1.6rem;
}
.constr__badge i{ width: 7px; height: 7px; border-radius: 50%; background: var(--copper); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }
.cstats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.6rem; }
.cstat{ border-left: 1px solid color-mix(in oklch, var(--on-night) 22%, transparent); padding-left: 1.2rem; }
.cstat__n{ font-family: var(--f-display); font-size: 2.1rem; }
.cstat__n small{ font-family: var(--f-mono); font-size: 1.1rem; color: var(--copper); margin-left: .1em; }
.cstat__l{ font-family: var(--f-mono); font-size: .72rem; color: var(--on-night-soft); margin-top: .4rem; }
.constr__media{ position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.constr__media img{ aspect-ratio: 4/5; object-fit: cover; filter: saturate(.85); }

@media (max-width: 900px){ .about__grid, .loc__grid, .constr__wrap{ grid-template-columns: 1fr; } .cstats{ grid-template-columns: 1fr 1fr; } }

/* -------------------------------------------------------------- projects -- */
.proj-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 3rem; perspective: 900px; }
.proj-card{ position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 300px; display: flex; align-items: flex-end; background: var(--stone); }
.proj-card__img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.proj-card:hover .proj-card__img{ transform: scale(1.05); }
.proj-card__scrim{ position: absolute; inset: 0; background: linear-gradient(0deg, oklch(0.12 0.02 255 / .82), oklch(0.12 0.02 255 / .05) 60%); }
.proj-card__body{ position: relative; z-index: 1; padding: 1.8rem; color: var(--white); }
.proj-card__note{ font-family: var(--f-mono); font-size: .74rem; color: color-mix(in oklch, var(--white) 75%, transparent); text-transform: uppercase; letter-spacing: .05em; }
.proj-card__name{ font-size: 1.5rem; margin-top: .3rem; }
.proj-card__desc{ font-size: .88rem; color: color-mix(in oklch, var(--white) 85%, transparent); margin-top: .5rem; max-width: 34ch; }
.proj-card__cta{ margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono); font-size: .76rem; }
.proj-card.is-soon{ background: var(--paper-2); border: 1px dashed var(--line-2); }
.proj-card.is-soon .proj-card__body{ color: var(--ink); }
.proj-card.is-soon .proj-card__note{ color: var(--muted); }
.proj-card.is-soon .proj-card__desc{ color: var(--ink-soft); }

@media (max-width: 720px){ .proj-grid{ grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- contacts -- */
.contacts{ background: var(--night); color: var(--on-night); }
.cta__grid{ display: grid; grid-template-columns: .95fr 1.05fr; gap: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.cta__media{ position: relative; min-height: 100%; }
.cta__media img{ width: 100%; height: 100%; object-fit: cover; min-height: 480px; }
.cta__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent 60%, var(--night-2) 100%); }
.cta__info{ position: absolute; left: 2rem; bottom: 2rem; right: 2rem; }
.cta__info .brand__mark{ color: var(--white); font-size: 1.8rem; }
.cta__list{ margin-top: 1.4rem; display: grid; gap: .9rem; }
.cta__list li{ display: flex; align-items: center; gap: .8rem; font-size: .92rem; color: color-mix(in oklch, var(--white) 90%, transparent); }
.cta__list a:hover{ color: var(--copper); }
.cta__list .ic{ color: var(--copper); }
.cta__panel{ background: var(--night-2); padding: clamp(2rem, 4vw, 3.2rem); }
.cta__panel .sec-title, .cta__panel .sec-lead{ color: var(--on-night); }
.cta__panel .sec-lead{ color: var(--on-night-soft); }

@media (max-width: 900px){ .cta__grid{ grid-template-columns: 1fr; } .cta__media{ order: 2; } .cta__media img{ min-height: 260px; } .cta__info{ position: static; padding: 1.8rem var(--gut) 0; } }

/* ------------------------------------------------------------------ form -- */
.form{ display: grid; gap: 1.1rem; margin-top: 2rem; }
.form__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field{ display: grid; gap: .5rem; }
.field__lbl{ font-size: .72rem; text-transform: uppercase; color: var(--on-night-soft); }
.field__lbl b{ color: var(--copper); font-weight: 400; }
.field input, .field textarea{
  background: color-mix(in oklch, var(--white) 6%, transparent); border: 1px solid color-mix(in oklch, var(--on-night) 22%, transparent);
  color: var(--on-night); border-radius: var(--radius); padding: .85em 1em; resize: vertical; transition: border-color .25s, background-color .25s;
}
.field input::placeholder, .field textarea::placeholder{ color: color-mix(in oklch, var(--on-night) 40%, transparent); }
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--copper); background: color-mix(in oklch, var(--white) 9%, transparent); }
.check{ display: flex; align-items: flex-start; gap: .7rem; font-size: .84rem; color: var(--on-night-soft); }
.check input{ margin-top: .25rem; accent-color: var(--copper); }
.check b{ color: var(--copper); font-weight: 400; }
.f-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form__fine{ text-align: center; font-size: .72rem; color: var(--on-night-soft); margin: 0; }
.alert{ display: flex; align-items: center; gap: .7rem; padding: .9em 1.1em; border-radius: var(--radius); font-size: .88rem; }
.alert--ok{ background: color-mix(in oklch, var(--ok) 22%, transparent); color: var(--on-night); border: 1px solid color-mix(in oklch, var(--ok) 50%, transparent); }
.alert--err{ background: color-mix(in oklch, oklch(0.58 0.16 30) 20%, transparent); color: var(--on-night); border: 1px solid color-mix(in oklch, oklch(0.58 0.16 30) 50%, transparent); }
.alert .ic{ flex: none; }
@media (max-width: 560px){ .form__grid{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- footer -- */
.ftr{ background: var(--night); color: var(--on-night-soft); border-top: 1px solid color-mix(in oklch, var(--on-night) 12%, transparent); padding: 2.6rem 0; }
.ftr__row{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: .78rem; }
.ftr__back{ background: none; border: 1px solid color-mix(in oklch, var(--on-night) 25%, transparent); color: var(--on-night-soft); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .25s, color .25s; }
.ftr__back:hover{ border-color: var(--copper); color: var(--copper); }

/* --------------------------------------------------------------- reveal -- */
/* Animation (not `transition`) so components can keep their own hover
   transitions (box-shadow, border-color, …) without the two colliding. */
@keyframes reveal-up{ from{ opacity: 0; transform: translateY(22px); } to{ opacity: 1; transform: none; } }
[data-reveal]{ opacity: 0; }
[data-reveal].is-in{ animation: reveal-up .8s var(--ease) both; }
.typo-grid .typo-card:nth-child(2){ animation-delay: .12s; }
.typo-grid .typo-card:nth-child(3){ animation-delay: .24s; }
.proj-grid .proj-card:nth-child(2){ animation-delay: .12s; }

/* --------------------------------------------------------------- modal -- */
.modal-backdrop{ position: fixed; inset: 0; background: oklch(0.1 0.02 255 / .6); backdrop-filter: blur(4px); z-index: 100; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); }
.modal-backdrop.is-open{ opacity: 1; pointer-events: auto; }
.modal{ position: fixed; z-index: 101; left: 50%; top: 50%; transform: translate(-50%,-46%); width: min(560px, calc(100vw - 2.4rem)); max-height: 88vh; overflow-y: auto; background: var(--night-2); color: var(--on-night); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.modal.is-open{ opacity: 1; pointer-events: auto; transform: translate(-50%,-50%); }
.modal__close{ position: absolute; top: 1.2rem; right: 1.2rem; background: none; border: 0; color: var(--on-night-soft); cursor: pointer; }
.modal__title{ font-size: 1.5rem; color: var(--on-night); padding-right: 2rem; }
.modal__sub{ color: var(--on-night-soft); font-size: .9rem; margin-top: .4rem; }

/* ==========================================================================
   Impeccable luxury pass
   ========================================================================== */

:root{
  --paper: oklch(0.982 0.006 92);
  --paper-2: oklch(0.955 0.010 86);
  --stone: oklch(0.900 0.010 92);
  --white: oklch(0.998 0.002 95);

  --ink: oklch(0.170 0.012 260);
  --ink-soft: oklch(0.365 0.018 252);
  --muted: oklch(0.505 0.016 245);

  --line: oklch(0.855 0.013 90);
  --line-2: oklch(0.750 0.018 84);

  --steel: oklch(0.405 0.060 168);
  --steel-deep: oklch(0.300 0.052 170);
  --steel-soft: oklch(0.925 0.028 165);

  --copper: oklch(0.665 0.100 66);
  --copper-deep: oklch(0.505 0.088 58);
  --wine: oklch(0.315 0.060 18);
  --champagne: oklch(0.815 0.065 82);

  --night: oklch(0.145 0.012 260);
  --night-2: oklch(0.205 0.018 260);
  --on-night: oklch(0.968 0.007 96);
  --on-night-soft: oklch(0.805 0.018 96);

  --radius: 6px;
  --radius-lg: 8px;
  --shadow-sm: 0 10px 24px -18px oklch(0.16 0.02 260 / .34);
  --shadow-md: 0 26px 70px -38px oklch(0.14 0.03 260 / .48);
  --hdr-h: 86px;
}

*, *::before, *::after{ letter-spacing: 0 !important; }

body{
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--line) 28%, transparent) 1px, transparent 1px) 0 0 / 120px 120px,
    var(--paper);
  color: var(--ink);
  font-size: 16px;
}

.wrap{ max-width: 1280px; }

h1,h2,h3,h4{ letter-spacing: 0; }

.u-mono{ letter-spacing: 0; }

.eyebrow{
  color: var(--steel-deep);
  font-size: .76rem;
  gap: .65rem;
  margin-bottom: 1rem;
}

.eyebrow::before{
  width: 34px;
  background: linear-gradient(90deg, var(--copper), var(--steel));
  opacity: 1;
}

.sec-title{
  font-size: 2.75rem;
  line-height: 1.05;
  max-width: 19ch;
}

.sec-lead{
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.75;
}

@media (min-width: 1180px){
  .sec-title{ font-size: 3.2rem; }
}

@media (max-width: 720px){
  .sec-title{ font-size: 2.15rem; }
  .sec-lead{ font-size: 1rem; }
}

.btn{
  border-radius: var(--radius);
  font-size: .78rem;
  min-height: 44px;
  box-shadow: none;
}

.btn--primary{
  background: linear-gradient(135deg, var(--ink), color-mix(in oklch, var(--wine) 55%, var(--ink)));
  color: var(--white);
  border-color: color-mix(in oklch, var(--champagne) 18%, transparent);
}

.btn--primary:hover{
  background: linear-gradient(135deg, color-mix(in oklch, var(--ink) 86%, var(--steel)), var(--wine));
}

.btn--outline{
  border-color: color-mix(in oklch, var(--ink) 18%, var(--line));
  background: color-mix(in oklch, var(--white) 58%, transparent);
}

.btn--outline:hover{
  border-color: var(--copper-deep);
  color: var(--copper-deep);
}

.btn--glass{
  color: var(--on-night);
  border-color: color-mix(in oklch, var(--on-night) 34%, transparent);
  background: color-mix(in oklch, var(--night) 30%, transparent);
  backdrop-filter: blur(14px);
}

.btn--glass:hover{
  border-color: var(--champagne);
  background: color-mix(in oklch, var(--champagne) 16%, transparent);
}

.btn--hero{
  background: linear-gradient(135deg, var(--champagne), var(--copper));
  color: var(--ink);
  border-color: color-mix(in oklch, var(--white) 55%, transparent);
}

.btn--hero:hover{
  background: linear-gradient(135deg, color-mix(in oklch, var(--champagne) 86%, var(--white)), var(--copper));
}

/* Header */
.hdr{
  opacity: 1;
  transform: none;
  pointer-events: auto;
  height: var(--hdr-h);
  background: linear-gradient(180deg, oklch(0.10 0.01 260 / .66), transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--on-night) 12%, transparent);
}

.hdr.is-solid{
  height: 72px;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.1);
  border-color: var(--line);
  box-shadow: 0 18px 45px -35px oklch(0.12 0.02 260 / .6);
}

.brand{
  align-items: center;
  gap: .65rem;
}

.brand__mark{
  color: var(--white);
  font-size: 1.55rem;
}

.hdr.is-solid .brand__mark{ color: var(--ink); }

.brand__sub{
  color: color-mix(in oklch, var(--white) 76%, transparent);
  font-size: .66rem;
}

.hdr.is-solid .brand__sub{ color: var(--muted); }

.nav{ gap: 1.55rem; }

.nav__a{
  color: color-mix(in oklch, var(--white) 86%, transparent);
  font-size: .86rem;
}

.hdr.is-solid .nav__a{ color: var(--ink-soft); }

.nav__a::after{ background: var(--champagne); }

.hdr.is-solid .nav__a::after{ background: var(--copper-deep); }

.hdr__tel{
  display: inline-flex;
  align-items: center;
  color: color-mix(in oklch, var(--white) 88%, transparent);
  font-size: .78rem;
}

.hdr.is-solid .hdr__tel{ color: var(--ink-soft); }

.hdr:not(.is-solid) .btn--outline{
  color: var(--white);
  background: color-mix(in oklch, var(--night) 20%, transparent);
  border-color: color-mix(in oklch, var(--white) 30%, transparent);
}

.hdr__burger{
  color: var(--white);
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in oklch, var(--white) 26%, transparent);
  border-radius: var(--radius);
  backdrop-filter: blur(12px);
}

.hdr.is-solid .hdr__burger{
  color: var(--ink);
  border-color: var(--line);
  background: var(--white);
}

/* Hero */
.hero{
  min-height: 100svh;
  padding: calc(var(--hdr-h) + 3rem) 0 5.5rem;
  isolation: isolate;
}

.hero__media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: oklch(0.10 0.02 260 / .12);
}

.hero__media video{
  filter: saturate(.92) contrast(1.03);
  transform: scale(1.01);
}

.hero--video-only{
  min-height: 100svh;
  padding: 0;
}

.hero--video-only .hero__media::after{
  display: none;
}

.hero--video-only .hero__media video{
  filter: none;
  transform: none;
}

.hero__shade{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, oklch(0.08 0.015 260 / .88) 0%, oklch(0.11 0.018 260 / .58) 42%, oklch(0.12 0.02 260 / .22) 72%, transparent 100%),
    linear-gradient(0deg, oklch(0.08 0.015 260 / .72) 0%, transparent 44%);
}

.hero__frame{
  position: absolute;
  inset: calc(var(--hdr-h) + .8rem) var(--gut) 1.7rem;
  z-index: 2;
  border: 1px solid color-mix(in oklch, var(--on-night) 16%, transparent);
  pointer-events: none;
}

.hero__inner{
  position: relative;
  z-index: 3;
  min-height: calc(100svh - var(--hdr-h) - 8.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 3rem;
  align-items: end;
}

.hero__copy{
  max-width: 760px;
  color: var(--on-night);
  animation: hero-rise .9s var(--ease) both;
}

.hero__eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  color: var(--champagne);
  margin-bottom: 1.35rem;
  padding: .58rem .78rem;
  border: 1px solid color-mix(in oklch, var(--champagne) 45%, transparent);
  background: color-mix(in oklch, var(--night) 22%, transparent);
  backdrop-filter: blur(12px);
}

.hero__eyebrow::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--champagne);
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--champagne) 14%, transparent);
}

.hero__title{
  color: var(--white);
  font-size: 5.4rem;
  line-height: .96;
  max-width: 10ch;
  text-wrap: balance;
  text-shadow: 0 22px 70px oklch(0.06 0.02 260 / .65);
}

.hero__title span{
  display: block;
  max-width: 26ch;
  margin-top: 1rem;
  font-family: var(--f-body);
  font-size: 1.05rem;
  line-height: 1.35;
  color: color-mix(in oklch, var(--on-night) 82%, transparent);
}

.hero__lead{
  max-width: 54ch;
  margin-top: 1.45rem;
  color: color-mix(in oklch, var(--on-night) 86%, transparent);
  font-size: 1.12rem;
  line-height: 1.75;
}

.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2rem;
}

.hero__panel{
  color: var(--on-night);
  border: 1px solid color-mix(in oklch, var(--on-night) 20%, transparent);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--white) 10%, transparent), color-mix(in oklch, var(--night) 48%, transparent)),
    color-mix(in oklch, var(--night) 68%, transparent);
  backdrop-filter: blur(20px) saturate(1.12);
  box-shadow: 0 34px 90px -54px oklch(0.05 0.02 260 / .9);
  padding: 1.45rem;
  animation: hero-rise .9s var(--ease) .16s both;
}

.hero__panel-head{
  display: grid;
  gap: .38rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid color-mix(in oklch, var(--on-night) 15%, transparent);
}

.hero__panel-head span{
  font-family: var(--f-mono);
  color: var(--champagne);
  font-size: .74rem;
  text-transform: uppercase;
}

.hero__panel-head b{
  font-family: var(--f-display);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1.1;
}

.hero__stats{
  display: grid;
  gap: 0;
  margin: 1.1rem 0;
  border-top: 1px solid color-mix(in oklch, var(--on-night) 12%, transparent);
}

.hero__stat{
  display: grid;
  grid-template-columns: 6.2rem 1fr;
  gap: .9rem;
  align-items: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--on-night) 12%, transparent);
}

.hero__stat strong{
  font-family: var(--f-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--white);
}

.hero__stat small{
  font-family: var(--f-mono);
  font-size: .85rem;
  color: var(--champagne);
  margin-left: .12rem;
}

.hero__stat span{
  color: color-mix(in oklch, var(--on-night) 76%, transparent);
  font-size: .92rem;
}

.hero__call{
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1rem;
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--champagne) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--champagne) 30%, transparent);
  transition: background-color .25s var(--ease), transform .3s var(--ease);
}

.hero__call:hover{
  transform: translateY(-2px);
  background: color-mix(in oklch, var(--champagne) 18%, transparent);
}

.hero__call .ic{ color: var(--champagne); }

.hero__call span{
  display: grid;
  gap: .08rem;
  font-family: var(--f-mono);
  font-size: .86rem;
}

.hero__call small{
  color: color-mix(in oklch, var(--on-night) 66%, transparent);
  font-size: .72rem;
}

.hero__bottom{
  position: absolute;
  left: 50%;
  bottom: 2.6rem;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1280px, 100%);
}

.hero__micro{
  display: flex;
  align-items: center;
  gap: .85rem;
  color: color-mix(in oklch, var(--on-night) 68%, transparent);
  font-family: var(--f-mono);
  font-size: .75rem;
}

.hero__micro span{
  display: inline-flex;
  align-items: center;
  gap: .85rem;
}

.hero__micro span + span::before{
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--champagne);
}

.hero__scroll{
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in oklch, var(--on-night) 28%, transparent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero__scroll span{
  width: 1px;
  height: 18px;
  background: var(--champagne);
  position: relative;
}

.hero__scroll span::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--champagne);
  border-bottom: 1px solid var(--champagne);
  transform: translateX(-50%) rotate(45deg);
}

@keyframes hero-rise{
  from{ opacity: 0; transform: translateY(24px); }
  to{ opacity: 1; transform: none; }
}

.marquee{
  background: linear-gradient(90deg, var(--wine), var(--ink) 42%, var(--steel-deep));
  color: var(--on-night);
  padding: .78rem 0;
}

.marquee__track{
  font-size: .76rem;
  animation-duration: 34s;
}

.marquee__track i{
  width: 24px;
  height: 1px;
  border-radius: 0;
  background: var(--champagne);
}

/* Sections */
.section{
  padding: 7rem 0;
}

.section--tint{
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--white) 55%, transparent), transparent 42%),
    var(--paper-2);
}

.folio{
  gap: 3rem;
}

.folio__num{
  color: var(--copper-deep);
}

.about__grid,
.loc__grid,
.constr__wrap{
  gap: 4.8rem;
}

.about__media,
.constr__media,
.map,
.cta__grid,
.proj-card,
.gal__item{
  border-radius: var(--radius-lg);
}

.about__media::after,
.constr__media::after,
.cta__media::after{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in oklch, var(--white) 18%, transparent);
  pointer-events: none;
}

.about__media img,
.constr__media img{
  transition: transform .8s var(--ease), filter .8s var(--ease);
}

.about__media:hover img,
.constr__media:hover img{
  transform: scale(1.025);
}

.about__badge{
  background: color-mix(in oklch, var(--white) 88%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid color-mix(in oklch, var(--white) 60%, transparent);
}

.points{
  gap: 1.1rem;
}

.point{
  grid-template-columns: 8px 1fr;
  padding: 1rem 0 1rem 1rem;
  border-top: 1px solid var(--line);
}

.point::before{
  width: 8px;
  height: 8px;
  align-self: start;
  margin-top: .55rem;
  border-radius: 50%;
  background: var(--copper);
}

.ruler__line{ background: linear-gradient(90deg, var(--steel), var(--copper)); }
.ruler__dot{ background: var(--copper); box-shadow: 0 0 0 5px color-mix(in oklch, var(--copper) 18%, transparent); }
.ruler__mid{ background: var(--paper-2); color: var(--wine); }

.loc-items{
  background: color-mix(in oklch, var(--white) 45%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: .4rem 1.35rem;
}

.loc-item{
  grid-template-columns: 6rem 1fr;
}

.loc-item__d{
  color: var(--copper-deep);
}

.map{
  box-shadow: var(--shadow-sm);
  filter: grayscale(.18) contrast(1.04) saturate(.92);
}

/* Apartment cards */
.typo-grid{
  gap: 1.25rem;
}

.typo-card{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in oklch, var(--white) 92%, transparent), color-mix(in oklch, var(--paper) 92%, transparent)),
    var(--white);
  border-color: color-mix(in oklch, var(--line) 82%, var(--copper));
  min-height: 100%;
  box-shadow: 0 18px 45px -38px oklch(0.18 0.02 260 / .45);
}

.typo-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--copper), var(--steel));
  opacity: .78;
}

.typo-card:hover{
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklch, var(--copper) 40%, var(--line));
}

.typo-card__plan{
  color: var(--steel-deep);
  max-width: 158px;
}

.typo-card__name{
  font-size: 1.55rem;
}

.typo-card__specs{
  gap: 1rem;
}

.typo-card__price{
  color: var(--wine);
}

.filters{
  gap: .55rem;
}

.filter{
  border-radius: 999px;
  background: color-mix(in oklch, var(--white) 55%, transparent);
}

.filter.is-active,
.filter:hover{
  background: var(--wine);
  border-color: var(--wine);
}

.gal{
  gap: .8rem;
}

.gal__item{
  box-shadow: 0 14px 36px -34px oklch(0.14 0.02 260 / .6);
}

.gal__cap{
  opacity: 1;
  transform: none;
  background: linear-gradient(0deg, oklch(0.08 0.02 260 / .76), transparent);
}

/* Night bands */
.night,
.contacts,
.ftr{
  background:
    linear-gradient(115deg, var(--night), color-mix(in oklch, var(--wine) 34%, var(--night)) 50%, color-mix(in oklch, var(--steel-deep) 34%, var(--night))),
    var(--night);
}

.night .eyebrow,
.contacts .eyebrow{
  color: var(--champagne);
}

.constr__badge{
  color: var(--champagne);
  border-color: color-mix(in oklch, var(--champagne) 45%, transparent);
  background: color-mix(in oklch, var(--champagne) 8%, transparent);
}

.constr__badge i{ background: var(--champagne); }

.cstat__n small{
  color: var(--champagne);
}

.constr__media{
  box-shadow: 0 32px 85px -58px oklch(0.02 0.01 260 / .9);
}

.proj-grid{
  gap: 1.25rem;
}

.proj-card{
  min-height: 340px;
  box-shadow: 0 22px 58px -42px oklch(0.14 0.02 260 / .55);
}

.proj-card__body{
  padding: 2rem;
}

.proj-card__note{
  color: var(--champagne);
}

.proj-card__name{
  font-family: var(--f-display);
  font-size: 1.8rem;
}

.proj-card__cta{
  color: var(--champagne);
}

.proj-card.is-soon{
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--white) 68%, transparent), color-mix(in oklch, var(--steel-soft) 60%, transparent)),
    var(--paper-2);
}

/* Contacts and form */
.cta__grid{
  border: 1px solid color-mix(in oklch, var(--on-night) 14%, transparent);
}

.cta__media::after{
  background: linear-gradient(90deg, transparent 38%, oklch(0.10 0.02 260 / .72) 100%);
}

.cta__panel{
  background: color-mix(in oklch, var(--night-2) 86%, var(--wine));
}

.field input,
.field textarea{
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--white) 8%, transparent);
}

.field input:focus,
.field textarea:focus{
  border-color: var(--champagne);
}

.check input{
  accent-color: var(--champagne);
}

.check b,
.field__lbl b,
.cta__list .ic,
.cta__list a:hover,
.ftr__back:hover{
  color: var(--champagne);
}

.form__fine{
  color: color-mix(in oklch, var(--on-night) 64%, transparent);
}

.modal{
  border: 1px solid color-mix(in oklch, var(--on-night) 15%, transparent);
  box-shadow: 0 34px 110px -50px oklch(0.03 0.01 260 / .92);
}

/* Responsive polish */
@media (max-width: 1180px){
  .nav{ gap: 1rem; }
  .hero__inner{ grid-template-columns: minmax(0, 1fr) 350px; }
  .hero__title{ font-size: 4.5rem; }
}

@media (max-width: 980px){
  .hdr__tel,
  #hdrCta{ display: none; }
  .hero{
    min-height: auto;
    padding: calc(var(--hdr-h) + 2.2rem) 0 4.2rem;
  }
  .hero__inner{
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hero__panel{
    max-width: 520px;
  }
  .hero__bottom,
  .hero__frame{ display: none; }
  .hero__shade{
    background:
      linear-gradient(180deg, oklch(0.08 0.015 260 / .72), oklch(0.09 0.018 260 / .62)),
      linear-gradient(90deg, oklch(0.08 0.015 260 / .82), transparent);
  }
  .folio{ display: block; }
}

@media (max-width: 900px){
  .section{ padding: 5.25rem 0; }
  .about__grid,
  .loc__grid,
  .constr__wrap{
    gap: 2.4rem;
  }
  .loc-items{
    padding-inline: 1rem;
  }
}

@media (max-width: 720px){
  .hero__title{
    font-size: 3.25rem;
    max-width: 9ch;
  }
  .hero__title span{
    font-size: .98rem;
  }
  .hero__lead{
    font-size: 1rem;
  }
  .hero__actions{
    display: grid;
    grid-template-columns: 1fr;
  }
  .hero__actions .btn{
    width: 100%;
    white-space: normal;
    text-align: center;
  }
  .hero__panel{
    padding: 1.15rem;
  }
  .hero__stat{
    grid-template-columns: 5.6rem 1fr;
  }
  .hero__stat strong{
    font-size: 1.65rem;
  }
  .loc-item{
    grid-template-columns: 1fr;
    gap: .3rem;
  }
  .typo-card__specs{
    display: grid;
  }
  .gal{
    grid-template-columns: 1fr;
  }
  .cta__list li{
    align-items: flex-start;
  }
}

@media (max-width: 480px){
  .hero__title{ font-size: 2.8rem; }
  .brand__sub{ display: none; }
  .drawer__a{ font-size: 1.65rem; }
  .hero__panel-head b{ font-size: 1.25rem; }
}

/* Gallery refinement */
#gallery{
  overflow: hidden;
}

#gallery::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 8%, color-mix(in oklch, var(--champagne) 17%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in oklch, var(--white) 58%, transparent), transparent 44%);
  pointer-events: none;
}

#gallery .wrap{
  position: relative;
  z-index: 1;
}

.gallery-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid color-mix(in oklch, var(--line) 78%, transparent);
}

.gallery-head .sec-title{
  max-width: 13ch;
}

.gallery-lead{
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 .25rem;
}

.gallery-tools{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.25rem 0 1.35rem;
  padding: .78rem;
  border: 1px solid color-mix(in oklch, var(--line) 86%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in oklch, var(--white) 68%, transparent);
  box-shadow: 0 18px 48px -42px oklch(0.16 0.02 260 / .45);
  backdrop-filter: blur(14px);
}

.gallery-count{
  flex: none;
  color: var(--copper-deep);
  font-size: .74rem;
  padding-inline: .55rem;
}

.gallery-tools .filters{
  margin: 0;
  justify-content: flex-end;
}

.gallery-tools .filter{
  border-color: color-mix(in oklch, var(--line-2) 72%, transparent);
  background: transparent;
  padding: .62em 1.05em;
}

.gallery-tools .filter.is-active,
.gallery-tools .filter:hover{
  background: linear-gradient(135deg, var(--wine), color-mix(in oklch, var(--steel-deep) 45%, var(--wine)));
  border-color: transparent;
  color: var(--white);
}

.gal{
  counter-reset: gallery;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(72px, 6.8vw, 104px);
  grid-auto-flow: dense;
  gap: clamp(.7rem, 1.15vw, .95rem);
  margin-top: 0;
}

.gal .gal__item,
.gal .gal__item:nth-child(4n+1){
  aspect-ratio: auto;
  grid-column: span 4;
  grid-row: span 3;
}

.gal .gal__item{
  counter-increment: gallery;
  isolation: isolate;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--white) 45%, transparent);
  background: var(--night);
  box-shadow: 0 26px 70px -48px oklch(0.12 0.03 260 / .72);
}

.gal .gal__item:nth-child(1){
  grid-column: span 5;
  grid-row: span 5;
}

.gal .gal__item:nth-child(2){
  grid-column: span 4;
  grid-row: span 3;
}

.gal .gal__item:nth-child(3){
  grid-column: span 3;
  grid-row: span 3;
}

.gal .gal__item:nth-child(4),
.gal .gal__item:nth-child(5){
  grid-column: span 3;
  grid-row: span 2;
}

.gal .gal__item:nth-child(6),
.gal .gal__item:nth-child(7){
  grid-column: span 6;
  grid-row: span 3;
}

.gal .gal__item[data-slot]{
  grid-column: span 4;
  grid-row: span 3;
}

.gal .gal__item[data-slot="1"]{
  grid-column: span 5;
  grid-row: span 5;
}

.gal .gal__item[data-slot="2"]{
  grid-column: span 4;
  grid-row: span 3;
}

.gal .gal__item[data-slot="3"]{
  grid-column: span 3;
  grid-row: span 3;
}

.gal .gal__item[data-slot="4"],
.gal .gal__item[data-slot="5"]{
  grid-column: span 3;
  grid-row: span 2;
}

.gal .gal__item[data-slot="6"],
.gal .gal__item[data-slot="7"]{
  grid-column: span 6;
  grid-row: span 3;
}

.gal[data-visible-total="1"] .gal__item[data-slot]{
  grid-column: span 12;
  grid-row: span 4;
}

.gal[data-visible-total="2"] .gal__item[data-slot]{
  grid-column: span 6;
  grid-row: span 4;
}

.gal[data-visible-total="3"] .gal__item[data-slot]{
  grid-column: span 4;
  grid-row: span 4;
}

.gal .gal__item::before{
  content: "0" counter(gallery);
  position: absolute;
  top: .9rem;
  left: .9rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  height: 2.15rem;
  padding-inline: .45rem;
  border-radius: 999px;
  color: var(--white);
  font-family: var(--f-mono);
  font-size: .68rem;
  background: color-mix(in oklch, var(--night) 42%, transparent);
  border: 1px solid color-mix(in oklch, var(--white) 30%, transparent);
  backdrop-filter: blur(12px);
}

.gal .gal__item::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, oklch(0.08 0.02 260 / .12), transparent 36%),
    linear-gradient(0deg, oklch(0.07 0.02 260 / .76), transparent 48%);
  pointer-events: none;
}

.gal .gal__item img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.03);
}

.gal .gal__item:hover img{
  transform: scale(1.045);
  filter: saturate(1.03) contrast(1.05);
}

.gal .gal__cap{
  z-index: 2;
  inset: auto 0 0 0;
  padding: 2.9rem 1.15rem 1rem;
  color: var(--white);
  font-size: .78rem;
  line-height: 1.45;
  background: none;
  text-shadow: 0 1px 18px oklch(0.06 0.02 260 / .82);
}

.gal .gal__cap::before{
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin-bottom: .55rem;
  background: var(--champagne);
}

@media (max-width: 980px){
  .gallery-head{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .gallery-tools{
    display: grid;
  }
  .gallery-tools .filters{
    justify-content: flex-start;
  }
  .gal{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 86px;
  }
  .gal .gal__item,
  .gal .gal__item:nth-child(4n+1){
    grid-column: span 3;
    grid-row: span 3;
    aspect-ratio: auto;
  }
  .gal .gal__item:nth-child(1){
    grid-column: span 6;
    grid-row: span 4;
  }
  .gal .gal__item:nth-child(6),
  .gal .gal__item:nth-child(7){
    grid-column: span 6;
    grid-row: span 3;
  }
  .gal .gal__item[data-slot]{
    grid-column: span 3;
    grid-row: span 3;
  }
  .gal .gal__item[data-slot="1"],
  .gal[data-visible-total="1"] .gal__item[data-slot]{
    grid-column: span 6;
    grid-row: span 4;
  }
  .gal .gal__item[data-slot="6"],
  .gal .gal__item[data-slot="7"]{
    grid-column: span 6;
    grid-row: span 3;
  }
  .gal[data-visible-total="2"] .gal__item[data-slot],
  .gal[data-visible-total="3"] .gal__item[data-slot]{
    grid-column: span 3;
    grid-row: span 3;
  }
}

@media (max-width: 640px){
  .gallery-tools{
    padding: .65rem;
  }
  .gallery-count{
    padding-inline: .35rem;
  }
  .gallery-tools .filters{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }
  .gallery-tools .filter{
    width: 100%;
    min-height: 40px;
    padding-inline: .7rem;
  }
  .gal{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: .85rem;
  }
  .gal .gal__item,
  .gal .gal__item:nth-child(1),
  .gal .gal__item:nth-child(2),
  .gal .gal__item:nth-child(3),
  .gal .gal__item:nth-child(4),
  .gal .gal__item:nth-child(5),
  .gal .gal__item:nth-child(6),
  .gal .gal__item:nth-child(7),
  .gal .gal__item:nth-child(4n+1),
  .gal .gal__item[data-slot],
  .gal[data-visible-total] .gal__item[data-slot]{
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Joined gallery mosaic */
.gal{
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  grid-auto-rows: auto;
  grid-auto-flow: row;
  gap: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--line) 88%, transparent);
  box-shadow: 0 28px 76px -52px oklch(0.12 0.03 260 / .45);
  background: transparent;
}

.gal .gal__item{
  grid-column: auto !important;
  grid-row: auto !important;
  aspect-ratio: 4 / 3 !important;
  margin: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.gal .gal__item::before{
  top: .75rem;
  left: .75rem;
}

.gal .gal__cap{
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Sharp architectural corners */
:root{
  --radius: 0px;
  --radius-lg: 0px;
}

.btn,
.filter,
.hdr__burger,
.drawer,
.drawer__a,
.hero__eyebrow,
.hero__panel,
.hero__call,
.hero__scroll,
.gallery-tools,
.gal,
.gal .gal__item,
.about__media,
.about__badge,
.loc-items,
.map,
.typo-card,
.constr__badge,
.constr__media,
.proj-card,
.cta__grid,
.field input,
.field textarea,
.check input,
.alert,
.modal,
.ftr__back{
  border-radius: 0 !important;
}

/* Premium motion details */
@media (min-width:0){
  .hero__media video{
    animation: hero-cinema 18s ease-in-out infinite alternate;
    transform: scale(1.035) translate3d(calc(var(--hero-x, 0) * -10px), calc(var(--hero-y, 0) * -8px), 0);
    transition: transform .45s var(--ease), filter .45s var(--ease);
  }

  .hero__shade{
    animation: shade-breathe 7s ease-in-out infinite alternate;
  }

  .hero__eyebrow{
    animation: hero-chip-in .85s var(--ease) .1s both;
  }

  .hero__title{
    animation: title-mask-in 1s var(--ease) .18s both;
  }

  .hero__lead{
    animation: reveal-up .9s var(--ease) .36s both;
  }

  .hero__actions{
    animation: reveal-up .9s var(--ease) .48s both;
  }

  .hero__scroll span{
    animation: scroll-line 1.8s ease-in-out infinite;
  }

  .hero__call .ic{
    animation: soft-ring 2.4s ease-in-out infinite;
  }

  .btn,
  .filter,
  .hero__call,
  .typo-card,
  .proj-card,
  .gal__item{
    will-change: transform;
  }

  .btn{
    position: relative;
    overflow: hidden;
  }

  .btn::after{
    content: "";
    position: absolute;
    inset: -1px auto -1px -42%;
    width: 34%;
    background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--white) 42%, transparent), transparent);
    transform: skewX(-18deg) translateX(-120%);
    pointer-events: none;
  }

  .btn:hover::after{
    animation: sheen .82s var(--ease);
  }

  .filter{
    position: relative;
    overflow: hidden;
  }

  .filter::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--champagne);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .32s var(--ease);
  }

  .filter:hover::before,
  .filter.is-active::before{
    transform: scaleX(1);
  }

  .gallery-head.is-in .eyebrow,
  .gallery-head.is-in .sec-title,
  .gallery-head.is-in .gallery-lead{
    animation: reveal-up .78s var(--ease) both;
  }

  .gallery-head.is-in .sec-title{ animation-delay: .08s; }
  .gallery-head.is-in .gallery-lead{ animation-delay: .18s; }

  .gal.is-in .gal__item{
    animation: gallery-tile-in .82s var(--ease) both;
  }

  .gal.is-in .gal__item[data-slot="1"]{ animation-delay: .02s; }
  .gal.is-in .gal__item[data-slot="2"]{ animation-delay: .08s; }
  .gal.is-in .gal__item[data-slot="3"]{ animation-delay: .14s; }
  .gal.is-in .gal__item[data-slot="4"]{ animation-delay: .20s; }
  .gal.is-in .gal__item[data-slot="5"]{ animation-delay: .26s; }
  .gal.is-in .gal__item[data-slot="6"]{ animation-delay: .32s; }
  .gal.is-in .gal__item[data-slot="7"]{ animation-delay: .38s; }

  .gal.is-filtering .gal__item:not([hidden]){
    animation: gallery-filter-in .34s var(--ease) both;
  }

  .gal .gal__item::before{
    transition: transform .32s var(--ease), background-color .32s var(--ease), border-color .32s var(--ease);
  }

  .gal .gal__item:hover::before{
    transform: translateY(-3px);
    background: color-mix(in oklch, var(--champagne) 30%, var(--night));
    border-color: color-mix(in oklch, var(--champagne) 55%, transparent);
  }

  .gal .gal__cap::before{
    transform-origin: left;
    transition: transform .35s var(--ease);
  }

  .gal .gal__item:hover .gal__cap::before{
    transform: scaleX(1.65);
  }
}

@keyframes hero-cinema{
  from{ filter: saturate(.9) contrast(1.03); }
  to{ filter: saturate(1.04) contrast(1.08); }
}

@keyframes shade-breathe{
  from{ opacity: .92; }
  to{ opacity: 1; }
}

@keyframes hero-chip-in{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: none; }
}

@keyframes title-mask-in{
  from{ opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(20px); }
  to{ opacity: 1; clip-path: inset(0); transform: none; }
}

@keyframes scroll-line{
  0%, 100%{ transform: translateY(-4px); opacity: .55; }
  50%{ transform: translateY(5px); opacity: 1; }
}

@keyframes soft-ring{
  0%, 100%{ filter: drop-shadow(0 0 0 color-mix(in oklch, var(--champagne) 0%, transparent)); }
  50%{ filter: drop-shadow(0 0 12px color-mix(in oklch, var(--champagne) 55%, transparent)); }
}

@keyframes sheen{
  from{ transform: skewX(-18deg) translateX(-120%); }
  to{ transform: skewX(-18deg) translateX(480%); }
}

@keyframes gallery-tile-in{
  from{
    opacity: 0;
    transform: translateY(18px) scale(.985);
    clip-path: inset(12% 0 0 0);
  }
  to{
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
}

@keyframes gallery-filter-in{
  from{ opacity: 0; transform: translateY(8px) scale(.992); }
  to{ opacity: 1; transform: none; }
}

/* Construction timeline */
.build-timeline{
  position: relative;
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  border: 1px solid color-mix(in oklch, var(--on-night) 16%, transparent);
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--white) 7%, transparent), transparent 44%),
    color-mix(in oklch, var(--night-2) 42%, transparent);
  box-shadow: 0 30px 90px -68px oklch(0.02 0.01 260 / .9);
  overflow: hidden;
}

.build-timeline::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--on-night) 7%, transparent) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(0deg, color-mix(in oklch, var(--on-night) 5%, transparent) 1px, transparent 1px) 0 0 / 96px 96px;
  opacity: .34;
}

.build-timeline__head{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid color-mix(in oklch, var(--on-night) 12%, transparent);
}

.build-timeline__head span{
  color: var(--champagne);
  font-size: .74rem;
  text-transform: uppercase;
}

.build-timeline__head strong{
  max-width: 34ch;
  color: var(--on-night);
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.1;
  text-align: right;
}

.build-timeline__rail{
  position: absolute;
  left: clamp(1.2rem, 2.2vw, 1.8rem);
  right: clamp(1.2rem, 2.2vw, 1.8rem);
  top: clamp(8.2rem, 10vw, 9.6rem);
  height: 1px;
  background: color-mix(in oklch, var(--on-night) 16%, transparent);
}

.build-timeline__rail span{
  display: block;
  width: 58%;
  height: 100%;
  background: linear-gradient(90deg, var(--champagne), var(--copper));
  box-shadow: 0 0 22px color-mix(in oklch, var(--champagne) 25%, transparent);
}

.build-timeline__list{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  background: color-mix(in oklch, var(--on-night) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--on-night) 12%, transparent);
}

.build-step{
  position: relative;
  min-height: 245px;
  padding: 1.35rem 1.15rem 1.2rem;
  background: color-mix(in oklch, var(--night) 78%, var(--night-2));
  overflow: hidden;
}

.build-step::before{
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: color-mix(in oklch, var(--on-night) 16%, transparent);
}

.build-step--done::before{
  background: linear-gradient(90deg, var(--champagne), var(--copper));
}

.build-step--active::before{
  height: 4px;
  background: linear-gradient(90deg, var(--champagne), var(--copper), var(--champagne));
  background-size: 180% 100%;
  animation: timeline-scan 2.8s ease-in-out infinite;
}

.build-step--next::before{
  background: color-mix(in oklch, var(--on-night) 12%, transparent);
}

.build-step__pin{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.1rem;
}

.build-step__pin::after{
  content: "";
  width: 34px;
  height: 1px;
  background: color-mix(in oklch, var(--on-night) 24%, transparent);
}

.build-step__pin span{
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid color-mix(in oklch, var(--on-night) 24%, transparent);
  color: var(--on-night);
  font-family: var(--f-mono);
  font-size: .72rem;
  background: color-mix(in oklch, var(--white) 5%, transparent);
}

.build-step--done .build-step__pin span{
  border-color: color-mix(in oklch, var(--champagne) 62%, transparent);
  background: color-mix(in oklch, var(--champagne) 13%, transparent);
  color: var(--champagne);
}

.build-step--active .build-step__pin span{
  border-color: var(--champagne);
  color: var(--night);
  background: var(--champagne);
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--champagne) 10%, transparent);
}

.build-step__body{
  display: grid;
  gap: .55rem;
}

.build-step__date{
  color: var(--champagne);
  font-size: .72rem;
}

.build-step--next .build-step__date{
  color: color-mix(in oklch, var(--on-night) 58%, transparent);
}

.build-step h3{
  color: var(--on-night);
  font-size: clamp(1.12rem, 1.4vw, 1.45rem);
  line-height: 1.12;
}

.build-step p{
  max-width: none;
  margin: 0;
  color: color-mix(in oklch, var(--on-night) 72%, transparent);
  font-size: .9rem;
  line-height: 1.55;
}

.build-step--next{
  opacity: .74;
}

@keyframes timeline-scan{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

@media (min-width: 981px){
  .build-timeline.is-in .build-step{
    animation: timeline-card-in .72s var(--ease) both;
  }

  .build-timeline.is-in .build-step:nth-child(2){ animation-delay: .05s; }
  .build-timeline.is-in .build-step:nth-child(3){ animation-delay: .10s; }
  .build-timeline.is-in .build-step:nth-child(4){ animation-delay: .15s; }
  .build-timeline.is-in .build-step:nth-child(5){ animation-delay: .20s; }
  .build-timeline.is-in .build-step:nth-child(6){ animation-delay: .25s; }
  .build-timeline.is-in .build-step:nth-child(7){ animation-delay: .30s; }
  .build-timeline.is-in .build-step:nth-child(8){ animation-delay: .35s; }
}

@keyframes timeline-card-in{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: none; }
}

@media (max-width: 980px){
  .build-timeline__head{
    display: grid;
    align-items: start;
  }

  .build-timeline__head strong{
    text-align: left;
  }

  .build-timeline__rail{
    left: calc(clamp(1.2rem, 2.2vw, 1.8rem) + 1.2rem);
    right: auto;
    top: 8rem;
    bottom: 1.8rem;
    width: 1px;
    height: auto;
  }

  .build-timeline__rail span{
    width: 100%;
    height: 58%;
    background: linear-gradient(180deg, var(--champagne), var(--copper));
  }

  .build-timeline__list{
    display: grid;
    grid-template-columns: 1fr;
    background: transparent;
    border: 0;
    gap: .7rem;
  }

  .build-step{
    min-height: auto;
    padding: 1.1rem 1rem 1.1rem 4.15rem;
    border: 1px solid color-mix(in oklch, var(--on-night) 12%, transparent);
  }

  .build-step__pin{
    position: absolute;
    left: .95rem;
    top: 1rem;
    margin: 0;
  }

  .build-step__pin::after{
    display: none;
  }
}

/* Interactive construction timeline */
.build-timeline--interactive{
  --timeline-line: color-mix(in oklch, var(--on-night) 13%, transparent);
  --timeline-panel: color-mix(in oklch, var(--night-2) 74%, var(--night));
  --timeline-panel-hot: color-mix(in oklch, var(--champagne) 16%, var(--night-2));
  margin-top: clamp(2.4rem, 5vw, 4.6rem);
  padding: 0;
  border: 1px solid var(--timeline-line);
  border-radius: 0;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in oklch, var(--champagne) 15%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in oklch, var(--white) 7%, transparent), transparent 42%),
    var(--night);
  box-shadow: 0 38px 120px -74px oklch(0.02 0.01 260 / .96);
  isolation: isolate;
}

.build-timeline--interactive::before{
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--on-night) 8%, transparent) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(0deg, color-mix(in oklch, var(--on-night) 6%, transparent) 1px, transparent 1px) 0 0 / 72px 72px;
  opacity: .28;
}

.build-timeline--interactive::after{
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  left: clamp(1.1rem, 2.6vw, 2.2rem);
  width: min(360px, 34vw);
  height: 1px;
  background: linear-gradient(90deg, var(--champagne), var(--copper), transparent);
  box-shadow: 0 0 28px color-mix(in oklch, var(--champagne) 36%, transparent);
}

.build-timeline--interactive .build-timeline__head{
  padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1.1rem, 2.6vw, 2.2rem);
  border-bottom: 0;
}

.build-timeline--interactive .build-timeline__head span{
  color: var(--champagne);
  font-size: .76rem;
}

.build-timeline--interactive .build-timeline__head strong{
  max-width: 31ch;
  color: var(--on-night);
  font-size: clamp(1.35rem, 2.2vw, 2.1rem);
  text-align: right;
}

.build-timeline__progress{
  position: relative;
  z-index: 1;
  height: 2px;
  margin-inline: clamp(1.1rem, 2.6vw, 2.2rem);
  background: color-mix(in oklch, var(--on-night) 12%, transparent);
  overflow: hidden;
}

.build-timeline__progress span{
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--champagne), var(--copper), var(--champagne));
  background-size: 180% 100%;
  box-shadow: 0 0 26px color-mix(in oklch, var(--champagne) 44%, transparent);
  transition: width .58s var(--ease);
  animation: timeline-scan 2.9s ease-in-out infinite;
}

.build-timeline__shell{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(390px, 1.04fr);
  min-height: clamp(440px, 45vw, 590px);
  margin-top: clamp(1.1rem, 2.2vw, 1.8rem);
  background: var(--timeline-line);
  border-top: 1px solid var(--timeline-line);
}

.build-timeline__panel{
  position: relative;
  min-height: inherit;
  padding: clamp(1.45rem, 3vw, 2.8rem);
  overflow: hidden;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--champagne) 16%, transparent) 1px, transparent 1px) 0 0 / 112px 112px,
    linear-gradient(0deg, color-mix(in oklch, var(--on-night) 7%, transparent) 1px, transparent 1px) 0 0 / 112px 112px,
    radial-gradient(circle at 90% 12%, color-mix(in oklch, var(--champagne) 17%, transparent), transparent 31%),
    linear-gradient(145deg, var(--timeline-panel-hot), var(--timeline-panel) 48%, var(--night));
}

.build-timeline__panel::before,
.build-timeline__panel::after{
  content: "";
  position: absolute;
  pointer-events: none;
}

.build-timeline__panel::before{
  inset: 1.2rem;
  border: 1px solid color-mix(in oklch, var(--on-night) 10%, transparent);
}

.build-timeline__panel::after{
  right: -8%;
  bottom: -18%;
  width: 48%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in oklch, var(--champagne) 16%, transparent);
  transform: rotate(45deg);
}

.timeline-detail{
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(1.2rem, 3vw, 2.4rem);
}

.timeline-detail[hidden]{
  display: none;
}

.timeline-detail__meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.timeline-detail__status,
.timeline-detail__index{
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  border: 1px solid color-mix(in oklch, var(--on-night) 18%, transparent);
  padding: .55rem .8rem;
  color: var(--on-night-soft);
  font-size: .72rem;
  text-transform: uppercase;
  background: color-mix(in oklch, var(--white) 5%, transparent);
}

.timeline-detail__status{
  color: var(--champagne);
  border-color: color-mix(in oklch, var(--champagne) 36%, transparent);
}

.timeline-detail--done .timeline-detail__status{
  color: color-mix(in oklch, var(--ok) 72%, var(--champagne));
}

.timeline-detail--active .timeline-detail__status{
  color: var(--night);
  border-color: var(--champagne);
  background: var(--champagne);
}

.timeline-detail__date{
  display: block;
  margin-bottom: clamp(.85rem, 1.6vw, 1.3rem);
  color: var(--champagne);
  font-size: clamp(1rem, 1.8vw, 1.55rem);
}

.timeline-detail h3{
  max-width: 12ch;
  color: var(--on-night);
  font-size: clamp(2.2rem, 5vw, 5.6rem);
  line-height: .94;
}

.timeline-detail p{
  max-width: 42ch;
  margin: clamp(1rem, 2vw, 1.6rem) 0 0;
  color: var(--on-night-soft);
  font-size: clamp(.98rem, 1.2vw, 1.12rem);
  line-height: 1.68;
}

.timeline-detail.is-active .timeline-detail__meta,
.timeline-detail.is-active .timeline-detail__date,
.timeline-detail.is-active h3,
.timeline-detail.is-active p{
  animation: timeline-panel-in .54s var(--ease) both;
}

.timeline-detail.is-active .timeline-detail__date{ animation-delay: .04s; }
.timeline-detail.is-active h3{ animation-delay: .08s; }
.timeline-detail.is-active p{ animation-delay: .14s; }

.build-timeline__nav{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--timeline-line);
  max-height: clamp(440px, 45vw, 590px);
  overflow: auto;
}

.timeline-node{
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: .36rem .82rem;
  min-height: 136px;
  padding: clamp(1rem, 1.65vw, 1.35rem);
  border: 0;
  border-radius: 0;
  appearance: none;
  color: var(--on-night);
  text-align: left;
  cursor: pointer;
  background: color-mix(in oklch, var(--night-2) 86%, var(--night));
  overflow: hidden;
  transition: background-color .26s var(--ease), color .26s var(--ease), transform .32s var(--ease), opacity .26s var(--ease), box-shadow .26s var(--ease);
}

.timeline-node::before,
.timeline-node::after{
  content: "";
  position: absolute;
  pointer-events: none;
}

.timeline-node::before{
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(180deg, var(--champagne), var(--copper));
  transition: width .3s var(--ease);
}

.timeline-node::after{
  inset: 0;
  opacity: 0;
  background: linear-gradient(115deg, transparent 0 42%, color-mix(in oklch, var(--champagne) 18%, transparent) 50%, transparent 58% 100%);
  transform: translateX(-120%);
  transition: transform .72s var(--ease), opacity .26s var(--ease);
}

.timeline-node:hover,
.timeline-node:focus-visible{
  background: color-mix(in oklch, var(--champagne) 10%, var(--night-2));
  transform: translateY(-2px);
}

.timeline-node:hover::before,
.timeline-node:focus-visible::before,
.timeline-node.is-active::before{
  width: 4px;
}

.timeline-node:hover::after,
.timeline-node:focus-visible::after,
.timeline-node.is-active::after{
  opacity: .72;
  transform: translateX(120%);
}

.timeline-node:focus-visible{
  outline: 1px solid var(--champagne);
  outline-offset: -4px;
}

.timeline-node.is-active{
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--champagne) 22%, var(--night-2)), color-mix(in oklch, var(--copper) 12%, var(--night)));
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--champagne) 42%, transparent);
}

.timeline-node__dot{
  position: relative;
  z-index: 1;
  grid-row: 1 / 3;
  width: 10px;
  height: 10px;
  margin-top: .36rem;
  border: 1px solid color-mix(in oklch, var(--on-night) 42%, transparent);
  background: transparent;
  transition: background-color .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), transform .28s var(--ease);
}

.timeline-node--done .timeline-node__dot{
  border-color: var(--champagne);
  background: var(--champagne);
}

.timeline-node--active .timeline-node__dot{
  border-color: var(--champagne);
  background: var(--copper);
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--champagne) 10%, transparent);
  animation: timeline-dot-pulse 1.7s ease-in-out infinite;
}

.timeline-node.is-active .timeline-node__dot{
  transform: scale(1.35);
  background: var(--champagne);
  border-color: var(--champagne);
  box-shadow: 0 0 0 7px color-mix(in oklch, var(--champagne) 12%, transparent);
}

.timeline-node__date,
.timeline-node__title{
  position: relative;
  z-index: 1;
}

.timeline-node__date{
  color: var(--champagne);
  font-size: .7rem;
  text-transform: uppercase;
}

.timeline-node--next .timeline-node__date{
  color: color-mix(in oklch, var(--on-night) 58%, transparent);
}

.timeline-node__title{
  color: color-mix(in oklch, var(--on-night) 90%, transparent);
  font-weight: 650;
  font-size: clamp(.95rem, 1.14vw, 1.08rem);
  line-height: 1.18;
}

.timeline-node.is-active .timeline-node__title{
  color: var(--on-night);
}

@keyframes timeline-panel-in{
  from{
    opacity: 0;
    transform: translateY(18px);
    clip-path: inset(16% 0 0 0);
  }
  to{
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
}

@keyframes timeline-dot-pulse{
  0%, 100%{
    box-shadow: 0 0 0 5px color-mix(in oklch, var(--champagne) 9%, transparent);
  }
  50%{
    box-shadow: 0 0 0 11px color-mix(in oklch, var(--champagne) 0%, transparent);
  }
}

@media (min-width: 981px){
  .build-timeline--interactive.is-in .timeline-node{
    animation: timeline-card-in .58s var(--ease) both;
  }

  .build-timeline--interactive.is-in .timeline-node:nth-child(2){ animation-delay: .04s; }
  .build-timeline--interactive.is-in .timeline-node:nth-child(3){ animation-delay: .08s; }
  .build-timeline--interactive.is-in .timeline-node:nth-child(4){ animation-delay: .12s; }
  .build-timeline--interactive.is-in .timeline-node:nth-child(5){ animation-delay: .16s; }
  .build-timeline--interactive.is-in .timeline-node:nth-child(6){ animation-delay: .20s; }
  .build-timeline--interactive.is-in .timeline-node:nth-child(7){ animation-delay: .24s; }
  .build-timeline--interactive.is-in .timeline-node:nth-child(8){ animation-delay: .28s; }
}

@media (max-width: 1100px){
  .build-timeline__shell{
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .build-timeline__panel{
    min-height: clamp(420px, 54vw, 520px);
  }

  .build-timeline__nav{
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    max-height: none;
    overflow-x: auto;
  }
}

@media (max-width: 700px){
  .build-timeline--interactive .build-timeline__head{
    display: grid;
    align-items: start;
    gap: .8rem;
  }

  .build-timeline--interactive .build-timeline__head strong{
    text-align: left;
  }

  .build-timeline__progress{
    margin-inline: clamp(1rem, 5vw, 1.2rem);
  }

  .build-timeline__panel{
    min-height: 390px;
    padding: 1.1rem;
  }

  .build-timeline__panel::before{
    inset: .7rem;
  }

  .timeline-detail h3{
    font-size: clamp(2rem, 13vw, 3.5rem);
  }

  .timeline-detail__meta{
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .build-timeline__nav{
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .timeline-node{
    min-height: 104px;
  }
}

/* Video-only hero */
.hero.hero--video-only{
  min-height: 100svh;
  padding: 0;
}

.hero.hero--video-only .hero__media{
  position: absolute;
  inset: 0;
}

.hero.hero--video-only .hero__media::after{
  display: none;
}

.hero.hero--video-only .hero__media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transform: none;
  animation: none;
}

/* Mobile page scroll lock */
@media (max-width: 980px){
  html,
  body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  main{
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }
}