/* =========================================================
   ORIGINA PEDREGAL — Landing v2
   1. Tokens
   2. Reset & base
   3. Utilities
   4. Motion system
   5. Atoms (eyebrow, btn, tag, link)
   6. Layout blocks (header, hero, sections)
   7. Components
   8. Footer
   9. Responsive
   ========================================================= */

/* ============ 1. TOKENS ============ */
:root{
  /* Color */
  --color-black:#262729;
  --color-black-light:#4B4F54;
  --color-gray-light:#26272924;
  --color-main:#786E4F;
  --color-main-light:#DEDCD6;

  --color-white:#FFFFFF;
  --color-surface:#F3F3F2;
  --color-surface-2:#D2D0CF;
  --color-ink-dark:#0A0A0A;

  /* Typography */
  --font-base:"Montserrat","Helvetica Neue",Arial,sans-serif;

  --fs-h1:clamp(2.6rem, 6.3vw, 6.5rem);           /* → 96px @1534 */
  --fs-h2:clamp(2.125rem, 4.7vw, 4.5rem);         /* → 72px  */
  --fs-h3:clamp(1.375rem, 2.2vw, 1.75rem);        /* → 28px  */
  --fs-lead:clamp(1.375rem, 2.45vw, 2.25rem);     /* → 36px  */
  --fs-body:1.125rem;                             /*   18px  */
  --fs-small:1rem;                                /*   16px  */
  --fs-xs:0.875rem;                               /*   14px  */

  --ls-h1:-0.045em;
  --ls-h2:-0.035em;

  /* Space */
  --space-3xs:.25rem;
  --space-2xs:.5rem;
  --space-xs:.75rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:2rem;
  --space-xl:3rem;
  --space-2xl:4.5rem;
  --space-3xl:7rem;

  --container:1280px;
  --gutter:clamp(1.25rem, 4vw, 2rem);

  /* Shape */
  --radius-sm:.75rem;
  --radius-md:1rem;
  --radius-lg:1.5rem;
  --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(38,39,41,.06), 0 8px 24px rgba(38,39,41,.05);
  --shadow-md:0 24px 60px rgba(38,39,41,.10);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --dur-fast:.35s;
  --dur:.7s;
  --dur-slow:1.1s;

  --header-h:76px;
}

/* ============ 2. RESET & BASE ============ */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);
}

body{
  margin:0;
  font-family:var(--font-base);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:400;
  color:var(--color-black);
  background:var(--color-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%;}
img{height:auto;}

h1,h2,h3,h4,p,figure,dl,dd{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}

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

button,input,select,textarea{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;}

fieldset{margin:0;padding:0;border:0;min-width:0;}
legend{padding:0;}

:focus-visible{outline:2px solid var(--color-main);outline-offset:3px;border-radius:4px;}

/* ============ 3. UTILITIES ============ */
.u-container{
  width:100%;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.u-visually-hidden{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--color-black);color:#fff;
  padding:.75rem 1.25rem;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0;}

/* ============ 4. MOTION SYSTEM ============ */
/* Single reveal primitive + variants. `--d` carries the stagger delay. */
.reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity var(--dur) var(--ease-out-expo) var(--d,0s),
             transform var(--dur) var(--ease-out-expo) var(--d,0s);
}
.reveal.is-visible{opacity:1;transform:none;}

/* Fade only — for elements where movement would fight the layout. */
.reveal--fade{transform:none;}

/* Image mask: the frame wipes open while the photo settles from a slow push-in. */
.reveal--mask{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--dur-slow) var(--ease-out-expo) var(--d,0s);
}
.reveal--mask.is-visible,
.is-visible .reveal--mask{clip-path:inset(0 0 0 0);}
.reveal--mask img{
  transform:scale(1.14);
  transition:transform 1.4s var(--ease-out-expo) var(--d,0s);
}
.reveal--mask.is-visible img,
.is-visible .reveal--mask img{transform:scale(1);}

/* Split text: JS wraps each line; the inner span slides up behind the mask. */
.line{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em;}
.line__i{
  display:block;
  transform:translate3d(0,110%,0);
  transition:transform var(--dur-slow) var(--ease-out-expo) var(--d,0s);
}
.is-visible .line__i,
.line.is-visible .line__i{transform:none;}

/* Defensive: split text must never be the reason content is invisible. */
.reveal[data-split]{opacity:1;transform:none;}
.no-js .reveal,
.no-js .reveal--mask{opacity:1;transform:none;clip-path:none;}
.no-js .line__i{transform:none;}
.no-js .accordion__panel{height:auto;}

/* Scroll-driven parallax layers are moved by JS via this custom property. */
.parallax{will-change:transform;}

/* ============ 5. ATOMS ============ */
.eyebrow{
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--color-black-light);
  margin-bottom:var(--space-md);
}
.eyebrow--light{color:rgba(255,255,255,.82);}

.btn{
  --btn-bg:var(--color-black);
  --btn-fg:#fff;
  --btn-bd:transparent;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:52px;
  padding:0 1.75rem;
  border-radius:var(--radius-pill);
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-size:var(--fs-small);
  font-weight:600;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Fill wipes up from the bottom on hover instead of a flat colour swap. */
.btn::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--btn-hover, transparent);
  transform:translateY(101%);
  transition:transform .45s var(--ease-out-expo);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(38,39,41,.18);}
.btn:hover::before{transform:translateY(0);}
.btn:active{transform:translateY(0);}

.btn--dark{--btn-bg:var(--color-black);--btn-fg:#fff;--btn-hover:#000;}
.btn--light{--btn-bg:#fff;--btn-fg:var(--color-black);--btn-hover:var(--color-main-light);}
.btn--outline{--btn-bg:transparent;--btn-fg:var(--color-black);--btn-bd:var(--color-gray-light);--btn-hover:var(--color-surface);}
.btn--outline:hover{--btn-bd:#26272945;}
.btn--outline-light{--btn-bg:rgba(38,39,41,.28);--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55);--btn-hover:rgba(255,255,255,.18);}
.btn--sm{min-height:44px;padding:0 1.35rem;}

.tag{
  display:inline-block;
  padding:.45rem 1rem;
  border-radius:var(--radius-pill);
  background:var(--color-black);
  color:#fff;
  font-size:.8125rem;
  font-weight:600;
  line-height:1.2;
}

.link-underline{
  position:relative;
  display:inline-block;
  font-size:var(--fs-small);
  font-weight:500;
  padding-bottom:3px;
}
.link-underline::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:currentColor;
  transform-origin:right;
  transition:transform .45s var(--ease-out-expo);
}
.link-underline:hover::after{transform:scaleX(0);transform-origin:left;}

/* ============ 6. LAYOUT BLOCKS ============ */

/* --- Header --- */
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:100;
  background:linear-gradient(90deg,#F0F0F1 0%,#F2F3F6 100%);
  border-bottom:1px solid rgba(38,39,41,.06);
  transform:translateY(0);
  transition:transform .5s var(--ease-out-expo), box-shadow .4s var(--ease);
}
.header--hidden{transform:translateY(-102%);}
.header--scrolled{box-shadow:0 6px 24px rgba(38,39,41,.09);}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  min-height:var(--header-h);
}
.header__logo img{width:auto;height:34px;}
.header__logo{transition:opacity .3s var(--ease);}
.header__logo:hover{opacity:.65;}

.nav{display:flex;align-items:center;gap:var(--space-lg);}
.nav__list{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);}
.nav__link{
  position:relative;
  font-size:var(--fs-small);
  font-weight:500;
  color:var(--color-black);
  padding-block:.5rem;
}
.nav__link::after{
  content:"";
  position:absolute;left:0;bottom:.15rem;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out-expo);
}
.nav__link:hover::after,
.nav__link.is-current::after{transform:scaleX(1);transform-origin:left;}

.header__burger{
  display:none;
  width:44px;height:44px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.header__burger span{
  width:22px;height:1.5px;
  background:var(--color-black);
  transition:transform .35s var(--ease-out-expo), opacity .2s var(--ease);
}
.header__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.header__burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.header__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

/* --- Hero --- */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:clamp(620px,86vh,880px);
  margin-top:var(--header-h);
  padding-block:clamp(3rem,6.5vw,5rem) clamp(1.5rem,3vw,2.5rem);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.hero__media{position:absolute;inset:-8% 0;z-index:-2;}
.hero__media img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.1);
  animation:heroSettle 2.4s var(--ease-out-expo) .1s forwards;
}
@keyframes heroSettle{to{transform:scale(1);}}

.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg, rgba(8,13,26,.78) 0%, rgba(8,13,26,.46) 46%, rgba(8,13,26,.06) 78%),
    linear-gradient(180deg, rgba(8,13,26,.34) 0%, rgba(8,13,26,0) 32%, rgba(8,13,26,.5) 100%);
}
.hero__inner{flex:1;display:flex;align-items:center;}
.hero__content{max-width:min(66vw, 1050px);}

.hero__title{
  font-size:var(--fs-h1);
  font-weight:400;
  line-height:.98;
  letter-spacing:var(--ls-h1);
  /* Narrower than the copy block so the headline breaks after "Residencias de". */
  max-width:min(55vw, 900px);
  margin-bottom:var(--space-sm);
}
.hero__lead{
  font-size:var(--fs-lead);
  font-weight:300;
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom:var(--space-md);
}
.hero__text{
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  color:rgba(255,255,255,.86);
  max-width:820px;
  margin-bottom:var(--space-lg);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-sm);}

.hero__statsWrap{position:relative;}
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding-top:var(--space-md);
}
.stats::before{
  content:"";
  position:absolute;top:0;left:var(--gutter);right:var(--gutter);
  height:1px;
  background:rgba(255,255,255,.32);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.2s var(--ease-out-expo) .2s;
}
.stats.is-visible::before{transform:scaleX(1);}
.stats__item{
  display:flex;
  align-items:baseline;
  gap:var(--space-sm);
  padding-inline:var(--space-md);
}
.stats__item:first-child{padding-left:0;}
.stats__item + .stats__item{border-left:1px solid rgba(255,255,255,.24);}
.stats__num{font-size:var(--fs-xs);color:rgba(255,255,255,.55);letter-spacing:.06em;}
.stats__label{font-size:var(--fs-small);color:#fff;}

/* --- Section shells --- */
.section{
  position:relative;
  padding-block:clamp(3.5rem,8vw,7rem);
}
.section--surface{background:var(--color-surface);}
.section--dark{background:var(--color-ink-dark);color:#fff;isolation:isolate;}

.section__head{margin-bottom:clamp(2rem,4.5vw,3.5rem);}
.section__head--row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-lg);
  flex-wrap:wrap;
}
.section__title{
  font-size:var(--fs-h2);
  font-weight:400;
  line-height:1.06;
  letter-spacing:var(--ls-h2);
  max-width:21ch;
}
.section__title--light{color:#fff;}

.section__actions{
  display:flex;
  justify-content:center;
  margin-top:clamp(2rem,4vw,3rem);
}

/* --- Slider nav --- */
.slider-nav{display:flex;gap:var(--space-xs);}
.slider-nav__btn{
  position:relative;
  display:grid;
  place-items:center;
  width:48px;height:48px;
  border-radius:var(--radius-pill);
  border:1px solid var(--color-gray-light);
  color:var(--color-black);
  overflow:hidden;
  isolation:isolate;
  transition:border-color .35s var(--ease), color .35s var(--ease), opacity .35s var(--ease);
}
.slider-nav__btn::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--color-black);
  transform:scale(0);
  border-radius:inherit;
  transition:transform .45s var(--ease-out-expo);
}
.slider-nav__btn svg{width:20px;height:20px;transition:transform .35s var(--ease-out-expo);}
.slider-nav__btn:hover{border-color:var(--color-black);color:#fff;}
.slider-nav__btn:hover::before{transform:scale(1);}
.js-proto-next:hover svg{transform:translateX(3px);}
.js-proto-prev:hover svg{transform:translateX(-3px);}
.slider-nav__btn.is-disabled{opacity:.3;pointer-events:none;}

/* ============ 7. COMPONENTS ============ */

/* --- Specs (ficha técnica) --- */
.specs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--color-gray-light);
}
.specs__item{padding:var(--space-md) var(--space-lg);}
.specs__item:first-child{padding-left:0;}
.specs__item + .specs__item{border-left:1px solid var(--color-gray-light);}
.specs__label{
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-black-light);
  margin-bottom:var(--space-2xs);
}
.specs__value{
  font-size:clamp(1.125rem,1.6vw,1.375rem);
  font-weight:400;
  line-height:1.25;
}

/* --- Feature card (amenidades) --- */
.feature{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--color-white);
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .5s var(--ease-out-expo), box-shadow .5s var(--ease);
}
.feature:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(38,39,41,.13);}
.feature__media{
  aspect-ratio:12/11;
  overflow:hidden;
  background:var(--color-surface-2);
}
.feature__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1s var(--ease-out-expo);
}
.feature:hover .feature__media img{transform:scale(1.06);}
.feature__body{padding:var(--space-md) var(--space-md) var(--space-lg);}
.feature__index{
  font-size:var(--fs-xs);
  color:var(--color-black-light);
  margin-bottom:var(--space-sm);
}
.feature__title{
  font-size:var(--fs-h3);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.01em;
  margin-bottom:var(--space-xs);
}
.feature__text{
  font-size:var(--fs-small);
  line-height:1.65;
  color:var(--color-black-light);
}

/* --- Steps (numbered rows) --- */
.steps{display:flex;flex-direction:column;gap:var(--space-sm);}
.steps__item{
  display:grid;
  grid-template-columns:clamp(140px,19vw,290px) 1fr;
  align-items:center;
  gap:var(--space-md);
  padding:clamp(1.5rem,4.1vw,4rem) clamp(1.5rem,4.4vw,4.25rem);
  background:var(--color-surface);
  border-radius:var(--radius-md);
  transition:background-color .45s var(--ease), transform .45s var(--ease-out-expo);
}
.steps__item:hover{background:#EDEDEB;transform:translateX(6px);}
.steps--white .steps__item{background:var(--color-white);}
.steps--white .steps__item:hover{background:#FAFAF9;}
.steps__num{
  font-size:clamp(3.25rem,9.65vw,9.25rem);
  font-weight:300;
  line-height:.78;
  letter-spacing:-.04em;
  color:var(--color-black);
}
.steps__title{
  font-size:clamp(1.375rem,2.75vw,2.625rem);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.025em;
  margin-bottom:var(--space-xs);
}
.steps__text{
  font-size:var(--fs-small);
  line-height:1.65;
  color:var(--color-black-light);
  max-width:730px;
}
.steps__text--lg{
  font-size:var(--fs-body);
  color:var(--color-black);
}

/* --- Gallery --- */
.gallery{overflow:hidden;}
.gallery__bg{position:absolute;inset:-10% 0;z-index:-2;}
.gallery__bg img{width:100%;height:100%;object-fit:cover;}
.gallery::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(10,10,10,.34) 0%, rgba(10,10,10,.26) 100%);
}
.gallery__grid{
  display:grid;
  grid-template-columns:1.75fr 1fr;
  grid-template-rows:repeat(2,1fr);
  gap:var(--space-sm);
  height:clamp(420px,52vw,660px);
}
.gallery__figure{
  overflow:hidden;
  border-radius:var(--radius-md);
  background:rgba(255,255,255,.06);
}
.gallery__figure--main{grid-row:span 2;}
.gallery__figure img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease-out-expo);
}
.gallery__figure:hover img{transform:scale(1.05);}

/* --- Prototipos --- */
.js-swiper-proto{overflow:hidden;}
.js-swiper-proto .swiper-slide{height:auto;}

.proto{
  display:grid;
  grid-template-columns:1.58fr 1fr 1.68fr;
  gap:var(--space-md);
  height:clamp(520px,44vw,660px);
}
.proto__media{
  overflow:hidden;
  border-radius:var(--radius-md);
  background:var(--color-surface-2);
  margin:0;
  min-height:0;
}
.proto__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease-out-expo);
}
.proto:hover .proto__media img{transform:scale(1.04);}

.proto__aside{
  display:grid;
  grid-template-rows:minmax(150px,.29fr) 1fr;
  gap:var(--space-md);
  min-height:0;
}
.proto__rooms{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-content:center;
  align-items:center;
  column-gap:var(--space-sm);
  padding:var(--space-lg) var(--space-md);
  background:var(--color-surface);
  border-radius:var(--radius-md);
}
.proto__roomsIcon{
  grid-row:span 2;
  display:grid;
  place-items:center;
  width:46px;height:46px;
  border-radius:var(--radius-pill);
  background:#fff;
}
.proto__roomsIcon img{width:22px;height:auto;}
.proto__roomsNum{
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:400;
  line-height:1;
  letter-spacing:-.03em;
}
.proto__roomsLabel{
  font-size:var(--fs-small);
  color:var(--color-black-light);
}

.proto__card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:clamp(1.25rem,2vw,1.75rem);
  background:var(--color-surface-2);
  border-radius:var(--radius-md);
  overflow-y:auto;
}
.proto__name{
  font-size:clamp(1.9rem,3.9vw,3.75rem);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.035em;
  margin-top:var(--space-sm);
}
.proto__place{
  font-size:1.0625rem;
  color:var(--color-black-light);
  margin-top:var(--space-3xs);
}
.proto__priceLabel{
  font-size:clamp(1.25rem,1.85vw,1.75rem);
  font-weight:500;
  line-height:1.2;
  margin-top:var(--space-md);
}
.proto__price{
  font-size:clamp(1.9rem,3.35vw,3.2rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.035em;
}
.proto__note{
  font-size:var(--fs-xs);
  color:var(--color-black-light);
  margin-top:var(--space-3xs);
}
.proto__specs{
  width:100%;
  margin-top:var(--space-md);
  border-top:1px solid rgba(38,39,41,.14);
}
.proto__specs li{
  padding-block:.6rem;
  border-bottom:1px solid rgba(38,39,41,.14);
  font-size:1.0625rem;
  color:var(--color-black);
}
.proto__card .link-underline{margin-top:auto;padding-top:var(--space-md);}

/* --- Glass cards (experiencia) --- */
.split{overflow:hidden;}
.split__bg{position:absolute;inset:-10% 0;z-index:-2;}
.split__bg img{width:100%;height:100%;object-fit:cover;}
.split::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(12,8,20,.72) 0%, rgba(12,8,20,.42) 52%, rgba(12,8,20,.22) 100%);
}
.split__inner{
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:clamp(2rem,5.5vw,5rem);
  align-items:center;
}
.split__lead{
  font-size:var(--fs-small);
  line-height:1.7;
  color:rgba(255,255,255,.82);
  max-width:52ch;
  margin-block:var(--space-md) var(--space-lg);
}
.split__list{display:flex;flex-direction:column;gap:var(--space-md);}

.glass-card{
  padding:clamp(1.25rem,2.2vw,1.75rem);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);
  background:rgba(20,18,24,.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:transform .5s var(--ease-out-expo), background-color .5s var(--ease), border-color .5s var(--ease);
}
.glass-card:hover{
  transform:translateY(-6px);
  background:rgba(20,18,24,.66);
  border-color:rgba(255,255,255,.3);
}
.glass-card__num{
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.55);
  margin-bottom:var(--space-sm);
}
.glass-card__title{
  font-size:clamp(1.25rem,2.1vw,1.625rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.02em;
  margin-bottom:var(--space-2xs);
}
.glass-card__text{
  font-size:var(--fs-small);
  line-height:1.6;
  color:rgba(255,255,255,.72);
}

/* --- FAQ --- */
.faq{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:clamp(2rem,6vw,6rem);
  align-items:start;
}
.faq__head{margin-bottom:0;}
.faq__head .section__title{max-width:11ch;}
.faq__list{display:flex;flex-direction:column;}

.accordion{border-top:1px solid var(--color-gray-light);}
.accordion:last-child{border-bottom:1px solid var(--color-gray-light);}
.accordion__heading{margin:0;font-size:inherit;font-weight:inherit;}
.accordion__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-md);
  width:100%;
  padding-block:clamp(1.15rem,2vw,1.5rem);
  text-align:left;
  font-size:var(--fs-small);
  font-weight:500;
  transition:color .3s var(--ease);
}
.accordion__trigger:hover{color:var(--color-main);}
.accordion__icon{
  position:relative;
  flex:none;
  width:16px;height:16px;
  transition:transform .5s var(--ease-out-expo);
}
.accordion__icon::before,
.accordion__icon::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:14px;height:1.4px;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:opacity .3s var(--ease);
}
.accordion__icon::after{transform:translate(-50%,-50%) rotate(90deg);}
.accordion__trigger[aria-expanded="true"] .accordion__icon{transform:rotate(180deg);}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after{opacity:0;}

/* Height is driven by JS so the panel can ease open instead of snapping. */
.accordion__panel{
  height:0;
  overflow:hidden;
  transition:height .55s var(--ease-out-expo);
}
.accordion__panelInner{padding-bottom:var(--space-md);}
.accordion__panel p{
  font-size:var(--fs-small);
  line-height:1.7;
  color:var(--color-black-light);
  max-width:62ch;
}

/* --- Form section --- */
.formsec{overflow:hidden;padding-block:clamp(3.5rem,7vw,6rem);}
.formsec__bg{position:absolute;inset:-10% 0;z-index:-2;}
.formsec__bg img{width:100%;height:100%;object-fit:cover;}
.formsec::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(8,10,8,.72) 0%, rgba(8,10,8,.34) 58%, rgba(8,10,8,.16) 100%);
}
.formsec__inner{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.formsec__text .section__title{max-width:12ch;}
.formsec__lead{
  font-size:var(--fs-small);
  line-height:1.7;
  color:rgba(255,255,255,.82);
  max-width:46ch;
  margin-top:var(--space-md);
}

.form-card{
  background:var(--color-white);
  color:var(--color-black);
  border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.5rem);
  box-shadow:var(--shadow-md);
}
.form-card__progress{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  margin-bottom:var(--space-md);
}
.progress{
  position:relative;
  flex:1;
  height:3px;
  border-radius:var(--radius-pill);
  background:var(--color-gray-light);
  overflow:hidden;
}
.progress__bar{
  display:block;
  height:100%;
  width:50%;
  border-radius:var(--radius-pill);
  background:var(--color-main);
  transition:width .6s var(--ease-out-expo);
}
.form-card__count{
  font-size:var(--fs-xs);
  color:var(--color-black-light);
}

.tabs{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-sm);
  margin-bottom:var(--space-lg);
}
.tabs__item{
  padding:var(--space-sm) var(--space-md);
  border:1px solid var(--color-gray-light);
  border-radius:var(--radius-sm);
  background:var(--color-white);
  transition:background-color .4s var(--ease), border-color .4s var(--ease);
}
.tabs__item.is-active{
  background:var(--color-surface);
  border-color:rgba(38,39,41,.45);
}
.tabs__title{display:block;font-size:var(--fs-small);font-weight:600;}
.tabs__sub{display:block;font-size:var(--fs-small);color:var(--color-black-light);}

.form__step{display:none;}
.form__step.is-active{display:block;animation:stepIn .55s var(--ease-out-expo) both;}
@keyframes stepIn{
  from{opacity:0;transform:translateX(18px);}
  to{opacity:1;transform:none;}
}

.form__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--space-md);
}
.field{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0;}
.field--full{grid-column:1 / -1;}
.field__label{font-size:var(--fs-small);font-weight:600;}
.field__input{
  width:100%;
  min-height:56px;
  padding:0 1rem;
  border:1px solid var(--color-gray-light);
  border-radius:var(--radius-sm);
  background:var(--color-white);
  font-size:var(--fs-small);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field__input::placeholder{color:#9A9C9E;}
.field__input:focus{
  outline:none;
  border-color:var(--color-black);
  box-shadow:0 0 0 3px rgba(38,39,41,.08);
}
.field__selectWrap{position:relative;}
.field__selectWrap::after{
  content:"";
  position:absolute;right:1.1rem;top:50%;
  width:8px;height:8px;
  border-right:1.5px solid var(--color-black-light);
  border-bottom:1.5px solid var(--color-black-light);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.field__input--select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:2.75rem;
  color:var(--color-black);
  cursor:pointer;
}
.field__input--select:invalid{color:#9A9C9E;}

.field__error{
  font-size:var(--fs-xs);
  color:#B3261E;
  min-height:0;
}
.field.has-error .field__input{border-color:#B3261E;}
.field.has-error{animation:shake .4s var(--ease);}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  75%{transform:translateX(5px);}
}

.check{
  display:flex;
  align-items:center;
  gap:var(--space-2xs);
  margin-top:var(--space-md);
  cursor:pointer;
  font-size:var(--fs-small);
}
.check__input{position:absolute;opacity:0;width:1px;height:1px;}
.check__box{
  flex:none;
  display:grid;place-items:center;
  width:18px;height:18px;
  border:1px solid var(--color-black-light);
  border-radius:4px;
  background:#fff;
  transition:background-color .3s var(--ease), border-color .3s var(--ease);
}
.check__box::after{
  content:"";
  width:9px;height:5px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);
  transition:transform .3s var(--ease-out-expo);
}
.check__input:checked + .check__box{background:var(--color-black);border-color:var(--color-black);}
.check__input:checked + .check__box::after{transform:rotate(-45deg) scale(1);}
.check__input:focus-visible + .check__box{outline:2px solid var(--color-main);outline-offset:2px;}

.choice{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md);}
.choice__option{
  position:relative;
  display:grid;
  place-items:center;
  min-height:56px;
  border:1px solid var(--color-gray-light);
  border-radius:var(--radius-sm);
  font-size:var(--fs-small);
  cursor:pointer;
  transition:border-color .3s var(--ease), background-color .3s var(--ease);
}
.choice__option input{position:absolute;opacity:0;inset:0;cursor:pointer;}
.choice__option:hover{border-color:rgba(38,39,41,.45);}
.choice__option:has(input:checked){
  border-color:var(--color-black);
  background:var(--color-surface);
  font-weight:600;
}

.form__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:var(--space-sm);
  margin-top:var(--space-lg);
}
.form__success{
  margin-top:var(--space-md);
  padding:var(--space-md);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  font-size:var(--fs-small);
  animation:stepIn .55s var(--ease-out-expo) both;
}

/* ============ 8. FOOTER ============ */
.footer{
  background:var(--color-ink-dark);
  color:#fff;
  padding-block:clamp(2.5rem,5vw,4rem);
}
.footer__inner{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr .9fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
}
.footer__logo{
  width:auto;height:34px;
  filter:brightness(0) invert(1);
  margin-bottom:var(--space-md);
}
.footer__copy{font-size:var(--fs-small);color:rgba(255,255,255,.72);}

.footer__nav{display:contents;}
.footer__list{display:flex;flex-direction:column;gap:var(--space-sm);}
.footer__list a{
  position:relative;
  display:inline-block;
  font-size:var(--fs-small);
  color:rgba(255,255,255,.88);
  transition:color .3s var(--ease), transform .4s var(--ease-out-expo);
}
.footer__list a:hover{color:#fff;transform:translateX(4px);}

.footer__creditLabel{font-size:var(--fs-small);color:rgba(255,255,255,.72);}
.footer__creditName{font-size:var(--fs-small);font-weight:700;}

/* ============ 9. RESPONSIVE ============ */
@media (max-width:1100px){
  .proto{grid-template-columns:1.35fr 1fr 1.7fr;}
  .footer__inner{grid-template-columns:1fr 1fr;}
  .footer__brand{grid-column:1 / -1;}
  .split__inner{grid-template-columns:1fr 1fr;}
}

@media (max-width:900px){
  :root{--fs-body:1rem;}

  .header__burger{display:flex;}
  .nav{
    position:absolute;
    top:100%;left:0;right:0;
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-md);
    padding:var(--space-md) var(--gutter) var(--space-lg);
    background:#F1F1F2;
    border-bottom:1px solid rgba(38,39,41,.08);
    box-shadow:var(--shadow-sm);
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s var(--ease), transform .35s var(--ease-out-expo), visibility .35s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none;}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;}
  .nav__link{display:block;padding-block:.85rem;border-bottom:1px solid rgba(38,39,41,.08);}
  .nav__link::after{display:none;}
  .nav__cta{width:100%;}

  .hero{min-height:auto;padding-block:clamp(2.5rem,10vw,4rem) var(--space-lg);}
  .hero__inner{padding-block:var(--space-xl) var(--space-2xl);}
  .hero__actions .btn{flex:1 1 auto;}

  .stats{grid-template-columns:1fr;gap:var(--space-xs);}
  .stats__item{padding-inline:0;}
  .stats__item + .stats__item{border-left:0;border-top:1px solid rgba(255,255,255,.18);padding-top:var(--space-xs);}

  .section__title{max-width:none;}

  .specs{grid-template-columns:repeat(2,1fr);}
  .specs__item{padding:var(--space-md) var(--space-sm);}
  .specs__item:nth-child(odd){padding-left:0;border-left:0;}
  .specs__item:nth-child(n+3){border-top:1px solid var(--color-gray-light);}

  .steps__item{grid-template-columns:1fr;gap:var(--space-2xs);align-items:start;}
  .steps__item:hover{transform:none;}

  .gallery__grid{
    grid-template-columns:1fr;
    grid-template-rows:1.4fr 1fr 1fr;
    height:auto;
    min-height:520px;
  }
  .gallery__figure--main{grid-row:auto;}

  /* Stacked layout puts white copy over the lighter side of the photo,
     so the dark sections switch to a top-down overlay on small screens. */
  .split::before{background:linear-gradient(180deg, rgba(12,8,20,.84) 0%, rgba(12,8,20,.6) 100%);}
  .formsec::before{background:linear-gradient(180deg, rgba(8,10,8,.84) 0%, rgba(8,10,8,.6) 100%);}
  .gallery::before{background:linear-gradient(180deg, rgba(10,10,10,.5) 0%, rgba(10,10,10,.4) 100%);}

  .split__inner{grid-template-columns:1fr;}
  .faq{grid-template-columns:1fr;}
  .faq__head .section__title{max-width:none;}

  .formsec__inner{grid-template-columns:1fr;}
  .formsec__text .section__title{max-width:none;}

  .footer__inner{grid-template-columns:1fr 1fr;}
  .footer__credit{grid-column:1 / -1;}
}

@media (max-width:768px){
  .proto{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto;
    height:auto;
    gap:var(--space-sm);
  }
  .proto__media{aspect-ratio:3/4;}
  .proto__aside{grid-template-rows:auto 1fr;gap:var(--space-sm);}
  .proto__media--small{aspect-ratio:auto;min-height:140px;}
  .proto__card{grid-column:1 / -1;overflow:visible;}

  .slider-nav{width:100%;justify-content:flex-start;}

  .form__grid{grid-template-columns:1fr;}
  .tabs{grid-template-columns:1fr;}
  .form__actions{justify-content:stretch;}
  .form__actions .btn{flex:1 1 auto;}
}

@media (max-width:560px){
  :root{--ls-h1:-0.03em;--ls-h2:-0.025em;}
  .proto{grid-template-columns:1fr;}
  .proto__media{aspect-ratio:16/11;}
  .proto__rooms{padding:var(--space-md);}
  .footer__inner{grid-template-columns:1fr;}
}

/* Only genuinely intrusive motion is gated — micro-interactions stay on,
   because Windows ships reduced-motion ON in many default setups. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero__media img{animation:none;transform:none;}
  .parallax{transform:none !important;}
  .reveal--mask img{transition:none;transform:none;}
}