@import url('/css/photo.css');
.web-page{--section-space:clamp(64px,7.2vw,116px)}
.web-page .eyebrow,.web-page .concept{font-size:10px}
.web-page figcaption{display:flex;justify-content:space-between;gap:20px;font-size:10px;line-height:1.4;letter-spacing:.04em;padding-top:16px}
.text-link{display:inline-block;position:relative;font-size:12px;font-weight:650;padding:14px 0;min-height:44px;border:0;border-bottom:1px solid currentColor;background:none;line-height:1.3}
.text-link:hover{border-bottom-color:transparent}
.web-hero{grid-template-columns:.8fr 1.2fr;min-height:min(820px,calc(100svh - var(--header-height)))}
.web-hero .hero-title-group{margin-top:clamp(50px,9vh,96px)}
.web-hero h1{font-size:clamp(90px,11.4vw,196px);letter-spacing:.1em}
.web-hero .hero-description{font-size:14px;line-height:1.5;margin:24px 0 16px}
.web-hero .hero-offer-group{padding-top:52px;padding-bottom:8px}
.hero-work{background:var(--lime);padding:34px 0 0;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.hero-devices{position:relative;display:grid;align-items:center;flex:1;padding:64px 36px 88px;perspective:1400px;min-height:490px}
.hero-desktop{width:100%;border:5px solid #1d1e1b;border-radius:9px;background:#1d1e1b;box-shadow:15px 30px 45px #25340940;transform:rotateY(-10deg) rotateZ(-5deg);transform-origin:center}
.hero-desktop>img{width:100%;height:auto;border-radius:0 0 4px 4px}
.browser-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 14px;background:#22231f;color:#fff;font-size:8px;letter-spacing:.03em;line-height:1.2}
.browser-dots{display:flex;gap:4px}.browser-dots i{width:4px;height:4px;background:#a8aaa4;border-radius:50%}
.hero-phone{position:absolute;bottom:48px;right:34px;width:clamp(110px,12vw,178px);padding:5px;border:1px solid #696d60;border-radius:19px;background:#141613;box-shadow:9px 16px 25px #28370844;transform:rotateZ(5deg);overflow:hidden}
.hero-phone img{width:100%;height:auto;border-radius:13px}
.hero-work figcaption{padding:18px var(--page-gutter);border-top:1px solid #38540d44;color:#25310c}
.js .hero-desktop{animation:screen-arrive 1350ms cubic-bezier(.16,1,.3,1) both}
.js .hero-phone{animation:phone-arrive 1300ms 160ms cubic-bezier(.16,1,.3,1) both}
@keyframes screen-arrive{from{opacity:0;transform:translateY(70px) rotateY(-24deg) rotateZ(-10deg)}to{opacity:1;transform:rotateY(-10deg) rotateZ(-5deg)}}
@keyframes phone-arrive{from{opacity:0;transform:translateY(80px) rotateZ(13deg)}to{opacity:1;transform:rotateZ(5deg)}}
.brief{background:var(--black);color:var(--paper)}
.brief .section-heading{display:flex;justify-content:space-between;margin-bottom:64px}
.brief-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:80px;align-items:end;margin-bottom:76px}
.brief-intro>p{font-size:15px;line-height:1.65;max-width:390px;color:#c6c5c0;justify-self:end}
.brief-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(48px,7vw,110px);align-items:center}
.brief-copy dl{margin:28px 0 0}.brief-copy dl>div{padding:19px 0;border-top:1px solid #ffffff30}
.brief-copy dt{font-size:13px;color:#c6c5c0;margin-bottom:9px}.brief-copy dd{font-size:19px;line-height:1.4;margin:0;max-width:330px;letter-spacing:-.025em}
.brief-note{font-size:12px;line-height:1.6;color:#aaa9a4;max-width:290px;margin-top:24px}
.brief-image img{width:100%;height:auto}.brief-image figcaption{color:#c6c5c0}
.visual-direction{font-size:12px;line-height:1.65;color:#c6c5c0;max-width:530px;margin-top:22px}
.chapter-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end;margin-bottom:62px}
.chapter-heading .display-title{font-size:clamp(58px,8.3vw,144px);letter-spacing:.09em;margin-top:27px}
.chapter-heading>p{font-size:clamp(19px,2vw,30px);line-height:1.2;letter-spacing:-.03em;justify-self:end;padding-right:9vw}
.assembly{display:grid;grid-template-columns:.6fr 1.4fr;gap:clamp(28px,4vw,72px);align-items:center}
.stage-tabs{display:flex;flex-direction:column}.stage-tab{text-align:left;border:0;border-top:1px solid #28282840;background:none;padding:18px 0 20px;min-height:70px}
.stage-tab:last-child{border-bottom:1px solid #28282840}.stage-tab>span{display:block;font-size:clamp(20px,2vw,30px);letter-spacing:-.045em;font-weight:500}
.stage-tab small{display:block;margin-top:7px;font-size:12px;line-height:1.5;color:#595b54}.stage-tab[aria-selected=true]>span{font-weight:750}.stage-tab[aria-selected=true]{border-top-color:var(--ink)}
.stage-tab[aria-selected=true]>span::before{content:'';display:inline-block;vertical-align:middle;width:9px;height:9px;margin-right:12px;background:var(--ink);border-radius:50%}
.stage-description{font-size:13px;line-height:1.65;max-width:310px;min-height:86px;margin:26px 0 12px}
.replay{font-size:11px}.replay>span{margin-left:26px;font-size:17px}.replay[disabled]{opacity:.65;cursor:default}
.assembly-visual{min-width:0;border:1px solid #28282830;box-shadow:0 20px 40px #2828280b;background:white;outline-offset:8px}
.assembly-canvas{position:relative;aspect-ratio:36/25;overflow:hidden;container-type:inline-size}
.assembly-canvas>*{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.content-layer{background:#fff;padding:6% 7%;display:flex;flex-direction:column;align-items:flex-start;gap:6%;font-size:clamp(11px,2cqw,17px)}
.content-brand{font-size:2.3cqw;font-weight:800}.content-topic>span{display:block;font-size:1.5cqw;margin-bottom:10px;letter-spacing:.06em;color:#676962}
.content-topic strong{font-size:4.4cqw;font-weight:550;line-height:1.14;letter-spacing:-.04em}.content-topic p{font-size:2.2cqw;line-height:1.7}.content-action{margin-top:auto;border-bottom:1px solid;padding-bottom:5px;font-size:2cqw}
.layout-layer{background:#e5e5de;padding:8%;overflow:hidden;opacity:0;transform:translateY(24px)}
.layout-nav{display:flex;justify-content:space-between;align-items:center;font-size:1.65cqw;position:relative;z-index:2}.layout-nav b{font-size:2cqw}
.layout-title{font-size:15cqw;font-weight:600;letter-spacing:-.07em;line-height:1.2;position:relative;z-index:2}
.layout-photo{position:absolute;inset:30% 8% 15%;overflow:hidden}.layout-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.68}
.layout-caption{position:absolute;bottom:7%;left:8%;right:8%;display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:1.8cqw;line-height:1.3}.layout-caption span{border:1px solid #282828;padding:8px 12px;border-radius:30px}
.finished-layer{clip-path:inset(0);opacity:1}
.assembly[data-stage="0"] .finished-layer,.assembly[data-stage="1"] .finished-layer{clip-path:inset(0 0 100% 0);opacity:0}
.assembly[data-stage="1"] .layout-layer{opacity:1;transform:none}
.js .assembly-canvas>*{transition:opacity 650ms ease,transform 900ms var(--ease-out),clip-path 1050ms var(--ease-in-out)}
.design-note{font-size:13px;line-height:1.5;margin-top:32px;text-align:right}
.static-note{font-size:12px;line-height:1.6;margin-top:24px}
html:not(.js) .stage-tabs,html:not(.js) .replay,html:not(.js) .device-controls{display:none}
.details{background:var(--black);color:var(--paper);display:grid;grid-template-columns:.65fr 1.35fr;gap:7vw;align-items:center}
.details-copy h2{margin:32px 0}.details-copy>p{font-size:14px;line-height:1.65;max-width:330px;color:#c6c5c0}.details-copy .text-link{margin-top:22px}
.details-shot>div{overflow:hidden}.details-shot img{width:100%;height:auto}.details-shot figcaption{color:#c6c5c0}
.project-motion{grid-column:1/-1;display:grid;grid-template-columns:1fr minmax(280px,440px);gap:clamp(32px,6vw,88px);align-items:center;border-top:1px solid #ffffff30;padding-top:40px}
.project-motion-copy h3{font-size:clamp(25px,2.6vw,36px);line-height:1.2;margin:18px 0;letter-spacing:-.035em;font-weight:500}.project-motion-copy>p:not(.eyebrow){max-width:420px;font-size:13px;line-height:1.65;color:#c6c5c0}
.project-motion-player{min-width:0}.project-motion-player video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#181b19}.project-motion-player video:focus-visible{outline:2px solid var(--lime);outline-offset:5px}.web-page .project-motion-player figcaption{font-size:9px;gap:12px;color:#c6c5c0;padding-top:12px}
.responsive{padding-bottom:72px}.responsive .chapter-heading{margin-bottom:30px}
.device-controls{display:flex;justify-content:center;gap:26px;margin-bottom:32px}.device-controls button{border:0;border-bottom:1px solid transparent;background:none;font-size:12px;min-height:44px;padding:10px 2px}.device-controls button[aria-pressed=true]{border-bottom-color:currentColor;font-weight:750}
.device-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:540px;padding:52px clamp(20px,5vw,85px);background:#d9e2cc;overflow:hidden}
.desktop-preview{max-width:960px;width:100%;border:5px solid #252723;border-radius:10px;overflow:hidden;box-shadow:0 25px 45px #27312029;z-index:1}.desktop-preview>img{width:100%;height:auto}
.mobile-preview{width:246px;border:7px solid #242621;border-radius:24px;overflow:hidden;background:#242621;box-shadow:0 25px 45px #27312035;z-index:1}.mobile-preview img{width:100%;height:auto;border-radius:16px}
.device-stage [hidden]{display:none!important}.device-side-note{position:absolute;bottom:42px;left:4vw;font-size:clamp(14px,2vw,28px);line-height:1.1;font-weight:650;letter-spacing:-.04em;display:none;color:#334428}
.device-stage[data-device=mobile] .device-side-note{display:block}
.js .device-stage.switching .desktop-preview,.js .device-stage.switching .mobile-preview{animation:device-in 600ms var(--ease-out)}
@keyframes device-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.result-bottom{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin-top:35px}.result-bottom>p{font-size:14px;line-height:1.65;max-width:430px}
.project-link{justify-self:end;display:flex;align-items:center;gap:40px;padding:18px 0;border-bottom:1px solid;font-size:19px;font-weight:550;letter-spacing:-.02em}.project-link>span{font-size:28px;transition:transform 300ms}.project-link:hover>span{transform:translate(3px,-3px)}
.project-disclosure{font-size:11px;line-height:1.6;color:#5b5d57;max-width:590px;margin-top:36px}
.web-contact{background:var(--lime);color:var(--ink)}.web-contact h2{font-size:clamp(120px,24vw,380px);letter-spacing:-.065em;line-height:.9}
.web-contact-bottom{display:flex;justify-content:space-between;gap:60px;align-items:end;margin-top:48px}.web-contact-bottom h3{font-size:clamp(26px,3vw,44px)}.web-contact-bottom p{font-size:14px;line-height:1.65;max-width:390px;margin-top:24px}.web-contact .contact-link{font-size:18px;min-height:48px;margin-bottom:8px}
.will-web-enter{opacity:0;transform:translateY(22px)}.will-web-enter.is-visible{opacity:1;transform:none;transition:transform 900ms var(--ease-out),opacity 700ms}
.web-reveal{clip-path:inset(0 0 0 100%)}.web-reveal[data-reveal=from-bottom]{clip-path:inset(100% 0 0 0)}.web-reveal.is-visible{clip-path:inset(0);transition:clip-path 1000ms var(--ease-in-out)}
@media(min-width:1800px){.web-hero{min-height:880px}.hero-devices{padding:80px 60px 100px}.assembly{grid-template-columns:.5fr 1.5fr}.assembly-visual{max-width:1180px}}
@media(max-width:1000px){.web-hero{grid-template-columns:.9fr 1.1fr}.web-hero h1{font-size:11vw}.hero-devices{min-height:470px;padding:55px 20px 100px}.hero-phone{right:18px;bottom:54px}.hero-work figcaption{font-size:8px}.brief-intro{gap:40px}.brief-layout{gap:36px;grid-template-columns:.8fr 1.2fr}.brief-copy dd{font-size:16px}.chapter-heading>p{padding-right:0}.assembly{grid-template-columns:.7fr 1.3fr;gap:28px}.stage-description{font-size:12px}.details{grid-template-columns:.8fr 1.2fr;gap:40px}.device-stage{min-height:440px}}
@media(max-width:760px){
 .web-hero{display:block;min-height:0}.web-hero .hero-copy{padding:28px var(--page-gutter) 34px}.web-hero .hero-title-group{margin-top:32px}.web-hero h1{font-size:clamp(98px,25vw,178px);letter-spacing:.11em}.web-hero .hero-offer-group{padding:0;margin-top:32px}.web-hero .hero-offer{font-size:28px}.web-hero .hero-description{font-size:13px;margin:18px 0 12px}.web-page .signature{margin-top:22px}
 .hero-work{padding-top:0}.hero-devices{min-height:0;aspect-ratio:1.13;padding:46px 30px 66px}.hero-phone{width:24%;min-width:85px;right:22px;bottom:25px;border-radius:12px;padding:3px}.hero-phone img{border-radius:8px}.hero-desktop{border-width:3px;border-radius:6px}.browser-bar{font-size:6px;padding:7px 8px;gap:6px}.hero-work figcaption{font-size:8px;padding:14px var(--page-gutter)}
 .brief .section-heading{margin-bottom:36px}.brief-intro{display:block;margin-bottom:40px}.brief-intro h2{font-size:clamp(32px,7.8vw,52px)}.brief-intro>p{font-size:13px;margin-top:24px;max-width:360px}.brief-layout{display:flex;flex-direction:column;gap:36px;align-items:stretch}.brief-copy dd{font-size:18px;max-width:330px}.brief-copy dl>div{padding:18px 0}.brief-note{max-width:330px}.brief-image{margin:0 calc(-1 * var(--page-gutter))}.brief-image figcaption{padding:14px var(--page-gutter) 0}
 .visual-direction{margin-left:var(--page-gutter);margin-right:var(--page-gutter)}.chapter-heading{display:block;margin-bottom:34px}.chapter-heading .display-title{font-size:clamp(48px,12.6vw,91px);letter-spacing:.1em;margin-top:24px}.chapter-heading>p{font-size:20px;margin-top:22px}
 .assembly{display:flex;flex-direction:column;gap:24px;align-items:stretch}.assembly-sidebar{display:contents}.stage-tabs{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:10px;order:0}.stage-tab{padding:12px 0;min-height:60px;border-bottom:0!important}.stage-tab>span{font-size:13px;letter-spacing:-.03em}.stage-tab small{font-size:9px;line-height:1.4}.stage-tab[aria-selected=true]>span::before{width:5px;height:5px;margin-right:5px}.stage-description{order:2;min-height:60px;margin:0;max-width:400px;font-size:13px}.assembly-visual{order:1;width:100%}.replay{order:3;align-self:flex-start}.assembly noscript{order:4}.design-note{text-align:left;font-size:12px;margin-top:25px}.content-topic>span{margin-bottom:5px}.layout-caption span{padding:5px 7px}
 .details{display:flex;flex-direction:column;gap:36px;align-items:stretch}.details-copy h2{margin:24px 0}.details-copy>p{font-size:13px;max-width:360px}.details-shot{margin:0 calc(-1 * var(--page-gutter))}.details-shot figcaption{padding:14px var(--page-gutter) 0}
 .project-motion{grid-template-columns:1fr;gap:26px;padding-top:32px}.project-motion-copy h3{font-size:27px}.project-motion-player{width:100%;max-width:440px}.web-page .project-motion-player figcaption{font-size:8px}
 .responsive{padding-bottom:54px}.responsive .display-title{font-size:clamp(70px,21vw,140px)}.device-controls{justify-content:flex-start;margin-bottom:22px;gap:28px}.device-stage{min-height:0;padding:32px 16px;aspect-ratio:1.12;margin:0 calc(-1 * var(--page-gutter))}.desktop-preview{border-width:3px;border-radius:6px}.device-stage[data-device=mobile]{aspect-ratio:auto;min-height:480px}.mobile-preview{width:204px;max-width:60%;border-width:5px}.device-side-note{font-size:11px;left:16px;bottom:20px}.result-bottom{display:block;margin-top:28px}.result-bottom>p{font-size:13px}.project-link{justify-content:space-between;font-size:19px;margin-top:20px;gap:16px}.project-disclosure{font-size:10px;margin-top:26px}.web-contact h2{font-size:26vw;margin-top:32px}.web-contact-bottom{display:block;margin-top:30px}.web-contact-bottom h3{font-size:27px}.web-contact-bottom p{font-size:13px;margin-top:20px}.web-contact .contact-link{font-size:16px;margin-top:24px}
}
@media(prefers-reduced-motion:reduce){.web-page *, .web-page *::before,.web-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.will-web-enter{opacity:1;transform:none}.web-reveal{clip-path:none}.hero-desktop{transform:none}.hero-phone{transform:none}}

.design-result img{width:100%;height:auto}.design-summary{display:grid;grid-template-columns:1fr 1fr;gap:8vw;margin-top:35px;font-size:15px;line-height:1.7}.design-result figcaption{font-size:10px;padding-top:14px}@media(max-width:760px){.design-summary{grid-template-columns:1fr;gap:18px}}

.web-hero .hero-work{background:linear-gradient(135deg,#e5edc4 0%,#bdce84 54%,#889b61 100%);position:relative}.hero-devices{perspective:none;padding:65px 35px 100px;background:linear-gradient(154deg,transparent 48%,#f3f5d126 48.2%,transparent 77%)}.hero-desktop,.js .hero-desktop{transform:none;animation:none;border:6px solid #393c35;border-radius:8px;box-shadow:0 2px 0 #ffffff70,0 28px 35px -18px #22301b85}.hero-phone,.js .hero-phone{transform:none;animation:none;bottom:48px;right:27px;box-shadow:0 15px 20px #26331b40}.hero-work figcaption{background:#dde7c485;color:#27301f}.hero-desktop:after{content:'';position:absolute;left:-3%;right:-3%;bottom:-10px;height:9px;background:linear-gradient(#c8ccc1,#7e8478);border-radius:0 0 50% 50%;box-shadow:0 5px 5px #35432b30}.hero-desktop{position:relative}@media(max-width:760px){.hero-devices{padding:40px 25px 65px}.hero-phone,.js .hero-phone{bottom:22px;right:18px}.hero-desktop,.js .hero-desktop{border-width:3px}}