/* ===================================================================
   TEG — The Elevated Group
   =================================================================== */
:root{
  --bg:#0c0d0f;
  --bg-2:#131518;
  --ink:#f2ede4;
  --ink-dim:rgba(242,237,228,.64);
  --line:rgba(242,237,228,.14);
  --accent:#d6a253;
  --accent-2:#f0c27a;
  --panel:rgba(12,13,16,.6);
  --serif:"Instrument Serif", Georgia, serif;
  --sans:"Manrope", system-ui, -apple-system, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(16px, 5vw, 80px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ background:var(--bg); -webkit-text-size-adjust:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body.is-loading{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
em{ font-style:italic; color:var(--accent-2); }

.eyebrow{
  font-size:.7rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow--center{ text-align:center; }

/* ---------- Loader ---------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .9s var(--ease), visibility .9s var(--ease);
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__mark{
  font-weight:700; font-size:2.4rem; letter-spacing:.4em; padding-left:.4em;
  animation:breathe 2.4s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
.loader__bar{ width:min(260px, 60vw); height:1px; background:var(--line); overflow:hidden; }
.loader__bar span{ display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.loader__pct{ font-family:var(--serif); font-size:1.6rem; font-variant-numeric:tabular-nums; }
.loader__pct i{ font-style:normal; color:var(--ink-dim); margin-left:2px; }
.loader__label{ font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-dim); }

/* ---------- Header ---------------------------------------------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gutter);
  transition:transform .5s var(--ease);
}
.site-header.is-hidden{ transform:translateY(-140%); }
.brand{ display:flex; align-items:center; gap:14px; }
.brand__mark{
  display:inline-grid; place-items:center;
  font-weight:700; font-size:.82rem; letter-spacing:.24em; padding:8px 8px 8px 11px;
  border:1px solid currentColor; color:var(--ink);
}
.brand__word{ font-size:.72rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; }
.nav{ display:flex; align-items:center; gap:34px; }
.nav a{ font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; opacity:.85; transition:opacity .3s; }
.nav a:hover{ opacity:1; }
.nav__cta{
  padding:11px 18px; background:var(--accent); color:#16120b !important; opacity:1 !important;
  transition:background .3s var(--ease) !important;
}
.nav__cta:hover{ background:var(--accent-2); }

.nav__switch{
  background:none; border:0; cursor:pointer; color:var(--ink); font:inherit;
  font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; opacity:.85;
  padding:6px 0; border-bottom:1px solid var(--accent); transition:opacity .3s;
}
.nav__switch:hover{ opacity:1; }
[hidden]{ display:none !important; }

/* ---------- Chooser --------------------------------------------- */
.chooser{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px var(--gutter) var(--gutter);
  background:var(--bg);
}
.chooser__title{
  font-family:var(--serif); font-weight:400; line-height:.95; letter-spacing:-.01em;
  font-size:clamp(2.8rem, 6.4vw, 6.4rem); margin:16px 0 clamp(28px, 4vw, 48px);
}
.chooser__options{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px, 1.6vw, 24px); }
.choice{
  position:relative; overflow:hidden; cursor:pointer; text-align:left;
  height:clamp(300px, 52vh, 600px); border:1px solid var(--line); background:#15171a;
  color:var(--ink); font:inherit;
}
.choice__media{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.04); transition:transform 1.4s var(--ease), filter 1s var(--ease);
  filter:saturate(.85) brightness(.82);
}
.choice__shade{ position:absolute; inset:0; background:linear-gradient(to top, rgba(8,9,11,.88), rgba(8,9,11,.1) 60%); }
.choice__body{ position:absolute; left:0; right:0; bottom:0; padding:clamp(22px, 3vw, 40px); display:flex; flex-direction:column; gap:8px; }
.choice__no{ font-family:var(--serif); font-size:1.3rem; color:var(--accent); }
.choice__name{ font-family:var(--serif); font-size:clamp(2.4rem, 4.4vw, 4.4rem); line-height:1; }
.choice__desc{ max-width:360px; color:rgba(242,237,228,.78); font-size:.92rem; }
.choice__go{
  margin-top:10px; align-self:flex-start; padding-bottom:4px; border-bottom:1px solid var(--accent);
  font-size:.68rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
}
.choice__go i{ font-style:normal; display:inline-block; transition:transform .5s var(--ease); }
.choice:hover .choice__media, .choice:focus-visible .choice__media{ transform:scale(1.1); filter:saturate(1) brightness(.95); }
.choice:hover .choice__go i{ transform:translateX(6px); }
.choice:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- Scroll scenes --------------------------------------- */
.scene{ position:relative; background:var(--bg); }
.scene--res{ height:900vh; }
.scene--com{ height:1000vh; }
.sticky{ position:sticky; top:0; height:100vh; width:100%; overflow:hidden; }
@supports (height:100svh){ .sticky{ height:100svh; } }
.scene__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.grade{ position:absolute; inset:0; pointer-events:none; }
.grade--vignette{ background:radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(8,9,11,.5) 100%); }
.grade--top{ background:linear-gradient(to bottom, rgba(8,9,11,.55), transparent 22%); }
.grade--bottom{ background:linear-gradient(to top, rgba(8,9,11,.75), transparent 34%); }
.scene-intro::before{
  content:""; position:absolute; z-index:-1; inset:-40vh -50vw -20vh calc(-1 * var(--gutter));
  background:radial-gradient(ellipse at 20% 60%, rgba(8,9,11,.55), transparent 60%);
  pointer-events:none;
}
.grain{
  position:absolute; inset:-50%; pointer-events:none; opacity:.06; 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-5%)} 60%{transform:translate(-3%,4%)} 80%{transform:translate(5%,-2%)} 100%{transform:translate(0,0)} }

/* intro title (first frame of each scene) */
.scene-intro{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:15vh; isolation:isolate;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
.scene-intro__title{
  font-family:var(--serif); font-weight:400; line-height:.95; letter-spacing:-.01em;
  font-size:clamp(3rem, 8.4vw, 8.6rem); margin:18px 0 22px;
}
.scene-intro__sub{ max-width:440px; color:rgba(242,237,228,.86); font-size:1rem; }
.scroll-cue{
  display:flex; align-items:center; gap:14px; margin-top:28px;
  font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-dim);
}
.scroll-cue span{ display:block; width:1px; height:44px; background:var(--accent); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue{ 0%{transform:scaleY(0);transform-origin:top} 45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* editorial panels */
.panel{
  position:absolute; top:50%; translate:0 -50%;
  width:min(360px, 30vw); padding:28px 30px 26px;
  background:var(--panel);
  -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid var(--line);
  opacity:0; visibility:hidden;
}
.panel--left{ left:var(--gutter); }
.panel--right{ right:var(--gutter); }
.panel__index{ font-family:var(--serif); font-size:2.6rem; line-height:1; color:var(--accent); }
.panel__kicker{ margin-top:14px; font-size:.66rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-dim); }
.panel__title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem, 2.6vw, 2.6rem); line-height:1.02; margin:10px 0 14px; }
.panel__body{ font-size:.9rem; color:rgba(242,237,228,.8); }
.panel__spec{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
}
.panel__spec i{ font-style:normal; color:var(--accent); margin-right:10px; }

/* elevation readout */
.elev{
  position:absolute; top:96px; right:var(--gutter);
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}
.elev__label{ font-size:.62rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim); }
.elev__num{ font-family:var(--serif); font-size:clamp(2rem, 3.4vw, 3.2rem); line-height:1; font-variant-numeric:tabular-nums; }
.elev__num i{ font-style:normal; font-size:.5em; color:var(--accent); margin-left:4px; }

/* bottom HUD */
.hud{
  position:absolute; left:var(--gutter); right:var(--gutter); bottom:28px;
  display:flex; align-items:center; gap:18px;
  font-size:.64rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
}
.hud__tag{ padding:6px 10px; border:1px solid var(--accent); color:var(--accent); }
.hud__stage{ min-width:150px; color:var(--ink); }
.hud__track{ flex:1; height:1px; background:var(--line); overflow:hidden; }
.hud__fill{ display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }
.hud__count{ font-family:var(--serif); font-size:1.2rem; letter-spacing:0; font-weight:400; font-variant-numeric:tabular-nums; }
.hud__count i{ font-style:normal; color:var(--ink-dim); margin-left:6px; font-size:.85rem; }

/* ---------- Statement interlude --------------------------------- */
.statement{
  padding:32vh var(--gutter) 30vh; max-width:1400px; margin:0 auto;
}
.statement__text{
  font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-.01em;
  font-size:clamp(2.2rem, 5.6vw, 5.4rem); margin-top:26px;
}
.statement__text .word{ opacity:.14; }

/* ---------- Capabilities ---------------------------------------- */
.capabilities{ border-block:1px solid var(--line); }
.cap{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:clamp(32px, 6vw, 120px);
  background:var(--bg); padding:clamp(40px, 6vw, 90px) var(--gutter);
}
.cap > :not(ul){ grid-column:1; }
.cap ul{ grid-column:2; grid-row:1 / span 3; align-self:end; }
.cap__no{ font-family:var(--serif); font-size:1.4rem; color:var(--accent); }
.cap h3{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem, 4vw, 3.6rem); line-height:1; margin:14px 0 18px; }
.cap p{ color:var(--ink-dim); max-width:460px; }
.cap ul{ list-style:none; margin-top:28px; border-top:1px solid var(--line); }
.cap li{
  padding:14px 0; border-bottom:1px solid var(--line);
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
}

/* ---------- Stats ----------------------------------------------- */
.stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:32px;
  padding:clamp(70px, 10vw, 140px) var(--gutter);
}
.stat{ border-top:1px solid var(--line); padding-top:22px; }
.stat__num{ display:block; font-family:var(--serif); font-size:clamp(2.6rem, 5vw, 4.6rem); line-height:1; font-variant-numeric:tabular-nums; }
.stat__label{ display:block; margin-top:12px; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); }

/* ---------- Outro + footer -------------------------------------- */
.outro{ padding:clamp(90px, 14vw, 200px) var(--gutter) 40px; text-align:center; background:var(--bg-2); }
.outro__title{
  font-family:var(--serif); font-weight:400; line-height:.98;
  font-size:clamp(3rem, 8vw, 7.4rem); margin:22px 0 40px;
}
.btn{
  display:inline-block; padding:18px 34px; border:1px solid var(--accent); color:var(--accent);
  font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.btn:hover{ background:var(--accent); color:#16120b; }

.site-footer{
  margin-top:clamp(90px, 12vw, 160px); padding-top:48px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 2fr; gap:40px; text-align:left;
}
.foot-brand{ display:flex; align-items:center; gap:14px; font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; }
.foot-cols{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
.foot-cols h4{ font-size:.64rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.foot-cols a{ display:block; font-size:.84rem; color:var(--ink-dim); margin-bottom:8px; transition:color .3s; overflow-wrap:anywhere; }
.foot-cols a:hover{ color:var(--ink); }
.foot-legal{ grid-column:1 / -1; font-size:.72rem; color:var(--ink-dim); padding-top:24px; }

/* ---------- Responsive ------------------------------------------ */
@media (max-width: 900px){
  .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cap{ grid-template-columns:1fr; }
  .cap ul{ grid-column:1; grid-row:auto; }
  .chooser__options{ grid-template-columns:1fr; }
  .choice{ height:clamp(220px, 32vh, 340px); }
  .site-footer{ grid-template-columns:1fr; }
}

@media (max-width: 760px){
  .scene--res{ height:760vh; }
  .scene--com{ height:840vh; }
  .nav a:not(.nav__cta){ display:none; }
  .brand__word{ display:none; }
  .nav{ gap:18px; }
  .chooser{ padding-top:96px; }
  .site-header{ padding:16px; }
  .nav__cta{ padding:10px 14px; }

  .scene-intro{ bottom:auto; top:16vh; }
  .scene-intro__sub{ font-size:.92rem; }

  .panel{
    top:auto; bottom:76px; translate:none;
    left:16px; right:16px; width:auto; padding:20px 22px;
  }
  .panel__index{ font-size:1.8rem; }
  .panel__title{ font-size:1.7rem; margin:6px 0 8px; }
  .panel__body{ font-size:.84rem; }
  .panel__spec{ margin-top:12px; padding-top:10px; }

  .elev{ top:74px; }
  .hud{ bottom:22px; gap:12px; }
  .hud__stage{ display:none; }
  .foot-cols{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion: reduce){
  .grain, .scroll-cue span, .loader__mark{ animation:none; }
}