/* MRC Landmarks — original palette, radii, shadows and motion restored.
   Regenerate pages with gen_mrc.py after editing shared markup. */

:root {
  --text:        #1A2A2D;
  --text-body:   #4A5450;
  --text-muted:  #8A8D82;
  --text-light:  #B0B3A8;
  --bg:          #F7F5EF;
  --bg-alt:      #EEF1EC;
  --white:       #FFFFFF;
  --border:      #E4E2DA;
  --border-teal: rgba(23,106,112,0.1);
  --teal:        #176A70;
  --teal-mid:    #1A8085;
  --teal-deep:   #12474C;
  --teal-pale:   #E2EDEB;
  --gold:        #C4A97D;
  --gold-light:  #EDE4D4;
  --terra:       #B8755D;
  --terra-pale:  #F5ECE7;

  --font-d: 'Instrument Sans', system-ui, sans-serif;
  --font-b: 'Inter', system-ui, sans-serif;

  --r: 20px;  --r-sm: 12px;  --r-btn: 14px;

  --shadow-sm: 0 2px 16px rgba(23,106,112,0.04);
  --shadow-md: 0 4px 28px rgba(23,106,112,0.06);
  --shadow-lg: 0 8px 44px rgba(23,106,112,0.08);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: clamp(3rem, 5vw, 4.5rem);
  --gut: clamp(1.25rem, 4vw, 3rem);
  --max: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }   /* clip, not hidden: keeps the sticky header working everywhere */
body { font-family: var(--font-b); font-size: 16px; line-height: 1.7; color: var(--text-body); background: var(--bg); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
section { padding-block: var(--pad); }
.alt { background: var(--bg-alt); }

/* ---------------- motion ---------------- */
/* Hidden only once JS confirms it can reveal them again. Without this guard a
   script failure leaves the whole page invisible. */
html.js .reveal { opacity: 0; transform: translateY(30px); }
.reveal { opacity: 1; transform: none; }
html.js .reveal.in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
html.js .rule.reveal { opacity: 1; transform: scaleX(0); transform-origin: left; }
html.js .rule.reveal.in { transform: scaleX(1); transition: transform .9s var(--ease) .15s; }
html.js .pic.reveal { opacity: 1; transform: none; clip-path: inset(0 100% 0 0 round var(--r)); }
html.js .pic.reveal.in { clip-path: inset(0 0 0 0 round var(--r)); transition: clip-path 1.1s var(--ease); }
html.js .pic.reveal img { transform: scale(1.12); }
html.js .pic.reveal.in img { transform: none; transition: transform 1.4s var(--ease); }
.d1.in { transition-delay: .08s } .d2.in { transition-delay: .16s } .d3.in { transition-delay: .24s } .d4.in { transition-delay: .32s }

@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 30px rgba(23,106,112,.12), 0 8px 32px rgba(23,106,112,.08); }
  50%     { box-shadow: 0 0 50px rgba(23,106,112,.25), 0 12px 44px rgba(23,106,112,.15); }
}
@keyframes floatCue { 0%,100% { transform: translateY(0) } 50% { transform: translateY(6px) } }

/* ---------------- type ---------------- */
.display { font-family: var(--font-d); font-weight: 600; line-height: 1.08; letter-spacing: -0.03em; color: var(--text); text-wrap: balance; }
h1.display { font-size: clamp(2.6rem, 6.2vw, 4.6rem); }
h2.display { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-family: var(--font-d); font-size: 1.15rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.eyebrow { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); font-weight: 600; margin-bottom: 1.1rem; }
.lede { font-size: 1.08rem; color: var(--text-body); max-width: 60ch; }
.rule { width: 56px; height: 3px; background: var(--gold); border-radius: 2px; margin-bottom: 1.6rem; }

/* ---------------- buttons ---------------- */
.btn { display: inline-flex; align-items: center; gap: .55rem; padding: 1rem 2rem; border-radius: var(--r-btn);
  font-family: var(--font-d); font-size: .95rem; font-weight: 600; border: 1.5px solid transparent; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, box-shadow .4s, transform .4s var(--ease); }
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: left .6s var(--ease); pointer-events: none; }
.btn:hover::after { left: 120%; }
.btn:hover { transform: translateY(-3px); }
.btn-gold { background: var(--gold); color: var(--text); }
.btn-gold:hover { background: #d3bb95; box-shadow: 0 10px 32px rgba(196,169,125,.4); }
.btn-ink { background: var(--teal); color: #fff; }
.btn-ink:hover { background: var(--teal-mid); box-shadow: 0 10px 32px rgba(23,106,112,.32); }
.btn-out { border-color: var(--teal); color: var(--teal); background: transparent; }
.btn-out:hover { background: var(--teal); color: #fff; box-shadow: 0 10px 32px rgba(23,106,112,.25); }
.btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn-gold-out { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn-gold-out:hover { background: var(--gold); color: var(--text); box-shadow: 0 10px 32px rgba(196,169,125,.35); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------------- header ---------------- */
.topbar { background: var(--teal-deep); color: rgba(255,255,255,.72); font-size: .78rem; letter-spacing: .03em; }
.topbar .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: .65rem; flex-wrap: wrap; }
.topbar a { transition: color .3s; } .topbar a:hover { color: var(--gold); }
.topbar .sep { display: inline-block; margin-inline: .8rem; opacity: .4; }

header.site { position: sticky; top: 0; z-index: 50; background: rgba(247,245,239,.88); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
header.site .wrap { display: flex; align-items: center; gap: 1.5rem; padding-block: .6rem; }
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { height: 70px; width: auto; transition: height .35s var(--ease), transform .4s var(--ease); }
.brand:hover img { transform: scale(1.04); }
.scrolled .brand img { height: 54px; }
footer .brand img { height: 72px; content: url('mrc-logo-white.svg'); }   /* white logo on the teal footer */
.brand .mark { width: 46px; height: 46px; border-radius: 50%; background: var(--white); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-sm); transition: transform .4s var(--ease); }
.brand:hover .mark { transform: scale(1.06); }
.brand .mark img { width: 34px; height: 34px; }
.brand .name { font-family: var(--font-d); color: var(--text); font-weight: 700; letter-spacing: .16em; font-size: .92rem; }
.brand .tag { color: var(--teal); font-size: .67rem; letter-spacing: .12em; }
nav.main { display: flex; gap: 1.6rem; }
nav.main a { font-family: var(--font-d); color: var(--text-body); font-size: .88rem; font-weight: 500; padding-block: .3rem; position: relative; transition: color .3s; }
nav.main a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); border-radius: 2px; transition: width .3s var(--ease); }
nav.main a:hover { color: var(--teal); }
nav.main a:hover::after, nav.main a[aria-current]::after { width: 100%; }
header.site .btn { padding: .7rem 1.5rem; font-size: .85rem; }
header.site .btn .short { display: none; }
header.site .wrap, .brand .mark { transition: padding .35s var(--ease), width .35s var(--ease), height .35s var(--ease); }
.scrolled header.site .wrap { padding-block: .45rem; }
.scrolled header.site { box-shadow: var(--shadow-md); }
.menu-btn { display: none; background: none; border: 0; color: var(--text); padding: .5rem; }

/* ---------------- hero ---------------- */
.hero { position: relative; min-height: 90vh; display: flex; align-items: flex-end;
  padding-block: clamp(1.25rem,2.5vw,2rem) clamp(2.5rem,5vw,4rem);   /* copy rides just under the header */
  background: linear-gradient(180deg, rgba(18,71,76,.76) 0%, rgba(18,71,76,.28) 32%, rgba(26,42,45,.78) 66%, rgba(26,42,45,.96) 100%); color: #fff; }
.hero h1.display { color: #fff; max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--teal-mid); }
.hero .eyebrow { color: rgba(255,255,255,.78); }
.hero p.sub { margin-top: 1.6rem; max-width: 48ch; font-size: 1.1rem; color: rgba(255,255,255,.85); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.4rem; }
.hero-stats { display: flex; flex-wrap: wrap; gap: clamp(2rem,6vw,4.5rem); margin-top: 3.2rem; padding-top: 2.1rem; border-top: 1px solid rgba(255,255,255,.22); }
.hero-stats .n { font-family: var(--font-d); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--gold); }
.hero-stats .l { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-top: .5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.1rem; }
.chip { font-size: .74rem; letter-spacing: .09em; text-transform: uppercase; padding: .48rem 1.05rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85); transition: background .3s, border-color .3s; }
.chip:hover { background: rgba(255,255,255,.12); border-color: var(--gold); }
.cue { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); text-align: center; }
.cue span { font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cue svg { margin: .5rem auto 0; animation: floatCue 2.4s ease-in-out infinite; }

/* ---------------- blocks ---------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,6vw,5rem); align-items: start; }
.split .right { padding-top: .5rem; }
/* a rounded teal bar inside the page margins; cells fill it so the hover reaches the rounded ends */
.band { background: var(--bg); color: #fff; padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.band .grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid var(--teal-deep); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); }
.band .cell { background: var(--teal-deep); padding: clamp(1.2rem, 2.2vw, 1.7rem) 1.4rem; transition: background .4s; }
.band .cell:hover { background: var(--teal); }
.band .n { font-family: var(--font-d); font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.2rem); color: var(--gold); line-height: 1; }
.band .l { margin-top: .55rem; font-size: .8rem; color: rgba(255,255,255,.7); line-height: 1.45; }

.step, .duo .card, .post, .citycard, .contact-card, .stack .row {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-sm);
  transition: box-shadow .4s, transform .4s var(--ease), border-color .4s; }
.step:hover, .duo .card:hover, .post:hover, .citycard:hover, .contact-card:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--border-teal); }

.steps { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(1.6rem,3vw,2.4rem); margin-top: 3.4rem; }
.step { padding: clamp(1.8rem,3vw,2.5rem); display: flex; flex-direction: column; }
.step .num { font-family: var(--font-d); font-weight: 700; font-size: 2.6rem; color: var(--gold-light); line-height: 1; margin-bottom: 1rem; }
.step h3 { margin-bottom: .7rem; }
.step p { font-size: .96rem; }
.step .metrics { display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; margin-top: auto; padding-top: 1.6rem; }
.step .metrics .v { font-family: var(--font-d); font-weight: 600; color: var(--teal); }
.step .metrics .k { font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-muted); margin-top: .2rem; }

.why { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.2rem,2.5vw,2rem); margin-top: 3.4rem; }
.why article { background: var(--teal-deep); color: rgba(255,255,255,.82); border-radius: var(--r); padding: 1.8rem; border-top: 3px solid var(--gold); box-shadow: var(--shadow-sm); transition: box-shadow .4s, transform .4s var(--ease), background .4s; }
.why article h3 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.why article p { color: rgba(255,255,255,.82); }
.why article:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); background: var(--teal); }
.why h3 { margin-bottom: .6rem; } .why p { font-size: .94rem; }

.locations { background: var(--teal-deep); color: #fff; }
.locations .eyebrow { color: var(--gold); }
.locations .display { color: #fff; }
.locations .lede { color: rgba(255,255,255,.78); }
.cities { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.cities a { padding: .65rem 1.4rem; border-radius: 999px; font-size: .9rem; border: 1px solid rgba(255,255,255,.26); transition: all .3s var(--ease); }
.cities a:hover, .cities a.on { background: var(--gold); color: var(--text); border-color: var(--gold); transform: translateY(-2px); }
.featured { margin-top: 3rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r);
  padding: clamp(1.9rem,4vw,2.8rem); display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 2rem; align-items: center; animation: glowPulse 4s ease-in-out infinite; }
.featured .place { font-family: var(--font-d); font-weight: 600; font-size: 1.9rem; line-height: 1.1; }
.featured .place span { display: block; font-size: .72rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: .45rem; }
.featured .f-n { font-family: var(--font-d); font-weight: 700; font-size: 1.7rem; color: var(--gold); line-height: 1; }
.featured .f-l { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: .4rem; }

.trust-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1rem,2vw,1.5rem); margin-top: 3.2rem; }
.trust-grid .t { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 1.7rem; display: flex; gap: 1rem; align-items: flex-start; transition: box-shadow .4s, transform .4s var(--ease); }
.trust-grid .t:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.tick { width: 22px; height: 22px; flex-shrink: 0; margin-top: .15rem; }
.trust-grid .t strong { display: block; font-family: var(--font-d); font-size: .98rem; color: var(--text); }
.trust-grid .t span { font-size: .86rem; color: var(--text-muted); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,2.4rem); }
.duo .card { padding: clamp(2rem,4vw,3rem); display: flex; flex-direction: column; }
.duo .card p { margin-block: .9rem 2rem; font-size: .97rem; }
.duo .card .btn { align-self: flex-start; margin-top: auto; }

.posts { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.4rem,3vw,2.2rem); margin-top: 3.4rem; }
.post { padding: 2rem; display: block; }
.post .k { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--terra); font-weight: 600; }
.post h3 { margin-block: .9rem .6rem; line-height: 1.35; }
.post p { font-size: .92rem; }
.post .go { display: inline-block; margin-top: 1.4rem; font-size: .87rem; color: var(--teal); font-weight: 600; transition: transform .3s var(--ease); }
.post:hover .go { transform: translateX(4px); }

.closing { position: relative; color: #fff; text-align: center; overflow: hidden;
  background: linear-gradient(to bottom, rgba(18,71,76,0) calc(100% - 3rem), var(--teal-deep)), radial-gradient(ellipse 70% 90% at 50% 110%, rgba(196,169,125,.22), transparent 60%), linear-gradient(160deg, var(--teal-deep), #0c3033); }
/* the lotus from the logo, faint in gold, anchored bottom-right */
.closing::before { content: ""; position: absolute; left: 0; right: -6%; bottom: 0; aspect-ratio: 2800 / 720; pointer-events: none;
  background: url('lotus-mark.svg') right bottom / 100% auto no-repeat; }   /* the drawing is 2800 wide: the flower at the right, the stem all the way to the left edge */
/* Our Approach: the closing sits on the survey-at-sunrise photo instead of the lotus */
.closing.v-approach { background: linear-gradient(to bottom, rgba(18,71,76,0) calc(100% - 3rem), var(--teal-deep)), linear-gradient(180deg, rgba(12,48,51,.72), rgba(12,48,51,.62)), url('closing-approach.jpg') center 55% / cover no-repeat; }
.closing.v-approach::before { display: none; }
/* About: the meeting corner — two chairs, coffee, the hill through the window */
.closing.v-about { background: linear-gradient(to bottom, rgba(18,71,76,0) calc(100% - 3rem), var(--teal-deep)), linear-gradient(180deg, rgba(12,48,51,.74), rgba(12,48,51,.66)), url('closing-about.jpg') center 60% / cover no-repeat; }
.closing.v-about::before { display: none; }
/* Knowledge Hub: the plan held up against the land */
.closing.v-hub { background: linear-gradient(to bottom, rgba(18,71,76,0) calc(100% - 3rem), var(--teal-deep)), linear-gradient(180deg, rgba(12,48,51,.74), rgba(12,48,51,.66)), url('closing-hub.jpg') center 40% / cover no-repeat; }
.closing.v-hub::before { display: none; }
.closing.v-project { background: linear-gradient(to bottom, rgba(18,71,76,0) calc(100% - 3rem), var(--teal-deep)), linear-gradient(180deg, rgba(12,48,51,.72), rgba(12,48,51,.64)), url('closing-project.jpg') center 62% / cover no-repeat; }
.closing.v-project::before { display: none; }
.closing.v-projects { background: linear-gradient(to bottom, rgba(18,71,76,0) calc(100% - 3rem), var(--teal-deep)), linear-gradient(180deg, rgba(12,48,51,.74), rgba(12,48,51,.66)), url('closing-projects.jpg') center 38% / cover no-repeat; }
.closing.v-projects::before { display: none; }
.closing > .wrap { position: relative; }
.closing .display { color: #fff; } .closing .eyebrow { color: var(--gold); }
.closing p { color: rgba(255,255,255,.8); margin: 1.5rem auto 0; max-width: 54ch; }
.closing .hero-cta { justify-content: center; }

/* ---------------- interior ---------------- */
.pagehead { background: linear-gradient(140deg, var(--teal-deep) 0%, var(--teal) 100%); color: #fff; padding-block: clamp(3.5rem,7vw,5.5rem) clamp(3rem,6vw,4.5rem); }
/* rich head: the homepage hero's language — deep teal, a gold glow low on the right, big title rising in */
.pagehead.rich { position: relative; overflow: hidden; min-height: 52vh; display: flex; align-items: flex-end;
  background: radial-gradient(ellipse 55% 75% at 88% 115%, rgba(196,169,125,.28), transparent 62%), linear-gradient(160deg, var(--teal-deep), #0c3033); }
.pagehead.rich .crumb { color: var(--gold); letter-spacing: .22em; font-weight: 600; }
.pagehead.rich .crumb a { color: rgba(255,255,255,.55); }
.pagehead.rich .rule { background: var(--gold); }
.pagehead.rich .display { font-size: clamp(2.6rem, 5vw, 4.4rem); max-width: 16ch; text-shadow: 0 1px 2px rgba(0,0,0,.22); }
.pagehead.rich p { font-size: 1.12rem; }
.pagehead.rich.img::before { background: linear-gradient(180deg, rgba(12,48,51,.45) 0%, rgba(12,48,51,.6) 45%, rgba(12,48,51,.96) 100%); }
.pagehead .display { color: #fff; max-width: 20ch; }
.pagehead p { margin-top: 1.3rem; max-width: 56ch; color: rgba(255,255,255,.82); font-size: 1.05rem; }
.pagehead .soon { display: inline-block; margin-left: .6rem; padding: .3rem .8rem; border-radius: 999px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--text); background: var(--gold); vertical-align: middle; }
.crumb { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 1.4rem; }
.crumb a { transition: color .3s; } .crumb a:hover { color: var(--gold); }

.stack { display: grid; gap: clamp(1.4rem,3vw,2rem); margin-top: 3rem; }
.stack .row { padding: clamp(1.9rem,4vw,2.8rem); display: grid; grid-template-columns: 92px 1fr; gap: clamp(1.2rem,3vw,2.4rem); align-items: start; }
.stack .row { background: var(--teal-deep); color: rgba(255,255,255,.82); border-color: transparent; }
.stack .row:hover { background: var(--teal); }
.stack .row .num { font-family: var(--font-d); font-weight: 700; font-size: 2.8rem; color: var(--gold); line-height: .9; }
.stack .row h3 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.stack .row p { color: rgba(255,255,255,.82); }
.stack .row svg { stroke: var(--gold) !important; }
.stack .row h3 { margin-bottom: .7rem; font-size: 1.3rem; }
.stack .row p { max-width: 64ch; }

.citycards { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,2.5vw,2rem); margin-top: 3rem; }
.citycard { padding: 2rem; }
.citycard h3 { font-size: 1.6rem; }
.citycard .meta { margin-top: .8rem; font-size: .86rem; color: var(--text-muted); }
.citycard .go { display: inline-block; margin-top: 1.3rem; font-size: .87rem; color: var(--teal); font-weight: 600; transition: transform .3s var(--ease); }
.citycard:hover .go { transform: translateX(4px); }

/* ---------------- prose ---------------- */
.prose { max-width: 74ch; margin-inline: auto; }
.prose h2 { font-family: var(--font-d); font-weight: 600; font-size: clamp(1.5rem,3vw,2rem); letter-spacing: -.02em; color: var(--text); margin: 2.8rem 0 .9rem; line-height: 1.18; }
.prose h3 { margin: 2rem 0 .6rem; }
.prose p { margin-bottom: 1.15rem; }
.prose ul, .prose ol { margin: 0 0 1.3rem 1.15rem; }
.prose li { margin-bottom: .5rem; padding-left: .3rem; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .92rem; }
.prose th, .prose td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.prose th { background: var(--white); font-family: var(--font-d); font-weight: 600; color: var(--text); }
.table-wrap { overflow-x: auto; }
.prose blockquote { margin: 1.8rem 0; padding: 1.3rem 1.6rem; background: var(--teal-deep); color: rgba(255,255,255,.9); border-left: 4px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-family: var(--font-d); font-size: 1.02rem; line-height: 1.6; box-shadow: var(--shadow-md); }
.prose blockquote .k { display: block; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: .45rem; }
.prose blockquote strong { color: #fff; }
.prose blockquote p:last-child { margin-bottom: 0; }
.faq-section { margin-top: 3rem; }
.faq-item { border-bottom: 1px solid var(--border); padding: 1.3rem 0; }
.faq-item h3, .faq-question { font-size: 1rem; margin: 0 0 .5rem; }
.faq-answer, .faq-answer-inner { color: var(--text-body); font-size: .95rem; }
.article-disclaimer { margin-top: 3rem; padding: 1.4rem 1.6rem; background: var(--terra-pale); border-radius: var(--r-sm); font-size: .87rem; }

/* ---------------- facts / contact ---------------- */
.facts { margin-top: 2.6rem; border-top: 1px solid var(--border); }
.fact { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; padding: 1.15rem 0; border-bottom: 1px solid var(--border); transition: background .3s; }
.fact:hover { background: var(--white); }
.fact dt { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.fact dd { margin: 0; color: var(--text); }
.notice { margin-top: 2.4rem; padding: 1.4rem 1.6rem; background: var(--gold-light); border-radius: var(--r-sm); }
.notice strong { display: block; margin-bottom: .4rem; font-family: var(--font-d); color: var(--text); }
.notice p { margin: 0; font-size: .93rem; }
.contact-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(1.2rem,2.5vw,2rem); margin-top: 3rem; }
.contact-card { padding: 1.9rem; }
.contact-card { background: var(--teal-deep); border-color: transparent; }
.contact-card .k { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.contact-card .v { margin-top: .7rem; font-family: var(--font-d); font-size: 1.05rem; font-weight: 600; color: #fff; }
.contact-card .v a { color: #fff; }
.contact-card .n { margin-top: .4rem; font-size: .86rem; color: rgba(255,255,255,.66); }
.centred { text-align: center; max-width: 48ch; margin-inline: auto; }
.centred .hero-cta { justify-content: center; }

/* ---------------- footer ---------------- */
footer.site { background: var(--teal-deep); color: rgba(255,255,255,.68); padding-block: var(--pad) 2.5rem; }
footer.site .brand .name { color: #fff; }
footer.site .brand .tag { color: var(--gold); }
.foot-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: clamp(2rem,5vw,4rem); }
footer.site h4 { font-family: var(--font-d); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; }
footer.site ul { list-style: none; display: grid; gap: .7rem; }
footer.site a { transition: color .3s; } footer.site a:hover { color: #fff; }
footer.site .about { font-size: .93rem; max-width: 42ch; margin-top: 1.2rem; }
.disclaimer { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .79rem; line-height: 1.75; color: rgba(255,255,255,.5); max-width: 92ch; }
.copy { margin-top: 1.6rem; font-size: .79rem; color: rgba(255,255,255,.45); }

/* ---------------- responsive ---------------- */
@media (max-width: 980px) {
  .why, .band .grid, .trust-grid, .citycards { grid-template-columns: repeat(2,1fr); }
  .posts { grid-template-columns: 1fr; }
  .featured { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  nav.main { display: none; }
  header.site .btn { padding: .5rem .85rem; font-size: .72rem; letter-spacing: .02em; }
  header.site .btn .full { display: none; } header.site .btn .short { display: inline; }
  .menu-btn { display: block; }
}
@media (max-width: 760px) {
  .split, .steps, .duo, .foot-top, .why, .trust-grid,
  .featured, .citycards, .contact-grid { grid-template-columns: 1fr; }
  .band .grid { grid-template-columns: repeat(2, 1fr); }
  .band .cell { padding: .9rem 1rem; }
  .band .n { font-size: 1.45rem; }
  .band .l { font-size: .72rem; margin-top: .35rem; }
  .hero { min-height: 80vh; }
  header.site .wrap { padding-block: .3rem; gap: .7rem; }
  .brand img { height: 46px; }
  .topbar .right { display: none; }
  .topbar .wrap { justify-content: center; }
  .stack .row { grid-template-columns: 1fr; gap: .5rem; }
  .fact { grid-template-columns: 1fr; gap: .3rem; }
}
@media (max-width: 400px) {
  .brand .name { letter-spacing: .1em; font-size: .82rem; }
  .brand .tag { display: none; }
  .brand .mark { width: 40px; height: 40px; }
  .brand .mark img { width: 29px; height: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .up { opacity: 1 !important; }
  .hero-stage .hill { transform: none !important; }
  .hero-stage .dust, .hero-stage .rocks { display: none; }
  .pic.reveal { clip-path: none !important; }
  .rule.reveal { transform: none !important; }
  .launch-pro .gate { transform: none !important; }
  .launch-pro .stage { scale: 1 !important; }
  .launch-pro .intro > *, .launch-pro .intro .ch { opacity: 1 !important; transform: none !important; filter: none !important; }

  .roots-collage { clip-path: none !important; }
  .roots-collage img { translate: 0 0 !important; }
  .roots-mrc, .roots-text > * { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------- mobile nav ---------------- */
.mobile-nav {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 49;   /* hangs off the sticky header: opens wherever you are */
  background: var(--white); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md); max-height: calc(100vh - 100%); overflow-y: auto;
}
.mobile-nav.open { display: block; }
header.site .mobile-nav .wrap { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; padding-block: 1rem 1.4rem; }
.mobile-nav a { text-align: left; }
.mobile-nav a {
  font-family: var(--font-d); font-weight: 500; font-size: 1rem; color: var(--text);
  padding: .85rem .4rem; border-bottom: 1px solid var(--border); transition: color .3s, padding-left .3s;
}
.mobile-nav a:last-of-type { border-bottom: 0; }
.mobile-nav a:hover { color: var(--teal); padding-left: .8rem; }
.mobile-nav .btn { margin-top: 1rem; justify-content: center; }
@media (min-width: 961px) { .mobile-nav { display: none !important; } }

/* staggered reveal for grid siblings */
.reveal:nth-child(2) { transition-delay: .07s }
.reveal:nth-child(3) { transition-delay: .14s }
.reveal:nth-child(4) { transition-delay: .21s }
.reveal:nth-child(5) { transition-delay: .28s }
.reveal:nth-child(6) { transition-delay: .35s }

/* ================================================================
   Restored from the original single-page build
   ================================================================ */

/* ---- hero: the MRC-letters banner, glass stat boxes, trust row ---- */
.hero {
  background: var(--teal-deep); overflow: hidden;
  flex-direction: column; justify-content: flex-end; align-items: stretch;
  padding-bottom: 0; min-height: clamp(560px, calc(100vh - 118px), 920px);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; will-change: transform; overflow: hidden; contain: paint; }
/* The stage is the photo's own box, cover-fitted (aspect-ratio + both mins) so every layer
   can be placed in % of the image and stays aligned at any viewport. */
.hero-stage {
  position: absolute; left: 58%; top: 55%; translate: -50% -55%;   /* pushed right so the hill sits clear of the copy */
  aspect-ratio: 2400 / 1340; min-width: 116%; min-height: 116%;
  animation: kenburns 16s var(--ease) both;
}
@keyframes kenburns { from { scale: 1.12; } to { scale: 1; } }
.hero-stage .plate { position: absolute; inset: 0; background: url('hero-plate.jpg') center / 100% 100% no-repeat; }
/* the ground line sits at 74% of the photo; the hill is only ever visible above it */
.hero-stage .rise { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 70.5%); mask-image: linear-gradient(to bottom, #000 64%, transparent 70.5%); }
.hero-stage .hill {
  position: absolute; left: 20.375%; top: 27.761%; width: 69%; height: auto;
  transform: translateY(104%); animation: hillRise 1.6s cubic-bezier(.3, .9, .25, 1) .45s forwards;
  filter: drop-shadow(0 30px 40px rgba(12,71,76,.35));
}
@keyframes hillRise { to { transform: none; } }
/* the ground shakes twice: as it cracks, and as the rock lands */
.hero-stage { animation: kenburns 18s var(--ease) both, quake .6s ease-in-out .25s, quake .45s ease-in-out 2.05s; }
@keyframes quake {
  0%,100% { transform: translate(0,0); } 20% { transform: translate(-3px,2px); } 40% { transform: translate(3px,-2px); }
  60% { transform: translate(-2px,-2px); } 80% { transform: translate(2px,2px); }
}
/* dust puffs along the line while the rock is coming up */
.hero-stage .dust i {
  position: absolute; left: var(--x); top: 67.5%; width: 16%; aspect-ratio: 1.6; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(150,120,90,.65), rgba(150,120,90,0));
  opacity: 0; scale: 0; animation: puff 1.5s ease-out var(--d) forwards;
}
@keyframes puff {
  0% { opacity: 0; scale: .2; translate: -50% -50%; }
  25% { opacity: .95; }
  100% { opacity: 0; scale: calc(1.9 * var(--s)); translate: -50% -110%; }
}
/* fragments are chunks of the actual rock face, thrown up and falling back */
.hero-stage .rocks b {
  position: absolute; left: var(--x); top: 69%; width: var(--w); aspect-ratio: 1.15;
  background: url('hero-hill.webp') var(--bp) / 900% auto no-repeat; clip-path: var(--cp);
  filter: brightness(.92) contrast(1.15) drop-shadow(0 6px 6px rgba(0,0,0,.45));
  opacity: 0; animation: fling 1.3s cubic-bezier(.25,.6,.45,1) var(--d) forwards;
}
@keyframes fling {
  0% { opacity: 0; transform: translate(0,0) rotate(0); }
  8% { opacity: 1; }
  50% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.35), 30px) rotate(calc(var(--r) * 1.7)); opacity: 0; }
}
/* vertical fade for the bottom band, horizontal scrim so the headline reads over the rock */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 0% 42%, rgba(12,71,76,.62), rgba(12,71,76,0) 100%),   /* headline scrim: fades out before the bottom edge, so the seam into the launch section is one colour */
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(12,71,76,0) 22%, rgba(12,71,76,.28) 58%, rgba(12,48,51,.82) 84%, #0c3033 100%);
}
.hero > .wrap, .hero > .marquee, .hero > .cue { position: relative; z-index: 2; }
/* flex child: without width the wrap shrinks to its text and floats in the middle */
/* one column: copy on top, buttons under it where the copy used to sit, so the whole block rides higher */
.hero > .wrap { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; align-items: end; margin-block: clamp(1rem, 4vh, 3rem) auto; }   /* copy pinned high; the free space goes below it */
.hero h1.display { max-width: none; font-size: clamp(2.7rem, 5.6vw, 4.9rem); }
.hero h1 .line { display: block; }
.hero h1 .line > span { display: block; --y: 36px; }
.hero-side { display: flex; flex-direction: column; align-items: flex-start; }
.hero-side .hero-cta { justify-content: flex-start; }
.hero-side .hero-stats { justify-content: flex-end; margin-top: 0; flex-wrap: nowrap; }
.hero-side .hero-stat { min-width: 0; padding: 12px 18px; }
.hero-side .hero-stat .l { white-space: nowrap; }
@media (max-width: 860px) {
  .hero > .wrap { grid-template-columns: 1fr; }
  .hero-side { align-items: flex-start; }
  .hero-side .hero-cta, .hero-side .hero-stats { justify-content: flex-start; }
  .hero-side .hero-stats { flex-wrap: wrap; }
}

/* entrance: each piece rises in on its own delay; pure CSS so a script failure can't hide it */
.up { opacity: 0; animation: riseIn .7s var(--ease) var(--d, 0s) forwards; }
@keyframes riseIn { from { opacity: 0; transform: translateY(var(--y, 28px)); } to { opacity: 1; transform: none; } }

/* trust marquee */
/* no mask and no hover-pause: the mask forced a repaint of the moving track every frame,
   and pausing under the cursor read as "it keeps stopping" */
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; gap: 3rem; animation: marquee 34s linear infinite; will-change: transform; backface-visibility: hidden; }
@keyframes marquee { to { transform: translateX(-50%); } }

.hero-stats { gap: .8rem; border-top: 0; padding-top: 0; margin-top: 2.2rem; }
.hero-stat {
  background: rgba(255,255,255,.10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px 20px; text-align: center;
  min-width: 96px; transition: background .3s, transform .4s var(--ease);
}
.hero-stat:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }
.hero-stat .n { font-size: 1.5rem; color: #fff; }
.hero-stat .l { margin-top: .3rem; font-size: .62rem; letter-spacing: .14em; }
.hero-trust {
  margin-top: 2.6rem; padding-block: 1.1rem; border-top: 1px solid rgba(255,255,255,.14);
  font-size: .78rem; color: rgba(255,255,255,.72); white-space: nowrap;
}
.hero-trust span { display: inline-flex; align-items: center; }
.hero-trust-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-mid); display: inline-block; margin-right: .5rem; }

/* ---- launch: the scene is there; the gate rises out of the ground while the title lands ---- */
.launch-pro { position: relative; background: #0c3033; color: #fff; overflow: hidden; aspect-ratio: 16 / 9; max-height: 100vh; min-height: 560px; padding: 0; --p: .5; }
.launch-pro .scene { position: absolute; inset: 0; }
/* the stage is the render's own box, cover-fitted and pinned to the ground, so both layers line up at any viewport */
.launch-pro .stage {
  position: absolute; left: 50%; bottom: 0; translate: -50% calc((var(--p) - .5) * 30px);
  aspect-ratio: 2200 / 1227; min-width: 100%; min-height: 100%; transform-origin: 50% 100%;
}
.launch-pro .stage img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
/* the gate sprite is cropped to its own box; these are its coordinates in the render. It starts fully below the ground line. */
.launch-pro .stage .gate { left: 20.45%; top: 37.25%; width: 62.68%; height: auto; transform: translateY(102%); filter: drop-shadow(0 24px 30px rgba(0,0,0,.35)); }
/* steadies the title area over the graded sky */
.launch-pro .scene::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(12,48,51,.75) 0%, rgba(12,48,51,.3) 55%, rgba(12,48,51,0) 100%); }
.launch-pro .intro { position: relative; z-index: 2; text-align: center; padding-top: clamp(1.8rem, 3vw, 2.8rem); }
.launch-pro .intro > :not(.display) { opacity: 0; }
.launch-pro .intro .display { color: #fff; font-family: 'Cinzel', 'Instrument Sans', serif; font-weight: 600; font-size: clamp(2.3rem, 4.8vw, 3.6rem); letter-spacing: .12em; }
.launch-pro .intro .ch { display: inline-block; font-style: normal; opacity: 0; will-change: transform, filter; }
.launch-pro .intro .tag { margin-top: .5rem; font-family: var(--font-d); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 500; color: rgba(255,255,255,.92); }
.launch-pro .intro .when { margin-top: .1rem; font-size: 1.02rem; color: rgba(255,255,255,.62); }
.launch-pro .intro .hero-cta { justify-content: center; margin-top: 1.3rem; }
.launch-pro .intro .btn-ink { background: var(--gold); color: var(--text); }
.launch-pro .intro .btn-ink:hover { background: #d3bb95; box-shadow: 0 10px 32px rgba(196,169,125,.4); }
/* sequence: gate rises out of the ground; the letters land as it comes up; tagline; button */
html.js .launch-pro.in .gate { animation: gateRise 2.4s cubic-bezier(.3, .9, .25, 1) .3s forwards; }
html.js .launch-pro.in .ch { animation: letterLand .8s cubic-bezier(.2, 1.1, .3, 1) calc(.7s + var(--c) * .07s) forwards; }
html.js .launch-pro.in .tag { animation: blurIn 1s var(--ease) 1.7s forwards; }
html.js .launch-pro.in .when { animation: riseIn .8s var(--ease) 2.1s forwards; }
html.js .launch-pro.in .hero-cta { animation: riseIn .8s var(--ease) 2.5s forwards; }
/* one quiet sheen across the button once it has landed */
.launch-pro .intro .btn { position: relative; overflow: hidden; }
.launch-pro .intro .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); transform: skewX(-18deg); opacity: 0; }
html.js .launch-pro.in .intro .btn::after { animation: sheen 1.1s ease-in-out 3.4s; }
@keyframes gateRise { to { transform: none; } }
@keyframes letterLand { 0% { opacity: 0; transform: translateY(-.9em); filter: blur(10px); } 55% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes blurIn { from { opacity: 0; filter: blur(12px); transform: scale(1.05); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes sheen { 0% { left: -60%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 120%; opacity: 0; } }
html.js .launch-pro.reveal { opacity: 1; transform: none; }
html:not(.js) .launch-pro .gate { transform: none; }
html:not(.js) .launch-pro .intro > *, html:not(.js) .launch-pro .intro .ch { opacity: 1; }
/* between tablet and laptop the 16:9 box is short, so the title block shrinks to stay above the gate */
@media (max-width: 1250px) {
  .launch-pro .intro { padding-top: 1.4rem; }
  .launch-pro .intro .display { font-size: 2.2rem; }
  .launch-pro .intro .tag { font-size: 1.1rem; margin-top: .4rem; }
  .launch-pro .intro .when { font-size: .9rem; margin-top: .3rem; }
  .launch-pro .intro .hero-cta { margin-top: .9rem; }
}
@media (max-width: 760px) {
  .launch-pro { aspect-ratio: auto; min-height: 170vw; max-height: none; }
  .launch-pro .intro { padding-top: 2rem; }
  .launch-pro .intro .display { font-size: 2.1rem; }
  .launch-pro .intro .tag { font-size: 1.15rem; }
  .launch-pro .intro .when { font-size: .9rem; }
}

/* ---- text depth on the two dark heroes ---- */
.hero h1.display, .launch-pro .intro .display { text-shadow: 0 1px 2px rgba(0,0,0,.22); }
.hero .eyebrow, .hero p.sub, .launch-pro .intro .tag, .launch-pro .intro .when { text-shadow: 0 1px 2px rgba(0,0,0,.22); }

/* ---- roots: the collage behind an arch window that pans with the scroll; copy beside it ---- */
.roots { background: var(--bg); --p: 0; overflow-x: clip; }
.roots-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.roots-window { position: relative; aspect-ratio: 1 / 1; --arch: 50% 50% var(--r) var(--r) / 42% 42% var(--r) var(--r); }
/* a thin gold ring set just outside the arch */
.roots-window::after { content: ""; position: absolute; inset: -14px; border: 1px solid rgba(196,169,125,.55); border-radius: var(--arch); pointer-events: none; }
.roots-collage { position: absolute; inset: 0; overflow: hidden; border-radius: var(--arch); background: var(--teal-deep); box-shadow: 0 30px 70px rgba(18,71,76,.28); clip-path: inset(100% 0 0 0); }
/* the picture is wider than the window; --p (0→1 as the section crosses the viewport) slides it across */
.roots-collage img { position: absolute; top: 0; left: 0; height: 105%; width: auto; max-width: none; display: block;   /* 5% taller than the window: the panorama's bare-teal ground strip sits below the edge */ --q: clamp(0, (var(--p) - .25) / .5, 1);   /* the full slide happens while the section is actually on screen (p .25→.75), so both ends of the panorama get seen */
  translate: calc(-1 * var(--start, 6%) - var(--q) * var(--pan, 45%)) 0; }
/* start + pan + visible span (window aspect / picture aspect: 40.8% square, 54.4% at 4:3) = 92% of the picture, so the window is full of
   picture at every point of the scroll: the far-left is never shown and the slide stops 8% short of the far-right, whose ground strip is deeper */
.roots-mrc { font-family: var(--font-d); font-weight: 700; font-size: clamp(3.6rem, 7vw, 6.5rem); line-height: .9; letter-spacing: -.03em; color: var(--teal-deep); opacity: 0; transform: translateX(60px); }
.roots-text > .r, .roots-text > .btn { opacity: 0; transform: translateX(60px); }
.roots-text .eyebrow { margin-top: 1.2rem; }
.roots-text .display { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.roots-text .lede { margin-top: .9rem; }
.roots-text .btn { margin-top: 1.4rem; }
/* sequence: the arch fills from the ground up, then MRC and the copy slide in */
html.js .roots.in .roots-collage { animation: buildUp 1.4s cubic-bezier(.7, 0, .2, 1) .1s forwards; }
html.js .roots.in .roots-mrc { animation: slideFromRight .7s var(--ease) .9s forwards; }
html.js .roots.in .roots-text > .r, html.js .roots.in .roots-text > .btn { animation: slideFromRight .7s var(--ease) calc(1.15s + var(--i, 0) * .12s) forwards; }
.roots-text > :nth-child(3) { --i: 1; } .roots-text > :nth-child(4) { --i: 2; } .roots-text > :nth-child(5) { --i: 3; }
@keyframes slideFromRight { to { opacity: 1; transform: none; } }
@keyframes buildUp { to { clip-path: inset(0 0 0 0); } }
html.js .roots.reveal { opacity: 1; transform: none; }
html:not(.js) .roots-collage { clip-path: none; }
html:not(.js) .roots-mrc, html:not(.js) .roots-text > * { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .roots-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .roots-window { aspect-ratio: 1 / 1; --start: 28%; --pan: 18%; }   /* phones: open on the bull, gopuram and elephant, and drift only as far as the bridge */
  .roots-mrc { font-size: 3.2rem; }
}

/* ---- process cards + verify cards: teal, white type, lifted titles ---- */
.step, .verify { background: var(--teal-deep); color: rgba(255,255,255,.82); border-color: transparent; }
.step:hover, .verify:hover { background: var(--teal); }
.step h3, .verify h3 { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.step p, .verify p { color: rgba(255,255,255,.82); }
.step .num { color: var(--gold); opacity: .85; }
.step .ico, .verify .ico { background: rgba(196,169,125,.16); color: var(--gold); }
.verify-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: 3rem; }
.verify { position: relative; padding: clamp(1.8rem, 3vw, 2.4rem); border-radius: var(--r); display: flex; flex-direction: column; transition: background .4s, transform .4s var(--ease), box-shadow .4s; box-shadow: var(--shadow-md); }
.verify:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(18,71,76,.3); }
.verify .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1.1rem; }
.verify .k { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .45rem; }
.verify h3 { font-size: 1.2rem; margin-bottom: .6rem; }
.verify p { font-size: .94rem; }
.pagehead .display { text-shadow: 0 1px 2px rgba(0,0,0,.16); }
@media (max-width: 980px) { .verify-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .verify-grid { grid-template-columns: 1fr; } }

/* ---- maps: fly-in popup, back control, life-around panel ---- */
.map-back { display: block; background: var(--white); color: var(--teal-deep); font: 600 .78rem/1 var(--font-d); letter-spacing: .08em; text-transform: uppercase; padding: .6rem .9rem; border-radius: 10px; box-shadow: var(--shadow-md); }
.map-back:hover { background: var(--teal-deep); color: #fff; }
.leaflet-popup-content-wrapper { border-radius: 12px; font-family: var(--font-b); color: var(--text); box-shadow: var(--shadow-lg); }
.leaflet-popup-content { margin: .9rem 1.1rem; font-size: .9rem; line-height: 1.5; }
.leaflet-popup-content .map-open { display: inline-block; margin-top: .5rem; color: var(--teal); font-weight: 600; }
.near { display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(1.2rem, 2.5vw, 2rem); margin-top: 2.4rem; align-items: stretch; }
.near-map { height: clamp(320px, 27vw, 380px); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-md); background: var(--teal-pale); }
.near-mapwrap { position: relative; z-index: 0; isolation: isolate; }  /* same Leaflet trap as .map-wrapper */
.map-dir { position: absolute; left: 1rem; bottom: 1rem; z-index: 500; background: var(--white); color: var(--teal-deep); font: 600 .8rem/1 var(--font-d); letter-spacing: .04em; padding: .7rem 1rem; border-radius: 10px; box-shadow: var(--shadow-md); }
.map-dir:hover { background: var(--teal-deep); color: #fff; }
/* the category column is exactly the map's height; the open category takes the room the closed ones leave */
.near-cats { display: flex; flex-direction: column; gap: .6rem; height: clamp(320px, 27vw, 380px); }
.near-cat[open] { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.near-cat[open] .near-list { overflow: auto; }
@media (max-width: 860px) { .near-cats { height: auto; } }
.near-cat { background: var(--teal-deep); color: #fff; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
/* each category is closed until its + is tapped (native <details>: works without script) */
.near-cat summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.1rem; cursor: pointer; list-style: none; transition: background .3s; }
.near-cat summary::-webkit-details-marker { display: none; }
.near-cat summary:hover { background: var(--teal); }
.near-cat h3 { color: #fff; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin: 0; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.near-cat .pm { width: 14px; height: 14px; position: relative; flex-shrink: 0; }
.near-cat .pm::before, .near-cat .pm::after { content: ""; position: absolute; background: var(--gold); left: 0; top: 6px; width: 14px; height: 2px; }
.near-cat .pm::after { transform: rotate(90deg); transition: transform .3s; }
.near-cat[open] .pm::after { transform: rotate(0); }
.near-list { list-style: none; margin: 0; padding: 0 1.2rem .6rem; }
.near-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; color: rgba(255,255,255,.88); }
.near-list li b { color: var(--gold); white-space: nowrap; font-weight: 600; }
.near-list li.none span { color: rgba(255,255,255,.55); font-size: .85rem; }
.near-note { margin-top: 1rem; font-size: .74rem; color: var(--text-muted); }
@media (max-width: 860px) { .near { grid-template-columns: 1fr; } }

/* ---- knowledge hub figures + checklist ---- */
.kh-fig { margin: 2rem 0; border-radius: var(--r); overflow: hidden; background: var(--white); box-shadow: var(--shadow-md); }
.kh-fig img { width: 100%; height: auto; display: block; }
.kh-fig figcaption { padding: .8rem 1.2rem; font-size: .84rem; color: var(--text-muted); border-top: 1px solid var(--border); }
.prose .checklist-icon { display: none; }
.prose .checklist-box, .prose .checklist-items { list-style: none; }
.prose .checklist-items li, .prose .checklist-box li { position: relative; padding-left: 1.4rem; }
.prose .checklist-items li::before, .prose .checklist-box li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }

/* ---- review wall: glass cards over the closing photo ---- */
.reviews { position: relative; color: #fff; overflow: hidden; padding-block: var(--pad);
  background: linear-gradient(to bottom, rgba(18,71,76,0) calc(100% - 3rem), var(--teal-deep)), linear-gradient(180deg, rgba(12,40,43,.78), rgba(12,40,43,.88)), url('reviews-bg.jpg') center 60% / cover no-repeat; }   /* the last stretch eases into the footer teal */
.reviews .display { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.reviews-eyebrow { font-size: .9rem; margin-bottom: 0; }
.brand-word { color: var(--teal); }
.review .stars .e { opacity: .28; }
/* a native horizontal scroller (swipe, trackpad, drag); the script drifts it and holds it under the pointer */
.reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rv-pause { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: .5rem 1rem; cursor: pointer; transition: background .3s, border-color .3s; }
.rv-pause:hover { background: rgba(255,255,255,.18); border-color: var(--gold); }
.rv-pause .i-play, .rv-pause[aria-pressed="true"] .i-pause { display: none; }
.rv-pause[aria-pressed="true"] .i-play { display: block; }
.review-shell { position: relative; margin-top: 2.6rem; }
.rv-arrow { position: absolute; top: 50%; z-index: 2; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(12,40,43,.72); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(10px); cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: background .3s, border-color .3s, transform .3s; }
.rv-arrow:hover { background: var(--teal); border-color: var(--gold); }
.rv-prev { left: clamp(.5rem, 2vw, 1.4rem); } .rv-next { right: clamp(.5rem, 2vw, 1.4rem); }
.review-row { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; cursor: grab; }
.review-row::-webkit-scrollbar { display: none; }
.review-row.grab { cursor: grabbing; user-select: none; }
.review-track { display: flex; gap: 1.2rem; width: max-content; padding-inline: .6rem; }
.review { width: 380px; flex-shrink: 0; margin: 0; padding: 1.4rem 1.5rem; border-radius: var(--r);
  background: rgba(255,255,255,.09); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.22); box-shadow: 0 20px 50px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.review blockquote { margin: 0; font-family: var(--font-d); font-size: 1rem; line-height: 1.55; color: #fff; }
.review figcaption { display: flex; align-items: center; gap: .8rem; margin-top: 1.1rem; font-size: .84rem; }
.review figcaption > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.review strong { color: #fff; font-weight: 600; }
.review em { font-style: normal; color: rgba(255,255,255,.6); font-size: .76rem; }
.review .av { width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--teal-deep); display: grid; place-items: center; font-family: var(--font-d); font-weight: 700; flex-shrink: 0; }
.review .stars { color: var(--gold); letter-spacing: .1em; font-size: .8rem; }
@media (max-width: 600px) { .review { width: 300px; } }

/* ---- floating WhatsApp ---- */
.fab {
  position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem); z-index: 60;
  width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.22); transition: transform .35s var(--ease), box-shadow .35s;
}
.fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; animation: fabPulse 2.4s ease-out infinite; }
.fab:hover { transform: scale(1.08); box-shadow: 0 14px 36px rgba(37,211,102,.4); }
@keyframes fabPulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

/* ---- satellite map ---- */
/* Leaflet paints its panes at z-index 400 and its controls at 1000, far above
   the side rail (60) and the chat panel (62) — the map was drawing straight
   over both. Isolating here traps those values inside the map. */
.map-wrapper { position: relative; z-index: 0; isolation: isolate; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: #2D5535; box-shadow: var(--shadow-lg); margin-top: 2.4rem; }
#mrcMap { height: 560px; width: 100%; }
@media (max-width: 760px) { #mrcMap { height: 420px; } }
.map-city-badge {
  position: absolute; top: 12px; left: 12px; z-index: 500; display: flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-radius: 10px; padding: 6px 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: .8rem; font-weight: 600; color: var(--text);
}
.map-city-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.mrc-marker { width: 16px; height: 16px; background: var(--teal); border: 2.5px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.3); position: relative; }
.mrc-marker.anchor { width: 22px; height: 22px; background: var(--gold); border-width: 3px; }
.mrc-marker.anchor::after {
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 2px solid rgba(196,169,125,.5); animation: markerPulse 2s ease-out infinite;
}
.mrc-marker-label {
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 6px;
  font-family: var(--font-d); font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); margin-top: 6px; transform: translateX(-50%); position: relative; left: 50%;
  display: inline-block; width: max-content;   /* the icon box is 22px wide — the pill must size to its own text */
}
.leaflet-container { font-family: var(--font-b); }
.leaflet-control-zoom a { color: var(--text) !important; }

/* ---- partners / forum glow cards ---- */
.network { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,3vw,2.2rem); }
.network-card {
  border-radius: var(--r); position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 640px;
  border: 1.5px solid transparent; transition: box-shadow .5s, transform .5s var(--ease); padding: 0;
  will-change: transform; isolation: isolate; backface-visibility: hidden;   /* own compositor layer: no hairline seam while the card and its photo move */
}
.network-card.partners { background: #ffffff; animation: glowPulse 3s ease-in-out infinite; }
.network-card.forum { background: var(--teal-deep); color: #fff; animation: glowPulse 3s ease-in-out infinite .5s; }
.network-card.forum .display, .network-card.forum p { color: #fff; }
.network-card.forum .eyebrow { color: var(--gold); }
.network-card:hover { transform: translateY(-6px); box-shadow: 0 0 60px rgba(23,106,112,.35), 0 12px 44px rgba(23,106,112,.25); }
/* photo across the top, fading into the card colour so the title sits on the fade */
.network-card .art { position: relative; height: 300px; overflow: hidden; }
/* The fade is a mask on the photo itself (into the card's own background), not an overlay: an overlay lives on a different
   compositor layer from the moving photo, and their clip edges round differently mid-transition — that was the hairline. */
.network-card .art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); transform: scale(1.01);
  -webkit-mask-image: linear-gradient(to bottom, #000 42%, transparent 100%); mask-image: linear-gradient(to bottom, #000 42%, transparent 100%); }
.network-card:hover .art img { transform: scale(1.05); }
.network-card .body { position: relative; padding: 0 clamp(2rem,4vw,2.8rem) clamp(2rem,4vw,2.8rem); margin-top: -2.2rem; display: flex; flex-direction: column; align-items: flex-start; }
.network-card .display { font-size: clamp(1.8rem, 2.8vw, 2.4rem); text-shadow: 0 1px 2px rgba(0,0,0,.08); }
.network-card.forum .display { text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.network-card .btn { margin-top: 1.4rem; }
.network-card p { max-width: 34ch; margin-top: 1.6rem; }
@media (max-width: 860px) { .network-card { min-height: 0; } .network-card .art { height: 220px; } }
@media (max-width: 860px) { .network { grid-template-columns: 1fr; } .network-card { min-height: 0; } }

/* ---- why: 3D canvas beside the pillars ---- */
.why-split { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem,5vw,4rem); align-items: center; margin-top: 3rem; }
.why-visual { position: relative; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--teal-deep); box-shadow: var(--shadow-md); }
.land-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.why-compact { display: grid; gap: 1rem; }
.why-compact article {
  display: grid; grid-template-columns: 48px 1fr; gap: 1rem; align-items: start;
  background: var(--teal-deep); color: rgba(255,255,255,.82); border-radius: var(--r-sm); padding: 1.2rem 1.4rem; border-top: 0;
  border-left: 3px solid var(--gold); box-shadow: var(--shadow-sm); transition: background .4s, transform .4s var(--ease);
}
.why-compact article:hover { background: var(--teal); transform: translateX(4px); }
.why-compact .ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(196,169,125,.16); display: grid; place-items: center; color: var(--gold); }
.why-compact h3 { font-size: 1.02rem; margin-bottom: .25rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.why-compact p { font-size: .9rem; margin: 0; color: rgba(255,255,255,.82); }
@media (max-width: 860px) { .why-split { grid-template-columns: 1fr; } }

/* ---- icon step cards (process, scannable) ---- */
.step .ico { width: 46px; height: 46px; border-radius: 12px; background: rgba(196,169,125,.16); color: var(--gold); display: grid; place-items: center; margin-bottom: 1rem; }
.step .num { position: absolute; top: 1.2rem; right: 1.4rem; font-size: 2rem; margin: 0; }
.step { position: relative; }

/* ---- per-page hero images ---- */
.pagehead.img { position: relative; color: #fff; min-height: 46vh; display: flex; align-items: flex-end; }
/* The ANANTAA render carries its own ANANTAA across the gate beam, which lands
   right under the page's <h1> on a phone — two identical words stacked. The
   hero is taller than the image's aspect there, so cover scales by height and
   background-position has nothing to move. The scrim does the work instead:
   it deepens through the band the lettering sits in, so the gate still reads
   as the gate but stops competing with the headline. */
.pagehead.img::before { content: ""; position: absolute; inset: 0; background:
    linear-gradient(180deg, rgba(18,71,76,.35) 0%, rgba(18,71,76,.55) 45%, rgba(26,42,45,.94) 100%); }
.pagehead.img > .wrap { position: relative; z-index: 1; }
/* The ANANTAA render carries its own ANANTAA across the gate beam, dead centre.
   On a phone the hero is taller than the image's aspect, so cover scales by
   height — no vertical play at all — and the wordmark lands exactly where the
   description sits. There is over 1000px of HORIZONTAL overflow though, so the
   frame slides off the lettering and onto the left pillar instead. Same image,
   uncropped; only which part of it we look at changes. */
/* Desktop has 155px of vertical play and none horizontally (the hero is always
   wider than the image's aspect). Pinning to the top is the furthest the gate
   wordmark can travel from the <h1> — measured, it moves from y217-288, which
   ran straight through the headline at y190-266, down to y310-381, clear of it
   and sitting behind the small description text instead. It stays visible,
   which is the point; it just stops competing with the heading. */
.pagehead.img { background-position: center top; }
/* Phone: the hero is taller than the image's aspect, so cover scales by height
   and the whole picture shows — the gate's own ANANTAA always lands at 39-48%
   of the hero. Rather than hide it, give it a lane: the copy moves to the top
   instead of being bottom-anchored, and the plaque drops far enough that the
   lettering sits in clear air between them. Same framing as the desktop view,
   nothing cropped, nothing covered. */
@media (max-width: 760px) {
  /* The gate lettering is not centred in the render — measured, it spans
     42.7-62.7% of the image width, so its middle is at 52.7%. Centring the
     frame at 50% clipped the final A. Positioning at 53.5% puts the word in
     the middle of a phone screen with about 20px clear either side, and the
     figure holds across phone widths because cover scales by height here. */
  /* Measured off the render: the lettering spans 40.9-62.9% of the image width
     (centre 51.9%) and 39.8-46.7% of its height. At 22% of the width it is
     nearly as wide as a phone screen, so the hero has to stay small enough
     that the word fits — see the plaque gap below — and the frame centres on
     the word's middle, not the image's. */
  .pagehead.img { background-position: 52.5% 60%; }
  .pagehead:has(.facts-wrap) { justify-content: flex-start; }
}
.pagehead.img .rule { background: var(--gold); }

/* ================================================================
   ANANTAA project components
   ================================================================ */

/* homepage launch block */
.launch { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.launch .pic { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.launch .pic img { width: 100%; display: block; transition: transform .8s var(--ease); }
.launch .pic:hover img { transform: scale(1.03); }
.launch .name { font-family: var(--font-d); font-weight: 700; font-size: clamp(2.4rem,5vw,3.6rem); letter-spacing: .06em; color: var(--teal-deep); line-height: 1; }
.launch .tag { font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--teal); margin-top: .5rem; font-weight: 600; }
.launch .loc { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem; font-size: .92rem; color: var(--text-body); }
.launch .loc svg { color: var(--terra); }
.pill { display: inline-block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: .45rem .9rem; border-radius: 999px; background: var(--gold); color: var(--text); }
@media (max-width: 860px) { .launch { grid-template-columns: 1fr; } }

/* amenity icon grid */
.amenities { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1rem,2vw,1.5rem); margin-top: 2.4rem; }
.amenity { background: var(--white); border-radius: var(--r); padding: 0 1.3rem 1.6rem; text-align: center; overflow: hidden; box-shadow: var(--shadow-sm); border-bottom: 3px solid var(--teal); transition: box-shadow .4s, transform .4s var(--ease); }
.amenity:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.amenity .ico { width: 54px; height: 54px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); display: grid; place-items: center; margin: 0 auto .9rem; }
.amenity strong { display: block; font-family: var(--font-d); font-size: .95rem; color: var(--text); }
.amenity span { display: block; margin-top: .3rem; font-size: .82rem; color: var(--text-muted); }
@media (max-width: 860px) { .amenities { grid-template-columns: repeat(2,1fr); } }

/* feature strip */
.features { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.feature { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 999px; background: var(--white); border: 1px solid var(--border); font-size: .84rem; font-weight: 500; color: var(--text); }
.feature::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* figures with honest labels */
.figure { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-lg); margin-top: 2.4rem; background: var(--teal-deep); }
.figure img { width: 100%; display: block; }
.figure .cap { padding: 1rem 1.4rem; background: var(--white); font-size: .88rem; color: var(--text-body); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.figure .cap strong { color: var(--text); font-family: var(--font-d); }
.impression { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; padding: .4rem .8rem; border-radius: 6px; background: rgba(26,42,45,.78); color: #fff; backdrop-filter: blur(4px); }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,2.5vw,2rem); margin-top: 2.4rem; }
.gallery .figure { margin-top: 0; }
.gallery .figure.wide { grid-column: 1 / -1; }
.gallery .figure img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }

/* longer tagline: keep the header on one line */
.brand .tag { white-space: nowrap; font-size: .62rem; letter-spacing: .1em; }
nav.main a, header.site .btn { white-space: nowrap; }
@media (max-width: 1100px) { .brand .tag { display: none; } }
.brand .name { white-space: nowrap; }

/* ---- About: its own devices — offset gold frame, Roman-numeral creed band, staggered photo trio, pull quote ---- */
.about-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.frame-img { position: relative; margin: 0; }
.frame-img::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid rgba(196,169,125,.7); border-radius: var(--r); pointer-events: none; }
.frame-img img { position: relative; width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.about-copy .display + .lede { margin-top: 1.6rem; }
.about-copy .lede + .lede { margin-top: 1.2rem; }
.creed { background: linear-gradient(160deg, var(--teal-deep), #0c3033); color: rgba(255,255,255,.82); }
.creed .eyebrow { color: var(--gold); }
.creed-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
.creed-grid > div { padding: 1.6rem clamp(1.4rem, 3vw, 2.6rem) 1.6rem 0; }
.creed-grid > div + div { padding-left: clamp(1.4rem, 3vw, 2.6rem); border-left: 1px solid rgba(196,169,125,.35); }
.creed .n { font-family: var(--font-d); font-weight: 700; font-size: 2.6rem; color: var(--gold); opacity: .85; line-height: 1; margin-bottom: 1rem; }   /* the 01 02 03 of the process cards */
.creed h3 { color: #fff; font-size: 1.25rem; margin-bottom: .7rem; min-height: 1.4em; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.creed-grid > div { display: grid; grid-template-rows: auto auto 1fr; }
.day { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); margin-top: 3.4rem; align-items: start; }
.day figure { margin: 0; }
.day figure:nth-child(2) { margin-top: -2.2rem; }
.day img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: var(--shadow-md); }
.day figcaption { margin-top: 1rem; font-size: .92rem; color: var(--text-muted); line-height: 1.6; }
.pullquote { position: relative; max-width: 30ch; margin: 0 auto; text-align: center; font-family: var(--font-d); font-weight: 500; font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1.25; color: var(--teal-deep); padding-top: 2.4rem; }
.pullquote .q { position: absolute; top: -.2em; left: 50%; translate: -50% 0; font-family: 'Cinzel', serif; font-size: 5rem; line-height: 1; color: var(--gold); opacity: .8; }
.pullquote footer { margin-top: 1.4rem; font-family: var(--font-b); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim, #9c8457); font-weight: 600; }
@media (max-width: 860px) {
  .about-split, .creed-grid, .day { grid-template-columns: 1fr; }
  .creed-grid > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(196,169,125,.35); }
  .day figure:nth-child(2) { margin-top: 0; }
  .frame-img::before { inset: 14px -14px -14px 14px; }
}

/* ---- Approach: the document track — six gold milestones on a line, what a buyer is handed before booking ---- */
.docs { background: var(--bg-alt); color: var(--text-body); }   /* light, so it reads apart from the teal cards above and the closing below */
.docs-track { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; position: relative; }
.docs-track li { position: relative; padding-top: 3.4rem; font-size: .88rem; line-height: 1.5; }
/* the connector runs dot-centre to dot-centre, so it starts at 01 and stops at 06 */
.docs-track li:not(:last-child)::before { content: ""; position: absolute; left: 22px; right: calc(-1.2rem - 22px); top: 22px; height: 1px; background: rgba(196,169,125,.65); }
.docs-track .dot { position: absolute; top: 0; left: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-deep); border: 1px solid var(--gold); color: var(--gold); font: 700 .8rem var(--font-d); letter-spacing: .06em; box-shadow: 0 0 0 6px var(--bg-alt); }
.docs-track strong { display: block; color: var(--teal-deep); font-family: var(--font-d); font-size: 1.02rem; margin-bottom: .35rem; }
@media (max-width: 1000px) { .docs-track { grid-template-columns: repeat(3, 1fr); row-gap: 2.2rem; } .docs-track li::before { display: none; } }
@media (max-width: 560px) { .docs-track { grid-template-columns: repeat(2, 1fr); } }

/* ---- Channel Partners: benefit ledger beside the kit, a four-step flow, a photo band with a glass note ---- */
.ledger-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: stretch; margin-top: 3.6rem; }   /* heading above; list and picture start on the same line */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { display: grid; grid-template-columns: 44px 1fr; gap: 1.1rem; padding: 1.2rem 0; border-top: 1px solid rgba(196,169,125,.45); }
.ledger li:last-child { border-bottom: 1px solid rgba(196,169,125,.45); }
.ledger .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--teal-deep); color: var(--gold); }
.ledger strong { display: block; font-family: var(--font-d); font-size: 1.05rem; color: var(--text); margin-bottom: .25rem; }
.ledger p { margin: 0; font-size: .95rem; }
.ledger-img { margin: 0; align-self: stretch; min-height: 0; }   /* the picture runs the full height of the ledger beside it */
.ledger-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r); box-shadow: var(--shadow-lg); }
@media (max-width: 900px) { .ledger-img img { height: auto; } }
.flow { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; counter-reset: none; }
.flow li { position: relative; background: var(--teal-deep); color: rgba(255,255,255,.82); border-radius: var(--r); padding: 1.6rem 1.5rem 1.7rem; box-shadow: var(--shadow-sm); transition: background .4s; }
.flow li:hover { background: var(--teal); }
.flow .k { display: inline-block; font-family: var(--font-d); font-weight: 700; color: var(--gold); font-size: 1.6rem; line-height: 1; margin-bottom: .9rem; }
.flow li a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.flow strong { display: block; font-family: var(--font-d); font-size: 1.1rem; color: #fff; margin-bottom: .45rem; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.flow p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.82); }
.photo-band { position: relative; min-height: 62vh; display: flex; align-items: center; background-size: cover; background-position: center 40%; color: #fff; }
.photo-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,48,51,.55), rgba(12,48,51,.15) 60%, rgba(12,48,51,0)); }
.photo-band > .wrap { position: relative; }
.glass-note { max-width: 520px; padding: clamp(1.8rem, 3vw, 2.6rem); border-radius: calc(var(--r) + 4px); background: rgba(12,48,51,.42); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.glass-note .eyebrow { color: var(--gold); }
.glass-note .display { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.4rem); text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.glass-note p:last-child { margin-top: 1rem; color: rgba(255,255,255,.88); }
@media (max-width: 900px) {
  .ledger-split { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .flow { grid-template-columns: 1fr; } .photo-band { min-height: 0; padding-block: 4rem; } }

/* ---- promo strip (inner pages only): the car and its message drive across the whole bar, over and over; the bar opens the enquiry pop-up ---- */
.promo { display: block; width: 100%; border: 0; cursor: pointer; text-align: left; position: relative; overflow: hidden;
  background: var(--teal-deep); color: rgba(255,255,255,.88); font: inherit; font-size: .82rem; letter-spacing: .03em; height: 44px; }
.promo:hover { background: #12474c; }
.promo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: repeating-linear-gradient(90deg, rgba(196,169,125,.4) 0 10px, transparent 10px 18px); }
.promo-run { position: absolute; top: 0; bottom: 0; left: 0; display: flex; align-items: center; gap: 1rem; white-space: nowrap; will-change: transform; animation: driveAcross 30s linear infinite; }
.promo .car { position: relative; display: block; margin-top: 8px; }
.promo .car svg { display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); transform: scaleX(-1); }   /* faces left: the way it drives */
.promo .car::before { content: ""; position: absolute; right: -14px; bottom: 4px; width: 14px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); filter: blur(2px); }
@keyframes driveAcross { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
.promo-text { display: flex; align-items: center; gap: .6rem; }
.promo-text strong { color: #fff; font-weight: 600; }
.promo-text .sep { color: rgba(255,255,255,.4); }
.promo-text em { font-style: normal; color: var(--gold); font-weight: 600; }
@media (max-width: 640px) { .promo { height: 40px; font-size: .74rem; } .promo-run { animation-duration: 20s; } }
@media (prefers-reduced-motion: reduce) { .promo-run { animation: none; left: 50%; transform: translateX(-50%); } }

/* ---- enquiry pop-up ---- */
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; background: rgba(12,48,51,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal[hidden] { display: none; }
html.modal-open { overflow: hidden; }
.modal-card { position: relative; width: min(100%, 520px); max-height: calc(100vh - 2rem); overflow: auto; background: var(--white); border-radius: calc(var(--r) + 4px); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: 0 40px 100px rgba(0,0,0,.4); animation: riseIn .45s var(--ease) both; }
.modal-x { position: absolute; top: .9rem; right: .9rem; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--bg-alt); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.modal-x:hover { background: var(--gold-light); }
.modal-card .display { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.modal-lede { margin-top: .8rem; font-size: .95rem; color: var(--text-muted); }
.enq { margin-top: 1.4rem; display: grid; gap: .9rem; }
.enq[hidden], .enq-error[hidden], .enq-done[hidden] { display: none; }
.enq label { display: grid; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--text); }
.enq label small { font-weight: 400; color: var(--text-muted); }
.enq input, .enq select { width: 100%; font: inherit; font-size: 1rem; padding: .8rem .95rem; border: 1px solid var(--border, #E4E2DA); border-radius: var(--r-sm); background: #fff; color: var(--text); }
.enq input:focus, .enq select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.enq .check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; font-weight: 400; font-size: .84rem; color: var(--text-body); }
.enq .check input { width: 18px; height: 18px; margin-top: .15rem; }
.enq-error { margin: 0; padding: .7rem .9rem; border-radius: var(--r-sm); background: #fdecec; color: #8a1f1f; font-size: .86rem; }
.enq .btn { justify-self: start; margin-top: .3rem; }
.enq-done .display { font-size: 1.8rem; margin-top: 1rem; }
.enq-done p + p { margin-top: .6rem; color: var(--text-muted); }

/* ---- Forum: its own devices — captioned photo, a three-beat timeline on teal, diamond list ---- */
.forum-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.forum-split.rev { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.forum-photo { position: relative; margin: 0; }
.forum-photo img { width: 100%; height: auto; display: block; border-radius: var(--r); box-shadow: var(--shadow-lg); }
.forum-photo figcaption { position: absolute; left: 1.2rem; bottom: -1rem; padding: .6rem 1rem; border-radius: 999px; background: var(--teal-deep); color: rgba(255,255,255,.9); font-size: .78rem; letter-spacing: .04em; box-shadow: 0 10px 30px rgba(18,71,76,.3); border: 1px solid rgba(196,169,125,.5); }
.rhythm { background: linear-gradient(160deg, var(--teal-deep), #0c3033); color: rgba(255,255,255,.82); }
.rhythm .eyebrow { color: var(--gold); }
.rhythm .display { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.beats { list-style: none; margin: 3rem 0 0; padding: 2.2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); position: relative; }
.beats::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(196,169,125,.1), rgba(196,169,125,.7) 20%, rgba(196,169,125,.7) 80%, rgba(196,169,125,.1)); }
.beats li { position: relative; }
.beats li i { position: absolute; top: -2.2rem; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(196,169,125,.18); translate: 0 -50%; }
.beats strong { display: block; font-family: var(--font-d); font-size: 1.5rem; color: #fff; margin-bottom: .6rem; }
.beats p { font-size: .96rem; line-height: 1.65; }
.gets { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .9rem; }
.gets li { position: relative; padding-left: 1.6rem; line-height: 1.6; }
.gets li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; background: var(--gold); rotate: 45deg; }
@media (max-width: 860px) {
  .forum-split, .forum-split.rev { grid-template-columns: 1fr; }
  .forum-split.rev .forum-photo { order: 2; }
  .beats { grid-template-columns: 1fr; gap: 2.4rem; padding-top: 0; }
  .beats::before { display: none; }
  .beats li { padding-left: 1.8rem; }
  .beats li i { top: .55em; left: 0; translate: 0 0; }
}

/* ---- phone polish ---- */
@media (max-width: 760px) {
  .frame-img { margin-right: 14px; }                                    /* the offset gold frame stays inside the screen */
  .frame-img::before { inset: 14px -14px -14px 14px; }
  .forum-photo figcaption { left: .8rem; right: .8rem; bottom: -.9rem; text-align: center; }   /* caption chip never overhangs the photo */
  .rv-arrow { width: 38px; height: 38px; }
  .rv-prev { left: .3rem; } .rv-next { right: .3rem; }
  .hero-cta .btn { width: 100%; text-align: center; justify-content: center; }   /* stacked buttons line up edge to edge */
  .closing .hero-cta .btn, .launch-pro .hero-cta .btn { width: auto; }            /* centred sections keep their natural width */
}

/* ---- phones: the two animated scenes come first and are shown whole. The picture is a 4:3 window on the render that keeps
   the hill / the gate fully in frame (only empty sky at the sides is trimmed), so the rise plays in full on the first screen. ---- */
@media (max-width: 760px) {
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 0; background: var(--teal-deep); }
  .hero::before { display: none; }
  .hero-bg { order: 1; position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; }
  .hero-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(12,48,51,0) 70%, var(--teal-deep) 100%); }
  .hero-stage { top: 0; left: -22.8%; translate: 0 0; min-width: 0; min-height: 0; height: 100%; width: 134%; }   /* window 17%→92% of the render: the whole hill */
  .hero > .wrap { order: 2; margin: 0; padding-block: 1.4rem 1.4rem; gap: .6rem; }
  .hero h1.display { font-size: 2.5rem; }
  .hero p.sub { margin-top: 1rem; font-size: 1.02rem; }
  .hero-cta { margin-top: 1.4rem; }
  .hero > .marquee { order: 3; margin-top: 0; }
  .hero-trust { background: #0c3033; }

  .launch-pro { display: flex; flex-direction: column; aspect-ratio: auto; min-height: 0; max-height: none; }
  .launch-pro .intro { order: 1; padding-block: 1.6rem .6rem; }
  .launch-pro .scene { order: 2; position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
  .launch-pro .stage { bottom: 0; left: -19.7%; translate: 0 0; min-width: 0; min-height: 0; width: 134.5%; height: auto; }   /* window 15%→89% of the render: the whole gate with a margin either side; the sky above is trimmed by the shorter window */
  .launch-pro .intro .hero-cta { margin-top: .8rem; }
  .launch-pro .intro .display { font-size: 1.9rem; }
  .launch-pro .scene::before { height: 22%; }
}

/* ---- Projects: the South as a collage fills the whole right of the head, edge to edge like the home collage window;
   it answers the pointer (tilt), the scroll (drift) and a finger (push). The city section is one card: Madurai. ---- */
.pagehead.with-art { position: relative; overflow: hidden; background: radial-gradient(ellipse 55% 75% at 88% 115%, rgba(196,169,125,.28), transparent 62%), #12474c; min-height: clamp(440px, 52vh, 560px); display: flex; align-items: center; perspective: 1200px; }
.pagehead.with-art .crumb { color: var(--gold); letter-spacing: .22em; font-weight: 600; text-transform: uppercase; font-size: .78rem; }
.pagehead.with-art .display { font-size: clamp(2.6rem, 5vw, 4.4rem); max-width: 16ch; text-shadow: 0 1px 2px rgba(0,0,0,.22); }
.pagehead.with-art p { font-size: 1.12rem; }
.pagehead.with-art > .wrap { position: relative; z-index: 2; width: 100%; }
.pagehead.with-art .head-copy { max-width: 44%; }
.pagehead.with-art .crumb { color: rgba(255,255,255,.6); letter-spacing: .22em; font-size: .78rem; text-transform: uppercase; }
.pagehead.with-art .crumb a { color: rgba(255,255,255,.6); }
.pagehead.with-art .rule { background: var(--gold); }
.south-art { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; z-index: 1; transform-style: preserve-3d; will-change: transform; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-drag: none; animation: artIn 1.4s var(--ease) .2s both;
  /* melts into the copy on the left and dissolves softly at the top and bottom, so the mass has no hard ends */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; }
.south-art:active { cursor: grabbing; }
.south-art img { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; object-fit: cover; object-position: center; max-width: none; -webkit-user-drag: none; pointer-events: none; }   /* fills the panel edge to edge, so the fade on the left is the mask, never the picture's own edge */
@keyframes artIn { from { opacity: 0; transform: translateX(40px) scale(1.04); } to { opacity: 1; transform: none; } }
/* Projects: a city card (Madurai, its temple as a line icon) that reveals the project card beside it; both are framed prints
   in the same format — teal square, the name behind in the display face, the element in front, name + button in the mount */
.city-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: 2.6rem; justify-content: center; }
.city-print { display: block; text-decoration: none; color: inherit; width: min(100%, 520px); margin: 0 auto; padding: clamp(1rem, 2vw, 1.4rem); background: #fff; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-md); }
.city-print .poster { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(196,169,125,.16), transparent 70%), var(--teal-deep); display: grid; place-items: center; }
.city-print .art { position: relative; display: block; width: auto; height: auto; }
.city-print .art.city { height: 80%; filter: drop-shadow(0 22px 40px rgba(0,0,0,.45)); transition: transform .6s var(--ease); }
.city-print:hover .art.city { transform: scale(1.03); }
.city-print figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem .4rem .2rem; }
.city-print .place { display: block; font-family: var(--font-d); font-weight: 600; font-size: 1.05rem; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); padding-left: .34em; }
.city-print figcaption small { display: block; margin-top: .2rem; padding-left: .34em; font-size: .78rem; color: var(--text-muted); letter-spacing: .04em; }
.city-print figcaption .btn { font-family: var(--font-d); font-weight: 600; font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; padding: .75rem 1.3rem; cursor: pointer; border: 0; white-space: nowrap; }
@media (max-width: 760px) { .city-print figcaption { flex-direction: column; align-items: stretch; text-align: center; } .city-print figcaption small { padding-left: 0; } .city-print figcaption .btn { justify-content: center; text-align: center; } }
.lm { list-style: none; margin: 0; padding: 0; }
.lm li { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; font-size: .92rem; }
.lm li b { color: var(--gold); font-weight: 600; white-space: nowrap; }
@media (max-width: 860px) {
  .pagehead.with-art { min-height: 0; display: block; padding-top: 0; }
  .pagehead.with-art .head-copy { max-width: none; }
  .south-art { position: relative; width: 100%; height: 72vw; margin-bottom: 1.4rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%); }   /* fades at the top and the bottom: no hard edge where the picture starts or ends */
  .south-art img { top: 0; height: 100%; }
  .city-print figcaption { flex-direction: column; align-items: stretch; text-align: center; }
  .city-print figcaption .btn { justify-content: center; }
}

/* ---- project facts bar: five figures in one teal box, hung off the bottom of the head like a plaque ---- */
.pagehead:has(.facts-wrap) { flex-direction: column; justify-content: flex-end; align-items: stretch; }   /* copy, then the plaque, stacked inside the head */
.facts-wrap { position: relative; z-index: 3; margin-top: 2.2rem; }
.pagehead .facts-note { color: rgba(255,255,255,.62); }
.facts { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--teal-deep); color: #fff; border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden; }
.fact-cell { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.4rem 1rem 1.3rem; border-left: 1px solid rgba(255,255,255,.12); }
.fact-cell:first-child { border-left: 0; }
.fact-cell .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(196,169,125,.16); color: var(--gold); margin-bottom: .3rem; }
.fact-cell .k { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.fact-cell .v { font-family: var(--font-d); font-weight: 600; font-size: 1.05rem; color: #fff; line-height: 1.3; }
.facts-note { margin: .9rem .4rem 0; font-size: .78rem; color: var(--text-muted, #6b7370); }
@media (max-width: 960px) { .facts { grid-template-columns: repeat(3, 1fr); } .fact-cell { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); } .fact-cell:nth-child(-n+3) { border-top: 0; } }
@media (max-width: 560px) { .facts { grid-template-columns: repeat(2, 1fr); } .fact-cell:nth-child(3) { border-top: 1px solid rgba(255,255,255,.12); } .fact-cell { padding: 1.1rem .6rem 1rem; } .fact-cell .v { font-size: .95rem; } .fact-cell:last-child { grid-column: 1 / -1; } .facts-wrap { margin-top: 6.5rem; } }   /* the lane the gate lettering sits in; also caps the hero height, which caps how wide the lettering is drawn */  /* The gate render carries its own ANANTAA, and on a phone cover scales by
     height so background-position cannot move it. Measured, it lands at
     307-378px while the plaque started at 331 — a 24px sliver of a sliced
     word showing through the gap. Lifting the plaque puts the whole wordmark
     behind it. The full gate, lettering and all, is still on the page as the
     Entrance concept figure further down. */

/* ---- master plan behind a blur until the visitor leaves a number (per session) ---- */
.plan-gate { display: block; }   /* the <a> must be a block for the lock overlay and the clip to work */
.plan-gate.locked img { filter: blur(2.5px); transform: scale(1.02); transition: filter .8s var(--ease), transform .8s var(--ease); }   /* readable as a plan, not as numbers: the form opens it sharp */
.plan-gate img { transition: filter .8s var(--ease), transform .8s var(--ease); }
.plan-lock { display: none; }
.plan-gate.locked .plan-lock { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center; padding: 1.5rem; color: #fff; background: rgba(12,48,51,.18); cursor: pointer; }
.plan-gate.locked .plan-lock b { display: inline-block; font-family: var(--font-d); font-size: clamp(1.1rem, 2vw, 1.4rem); background: var(--gold); color: var(--text); padding: .8rem 1.5rem; border-radius: var(--r-btn); box-shadow: 0 14px 36px rgba(0,0,0,.35); }
.plan-gate.locked .plan-lock small { font-size: .82rem; color: rgba(255,255,255,.9); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.plan-gate.locked .cap { filter: none; }

/* ---- side tab: an icon pinned to the right edge, mid-page; hover (or tap) slides out "Enquire Now"; the form has its own sheet ---- */
.side-enquire { position: fixed; right: 0; top: 50%; translate: 0 -50%; z-index: 60; display: flex; align-items: center; height: 52px; padding: 0 0 0 0; border-radius: 14px 0 0 14px; background: var(--teal-deep); color: var(--gold); box-shadow: 0 10px 30px rgba(18,71,76,.3); overflow: hidden; transition: background .3s; }
.side-enquire .ico { width: 52px; height: 52px; display: grid; place-items: center; flex-shrink: 0; }
.side-enquire .lbl { max-width: 0; opacity: 0; white-space: nowrap; font-weight: 600; color: #fff; font-size: .9rem; letter-spacing: .02em; padding-right: 0; transition: max-width .4s var(--ease), opacity .3s, padding .4s var(--ease); }
.side-enquire:hover, .side-enquire:focus-visible { background: var(--teal); }
.side-wa { top: calc(50% + 62px); }
.side-enquire:hover .lbl, .side-enquire:focus-visible .lbl { max-width: 160px; opacity: 1; padding-right: 1.1rem; }
@media (max-width: 760px) { .side-enquire { height: 46px; border-radius: 12px 0 0 12px; } .side-enquire .ico { width: 46px; height: 46px; } .side-wa { top: calc(50% + 56px); } }   /* phones: the icon alone; a tap opens the form */
.enq textarea { width: 100%; font: inherit; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: #fff; resize: vertical; }
/* ---- back to top: above the WhatsApp bubble, only once the page has been scrolled ---- */
.to-top { position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: calc(clamp(1rem, 3vw, 1.8rem) + 72px); z-index: 60; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--text); display: grid; place-items: center; box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity .3s, translate .3s var(--ease), background .3s; }
.to-top.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
@media (max-width: 760px) { .to-top { width: 44px; height: 44px; bottom: calc(1rem + 66px); } }

/* amenity cards: a photo of the thing, in the layout, with the icon as a badge on it */
.amenity .shot { position: relative; margin: 0 -1.3rem 1.1rem; aspect-ratio: 4 / 3; }   /* no clipping here: the badge must hang past the photo as a full circle */
.amenity .shot img { border-radius: var(--r) var(--r) 0 0; }
.amenity .shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.amenity:hover .shot img { transform: scale(1.05); }
.amenity .shot .ico { position: absolute; left: 50%; bottom: -27px; translate: -50% 0; margin: 0; z-index: 2; background: var(--teal-deep); color: var(--gold); box-shadow: var(--shadow-md); border: 3px solid var(--white); }
.amenity strong { display: block; margin-top: 2rem; }

/* ---- chat assistant: lotus bubble bottom-right (WhatsApp moves beside it), panel above it ---- */
.mrc-chat-bubble { position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: clamp(1rem, 3vw, 1.8rem); z-index: 61; width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer; background: var(--teal-deep); color: var(--gold); display: grid; place-items: center; box-shadow: 0 14px 36px rgba(18,71,76,.4); transition: transform .3s var(--ease), background .3s; }
.mrc-chat-bubble .mark svg { width: 34px; height: 24px; display: block; }
.mrc-chat-bubble .mark { display: grid; place-items: center; }
.mrc-chat-bubble:hover { transform: translateY(-3px); background: var(--teal); }
.mrc-chat-bubble.on { background: var(--teal); }
.mrc-chat-bubble::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(196,169,125,.55); animation: fabPulse 2.6s ease-out infinite; }
.to-top { right: clamp(1rem, 3vw, 1.8rem); bottom: calc(clamp(1rem, 3vw, 1.8rem) + 80px); }
.mrc-chat-panel { position: fixed; right: clamp(1rem, 3vw, 1.8rem); bottom: calc(clamp(1rem, 3vw, 1.8rem) + 78px); z-index: 62; width: min(380px, calc(100vw - 2rem)); height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column; background: #fff; border-radius: var(--r); box-shadow: 0 30px 80px rgba(18,71,76,.35); overflow: hidden; border: 1px solid var(--border); animation: riseIn .35s var(--ease); }
.mrc-chat-panel[hidden] { display: none; }
.mrc-chat-panel .head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; background: var(--teal-deep); color: #fff; }
.mrc-chat-panel .head .mark { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--gold); display: grid; place-items: center; flex-shrink: 0; }
.mrc-chat-panel .head .mark svg { width: 24px; height: 17px; }
.mrc-chat-panel .head strong { display: block; font-family: var(--font-d); font-size: .95rem; letter-spacing: .04em; }
.mrc-chat-panel .head small { display: block; font-size: .72rem; color: rgba(255,255,255,.7); }
.mrc-chat-panel .head .x { margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; opacity: .8; }
.mrc-chat-panel .wa { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; background: #eaf6ee; color: #1f7a3a; font-size: .82rem; font-weight: 600; border-bottom: 1px solid var(--border); }
.mrc-chat-panel .wa span { flex: 1; } .mrc-chat-panel .wa:hover { background: #dff1e5; }
.mrc-chat-panel .log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; background: var(--bg); }
.mrc-chat-panel .m { max-width: 86%; padding: .65rem .9rem; border-radius: 14px; font-size: .9rem; line-height: 1.5; word-break: break-word; }
.mrc-chat-panel .m.bot { align-self: flex-start; background: #fff; color: var(--text-body); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.mrc-chat-panel .m.me { align-self: flex-end; background: var(--teal-deep); color: #fff; border-bottom-right-radius: 4px; }
.mrc-chat-panel .m a { color: var(--teal); text-decoration: underline; }
.mrc-chat-panel .ctas { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.mrc-chat-panel .m a.cta { display: inline-block; text-decoration: none; background: var(--gold); color: var(--text); font-weight: 600; font-size: .82rem; padding: .5rem .9rem; border-radius: 999px; }
.mrc-chat-panel .m a.cta:hover { background: #d3bb95; }
.mrc-chat-panel .m.me a { color: var(--gold); }
.mrc-chat-panel .typing i { display: inline-block; width: 6px; height: 6px; margin: 0 2px; border-radius: 50%; background: var(--teal); opacity: .4; animation: chatDot 1.2s infinite; }
.mrc-chat-panel .typing i:nth-child(2) { animation-delay: .2s; } .mrc-chat-panel .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes chatDot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.mrc-chat-panel .quick { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; background: var(--bg); }
.mrc-chat-panel .quick[hidden] { display: none; }
.mrc-chat-panel .quick button { font: inherit; font-size: .78rem; padding: .4rem .75rem; border-radius: 999px; border: 1px solid var(--teal); background: #fff; color: var(--teal); cursor: pointer; }
.mrc-chat-panel .quick button:hover { background: var(--teal); color: #fff; }
.mrc-chat-panel .ask { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid var(--border); background: #fff; }
.mrc-chat-panel .ask input { flex: 1; font: inherit; font-size: .92rem; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 999px; }
.mrc-chat-panel .ask button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--gold); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.mrc-chat-panel .gate { max-width: 100%; width: 100%; }
.mrc-chat-panel .gate p { margin: 0 0 .6rem; }
.mrc-chat-panel .lead { display: grid; gap: .45rem; }
.mrc-chat-panel .lead input { font: inherit; font-size: .9rem; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--r-sm); }
.mrc-chat-panel .lead button { font: inherit; font-weight: 600; padding: .65rem; border: 0; border-radius: var(--r-btn); background: var(--gold); color: var(--text); cursor: pointer; }
.mrc-chat-panel .lead .err { color: #b23b2e; font-size: .8rem; margin: 0; }
@media (max-width: 760px) {
  .mrc-chat-bubble { width: 56px; height: 56px; }
  .to-top { bottom: calc(1rem + 72px); }
  .mrc-chat-panel { right: .5rem; left: .5rem; width: auto; bottom: calc(1rem + 70px); height: min(600px, calc(100vh - 110px)); }
}

/* ---- "Why ANANTAA": one teal box of reasons, like a spec sheet ---- */
.why-band { background: var(--bg); }
.why-box { background: linear-gradient(160deg, var(--teal-deep), #0c3033); color: rgba(255,255,255,.86); border-radius: var(--r); padding: clamp(2rem, 4vw, 3.4rem); box-shadow: var(--shadow-lg); }
.why-box .eyebrow { color: var(--gold); }
.why-box .display { color: #fff; margin-top: .6rem; font-size: clamp(1.9rem, 3.2vw, 2.7rem); text-shadow: 0 1px 2px rgba(0,0,0,.2); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.4rem) clamp(1.8rem, 4vw, 3.5rem); margin-top: 2rem; }
.why-grid h3 { color: var(--gold); font-size: 1.05rem; margin-bottom: .45rem; }
.why-grid p { font-size: .96rem; line-height: 1.65; }
.why-box .hero-cta { margin-top: 2.2rem; }
.why-box .btn-ghost { border: 1px solid rgba(255,255,255,.4); color: #fff; }
.why-sub { margin-top: 2.2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,.14); color: var(--gold); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; }
.why-amen { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem 1.4rem; }
.why-amen li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; line-height: 1.4; color: rgba(255,255,255,.92); }
.why-amen li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.6 3.6L18 8.5' fill='none' stroke='%231A2A2D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; }
@media (max-width: 960px) { .why-amen { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .why-grid { grid-template-columns: 1fr; } .why-amen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .why-amen { grid-template-columns: 1fr; gap: .55rem; } }

/* ---- lead: the threshold. The picture carries its own empty teal on the left,
        so it runs full bleed and the copy sits on that emptiness rather than on
        a scrim. Background matches the image's own teal, so there is no seam. ---- */
.lead { position: relative; padding: 0; background: #12474C; color: #fff; overflow: hidden; }
.lead-grid { position: relative; min-height: clamp(560px, calc(100svh - 92px), 880px); display: flex; align-items: center; }
.lead-shot { position: absolute; inset: 0; z-index: 1; }
.lead-shot img { width: 100%; height: 100%; object-fit: contain; object-position: right center;
  animation: leadIn 26s var(--ease) both; }   /* contain, not cover: the lintel lotus and the
     kolam at the threshold are the point, and cropping eats both. The section background is the
     picture's own teal, so the space this leaves on the left reads as part of the image. */
@keyframes leadIn { from { scale: 1.04; } to { scale: 1; } }
.lead-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, rgba(18,71,76,.55) 0%, rgba(18,71,76,.25) 26%, rgba(18,71,76,0) 46%); }
.lead-copy { position: relative; z-index: 3; width: 100%;
  padding-block: clamp(2.4rem, 6vh, 4rem);
  padding-left: var(--gut);   /* hugs the page edge rather than the centred grid: the
     gold arc in the picture sweeps through where the centred column would sit */
  padding-right: var(--gut); }
.lead .eyebrow { color: rgba(255,255,255,.72); }
.lead h1.display { margin-top: .9rem; color: #fff; font-size: clamp(2.2rem, 3vw, 3.2rem); max-width: 13ch; }
.lead h1 span { display: block; }
.lead h1 em { font-style: normal; color: var(--gold); }
.lead .sub { margin-top: 1.3rem; max-width: 30ch; font-size: 1.05rem; line-height: 1.62; color: rgba(255,255,255,.87); }
.lead .hero-cta { margin-top: 2rem; }

@media (max-width: 900px) {
  /* the doorway is on the right of the picture; on a phone it is pushed down and
     dimmed so the copy keeps the flat teal above it */
  .lead-grid { min-height: 0; display: block; }
  .lead-shot img { object-fit: cover; object-position: 72% bottom; }
  /* reaches further down than it used to: with the facts list gone the hero is
     shorter, so the outline CTA now lands where the picture is brightest */
  .lead-veil { background: linear-gradient(180deg, #12474C 0%, rgba(18,71,76,.96) 26%,
    rgba(18,71,76,.78) 46%, rgba(18,71,76,.52) 66%, rgba(18,71,76,.26) 84%,
    rgba(18,71,76,0) 97%); }
  .lead-copy { padding-inline: var(--gut); padding-block: 2.2rem 2.8rem; }
  .lead h1.display { font-size: clamp(2.1rem, 8.8vw, 3rem); max-width: none; }
  .lead .sub { font-size: 1rem; max-width: 34ch; }
  .lead .hero-cta { margin-top: 1.6rem; }
}

/* "(optional)" beside a field label — quieter than the label, not hidden. */
.enq label > span .opt,
form label > span .opt {
  font-weight: 400;
  opacity: 0.6;
  font-size: 0.92em;
}