/* ============================================================
   SCENYQ ELYSIA
   Luxury technology integration studio
   ------------------------------------------------------------
   01  Tokens
   02  Reset & base
   03  Typography
   04  Primitives (shell, buttons, links, eyebrow, tags, lists)
   05  Brand mark
   06  Navigation & mobile menu
   07  Generated visuals (.viz)
   08  Hero
   09  Brand thread
   10  Manifesto
   11  Four pillars
   12  Home automation
   13  Audio visual
   14  Security
   15  Networking
   16  Ecosystem
   17  Experience
   18  Process
   19  Projects
   20  Why
   21  Final CTA & footer
   22  Cursor, grain, utilities
   23  Responsive
   24  Reduced motion
   ============================================================ */

/* ---------- 01 Tokens ---------- */
:root{
  --ink:        #050506;
  --ink-2:      #08080a;
  --charcoal:   #0c0c0e;
  --graphite:   #121215;
  --slate:      #17171b;

  --bone:       #edeae4;
  --bone-dim:   rgba(237,234,228,.58);
  --bone-faint: rgba(237,234,228,.32);
  --bone-ghost: rgba(237,234,228,.13);

  --champagne:       #c9a570;
  --champagne-light: #e7cfa4;
  --champagne-deep:  #8c6f45;

  --line:      rgba(237,234,228,.08);
  --line-soft: rgba(237,234,228,.05);
  --line-gold: rgba(201,165,112,.22);

  --shell:  1480px;
  --gut:    clamp(1.25rem, 4.2vw, 4.5rem);

  --fs-xl:  clamp(2.6rem, 6.8vw, 7rem);
  --fs-l:   clamp(2rem, 4.5vw, 4.4rem);
  --fs-m:   clamp(1.55rem, 3vw, 3rem);
  --fs-s:   clamp(1.15rem, 1.7vw, 1.5rem);
  --fs-body: clamp(.95rem, .55vw + .78rem, 1.0625rem);

  --ease:    cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);

  --nav-h: 76px;
}

/* ---------- 02 Reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  background:var(--ink);
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--fs-body);
  font-weight:300;
  line-height:1.68;
  letter-spacing:.005em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg{ display:block; max-width:100%; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; font-weight:300; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{
  outline:1px solid var(--champagne);
  outline-offset:4px;
  border-radius:2px;
}

.skip{
  position:fixed; top:.75rem; left:.75rem; z-index:200;
  padding:.6rem 1rem; background:var(--graphite); color:var(--bone);
  border:1px solid var(--line-gold); font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  transform:translateY(-160%);
  transition:transform .3s var(--ease);
}
.skip:focus{ transform:none; }

/* ---------- 03 Typography ---------- */
.display{
  font-family:"Jost",-apple-system,"Segoe UI",sans-serif;
  font-weight:200;
  text-transform:uppercase;
  line-height:1.0;
  letter-spacing:.018em;
  color:var(--bone);
  text-wrap:balance;
}
/* clip-reveal wrappers: give commas and hanging glyphs room so the
   overflow:hidden mask never shaves them off */
.hero__title .line,
.cta__title .line{ padding-bottom:.1em; margin-bottom:-.1em; }
.display--xl{ font-size:var(--fs-xl); line-height:.96; letter-spacing:.012em; }
.display--l { font-size:var(--fs-l);  line-height:1.0;  letter-spacing:.018em; }
.display--m { font-size:var(--fs-m);  line-height:1.08; letter-spacing:.028em; }

.eyebrow{
  display:flex; align-items:center; gap:.9rem;
  font-size:.6875rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--champagne);
  margin:0 0 clamp(1.5rem,2.6vw,2.6rem);
}
.eyebrow::before{
  content:""; width:clamp(24px,3vw,46px); height:1px; flex:none;
  background:linear-gradient(90deg,transparent,var(--champagne));
}
.lead{
  font-size:var(--fs-s);
  font-weight:200;
  line-height:1.5;
  color:var(--bone-dim);
  max-width:46ch;
}

/* ---------- 04 Primitives ---------- */
.shell{
  width:100%; max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}

.btn{
  --btn-fg:var(--bone);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.7rem;
  padding:1.05rem 2.1rem;
  font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--btn-fg);
  border:1px solid var(--line-gold);
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
  white-space:nowrap;
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--champagne-light);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--ease);
}
.btn:hover{ color:var(--ink); border-color:var(--champagne-light); }
.btn:hover::before{ transform:scaleY(1); transform-origin:top; }
.btn--solid{ background:rgba(201,165,112,.07); border-color:rgba(201,165,112,.4); }
.btn--ghost{ border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--champagne-light); }
.btn--sm{ padding:.75rem 1.35rem; font-size:.66rem; letter-spacing:.2em; }

.link{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--champagne);
  padding-bottom:.35rem;
  position:relative;
}
.link::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--champagne-deep);
  transform:scaleX(1); transform-origin:right;
  transition:transform .5s var(--ease);
}
.link::before{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--champagne-light);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease) .06s;
}
.link:hover::after{ transform:scaleX(0); }
.link:hover::before{ transform:scaleX(1); }

.tags{ display:flex; flex-wrap:wrap; gap:.5rem .5rem; }
.tags li{
  font-size:.72rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--bone-dim);
  padding:.5rem .9rem;
  border:1px solid var(--line);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.tags li:hover{ border-color:var(--line-gold); color:var(--bone); }
.tags--wide li{ padding:.55rem 1rem; }

.list li{
  font-size:.9rem;
  letter-spacing:.04em;
  color:var(--bone-dim);
  padding:.72rem 0;
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:.85rem;
  transition:color .35s var(--ease);
}
.list li::before{
  content:""; width:4px; height:1px; flex:none;
  background:var(--champagne);
  opacity:.7;
  transition:width .4s var(--ease);
}
.list li:hover{ color:var(--bone); }
.list li:hover::before{ width:14px; }

/* ---------- 05 Brand mark ---------- */
.brand{ display:inline-flex; align-items:center; }
.brand__img{ display:block; width:auto; height:clamp(24px,2.5vw,36px); }
.brand__wordmark{
  display:flex; flex-direction:column; align-items:center; gap:.28rem;
  font-family:"Jost",sans-serif;
}
.brand__name{
  font-size:.95rem; font-weight:300;
  letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase;
  color:var(--champagne-light);
  line-height:1;
}
.brand__sub{
  display:flex; align-items:center; gap:.5rem;
  font-size:.5rem; font-weight:300;
  letter-spacing:.46em; text-indent:.46em;
  text-transform:uppercase;
  color:rgba(201,165,112,.72);
  line-height:1;
}
.brand__sub i{ width:16px; height:1px; background:rgba(201,165,112,.45); flex:none; }
.brand__wordmark--lg .brand__name{ font-size:clamp(1.5rem,3.6vw,2.9rem); letter-spacing:.5em; text-indent:.5em; }
.brand__wordmark--lg .brand__sub{ font-size:clamp(.62rem,1vw,.8rem); }
.brand__wordmark--lg .brand__sub i{ width:clamp(28px,5vw,70px); }

/* ---------- 06 Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:90;
  transition:background .6s var(--ease), backdrop-filter .6s var(--ease), border-color .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(6,6,8,.72);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  backdrop-filter:blur(18px) saturate(120%);
  border-bottom-color:var(--line-soft);
}
.nav.is-hidden{ transform:translateY(-100%); }
.nav{ transition:transform .5s var(--ease), background .6s var(--ease), backdrop-filter .6s var(--ease), border-color .6s var(--ease); }

.nav__progress{ position:absolute; left:0; right:0; top:0; height:1px; background:transparent; }
.nav__progress-bar{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--champagne-deep),var(--champagne-light));
  transform:scaleX(0); transform-origin:left;
}
.nav__inner{
  max-width:var(--shell); margin-inline:auto;
  padding:0 var(--gut);
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav__links{ display:flex; gap:clamp(1.1rem,2.2vw,2.4rem); }
.nav__links a{
  position:relative;
  font-size:.7rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--bone-dim);
  padding:.4rem 0;
  transition:color .4s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--champagne);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-current{ color:var(--bone); }
.nav__links a.is-current::after{ transform:scaleX(1); background:var(--champagne-deep); }

.nav__actions{ display:flex; align-items:center; gap:1rem; }

.burger{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  flex-direction:column; gap:6px;
  margin-right:-10px;
}
.burger span{
  display:block; width:22px; height:1px; background:var(--bone);
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ---------- Mobile menu ---------- */
.menu{
  position:fixed; inset:0; z-index:80;
  background:var(--ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 2rem) var(--gut) 2.5rem;
  clip-path:inset(0 0 100% 0);
}
/* .menu sets display:flex, which would otherwise beat the UA rule for [hidden] */
.menu[hidden]{ display:none; }
.menu__links{ display:flex; flex-direction:column; gap:.35rem; }
.menu__links a{
  display:flex; align-items:baseline; gap:1rem;
  font-family:"Jost",sans-serif;
  font-size:clamp(1.9rem,9vw,3rem); font-weight:200;
  text-transform:uppercase; letter-spacing:.03em;
  padding:.35rem 0;
  border-bottom:1px solid var(--line-soft);
}
.menu__links a i{
  font-family:"Manrope",sans-serif;
  font-style:normal; font-size:.62rem; font-weight:500;
  letter-spacing:.2em; color:var(--champagne);
}
.menu__foot{ margin-top:auto; padding-top:2.5rem; display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; }
.menu__note{ font-size:.8rem; color:var(--bone-faint); line-height:1.7; }
body.menu-open{ overflow:hidden; }

/* ---------- 07 Generated visuals ---------- */
.viz{
  position:absolute; inset:0;
  overflow:hidden;
  background:var(--ink);
  isolation:isolate;
}
.viz > svg{ position:absolute; inset:0; width:100%; height:100%; }
/* Drop a photograph in by setting --img on the .viz element:
   <div class="viz viz--cinema" style="--img:url('media/cinema.jpg')"> */
.viz__photo{
  position:absolute; inset:0;
  background-image:var(--img, none);
  background-size:cover; background-position:center;
  opacity:var(--img-opacity, .78);
  filter:saturate(.72) contrast(1.05) brightness(.62);
  z-index:1;
}
.viz__sky{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(201,165,112,.10), transparent 62%),
    linear-gradient(180deg, #060608 0%, #08080b 42%, #0b0a0c 76%, #060607 100%);
}
.viz__pool{
  position:absolute;
  width:70%; aspect-ratio:1.6/1;
  border-radius:50%;
  filter:blur(64px);
  pointer-events:none;
}
.viz__pool--a{ left:8%;  top:34%; background:radial-gradient(closest-side, rgba(201,165,112,.16), transparent 72%); }
.viz__pool--b{ right:2%; top:8%;  background:radial-gradient(closest-side, rgba(231,207,164,.10), transparent 70%); width:52%; }
.viz__pool--warm{ left:50%; top:52%; transform:translate(-50%,-50%); width:78%; background:radial-gradient(closest-side, rgba(201,165,112,.15), transparent 70%); }
.viz__pool--screen{ left:50%; top:38%; transform:translate(-50%,-50%); width:82%; background:radial-gradient(closest-side, rgba(231,207,164,.13), transparent 68%); }
.viz__pool--cool{ left:50%; top:48%; transform:translate(-50%,-50%); width:78%; background:radial-gradient(closest-side, rgba(150,168,190,.08), transparent 70%); }
.viz__vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(130% 95% at 50% 45%, transparent 36%, rgba(4,4,6,.6) 82%, rgba(4,4,6,.94) 100%),
    linear-gradient(180deg, rgba(4,4,6,.55) 0%, transparent 26%, transparent 68%, rgba(4,4,6,.8) 100%);
  z-index:3;
}

/* ---------- 08 Hero ---------- */
.hero{ position:relative; }
.hero__pin{
  position:relative;
  height:100vh; height:100svh; min-height:620px;
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.viz--hero{ z-index:0; will-change:transform; }
.hero__content{
  position:relative; z-index:4;
  padding-bottom:clamp(5rem,13vh,9rem);
  width:100%;
}
.hero__eyebrow{ margin-bottom:clamp(1.4rem,3vh,2.4rem); }
.hero__title{ max-width:18ch; }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }
.hero__sub{
  margin-top:clamp(1.5rem,3.2vh,2.2rem);
  font-size:clamp(.95rem,1.15vw,1.15rem);
  font-weight:200;
  letter-spacing:.02em;
  color:var(--bone-dim);
  max-width:40ch;
}
.hero__actions{
  margin-top:clamp(2rem,4.5vh,3.2rem);
  display:flex; flex-wrap:wrap; gap:.9rem;
}
.hero__scroll{
  position:absolute; z-index:5;
  right:var(--gut); bottom:clamp(5rem,13vh,9rem);
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}
.hero__scroll-label{
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--bone-faint);
  writing-mode:vertical-rl;
}
.hero__scroll-line{
  position:relative; display:block; width:1px; height:74px;
  background:var(--line);
  overflow:hidden;
}
.hero__scroll-line i{
  position:absolute; left:0; top:0; width:1px; height:36px;
  background:linear-gradient(180deg,transparent,var(--champagne));
  animation:scrollTick 2.4s var(--ease-io) infinite;
}
@keyframes scrollTick{
  0%{ transform:translateY(-100%); opacity:0; }
  25%{ opacity:1; }
  75%{ opacity:1; }
  100%{ transform:translateY(210%); opacity:0; }
}

/* ---------- 09 Brand thread ---------- */
.thread{
  position:relative; z-index:6;
  height:clamp(140px,22vh,260px);
  pointer-events:none;
}
.thread__svg{ width:100%; height:100%; overflow:visible; }
.thread__path{ opacity:.9; }

/* ---------- 10 Manifesto ---------- */
.manifesto{ position:relative; background:var(--ink); }
.manifesto__pin{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(5rem,14vh,9rem) 0;
}
.manifesto__title{
  max-width:22ch;
  color:var(--bone);
}
.manifesto__title .w{
  display:inline-block;
  color:rgba(237,234,228,.12);
  transition:color .05s linear;
}
.manifesto__title .w.is-lit{ color:var(--bone); }
.manifesto__sub{
  margin-top:clamp(2rem,5vh,3.4rem);
  max-width:52ch;
  color:var(--bone-faint);
  font-size:clamp(.9rem,1vw,1.05rem);
  padding-left:clamp(0px,4vw,3rem);
  border-left:1px solid var(--line-gold);
  padding-block:.4rem;
}

/* ---------- 11 Four pillars ---------- */
.pillars{ position:relative; }
.pillars__pin{
  position:relative;
  height:100vh; height:100svh; min-height:620px;
  overflow:hidden;
  display:flex; align-items:center;
}
.pillars__bg{ position:absolute; inset:0; z-index:0; }
.viz--pillar{ opacity:0; transform:scale(1.06); }
.viz--pillar.is-active{ opacity:1; transform:scale(1); }
.pillars__bg .viz__vignette{ z-index:3; }

.pillars__ui{ position:relative; z-index:4; width:100%; }
.pillars__head{ margin-bottom:clamp(1.5rem,4vh,2.75rem); }
.pillars__stage{ position:relative; min-height:clamp(320px,44vh,460px); }
.pillars__panel{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center;
  opacity:0; visibility:hidden;
  max-width:22ch;
}
.pillars__panel.is-active{ opacity:1; visibility:visible; }
.pillars__num{
  font-family:"Jost",sans-serif;
  font-size:.8rem; font-weight:300;
  letter-spacing:.4em;
  color:var(--champagne);
  margin-bottom:clamp(1rem,2.4vh,1.8rem);
  display:block;
}
.pillars__panel h2{ margin-bottom:clamp(1.2rem,2.6vh,2rem); }
.pillars__panel p{
  color:var(--bone-dim);
  max-width:34ch;
  font-weight:200;
  font-size:clamp(.95rem,1.05vw,1.1rem);
  margin-bottom:clamp(1.6rem,3vh,2.2rem);
}
.pillars__rail{
  position:absolute; right:var(--gut); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:1.1rem;
  text-align:right;
}
.pillars__rail li{
  display:flex; align-items:center; justify-content:flex-end; gap:.85rem;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-ghost);
  transition:color .5s var(--ease);
}
.pillars__rail li span{
  display:block; width:34px; height:1px; background:var(--bone-ghost);
  transition:background .5s var(--ease), width .5s var(--ease);
}
.pillars__rail li.is-active{ color:var(--champagne-light); }
.pillars__rail li.is-active span{ background:var(--champagne); width:56px; }

/* ---------- 12 Home automation ---------- */
.auto{ position:relative; padding:clamp(6rem,16vh,11rem) 0; background:var(--ink); }
.auto__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,7rem);
  align-items:start;
}
.auto__sticky{ position:sticky; top:calc(var(--nav-h) + clamp(1.5rem,6vh,4rem)); }
.auto__sticky .lead{ margin-top:clamp(1.4rem,3vh,2rem); }
.auto__figure{
  position:relative;
  margin-top:clamp(2.2rem,5vh,3.4rem);
  aspect-ratio:16/10;
  border:1px solid var(--line);
  overflow:hidden;
}
.auto__cols{ display:flex; flex-direction:column; gap:clamp(2.5rem,6vh,4.5rem); }
.sysgroup{ border-top:1px solid var(--line); padding-top:clamp(1.4rem,3vh,2rem); }
.sysgroup header{ display:flex; align-items:baseline; gap:1.1rem; margin-bottom:.9rem; }
.sysgroup__idx{
  font-family:"Jost",sans-serif;
  font-size:.7rem; letter-spacing:.3em; color:var(--champagne);
}
.sysgroup h3{
  font-family:"Jost",sans-serif;
  font-size:clamp(1.1rem,1.7vw,1.55rem);
  font-weight:300; text-transform:uppercase; letter-spacing:.08em;
}
.sysgroup p{ color:var(--bone-faint); font-size:.92rem; max-width:40ch; margin-bottom:1.4rem; }

/* ---------- 13 Audio visual ---------- */
.av{ position:relative; background:var(--ink-2); }
.av__intro{ padding:clamp(6rem,17vh,12rem) var(--gut) clamp(3rem,8vh,5rem); }
.av__intro .lead{ margin-top:clamp(1.6rem,3.4vh,2.4rem); }
.av__pin{ position:relative; height:100vh; height:100svh; min-height:620px; overflow:hidden; }
.av__track{ display:flex; height:100%; will-change:transform; }
.av__panel{
  flex:0 0 auto;
  width:min(92vw,1120px);
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2rem,5vw,5rem);
  padding:clamp(4rem,10vh,7rem) clamp(1.25rem,4vw,4rem);
}
.av__panel-media{ position:relative; height:min(62vh,540px); border:1px solid var(--line); overflow:hidden; }
.av__num{
  display:block;
  font-family:"Jost",sans-serif;
  font-size:.78rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:clamp(1rem,2.4vh,1.6rem);
}
.av__panel-body h3{ margin-bottom:clamp(1.1rem,2.4vh,1.8rem); }
.av__panel-body p{ color:var(--bone-dim); font-weight:200; max-width:38ch; margin-bottom:clamp(1.6rem,3.4vh,2.4rem); }
.av__panel-body .list{ max-width:34ch; }
.av__rail{
  position:absolute; left:var(--gut); right:var(--gut); bottom:clamp(1.6rem,4vh,2.8rem);
  height:1px; background:var(--line);
}
.av__rail-bar{
  display:block; height:1px; width:34%;
  background:linear-gradient(90deg,var(--champagne-deep),var(--champagne-light));
  transform-origin:left;
}

/* ---------- 14 Security ---------- */
.sec{ position:relative; overflow:hidden; padding:clamp(6rem,17vh,12rem) 0; }
.sec__bg{ position:absolute; inset:0; z-index:0; }
.sec__inner{ position:relative; z-index:2; }
.sec__inner .lead{ margin-top:clamp(1.5rem,3.2vh,2.2rem); }
.sec__list{ margin-top:clamp(3rem,8vh,5.5rem); border-top:1px solid var(--line); }
.sec__list li{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1rem,4vw,3.5rem);
  align-items:baseline;
  padding:clamp(1.4rem,3.4vh,2.3rem) 0;
  border-bottom:1px solid var(--line);
  transition:background .5s var(--ease);
}
.sec__list li::after{
  content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:linear-gradient(90deg,var(--champagne),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease);
}
.sec__list li:hover::after{ transform:scaleX(1); }
.sec__idx{
  font-family:"Jost",sans-serif;
  font-size:.7rem; letter-spacing:.3em; color:var(--champagne);
  min-width:2.4rem;
}
.sec__list h3{
  font-family:"Jost",sans-serif;
  font-size:clamp(1.15rem,2.1vw,1.9rem);
  font-weight:200; text-transform:uppercase; letter-spacing:.05em;
  transition:transform .6s var(--ease);
}
.sec__list li:hover h3{ transform:translateX(10px); }
.sec__list p{ color:var(--bone-faint); font-size:.92rem; max-width:46ch; }

/* ---------- 15 Networking ---------- */
.net{ position:relative; background:var(--ink); padding:clamp(6rem,17vh,12rem) 0; }
.net__grid{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2.5rem,6vw,6rem); align-items:center;
}
.net__copy .lead{ margin-top:clamp(1.5rem,3.2vh,2.2rem); }
.net__items{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,2.8rem);
  margin-top:clamp(2.6rem,6vh,4rem);
}
.net__items article{ border-top:1px solid var(--line-gold); padding-top:1.2rem; }
.net__items h3{
  font-family:"Jost",sans-serif;
  font-size:clamp(1rem,1.5vw,1.3rem);
  font-weight:300; text-transform:uppercase; letter-spacing:.1em;
  margin-bottom:.7rem;
}
.net__items p{ color:var(--bone-faint); font-size:.9rem; }
.net .tags{ margin-top:clamp(2.4rem,5vh,3.4rem); }
.net__viz{ position:relative; }
.netgraph{ width:100%; height:auto; max-height:62vh; margin-inline:auto; }
.netgraph__lines path{ opacity:.5; }
.netgraph__nodes circle{ opacity:.65; }

/* ---------- 16 Ecosystem ---------- */
.eco{ position:relative; background:var(--ink-2); }
.eco__pin{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(5rem,12vh,8rem) 0;
  overflow:hidden;
}
.eco__inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.eco__inner .eyebrow{ justify-content:center; }
.eco__title{ margin-bottom:clamp(1.5rem,4vh,2.5rem); }
.eco__stage{
  position:relative;
  width:min(92vw,640px);
  aspect-ratio:1/1;
  margin:clamp(.5rem,2vh,1.5rem) auto 0;
}
.ecograph{ position:absolute; inset:0; width:100%; height:100%; }
.ecograph__spokes path{ opacity:.35; }
.ecograph__dots circle{ opacity:.7; }
.eco__core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  font-family:"Jost",sans-serif;
}
.eco__core span{
  font-size:clamp(.62rem,1.5vw,.82rem); font-weight:300;
  letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  color:var(--champagne-light);
}
.eco__core em{
  font-style:normal;
  font-size:clamp(.42rem,1vw,.55rem); font-weight:300;
  letter-spacing:.4em; text-indent:.4em; text-transform:uppercase;
  color:rgba(201,165,112,.7);
}
.eco__node{
  position:absolute;
  left:var(--x); top:var(--y);
  transform:translate(-50%,-50%);
  font-size:clamp(.58rem,1.35vw,.7rem);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--bone-dim);
  background:var(--ink-2);
  padding:.4rem .7rem;
  white-space:nowrap;
}
.eco__sub{
  margin-top:clamp(2rem,5vh,3rem);
  color:var(--bone-faint);
  font-size:.92rem;
  max-width:44ch;
}

/* ---------- 17 Experience ---------- */
.exp{ position:relative; }
.exp__pin{
  position:relative;
  height:100vh; height:100svh; min-height:620px;
  overflow:hidden;
  display:flex; align-items:center;
  background:var(--ink);
}
.exp__amb{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(70% 55% at 26% 62%, rgba(201,165,112,.16), transparent 70%),
    radial-gradient(60% 50% at 82% 24%, rgba(231,207,164,.07), transparent 72%);
  transition:opacity .6s var(--ease);
}
.exp__inner{ position:relative; z-index:2; width:100%; }
.exp__head{ margin-bottom:clamp(2.5rem,7vh,4.5rem); }
.exp__scenes{ position:relative; min-height:clamp(300px,42vh,420px); }
.exp__scene{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
}
.exp__scene.is-active{ opacity:1; visibility:visible; }
.exp__label{
  display:block;
  font-size:.66rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:clamp(.8rem,2vh,1.4rem);
}
.exp__scene h3{ margin-bottom:clamp(1.6rem,4vh,2.8rem); }
.exp__steps{
  display:flex; flex-wrap:wrap;
  gap:0 clamp(1.5rem,4vw,3.5rem);
  max-width:1000px;
}
.exp__steps li{
  position:relative;
  font-size:clamp(.82rem,1.1vw,1rem);
  letter-spacing:.06em;
  color:var(--bone-ghost);
  padding:.65rem 0 .65rem 1.6rem;
  transition:color .5s var(--ease);
}
.exp__steps li::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:5px; border-radius:50%;
  border:1px solid var(--bone-ghost);
  transition:border-color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.exp__steps li.is-lit{ color:var(--bone); }
.exp__steps li.is-lit::before{
  border-color:var(--champagne-light);
  background:var(--champagne-light);
  box-shadow:0 0 12px rgba(231,207,164,.55);
}

/* ---------- 18 Process ---------- */
.proc{ position:relative; background:var(--ink-2); padding:clamp(6rem,16vh,11rem) 0; }
.proc__title{ margin-bottom:clamp(3rem,8vh,5rem); }
.proc__list{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,3rem);
}
.proc__list li{ border-top:1px solid var(--line); padding-top:clamp(1.2rem,3vh,2rem); }
.proc__num{
  display:block;
  font-family:"Jost",sans-serif;
  font-size:clamp(1.6rem,3vw,2.6rem); font-weight:200;
  color:var(--champagne-deep);
  line-height:1; margin-bottom:clamp(1rem,2.4vh,1.6rem);
  transition:color .6s var(--ease);
}
.proc__list li.is-in .proc__num{ color:var(--champagne); }
.proc__list h3{
  font-family:"Jost",sans-serif;
  font-size:clamp(1rem,1.5vw,1.3rem);
  font-weight:300; text-transform:uppercase; letter-spacing:.14em;
  margin-bottom:.8rem;
}
.proc__list p{ color:var(--bone-faint); font-size:.88rem; max-width:28ch; }
.proc__line{ position:relative; height:1px; background:var(--line); margin-top:clamp(3rem,7vh,4.5rem); }
.proc__line span{
  position:absolute; left:0; top:0; height:1px; width:100%;
  background:linear-gradient(90deg,var(--champagne-deep),var(--champagne-light));
  transform:scaleX(0); transform-origin:left;
}

/* ---------- 19 Projects ---------- */
.proj{ position:relative; background:var(--ink); padding:clamp(6rem,16vh,11rem) 0; }
.proj__head{ margin-bottom:clamp(3rem,8vh,5rem); max-width:60ch; }
.proj__note{ margin-top:1.4rem; color:var(--bone-faint); font-size:.86rem; max-width:46ch; }
.proj__grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.5rem,3.5vw,3.5rem) clamp(1.5rem,3vw,3rem);
}
.card{ display:block; }
.card__media{
  position:relative; aspect-ratio:4/3;
  border:1px solid var(--line);
  overflow:hidden;
}
.card__media .viz{ transition:transform 1.1s var(--ease); }
.card:hover .card__media .viz{ transform:scale(1.045); }
.card__body{ padding-top:clamp(1.1rem,2.4vh,1.6rem); }
.card__cat{
  display:block;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:.8rem;
}
.card__body h3{
  font-family:"Jost",sans-serif;
  font-size:clamp(1.1rem,1.8vw,1.6rem);
  font-weight:200; text-transform:uppercase; letter-spacing:.08em;
  color:var(--bone-dim);
  margin-bottom:.7rem;
  transition:color .5s var(--ease);
}
.card:hover .card__body h3{ color:var(--bone); }
.card__body p{ color:var(--bone-faint); font-size:.88rem; max-width:42ch; }

/* ---------- 20 Why ---------- */
.why{ position:relative; background:var(--ink-2); padding:clamp(6rem,16vh,11rem) 0; }
.why__title{ margin-bottom:clamp(3rem,8vh,5rem); }
.why__list{ border-top:1px solid var(--line); }
.why__list li{
  display:grid;
  grid-template-columns:auto minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1rem,4vw,3.5rem);
  align-items:baseline;
  padding:clamp(1.5rem,3.6vh,2.4rem) 0;
  border-bottom:1px solid var(--line);
}
.why__num{
  font-family:"Jost",sans-serif;
  font-size:.7rem; letter-spacing:.3em; color:var(--champagne);
  min-width:2.4rem;
}
.why__list h3{
  font-family:"Jost",sans-serif;
  font-size:clamp(1.2rem,2.4vw,2.1rem);
  font-weight:200; text-transform:uppercase; letter-spacing:.06em;
}
.why__list p{ color:var(--bone-faint); font-size:.92rem; max-width:44ch; }

/* ---------- 21 CTA & footer ---------- */
.cta{
  position:relative;
  min-height:92vh; min-height:92svh;
  display:flex; align-items:center;
  background:
    radial-gradient(80% 60% at 50% 118%, rgba(201,165,112,.09), transparent 66%),
    var(--ink);
  padding:clamp(6rem,14vh,10rem) 0;
  border-top:1px solid var(--line-soft);
}
.cta__inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.cta__title .line{ display:block; overflow:hidden; }
.cta__title .line > span{ display:block; }
.cta__sub{
  margin-top:clamp(1.6rem,4vh,2.6rem);
  color:var(--bone-dim);
  font-size:clamp(.95rem,1.2vw,1.15rem);
  font-weight:200;
}
.cta__actions{ margin-top:clamp(2.2rem,5vh,3.4rem); display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

.foot{ position:relative; background:var(--ink); padding:clamp(4rem,10vh,7rem) 0 clamp(2rem,5vh,3rem); border-top:1px solid var(--line-soft); }
.foot__brand{ display:flex; justify-content:center; margin-bottom:clamp(3rem,8vh,5rem); }
.foot__grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,6vh,4rem);
  border-bottom:1px solid var(--line-soft);
}
.foot__col{ display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.foot__col h4{
  font-size:.62rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--champagne);
  margin-bottom:.5rem;
}
.foot__col a, .foot__line{
  font-size:.88rem; color:var(--bone-dim);
  transition:color .4s var(--ease);
}
.foot__col a:hover{ color:var(--bone); }
.foot__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-top:clamp(1.5rem,4vh,2.5rem);
}
.foot__base p{ font-size:.74rem; letter-spacing:.08em; color:var(--bone-ghost); }

/* ---------- 22 Cursor, grain, utilities ---------- */
.grain{
  position:fixed; inset:0; z-index:120;
  pointer-events:none;
  opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor{
  position:fixed; top:0; left:0; z-index:130;
  pointer-events:none;
  opacity:0;
  will-change:transform;
  display:none;
}
.cursor__ring{
  display:block; width:26px; height:26px;
  margin:-13px 0 0 -13px;
  border:1px solid rgba(201,165,112,.55);
  border-radius:50%;
  transition:width .35s var(--ease), height .35s var(--ease),
             margin .35s var(--ease), border-color .35s var(--ease),
             background .35s var(--ease);
}
.cursor.is-hot .cursor__ring{
  width:46px; height:46px; margin:-23px 0 0 -23px;
  border-color:rgba(231,207,164,.85);
  background:rgba(201,165,112,.07);
}
@media (hover:hover) and (pointer:fine){
  .cursor{ display:block; }
}

/* ---------- 23 Responsive ---------- */
@media (max-width:1180px){
  .net__grid{ grid-template-columns:minmax(0,1fr); gap:clamp(3rem,7vh,5rem); }
  .net__viz{ order:-1; }
  .netgraph{ max-width:360px; }
  .proc__list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vh,3rem) clamp(1.5rem,3vw,3rem); }
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:2.5rem; }
}

@media (max-width:980px){
  :root{ --nav-h:64px; }
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
  .burger{ display:flex; }

  .auto__grid{ grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,7vh,4rem); }
  .auto__sticky{ position:static; }

  .av__panel{ grid-template-columns:minmax(0,1fr); gap:clamp(1.5rem,4vh,2.5rem); align-content:center; }
  .av__panel-media{ height:clamp(180px,26vh,260px); }

  .sec__list li,
  .why__list li{ grid-template-columns:auto minmax(0,1fr); row-gap:.6rem; }
  .sec__list p, .why__list p{ grid-column:2; }

  .proj__grid{ grid-template-columns:minmax(0,1fr); gap:clamp(2.5rem,6vh,3.5rem); }

  .pillars__rail{ display:none; }
  .hero__scroll{ display:none; }

  .exp__steps{ flex-direction:column; gap:0; }
}

@media (max-width:640px){
  .hero__pin{ min-height:560px; }
  .hero__content{ padding-bottom:clamp(3.5rem,10vh,6rem); }
  .hero__actions .btn{ flex:1 1 100%; }
  .cta__actions .btn{ flex:1 1 100%; }
  .proc__list{ grid-template-columns:minmax(0,1fr); }
  .net__items{ grid-template-columns:minmax(0,1fr); }
  .foot__grid{ grid-template-columns:minmax(0,1fr); }
  .eco__node{ font-size:.52rem; letter-spacing:.16em; padding:.3rem .45rem; }
  .foot__base{ flex-direction:column; }
}

/* Panels stack on small screens when pinning is disabled */
body.no-pin .pillars__pin,
body.no-pin .av__pin,
body.no-pin .exp__pin{ height:auto; min-height:0; overflow:visible; }
body.no-pin .pillars__pin{ display:block; padding:clamp(4rem,10vh,7rem) 0; }
body.no-pin .pillars__bg{ display:none; }
body.no-pin .pillars__head{ position:static; margin-bottom:clamp(2rem,5vh,3rem); }
body.no-pin .pillars__stage{ display:flex; flex-direction:column; gap:clamp(3rem,8vh,5rem); min-height:0; }
body.no-pin .pillars__panel{
  position:relative; inset:auto; opacity:1; visibility:visible;
  max-width:none; border-top:1px solid var(--line); padding-top:clamp(1.4rem,3vh,2rem);
}
body.no-pin .av__track{ flex-direction:column; height:auto; }
body.no-pin .av__panel{ width:100%; height:auto; }
body.no-pin .av__rail{ display:none; }
body.no-pin .exp__pin{ display:block; padding:clamp(4rem,10vh,7rem) 0; }
body.no-pin .exp__scenes{ display:flex; flex-direction:column; gap:clamp(3rem,8vh,5rem); min-height:0; }
body.no-pin .exp__scene{ position:relative; inset:auto; opacity:1; visibility:visible; }
body.no-pin .manifesto__pin{ min-height:0; }

/* ---------- 24 Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__scroll-line i{ animation:none; opacity:.6; }
  .manifesto__title .w{ color:var(--bone); }
  .exp__steps li{ color:var(--bone); }
  .exp__steps li::before{ border-color:var(--champagne-light); background:var(--champagne-light); }
  .cursor{ display:none !important; }
}

/* ---------- 25 Scroll-state transitions ---------- */
.pillars__panel{
  transform:translateY(16px);
  transition:opacity .75s var(--ease), transform .9s var(--ease), visibility .75s;
}
.pillars__panel.is-active{ transform:none; }
.viz--pillar{ transition:opacity 1.1s var(--ease), transform 1.6s var(--ease); }
.exp__scene{ transform:translateY(14px); transition:opacity .8s var(--ease), transform .9s var(--ease), visibility .8s; }
.exp__scene.is-active{ transform:none; }

/* progress bar for the horizontal AV track */
.av__rail-bar{ width:100%; transform:scaleX(0); }

/* when the real logo asset is mounted, retire the typographic stand-in */
.brand.has-logo .brand__wordmark,
.foot__brand.has-logo .brand__wordmark{ display:none; }
.foot__brand.has-logo .brand__logo{ margin-inline:auto; }

/* ---------- 26 3D objects ---------- */
.obj3d{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s var(--ease);
}
.obj3d.is-ready{ opacity:1; }
.obj3d canvas{ display:block; width:100%; height:100%; }

/* security section: the dome camera sits beside the headline, never over the list */
/* z-index:-1 keeps the dome behind the copy: if they ever meet, text wins */
.sec__object{
  position:absolute; z-index:-1;
  right:var(--gut); top:-4vh;
  width:clamp(200px,26vw,360px);
  aspect-ratio:1/1;
  pointer-events:none;
}
@media (max-width:1100px){ .sec__object{ display:none; } }

/* ---------- 27 Contact ---------- */
.cta__contact{
  margin-top:clamp(2.6rem,6vh,4rem);
  padding-top:clamp(1.8rem,4vh,2.6rem);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:clamp(1.2rem,3vw,3rem);
  width:min(100%,900px);
}
.cta__contact-item{
  display:flex; flex-direction:column; gap:.45rem;
  font-size:.92rem; letter-spacing:.02em;
  color:var(--bone-dim);
  position:relative;
  padding-bottom:.4rem;
  transition:color .4s var(--ease);
}
.cta__contact-item span{
  font-size:.6rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--champagne);
}
.cta__contact-item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--champagne-light);
  transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.cta__contact-item:hover{ color:var(--bone); }
.cta__contact-item:hover::after{ transform:scaleX(1); transform-origin:left; }

.foot__col a.mail{ word-break:break-word; }
.foot__base p{ flex:0 1 auto; }

/* ---------- 28 Official logo ---------- */
.brand__logo{
  display:block;
  flex:none;
  background-repeat:no-repeat;
}
/* Drag-and-drop placement, only offered when no logo file sits beside the page */
.logodrop{
  position:fixed; inset:0; z-index:190;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,6,.84);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none;
  transition:opacity .32s var(--ease);
}
.logodrop.is-on{ opacity:1; }
.logodrop span{
  border:1px dashed var(--line-gold);
  padding:clamp(1.2rem,3vw,1.9rem) clamp(1.6rem,4vw,2.8rem);
  font-size:.68rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--champagne);
  text-align:center;
}

/* Official logo: sized responsively, aspect ratio never touched */
.foot__brand .brand__img{ height:auto; width:min(430px,72vw); }
.brand__logo{ max-width:100%; }