/* YXE Web Studios — Saskatoon Web Design V2, shared navigation restored */
:root{--bg:#040a11;--panel:#07131f;--text:#f4f8fc;--muted:#9cadbd;--accent:#38bfff;--line:rgba(175,218,246,.18);--ease:cubic-bezier(.19,1,.22,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
::selection{background:#38bfff;color:#021322}
.skip-link{position:absolute;top:-100px;left:20px;background:#fff;color:#000;padding:12px;z-index:999}
.skip-link:focus{top:10px}
img{max-width:100%}
.reading-line{position:fixed;top:0;left:0;width:100%;height:2px;z-index:900;background:rgba(255,255,255,.08)}
.reading-line span{display:block;width:0;height:100%;background:linear-gradient(90deg,#077cff,#4deaff)}
.chapter{position:relative;isolation:isolate}
.eyebrow,.section-rail,.hero-topline,.hero-bottom{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.eyebrow{color:var(--accent);margin:0 0 24px}
.chapter h2{font-size:clamp(48px,6.7vw,112px);line-height:.96;letter-spacing:-.075em;font-weight:700;margin:0}
.chapter h2 em{font-style:normal;color:var(--accent)}
.section-rail{position:relative;display:flex;justify-content:space-between;gap:18px;color:#8da9c1;padding:34px clamp(24px,6vw,110px) 0;z-index:4;border-top:1px solid var(--line)}
.reveal{opacity:0;transform:translateY(42px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.chapter-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;background:#03101b}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:absolute;object-position:center;filter:saturate(.82)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,5,12,.96) 0%,rgba(1,6,13,.85) 47%,rgba(1,6,13,.50) 100%),linear-gradient(0deg,rgba(2,7,13,.85),transparent 50%)}
.hero-grid{position:absolute;inset:0;z-index:-1;opacity:.15;background-image:linear-gradient(rgba(95,196,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(95,196,255,.18) 1px,transparent 1px);background-size:85px 85px;mask-image:linear-gradient(90deg,transparent,#000 80%)}
.hero-topline{position:absolute;top:135px;left:clamp(24px,7vw,125px);right:clamp(24px,7vw,125px);display:flex;justify-content:space-between;color:#9eb3c6}
.hero-body{width:min(1500px,100%);margin:0 auto;padding:195px clamp(24px,8vw,150px) 145px}
.hero-body h1{font-size:clamp(55px,7.4vw,134px);line-height:.94;letter-spacing:-.085em;font-weight:750;margin:0;max-width:1200px}
.hero-body h1 span{display:block;transform:translateY(25px);opacity:0;animation:lineIn .75s var(--ease) forwards}
.hero-body h1 span:nth-child(1){animation-delay:.1s}
.hero-body h1 span:nth-child(2){animation-delay:.22s}
.hero-body h1 span:nth-child(3){animation-delay:.34s}
.hero-body h1 span:nth-child(4){animation-delay:.46s}
.hero-outline{color:transparent;-webkit-text-stroke:1px rgba(236,247,255,.8)}
.hero-blue{color:#4bbefe}
.hero-under{display:flex;gap:35px;align-items:end;justify-content:space-between;margin-top:54px;width:min(850px,100%)}
.hero-under p{font-size:clamp(15px,1.3vw,20px);line-height:1.75;color:#b9cddd;max-width:600px;margin:0}
.round-link{width:56px;height:56px;border:1px solid rgba(92,190,255,.7);border-radius:50%;display:grid;place-items:center;font-size:25px;flex-shrink:0;transition:background .3s}
.round-link:hover{background:rgba(66,180,255,.2)}
.hero-bottom{position:absolute;bottom:30px;left:clamp(24px,7vw,125px);right:clamp(24px,7vw,125px);display:flex;justify-content:space-between;color:#9cb8cd}
@keyframes lineIn{to{opacity:1;transform:none}}
.story-section{background:#06101a}
.story-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:8vw;padding:130px clamp(24px,8vw,150px) 160px;min-height:170vh}
.story-sticky{position:sticky;top:18vh;align-self:start}
.story-sticky h2{max-width:680px}
.story-aside{color:var(--muted);max-width:420px;line-height:1.8;font-size:16px;margin:34px 0}
.story-progress{width:160px;height:2px;background:#22384a}
.story-progress span{display:block;width:0;height:100%;background:var(--accent)}
.story-scenes{display:grid;align-content:space-between;gap:23vh;padding:12vh 0}
.story-card{border-top:1px solid rgba(91,176,238,.4);padding:26px 10px 0}
.story-card>span{color:var(--accent);letter-spacing:.2em;font-size:10px}
.story-card h3{font-size:clamp(32px,3.4vw,58px);letter-spacing:-.055em;line-height:1.05;margin:25px 0}
.story-card p{font-size:17px;line-height:1.8;color:#b1c5d3;max-width:520px}
.services-section{padding-bottom:150px;background:radial-gradient(ellipse at 86% 16%,rgba(0,116,232,.13),transparent 36%),#03080e}
.section-intro{max-width:1250px;margin:0 auto;padding:135px clamp(24px,6vw,100px) 80px}
.section-intro h2{max-width:950px}
.section-intro>p:last-child{color:#aebdce;max-width:610px;font-size:17px;line-height:1.8;margin-top:30px}
.service-list{max-width:1260px;margin:0 auto;padding:0 24px}
.service-item{display:grid;grid-template-columns:100px 1fr 36px;gap:22px;align-items:start;padding:38px 14px;border-top:1px solid var(--line)}
.service-item:last-child{border-bottom:1px solid var(--line)}
.service-count{font-size:12px;letter-spacing:.18em;color:var(--accent);padding-top:12px}
.service-item h3{font-size:clamp(29px,3vw,54px);line-height:1.05;letter-spacing:-.055em;margin:0 0 15px}
.service-item p{color:#aebdca;font-size:15px;line-height:1.85;max-width:680px;margin:0}
.service-arrow{font-size:30px;color:#3cb8f9}
.work-section{padding-bottom:130px;background:#07121f}
.work-heading{padding:130px clamp(24px,8vw,150px) 80px;max-width:1300px}
.work-heading h2{max-width:1100px}
.project-stack{display:grid;gap:95px;max-width:1470px;margin:0 auto;padding:0 clamp(24px,6vw,100px)}
.project{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.72fr);align-items:center;gap:clamp(25px,4vw,85px)}
.project:nth-child(even) .project-visual{order:2}
.project-visual{height:clamp(310px,42vw,580px);position:relative;overflow:hidden;background:linear-gradient(145deg,#12324c,#050d17)}
.project-visual:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(2,9,15,.42),transparent 45%)}
.project-visual img{width:100%;height:100%;object-fit:absolute;display:block;transition:transform 1.4s var(--ease)}
.project:hover .project-visual img{transform:scale(1.045)}
.project-index{position:absolute;top:20px;left:20px;z-index:1;font-size:11px;letter-spacing:.15em;background:#071422b8;padding:12px}
.project-details>p:first-child{letter-spacing:.18em;font-size:10px;color:var(--accent)}
.project-details h3{font-size:clamp(42px,4.4vw,78px);letter-spacing:-.07em;line-height:1.02;margin:20px 0 24px}
.project-details>p:not(:first-child){color:#acbdcc;line-height:1.9;font-size:16px}
.project-details a{display:inline-flex;gap:50px;border-bottom:1px solid #58caff;padding:20px 0 12px;margin-top:25px;text-transform:uppercase;letter-spacing:.13em;font-size:11px;font-weight:700}
.project-details a span{color:var(--accent)}
.process-section{background:#eaf2f6;color:#0b1721;padding-bottom:135px}
.process-section .section-rail{color:#465d70;border-color:#cad7df}
.process-layout{display:grid;grid-template-columns:1fr .85fr;gap:10vw;padding:135px clamp(24px,8vw,150px) 30px;max-width:1700px;margin:0 auto}
.process-copy{position:sticky;top:90px;align-self:start}
.process-copy h2 em{color:#067fd6}
.process-copy>p:not(.eyebrow){color:#526674;line-height:1.8;max-width:500px;font-size:17px}
.process-copy .eyebrow{color:#067fd6}
.text-link{font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;gap:40px;border-bottom:1px solid #067fd6;padding:20px 0}
.process-steps{list-style:none;margin:0;padding:0}
.process-steps li{display:grid;grid-template-columns:65px 1fr;gap:20px;padding:30px 0;border-top:1px solid #c0d0d9}
.process-steps li>span{color:#067fd6;font-size:14px}
.process-steps h3{font-size:clamp(29px,3vw,45px);letter-spacing:-.06em;margin:0 0 14px}
.process-steps p{color:#4c6271;line-height:1.8;margin:0}
.faq-section{background:#050d16;padding-bottom:140px}
.faq-layout{display:grid;grid-template-columns:.8fr 1.1fr;gap:9vw;padding:140px clamp(24px,8vw,150px) 0;max-width:1700px;margin:0 auto}
.faq-heading h2{max-width:620px}
.faq-heading>p:last-child{color:#a7baca;line-height:1.8;max-width:430px}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:25px;padding:27px 0;font-size:clamp(19px,1.7vw,27px);letter-spacing:-.035em;font-weight:600;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span{font-size:32px;font-weight:300;color:#4ac8fa;transition:transform .25s}
.faq-item[open] summary span{transform:rotate(45deg)}
.faq-item p{color:#a9bdcd;line-height:1.8;margin:0;max-width:650px;padding:0 40px 30px 0}
.contact-section{background:#061c2c;overflow:hidden;padding-bottom:160px}
.contact-orb{position:absolute;left:-28vw;top:-20vh;width:75vw;height:75vw;border-radius:50%;background:radial-gradient(circle,rgba(0,123,247,.28),transparent 65%);z-index:-1;pointer-events:none}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:7vw;max-width:1600px;margin:0 auto;padding:140px clamp(24px,7vw,120px) 0}
.contact-message h2{font-size:clamp(55px,6.5vw,106px)}
.contact-message>p:not(.eyebrow){font-size:18px;line-height:1.75;color:#bbd0df;max-width:550px;margin:30px 0 50px}
.contact-details{display:flex;flex-direction:column;align-items:flex-start;gap:15px}
.contact-details a{border-bottom:1px solid #448eb8;padding:10px 0}
.contact-details span{color:var(--accent);padding-left:25px}
.form-shell{background:rgba(3,11,20,.82);border:1px solid rgba(114,185,226,.25);padding:clamp(24px,3vw,55px)}
.form-head{display:flex;justify-content:space-between;color:#92b3ca;font-size:10px;letter-spacing:.18em;border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:30px}
.form-shell form{display:grid;gap:26px}
.form-shell label{font-size:10px;letter-spacing:.14em;font-weight:700;color:#a9bfd0;display:grid;gap:12px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.form-shell input,.form-shell select,.form-shell textarea{min-width:0;width:100%;padding:13px 0;border:0;border-bottom:1px solid #355066;border-radius:0;color:#fff;background:transparent;outline:none;font-size:16px;letter-spacing:normal}
.form-shell select option{color:#111}
.form-shell input:focus,.form-shell textarea:focus,.form-shell select:focus{border-color:#5bd4ff}
.form-shell textarea{resize:vertical;min-height:120px}
.submit-button{width:100%;display:flex;justify-content:space-between;align-items:center;border:0;background:#42bfff;color:#03101c;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;padding:20px 22px}
.submit-button:hover{background:#80d7ff}
.form-note{font-size:12px;color:#aab9c7;line-height:1.5;margin:0}
.form-note a{text-decoration:underline}
.form-alert{padding:14px 16px;line-height:1.6;font-size:14px}
.form-alert.success{background:#143d34;color:#d8fff0}
.form-alert.error{background:#482025;color:#ffe7e8}
.honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.site-footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:34px clamp(24px,6vw,100px);background:#02070b;border-top:1px solid var(--line);color:#97afc0;font-size:11px;letter-spacing:.09em}
.site-footer>a:first-child{font-weight:800;color:#fff}
@media (max-width:1100px){
.story-layout,.process-layout,.faq-layout,.contact-layout{gap:5vw}
.hero-body h1{font-size:clamp(60px,8.5vw,108px)}
}
@media (max-width:800px){
.hero-topline{top:110px}
.hero-body{padding:185px 7vw 125px}
.hero-body h1{font-size:clamp(46px,10vw,85px)}
.hero-bottom span:last-child{display:none}
.story-layout,.process-layout,.faq-layout,.contact-layout{grid-template-columns:1fr;min-height:auto;padding-top:85px}
.story-sticky,.process-copy{position:static}
.story-scenes{gap:55px;padding:65px 0 0}
.story-card{max-width:650px}
.section-intro,.work-heading{padding-top:95px}
.project{grid-template-columns:1fr;gap:25px}
.project:nth-child(even) .project-visual{order:initial}
.project-details{padding-bottom:25px}
.project-stack{gap:65px}
.project-visual{height:clamp(270px,60vw,530px)}
.process-steps{margin-top:55px}
.faq-items{margin-top:55px}
.contact-layout{gap:65px}
.contact-section{padding-bottom:100px}
}
@media (max-width:520px){
.eyebrow,.section-rail{font-size:8px}
.section-rail{padding-top:22px}
.section-rail span:last-child{max-width:42%;text-align:right}
.hero-body{padding-top:200px}
.hero-body h1{font-size:clamp(43px,11vw,65px);letter-spacing:-.07em}
.hero-under{margin-top:30px}
.hero-under p{font-size:14px}
.round-link{width:44px;height:44px}
.hero-topline span:last-child{display:none}
.hero-blue{max-width:360px}
.chapter h2{font-size:clamp(46px,12vw,73px)}
.service-item{grid-template-columns:34px 1fr 15px;gap:11px;padding:29px 0}
.service-item h3{font-size:clamp(26px,7vw,42px)}
.service-item p{font-size:14px}
.service-arrow{font-size:20px}
.field-row{grid-template-columns:1fr}
.story-layout,.process-layout,.faq-layout,.contact-layout{padding-bottom:80px}
.faq-section{padding-bottom:40px}
.site-footer{line-height:1.8}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.reveal{opacity:1!important;transform:none!important;transition:none!important}
.hero-body h1 span{opacity:1;transform:none;animation:none!important}
.project-visual img{transition:none}
}
.story-section{height:370vh;min-height:2500px;padding:0;background:#020a13}
.story-stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.story-world{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#020a13}
.story-world-image{position:absolute;inset:-8%;background:linear-gradient(90deg,rgba(2,8,16,.94),rgba(2,8,16,.63)),url("/assets/images/hero-city1.webp") center/cover;transform:scale(1.08);will-change:transform;opacity:.6}
.story-world-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(100,185,235,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(100,185,235,.09) 1px,transparent 1px);background-size:90px 90px;mask-image:linear-gradient(90deg,transparent,#000)}
.story-world-number{position:absolute;right:-1vw;bottom:-17vw;font-size:clamp(320px,52vw,900px);font-weight:800;letter-spacing:-.12em;color:rgba(117,195,238,.045);line-height:1}
.story-stage .section-rail{border:0;flex-shrink:0}
.story-stage-center{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:5vh clamp(25px,11vw,190px) 7vh;max-width:1500px;width:100%;margin:auto}
.story-stage-center h2{max-width:1020px;font-size:clamp(45px,5.7vw,104px);line-height:.96;transition:opacity .3s}
.story-acts{position:relative;width:100%;min-height:220px;margin-top:5vh}
.story-act{position:absolute;inset:0;opacity:0;transform:translate3d(0,60px,0);pointer-events:none;transition:opacity .35s,transform .45s var(--ease);max-width:800px}
.story-act.is-active{opacity:1;transform:translate3d(0,0,0);pointer-events:auto}
.story-act .act-count{color:#5ed5ff;letter-spacing:.25em;font-size:11px;font-weight:700}
.story-act h3{font-size:clamp(31px,4vw,74px);line-height:1;letter-spacing:-.06em;margin:15px 0}
.story-act p{font-size:clamp(15px,1.35vw,19px);line-height:1.65;color:#bdccda;max-width:610px;margin:0}
.story-stage-foot{display:flex;align-items:center;gap:20px;padding:25px clamp(25px,11vw,190px) 45px;font-size:10px;letter-spacing:.2em;color:#8db4cc}
.story-stage-foot .story-progress{flex:1;max-width:370px;height:2px;background:#315268}
.story-progress span{height:100%;background:#51caff;display:block;width:0}
.services-section{background:#eef4f6;color:#081a28;padding-bottom:0}
.services-section .section-rail{color:#587082;border-color:#c9d7dc}
.services-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:8vw;padding:100px clamp(24px,7vw,125px) 150px;max-width:1750px;margin:auto}
.services-anchor{position:sticky;top:15vh;align-self:start;max-width:730px}
.services-anchor .eyebrow{color:#087eb8}
.services-anchor h2{font-size:clamp(48px,6vw,105px);line-height:.93}
.services-anchor h2 em{color:#087eb8}
.services-anchor>p:not(.eyebrow){max-width:490px;font-size:17px;color:#506779;line-height:1.8;margin:35px 0}
.service-live-count{display:flex;align-items:baseline;gap:10px;color:#668297}
.service-live-count strong{font-size:72px;font-weight:600;color:#067bb9;font-variant-numeric:tabular-nums}
.service-live-track{width:90px;height:2px;background:#b4ced9;margin-left:15px;align-self:center}
.service-live-track i{display:block;width:16.66%;height:100%;background:#067bb9;transition:width .4s}
.services-index{padding-top:8vh}
.services-section .service-item{grid-template-columns:55px 1fr 24px;min-height:49vh;align-items:center;gap:18px;border-color:#bfced7;padding:35px 6px;opacity:.43;transform:translateX(28px);transition:opacity .35s,transform .55s var(--ease)}
.services-section .service-item.is-active{opacity:1;transform:translateX(0)}
.services-section .service-item h3{font-size:clamp(31px,3.7vw,62px);color:#0b2234}
.services-section .service-item p{color:#4e6576;font-size:16px;line-height:1.75}
.services-section .service-count,.services-section .service-arrow{color:#087eb8}
.cinematic-break{height:min(90svh,900px);min-height:480px;position:relative;display:grid;place-items:center;overflow:hidden;background:#030c15;text-align:center}
.break-image{position:absolute;inset:-10%;background:linear-gradient(90deg,rgba(2,8,16,.88),rgba(2,8,16,.45)),url("/assets/images/hero-city.webp") center 56%/cover;transform:scale(1.15);will-change:transform}
.cinematic-break p{position:relative;padding:24px;font-size:clamp(34px,5.5vw,96px);font-weight:800;line-height:.98;letter-spacing:-.07em;z-index:1}
.cinematic-break strong{color:#59caff}
.cinematic-break>span{position:absolute;bottom:35px;font-size:10px;letter-spacing:.25em;color:#c2d9e6}
.work-section{background:#040c17;padding-bottom:14vh}
.work-heading{padding-bottom:80px}
.project-stack-cinematic{display:block;max-width:none;padding:0 clamp(20px,7vw,140px)}
.project-stack-cinematic .project{position:sticky;top:9vh;min-height:80svh;margin-bottom:10vh;grid-template-columns:1.22fr .72fr;padding:clamp(20px,3vw,55px);background:#0b1c2e;border:1px solid rgba(130,193,235,.2);box-shadow:0 20px 85px rgba(0,0,0,.3);overflow:hidden;border-radius:3px;will-change:transform}
.project-stack-cinematic .project:nth-child(2){background:#102b3c;top:12vh}
.project-stack-cinematic .project:nth-child(3){background:#13263b;top:15vh}
.project-stack-cinematic .project-visual{height:clamp(330px,55vh,680px)}
.project-stack-cinematic .project:nth-child(even) .project-visual{order:initial}
.project-stack-cinematic .project img{transform:scale(1.075)}
.project-stack-cinematic .project.is-active img{transform:scale(1)}
.project-stack-cinematic .project-details h3{font-size:clamp(42px,5vw,89px)}
.process-section{background:#e7eff3}
.process-steps{position:relative}
.process-steps::before{content:"";position:absolute;top:12px;bottom:20px;left:27px;width:2px;background:#b9d3df}
.process-steps::after{content:"";position:absolute;top:12px;left:27px;width:2px;height:calc(var(--timeline-progress,0) * (100% - 32px));background:#0477ba;transition:height .12s linear}
.process-steps li{position:relative;border-top:0;padding:55px 0 55px 8px;grid-template-columns:65px 1fr;opacity:.38;transition:opacity .4s,transform .5s;transform:translateX(18px)}
.process-steps li.is-active{opacity:1;transform:none}
.process-steps li>span{position:relative;z-index:2;width:45px;height:45px;background:#e7eff3;border:1px solid #83b4cc;border-radius:50%;display:grid;place-items:center;font-weight:700}
.process-steps li.is-active>span{background:#0477ba;color:white;border-color:#0477ba}
.faq-section{background:radial-gradient(circle at 25% 30%,#123149,#040b13 48%)}
.faq-layout{align-items:start}
.faq-heading{position:sticky;top:19vh}
.faq-item[open]{background:rgba(70,184,242,.055);padding-left:16px;border-color:rgba(105,210,255,.5)}
.contact-section{background:#03111c}
.contact-giant{position:absolute;top:0;left:-2vw;color:rgba(103,201,251,.055);font-size:clamp(190px,33vw,560px);letter-spacing:-.13em;font-weight:900;line-height:.68;pointer-events:none;white-space:nowrap}
.contact-layout{position:relative;z-index:2;align-items:center}
.contact-message h2{font-size:clamp(65px,7.1vw,130px)}
@media (max-width:900px){
.story-section{height:320vh;min-height:2200px}
.story-stage-center{padding:8vh 8vw 4vh}
.story-stage-center h2{font-size:clamp(48px,8vw,78px)}
.story-acts{min-height:230px}
.services-shell{grid-template-columns:1fr;gap:15px;padding-top:80px}
.services-anchor{position:relative;top:auto}
.services-index{padding-top:10px}
.services-section .service-item{min-height:240px;opacity:1;transform:none}
.project-stack-cinematic .project{grid-template-columns:1fr;min-height:75svh;top:7vh;padding:20px;gap:15px}
.project-stack-cinematic .project:nth-child(2){top:9vh}
.project-stack-cinematic .project:nth-child(3){top:11vh}
.project-stack-cinematic .project-visual{height:38svh;min-height:200px}
.project-stack-cinematic .project-details h3{font-size:clamp(36px,7vw,70px);margin:9px 0}
.project-stack-cinematic .project-details p{font-size:14px;line-height:1.5}
.project-stack-cinematic .project-details a{margin-top:5px;padding:10px 0}
.faq-heading{position:static}
}
@media (max-width:520px){
.story-section{height:300vh;min-height:1900px}
.story-stage{min-height:560px}
.story-stage-center{padding:30px 7vw 0}
.story-stage-center h2{font-size:clamp(42px,11vw,62px)}
.story-act h3{font-size:clamp(29px,8vw,41px)}
.story-act p{font-size:14px}
.story-acts{min-height:250px;margin-top:28px}
.story-stage-foot{padding:12px 7vw 24px}
.services-shell{padding:60px 7vw 80px}
.services-anchor h2{font-size:clamp(45px,11vw,70px)}
.services-section .service-item{grid-template-columns:34px 1fr 18px;min-height:230px}
.cinematic-break{min-height:430px;height:65svh}
.cinematic-break p{font-size:clamp(33px,9vw,52px)}
.project-stack-cinematic{padding:0 14px}
.project-stack-cinematic .project{min-height:78svh}
.project-stack-cinematic .project-visual{height:32svh;min-height:165px}
.project-stack-cinematic .project-details h3{font-size:36px}
.contact-giant{font-size:42vw}
}
@media (prefers-reduced-motion:reduce){
.story-act,.services-section .service-item,.project-stack-cinematic .project img,.process-steps li{transition:none!important;transform:none!important}
.story-world-image,.break-image{transform:none!important}
}
:root { --web-design-header-height: 76px; }
html { scroll-padding-top: var(--web-design-header-height); }
body { overflow-x: clip; }
.chapter-hero { min-height: 100svh; }
.story-stage {
    top: var(--web-design-header-height);
    height: calc(100svh - var(--web-design-header-height));
    min-height: min(600px, calc(100svh - var(--web-design-header-height)));
}
.project-stack-cinematic .project { top: calc(var(--web-design-header-height) + 12px); }
.project-stack-cinematic .project:nth-child(2) { top: calc(var(--web-design-header-height) + 34px); }
.project-stack-cinematic .project:nth-child(3) { top: calc(var(--web-design-header-height) + 56px); }
.services-anchor, .process-copy, .faq-heading {
    scroll-margin-top: calc(var(--web-design-header-height) + 20px);
}
.story-acts { position: relative; }
.story-act { pointer-events: none; }
.story-act.is-active { pointer-events: auto; }
.services-shell, .services-index, .story-stage-center { min-width: 0; }
@media  (max-width: 800px) {
:root { --web-design-header-height: 72px; }
.story-stage { min-height: 0; }
.project-stack-cinematic .project,
    .project-stack-cinematic .project:nth-child(2),
    .project-stack-cinematic .project:nth-child(3) {
        top: calc(var(--web-design-header-height) + 10px);
    }
}
@media  (max-width: 520px) {
.story-stage-center { min-width: 0; }
.story-stage-center h2 { overflow-wrap: anywhere; }
.story-act { max-width: 100%; }
}
@media  (prefers-reduced-motion: reduce) {
.story-act { pointer-events: auto; }
}

/* =============================================================
   YXE WEB STUDIOS — SHARED PRIMARY NAVIGATION
   Homepage-matched typography, dropdown, fixed header, mobile.
   Header HTML must use .site-header, .brand, .nav-dropdown,
   .nav-dropdown-toggle, .nav-dropdown-menu and .header-cta.
   The mobile menu button on this page is .menu-toggle.
   ============================================================= */
:root { --web-design-header-height: 76px; }
html { scroll-padding-top: var(--web-design-header-height); }
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 2000;
    width: 100%;
    height: var(--web-design-header-height);
    min-height: var(--web-design-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 clamp(20px, 3.5vw, 68px);
    background: rgba(3, 11, 19, .97);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.site-header .brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}
.site-header .brand img {
    display: block;
    width: clamp(155px, 11vw, 190px);
    max-height: 55px;
    height: auto;
    object-fit: contain;
}
.brand-fallback { font-weight: 800; letter-spacing: .1em; }
.brand-fallback b { font-size: .6em; }
.site-header nav {
    display: flex;
    align-items: center;
    gap: clamp(15px, 1.8vw, 32px);
    min-width: 0;
}
/* Identical link and Services button typography. */
.site-header nav > a:not(.header-cta),
.site-header nav .nav-dropdown-toggle {
    color: #e9f1f8;
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.site-header nav > a:not(.header-cta):hover,
.site-header nav > a:not(.header-cta):focus-visible,
.site-header nav .nav-dropdown-toggle:hover,
.site-header nav .nav-dropdown-toggle:focus-visible {
    color: #00a6fb;
}
.site-header nav .header-cta,
.site-header nav .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 13px 19px;
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 100px;
    background: transparent;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.site-header nav .header-cta:hover,
.site-header nav .nav-cta:hover { border-color: #00a6fb; color: #00a6fb; }
.site-header .nav-dropdown { position: relative; display: flex; align-items: center; }
.site-header .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    margin: 0;
    border: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
}
.site-header .dropdown-arrow {
    display: inline-block;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0;
    transition: transform .3s ease;
}
.site-header .nav-dropdown:hover .dropdown-arrow,
.site-header .nav-dropdown:focus-within .dropdown-arrow,
.site-header .nav-dropdown.is-open .dropdown-arrow { transform: rotate(180deg); }
.site-header .nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    z-index: 2500;
    width: 250px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(5, 12, 20, .97);
    box-shadow: 0 20px 55px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease;
}
.site-header .nav-dropdown-menu::before {
    content: '';
    position: absolute;
    inset: -14px 0 auto;
    height: 14px;
}
.site-header .nav-dropdown-menu a {
    display: block;
    padding: 12px 14px;
    border-radius: 7px;
    color: #e9f1f8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.5;
    text-transform: none;
    text-decoration: none;
    white-space: normal;
    transition: background .2s ease, color .2s ease;
}
.site-header .nav-dropdown-menu a:hover,
.site-header .nav-dropdown-menu a:focus-visible,
.site-header .nav-dropdown-menu a[aria-current="page"] {
    background: rgba(0, 166, 251, .12);
    color: #00a6fb;
}
.site-header .nav-dropdown:hover .nav-dropdown-menu,
.site-header .nav-dropdown:focus-within .nav-dropdown-menu,
.site-header .nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.menu-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid rgba(175, 218, 246, .35);
    background: transparent;
    color: #fff;
    font-size: 10px;
    letter-spacing: .12em;
}
.menu-icon { font-size: 17px; }
@media (max-width: 1100px) {
    .site-header nav { gap: 14px; }
    .site-header nav > a:not(.header-cta),
    .site-header nav .nav-dropdown-toggle { font-size: 9px; letter-spacing: .12em; }
    .site-header nav .header-cta { padding: 11px 13px; gap: 9px; }
}
@media (max-width: 800px) {
    :root { --web-design-header-height: 72px; }
    .site-header { padding: 0 20px; }
    .site-header .brand img { width: 165px; }
    .menu-toggle { display: inline-flex; }
    .site-header nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100dvh - var(--web-design-header-height));
        overflow-x: hidden;
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 24px 26px;
        background: #05111e;
        border-bottom: 1px solid rgba(175, 218, 246, .18);
    }
    .site-header nav.is-open { display: flex; }
    .site-header nav > a:not(.header-cta) {
        display: block;
        padding: 15px 0;
        font-size: 12px;
        letter-spacing: .14em;
    }
    .site-header .nav-dropdown { display: block; width: 100%; }
    .site-header .nav-dropdown-toggle {
        display: flex;
        width: 100%;
        justify-content: space-between;
        padding: 15px 0;
        font-size: 12px;
        letter-spacing: .14em;
    }
    .site-header .nav-dropdown-menu,
    .site-header .nav-dropdown:hover .nav-dropdown-menu,
    .site-header .nav-dropdown:focus-within .nav-dropdown-menu {
        display: none;
        position: static;
        width: 100%;
        padding: 4px 0 4px 15px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .site-header .nav-dropdown.is-open .nav-dropdown-menu { display: block; }
    .site-header .nav-dropdown-menu::before { display: none; }
    .site-header nav .header-cta { margin-top: 10px; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header .nav-dropdown-menu,
    .site-header .dropdown-arrow { transition: none; }
}
/* =========================================================
   YXE WEB STUDIOS
   MOBILE NAVIGATION
========================================================= */

/* Hide mobile elements on desktop */

.site-header .mobile-menu-toggle,
.site-header .mobile-navigation {
    display: none;
}


/* =========================================================
   MOBILE BREAKPOINT
========================================================= */

@media (max-width: 900px) {

    /* HEADER */

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;

        z-index: 9999;

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

        min-height: 76px;
        padding: 0 20px;

        background: rgba(4, 9, 15, 0.96);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    /* LOGO */

    .site-header .brand {
        position: relative;
        z-index: 10002;

        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .site-header .brand img {
        display: block;
        width: 150px;
        height: auto;
        max-width: 100%;
    }

    /* HIDE DESKTOP NAVIGATION */

    .site-header .desktop-nav {
        display: none !important;
    }



    /* =====================================================
       FULL-SCREEN MOBILE MENU
    ====================================================== */

    .site-header .mobile-navigation {
        position: fixed;

        top: 76px;
        left: 0;
        right: 0;
        bottom: 0;

        z-index: 10000;

        display: block;

        background: #04090f;

        overflow-y: auto;
        overscroll-behavior: contain;

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

        transform: translateY(-12px);

        transition:
            opacity 0.3s ease,
            visibility 0.3s ease,
            transform 0.3s ease;
    }

    .site-header .mobile-navigation.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .mobile-navigation-inner {
        width: min(600px, calc(100% - 40px));
        margin: 0 auto;

        padding: 35px 0 60px;
    }

    .mobile-navigation-label {
        display: block;

        margin-bottom: 24px;

        color: #00bbef;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.18em;
    }


    /* =====================================================
       MAIN MOBILE LINKS
    ====================================================== */

    .mobile-nav-link {
        display: flex;
        align-items: center;
        gap: 20px;

        width: 100%;
        padding: 14px 0;

        border-bottom: 1px solid rgba(255,255,255,0.12);

        color: #ffffff;

        font-family: 'Barlow Condensed', sans-serif;
        font-size: clamp(30px, 7vw, 42px);
        font-weight: 700;
        line-height: 1.1;

        text-decoration: none;
        text-transform: uppercase;
    }

    .mobile-nav-link > span {
        color: #00bbef;

        font-family: Arial, sans-serif;
        font-size: 11px;
        font-weight: 700;
    }

    .mobile-nav-link b {
        margin-left: auto;
        color: #00bbef;
        font-size: 22px;
    }


    /* =====================================================
       MOBILE SERVICES
    ====================================================== */

    .mobile-nav-services {
        display: flex;
        flex-direction: column;

        padding: 22px 0;

        border-bottom: 1px solid rgba(255,255,255,0.12);
    }

    .mobile-nav-section {
        margin-bottom: 14px;

        color: #00bbef;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.15em;
    }

    .mobile-nav-services a {
        display: block;

        padding: 9px 0 9px 22px;

        color: #d1d9df;

        font-size: 15px;
        font-weight: 500;

        text-decoration: none;

        border-left: 1px solid rgba(0,187,239,0.25);
    }

    .mobile-nav-services a:hover {
        color: #00bbef;
        border-left-color: #00bbef;
    }


    /* =====================================================
       MOBILE CTA
    ====================================================== */

    .mobile-nav-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;

        margin-top: 30px;
        padding: 18px 22px;

        background: #00bbef;
        color: #041018;

        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.1em;

        text-decoration: none;
    }

    .mobile-nav-cta span {
        font-size: 22px;
    }

    .mobile-navigation-footer {
        margin-top: 35px;

        color: #64727c;
        font-size: 10px;
        letter-spacing: 0.14em;
    }

}

/* PREVENT BACKGROUND SCROLLING */

body.mobile-menu-open {
    overflow: hidden;
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .mobile-menu-toggle span,
    .mobile-navigation {
        transition: none !important;
    }

}