/* ============================================================
   ZENTHRYXLK — cinematic dark editorial website
   Responsive, progressive enhancement, accessible motion.
   ============================================================ */
:root {
  --bg:#090b0e; --bg-2:#0d1014; --bg-3:#12161b;
  --ink:#edf0e9; --muted:#969c9f; --dim:#657078;
  --lime:#d8ff66; --lime-dim:#abc94f; --stroke:rgba(255,255,255,.115);
  --shell:1424px; --pad:clamp(22px,4.8vw,78px);
  --font-head:'Space Grotesk', 'Arial Narrow',Arial,sans-serif;
  --font-body:'DM Sans',Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-snappy:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:82px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.menu-open{overflow:hidden}
::selection{background:var(--lime);color:var(--bg)}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
img{display:block;width:100%;height:100%;object-fit:cover}
svg{display:block}
p,h1,h2,h3{margin:0}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.shell{width:100%;max-width:var(--shell);padding-inline:var(--pad);margin-inline:auto}
.section{padding-block:clamp(110px,12vw,200px)}
.text-accent{color:var(--lime)}
.section-index,.section-topline,.side-note{font-size:10px;letter-spacing:.17em;font-weight:700}
.section-index{color:var(--lime)}
.side-note{color:#7c8587}
.skip-link{position:fixed;z-index:1000;top:-60px;left:16px;background:var(--lime);color:#111;padding:12px 19px;font-weight:700;transition:top .2s}
.skip-link:focus{top:12px}
.scroll-progress{position:fixed;top:0;left:0;right:auto;width:0%;height:2px;z-index:110;background:var(--lime);pointer-events:none;box-shadow:0 0 11px rgba(216,255,102,.4)}

/* HEADER */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(9,11,14,.37);border-bottom:1px solid rgba(255,255,255,.085);backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);transition:background .4s,border-color .4s}
.site-header.scrolled{background:rgba(9,11,14,.94);border-bottom-color:var(--stroke)}
.header-inner{height:84px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;min-width:0}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;color:var(--ink);flex:none}
.brand-mark svg{width:100%;height:100%}
.brand-name{font:700 19px/1 var(--font-head);letter-spacing:-.07em}
.brand-lk{color:var(--lime);font-size:13px;letter-spacing:-.03em;margin-left:2px;vertical-align:2px}
.desktop-nav{display:flex;align-items:center;gap:clamp(24px,3vw,46px);margin-left:auto;margin-right:clamp(5px,4vw,55px)}
.desktop-nav a{font-size:12px;font-weight:600;color:#c5cacc;transition:color .3s;position:relative;padding-block:12px}
.desktop-nav a::after{content:"";position:absolute;bottom:5px;left:0;right:100%;height:1px;background:var(--lime);transition:right .4s var(--ease)}
.desktop-nav a:hover{color:var(--ink)}
.desktop-nav a:hover::after{right:0}
.nav-cta{display:inline-flex;gap:27px;align-items:center;justify-content:space-between;border:1px solid rgba(255,255,255,.31);padding:13px 15px 13px 20px;font-size:12px;font-weight:700;border-radius:2px;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.nav-cta:hover{background:var(--lime);border-color:var(--lime);color:var(--bg)}
.arrow-symbol,.link-arrow{font-family:var(--font-head);font-size:20px;line-height:1;display:inline-block;transition:transform .35s var(--ease)}
.nav-cta:hover .arrow-symbol,.text-link:hover .link-arrow{transform:translate(4px,-4px)}
.menu-toggle{display:none;width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:transparent;border:1px solid var(--stroke);color:var(--ink)}
.menu-toggle span{height:2px;width:19px;background:currentColor;transition:transform .3s,opacity .3s}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-nav{display:none}

/* GENERAL TYPE, BUTTONS, REVEALS */
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--lime);font-size:10px;letter-spacing:.17em;font-weight:700}
.eyebrow-line{display:inline-block;width:31px;height:1px;background:var(--lime)}
.title-line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.title-line-inner{display:block;transform:translateY(0)}
.js .reveal-heading .title-line-inner{transform:translateY(112%);transition:transform 1.12s var(--ease)}
.js .reveal-heading.is-visible .title-line-inner{transform:translateY(0)}
.js .reveal-heading .title-line:nth-child(2) .title-line-inner{transition-delay:.12s}
.js .reveal-heading .title-line:nth-child(3) .title-line-inner{transition-delay:.22s}
.js .reveal{opacity:0;transform:translate3d(0,38px,0);transition:opacity .92s var(--ease),transform .92s var(--ease)}
.js .reveal.is-visible{opacity:1;transform:translate3d(0,0,0)}
.js .reveal-card{opacity:0;transform:translateY(55px);transition:opacity 1s var(--ease),transform 1s var(--ease),border-color .45s,background .45s;transition-delay:calc(var(--stagger) * 125ms)}
.js .reveal-card.is-visible{opacity:1;transform:translateY(0)}
.js .media-reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1.35s var(--ease)}
.js .media-reveal.is-visible{clip-path:inset(0 0 0 0)}
.button{height:54px;min-width:218px;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:0 20px 0 23px;border-radius:2px;border:1px solid transparent;position:relative;font-size:12px;font-weight:700;overflow:hidden;transition:background .35s,color .35s,border-color .35s,transform .35s var(--ease)}
.button:hover{transform:translateY(-3px)}
.button-accent{color:#10140c;background:var(--lime)}
.button-accent:hover{color:var(--lime);background:transparent;border-color:var(--lime)}
.button-dark{background:#0b0f10;color:var(--lime);border-color:#0b0f10;width:100%;justify-content:space-between}
.button-dark:hover{background:#24302b;color:var(--lime)}
.button-arrow{font:400 21px/1 var(--font-head);transition:transform .38s var(--ease)}
.button:hover .button-arrow{transform:translate(5px,-5px)}
.text-link{display:inline-flex;align-items:center;gap:21px;font-size:12px;font-weight:700;position:relative;padding:12px 0;white-space:nowrap}
.text-link:after{content:"";position:absolute;bottom:6px;left:0;width:100%;height:1px;background:rgba(255,255,255,.55);transform-origin:left;transform:scaleX(.37);transition:transform .4s var(--ease),background .4s}
.text-link:hover:after{background:var(--lime);transform:scaleX(1)}

/* HERO */
.hero{position:relative;min-height:850px;height:min(980px,100svh);max-height:1050px;overflow:hidden;background:#0a0d10;isolation:isolate}
.hero-grain{position:absolute;inset:0;opacity:.16;pointer-events:none;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='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");z-index:6;mix-blend-mode:screen}
.hero-aura{position:absolute;right:-13%;top:5%;width:65%;height:90%;background:radial-gradient(ellipse,rgba(50,101,103,.21) 0,rgba(21,58,57,.11) 37%,transparent 70%);pointer-events:none}
.hero-grid{position:absolute;inset:0;opacity:.22;z-index:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.065) 1px,transparent 1px);background-size:calc(100vw / 12) 125px;mask-image:linear-gradient(to right,black,transparent 65%)}
.hero-inner{height:100%;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:center;position:relative;z-index:2;gap:0;padding-top:100px;padding-bottom:94px}
.hero-copy{position:relative;z-index:5;align-self:center;padding-top:20px}
.hero-title{font:700 clamp(72px,7.75vw,130px)/.95 var(--font-head);letter-spacing:-.095em;margin-top:38px;white-space:nowrap;text-transform:uppercase}
.hero-title .title-line{padding-right:8px}
.hero-title .title-line-inner{transform:none}
.js .hero-title .title-line-inner{transform:translateY(110%)}
.is-loaded .hero-title .title-line-inner{animation:heroTitle 1.28s var(--ease) forwards}
.is-loaded .hero-title .title-line:nth-child(1) .title-line-inner{animation-delay:.14s}
.is-loaded .hero-title .title-line:nth-child(2) .title-line-inner{animation-delay:.25s}
.is-loaded .hero-title .title-line:nth-child(3) .title-line-inner{animation-delay:.37s}
@keyframes heroTitle{to{transform:translateY(0)}}
.hero-title .text-accent{font-weight:600}
.period{color:var(--ink);font-weight:400}
.js .hero-enter{opacity:0;transform:translateY(25px)}
.is-loaded .hero-enter{animation:heroEnter 1.05s var(--ease) forwards;animation-delay:calc(.1s + var(--entry) * .16s)}
@keyframes heroEnter{to{transform:translateY(0);opacity:1}}
.hero-copy-bottom{margin-top:37px;max-width:490px}
.hero-copy-bottom>p{font-size:14px;line-height:1.85;color:#b6bfc0;max-width:450px}
.hero-actions{margin-top:32px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.hero-art{height:100%;position:relative;min-width:0;z-index:1;pointer-events:none}
.hero-art-frame{position:absolute;top:9%;bottom:6%;left:-6%;right:-10%;border:1px solid rgba(255,255,255,.24);overflow:hidden;box-shadow:0 15px 85px rgba(0,0,0,.24)}
.hero-photo{position:absolute;inset:0;background:linear-gradient(140deg,#112335,#0c1a24 45%,#233c47)}
.hero-photo img{filter:saturate(.65) contrast(1.15) brightness(.63);object-position:50% 50%;transform:scale(1.14) translateY(var(--hero-parallax,0px));transition:filter .7s}
.hero-photo-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,13,16,.56),rgba(6,11,16,.08) 58%),linear-gradient(0deg,rgba(7,11,14,.65),transparent 45%);pointer-events:none}
.hero-art-frame::after{content:"";inset:0;position:absolute;border:15px solid rgba(5,8,10,.04);pointer-events:none}
.hero-art-crosshair{position:absolute;color:var(--lime);font:20px var(--font-head);opacity:.82;z-index:4}
.crosshair-tl{top:26px;left:27px}.crosshair-br{right:30px;bottom:65px}
.hero-art-label{position:absolute;left:33px;right:30px;bottom:31px;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.16em;font-weight:700;z-index:4;color:#e1ebeb}
.live-dot,.tag-dot{height:7px;width:7px;background:var(--lime);border-radius:50%;box-shadow:0 0 14px var(--lime);flex:none}
.hero-art-label-n{margin-left:auto;color:#a3b7b9}
.hero-floating-card{position:absolute;right:-10%;bottom:18%;background:rgba(221,255,119,.95);color:#12180b;display:flex;align-items:center;gap:17px;width:241px;padding:19px 19px 19px 17px;z-index:6;box-shadow:0 15px 40px rgba(0,0,0,.2);animation:floatVertical 7s ease-in-out infinite}
.is-loaded .hero-floating-card.hero-enter{animation:heroEnter 1.05s var(--ease) .9s forwards,floatVertical 7s ease-in-out 2s infinite}
.hero-floating-card strong{font:700 16px/1.2 var(--font-head);letter-spacing:-.04em;display:block}
.hero-floating-card small{font:700 9px/1.6 var(--font-body);letter-spacing:.16em;display:block;margin-top:2px}
.floating-card-icon{font-size:36px;line-height:1}.floating-plus{margin-left:auto;font-size:20px;align-self:flex-start}
.hero-coordinate{position:absolute;right:-8%;top:4%;font-size:9px;letter-spacing:.2em;color:rgba(227,238,240,.54);writing-mode:vertical-rl}
.hero-orbit{position:absolute;display:grid;place-items:center;border-radius:100%;color:var(--lime);pointer-events:none;z-index:3}
.orbit-one{width:85px;height:85px;right:6%;top:15%;border:1px solid rgba(216,255,102,.25);animation:floatVertical 9s ease-in-out infinite}
.orbit-one:before,.orbit-one:after{content:"";position:absolute;inset:12px;border:1px dashed rgba(216,255,102,.17);border-radius:100%}
.orbit-one:after{inset:23px}
.orbit-one span{font-size:23px}
.orbit-two{right:47%;bottom:17%;color:#aee3da;font-size:38px;animation:floatLateral 8s ease-in-out infinite}
@keyframes floatVertical{0%,100%{translate:0 0}50%{translate:0 -18px}}
@keyframes floatLateral{0%,100%{translate:0 0;rotate:0deg}50%{translate:17px -12px;rotate:15deg}}
.hero-bottom{position:absolute;z-index:7;left:50%;bottom:34px;transform:translateX(-50%);width:100%;display:flex;align-items:end;justify-content:space-between}
.scroll-cue{display:flex;align-items:center;gap:17px;font-size:9px;letter-spacing:.18em;color:#d0d8d4;font-weight:700}
.scroll-cue-icon{width:28px;height:45px;border:1px solid rgba(255,255,255,.45);border-radius:24px;display:flex;justify-content:center;padding-top:9px}
.scroll-cue-icon span{display:block;width:2px;height:12px;background:var(--lime);border-radius:2px;animation:scrollBounce 1.8s ease-in-out infinite}
@keyframes scrollBounce{0%,100%{transform:translateY(0);opacity:1}65%{transform:translateY(12px);opacity:.35}}
.hero-bottom-note{font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.48);font-weight:700}
.hero-bottom-note span{color:var(--lime);padding:0 7px}

/* MARQUEE */
.marquee-band{position:relative;overflow:hidden;background:var(--lime);color:#161b0c;border-block:1px solid #c5ed54;padding:16px 0;z-index:8}
.marquee-track{width:max-content;display:flex;animation:marqueeMove 35s linear infinite}
.marquee-track span{white-space:nowrap;display:inline-block;font:700 13px/1 var(--font-head);letter-spacing:.075em;padding-right:30px}
.marquee-track i{font-style:normal;padding:0 24px;font-size:16px;vertical-align:-1px}
@keyframes marqueeMove{to{transform:translateX(-50%)}}
.marquee-band:hover .marquee-track{animation-play-state:paused}

/* INTRO */
.intro{border-bottom:1px solid var(--stroke);padding-top:clamp(120px,13vw,205px);padding-bottom:clamp(125px,13vw,205px)}
.intro-grid{display:grid;grid-template-columns:.33fr 1fr;gap:30px}
.intro-kicker{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.intro-marker{width:110px;height:110px;border:1px solid var(--stroke);border-radius:100%;display:grid;place-items:center;position:relative;color:var(--lime);font-size:40px}
.intro-marker:after{content:"";position:absolute;inset:10px;border:1px dashed rgba(216,255,102,.2);border-radius:50%;animation:rotateRing 35s linear infinite}
.intro-marker span{animation:rotateRing 22s linear infinite}
@keyframes rotateRing{to{rotate:360deg}}
.display-heading,.section-display{font-family:var(--font-head);font-weight:500;letter-spacing:-.078em}
.display-heading{font-size:clamp(54px,7.3vw,112px);line-height:1.04}
.display-heading em,.contact-display em{font-style:normal;color:var(--lime)}
.muted-heading{color:#6f7777}
.intro-below{margin-top:50px;display:flex;justify-content:space-between;gap:50px;align-items:center}
.intro-below p{font-size:clamp(16px,1.7vw,21px);line-height:1.7;color:#9da7a8;max-width:630px}
.intro-below strong{color:var(--ink);font-weight:500}
.orbit-stamp{display:grid;place-items:center;width:110px;min-width:110px;height:110px;color:var(--lime);opacity:.82}
.orbit-stamp svg{width:100%;animation:rotateRing 26s linear infinite}

/* COMMON SECTION HEADER */
.section-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--stroke);padding-bottom:22px}
.section-title-row{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-top:70px;margin-bottom:60px}
.section-display{font-size:clamp(50px,6.4vw,97px);line-height:1.07}
.section-summary{font-size:14px;line-height:1.85;color:#9ca5a5;max-width:270px;flex-shrink:0;margin-bottom:6px}

/* SERVICES */
.services-section{padding-bottom:clamp(125px,12vw,210px)}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.service-card{background:#101318;border:1px solid rgba(255,255,255,.09);min-width:0;overflow:hidden;position:relative;transition:border-color .45s,background .45s,transform .5s var(--ease);will-change:transform}
.service-card:hover{border-color:rgba(216,255,102,.42);background:#141a1e}
.service-image{height:clamp(210px,21vw,300px);position:relative;overflow:hidden;background:#18232b}
.service-image img{object-fit:cover;filter:grayscale(.48) saturate(.65) brightness(.74) contrast(1.17);transition:transform 1.2s var(--ease),filter .8s;transform:scale(1.015)}
.service-card:hover .service-image img{transform:scale(1.105);filter:grayscale(.1) saturate(.88) brightness(.85)}
.service-photo-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,13,14,.15),transparent 35%,rgba(7,11,13,.4));pointer-events:none}
.service-image-index{position:absolute;top:20px;left:22px;font-size:10px;color:#e8f0e9;letter-spacing:.16em;font-weight:700}
.service-visual-symbol{position:absolute;right:20px;bottom:14px;font-size:37px;color:var(--lime);font-family:var(--font-head);line-height:1;opacity:.9;transition:transform .5s var(--ease)}
.service-card:hover .service-visual-symbol{transform:translate(4px,-6px) rotate(9deg)}
.service-details{padding:30px 28px 27px;min-height:301px;display:flex;flex-direction:column;align-items:flex-start}
.service-no{font-size:9px;letter-spacing:.16em;color:var(--lime);font-weight:700;margin-bottom:20px}
.service-details h3{font:600 clamp(25px,2.4vw,34px)/1.13 var(--font-head);letter-spacing:-.06em;min-height:76px}
.service-details p{font-size:12px;line-height:1.8;color:#939c9e;max-width:310px;margin:12px 0 23px}
.service-link{margin-top:auto;width:100%;display:flex;align-items:center;justify-content:space-between;padding-top:17px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;font-weight:700;color:#cbd0cc;transition:color .3s}
.service-link span:last-child{font-size:19px;transition:transform .4s var(--ease)}
.service-card:hover .service-link{color:var(--lime)}
.service-card:hover .service-link span:last-child{transform:translate(5px,-5px)}

/* APPROACH */
.approach-section{background:#101317;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.approach-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(45px,7vw,115px);align-items:center;padding-top:90px}
.approach-visual-wrap{min-width:0;align-self:stretch;min-height:680px}
.approach-visual{position:relative;height:100%;min-height:640px;background:radial-gradient(circle at 36% 59%,rgba(125,181,87,.16),transparent 37%),linear-gradient(140deg,#202e2c,#111d21 52%,#182527);overflow:hidden;border:1px solid #334137}
.approach-grid{position:absolute;inset:0;opacity:.27;background-image:linear-gradient(90deg,rgba(188,224,186,.2) 1px,transparent 1px),linear-gradient(rgba(188,224,186,.2) 1px,transparent 1px);background-size:54px 54px;transform:perspective(600px) rotateX(20deg) scale(1.2)}
.approach-visual:before{content:"";position:absolute;width:95%;aspect-ratio:1;left:9%;top:2%;border-radius:100%;border:1px solid rgba(216,255,102,.28);box-shadow:0 0 90px rgba(175,218,112,.08),inset 0 0 90px rgba(175,218,112,.04);animation:floatVertical 10s ease-in-out infinite}
.approach-radar{position:absolute;border:1px solid rgba(216,255,102,.16);border-radius:100%;aspect-ratio:1;left:12%;top:9%}
.radar-a{width:75%;animation:rotateRing 45s linear infinite;border-style:dashed}
.radar-b{width:52%;left:24%;top:22%}
.radar-c{width:31%;left:35%;top:34%;border-color:rgba(216,255,102,.25)}
.approach-visual-small{position:absolute;left:35px;top:32px;font-size:10px;letter-spacing:.17em;font-weight:700;color:#c4ddb6}
.approach-visual-word{position:absolute;left:9%;bottom:19%;font:700 clamp(66px,7.6vw,123px)/.87 var(--font-head);letter-spacing:-.095em;color:#e2f4de;z-index:2}
.approach-visual-word span{color:var(--lime)}
.approach-visual-cross{position:absolute;right:44px;bottom:33%;font-size:71px;color:var(--lime);animation:rotateRing 20s linear infinite}
.approach-visual-foot{position:absolute;bottom:30px;left:35px;right:35px;border-top:1px solid rgba(220,247,218,.25);padding-top:17px;color:#a4b8a2;font-size:9px;letter-spacing:.16em;font-weight:700}
.approach-headline{font-size:clamp(47px,5vw,76px)}
.approach-intro{margin:31px 0 42px;font-size:14px;line-height:1.8;color:#a2acae;max-width:460px}
.challenge-list{border-top:1px solid var(--stroke)}
.challenge{border-bottom:1px solid var(--stroke);transition:opacity .4s}
.challenge-trigger{width:100%;background:none;border:0;display:grid;grid-template-columns:40px 1fr 28px;align-items:center;gap:13px;text-align:left;color:#a9b0b3;padding:23px 3px;transition:color .35s}
.challenge-trigger:hover,.challenge.is-active .challenge-trigger{color:#f1f5ee}
.challenge-num{font-size:10px;color:var(--lime);letter-spacing:.05em}
.challenge-label{font:500 clamp(20px,2vw,29px)/1.2 var(--font-head);letter-spacing:-.05em}
.challenge-plus{font:300 26px/1 var(--font-head);text-align:right;transition:transform .45s var(--ease),color .3s}
.challenge.is-active .challenge-plus{transform:rotate(45deg);color:var(--lime)}
.challenge-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .58s var(--ease),opacity .45s}
.challenge.is-active .challenge-panel{grid-template-rows:1fr;opacity:1}
.challenge-panel-inner{min-height:0;overflow:hidden;padding-left:56px}
.challenge-panel-inner p{font-size:13px;line-height:1.8;color:#a3acac;max-width:440px;margin:0 0 20px}
.challenge-tag{display:inline-flex;gap:16px;align-items:center;font-size:9px;letter-spacing:.12em;font-weight:700;color:var(--lime);padding-bottom:28px}
.challenge-tag span{font-size:16px}

/* WORK / PORTFOLIO */
.work-section{background:#090b0e;position:relative;padding-top:clamp(115px,12vw,180px)}
.work-heading .section-title-row{margin-bottom:20px}
.work-disclaimer{color:#788384;font-size:9px;letter-spacing:.17em;font-weight:700;margin-bottom:62px}
.work-journey{height:300vh;position:relative;background:radial-gradient(ellipse at 90% 30%,rgba(37,63,66,.17),transparent 48%)}
.work-stage{position:sticky;top:83px;height:calc(100svh - 83px);min-height:650px;display:grid;grid-template-columns:.83fr 1.17fr;gap:clamp(35px,6.8vw,105px);align-items:center;padding-block:26px}
.work-stage-copy{position:relative;height:min(650px,100%);display:flex;flex-direction:column;min-width:0}
.work-stage-mini{font-size:9px;letter-spacing:.17em;font-weight:700;color:#8e9899;display:flex;align-items:center;justify-content:space-between;gap:15px}
.cross-mini{font-size:19px;color:var(--lime)}
.work-stage-number{font:400 clamp(100px,13vw,200px)/1 var(--font-head);letter-spacing:-.12em;color:var(--lime);margin:12px 0 auto;display:flex;align-items:start}
.work-stage-total{font:500 14px var(--font-head);color:#879092;letter-spacing:0;margin:22px 0 0 16px}
.project-copies{position:relative;height:225px;flex:none;overflow:hidden}
.project-copy{position:absolute;inset:0;opacity:0;transform:translateY(35px);pointer-events:none;transition:opacity .65s,transform .8s var(--ease)}
.project-copy.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.project-tag{font-size:10px;letter-spacing:.14em;color:#b3bfbd;font-weight:700;display:flex;align-items:center;gap:12px}
.project-tag .tag-dot{width:6px;height:6px}
.project-copy h3{font:600 clamp(58px,6vw,94px)/1.14 var(--font-head);letter-spacing:-.09em;margin:12px 0 10px}
.project-copy h3 span{color:var(--lime)}
.project-copy p{font-size:13px;line-height:1.75;max-width:350px;color:#9da7a8}
.project-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.project-chips span{padding:6px 9px;border:1px solid #333a3b;font-size:9px;letter-spacing:.1em;font-weight:700;color:#8f9b98}
.work-stage-controls{display:flex;align-items:center;justify-content:space-between;padding-top:27px;border-top:1px solid var(--stroke);font-size:9px;letter-spacing:.15em;font-weight:700;color:#788585;margin-top:34px}
.work-project-jumps{display:flex;align-items:center;gap:10px}
.work-project-jumps button{width:28px;height:20px;background:transparent;border:0;padding:0;display:flex;align-items:center;justify-content:center}
.work-project-jumps button::after{content:"";height:2px;width:28px;background:#4a5554;transition:background .3s,transform .3s}
.work-project-jumps button.is-active::after,.work-project-jumps button:hover::after{background:var(--lime);transform:scaleY(1.8)}
.work-stage-visual{position:relative;height:min(690px,100%);min-height:450px;overflow:hidden;background:#19232b;border:1px solid #313d40;isolation:isolate}
.project-image{position:absolute;inset:0;opacity:0;transform:scale(1.12) translateY(7%);clip-path:inset(10% 0 0 0);transition:opacity .9s var(--ease-snappy),transform 1.3s var(--ease),clip-path 1.2s var(--ease);z-index:1}
.project-image.is-active{opacity:1;transform:scale(1) translateY(0);clip-path:inset(0 0 0 0);z-index:2}
.project-image img{filter:grayscale(.25) saturate(.75) brightness(.75) contrast(1.13);transform:scale(1.035);transition:transform 1.5s var(--ease)}
.work-stage-visual:hover .project-image.is-active img{transform:scale(1.12)}
.project-image-tint{position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,10,11,.7),transparent 48%),linear-gradient(90deg,rgba(5,11,15,.15),transparent)}
.work-image-overlay{position:absolute;left:29px;right:29px;bottom:26px;z-index:5;display:flex;justify-content:space-between;align-items:end;font-size:10px;letter-spacing:.17em;font-weight:700;text-shadow:0 2px 10px #000}
.work-image-overlay span:last-child{font-size:26px;letter-spacing:0}
.work-bracket{position:absolute;z-index:5;width:39px;height:39px;pointer-events:none}
.work-bracket-tl{top:22px;left:22px;border-top:1px solid var(--lime);border-left:1px solid var(--lime)}
.work-bracket-br{bottom:20px;right:20px;border-bottom:1px solid var(--lime);border-right:1px solid var(--lime)}

/* PROCESS */
.process-section{background:#101317;border-block:1px solid var(--stroke);padding-top:clamp(125px,13vw,200px)}
.process-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(60px,8vw,150px);padding-top:85px}
.process-left>.section-display{font-size:clamp(55px,6vw,92px)}
.process-left>p{font-size:14px;line-height:1.85;color:#a6b0b0;max-width:370px;margin-top:35px}
.process-orbit{margin-top:95px;position:relative;width:min(390px,90%);aspect-ratio:1;display:grid;place-items:center;color:var(--lime)}
.process-ring{border:1px dashed rgba(216,255,102,.32);position:absolute;border-radius:100%;inset:0;animation:rotateRing 50s linear infinite}
.ring-inner{inset:40px;border-color:rgba(216,255,102,.16);border-style:solid;animation-direction:reverse}
.process-orbit::before,.process-orbit::after{content:"";position:absolute;width:1px;height:100%;background:linear-gradient(transparent,rgba(216,255,102,.17),transparent)}
.process-orbit::after{rotate:90deg}
.process-orbit-center{width:165px;height:165px;border-radius:100%;background:radial-gradient(circle,#233028,#171d1b);display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(216,255,102,.34);z-index:2}
.process-orbit-center>span{font:500 80px/.95 var(--font-head);letter-spacing:-.12em;padding-right:10px}
.process-orbit-center small{font-size:9px;letter-spacing:.2em;color:#b2cab1;font-weight:700;margin-top:11px}
.process-orbit-north,.process-orbit-south{position:absolute;color:var(--lime);z-index:3}
.process-orbit-north{top:-12px;font-size:24px}.process-orbit-south{bottom:-8px;font-size:24px}
.process-list{border-top:1px solid var(--stroke)}
.process-step{display:grid;grid-template-columns:88px 1fr 26px;gap:23px;padding:32px 0 39px;border-bottom:1px solid var(--stroke);color:#5c6669;transition:color .55s,opacity .55s;opacity:.58}
.process-step.is-active{color:var(--ink);opacity:1}
.process-number{font:500 clamp(34px,4.3vw,62px)/.95 var(--font-head);letter-spacing:-.075em;transform:translateY(25px);opacity:.4;transition:transform .85s var(--ease),opacity .6s,color .6s}
.process-step.is-active .process-number{transform:translateY(0);opacity:1;color:var(--lime)}
.process-label{font-size:9px;letter-spacing:.14em;font-weight:700;color:#7e8a89;transition:color .5s}
.process-step.is-active .process-label{color:var(--lime)}
.process-step h3{font:500 clamp(33px,3.5vw,51px)/1.13 var(--font-head);letter-spacing:-.068em;margin:8px 0 12px}
.process-step p{font-size:12px;line-height:1.75;max-width:400px;color:#8c9696;transition:color .45s}
.process-step.is-active p{color:#aeb6b5}
.process-arrow{font-size:22px;opacity:0;transform:translate(-9px,9px);transition:opacity .45s,transform .55s var(--ease)}
.process-step.is-active .process-arrow{opacity:1;transform:translate(0,0);color:var(--lime)}

/* ABOUT */
.about-section{padding-top:clamp(120px,12vw,185px);padding-bottom:clamp(120px,12vw,185px)}
.about-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,8vw,135px);align-items:center}
.about-media{position:relative;min-height:560px;height:clamp(560px,49vw,720px);overflow:hidden;background:#15252b}
.about-media img{filter:grayscale(.52) saturate(.5) brightness(.65);transition:transform 1.4s var(--ease),filter 1s}
.about-media:hover img{transform:scale(1.075);filter:grayscale(.15) saturate(.7) brightness(.8)}
.about-media-overlay{position:absolute;inset:auto 0 0;padding:35px 30px;display:flex;justify-content:space-between;gap:20px;align-items:end;background:linear-gradient(transparent,rgba(6,13,17,.9));font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--lime)}
.about-text>.section-display{font-size:clamp(53px,5.5vw,83px);margin-top:35px;margin-bottom:36px}
.about-text p{color:#9ba5a5;font-size:14px;line-height:1.9;max-width:470px;margin-bottom:19px}
.about-text .text-link{margin-top:17px;color:var(--ink)}

/* CONTACT */
.contact-section{position:relative;background:var(--lime);color:#10160d;padding:clamp(110px,12vw,180px) 0;overflow:hidden;isolation:isolate}
.contact-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(15,30,10,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(15,30,10,.05) 1px,transparent 1px);background-size:65px 65px;z-index:-1}
.contact-glow{position:absolute;width:800px;height:800px;left:-230px;top:-270px;background:radial-gradient(circle,#f1ffba 0,transparent 70%);opacity:.64;z-index:-1}
.contact-layout{display:grid;grid-template-columns:1fr .84fr;gap:clamp(50px,7vw,118px);align-items:start}
.contact-copy .section-index{color:#364c1a}
.contact-display{font:600 clamp(75px,8vw,126px)/.96 var(--font-head);letter-spacing:-.09em;margin:45px 0 30px;white-space:nowrap}
.contact-display em{color:#10160d;text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:10px}
.contact-copy>p{font-size:15px;line-height:1.85;color:#304323;max-width:380px}
.contact-star{font-size:100px;line-height:1;animation:rotateRing 26s linear infinite;transform-origin:50% 50%;width:max-content;margin-top:65px;color:#273721}
.contact-form-wrap{background:rgba(245,255,204,.55);border:1px solid rgba(13,29,13,.2);padding:34px;backdrop-filter:blur(10px)}
.form-header{font:700 11px var(--font-body);letter-spacing:.15em;border-bottom:1px solid rgba(18,36,15,.25);display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;margin-bottom:28px}
.form-header span:last-child{font-size:27px;font-family:var(--font-head);letter-spacing:0}
#contactForm label{font-size:9px;letter-spacing:.12em;font-weight:700;display:flex;flex-direction:column;gap:12px;margin-bottom:23px}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#contactForm input,#contactForm select,#contactForm textarea{width:100%;min-width:0;background:rgba(255,255,255,.37);border:1px solid rgba(9,21,8,.22);padding:14px 15px;border-radius:0;color:#10160d;outline:none;font-size:13px;letter-spacing:0;transition:background .3s,border-color .3s}
#contactForm input::placeholder,#contactForm textarea::placeholder{color:#6b7e53}
#contactForm input:focus,#contactForm select:focus,#contactForm textarea:focus{background:rgba(255,255,255,.7);border-color:#1a3911}
#contactForm textarea{resize:vertical;min-height:105px}
#contactForm select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpath d='M1 1L6.5 6.5L12 1' fill='none' stroke='%2311180e' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 17px center}
.form-status{font-size:11px;color:#465833;line-height:1.7;margin-top:14px}
.form-status.is-error{color:#9a2a16;font-weight:600}
.form-status.is-success{color:#1e5c28;font-weight:600}

/* FOOTER */
.site-footer{padding:65px 0 30px;background:#080a0c}
.footer-top{display:flex;justify-content:space-between;align-items:start;gap:30px;padding-bottom:86px}
.footer-brand .brand-mark{width:51px;height:51px}
.footer-brand .brand-name{font-size:28px}
.footer-brand .brand-lk{font-size:16px}
.footer-top>p{font:500 18px/1.45 var(--font-head);letter-spacing:-.04em;color:#c9d0cb}
.back-top{font-size:10px;letter-spacing:.15em;font-weight:700;color:var(--lime);white-space:nowrap;display:flex;gap:15px;align-items:center}
.back-top span{font-size:20px;transition:transform .35s}
.back-top:hover span{transform:translateY(-6px)}
.footer-bottom{display:flex;justify-content:space-between;gap:22px;align-items:center;border-top:1px solid var(--stroke);padding:24px 0 0;font-size:9px;letter-spacing:.13em;font-weight:700;color:#818b88}
.footer-sparkle{color:var(--lime);padding-left:6px}
.footer-links{display:flex;gap:25px}
.footer-links a{transition:color .3s}
.footer-links a:hover{color:var(--lime)}
.photo-note{margin-top:27px;font-size:10px;color:#4d5655;line-height:1.7;max-width:600px}

/* RESPONSIVE — MEDIUM */
@media(max-width:1200px){
  .desktop-nav{gap:22px;margin-right:10px}
  .hero{min-height:760px}
  .hero-title{font-size:clamp(65px,8.1vw,105px)}
  .hero-art-frame{left:-5%;right:-5%}
  .hero-floating-card{right:-4%}
  .service-details{padding:27px 21px 23px}
  .approach-layout{gap:44px}.approach-visual-wrap{min-height:600px}.approach-visual{min-height:600px}
  .work-stage{gap:35px}
  .contact-display{font-size:clamp(66px,7.7vw,110px)}
}
@media(max-width:980px){
  :root{--pad:clamp(20px,4vw,42px)}
  .desktop-nav,.nav-cta{display:none}
  .menu-toggle{display:flex}
  .header-inner{height:72px}
  .mobile-nav{position:fixed;top:72px;left:0;right:0;height:calc(100svh - 72px);padding:28px var(--pad) 65px;display:flex;flex-direction:column;background:#090c0f;visibility:hidden;opacity:0;transform:translateY(-14px);pointer-events:none;transition:opacity .35s,visibility .35s,transform .35s;overflow-y:auto}
  .mobile-nav.open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:auto}
  .mobile-nav a{padding:21px 0;border-bottom:1px solid var(--stroke);font:500 clamp(27px,5vw,45px)/1.3 var(--font-head);letter-spacing:-.055em;display:flex;justify-content:space-between;align-items:center}
  .mobile-nav a span{font:700 11px var(--font-body);color:var(--lime)}
  .hero{height:auto;min-height:830px;max-height:none}
  .hero-inner{grid-template-columns:1fr;min-height:830px;padding-top:164px;padding-bottom:100px;align-items:start}
  .hero-copy{z-index:4;align-self:start;padding-top:0}
  .hero-title{font-size:clamp(79px,10vw,123px)}
  .hero-art{position:absolute;inset:0 0 0 0;pointer-events:none}
  .hero-art-frame{left:40%;right:-8%;top:15%;bottom:9%;opacity:.58}
  .hero-floating-card{right:5%;bottom:15%;opacity:.95}
  .hero-copy-bottom{max-width:440px}
  .hero-photo-shade{background:linear-gradient(90deg,#0a0d10 0%,rgba(10,13,16,.58) 32%,transparent 75%),linear-gradient(0deg,rgba(7,11,14,.65),transparent 45%)}
  .hero-orbit.orbit-two{right:25%}
  .section-title-row{align-items:start}
  .section-display{font-size:clamp(54px,7vw,85px)}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .service-image{height:260px}
  .approach-layout{grid-template-columns:1fr;gap:60px}.approach-visual-wrap{min-height:440px}.approach-visual{min-height:440px}.approach-visual-word{font-size:clamp(74px,11vw,120px)}
  .approach-visual:before{width:70%;left:20%;top:-20%}.approach-radar{top:-9%;left:24%}.radar-b{left:32%;top:1%}.radar-c{left:40%;top:8%}
  .approach-content{max-width:760px}
  .work-stage{top:71px;height:calc(100svh - 71px);grid-template-columns:.85fr 1.15fr;min-height:640px}
  .work-stage-number{font-size:clamp(95px,12vw,145px)}
  .project-copies{height:270px}.project-copy h3{font-size:clamp(53px,7vw,77px)}
  .process-layout{gap:45px}.process-orbit{width:90%}
  .about-layout{gap:45px}.about-media{min-height:490px;height:530px}
  .contact-layout{grid-template-columns:1fr 1fr;gap:35px}.contact-form-wrap{padding:25px}
  .contact-display{font-size:clamp(60px,7.4vw,82px)}
  .footer-bottom{flex-wrap:wrap}
}
@media(max-width:720px){
  :root{--pad:23px}
  html{scroll-padding-top:70px}
  .brand-name{font-size:19px}
  .hero{min-height:810px}
  .hero-inner{min-height:810px;padding-top:142px;padding-bottom:100px}
  .hero-title{font-size:clamp(62px,12.7vw,92px);margin-top:29px;letter-spacing:-.085em}
  .hero-copy-bottom{margin-top:34px;max-width:450px}
  .hero-copy-bottom>p{font-size:13px;max-width:360px}
  .hero-actions{gap:20px;margin-top:26px}
  .hero-art-frame{left:27%;right:-55%;top:30%;bottom:9%;opacity:.44}
  .hero-floating-card{display:none}
  .hero-orbit.orbit-one{right:-4%;top:13%;width:65px;height:65px}
  .hero-orbit.orbit-two{right:15%;bottom:24%}
  .hero-bottom-note{display:none}
  .hero-coordinate{display:none}
  .marquee-band{padding:14px 0}.marquee-track span{font-size:11px}
  .section{padding-block:105px}
  .intro-grid{grid-template-columns:1fr;gap:45px}.intro-kicker{flex-direction:row;align-items:center}
  .intro-marker{width:70px;height:70px;font-size:29px}
  .display-heading{font-size:clamp(48px,9vw,79px)}
  .intro-below{margin-top:30px;gap:15px}.intro-below p{font-size:16px}.orbit-stamp{display:none}
  .section-topline{align-items:flex-start}.side-note{max-width:160px;text-align:right;font-size:8px;line-height:1.8}
  .section-title-row{display:block;margin-top:45px;margin-bottom:42px}
  .section-display{font-size:clamp(48px,9.5vw,76px)}
  .section-summary{max-width:440px;margin-top:23px}
  .services-grid{grid-template-columns:1fr;gap:19px}
  .service-image{height:clamp(250px,70vw,350px)}
  .service-details{min-height:250px;padding:26px}
  .service-details h3{min-height:0;font-size:33px}
  .approach-layout{padding-top:55px;gap:55px}.approach-visual-wrap{min-height:420px}.approach-visual{min-height:420px}
  .approach-visual-word{font-size:clamp(71px,12vw,94px)}
  .approach-headline{font-size:clamp(46px,9.2vw,65px)}
  .challenge-label{font-size:23px}.challenge-trigger{grid-template-columns:28px 1fr 24px;gap:9px}.challenge-panel-inner{padding-left:39px}
  .work-section{padding-top:110px}.work-disclaimer{font-size:8px;line-height:1.7;margin-bottom:30px}
  .work-journey{height:285vh}
  .work-stage{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:18px;top:70px;height:calc(100svh - 70px);min-height:610px;padding-top:14px;padding-bottom:23px}
  .work-stage-copy{height:280px;flex:none}
  .work-stage-mini{font-size:8px}.work-stage-number{font-size:72px;line-height:1;margin:5px 0 0}.work-stage-total{font-size:11px;margin:10px 0 0 12px}
  .project-copies{height:145px;position:absolute;left:0;right:0;top:95px}
  .project-tag{font-size:8px}.project-copy h3{font-size:51px;margin:6px 0 4px}
  .project-copy p{font-size:11px;line-height:1.6;max-width:540px}
  .project-chips{margin-top:9px}.project-chips span{font-size:8px;padding:4px 6px}
  .work-stage-controls{margin-top:auto;padding-top:12px}
  .work-stage-visual{height:100%;min-height:260px}
  .process-layout{grid-template-columns:1fr;gap:50px;padding-top:55px}
  .process-left>p{margin-top:26px}.process-orbit{display:none}
  .process-list{margin-top:0}
  .process-step{grid-template-columns:62px 1fr 20px;gap:14px;padding:28px 0 32px}.process-step h3{font-size:37px}.process-number{font-size:43px}
  .about-layout{grid-template-columns:1fr;gap:48px}.about-media{min-height:0;height:clamp(360px,80vw,540px)}
  .about-text>.section-display{font-size:clamp(49px,9.2vw,73px)}
  .contact-section{padding:95px 0}.contact-layout{grid-template-columns:1fr;gap:53px}
  .contact-display{font-size:clamp(58px,11.4vw,87px);margin:31px 0 23px}
  .contact-star{display:none}.contact-form-wrap{padding:24px}
  .footer-top{flex-direction:column;gap:35px;padding-bottom:52px}.footer-top>p{font-size:17px}
  .footer-bottom{align-items:flex-start;flex-direction:column;gap:15px}.footer-links{margin-top:6px}
}
@media(max-width:430px){
  .hero-title{font-size:clamp(57px,12vw,70px)}
  .hero-inner{padding-top:155px}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:13px}
  .hero-art-frame{left:20%;right:-80%;top:27%}
  .section-display{font-size:clamp(45px,10vw,58px)}
  .display-heading{font-size:clamp(43px,10vw,61px)}
  .approach-visual-word{font-size:72px}
  .challenge-label{font-size:20px}
  .form-pair{grid-template-columns:1fr;gap:0}
  .project-copies{top:96px;height:154px}.work-stage-copy{height:285px}.project-copy h3{font-size:47px}
  .contact-display{font-size:clamp(51px,11.7vw,67px)}
}
@media(max-height:700px) and (min-width:721px){
  .hero{height:auto;min-height:790px}
  .work-stage{min-height:590px}
  .work-stage-number{font-size:105px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-title .title-line-inner,.js .reveal-heading .title-line-inner{transform:translateY(0)!important}
  .hero-enter,.js .reveal,.js .reveal-card{opacity:1!important;transform:none!important}
  .js .media-reveal{clip-path:none!important}
}
/* Subtle scroll-depth scaling for the wide team image */
.about-media img { transform:scale(var(--scroll-scale,1.035)); }


/* ============================================================
   2.0 LAYOUT POLISH: less empty padding, tighter alignment,
   immersive image-led transitions, safe responsive typography.
   ============================================================ */
:root{--shell:1380px;--pad:clamp(22px,4.3vw,70px)}
.section{padding-block:clamp(76px,8.5vw,130px)}
.section-topline{padding-bottom:19px}
.section-title-row{margin-top:clamp(39px,5vw,68px);margin-bottom:clamp(30px,4.2vw,55px)}
.section-display{font-size:clamp(46px,5.8vw,86px);letter-spacing:-.073em}
.section-display .title-line,.display-heading .title-line,.feature-title .title-line{overflow:visible;clip-path:inset(-.08em -.12em -.1em 0);padding-bottom:.12em;margin-bottom:-.1em}
.hero{min-height:730px;max-height:960px}
.hero-inner{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}
.hero-title{font-size:clamp(61px,7vw,111px);letter-spacing:-.085em}
.hero-art-frame{left:-2%;right:-2%}
.hero-floating-card{right:1%}
.hero-copy-bottom{max-width:455px}
.intro{padding-block:clamp(76px,9vw,137px)}
.intro-grid{grid-template-columns:minmax(230px,.35fr) minmax(0,1fr);gap:clamp(24px,4.5vw,70px);align-items:stretch}
.intro-kicker{min-width:0;display:flex;flex-direction:column;gap:30px}
.intro-main{min-width:0;align-self:center}
.display-heading{font-size:clamp(48px,5.8vw,91px);line-height:1.07;letter-spacing:-.075em}
.intro-below{margin-top:clamp(25px,4vw,45px)}
.intro-image-stack{position:relative;flex:1;min-height:350px;max-height:450px;border:1px solid #2b393e;overflow:hidden;background:#142329}
.intro-image-stack>img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) brightness(.68);transition:transform 1.1s var(--ease),filter .8s}
.intro-image-stack:hover>img{transform:scale(1.09);filter:grayscale(.05) brightness(.86)}
.intro-image-stack:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,12,13,.7),transparent 53%);pointer-events:none}
.intro-image-label{position:absolute;left:19px;right:17px;bottom:20px;z-index:2;display:flex;justify-content:space-between;gap:12px;color:#efffe8;font-size:9px;letter-spacing:.1em;font-weight:700}
.intro-image-label span{font-size:20px;color:var(--lime)}
.intro-marker{position:absolute;top:19px;right:18px;z-index:2;width:76px;height:76px;backdrop-filter:blur(10px);background:rgba(9,20,22,.65);border-color:rgba(216,255,102,.42);font-size:31px}
.services-section{padding-bottom:clamp(72px,9vw,135px)}
.services-grid{align-items:stretch;gap:16px}
.service-card{display:flex;flex-direction:column;height:100%}
.service-image{flex:none;height:clamp(210px,20vw,280px)}
.service-details{min-height:286px;flex:1;padding:26px 25px}
.service-details h3{font-size:clamp(25px,2.4vw,33px);min-height:74px}
.service-details p{font-size:12px;max-width:none}
/* New image-driven editorial interlude */
.feature-break{padding:0 0 clamp(80px,9vw,145px);background:#090b0e}
.feature-break-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(22px,4vw,64px);align-items:stretch}
.feature-photo{position:relative;min-height:605px;overflow:hidden;background:#15252c;border:1px solid #293b40}
.feature-photo img{height:100%;width:100%;object-fit:cover;filter:grayscale(.35) saturate(.8) brightness(.69);transition:transform 1.5s var(--ease),filter .9s}
.feature-photo:hover img{transform:scale(1.08);filter:grayscale(0) brightness(.83)}
.feature-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,9,11,.76),transparent 50%);pointer-events:none}
.feature-photo-overlay{position:absolute;left:27px;right:26px;bottom:23px;display:flex;justify-content:space-between;align-items:center;z-index:3;font-size:10px;letter-spacing:.15em;font-weight:700}
.feature-photo-overlay span:last-child{color:var(--lime);font-size:29px}
.feature-photo-scan{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;background:linear-gradient(transparent 48%,rgba(216,255,102,.12) 49%,transparent 50%);background-size:100% 170%;animation:scanPass 9s linear infinite}
@keyframes scanPass{0%{background-position:0 -900px}100%{background-position:0 900px}}
.feature-story{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding-top:12px}
.feature-title{font:600 clamp(53px,6vw,91px)/.95 var(--font-head);letter-spacing:-.086em;margin:35px 0 20px;max-width:100%}
.feature-story>p{max-width:405px;color:#a7b0ae;font-size:14px;line-height:1.85;margin-bottom:31px}
.feature-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:auto}
.feature-mini-card{height:200px;position:relative;overflow:hidden;border:1px solid #2e3d41;background:#16252b}
.feature-mini-card img{height:100%;width:100%;filter:grayscale(.5) brightness(.65);transition:transform 1s var(--ease),filter .8s}
.feature-mini-card:hover img{transform:scale(1.13);filter:grayscale(.1) brightness(.85)}
.feature-mini-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(2,6,8,.83),transparent 75%)}
.feature-mini-card span{position:absolute;z-index:2;bottom:16px;left:16px;right:10px;font-size:9px;letter-spacing:.08em;font-weight:700;color:#edffdb}
.approach-section{padding-block:clamp(75px,9vw,130px)}
.approach-layout{padding-top:clamp(40px,5vw,66px);gap:clamp(32px,5vw,75px)}
.approach-visual-wrap{min-height:550px}
.approach-visual{min-height:550px}
.approach-photo{position:absolute;inset:0;object-fit:cover;opacity:.34;filter:saturate(.6) hue-rotate(14deg) brightness(.75);transform:scale(1.06)}
.approach-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(3,12,13,.32) 42%,rgba(3,13,15,.42));pointer-events:none}
.approach-visual-word,.approach-visual-cross,.approach-visual-foot,.approach-visual-small{z-index:2}
.approach-visual-word{font-size:clamp(55px,6.1vw,94px);bottom:22%}
.approach-visual-word,.approach-visual-small,.approach-visual-foot{position:absolute}
.approach-headline{font-size:clamp(43px,4.65vw,70px)}
.challenge-trigger{padding:19px 2px}
.work-section{padding-top:clamp(75px,9vw,130px)}
.work-disclaimer{margin-bottom:32px}
.work-journey{height:270vh}
.work-stage{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,4vw,60px);min-height:0}
.work-stage-copy{min-height:0;height:min(620px,100%)}
.work-stage-visual{height:min(650px,100%);min-height:0}
.work-stage-number{font-size:clamp(91px,12vw,165px)}
.process-section{padding-block:clamp(78px,9vw,130px)}
.process-layout{padding-top:clamp(42px,5vw,68px);grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,6vw,85px)}
.process-left{min-width:0}
.process-left>.section-display{font-size:clamp(52px,5.3vw,78px)}
.process-left>p{margin-top:26px}
.process-photo{position:relative;width:min(100%,420px);height:235px;margin:37px 0 0;overflow:hidden;border:1px solid #344448;background:#162a2e}
.process-photo img{height:100%;width:100%;object-fit:cover;filter:grayscale(.43) brightness(.67);transition:transform 1.1s var(--ease)}
.process-photo:hover img{transform:scale(1.1)}
.process-photo figcaption{position:absolute;left:16px;right:14px;bottom:15px;display:flex;justify-content:space-between;gap:8px;font-size:8px;font-weight:700;letter-spacing:.07em;color:#eaf2e6;text-shadow:0 1px 6px #000}
.process-orbit{width:230px;margin:30px 0 0 0}
.process-orbit-center{width:114px;height:114px}
.process-orbit-center>span{font-size:59px}.process-orbit-center small{font-size:7px;margin-top:6px}
.process-ring.ring-inner{inset:27px}
.process-step{padding:27px 0 32px;grid-template-columns:70px 1fr 24px;gap:16px}
.process-step h3{font-size:clamp(31px,3.1vw,45px)}
.process-number{font-size:clamp(33px,3.9vw,53px)}
.about-section{padding-block:clamp(77px,9vw,135px)}
.about-layout{grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:clamp(28px,5vw,75px)}
.about-media{height:clamp(450px,41vw,610px);min-height:0}
.about-text{min-width:0}
.about-text>.section-display{font-size:clamp(48px,5vw,72px)}
/* Three visible image cards instead of empty section gaps */
.vision-gallery{padding:0 0 clamp(76px,9vw,132px);background:#090b0e}
.vision-gallery-header{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid var(--stroke);padding-bottom:18px;margin-bottom:25px}
.vision-gallery-header>span:last-child{font-size:9px;letter-spacing:.12em;color:#7f8b88;font-weight:700}
.vision-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.vision-item{height:310px;position:relative;overflow:hidden;border:1px solid #2c3b3f;background:#15262c}
.vision-item img{height:100%;width:100%;filter:grayscale(.55) brightness(.68);transition:transform 1.2s var(--ease),filter .75s}
.vision-item:hover img{transform:scale(1.11);filter:grayscale(.1) brightness(.88)}
.vision-item:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,10,12,.94),transparent 67%);pointer-events:none}
.vision-caption{position:absolute;left:22px;right:18px;bottom:23px;z-index:2;display:flex;flex-direction:column;gap:8px}
.vision-caption span{font-size:9px;letter-spacing:.13em;color:var(--lime);font-weight:700}
.vision-caption strong{font:600 clamp(15px,1.6vw,23px)/1.16 var(--font-head);letter-spacing:-.035em}
.contact-section{padding:clamp(78px,9vw,140px) 0}
.contact-layout{grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:clamp(28px,4vw,68px)}
.contact-copy{min-width:0}.contact-display{font-size:clamp(53px,6.5vw,99px);white-space:normal;letter-spacing:-.085em}
.contact-form-wrap{min-width:0}
.form-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.spam-trap{position:absolute!important;left:-99999px!important;height:0!important;width:0!important;opacity:0!important;pointer-events:none!important}
.footer-top{padding-bottom:58px}
/* Avoid text collisions and unequal cards at intermediate widths */
@media(max-width:1150px){
 .intro-grid{grid-template-columns:minmax(195px,.34fr) minmax(0,1fr);gap:28px}
 .display-heading{font-size:clamp(46px,6vw,76px)}
 .feature-title{font-size:clamp(47px,6vw,72px)}
 .feature-photo{min-height:500px}.feature-mini-card{height:164px}
 .process-orbit{width:190px}.process-orbit-center{width:104px;height:104px}
 .contact-display{font-size:clamp(49px,6.1vw,78px)}
}
@media(max-width:980px){
 .hero-title{font-size:clamp(70px,9.3vw,107px)}
 .hero-art-frame{left:41%;right:-9%}
 .intro-image-stack{min-height:300px}
 .feature-break-grid{grid-template-columns:1fr;gap:30px}
 .feature-photo{min-height:400px;height:450px}.feature-story{display:grid;grid-template-columns:1fr 1fr;column-gap:25px}
 .feature-story>.section-index{grid-column:1/-1}.feature-story>.feature-title{grid-column:1;grid-row:2/4;margin:23px 0 0;font-size:clamp(50px,8vw,79px)}
 .feature-story>p{grid-column:2;grid-row:2;margin:25px 0 15px}
 .feature-mini-grid{grid-column:2;grid-row:3;margin-top:0}
 .feature-mini-card{height:120px}
 .approach-visual-wrap,.approach-visual{min-height:460px}
 .approach-visual-word{font-size:clamp(67px,10vw,94px)}
 .work-stage{min-height:0}
 .process-layout{gap:34px}
 .about-media{height:480px}
 .vision-item{height:255px}
}
@media(max-width:720px){
 :root{--pad:21px}
 .section{padding-block:74px}
 .section-display{font-size:clamp(42px,8.8vw,67px)}
 .hero{min-height:760px}
 .hero-inner{min-height:760px;padding-top:142px}
 .hero-title{font-size:clamp(57px,12.6vw,90px)}
 .hero-art-frame{left:28%;right:-59%}
 .intro{padding-block:74px}
 .intro-grid{grid-template-columns:1fr;gap:30px}
 .intro-kicker{display:grid;grid-template-columns:1fr 1.7fr;align-items:center;gap:15px}
 .intro-kicker>.section-index{align-self:start}
 .intro-image-stack{height:175px;min-height:0;max-height:none;width:100%}
 .intro-marker{width:52px;height:52px;font-size:20px;top:10px;right:10px}
 .intro-image-label{font-size:7px;left:10px;right:10px;bottom:8px}
 .intro-main{align-self:stretch}.display-heading{font-size:clamp(43px,9.5vw,72px)}
 .intro-below{margin-top:24px}
 .services-section{padding-bottom:70px}
 .service-image{height:clamp(215px,62vw,330px)}
 .service-details{min-height:0;padding:24px}
 .service-details h3{min-height:0;font-size:31px}
 .service-details p{margin-bottom:25px}
 .feature-break{padding-bottom:78px}
 .feature-photo{height:360px;min-height:0}
 .feature-story{display:block}
 .feature-story>.feature-title{margin:19px 0 20px;font-size:clamp(51px,10vw,76px)}
 .feature-story>p{margin:0 0 23px}
 .feature-mini-card{height:160px}
 .approach-section{padding-block:75px}
 .approach-layout{padding-top:35px;gap:40px}
 .approach-visual-wrap,.approach-visual{min-height:360px}
 .approach-visual-word{font-size:clamp(65px,12vw,89px)}
 .work-section{padding-top:74px}
 .work-stage{height:calc(100svh - 70px);min-height:0;grid-template-columns:1fr;grid-template-rows:250px minmax(200px,1fr);gap:12px}
 .work-stage-copy{height:250px;min-height:0}
 .work-stage-number{font-size:64px;margin-top:0}
 .project-copies{top:85px;height:143px}
 .project-copy h3{font-size:clamp(41px,11vw,53px)}
 .project-copy p{line-height:1.45}
 .work-stage-visual{height:100%;min-height:200px}
 .work-journey{height:260vh}
 .process-section{padding-block:76px}
 .process-layout{grid-template-columns:1fr;padding-top:39px}
 .process-photo{height:215px;margin-top:27px;width:100%}
 .process-orbit{display:none}
 .process-step{grid-template-columns:52px 1fr 20px;gap:10px;padding:23px 0 25px}
 .process-number{font-size:37px}.process-step h3{font-size:34px}
 .about-section{padding-block:75px}.about-layout{grid-template-columns:1fr;gap:33px}
 .about-media{height:clamp(310px,75vw,460px)}
 .about-text>.section-display{font-size:clamp(43px,9vw,69px);margin-block:20px 25px}
 .vision-gallery{padding-bottom:75px}
 .vision-grid{grid-template-columns:1fr 1fr;gap:12px}
 .vision-item{height:255px}
 .vision-item:last-child{grid-column:1/-1;height:220px}
 .vision-gallery-header>span:last-child{max-width:140px;text-align:right}
 .contact-section{padding:78px 0}
 .contact-layout{grid-template-columns:1fr;gap:34px}
 .contact-display{font-size:clamp(51px,11vw,80px);margin:22px 0}
}
@media(max-width:430px){
 .hero-title{font-size:clamp(50px,12vw,63px)}
 .intro-kicker{grid-template-columns:1fr 1.65fr}
 .intro-image-stack{height:140px}
 .feature-mini-card{height:135px}
 .feature-title{font-size:52px}
 .vision-grid{grid-template-columns:1fr}
 .vision-item,.vision-item:last-child{grid-column:auto;height:245px}
 .work-stage{grid-template-rows:252px minmax(185px,1fr)}
 .project-copy h3{font-size:44px}
 .form-pair{grid-template-columns:1fr}
 .footer-brand .brand-name{font-size:24px}
}
@media(max-height:720px) and (min-width:721px){
 .work-stage{min-height:0;height:calc(100svh - 83px)}
 .work-stage-copy{height:100%}.work-stage-number{font-size:85px}
 .work-stage-visual{height:100%}.project-copies{height:230px}
 .process-orbit{display:none}
}
@media(max-height:690px) and (max-width:720px){
 .work-stage{grid-template-rows:205px minmax(155px,1fr)}
 .work-stage-copy{height:205px}.project-copies{top:68px;height:120px}
 .project-copy h3{font-size:39px;margin:2px 0}
 .project-chips{display:none}.work-stage-controls{margin-top:auto}
 .work-stage-visual{min-height:155px}
}
@media(prefers-reduced-motion:reduce){.feature-photo-scan{animation:none}}

/* Keep image-led sections readable even while their reveals are pending. */
.js .media-reveal{
  clip-path:inset(0 15% 0 0);
  opacity:.78;
  transition:clip-path 1.05s var(--ease),opacity .9s var(--ease),transform 1s var(--ease);
}
.js .media-reveal.is-visible{clip-path:inset(0 0 0 0);opacity:1}
/* Image cards are never completely hidden, including with fast scrolling. */
@media(prefers-reduced-motion:reduce){.js .media-reveal{opacity:1!important;clip-path:none!important}}
/* Keep the portfolio scroll journey expressive without creating a long dead zone. */
.work-journey{height:190vh}
@media(max-width:720px){.work-journey{height:205vh}}