/* Eye identity, type ribbons, and consistent vector interface icons. */
.ui-arrow{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.12em;pointer-events:none}
.contact-round>span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.contact-round .ui-arrow{width:70%;height:70%;stroke-width:.8}
.email>span{font-size:22px;line-height:1}
.gallery-buttons button{display:inline-grid;place-items:center}
.gallery-buttons .ui-arrow{width:1.2em;height:1.2em}
.back-top .ui-arrow{width:26px;height:26px}
.gallery-track{position:relative}
body{overflow-x:clip}
.header .brand-mark{width:46px;height:46px}
.hero{padding-top:30px}
.hero-meta{margin-bottom:26px}
.identity-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:.94fr 1.06fr;align-items:center;gap:4%;min-height:560px;padding:42px 5% 112px;background:var(--accent);color:var(--bg);overflow:hidden}
.identity-symbol{position:relative;z-index:2;min-width:0;display:flex;align-items:center;justify-content:center}
.identity-emblem{width:100%;max-width:460px;height:auto;object-fit:contain}
.identity-copy{position:relative;z-index:2;padding:28px 0 0;min-width:0}
.identity-kicker{font-size:12px;letter-spacing:.09em;margin-bottom:22px;font-weight:600}
.hero .identity-copy h1{font-family:var(--font);font-size:clamp(56px,6.7vw,104px);font-weight:800;line-height:.88;letter-spacing:-.065em;padding:0}
.identity-tagline{font-size:clamp(22px,2.3vw,34px);font-weight:500;line-height:1.16;letter-spacing:-.035em;margin-top:26px}
.identity-link{display:inline-flex;align-items:center;justify-content:space-between;gap:40px;margin-top:28px;padding-block:11px;border-bottom:1px solid currentColor;font-size:15px;font-weight:500;min-height:44px}
.identity-link span{font-size:25px;line-height:1;transition:transform .3s var(--ease)}
.identity-link:hover span{transform:translate(3px,3px)}
.identity-link:focus-visible{outline-color:var(--bg)}
.brand-ribbon{display:flex;align-items:center;gap:36px;width:max-content;max-width:none;padding:10px 30px;background:var(--accent);color:var(--bg);font-family:var(--font);font-size:44px;font-weight:800;line-height:1.05;letter-spacing:-.055em;white-space:nowrap;pointer-events:none;user-select:none}
.brand-ribbon img{display:block;width:48px;height:48px;object-fit:contain;flex-shrink:0}
.brand-ribbon span{flex-shrink:0}
.hero-ribbon{position:absolute;z-index:3;left:-4%;bottom:23px;background:var(--ink);transform:rotate(-5deg);font-size:40px;padding-block:10px;gap:28px}
.hero-ribbon img{width:42px;height:42px}
.hero-ribbon-top{position:absolute;z-index:1;top:14px;right:-115px;transform:rotate(24deg);font-size:16px;padding:9px 18px;gap:18px;background:var(--bg);color:var(--ink)}
.hero-ribbon-top span:nth-of-type(n+3),.hero-ribbon-top img:nth-of-type(n+3){display:none}
.hero-ribbon-top img{width:22px;height:22px}
.hero-caption{padding-top:22px}
.scope-strip{margin-top:12px}
.clients{padding-top:62px;padding-bottom:58px}
.brand-divider{position:relative;height:126px;overflow:hidden;isolation:isolate}
.brand-divider .brand-ribbon{position:absolute;left:-3%;top:33px;transform:rotate(-2.5deg)}
.brand-divider--slim{height:84px;margin-top:7px}
.brand-divider--slim .brand-ribbon{top:21px;font-size:25px;padding-block:7px;gap:24px;transform:rotate(1.2deg)}
.brand-divider--slim img{width:30px;height:30px}
.brand-divider--white .brand-ribbon{background:var(--ink);transform:rotate(2deg);font-size:42px;top:30px}
.brand-divider--small{height:100px;background:var(--panel)}
.brand-divider--small .brand-ribbon{top:25px;font-size:29px;padding-block:8px;transform:rotate(-1.7deg)}
.brand-divider--small img{width:34px;height:34px}
.brand-divider--closing{height:120px;margin-top:12px}
.brand-divider--closing .brand-ribbon{background:var(--ink);top:36px;font-size:48px;transform:rotate(1.5deg)}
.brand-stamp{display:block;width:76px;height:76px;object-fit:contain;flex-shrink:0;pointer-events:none;user-select:none}
.brand-stamp,.header .brand-mark,.footer .brand-mark{transform-origin:center;animation:brand-eye-turn 20s linear infinite}
@keyframes brand-eye-turn{from{transform:rotate(var(--mark-angle,0deg))}to{transform:rotate(calc(var(--mark-angle,0deg) + 360deg))}}
.section-signature{display:flex;align-items:center;gap:28px}
.stamp--small{width:56px;height:56px;--mark-angle:13deg;transform:rotate(13deg)}
.projects{padding-top:85px}
.solutions{padding-top:100px;padding-bottom:75px}
.solutions-intro{position:relative}
.solutions-stamp{display:flex;justify-content:flex-end;margin-bottom:28px;padding-right:20px}
.stamp--tilted{width:94px;height:94px;--mark-angle:-17deg;transform:rotate(-17deg)}
.solutions-intro .eyebrow{margin-top:-20px}
.brand-statement{position:relative;padding-right:0;overflow:visible}
.brand-statement>span{position:relative;z-index:1}
.stamp--statement{position:absolute;right:3%;top:45px;width:104px;height:104px;--mark-angle:18deg;transform:rotate(18deg)}
.contact .section-top{align-items:center}
.stamp--contact{width:66px;height:66px;--mark-angle:-12deg;transform:rotate(-12deg)}
.contact-round:is(:hover,:focus-visible,:active){transform:rotate(45deg)}
.footer .brand-mark{width:46px;height:46px}
@media(min-width:1700px){.identity-hero{min-height:650px}.hero .identity-copy h1{font-size:112px}.identity-emblem{max-width:510px}}
@media(max-width:1100px) and (min-width:761px){.identity-hero{min-height:480px;padding:48px 4% 100px;gap:3%}.hero .identity-copy h1{font-size:7vw}.identity-kicker{font-size:11px;margin-bottom:18px;letter-spacing:.045em}.identity-tagline{font-size:25px}.identity-link{font-size:14px;gap:24px}.identity-emblem{max-width:360px}.hero-ribbon{font-size:32px}.hero-ribbon-top{font-size:14px}.solutions-stamp{padding:0}.stamp--tilted{width:76px;height:76px}}
@media(max-width:760px){
 .header .brand-mark,.footer .brand-mark{width:40px;height:40px}
 .hero{padding-top:20px}.hero-meta{margin-bottom:20px}.hero-meta .eyebrow{max-width:225px}.hero-location{padding-top:1px}
 .identity-hero{display:flex;flex-direction:column;gap:0;align-items:stretch;min-height:0;margin-inline:-20px;padding:31px 26px clamp(132px,calc(96px + 11vw),180px)}
 .identity-symbol{align-self:center;width:68%;max-width:300px}
 .identity-emblem{max-width:none}
 .identity-copy{padding:10px 0 0}
 .identity-kicker{font-size:11px;margin-bottom:14px;letter-spacing:.07em}
 .hero .identity-copy h1{font-size:clamp(47px,14.5vw,79px);line-height:.87;letter-spacing:-.055em}
 .identity-tagline{font-size:23px;line-height:1.18;margin-top:19px}
 .identity-link{font-size:14px;margin-top:18px;gap:38px}
 .hero-ribbon{font-size:27px;gap:20px;bottom:24px;left:-25px;padding-block:8px;transform-origin:left center;transform:rotate(-6deg)}
 .hero-ribbon img{width:32px;height:32px}
 .hero-ribbon-top{font-size:12px;right:-108px;top:19px;gap:13px;padding-block:7px;transform:rotate(27deg)}
 .hero-ribbon-top img{width:19px;height:19px}
 .hero-caption{padding-block:18px 14px;max-width:none;font-size:13px}.hero-caption>span{font-size:12px}
 .scope-strip{margin-top:7px}.clients{padding-block:38px}
 .brand-divider{height:85px}.brand-divider .brand-ribbon{top:24px;font-size:29px;padding-block:8px;gap:22px}.brand-divider .brand-ribbon img{width:32px;height:32px}
 .brand-divider--slim{height:64px;margin-top:0}.brand-divider--slim .brand-ribbon{font-size:20px;top:17px;padding-block:6px}.brand-divider--slim .brand-ribbon img{width:24px;height:24px}
 .brand-divider--small{height:75px}.brand-divider--small .brand-ribbon{font-size:24px;top:19px}
 .brand-divider--closing{height:86px;margin-top:0}.brand-divider--closing .brand-ribbon{font-size:31px;top:25px}
 .section-signature{gap:14px}.section-signature .small-label{max-width:160px}.stamp--small{width:40px;height:40px}
 .projects{padding-top:55px}.solutions{padding-top:54px;padding-bottom:46px}.solutions-stamp{position:absolute;top:-8px;right:0;margin:0;padding:0}.stamp--tilted{width:64px;height:64px}.solutions-intro .eyebrow{margin-top:0;padding-right:80px}.solutions-intro h2{padding-right:24px}
 .brand-statement{padding-top:65px}.stamp--statement{width:58px;height:58px;right:0;top:19px}
 .stamp--contact{width:50px;height:50px}
}
@media(max-width:360px){.identity-hero{margin-inline:-16px;padding-inline:21px}.hero .identity-copy h1{font-size:14.4vw}.identity-symbol{width:73%}.identity-tagline{font-size:21px}.identity-kicker{font-size:10px}.section-signature{gap:8px}.section-signature .small-label{max-width:135px}}
@media(max-width:760px){
 .gallery-track{gap:10px;padding:16px 16% 20px;scroll-padding-inline:16%;perspective:none}
 .gallery .project{transform:perspective(800px) rotateY(var(--gallery-rotation,0deg)) scale(var(--gallery-scale,1));transform-origin:center 38%}
 .gallery .project-image,.gallery .project-main .project-image,.gallery .project-secondary .project-image{aspect-ratio:4/3}
 .gallery .work-project .project-image{background:transparent}
 .gallery .work-project .project-image img{width:100%;height:100%;object-fit:cover}
 .gallery .image-badge{top:10px;left:10px;font-size:10px;padding:5px 7px}
 .gallery .project figcaption{align-items:flex-start;gap:8px;padding-inline:0}
 .gallery .project figcaption>div{min-width:0}
 .gallery .project h3{font-size:clamp(16px,4.6vw,24px);overflow-wrap:anywhere;line-height:1.3}
 .gallery .project figcaption p{font-size:12px;line-height:1.5}
 .gallery .project-no{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.identity-link span{transition:none}.brand-stamp,.header .brand-mark,.footer .brand-mark{animation:none}}
