/* =========================================================
   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%);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  /* 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)}
.s-light .stats{background:var(--line-dark);border-color:var(--line-dark)}
.s-light .stat{background:var(--bone)}
.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)}
.s-light .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;
  /* The standard `mask` comes after the -webkit- one and resets it, so it has
     to carry both layers too, or the tick is not punched out of the disc. */
  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);
  mask-composite:exclude;
  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 h3{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)}

/* 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 h3{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)}

/* ---------- 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,.field > .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:var(--grey)}
.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;width:1px;height:1px;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)}
/* Sin gap en el track: con gap, translateX(-50%) no cae en la costura y la
   banda pega un tiron de gap/2 en cada vuelta. La separacion va en el item. */
.marquee-track{display:flex;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;margin-right:60px}
.marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Footer ---------- */
/* El colchon inferior reserva el alto del boton flotante de WhatsApp. */
.footer{background:var(--black);border-top:1px solid var(--line);padding:clamp(56px,6vw,88px) 0 clamp(96px,10vw,112px)}
.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 .foot-h{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:var(--grey)}
.footer-bottom nav{display:flex;gap:22px}
.footer-bottom nav a{font-size:12.5px;color:var(--grey)}
.footer-bottom nav a:hover{color:var(--gold)}
.disclaimer{margin-top:32px;padding-top:26px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.75;color:var(--grey);max-width:92ch}

/* ---------- 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 aparece despues de .card/.pcard/.offer y su `transition` shorthand
   reduce la lista a opacity+transform, con lo que el border-color del hover
   cambia de golpe y el translateY queda anulado por .rv.in{transform:none}. */
.card.rv,.pcard.rv,.offer.rv,.person.rv{
  transition:opacity var(--t-slow) var(--ease-premium),
             transform var(--t-slow) var(--ease-premium),
             border-color .45s var(--ease),box-shadow .45s var(--ease);
}
.card.rv.in:hover{transform:translateY(-6px)}
.pcard.rv.in:hover{transform:translateY(-7px)}
.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.
   ========================================================= */

/* ---- No flash before the split ----
   motion.js rewrites each headline into masked lines, but it can only run
   after the first paint. Without this the raw headline is painted, then
   yanked out of view and slid back in, which reads as a duplicate. The class
   is set by an inline script in <head>, so a visitor without JS never gets it
   and the failsafe keyframe reveals the text anyway if the script dies. */
.pre-split .h-display,.pre-split .hero .h1,.pre-split .sec-head .h2,
.pre-split .sec-head-split .h2,.pre-split .cta .h1,.pre-split .quote p{
  visibility:hidden;
  animation:bootFailsafe 0s linear 2.5s forwards;
}
@keyframes bootFailsafe{to{visibility:visible}}

/* Same story for the image frames: their clip is gated on .js-motion, so if
   that class only arrives with the script the photos flash in and out.
   The 3s failsafe only survives when motion.js never booted. Left unguarded
   it fires on every load and force-opens every frame below the fold, which
   kills the wipe on everything the visitor has not scrolled to yet. */
.js-motion .media:not(.in){animation:mediaFailsafe 0s linear 3s forwards}
.js-motion.motion-ready .media:not(.in){animation:none}
@keyframes mediaFailsafe{to{clip-path:inset(0 0 0 0 round var(--mr))}}

/* ---- 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}

/* The gradient line needs a taller box than its glyphs, or background-clip:text
   leaves descenders unpainted. Negative margins cancel the layout cost. */
.lines .line.grad{padding:.12em 0 .24em;margin:-.12em 0 -.24em}
/* Same protection when the headline is never split (reduced motion). */
.fade-text:not(.lines){padding-bottom:.18em;margin-bottom:-.18em}

/* ---- 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%}
.js-motion .step-art{--mr:0px}
.js-motion .step-art.is-empty{--mr:12px}

/* ---- 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{height:auto;min-height:250px;aspect-ratio:16/9}
  .mosaic .m-big{grid-row:auto;aspect-ratio:16/9}
  .mosaic{grid-template-columns:repeat(2,1fr)}
}
@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;white-space:normal;text-align:center}
  .btn-row{flex-direction:column}
}
/* Movil apaisado: el panel mide mas que la ventana y hay que apretarlo. */
@media (max-height:600px){
  .mobile-nav{padding-top:88px;padding-bottom:28px}
  .mobile-nav a:not(.btn){padding:12px 2px;font-size:clamp(18px,4.4vw,24px)}
  .mobile-nav .btn{margin-top:20px}
}

@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}
}