/* =========================================================
   SEVEN X CAPITAL / Design System
   Black / Bone / champagne gold. Inter 800. Pill geometry.
   ========================================================= */

:root{
  /* Surfaces */
  --black:#000000;
  --ink:#070707;
  --panel:#0C0C0C;
  --panel-2:#131313;
  --bone:#F4F2ED;
  --bone-2:#E9E5DC;
  --white:#FFFFFF;

  /* Ink */
  --grey:#8C8C8C;
  --grey-2:#B5B5B5;
  --grey-dark:#5E5C58;

  /* Accent: champagne bronze */
  --gold:#C2A063;
  --gold-lite:#E8D5A8;
  --gold-deep:#8E7136;
  --gold-grad:linear-gradient(135deg,#E8D5A8 0%,#C2A063 48%,#8E7136 100%);

  /* Lines */
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.20);
  --line-dark:rgba(0,0,0,.12);

  /* Metrics */
  --wrap:1280px;
  --pad:clamp(20px,4vw,40px);
  --sec:clamp(76px,9vw,150px);
  --r:18px;
  --r-lg:26px;

  --ease:cubic-bezier(.22,.61,.36,1);
  /* Premium archetype: one signature curve, zero overshoot. */
  --ease-premium:cubic-bezier(.4,0,.2,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-veil:cubic-bezier(.76,0,.24,1);
  --t-quick:.35s;
  --t-std:.5s;
  --t-slow:.8s;
}

*,*::before,*::after{box-sizing:border-box}
/* No native smooth scroll. Lenis owns scrolling; the two fight each other. */
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:"Inter","Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--gold);color:#000}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:900px}
.section{padding:var(--sec) 0;position:relative}
.s-light{background:var(--bone);color:var(--black)}
.s-panel{background:var(--ink)}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ---------- Type scale ---------- */
/* Editorial kicker: a rule across the column with the label sitting under it.
   The floating short dash plus wide-tracked caps is the stock template
   pattern, so the dash is gone and the tracking is pulled in. */
.eyebrow{
  display:block;
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-bottom:26px;
}
.eyebrow::before{display:none}
.eyebrow.center{text-align:center}
.section .eyebrow,.cta .eyebrow{
  border-top:1px solid var(--line-strong);padding-top:15px;
}
.s-light .eyebrow{border-top-color:rgba(0,0,0,.18)}
/* In the hero the rule would cut the composition in half, so it stays off. */
.hero .eyebrow{border-top:0;padding-top:0;letter-spacing:.16em}

.h-display{font-size:clamp(44px,7.4vw,104px)}
.h1{font-size:clamp(38px,6vw,80px)}
.h2{font-size:clamp(32px,4.4vw,60px)}
.h3{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.025em}
.h4{font-size:clamp(18px,1.6vw,21px);letter-spacing:-.02em;line-height:1.25}

.lead{font-size:clamp(16px,1.35vw,19px);line-height:1.65;color:var(--grey-2);max-width:62ch}
.s-light .lead{color:var(--grey-dark)}
.muted{color:var(--grey)}
.s-light .muted{color:var(--grey-dark)}
.gold{color:var(--gold)}
/* Vertical ramp. Only the last line of a headline carries it (motion.js keeps
   every line above it solid white), so the fade reads top to bottom on it. */
.fade-text{
  background:linear-gradient(180deg,#fff 12%,#9a9a9a 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* ---------- Buttons ---------- */
/* No transparent borders anywhere on a filled shape: `transparent` is
   rgba(0,0,0,0), so antialiasing a rounded edge blends toward black and
   leaves a dark halo. Outlined variants use an inset shadow instead, which
   costs no layout size, so every pill stays exactly the same dimensions. */
.btn{
  display:inline-flex;align-items:center;gap:12px;position:relative;
  padding:17px 31px;border-radius:999px;border:0;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t-std) var(--ease-premium),color var(--t-std) var(--ease-premium),
             box-shadow var(--t-std) var(--ease-premium),
             filter var(--t-std) var(--ease-premium),transform .55s var(--ease-premium);
}
.btn svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(5px)}
.btn-gold{background:var(--gold-grad);color:#000}
.btn-gold:hover{filter:brightness(1.12);box-shadow:0 10px 34px rgba(194,160,99,.28)}
.btn-white{background:var(--white);color:#000}
.btn-white:hover{background:var(--gold-lite)}
.btn-ghost{box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--white)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--gold);color:var(--gold)}
.s-light .btn-ghost{box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);color:#000}
.s-light .btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--gold-deep);color:var(--gold-deep)}
.btn-dark{background:#000;color:#fff}
.btn-dark:hover{background:var(--gold-deep)}
.btn-sm{padding:13px 23px;font-size:11px}

/* Keyboard focus stays visible and on-brand; mouse clicks get nothing. */
.btn:focus-visible,.filters button:focus-visible,.faq-q:focus-visible,.burger:focus-visible,
a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;
}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.btn-row.center{justify-content:center}

.link-arrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  padding-bottom:4px;border-bottom:1px solid rgba(194,160,99,.3);transition:.3s var(--ease);
}
.link-arrow:hover{border-color:var(--gold);gap:14px}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:18px 0;transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s;
  border-bottom:1px solid transparent;
}
.header.scrolled{
  background:rgba(0,0,0,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  padding:11px 0;border-bottom-color:var(--line);
}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:1400px}

/* ---------- Logo ----------
   Real artwork lives in /brand. Until a file is dropped in, the CSS
   lockup below stands in, so the header is never empty. */
.logo{display:flex;align-items:center;gap:11px;flex:none}
/* The wordmark carries the "We grow together" tagline underneath, so it needs
   more height than a bare lockup before the tagline stops being legible. */
.logo-img{height:42px;width:auto;display:none;transition:height .4s var(--ease)}
.logo.has-art .logo-img{display:block}
.logo.has-art .logo-mark,.logo.has-art .logo-txt{display:none}
.header.scrolled .logo-img{height:36px}
.footer .logo-img{height:48px}
.logo-mark{
  width:42px;height:42px;border-radius:11px;background:var(--gold-grad);
  display:grid;place-items:center;color:#000;font-weight:900;font-size:15px;letter-spacing:-.06em;flex:none;
}
.logo-txt{display:flex;flex-direction:column;line-height:1}
.logo-txt b{font-size:15px;font-weight:800;letter-spacing:.02em}
.logo-txt span{font-size:8.5px;letter-spacing:.28em;color:var(--grey);margin-top:4px;text-transform:uppercase}

.nav{display:flex;align-items:center;gap:34px}
.nav a{
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--grey-2);transition:color .3s;position:relative;padding:6px 0;
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.active::after{width:100%}
.nav a.active{color:var(--gold)}

.burger{display:none;width:44px;height:44px;border:1px solid var(--line-strong);background:none;border-radius:999px;cursor:pointer;position:relative}
.burger i{position:absolute;left:13px;width:18px;height:1.5px;background:#fff;transition:.3s var(--ease)}
.burger i:nth-child(1){top:18px}
.burger i:nth-child(2){bottom:18px}
.burger.open i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger.open i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:99;background:#000;padding:110px var(--pad) 40px;
  display:flex;flex-direction:column;gap:6px;
  transform:translateY(-100%);
  /* translateY(-100%) only shifts the panel by its OWN height. If that height
     ever disagrees with the visible area (a mobile address bar appearing, an
     svh/dvh mismatch) the menu peeks out. visibility makes "closed" absolute,
     and the delay lets the slide-out finish before it disappears. */
  visibility:hidden;pointer-events:none;
  transition:transform .5s var(--ease),visibility 0s linear .5s;
}
.mobile-nav.open{
  transform:translateY(0);visibility:visible;pointer-events:auto;
  transition:transform .5s var(--ease),visibility 0s linear 0s;
}
.mobile-nav{counter-reset:mnav;padding-top:120px}

/* Restrained rather than shouty: lighter weight, smaller size, and a numbered
   index so it reads as a contents page instead of a wall of headlines. */
.mobile-nav a:not(.btn){
  counter-increment:mnav;
  display:flex;align-items:baseline;gap:18px;
  font-size:clamp(22px,5.4vw,30px);font-weight:600;letter-spacing:-.02em;
  padding:19px 2px;border-bottom:1px solid var(--line);color:var(--white);
}
.mobile-nav a:not(.btn)::before{
  content:"0" counter(mnav);flex:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;letter-spacing:.16em;color:var(--gold);
}
.mobile-nav a:not(.btn):active{color:var(--gold)}
.mobile-nav .btn{margin-top:34px;justify-content:center;align-self:stretch}

/* Items arrive on a short stagger once the panel is down. */
.mobile-nav > *{opacity:0;transform:translateY(16px)}
.mobile-nav.open > *{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease-premium),transform .5s var(--ease-premium);
}
.mobile-nav.open > *:nth-child(1){transition-delay:.14s}
.mobile-nav.open > *:nth-child(2){transition-delay:.20s}
.mobile-nav.open > *:nth-child(3){transition-delay:.26s}
.mobile-nav.open > *:nth-child(4){transition-delay:.32s}
.mobile-nav.open > *:nth-child(5){transition-delay:.40s}

/* ---------- Floating WhatsApp ----------
   A disc at rest that opens into a pill on hover. */
.wa{
  position:fixed;z-index:96;
  right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);
  display:flex;align-items:center;gap:0;height:56px;padding:0 15px;
  border-radius:999px;background:var(--gold-grad);color:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  transition:gap .45s var(--ease-premium),padding .45s var(--ease-premium),
             box-shadow .45s var(--ease-premium),transform .45s var(--ease-premium);
}
.wa svg{width:27px;height:27px;flex:none}
.wa span{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:max-width .45s var(--ease-premium);
}
.wa:hover{gap:11px;padding-right:22px;transform:translateY(-2px);box-shadow:0 16px 40px rgba(194,160,99,.34)}
.wa:hover span{max-width:140px}
@media (max-width:640px){.wa{height:52px;padding:0 13px}.wa svg{width:25px;height:25px}}


/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:150px 0 90px;overflow:hidden;background:var(--black);
}
.hero-sm{min-height:70svh;padding:180px 0 90px}
.hero-mark{
  position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-size:min(46vw,660px);font-weight:900;letter-spacing:-.07em;line-height:1;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  pointer-events:none;user-select:none;white-space:nowrap;
}
.hero-glow{
  position:absolute;left:50%;top:-10%;transform:translateX(-50%);
  width:min(1100px,120vw);height:640px;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(194,160,99,.16),transparent 66%);
}
.hero-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 78%);
          mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 78%);
}
.hero .wrap{position:relative;z-index:2}
.hero-center{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-center .lead{margin-inline:auto;text-align:center}
.hero-center .eyebrow::before{display:none}
.hero-center .eyebrow{justify-content:center;letter-spacing:.3em}

.scroll-cue{
  position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);
}
.scroll-cue span{width:1px;height:46px;background:linear-gradient(180deg,var(--gold),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{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}}

/* ---------- Media placeholder system ----------
   Drop a real file into /images with the matching name and it
   replaces the placeholder automatically. -------------------- */
.media{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:radial-gradient(120% 110% at 28% 0%,#1C1C1C 0%,#080808 72%);
  border:1px solid var(--line);
}
.media::before{
  content:"7X";position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  font-weight:900;font-size:clamp(34px,5.5vw,74px);letter-spacing:-.06em;color:rgba(255,255,255,.055);
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:38px 38px;
}
.media::after{
  content:attr(data-label);position:absolute;left:14px;bottom:12px;z-index:1;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.09em;
  color:rgba(255,255,255,.3);
}
/* Taller than its frame so parallax never exposes an edge. */
.media img{
  position:absolute;z-index:2;top:-7%;left:0;width:100%;height:114%;object-fit:cover;
  will-change:transform;
}
.media.is-empty img{opacity:0}
.media:not(.is-empty)::before,.media:not(.is-empty)::after{opacity:0}
.s-light .media{background:radial-gradient(120% 110% at 28% 0%,#E3DFD6 0%,#CFC9BC 75%);border-color:var(--line-dark)}
.s-light .media::before{color:rgba(0,0,0,.07);background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px)}
.s-light .media::after{color:rgba(0,0,0,.32)}

.ar-16-9{aspect-ratio:16/9}
.ar-4-3{aspect-ratio:4/3}
.ar-3-2{aspect-ratio:3/2}
.ar-1-1{aspect-ratio:1/1}
.ar-3-4{aspect-ratio:3/4}
.ar-2-3{aspect-ratio:2/3}
.ar-21-9{aspect-ratio:21/9}

/* ---------- Section headings ---------- */
.sec-head{max-width:760px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .lead{margin-inline:auto}
.sec-head .lead{margin-top:24px}
.sec-head-split{
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:end;
  margin-bottom:clamp(40px,5vw,68px);
}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r)}
.stat{background:var(--black);padding:clamp(28px,3.4vw,44px)}
.s-light .stats{background:var(--line-dark);border-color:var(--line-dark)}
.s-light .stat{background:var(--bone)}
.stat b{display:block;font-size:clamp(34px,4.6vw,60px);font-weight:800;letter-spacing:-.045em;line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat small{display:block;margin-top:14px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.s-light .stat small{color:var(--grey-dark)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:clamp(18px,2vw,28px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3vw,40px);transition:.45s var(--ease);position:relative;overflow:hidden;
}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(194,160,99,.12),transparent 62%);opacity:0;transition:opacity .45s}
.card:hover{transform:translateY(-6px);border-color:rgba(194,160,99,.42)}
.card:hover::after{opacity:1}
.card > *{position:relative;z-index:1}
.s-light .card{background:var(--white);border-color:var(--line-dark)}
.card-num{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--gold);margin-bottom:20px}
.card .h4{margin-bottom:12px}
.card p{font-size:14.5px;line-height:1.65;color:var(--grey)}
.s-light .card p{color:var(--grey-dark)}
.card-ico{
  width:52px;height:52px;border-radius:14px;border:1px solid rgba(194,160,99,.35);
  display:grid;place-items:center;margin-bottom:24px;color:var(--gold);
  background:rgba(194,160,99,.07);
}
.card-ico svg{width:22px;height:22px}

/* Project card */
.pcard{
  display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--panel);
  border:1px solid var(--line);transition:.45s var(--ease);
}
.pcard:hover{transform:translateY(-7px);border-color:rgba(194,160,99,.45)}
.pcard .media{border:0;border-radius:0}
.pcard .media img,.pcard .media::before{transition:transform .8s var(--ease)}
.pcard:hover .media img{transform:scale(1.06)}
.pcard-body{padding:26px 26px 30px}
.pcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}
.pcard h3{font-size:20px;letter-spacing:-.025em;line-height:1.2}
.pcard .loc{font-size:12.5px;color:var(--grey);margin-top:7px}
.s-light .pcard{background:var(--white);border-color:var(--line-dark)}
.s-light .pcard .loc{color:var(--grey-dark)}
.pcard-meta{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
.s-light .pcard-meta{border-color:var(--line-dark)}
.pcard-meta div{flex:1 1 33%;min-width:80px}
.pcard-meta span{display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:5px}
.pcard-meta b{font-size:14px;font-weight:700;letter-spacing:-.01em}

.tag{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:6px 13px;border-radius:999px;font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-strong);color:var(--grey-2);
}
.s-light .tag{border-color:var(--line-dark);color:var(--grey-dark)}
.tag-gold{border-color:rgba(194,160,99,.5);color:var(--gold);background:rgba(194,160,99,.08)}
.tag-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(194,160,99,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(194,160,99,0)}100%{box-shadow:0 0 0 0 rgba(194,160,99,0)}}
.tag-sold{border-color:rgba(255,255,255,.16);color:var(--grey)}

/* ---------- Split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split.rev .split-media{order:2}
.split-body .lead{margin-top:22px}

.ticks{margin-top:32px;display:flex;flex-direction:column;gap:15px}
.ticks li{display:flex;gap:14px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--grey-2)}
.s-light .ticks li{color:var(--grey-dark)}
.ticks li::before{
  content:"";flex:none;width:19px;height:19px;margin-top:2px;border-radius:50%;
  background:var(--gold-grad);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat,
          linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
  border:1px solid rgba(194,160,99,.45);
}

/* ---------- Process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.steps-5{grid-template-columns:repeat(5,1fr)}
/* Slot for the hand-drawn line illustrations from the brand kit. */
.step-art{
  width:66px;height:66px;margin-bottom:26px;border:0;border-radius:0;background:none;
}
.step-art img{position:static;width:100%;height:100%;object-fit:contain;top:0}
.step-art.is-empty{
  border:1px dashed var(--line-strong);border-radius:12px;
  background:rgba(255,255,255,.02);
}
.s-light .step-art.is-empty{border-color:rgba(0,0,0,.18);background:rgba(0,0,0,.02)}
.step-art::after{font-size:0}
.s-light .steps{border-color:var(--line-dark)}
.step{padding:38px 30px 8px;border-right:1px solid var(--line);position:relative}
.s-light .step{border-color:var(--line-dark)}
.step:last-child{border-right:0}
.step::before{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--gold);transition:width .7s var(--ease)}
.step.in::before{width:100%}
.step b{display:block;font-size:11px;letter-spacing:.2em;color:var(--gold);margin-bottom:20px}
.step h4{font-size:19px;margin-bottom:12px;letter-spacing:-.02em}
.step p{font-size:14px;color:var(--grey);line-height:1.62}
.s-light .step p{color:var(--grey-dark)}

/* ---------- Offering (invest) ---------- */
.offer{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:0;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel);
  transition:.45s var(--ease);
}
.offer:hover{border-color:rgba(194,160,99,.4)}
.offer .media{border:0;border-radius:0;height:100%;min-height:330px}
.offer-body{padding:clamp(28px,3.2vw,46px);display:flex;flex-direction:column}
.offer-body h3{font-size:clamp(24px,2.6vw,34px);margin:16px 0 10px}
.offer-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:28px 0 22px}
.offer-metrics div{background:var(--panel);padding:18px 16px}
.offer-metrics span{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.offer-metrics b{font-size:clamp(18px,1.8vw,23px);font-weight:800;letter-spacing:-.03em;color:var(--gold)}
.progress{margin-top:auto}
.progress-bar{height:5px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;margin:12px 0 26px}
.progress-bar i{display:block;height:100%;border-radius:999px;background:var(--gold-grad);width:0;transition:width 1.4s var(--ease)}
.progress-top{display:flex;justify-content:space-between;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.progress-top b{color:#fff;font-weight:700}

/* The offering card is a dark slab, so it must keep dark-surface colors even
   when it sits inside a light section. */
.offer{color:var(--white)}
.s-light .offer .muted,.s-light .offer .loc{color:var(--grey)}
.s-light .offer .tag{border-color:var(--line-strong);color:var(--grey-2)}
.s-light .offer .tag-gold{border-color:rgba(194,160,99,.5);color:var(--gold);background:rgba(194,160,99,.08)}
.s-light .offer .media{background:radial-gradient(120% 110% at 28% 0%,#1C1C1C 0%,#080808 72%);border-color:var(--line)}
.s-light .offer .media::before{
  color:rgba(255,255,255,.055);
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
}
.s-light .offer .media::after{color:rgba(255,255,255,.3)}

/* ---------- Filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:44px}
.filters button{
  padding:12px 23px;border-radius:999px;background:none;border:0;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-2);
  cursor:pointer;transition:.3s var(--ease);
}
.filters button:hover{color:#fff;box-shadow:inset 0 0 0 1px #fff}
.filters button.active{background:var(--gold-grad);box-shadow:none;color:#000}
.s-light .filters button{box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);color:var(--grey-dark)}
.s-light .filters button:hover{color:#000;box-shadow:inset 0 0 0 1px #000}
.s-light .filters button.active{box-shadow:none;color:#000}
.s-light .pcard-meta span{color:var(--grey-dark)}

/* ---------- Quote ---------- */
.quote{max-width:940px;margin:0 auto;text-align:center}
.quote p{font-size:clamp(21px,2.9vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.28}
.quote footer{margin-top:34px;display:flex;align-items:center;justify-content:center;gap:16px}
.quote .avatar{width:52px;height:52px;border-radius:50%;overflow:hidden;flex:none}
.quote .avatar::before{font-size:15px}
.quote .avatar::after{display:none}
.quote cite{font-style:normal;text-align:left}
.quote cite b{display:block;font-size:14.5px;font-weight:700}
.quote cite span{display:block;font-size:12px;color:var(--grey);margin-top:3px}

/* ---------- Team ---------- */
.person .media{margin-bottom:20px;border-radius:var(--r)}
.person h4{font-size:18px;letter-spacing:-.02em}
.person span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:8px}
.person p{margin-top:14px;font-size:14px;line-height:1.6;color:var(--grey)}
.s-light .person p{color:var(--grey-dark)}

/* ---------- Timeline ---------- */
.timeline{border-top:1px solid var(--line-dark)}
.s-dark .timeline{border-color:var(--line)}
.tl-row{display:grid;grid-template-columns:180px 1fr;gap:40px;padding:34px 0;border-bottom:1px solid var(--line-dark)}
.s-dark .tl-row{border-color:var(--line)}
.tl-row b{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.04em;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.tl-row h4{margin-bottom:10px}
.tl-row p{font-size:15px;color:var(--grey-dark);max-width:62ch}
.s-dark .tl-row p{color:var(--grey)}

/* ---------- Mosaic gallery ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mosaic .media{border-radius:14px}
.mosaic .m-big{grid-column:span 2;grid-row:span 2}

/* ---------- Forms ---------- */
.form{display:grid;gap:18px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:9px}
.field > label{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px;
  padding:15px 17px;font-size:15px;color:#fff;transition:.3s var(--ease);width:100%;
}
.field textarea{min-height:140px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#5a5a5a}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(194,160,99,.05)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:18px;padding-right:44px}
.field select option{background:#111;color:#fff}
.form-note{font-size:12.5px;color:var(--grey);line-height:1.6}

.choice{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.choice label{
  display:flex;flex-direction:column;gap:6px;cursor:pointer;padding:18px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.025);transition:.3s var(--ease);
  font-size:14px;font-weight:400;letter-spacing:normal;text-transform:none;color:var(--white);
}
.choice label:hover{border-color:var(--line-strong)}
.choice label b{font-size:14px;font-weight:700;letter-spacing:-.01em}
.choice label span{font-size:12px;color:var(--grey);line-height:1.45}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice input:checked + b{color:var(--gold)}
.choice label:has(input:checked){border-color:var(--gold);background:rgba(194,160,99,.08)}

.form-ok{
  display:none;padding:22px;border-radius:14px;border:1px solid rgba(194,160,99,.45);
  background:rgba(194,160,99,.08);font-size:14.5px;color:var(--gold-lite);
}
.form-ok.show{display:block}

/* ---------- Google map embed ----------
   Keyless embed. Inverted so a stock light map reads as part of a black page;
   the light sections get the untouched original. */
.map{
  position:relative;overflow:hidden;border-radius:var(--r);
  border:1px solid var(--line);background:var(--panel);aspect-ratio:16/10;
}
.map iframe{
  width:100%;height:100%;border:0;display:block;
  filter:invert(92%) hue-rotate(180deg) saturate(.35) contrast(.92);
}
.map-tag{
  position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:9px;
  padding:9px 15px;border-radius:999px;background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(194,160,99,.32);
  font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
}
.map-tag svg{width:13px;height:13px;flex:none}
.s-light .map{border-color:var(--line-dark);background:var(--bone-2)}
.s-light .map iframe{filter:grayscale(.85) contrast(.95)}

/* ---------- Contact info ---------- */
.info-row{display:flex;gap:18px;padding:26px 0;border-bottom:1px solid var(--line)}
.info-row:first-child{border-top:1px solid var(--line)}
.info-row .card-ico{
  margin:0;width:44px;height:44px;border-radius:12px;flex:none;
  display:grid;place-items:center;   /* restated: the label rule below is a span rule too */
}
.info-row .card-ico svg{width:18px;height:18px}
/* Scoped to the text column. Unscoped, this also matched .card-ico (a span)
   and knocked its grid centering back to block, pinning the icon top-left. */
.info-row > div > span{display:block;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);margin-bottom:7px}
.info-row b{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.45;display:block}
.info-row a b:hover{color:var(--gold)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;text-align:left;
  padding:26px 0;background:none;border:0;cursor:pointer;font-size:clamp(16px,1.7vw,20px);font-weight:700;letter-spacing:-.02em;
}
.faq-q i{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);position:relative;transition:.35s var(--ease)}
.faq-q i::before,.faq-q i::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:.35s var(--ease)}
.faq-q i::before{width:11px;height:1.5px;transform:translate(-50%,-50%)}
.faq-q i::after{width:1.5px;height:11px;transform:translate(-50%,-50%)}
.faq-item.open .faq-q{color:var(--gold)}
.faq-item.open .faq-q i{border-color:var(--gold);transform:rotate(180deg)}
.faq-item.open .faq-q i::after{transform:translate(-50%,-50%) scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.faq-a p{padding-bottom:28px;font-size:15px;line-height:1.7;color:var(--grey);max-width:78ch}
.s-light .faq,.s-light .faq-item{border-color:var(--line-dark)}
.s-light .faq-q i{border-color:rgba(0,0,0,.22)}
.s-light .faq-a p{color:var(--grey-dark)}

/* ---------- CTA band ---------- */
.cta{position:relative;overflow:hidden;background:var(--black);text-align:center;padding:clamp(80px,10vw,150px) 0}
.cta .hero-glow{top:auto;bottom:-40%;height:520px}
.cta .wrap{position:relative;z-index:2}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;background:var(--ink)}
.marquee-track{display:flex;gap:60px;width:max-content;animation:slide 34s linear infinite}
.marquee span{font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);white-space:nowrap;display:flex;align-items:center;gap:60px}
.marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Footer ---------- */
.footer{background:var(--black);border-top:1px solid var(--line);padding:clamp(56px,6vw,88px) 0 34px}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:44px;padding-bottom:52px;border-bottom:1px solid var(--line)}
.footer h5{font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin:0 0 22px}
.footer-links{display:flex;flex-direction:column;gap:13px}
.footer-links a{font-size:14.5px;color:var(--grey-2);transition:.3s}
.footer-links a:hover{color:var(--gold)}
.footer-brand p{margin-top:22px;font-size:14px;color:var(--grey);line-height:1.65;max-width:34ch}
.socials{display:flex;gap:10px;margin-top:26px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--grey-2);transition:.3s var(--ease)}
.socials a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.socials svg{width:16px;height:16px}
.footer-bottom{padding-top:28px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.footer-bottom p{font-size:12.5px;color:#666}
.footer-bottom nav{display:flex;gap:22px}
.footer-bottom nav a{font-size:12.5px;color:#666}
.footer-bottom nav a:hover{color:var(--gold)}
.disclaimer{margin-top:32px;padding-top:26px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.75;color:#5a5a5a;max-width:110ch}

/* ---------- Reveal (primary layer) ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity var(--t-slow) var(--ease-premium),transform var(--t-slow) var(--ease-premium)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}

/* =========================================================
   MOTION LAYER
   Everything below only engages once motion.js has flagged the
   document with .js-motion, so the page is fully legible if the
   script never runs.
   ========================================================= */

/* ---- Headline reveal, line by line (primary) ---- */
/* The mask clips the line so it can slide up into place, but at line-height 1
   the descenders (g, y, p) and the accents fall outside the box and get
   sliced. Pad the mask on both sides and cancel it with negative margins so
   the spacing is untouched, then push the start position past the new padding
   so nothing peeks out before the reveal. */
.lines .line-mask{
  display:block;overflow:hidden;
  padding:.14em 0 .3em;
  margin:-.14em 0 -.3em;
}
/* Clipping is switched off once the line has landed, so nothing can be cut. */
.lines.landed .line-mask{overflow:visible}
.lines .line{
  display:block;
  transform:translateY(150%);
  transition:transform 1s var(--ease-expo);
}
.lines.in .line{transform:translateY(0)}
.quote p.lines .line{padding-right:.08em}

/* ---- Image frames wipe open (primary) ---- */
.js-motion .media{
  --mr:var(--r);
  clip-path:inset(0 0 var(--wipe,0%) 0 round var(--mr));
  transition:clip-path 1.05s var(--ease-expo);
}
.js-motion .media:not(.in){--wipe:100%}
.js-motion .pcard .media,.js-motion .offer .media{--mr:0px}
.js-motion .mosaic .media{--mr:14px}
.js-motion .quote .avatar{--mr:50%}

/* ---- Content trailing its container (secondary, ~40% amplitude) ---- */
.js-motion .has-trail .trail{
  opacity:0;transform:translateY(9px);
  transition:opacity .7s var(--ease-premium),transform .7s var(--ease-premium);
}
.js-motion .has-trail.in .trail{opacity:1;transform:none}

/* ---- Ambient: film grain over the whole page ---- */
.grain{
  position:fixed;top:-50%;left:-50%;width:200%;height:200%;
  z-index:9998;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 5.6s steps(7) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}       14%{transform:translate(-3%,-2%)}
  28%{transform:translate(2%,-4%)}   42%{transform:translate(-4%,3%)}
  56%{transform:translate(3%,2%)}    70%{transform:translate(-2%,4%)}
  84%{transform:translate(4%,-3%)}   100%{transform:translate(0,0)}
}

/* ---- Ambient: the hero glow breathes, very slowly ---- */
.hero-glow{animation:drift 19s ease-in-out infinite}
@keyframes drift{
  0%,100%{opacity:.85;transform:translateX(-50%) scale(1)}
  50%{opacity:1;transform:translateX(-50%) scale(1.09)}
}
.cta .hero-glow{animation-duration:23s}

/* ---- Ambient: gold sheen crossing the primary CTA ---- */
.btn-gold{
  background:linear-gradient(115deg,#C2A063 0%,#E8D5A8 16%,#C2A063 34%,#8E7136 62%,#C2A063 100%);
  background-size:260% 100%;background-position:100% 0;
  animation:sheen 7s var(--ease-premium) infinite;
}
@keyframes sheen{0%{background-position:100% 0}22%,100%{background-position:0 0}}

/* ---- Scroll progress hairline ---- */
.scroll-prog{
  position:fixed;top:0;left:0;width:100%;height:2px;z-index:120;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:0 50%;
  pointer-events:none;
}

/* ---- Page transition veil ----
   The lift runs as a CSS animation, not off a JS class, so a script
   error can never strand the page behind a black panel. */
.veil{
  position:fixed;inset:0;z-index:9999;background:var(--black);
  display:grid;place-items:center;pointer-events:none;
  transform:translateY(-100%);
  animation:veilLift .72s var(--ease-veil) .06s both;
}
.veil-mark{height:clamp(76px,13vw,150px);width:auto;display:block}
@keyframes veilLift{from{transform:translateY(0)}to{transform:translateY(-100%)}}
@keyframes veilDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.is-leaving .veil{animation:veilDrop .46s var(--ease-veil) both}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .steps,.steps-5{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2){border-right:0}
  .steps-5 .step:nth-child(2n){border-right:0}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav{display:none}
  .header .btn{display:none}
  .burger{display:block}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:36px}
  .split.rev .split-media{order:0}
  .sec-head-split{grid-template-columns:1fr;gap:26px;align-items:start}
  .offer{grid-template-columns:1fr}
  .offer .media{min-height:250px;aspect-ratio:16/9}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .tl-row{grid-template-columns:1fr;gap:14px}
}
@media (max-width:640px){
  .logo-img,.header.scrolled .logo-img{height:32px}
  .footer .logo-img{height:40px}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .step{border-right:0;border-bottom:1px solid var(--line)}
  .steps-5{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .choice{grid-template-columns:1fr}
  .offer-metrics{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr;gap:38px}
  .mosaic .m-big{grid-column:span 2}
  .btn{width:100%;justify-content:center}
  .btn-row{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  /* Spatial motion out, content in. Nothing may stay hidden. */
  .lines .line{transform:none}
  .media{clip-path:none!important}
  .trail{opacity:1!important;transform:none!important}
  .grain,.veil{display:none!important}
  .btn-gold{background:var(--gold-grad);background-size:auto}
}