/* Locally hosted Manrope variable font, SIL Open Font License. */
@font-face{font-family:Manrope;src:url('/assets/fonts/Manrope.ttf') format('truetype');font-style:normal;font-weight:200 800;font-display:swap}
:root{--yh-font:Manrope,Arial,sans-serif}
.portfolio-more{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #24282338;margin-top:55px;padding-top:24px;gap:24px}.portfolio-more p{font-size:12px;color:#626958}.portfolio-more button{border:1px solid #848b78}.portfolio-more button[hidden]{display:none}.project-caption{align-items:start}.project-caption h3{max-width:75%}.project-caption span{text-align:right;max-width:40%;font-size:10px}#dialog-images img{display:block;width:100%;height:auto;object-fit:contain;max-height:none}
.contact-form-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:10%;padding:65px 0 75px;border-bottom:1px solid #24282338}.form-intro h3{font-size:clamp(24px,2.6vw,40px);line-height:1.2;letter-spacing:-.045em;margin:25px 0;font-weight:700}.form-intro h3 span{font-weight:300}.form-intro>p:not(.eyebrow){font-size:14px;line-height:1.7}.form-intro .form-note{margin-top:28px;color:#666e5e;font-size:12px}.form-note a{text-decoration:underline;text-underline-offset:3px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:25px}.form-field{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}.form-field label{font-size:13px}.form-field .optional{font-size:11px;color:#676d61}.form-field input,.form-field textarea{border:0;border-bottom:1px solid #89917f;border-radius:0;padding:10px 0;background:transparent;font:inherit;font-size:16px;color:#242823;width:100%;min-width:0}.form-field textarea{resize:vertical;min-height:120px}.form-field input:focus,.form-field textarea:focus{outline:2px solid #687650;outline-offset:5px}.form-field [aria-invalid=true]{border-color:#a33229}.field-error{font-size:12px;color:#a33229;min-height:0}.field-error:empty{display:none}.form-action{display:flex;align-items:center;justify-content:space-between;gap:20px}.form-action>span{font-size:11px;color:#666e5e}.form-action button{background:#242823;color:#f2f1eb;border:1px solid #242823;cursor:pointer}.form-action button:hover{background:#424c36}#form-status{font-size:13px;line-height:1.65;margin-top:20px;max-width:580px}#form-status:empty{display:none}
@media(max-width:700px){.contact-form-layout{grid-template-columns:1fr;gap:30px;padding:35px 0 40px}.form-intro h3{font-size:30px}.form-row{grid-template-columns:1fr;gap:0}.form-action{align-items:start;flex-direction:column}.form-action button{width:100%;justify-content:space-between}.project-caption h3{font-size:19px;max-width:70%}.portfolio-more{margin-top:32px;align-items:start;flex-direction:column}.portfolio-more .button{width:100%;justify-content:space-between}}
body{font-family:var(--yh-font);font-synthesis:none}
h1,h2{font-family:var(--yh-font);font-weight:700;letter-spacing:-.055em;line-height:1.08}
em,h1 em,h2 em{font-family:var(--yh-font);font-style:normal;font-weight:200;letter-spacing:-.045em}
.intro-text h2>span{font-weight:300;color:#71786a}
.story-caption>span,.process article>span{font-family:var(--yh-font);font-weight:200}
h3{font-family:var(--yh-font)}
.hero h1{font-size:clamp(62px,7.4vw,118px);line-height:1.06}
.hero-bottom p{max-width:490px}
.hero-actions{flex-shrink:0}
.contact-title h2{font-size:clamp(50px,7.5vw,118px)}
@media(max-width:1000px){.hero-bottom{align-items:start}.hero-actions{flex-direction:column;align-items:start;gap:10px}.hero-bottom p{max-width:330px}}
@media(max-width:700px){h1 em,h2 em,em{font-weight:300}.hero h1{font-size:clamp(46px,11.9vw,76px)}.hero-actions{flex-direction:row;align-items:center;gap:16px}.hero-content{bottom:95px}.hero-bottom p{max-width:100%;font-size:14px}.hero-actions .button{padding:17px 16px;gap:19px}.hero-actions .text-link{font-size:12px}.intro-text h2{font-size:36px}.works-heading h2{font-size:40px}.contact-title h2{font-size:clamp(36px,9.8vw,64px)}.contact-title>span{font-size:52px}.process h3{font-size:17px}.service-list h3{font-size:20px}.story-heading h2{font-size:36px}}

.story{height:280vh}.scene-final{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden;z-index:1}.scene-final img{width:100%;height:100%;object-fit:cover}.final-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,20,17,.56),transparent 35%,transparent 60%,rgba(12,20,17,.74))}.story-heading,.story-caption,.story-stages,.scene-note,.story-skip{z-index:3}.story-caption>span{color:#d6debf}.story-stages>span{opacity:.7}.story-stages>span.active{opacity:1}@media(max-width:700px){.story{height:250svh}.scene-final{top:31%;bottom:auto;height:33%;mask-image:linear-gradient(transparent,#000 10%,#000 90%,transparent)}.final-shade{background:transparent}.story-caption{bottom:120px}.story-stages{font-size:9px}.story-heading{top:120px}}@media(prefers-reduced-motion:reduce){.story{height:850px}.scene-final{display:none}}
#intro{overflow:hidden;background:#222721;isolation:isolate;align-content:center;justify-items:start;padding:8vw;gap:42px}#intro.show{display:grid;animation:yh-intro-reveal .65s 2.15s cubic-bezier(.7,0,.25,1) both}.intro-mark{font-family:var(--yh-font);font-size:60px;font-weight:700;letter-spacing:-4px;position:relative;z-index:2;animation:yh-intro-content .45s both}.intro-mark>span{font-size:9px;font-weight:300;letter-spacing:.18em}.intro-thesis{font-family:var(--yh-font);font-size:clamp(42px,6vw,88px);line-height:1.12;letter-spacing:-.05em;position:relative;z-index:2;animation:yh-intro-content .55s .08s both}.intro-thesis strong{font-weight:700}.intro-thesis>span{font-weight:200}.intro-caption{position:absolute;left:8vw;bottom:7%;font-size:10px;letter-spacing:.16em;color:#bfc8af}.intro-drawing{position:absolute;inset:15% 7% 16% 50%;opacity:.45;transform:skewY(-12deg);pointer-events:none}.intro-drawing i{display:block;position:absolute;background:#afba98;transform-origin:left center;height:1px;animation:yh-line-draw .65s ease-out both}.intro-drawing i:nth-child(1){top:20%;width:100%;animation-delay:.05s}.intro-drawing i:nth-child(2){top:60%;width:100%;animation-delay:.15s}.intro-drawing i:nth-child(3){top:85%;width:100%;animation-delay:.25s}.intro-drawing i:nth-child(4){top:20%;left:10%;height:65%;width:1px;transform-origin:top;animation-name:yh-line-vertical;animation-delay:.1s}.intro-drawing i:nth-child(5){top:20%;left:80%;height:65%;width:1px;transform-origin:top;animation-name:yh-line-vertical;animation-delay:.2s}.intro-playing .hero-content{animation:yh-hero-enter .7s 2s both}@keyframes yh-line-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes yh-line-vertical{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes yh-intro-content{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes yh-intro-reveal{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}@keyframes yh-hero-enter{from{opacity:.1;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){#intro{padding:8%;gap:35px}.intro-thesis{font-size:48px}.intro-thesis>span{font-weight:300}.intro-drawing{inset:20% 8% 20% 35%;opacity:.25}.intro-caption{font-size:8px;letter-spacing:.1em}}@media(prefers-reduced-motion:reduce){#intro{display:none!important}.intro-playing .hero-content{animation:none}}

.brand{position:relative;width:142px;display:block;line-height:0}.brand-logo{display:block;width:100%;height:auto}.brand-dark{display:none}#header.scrolled .brand-logo,footer .brand-logo{display:none}#header.scrolled .brand-dark,footer .brand-dark{display:block}.intro-mark{display:block;width:190px;height:auto;letter-spacing:normal}@media(max-width:700px){.brand{width:112px}.intro-mark{width:155px}}

/* Full desktop render: retain foreground and calibrate the 3D projection to this fit. */
@media(min-width:701px){.scene-final{background:#202620}.scene-final img{object-fit:contain;object-position:center bottom}.static-story #scene-fallback{object-fit:contain;object-position:center bottom;background:#202620}}

/* The person behind YH, based on the studio's original about page. */
.about-person{padding:90px 7%;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:9%;align-items:center}
.about-person .about-copy{padding:0;max-width:620px}
.about-person .about-copy h2{font-size:clamp(40px,4.3vw,68px);margin:28px 0 38px}
.about-person-name{border-top:1px solid #24282330;padding-top:24px;margin-bottom:26px}
.about-person-name h3{font-size:24px;font-weight:600;letter-spacing:-.03em;margin-bottom:8px}
.about-person .about-person-name p{font-size:11px;letter-spacing:.07em;line-height:1.7;max-width:360px;margin-bottom:0;text-transform:uppercase}
.about-person .about-copy>p:not(.eyebrow){font-size:15px;line-height:1.8}
.about-portrait{margin:0;align-self:center}
.about-portrait img{width:100%;height:auto;max-height:720px;aspect-ratio:1517/2560;object-fit:cover;object-position:center}
.about-portrait figcaption{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #24282330;padding-top:14px;margin-top:16px;font-size:10px;letter-spacing:.08em;color:#56604d}
@media(max-width:700px){.about-person{padding:58px 6%;grid-template-columns:1fr;gap:36px}.about-person .about-copy h2{font-size:43px}.about-person-name h3{font-size:23px}.about-portrait{width:100%;max-width:420px;justify-self:center}.about-portrait img{max-height:none}.about-person .about-copy>p:not(.eyebrow){font-size:15px}}

/* More breathing room around the complete portrait, without inventing image content. */
.about-person .about-portrait{width:86%;justify-self:center}
.about-person .about-portrait img{max-height:none;object-fit:contain}
@media(max-width:700px){.about-person .about-portrait{width:86%;max-width:360px}}