/* ============================================================
   Vertex Homes — Landing Page Rebuild (v3)
   Gold-only accent system (brand gold #CC9745) on ink/cream —
   no blue anywhere except the real logo mark itself, which keeps
   its true printed colors. Gold-bordered photo cards throughout,
   echoing the client's own "Why Shadnagar" reference.
   ============================================================ */

:root{
  --gold: #CC9745;
  --gold-light: #E7C77E;
  --gold-deep: #9C7331;
  --gold-mist: #F5EAD3;
  --ink: #17140F;
  --ink-2: #0D0B08;
  --paper: #FBF8F2;
  --paper-2: #F2E9D6;
  --white: #FFFFFF;
  --text: #221F19;
  --text-soft: rgba(34,31,25,0.62);
  --text-faint: rgba(34,31,25,0.42);
  --line: rgba(23,20,15,0.18);
  --line-soft: rgba(23,20,15,0.1);
  --on-dark: rgba(255,255,255,0.92);
  --on-dark-soft: rgba(255,255,255,0.6);
  --shadow-card: 0 18px 40px rgba(23,20,15,.12);
  --shadow-card-hover: 0 26px 54px rgba(23,20,15,.18);

  --font-display: "Marcellus", "Georgia", serif;
  --font-body: "Marcellus", "Georgia", serif;

  --container: 1280px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-weight:400;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(22px, 6vw, 84px);
}

.eyebrow{
  display:flex; align-items:center; gap:14px; justify-content:center;
  font-size:11.5px; letter-spacing:.32em; text-transform:uppercase;
  color: var(--gold-deep); font-weight:600; margin-bottom:22px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background: var(--gold); }
.eyebrow.left{ justify-content:flex-start; }
.eyebrow.on-navy{ color: var(--gold-light); }

h1, .h1{ font-family: var(--font-display); font-weight:400; line-height:1.04; letter-spacing:.005em; color: var(--ink); }
h2, .h2{ font-family: var(--font-display); font-weight:400; font-size: clamp(34px, 4.2vw, 54px); line-height:1.1; letter-spacing:.005em; color: var(--ink); }
h3, .h3{ font-family: var(--font-display); font-weight:400; font-size: clamp(22px, 2vw, 27px); color: var(--ink); }
em{ font-style: italic; color: var(--gold-deep); }
.section-dark em{ color: var(--gold-light); }

.lede{ font-family: var(--font-display); font-size: clamp(16px, 1.15vw, 18.5px); color: rgb(34 31 25); line-height:1.75; max-width: 59ch; font-weight:400; }
.lede strong{ color: var(--gold-deep); font-weight:600; }
.section-dark .lede strong{ color: var(--gold-light); }
.invest-highlight{ font-size: clamp(19px, 1.7vw, 24px); line-height:1.5; }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

.label-link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  color: var(--ink); padding-bottom:6px; border-bottom:1px solid var(--ink);
  transition: color .3s, border-color .3s, gap .3s;
}
.label-link svg{ width:12px; height:12px; transition: transform .3s var(--ease); }
.label-link:hover{ color: var(--gold-deep); border-color: var(--gold-deep); gap:14px; }
.label-link:hover svg{ transform: translateX(4px); }
.label-link.on-navy{ color:#fff; border-color: rgba(255,255,255,.5); }
.label-link.on-navy:hover{ color: var(--gold-light); border-color: var(--gold-light); }

/* Shared premium CTA pattern: pill button, text + a circular icon chip
   that darkens and slides on hover. Applies wherever .btn-solid is used
   (header, intro band, section CTAs, form submit) with zero markup changes
   since every instance already ends in the same arrow <svg>. */
.btn-solid{
  position:relative; display:inline-flex; align-items:center; gap:14px;
  background: var(--gold); color: var(--ink); border-radius:999px; border:none;
  padding: 8px 8px 8px 28px; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  box-shadow: 0 14px 30px rgba(204,151,69,.25);
  transition: background .3s, box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn-solid:hover{
  background: var(--gold-light); transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(204,151,69,.35);
}
.btn-solid svg{
  flex:none; width:34px; height:34px; padding:9px; box-sizing:border-box; border-radius:50%;
  background: var(--ink); color: var(--gold-light);
  transition: transform .4s var(--ease), background .3s;
}
.btn-solid:hover svg{ transform: rotate(45deg); background: var(--ink-2); }
.btn-solid.no-icon{ padding: 17px 34px; }

.btn-pill{
  display:inline-flex; align-items:center; gap:12px;
  border:1.5px solid var(--ink); border-radius:999px; padding:15px 30px;
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color: var(--ink);
  transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-pill:hover{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  transform: translateY(-2px); box-shadow: 0 16px 32px rgba(23,20,15,.2);
}

.section{ padding: clamp(80px, 10vw, 152px) 0; position:relative; }
.section-paper2{ background: var(--paper-2); }
.section-dark{ background: var(--ink); color: var(--on-dark); }
.section-dark h1, .section-dark h2, .section-dark h3{ color:#fff; text-shadow: 0 2px 24px rgba(0,0,0,.4); }
.section-dark .lede{ color:#fff; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
.section-dark .eyebrow{ color: var(--gold-light); }
.section-dark .eyebrow::before{ background: var(--gold-light); }

/* Content is visible by default — .reveal only hides/animates once main.js
   confirms it's running (adds .js to <html>). If JS fails to load for any
   reason, every section stays fully visible instead of stuck at opacity:0. */
.js .reveal{ opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay: calc(var(--i,0) * 110ms); }

/* Shared gold-icon recolor — turns a plain black-line SVG amber/gold,
   used on both mist (light) and ink (dark) badge backgrounds. */
.gold-ic{ filter: invert(52%) sepia(53%) saturate(730%) hue-rotate(358deg) brightness(93%) contrast(91%); }

/* ---------------- Header — stays light so the real logo colors read clearly ---------------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding: 16px clamp(22px, 6vw, 64px);
  background: rgba(251,248,242,.96); backdrop-filter: blur(10px);
  transition: padding .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.scrolled{ padding: 10px clamp(22px, 6vw, 64px); box-shadow: 0 8px 24px rgba(23,20,15,.1); }
.brand img{ height:50px; width:auto; display:block; transition: height .4s var(--ease); }
.site-header.scrolled .brand img{ height:40px; }
/* Fixed header no longer flows in-document — every top-of-page section needs
   this offset so the header doesn't cover it. Desktop only: on mobile the
   header goes back to sitting in normal flow (not sticky), so no offset
   is needed there and the fixed-position rules are undone below. */
body{ padding-top: 84px; }

/* Header is sticky on desktop only — on mobile it scrolls with the page. */
@media (max-width: 980px){
  .site-header{ position: static; }
  body{ padding-top: 0; }
}
@media (max-width: 420px){
  .brand img{ height:38px; }
  .header-cta .btn-solid{ padding: 6px 6px 6px 18px; gap:10px; }
  .header-cta .btn-solid svg{ width:24px; height:24px; padding:5px; }
  .btn-solid svg{ width:24px; height:24px; padding:5px; }
}

.nav-desktop{ display:flex; align-items:center; gap:30px; }
.nav-desktop a{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color: var(--ink); font-weight:600;
  position:relative; padding-bottom:5px; transition: color .3s;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--gold);
  transition: right .4s var(--ease);
}
.nav-desktop a:hover::after{ right:0; }
.header-cta a{ color: var(--ink); border-color: var(--ink); }

/* ---------------- Hero — clean, minimal text ---------------- */
.hero{
  position:relative; aspect-ratio: 16 / 9; display:flex; align-items:flex-end; justify-content:center;
  color:#fff; overflow:hidden; background: var(--ink);
}
@media (max-width: 760px){
  .hero{ aspect-ratio: 9 / 16; }
}

/* Mobile-only quick enquiry, right under the hero video — hidden on desktop */
.mobile-hero-form{ display:none; }
@media (max-width: 760px){
  .mobile-hero-form{
    display:block; background: var(--paper-2); padding: clamp(32px,8vw,48px) 0;
  }
  .mobile-hero-form-title{
    text-align:center; font-family: var(--font-display); font-weight:400;
    font-size: clamp(24px,6vw,30px); color: var(--ink); margin-bottom:20px;
  }
  .mobile-hero-form .form-panel{ padding: 26px 22px; }
  .mobile-hero-form .field{ margin-bottom:16px; }
}
.hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-media video, .hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-poster{ z-index:0; }

/* YouTube hero embeds — sit above the poster, which stays visible
   underneath while the iframe loads (or if it never does).
   YouTube's player always letterboxes INSIDE the iframe to preserve the
   source video's real aspect ratio — a plain width:100%/height:100%
   stretch doesn't stop that, it just means the iframe's box rarely
   matches 16:9/9:16 exactly, so black bars show. Fix: deliberately
   OVERSIZE the iframe on whichever axis the source ratio needs, using
   vw/vh, then let .hero-media's overflow:hidden clip the excess — the
   letterbox bars land outside the visible/clipped area, only real video
   content shows inside it. */
.hero-video-desktop, .hero-video-mobile{ position:absolute; inset:0; z-index:1; }
.hero-video-mobile{ display:none; }
.hero-video-desktop iframe, .hero-video-mobile iframe{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  border:0; pointer-events: none; /* controls=0 only removes the scrubber —
    the hover-triggered title/channel/share chrome is separate, this blocks
    it from ever triggering since there's nothing to click on a decorative
    autoplaying background video anyway. */
}
/* Desktop source is 16:9. */
.hero-video-desktop iframe{
  width:100vw; height:56.25vw; min-height:100vh; min-width:177.78vh;
}
/* Mobile source is a 9:16 short. */
.hero-video-mobile iframe{
  width:56.25vh; height:100vh; min-width:100vw; min-height:177.78vw;
}
@media (max-width: 767px){
  .hero-video-desktop{ display:none; }
  .hero-video-mobile{ display:block; }
}

.hero-media::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, rgba(13,11,8,.32) 0%, rgba(13,11,8,.05) 30%, rgba(13,11,8,.08) 60%, rgba(13,11,8,.55) 100%);
}
.hero-tagline{
  position:relative; z-index:2; padding-bottom: clamp(48px,7vw,84px);
  font-family: var(--font-display); font-style:italic; font-weight:400;
  font-size: clamp(19px, 2.4vw, 27px); letter-spacing:.03em; color: var(--gold-light);
  text-align:center; text-shadow: 0 2px 20px rgba(0,0,0,.4);
}
.hero-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.55);
}
.hero-scroll .stick{ width:1px; height:32px; background: linear-gradient(rgba(255,255,255,.7), transparent); animation: scrolldown 1.8s infinite; }
@keyframes scrolldown{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

/* ---------------- Intro band — asymmetric, dark, gold accents ---------------- */
.intro-band{ position:relative; overflow:hidden; padding-top: clamp(90px,11vw,140px); padding-bottom: clamp(60px,8vw,100px); }
.intro-band-grid{ display:flex; justify-content:flex-start; }
.intro-band-main{ text-align:left; max-width:56ch; }
.intro-band-main .h1{ font-size: clamp(42px, 6.4vw, 78px); text-align:left; }
.intro-band-main .lede{ margin: 26px 0 0; max-width:48ch; text-align:left; }
.intro-band-cta{ display:flex; align-items:center; justify-content:flex-start; gap:26px; flex-wrap:wrap; margin-top:38px; }
.intro-band .status{
  display:flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color: var(--gold-light); font-weight:600;
}
.intro-band .status .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold); box-shadow:0 0 0 4px rgba(204,151,69,.28); animation: pulse 2.2s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(204,151,69,.28);} 50%{ box-shadow:0 0 0 8px rgba(204,151,69,.08);} }

/* Reusable full-bleed background photo for any dark section — place
   <div class="section-media"><img ...></div> as the first child, right
   before .container. Keeps the section's own bg as a fallback/overlay. */
.section-media{ position:absolute; inset:0; z-index:0; }
.section-media img{ width:100%; height:100%; object-fit:cover; opacity:.85; }
.section-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,11,8,.25) 0%, rgba(13,11,8,.5) 55%, rgba(13,11,8,.8) 100%); }
/* Muted variant — for a source photo that reads as an obvious AI render at
   full strength: desaturated and darkened so it sits as ambient texture
   behind the text rather than a showcase image people look closely at. */
.section-media.muted img{ opacity:.85; filter: saturate(.4) contrast(1.08) brightness(1); }
.section-media.muted::after{ background: linear-gradient(180deg, rgba(13,11,8,.2) 0%, rgba(13,11,8,.45) 55%, rgba(13,11,8,.75) 100%); }
.section-media + .container{ position:relative; z-index:1; }

/* ---------------- Ticker ---------------- */
.ticker{ background: var(--ink); color:#fff; overflow:hidden; padding: 15px 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); }
.ticker-track{ display:flex; width:max-content; animation: ticker 34s linear infinite; }
.ticker-track:hover{ animation-play-state: paused; }
.ticker span{
  display:inline-flex; align-items:center; gap:16px;
  padding: 0 22px; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; color: rgba(255,255,255,.92);
  white-space:nowrap;
}
.ticker span.sep{ color: var(--gold-light); font-size:9px; padding:0; }
@keyframes ticker{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------------- Why Tukkuguda — gold-bordered photo cards ---------------- */
.growth-head{ max-width:660px; margin: 0 auto 56px; text-align:center; }
.pill-eyebrow.pill-eyebrow-light{ border-color: var(--line); color: var(--ink); }
.growth-title{
  font-family: var(--font-display); font-weight:400; color: var(--ink);
  font-size: clamp(36px, 5vw, 60px); line-height:1.12; letter-spacing:.005em;
}

/* "Why Tukkuguda" service-style cards — rounded card, arrow badge, photo inset */
.service-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,3vw,32px); }
.service-card{
  position:relative; background: var(--white); border-radius:28px; padding:30px 28px 28px;
  box-shadow: var(--shadow-card); transition: box-shadow .4s var(--ease), transform .4s var(--ease);
  display:flex; flex-direction:column;
}
.service-card:hover{ box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.service-tag{
  display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color: var(--gold-deep); margin-bottom:12px; padding-right:56px;
}
.service-card h4{
  font-family: var(--font-display); font-weight:400; font-size: clamp(20px,1.9vw,24px);
  color: var(--ink); line-height:1.25; padding-right:56px; margin-bottom:24px;
}
.arrow-btn{
  position:absolute; top:26px; right:26px; width:46px; height:46px; border-radius:50%;
  background: var(--paper-2); color: var(--ink); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(23,20,15,.08);
  transition: background .3s, color .3s, transform .3s var(--ease);
}
.arrow-btn svg{ width:17px; height:17px; }
.service-card:hover .arrow-btn{ background: var(--gold); color: var(--ink); transform: rotate(45deg); }
.service-photo{
  margin-top:auto; aspect-ratio: 4/3; border-radius:18px; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(23,20,15,.06);
}
.service-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; transition: transform 1.1s var(--ease); }
.service-card:hover .service-photo img{ transform: scale(1.05); }

/* ---------------- About / The Opportunity — dark, circular photo + stat grid ---------------- */
.opp-section{ position:relative; background: var(--gold-mist); }
/* This section no longer carries .section-dark — these re-point the shared
   dark-background components (built for white-on-dark) to sit correctly on
   the pastel gold fill instead. */
.opp-section .pill-eyebrow{ border-color: var(--line); color: var(--ink); background: rgba(255,255,255,.4); }
.opp-section .opp-checklist{ border-top-color: var(--line); }
.opp-section .opp-check span{ color: var(--text-soft); }
.opp-section .opp-check span b{ color: var(--ink); }
.opp-section .opp-cta-row{ border-top-color: var(--line); }
.opp-section .opp-deco-arrow{ color: var(--text-faint); }
.opp-section .opp-badge-spin .ring text{ fill: var(--gold-light); }
.pill-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:9px 22px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:#fff;
  margin-bottom:22px; background: rgba(255,255,255,.03);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.pill-eyebrow .dot{ width:6px; height:6px; border-radius:50%; background: var(--gold); }

.opp-section{ overflow:hidden; } /* lets the visual panel bleed slightly past the edge */
.opp-grid{ display:grid; grid-template-columns: 1fr .82fr; gap: clamp(36px,5vw,72px); align-items:center; }
.opp-rule{
  display:block; width:60px; height:2px; margin-top:20px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.opp-checklist{
  display:grid; grid-template-columns: 1fr 1fr; gap: 20px 28px;
  margin: 32px 0 30px; padding-top: 28px; border-top:1px solid rgba(255,255,255,.16);
}
.opp-check{
  display:flex; align-items:flex-start; gap:12px; padding:8px; margin:-8px;
  border-radius:10px; transition: background .3s var(--ease), transform .3s var(--ease);
}
.opp-check:hover{ background: rgba(255,255,255,.035); transform: translateX(3px); }
.opp-check .tick{
  flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%;
  background: linear-gradient(155deg, var(--gold-light), var(--gold-deep)); color: var(--ink);
  box-shadow: 0 6px 14px rgba(204,151,69,.3);
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s var(--ease);
}
.opp-check:hover .tick{ transform: scale(1.1); }
.opp-check .tick svg{ width:11px; height:11px; }
.opp-check span{ font-family: var(--font-display); font-size:15px; line-height:1.4; color: var(--on-dark-soft); }
.opp-check span b{ font-weight:600; color:#fff; }

.opp-cta-row{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.16);
}
.opp-cta-row .btn-solid{ box-shadow: 0 14px 30px rgba(204,151,69,.22); }
.opp-deco-arrow{ color: rgba(255,255,255,.3); width:70px; }
.opp-deco-arrow svg{ width:100%; height:auto; }

.opp-visual{ position:relative; }
.opp-visual::before{
  content:""; position:absolute; inset:4%; z-index:0; border-radius:40px;
  background: radial-gradient(ellipse at 50% 45%, rgba(204,151,69,.3), transparent 72%);
  filter: blur(36px);
}
.opp-photo-rect{
  position:relative; z-index:1; aspect-ratio: 4/3; border-radius:26px; overflow:hidden;
  /* box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(204,151,69,.25); */
}
.opp-photo-rect img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease); }
.opp-visual:hover .opp-photo-rect img{ transform: scale(1.04); }
.opp-photo-rect::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(200deg, rgba(23,20,15,0) 55%, rgba(23,20,15,.42) 100%);
}

.opp-badge-spin{
  position:absolute; top:-24px; left:-24px; z-index:2; width:116px; height:116px;
}
.opp-badge-spin::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #2a2013, var(--ink) 72%);
  box-shadow: 0 16px 34px rgba(0,0,0,.6), 0 0 0 2.5px var(--gold);
}
.opp-badge-spin .ring{ position:relative; z-index:1; width:100%; height:100%; animation: opp-spin 16s linear infinite; }
.opp-badge-spin:hover .ring{ animation-play-state: paused; }
.opp-badge-spin .ring text{ font-family: var(--font-body); text-transform:uppercase; font-weight:700; }
@keyframes opp-spin{ to{ transform: rotate(360deg); } }
.opp-badge-center{
  position:absolute; inset:0; margin:auto; z-index:2; width:44px; height:44px; border-radius:50%;
  background: linear-gradient(155deg, var(--gold-light), var(--gold)); color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 8px 20px rgba(204,151,69,.5);
  display:flex; align-items:center; justify-content:center;
}
.opp-badge-center svg{ width:16px; height:16px; }

/* ---------------- Project intro — staggered photo collage + feature card ---------------- */
.intro2-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap: clamp(48px,6vw,90px); align-items:center; }
.intro2-collage{ position:relative; padding: 10% 14% 14% 0; }
.intro2-photo-main{
  position:relative; z-index:0; aspect-ratio: 4/5; border-radius:22px; overflow:hidden;
  box-shadow: var(--shadow-card);
}
.intro2-photo-main img{ width:100%; height:100%; object-fit:cover; }
.intro2-photo-accent{
  position:absolute; z-index:1; right:0; bottom:0; width:52%; aspect-ratio: 3/4;
  border-radius:18px; overflow:hidden; border:4px solid var(--paper);
  box-shadow: 0 24px 50px rgba(23,20,15,.28);
}
.intro2-photo-accent img{ width:100%; height:100%; object-fit:cover; }

.intro2-card{
  display:grid; grid-template-columns: 1fr 1fr; gap:0;
  background: var(--white); border-radius:22px; padding: 6px;
  box-shadow: var(--shadow-card); margin-top:36px;
}
.intro2-feature{ padding: 26px 28px; }
.intro2-feature:nth-child(2n){ border-left:1px solid var(--line); }
.intro2-feature:nth-child(n+3){ border-top:1px solid var(--line); }
.intro2-ic{
  display:flex; align-items:center; justify-content:center; width:44px; height:44px; margin-bottom:16px;
  border-radius:12px; background: var(--gold-mist); color: var(--gold-deep);
}
.intro2-ic svg{ width:20px; height:20px; }
.intro2-feature h4{ font-family: var(--font-display); font-weight:400; font-size:18px; color: var(--ink); margin-bottom:8px; }
.intro2-feature p{ font-family: var(--font-display); font-size:14px; line-height:1.5; color: var(--text-soft); }

.intro2-cta{ display:flex; align-items:center; gap:26px; margin-top:32px; }
.footnote{ margin-top:20px; font-size:11px; color: var(--text-faint); font-style:italic; }

/* ---------------- Location — plain grouped list (dark) ---------------- */
.location-head{ max-width:640px; margin: 0 auto 56px; text-align:center; }
.location-layout{ display:grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px,4vw,48px); align-items:stretch; }
/* Accordion — light FAQ-style cards (floating on the dark section)
   with a circular plus/minus toggle, per reference. */
.loc-accordion{ display:flex; flex-direction:column; gap:16px; }
.loc-item{
  border-radius:18px; background: var(--white); border:1px solid transparent;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  transition: background .3s, box-shadow .3s, border-color .3s;
}
.loc-item.is-open{ border-color: var(--gold); box-shadow: 0 24px 54px rgba(0,0,0,.45), 0 0 0 4px rgba(204,151,69,.14); }

.loc-item-header{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 24px 26px; background:none; border:none; color:inherit; font:inherit; text-align:left; cursor:pointer;
}
.loc-group-label{ display:flex; align-items:center; gap:14px; }
.loc-group-label .roman{
  display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none;
  border-radius:50%; background: var(--gold); border:1px solid var(--gold);
  font-family: var(--font-display); font-style:italic; font-size:13px; color: var(--ink); font-weight:600;
}
.loc-group-label span.name{ font-size:17px; font-family: var(--font-display); text-transform:none; letter-spacing:0; color: var(--ink); font-weight:500; }

.loc-chev{
  position:relative; flex:none; width:38px; height:38px; border-radius:50%;
  background: var(--gold-mist); box-shadow: inset 0 0 0 1px rgba(204,151,69,.4);
  transition: background .3s, box-shadow .3s;
}
.loc-chev::before, .loc-chev::after{
  content:""; position:absolute; top:50%; left:50%; background: var(--gold-deep);
  transform: translate(-50%,-50%); transition: transform .35s var(--ease), opacity .35s;
}
.loc-chev::before{ width:13px; height:1.6px; }
.loc-chev::after{ width:1.6px; height:13px; }
.loc-item.is-open .loc-chev{ background: var(--gold); box-shadow: 0 6px 16px rgba(204,151,69,.5); }
.loc-item.is-open .loc-chev::before, .loc-item.is-open .loc-chev::after{ background: var(--ink); }
.loc-item.is-open .loc-chev::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }

.loc-item-body{ max-height:0; overflow:hidden; transition: max-height .45s var(--ease); }
.loc-item.is-open .loc-item-body{ max-height: 560px; }
.loc-item-body-inner{ padding: 0 26px 26px; }
.loc-group-note{ font-family: var(--font-display); font-size:14px; color: var(--text); opacity:.7; line-height:1.55; margin: 0 0 16px; }
.loc-row{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  font-size:14.5px; color: var(--text); padding:11px 0; border-top:1px solid var(--line);
}
.loc-row:first-of-type{ border-top:none; }
.loc-row b{ font-family: var(--font-display); font-weight:600; font-size:16px; color: var(--gold-deep); }

.location-map-card{
  position:relative; overflow:hidden; min-height:420px;
  background: rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1); border-radius:22px;
}
.location-map-embed{
  position:absolute; inset:0; width:100%; height:100%;
  filter: grayscale(45%) contrast(1.05) brightness(.92);
  transition: filter .4s var(--ease);
}
.location-map-card:hover .location-map-embed{ filter: grayscale(15%) contrast(1.02) brightness(1); }

/* Dark-section overrides — links */
.section-dark .label-link{ color:#fff; border-color: rgba(255,255,255,.5); }
.section-dark .label-link:hover{ color: var(--gold-light); border-color: var(--gold-light); }
.section-dark .form-note{ color: rgba(255,255,255,.4); }

/* Side tab — required on every breakpoint including mobile (kept alongside
   .mobile-sticky-bar, not instead of it).
   The original approach (position:fixed; right:-60px; ...transform:
   rotate(-90deg)) laid the box out 60px past the viewport's right edge
   BEFORE rotating it back into view. transform is purely visual — it
   doesn't move the browser's actual layout box — so that pre-rotation
   position (genuinely outside the viewport) got counted as real scrollable
   overflow. That's spec'd, deliberate browser behaviour for position:fixed
   specifically (its layout box is always included in the viewport's
   scrollable area), so it happened on every browser, just more obviously
   reachable on mobile via touch-scroll. body{overflow-x:hidden} can't
   contain it, since fixed elements sit outside normal document flow.
   Fix: the position:fixed element (#side-tab) now uses its POST-rotation
   footprint (right:0, no negative offset — genuinely inside the viewport,
   so it contributes zero overflow) and only clips (overflow:hidden) an
   inner, non-fixed <span> that carries the actual rotation — a position:
   absolute descendant's transform doesn't get that same forced inclusion,
   and overflow:hidden on the parent contains it besides. */
#side-tab{
  position: fixed;
  right: 0;
  top: 55%;
  width: 40px;
  height: 156px;
  transform: translateY(-50%);
  display: block;
  overflow: hidden;
  border-radius: 5px 0 0 5px;
  z-index: 999;
  text-decoration: none;
}
.side-tab-inner{
  position: absolute;
  top: 46%; left: 58%;
  width: 156px;
  box-sizing: border-box;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  -webkit-transform-origin: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  font-family: var(--font-body);
  text-transform: uppercase;
  display: block;
  background: var(--gold);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 6px;
  letter-spacing: .18em;
  text-align: center;
}
#side-tab:hover .side-tab-inner{ background: var(--gold-light); }

/* Mobile — full-width bottom bar: logo left, CTA button right. Just those
   two, flush at bottom:0 — no chat/avatar icon. */
.mobile-sticky-bar{ display:none; }
@media (max-width: 760px){
  .mobile-sticky-bar{
    position:fixed; bottom:0; left:0; right:0; z-index:80;
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    background: var(--white); padding:14px 18px;
    box-shadow: 0 -10px 24px rgba(0,0,0,.14);
  }
  .msb-logo{ height:41px; width:auto; flex:none; }
  .msb-btn{ justify-content:center; }
  /* Leaves room at the bottom of the page so the fixed bar doesn't cover
     the footer or the last section's content. */
  .site-footer{ padding-bottom: 84px; }
}

/* ---------------- Investments — heading, content boxes, numbered list ---------------- */
.invest-head2{ max-width:680px; margin: 0 auto 64px; text-align:center; }
.invest-title2{
  font-family: var(--font-display); font-weight:400; color: var(--ink);
  font-size: clamp(32px, 4.4vw, 52px); line-height:1.16; margin: 22px 0 20px;
}
.invest-head2 .lede{ margin: 0 auto; }

.invest-grid2{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,4vw,56px); align-items:start; }

/* Left column — content boxes standing in for a photo */
.invest-boxes{
  display:flex; flex-direction:column; gap:2px; height:100%; border-radius:24px; overflow:hidden;
  box-shadow: 0 28px 60px rgba(23,20,15,.22);
}
.invest-box-main{
  position:relative; overflow:hidden;
  background: linear-gradient(155deg, var(--gold-light), var(--gold) 65%, var(--gold-deep));
  padding: clamp(34px,3.6vw,44px); flex: 1;
}
.invest-box-main::after{
  content:""; position:absolute; right:-40px; bottom:-40px; width:160px; height:160px; border-radius:50%;
  background: rgba(255,255,255,.12);
}
.invest-box-main h3{ position:relative; z-index:1; font-family: var(--font-display); font-weight:400; font-size: clamp(23px,2.1vw,28px); color: var(--ink); line-height:1.3; margin-bottom:18px; }
.invest-box-main p{ position:relative; z-index:1; font-family: var(--font-display); font-size:14.5px; color: rgba(23,20,15,.72); line-height:1.65; }
.invest-box-sub{
  background: linear-gradient(155deg, #211d16, var(--ink-2)); padding: clamp(28px,3.2vw,34px);
}
.invest-box-sub p{ font-family: var(--font-display); font-size:16px; color:#fff; margin-bottom:22px; }
.invest-box-sub .btn-pill{
  margin-top:0; border-color: rgba(231,199,126,.55); color: var(--gold-light);
}
.invest-box-sub .btn-pill:hover{ background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* Right column — numbered feature list */
.invest-numbered{ display:flex; flex-direction:column; gap:18px; }
.invest-num-item{
  position:relative; display:grid; grid-template-columns: 60px 1fr; gap:24px; padding:26px 24px;
  background: var(--white); border:1px solid var(--line-soft); border-radius:18px;
  box-shadow: 0 14px 32px rgba(23,20,15,.08);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.invest-num-item::before{
  content:""; position:absolute; top:0; left:24px; right:24px; height:2px;
  background: linear-gradient(90deg, var(--gold), transparent 75%);
  opacity:0; transition: opacity .35s var(--ease);
}
.invest-num-item:hover{
  transform: translateY(-4px); border-color: rgba(204,151,69,.3);
  box-shadow: 0 24px 48px rgba(23,20,15,.14);
}
.invest-num-item:hover::before{ opacity:1; }
.invest-num-ic{
  width:60px; height:60px; border-radius:16px; flex:none;
  background: linear-gradient(155deg, var(--gold-light), var(--gold-deep)); color: var(--ink);
  box-shadow: 0 10px 22px rgba(204,151,69,.3), inset 0 1px 0 rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
  transition: transform .35s var(--ease);
}
.invest-num-item:hover .invest-num-ic{ transform: scale(1.08) rotate(-4deg); }
.invest-num-ic svg{ width:24px; height:24px; }
.invest-num-body .num{ display:block; font-family: var(--font-display); font-style:italic; font-size:13px; color: var(--gold-deep); margin-bottom:6px; }
.invest-num-body h4{ font-family: var(--font-display); font-weight:400; font-size: clamp(18px,1.7vw,21px); color: var(--ink); margin-bottom:8px; }
.invest-num-body p{ font-family: var(--font-display); font-size:13.5px; color: var(--text-soft); line-height:1.5; }

/* ---------------- Final CTA — light, boxed form, per reference ---------------- */
.cta-light{ background: var(--paper-2); }
.final-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: clamp(40px,6vw,90px); align-items:center; }
.final-logo{ height:64px; width:auto; margin-bottom:28px; }
.final-title{
  font-family: var(--font-display); font-weight:400; color: var(--gold-deep);
  font-size: clamp(32px, 3.6vw, 46px); line-height:1.18;
}

.form-panel{ background: var(--white); border-radius:20px; padding: clamp(30px,3.6vw,44px); box-shadow: var(--shadow-card); }
.field{ margin-bottom:20px; }
.field input{
  width:100%; background: var(--white); border:1.5px solid rgba(23,20,15,.32); border-radius:8px;
  color: var(--ink); font-size:16px; padding: 16px 18px; outline:none;
  transition: border-color .3s, box-shadow .3s; font-family: var(--font-display);
}
.field input::placeholder{ color: var(--text-soft); font-family: var(--font-display); }
.field input:focus{ border-color: var(--gold); box-shadow: 0 0 0 3px rgba(204,151,69,.15); }
.form-panel .btn-solid.no-icon{ display:flex; width:max-content; margin: 10px auto 0; }
.form-note{ display:flex; align-items:center; gap:9px; margin-top:20px; font-size:11px; color: var(--text-faint); }
.form-success{ display:none; padding: 20px 0; text-align:center; }
.form-success.show{ display:block; }
.form-success svg{ width:30px; height:30px; color: var(--gold); margin-bottom:16px; }
.form-success h3{ color: var(--ink); }
.form-success p{ color: var(--text-soft); font-size:13.5px; margin-top:10px; font-weight:400; }

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--ink); padding: 30px 0; text-align:center; }
.site-footer .fine{ font-size:12px; letter-spacing:.08em; color: rgba(255,255,255,.75); font-weight:600; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px){
  .nav-desktop{ display:none; }
  .final-grid, .opp-grid{ grid-template-columns: 1fr; }
  .intro2-grid{ grid-template-columns: 1fr; }
  .intro2-collage{ max-width:420px; margin:0 auto; }
  .opp-visual{ max-width:340px; margin:0 auto 34px; order:-1; }
  .opp-badge-spin{ top:-14px; left:-14px; width:96px; height:96px; }
  .opp-badge-center{ width:38px; height:38px; }
  .location-layout{ grid-template-columns: 1fr; }
  .location-map-card{ min-height:360px; }
  .invest-grid2{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .opp-checklist{ grid-template-columns: 1fr; }
  .intro2-card{ grid-template-columns: 1fr; }
  .intro2-card{ grid-template-columns: 1fr; }
  .intro2-feature{ border-left:none !important; }
  .intro2-feature:nth-child(n+2){ border-top:1px solid var(--line); }
  .intro2-feature:first-child{ border-top:none; }
  .invest-num-item{ grid-template-columns: 44px 1fr; gap:16px; }
  .invest-num-ic{ width:44px; height:44px; }
  .service-grid{ grid-template-columns: 1fr; }
  .service-card h4{ padding-right:56px; }
  .stat-item{ flex:1 1 100%; }
}