:root{--ink:#0a0b0c;--panel:#111214;--panel2:#17191a;--text:#f4f3ee;--muted:#aaa9a4;--line:rgba(255,255,255,.19);--edge:clamp(22px,5.7vw,96px);--sans:'DM Sans',Arial,sans-serif;--display:'Space Grotesk',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--text);font:400 15px/1.6 var(--sans);overflow-x:hidden}::selection{background:#d4d1c9;color:#000}a{color:inherit;text-decoration:none}button{font:inherit}img{max-width:100%;display:block}.wrap{width:min(100% - (var(--edge) * 2),1600px);margin:0 auto}.page-noise{position:fixed;inset:0;pointer-events:none;opacity:.048;z-index:70;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='.64' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.skip-link{position:absolute;left:18px;top:-60px;z-index:100;padding:10px 18px;background:#fff;color:#000}.skip-link:focus{top:18px}a:focus-visible,button:focus-visible{outline:2px solid #e9f0e8;outline-offset:5px}.site-header{height:92px;position:absolute;top:0;left:0;right:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.2);transition:background .2s}.site-header.scrolled{position:fixed;height:77px;background:rgba(6,7,8,.91);backdrop-filter:blur(18px)}.nav-shell{height:100%;display:flex;justify-content:space-between;align-items:center;gap:30px}.logo{display:inline-flex;align-items:center;gap:12px;font-family:var(--display)}.logo-mark{width:46px;height:46px;border:1px solid #e4e4df;display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:-3px;font-size:22px;padding-right:5px}.logo-dot{color:#b9b8b2}.logo-name{font-size:12px;font-weight:700;line-height:1.05;letter-spacing:.08em}.desktop-nav{display:flex;gap:clamp(25px,3vw,55px);margin-left:auto}.desktop-nav a,.nav-status{font-size:11px;letter-spacing:.16em;font-weight:700}.desktop-nav a{color:#dddcd8;transition:color .2s}.desktop-nav a:hover{color:white}.nav-right{display:flex;align-items:center;gap:30px}.nav-status{display:flex;align-items:center;gap:10px;color:#d8d8d4;white-space:nowrap}.status-dot{height:7px;width:7px;background:#b5d8b2;border-radius:50%;box-shadow:0 0 13px #95c997}.menu-toggle{display:none}.mobile-nav[hidden]{display:none!important}.hero{position:relative;min-height:min(920px,100svh);height:max(720px,100svh);display:flex;align-items:center;isolation:isolate;overflow:hidden}.hero-art{position:absolute;inset:0;z-index:-3;background:url('assets/tunnel-hero.webp') center 52%/cover no-repeat;transform:scale(1.04);filter:grayscale(1) brightness(.82)}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(4,5,6,.88) 0%,rgba(4,5,6,.72) 36%,rgba(4,5,6,.25) 70%,rgba(4,5,6,.12) 100%),linear-gradient(0deg,#08090a 0%,transparent 30%,rgba(0,0,0,.23) 100%)}.hero-rail{position:absolute;right:15px;top:43%;font-size:10px;letter-spacing:.29em;color:#b9b9b5;writing-mode:vertical-rl}.hero-rail span{margin:10px 0}.hero-content{position:relative;padding-top:85px;padding-bottom:34px}.hero-topline{display:flex;align-items:center;gap:14px;color:#ecece6;font-size:11px;letter-spacing:.23em;font-weight:700;margin-bottom:26px}.small-line{width:39px;height:1px;background:#e8e7e1}.tiny-plus{color:#a4aaa5;margin:0 4px}.hero h1,h2,h3,p{margin-top:0}.hero h1{font:700 clamp(58px,6.8vw,126px)/.98 var(--display);letter-spacing:-.083em;max-width:1200px;margin:0 0 30px;text-wrap:balance}.hero h1 span,.hero h1 em{display:block;white-space:nowrap}.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.4px #f3f2ea;letter-spacing:-.078em}.hero-desc{font-size:clamp(15px,1.1vw,18px);line-height:1.65;color:#d3d1cd;max-width:575px;margin:0 0 33px}.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.button{min-height:54px;display:inline-flex;align-items:center;gap:28px;padding:15px 24px;font-size:11px;letter-spacing:.12em;font-weight:700;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px)}.button-solid{background:#e9e8e2;color:#101113}.button-solid:hover{background:white}.button-ghost{border:1px solid rgba(255,255,255,.53);color:white}.button-ghost:hover{background:#ffffff12}.play-icon{display:grid;place-items:center;border:1px solid #ffffff85;border-radius:50%;width:25px;height:25px;font-size:8px}.hero-footer{position:absolute;left:0;right:0;bottom:32px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.23em;color:#cdccc8;font-weight:700}.scroll-cue{display:flex;align-items:center;gap:15px}.cue-line{height:1px;width:46px;background:#c4c4bf}.hero-index span{color:#777}.section-pad{padding:120px 0}.section-kicker{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line);font:700 11px/1.4 var(--sans);letter-spacing:.17em;color:#a8a8a2;margin-bottom:60px}.section-kicker span:first-child{color:#f5f4ec}h2{font:700 clamp(47px,5.6vw,100px)/1.02 var(--display);letter-spacing:-.075em;margin:0;color:#e9e8e2}h2 .h2-outline{color:transparent;-webkit-text-stroke:1px #c9c9c3}.section-heading-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:45px}.section-heading-row h2{max-width:850px}.section-heading-row p,.toolkit-header>p{max-width:340px;font-size:16px;color:#a9a8a3;line-height:1.75;margin:0 0 9px}.filter-bar{display:flex;gap:11px;margin-bottom:28px;flex-wrap:wrap}.filter{background:none;color:#a2a19d;border:1px solid #4c4b49;padding:10px 18px;cursor:pointer;font-weight:700;font-size:10px;letter-spacing:.15em;transition:.2s}.filter:hover,.filter.active{background:#e5e4de;color:#101113;border-color:#e5e4de}.filter span{margin-left:14px;font-size:10px}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 27px}.project-card{min-width:0}.project-card:first-child{grid-column:span 2}.project-link{display:block}.project-media{aspect-ratio:16/9;position:relative;overflow:hidden;background:linear-gradient(145deg,#222629,#0a0b0c 65%);border:1px solid #333;isolation:isolate}.project-featured .project-media{aspect-ratio:21/9}.project-thumb{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.8);transition:transform .6s,filter .6s}.project-link:hover .project-thumb{transform:scale(1.045);filter:grayscale(.7) brightness(.95)}.project-media-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 45%,rgba(0,0,0,.6));pointer-events:none}.project-number{position:absolute;top:24px;left:26px;font-size:11px;color:#fff;letter-spacing:.18em;font-weight:700}.project-play{position:absolute;right:30px;top:21px;display:grid;place-items:center;color:#08090a;background:#e9e8e1;width:49px;height:49px;font-size:25px;transition:transform .25s}.project-link:hover .project-play{transform:rotate(45deg)}.project-view{position:absolute;bottom:26px;left:26px;font-size:10px;letter-spacing:.18em;font-weight:700}.project-meta{display:flex;justify-content:space-between;gap:15px;margin-top:20px}.project-overline{color:#a4a49e;text-transform:uppercase;letter-spacing:.1em;font-size:10px;font-weight:700}.project-overline span{padding:0 6px;color:#686864}.project-meta h3{font:600 clamp(23px,2.4vw,36px)/1.1 var(--display);letter-spacing:-.055em;margin:9px 0}.project-meta p{color:#aaa9a4;margin:0;font-size:14px}.project-meta-arrow{font-size:25px}.project-description{border-top:1px solid #2f3131;margin-top:20px;padding-top:14px;color:#858682;max-width:620px;font-size:13px;line-height:1.65}.section-footnote{border-top:1px solid var(--line);margin-top:62px;padding-top:24px;display:flex;justify-content:space-between;gap:25px;color:#9b9a96;font-size:10px;letter-spacing:.14em;font-weight:700}.section-footnote a{color:#e3e2dc}.section-footnote a span{margin-left:16px}.commercial-section{background:#e5e4dc;color:#121314}.commercial-section .section-kicker{border-color:#b8b8b1;color:#525452}.commercial-section .section-kicker span:first-child{color:#171818}.commercial-section h2{color:#151616}.commercial-section h2 .h2-outline{color:transparent;-webkit-text-stroke:1px #444743}.commercial-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.commercial-grid>div:first-child>p{font-size:17px;line-height:1.8;max-width:540px;color:#555957;margin:30px 0}.quiet-note{font-size:10px;letter-spacing:.15em;font-weight:700;color:#757a74}.brand-panel{border-top:1px solid #454845;margin-top:12px}.brand-line{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid #777970;padding:25px 0;font:700 clamp(23px,2.65vw,42px)/1.1 var(--display);letter-spacing:-.055em}.brand-arrow{font:400 24px var(--sans)}.brand-panel-foot{font-size:10px;font-weight:700;letter-spacing:.15em;text-align:right;margin-top:18px;color:#666b64}.toolkit-section{background:#131516}.toolkit-header{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:45px}.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.tool-card{border:1px solid #343636;padding:25px 23px 28px;min-height:290px;transition:background .25s,transform .25s}.tool-card:hover{background:#1f2223;transform:translateY(-4px)}.tool-card-top{display:flex;justify-content:space-between;align-items:center;color:#9b9d98;font-size:11px;font-weight:700;letter-spacing:.1em;margin-bottom:50px}.tool-icon{font-size:24px;color:#ecece4}.tool-card h3{font:700 14px var(--display);letter-spacing:.08em;line-height:1.3;margin:0 0 23px}.tool-card ul{list-style:none;padding:0;margin:0;color:#aaa9a4;font-size:13px}.tool-card li{margin-bottom:8px}.tool-card li::before{content:'/';color:#777;margin-right:9px}.toolkit-callout{display:flex;gap:25px;align-items:start;margin-top:42px;padding:32px 35px;border-left:2px solid #d2d2ca;background:#1d2021}.sparkle{font-size:35px;line-height:1}.eyebrow{font-weight:700;font-size:11px;letter-spacing:.19em;color:#d2d2ca}.toolkit-callout p{max-width:850px;color:#a9aaa5;margin:10px 0 0;font-size:16px}.about-section{background:#090a0b}.about-grid{display:grid;grid-template-columns:43% 1fr;gap:8%;align-items:center}.about-image{min-height:630px;background:url('assets/portrait.webp') 50% 30%/cover;position:relative;border:1px solid #3b3e3f;filter:grayscale(1)}.about-image::before{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#020304cc,transparent 60%)}.about-image-overlay{position:absolute;bottom:24px;left:25px;right:25px;display:flex;justify-content:space-between;font-weight:700;font-size:10px;letter-spacing:.13em}.about-copy h2{margin:14px 0 26px}.about-copy h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #d7d7ce}.about-copy>p{font-size:16px;line-height:1.85;max-width:620px;color:#b0afa9}.about-marks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid #444744;margin-top:34px;padding-top:24px}.about-marks div{display:flex;flex-direction:column;gap:9px}.about-marks strong{font-size:10px;letter-spacing:.1em}.about-marks span{font-size:12px;line-height:1.45;color:#898c87}.contact-section{padding:115px 0 65px;background:#dcdcd4;color:#0a0c0d}.contact-section .section-kicker{border-color:#989c95;color:#59605b}.contact-section .section-kicker span:first-child{color:#1b1c1b}.contact-section h2{font-size:clamp(57px,8vw,150px);color:#121413;margin-bottom:27px}.contact-section h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #202523}.contact-section p{color:#50554f;max-width:535px;font-size:17px;margin-bottom:40px}.contact-email{display:inline-flex;gap:32px;align-items:center;border-bottom:2px solid #212622;padding-bottom:12px;font:700 clamp(20px,3.2vw,49px)/1.2 var(--display);letter-spacing:-.04em}.contact-email span{font-size:26px;transition:transform .25s}.contact-email:hover span{transform:translate(5px,-5px)}.contact-bottom{display:flex;justify-content:space-between;gap:25px;margin-top:110px;font-size:10px;font-weight:700;letter-spacing:.15em}.contact-links{display:flex;gap:25px;flex-wrap:wrap}footer{background:#090a0b;color:#8f918c}.footer-inner{display:flex;justify-content:space-between;gap:22px;padding:30px 0;font-size:10px;letter-spacing:.11em;font-weight:700}
@media(max-width:1100px){.nav-status{display:none}.hero h1{font-size:clamp(58px,7.5vw,94px)}.hero-rail{display:none}.tool-grid{grid-template-columns:repeat(2,1fr)}.tool-card{min-height:260px}.commercial-grid{gap:5vw}.about-grid{gap:5%}.about-image{min-height:550px}}
@media(max-width:740px){:root{--edge:24px}.site-header{height:76px}.site-header.scrolled{height:70px}.desktop-nav{display:none}.menu-toggle{display:flex;width:43px;height:42px;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:1px solid #ffffff77;background:#ffffff09;cursor:pointer}.menu-toggle span{width:18px;height:1px;background:#fff}.mobile-nav{display:flex;position:absolute;left:0;right:0;top:100%;background:#131516;flex-direction:column;padding:24px var(--edge) 30px;gap:24px;box-shadow:0 18px 30px #0009}.mobile-nav a{font-size:14px;font-weight:700;letter-spacing:.1em}.logo-mark{height:42px;width:42px}.hero{min-height:690px;height:96svh;max-height:980px}.hero-art{background-position:63% 50%}.hero-shade{background:linear-gradient(90deg,#070809ed,#070809b0 65%,#07080966),linear-gradient(0deg,#08090a,transparent 40%)}.hero-content{padding-top:92px}.hero-topline{font-size:9px;letter-spacing:.15em;line-height:1.7}.hero h1{font-size:clamp(39px,9.1vw,72px);line-height:1.03;letter-spacing:-.073em}.hero h1 span,.hero h1 em{white-space:normal}.hero-desc{font-size:14px;max-width:470px}.hero-actions{align-items:stretch}.button{min-height:50px;font-size:10px;padding:12px 17px}.hero-footer{bottom:22px;font-size:9px}.hero-index{display:none}.section-pad{padding:78px 0}.section-kicker{font-size:9px;letter-spacing:.1em;margin-bottom:35px}.section-kicker span:last-child{text-align:right}.section-heading-row,.toolkit-header{display:block}.section-heading-row p,.toolkit-header>p{margin:22px 0 0;max-width:470px}.section-heading-row{margin-bottom:30px}h2{font-size:clamp(39px,8.9vw,72px)}.project-grid{grid-template-columns:1fr;gap:32px}.project-card:first-child{grid-column:span 1}.project-featured .project-media{aspect-ratio:16/9}.project-media .project-number{top:17px;left:17px;font-size:9px}.project-play{top:16px;right:16px;width:40px;height:40px}.project-view{left:17px;bottom:17px;font-size:9px}.project-meta h3{font-size:26px}.section-footnote{flex-direction:column;gap:14px;margin-top:40px}.commercial-grid{grid-template-columns:1fr;gap:34px}.brand-line{font-size:28px}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-card{min-height:220px;padding:19px 15px}.tool-card-top{margin-bottom:32px}.tool-card h3{font-size:12px}.tool-card li{font-size:12px}.toolkit-callout{padding:20px;gap:14px}.toolkit-callout p{font-size:14px}.about-grid{grid-template-columns:1fr;gap:38px}.about-image{min-height:340px}.about-copy h2{font-size:clamp(47px,10vw,70px)}.about-copy>p{font-size:15px}.contact-section{padding:76px 0 45px}.contact-section h2{font-size:clamp(48px,10.7vw,80px)}.contact-section p{font-size:15px}.contact-email{font-size:clamp(18px,5vw,31px)}.contact-bottom{flex-direction:column;margin-top:75px}.footer-inner{flex-direction:column;gap:13px}.footer-inner span:nth-child(2){display:none}}
@media(max-width:420px){:root{--edge:19px}.hero h1{font-size:38px}.hero-topline{font-size:8px}.hero-desc{font-size:13px}.hero-actions{flex-direction:column;max-width:330px}.button{justify-content:space-between}.filter{padding:10px 12px;font-size:9px}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:0}.tool-card-top{margin-bottom:22px}.about-marks{grid-template-columns:1fr;gap:18px}.about-image-overlay{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Vertical 9:16 short-form card: full-width row, media left, text right */
.project-vertical{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);column-gap:clamp(28px,4vw,64px);align-items:end}
.project-vertical .project-media{aspect-ratio:9/16;max-height:640px;width:100%}
.project-vertical .project-info{max-width:620px;padding-bottom:4px}
.project-vertical .project-meta{margin-top:0}
.project-video{background:#0a0b0c}
@media(max-width:740px){.project-vertical{grid-template-columns:1fr}.project-vertical .project-media{max-width:360px}.project-vertical .project-meta{margin-top:20px}}

/* Hero portrait: right side, faded into the dark background */
.hero-portrait{position:absolute;z-index:-1;left:max(40%,600px);bottom:16%;width:clamp(220px,18vw,340px);max-height:calc(100% - 140px);aspect-ratio:1166/1600;background:url('assets/hero-portrait.webp') center/cover no-repeat;filter:grayscale(1) brightness(.72) contrast(1.05);-webkit-mask-image:radial-gradient(ellipse 50% 52% at 50% 46%,#000 40%,rgba(0,0,0,.6) 70%,transparent 100%);mask-image:radial-gradient(ellipse 50% 52% at 50% 46%,#000 40%,rgba(0,0,0,.6) 70%,transparent 100%);pointer-events:none}
@media(max-width:1100px){.hero-portrait{left:auto;right:calc(var(--edge) - 20px);width:clamp(280px,34vw,380px);opacity:.8}}
@media(max-width:900px){.hero{height:auto;min-height:100svh;max-height:none;align-items:flex-start}.hero-portrait{left:50%;right:auto;top:64px;bottom:auto;transform:translateX(-50%);width:min(92vw,460px);max-height:none;opacity:1;filter:grayscale(1) brightness(.78) contrast(1.05);-webkit-mask-image:radial-gradient(ellipse 50% 56% at 50% 38%,#000 50%,rgba(0,0,0,.6) 75%,transparent 100%);mask-image:radial-gradient(ellipse 50% 56% at 50% 38%,#000 50%,rgba(0,0,0,.6) 75%,transparent 100%)}.hero-content{padding-top:calc(40px + min(92vw,460px) * 1.02);padding-bottom:96px}}
@media(max-width:740px){.about-image{min-height:420px;background-position:50% 10%}}

/* ===== Behind the Build: four film frames ===== */
.build-section{background:radial-gradient(ellipse 70% 45% at 50% 0%,rgba(255,255,255,.055),transparent 70%),linear-gradient(180deg,#0b0c0d 0%,#070809 100%);border-top:1px solid rgba(255,255,255,.06)}
.build-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,56px) clamp(22px,2.6vw,44px)}
.build-frame{margin:0;border:1px solid rgba(255,255,255,.16);background:#0c0d0e;padding:10px 10px 0}
.frame-bar{display:flex;justify-content:space-between;align-items:center;padding:2px 2px 10px;font:700 9.5px/1 var(--sans);letter-spacing:.24em;color:#8f8f8a}
.frame-bar span:first-child{color:#d9d8d2}
.frame-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#101113}
.frame-media img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
/* corner marks, like a viewfinder */
.frame-media::before,.frame-media::after{content:"";position:absolute;width:14px;height:14px;z-index:2;pointer-events:none;border-color:rgba(255,255,255,.55);border-style:solid}
.frame-media::before{top:10px;left:10px;border-width:1px 0 0 1px}
.frame-media::after{bottom:10px;right:10px;border-width:0 1px 1px 0}
.frame-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px;text-align:center;border:1px dashed rgba(255,255,255,.22);background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px),radial-gradient(ellipse at 50% 40%,#1a1c1e,#0d0e0f 75%)}
.ph-tag{font:700 9px/1 var(--sans);letter-spacing:.3em;color:#0b0c0d;background:#d9d8d2;padding:6px 9px}
.ph-label{font:500 clamp(14px,1.15vw,17px)/1.35 var(--display);letter-spacing:-.01em;color:#e6e5df}
.ph-file{font:400 11px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#7f7f7a}
.build-frame figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:5px;padding:16px 4px 18px}
.frame-num{grid-row:span 2;font:700 11px/1.5 var(--sans);letter-spacing:.18em;color:#7d7d78;padding-top:1px}
.frame-title{font:700 clamp(17px,1.4vw,21px)/1.15 var(--display);letter-spacing:-.02em;color:#f1f0ea}
.frame-cap{font-size:14px;line-height:1.55;color:#a3a29d}
/* frame 04: desktop + phone mockups */
.frame-mockups{display:flex;align-items:flex-end;justify-content:center;gap:4%;padding:7% 7% 0;background:radial-gradient(ellipse at 50% 100%,#1b1d1f,#0d0e0f 70%)}
.mock-desktop{position:relative;flex:0 0 68%;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.28);border-bottom:none;background:#0b0c0d;padding-top:16px}
.mock-chrome{position:absolute;top:0;left:0;right:0;height:16px;display:flex;gap:4px;align-items:center;padding-left:7px;border-bottom:1px solid rgba(255,255,255,.14)}
.mock-chrome i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35)}
.mock-phone{position:relative;flex:0 0 19%;aspect-ratio:9/19;border:1px solid rgba(255,255,255,.28);border-bottom:none;border-radius:12px 12px 0 0;background:#0b0c0d;margin-bottom:0;overflow:hidden}
.mock-desktop .frame-placeholder,.mock-phone .frame-placeholder{border:none;gap:6px;padding:8px}
.mock-desktop .frame-placeholder{top:16px}
.mock-phone .ph-label{font-size:10px}
.mock-phone .ph-tag{font-size:7px;padding:4px 5px;letter-spacing:.18em}
.mock-phone .ph-file{font-size:8px}
.mock-desktop .ph-label{font-size:clamp(11px,.95vw,15px)}
.mock-desktop img,.mock-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.mock-desktop img{top:16px;height:calc(100% - 16px)}
/* fade-in (only when JS is running) */
.js-reveal .build-frame{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 120ms)}
.js-reveal .build-frame.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js-reveal .build-frame{opacity:1;transform:none;transition:none}}
@media(max-width:740px){.build-grid{grid-template-columns:1fr;gap:28px}.frame-cap{font-size:13.5px}.mock-phone .ph-label,.mock-phone .ph-file,.mock-phone .ph-tag{display:none}.mock-phone .frame-placeholder::after{content:"+";font:300 20px/1 var(--display);color:#9a9a95}.js-reveal .build-frame{transition-delay:0ms}}
.build-frame-wide{grid-column:1/-1}
.build-frame-wide .frame-media{aspect-ratio:21/8}
.frame-link{display:block;color:inherit;text-decoration:none}
.frame-link:focus-visible{outline:2px solid #e9e8e2;outline-offset:3px}
.frame-link img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.frame-link:hover img{transform:scale(1.02)}
.frame-visit{margin-left:10px;font:700 10px/1 var(--sans);letter-spacing:.2em;color:#e9e8e2;text-decoration:none;border-bottom:1px solid rgba(233,232,226,.4);padding-bottom:3px;white-space:nowrap}
.frame-visit:hover{border-color:#e9e8e2}
@media(max-width:740px){.build-frame-wide .frame-media{aspect-ratio:16/9}.frame-visit{display:inline-block;margin:10px 0 0}}

/* ===== Website Design: KIWI Audio gallery ===== */
.design-section{background:#08090a;border-top:1px solid rgba(255,255,255,.06)}
.design-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,3.4vw,56px) clamp(22px,2.6vw,44px);align-items:start}
.design-shot{margin:0}
.design-shot-hero{grid-column:1/-1}
.shot-open{display:block;width:100%;padding:0;margin:0;border:1px solid rgba(255,255,255,.14);background:#0d0e0f;cursor:zoom-in;position:relative;overflow:hidden;transition:border-color .4s ease}
.shot-open img{display:block;width:100%;height:auto;transition:filter .5s ease}
.shot-open:hover{border-color:rgba(255,255,255,.34)}
.shot-open:hover img{filter:brightness(1.06)}
.shot-open:focus-visible{outline:2px solid #e9e8e2;outline-offset:4px}
.shot-open::after{content:"VIEW FULL SIZE ↗";position:absolute;right:14px;bottom:14px;font:700 9.5px/1 var(--sans);letter-spacing:.22em;color:#0b0c0d;background:#e9e8e2;padding:8px 10px;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.shot-open:hover::after,.shot-open:focus-visible::after{opacity:1;transform:none}
.shot-placeholder{position:relative;aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:20px;text-align:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 2px,transparent 2px 14px),radial-gradient(ellipse at 50% 40%,#1a1c1e,#0d0e0f 75%)}
.design-shot-hero .shot-placeholder{aspect-ratio:16/9}
.shot-placeholder ~ *{display:none}
.design-shot figcaption{display:flex;gap:14px;align-items:baseline;padding:15px 2px 0;font:700 10.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#a9a8a3}
.design-shot figcaption span{color:#6f6f6b}
.design-section .section-footnote{margin-top:56px}
/* full-size viewer */
.shot-viewer{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(6,7,8,.97);color:#e9e8e2;overflow:hidden}
.shot-viewer::backdrop{background:rgba(0,0,0,.8)}
.shot-viewer[open]{display:flex;align-items:center;justify-content:center;animation:viewerIn .3s ease}
@keyframes viewerIn{from{opacity:0}to{opacity:1}}
.shot-viewer figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 70px 28px;max-width:100%;max-height:100%}
.shot-viewer img{display:block;max-width:min(94vw,1800px);max-height:calc(100vh - 130px);width:auto;height:auto;object-fit:contain;border:1px solid rgba(255,255,255,.12)}
.shot-viewer figcaption{font:700 10.5px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#a9a8a3}
.viewer-close,.viewer-nav{position:absolute;z-index:2;background:transparent;border:1px solid rgba(255,255,255,.25);color:#e9e8e2;width:46px;height:46px;font:300 22px/1 var(--display);cursor:pointer;transition:background .25s ease,border-color .25s ease}
.viewer-close:hover,.viewer-nav:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.viewer-close{top:18px;right:18px;font-size:28px}
.viewer-prev{left:16px;top:50%;transform:translateY(-50%)}
.viewer-next{right:16px;top:50%;transform:translateY(-50%)}
.js-reveal .design-shot{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.js-reveal .design-shot.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js-reveal .design-shot{opacity:1;transform:none;transition:none}.shot-viewer[open]{animation:none}}
@media(max-width:740px){.design-gallery{grid-template-columns:1fr;gap:34px}.design-shot-hero{grid-column:auto}.js-reveal .design-shot{transition-delay:0ms}.shot-viewer figure{padding:64px 10px 20px}.shot-viewer img{max-width:96vw;max-height:calc(100vh - 150px)}.viewer-nav{top:auto;bottom:16px;transform:none}.viewer-prev{left:16px}.viewer-next{right:16px}.shot-open::after{display:none}}