:root{
  --black:#030303;
  --black-2:#070707;
  --black-3:#0d0d0d;
  --ivory:#f4f1ea;
  --muted:#9d9991;
  --champagne:#d7c3a0;
  --champagne-2:#b49a73;
  --line:rgba(232,227,218,.14);
  --font:'Manrope',Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{margin:0;background:var(--black);color:var(--ivory);font-family:var(--font);overflow-x:hidden}
body.modal-open{overflow:hidden}
button,input,textarea,select{font:inherit}
button{color:inherit}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--champagne);color:#090807}
:focus-visible{outline:2px solid var(--champagne);outline-offset:4px}

.page-progress{position:fixed;z-index:100;top:0;left:0;right:0;height:1px;background:rgba(255,255,255,.05)}
.page-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#756044,var(--champagne),#756044)}
.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.045;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.pointer-light{position:fixed;z-index:2;width:480px;height:480px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(215,195,160,.08),rgba(215,195,160,.025) 42%,transparent 70%);filter:blur(12px);transform:translate(-50%,-50%);will-change:transform}

.site-nav{position:fixed;z-index:80;top:0;left:0;right:0;height:78px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid transparent;transition:height .35s,background .35s,border-color .35s}
.site-nav.scrolled{height:66px;background:rgba(3,3,3,.78);backdrop-filter:blur(18px);border-bottom-color:rgba(255,255,255,.08)}
.brand{display:block;width:132px}
.brand img{display:block;width:100%;height:38px;object-fit:cover}
.nav-links{display:flex;align-items:center;gap:26px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.nav-links a{text-decoration:none;color:rgba(244,241,234,.66);transition:color .25s}
.nav-links a:hover{color:var(--ivory)}
.nav-cta{border:1px solid rgba(244,241,234,.2);background:rgba(244,241,234,.98);color:#090807;border-radius:999px;padding:11px 17px;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .3s,background .3s}
.nav-cta:hover{transform:translateY(-2px);background:#fff}
.nav-cta span{margin-left:7px}

.micro{margin:0;color:#8d877f;font-size:9px;line-height:1.4;letter-spacing:.19em;font-weight:700;text-transform:uppercase}

/* HERO */
.hero{position:relative;min-height:max(920px,118vh);padding:138px clamp(20px,4vw,64px) 0;overflow:hidden;background:
  radial-gradient(ellipse at 50% 44%,rgba(151,126,91,.065),transparent 31%),
  radial-gradient(circle at 82% 15%,rgba(255,255,255,.025),transparent 18%),
  linear-gradient(180deg,#010101 0%,#040404 50%,#020202 100%)}
.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
  linear-gradient(rgba(255,255,255,.011) 1px,transparent 1px);
  background-size:100px 100px;mask-image:radial-gradient(ellipse at 50% 48%,#000 0 25%,transparent 70%)}
.hero-atmosphere{position:absolute;left:50%;top:38%;width:min(1200px,90vw);height:440px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(215,195,160,.09),rgba(116,95,70,.028) 40%,transparent 72%);filter:blur(46px);pointer-events:none}
.hero-copy{position:relative;z-index:10;max-width:1540px;margin:0 auto}
.hero h1{margin:22px 0 0;font-size:clamp(58px,8.55vw,146px);line-height:.82;letter-spacing:-.075em;font-weight:600;text-transform:uppercase}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 span:nth-child(2){margin-left:8.5vw}
.hero h1 em{font-family:var(--serif);font-weight:400;text-transform:none;color:var(--champagne);letter-spacing:-.045em}
.hero-copy-bottom{display:grid;grid-template-columns:minmax(290px,600px) 1fr;gap:50px;align-items:start;margin:34px 0 0 8.6vw}
.hero-copy-bottom>p{margin:0;max-width:560px;color:#918d86;font-size:clamp(13px,1.05vw,17px);line-height:1.72}
.hero-index{justify-self:end;display:flex;flex-direction:column;gap:6px;align-items:flex-end;color:#605b54;font-size:8px;letter-spacing:.18em}
.hero-index b{color:#cfc4b2;font-size:11px;font-weight:500}

.showcase-shell{position:absolute;z-index:8;left:0;right:0;bottom:0;height:min(66vh,760px)}
.showcase-viewport{position:absolute;left:50%;bottom:2px;width:min(1560px,116vw);height:100%;transform:translateX(-50%);perspective:2100px;perspective-origin:50% 45%;touch-action:pan-y;cursor:grab;outline:none}
.showcase-viewport:active{cursor:grabbing}
.stage-light{position:absolute;left:50%;top:41%;width:min(1080px,88vw);height:390px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(215,195,160,.105),rgba(104,84,61,.028) 42%,transparent 73%);filter:blur(35px);pointer-events:none}
.stage-floor{position:absolute;left:50%;bottom:62px;width:min(1160px,88vw);height:250px;transform:translateX(-50%) rotateX(72deg);transform-origin:center bottom;background:radial-gradient(ellipse,rgba(235,222,198,.07),rgba(80,70,58,.022) 34%,transparent 70%);filter:blur(6px);border-top:1px solid rgba(255,255,255,.025);pointer-events:none}
.orbit-rig{position:absolute;left:50%;top:46%;width:760px;height:430px;transform:translate(-50%,-50%) rotateX(-4deg);transform-style:preserve-3d}
.project-ring{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.ring-panel{--angle:0deg;--radius:900px;position:absolute;left:50%;top:50%;width:760px;height:428px;margin:-214px 0 0 -380px;transform:rotateY(var(--angle)) translateZ(var(--radius));transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,filter,opacity;filter:brightness(var(--brightness,.72)) saturate(var(--saturation,.76));opacity:var(--opacity,.7);transition:filter .16s linear,opacity .16s linear}
.ring-panel:nth-child(1){--angle:0deg}
.ring-panel:nth-child(2){--angle:90deg}
.ring-panel:nth-child(3){--angle:180deg}
.ring-panel:nth-child(4){--angle:270deg}
.panel-frame{position:absolute;inset:0;overflow:hidden;border-radius:18px;background:#0b0b0b;border:1px solid rgba(238,228,211,.16);box-shadow:0 48px 110px rgba(0,0,0,.66),inset 0 1px rgba(255,255,255,.055),inset 0 -1px rgba(0,0,0,.65)}
.panel-frame:after{content:"";position:absolute;z-index:8;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 0 38%,rgba(255,255,255,.055) 47%,transparent 56%);transform:translateX(var(--shine,-130%))}
.panel-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.018);filter:contrast(1.04)}
.panel-tint{position:absolute;inset:0}
.carnival-tint{background:linear-gradient(135deg,rgba(4,4,4,.08),rgba(4,4,4,.25) 42%,rgba(24,6,4,.72)),linear-gradient(180deg,transparent 35%,rgba(0,0,0,.62))}
.school-tint{background:linear-gradient(130deg,rgba(36,8,13,.04),rgba(36,8,13,.28) 42%,rgba(22,4,7,.72)),linear-gradient(180deg,transparent 40%,rgba(0,0,0,.62))}
.panel-browser{position:absolute;z-index:5;left:0;right:0;top:0;height:36px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(15,15,15,.88),rgba(8,8,8,.7));backdrop-filter:blur(8px)}
.panel-browser i{display:block;width:6px;height:6px;border-radius:50%;background:#555}
.panel-browser i:first-child{background:var(--champagne-2)}
.panel-browser span{margin-left:7px;color:#7c776f;font-size:7px;letter-spacing:.16em;text-transform:uppercase}
.panel-copy{position:absolute;z-index:7;left:28px;right:28px;bottom:25px}
.panel-copy small{display:block;color:var(--champagne);font-size:8px;letter-spacing:.18em;font-weight:700}
.panel-copy strong{display:block;margin-top:7px;font-size:clamp(40px,4.1vw,64px);line-height:.88;letter-spacing:-.065em;font-weight:600}
.panel-copy span{display:block;margin-top:8px;color:rgba(255,255,255,.6);font-size:10px;letter-spacing:.065em}
.panel-corner{position:absolute;z-index:6;right:18px;top:52px;color:rgba(255,255,255,.3);font-size:7px;letter-spacing:.18em}

.panel-crece{background:radial-gradient(circle at 78% 20%,rgba(174,209,181,.16),transparent 26%),linear-gradient(145deg,#101512,#060806 68%)}
.crece-composition{position:absolute;inset:36px 0 0;overflow:hidden}
.crece-editorial{position:absolute;left:44px;top:54px;width:315px}
.crece-editorial small{font-size:7px;letter-spacing:.2em;color:#8a988d}
.crece-editorial strong{display:block;margin-top:15px;font-size:48px;line-height:.9;letter-spacing:-.065em;font-weight:600}
.crece-editorial strong em{font-family:var(--serif);font-weight:400;color:#b8c7b9}
.crece-editorial p{max-width:260px;margin:18px 0 0;color:#738076;font-size:11px;line-height:1.6}
.crece-phone{position:absolute;right:78px;top:26px;width:220px;height:335px;padding:22px 18px;border-radius:30px;background:linear-gradient(155deg,#f4f1e8,#dfe5dd);color:#112018;box-shadow:0 35px 70px rgba(0,0,0,.42);transform:rotate(5deg)}
.crece-head{display:flex;justify-content:space-between;font-size:10px}.crece-head span{color:#738077}
.crece-phone>small{display:block;margin-top:28px;color:#839087;font-size:7px;letter-spacing:.16em}
.crece-phone h3{margin:5px 0 14px;font-size:25px;letter-spacing:-.05em}
.crece-score{width:103px;height:103px;margin:4px auto 13px;border-radius:50%;border:13px solid #9db7a2;display:grid;place-items:center;align-content:center}
.crece-score b{font-size:19px}.crece-score span{font-size:6px;color:#667267}
.crece-metrics{display:flex;gap:6px}.crece-metrics i{display:block;flex:1;height:24px;border-radius:7px;background:#cad7cb}.crece-metrics i:nth-child(2){background:#afc6b2}
.crece-meal{display:grid;grid-template-columns:7px 1fr auto;gap:6px;align-items:center;margin-top:10px;padding:9px;border-radius:10px;background:#fff;font-size:7px}
.crece-meal span{width:7px;height:7px;border-radius:50%;background:#7da286}.crece-meal em{font-style:normal;color:#7d837d}

.panel-shortgen{background:radial-gradient(circle at 72% 23%,rgba(99,74,147,.2),transparent 27%),linear-gradient(145deg,#111015,#07070a 70%)}
.shortgen-composition{position:absolute;inset:36px 0 0;overflow:hidden}
.shortgen-title{position:absolute;left:44px;top:64px;z-index:3}
.shortgen-title small{font-size:7px;letter-spacing:.2em;color:#8b80a0}
.shortgen-title strong{display:block;margin-top:12px;font-size:50px;line-height:.88;letter-spacing:-.06em;font-weight:600}
.film-stack{position:absolute;right:55px;top:44px;width:360px;height:220px;perspective:800px}
.film-stack i{position:absolute;width:126px;height:176px;border-radius:12px;border:1px solid rgba(255,255,255,.13);background:radial-gradient(circle at 65% 22%,rgba(130,105,185,.52),transparent 28%),linear-gradient(145deg,#292532,#0c0b0f);box-shadow:0 25px 45px rgba(0,0,0,.35)}
.film-stack i:nth-child(1){left:26px;top:15px;transform:rotate(-10deg) translateZ(-10px)}
.film-stack i:nth-child(2){left:117px;top:0;z-index:2}
.film-stack i:nth-child(3){left:210px;top:17px;transform:rotate(10deg) translateZ(-10px)}
.timeline-ui{position:absolute;left:44px;right:44px;bottom:63px;height:32px;border-top:1px solid rgba(255,255,255,.13);display:flex;gap:5px;padding-top:8px}
.timeline-ui span{height:8px;flex:1;border-radius:2px;background:#5d526e}.timeline-ui span:nth-child(2){background:#9d8664}.timeline-ui span:nth-child(3){background:#4d6c78}
.timeline-ui b{position:absolute;left:54%;top:-6px;width:1px;height:29px;background:#eee}

.scene-hud{position:absolute;z-index:15;left:8%;right:8%;bottom:18px;display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid rgba(235,225,208,.09);color:#5f5a53;font-size:8px;letter-spacing:.16em}
.scene-controls{display:flex;align-items:center;gap:12px}
.scene-controls button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(235,225,208,.12);background:rgba(8,8,8,.65);cursor:pointer;color:#b7aa96;transition:background .25s,border-color .25s,color .25s}
.scene-controls button:hover{background:#e8e0d4;color:#080706;border-color:#e8e0d4}
.scene-controls b{min-width:48px;text-align:center;color:#c7bba8;font-size:9px;font-weight:500}
.hero-fade{position:absolute;z-index:9;left:0;right:0;bottom:0;height:190px;background:linear-gradient(transparent,#020202 82%);pointer-events:none}

/* PROOF */
.proof{position:relative;z-index:12;padding:110px clamp(20px,5vw,78px) 125px;background:#020202}
.proof-intro{display:grid;grid-template-columns:.8fr 1.4fr;gap:60px;padding-top:23px;border-top:1px solid var(--line)}
.proof-intro span{color:var(--champagne);font-size:9px;letter-spacing:.17em;font-weight:700}
.proof-intro p{margin:0;max-width:850px;font-size:clamp(25px,2.4vw,38px);line-height:1.18;letter-spacing:-.04em}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:78px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-grid article{padding:34px 26px 38px;border-right:1px solid var(--line)}
.proof-grid article:first-child{padding-left:0}.proof-grid article:last-child{border-right:0}
.proof-grid b{font-family:var(--serif);font-size:clamp(45px,4.8vw,76px);font-weight:400;line-height:1;letter-spacing:-.045em}
.proof-grid span{display:block;margin-top:10px;color:#716d66;font-size:9px;letter-spacing:.12em;text-transform:uppercase}

/* FEATURED */
.featured{position:relative;padding:125px clamp(20px,5vw,78px) 145px;background:#060606;overflow:hidden}
.featured:before{content:"";position:absolute;width:820px;height:820px;left:48%;top:13%;border-radius:50%;background:radial-gradient(circle,rgba(150,111,67,.095),transparent 66%)}
.featured-head{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;grid-template-areas:"micro para" "title para";align-items:end;gap:6px 90px}
.featured-head .micro{grid-area:micro}.featured-head h2{grid-area:title;margin:10px 0 0;font-size:clamp(84px,13.4vw,210px);line-height:.8;letter-spacing:-.075em;font-weight:600}
.featured-head>p:last-child{grid-area:para;max-width:510px;margin:0 0 8px;color:#8d8981;line-height:1.65}
.featured-stage{position:relative;z-index:2;height:min(62vw,740px);min-height:560px;margin-top:72px;perspective:1600px}
.device{position:absolute;background:#101010;border:1px solid rgba(255,255,255,.14);box-shadow:0 55px 110px rgba(0,0,0,.52)}
.device-desktop{width:min(1060px,76vw);height:min(615px,44vw);min-height:440px;left:50%;top:28px;transform:translateX(-54%) rotateX(3deg) rotateY(-5deg);border-radius:20px;overflow:hidden}
.device-top{height:38px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#151515;border-bottom:1px solid rgba(255,255,255,.09)}
.device-top i{width:7px;height:7px;border-radius:50%;background:#555}.device-top i:first-child{background:var(--champagne-2)}
.device-top span{margin-left:7px;color:#65615b;font-size:7px;letter-spacing:.13em}
.carnaval-showcase{height:calc(100% - 38px);display:grid;grid-template-columns:1fr 1fr}
.market-side,.food-side{position:relative;padding:8% 7%;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.market-side{background:radial-gradient(circle at 72% 30%,rgba(215,195,160,.12),transparent 25%),linear-gradient(145deg,#183722,#09150d)}
.food-side{background:radial-gradient(circle at 65% 25%,rgba(215,195,160,.08),transparent 23%),linear-gradient(145deg,#45140f,#1b0806)}
.market-side:before,.food-side:before{content:"";position:absolute;width:250px;height:250px;right:-22px;top:58px;border-radius:50%;border:45px solid rgba(255,255,255,.035)}
.market-side small,.food-side small{font-size:9px;letter-spacing:.18em;color:var(--champagne);font-weight:700}
.market-side strong,.food-side strong{margin:12px 0 22px;font-size:clamp(30px,3.3vw,55px);line-height:.98;letter-spacing:-.055em}
.market-side span,.food-side span{font-size:9px;letter-spacing:.08em;color:#b3aea6}
.device-phone{z-index:3;width:220px;height:450px;right:5.5%;bottom:12px;padding:18px;border:7px solid #161616;border-radius:34px;background:#efeee8;color:#0d0d0d;transform:rotate(5deg)}
.phone-notch{position:absolute;left:50%;top:0;width:70px;height:17px;transform:translateX(-50%);border-radius:0 0 11px 11px;background:#161616}
.mini-brand{margin-top:17px;font-size:13px;font-weight:900;letter-spacing:.06em}
.mini-banner{height:105px;margin-top:16px;border-radius:15px;background:linear-gradient(135deg,#173b23,#77613b)}
.mini-pills{display:flex;gap:6px;margin-top:14px}.mini-pills i{height:18px;flex:1;border-radius:99px;background:#dddcd5}.mini-pills i:first-child{background:#181818}
.mini-products{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.mini-products span{height:145px;border-radius:13px;background:linear-gradient(#fff,#deddd7)}
.float-label{position:absolute;z-index:5;padding:9px 12px;border:1px solid rgba(255,255,255,.18);border-radius:99px;background:rgba(8,8,8,.7);backdrop-filter:blur(8px);font-size:7px;letter-spacing:.16em}.float-label.one{left:6%;top:19%}.float-label.two{right:18%;top:8%}.float-label.three{left:18%;bottom:9%}
.featured-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding-top:22px;border-top:1px solid var(--line);color:#6f6b64;font-size:9px;letter-spacing:.1em}.featured-foot a{color:#f1ede6;text-decoration:none;font-weight:700}.featured-foot a b{margin-left:6px;color:var(--champagne)}

/* MANIFESTO */
.manifesto{position:relative;min-height:1000px;padding:130px clamp(20px,5vw,78px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:#030303}
.manifesto-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.38)),radial-gradient(circle at 72% 46%,rgba(184,151,107,.07),transparent 28%),linear-gradient(135deg,#0d0d0c,#030303);transform:scale(1.05)}
.manifesto:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 0 97%,rgba(255,255,255,.045) 97%),linear-gradient(90deg,transparent 0 97%,rgba(255,255,255,.04) 97%);background-size:96px 96px;mask-image:linear-gradient(90deg,transparent,#000 45%,#000)}
.manifesto>*:not(.manifesto-bg){position:relative;z-index:2}
.manifesto-title{margin:42px 0 0;font-size:clamp(70px,10.5vw,168px);line-height:.78;letter-spacing:-.075em;font-weight:600}
.manifesto-title span{display:block}.manifesto-title span:nth-child(2){margin-left:8vw}
.manifesto-title .outline{font-family:var(--serif);font-weight:400;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.66);font-size:.78em;letter-spacing:-.04em}
.manifesto-note{align-self:flex-end;width:min(500px,45vw);display:grid;grid-template-columns:42px 1fr;gap:20px;margin-top:85px;padding-top:18px;border-top:1px solid var(--line)}
.manifesto-note span{color:var(--champagne);font-size:9px}.manifesto-note p{margin:0;color:#8f8b83;line-height:1.7}

/* OTHER WORK */
.work-showcase{padding:135px clamp(20px,5vw,78px) 130px;overflow:hidden;background:radial-gradient(circle at 50% 28%,rgba(153,126,89,.055),transparent 31%),#050505}
.work-title{display:flex;justify-content:space-between;align-items:end;gap:50px}.work-title h2{margin:0;text-align:right;font-size:clamp(50px,6.3vw,98px);line-height:.9;letter-spacing:-.062em;font-weight:600}
.work-carousel{position:relative;max-width:1320px;margin:95px auto 0}.work-stage{position:relative;height:min(52vw,650px);min-height:520px;perspective:1500px}
.work-panel{position:absolute;left:50%;top:50%;width:min(840px,65vw);height:min(540px,42vw);min-height:430px;transform:translate(-50%,-50%) rotateY(44deg) translateX(37%);transform-origin:center;opacity:.38;filter:saturate(.65) brightness(.7);pointer-events:none;border-radius:8px;overflow:hidden;box-shadow:0 35px 80px rgba(0,0,0,.38);transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .65s,filter .65s}
.work-panel.active{z-index:3;transform:translate(-50%,-50%);opacity:1;filter:none;pointer-events:auto}.work-panel.before{z-index:2;transform:translate(-50%,-50%) rotateY(-44deg) translateX(-38%);opacity:.38}.work-panel.after{z-index:2;transform:translate(-50%,-50%) rotateY(44deg) translateX(38%);opacity:.38}
.work-art{position:absolute;inset:0;overflow:hidden}.school-art{background:linear-gradient(135deg,#731b28,#b7913b)}.school-photo{position:absolute;inset:0;background-image:linear-gradient(180deg,transparent 25%,rgba(50,4,12,.72)),url('https://colegio-san-idelfonso-web.pages.dev/assets/hero-school.webp');background-size:cover;background-position:center}.school-mark{position:absolute;left:42px;bottom:38px}.school-mark small,.crece-copy small,.sg-copy small{display:block;font-size:8px;letter-spacing:.18em;font-weight:700}.school-mark strong,.crece-copy strong,.sg-copy strong{display:block;font-size:clamp(42px,5vw,76px);line-height:.95;letter-spacing:-.058em;font-weight:600}.school-mark span,.sg-copy span{display:block;margin-top:10px;font-size:10px;letter-spacing:.07em}
.crece-art{color:#102018;background:radial-gradient(circle at 24% 40%,rgba(151,255,180,.32),transparent 32%),linear-gradient(135deg,#dce9df,#f0ede5)}.crece-phone-card{position:absolute;right:12%;top:9%;width:260px;height:430px;padding:32px;border-radius:36px;background:#fff;box-shadow:0 35px 70px rgba(33,65,42,.18);transform:rotate(6deg)}.crece-phone-card span{font-size:13px;font-weight:900}.crece-phone-card b{display:block;margin-top:52px;font-size:27px;letter-spacing:-.045em}.crece-phone-card i{display:grid;place-items:center;width:115px;height:115px;margin:26px auto;border:15px solid #a4caaa;border-radius:50%;font-style:normal;font-size:22px;font-weight:800}.crece-phone-card em{display:block;text-align:center;color:#6d786f;font-style:normal;font-size:10px}.crece-copy{position:absolute;left:8%;bottom:12%}
.shortgen-art{background:radial-gradient(circle at 66% 34%,rgba(107,76,255,.22),transparent 25%),linear-gradient(140deg,#0b0b13,#161225)}.sg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,transparent,#000)}.sg-copy{position:absolute;left:8%;bottom:12%}.sg-copy small{color:#a797c9}
.carousel-arrow{position:absolute;z-index:8;top:50%;width:56px;height:56px;border-radius:50%;border:1px solid var(--line);background:rgba(10,10,10,.72);backdrop-filter:blur(8px);cursor:pointer;color:#e9e2d7;font-size:18px;transition:.25s}.carousel-arrow:hover{background:#ece5d9;color:#080706}.carousel-arrow.prev{left:-12px}.carousel-arrow.next{right:-12px}
.work-meta{display:grid;grid-template-columns:120px 1fr auto;gap:45px;align-items:end;max-width:1100px;margin:35px auto 0;padding-top:24px;border-top:1px solid var(--line)}.work-meta>div:first-child span{font-size:52px;font-weight:600;letter-spacing:-.06em}.work-meta>div:first-child small{color:#777}.work-description small{color:#7c766d;font-size:8px;letter-spacing:.17em}.work-description h3{margin:6px 0 8px;font-size:29px;letter-spacing:-.045em}.work-description p{max-width:650px;margin:0;color:#8b867e;font-size:12px;line-height:1.68}.work-meta>a{color:#efe8de;text-decoration:none;border-bottom:1px solid #efe8de;padding-bottom:4px;font-size:9px;letter-spacing:.12em;font-weight:700}

/* CAPABILITIES */
.capabilities{padding:135px clamp(20px,5vw,78px) 145px;background:#020202}.cap-head{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:start}.cap-head h2{margin:0;font-size:clamp(58px,7.4vw,114px);line-height:.85;letter-spacing:-.068em;font-weight:600}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:100px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.cap-grid article{min-height:290px;padding:30px;display:flex;flex-direction:column;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.cap-grid b{color:var(--champagne);font-size:8px;letter-spacing:.12em}.cap-grid h3{margin:auto 0 12px;font-size:24px;letter-spacing:-.045em}.cap-grid p{max-width:330px;margin:0;color:#827e77;font-size:12px;line-height:1.65}

/* CTA / FOOTER */
.cta-section{position:relative;min-height:760px;padding:100px 20px;display:grid;place-items:center;text-align:center;overflow:hidden;background:#030303}.cta-section>.micro,.cta-section>h2,.cta-section>.cta-button{position:relative;z-index:2}.cta-section h2{margin:24px 0 48px;font-size:clamp(70px,10.5vw,165px);line-height:.8;letter-spacing:-.073em;font-weight:600}.cta-section h2 span{font-family:var(--serif);font-weight:400;color:var(--champagne);letter-spacing:-.04em}.cta-button{border:1px solid rgba(244,241,234,.22);border-radius:999px;background:#ede7dd;color:#0b0a08;padding:16px 24px;font-size:9px;letter-spacing:.12em;font-weight:700;cursor:pointer;transition:transform .3s}.cta-button:hover{transform:translateY(-3px)}.cta-button b{margin-left:8px}
.cta-orbit{position:absolute;width:620px;height:620px;border:1px solid rgba(215,195,160,.08);border-radius:50%}.cta-orbit:before,.cta-orbit:after{content:"";position:absolute;inset:12%;border:1px solid rgba(215,195,160,.055);border-radius:50%}.cta-orbit:after{inset:27%}.cta-orbit i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--champagne);box-shadow:0 0 25px rgba(215,195,160,.5)}.cta-orbit i:nth-child(1){left:50%;top:-3px}.cta-orbit i:nth-child(2){right:4%;top:30%}.cta-orbit i:nth-child(3){left:10%;bottom:20%}
.footer{padding:38px clamp(20px,5vw,78px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;background:#020202;border-top:1px solid var(--line)}.footer img{width:118px;height:34px;object-fit:cover}.footer>div{display:flex;gap:18px;align-items:center}.footer a,.footer button{border:0;background:none;padding:0;color:#77736c;text-decoration:none;font-size:8px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.footer p{justify-self:end;margin:0;color:#625e58;font-size:8px;letter-spacing:.08em}

/* MODALS */
.modal{position:fixed;z-index:120;inset:0;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.76);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:.28s}.modal.open{opacity:1;visibility:visible}.modal-card{position:relative;width:min(620px,100%);max-height:min(800px,90vh);overflow:auto;padding:42px;border-radius:24px;background:#ece8df;color:#0b0a08;box-shadow:0 35px 110px rgba(0,0,0,.45)}.modal-close{position:absolute;right:18px;top:14px;border:0;background:none;color:#111;font-size:28px;cursor:pointer}.modal-micro{color:#81786b}.modal-card h2{margin:10px 0 28px;font-size:clamp(36px,5vw,58px);line-height:.95;letter-spacing:-.055em}.modal-card form{display:grid;gap:15px}.modal-card label{display:grid;gap:7px;color:#575149;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.modal-card input,.modal-card select,.modal-card textarea{width:100%;border:1px solid rgba(0,0,0,.16);border-radius:12px;background:rgba(255,255,255,.55);padding:13px;color:#111;outline:none}.modal-card textarea{min-height:130px;resize:vertical}.modal-card form>button{border:0;border-radius:999px;background:#0b0a08;color:#fff;padding:14px 18px;font-size:9px;letter-spacing:.1em;font-weight:700;cursor:pointer}.form-notice{display:none;margin:2px 0 0;color:#676058;font-size:11px;line-height:1.55}.legal p{color:#4f4a43;line-height:1.7}

/* REVEALS */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}.reveal.in-view{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:1180px){
  .nav-links{gap:18px}
  .hero{min-height:max(900px,112vh)}
  .showcase-shell{height:min(64vh,700px)}
  .orbit-rig{transform:translate(-50%,-50%) rotateX(-4deg) scale(.88)}
  .featured-stage{min-height:520px}
}
@media(max-width:900px){
  .nav-links a:nth-child(3){display:none}
  .hero{min-height:1080px;padding-top:118px}
  .hero h1{font-size:clamp(56px,10vw,96px)}
  .hero h1 span:nth-child(2){margin-left:0}
  .hero-copy-bottom{margin-left:0}
  .showcase-shell{height:610px}
  .showcase-viewport{width:108vw;perspective:1500px}
  .orbit-rig{top:45%;transform:translate(-50%,-50%) rotateX(-4deg) scale(.73)}
  .proof-intro{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .proof-grid article:nth-child(2){border-right:0}
  .proof-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .featured-head{grid-template-columns:1fr;grid-template-areas:"micro" "title" "para";gap:0}.featured-head>p:last-child{margin-top:30px}
  .featured-stage{height:690px}.device-desktop{width:86vw;height:52vw;min-height:430px;transform:translateX(-52%) rotateX(3deg) rotateY(-4deg)}.device-phone{right:2%}
  .work-title{display:block}.work-title h2{text-align:left;margin-top:18px}.work-panel{width:76vw;height:49vw;min-height:410px}
  .cap-head{grid-template-columns:1fr}.cap-grid{grid-template-columns:repeat(2,1fr)}
  .footer{grid-template-columns:1fr auto}.footer p{grid-column:1/-1;justify-self:start}
}
@media(max-width:700px){
  .site-nav{height:70px;padding:0 16px}.brand{width:114px}.brand img{height:34px}.nav-links{gap:10px}.nav-links a{display:none}.nav-cta{padding:10px 14px}
  .hero{min-height:940px;padding:105px 16px 0;background:radial-gradient(ellipse at 50% 46%,rgba(151,126,91,.07),transparent 31%),linear-gradient(180deg,#010101,#040404 55%,#020202)}
  .hero h1{font-size:clamp(48px,14.5vw,76px);line-height:.86}.hero h1 span{white-space:normal}.hero h1 span:nth-child(2){margin-top:3px}.hero-copy-bottom{grid-template-columns:1fr;margin-top:24px}.hero-copy-bottom>p{max-width:430px;font-size:13px}.hero-index{display:none}
  .showcase-shell{height:535px}.showcase-viewport{width:100%;perspective:1120px;bottom:0}.stage-floor{width:650px;height:180px;bottom:55px}.stage-light{width:650px;height:290px}
  .orbit-rig{top:44%;transform:translate(-50%,-50%) rotateX(-3deg) scale(.52)}
  .scene-hud{left:16px;right:16px;bottom:14px}.drag-label{font-size:6px}.scene-controls{gap:8px}.scene-controls button{width:28px;height:28px}
  .proof,.featured,.work-showcase,.capabilities{padding-left:16px;padding-right:16px}.proof{padding-top:88px;padding-bottom:95px}.proof-grid{margin-top:55px}.proof-grid article{padding:25px 15px}.proof-grid article:nth-child(odd){padding-left:0}
  .featured{padding-top:95px;padding-bottom:105px}.featured-head h2{font-size:clamp(72px,22vw,118px)}.featured-stage{height:560px;min-height:0;margin-top:50px}.device-desktop{width:94vw;height:58vw;min-height:330px;top:30px;transform:translateX(-50%) rotateX(2deg)}.device-phone{width:170px;height:350px;right:-7px;bottom:20px;border-width:5px;border-radius:27px}.mini-banner{height:78px}.mini-products span{height:105px}.float-label{font-size:6px}.float-label.one{left:2%}.float-label.two{right:7%}.float-label.three{left:7%;bottom:6%}.featured-foot{align-items:flex-start;gap:20px}.featured-foot span{max-width:50%}
  .manifesto{min-height:780px;padding:100px 16px}.manifesto-title{font-size:clamp(58px,17vw,92px);line-height:.82}.manifesto-title span:nth-child(2){margin-left:0}.manifesto-title .outline{font-size:.72em;line-height:.9}.manifesto-note{width:100%;margin-top:65px}
  .work-showcase{padding-top:95px}.work-carousel{margin-top:60px}.work-stage{height:480px;min-height:0}.work-panel{width:86vw;height:440px;min-height:0}.work-panel.before{transform:translate(-50%,-50%) rotateY(-42deg) translateX(-45%)}.work-panel.after{transform:translate(-50%,-50%) rotateY(42deg) translateX(45%)}.carousel-arrow{width:46px;height:46px}.carousel-arrow.prev{left:-5px}.carousel-arrow.next{right:-5px}.work-meta{grid-template-columns:80px 1fr;gap:25px}.work-meta>a{grid-column:2}.work-meta>div:first-child span{font-size:42px}
  .capabilities{padding-top:100px;padding-bottom:110px}.cap-grid{grid-template-columns:1fr;margin-top:65px}.cap-grid article{min-height:220px}.cap-head h2{font-size:clamp(58px,16vw,86px)}
  .cta-section{min-height:650px}.cta-section h2{font-size:clamp(60px,16vw,90px)}.cta-orbit{width:440px;height:440px}
  .footer{grid-template-columns:1fr}.footer>div{flex-wrap:wrap}.footer p{grid-column:auto}
  .modal-card{padding:34px 22px;border-radius:18px}
}
@media(max-width:430px){
  .hero{min-height:900px}
  .showcase-shell{height:500px}
  .orbit-rig{top:43%;transform:translate(-50%,-50%) rotateX(-3deg) scale(.46)}
  .scene-hud{bottom:10px}
  .proof-grid b{font-size:40px}
  .device-desktop{height:61vw;min-height:290px}.device-phone{width:150px;height:315px}.mini-products span{height:90px}
  .work-panel{height:400px}
  .crece-phone-card{right:6%;transform:rotate(5deg) scale(.82);transform-origin:top right}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .pointer-light{display:none}
  .project-ring{transform:rotateX(-4deg) rotateY(0deg)!important}
}


/* ===== PROJECT ARTWORK / EXACT 16:9 INTEGRATION ===== */
.ring-panel{
  width:768px;
  height:432px;
  margin:-216px 0 0 -384px;
  aspect-ratio:16/9;
}
.panel-frame.project-image-panel{
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  border-radius:18px;
  background:#030303;
  border:1px solid rgba(238,228,211,.2);
  overflow:hidden;
}
.project-image-panel .panel-photo{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  object-position:center;
  transform:none;
  filter:none;
  background:#030303;
}
.project-image-panel:after{
  background:
    linear-gradient(110deg,transparent 0 40%,rgba(255,255,255,.04) 48%,transparent 56%),
    linear-gradient(180deg,rgba(255,255,255,.015),transparent 22%,rgba(0,0,0,.08));
}
.ring-panel[data-active] .project-image-panel{
  border-color:rgba(238,221,191,.36);
  box-shadow:
    0 52px 120px rgba(0,0,0,.72),
    0 0 38px rgba(215,195,160,.055),
    inset 0 1px rgba(255,255,255,.07);
}

/* General NOLI composition: shown at its native visual ratio, never stretched */
.portfolio-overview{
  position:relative;
  z-index:12;
  margin:0;
  padding:38px clamp(20px,5vw,78px) 130px;
  background:#020202;
}
.overview-label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1320px;
  margin:0 auto 18px;
  color:#726d65;
  font-size:8px;
  letter-spacing:.18em;
}
.overview-label b{color:#b8aa94;font-weight:500}
.portfolio-overview figure{
  position:relative;
  max-width:1320px;
  aspect-ratio:16/9;
  margin:0 auto;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(238,228,211,.14);
  background:#050505;
  box-shadow:0 55px 130px rgba(0,0,0,.6);
}
.portfolio-overview figure:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 -80px 100px rgba(0,0,0,.08);
}
.portfolio-overview img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

/* Use the real Carnaval artwork in the case-study section */
.featured-image-stage{
  width:min(1180px,92vw);
  height:auto;
  min-height:0;
  aspect-ratio:16/9;
  margin:72px auto 0;
  overflow:visible;
  perspective:none;
}
.featured-image-stage>img{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:20px;
  border:1px solid rgba(238,228,211,.16);
  background:#030303;
  box-shadow:0 50px 120px rgba(0,0,0,.64);
}
.featured-edge{
  position:absolute;
  z-index:1;
  left:7%;
  right:7%;
  bottom:-28px;
  height:70px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(215,195,160,.1),rgba(0,0,0,.42) 44%,transparent 72%);
  filter:blur(16px);
}

/* Other project cards keep their full 16:9 artwork */
.work-stage{
  height:min(52vw,650px);
}
.work-panel{
  width:min(920px,68vw);
  height:auto;
  min-height:0;
  aspect-ratio:16/9;
  background:#030303;
  border:1px solid rgba(238,228,211,.14);
}
.work-project-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#030303;
}

/* responsive dimensions: keep geometry and artwork ratio independent */
@media(max-width:1180px){
  .ring-panel{width:768px;height:432px;margin:-216px 0 0 -384px}
}
@media(max-width:900px){
  .portfolio-overview{padding-bottom:100px}
  .featured-image-stage{width:92vw;margin-top:54px}
  .work-panel{width:78vw;height:auto;min-height:0;aspect-ratio:16/9}
}
@media(max-width:700px){
  .portfolio-overview{padding:24px 16px 90px}
  .overview-label{font-size:6px;gap:14px}
  .portfolio-overview figure{border-radius:12px}
  .featured-image-stage{width:calc(100vw - 32px);height:auto;min-height:0;aspect-ratio:16/9;margin-top:46px}
  .featured-image-stage>img{border-radius:12px}
  .work-stage{height:390px}
  .work-panel{width:88vw;height:auto;min-height:0;aspect-ratio:16/9}
}
@media(max-width:430px){
  .work-stage{height:350px}
  .work-panel{width:90vw;height:auto;min-height:0}
}


/* ===== EXACT OPENING COMPOSITION / STATIC COVER ===== */
.site-nav{
  opacity:0;
  pointer-events:none;
  transform:translateY(-12px);
}
.site-nav.scrolled{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.cover-hero{
  position:relative;
  min-height:100vh;
  padding:28px clamp(22px,2.55vw,48px) 34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:#000;
}
.cover-hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 44%,rgba(215,195,160,.045),transparent 42%),
    #000;
}
.cover-meta{
  position:relative;
  z-index:3;
  width:min(100%,1536px);
  margin:0 auto 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#615e58;
  font-size:7px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.cover-meta b{
  color:#cdbb9e;
  font-weight:500;
}
.cover-frame{
  position:relative;
  z-index:2;
  width:min(100%,1536px);
  aspect-ratio:16/9;
  margin:0 auto;
  overflow:hidden;
  border-radius:20px;
  background:#050505;
  border:1px solid rgba(215,195,160,.18);
  box-shadow:
    0 45px 130px rgba(0,0,0,.78),
    0 0 0 1px rgba(255,255,255,.015) inset;
}
.cover-frame:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 90px rgba(0,0,0,.13);
}
.cover-frame>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.cover-hotspot{
  position:absolute;
  z-index:4;
  border:0;
  background:transparent;
  cursor:pointer;
}
.cover-projects{
  left:43%;
  top:28%;
  width:17%;
  height:8%;
}
.cover-contact{
  right:11%;
  top:2.3%;
  width:10.5%;
  height:7%;
}
.cover-scroll{
  position:absolute;
  z-index:4;
  right:clamp(28px,4vw,70px);
  bottom:18px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#777169;
  text-decoration:none;
  font-size:7px;
  letter-spacing:.16em;
}
.cover-scroll i{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border:1px solid rgba(215,195,160,.22);
  border-radius:50%;
  color:#cab89b;
  font-style:normal;
}

.motion-showcase{
  position:relative;
  min-height:1080px;
  padding:120px clamp(20px,4vw,64px) 0;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 53%,rgba(155,124,84,.085),transparent 33%),
    linear-gradient(180deg,#020202,#050505 68%,#020202);
}
.motion-showcase:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.01) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:radial-gradient(ellipse at center,#000 0 32%,transparent 78%);
}
.motion-heading{
  position:relative;
  z-index:10;
  max-width:900px;
  margin:0 auto;
  text-align:center;
}
.motion-heading h2{
  margin:15px 0 12px;
  font-family:var(--serif);
  font-size:clamp(54px,6.2vw,102px);
  line-height:.92;
  letter-spacing:-.045em;
  font-weight:400;
}
.motion-heading h2 em{
  color:var(--champagne);
  font-style:normal;
}
.motion-heading>p:last-child{
  max-width:620px;
  margin:0 auto;
  color:#89847c;
  font-size:13px;
  line-height:1.7;
}
.motion-shell{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:760px;
}
.motion-shell .showcase-viewport{
  bottom:0;
}
.motion-shell .orbit-rig{
  top:45%;
}
.motion-shell .stage-floor{
  bottom:70px;
}
.motion-shell .scene-hud{
  bottom:22px;
}

@media(max-width:900px){
  .cover-hero{
    min-height:auto;
    padding:20px 14px 34px;
  }
  .cover-frame{border-radius:14px}
  .cover-meta{font-size:6px}
  .cover-scroll{display:none}
  .motion-showcase{min-height:900px;padding-top:95px}
  .motion-shell{height:610px}
}
@media(max-width:700px){
  .cover-hero{
    min-height:100svh;
    padding:18px 10px 26px;
    justify-content:center;
  }
  .cover-frame{
    width:100%;
    border-radius:10px;
  }
  .cover-meta{
    margin-bottom:10px;
    padding:0 2px;
    font-size:5px;
  }
  .motion-showcase{
    min-height:820px;
    padding:82px 14px 0;
  }
  .motion-heading h2{font-size:clamp(48px,14vw,74px)}
  .motion-heading>p:last-child{font-size:12px}
  .motion-shell{height:540px}
}


/* ===== FUNCTIONAL NOLI HERO — built from real HTML/CSS/JS, not a static cover ===== */
.site-nav{
  opacity:1!important;
  pointer-events:auto!important;
  transform:none!important;
  height:74px;
  padding:0 clamp(24px,5vw,82px);
  background:linear-gradient(180deg,rgba(0,0,0,.48),transparent);
}
.site-nav.scrolled{
  height:66px;
  background:rgba(3,3,3,.82);
}
.brand{width:120px;flex:0 0 auto}
.brand img{height:36px;object-fit:contain}
.nav-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  gap:clamp(18px,2.4vw,38px);
}
.nav-links{font-size:9px;letter-spacing:.02em;text-transform:none}
.nav-links a{color:rgba(244,241,234,.85);font-weight:500}
.nav-link-button{
  padding:0;border:0;background:none;color:rgba(244,241,234,.85);
  font-size:9px;font-weight:500;cursor:pointer;
}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav-cta{
  min-width:142px;
  padding:11px 20px;
  border-color:rgba(226,197,153,.72);
  background:rgba(8,8,8,.42);
  color:#f2eee8;
  box-shadow:0 0 22px rgba(203,166,112,.18),inset 0 0 18px rgba(203,166,112,.04);
}
.nav-cta:hover{background:#e9dfd0;color:#090807}
.language-switch{display:flex;align-items:center;gap:7px;color:#777167;font-size:8px;letter-spacing:.1em}
.language-switch .lang{border:0;background:none;padding:4px 2px;color:#706b64;font-size:8px;cursor:pointer}
.language-switch .lang.active{color:#f1ece4}
.language-switch span{opacity:.45}

.live-hero{
  position:relative;
  min-height:920px;
  height:max(100vh,920px);
  max-height:1120px;
  overflow:hidden;
  padding:88px clamp(24px,4.5vw,76px) 20px;
  background:
    radial-gradient(ellipse at 50% 52%,rgba(183,140,86,.115),transparent 30%),
    linear-gradient(180deg,#020202 0%,#050504 62%,#020202 100%);
}
.live-hero:before{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 8% 62%,rgba(199,159,105,.08),transparent 18%),
    radial-gradient(circle at 92% 58%,rgba(199,159,105,.07),transparent 17%);
}
.live-hero-beams{
  position:absolute;inset:0;pointer-events:none;opacity:.72;
  background:
    linear-gradient(90deg,transparent 6%,rgba(217,181,128,.13) 7%,transparent 8% 21%,rgba(217,181,128,.08) 22%,transparent 23% 77%,rgba(217,181,128,.09) 78%,transparent 79% 92%,rgba(217,181,128,.12) 93%,transparent 94%),
    linear-gradient(90deg,transparent,rgba(255,255,255,.012),transparent);
  filter:blur(4px);
}
.live-hero-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 37%,rgba(0,0,0,.22) 76%,rgba(0,0,0,.72) 100%);
}
.live-hero-copy{
  position:relative;z-index:20;text-align:center;max-width:980px;margin:0 auto;
}
.live-kicker{
  margin:0 0 11px;color:#c4bbaD;font-size:8px;font-weight:600;letter-spacing:.28em;
}
.live-hero h1{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(58px,5.7vw,94px);
  line-height:.83;
  letter-spacing:-.045em;
  font-weight:400;
  text-transform:none;
}
.live-hero h1 span{display:block;white-space:normal}
.live-hero h1 span:nth-child(2){margin-left:0}
.live-hero h1 em{
  color:#dfbd8c;
  font-family:var(--serif);
  font-style:normal;
  font-weight:400;
  text-transform:none;
  letter-spacing:-.04em;
}
.live-subtitle{
  margin:14px 0 16px;color:#aaa49c;font-size:13px;letter-spacing:.015em;
}
.live-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:30px;
  min-width:245px;padding:12px 20px;
  border:1px solid rgba(224,191,142,.72);border-radius:999px;
  background:rgba(7,7,7,.52);box-shadow:0 0 24px rgba(203,166,112,.16),inset 0 0 18px rgba(203,166,112,.03);
  color:#f0ebe4;text-decoration:none;font-size:9px;font-weight:600;
  transition:transform .3s,background .3s,color .3s;
}
.live-cta:hover{transform:translateY(-2px);background:#e8ddcc;color:#080706}

.hero-side{
  position:absolute;z-index:10;top:116px;display:flex;flex-direction:column;gap:4px;
  color:#d2ccc2;font-size:7px;letter-spacing:.24em;line-height:1.35;
}
.hero-side-left{left:4.4%;align-items:flex-start}
.hero-side-right{right:4.4%;align-items:flex-end;text-align:right}
.hero-side i,.hero-stage-note i{display:block;width:30px;height:1px;margin-top:10px;background:rgba(217,195,160,.58)}

.top-showcase{
  position:absolute;z-index:12;left:0;right:0;top:300px;height:490px;
  perspective:1600px;perspective-origin:50% 45%;
}
.top-stage-glow{
  position:absolute;left:50%;top:55%;width:min(1000px,78vw);height:260px;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(221,177,116,.17),rgba(113,84,49,.045) 42%,transparent 73%);
  filter:blur(32px);
}
.top-stage-platform{
  position:absolute;z-index:1;left:50%;bottom:14px;width:min(820px,66vw);height:105px;transform:translateX(-50%);
  border-radius:50%;
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.7)),
    radial-gradient(ellipse at 50% 5%,rgba(221,179,119,.18),transparent 48%),
    #080807;
  border:1px solid rgba(222,185,130,.18);
  box-shadow:0 -5px 22px rgba(219,169,105,.13),0 28px 50px rgba(0,0,0,.7),inset 0 5px 16px rgba(229,194,143,.045);
}
.top-stage-platform:after{
  content:"";position:absolute;left:8%;right:8%;bottom:-20px;height:38px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(224,177,112,.11),rgba(0,0,0,.48) 48%,transparent 72%);filter:blur(10px);
}
.top-project{
  position:absolute;top:50%;
  aspect-ratio:16/9;
  transform-style:preserve-3d;
  transition:
    left .95s cubic-bezier(.16,1,.3,1),
    right .95s cubic-bezier(.16,1,.3,1),
    width .95s cubic-bezier(.16,1,.3,1),
    transform .95s cubic-bezier(.16,1,.3,1),
    opacity .6s,filter .6s;
  will-change:transform,left,width;
}
.top-project>a,.top-project>.project-static{display:block;width:100%;height:100%}
.top-project img{
  display:block;width:100%;height:100%;object-fit:cover;
  border-radius:13px;border:1px solid rgba(231,192,136,.55);
  background:#030303;
  box-shadow:0 28px 75px rgba(0,0,0,.72),0 0 18px rgba(207,162,101,.08),inset 0 1px rgba(255,255,255,.06);
}
.top-project:after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:13px;
  background:linear-gradient(115deg,rgba(255,255,255,.025),transparent 28%,transparent 70%,rgba(221,177,116,.035));
}
.top-project.slot-center{
  z-index:8;left:50%;width:min(47vw,660px);
  transform:translate(-50%,-47%) rotateY(0deg) translateZ(80px);
  opacity:1;filter:brightness(1.02) saturate(1.02);
}
.top-project.slot-right{
  z-index:6;left:68.5%;width:min(32vw,475px);
  transform:translate(0,-49%) rotateY(-16deg) rotateZ(-.7deg) translateZ(-25px);
  transform-origin:left center;opacity:.92;filter:brightness(.88);
}
.top-project.slot-left{
  z-index:6;right:68.5%;width:min(32vw,475px);
  transform:translate(0,-49%) rotateY(16deg) rotateZ(.7deg) translateZ(-25px);
  transform-origin:right center;opacity:.92;filter:brightness(.88);
}
.top-project.slot-far-left{
  z-index:4;right:84.5%;width:min(23vw,340px);
  transform:translate(0,-46%) rotateY(19deg) rotateZ(1deg) translateZ(-95px);
  transform-origin:right center;opacity:.78;filter:brightness(.68) saturate(.86);
}
.top-project:hover img{filter:brightness(1.05)}

.top-carousel-control{
  position:absolute;z-index:15;right:3.5%;top:47%;transform:translateY(-50%);
  display:grid;justify-items:center;gap:8px;
}
.top-arrow-ring{
  width:58px;height:58px;border:1px solid rgba(230,198,150,.65);border-radius:50%;
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:rgba(4,4,4,.5);
}
.top-arrow-ring button{border:0;background:transparent;color:#f1e7d8;font-size:22px;cursor:pointer;padding:0}
.top-arrow-ring button:hover{background:rgba(225,191,141,.12)}
.top-carousel-control b{color:#ddd2c3;font-size:8px;letter-spacing:.14em;font-weight:500}

.hero-stage-note{
  position:absolute;z-index:14;bottom:32px;display:flex;flex-direction:column;gap:4px;
  color:#a7a097;font-size:7px;letter-spacing:.22em;line-height:1.3;
}
.hero-stage-note-left{left:4.5%}
.hero-stage-note-right{right:4.6%;align-items:flex-end;text-align:right}

.hero-stats{
  position:absolute;z-index:20;left:50%;bottom:73px;transform:translateX(-50%);
  width:min(760px,63vw);display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr 1px 1fr;align-items:center;gap:18px;
  text-align:center;
}
.hero-stats>i{width:1px;height:38px;background:rgba(230,218,199,.22)}
.hero-stats div{display:grid;gap:5px}
.hero-stats b{font-family:var(--serif);font-size:24px;font-weight:400;color:#eee6da}
.hero-stats span{font-size:7px;letter-spacing:.08em;color:#b0aaa1}
.hero-signature{
  position:absolute;z-index:20;left:50%;bottom:28px;transform:translateX(-50%);
  display:flex;align-items:center;gap:18px;color:#777168;font-size:6px;letter-spacing:.22em;white-space:nowrap;
}
.hero-signature i{width:44px;height:1px;background:rgba(218,190,148,.35)}

.motion-showcase{border-top:1px solid rgba(215,195,160,.08)}

@media(max-width:1100px){
  .nav-center{gap:16px}
  .nav-center a,.nav-link-button{font-size:8px}
  .nav-actions{gap:12px}
  .top-showcase{top:300px}
  .top-project.slot-center{width:min(54vw,620px)}
  .top-project.slot-left{right:72%;width:min(35vw,420px)}
  .top-project.slot-right{left:72%;width:min(35vw,420px)}
  .top-project.slot-far-left{right:88%;width:min(25vw,300px)}
  .hero-stats{width:min(800px,78vw)}
}
@media(max-width:820px){
  .site-nav{padding:0 16px}
  .nav-center{display:none}
  .language-switch{display:none}
  .nav-cta{min-width:auto;padding:10px 14px}
  .live-hero{height:auto;min-height:900px;padding-top:92px}
  .hero-side{display:none}
  .live-hero h1{font-size:clamp(50px,11vw,76px)}
  .live-subtitle{font-size:12px}
  .top-showcase{top:310px;height:430px}
  .top-project.slot-center{left:50%;width:70vw;transform:translate(-50%,-45%)}
  .top-project.slot-left{right:83%;width:48vw;transform:translate(0,-45%) rotateY(18deg)}
  .top-project.slot-right{left:83%;width:48vw;transform:translate(0,-45%) rotateY(-18deg)}
  .top-project.slot-far-left{right:108%;width:38vw}
  .top-carousel-control{right:12px;top:45%}
  .hero-stage-note{display:none}
  .hero-stats{bottom:72px;width:88vw;gap:8px}
  .hero-stats b{font-size:20px}.hero-stats span{font-size:6px}
}
@media(max-width:560px){
  .live-hero{min-height:820px;padding:88px 14px 20px}
  .brand{width:104px}
  .live-kicker{font-size:6px;letter-spacing:.2em}
  .live-hero h1{font-size:clamp(44px,13.5vw,64px);line-height:.87}
  .live-subtitle{max-width:330px;margin:12px auto 14px;font-size:11px;line-height:1.5}
  .live-cta{min-width:210px}
  .top-showcase{top:315px;height:360px}
  .top-project.slot-center{width:78vw}
  .top-project.slot-left{right:88%;width:54vw}
  .top-project.slot-right{left:88%;width:54vw}
  .top-project.slot-far-left{right:118%;width:44vw}
  .top-stage-platform{width:72vw;height:74px;bottom:16px}
  .top-carousel-control{right:8px;top:42%}
  .top-arrow-ring{width:48px;height:48px}
  .top-arrow-ring button{font-size:18px}
  .hero-stats{bottom:67px;grid-template-columns:1fr 1fr;gap:12px 20px;width:78vw}
  .hero-stats>i{display:none}
  .hero-stats b{font-size:18px}
  .hero-signature{bottom:25px;font-size:5px;gap:10px}
  .hero-signature i{width:22px}
}

@media(prefers-reduced-motion:reduce){
  .top-project{transition:none!important}
}


/* ===== HERO POLISH PASS / CAMPAIGN FINISH ===== */
.brand-wordmark{
  width:auto!important;
  min-width:92px;
  display:grid!important;
  align-content:center;
  justify-items:center;
  gap:0;
  text-decoration:none;
  line-height:1;
}
.brand-wordmark strong{
  font-family:var(--font);
  font-size:17px;
  font-weight:500;
  letter-spacing:.34em;
  color:#f4efe7;
  margin-left:.34em;
  text-shadow:0 0 18px rgba(255,241,218,.08);
}
.brand-wordmark span{
  margin-top:4px;
  font-size:6px;
  font-weight:600;
  letter-spacing:.5em;
  color:#c9c0b3;
  margin-left:.5em;
}

.live-hero{
  background:
    radial-gradient(ellipse at 50% 57%,rgba(199,154,95,.17),transparent 27%),
    radial-gradient(ellipse at 50% 100%,rgba(114,79,39,.12),transparent 45%),
    linear-gradient(180deg,#010101 0%,#030302 45%,#070604 67%,#020202 100%)!important;
}
.live-hero:after{
  content:"";
  position:absolute;
  z-index:3;
  left:0;right:0;bottom:0;
  height:310px;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent,rgba(0,0,0,.2) 36%,rgba(0,0,0,.72) 100%),
    radial-gradient(ellipse at 50% 82%,rgba(234,190,128,.09),transparent 36%);
}
.live-hero-beams{
  opacity:1!important;
  filter:blur(7px)!important;
  background:
    linear-gradient(90deg,
      transparent 0 4%,
      rgba(224,177,112,.03) 4.5%,
      rgba(224,177,112,.18) 5.25%,
      rgba(255,231,195,.05) 5.7%,
      transparent 6.7% 18%,
      rgba(224,177,112,.035) 19%,
      rgba(224,177,112,.12) 20%,
      transparent 21% 79%,
      rgba(224,177,112,.11) 80%,
      rgba(255,231,195,.04) 80.7%,
      transparent 82% 93%,
      rgba(224,177,112,.16) 94%,
      transparent 95%),
    radial-gradient(ellipse at 50% 30%,rgba(181,132,75,.06),transparent 48%)!important;
}
.live-hero-vignette{
  z-index:24!important;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 41%,rgba(0,0,0,.12) 63%,rgba(0,0,0,.62) 100%),
    linear-gradient(180deg,rgba(0,0,0,.16),transparent 23%,transparent 74%,rgba(0,0,0,.28))!important;
  mix-blend-mode:multiply;
}

.hero-set-dressing{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.beam{position:absolute;top:0;width:34px;height:74%;background:linear-gradient(180deg,rgba(247,219,177,.03),rgba(228,178,109,.3) 42%,rgba(211,153,80,.07) 72%,transparent);filter:blur(9px);opacity:.7}
.beam:after{content:"";position:absolute;left:50%;top:0;width:2px;height:100%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,237,207,.36),rgba(236,191,125,.1),transparent);box-shadow:0 0 24px rgba(255,208,143,.36)}
.beam-1{left:5.8%;transform:skewX(-2deg)}
.beam-2{left:20.2%;width:18px;opacity:.38}
.beam-3{right:20.4%;width:19px;opacity:.42}
.beam-4{right:5.8%;transform:skewX(2deg)}
.rock{position:absolute;bottom:-45px;background:
  radial-gradient(circle at 28% 25%,rgba(126,101,73,.26),transparent 12%),
  radial-gradient(circle at 60% 35%,rgba(87,68,48,.22),transparent 18%),
  linear-gradient(145deg,#171411,#030303 70%);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.9));
  opacity:.9;
  box-shadow:inset 12px 12px 28px rgba(255,210,150,.025),inset -12px -18px 25px rgba(0,0,0,.85);
}
.rock-1{left:-45px;width:180px;height:145px;border-radius:49% 36% 42% 26%;transform:rotate(-16deg)}
.rock-2{left:70px;width:115px;height:88px;border-radius:44% 31% 48% 29%;transform:rotate(12deg)}
.rock-3{right:66px;width:118px;height:90px;border-radius:29% 47% 32% 48%;transform:rotate(-8deg)}
.rock-4{right:-42px;width:205px;height:158px;border-radius:36% 46% 27% 48%;transform:rotate(16deg)}
.floor-glint{position:absolute;bottom:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(248,211,159,.82),transparent);box-shadow:0 0 18px rgba(244,193,124,.36);opacity:.45}
.floor-glint-1{left:10%;width:170px}
.floor-glint-2{left:42%;width:250px;opacity:.28}
.floor-glint-3{right:10%;width:170px}

.live-hero-copy{z-index:26!important}
.live-kicker{color:#c7b9a5!important;text-shadow:0 0 12px rgba(222,185,136,.1)}
.live-hero h1{
  text-shadow:0 3px 28px rgba(0,0,0,.55);
}
.live-hero h1 em{
  background:linear-gradient(180deg,#f2d6ad 0%,#dcb57c 48%,#b98c55 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  filter:drop-shadow(0 2px 18px rgba(223,176,111,.08));
}
.live-subtitle{color:#b7b0a7!important}
.live-cta{
  border-color:rgba(240,201,143,.78)!important;
  background:linear-gradient(180deg,rgba(27,24,19,.78),rgba(6,6,6,.66))!important;
  box-shadow:
    0 0 0 1px rgba(255,229,191,.025) inset,
    0 0 17px rgba(220,172,108,.15),
    0 8px 24px rgba(0,0,0,.5)!important;
}
.live-cta:before{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.025);
  pointer-events:none;
}
.live-cta{position:relative}

.top-showcase{top:294px!important;height:505px!important}
.top-stage-glow{
  top:58%!important;
  width:min(1180px,86vw)!important;
  height:330px!important;
  background:
    radial-gradient(ellipse,rgba(239,190,123,.2),rgba(133,94,51,.06) 35%,transparent 68%)!important;
  filter:blur(38px)!important;
}
.top-stage-platform{
  bottom:9px!important;
  width:min(860px,68vw)!important;
  height:116px!important;
  background:
    linear-gradient(180deg,rgba(68,53,38,.72) 0%,rgba(10,9,8,.94) 20%,#050505 72%,#010101),
    radial-gradient(ellipse at 50% 0%,rgba(250,211,154,.23),transparent 55%)!important;
  border:1px solid rgba(232,188,125,.34)!important;
  box-shadow:
    0 -2px 0 rgba(255,222,174,.18),
    0 -11px 32px rgba(227,175,105,.12),
    0 24px 60px rgba(0,0,0,.84),
    inset 0 10px 18px rgba(255,220,166,.045),
    inset 0 -20px 32px rgba(0,0,0,.7)!important;
}
.top-stage-platform:before{
  content:"";
  position:absolute;left:5%;right:5%;top:21px;height:50px;border-radius:50%;
  border-top:1px solid rgba(247,206,146,.28);
  box-shadow:0 -5px 17px rgba(230,173,100,.12);
}
.top-stage-platform:after{
  bottom:-29px!important;height:54px!important;
  background:radial-gradient(ellipse,rgba(238,188,121,.15),rgba(21,17,13,.4) 46%,transparent 73%)!important;
}

.top-project{
  filter:none!important;
}
.top-project img{
  border-color:rgba(246,204,145,.62)!important;
  box-shadow:
    0 36px 86px rgba(0,0,0,.78),
    0 0 0 1px rgba(255,233,199,.035) inset,
    0 0 26px rgba(214,163,96,.07)!important;
}
.top-project:after{
  background:
    linear-gradient(112deg,rgba(255,255,255,.05),transparent 20%,transparent 70%,rgba(223,175,109,.05)),
    linear-gradient(180deg,rgba(255,230,193,.035),transparent 14%,transparent 78%,rgba(0,0,0,.12))!important;
  box-shadow:inset 0 0 0 1px rgba(255,230,192,.025);
}
.top-project:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:10%;right:10%;bottom:-26px;height:35px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(226,175,108,.19),rgba(0,0,0,.34) 47%,transparent 72%);
  filter:blur(8px);
}
.top-project.slot-center{
  width:min(46vw,650px)!important;
  transform:translate(-50%,-49%) rotateY(0) translateZ(100px)!important;
}
.top-project.slot-left{
  right:69.5%!important;
  width:min(30.5vw,450px)!important;
  transform:translate(0,-48%) rotateY(13deg) rotateZ(.45deg) translateZ(-20px)!important;
  opacity:.95!important;
}
.top-project.slot-right{
  left:69.5%!important;
  width:min(30.5vw,450px)!important;
  transform:translate(0,-48%) rotateY(-13deg) rotateZ(-.45deg) translateZ(-20px)!important;
  opacity:.95!important;
}
.top-project.slot-far-left{
  right:84.4%!important;
  width:min(21vw,308px)!important;
  transform:translate(0,-44%) rotateY(16deg) rotateZ(.7deg) translateZ(-75px)!important;
  opacity:.82!important;
}
.top-project.slot-left img,.top-project.slot-right img{filter:brightness(.9) saturate(.96)}
.top-project.slot-far-left img{filter:brightness(.72) saturate(.9)}
.top-project.slot-center img{filter:brightness(1.04) saturate(1.03)}

.top-carousel-control{
  right:3.2%!important;
  top:47.5%!important;
}
.top-arrow-ring{
  border-color:rgba(246,207,151,.76)!important;
  box-shadow:0 0 20px rgba(226,177,110,.11),inset 0 0 18px rgba(226,177,110,.035);
}
.top-arrow-ring button{color:#fff2df!important}
.top-carousel-control b{color:#efe3d2!important}

.hero-stage-note{
  bottom:29px!important;
  color:#beb5a8!important;
  text-shadow:0 0 12px rgba(0,0,0,.55);
}
.hero-stage-note i{background:rgba(235,198,145,.7)!important}
.hero-stats{
  bottom:70px!important;
  width:min(780px,64vw)!important;
}
.hero-stats b{
  color:#f1e6d7!important;
  text-shadow:0 0 16px rgba(230,188,126,.08);
}
.hero-stats span{color:#bdb4a7!important}
.hero-stats>i{background:linear-gradient(180deg,transparent,rgba(237,204,157,.42),transparent)!important}
.hero-signature{color:#877e71!important}
.hero-signature i{background:rgba(235,199,147,.48)!important}

@media(max-width:1100px){
  .top-project.slot-center{width:min(52vw,610px)!important}
  .top-project.slot-left{right:73%!important;width:min(34vw,405px)!important}
  .top-project.slot-right{left:73%!important;width:min(34vw,405px)!important}
  .top-project.slot-far-left{right:89%!important;width:min(23vw,275px)!important}
}
@media(max-width:820px){
  .hero-set-dressing .rock{opacity:.55}
  .top-project.slot-center{width:70vw!important}
  .top-project.slot-left{right:83%!important;width:48vw!important}
  .top-project.slot-right{left:83%!important;width:48vw!important}
  .top-project.slot-far-left{right:108%!important;width:38vw!important}
}
@media(max-width:560px){
  .beam{opacity:.34}
  .rock-1,.rock-4{width:120px;height:100px}
  .rock-2,.rock-3{display:none}
  .top-project.slot-center{width:78vw!important}
  .top-project.slot-left{right:88%!important;width:54vw!important}
  .top-project.slot-right{left:88%!important;width:54vw!important}
  .top-project.slot-far-left{right:118%!important;width:44vw!important}
}


/* ===== HERO MATCH PASS 03 — reference proportions, gold frames, real stage depth ===== */
.live-hero{
  height:100vh!important;
  min-height:760px!important;
  max-height:1000px!important;
  padding-top:78px!important;
}
.live-hero-vignette{
  z-index:6!important;
  opacity:.58!important;
  mix-blend-mode:normal!important;
  background:
    radial-gradient(ellipse at 50% 48%,transparent 0 48%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.5) 100%),
    linear-gradient(180deg,rgba(0,0,0,.06),transparent 26%,transparent 78%,rgba(0,0,0,.14))!important;
}
.hero-set-dressing{z-index:5!important}
.live-hero-copy{z-index:30!important}
.hero-side{z-index:28!important}

.live-hero-beams:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 5.5% 58%,rgba(245,205,150,.22),transparent 6%),
    radial-gradient(ellipse at 20.2% 53%,rgba(222,174,111,.13),transparent 4%),
    radial-gradient(ellipse at 79.8% 53%,rgba(222,174,111,.13),transparent 4%),
    radial-gradient(ellipse at 94.5% 58%,rgba(245,205,150,.22),transparent 6%);
  filter:blur(18px);
}
.beam{
  opacity:.88!important;
  background:linear-gradient(
    180deg,
    rgba(255,245,224,.02) 0%,
    rgba(255,224,177,.19) 25%,
    rgba(232,177,108,.34) 49%,
    rgba(211,147,76,.12) 71%,
    transparent 100%
  )!important;
}
.beam:after{
  width:1.5px!important;
  background:linear-gradient(180deg,rgba(255,246,224,.58),rgba(248,202,139,.3) 52%,transparent)!important;
  box-shadow:0 0 18px rgba(255,221,170,.54),0 0 42px rgba(224,163,90,.24)!important;
}

.live-kicker{font-size:7px!important;letter-spacing:.3em!important}
.live-hero h1{
  font-size:clamp(54px,5.15vw,86px)!important;
  line-height:.87!important;
}
.live-subtitle{margin-top:11px!important;margin-bottom:14px!important;font-size:12px!important}
.live-cta{min-width:232px!important;padding:11px 19px!important}

.top-showcase{
  top:272px!important;
  height:470px!important;
  z-index:14!important;
}
.top-showcase:before{
  content:"";
  position:absolute;
  z-index:0;
  left:-4%;
  right:-4%;
  bottom:-15px;
  height:235px;
  transform:perspective(800px) rotateX(68deg);
  transform-origin:center bottom;
  background:
    linear-gradient(90deg,transparent,rgba(237,196,137,.035) 18%,rgba(255,226,183,.075) 50%,rgba(237,196,137,.035) 82%,transparent),
    repeating-linear-gradient(102deg,transparent 0 74px,rgba(255,255,255,.012) 75px,transparent 77px),
    #050504;
  border-top:1px solid rgba(226,185,127,.11);
  box-shadow:0 -22px 80px rgba(208,151,79,.055);
  filter:saturate(.92);
}
.top-showcase:after{
  content:"";
  position:absolute;
  z-index:2;
  left:10%;
  right:10%;
  bottom:3px;
  height:150px;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 5%,rgba(255,217,164,.11),transparent 50%),
    linear-gradient(90deg,transparent,rgba(255,226,179,.025),transparent);
  filter:blur(8px);
}

.top-stage-glow{
  top:59%!important;
  width:min(1250px,88vw)!important;
  height:350px!important;
  opacity:1!important;
  background:
    radial-gradient(ellipse,rgba(245,201,141,.24),rgba(169,113,55,.08) 29%,rgba(70,46,23,.025) 51%,transparent 71%)!important;
  filter:blur(42px)!important;
}
.top-stage-platform{
  z-index:3!important;
  bottom:18px!important;
  width:min(805px,64vw)!important;
  height:106px!important;
  border-radius:50%!important;
  background:
    radial-gradient(ellipse at 50% -5%,rgba(255,225,181,.18),transparent 34%),
    repeating-linear-gradient(155deg,rgba(255,255,255,.018) 0 1px,transparent 1px 38px),
    linear-gradient(180deg,#2a2118 0%,#0e0c0a 11%,#070605 40%,#020202 80%)!important;
  border:1px solid rgba(245,200,138,.5)!important;
  box-shadow:
    0 -1px 0 rgba(255,235,204,.56),
    0 -7px 18px rgba(234,178,105,.18),
    0 7px 0 rgba(98,66,32,.36),
    0 30px 60px rgba(0,0,0,.9),
    inset 0 11px 15px rgba(255,215,158,.05),
    inset 0 -21px 34px rgba(0,0,0,.86)!important;
}
.top-stage-platform:before{
  left:3%!important;right:3%!important;top:18px!important;height:45px!important;
  border-top:1px solid rgba(255,218,163,.42)!important;
  box-shadow:0 -4px 13px rgba(255,193,114,.17),inset 0 5px 12px rgba(255,213,151,.025)!important;
}
.top-stage-platform:after{
  left:5%!important;right:5%!important;bottom:-34px!important;height:60px!important;
  background:radial-gradient(ellipse,rgba(245,192,120,.17),rgba(53,34,18,.13) 44%,transparent 72%)!important;
}

.top-project{
  top:49%!important;
  border-radius:15px;
}
.top-project>a,.top-project>.project-static{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  padding:1px;
  border-radius:15px;
  overflow:hidden;
  background:linear-gradient(
    145deg,
    rgba(255,236,207,.94) 0%,
    rgba(217,171,105,.7) 18%,
    rgba(75,52,29,.75) 48%,
    rgba(226,179,108,.68) 78%,
    rgba(255,225,181,.84) 100%
  );
  box-shadow:
    0 0 0 1px rgba(26,18,11,.75),
    0 0 16px rgba(239,184,112,.13),
    0 32px 72px rgba(0,0,0,.82);
}
.top-project>a:after,.top-project>.project-static:after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:12px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,241,219,.055),
    inset 0 1px 0 rgba(255,244,225,.11),
    inset 0 -1px 0 rgba(122,79,34,.26);
}
.top-project img{
  border:0!important;
  border-radius:13px!important;
  box-shadow:none!important;
  transition:filter .5s ease,transform .7s cubic-bezier(.16,1,.3,1);
}
.top-project:after{
  inset:1px!important;
  border-radius:14px!important;
  background:
    linear-gradient(115deg,rgba(255,255,255,.07),transparent 17%,transparent 72%,rgba(255,210,147,.055)),
    linear-gradient(180deg,rgba(255,235,205,.03),transparent 16%,transparent 77%,rgba(0,0,0,.14))!important;
}
.top-project:before{
  left:6%!important;right:6%!important;bottom:-30px!important;height:45px!important;
  background:radial-gradient(ellipse,rgba(247,194,120,.21),rgba(56,34,15,.2) 42%,transparent 73%)!important;
  filter:blur(10px)!important;
}

.top-project.slot-center{
  width:min(45vw,630px)!important;
  transform:translate(-50%,-48%) rotateY(0) translateZ(105px)!important;
}
.top-project.slot-left{
  right:67.3%!important;
  width:min(29vw,414px)!important;
  transform:translate(0,-47%) rotateY(11.5deg) rotateZ(.25deg) translateZ(-8px)!important;
}
.top-project.slot-right{
  left:67.3%!important;
  width:min(29vw,414px)!important;
  transform:translate(0,-47%) rotateY(-11.5deg) rotateZ(-.25deg) translateZ(-8px)!important;
}
.top-project.slot-far-left{
  right:82.5%!important;
  width:min(19vw,272px)!important;
  transform:translate(0,-44%) rotateY(15deg) rotateZ(.45deg) translateZ(-58px)!important;
}
.top-project.slot-center img{filter:brightness(1.1) contrast(1.035) saturate(1.03)!important}
.top-project.slot-left img,.top-project.slot-right img{filter:brightness(.98) contrast(1.025) saturate(1.02)!important}
.top-project.slot-far-left img{filter:brightness(.86) contrast(1.02) saturate(.98)!important}

/* crop Carnival toward its UI screen, as in the reference */
.top-project.slot-center[data-project="Carnaval"] img{
  object-fit:cover!important;
  object-position:66% 47%!important;
  transform:scale(1.17)!important;
}
.top-project.slot-center[data-project="Carnaval"] a{overflow:hidden}

/* subtle reflection from the illuminated central frame */
.top-project.slot-center{
  -webkit-box-reflect:below 10px linear-gradient(transparent 66%,rgba(0,0,0,.8) 100%);
}
.top-project.slot-left,.top-project.slot-right{
  -webkit-box-reflect:below 8px linear-gradient(transparent 78%,rgba(0,0,0,.92));
}

.top-carousel-control{top:48%!important;right:3.6%!important;z-index:30!important}
.top-arrow-ring{
  width:56px!important;height:56px!important;
  background:radial-gradient(circle,rgba(27,21,15,.62),rgba(4,4,4,.78))!important;
  border-color:rgba(249,210,154,.88)!important;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.7),
    0 0 16px rgba(240,184,110,.12),
    inset 0 0 14px rgba(238,191,127,.035)!important;
}

.hero-stage-note{z-index:29!important}
.hero-stats{
  z-index:31!important;
  bottom:63px!important;
  width:min(720px,60vw)!important;
}
.hero-stats b{font-size:23px!important}
.hero-signature{z-index:31!important;bottom:20px!important}

.rock{
  opacity:1!important;
  background:
    radial-gradient(circle at 28% 18%,rgba(181,142,97,.22),transparent 10%),
    radial-gradient(circle at 56% 32%,rgba(105,79,54,.21),transparent 18%),
    linear-gradient(145deg,#1b1713,#050504 62%,#010101 100%)!important;
  box-shadow:
    inset 8px 7px 14px rgba(247,201,140,.035),
    inset -15px -21px 27px rgba(0,0,0,.92),
    0 12px 32px rgba(0,0,0,.9)!important;
}
.rock-1{left:-12px!important;bottom:-22px!important;width:205px!important;height:128px!important}
.rock-2{left:115px!important;bottom:-38px!important;width:135px!important;height:92px!important}
.rock-3{right:118px!important;bottom:-38px!important;width:135px!important;height:92px!important}
.rock-4{right:-12px!important;bottom:-24px!important;width:215px!important;height:132px!important}

@media(max-height:820px) and (min-width:821px){
  .live-hero{min-height:700px!important}
  .live-hero-copy{transform:translateY(-4px)}
  .top-showcase{top:252px!important;height:420px!important}
  .hero-stats{bottom:55px!important}
  .hero-signature{bottom:14px!important}
  .top-stage-platform{bottom:12px!important}
}
@media(max-width:1100px){
  .top-project.slot-center{width:min(51vw,595px)!important}
  .top-project.slot-left{right:71.5%!important;width:min(32vw,380px)!important}
  .top-project.slot-right{left:71.5%!important;width:min(32vw,380px)!important}
  .top-project.slot-far-left{right:87.5%!important;width:min(21vw,248px)!important}
}
@media(max-width:820px){
  .live-hero{height:auto!important;min-height:900px!important}
  .top-showcase{top:306px!important;height:430px!important}
  .top-project.slot-center{width:69vw!important;-webkit-box-reflect:none}
  .top-project.slot-left{right:82%!important;width:47vw!important;-webkit-box-reflect:none}
  .top-project.slot-right{left:82%!important;width:47vw!important;-webkit-box-reflect:none}
  .top-project.slot-far-left{right:106%!important;width:37vw!important}
  .hero-stats{bottom:66px!important;width:88vw!important}
}
@media(max-width:560px){
  .top-project.slot-center{width:77vw!important}
  .top-project.slot-left{right:87%!important;width:53vw!important}
  .top-project.slot-right{left:87%!important;width:53vw!important}
  .top-project.slot-far-left{right:116%!important;width:43vw!important}
}


/* real Carnaval UI should read as a screen, not a poster */
.top-project.slot-center[data-project="Carnaval"] img{
  object-fit:cover!important;
  object-position:center!important;
  transform:scale(1.015)!important;
  filter:brightness(1.08) contrast(1.045) saturate(1.035)!important;
}


/* ===== ULTRA HERO BACKGROUND — vector UHD, no stretching / no pixelation ===== */
.live-hero{
  isolation:isolate!important;
  background:#030302!important;
}
.hero-bg-media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#030302;
}
.hero-bg-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.002);
  transform-origin:center;
  filter:brightness(1.09) contrast(1.045) saturate(1.035);
  image-rendering:auto;
}
.hero-bg-media:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 61%,rgba(239,185,111,.045),transparent 38%),
    linear-gradient(180deg,rgba(0,0,0,.02),transparent 28%,transparent 82%,rgba(0,0,0,.07));
}
.live-hero:before,
.live-hero:after{
  opacity:0!important;
  background:none!important;
}
.live-hero-beams,
.hero-set-dressing{
  display:none!important;
}
.live-hero-vignette{
  z-index:1!important;
  opacity:.22!important;
  mix-blend-mode:normal!important;
  background:radial-gradient(ellipse at 50% 50%,transparent 0 58%,rgba(0,0,0,.12) 82%,rgba(0,0,0,.30) 100%)!important;
}
.top-showcase:before,
.top-showcase:after{
  display:none!important;
}
.top-stage-glow{
  opacity:.38!important;
}
.top-stage-platform{
  opacity:.16!important;
}
.live-hero-copy,
.hero-side,
.top-showcase,
.hero-stats,
.hero-signature{
  position:absolute;
}
.live-hero-copy{position:relative!important}

@media (min-width:821px){
  .hero-bg-media img{
    object-fit:cover;
    object-position:center 50%;
  }
}
@media (min-aspect-ratio:21/9) and (min-width:821px){
  .hero-bg-media img{
    width:100%;
    height:auto;
    min-height:100%;
    top:50%;
    transform:translateY(-50%) scale(1.002);
  }
}