/* =====================================================
   VALIA — Dubai Creek Harbour
   Light theme: warm paper base, deep navy accent sections
   ===================================================== */

:root{
  --ink:#0B1F30;
  --ink-2:#102B3F;
  --ink-3:#17364A;
  --paper:#F2EEE6;
  --paper-2:#E8E2D8;
  --white:#FBFAF7;
  --gold:#B8955E;
  --gold-l:#E0CEA8;
  --text:#172633;
  --muted:#69747B;
  --line:rgba(11,31,48,.16);
  --line-soft:rgba(11,31,48,.10);
  --line-light:rgba(255,255,255,.18);
  --serif:"Cormorant Garamond",Garamond,Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --wrap:1520px;
  --pad:clamp(20px,5vw,60px);
  --header:72px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--text);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.75;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--gold);color:var(--white)}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(64px,10vw,132px) 0}

/* ---------- type ---------- */
.display{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,5vw,4.1rem);line-height:1.06;letter-spacing:-.025em;
}
.eyebrow{
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin-bottom:1.3rem;
}
.lead{font-size:clamp(1.02rem,1.35vw,1.18rem);color:var(--text);line-height:1.75}
p{color:var(--muted)}
p+p{margin-top:1.1rem}
.rule{width:52px;height:1px;background:var(--gold);margin:1.8rem 0}

.sec-head{max-width:760px;margin-bottom:clamp(2.4rem,5vw,3.8rem)}
.sec-head__sub{margin-top:1.3rem;font-size:1.02rem;max-width:58ch}

/* ---------- ink sections (deep navy) ---------- */
.ink-section{background:var(--ink);color:var(--white)}
.ink-section p{color:rgba(255,255,255,.62)}
.ink-section .lead{color:rgba(255,255,255,.86)}
.ink-section .eyebrow{color:var(--gold-l)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1.05em 2.2em;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:400;border:1px solid transparent;transition:.4s var(--ease);
  cursor:pointer;font-family:var(--sans);text-align:center;
}
.btn--gold{background:var(--gold);color:var(--white)}
.btn--gold:hover{background:#A5834E}
.btn--ghost{border-color:var(--line);color:var(--text)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.ink-section .btn--ghost,.hero .btn--ghost{border-color:rgba(255,255,255,.34);color:var(--white)}
.btn--sm{padding:.85em 1.6em;font-size:.64rem}
.btn--block{width:100%}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;color:#fff;
  transition:.45s var(--ease);border-bottom:1px solid rgba(255,255,255,.16);
}
.nav.scrolled{
  background:rgba(251,250,247,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--text);border-bottom-color:var(--line-soft);
}
.nav.hide{transform:translateY(-100%)}
.nav__inner{max-width:1520px;margin:0 auto;padding:1.05rem var(--pad);display:flex;align-items:center;justify-content:space-between;gap:2rem}

.brand{display:flex;align-items:center;flex:none}
.brand img{width:auto;height:46px;transition:filter .45s var(--ease)}
/* logo artwork is white — darken it once the nav flips to the paper background */
.nav.scrolled .brand img{filter:brightness(0) opacity(.88)}
.foot .brand img{height:54px}

.nav__links{display:flex;gap:2rem}
.nav__links a{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;position:relative;padding:4px 0;opacity:.8;transition:opacity .3s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .4s var(--ease)}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{width:100%}

.nav__cta{display:flex;align-items:center;gap:1.3rem}
.nav__tel{font-size:.74rem;letter-spacing:.1em;opacity:.85}
.nav__tel:hover{color:var(--gold);opacity:1}

.burger{display:none;background:none;border:0;width:32px;height:24px;position:relative;cursor:pointer}
.burger span{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:.35s var(--ease)}
.burger span:first-child{top:7px}
.burger span:last-child{bottom:7px}
.burger.open span:first-child{top:11px;transform:rotate(45deg)}
.burger.open span:last-child{bottom:12px;transform:rotate(-45deg)}

/* ---------- drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:880;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;justify-content:center;padding:6rem var(--pad) 3rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);
}
.drawer.open{clip-path:inset(0 0 0 0)}
.drawer__links{display:flex;flex-direction:column}
.drawer__links a{
  font-family:var(--serif);font-size:clamp(1.65rem,6vw,2.4rem);font-weight:400;
  padding:.45rem 0;border-bottom:1px solid var(--line-light);
  opacity:0;transform:translateY(14px);transition:opacity .45s,transform .45s,color .3s;
}
.drawer.open .drawer__links a{opacity:1;transform:none}
.drawer__links a:hover{color:var(--gold-l)}
.drawer__foot{margin-top:2.4rem;display:flex;flex-direction:column;gap:.3rem}
.drawer__foot a{color:var(--gold-l);letter-spacing:.1em}
.drawer__foot span{font-size:.7rem;letter-spacing:.12em;color:rgba(255,255,255,.5)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;overflow:hidden;background:var(--ink);color:#fff}
.hero__media,.hero__media picture,.hero__media img,.hero__shade{position:absolute;inset:0;width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:38% 50%}
/* neutral, not blue — darkens only where the copy and nav sit,
   leaving the render's own colour intact across the right side */
.hero__shade{
  background:
    linear-gradient(100deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.40) 34%,rgba(0,0,0,0) 62%),
    linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 24%);
}
.hero__grid{
  position:relative;z-index:2;width:100%;
  padding:calc(var(--header) + 4rem) var(--pad) 6rem;
  display:grid;align-items:center;
  max-width:1520px;margin:0 auto;
}
.hero__copy{max-width:52rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.3rem}

.kicker{margin:0 0 1.4rem;font-size:.64rem;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l)}

.hero__title{font-family:var(--serif);font-weight:400;line-height:.9;letter-spacing:-.035em}
.hero__title-main{display:block;font-size:clamp(3.4rem,7.5vw,7.9rem)}
.hero__title-sub{
  display:block;margin-top:.1em;
  font-size:clamp(1.7rem,4.1vw,4.3rem);line-height:1;
  color:var(--gold-l);letter-spacing:-.02em;white-space:nowrap;
}
.hero__intro{max-width:37rem;margin:1.7rem 0 0;color:rgba(255,255,255,.78);font-size:clamp(.95rem,1.3vw,1.15rem);font-weight:400}

.hero__facts{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:2rem}
.hero__facts span{font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.hero__facts span:not(:last-child)::after{content:"·";padding-left:1.4rem;color:var(--gold-l)}

/* glass enquiry card */
.glass-card{
  padding:1.7rem 1.8rem 1.8rem;
  background:rgba(11,31,48,.72);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
  box-shadow:0 24px 70px rgba(4,13,20,.3);
}
.form-index{margin:0 0 .7rem;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l)}
.glass-card h2{margin:0;font-family:var(--serif);font-size:1.85rem;line-height:1.1;font-weight:400;color:#fff}
.glass-card>p:not(.form-index){margin:.6rem 0 1.2rem;color:rgba(255,255,255,.62);font-size:.83rem;line-height:1.6}
.glass-card label{display:block;margin-bottom:.85rem}
.glass-card label span{
  display:block;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:.35rem;
}
.glass-card input,.glass-card select{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.3);
  padding:.55rem 0;color:#fff;font-family:var(--sans);font-size:.92rem;font-weight:400;
  border-radius:0;transition:border-color .35s;
}
.glass-card select{cursor:pointer}
.glass-card select option{background:var(--ink-2);color:#fff}
.glass-card input:focus,.glass-card select:focus{outline:0;border-bottom-color:var(--gold-l)}
.glass-card input.err,.glass-card select.err{border-bottom-color:#E08175}
.glass-card .btn{margin-top:.6rem}
.glass-card .form__msg{color:var(--gold-l)}

.hero__scroll{
  position:absolute;z-index:3;bottom:1.5rem;left:var(--pad);
  display:flex;align-items:center;gap:1rem;color:rgba(255,255,255,.55);
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
}
.hero__scroll i{display:block;width:62px;height:1px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--gold-l);animation:scrollLine 2.2s infinite}
@keyframes scrollLine{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ---------- about (section 02) ---------- */
.about__grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(3rem,7vw,7rem);align-items:center;
}
.about__media{position:relative;margin:0}
/* thin outline offset up-and-right, echoing the reference layout */
.about__media::before{
  content:"";position:absolute;z-index:0;
  top:-26px;right:-26px;bottom:26px;left:26px;
  border:1px solid var(--gold);opacity:.45;pointer-events:none;
}
.about__media img{
  position:relative;z-index:1;width:100%;aspect-ratio:3/4;
  object-fit:cover;object-position:32% 50%;
}

.section-mark{
  display:flex;align-items:center;gap:1.2rem;margin-bottom:1.6rem;
  font-size:.64rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
.section-mark::after{
  content:"";flex:1;max-width:110px;height:1px;background:var(--line);
  transform-origin:left;
}

.about__copy .display+p{margin-top:1.6rem;max-width:52ch;font-size:1.02rem}
.about__stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  margin-top:clamp(2.2rem,4vw,3.2rem);padding-top:clamp(1.8rem,3vw,2.4rem);
  border-top:1px solid var(--line);
}
.about__stats b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1;color:var(--gold);
}
.about__stats b em{font-style:normal;font-size:.62em}
.about__stats span{
  display:block;margin-top:.6rem;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,7vw,6rem)}
.split--narrow{grid-template-columns:.9fr 1.1fr;align-items:start}

.facts{border-top:1px solid var(--line)}
.facts>div{display:flex;justify-content:space-between;gap:1.5rem;padding:.95rem 0;border-bottom:1px solid var(--line-soft)}
.facts dt{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:.35rem;flex:none}
.facts dd{text-align:right;font-size:.98rem}

/* ---------- full bleed image ---------- */
.bleed{position:relative;margin:0}
.bleed img{width:100%;height:clamp(320px,58vh,660px);object-fit:cover}
.bleed figcaption{
  position:absolute;left:var(--pad);bottom:1.1rem;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:rgba(11,31,48,.62);padding:.5rem .9rem;backdrop-filter:blur(6px);
}
.bleed--inset{margin-bottom:clamp(2.5rem,5vw,4rem)}
.bleed--inset img{height:clamp(280px,48vh,540px)}
.bleed--inset figcaption{left:1.1rem}

/* ---------- residences cards ---------- */
.res-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.res-card {
  background: var(--white);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.res-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(4, 13, 20, 0.08);
  border-color: var(--line);
}
.res-card__img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}
.res-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.res-card:hover .res-card__img img {
  transform: scale(1.05);
}
.res-card__body {
  padding: 1.8rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.res-card__head {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1.2rem;
}
.res-card__type {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.res-card__note {
  font-size: 0.65rem;
  color: var(--muted);
}
.res-card__seo {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.res-card__stats {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line-soft);
  padding: 1.2rem 0;
  margin-bottom: 1.2rem;
}
.res-card__stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.res-card__stat:last-child {
  text-align: right;
}
.res-card__val {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--gold);
}
.res-card__lbl {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.res-card__cta {
  background: #C4AF86;
  color: #1A1A1A;
  border: none;
  font-weight: 600;
  padding: 1rem;
}
.res-card__cta:hover {
  background: #B39F7A;
  color: #1A1A1A;
}
.specs__foot{margin-top:1.4rem;font-size:.78rem;color:var(--muted)}

/* ---------- amenities ---------- */
.amen{padding-bottom:clamp(64px,10vw,120px)}
.amen__media img{width:100%;height:clamp(300px,56vh,620px);object-fit:cover}
.amen__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);padding-top:clamp(3rem,6vw,5rem);align-items:start}
.amen__intro .display+p{margin-top:1.5rem}
.amen__list{columns:2;column-gap:2.5rem;border-top:1px solid var(--line-light)}
.amen__list li{
  padding:.85rem 0 .85rem 1.4rem;border-bottom:1px solid var(--line-light);
  font-size:.88rem;color:rgba(255,255,255,.78);position:relative;break-inside:avoid;
}
.amen__list li::before{content:"";position:absolute;left:0;top:1.65rem;width:7px;height:1px;background:var(--gold-l)}

/* ---------- location ---------- */
.loc__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
.near{border-top:1px solid var(--line)}
.near li{padding:1.05rem 0;border-bottom:1px solid var(--line-soft)}
.near b{display:block;font-family:var(--serif);font-size:1.35rem;font-weight:400;line-height:1.2}
.near span{font-size:.85rem;color:var(--muted)}

.drive{border-top:1px solid var(--line)}
.drive li{display:flex;align-items:baseline;gap:.5rem;padding:1rem 0;border-bottom:1px solid var(--line-soft)}
.drive b{font-family:var(--serif);font-size:1.6rem;font-weight:400;color:var(--gold);min-width:2.1ch}
.drive span{font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.drive i{font-style:normal;margin-left:auto;text-align:right;font-size:.92rem}
.loc__map{aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden}
.loc__map iframe{width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05)}

/* ---------- payment ---------- */
.pay__years{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;list-style:none;counter-reset:none}
.pay__years li{
  border:1px solid var(--line-light);padding:1.8rem 1.4rem;
  display:flex;flex-direction:column;gap:.2rem;transition:border-color .4s;
}
.pay__years li:hover{border-color:var(--gold)}
.pay__years b{font-family:var(--serif);font-size:clamp(2rem,3.4vw,3rem);font-weight:400;line-height:1;color:var(--gold-l)}
.pay__years b sup{font-size:.34em;vertical-align:super;opacity:.75}
.pay__years span{margin-top:.7rem;font-size:.8rem;letter-spacing:.18em;color:#fff}
.pay__years i{font-style:normal;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}

.pay__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pay__step{border:1px solid var(--line-light);padding:clamp(1.8rem,3.5vw,2.8rem) 1.9rem;transition:border-color .4s}
.pay__step:hover{border-color:var(--gold)}
.pay__step b{font-family:var(--serif);font-size:clamp(2.6rem,5vw,4rem);font-weight:400;line-height:1;color:var(--gold-l);display:block}
.pay__step b sup{font-size:.34em;vertical-align:super;opacity:.75}
.pay__step h3{font-family:var(--sans);font-weight:400;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;margin:1rem 0 .6rem;color:#fff}
.pay__step p{font-size:.9rem}
.pay__note{margin-top:1.8rem;border-left:2px solid var(--gold);padding:1.2rem 1.7rem;background:var(--ink-2);font-size:.92rem}
.pay__note strong{color:var(--gold-l);font-weight:400}

/* ---------- gallery ---------- */
.gallery{padding:clamp(64px,10vw,120px) 0 clamp(3rem,6vw,4.5rem)}
.gal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  max-width: 100%;
}
.gal-head__text {
  max-width: 760px;
}
.gal-head__arrows {
  display: flex;
  gap: 1rem;
  flex: none;
}
.gal-head__arrows button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: 0.3s var(--ease);
}
.gal-head__arrows button:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}
.gal-head__arrows svg {
  width: 24px;
  height: 24px;
}
.gal__strip{display:flex;gap:1rem;overflow-x:auto;padding:0 var(--pad) 1rem;scroll-snap-type:x mandatory;cursor:grab;scrollbar-width:none}
.gal__strip::-webkit-scrollbar{display:none}
.gal__strip.dragging{cursor:grabbing;scroll-snap-type:none}
.gal__strip figure{flex:0 0 min(76vw,720px);scroll-snap-align:center;position:relative;margin:0}
.gal__strip img{width:100%;aspect-ratio:2/1;object-fit:cover;pointer-events:none}
.gal__strip figcaption{margin-top:.7rem;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.gal__hint{text-align:center;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:1rem}

/* ---------- register ---------- */
.reg{padding:clamp(64px,10vw,130px) 0}
.reg__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.reg__copy p{margin-top:1.5rem;max-width:44ch}
.reg__contact{margin-top:2rem;display:flex;flex-direction:column;gap:.25rem}
.reg__contact a{color:var(--gold-l);font-size:1rem;letter-spacing:.05em}
.reg__contact a:hover{color:#fff}

.form{background:var(--ink-2);border:1px solid var(--line-light);padding:clamp(1.7rem,4vw,2.8rem)}
.form__row{margin-bottom:1.1rem}
.form label{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.5rem}
.form label em{font-style:normal;opacity:.6;text-transform:none;letter-spacing:.08em}
.form input,.form select,.form textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);
  padding:.7rem 0;color:#fff;font-family:var(--sans);font-size:.96rem;font-weight:400;
  transition:border-color .35s;border-radius:0;
}
.form textarea{resize:vertical}
.form select{cursor:pointer}
.form select option{background:var(--ink-2);color:#fff}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-bottom-color:var(--gold-l)}
.form input::placeholder,.form textarea::placeholder{color:rgba(255,255,255,.3)}
.form input.err,.form select.err{border-bottom-color:#E08175}
.form .btn{margin-top:.9rem}
.form__fine{font-size:.66rem;margin-top:.9rem;line-height:1.6}
.form__msg{font-size:.84rem;margin-top:.7rem;min-height:1.2em;color:var(--gold-l)}
.iti{width:100%;display:block}
.iti__country-list{background:var(--ink-2);color:#fff;border:1px solid var(--line-light)}
.iti__country-list .iti__country.iti__highlight{background:rgba(255,255,255,.1)}
.iti__divider{border-bottom:1px solid var(--line-light)}
.iti__dial-code{color:rgba(255,255,255,.5)}
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.modal.open{opacity:1;pointer-events:auto}
.modal__overlay{position:absolute;inset:0;background:rgba(4,13,20,.85);backdrop-filter:blur(4px)}
.modal__content{position:relative;width:90%;max-width:500px;background:var(--ink-2);border:1px solid var(--line-light);padding:clamp(2rem,5vw,3rem);transform:translateY(20px);transition:transform .4s var(--ease);max-height:90vh;overflow-y:auto}
.modal.open .modal__content{transform:translateY(0)}
.modal__close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:#fff;cursor:pointer;padding:.5rem;opacity:.5;transition:opacity .3s}
.modal__close:hover{opacity:1}
.modal__head{margin-bottom:2rem}
.modal__head h3{font-size:2rem;margin-bottom:.5rem;color:#fff}
.modal__head p{font-size:.85rem;color:rgba(255,255,255,.6)}
.modal .form{background:transparent;border:none;padding:0}

/* ---------- sticky cta ---------- */
.sticky-cta{display:none}
@media (max-width:900px){
  .sticky-cta{display:block;position:fixed;bottom:0;left:0;width:100%;padding:1rem var(--pad);background:rgba(4,13,20,.9);backdrop-filter:blur(8px);border-top:1px solid var(--line-light);z-index:999;transform:translateY(100%);opacity:0;transition:transform .4s var(--ease),opacity .4s var(--ease);pointer-events:none}
  .sticky-cta.show{transform:translateY(0);opacity:1;pointer-events:auto}
}
.acc{max-width:860px;border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line-soft)}
.acc summary{
  cursor:pointer;list-style:none;padding:1.35rem 2.5rem 1.35rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.4rem);font-weight:400;transition:color .3s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{
  content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:1.2rem;font-family:var(--sans);font-weight:300;transition:.3s var(--ease);
}
/* ---------- scroll reveal animations ---------- */
.reveal-elem{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-elem.is-visible{opacity:1;transform:translateY(0)}
.acc details[open] summary{color:var(--gold)}
.acc details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.acc p{padding:0 2.5rem 1.5rem 0;max-width:68ch;font-size:.95rem}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#fff;padding:clamp(2.8rem,5vw,4rem) 0 7rem}
.foot__top{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;padding-bottom:2rem;border-bottom:1px solid var(--line-light)}
.foot__links{display:flex;flex-wrap:wrap;gap:1.5rem}
.foot__links a{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;opacity:.75;transition:.3s}
.foot__links a:hover{color:var(--gold-l);opacity:1}
.foot__bar{margin-top:1.8rem;display:flex;flex-direction:column;gap:.7rem}
.foot__bar p{font-size:.72rem;color:rgba(255,255,255,.55)}
.foot__fine{font-size:.64rem!important;opacity:.7;max-width:92ch;line-height:1.7}

/* ---------- whatsapp float ---------- */
.wa-float{
  position:fixed;right:20px;bottom:24px;z-index:860;width:50px;height:50px;border-radius:50%;
  background:#1FA855;color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(4,13,20,.28);transition:.35s var(--ease);
}
.wa-float:hover{transform:translateY(-3px)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- about: scroll choreography ----------
   Start states only apply once JS has armed them (.js-anim on <html>),
   so the section is fully visible without JS or with reduced motion. */
.js-anim .about__media{
  opacity:0;transform:translateY(30px);
  transition:opacity 1.1s var(--ease),transform 1.2s var(--ease);
}
.js-anim .about__media.in{opacity:1;transform:none}

/* the render settles out of a slow push-in */
.js-anim .about__media img{transform:scale(1.09);transition:transform 1.8s var(--ease)}
.js-anim .about__media.in img{transform:scale(1)}

/* the outline slides into its offset position after the image lands */
.js-anim .about__media::before{
  opacity:0;transform:translate(-16px,16px);
  transition:opacity 1s .4s var(--ease),transform 1.2s .4s var(--ease);
}
.js-anim .about__media.in::before{opacity:.45;transform:none}

.js-anim .about__copy .section-mark,
.js-anim .about__copy .display,
.js-anim .about__copy p{
  opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.js-anim .about__copy.in .section-mark{opacity:1;transform:none;transition-delay:.05s}
.js-anim .about__copy.in .display{opacity:1;transform:none;transition-delay:.18s}
.js-anim .about__copy.in p{opacity:1;transform:none;transition-delay:.32s}

/* the hairline draws out from the label */
.js-anim .about__copy .section-mark::after{transform:scaleX(0);transition:transform 1s .45s var(--ease)}
.js-anim .about__copy.in .section-mark::after{transform:scaleX(1)}

.js-anim .about__stats{border-top-color:transparent;transition:border-color .9s .1s linear}
.js-anim .about__stats.in{border-top-color:var(--line)}
.js-anim .about__stats>div{
  opacity:0;transform:translateY(18px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.js-anim .about__stats.in>div{opacity:1;transform:none}
.js-anim .about__stats.in>div:nth-child(1){transition-delay:.10s}
.js-anim .about__stats.in>div:nth-child(2){transition-delay:.22s}
.js-anim .about__stats.in>div:nth-child(3){transition-delay:.34s}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1180px){
  .hero__grid{grid-template-columns:1fr minmax(290px,350px);gap:2.5rem}
}

@media (max-width:1060px){
  .nav__links,.nav__tel{display:none}
  .burger{display:block}
  .about__grid{grid-template-columns:1fr;gap:clamp(2.5rem,8vw,3.5rem)}
  .about__media::before{top:-16px;right:-16px;bottom:16px;left:16px}
  .about__media img{aspect-ratio:4/3}
  .split,.split--narrow,.amen__body,.loc__grid,.reg__grid{grid-template-columns:1fr}
  .pay__grid{grid-template-columns:1fr}
  .res-cards{grid-template-columns:repeat(2,1fr)}
  .pay__years{grid-template-columns:repeat(2,1fr)}
  .pay__years li:first-child{grid-column:span 2}
}

@media (max-width:900px){
  .hero{min-height:auto}
  .hero__grid{
    min-height:100svh;grid-template-columns:1fr;align-content:end;
    padding:calc(var(--header) + 3rem) var(--pad) 2.4rem;gap:2.2rem;
  }
  .hero__copy{padding-top:0;align-self:end}
  .hero__scroll{display:none}
  /* copy is bottom-aligned here, so the scrim has to cover the whole
     lower block — kicker included — not just the last third */
  .hero__shade{
    background:
      linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 18%),
      linear-gradient(0deg,
        rgba(0,0,0,.94) 0%,
        rgba(0,0,0,.88) 22%,
        rgba(0,0,0,.74) 42%,
        rgba(0,0,0,.50) 60%,
        rgba(0,0,0,.22) 78%,
        rgba(0,0,0,0) 100%);
  }
}

@media (max-width:820px){
  body{font-size:15px}
  /* official portrait key visual — shifted up to crop its baked-in wordmark,
     since the text H1 below already carries the name */
  .hero__media img{height:124%;top:-16%;object-position:center top}
  .hero__title-main{font-size:clamp(3rem,15vw,5rem)}
  .hero__title-sub{font-size:clamp(1.25rem,5.6vw,2rem)}
  .hero__intro{font-size:.92rem}
  .hero__facts{gap:.45rem .9rem;margin-top:1.3rem}
  .hero__facts span{font-size:.6rem}
  .hero__facts span:not(:last-child)::after{padding-left:.9rem}

  .res-cards {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .amen__list{columns:1}
  .loc__map{aspect-ratio:16/10}
  .gal__strip figure{flex:0 0 86vw}
  .wa-float{bottom:16px;right:16px;width:46px;height:46px}
  .foot{padding-bottom:clamp(2.5rem,6vw,3.5rem)}
  .foot__top{flex-direction:column;align-items:flex-start}
  .bleed figcaption{left:16px;bottom:.8rem;font-size:.55rem}
  .gal-head{flex-direction:column;align-items:flex-start;gap:1.5rem}
}

@media (max-width:640px){
  .nav__cta{display:none}
}

@media (max-width:480px){
  .facts>div{flex-direction:column;gap:.15rem}
  .facts dd{text-align:left}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}