:root{--ink:#171715;--paper:#f4f0e7;--coral:#3455f5;--lavender:#b6a0e7;--lime:#d9f451}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:6px}.header{height:108px;position:sticky;top:0;z-index:20;background:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:20px 4vw;border-bottom:1px solid var(--ink)}.brand{font-size:48px;font-weight:900;letter-spacing:-3px;line-height:.8}.brand span{display:block;font-size:15px;letter-spacing:0;margin:9px 0 0 4px}.header nav{display:flex;gap:32px;align-items:center;font-weight:700}.header button{background:none;border:0;font-weight:700;padding:12px}.hero-track{height:145vh}.hero{height:calc(100vh - 108px);min-height:540px;display:flex;position:sticky;top:108px;overflow:hidden}.hero-copy{width:48%;flex-shrink:0;background:var(--coral);padding:36px 3vw;display:flex;flex-direction:column;justify-content:space-between;z-index:2}.eyebrow,.section-top{font-size:14px;letter-spacing:1px;text-transform:uppercase}h1{font-size:clamp(48px,6.5vw,106px);font-weight:900;line-height:.94;letter-spacing:-.055em;margin:0 0 24px}p{font-size:18px;line-height:1.55}.hero-copy p{font-size:19px;font-weight:700}.cta{display:inline-block;background:var(--lime);color:var(--ink);padding:18px 30px;border:0;border-radius:100px;font-weight:700;font-size:18px;transition:transform .2s}.cta:hover{transform:translateY(-3px)}.hero-art{flex:1;min-width:0;background:var(--lavender);position:relative}.hero-art img{width:100%;height:100%;object-fit:cover}.hero-art span{position:absolute;bottom:18px;right:18px;background:var(--paper);padding:8px 12px;font-size:12px}.section{padding:80px 5vw;scroll-margin-top:20px}.section-top{border-top:1px solid;padding-top:18px;display:flex;justify-content:space-between;gap:20px}h2{font-size:clamp(44px,6vw,88px);letter-spacing:-.05em;line-height:1;font-weight:900;margin:44px 0 30px}.intro{max-width:660px}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;margin-top:44px}.project-cover{padding:32px;min-height:400px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .3s}.project-cover:hover{transform:translateY(-7px)}.goods{background:var(--lime)}.salon{background:var(--lavender)}.project-cover>span{font-size:13px;text-transform:uppercase;letter-spacing:1px}.project-cover h3{font-size:clamp(56px,6vw,94px);line-height:.95;letter-spacing:-.055em;margin:32px 0;font-weight:900}.project-caption{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-top:20px}.project-caption h3{font-size:23px;margin:0}.project-caption span{font-size:14px}.project-details{background:none;border:0;border-bottom:1px solid;padding:8px 0;font-weight:700}.services{background:var(--ink);color:var(--paper)}details{border-bottom:1px solid #777;padding:24px 0}summary{list-style:none;cursor:pointer;font-size:clamp(24px,3vw,43px);font-weight:700;letter-spacing:-.03em;display:flex;justify-content:space-between;gap:25px}summary::-webkit-details-marker{display:none}details p{max-width:700px}details[open] summary span{transform:rotate(45deg)}.about{background:var(--lavender)}.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:center}.about-grid h2{font-size:clamp(42px,4.8vw,72px)}.contact{background:var(--coral)}.contact h2{font-size:clamp(68px,9vw,140px)}form{max-width:800px;display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}label{display:flex;flex-direction:column;gap:10px;font-weight:700}input,textarea{background:var(--paper);border:1px solid var(--ink);border-radius:0;padding:16px;min-width:0;color:var(--ink)}.full{grid-column:1/-1}form .cta{justify-self:start}#form-status{font-size:14px;margin:0;align-self:center}footer{padding:50px 5vw;display:flex;align-items:center;justify-content:space-between;gap:35px}footer>span{font-size:14px}dialog{background:var(--ink);color:var(--paper);border:0;padding:40px;max-width:800px;width:90%;max-height:90vh}dialog::backdrop{background:#17171599}.close{display:block;margin-left:auto;background:none;color:inherit;border:0;padding:12px;font-size:16px}#menu nav{display:flex;flex-direction:column;margin:25px 0}#menu nav a{font-size:clamp(40px,7vw,80px);font-weight:900;letter-spacing:-.04em;border-bottom:1px solid #777;padding:14px 0}#project-modal h2{font-size:50px}#project-modal li{font-size:18px;line-height:1.8}@media(max-width:760px){.header{height:86px;padding:18px 6vw}.brand{font-size:36px}.header nav>a{display:none}.hero-track{height:auto}.hero{height:auto;min-height:0;position:relative;top:0;display:block}.hero-copy{width:100%!important;padding:30px 6vw;min-height:450px}h1{font-size:clamp(54px,12vw,88px)!important}.hero-art{height:420px}.hero-copy .eyebrow{font-size:12px}.section{padding:55px 6vw}.section-top{font-size:12px}.section-top span:last-child{max-width:45%;text-align:right}.project-grid,.about-grid,form{grid-template-columns:1fr}.project-cover{min-height:360px}.project-caption{align-items:start;flex-direction:column;gap:6px}.about-grid{gap:0}.full{grid-column:auto}.contact h2{font-size:76px}footer{flex-direction:column;align-items:start}dialog{padding:24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.hero-track{height:auto}.hero{position:relative;top:0}}
.site-preview{display:block;position:relative;aspect-ratio:1.5;background:var(--paper);overflow:hidden;isolation:isolate;border:1px solid var(--ink)}.site-preview iframe{display:block;width:1200px;height:800px;max-width:none;border:0;pointer-events:none;transform-origin:top left}.preview-overlay{position:absolute;right:20px;bottom:20px;background:var(--ink);color:var(--paper);padding:13px 19px;border-radius:40px;font-size:14px;transition:transform .2s}.site-preview:hover .preview-overlay{transform:translateY(-4px)}.project-actions{display:flex;flex-wrap:wrap;gap:25px;align-items:center}.project-actions .project-details{font-size:15px}.portfolio-note{font-size:14px;max-width:750px;margin-top:45px}.preview-salon{margin-top:65px}#case-study-sections{margin:35px 0}#case-study-sections section{border-top:1px solid #666;padding:20px 0 10px}#case-study-sections h3{font-size:21px;margin:0 0 10px}#case-study-sections p{font-size:16px;line-height:1.65;margin:0}#project-modal{padding-bottom:45px}#project-modal .cta{margin:0 0 10px}#case-study-link:focus-visible{outline-color:var(--paper)}@media(max-width:760px){.preview-salon{margin-top:0}.site-preview{aspect-ratio:1.5}.preview-overlay{right:12px;bottom:12px;padding:10px 13px;font-size:12px}.project-actions{gap:18px}.project-actions .project-details{font-size:14px}#project-modal h2{font-size:42px}.portfolio-note{margin-top:30px}}




.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px}.project{min-width:0;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,38px);background:var(--coral);overflow:hidden}.project:nth-child(2){background:var(--lime)}.project:nth-child(3){background:var(--lavender)}.project-caption{display:flex;flex-direction:column-reverse;align-items:start;gap:20px;margin:0 0 28px;min-height:175px}.project-caption h3{font-size:clamp(36px,4.3vw,68px);font-weight:900;line-height:.94;letter-spacing:-.055em;margin:0;max-width:8ch}.project-caption span{display:block;font-size:14px;line-height:1.5;font-weight:700;max-width:24ch}.site-preview{width:100%;min-width:0;contain:inline-size;aspect-ratio:1.5;border:0;transition:transform .25s;background:#090909;flex-shrink:0}.site-preview:hover{transform:translateY(-5px)}.preview-mero img{display:block;width:100%;height:auto;max-width:none}.preview-mero{aspect-ratio:1.5}.preview-mero img{position:absolute;top:0;width:142%;max-width:none;left:-21%}.preview-salon{margin-top:0}.project>p{margin:24px 0;font-size:16px;line-height:1.5}.project-actions{margin-top:auto;align-items:start;gap:12px;flex-direction:column}.project-actions .project-details{font-size:14px;padding-bottom:7px}.preview-overlay{right:12px;bottom:12px;padding:10px 14px;background:var(--paper);color:var(--ink);font-size:13px;font-weight:700}.portfolio-note{margin-top:28px}@media(max-width:1100px) and (min-width:761px){.project-caption{min-height:165px}.project-caption h3{font-size:clamp(34px,4.3vw,48px)}.project-caption span{font-size:14px}.project{padding:22px}.preview-overlay{right:8px;bottom:8px;padding:8px 10px;font-size:12px}}@media(max-width:760px){.project-grid{grid-template-columns:minmax(0,1fr);margin-top:32px;gap:0}.project{padding:30px}.project-caption{min-height:0;gap:16px;margin-bottom:24px}.project-caption h3{font-size:clamp(48px,10vw,76px);max-width:none}.site-preview{aspect-ratio:1.5}.preview-mero{aspect-ratio:2.13}.preview-mero img{position:static;width:100%;left:auto}.project>p{margin:20px 0}.project-actions{flex-direction:row;gap:16px 24px}}@media(prefers-reduced-motion:reduce){.site-preview:hover{transform:none}}

.project-caption{order:0}.site-preview{order:1}.project>p{order:2}.project-actions{order:3}

.project-grid{gap:20px}.project-caption{height:220px;min-height:220px;flex-shrink:0}.site-preview,.preview-mero{aspect-ratio:16/10;flex-shrink:0}.preview-mero img{position:static;display:block;width:100%;height:100%;object-fit:contain;object-position:center;max-width:100%;transform:none}.site-preview iframe{height:800px}@media(max-width:1100px) and (min-width:761px){.project-grid{gap:16px}.project-caption{height:195px;min-height:195px}}@media(max-width:760px){.project-grid{gap:20px}.project-caption{height:auto;min-height:0}.site-preview,.preview-mero{aspect-ratio:16/10}.preview-mero img{height:100%;object-fit:contain}}

@media(min-width:761px) and (max-width:1100px){.hero-track{height:auto}.hero{position:relative;top:0;height:660px;min-height:0;max-height:calc(100svh - 108px)}.hero-copy{width:48%!important;padding:30px 3vw}.hero-copy h1{font-size:clamp(42px,5.5vw,62px)!important;line-height:.96}.hero-copy p{font-size:17px}.hero-copy .eyebrow{font-size:13px;line-height:1.4}.hero-art img{object-position:center}.hero-copy .cta{padding:16px 24px;font-size:17px}}

.project-caption{justify-content:flex-end;height:165px;min-height:165px;gap:18px}@media(min-width:901px) and (max-width:1100px){.project-caption{height:145px;min-height:145px}}@media(max-width:900px){.project-grid{grid-template-columns:minmax(0,1fr);gap:20px}.project{padding:30px}.project-caption{height:auto;min-height:0;justify-content:flex-end;gap:16px;margin-bottom:24px}.project-caption h3{font-size:clamp(48px,7vw,68px);max-width:none}.site-preview,.preview-mero{aspect-ratio:16/10}.preview-mero img{width:100%;height:100%;object-fit:contain}.project>p{margin:20px 0;max-width:600px}.project-actions{flex-direction:row;gap:16px 24px}}

/* Compact scroll wordmark; reserve the header footprint to keep navigation steady. */
.header .brand{position:relative;display:block;width:170px;height:62px;line-height:.8;letter-spacing:0}
.header .brand-word{display:block;font-size:48px;font-weight:900;letter-spacing:-3px;margin:0;transform-origin:left center;transform:translateY(calc(var(--brand-progress,0)*10px)) scale(calc(1 - var(--brand-progress,0)*.25));will-change:transform}
.header .brand-tagline{position:absolute;left:4px;top:47px;margin:0;font-size:15px;letter-spacing:0;opacity:calc(1 - var(--brand-progress,0));transform:translateY(calc(var(--brand-progress,0)*-5px));will-change:transform,opacity}
@media(max-width:760px){.header .brand{width:130px;height:48px}.header .brand-word{font-size:36px}.header .brand-tagline{top:35px;font-size:13px}}

/* Shrink the visible header without changing document flow on every scroll frame. */
:root{--header-height:calc(108px - var(--brand-progress,0)*24px)}
.header{height:108px;padding-top:10px;padding-bottom:10px;border-bottom:0;clip-path:inset(0 0 calc(var(--brand-progress,0)*24px) 0)}
.header::after{content:"";position:absolute;left:0;right:0;top:calc(var(--header-height) - 1px);height:1px;background:var(--ink);pointer-events:none}
.header .brand,.header nav{transform:translateY(calc(var(--brand-progress,0)*-12px))}
@media(min-width:1101px){.hero{top:var(--header-height);height:calc(100vh - 108px)}}
@media(max-width:760px){:root{--header-height:calc(86px - var(--brand-progress,0)*14px)}.header{height:86px;clip-path:inset(0 0 calc(var(--brand-progress,0)*14px) 0)}.header .brand,.header nav{transform:translateY(calc(var(--brand-progress,0)*-7px))}}

.project-caption h3{max-width:none}.project-caption h3 b{display:block;white-space:nowrap;font:inherit}

.project-caption .mero-title{white-space:nowrap;max-width:none}
@media(min-width:901px){.project-caption{height:auto}.project-caption span{min-height:42px}.project-caption h3{min-height:1.88em}}
@media(max-width:380px){.project-caption .mero-title{font-size:clamp(36px,10vw,48px)}}

/* One shared title scale and one line for every project. */
.project-caption{container-type:inline-size;height:auto;min-height:0;gap:18px}
.project-caption h3,.project-caption .mero-title{font-size:clamp(1.5rem,16cqw,4.25rem);line-height:1;min-height:0;max-width:none;white-space:nowrap;letter-spacing:-.055em}
.project-caption span{min-height:42px}
@media(max-width:900px){.project-caption span{min-height:0}}

/* Keep all three disciplines visible across hero sizes. */
.hero-art{background:#0751df}.hero-art img{object-fit:contain;object-position:center}

.hero-collage{background:var(--lavender);overflow:hidden;isolation:isolate}.hero-page{position:absolute;overflow:hidden;background:white;box-shadow:0 18px 40px #17171530;pointer-events:none;border:1px solid var(--ink);transform-origin:center}.hero-page iframe{display:block;width:1200px;height:900px;border:0;transform-origin:top left;pointer-events:none}.hero-page-shop{width:91%;aspect-ratio:4/3;top:7%;left:15%;transform:rotate(8deg)}.hero-page-salon{width:78%;aspect-ratio:4/3;bottom:2%;left:8%;transform:rotate(-6deg)}.hero-collage>span{z-index:3}@media(max-width:760px){.hero-page-shop{width:78%;top:4%;left:28%}.hero-page-salon{width:82%;left:7%;bottom:2%}}

.header button{color:var(--ink)}
.hero-page iframe{width:1200px!important;min-width:1200px!important;max-width:none!important;height:900px!important;zoom:1;transform:scale(var(--preview-scale,1));transform-origin:top left;backface-visibility:hidden}
.hero-page-shop{transform:translateY(calc(var(--collage-progress,0)*-55px)) rotate(calc(8deg - var(--collage-progress,0)*9deg))}
.hero-page-salon{transform:translateY(calc(var(--collage-progress,0)*-30px)) rotate(calc(-6deg + var(--collage-progress,0)*7deg))}
@media(max-width:900px){.hero-track{height:auto}.hero{position:relative;top:0;display:block;height:auto;min-height:0;max-height:none}.hero-copy{width:100%!important;min-height:0;padding:32px 6vw;gap:40px}.hero-copy h1{font-size:clamp(48px,8vw,70px)!important;max-width:650px}.hero-copy p{max-width:620px}.hero-collage{height:480px}.hero-page-shop{width:80%;aspect-ratio:4/3;left:23%;top:4%}.hero-page-salon{width:77%;aspect-ratio:4/3;left:6%;bottom:3%}}
@media(max-width:760px){.hero-collage{height:420px}.hero-page-shop{width:95%;left:18%;top:6%}.hero-page-salon{width:88%;left:5%;bottom:6%}.hero-collage>span{font-size:10px;right:10px;bottom:9px;padding:5px 8px}}
@media(prefers-reduced-motion:reduce){.hero-page-shop{transform:rotate(8deg)}.hero-page-salon{transform:rotate(-6deg)}}

.hero-page-content{display:block;width:1200px;height:900px;transform:scale(var(--preview-scale,1));transform-origin:top left;pointer-events:none}

.salon-preview-static{width:100%;height:100%;background:white;color:#242323;font-family:Arial,Helvetica,sans-serif;display:flex;flex-direction:column}.salon-preview-header{height:15%;display:flex;align-items:center;justify-content:space-between;padding:2% 4%;gap:3%}.salon-preview-header strong{font-size:clamp(20px,3vw,38px);letter-spacing:-.07em;line-height:1}.salon-preview-header small{display:block;font-size:5px;letter-spacing:.06em;margin-top:4px}.salon-preview-header>span{font-size:8px}.salon-preview-header b,.salon-preview-copy b{font-size:8px;padding:9px 12px;background:#f2d3e4;font-weight:500;white-space:nowrap}.salon-preview-photo{position:relative;width:100%;aspect-ratio:16/9;flex-shrink:0;overflow:hidden}.salon-preview-photo>img{display:block;width:100%;height:100%;object-fit:contain}.salon-preview-copy{position:absolute;inset:0 0 0 52%;padding:5% 4%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:8%;color:white;background:linear-gradient(90deg,transparent,#000b)}.salon-preview-copy small{font-size:5px;letter-spacing:.1em}.salon-preview-copy strong{font-size:clamp(20px,3vw,42px);line-height:1.05;font-weight:500;letter-spacing:-.045em}.salon-preview-copy>span{font-size:8px;line-height:1.5}.salon-preview-copy b{color:#242323}.salon-preview-footer{flex:1;display:flex;align-items:center;justify-content:center;font-size:clamp(10px,1.2vw,17px);padding:3%}@media(max-width:760px){.salon-preview-header>span{display:none}.salon-preview-copy strong{font-size:26px}.salon-preview-header strong{font-size:26px}}

.hero-layout-shop .offhours-brand{display:inline-flex;flex-direction:column;align-items:flex-start;color:var(--ink);text-decoration:none;flex-shrink:0}.hero-layout-shop .offhours-brand .offhours-wordmark{display:flex;align-items:baseline;gap:.12em;font-family:Arial,Helvetica,sans-serif;font-size:44px;font-weight:900;letter-spacing:-.085em;line-height:.95;margin:0}.hero-layout-shop .offhours-brand .offhours-off{display:inline-block;font:inherit;letter-spacing:inherit;line-height:inherit;margin:0;transform:rotate(-8deg) translateY(-.055em);border-bottom:.09em solid #b80075;padding-bottom:.025em}.hero-layout-shop .offhours-brand .offhours-hours{display:inline-block;font:inherit;letter-spacing:inherit;line-height:inherit;margin:0}.hero-layout-shop .offhours-brand .offhours-dot{display:inline;font:inherit;letter-spacing:inherit;margin:0;color:#b80075}.hero-layout-shop .offhours-brand .offhours-tagline{display:block;font-family:Arial,Helvetica,sans-serif;font-size:9px;font-weight:700;letter-spacing:.14em;line-height:1.4;margin:11px 0 0 2px}.hero-layout-shop .offhours-footer .offhours-wordmark{font-size:48px}@media(max-width:760px){.hero-layout-shop .offhours-brand .offhours-wordmark{font-size:34px}.hero-layout-shop .offhours-brand .offhours-tagline{font-size:8px;letter-spacing:.1em}.hero-layout-shop .offhours-footer .offhours-wordmark{font-size:44px}}

/* Selected work: stronger titles and responsive card motion. */
.project-caption h3,.project-caption .mero-title{font-size:clamp(1.5rem,17cqw,5rem);font-weight:900;text-transform:uppercase;letter-spacing:-.065em;line-height:1.02;white-space:nowrap}
.project-caption{gap:16px;margin-bottom:28px}
.project-caption h3{padding-bottom:12px;border-bottom:3px solid currentColor;width:100%}
.project-grid{align-items:stretch}
.project{position:relative;transform-origin:50% 65%;transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1);overflow:visible}
.project:nth-child(1){--work-tilt:-.8deg}.project:nth-child(2){--work-tilt:.65deg}.project:nth-child(3){--work-tilt:-.6deg}
@media(hover:hover) and (pointer:fine){.project:hover,.project:focus-within{transform:translateY(-10px) rotate(var(--work-tilt));box-shadow:0 16px 0 -6px var(--ink);z-index:2}.project:hover .preview-overlay{transform:translateY(-3px)}.project .site-preview:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.project{transition:none}.project:hover,.project:focus-within{transform:none;box-shadow:none}.project .preview-overlay{transition:none;transform:none}}

/* Oversized identity anchors the hero; the message stays still and readable. */
.hero-track{height:auto}
.hero{position:relative;top:0;display:grid;grid-template-columns:48% 52%;grid-template-rows:minmax(450px,1fr) auto;height:auto;min-height:calc(100svh - 108px);max-height:none;background:var(--coral)}
.hero-copy{width:auto!important;min-height:450px;padding:32px 4vw 36px;gap:52px;justify-content:space-between}
.hero-copy h1{font-size:clamp(48px,5.7vw,90px)!important;line-height:.94;max-width:10ch;margin-bottom:22px}
.hero-copy p{font-size:clamp(17px,1.3vw,20px);max-width:38ch;margin:0 0 24px}
.hero-copy .eyebrow{max-width:30ch;line-height:1.5}
.hero-collage{height:auto;min-height:450px}
.hero-wordmark{grid-column:1/-1;min-width:0;background:var(--lime);color:var(--ink);padding:20px 0 16px;border-top:0;overflow:hidden}
.wordmark-window{overflow:hidden;width:100%}
.wordmark-track{display:flex;width:max-content;will-change:transform}
.wordmark-track>span{display:block;flex:none;font-size:clamp(100px,16vw,300px);font-weight:900;line-height:.9;letter-spacing:-.065em;white-space:pre;padding:0 .12em .09em}
.wordmark-track i{font-style:normal;color:var(--coral);font-size:.82em;vertical-align:.05em;padding:0 .12em}
.wordmark-tools{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 4vw 0;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.wordmark-tools button{display:flex;align-items:center;gap:12px;padding:10px 0;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.wordmark-tools button[hidden]{display:none}
@media(max-width:1100px) and (min-width:761px){.hero{grid-template-columns:50% 50%;min-height:0}.hero-copy{padding:30px 4vw;min-height:430px;gap:40px}.hero-copy h1{font-size:clamp(48px,6vw,66px)!important}.hero-collage{min-height:430px}}
@media(max-width:760px){.hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;min-height:0}.hero-copy{min-height:0;padding:30px 6vw 36px;gap:32px}.hero-copy h1{font-size:clamp(52px,11vw,80px)!important;max-width:12ch}.hero-copy p{font-size:17px}.hero-collage{height:400px;min-height:0}.hero-wordmark{padding-top:24px}.wordmark-track>span{font-size:clamp(100px,22vw,170px)}.wordmark-tools{padding:12px 6vw 0;font-size:10px;gap:12px}.wordmark-tools>span{max-width:20ch;line-height:1.5}.wordmark-tools button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.wordmark-track{transform:none!important;will-change:auto;width:100%}.wordmark-track>span{font-size:7.7vw;white-space:nowrap;padding:0 4vw;line-height:1.1}.wordmark-track>span+span{display:none}}

/* Portrait-led Enbarr direction, approved October 9. */
:root{--paper:#f6f5f1;--coral:#3455f5}
.header{background:rgba(246,245,241,calc(var(--brand-progress,0)*.96));clip-path:none;height:108px;padding:18px 4.5vw}
.header::after{display:none}.header .brand,.header nav{transform:none}.header .brand-word{font-size:42px;transform:none;letter-spacing:-2.5px}.header .brand-tagline{top:41px;font-size:13px;letter-spacing:3px;transform:none;opacity:1}.header .brand{height:58px;width:150px}.header nav{gap:32px;font-size:14px}.header #menu-open{display:none}
.portrait-hero{margin-top:-108px;height:auto;background:#cecbc6}
.portrait-hero .hero{display:block;position:relative;top:0;height:max(780px,100svh);min-height:0;max-height:none;background:#cecbc6;isolation:isolate;overflow:hidden}
.hero-portrait{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:-1}
.portrait-hero .hero-copy{position:absolute;top:26%;left:4.8%;width:40%!important;max-width:630px;min-height:0;background:transparent;padding:0;gap:28px;display:flex;justify-content:start;z-index:2}
.portrait-hero .hero-copy .eyebrow{font-size:11px;letter-spacing:2px;max-width:none;display:flex;align-items:center;gap:12px;line-height:1.5}.hero-copy .eyebrow i{width:12px;height:12px;flex:none;border-radius:50%;background:var(--coral)}
.portrait-hero .hero-copy h1{font-size:clamp(40px,3.8vw,64px)!important;line-height:1.02;letter-spacing:-.055em;max-width:none;margin:0 0 24px}
.portrait-hero .hero-copy p{font-size:clamp(16px,1.4vw,21px);font-weight:400;line-height:1.5;margin:0 0 26px;max-width:34ch}
.hero-contact{display:inline-flex;align-items:center;gap:18px;font-size:16px;font-weight:700}.hero-contact>span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--coral);font-size:36px;font-weight:400;transition:transform .3s}.hero-contact:hover>span{transform:rotate(12deg)}
.portrait-hero .hero-wordmark{position:absolute;bottom:10%;left:0;width:100%;background:none;border:0;padding:0;overflow:hidden;color:#f6f5f1;mix-blend-mode:difference;pointer-events:none;z-index:3}
.portrait-hero .wordmark-track>span{font-size:clamp(130px,16vw,310px);letter-spacing:-.065em;line-height:.95;padding:0 .1em .07em}
.hero-foot{position:absolute;bottom:32px;left:4.5%;right:4.5%;display:flex;justify-content:space-between;align-items:center;gap:24px;z-index:4;font-size:10px;text-transform:uppercase;letter-spacing:1.5px}.hero-foot>a{display:flex;align-items:center;gap:16px}.hero-foot>a span{font-size:20px}.hero-foot button{font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:10px;border:0;background:rgba(246,245,241,.8);color:var(--ink);border-radius:30px}.hero-foot button[hidden]{display:none}
.section{padding:100px 5vw}.section-top{font-size:11px;letter-spacing:1.2px}.work h2{font-size:clamp(48px,6vw,88px)}.intro{font-size:19px;font-weight:400;max-width:620px}
.project-grid{gap:32px;margin-top:56px}.project,.project:nth-child(2),.project:nth-child(3){background:transparent;padding:0;overflow:hidden;transform:none;box-shadow:none;transition:none;border-top:1px solid #c9c8c3;padding-top:24px}.project:hover,.project:focus-within{transform:none;box-shadow:none}
.project-caption{margin:0 0 22px;gap:14px}.project-caption h3,.project-caption .mero-title{font-size:clamp(24px,15cqw,56px);text-transform:none;letter-spacing:-.055em;line-height:1.05;padding:0;border:0;font-weight:700;min-height:0;white-space:nowrap}.project-caption span{font-size:11px;font-weight:400;letter-spacing:.03em;min-height:34px;max-width:none}
.site-preview{background:#e7e5de;aspect-ratio:16/10;border:0}.preview-overlay{border-radius:0;background:var(--paper);font-size:11px;padding:10px 12px}.project>p{font-size:15px;line-height:1.65;margin:22px 0;max-width:45ch}.project-actions{flex-direction:row;gap:18px}.project-actions a,.project-actions .project-details{font-size:12px}.portfolio-note{font-size:12px;color:#595956;margin-top:42px}
.about{background:#eeede8}.about-grid{grid-template-columns:1fr 1fr;gap:7vw;margin-top:56px;align-items:center}.about-portrait{margin:0;min-width:0}.about-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:70% center}.about-portrait figcaption{font-size:11px;letter-spacing:.04em;padding-top:14px}.about-grid h2{font-size:clamp(36px,3.6vw,58px);margin:0 0 28px;line-height:1.05}.about-grid p{font-size:17px;line-height:1.7}.text-link{display:inline-block;margin-top:14px;padding-bottom:6px;border-bottom:1px solid;font-size:14px;font-weight:700}.contact{background:var(--paper)}.contact .cta{background:var(--coral)}.contact h2{font-size:clamp(64px,8vw,118px)}
@media(min-width:761px) and (max-width:1100px){.portrait-hero .hero{height:850px}.portrait-hero .hero-copy{top:24%;width:42%!important;left:4.5%}.portrait-hero .hero-copy h1{font-size:clamp(34px,4vw,44px)!important}.portrait-hero .hero-copy p{font-size:17px}.hero-portrait{object-position:58% top}.header nav{gap:22px}.hero-foot{letter-spacing:.7px}.project-grid{gap:24px}.about-grid{gap:40px}.about-grid h2{font-size:36px}}
@media(max-width:900px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project:last-child{grid-column:1/-1;max-width:calc(50% - 12px)}.project-caption span{min-height:34px}}
@media(max-width:760px){.header{height:86px;padding:16px 6vw;background:rgba(246,245,241,.96)}.header .brand{height:48px;width:130px}.header .brand-word{font-size:34px}.header .brand-tagline{top:34px;font-size:10px;letter-spacing:2px}.header #menu-open{display:block}.header nav>a{display:none}.portrait-hero{margin-top:0}.portrait-hero .hero{height:auto;display:flex;flex-direction:column;min-height:0;padding:0;background:#cecbc6}.portrait-hero .hero-copy{position:relative;top:auto;left:auto;width:100%!important;max-width:none;padding:34px 6vw 14px;gap:22px}.portrait-hero .hero-copy .eyebrow{font-size:9px;letter-spacing:1px;gap:8px}.hero-copy .eyebrow i{width:9px;height:9px}.portrait-hero .hero-copy h1{font-size:clamp(40px,9vw,62px)!important;margin-bottom:16px}.portrait-hero .hero-copy p{font-size:16px;margin-bottom:20px}.hero-contact{font-size:14px;gap:14px}.hero-contact>span{width:50px;height:50px;font-size:28px}.hero-portrait{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;z-index:0}.portrait-hero .hero-wordmark{position:relative;bottom:auto;left:auto;margin-top:-70px;margin-bottom:0;overflow:hidden}.portrait-hero .wordmark-track>span{font-size:clamp(96px,23vw,160px)}.hero-foot{position:relative;bottom:auto;left:auto;right:auto;flex-wrap:wrap;padding:20px 6vw 22px;gap:14px;font-size:8px;letter-spacing:.6px}.hero-foot>span{flex-basis:100%}.hero-foot button{font-size:9px}.section{padding:64px 6vw}.project-grid{grid-template-columns:minmax(0,1fr);gap:44px;margin-top:36px}.project:last-child{grid-column:auto;max-width:none}.project-caption span{min-height:0}.project-caption h3,.project-caption .mero-title{font-size:clamp(32px,13cqw,58px)}.project-actions{gap:18px}.project>p{font-size:15px}.about-grid{grid-template-columns:minmax(0,1fr);gap:36px;margin-top:36px}.about-grid h2{font-size:clamp(34px,8vw,48px)}.about-grid p{font-size:16px}.contact h2{font-size:64px}}
@media(prefers-reduced-motion:reduce){.portrait-hero .wordmark-track>span{font-size:7.6vw;padding:0 4vw;line-height:1.1}.hero-contact:hover>span{transform:none}.portrait-hero .hero-wordmark{bottom:12%}@media(max-width:760px){.portrait-hero .hero-wordmark{bottom:auto;margin-top:-40px}}}

/* Reserve a measured gap between the hero CTA and moving typography. */
@media(min-width:761px){
 .portrait-hero .hero{--copy-top:clamp(150px,20svh,240px);height:max(780px,100svh,calc(var(--copy-top) + var(--hero-copy-height,350px) + 64px + var(--hero-type-height,220px) + 80px))}
 .portrait-hero .hero-copy{top:var(--copy-top)}
 .portrait-hero .hero-wordmark{bottom:80px}
}

/* Lighter continuous name treatment, inspired by the supplied reference. */
.portrait-hero .hero-wordmark{color:#fff;mix-blend-mode:normal}
.portrait-hero .wordmark-track>span{font-family:Arial,Helvetica,sans-serif;font-weight:400;font-size:clamp(120px,15vw,290px);letter-spacing:-.025em;line-height:1.05;padding:0 .12em .06em;white-space:pre}
@media(max-width:760px){.portrait-hero .wordmark-track>span{font-size:clamp(88px,21vw,160px)}.portrait-hero .hero-wordmark{margin-top:-64px}}
@media(prefers-reduced-motion:reduce){.portrait-hero .wordmark-track>span{font-size:7.5vw;padding:0 4vw;line-height:1.15}.portrait-hero .hero-wordmark{mix-blend-mode:normal}}

/* Restrained portfolio cards: image first, a clear title, then supporting copy. */
.work .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:48px}
.work .project,.work .project:nth-child(2),.work .project:nth-child(3){border:0;padding:0;background:transparent;overflow:visible;max-width:none;grid-column:auto}
.work .site-preview{order:0;position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:#e7e5de;transform:none;border-radius:3px}
.work .preview-mero img{position:static;width:100%;height:100%;object-fit:contain;padding:12px}
.work .preview-overlay{display:none}
.work .project-caption{order:1;container-type:normal;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;height:auto;min-height:0;margin:24px 0 0;gap:9px}
.work .project-caption h3,.work .project-caption .mero-title{font-size:clamp(26px,2.4vw,36px);font-weight:400;letter-spacing:-.035em;line-height:1.15;white-space:normal;min-height:0;max-width:none}
.work .project-caption span{font-size:12px;color:#656560;line-height:1.5;letter-spacing:0;min-height:0;max-width:none;font-weight:400}
.work .project>p{order:2;font-size:15px;line-height:1.65;font-weight:400;margin:18px 0 24px;max-width:none}
.work .project-actions{order:3;display:flex;flex-wrap:wrap;flex-direction:row;gap:12px 20px;margin-top:auto;padding-top:18px;border-top:1px solid #d5d3cc}
.work .project-actions a,.work .project-actions .project-details{font-size:12px;font-weight:400;line-height:1.5;padding-bottom:4px}
.work .portfolio-note{max-width:850px;margin-top:36px;font-size:12px;line-height:1.6}
@media(min-width:761px) and (max-width:1050px){.work .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px}.work .project:last-child{grid-column:auto;max-width:none}}
@media(max-width:760px){.work .project-grid{grid-template-columns:minmax(0,1fr);gap:44px}.work .project-caption{margin-top:20px}.work .project-caption h3,.work .project-caption .mero-title{font-size:30px}.work .project>p{margin:14px 0 20px}.work .project-actions{padding-top:16px}}

/* Large project rows and floating previews. */
.work .project-grid{display:block;margin-top:64px}
.work .project-row,.work .project-row:nth-child(2),.work .project-row:nth-child(3){position:relative;display:block;border-top:1px solid #ceccc6;padding:0 3vw 24px;max-width:none;overflow:visible}
.work .project-row:last-child{border-bottom:1px solid #ceccc6}
.project-row-link{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(180px,28%) 40px;gap:24px;align-items:center;padding:48px 0 20px}
.project-number{font-size:11px;color:#777770;align-self:start;padding-top:14px}
.work .project-row h3{margin:0;font-size:clamp(44px,5.5vw,88px);font-weight:400;line-height:1.12;letter-spacing:-.045em;transition:transform .3s,color .3s}
.project-discipline{font-size:15px;line-height:1.5;font-weight:400}
.project-row-arrow{font-size:30px;text-align:right}
.project-row-case{display:block;margin-left:56px;padding:4px 0;border:0;border-bottom:1px solid #b3b1aa;background:none;color:#66665e;font-size:12px;font-weight:400;line-height:1.5}
.work .project-row .site-preview{position:absolute;left:var(--preview-x,48%);top:var(--preview-y,50%);width:390px;height:300px;aspect-ratio:auto;transform:translate(-50%,-50%) scale(.92);opacity:0;visibility:hidden;pointer-events:none;z-index:8;overflow:hidden;padding:26px;background:#e6e4df;border-radius:0;transition:opacity .2s,transform .25s,visibility .2s}
.work .project-row .site-preview img{position:static;width:100%;height:100%;object-fit:contain;padding:0}
.work .project-row .site-preview iframe{width:1200px;height:850px;transform:scale(.282);transform-origin:top left;position:absolute;top:26px;left:26px}
.project-view-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:var(--coral);display:grid;place-items:center;font-size:15px;color:#171715}
@media(hover:hover) and (pointer:fine){.work .project-row:hover .site-preview,.work .project-row:focus-within .site-preview{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.project-row:hover h3{transform:translateX(12px);color:#777770}}
@media(max-width:760px),(hover:none){.work .project-row,.work .project-row:nth-child(2),.work .project-row:nth-child(3){padding:28px 0}.work .project-row .site-preview{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:4/3;opacity:1;visibility:visible;transform:none;padding:20px;margin-bottom:22px;z-index:0}.work .project-row .site-preview iframe{width:1200px;height:900px;transform:scale(var(--row-preview-scale,.28));top:20px;left:20px}.project-view-badge{display:none}.project-row-link{grid-template-columns:minmax(0,1fr) 30px;gap:12px;padding:0 0 12px}.project-number{display:none}.work .project-row h3{font-size:40px}.project-discipline{grid-row:2;grid-column:1;font-size:13px}.project-row-arrow{grid-column:2;grid-row:1;font-size:26px}.project-row-case{margin-left:0}.work .project-grid{margin-top:40px}}
@media(prefers-reduced-motion:reduce){.work .project-row h3,.work .project-row .site-preview{transition:none}}


@media(min-width:761px) and (hover:hover) and (pointer:fine){
.work .project-row:hover,.work .project-row:focus-within{transform:none;box-shadow:none;z-index:9}
.work .project-row .site-preview{width:clamp(340px,30vw,460px);height:auto;aspect-ratio:1;padding:0;background:#48494b}
.work .project-row .site-preview img{position:absolute;left:7%;top:23%;width:86%;height:54%;object-fit:cover;object-position:top}
.work .project-row .site-preview iframe{left:50%;top:50%;transform-origin:center;transform:translate(-50%,-50%) scale(var(--row-preview-scale,.28))}
.project-view-badge{width:92px;height:92px;font-size:18px;color:white}
}

.work .project-row .row-frame{position:absolute;left:7%;top:50%;width:86%;aspect-ratio:1200/850;transform:translateY(-50%);overflow:hidden}
.work .project-row .row-frame iframe{position:absolute;left:0;top:0;width:1200px;height:850px;transform-origin:top left;transform:scale(var(--row-preview-scale,.28))}
@media(max-width:760px),(hover:none){.work .project-row .row-frame{left:20px;width:calc(100% - 40px)}}

/* Keep the mobile hero in normal flow, with a clear gap below the contact link. */
@media(max-width:760px){
 .portrait-hero .hero-copy{flex-shrink:0;padding-bottom:24px}
 .portrait-hero .hero-wordmark{position:relative;inset:auto;flex-shrink:0;margin:20px 0 0;padding:0;pointer-events:none}
 .portrait-hero .hero-foot{flex-shrink:0;margin-top:12px;padding-bottom:28px}
 .portrait-hero .hero-contact{max-width:100%;line-height:1.4}
}

.hero-visual{display:contents}.mobile-hero-role{display:none}
@media(max-width:760px){
 .homepage .header{position:absolute;top:0;left:0;width:100%;height:86px;background:transparent;border:0;color:white;z-index:20}
 .homepage .header #menu-open{font-size:14px;font-weight:400;color:white}
 .portrait-hero .hero-visual{display:block;position:relative;width:100%;height:100svh;min-height:560px;flex-shrink:0;overflow:hidden;background:#a4a4a2;isolation:isolate}
 .portrait-hero .hero-visual .hero-portrait{position:absolute;top:70px;left:0;width:100%;height:calc(100% - 70px);aspect-ratio:auto;object-fit:cover;object-position:72% top;z-index:0}
 .portrait-hero .hero-visual .hero-wordmark{position:absolute;top:57%;bottom:auto;left:0;width:100%;margin:0;padding:0;z-index:2}
 .portrait-hero .hero-visual .wordmark-track>span{font-size:clamp(110px,30vw,220px);line-height:1.05}
 .mobile-hero-role{display:block;position:absolute;left:6vw;right:6vw;bottom:42px;color:white;z-index:3;text-shadow:0 1px 12px #0003}
 .mobile-hero-role>span{display:block;font-size:30px;margin-bottom:28px}
 .mobile-hero-role p{font-size:23px;line-height:1.35;margin:0;font-weight:400;letter-spacing:-.025em}
 .mobile-hero-role>a{position:absolute;right:0;bottom:0;font-size:32px;padding:8px}
 .portrait-hero .hero-copy{background:var(--paper);padding:44px 6vw 24px}
 .portrait-hero .hero-foot{background:var(--paper);margin-top:0;padding-top:14px}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.portrait-hero .hero-visual .wordmark-track>span{font-size:8vw;padding:0 6vw}}

.arrow-icon{display:block;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.hero-contact .arrow-icon{width:28px;height:28px}.mobile-hero-role .arrow-icon{width:30px;height:30px}

.contact-teaser{background:#1c1d20;color:#f6f5f1}.contact-teaser h2{font-weight:400;letter-spacing:-.055em}.contact-teaser p{max-width:560px;color:#c3c3c3}.contact-page-link{display:inline-flex;align-items:center;gap:24px;background:var(--coral);color:#171715;border-radius:100px;padding:22px 30px;margin:20px 24px 20px 0;font-size:18px}.contact-page-link .arrow-icon{width:26px;height:26px}.contact-email{display:inline-block;font-size:clamp(13px,3.5vw,18px);border-bottom:1px solid #777;padding-bottom:6px}.contact-teaser a:focus-visible{outline-color:white}

.project-row-arrow .arrow-icon{width:30px;height:30px;margin-left:auto}@media(max-width:760px){.project-row-arrow .arrow-icon{width:26px;height:26px}}

.work .project-row .flowergirl-preview img{object-fit:contain;object-position:center}

/* Image and live-site previews share one frame geometry at every size. */
.work .project-row .row-image-frame{display:block;position:absolute;left:7%;top:50%;width:86%;aspect-ratio:1200/850;transform:translateY(-50%);overflow:hidden}
.work .project-row .row-image-frame img{position:static;display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.mero-image-frame{background:#090909}.flowergirl-image-frame{background:#eeebe6}
@media(max-width:760px),(hover:none){.work .project-row .row-image-frame{left:20px;width:calc(100% - 40px)}}

.work .project-row-case{width:fit-content;max-width:100%;align-self:flex-start}

/* One cursor-following window slides between projects. */
.work-hover{--hover-size:clamp(340px,30vw,460px);position:fixed;left:0;top:0;width:var(--hover-size);height:var(--hover-size);z-index:40;pointer-events:none;visibility:hidden;opacity:1;transition:visibility 0s .45s;will-change:transform}
.work-hover.is-active{visibility:visible;opacity:1;transition-delay:0s}.work-hover-window{width:100%;height:100%;overflow:hidden;transform:scale(0);transform-origin:center;transition:transform .45s cubic-bezier(.76,0,.24,1);background:#48494b}.work-hover.is-active .work-hover-window{transform:scale(1)}
.work-hover-stack{height:100%;transform:translateY(calc(var(--hover-index,0) * var(--hover-size) * -1));transition:transform .5s cubic-bezier(.76,0,.24,1)}
.work-hover-stack .site-preview{display:block;position:relative;width:100%;height:100%;aspect-ratio:1;margin:0;padding:0;border:0;background:#48494b;overflow:hidden;opacity:1;visibility:visible;transform:none;transition:none;contain:none}
.work-hover-stack .row-frame{position:absolute;left:7%;top:50%;width:86%;aspect-ratio:1200/850;transform:translateY(-50%);overflow:hidden}
.work-hover-stack .row-frame iframe{position:absolute;left:0;top:0;width:1200px;height:850px;border:0;transform:scale(var(--row-preview-scale,.28));transform-origin:top left;pointer-events:none}
.work-hover-stack .project-view-badge{display:none}.work-hover-badge{position:absolute;left:50%;top:50%;translate:calc(-50% + var(--view-x,0px)) calc(-50% + var(--view-y,0px));transform:scale(0);transition:transform .45s cubic-bezier(.76,0,.24,1);display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--coral);color:white;font-size:18px;will-change:translate,transform}.work-hover.is-active .work-hover-badge{transform:scale(1)}.work-hover-badge>span{translate:clamp(-8px,var(--view-label-x,0px),8px) clamp(-8px,var(--view-label-y,0px),8px)}
@media(prefers-reduced-motion:reduce){.work-hover,.work-hover-window,.work-hover-stack,.work-hover-badge{transition:none;will-change:auto}}

/* Mero film uses the same preview frame as the other projects. */
.row-frame .mero-card-film{display:block;width:100%;height:100%;object-fit:contain;background:#090909}

/* White metadata over the desktop hero portrait. */
@media(min-width:761px){.homepage .portrait-hero .hero-foot>span,.homepage .portrait-hero .hero-foot>a{color:#fff}.homepage .portrait-hero .hero-foot>a:focus-visible{outline-color:#fff}}

/* Cobalt Enbarr accents use white labels and icons. */
.hero-contact>span,.contact-page-link,.project-view-badge,.contact .cta{color:#fff}

/* The arrow-only hero contact button stays still. */
.hero-contact{width:max-content}.hero-contact>span,.hero-contact:hover>span{transform:none;transition:none}

/* Hospitality composition stays complete inside the shared project preview frame. */
.mbh-preview .row-frame{display:flex;align-items:center;justify-content:center;background:#e5e4df}.mbh-preview .row-frame>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

/* A restrained hover response for the hero contact circle. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .hero-contact>span{transition:transform .25s cubic-bezier(.22,1,.36,1)}
 .hero-contact>span .arrow-icon{transition:transform .25s cubic-bezier(.22,1,.36,1)}
 .hero-contact:hover>span{transform:scale(1.04)}
 .hero-contact:hover>span .arrow-icon{transform:translateX(3px)}
}

/* Tablet hero uses the portrait-first composition to keep copy off the sweater. */
@media(min-width:761px) and (max-width:1100px){
 .homepage .portrait-hero .hero{display:flex;flex-direction:column;height:auto;min-height:0;padding:0}
 .homepage .portrait-hero .hero-visual{display:block;position:relative;width:100%;height:100svh;min-height:600px;flex-shrink:0;overflow:hidden;background:#a4a4a2;isolation:isolate}
 .homepage .portrait-hero .hero-visual .hero-portrait{position:absolute;top:70px;left:0;width:100%;height:calc(100% - 70px);object-fit:cover;object-position:72% top;z-index:0}
 .homepage .portrait-hero .hero-visual .hero-wordmark{position:absolute;top:57%;bottom:auto;left:0;width:100%;margin:0;padding:0;z-index:2}
 .homepage .portrait-hero .hero-visual .wordmark-track>span{font-size:clamp(160px,25vw,260px)}
 .homepage .portrait-hero .mobile-hero-role{display:block;position:absolute;left:6vw;right:6vw;bottom:48px;color:white;z-index:3;text-shadow:0 1px 12px #0003}
 .homepage .portrait-hero .mobile-hero-role>span{display:block;margin-bottom:28px}
 .homepage .portrait-hero .mobile-hero-role p{font-size:28px;line-height:1.35;margin:0;font-weight:400;letter-spacing:-.025em}
 .homepage .portrait-hero .mobile-hero-role>a{position:absolute;right:0;bottom:0;font-size:32px;padding:8px}
 .homepage .portrait-hero .hero-copy{position:relative;inset:auto;width:100%!important;max-width:none;background:var(--paper);padding:48px 6vw 28px;gap:28px}
 .homepage .portrait-hero .hero-copy h1{font-size:clamp(44px,6vw,62px)!important;max-width:700px}
 .homepage .portrait-hero .hero-copy p{font-size:19px;max-width:40ch}
 .homepage .portrait-hero .hero-contact{max-width:100%;line-height:1.45}
 .homepage .portrait-hero .hero-contact>span{flex-shrink:0}
 .homepage .portrait-hero .hero-foot{position:relative;inset:auto;flex-shrink:0;background:var(--paper);padding:20px 6vw 32px;gap:20px;flex-wrap:wrap}
 .homepage .portrait-hero .hero-foot>span,.homepage .portrait-hero .hero-foot>a{color:var(--ink)}
 .homepage .portrait-hero .hero-foot>a:focus-visible{outline-color:var(--ink)}
}
@media(min-width:761px) and (max-width:1100px) and (prefers-reduced-motion:reduce){.homepage .portrait-hero .hero-visual .wordmark-track>span{font-size:8vw;padding:0 6vw}}

/* Motion controls sit along the portrait bottom on mobile and tablet. */
@media(max-width:1100px){
 .homepage .portrait-hero .hero-visual .hero-foot{position:absolute;inset:auto 6vw 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:nowrap;margin:0;padding:0;background:transparent;color:#fff;font-size:10px;letter-spacing:.65px;z-index:4}
 .homepage .portrait-hero .hero-visual .hero-foot>a{display:flex;margin-left:auto;color:#fff;gap:12px;white-space:nowrap;text-shadow:0 1px 8px #0006}
 .homepage .portrait-hero .hero-visual .hero-foot>a:focus-visible{outline-color:#fff}
 .homepage .portrait-hero .hero-visual .hero-foot button{flex-shrink:0;font-size:10px;padding:12px 14px;background:rgba(246,245,241,.9)}
 .homepage .portrait-hero .hero-visual .mobile-hero-role{bottom:102px}
}
@media(max-width:380px){.homepage .portrait-hero .hero-visual .hero-foot{font-size:9px;gap:10px}.homepage .portrait-hero .hero-visual .hero-foot button{font-size:9px;padding:11px 12px}.homepage .portrait-hero .hero-visual .hero-foot>a{gap:8px}}

/* Original Transmacro guide uses the same uncropped project preview frame. */
.tm-preview .row-frame{display:flex;align-items:center;justify-content:center;background:#e7ece1}.tm-preview .row-frame>img{display:block;width:100%;height:100%;object-fit:contain}.project[data-project-key="transmacro"] h3{font-size:clamp(30px,4.6vw,64px)}

/* Wärtsilä artwork retains its complete layout within the common project frame. */
.wa-preview .row-frame{display:flex;align-items:center;justify-content:center;background:#e7e9e8}.wa-preview .row-frame>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

.nrg-preview .row-frame{background:#e7e9e8}.nrg-preview .row-frame>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}.project[data-project-key="nrg-promo-shop"] h3{font-size:clamp(30px,4.6vw,64px)}

/* NRG fills the same website viewport as the other project previews. */
.work .project-row .nrg-preview .row-frame>img,.work-hover-stack .nrg-preview .row-frame>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;padding:0}
.project-preview-link{display:none}
@media(max-width:760px),(hover:none),(pointer:coarse){
 .work .project-row .project-preview-link{display:block;position:absolute;inset:0;z-index:5;pointer-events:auto}
 .work .project-row .site-preview iframe,.work .project-row .site-preview video{pointer-events:none}
 .work .project-row .project-preview-link:focus-visible{outline:3px solid var(--coral);outline-offset:-4px}
}

/* Industry eyebrows introduce the project name at every screen size. */
.work .project-title-group{min-width:0;display:flex;flex-direction:column;gap:8px}
.work .project-industry{display:block;color:#66665e;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:.01em;text-transform:none}
@media(max-width:760px),(hover:none){.work .project-title-group{grid-column:1;grid-row:1;gap:6px}.work .project-industry{font-size:14px;letter-spacing:.01em}.work .project-row-arrow{align-self:start;padding-top:31px}}