/* ============================================================
   FONTS — a two-typeface pairing, which is what gives the pages
   their character: display serif (Playfair, self-hosted so it is
   identical on every OS) for headings and the LV mark, Helvetica
   for body copy, navigation and controls.
   ============================================================ */
@font-face {
  font-family: "LV Serif";
  src: url("../fonts/playfair.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LV Serif";
  src: url("../fonts/playfair-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   LV 2026 — design system
   Tokens and scale carry over from the approved sketches.
   Everything below the component layer is responsive-first.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

:root {
  --forest:  #1F7A4D;
  --leaf:    #4CAF50;
  --charcoal:#1F2421;
  --ink:     #0B0D0F;
  --ivory:   #EFEBE3;
  --paper:   #F5F2ED;
  --sand:    #E8E2D8;
  --fog:     #8E948F;
  --line:    rgba(255,255,255,0.09);
  --line-d:  rgba(31,36,33,0.10);

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;   /* body, nav, controls */
  --serif: "LV Serif", "Playfair Display", Georgia, serif;  /* headings — the display face */
  --logo: "LV Serif", "Playfair Display", Georgia, serif;   /* LV logo only — untouchable brand mark */

  --gut: 80px;      /* horizontal gutter */
  --sec: 160px;     /* section rhythm */
  --nav-h: 96px;
}

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--charcoal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- shell ---------- */
.wrap      { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }
.wrap-wide { max-width: 1340px; margin: 0 auto; padding: 0 60px; }
.dark { background: var(--ink);  color: var(--ivory); }
.lite { background: var(--ivory); color: var(--charcoal); }
.sec    { padding: var(--sec) 0; }
.sec-sm { padding: 110px 0; }

/* ---------- type ---------- */
.lv {
  font-family: var(--logo); font-weight: 900;
  letter-spacing: .16em; color: var(--forest);
  display: inline-block; line-height: .9;
}
.eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .42em;
  text-transform: uppercase; color: var(--forest);
}
.dark .eyebrow { color: var(--leaf); }

.display    { font-family: var(--serif); font-weight: 400; font-size: 96px; line-height: 1.02; letter-spacing: -.02em; }
.display-sm { font-family: var(--serif); font-weight: 400; font-size: 60px; line-height: 1.08; letter-spacing: -.015em; }
h1 { font-size: 88px; line-height: 1.02; letter-spacing: -.03em; font-weight: 300; }
h2 { font-size: 46px; line-height: 1.14; letter-spacing: -.02em; font-weight: 300; }
h3 { font-size: 19px; line-height: 1.3;  font-weight: 600; letter-spacing: -.005em; }
p  { font-size: 15px; line-height: 1.75; font-weight: 300; }
.lead { font-size: 19px; line-height: 1.7; font-weight: 300; }
.tag  { font-size: 10px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; }
.muted { color: var(--fog); }
.dark .muted { color: rgba(239,235,227,.48); }
.italic-leaf { color: var(--leaf); font-style: italic; }
.italic-forest { color: var(--forest); font-style: italic; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 36px; font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  border: 1px solid transparent; background: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-wa    { background: var(--forest); color: #fff; }
.btn-wa:hover { background: #196340; }
.btn-ghost { background: transparent; color: var(--ivory); border-color: rgba(239,235,227,.28); }
.btn-ghost:hover { border-color: rgba(239,235,227,.7); }
.lite .btn-ghost { color: var(--charcoal); border-color: rgba(31,36,33,.22); }
.btn-light { background: #fff; color: var(--forest); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-forest { background: transparent; color: var(--forest); border-color: rgba(31,122,77,.32); }
.btn-ghost-forest:hover { background: var(--forest); color: #fff; border-color: var(--forest); }

/* ---------- gated document downloads ---------- */
.lv-docs .docs-status.ok { color: var(--forest); }
.docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.doc-card {
  display: flex; gap: 22px; padding: 34px;
  background: var(--paper); border: 1px solid rgba(31,36,33,.10);
}
.doc-ico {
  flex: 0 0 auto; width: 46px; height: 58px; border-radius: 3px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--forest); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
}
.doc-body h3 { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.25; margin-bottom: 10px; }
.doc-sub  { font-size: 14.5px; color: rgba(31,36,33,.72); margin-bottom: 12px; }
.doc-meta { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); margin-bottom: 22px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.doc-actions .btn { padding: 14px 26px; font-size: 10px; }

/* ---------- broker partner number + QR ---------- */
.partner-code {
  font-family: var(--logo); letter-spacing: .06em; color: var(--forest);
  white-space: nowrap;
}
.partner-grid { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.partner-qr { text-align: center; }
.partner-qr img {
  width: 240px; height: 240px; padding: 16px; background: #fff;
  border: 1px solid rgba(31,36,33,.12);
}
.partner-dl-row { display: flex; gap: 18px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.partner-dl {
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--forest); border-bottom: 1px solid rgba(31,122,77,.3); padding-bottom: 4px;
}
.partner-msg {
  width: 100%; padding: 15px 16px; background: #fff; resize: vertical;
  border: 1px solid rgba(31,36,33,.20);
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--charcoal);
}
.partner-label {
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--fog); margin-bottom: 10px;
}
.partner-link {
  width: 100%; padding: 15px 16px; background: #fff;
  border: 1px solid rgba(31,36,33,.20);
  font-family: var(--sans); font-size: 14px; color: var(--charcoal);
}
.partner-note { font-size: 13.5px; color: rgba(31,36,33,.70); margin-top: 12px; }
.partner-actions { margin-top: 22px; }
@media (max-width: 760px) {
  .partner-grid { grid-template-columns: 1fr; gap: 28px; }
  .partner-qr { text-align: left; }
  .partner-dl-row { justify-content: flex-start; }
}

/* email-it-to-me — a disclosure, so it costs nothing until wanted */
.doc-mail { margin-top: 16px; }
.doc-mail > summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--forest); padding: 6px 0; border-bottom: 1px solid rgba(31,122,77,.3);
}
.doc-mail > summary::-webkit-details-marker { display: none; }
.doc-mail[open] > summary { margin-bottom: 14px; }
.doc-mail-form { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-mail-form input[type="email"] {
  flex: 1 1 200px; min-width: 0; padding: 13px 14px;
  border: 1px solid rgba(31,36,33,.20); background: #fff;
  font-family: var(--sans); font-size: 14px; color: var(--charcoal);
}
.doc-mail-form input[type="email"]:focus { outline: 0; border-color: var(--forest); }
.doc-mail-form .btn { padding: 13px 24px; font-size: 10px; }
.doc-mail-note { font-size: 12px; color: var(--fog); margin-top: 10px; }

@media (max-width: 860px) { .docs-grid { grid-template-columns: 1fr; } .doc-card { padding: 26px; } }

/* ---------- nav ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 60;
  background: transparent; color: var(--ivory);
  transition: background .25s ease, padding .25s ease;
}
.site-header.is-stuck {
  position: fixed; background: rgba(11,13,15,.94);
  backdrop-filter: saturate(140%) blur(10px);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 30px 60px; }
.site-header:not(.is-stuck) .nav { padding-top: 44px; }
.nav-links { display: flex; gap: 26px; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; font-weight: 500; }
/* Elementor's frontend CSS (still loaded on legacy pages) inflates bare <a>
   to 16px, so the header nav looked bigger on some pages. Pin the size on the
   link itself with header-scoped specificity so it is 10px on every page. */
.site-header .nav-links a { font-size: 10px; font-weight: 500; line-height: 1.4; text-transform: uppercase; }
.nav-links a { padding: 6px 0; border-bottom: 1px solid transparent; }
.nav-links a:hover, .nav-links a.is-active { border-bottom-color: var(--leaf); color: var(--leaf); }
.nav-right { display: flex; align-items: center; gap: 28px; }
.lang { font-size: 10px; letter-spacing: .24em; opacity: .55; white-space: nowrap; }
@media (max-width: 1400px) { .lang { display: none; } }

.lock { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.lock .lv { font-size: 38px; line-height: .86; }
.lock-rule { width: 1px; align-self: stretch; background: rgba(239,235,227,.22); }
.lock-txt {
  font-family: var(--sans); font-size: 8.5px; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; line-height: 1.85;
  color: rgba(239,235,227,.62); white-space: nowrap;
}
.lite .lock-rule { background: rgba(31,36,33,.20); }
.lite .lock-txt  { color: rgba(31,36,33,.58); }

.nav-toggle { display: none; background: none; border: 0; color: inherit; padding: 10px; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; margin: 5px 0; transition: transform .2s ease, opacity .2s ease; }
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- mobile menu: keep the toggle above the drawer so it can close ---------- */
.nav-open .site-header { z-index: 90; }         /* drawer is z-index 70 */
.nav-open .nav-toggle { color: var(--ivory); position: relative; z-index: 91; }
.nav-open .lock { position: relative; z-index: 91; }


/* ---------- hero ---------- */
/* The hero grows with its copy at every width. A fixed height plus an
   absolutely-bottomed body let long content ride up under the transparent
   header — inline heights on templates are treated as minimums only. */
.hero {
  position: relative; overflow: hidden; background: var(--ink);
  display: flex; align-items: flex-end;
  min-height: 820px; height: auto !important;
  padding-top: calc(var(--nav-h) + 70px);
}
.hero > img, .hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Video and poster occupy the same box; the poster fades out once the clip
   has enough frames to play, so there is never a blank or a jump. */
.hero-video, .hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-video { opacity: 0; transition: opacity .9s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-poster { z-index: 1; transition: opacity .9s ease; }
.hero-video.is-playing + .hero-poster { opacity: 0; }
/* If the clip is pulled after an error, the poster must come back. */
.hero:not(:has(.hero-video)) .hero-poster { opacity: 1; }

.hero-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(11,13,15,.88) 0%, rgba(11,13,15,.58) 44%, rgba(11,13,15,.12) 72%); }
.hero-body { position: relative; z-index: 5; max-width: 900px; padding: 0 var(--gut) 88px var(--gut); }
.hero-body .lead { color: rgba(239,235,227,.72); margin: 38px 0 44px; max-width: 460px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- trust bar ---------- */
.trust { display: flex; align-items: center; justify-content: space-between; gap: 20px;
         padding: 26px var(--gut); background: var(--charcoal); color: var(--ivory); flex-wrap: wrap; }
.trust .item { font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: rgba(239,235,227,.55); font-weight: 400; }
.trust .item b { color: var(--ivory); font-weight: 600; }

/* ---------- grids ---------- */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 34px; }

.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 64px; }
.sec-head .eyebrow { margin-bottom: 22px; }

/* ---------- vertical cards ---------- */
.vert { position: relative; height: 560px; overflow: hidden; background: var(--ink); display: block; }
.vert > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.vert:hover > img { transform: scale(1.045); }
.vert .body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 28px;
  background: linear-gradient(to top, rgba(11,13,15,.95) 28%, transparent);
  color: var(--ivory);
}
.vert .num { font-family: var(--serif); font-size: 13px; color: var(--leaf); letter-spacing: .3em; margin-bottom: 16px; }
.vert h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin-bottom: 14px; letter-spacing: -.01em; }
.vert p  { font-size: 13px; color: rgba(239,235,227,.7); margin-bottom: 22px; line-height: 1.7; }
.vert .go { font-size: 10px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--leaf); }
.vert--partner { background: var(--forest); }
.vert--partner .body { background: linear-gradient(to top, rgba(15,80,50,.96) 30%, transparent); }
.vert--partner h3, .vert--partner .go { color: #fff; }
.vert--partner p { color: rgba(255,255,255,.82); }
.vert--partner .num { color: rgba(255,255,255,.7); }
.vert-watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.vert-watermark .lv { font-size: 150px; color: rgba(255,255,255,.10); }
.vert-flag { position: absolute; top: 28px; left: 28px; z-index: 5; }
.vert-flag .tag { color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 7px 13px; }

/* ---------- scale band ---------- */
.band { position: relative; height: 620px; overflow: hidden; background: var(--ink); }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,13,15,.94) 12%, rgba(11,13,15,.35) 55%, rgba(11,13,15,.6) 100%); }
.band-head { position: absolute; top: 70px; left: 0; right: 0; text-align: center; z-index: 5; padding: 0 24px; }
.band-stats { position: absolute; bottom: 64px; left: 0; right: 0; z-index: 5; }
.stat .n { font-family: var(--serif); font-size: 84px; line-height: 1; margin-bottom: 18px; font-weight: 400; color: var(--forest); }
.stat .l { font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; }
.dark .stat .n, .band .stat .n { color: var(--ivory); }
.band .stat .l { color: rgba(239,235,227,.6); }

/* ---------- pillars / process ---------- */
.pillar .idx { font-family: var(--serif); font-size: 14px; color: var(--forest); letter-spacing: .2em; margin-bottom: 20px; }
.dark .pillar .idx { color: var(--leaf); }
.pillar h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin-bottom: 14px; letter-spacing: -.01em; }
.pillar p { font-size: 14px; }

.step { border-top: 1px solid var(--line-d); padding-top: 26px; }
.dark .step { border-color: var(--line); }
.step .n { font-family: var(--serif); font-size: 15px; letter-spacing: .2em; color: var(--forest); margin-bottom: 18px; }
.dark .step .n { color: var(--leaf); }
.step h3 { font-size: 16px; margin-bottom: 10px; }
.step p { font-size: 13px; }

/* ---------- founder letter ---------- */
.founder { background: var(--sand); padding: 150px 0; }
.founder-inner { display: flex; gap: 80px; align-items: flex-start; }
.founder-photo { flex: 0 0 400px; }
.founder-photo .frame { height: 590px; overflow: hidden; background: var(--ink); }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.founder-name { font-family: var(--serif); font-size: 26px; letter-spacing: .01em; margin-top: 26px; }
.founder-letter { flex: 1; max-width: 680px; }
.founder-letter .display-sm { font-size: 38px; margin-bottom: 38px; }
.founder-letter p { font-size: 16px; line-height: 1.9; margin-bottom: 22px; }
.founder-sign { border-top: 1px solid var(--line-d); padding-top: 32px; margin-top: 18px; }
.founder-sign .who { font-size: 16px; font-weight: 500; color: var(--charcoal); margin-bottom: 34px; }
.founder-contacts { display: flex; gap: 40px; flex-wrap: wrap; }
.founder-contacts .tag { color: var(--forest); margin-bottom: 9px; }
.founder-contacts .val { font-size: 16px; font-weight: 500; }

/* ---------- projects ---------- */
.project-hero { position: relative; height: 520px; overflow: hidden; margin-bottom: 32px; }
.project-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.project-hero .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,13,15,.92) 18%, transparent 62%); }
.project-hero .body { position: absolute; left: 52px; bottom: 48px; z-index: 5; max-width: 620px; }
.project-card .frame { height: 300px; overflow: hidden; background: var(--ink); }
.project-card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.project-card:hover .frame img { transform: scale(1.045); }
.project-card .meta { padding-top: 26px; }
.project-card h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--ivory); }
.project-card .tag { color: var(--leaf); margin-bottom: 12px; display: block; }

/* ---------- calculator strip ---------- */
.calc-strip { background: var(--forest); color: #fff; }
.calc-inner { padding: 120px 60px; display: flex; justify-content: space-between; align-items: flex-end; gap: 80px; }
.calc-inner .display-sm { color: #fff; margin-bottom: 26px; }
.calc-inner p { color: rgba(255,255,255,.8); font-size: 16px; max-width: 480px; }
.calc-actions { display: flex; flex-direction: column; gap: 12px; flex: 0 0 auto; }

/* ---------- geography ---------- */
.geo p { font-size: 34px; line-height: 2; max-width: 1000px; margin: 0 auto; color: var(--ivory);
         font-family: var(--serif); font-weight: 400; }

/* ---------- reviews ---------- */
.review { border: 1px solid var(--line-d); padding: 40px 34px; height: 100%; background: #fff; }
.review .quote { font-family: var(--serif); font-size: 21px; line-height: 1.5; margin-bottom: 26px; }
.review .who { font-size: 12px; font-weight: 600; }
.review .where { font-size: 11px; color: var(--fog); margin-top: 4px; letter-spacing: .08em; }

/* ---------- FAQ ---------- */
.faq { background: var(--paper); padding: var(--sec) 0; }
.faq-item { border-bottom: 1px solid var(--line-d); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 32px 0; background: none; border: 0; text-align: left;
  font-family: var(--serif); font-size: 19px; font-weight: 300; color: inherit;
}
.faq-q .sign { color: var(--forest); font-size: 18px; font-family: var(--sans); flex: 0 0 auto; transition: transform .2s ease; }
.faq-item.is-open .faq-q .sign { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 0 32px; max-width: 780px; }
.faq-item.is-open .faq-a { display: block; }
.faq-a p { font-size: 15px; line-height: 1.8; }

/* ---------- final CTA ---------- */
.cta { position: relative; height: 520px; overflow: hidden; background: var(--ink); display: flex; align-items: center; justify-content: center; text-align: center; }
.cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta .scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,13,15,.9) 10%, rgba(11,13,15,.55) 100%); }
.cta .body { position: relative; z-index: 5; padding: 0 24px; }
.cta .display-sm { color: var(--ivory); margin-bottom: 30px; }
.cta p { color: rgba(239,235,227,.7); margin-bottom: 44px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--ivory); padding: 120px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 60px; }
.foot h4 { font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: rgba(239,235,227,.4); margin-bottom: 24px; font-weight: 600; }
.foot p, .foot li { font-size: 13px; line-height: 2.1; color: rgba(239,235,227,.65); font-weight: 300; }
.foot a:hover { color: var(--leaf); }
.foot-bot { margin-top: 70px; padding-top: 28px; border-top: 1px solid var(--line);
            display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
            font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(239,235,227,.32); }

/* ---------- mobile sticky bar ---------- */
.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: none;
  background: var(--ink); border-top: 1px solid var(--line);
}
.sticky-bar a {
  flex: 1; text-align: center; padding: 17px 4px; color: var(--ivory);
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  white-space: nowrap;
}
.sticky-bar a + a { border-left: 1px solid var(--line); }
.sticky-bar a.primary { background: var(--forest); color: #fff; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .vert > img, .project-card .frame img { transition: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1180px) {
  :root { --gut: 48px; --sec: 120px; }

  .hero { min-height: 640px; }
  .hero-body { padding-bottom: 64px; max-width: none; }
  .hero-body .lead { max-width: 560px; }
  .hero .display { font-size: 56px !important; }

  .display    { font-size: 72px; }
  .display-sm { font-size: 48px; }
  h1 { font-size: 64px; }
  h2 { font-size: 38px; }
  .wrap-wide, .wrap { padding: 0 40px; }
  .nav { padding: 24px 40px; }
  .nav-links { gap: 26px; }
  .g4 { grid-template-columns: repeat(2,1fr); }
  .founder-inner { gap: 48px; }
  .founder-photo { flex: 0 0 320px; }
  .founder-photo .frame { height: 480px; }
  .calc-inner { padding: 90px 40px; }
}

/* The desktop link row stops fitting well before the phone breakpoint —
   swap to the drawer as soon as it would start crowding the logo. */
/* Below this the six links plus the logo lockup and the button no longer fit
   on one row — measured, not guessed — so the drawer takes over. */
@media (max-width: 1180px) {
  .nav-toggle { display: block; order: 3; }
  .nav-right { display: none; }
  /* The sticky header uses backdrop-filter, which makes it the containing
     block for fixed descendants — so the drawer is sized in viewport units
     explicitly rather than with inset:0, which would resolve to the header. */
  .nav-links {
    position: fixed; top: 0; left: 0; z-index: 70;
    width: 100vw; height: 100svh; height: 100vh;
    flex-direction: column; justify-content: center; align-items: center; gap: 30px;
    background: rgba(11,13,15,.98); font-size: 13px; letter-spacing: .3em;
    transform: translateY(-110vh); transition: transform .3s cubic-bezier(.2,.6,.2,1);
  }
  .nav-open .nav-links { transform: none; }
  .nav-open { overflow: hidden; }
  /* 44px minimum touch target — the drawer links are the primary mobile nav. */
  .nav-links a { padding: 14px 24px; }
}

@media (max-width: 900px) {
  .g3 { grid-template-columns: 1fr; gap: 32px; }
  .g2 { grid-template-columns: 1fr; }
  .founder-inner { flex-direction: column; }
  .founder-photo { flex: 0 0 auto; width: 100%; max-width: 420px; }
  .calc-inner { flex-direction: column; align-items: flex-start; gap: 40px; }
  .calc-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 44px; }
  .sec-head p { text-align: left !important; }
}

@media (max-width: 720px) {
  :root { --gut: 22px; --sec: 84px; --nav-h: 74px; }

  .nav { padding: 18px 22px; }
  .site-header:not(.is-stuck) .nav { padding-top: 22px; }
  .lock .lv { font-size: 30px; }
  .lock-txt { font-size: 7.5px; letter-spacing: .2em; }

  .display    { font-size: 34px; line-height: 1.1; }
  .display-sm { font-size: 26px; }
  h1 { font-size: 34px; line-height: 1.1; }
  h2 { font-size: 26px; }
  .lead { font-size: 15px; }
  p { font-size: 14px; }

  .hero { min-height: 100svh; padding-top: calc(var(--nav-h) + 40px); }
  .hero-body { padding: 0 22px 44px; max-width: none; }
  /* The forest eyebrow washes out against the hero photo on a phone —
     force pure white for maximum contrast on every hero, every page. */
  .hero .eyebrow,
  .hero-body .eyebrow { color: #fff !important; }
  .hero-body .lead { margin: 20px 0 26px; max-width: none; }
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }

  .trust { gap: 14px 22px; padding: 22px 22px; justify-content: flex-start; }
  .trust .item { font-size: 9.5px; letter-spacing: .16em; }

  .g4 { grid-template-columns: 1fr; gap: 18px; }
  .vert { height: 400px; }
  .vert h3 { font-size: 26px; }

  .band { height: 560px; }
  .band-head { top: 48px; }
  .band-stats { position: static; padding: 0 22px 48px; }
  .band { display: flex; flex-direction: column; justify-content: flex-end; height: auto; padding-top: 180px; }
  .band > img { height: 100%; }
  .stat .n { font-size: 44px; margin-bottom: 8px; }
  .band-stats.g4 { gap: 26px 18px; grid-template-columns: 1fr 1fr; }

  .founder { padding: 84px 0; }
  .founder-photo .frame { height: 380px; }
  .founder-letter .display-sm { font-size: 26px; margin-bottom: 26px; }
  .founder-letter p { font-size: 15px; line-height: 1.8; }

  .project-hero { height: 360px; }
  .project-hero .body { left: 22px; right: 22px; bottom: 28px; }
  .project-hero .display-sm { font-size: 28px !important; }

  .calc-inner { padding: 64px 22px; }
  .calc-actions { flex-direction: column; }
  .calc-actions .btn { width: 100%; }

  .geo p { font-size: 20px; line-height: 1.9; }

  .faq-q { font-size: 16px; padding: 24px 0; }

  .cta { height: auto; padding: 84px 0; }
  .cta-actions .btn { width: 100%; }

  .foot { padding: 72px 0 110px; }
  .foot-grid { grid-template-columns: 1fr; gap: 34px; }
  .foot-bot { flex-direction: column; gap: 10px; margin-top: 44px; }

  .sticky-bar { display: flex; }
}

@media (max-width: 380px) {
  .display { font-size: 34px; }
  .lock-txt { display: none; }
  .lock-rule { display: none; }
}

/* ============================================================
   FORMS + BROKER PROGRAMME
   ============================================================ */

.field { border: 1px solid var(--line-d); padding: 12px 16px; background: #fff; margin-bottom: 11px; }
.field label { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--charcoal);
}
.field input::placeholder { color: #B9BDB8; font-weight: 400; }
.field:focus-within { border-color: var(--forest); }
.field--required { border-color: #fff; }
.field--required label { color: var(--forest); }
.form-note { font-size: 11.5px; line-height: 1.7; margin-top: 13px; }
.form-consent { font-size: 10.5px; line-height: 1.7; margin-top: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { padding: 16px 20px; margin-bottom: 20px; font-size: 14px; }
.form-msg.ok  { background: rgba(255,255,255,.14); border-left: 3px solid #fff; }
.form-msg.err { background: rgba(176,74,50,.16); border-left: 3px solid #B04A32; }

.split { display: flex; gap: 70px; align-items: center; }
.split > * { flex: 1; }
.split .form-col { flex: 0 0 400px; }

.tier {
  border-top: 1px solid var(--line); padding: 28px 0;
  display: grid; grid-template-columns: 1.4fr .7fr 1.6fr; gap: 30px; align-items: baseline;
}
.tier:last-of-type { border-bottom: 1px solid var(--line); }
.tier h3 { color: var(--ivory); font-family: var(--serif); font-weight: 400; font-size: 26px; }
.tier .pct { font-family: var(--serif); font-size: 44px; color: var(--leaf); line-height: 1; }
.tier b { color: var(--ivory); }

.benefit { border-left: 2px solid var(--forest); padding-left: 26px; margin-bottom: 26px; }
.benefit h3 { margin-bottom: 8px; }
.benefit p { font-size: 14px; }

@media (max-width: 900px) {
  .split { flex-direction: column; align-items: stretch; gap: 40px; }
  .split .form-col { flex: 0 0 auto; }
  .tier { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .tier .pct { font-size: 34px; }
  .tier h3 { font-size: 21px; }
}

/* ============================================================
   SEASONAL CAMPAIGN WINDOW
   ============================================================ */

.campaign { padding: 34px 0; }
.campaign-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.campaign-copy { max-width: 760px; }
.campaign-eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; margin-bottom: 10px; opacity: .72; }
.campaign-head { font-family: var(--serif); font-size: 28px; line-height: 1.2; letter-spacing: -.01em; }
.campaign-text { font-size: 14.5px; line-height: 1.7; margin-top: 10px; opacity: .82; }
.campaign-actions { display: flex; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; }
.campaign-btn, .campaign-btn-ghost { padding: 15px 28px; }

.campaign--forest   { background: var(--forest); color: #fff; }
.campaign--charcoal { background: var(--charcoal); color: var(--ivory); }
.campaign--sand     { background: var(--sand); color: var(--charcoal); }

.campaign--forest .campaign-btn,
.campaign--charcoal .campaign-btn { background: #fff; color: var(--forest); }
.campaign--sand .campaign-btn { background: var(--forest); color: #fff; }
.campaign--forest .campaign-btn-ghost,
.campaign--charcoal .campaign-btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; }
.campaign--sand .campaign-btn-ghost { border-color: rgba(31,36,33,.28); color: var(--charcoal); }

@media (max-width: 900px) {
  .campaign-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .campaign-head { font-size: 22px; }
  .campaign-actions { width: 100%; }
  .campaign-actions .btn { flex: 1 1 auto; }
}

/* ============================================================
   CALCULATOR
   ============================================================ */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 40px; }
.calc-q { display: flex; flex-direction: column; }
.calc-q label { font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 12px; }
.calc-hint { font-weight: 400; color: var(--fog); letter-spacing: 0; }
.calc-q input[type="number"] {
  border: 1px solid var(--line-d); background: #fff; padding: 15px 16px;
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--charcoal); outline: 0;
}
.calc-q input[type="number"]:focus { border-color: var(--forest); }
.calc-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-opts button {
  border: 1px solid var(--line-d); background: #fff; color: var(--charcoal);
  padding: 12px 16px; font-size: 13px; font-weight: 500; transition: .15s;
}
.calc-opts button:hover { border-color: var(--forest); }
.calc-opts button.is-on { background: var(--forest); color: #fff; border-color: var(--forest); }
.calc-q[data-when] { display: none; }
.calc-q[data-when].is-shown { display: flex; }

.calc-result { border: 1px solid var(--line-d); background: #fff; padding: 44px; margin-bottom: 20px; }
.calc-badge { font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--forest); margin-bottom: 16px; }
.calc-range { font-family: var(--serif); font-size: 52px; line-height: 1.05; letter-spacing: -.02em; margin-bottom: 14px; }
.calc-note { font-size: 14px; }
.calc-mismatch { margin-top: 20px; padding: 16px 18px; background: rgba(176,74,50,.08); border-left: 3px solid #B04A32; font-size: 14px; line-height: 1.6; }
.calc-disclaim { font-size: 12px; line-height: 1.7; color: var(--fog); border-left: 2px solid var(--sand); padding-left: 16px; margin-bottom: 40px; }
.calc-disclaim strong { color: var(--charcoal); }
.calc-gate { border-top: 1px solid var(--line-d); padding-top: 40px; }
.calc-restart { background: none; border: 0; color: var(--forest); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-top: 30px; padding: 8px 0; }

@media (max-width: 720px) {
  .calc-grid { grid-template-columns: 1fr; gap: 24px; }
  .calc-range { font-size: 38px; }
  .calc-result { padding: 28px 22px; }
}

/* ---------- broker stats band ---------- */
.broker-stats { border-top: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d); padding: 44px 0; }
.broker-stats .n { font-size: 64px; margin-bottom: 12px; }
.broker-stats .l { font-size: 13px; line-height: 1.6; letter-spacing: .02em; text-transform: none; max-width: 300px; }
.stat-src { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fog); margin-top: 10px; }
@media (max-width: 720px) {
  .broker-stats { padding: 30px 0; }
  .broker-stats .n { font-size: 44px; }
}

/* ============================================================
   LANGUAGES
   The switcher, and the mirroring Arabic needs. Everything RTL
   keys off dir="rtl" on <html>, so the rules below are the only
   place the layout knows about language at all.
   ============================================================ */
.lang-switch { display: flex; gap: 12px; align-items: center; }
.lang-link {
  font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(239,235,227,.55); padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.lang-link:hover { color: var(--ivory); }
.lang-link.is-active { color: var(--ivory); border-bottom-color: var(--forest); }
.lite .lang-link { color: rgba(31,36,33,.5); }
.lite .lang-link:hover, .lite .lang-link.is-active { color: var(--charcoal); }

/* ---- Arabic: mirror the page ---- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .nav-links,
[dir="rtl"] .lock,
[dir="rtl"] .hero-cta,
[dir="rtl"] .trust,
[dir="rtl"] .doc-actions,
[dir="rtl"] .cta-actions,
[dir="rtl"] .calc-actions { flex-direction: row-reverse; }

[dir="rtl"] .hero-body,
[dir="rtl"] .band-head,
[dir="rtl"] .sec-head { text-align: right; }

[dir="rtl"] .lead,
[dir="rtl"] .hero-body .lead,
[dir="rtl"] h2,
[dir="rtl"] .display,
[dir="rtl"] .display-sm { margin-left: auto; margin-right: 0; }

[dir="rtl"] .pillar .idx,
[dir="rtl"] .step .n,
[dir="rtl"] .vert .num { text-align: right; }

[dir="rtl"] .faq-q { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .field label,
[dir="rtl"] .field input,
[dir="rtl"] .field select,
[dir="rtl"] .field textarea,
[dir="rtl"] .partner-link,
[dir="rtl"] .partner-msg,
[dir="rtl"] .doc-mail-form input { text-align: right; direction: rtl; }

[dir="rtl"] .doc-card { flex-direction: row-reverse; }
[dir="rtl"] .doc-mail > summary,
[dir="rtl"] .partner-dl { direction: rtl; }
[dir="rtl"] .go::after { content: none; }

/* Latin fragments inside Arabic — phone numbers, the brand, addresses —
   must stay left-to-right or the digits reorder themselves. */
[dir="rtl"] .lv,
[dir="rtl"] .lock-txt,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .partner-code,
[dir="rtl"] .doc-meta { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* Arabic needs a little more line height to breathe. */
[dir="rtl"] body { line-height: 1.75; }
[dir="rtl"] .display { letter-spacing: 0; }
[dir="rtl"] .eyebrow,
[dir="rtl"] .tag,
[dir="rtl"] .lang-link { letter-spacing: .08em; }

@media (max-width: 1180px) {
  .lang-switch { gap: 14px; }
  [dir="rtl"] .nav-links { flex-direction: column; }
}