/* Depth Optica / Direction 01 — independent image studio. */
:root{
 --ink-0:#101012;--ink-1:#18171b;--ink-2:#222025;--ink-3:#29252e;--ink-4:#332e39;
 --bone:#f4f0eb;--bone-soft:#e1dadf;--text:#f0ecef;--muted:#b4abb6;--muted-2:#958a9a;
 --beam:#eb6ab8;--beam-soft:#f59dce;--beam-deep:#a856c4;--beam-glow:rgba(235,106,184,.12);
 --font-display:Arial,'Helvetica Neue',sans-serif;--font-body:Arial,'Helvetica Neue',sans-serif;
 --font-mono:'Courier New',monospace;--radius:0px;--radius-lg:0px;--radius-pill:2px;
 --max:1440px;--gutter:clamp(20px,4.2vw,72px)
}
body{background:var(--ink-0);letter-spacing:-.015em;cursor:auto!important}
body::before,body::after,.hero-grid,.aberrate::after,.cursor-dot,.cursor-ring{display:none!important}
a,button{cursor:pointer!important}
.display{font-weight:700;letter-spacing:-.065em;word-spacing:0;line-height:1.02;display:block}
.display em{font-style:normal;font-weight:inherit;color:var(--beam)}
h1.display{font-size:clamp(3.4rem,7.5vw,8.2rem);line-height:.97}
h2.display{font-size:clamp(2.3rem,4.6vw,5rem);line-height:1.03;max-width:22ch}
h3.display{font-weight:700}
.eyebrow,.kicker,.section-index{letter-spacing:.08em;font-size:.7rem;font-weight:400}
.eyebrow{display:flex;line-height:1.5;margin-bottom:26px}
.eyebrow::before{width:7px;height:7px}
.lead{font-size:clamp(1.05rem,1.25vw,1.2rem);line-height:1.6;letter-spacing:-.015em}
.section{padding-block:clamp(70px,8.5vw,130px)}
.section-head{gap:40px;margin-bottom:48px;padding-bottom:32px;align-items:start}
.section-head .eyebrow{margin-bottom:20px}
.section-head .lead{max-width:58ch;margin-top:26px}
.section-index{margin-top:6px;color:var(--muted)}
.section-index::before{display:none}
.btn{min-height:48px;padding:14px 22px;font:500 .9rem var(--font-body);text-transform:none;letter-spacing:-.01em;border-radius:2px;transition:background .2s,color .2s,border-color .2s;white-space:normal;text-align:center}
.btn--lg{padding:17px 24px;font-size:.95rem;min-height:54px}
.btn--primary{background:var(--beam);color:#171118;border-color:var(--beam)}
.btn--primary:hover{background:#f397d0;border-color:#f397d0;box-shadow:none}
.btn--ghost:hover{background:var(--bone);color:var(--ink-0);border-color:var(--bone)}
.btn .arrow{margin-left:16px;font-size:1.2em}
.chip{padding:5px 0;border:0;background:none;border-radius:0;font:400 .69rem var(--font-mono);letter-spacing:.015em;text-transform:none}
.chip+.chip::before{content:'/';color:var(--muted-2);margin-right:8px}
.site-header,.site-header.is-scrolled{background:#101012;border-bottom:1px solid #39313a;backdrop-filter:none}
.nav-shell{min-height:88px;gap:20px}
.brand{gap:12px}
.brand img,.brand:hover img{width:42px;height:42px;filter:none;transform:none}
.brand-text strong{font-weight:700;font-size:1.24rem;letter-spacing:-.055em}
.brand-text em{font:400 .58rem var(--font-mono);letter-spacing:.09em;color:var(--muted);margin-top:7px}
.site-nav{gap:12px}
.nav-link{padding:12px 6px;font:400 .81rem var(--font-body);text-transform:none;letter-spacing:0;color:var(--bone-soft);border-radius:0}
.nav-link.is-current{color:var(--beam)}
.nav-link::before{display:none}
.nav-link[data-nav=contact]{margin-left:16px;border:1px solid #69566a;padding:11px 19px}
.nav-link[data-nav=contact]:hover{background:var(--beam);color:var(--ink-0);border-color:var(--beam)}
.nav-submenu{border-radius:0;background:#1c181f;padding:12px;top:100%;box-shadow:none}
.nav-submenu::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-sub-link{font-family:var(--font-body);font-size:.9rem;letter-spacing:0}
.menu-toggle{border-radius:0;background:none}
.hero{margin-top:88px;padding:60px var(--gutter) 38px;background:var(--beam);color:#201521;display:grid;grid-template-columns:1.1fr 1fr;align-items:start;min-height:min(760px,calc(100svh - 88px));isolation:isolate}
.hero-bg{inset:0 0 0 auto;width:45%;height:100%;z-index:-1;filter:none;object-position:50% 50%}
.hero-overlay{inset:0 0 0 auto;width:45%;z-index:0;background:linear-gradient(0deg,rgba(10,8,13,.35),transparent 50%)}
.hero-content{grid-column:1/-1;width:100%;max-width:none;margin:0;z-index:1;pointer-events:none}
.hero-content>*{pointer-events:auto}
.hero .eyebrow{color:#301e2f;font-size:.7rem;margin:0 0 40px;max-width:49%}
.hero .eyebrow::before{background:#301e2f}
.hero h1{font-size:clamp(4rem,7.7vw,8.8rem);letter-spacing:-.075em;line-height:.94;max-width:66%;margin:0 0 38px;color:#231725}
.hero h1 .ln{overflow:visible;padding:0}
.hero h1 .ln>span{transform:none;animation:none!important;will-change:auto}
.hero h1 em{font-style:normal;color:#f7eff6;font-weight:700}
.hero h1 .ln:last-child{white-space:nowrap}
.hero-lead{max-width:40%;font-size:clamp(.95rem,1.2vw,1.08rem);color:#332033;line-height:1.58;margin:0 0 26px;opacity:1;transform:none;animation:none}
.hero-actions{gap:12px;max-width:49%;opacity:1;transform:none;animation:none}
.hero-actions .btn--primary{background:#251a28;border-color:#251a28;color:var(--bone)}
.hero-actions .btn--primary:hover{background:#46304b}
.hero-actions .btn--ghost{border-color:#6c3f60;color:#251a28}
.hero-actions .btn--ghost:hover{background:#251a28;color:var(--bone)}
.hero-meta{position:relative;grid-column:1/-1;left:auto;right:auto;bottom:auto;align-self:end;color:#3d263a;border:0;padding-top:38px;font-size:.63rem;letter-spacing:.04em;margin-top:0;z-index:1}
.hero-meta strong{color:inherit}
.hero-meta .scroll-cue{color:var(--bone)}
.hero-meta .line::after{animation:none}
.addon-grid{grid-template-columns:1fr;gap:44px}
.addon-card{border:0;border-radius:0;background:none;overflow:visible}
.addon-card:hover{transform:none;border-color:transparent}
.addon-card>a{display:grid;grid-template-columns:1.07fr 1fr;gap:clamp(24px,4vw,64px);align-items:stretch}
.addon-card:nth-child(2)>a{grid-template-columns:1fr 1.07fr}
.addon-card:nth-child(2) .media{order:2}
.addon-card .media,.addon-card--featured .media{aspect-ratio:auto;min-height:360px;border-radius:0}
.addon-card .media img{width:100%;height:100%;object-fit:cover;filter:none}
.addon-card .body{padding:22px 0 28px;gap:20px;border-top:1px solid var(--line-2);background:none}
.addon-card h3{font-size:clamp(2rem,3vw,3rem);font-weight:700;line-height:1;letter-spacing:-.055em}
.addon-card p{font-size:1rem;color:var(--muted)}
.addon-card .feature-list{margin-top:4px;gap:8px}
.addon-card .feature-list li{font-size:.86rem;line-height:1.5}
.addon-card .body .tagrow{flex-wrap:wrap;gap:10px}
.addon-card .body .tagrow .price{font-family:var(--font-body);font-weight:700;font-size:1.65rem;color:var(--beam);letter-spacing:-.05em;margin-left:auto}
#projects-showcase{background:#1b181e;border-block:1px solid var(--line)}
.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
.proj-grid .proj:nth-child(n){grid-column:auto;grid-row:auto;border:0;background:none;border-radius:0;overflow:visible}
.proj-grid .proj:hover{transform:none}
.proj-grid .proj:nth-child(n) .frame{aspect-ratio:16/10;height:auto;min-height:0}
.proj-grid--editorial .proj:nth-child(3n+1){grid-column:1/-1;max-width:100%}
.proj-grid--editorial .proj:nth-child(3n+1) .frame{aspect-ratio:2/1}
.proj .frame img{filter:none}
.proj .frame::after{display:none}
.proj .num{top:12px;left:12px;font-size:.65rem;background:#101012b3;padding:5px 8px;border-radius:0}
.proj .tagline{bottom:12px;max-width:40ch;padding:12px;background:#101012d9;left:12px;right:12px;font-size:.85rem}
.proj .cap{padding:18px 0 0;border-top:0}
.proj .cap h3{font:700 clamp(1.25rem,2.3vw,2rem) var(--font-body);letter-spacing:-.045em}
.proj .cap .yr{font:400 .72rem var(--font-mono);letter-spacing:0;color:var(--muted)}
#about-teaser{background:#c7b4d8;color:#241c2b}
#about-teaser .container{width:min(100% - var(--gutter)*2,var(--max))}
#about-teaser [data-reveal]{display:grid;grid-template-columns:1.05fr 1fr;gap:24px 8%}
#about-teaser .eyebrow{grid-column:1/-1;color:#47304f;margin:0}
#about-teaser .eyebrow::before{background:#47304f}
#about-teaser h2{grid-column:1;grid-row:2/5;max-width:14ch;color:#241c2b;margin:0!important}
#about-teaser h2 em{color:#62416e}
#about-teaser .body-large{color:#35273d;font-size:1.05rem;margin:0}
#about-teaser .btn-row{grid-column:2;margin-top:10px!important}
#about-teaser .btn{border-color:#765d83;color:#241c2b}
#about-teaser .btn:hover{background:#241c2b;color:var(--bone)}
.site-footer{background:#101012;padding-top:70px;border-top:1px solid var(--line)}
.footer-top{grid-template-columns:1.4fr .65fr 1fr;gap:48px}
.footer-brand h4{font-weight:700;letter-spacing:-.055em;font-size:clamp(1.9rem,3vw,3rem);line-height:1.05;max-width:14ch}
.footer-col h5{letter-spacing:.05em;color:var(--muted)}
.footer-col .mail{font-family:var(--font-body);font-size:clamp(1rem,1.6vw,1.5rem);letter-spacing:-.045em}
.footer-big{font-weight:700;font-style:normal;font-size:clamp(3rem,13.9vw,15rem);letter-spacing:-.075em;line-height:1.1;padding:42px 0 30px;border-bottom:1px solid var(--line);margin:0;white-space:nowrap;overflow:visible}
.footer-big em{font-style:normal;font-weight:700}
.footer-bottom{font-size:.65rem;letter-spacing:.02em;flex-wrap:wrap;padding-block:22px}
.page-hero,.addon-hero,.proj-detail-hero{padding-top:clamp(140px,14vw,190px)}
.page-hero{padding-bottom:60px;border-bottom:1px solid var(--line)}
.page-hero h1{max-width:20ch}
.addon-hero{padding-bottom:70px}
.addon-hero-grid{grid-template-columns:1fr 1fr;gap:5%;align-items:center}
.addon-hero h1{font-size:clamp(3rem,5.5vw,6rem);font-weight:700;margin:0 0 26px}
.addon-hero .eyebrow{margin-bottom:28px}
.addon-hero .lead{font-size:1rem;line-height:1.65;margin-bottom:24px}
.addon-hero .btn-row{gap:10px}
.addon-hero .btn{padding:14px 17px;font-size:.85rem}
.addon-hero-media{aspect-ratio:4/5;border:0;box-shadow:12px 12px 0 #2e2233;overflow:hidden}
.addon-hero-media img,.addon-hero-media video{object-fit:cover}
.addon-hero .priceline{flex-wrap:wrap;gap:10px}
.addon-hero .priceline .big{font-weight:700;font-size:2.6rem;letter-spacing:-.06em}
.addon-hero .priceline .unit{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:.8rem;max-width:21ch}
.addon-hero .priceline .save{font-size:.65rem;letter-spacing:0;padding:5px 0;border:0;background:none}
.addon-hero-meta{gap:12px}
.feat-grid{gap:0;border-top:1px solid var(--line);grid-template-columns:repeat(3,minmax(0,1fr))}
.feat{border:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);background:none;padding:30px}
.feat:nth-child(3n){border-right:0}
.feat:hover{background:#19151d;transform:none}
.feat .icon{border:0;width:28px;height:28px;margin-bottom:22px}
.feat h3{font-weight:700;letter-spacing:-.035em;line-height:1.2;font-size:1.28rem}
.feat .num{position:absolute;right:24px;top:26px}
.stats{padding-block:36px}
.stat .num{font-weight:700;letter-spacing:-.06em;color:var(--beam)}
.stat .label{font-family:var(--font-body);letter-spacing:0;text-transform:none;font-size:.9rem}
.video-card{border:1px solid var(--line);width:100%;aspect-ratio:16/9;border-radius:0}
/* Fill both the wrapper generated by makeYouTubeFrame and the embedded player. */
.video-card>.youtube-frame{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.video-card iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
.video-card .play-btn{background:var(--bone);color:#211722;box-shadow:none;width:76px;height:76px}
.video-card:hover .play-btn{background:var(--beam);box-shadow:none;transform:scale(1.06)}
.showcase{gap:16px}
.showcase>a,.showcase>.clip{border:0}
.showcase img,.showcase video{filter:none}
.cta-banner{background:#d97abd;text-align:left;border:0;padding:clamp(32px,5vw,72px);color:#271a2c}
.cta-banner::before,.fc-result::before,.split-card--problem::before{display:none}
.cta-banner h2{color:#271a2c;max-width:21ch;margin:0 0 24px}
.cta-banner h2 em{color:#6a3671}
.cta-banner p{color:#3d2942;margin:0 0 28px;max-width:58ch}
.cta-banner .eyebrow{color:#44294a;justify-content:flex-start!important}
.cta-banner .btn-row{justify-content:flex-start}
.cta-banner .btn--primary{background:#271a2c;border-color:#271a2c;color:var(--bone)}
.cta-banner .btn--ghost{color:#271a2c;border-color:#82547d}
.cta-bar{border-inline:0;border-bottom:0;background:none;padding:28px 0;border-top:1px solid var(--line-2)}
.cta-bar h3{font-weight:700;letter-spacing:-.04em}
.split-card,.fc-panel,.fc-result,.form-wrap,.contact-info,.member{background:var(--ink-1);border-color:var(--line);box-shadow:none}
.split-card h3,.member .info h3,.contact-info h2,.fc-panel h2{font-weight:700;letter-spacing:-.045em}
.fc-result{border-top:3px solid var(--beam)}
.fc-result .big{font-weight:700}
.team{gap:36px}
.member{border:0;display:grid;grid-template-columns:.85fr 1fr}
.member .portrait{aspect-ratio:auto;min-height:350px}
.member .portrait img{filter:none}
.member .info{padding:30px}
.member .info h3{font-size:2rem;line-height:1.1}
.member:hover{transform:none}
.marquee{font-family:var(--font-body);font-style:normal;font-weight:700;letter-spacing:-.05em;background:none}
.proj-stage{border:0}
.proj-pagination a{background:none;border-inline:0;border-bottom:0;padding-inline:0}
.proj-pagination a strong{font-weight:700;font-size:1.5rem;letter-spacing:-.04em}
[data-reveal]{opacity:1;transform:none;transition:none}
@media(min-width:1600px){.hero{min-height:800px;padding-top:80px}.hero-lead{max-width:38%}.hero-actions{padding-bottom:40px}}
@media(max-width:1080px) and (min-width:761px){
 .nav-shell{gap:12px}.site-nav{gap:4px}.nav-link{font-size:.75rem}.brand-text em{display:none}.nav-link[data-nav=contact]{margin-left:4px;padding:10px}
 .hero{min-height:720px}.hero h1{font-size:8.2vw;max-width:74%}.hero-lead{max-width:44%}.hero-actions{max-width:48%;gap:10px}.hero-actions .btn{padding:14px;font-size:.8rem}
 .addon-hero-grid{grid-template-columns:1fr 1fr;gap:28px}.addon-hero h1{font-size:4.7vw}.addon-hero .priceline .save{margin-left:0}.addon-hero-media{aspect-ratio:3/4}
 .addon-card .media{min-height:320px}.addon-card>a,.addon-card:nth-child(2)>a{gap:30px}.addon-card .body .tagrow .price{width:100%;margin:0}.addon-card .body{padding-top:16px}
 .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feat:nth-child(n){border-right:1px solid var(--line)}.feat:nth-child(2n){border-right:0}
 .footer-top{grid-template-columns:1.2fr .65fr 1fr;gap:28px}.member{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
 :root{--gutter:22px}.nav-shell{min-height:76px}.brand-text strong{font-size:1.15rem}.brand-text em{font-size:.52rem}.brand img{width:35px;height:35px}
 .menu-toggle{width:42px;height:42px}.site-nav{background:#161219;padding:100px 24px 32px;visibility:hidden;box-shadow:none;gap:0}.site-nav.is-open{visibility:visible}
 .site-nav::before{content:'Navigation';letter-spacing:.06em}.nav-link{font-size:1.65rem;padding:14px 0;font-weight:700;letter-spacing:-.04em}.nav-link[data-nav=contact]{margin:0;padding:14px 0;border:0;border-bottom:1px solid var(--line)}
 .nav-submenu{padding:4px 0 10px 16px}.nav-submenu::before{display:none}.nav-sub-link{padding:8px 0;min-height:38px;font-size:.96rem}
 .hero{margin-top:76px;display:flex;flex-direction:column;padding:32px var(--gutter) 0;min-height:0;overflow:hidden}
 .hero-content{display:flex;flex-direction:column;position:relative}.hero .eyebrow{max-width:100%;font-size:.63rem;margin-bottom:26px}
 .hero h1{font-size:clamp(2.7rem,10.5vw,5rem);max-width:100%;line-height:.97;margin-bottom:24px;letter-spacing:-.065em}
 .hero-lead{max-width:100%;font-size:.96rem;margin-bottom:24px}.hero-actions{max-width:100%;gap:9px;margin-bottom:30px}.hero-actions .btn{padding:13px 15px;font-size:.83rem;min-height:48px}.hero-actions .arrow{margin-left:3px}
 .hero-bg{position:relative;inset:auto;order:2;z-index:1;width:calc(100% + var(--gutter)*2);max-width:none;height:auto;aspect-ratio:16/10;margin-inline:calc(-1 * var(--gutter));object-fit:cover}
 .hero-overlay{display:none}.hero-meta{order:3;position:relative;flex:none;width:calc(100% + var(--gutter)*2);margin-inline:calc(-1 * var(--gutter));padding:16px var(--gutter);color:var(--muted);background:#101012;gap:10px;font-size:.56rem;align-items:center}.hero-meta .scroll-cue{color:var(--muted)}
 h1.display{font-size:clamp(2.8rem,11vw,5rem)}h2.display{font-size:clamp(2rem,8.4vw,3.5rem);letter-spacing:-.055em}.eyebrow{font-size:.65rem;margin-bottom:22px}.section{padding-block:64px}.section-head{gap:20px;margin-bottom:32px;padding-bottom:24px}.section-index{display:none}
 .addon-card>a,.addon-card:nth-child(2)>a{grid-template-columns:1fr;gap:0}.addon-card:nth-child(2) .media{order:0}.addon-card .media,.addon-card--featured .media{aspect-ratio:16/10;min-height:0}.addon-card .body{padding:24px 0 0;gap:18px;border:0}.addon-card .body .tagrow{gap:10px}.addon-card h3{font-size:2.2rem}.addon-card .feature-list li{font-size:.88rem}.addon-grid{gap:48px}
 .proj-grid{grid-template-columns:1fr;gap:32px}.proj-grid .proj:nth-child(n){grid-column:auto}.proj-grid .proj:nth-child(n) .frame{aspect-ratio:16/11}.proj .cap h3{font-size:1.4rem}.proj .cap{padding-top:14px}.proj .num{font-size:.58rem}.proj .tagline{display:none}
 #about-teaser [data-reveal]{display:block}#about-teaser .eyebrow{margin-bottom:26px}#about-teaser h2{max-width:17ch;margin-bottom:30px!important}#about-teaser .body-large{margin-bottom:18px;font-size:1rem}#about-teaser .btn-row{margin-top:30px!important}
 .footer-top{grid-template-columns:1fr 1fr;gap:32px 20px}.footer-brand{grid-column:1/-1}.footer-brand h4{max-width:16ch;font-size:2.1rem}.footer-col .mail{font-size:.86rem;overflow-wrap:anywhere}.footer-col a{font-size:.86rem}.footer-big{font-size:13vw;padding-block:36px 28px}.footer-bottom{gap:14px;font-size:.59rem;line-height:1.8}
 .page-hero,.addon-hero,.proj-detail-hero{padding-top:118px}.page-hero{padding-bottom:40px}.page-hero .lead{margin-top:22px}.addon-hero-grid{grid-template-columns:1fr;gap:38px}.addon-hero h1{font-size:clamp(2.7rem,11vw,4.6rem)}.addon-hero-media{aspect-ratio:16/11;box-shadow:7px 7px 0 #2e2233}.addon-hero .lead{font-size:1rem}.addon-hero .priceline .unit{max-width:23ch}.addon-hero .priceline .save{margin-left:auto}
 .feat-grid{grid-template-columns:1fr}.feat:nth-child(n){border-right:0;padding:28px 0}.feat:hover{background:none}.feat .num{right:2px}.stats{gap:32px 20px}.stat .label{font-size:.82rem}.stat .num{font-size:3rem}
 .showcase{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.video-card .play-btn{width:58px;height:58px}.video-card .play-btn svg{width:24px;height:24px}.cta-banner{padding:32px 24px}.cta-banner .btn-row{flex-direction:column;align-items:stretch}.cta-banner h2{font-size:2.2rem}.cta-bar{gap:24px}
 .member{grid-template-columns:1fr}.member .portrait{aspect-ratio:4/3;min-height:0}.member .portrait img{object-position:50% 35%}.member .info{padding:26px}.team{gap:28px}.contact-info h2{font-size:clamp(1.25rem,5vw,2rem);overflow-wrap:anywhere}
 .fc-panel,.fc-result{padding:24px 18px}.fc-tabs{gap:2px}.fc-tab{font-size:.68rem;letter-spacing:0;padding:12px 8px}.fc-breakdown{gap:8px}.fc-breakdown .item{padding:12px 8px}.fc-breakdown .l{font-size:.55rem;letter-spacing:0}.fc-row{grid-template-columns:1fr}.form-wrap{padding:26px 20px}
 .proj-pagination{gap:16px}.proj-pagination a strong{font-size:1.2rem}.proj-pagination a span{font-size:.56rem}
}
@media(prefers-reduced-motion:reduce){.hero-bg{display:none}.hero{background-image:linear-gradient(90deg,var(--beam) 55%,transparent 55%),url('../media/projects/yakuza/projet-hinocontessa-anser-indicus-yakuza-master-final.webp');background-size:cover;background-position:center}.marquee-track{animation:none!important}.hero h1 .ln>span{transform:none!important}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.hero{background:var(--beam)}.hero-bg{display:block}}
/* Preserve the complete product artwork, including embedded titles. */
.addon-hero-media{aspect-ratio:4/3;background:#09090b}
.addon-hero-media img,.addon-hero-media video{object-fit:contain}
.addon-card .media{background:#09090b;display:flex;align-items:center}
.addon-card .media img{height:auto;object-fit:contain}
@media(min-width:761px){.addon-hero h1{font-size:clamp(3rem,4.7vw,5.2rem)}}
@media(max-width:760px){.addon-hero-media{aspect-ratio:4/3}.menu-toggle[aria-expanded=true] span{background:transparent}}