/* Direction 03: people and ideas, expressed through a few geometric forms. */
.variant-3{--paper:#f5f2e9;--coral:#df6344;--blue:#406dce;--yellow:#e6be4c;background:var(--paper);color:#162234}
.variant-3 .site-header,.variant-3 .mobile-menu{background:#f5f2e9f5}
.variant-3 .site-footer{background:#f5f2e9}
.form-label{font:11px/1.6 LibreBaskerville,serif;letter-spacing:.02em}
.form-hero.hero{height:100svh;min-height:660px;max-height:1050px;background:#f5f2e9;isolation:isolate}
.form-opening{position:absolute;left:6%;right:6%;top:35px;display:flex;justify-content:space-between;align-items:center;z-index:3}
.form-opening img{width:184px;display:block}.form-opening nav{display:flex;gap:32px;font:12px/1.7 LibreBaskerville,serif}
.form-hero-layout{position:absolute;inset:18% 3% 12% 6%;display:grid;grid-template-columns:51% 49%;align-items:center;gap:0}
.form-hero-copy{position:relative;z-index:2}
.form-hero h1{font:400 clamp(72px,min(8.4vw,14svh),134px)/1.04 var(--serif);letter-spacing:-.055em;margin:30px 0 27px}
.form-hero h1 em{color:#c44f34;white-space:nowrap;font-weight:400}
.form-hero-tag{font:20px/1.4 var(--serif)}
.form-japanese{font-size:11px;line-height:2;margin-top:20px;max-width:27em}
.form-hero-bottom{position:absolute;bottom:30px;left:6%;right:6%;display:flex;justify-content:space-between;align-items:center;font:11px/1.8 LibreBaskerville,serif}
.form-hero-bottom>a{border-bottom:1px solid #16223460;padding-bottom:5px}
.geometry-art{position:relative;width:100%;aspect-ratio:1;isolation:isolate}
.geometry-art svg{width:100%;height:100%;display:block;overflow:visible}
.geometry-hero{width:112%;margin-left:-6%}
.geometry-art g{transform-box:fill-box;transform-origin:center;will-change:transform}
.geo-person{animation:form-person 8s ease-in-out infinite alternate}
.geo-orbit{animation:form-orbit 10s ease-in-out infinite alternate}
.geo-arch{animation:form-arch 9s ease-in-out infinite alternate}
.geo-plane{animation:form-plane 12s ease-in-out infinite alternate}
.geo-thought{animation:form-thought 8s ease-in-out infinite alternate}
@keyframes form-person{from{transform:translate3d(0,7px,0) rotate(-2deg)}to{transform:translate3d(-7px,-20px,0) rotate(2deg)}}
@keyframes form-orbit{from{transform:translate3d(-18px,3px,0)}to{transform:translate3d(16px,30px,0)}}
@keyframes form-arch{from{transform:translate3d(0,-13px,0)}to{transform:translate3d(9px,10px,0)}}
@keyframes form-plane{from{transform:translate3d(-10px,0,0)}to{transform:translate3d(10px,10px,0)}}
@keyframes form-thought{from{transform:translate3d(0,-8px,0) rotate(-14deg)}to{transform:translate3d(13px,12px,0) rotate(18deg)}}
.exchange-art .geo-person{animation:exchange-left 12s ease-in-out infinite alternate}
.exchange-art .geo-colleague{animation:exchange-right 12s ease-in-out infinite alternate}
.exchange-art .geo-idea-square{animation:exchange-square 10s ease-in-out infinite alternate}
.exchange-art .geo-idea-curve{animation:exchange-curve 11s ease-in-out infinite alternate}
.geo-idea-triangle,.dialogue-idea-triangle{animation:idea-triangle 13s ease-in-out infinite alternate}
.geometry-practice .geo-idea-triangle{animation-delay:-3s}
.geometry-small .dialogue-idea-triangle{animation-delay:-4s}
@keyframes idea-triangle{from{transform:translate(-4px,3px) rotate(-5deg)}to{transform:translate(4px,-3px) rotate(5deg)}}
.exchange-art.geometry-practice .geo-colleague{animation-delay:-3s}
.exchange-art.geometry-practice .geo-idea-square{animation-delay:-4s}
.exchange-art.geometry-practice .geo-idea-curve{animation-delay:-2s}
@keyframes exchange-left{from{transform:translate(-3px,2px) rotate(-1deg)}to{transform:translate(3px,-8px) rotate(1deg)}}
@keyframes exchange-right{from{transform:translate(3px,-6px) rotate(1deg)}to{transform:translate(-3px,2px) rotate(-1deg)}}
@keyframes exchange-square{from{transform:translate(-9px,-5px) rotate(-7deg)}to{transform:translate(9px,5px) rotate(7deg)}}
@keyframes exchange-curve{from{transform:translate(7px,5px) rotate(6deg)}to{transform:translate(-7px,-5px) rotate(-6deg)}}
.form-intro{padding:100px 8%;display:grid;grid-template-columns:1fr 1fr;gap:12%;background:#e6be4c}
.form-intro h2{font:400 clamp(55px,6vw,88px)/1.1 var(--serif);letter-spacing:-.035em;margin-top:38px}
.form-intro h2 em{font-weight:400}
.form-mini-art{width:210px;margin-top:30px;overflow:visible}
.geometry-small .geo-arch,.geometry-small .geo-plane,.geometry-small .geo-thought{display:none}
.geometry-small .geo-person{transform-origin:center;animation-delay:-3s}
.geometry-small .geo-orbit{animation-delay:-5s}
.form-mini-art:has(.dialogue-art){width:min(100%,360px);margin-top:35px}
.dialogue-art{aspect-ratio:5/3}
.dialogue-left{animation:dialogue-left 12s ease-in-out infinite alternate}
.dialogue-right{animation:dialogue-right 12s ease-in-out infinite alternate}
.dialogue-idea-square{animation:dialogue-square 10s ease-in-out infinite alternate}
.dialogue-idea-curve{animation:dialogue-curve 11s ease-in-out infinite alternate}
@keyframes dialogue-left{from{transform:translate(-3px,1px) rotate(-1deg)}to{transform:translate(3px,-3px) rotate(1deg)}}
@keyframes dialogue-right{from{transform:translate(3px,-2px) rotate(1deg)}to{transform:translate(-3px,2px) rotate(-1deg)}}
@keyframes dialogue-square{from{transform:translate(-9px,-4px) rotate(-6deg)}to{transform:translate(9px,4px) rotate(6deg)}}
@keyframes dialogue-curve{from{transform:translate(8px,3px) rotate(5deg)}to{transform:translate(-8px,-3px) rotate(-5deg)}}
.variant-3 .form-intro .prose,.variant-3 .form-intro .prose>p:first-child{font-size:13px;line-height:2.2}
.form-intro .prose{margin:0;padding-top:48px}.form-intro .prose br{display:none}
.form-works{padding:110px 6% 120px;background:#fcfaf5}
.form-section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:60px}
.form-section-head h2{font:400 clamp(55px,6.8vw,102px)/1.05 var(--serif);letter-spacing:-.04em;margin-top:30px}
.form-section-head h2 em{font-weight:400;color:#c44f34}
.form-link{font:12px/1.8 LibreBaskerville,serif;border-bottom:1px solid #16223490;padding-bottom:7px;width:max-content}
.form-works .work-grid{gap:48px 26px}.form-works .work-card{padding-top:0;border:0}
.form-works .work-caption h3,:is(.variant-3,.variant-5) .archive-page .work-caption h3{font-size:12px}
.form-practice{background:#dbe5ed;padding:100px 6%;display:grid;grid-template-columns:1fr 1.1fr;gap:9%}
.form-practice-heading h2{font:400 clamp(36px,4vw,59px)/1.16 var(--serif);letter-spacing:-.03em;margin-top:35px}
.form-practice-heading h2 em{font-weight:400}
.geometry-practice{width:85%;max-width:380px;margin:25px 0 -15px}
.geometry-practice .geo-person{animation-delay:-3s}.geometry-practice .geo-orbit{animation-delay:-4s}.geometry-practice .geo-arch{animation-delay:-2s}
.form-service-hint{font:10px/1.6 LibreBaskerville,serif;letter-spacing:.02em;opacity:.6;text-align:right;margin:0 0 14px}
.form-service{border-bottom:1px solid #16223440}.form-service:first-of-type{border-top:1px solid #16223440}
.form-service summary{display:flex;align-items:center;gap:22px;padding:26px 0;cursor:pointer;list-style:none}.form-service summary::-webkit-details-marker{display:none}
.form-service summary>span{font:10px/1.6 LibreBaskerville,serif;color:#4c5c68}
.form-service h3{font:400 clamp(26px,2.9vw,42px)/1.15 var(--serif);letter-spacing:-.02em;flex:1;min-width:0}
.form-service-action{margin-left:auto;flex:none;display:block;position:relative;width:18px;height:18px;color:#162234!important}
.form-service-action:before,.form-service-action:after{content:'';position:absolute;background:currentColor}
.form-service-action:before{left:0;right:0;top:8px;height:1px}
.form-service-action:after{left:8px;top:0;bottom:0;width:1px;transition:transform .25s ease}
.form-service[open] .form-service-action:after{transform:scaleY(0)}
.form-service summary[aria-expanded="false"] .form-service-action:after{transform:scaleY(1)}
.form-service summary:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.form-service>div{padding:0 0 28px 37px;font-size:13px;line-height:2.1}
.form-service-jp{font-size:inherit;line-height:inherit;margin-bottom:12px;color:inherit}
.form-profile{display:grid;grid-template-columns:1fr 1.1fr;gap:9%;padding:100px 6%}
.form-profile h2{font:400 clamp(48px,5.8vw,80px)/1.1 var(--serif);letter-spacing:-.035em;margin-top:35px}.form-profile h2 em{display:block;font-size:.72em;line-height:1.2;font-weight:400;letter-spacing:-.03em;white-space:nowrap;margin-top:.14em;color:#c44f34}
.form-profile .company-copy{padding-top:47px}.form-profile .company-copy h3{font-size:19px}.form-profile .company-copy p,.form-profile .company-copy dt,.form-profile .company-copy dd{font-size:13px}
.form-contact{background:#162234;color:#f5f2e9;display:grid;grid-template-columns:1fr 1.1fr;gap:9%;padding:100px 6%}
.form-contact h2{font:400 clamp(72px,8.4vw,125px)/1 var(--serif);letter-spacing:-.04em;margin:38px 0}
.form-contact-heading>a{display:block;width:max-content}
.form-contact input,.form-contact textarea{background:#ffffff0a;border-bottom:1px solid #ffffff55;color:#fff}
.form-contact .send-button{justify-content:center;background:transparent;border-color:#ffffff70}.form-contact .send-button:hover{background:#f5f2e9;color:#162234}
.motion-paused .geometry-art g{animation-play-state:paused!important}
@media(max-width:1050px){.form-hero-layout{grid-template-columns:53% 47%}.form-hero h1{font-size:8.2vw}.form-practice,.form-profile,.form-contact{gap:6%}.form-service summary{gap:15px}.form-service h3{font-size:30px}}
@media(max-width:768px){
 .form-hero.hero{height:100svh;min-height:790px;max-height:1100px}
 .form-opening{top:27px;left:23px;right:23px}.form-opening img{width:147px}.form-opening{flex-wrap:wrap;row-gap:22px}.form-opening nav{flex-basis:100%;justify-content:space-between;gap:8px;font-size:clamp(9px,2.5vw,11px)}
 .form-hero-layout{display:block;inset:135px 23px 85px}.form-hero h1{font-size:clamp(58px,16vw,95px);line-height:1.04;margin:22px 0 20px}.form-hero-tag{font-size:18px}.form-japanese{font-size:10px;max-width:none;margin-top:12px}.form-label{font-size:9px}
 .geometry-hero{width:255px;margin:0;position:absolute;right:-10px;bottom:-4px}
 .form-hero-bottom{left:23px;right:23px;bottom:25px;font-size:10px}
 .form-intro{padding:75px 23px;display:block}.form-intro h2{font-size:50px;margin:28px 0}.form-mini-art{display:none}.form-intro .prose{padding-top:10px}.variant-3 .form-intro .prose,.variant-3 .form-intro .prose>p:first-child{font-size:13px}
 .form-works{padding:75px 23px}.form-section-head{display:block;margin-bottom:40px}.form-section-head h2{font-size:57px;margin:28px 0}.form-link{font-size:11px}.form-works .work-grid{gap:34px 14px}.form-works .work-caption h3,:is(.variant-3,.variant-5) .archive-page .work-caption h3{font-size:11px}
 .form-practice{padding:75px 23px;display:block}.form-practice-heading h2{font-size:37px;margin-top:28px}.geometry-practice{width:230px;margin:10px 0 18px auto}
 .form-service h3{font-size:30px}.form-service summary{gap:15px;padding-block:23px}.form-service-action{font-size:9px!important}.form-service>div{padding-left:30px;font-size:12px}
 .form-profile,.form-contact{padding:75px 23px;display:block}.form-profile h2{font-size:53px;margin-top:28px}.form-profile h2 em{font-size:clamp(28px,8.6vw,36px)}.form-profile .company-copy{padding-top:35px}.form-profile .company-copy p,.form-profile .company-copy dt,.form-profile .company-copy dd{font-size:12px}
 .form-contact h2{font-size:84px;margin:28px 0}.form-contact .contact-form{margin-top:38px}
}
@media(prefers-reduced-motion:reduce){.geometry-art g{animation:none!important}}
@media(max-width:768px){.form-mini-art:has(.dialogue-art){display:block;width:min(100%,310px);margin:10px auto 30px}}
/* Contact details are supporting information throughout all four directions. */
body a[href^="mailto:"],body a[href^="tel:"]{font-size:12px;line-height:2.1;letter-spacing:0;opacity:.72;font-weight:400}
@media(max-width:768px){body a[href^="mailto:"],body a[href^="tel:"]{font-size:11px}}
/* Keep the existing 310px thumbnails close to their native resolution. */
body .work-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1300px;margin-inline:auto}
@media(min-width:769px) and (max-width:1050px){body .work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:768px){body .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-work-grid>.work-card:nth-child(n+9){display:none}}

.form-opening nav a{white-space:nowrap}

/* Selected versions: continue to the archive after the project grid. */
:is(.variant-13,.variant-14) .form-works-more{display:flex;justify-content:center;margin-top:50px}
:is(.variant-13,.variant-14) .form-works-more .form-link{display:block;padding:8px 2px}
@media(max-width:768px){
 :is(.variant-13,.variant-14) .form-works-more{margin-top:36px}
}

:is(.variant-13,.variant-14) .form-profile .company-copy h3{font-size:15px}
@media(max-width:768px){:is(.variant-13,.variant-14) .form-profile .company-copy h3{font-size:14px}}

/* Company rows: quiet horizontal rules, with continuous lines across both columns. */
:is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy{--profile-rule:rgba(22,34,52,.15)}
:is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy h3{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--profile-rule)}
:is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy dl{grid-template-columns:120px minmax(0,1fr);gap:0;margin-top:28px;border-bottom:1px solid var(--profile-rule)}
:is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy dt,:is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy dd{padding-block:20px;border-top:1px solid var(--profile-rule)}
:is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy dt{padding-right:25px;white-space:nowrap}
:is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy dd{min-width:0}
@media(max-width:768px){
 :is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy h3{padding-bottom:18px;margin-bottom:18px}
 :is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy dl{grid-template-columns:max-content minmax(0,1fr);margin-top:24px}
 :is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy dt,:is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy dd{padding-block:18px}
 :is([data-variant="13"],[data-variant="14"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"],[data-variant="21"],[data-variant="22"]) .form-profile .company-copy dt{padding-right:15px}
}

/* 22: the dark Contact section already supplies contrast; keep the heading quieter. */
body[data-variant="22"] .form-contact h2{font-size:clamp(65px,7.56vw,112px)}
@media(max-width:768px){body[data-variant="22"] .form-contact h2{font-size:76px}}
@media(max-width:360px){body[data-variant="22"] .form-contact h2{font-size:60px}}

/* Shared Contact field order: Company / Name / Phone / Email / Message. */
.form-contact .contact-form .form-fields label{grid-column:auto}
.form-contact .contact-form .form-fields .message-field{grid-column:1/-1}
.form-required-note{font:10px/1.6 LibreBaskerville,serif;opacity:.65;text-align:right;margin:0 0 20px}
.required-mark{font:inherit;opacity:.7;margin-left:.2em}
@media(max-width:768px){.form-contact .contact-form .form-fields label{grid-column:1}}
@media (min-width: 769px) {
  .variant-22 .form-intro {
    padding-bottom: 70px;
  }
}