/* ══════════════════════════════════════════════════════
   ANDRES RIOS — bespoke, high-craft builds
   gold · white · black — one image behind everything
   ══════════════════════════════════════════════════════ */

:root{
  --black:  #0d0b08;
  --black-2:#17130d;
  --ivory:  #f7f3ea;
  --ivory-2:#efe9dc;
  --gold:   #a8823f;
  --gold-2: #c9a45c;
  --ink:    #17130d;
  --ink-2:  rgba(23,19,13,.78);
  --ink-3:  rgba(23,19,13,.56);
  --line:   rgba(23,19,13,.12);
  --w-line: rgba(247,243,234,.14);
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --display: "Marcellus", "Times New Roman", Georgia, serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;
  --e-out: cubic-bezier(.19,1,.22,1);
  --e-in:  cubic-bezier(.7,0,.84,0);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box }

html{
  scroll-behavior:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:var(--ivory-2);
}
html::-webkit-scrollbar{ display:none; width:0; height:0 }
body::-webkit-scrollbar{ display:none; width:0; height:0 }

body{
  font-family:var(--sans);
  font-weight:300;
  color:var(--ink);
  background:transparent;   /* the fixed .bg layer is the real backdrop */
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.menu-open{ overflow:hidden }

img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul{ list-style:none }

::selection{ background:var(--gold-2); color:var(--black) }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px }

.mono{
  font-family:var(--sans);
  font-size:11px; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
}

.shell{
  max-width:1360px; margin-inline:auto;
  padding-inline:clamp(22px,4vw,64px);
}

/* ═══════════ FIXED BACKGROUND — one image behind the whole site ═══════════ */
.bg{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:var(--ivory-2) }
.bg__layer{ position:absolute; inset:0 }
.bg__layer img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  transform:scale(1.1);
  will-change:transform;
}
.bg__layer--white{
  opacity:0;
  transition:opacity .8s ease;
  -webkit-mask-image:radial-gradient(circle var(--r,0px) at var(--mx,50vw) var(--my,40vh),
    #000 0%, #000 38%, rgba(0,0,0,.5) 66%, transparent 100%);
          mask-image:radial-gradient(circle var(--r,0px) at var(--mx,50vw) var(--my,40vh),
    #000 0%, #000 38%, rgba(0,0,0,.5) 66%, transparent 100%);
}
.bg__layer--white.is-on{ opacity:1 }
.bg__vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(13,11,8,.18) 100%);
}

/* ═══════════ GOLD DUST — drifts between the image and the panels ═══════════ */
.dust{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
}

/* ═══════════ GRAIN + PROGRESS ═══════════ */
.grain{
  position:fixed; inset:-100%;
  z-index:2000; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(10) infinite;
}
@keyframes grain{
  0%,100%{ transform:translate(0,0) } 10%{ transform:translate(-5%,-8%) }
  20%{ transform:translate(-13%,3%) } 30%{ transform:translate(6%,-11%) }
  40%{ transform:translate(-3%,9%) }  50%{ transform:translate(-9%,-4%) }
  60%{ transform:translate(4%,6%) }   70%{ transform:translate(-6%,4%) }
  80%{ transform:translate(9%,-3%) }  90%{ transform:translate(-2%,7%) }
}

.progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:950; pointer-events:none;
  background:transparent;
}
.progress i{
  display:block; width:0; height:100%;
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow:0 0 12px rgba(201,164,92,.7);
}

/* ═══════════ LOADER — black curtain, gold flash, marble page ═══════════ */
body.is-loading{ overflow:hidden }
.loader{ position:fixed; inset:0; z-index:3000 }
.loader.is-done{ visibility:hidden; transition:visibility 0s 1.6s; pointer-events:none }

.loader__panel{ position:absolute; inset:0 }
.loader__panel--gold{
  background:linear-gradient(120deg, var(--gold), var(--gold-2));
  transition:transform 1s cubic-bezier(.76,0,.24,1) .14s;
}
.loader__panel--black{
  background:var(--black);
  color:var(--ivory);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(20px,3.4vh,30px);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.loader.is-done .loader__panel--black,
.loader.is-done .loader__panel--gold{ transform:translateY(-101%) }
.loader.is-done .loader__panel--black > *{ opacity:0; transition:opacity .35s ease }

.loader__emblem{
  position:relative;
  width:104px; height:104px;
  display:grid; place-items:center;
}
.loader__emblem::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(201,164,92,.25);
}
.loader__ring{
  position:absolute; inset:-10px; border-radius:50%;
  background:conic-gradient(var(--gold-2) 0 16%, transparent 16% 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
  animation:spin 1.3s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }
.loader__logo{ width:52px; height:52px; object-fit:contain; filter:invert(1) }

.loader__name{
  display:flex;
  font-family:var(--display); font-size:clamp(26px,4.6vw,46px);
  letter-spacing:.16em;
  padding-left:.16em;          /* optically recenters the tracked caps */
}
.loader__name b{
  font-weight:400;
  opacity:0; transform:translateY(26px) rotate(3deg);
  animation:lchar .8s var(--e-out) forwards;
}
.loader__name b.sp{ width:.5em }
@keyframes lchar{ to{ opacity:1; transform:none } }

.loader__tag{
  color:var(--gold-2);
  opacity:0; animation:lfade 1s ease forwards .75s;
}
@keyframes lfade{ to{ opacity:.9 } }

.loader__count{
  position:absolute; right:clamp(20px,4.5vw,64px); bottom:clamp(6px,2.4vh,26px);
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(58px,9vw,120px); line-height:1;
  color:var(--gold-2);
  text-shadow:0 0 34px rgba(201,164,92,.4);
}
.loader__count i{ font-style:italic; font-size:.32em; margin-left:6px; opacity:.7 }

.loader__bar{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:rgba(247,243,234,.12);
}
.loader__bar i{
  display:block; width:0; height:100%;
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  box-shadow:0 0 16px rgba(201,164,92,.8);
  transition:width .3s ease;
}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px;
  padding:22px clamp(22px,3.4vw,48px);
  transition:transform .6s var(--e-out), background .5s ease,
             box-shadow .5s ease, padding .5s ease;
}
.nav.is-stuck{
  background:rgba(13,11,8,.92);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 1px 0 rgba(201,164,92,.22);
  padding-block:13px;
}
.nav.is-stuck .nav__logo{ filter:invert(1) }
.nav.is-stuck .nav__name{ color:var(--ivory) }
.nav.is-stuck .nav__link{ color:var(--ivory) }
.nav.is-stuck .nav__link > span > span::after{ color:var(--gold-2) }
.nav.is-stuck .burger i{ background:var(--ivory) }
.nav.is-hidden{ transform:translateY(-110%) }

/* while the menu is open the nav rides above it: white brand, X burger */
body.menu-open .nav{
  z-index:1001;
  background:transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.menu-open .nav__logo{ filter:invert(1) }
body.menu-open .nav__name{ color:var(--ivory) }
body.menu-open .nav__links{ opacity:0; pointer-events:none }
.nav__name{ transition:color .4s ease }
.nav__links{ transition:opacity .3s ease }

.nav__brand{ display:flex; align-items:center; gap:13px; z-index:2 }
.nav__logo{ width:38px; height:38px; object-fit:contain;
  transition:transform .6s var(--e-out), filter .4s ease }
.nav__brand:hover .nav__logo{ transform:rotate(-14deg) scale(1.08) }
.nav__name{ font-size:12px; letter-spacing:.3em }

.nav__links{ display:flex; gap:clamp(22px,3vw,44px) }
.nav__link{ position:relative; font-size:12px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; padding-block:4px }
.nav__link > span{ display:block; height:1.5em; overflow:hidden }
.nav__link > span > span{
  display:block; position:relative;
  transition:transform .5s var(--e-out);
}
.nav__link > span > span::after{
  content:attr(data-t);
  position:absolute; top:100%; left:0;
  color:var(--gold);
}
.nav__link:hover > span > span{ transform:translateY(-100%) }
.nav__link::before{
  content:''; position:absolute; left:50%; bottom:-4px;
  width:4px; height:4px; border-radius:50%;
  background:var(--gold);
  transform:translateX(-50%) scale(0);
  transition:transform .4s var(--e-out);
}
.nav__link.is-active::before{ transform:translateX(-50%) scale(1) }

.burger{
  position:relative; z-index:1002;
  width:46px; height:46px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; border-radius:50%;
}
.burger i{
  display:block; width:24px; height:1.6px;
  background:var(--ink);
  transition:transform .5s var(--e-out), background .4s ease, width .4s var(--e-out);
}
.burger:hover i:nth-child(1){ width:16px }
.burger:hover i:nth-child(2){ width:28px }
body.menu-open .burger i{ background:var(--ivory) }
body.menu-open .burger i:nth-child(1){ width:24px; transform:translateY(4.3px) rotate(45deg) }
body.menu-open .burger i:nth-child(2){ width:24px; transform:translateY(-4.3px) rotate(-45deg) }

/* ═══════════ FULLSCREEN MENU ═══════════ */
.menu{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(80px,10vh,120px) clamp(26px,6vw,90px) clamp(40px,6vh,70px);
  background:rgba(13,11,8,.97);
  color:var(--ivory);
  clip-path:circle(0% at calc(100% - 46px) 44px);
  visibility:hidden;
  transition:clip-path .9s var(--e-out), visibility 0s .9s;
}
body.menu-open .menu{
  clip-path:circle(150% at calc(100% - 46px) 44px);
  visibility:visible;
  transition:clip-path .9s var(--e-out), visibility 0s 0s;
}
.menu__list{ display:flex; flex-direction:column }
.menu__item{
  position:relative;
  display:flex; align-items:baseline; gap:clamp(14px,2.4vw,28px);
  padding:clamp(8px,1.6vh,16px) 0;
  border-bottom:1px solid var(--w-line);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,5.4vh,48px); line-height:1.1;
  opacity:0; transform:translateY(44px);
  transition:opacity .7s var(--e-out), transform .7s var(--e-out),
             padding-left .5s var(--e-out), color .4s ease;
}
body.menu-open .menu__item{ opacity:1; transform:none }
.menu__item i{ font-size:11px; color:var(--gold-2) }
.menu__item:hover{ padding-left:18px; color:var(--gold-2); font-style:italic }
.menu__foot{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  margin-top:clamp(26px,5vh,46px);
}
.menu__contra{ color:var(--gold-2); border-bottom:1px solid rgba(201,164,92,.4);
  padding-bottom:3px; transition:border-color .3s }
.menu__contra:hover{ border-color:var(--gold-2) }
.menu__loc{ color:rgba(247,243,234,.4) }

/* ═══════════ SHARED SECTION CHROME ═══════════ */
/* every section wears the same soft veil as the CTA — the image stays present */
.panel{
  position:relative;
  background:
    radial-gradient(ellipse 90% 80% at 50% 45%,
      rgba(247,243,234,.82) 0%, rgba(247,243,234,.5) 55%, rgba(247,243,234,.2) 100%),
    linear-gradient(rgba(247,243,234,.38), rgba(247,243,234,.38));
  padding-block:clamp(90px,10vw,150px);
}
.panel::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 20%, rgba(168,130,63,.6) 50%, transparent 80%);
  background-size:200% 100%;
  animation:hairline 7s ease-in-out infinite;
}
@keyframes hairline{ 0%{ background-position:120% 0 } 100%{ background-position:-120% 0 } }

.panel .shell{ position:relative; z-index:1 }

/* huge ghost numeral drifting behind each section */
.sec-ghost{
  position:absolute; top:clamp(16px,3.5vw,50px); right:clamp(8px,2.5vw,44px);
  z-index:0;
  font-family:var(--display); line-height:1;
  font-size:clamp(120px,19vw,270px);
  color:transparent;
  -webkit-text-stroke:1px rgba(168,130,63,.3);
  opacity:.55;
  pointer-events:none; user-select:none;
  will-change:transform;
}

.sec-head{ position:relative }
.sec-head__num{
  display:inline-flex; align-items:center; gap:14px;
  color:var(--gold);
}
.sec-head__num::before{
  content:''; width:42px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--e-out) .15s;
}
.sec-head__num.is-in::before{ transform:scaleX(1) }
.sec-head__title{
  margin-top:clamp(16px,2vw,26px);
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,4.4vw,62px); line-height:1.06; letter-spacing:.01em;
}
.sec-head__sub{
  margin-top:14px; max-width:54ch;
  font-size:14.5px; line-height:1.7; color:var(--ink-3);
}

/* reveals */
.reveal{ transition:opacity .95s var(--e-out), transform .95s var(--e-out) }
.js .reveal{ opacity:0; transform:translateY(30px) }
.reveal.is-in{ opacity:1; transform:none }

.reveal-o{ transition:opacity .95s var(--e-out), filter .95s var(--e-out) }
.js .reveal-o{ opacity:0; filter:blur(8px) }
.reveal-o.is-in{ opacity:1; filter:none }

/* split-line text — padding keeps descenders (y, g, p) out of the clip */
.sp-line{ display:block; overflow:hidden;
  padding-bottom:.16em; margin-bottom:-.16em }
.sp-w{ display:block; transition:transform 1.1s var(--e-out) }
.js .sp-w{ transform:translateY(118%) }
.is-in .sp-w{ transform:none }

/* ═══════════ HERO ═══════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(97deg,
    rgba(247,243,234,.95) 0%, rgba(247,243,234,.84) 26%,
    rgba(247,243,234,.5) 46%, rgba(247,243,234,.1) 64%, transparent 78%);
}
.hero__content{
  position:relative; z-index:2;
  width:100%;
  max-width:1440px; margin-inline:auto;
  padding-inline:clamp(22px,4vw,64px);
  padding-top:70px;
  will-change:transform, opacity;
}
@media(min-width:901px){
  .hero__content{ padding-left:clamp(64px,10vw,170px) }
}
.hero__kicker{ color:var(--gold); margin-bottom:clamp(22px,3vh,36px) }

.hero__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(38px,6.6vw,94px);
  line-height:1.04; letter-spacing:.01em;
}
.hero__line{ display:block; overflow:hidden;
  padding-bottom:.14em; margin-bottom:-.14em }
.hero__title .w{ display:inline-block; opacity:0;
  transform:translateY(116%) rotate(2.5deg) }
.is-ready .hero__title .w{ animation:wordUp 1.05s var(--e-out) forwards }
@keyframes wordUp{ to{ opacity:1; transform:none } }
.hero__title em{ font-family:var(--serif); font-style:italic; color:var(--gold) }

/* the gold words carry a breathing glow, tuned to the background's metal */
.hero__title em, .window__line em, .cta__title em{
  font-family:var(--serif); font-style:italic;
  text-shadow:0 0 16px rgba(201,164,92,.35);
  animation:emGlow 4.6s ease-in-out infinite;
}
@keyframes emGlow{
  0%,100%{ text-shadow:0 0 12px rgba(201,164,92,.28) }
  50%{ text-shadow:0 0 28px rgba(201,164,92,.7), 0 0 68px rgba(201,164,92,.35) }
}

.hero__lead{
  margin-top:clamp(22px,3vh,36px);
  max-width:48ch;
  font-size:clamp(14px,1.05vw,15.5px); line-height:1.75;
  color:var(--ink-2);
}
.hero__actions{ margin-top:clamp(30px,4.4vh,52px) }

.hero__scroll{
  position:absolute; left:clamp(22px,4vw,64px); bottom:34px; z-index:2;
  display:flex; align-items:center; gap:14px;
  color:var(--ink-3);
}
.hero__scroll i{
  display:block; width:56px; height:1px; background:var(--ink-3);
  transform-origin:left;
  animation:scrollPulse 2.3s var(--e-out) infinite;
}
@keyframes scrollPulse{ 0%{ transform:scaleX(0) } 55%{ transform:scaleX(1) }
  100%{ transform:scaleX(0); transform-origin:right } }

.hero__hint{
  position:absolute; right:clamp(22px,4vw,64px); bottom:34px; z-index:2;
  display:flex; align-items:center; gap:12px;
  color:var(--ink-3);
  transition:opacity .8s ease;
}
.hero__hint.is-off{ opacity:0 }
.hero__hint-ring{
  position:relative; width:10px; height:10px; border-radius:50%;
  background:var(--gold);
}
.hero__hint-ring::after{
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--gold);
  animation:ping 1.8s var(--e-out) infinite;
}
@keyframes ping{ 0%{ transform:scale(.6); opacity:1 } 100%{ transform:scale(2.4); opacity:0 } }
@media (hover:none){ .hero__hint{ display:none } }

/* ═══════════ MARQUEE ═══════════ */
.marquee{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(247,243,234,.55), rgba(247,243,234,.3));
  border-top:1px solid rgba(168,130,63,.28);
  border-bottom:1px solid rgba(168,130,63,.28);
  padding-block:clamp(18px,2.2vw,30px);
}
.marquee__track{ display:flex; width:max-content; will-change:transform }
.marquee__set{ display:flex; align-items:center; flex-shrink:0 }
.marquee__set span{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(18px,2.3vw,31px); line-height:1;
  color:var(--ink-2);
  padding-inline:clamp(18px,2.4vw,34px);
  white-space:nowrap;
}
.marquee__set i{
  display:inline-block;
  font-style:normal; font-size:clamp(11px,1.2vw,16px); color:var(--gold);
  animation:spinStar 9s linear infinite;
}
@keyframes spinStar{ to{ transform:rotate(360deg) } }
.marquee__track--rev{
  margin-top:clamp(10px,1.4vw,18px);
  padding-top:clamp(10px,1.4vw,18px);
  border-top:1px solid rgba(168,130,63,.18);
}
.marquee__set--mono span{
  font-family:var(--sans); font-style:normal;
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-3);
}
.marquee__set--mono i{ font-size:9px }

/* ═══════════ MANIFESTO ═══════════ */
.statement{
  margin-top:clamp(30px,4vw,54px);
  max-width:1020px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(22px,2.9vw,42px); line-height:1.16; letter-spacing:-.018em;
}
.manifesto__cols{
  margin-top:clamp(36px,4.6vw,64px);
  max-width:960px;
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3.5vw,56px);
}
.manifesto__cols p{ font-size:14.5px; line-height:1.8; color:var(--ink-2) }

.facts{
  margin-top:clamp(50px,6vw,84px);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,34px);
}
.fact{
  border-top:1px solid var(--line);
  padding-top:18px;
  display:flex; flex-direction:column; gap:10px;
}
.fact__k{ color:var(--gold) }
.fact__v{ font-family:var(--serif); font-size:clamp(15px,1.3vw,18px) }

/* ═══════════ WINDOWS — the image shows through ═══════════ */
.window{
  position:relative;
  min-height:min(54vh,560px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(16px,2.4vh,26px);
  text-align:center;
  padding:clamp(70px,9vw,120px) clamp(22px,4vw,64px);
  background:
    radial-gradient(ellipse 90% 80% at 50% 45%,
      rgba(247,243,234,.82) 0%, rgba(247,243,234,.5) 55%, rgba(247,243,234,.2) 100%),
    linear-gradient(rgba(247,243,234,.38), rgba(247,243,234,.38));
}
.window::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent 20%, rgba(168,130,63,.6) 50%, transparent 80%);
  background-size:200% 100%;
  animation:hairline 7s ease-in-out infinite;
}
.window--short{ min-height:min(40vh,440px) }
.window__line{
  font-family:var(--display); font-weight:400;
  font-size:clamp(32px,5.8vw,82px); line-height:1.08; letter-spacing:.01em;
  text-shadow:0 1px 30px rgba(247,243,234,.55);
  will-change:transform;
}
.window__line em{ font-style:italic; color:var(--gold) }
.window__sub{ color:var(--ink-3) }

/* ═══════════ SERVICES ═══════════ */
.svc{ margin-top:clamp(40px,5vw,70px); border-top:1px solid var(--line) }
.svc__row{
  position:relative;
  display:grid; grid-template-columns:80px 1.05fr 1.3fr 60px;
  align-items:center; gap:clamp(14px,2vw,30px);
  padding:clamp(26px,3vw,42px) clamp(10px,1.4vw,22px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.svc__row::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:var(--black);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--e-out);
}
.svc__row:hover::before{ transform:scaleY(1) }
.svc__row > *{ position:relative; z-index:1 }
.svc__no{ color:var(--gold); transition:color .4s ease }
.svc__name{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,2vw,31px); letter-spacing:-.01em;
  transition:color .4s ease, transform .55s var(--e-out);
}
.svc__desc{
  font-size:13.5px; line-height:1.65; color:var(--ink-3);
  max-width:46ch;
  transition:color .4s ease;
}
.svc__arrow{
  justify-self:end;
  font-size:22px; color:var(--gold-2);
  opacity:0; transform:translateX(-18px);
  transition:opacity .45s ease, transform .55s var(--e-out);
}
.svc__row:hover .svc__no{ color:var(--gold-2) }
.svc__row:hover .svc__name{ color:var(--ivory); transform:translateX(10px) }
.svc__row:hover .svc__desc{ color:rgba(247,243,234,.72) }
.svc__row:hover .svc__arrow{ opacity:1; transform:none }

/* ═══════════ PROOF — this site is the demo ═══════════ */
.chips{
  display:flex; flex-wrap:wrap;
  gap:12px clamp(12px,1.6vw,18px);
  margin-top:clamp(30px,4vw,50px);
}
.chip{
  padding:11px 20px;
  border:1px solid rgba(168,130,63,.38); border-radius:999px;
  font-size:10.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2);
  background:rgba(247,243,234,.4);
  transition:border-color .4s ease, color .4s ease, box-shadow .5s ease,
             transform .6s var(--e-out);
}
.chip:hover{
  border-color:var(--gold);
  color:var(--ink);
  box-shadow:0 0 24px -4px rgba(201,164,92,.5);
  transform:translateY(-3px);
}
.proof__hint{
  margin-top:clamp(26px,3.4vw,42px);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(14.5px,1.3vw,18px); color:var(--ink-2);
  max-width:52ch;
}
.proof__hint i{
  font-style:normal; color:var(--gold);
  margin-right:12px;
}

/* ═══════════ PROCESS ═══════════ */
.steps{
  margin-top:clamp(40px,5vw,70px);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,3vw,44px);
}
.step{ border-top:1px solid var(--line); padding-top:24px;
  transition:transform .6s var(--e-out), border-color .5s ease }
.step:hover{ transform:translateY(-6px); border-color:rgba(168,130,63,.6) }
.step__no{ color:var(--gold) }
.step__name{
  margin-top:16px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(20px,1.8vw,27px);
}
.step p{ margin-top:12px; font-size:13.5px; line-height:1.7; color:var(--ink-2) }

/* ═══════════ PRICING — MODES ═══════════ */
.modes{
  margin-top:clamp(44px,5vw,72px);
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,20px);
  align-items:stretch;
}
.mode{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(24px,2vw,34px);
  border:1px solid rgba(168,130,63,.32);
  border-radius:16px;
  background:linear-gradient(168deg, rgba(247,243,234,.8), rgba(247,243,234,.55));
  will-change:transform;
  transition:border-color .5s ease, background .5s ease, box-shadow .5s ease;
}
.mode::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit;          /* clips the glow so the badge can overhang */
  background:radial-gradient(240px at var(--px,50%) var(--py,50%),
    rgba(201,164,92,.18), transparent 70%);
  opacity:0; transition:opacity .5s ease;
}
.mode:hover::after{ opacity:1 }
.mode:hover{
  border-color:rgba(168,130,63,.8);
  background:linear-gradient(168deg, rgba(247,243,234,.9), rgba(247,243,234,.66));
  box-shadow:0 30px 70px -32px rgba(168,130,63,.55), 0 0 0 1px rgba(201,164,92,.12);
}
.mode--star{
  border-color:rgba(168,130,63,.62);
  background:linear-gradient(168deg, rgba(201,164,92,.22), rgba(247,243,234,.6));
}
.mode__badge{
  position:absolute; top:-13px; right:20px;
  padding:7px 14px; border-radius:999px;
  background:var(--gold-2); color:var(--black);
  box-shadow:0 8px 26px -8px rgba(168,130,63,.7);
  font-size:10px; letter-spacing:.16em;
  z-index:2;
}
.mode__tag{ color:var(--gold) }
.mode__price{
  margin-top:16px;
  display:flex; align-items:baseline; gap:9px;
  font-family:var(--display);
}
.mode__price b{
  font-weight:500; font-size:clamp(32px,2.6vw,44px); line-height:1;
  color:var(--gold);
  text-shadow:0 0 22px rgba(201,164,92,.3);
}
.mode__price .mono{ color:var(--ink-3) }
.mode__brief{
  margin-top:10px;
  font-size:13.5px; line-height:1.55;
  color:var(--ink-2);
}
.mode__list{
  flex:1;
  margin-top:20px; padding-top:20px;
  border-top:1px solid rgba(168,130,63,.22);
}
.mode__list li{
  position:relative; padding-left:20px; margin-bottom:10px;
  font-size:13.5px; line-height:1.55;
  color:var(--ink-2);
}
.mode__list li:last-child{ margin-bottom:0 }
.mode__list li::before{
  content:'—'; position:absolute; left:0; color:var(--gold);
}

.modes__foot{
  margin-top:clamp(24px,3vw,36px);
  text-align:center;
  font-size:13.5px; line-height:1.8;
  color:var(--ink-2);
  max-width:64ch; margin-inline:auto;
}

/* included-in-every-mode strip */
.included__h{
  display:block; text-align:center;
  margin-top:clamp(36px,4.6vw,60px);
  color:var(--gold);
}
.included{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px clamp(18px,2.6vw,38px);
  margin-top:18px;
}
.included .inc{
  font-size:12.5px; letter-spacing:.04em;
  color:var(--ink-2);
}
.included .inc i{ font-style:normal; color:var(--gold); margin-right:7px }
.modes__foot a{
  color:var(--gold);
  border-bottom:1px solid rgba(168,130,63,.45);
  transition:border-color .3s;
}
.modes__foot a:hover{ border-color:var(--gold) }

/* ═══════════ FAQ ═══════════ */
.acc{ margin-top:clamp(36px,4.4vw,60px); border-top:1px solid var(--line); max-width:1000px;
  counter-reset:faq }
.acc__item{ border-bottom:1px solid var(--line) }
.acc__q{
  position:relative;
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  text-align:left;
  padding:clamp(18px,2vw,26px) 4px;
  padding-left:52px;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(16px,1.6vw,25px); line-height:1.2; letter-spacing:-.015em;
  transition:color .4s ease, padding-left .5s var(--e-out);
}
.acc__q::before{
  counter-increment:faq;
  content:counter(faq, decimal-leading-zero);
  position:absolute; left:4px; top:50%; transform:translateY(-50%);
  font-family:var(--sans); font-size:10px; font-weight:400;
  letter-spacing:.2em; color:var(--gold);
}
.acc__q:hover{ color:var(--gold); padding-left:62px }
.acc__item.is-open .acc__q{ color:var(--gold) }
.acc__icon{
  position:relative; flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line);
  transition:border-color .4s ease, transform .6s var(--e-out), background .4s ease;
}
.acc__icon::before,.acc__icon::after{
  content:''; position:absolute; top:50%; left:50%;
  width:12px; height:1.4px; background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .5s var(--e-out);
}
.acc__icon::after{ transform:translate(-50%,-50%) rotate(90deg) }
.acc__item.is-open .acc__icon{ transform:rotate(135deg); border-color:var(--gold);
  background:rgba(168,130,63,.08); box-shadow:0 0 18px rgba(201,164,92,.4) }
.acc__a{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .65s var(--e-out);
}
.acc__item.is-open .acc__a{ grid-template-rows:1fr }
.acc__inner{ overflow:hidden }
.acc__inner p{
  padding:2px 4px clamp(20px,2.2vw,28px);
  max-width:64ch;
  font-size:14px; line-height:1.75; color:var(--ink-2);
}

/* ═══════════ CTA ═══════════ */
.cta{
  position:relative;
  min-height:min(88vh,860px);
  display:flex; align-items:center;
  text-align:center;
  padding-block:clamp(90px,11vw,150px);
  background:radial-gradient(ellipse 90% 80% at 50% 45%,
    rgba(247,243,234,.82) 0%, rgba(247,243,234,.5) 55%, rgba(247,243,234,.2) 100%);
}
.cta__inner{ width:100% }
.cta__title{
  margin-inline:auto;
  max-width:17ch;
  font-family:var(--display); font-weight:400;
  font-size:clamp(32px,5vw,76px); line-height:1.1; letter-spacing:.01em;
}
.cta__title em{ font-style:italic; color:var(--gold) }
.cta__sub{
  margin:clamp(20px,2.8vh,30px) auto 0;
  max-width:48ch;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(14.5px,1.25vw,18px); line-height:1.6;
  color:var(--ink-2);
}
.cta__actions{
  margin-top:clamp(30px,4.4vh,52px);
  display:flex; justify-content:center;
}

/* ═══════════ BUTTONS ═══════════ */
.btn-solid{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:14px;
  padding:16px 28px; border-radius:999px;
  background:var(--black); color:var(--ivory);
  font-size:11px; font-weight:400; letter-spacing:.18em; text-transform:uppercase;
  transition:box-shadow .5s ease, color .4s ease;
  will-change:transform;
}
.btn-solid i{ font-style:normal; transition:transform .45s var(--e-out) }
.btn-solid:hover{
  box-shadow:0 24px 50px -20px rgba(13,11,8,.55), 0 0 44px -6px rgba(201,164,92,.55);
  color:var(--gold-2);
}
.btn-solid:hover i{ transform:translate(3px,-3px) }
.btn-solid::after{
  content:''; position:absolute; top:0; bottom:0; left:-80%;
  width:60%;
  background:linear-gradient(100deg, transparent, rgba(201,164,92,.35), transparent);
  transform:skewX(-20deg);
  animation:shine 3.4s var(--e-out) infinite;
}
@keyframes shine{ 0%{ left:-80% } 55%,100%{ left:130% } }
.btn-solid--big{ padding:19px 36px; font-size:12px }

/* ═══════════ FOOTER ═══════════ */
.foot{
  position:relative;
  background:rgba(13,11,8,.96);
  color:var(--ivory);
  padding-top:clamp(70px,8vw,110px);
  overflow:hidden;
}
.foot::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,164,92,.5), transparent);
}
.foot__top{
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr;
  gap:clamp(30px,4vw,60px);
  padding-bottom:clamp(50px,6vw,80px);
}
.foot__col{ display:flex; flex-direction:column; align-items:flex-start; gap:13px }
.foot__h{ color:var(--gold-2); margin-bottom:8px }
.foot__col a{
  color:rgba(247,243,234,.72); font-size:13.5px;
  transition:color .35s ease, transform .45s var(--e-out);
}
.foot__col a:hover{ color:var(--gold-2); transform:translateX(6px) }
.foot__brand{ display:flex; align-items:center; gap:15px }
.foot__brand img{ width:44px; height:44px; object-fit:contain; filter:invert(1) }
.foot__brand span{ display:flex; flex-direction:column; gap:4px }
.foot__brand b{ font-family:var(--serif); font-weight:500; font-size:19px }
.foot__brand i{ font-style:normal; font-size:10px; color:rgba(247,243,234,.5) }
.foot__brand:hover{ transform:none }
.foot__tag{
  margin-top:6px; max-width:32ch;
  font-family:var(--serif); font-style:italic;
  font-size:15px; line-height:1.55;
  color:rgba(247,243,234,.6);
}
.foot__clock{ color:var(--gold-2); font-size:13px }
.foot__loc{ font-size:13.5px; color:rgba(247,243,234,.72) }

.wordmark{
  display:flex; justify-content:center; align-items:baseline;
  padding-block:clamp(10px,2vw,30px);
  border-top:1px solid var(--w-line);
  user-select:none;
}
.wordmark .wm-word{ display:flex }
.wordmark .gap{ width:clamp(26px,4vw,60px) }
.wordmark b{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,8.2vw,120px); line-height:1.1;
  letter-spacing:.01em;
  transition:opacity .8s var(--e-out), transform .8s var(--e-out), color .4s ease;
}
.js .wordmark b{ opacity:0; transform:translateY(38%) rotate(4deg) }
.wordmark.is-in b{ opacity:1; transform:none }
.wordmark b:hover{ color:var(--gold-2) }

.foot__base{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-block:26px;
  border-top:1px solid var(--w-line);
  color:rgba(247,243,234,.5);
}
.foot__base .mono{ font-size:10px }

/* ═══════════ HUD — section counter ═══════════ */
.hud{
  position:fixed; left:clamp(18px,2.4vw,40px); bottom:24px; z-index:860;
  display:flex; align-items:center; gap:12px;
  padding:9px 16px; border-radius:999px;
  background:rgba(247,243,234,.6);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(168,130,63,.25);
  color:var(--ink-3);
  opacity:0; transform:translateY(20px);
  pointer-events:none;
  transition:opacity .6s var(--e-out), transform .6s var(--e-out);
}
.hud.is-on{ opacity:1; transform:none }
.hud i{ width:26px; height:1px; background:var(--gold) }
.hud #hudNum{ color:var(--gold) }

/* ═══════════ CTA ORBIT ═══════════ */
.orbit-wrap{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:clamp(38px,5vw,56px);
}
.orbit{
  position:absolute; inset:0; margin:auto;
  width:clamp(190px,24vw,246px); height:clamp(190px,24vw,246px);
  animation:spinStar 24s linear infinite;
  pointer-events:none;
}
.orbit text{
  font-family:var(--sans); font-size:11px; letter-spacing:.3em;
  fill:var(--gold);
}

/* ═══════════ DOCK ═══════════ */
.dock{
  position:fixed; right:26px; bottom:26px; z-index:870;
  display:flex; align-items:center; gap:16px;
  padding:10px 12px 10px 24px;
  border-radius:999px;
  background:rgba(13,11,8,.92);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border:1px solid rgba(201,164,92,.25);
  color:rgba(247,243,234,.62);
  box-shadow:0 24px 60px -24px rgba(13,11,8,.8);
  opacity:0; transform:translateY(26px) scale(.96);
  pointer-events:none;
  transition:opacity .6s var(--e-out), transform .6s var(--e-out);
}
.dock.is-on{ opacity:1; transform:none; pointer-events:auto }
.dock__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px;
  background:var(--gold-2); color:var(--black);
  transition:background .4s ease, color .4s ease;
  will-change:transform;
  animation:dockGlow 3.2s ease-in-out infinite;
}
@keyframes dockGlow{
  0%,100%{ box-shadow:0 0 0 0 rgba(201,164,92,.5) }
  50%{ box-shadow:0 0 24px 2px rgba(201,164,92,.55) }
}
.dock__btn i{ font-style:normal }
.dock__btn:hover{ background:var(--ivory) }

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1100px){
  .modes{ grid-template-columns:1fr 1fr }
  .steps{ grid-template-columns:1fr 1fr; row-gap:40px }
}

@media(max-width:900px){
  .nav__links{ display:none }
  .sec-ghost{ display:none }
  .hud{ display:none }
  .hero::before{
    background:linear-gradient(180deg,
      rgba(247,243,234,.94) 0%, rgba(247,243,234,.82) 45%,
      rgba(247,243,234,.55) 75%, rgba(247,243,234,.3) 100%);
  }
  .hero__content{ padding-top:90px }
  .manifesto__cols{ grid-template-columns:1fr }
  .facts{ grid-template-columns:1fr 1fr }
  .svc__row{ grid-template-columns:44px 1fr 44px; row-gap:8px }
  .svc__desc{ grid-column:2/-1 }
  .svc__arrow{ grid-row:1; grid-column:3 }
  .foot__top{ grid-template-columns:1fr 1fr; row-gap:44px }
}

@media(max-width:640px){
  .modes{ grid-template-columns:1fr; max-width:480px; margin-inline:auto }
  .steps{ grid-template-columns:1fr }
  .facts{ grid-template-columns:1fr; gap:16px }
  .hero__lead{ max-width:100% }
  .hero__hint{ display:none }
  .dock{ right:14px; bottom:14px; padding-left:18px }
  .dock > .mono{ display:none }
  .menu{ padding-inline:26px }
  .foot__top{ grid-template-columns:1fr }
  .cta__sub{ padding-inline:10px }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal,.js .reveal-o,.js .sp-w,.js .wordmark b,.js .hero__title .w{
    opacity:1 !important; transform:none !important; filter:none !important;
  }
  .hero__hint,.grain,.dust{ display:none }
  .bg__layer--white{ opacity:0 !important }
  html{ scroll-behavior:auto }
}