/* ======================================================
   01. VARIABLES
   ====================================================== */

:root{
  --black:#030303;
  --black2:#070706;
  --panel:#0c0c0b;
  --ivory:#f2eee7;
  --muted:rgba(242,238,231,.68);
  --gold:#c9ad65;
  --gold2:#8e6b34;
  --line:rgba(201,173,101,.58);
  --line-soft:rgba(201,173,101,.14);
  --grid:rgba(201,173,101,.07);
  --side:142px;
  --ease:cubic-bezier(.19,1,.22,1);
}

/* ======================================================
   02. RESET & BASE
   ====================================================== */

*{box-sizing:border-box}

html{scroll-behavior:smooth;background:var(--black);}

body{
  margin:0;background:radial-gradient(circle at 76% 16%, rgba(201,173,101,.08), transparent 30%),radial-gradient(circle at 18% 8%, rgba(201,173,101,.08), transparent 34%),#030303;
  color:var(--ivory);font-family:Inter,system-ui,sans-serif;overflow-x:hidden;
}

body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:7px 7px;mix-blend-mode:overlay}

body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.72),transparent 16%,transparent 74%,rgba(0,0,0,.72)),linear-gradient(180deg,rgba(0,0,0,.15),transparent 42%,rgba(0,0,0,.7));}

/* ======================================================
   03. LOADER
   ====================================================== */

.loader{position:fixed;inset:0;z-index:100;background:#020202;display:grid;place-items:center;animation:loaderOut .9s var(--ease) 2.35s forwards;overflow:hidden}
.loader:before{content:"";position:absolute;left:50%;top:50%;width:460px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55;transform:translate(-50%,-50%) scaleX(0);transform-origin:center;animation:loaderLine 1.35s var(--ease) .35s forwards}
.loader:after{content:"ARCHITECTURE OF PERCEPTION";position:absolute;left:50%;top:calc(50% + 92px);transform:translateX(-50%);font-family:Inter,sans-serif;font-size:10px;letter-spacing:.42em;color:var(--gold);opacity:0;animation:fadeIn .75s ease 1.25s forwards}
.loader-logo{width:118px;height:118px;object-fit:contain;opacity:0;filter:drop-shadow(0 0 28px rgba(201,173,101,.18));transform:scale(.92);animation:logoIntro 1.15s var(--ease) .72s forwards}
@keyframes loaderLine{0%{transform:translate(-50%,-50%) scaleX(0);opacity:0}
25%{opacity:.65}
100%{transform:translate(-50%,-50%) scaleX(1);opacity:.28}
}
@keyframes logoIntro{to{opacity:1;transform:scale(1)}
}
@keyframes fadeIn{to{opacity:1}
}
@keyframes loaderOut{to{opacity:0;visibility:hidden;transform:scale(1.015)}
}

/* ======================================================
   04. CUSTOM CURSOR
   ====================================================== */

.cursor{position:fixed;z-index:999;left:0;top:0;width:12px;height:12px;border:1px solid var(--gold);pointer-events:none;transform:translate(-50%,-50%) rotate(45deg);transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),border .3s var(--ease);mix-blend-mode:difference}
.cursor.is-hover{width:24px;height:24px;background:rgba(201,173,101,.18)}

/* ======================================================
   05. SIDE NAVIGATION & TOP BAR
   ====================================================== */

.side{position:fixed;inset:0 auto 0 0;width:var(--side);z-index:20;border-right:1px solid var(--line);background:rgba(0,0,0,.24);backdrop-filter:blur(8px)}
.side-logo{position:absolute;top:48px;left:38px;width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(201,173,101,.18))}
.side-nav{position:absolute;top:195px;left:31px;display:grid;gap:28px}
.side-nav a{color:var(--ivory);text-decoration:none;text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:800;line-height:1.15}
.side-nav span{display:block;color:rgba(242,238,231,.6);font-size:11px;font-weight:500;margin-bottom:8px;letter-spacing:.18em}
.side-nav a.active,.side-nav a:hover{color:var(--gold)}
.side-rule{position:absolute;bottom:92px;left:31px;width:1px;height:84px;background:var(--line);overflow:visible}
.side-progress{position:absolute;top:0;left:-4px;width:9px;height:9px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 12px rgba(201,173,101,.45);transition:top .15s linear}
.scroll-caption{position:absolute;bottom:38px;left:31px;text-transform:uppercase;color:rgba(242,238,231,.56);font-size:10px;letter-spacing:.22em;line-height:1.5}
.top{position:fixed;z-index:19;top:0;left:var(--side);right:0;height:88px;display:flex;align-items:center;justify-content:flex-end;padding:0 58px;border-bottom:1px solid rgba(201,173,101,.08);background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0));backdrop-filter:blur(8px)}
.top .brand{position:absolute;left:50%;transform:translateX(-50%);color:var(--gold);font-size:11px;letter-spacing:.48em;font-weight:700}
.hamb{width:26px;height:18px;display:grid;gap:6px}
.hamb i{display:block;height:1px;background:var(--gold)}

/* ======================================================
   06. GLOBAL LAYOUT & HERO COPY
   ====================================================== */

main{position:relative;z-index:2;margin-left:var(--side)}
.room{position:relative;min-height:100vh;overflow:hidden}
.bg-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24vw 31vh;opacity:.9}
.ghost-logo{position:absolute;left:3.5vw;top:7.5vh;width:310px;height:310px;opacity:.11;filter:sepia(1) saturate(2) hue-rotate(352deg)}
.blueprint{position:absolute;inset:0;pointer-events:none}
.blueprint path,.blueprint line,.blueprint polyline,.blueprint rect,.blueprint circle{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1000;stroke-dashoffset:1000;animation:draw 2.2s var(--ease) 2.78s forwards}
.blueprint .soft{stroke:var(--line-soft)}
.hero{min-height:100vh;padding:0 clamp(30px,5vw,86px) 0 clamp(56px,8vw,180px);display:grid;grid-template-columns:minmax(480px,.88fr) minmax(420px,.9fr);align-items:center;border-bottom:1px solid var(--line)}
.hero-copy{position:relative;z-index:4;padding-top:60px;animation:rise 1.2s var(--ease) 2.85s both}
.eyebrow{color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.42em;text-transform:uppercase}
.title{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(66px,7.1vw,128px);line-height:.79;letter-spacing:.105em;margin:24px 0 25px;text-transform:uppercase;text-shadow:0 18px 45px rgba(0,0,0,.5)}
.role{font-size:12px;color:var(--gold);letter-spacing:.45em;text-transform:uppercase;font-weight:700}
.goldbar{width:58px;height:1px;background:var(--gold);margin:26px 0 38px}
.statement{font-family:'Cormorant Garamond',serif;font-size:clamp(30px,3vw,48px);line-height:1.02;margin:0 0 30px}
.statement em{color:var(--gold);font-style:italic}
.desc{max-width:480px;color:var(--muted);font-size:15px;line-height:1.85;margin-bottom:40px}
.cta{display:inline-flex;align-items:center;gap:24px;color:var(--gold);text-decoration:none;text-transform:uppercase;letter-spacing:.42em;font-size:11px;font-weight:800}
.cta:after{content:"";width:68px;height:1px;background:var(--gold);transition:transform .45s var(--ease)}
.cta:hover:after{transform:translateX(18px)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}
to{opacity:1;transform:none}
}

/* ======================================================
   07. HERO PORTRAIT
   ====================================================== */

.portrait-wrap{position:absolute;right:0;top:88px;height:calc(100vh - 88px);width:min(52vw,760px);z-index:3;clip-path:polygon(18% 0,100% 0,100% 67%,78% 76%,78% 88%,100% 88%,100% 100%,0 100%,0 0);border-left:1px solid rgba(201,173,101,.25);animation:revealPortrait 1.55s var(--ease) 3s both}
.portrait-wrap:before{content:"";position:absolute;inset:0;border:1px solid var(--line);clip-path:inherit;z-index:3}
.portrait-wrap:after{content:"01";position:absolute;right:42px;bottom:38px;color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:28px;letter-spacing:.18em;z-index:4}
.portrait{
   position:absolute;inset:0;background-image:
   linear-gradient(90deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.08) 40%,
            rgba(0,0,0,.70) 100%),
        linear-gradient(180deg,
            rgba(0,0,0,.02),
            rgba(0,0,0,.35)),
        url('../guy2.jpg');
   background-size:cover;background-position:center 18%;filter:grayscale(1) contrast(1.18) brightness(.72);transform:scale(1.1)}
.wall{position:absolute;inset:0;background:#030303;z-index:5;animation:wallOpen 1.45s var(--ease) 3.15s forwards}
.wall.gold{left:auto;width:1px;background:var(--gold);animation:none;z-index:7}
@keyframes revealPortrait{from{opacity:0;transform:translateX(80px)}
to{opacity:1;transform:none}
}
@keyframes wallOpen{to{transform:translateX(106%)}
}

/* ======================================================
   08. OBSERVE SECTION
   ====================================================== */

.room-num{position:absolute;right:40px;bottom:26px;color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:30px;letter-spacing:.17em}
.observe{min-height:760px;display:grid;grid-template-columns:38% 62%;border-bottom:1px solid var(--line)}
.photo-plate{position:relative;min-height:720px;overflow:hidden;border-right:1px solid var(--line);clip-path:polygon(0 0,100% 0,100% 56%,77% 69%,77% 100%,0 100%)}
.photo-plate:before{content:"";position:absolute;inset:10%;border:1px solid var(--line-soft);z-index:3}
.photo-plate .img{
   position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.30),rgba(0,0,0,.05)),url('../guy.jpg');
   background-size:cover;background-position:center top;filter:grayscale(1) contrast(1.1) brightness(.58)}
.observe-copy{padding:120px 10vw 70px 7vw;position:relative}
.secnum{color:var(--gold);letter-spacing:.42em;font-size:11px;font-weight:700;text-transform:uppercase}
.h2{font-family:'Cormorant Garamond',serif;font-size:clamp(42px,4vw,76px);line-height:.96;font-weight:500;margin:22px 0 42px}
.h2 em{color:var(--gold);font-style:italic}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin:34px 0}
.principle{color:var(--muted);line-height:1.6;font-size:14px}
.icon{width:32px;height:32px;margin-bottom:20px;border:1px solid var(--line);position:relative}
.icon:before,.icon:after{content:"";position:absolute;inset:7px;border:1px solid var(--line-soft);transform:rotate(45deg)}
.observe p{max-width:780px;color:var(--muted);line-height:1.8}
.signature{font-family:'Cormorant Garamond',serif;color:var(--gold);font-style:italic;font-size:32px;margin-top:24px}

/* ======================================================
   09. WORK SECTION
   ====================================================== */

.work{padding:0 0 85px;border-bottom:1px solid var(--line)}
.card-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 0 0}
.work-card{min-height:250px;padding:50px 40px;border-right:1px solid var(--line-soft);position:relative;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0))}
.work-card:first-child{border-left:0}
.work-card h3{font-family:'Cormorant Garamond',serif;text-transform:uppercase;letter-spacing:.22em;font-size:28px;font-weight:600;margin:30px 0 18px}
.work-card p{color:var(--muted);font-size:14px;line-height:1.6}
.work-card small{position:absolute;top:28px;left:40px;color:var(--gold);letter-spacing:.3em}
.work-card:hover{background:rgba(201,173,101,.035)}

/* ======================================================
   10. PROOF / LOGOS SECTION
   ====================================================== */

.proof{min-height:480px;display:grid;grid-template-columns:40% 60%;border-bottom:1px solid var(--line);align-items:center}
.proof h2{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,3.2vw,58px);line-height:1.02;font-weight:500;margin:0 0 0 5vw}
.proof h2 em{color:var(--gold);font-style:italic}
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:34px;align-items:center;padding:0 6vw}
.logos span{font-weight:900;font-size:25px;color:rgba(242,238,231,.34);text-align:center;filter:grayscale(1)}
.logos .small{font-size:18px}

/* ======================================================
   11. CONTACT & FOOTER
   ====================================================== */

.contact{min-height:540px;display:grid;grid-template-columns:42% 58%;align-items:center;position:relative}
.contact-copy{padding-left:5vw}
.contact h2{font-family:'Cormorant Garamond',serif;font-size:clamp(40px,4vw,76px);line-height:1.05;font-weight:500;margin:18px 0 35px}
.plan{height:230px;margin-right:4vw;border:1px solid var(--line);opacity:.5;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px),linear-gradient(30deg,transparent 47%,var(--line-soft) 48%,var(--line-soft) 49%,transparent 50%);background-size:25% 50%,25% 50%,100% 100%}
.btn{display:inline-flex;border:1px solid var(--line);padding:18px 34px;color:var(--gold);text-decoration:none;text-transform:uppercase;letter-spacing:.28em;font-size:11px;font-weight:800}
.btn:hover{background:var(--gold);color:#090806}
.footer{height:90px;display:flex;align-items:center;justify-content:space-between;padding:0 58px;color:rgba(242,238,231,.45);font-size:11px;letter-spacing:.26em;text-transform:uppercase;border-top:1px solid var(--line-soft)}

/* ======================================================
   12. REVEAL ANIMATIONS
   ====================================================== */

.reveal{opacity:0;transform:translateY(45px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.drawline{stroke-dasharray:1000;stroke-dashoffset:1000}
.drawline.in{animation:draw 1.6s var(--ease) forwards}

/* ======================================================
   13. RESPONSIVE
   ====================================================== */

@media(max-width:980px){:root{--side:0px}
.side{display:none}
.top{left:0;height:74px;padding:0 24px}
.top .brand{left:24px;transform:none}
.hero{grid-template-columns:1fr;padding:120px 24px 70px}
.portrait-wrap{position:relative;right:auto;top:auto;width:100%;height:520px;margin-top:45px}
.title{font-size:62px}
.observe,.proof,.contact{grid-template-columns:1fr}
.card-row{grid-template-columns:1fr}
.photo-plate{min-height:560px}
.observe-copy{padding:70px 24px}
.principles{grid-template-columns:1fr}
.logos{grid-template-columns:repeat(2,1fr);padding:60px 24px}
.proof h2,.contact-copy{margin:0;padding:60px 24px}
.footer{padding:0 24px;display:grid;gap:8px;height:auto;min-height:120px}
.cursor{display:none}
}




/* ======================================================
   14. TWO WORLDS SECTION
   ====================================================== */

.worlds{
  min-height:100vh;
  padding:120px 6vw 100px;
  border-bottom:1px solid var(--line);
}

.worlds:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.65;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:25% 50%;
}

.worlds-intro{
  position:relative;
  z-index:2;
  max-width:820px;
  margin-bottom:70px;
}

.world-panels{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1px;
  border:1px solid var(--line);
  background:var(--line-soft);
}

.world-panel{
  position:relative;
  min-height:430px;
  padding:56px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)), #050505;
}

.world-panel:before{
  content:"";
  position:absolute;
  right:32px;
  bottom:32px;
  width:160px;
  height:160px;
  border:1px solid var(--line-soft);
  transform:rotate(45deg);
}

.world-panel small{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.36em;
  font-size:11px;
  font-weight:700;
}

.world-panel h3{
  max-width:520px;
  margin:58px 0 25px;
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(44px, 4vw, 78px);
  line-height:.92;
  font-weight:500;
}

.world-panel p{
  max-width:520px;
  margin:0 0 45px;
  color:var(--muted);
  font-size:15px;
  line-height:1.8;
}

.world-panel:hover{
  background:linear-gradient(180deg, rgba(201,173,101,.07), rgba(255,255,255,0)), #050505;
}

.experience-panel{
  clip-path:polygon(0 0, 100% 0, 100% 86%, 86% 100%, 0 100%);
}

.corporate-panel{
  clip-path:polygon(0 0, 100% 0, 100% 100%, 14% 100%, 0 86%);
}

/* ======================================================
   15. EXPERIENCES SECTION
   ====================================================== */

.experiences{
  min-height:100vh;
  padding:120px 6vw 120px;
  border-bottom:1px solid var(--line);
}

.section-heading{
  position:relative;
  z-index:2;
  max-width:860px;
  margin-bottom:70px;
}

.section-heading p,
.corporate-copy p{
  max-width:680px;
  color:var(--muted);
  font-size:16px;
  line-height:1.85;
}

.occasion-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line-soft);
}

.occasion-grid article{
  min-height:260px;
  padding:34px 30px;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  transition:background .35s var(--ease), transform .35s var(--ease);
}

.occasion-grid article:hover{
  background:rgba(201,173,101,.045);
  transform:translateY(-4px);
}

.occasion-grid span{
  display:block;
  margin-bottom:34px;
  color:var(--gold);
  font-size:11px;
  font-weight:700;
  letter-spacing:.32em;
}

.occasion-grid h3,
.training-grid h3{
  margin:0 0 18px;
  font-family:'Cormorant Garamond', serif;
  font-size:30px;
  line-height:1;
  font-weight:600;
}

.occasion-grid p,
.training-grid p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

/* ======================================================
   16. CORPORATE TRAINING SECTION
   ====================================================== */

.corporate{
  min-height:100vh;
  padding:120px 6vw;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 78% 20%, rgba(201,173,101,.07), transparent 34%),
    #030303;
}

.corporate-copy{
  max-width:980px;
  margin-bottom:70px;
}

.training-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line);
}

.training-grid article{
  min-height:250px;
  padding:42px 36px;
  background:#050505;
  transition:background .35s var(--ease), transform .35s var(--ease);
}

.training-grid article:hover{
  background:rgba(201,173,101,.045);
  transform:translateY(-4px);
}

/* ======================================================
   17. MISSING KEYFRAMES
   ====================================================== */

@keyframes draw{
  to{
    stroke-dashoffset:0;
  }
}

/* ======================================================
   18. IMAGE LIGHTNESS ADJUSTMENT
   ====================================================== */

.portrait{
  filter:grayscale(1) contrast(1.08) brightness(1.05);
}

.photo-plate .img{
  filter:grayscale(1) contrast(1.05) brightness(1.10);
}

/* ======================================================
   19. RESPONSIVE ADDITIONS
   ====================================================== */

@media(max-width:1200px){
  .occasion-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .training-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:980px){
  .worlds,
  .experiences,
  .corporate{
    padding:80px 24px;
  }

  .world-panels,
  .training-grid{
    grid-template-columns:1fr;
  }

  .world-panel{
    min-height:auto;
    padding:44px 28px;
  }

  .occasion-grid{
    grid-template-columns:1fr;
  }
}


/* ======================================================
   20. CHOOSE YOUR EXPERIENCE SECTION
   ====================================================== */

.choose{
  min-height:100vh;
  padding:120px 6vw;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 30% 18%, rgba(201,173,101,.06), transparent 34%),
    #030303;
}

.choose:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.72;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:25% 50%;
}

.choose-heading{
  position:relative;
  z-index:2;
  max-width:820px;
  margin-bottom:70px;
}

.choose-heading p{
  max-width:620px;
  color:var(--muted);
  font-size:16px;
  line-height:1.85;
}

.choice-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.choice-panel{
  position:relative;
  min-height:360px;
  padding:48px;
  overflow:hidden;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,0)),
    #050505;
  transition:background .45s var(--ease), transform .45s var(--ease);
}

.choice-panel:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.05);
  transition:opacity .65s var(--ease), transform .85s var(--ease);
  background-size:cover;
  background-position:center;
  filter:grayscale(1) contrast(1.05) brightness(.5);
}

.choice-panel:before{
    content:"";
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:.22;
    transform:scale(1.06);
    transition:
        opacity .6s var(--ease),
        transform 1.2s var(--ease);
}

.choice-panel:hover{
  transform:translateY(-4px);
  background:#050505;
}

.choice-panel:hover:before{
    opacity:.55;
    transform:scale(1);
}

.choice-panel:hover:before{
  transform:scale(1);
}

.weddings-choice:before{
  background-image:url('../wedding.jpg');
}

.private-choice:before{
  background-image:url('../private.jpg');
}

.corporate-choice:before{
  background-image:url('../corporate.jpg');
}

.training-choice:before{
  background-image:url('../training.jpg');
}

.choice-panel small,
.choice-panel h3,
.choice-panel p,
.choice-panel .cta{
  position:relative;
  z-index:2;
}

.choice-panel small{
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.36em;
  font-size:11px;
  font-weight:700;
}

.choice-panel h3{
  max-width:520px;
  margin:74px 0 22px;
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(40px, 4vw, 74px);
  line-height:.92;
  font-weight:500;
  transition:transform .45s var(--ease);
}

.choice-panel:hover h3{
  transform:translateX(10px);
}

.choice-panel p{
  max-width:470px;
  margin:0 0 42px;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

/* ======================================================
   21. MEMORY SECTION
   ====================================================== */

.memory{
  min-height:100vh;
  padding:120px 6vw;
  border-bottom:1px solid var(--line);
  background:#030303;
}

.memory-intro{
  max-width:820px;
  margin-bottom:72px;
}

.memory-flow{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line-soft);
}

.memory-step{
  min-height:260px;
  padding:34px 26px;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
  transition:background .35s var(--ease), transform .35s var(--ease);
}

.memory-step:hover{
  background:rgba(201,173,101,.045);
  transform:translateY(-4px);
}

.memory-step span{
  color:var(--gold);
  font-size:11px;
  font-weight:700;
  letter-spacing:.32em;
}

.memory-step strong{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(34px, 3vw, 58px);
  line-height:.95;
  font-weight:500;
}

.feeling-line{
  margin-top:90px;
  padding:70px 0 0;
  border-top:1px solid var(--line-soft);
}

.feeling-line p{
  max-width:980px;
  margin:0;
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(42px, 5vw, 92px);
  line-height:.96;
  font-weight:500;
}

.feeling-line em{
  color:var(--gold);
  font-style:italic;
}

/* ======================================================
   22. RESPONSIVE ADDITIONS FOR CHOOSE + MEMORY
   ====================================================== */

@media(max-width:1200px){
  .memory-flow{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:980px){
  .choose,
  .memory{
    padding:80px 24px;
  }

  .choose-heading,
  .choice-grid,
  .memory-flow{
    grid-template-columns:1fr;
  }

  .choice-panel,
  .memory-step{
    min-height:auto;
    padding:44px 28px;
  }

  .choice-panel h3{
    margin-top:54px;
  }
}

/* ======================================================
   23. TO THE TOP ARROW
   ====================================================== */

.back-to-top{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:9999;

    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--line);
    background:rgba(3,3,3,.72);
    color:var(--gold);

    font-size:17px;
    text-decoration:none;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transform:translateY(14px);

    transition:
        opacity .35s var(--ease),
        visibility .35s var(--ease),
        transform .35s var(--ease);
}

.back-to-top.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}

/*======================================================
  MEMORY
======================================================*/

.memory{

    padding:140px 7vw;
    border-bottom:1px solid var(--line);

    position:relative;
    overflow:hidden;

}

.memory::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:

        linear-gradient(var(--line-soft) 1px,transparent 1px),
        linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);

    background-size:25% 50%;

    opacity:.45;

    pointer-events:none;

}

.memory-intro{

    max-width:850px;

    margin-bottom:110px;

}

.memory-path{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.memory-item{

    flex:1;

    padding:42px;

    border:1px solid var(--line);

    background:rgba(255,255,255,.02);

    min-height:180px;

    transition:.45s;

}

.memory-item:hover{

    transform:translateY(-8px);

    background:rgba(201,173,101,.04);

}

.memory-item span{

    display:block;

    color:var(--gold);

    letter-spacing:.35em;

    font-size:11px;

    margin-bottom:26px;

}

.memory-item strong{

    display:block;

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    font-weight:500;

    line-height:1;

}

.memory-line{

    height:1px;

    flex:.25;

    background:var(--gold);

    opacity:.5;

}

@media(max-width:1100px){

.memory-path{

    flex-direction:column;

}

.memory-line{

    width:1px;

    height:50px;

}

}

.testimonial-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
  padding-right:5vw;
}

.testimonial-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  padding:34px;
  min-height:330px;
}

.testimonial-card img{
  width:86px;
  height:86px;
  border-radius:50%;
  object-fit:cover;
  margin-bottom:26px;
}

.testimonial-card small{
  display:block;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:10px;
  margin-bottom:28px;
}

.testimonial-card blockquote{
  margin:0;
  font-family:'Cormorant Garamond',serif;
  font-size:31px;
  line-height:1.15;
  color:var(--ivory);
}

@media(max-width:980px){
  .testimonial-cards{
    grid-template-columns:1fr;
    padding:0 24px 70px;
  }
}

.wa-icon{
    width:18px;
    height:18px;
    margin-right:12px;
    flex-shrink:0;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.mobile-menu{
  position:fixed;
  top:74px;
  left:0;
  right:0;
  z-index:30;
  display:grid;
  gap:0;
  background:rgba(3,3,3,.96);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line);
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:.35s var(--ease);
}

.mobile-menu a{
  padding:18px 24px;
  color:var(--ivory);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:12px;
  font-weight:800;
  border-bottom:1px solid var(--line-soft);
}

.mobile-menu.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.legal-links{
  display:flex;
  gap:22px;
  align-items:center;
}

.legal-links a{
  color:rgba(242,238,231,.45);
  text-decoration:none;
  transition:.3s var(--ease);
}

.legal-links a:hover{
  color:var(--gold);
}

/* ==========================================
   COOKIE BAR
========================================== */

.cookie-bar{
    position:fixed;
    left:50%;
    bottom:30px;
    transform:translateX(-50%);
    width:min(900px,calc(100% - 40px));

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;

    padding:18px 26px;

    background:rgba(8,8,8,.92);
    backdrop-filter:blur(18px);

    border:1px solid var(--line);
    z-index:9999;

    opacity:0;
    visibility:hidden;
    transition:.45s var(--ease);
}

.cookie-bar.show{
    opacity:1;
    visibility:visible;
}

.cookie-text{
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}

.cookie-text a{
    color:var(--gold);
    text-decoration:none;
}

.cookie-btn{
    flex-shrink:0;

    background:transparent;
    border:1px solid var(--gold);

    color:var(--gold);

    padding:14px 28px;

    cursor:pointer;

    text-transform:uppercase;
    letter-spacing:.25em;

    font-size:11px;
    font-weight:700;

    transition:.35s;
}

.cookie-btn:hover{
    background:var(--gold);
    color:#000;
}

@media(max-width:900px){

.cookie-bar{
    flex-direction:column;
    text-align:center;
}

}

/* ======================================================
   CORPORATE TRAINING — ARCHITECTURE OF PERCEPTION
   ====================================================== */

.training-journey{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  border:1px solid var(--line);
  background:var(--line-soft);
  margin-top:80px;
}

.journey-step{
  min-height:310px;
  padding:42px 32px;
  background:#050505;
}

.journey-step span{
  display:block;
  color:var(--gold);
  font-size:11px;
  letter-spacing:.35em;
  margin-bottom:38px;
}

.journey-step h3{
  font-family:'Cormorant Garamond',serif;
  font-size:34px;
  line-height:1;
  font-weight:500;
  margin:0 0 24px;
}

.journey-step p{
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  margin:0;
}

.journey-line{
  display:none;
}

.training-outcomes{
  margin-top:90px;
  padding-top:60px;
  border-top:1px solid var(--line-soft);
}

.outcomes-grid{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  border:1px solid var(--line-soft);
  background:var(--line-soft);
}

.outcomes-grid div{
  padding:24px;
  background:#050505;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.training-why{
  margin-top:90px;
  border:1px solid var(--line);
  padding:60px;
  background:rgba(255,255,255,.025);
}

.why-copy h3{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(42px,4vw,76px);
  line-height:.95;
  font-weight:500;
  margin:22px 0 28px;
}

.why-copy h3 em{
  color:var(--gold);
  font-style:italic;
}

.why-copy p{
  max-width:850px;
  color:var(--muted);
  font-size:16px;
  line-height:1.85;
}

@media(max-width:1200px){
  .training-journey,
  .outcomes-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:980px){
  .training-journey,
  .outcomes-grid{
    grid-template-columns:1fr;
  }

  .journey-step{
    min-height:auto;
  }

  .training-why{
    padding:36px 28px;
  }
}


/* ======================================================
   24. SECTION HEADER CONSISTENCY FIX
   ====================================================== */

.section-heading,
.choose-heading,
.worlds-intro,
.memory-intro,
.corporate-copy{
  position:relative;
  z-index:2;
}

.section-heading,
.choose-heading,
.worlds-intro,
.memory-intro{
  max-width:860px;
}

.section-heading p,
.choose-heading p,
.memory-intro p,
.corporate-copy p{
  max-width:680px;
  color:var(--muted);
  font-size:16px;
  line-height:1.85;
}

.section-heading{
  display:block;
}

.training-intro{
  margin-top:34px;
  margin-bottom:28px;
}

.training-intro strong{
  color:var(--ivory);
  font-weight:700;
}

.corporate-teaser{
  display:grid;
  grid-template-columns:48% 52%;
  gap:60px;
  align-items:center;
}

.training-main-btn{
  margin-top:34px;
}

.training-teaser-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  border:1px solid var(--line);
  background:var(--line-soft);
}

.training-teaser-cards article{
  padding:42px;
  background:#050505;
}

.training-teaser-cards span{
  display:block;
  color:var(--gold);
  font-size:11px;
  letter-spacing:.35em;
  margin-bottom:26px;
}

.training-teaser-cards h3{
  margin:0 0 18px;
  font-family:'Cormorant Garamond',serif;
  font-size:42px;
  line-height:1;
  font-weight:500;
}

.training-teaser-cards p{
  max-width:520px;
  color:var(--muted);
  font-size:15px;
  line-height:1.75;
}

@media(max-width:980px){
  .corporate-teaser{
    grid-template-columns:1fr;
  }
}