
:root{
  --header:76px;
  --td-bg:#0b131d;
  --td-surface:#121f2a;
  --td-panel:#172735;
  --td-text:#f3f3eb;
  --td-secondary:#c4d1d5;
  --td-tertiary:#a4bac4;
  --td-lime:#dbff4d;
  --td-orange:#ff7854;
  --td-border:#59717a80;
  --td-space-1:8px;
  --td-space-2:16px;
  --td-space-3:24px;
  --td-space-4:32px;
  --td-space-6:48px;
  --td-space-8:64px;
  --td-space-12:96px;
  --td-max:1200px;
}
html{scroll-padding-top:calc(var(--header) + 12px)}
body{font-family:var(--td-body);color:var(--td-text);background:var(--td-bg);font-size:16px;line-height:1.65}
.wrap{width:min(var(--td-max),calc(100% - 80px));margin-inline:auto}
.topbar,.topbar.scrolled{background:rgba(10,18,27,.96)!important;box-shadow:none!important}
.top-inner{height:var(--header)}
.brand{font-size:22px!important;letter-spacing:.025em!important}
.main-nav{gap:32px}
.main-nav a{font-size:11px!important;letter-spacing:.08em!important;white-space:nowrap}
.main-nav a:last-child{padding:12px 18px!important}
.eyebrow,.eyebrow.light{color:var(--td-lime);font-size:11px;font-weight:700;letter-spacing:.12em;line-height:1.5}
.section-kicker{position:relative;z-index:1;display:block!important;margin:0 0 22px!important;padding:0!important;text-transform:uppercase}
.section-kicker:before{content:'';display:inline-block;width:25px;height:2px;background:var(--td-orange);vertical-align:middle;margin:0 13px 3px 0}

.hero{min-height:min(820px,100svh);padding-top:var(--header);position:relative;background:radial-gradient(circle at 82% 36%,#223242 0%,#101b27 38%,#090f17 100%)!important}
.hero:before{opacity:.48!important;background:repeating-linear-gradient(90deg,transparent 0 119px,rgba(178,211,220,.055) 120px 121px),radial-gradient(ellipse at 70% 80%,rgba(255,120,84,.11),transparent 55%)!important}
.hero-lines{width:82vw;height:53vw;right:-28%;top:-30%;min-height:520px;border-color:rgba(219,255,77,.15)}
.hero-lines:before{border-color:rgba(255,120,84,.18)}
.tokyo-lane{height:105px;opacity:.16;pointer-events:none}
.hero-layout{display:grid!important;grid-template-columns:minmax(0,6.6fr) minmax(0,5.4fr);align-items:center;gap:clamp(32px,6.5vw,88px);padding:70px 0 106px!important;position:relative}
.hero-copy{display:flex!important;flex-direction:column;align-items:flex-start;position:relative;z-index:4;min-width:0}
.hero-copy .hero-eyebrow{display:block!important;grid-area:auto;font-size:11px;letter-spacing:.14em;color:var(--td-lime);margin:0 0 29px!important}
.hero-copy h1{font-family:var(--td-display);font-size:clamp(83px,8.5vw,138px)!important;line-height:.84!important;letter-spacing:.007em!important;font-weight:800;text-transform:uppercase;text-shadow:none!important;margin:0 0 27px!important;white-space:normal;overflow:visible}
.hero-copy h1 em{font-style:normal;color:var(--td-text)!important}
.hero-copy h1 em:after{display:none!important}
.hero-copy .role{font:700 16px/1.45 var(--td-body);color:var(--td-lime);margin:0 0 18px!important;max-width:none}
.hero-copy .intro{font:400 clamp(15px,1.3vw,17px)/1.72 var(--td-body);color:var(--td-secondary);max-width:44ch;margin:0 0 29px!important;text-wrap:pretty}
.hero-copy .hero-links{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0!important}
.hero-links .button-primary,.hero-links .button-outline{min-height:50px;padding:14px 22px!important;display:inline-flex;align-items:center;justify-content:center;line-height:1.2;font:700 12px/1.25 var(--td-body);letter-spacing:.035em;white-space:nowrap;text-align:center}
.hero-links .button-primary{box-shadow:none}
.hero-links .button-outline{border-color:#8ca3ac!important;color:#e9eff0!important}
.hero-image{position:relative!important;grid-area:auto;order:initial!important;width:min(100%,405px)!important;max-width:405px;justify-self:end;align-self:center;transform:translateY(var(--portrait-shift,0px));margin:0!important;opacity:1!important}
.photo-frame{aspect-ratio:4/4.7;padding:9px;box-shadow:8px 8px 0 #09131c,8px 8px 0 1px #879a8566}
.photo-frame img{object-fit:cover;object-position:center 27%}
.photo-halo{opacity:.62}
.hero-image figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:24px;font-size:10px;letter-spacing:.08em;color:var(--td-tertiary)}
.hero-foot{bottom:16px;min-height:40px;padding-top:14px;letter-spacing:.11em;color:var(--td-tertiary)}

.interlude{min-height:450px!important;padding:90px 20px!important}
.interlude .eyebrow{font-size:11px}
.interlude-text{font-size:clamp(60px,6.2vw,93px)!important;line-height:.9!important;margin:24px 0 18px!important}
.interlude-caption{font-size:15px;line-height:1.75;max-width:47ch;text-wrap:pretty;color:#c6d5d8}
.motion .reveal{filter:none;transform:translateY(18px);transition:opacity .55s ease-out,transform .7s cubic-bezier(.23,.8,.25,1)}

.projects{padding:100px 0 110px!important}
.projects-top{margin-bottom:36px}
.projects-top h2{font:800 clamp(78px,8.6vw,124px)/.86 var(--td-display)!important;letter-spacing:.015em!important;margin:0 0 22px!important;text-transform:uppercase}
.projects-top>div:first-child>p:last-child{font-size:15px;max-width:52ch;color:var(--td-secondary);line-height:1.65;text-wrap:pretty}
.carousel-actions{gap:28px;align-items:end;padding:0 0 22px}
.carousel-kind{font-size:11px;line-height:1.5;letter-spacing:.09em}
.arrows{gap:10px!important}
.arrows button{width:108px!important;height:48px!important;clip-path:none;border:1px solid #b6c6c180!important;transition:color .18s,background .18s!important;align-items:center;justify-items:center}
.arrows button svg{width:22px;height:22px;flex:none}
.arrows button:focus-visible{outline:2px solid var(--td-lime);outline-offset:4px}
.case-card{box-shadow:0 18px 42px #0004;min-height:555px}
.case-card:before{height:3px}
.case-copy h3{font-size:clamp(34px,3.5vw,53px)!important;line-height:1.08!important;letter-spacing:.012em!important;text-wrap:pretty}
.case-summary{font-size:15px;line-height:1.7}
.case-facts p{font-size:14px;line-height:1.55}
.case-cover img{object-fit:cover}
.case-cover.is-sumup img{object-fit:contain}
.case-cover.is-sumup{background:#e9e7de}

.statement{padding:96px 0!important;background:#e8e9e1!important}
.statement h2{max-width:15ch!important;font:750 clamp(58px,6.7vw,95px)/1.03 var(--td-display)!important;margin:0 0 54px!important;letter-spacing:.01em!important;text-wrap:balance;text-transform:uppercase}
.statement h2 em{font-style:normal;color:#c64e2b!important}
.statement-index{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-top:24px;letter-spacing:.055em;font-size:11px}

.about{padding:112px 0 120px!important;background:linear-gradient(160deg,#101d29,#0d1924)!important}
.about .wrap{position:relative}
.about .section-kicker{margin-bottom:30px!important}
.about-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;column-gap:clamp(32px,6vw,90px);row-gap:28px;margin-bottom:55px}
.about-intro h2{max-width:13ch;font:750 clamp(52px,5.4vw,76px)/1.03 var(--td-display);letter-spacing:.01em!important;text-transform:uppercase;text-wrap:balance;color:var(--td-text);margin:0!important}
.about-intro h2 em{font-style:normal;color:var(--td-orange)!important}
.about-copy{padding-top:8px;min-width:0}
.about-copy p{font:400 16px/1.76 var(--td-body);color:#d1dcdf;max-width:48ch;text-wrap:pretty;margin:0}
.about-copy p+p{margin-top:20px}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.profile-card{position:relative;min-width:0;padding:30px 32px 28px;background:#192b39;border:1px solid #436171;border-radius:2px;display:flex;flex-direction:column;align-items:flex-start;min-height:238px;box-shadow:inset 0 3px 0 #dbff4d1d}
.profile-card:before{content:'';position:absolute;left:-1px;top:-1px;width:40px;height:3px;background:var(--td-lime)}
.profile-card-kicker{font:700 11px/1.5 var(--td-body);letter-spacing:.13em;color:#d7f67a;margin:0 0 27px;text-transform:uppercase}
.profile-card h3{font:700 clamp(27px,2.8vw,36px)/1.13 var(--td-display);letter-spacing:.015em;text-transform:uppercase;color:#fff;margin:0 0 18px;overflow-wrap:normal;text-wrap:balance}
.profile-card-place{font:700 15px/1.5 var(--td-body);color:#f0f2eb;margin:auto 0 4px}
.profile-card-info{font:500 13px/1.5 var(--td-body);color:#c4d7dc;margin:0}
.focus-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 36px;min-height:210px;background:#17232e}
.focus-card:before{background:var(--td-orange)}
.focus-card .profile-card-kicker{grid-column:1/-1;color:#ffab91;margin:0 0 6px}
.focus-card h3{grid-column:1;align-self:start;margin:0;font-size:clamp(30px,3vw,43px)}
.focus-lead{grid-column:2;grid-row:2;align-self:start;color:#d1dfe0;font:400 15px/1.7 var(--td-body);margin:0;text-wrap:pretty}
.focus-tags{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.focus-tags span{display:inline-block;border:1px solid #65848f;background:#142734;padding:7px 12px;color:#e1edef;font:600 12px/1.3 var(--td-body);white-space:nowrap}

.contact{padding:105px 0 100px!important;background:#162635!important}
.contact h2{font:750 clamp(56px,6.4vw,91px)/1.04 var(--td-display)!important;max-width:15ch!important;letter-spacing:.012em!important;text-transform:uppercase;margin:0 0 23px!important;text-wrap:balance}
.contact h2 em{font-style:normal;color:var(--td-orange)!important}
.contact .wrap>p:not(.eyebrow){font-size:16px;line-height:1.7;max-width:60ch;color:#d4dfe3}
.contact-bottom{margin-top:62px;padding-top:24px;gap:24px}
.contact-bottom a span,.contact-method span{color:#dce9eb!important;font-size:14px;overflow-wrap:anywhere}
.foot{min-height:70px;padding:22px max(32px,calc((100% - var(--td-max))/2))}

@media(max-width:1050px){
  .wrap{width:calc(100% - 64px)}
  .hero-layout{gap:32px;grid-template-columns:minmax(0,6.5fr) minmax(0,5.5fr)}
  .hero-copy h1{font-size:clamp(72px,9vw,105px)!important}
  .hero-image{max-width:360px}
  .about-intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .about-intro h2{font-size:clamp(50px,5.6vw,68px)}
  .profile-card{padding:25px}
}
@media(max-width:760px){
  :root{--header:64px}
  .wrap{width:calc(100% - 40px)}
  .top-inner{height:var(--header)}
  .brand{font-size:21px!important}
  .hero{min-height:0!important}
  .hero-layout{display:grid!important;grid-template-columns:minmax(0,1.02fr) minmax(120px,.92fr)!important;grid-template-areas:'kicker kicker' 'name portrait' 'role portrait' 'intro intro' 'actions actions'!important;align-items:center;gap:12px 15px!important;padding:34px 0 30px!important}
  .hero-copy{display:contents!important}
  .hero-copy .hero-eyebrow{grid-area:kicker;font-size:10px;line-height:1.4;margin:0 0 8px!important}
  .hero-copy h1{grid-area:name;align-self:end;font-size:clamp(44px,12.6vw,78px)!important;line-height:.88!important;margin:0!important;letter-spacing:0!important;white-space:nowrap}
  .hero-copy .role{grid-area:role;align-self:start;font:700 12px/1.4 var(--td-body);margin:0!important;white-space:nowrap}
  .hero-copy .intro{grid-area:intro;margin:14px 0 5px!important;max-width:38ch;font:400 15px/1.7 var(--td-body)}
  .hero-copy .hero-links{grid-area:actions;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin:0!important}
  .hero-links .button-primary,.hero-links .button-outline{min-width:0;width:100%!important;min-height:48px;padding:11px 8px!important;font-size:10px;white-space:normal}
  .hero-image{grid-area:portrait!important;max-width:220px;width:100%!important;margin:0!important;transform:none!important;align-self:center;justify-self:end}
  .photo-frame{padding:5px;aspect-ratio:4/4.5}
  .hero-image figcaption{display:none}
  .hero-foot{position:relative;bottom:auto;left:auto;right:auto;margin:0 auto 18px;padding-top:12px;min-height:30px}
  .hero-foot span:first-child,.hero-foot span:last-child{display:none}
  .hero-foot .hero-foot-copy{display:block}
  .interlude{padding:78px 15px!important;min-height:400px!important}
  .interlude-text{font-size:clamp(50px,12.6vw,70px)!important}
  .projects{padding:78px 0 88px!important}
  .projects-top{margin-bottom:24px}
  .projects-top h2{font-size:clamp(74px,16vw,106px)!important}
  .carousel-actions{gap:12px;align-items:center;padding-bottom:22px}
  .arrows button{width:48px!important;height:46px!important}
  .arrows button svg{width:18px;height:18px}
  .case-copy{padding:25px 23px}
  .case-copy h3{font-size:clamp(30px,7.6vw,46px)!important;line-height:1.1!important}
  .case-cover{height:250px}
  .statement{padding:80px 0!important}
  .statement h2{font-size:clamp(49px,10vw,75px)!important;line-height:1.08!important;margin-bottom:38px!important;max-width:100%!important}
  .statement-index{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
  .statement-index span:last-child{grid-column:auto}
  .about{padding:86px 0 94px!important}
  .about-intro{display:block;margin-bottom:40px}
  .about-intro h2{font-size:clamp(49px,10vw,75px)!important;line-height:1.03!important;max-width:14ch;margin:0 0 26px!important}
  .about-copy{padding:0}
  .about-copy p{font-size:15px;line-height:1.75;max-width:52ch}
  .about-grid{grid-template-columns:1fr;gap:13px}
  .profile-card{min-height:auto;padding:25px 24px}
  .profile-card-kicker{margin-bottom:20px}
  .profile-card h3{font-size:31px}
  .focus-card{grid-column:1;display:flex;gap:0;min-height:auto}
  .focus-card .profile-card-kicker{margin-bottom:19px}
  .focus-card h3{margin:0 0 12px}
  .focus-lead{margin:0 0 20px}
  .focus-tags{margin:0}
  .contact{padding:86px 0 88px!important}
  .contact h2{font-size:clamp(49px,10vw,77px)!important;line-height:1.06!important;max-width:100%!important}
  .contact h2 em{display:inline;white-space:normal}
  .contact-bottom{margin-top:40px}
  .foot{padding:20px;gap:16px}
}
@media(max-width:400px){
  .wrap{width:calc(100% - 36px)}
  .hero-layout{grid-template-columns:minmax(0,1fr) minmax(110px,.92fr)!important;gap:12px 10px!important}
  .hero-copy h1{font-size:clamp(39px,12.15vw,52px)!important}
  .hero-copy .role{font-size:11px}
  .statement h2{font-size:clamp(44px,10.2vw,52px)!important}
  .about-intro h2{font-size:clamp(43px,10.1vw,52px)!important}
  .contact h2{font-size:clamp(46px,10.2vw,57px)!important}
  .focus-tags span{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .motion .reveal{opacity:1!important;transform:none!important}
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}


.case-copy h3{font-size:clamp(33px,3.1vw,46px)!important;text-transform:none!important;line-height:1.17!important;letter-spacing:0!important}
.case-cover{background:#e5e7e1}
.case-cover img{object-fit:contain!important;object-position:center center}
.case-cover .cover-caption{background:linear-gradient(180deg,transparent,rgba(7,18,24,.75))}

.motion .about .reveal,.motion .about .reveal.visible{opacity:1!important;transform:none!important;filter:none!important}
@media(max-width:760px){.case-copy h3{font-size:clamp(30px,7.5vw,41px)!important;line-height:1.15!important}}


.contact h2{max-width:21ch!important;font-size:clamp(53px,5.8vw,78px)!important;line-height:1.08!important;text-wrap:balance}
@media(max-width:760px){.contact h2{max-width:100%!important;font-size:clamp(39px,10.5vw,60px)!important;line-height:1.12!important;text-wrap:balance}}



.tokyo-sign,.tokyo-image-tag,.tokyo-image-foot{display:none!important}
.hero-copy h1 em::after,.hero-copy h1 em:after{content:none!important;display:none!important}
.hero-copy .role{position:relative;z-index:3;display:block;overflow:visible!important;clear:both}
.hero-copy .role::before,.hero-copy .role::after{content:none!important}
.hero-copy h1{position:relative;z-index:1}

.hero-image .photo-frame::after{border-color:#8f9b9b!important}


.hero-foot{justify-content:flex-start!important}
.hero-foot .hero-foot-copy{margin:0!important;text-align:left!important}
