/* PETRUS / Design meets concrete */
:root{--paper:#f4f3ee;--ink:#272c2e;--muted:#626766;--line:#d0d1cb;--accent:#ff703e;--soft:#eae9e2;--gutter:clamp(22px,4vw,70px)}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
h1,h2,h3{font-weight:600;letter-spacing:-.055em}
h1 em,h2 em{font-family:inherit;font-weight:600;font-style:normal;letter-spacing:inherit}
.eyebrow{font-weight:600;letter-spacing:.08em}
::selection{background:var(--accent);color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent)}
.text-link{font-weight:500}
.button{background:var(--ink);color:var(--paper);border:0;border-radius:2px;padding:18px 22px;font-weight:500}
.button>span{background:var(--accent);color:var(--ink);width:29px;height:29px;display:grid;place-items:center}
.button:hover{background:#444a4c}
.site-header{background:rgba(244,243,238,.97)}
.header-inner{height:96px}
.brand{gap:15px}
.brand>span{font-size:9px;font-weight:700;line-height:1.3;letter-spacing:.04em}
.brand img{width:64px;height:67px}
.desktop-nav{font-size:12px;gap:28px}
.header-cta{background:var(--accent);border:0;font-weight:500}
.header-cta:hover{background:var(--ink)}
.lang{font-size:11px}
.petrus-wordmark{position:relative;display:block;overflow:hidden;aspect-ratio:349/57;width:190px;flex-shrink:0;mix-blend-mode:multiply}
.petrus-wordmark img{position:absolute;top:0;left:0;width:100%;max-width:none;height:auto;transform:translateY(-66.7%);mix-blend-mode:multiply}
.design-hero{display:grid;grid-template-columns:1.04fr 1fr;gap:24px;min-height:690px;padding-top:55px;padding-bottom:50px;position:relative;align-items:center}
.hero-copy{position:relative;z-index:2;padding-block:10px}
.hero-copy>.eyebrow{font-size:10px;margin-bottom:35px}
.hero-copy h1{font-size:clamp(74px,7.5vw,120px);font-weight:600;line-height:.94;letter-spacing:-.075em}
.hero-copy h1 em{color:var(--ink);position:relative;display:inline-block}
.hero-copy h1 em:after{content:"";height:9px;background:var(--accent);position:absolute;left:5px;right:0;bottom:-15px;transform:rotate(-2deg)}
.hero-copy .hero-intro{max-width:375px;margin-top:46px;justify-self:start}
.hero-copy .hero-intro p{font-size:17px;line-height:1.55;letter-spacing:-.025em;margin-bottom:25px}
.hero-signature{display:flex;align-items:center;gap:20px;margin-top:45px}
.hero-signature>span:last-child{font-size:9px;font-weight:600;line-height:1.35;letter-spacing:.05em;border-left:1px solid var(--line);padding-left:18px}
.hero-signature .petrus-wordmark{width:175px}
.hero-collage{height:590px;position:relative;min-width:0}
.collage-main{position:absolute;inset:0 0 80px 4%;display:block;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 80%,82% 100%,0 100%)}
.collage-main img{width:100%;height:100%;object-position:57% center;transition:transform .7s}
.collage-main:hover img{transform:scale(1.035)}
.collage-label{position:absolute;left:18px;top:18px;background:var(--paper);padding:9px 12px;font-size:9px;letter-spacing:.08em;font-weight:600}
.collage-detail{position:absolute;bottom:0;left:-6%;width:58%;height:220px;background:var(--paper);padding:8px;transform:rotate(-5deg);box-shadow:0 10px 30px #272c2e22;transition:transform .3s}
.collage-detail:hover{transform:rotate(-2deg) translateY(-5px)}
.collage-detail img{width:100%;height:calc(100% - 26px);object-position:60% 50%}
.collage-detail>span{display:block;font-size:9px;font-weight:600;letter-spacing:.06em;padding-top:7px}
.design-sticker{position:absolute;right:-15px;top:40%;width:133px;height:133px;background:var(--accent);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:700;letter-spacing:-.05em;line-height:.95;transform:rotate(8deg);clip-path:polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%)}
.collage-coordinate{position:absolute;right:0;bottom:8px;font-size:8px;writing-mode:vertical-rl;letter-spacing:.08em}
.brand-ribbon{background:var(--accent);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.brand-ribbon>.wrap{display:flex;justify-content:space-between;gap:30px;align-items:center;min-height:73px}
.brand-ribbon span:first-child{font-size:clamp(18px,2.1vw,30px);letter-spacing:-.045em;font-weight:600}
.brand-ribbon span:nth-child(2){font-size:40px;line-height:1}
.brand-ribbon span:last-child{font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.section{padding-block:115px}
.section-head h2{font-size:clamp(48px,5.4vw,82px);line-height:.98}
.section-head .eyebrow{margin-bottom:26px}
.section-intro{font-size:17px}
.selected-work .project-grid{grid-template-columns:1.2fr 1fr;column-gap:8%;row-gap:70px}
.selected-work .project-grid .project-card:nth-child(even){padding-top:130px}
.selected-work .project-card:nth-child(3) .project-photo{aspect-ratio:1.06}
.project-photo{clip-path:polygon(0 0,100% 0,100% 93%,93% 100%,0 100%)}
.project-card:nth-child(even) .project-photo{clip-path:polygon(0 0,93% 0,100% 7%,100% 100%,0 100%)}
.photo-arrow{border-radius:0;background:var(--accent);width:46px;height:46px;bottom:22px;right:22px}
.project-photo:hover .photo-arrow{background:var(--ink);color:white}
.project-meta{font-size:9px;font-weight:500}
.project-meta>span:first-child{background:var(--soft);color:var(--ink);padding:5px 8px;margin-top:-5px}
.project-card h3{font-size:30px;font-weight:600}
.project-card h3 a:hover{color:#b93e14}
.design-lab{background:var(--ink);color:var(--paper);padding-block:95px 105px}
.design-lab .eyebrow{color:var(--accent)}
.design-lab h2{font-size:clamp(45px,5.4vw,82px);line-height:1.02;margin-bottom:60px;max-width:930px}
.design-explorer{display:grid;grid-template-columns:1fr 1.7fr;gap:8%}
.design-controls{padding-top:10px}
.design-controls button{border:0;border-top:1px solid #606568;background:none;width:100%;display:flex;align-items:center;gap:16px;text-align:left;padding:25px 0;font-size:clamp(28px,3vw,45px);font-weight:500;letter-spacing:-.04em;transition:color .2s}
.design-controls button>span:first-child{font-size:11px;letter-spacing:0;align-self:flex-start;margin-top:10px;margin-right:10px}
.design-controls button>span:last-child{margin-left:auto;font-size:33px}
.design-controls button[aria-pressed=true]{color:var(--accent)}
.design-controls button[aria-pressed=true]>span:last-child{transform:rotate(45deg)}
.design-controls button:hover{color:var(--accent)}
.design-controls>p{font-size:13px;color:#bdc0bb;line-height:1.6;margin-top:45px}
.design-photo{height:405px;position:relative;overflow:hidden}
.design-photo img{width:100%;height:100%}
.design-index{position:absolute;right:17px;bottom:8px;font-size:100px;font-weight:600;line-height:1;color:var(--accent);letter-spacing:-.075em}
.design-caption{display:flex;gap:32px;align-items:flex-start;margin-top:25px}
.design-caption h3{font-size:25px;margin-bottom:13px;letter-spacing:-.035em}
.design-caption p{font-size:13px;line-height:1.6;color:#bdc0bb;margin:0}
.design-caption .text-link{white-space:nowrap;border-color:#747978;font-size:12px;gap:14px;padding-top:4px;flex-shrink:0}
.design-caption .text-link>span{color:var(--accent)}
.services-section{background:var(--paper)}
.services-layout h2{font-size:clamp(43px,4.9vw,74px);line-height:1.02}
.service-row{border-color:var(--line);transition:padding .25s}
.service-list{border-color:var(--line)}
.service-row:hover{padding-left:10px}
.service-row:hover h3{text-decoration:none}
.service-row>span:last-child{background:var(--accent);height:38px;width:38px;display:grid;place-items:center;margin-left:-13px;font-size:25px}
.service-row h3{font-weight:500;padding-right:25px}
.service-row p{padding-right:15px}
.service-number{color:var(--ink)}
.method-layout{border-top:1px solid var(--line)}
.method-image img{clip-path:polygon(0 0,100% 0,100% 87%,83% 100%,0 100%)}
.method-copy h2{font-size:clamp(42px,4.4vw,68px)}
.method-stamp{position:absolute;left:22px;bottom:26px;width:145px;height:145px;border-radius:50%;background:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:600;font-size:43px;line-height:1.1;letter-spacing:-.05em;transform:rotate(-10deg)}
.method-stamp small{font-size:9px;letter-spacing:.03em;line-height:1.2;margin-top:5px;text-align:center}
.large-copy{font-weight:500;line-height:1.3}
.cta-band{background:var(--accent);border:0;padding-block:65px 85px}
.cta-row{grid-template-columns:1.45fr 1fr;gap:60px}
.cta-row h2{font-size:clamp(42px,5.8vw,88px);line-height:1.02}
.cta-row .button>span{background:var(--paper)}
.site-footer{padding-top:65px;border:0}
.footer-brandline{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-bottom:65px}
.footer-brandline .petrus-wordmark{width:70%;max-width:890px}
.footer-brandline>span:last-child{font-size:clamp(18px,3.6vw,52px);font-weight:700;line-height:.98;letter-spacing:-.05em}
.footer-top .brand-slogan{font-size:15px!important;font-weight:500;max-width:240px}
.footer-top{padding-bottom:45px}
.page-intro h1{font-weight:600;line-height:1}
.project-title-row h1{font-weight:600}
.filter-bar button{border-radius:0;font-weight:500}
.filter-bar button[aria-pressed=true]{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.project-story h2{line-height:1.04}
.metrics strong{font-weight:600;color:var(--ink)}
.metrics>div{border-left:4px solid var(--accent);padding-left:20px}
.steps summary{font-weight:500}
.steps details[open] .step-no{color:#b93e14}
.project-form input:focus,.project-form select:focus,.project-form textarea:focus{outline-color:var(--accent)}
@media(min-width:1600px){.design-hero{min-height:770px}.hero-collage{height:660px}.collage-detail{height:250px}.hero-copy h1{font-size:122px}}
@media(max-width:1100px){
 .design-hero{padding-top:42px;min-height:620px;gap:16px}.hero-collage{height:520px}.hero-copy h1{font-size:7.5vw}.hero-copy>.eyebrow{font-size:8px;max-width:250px}.hero-copy .hero-intro{max-width:320px}.hero-copy .hero-intro p{font-size:16px}.hero-signature{gap:12px}.hero-signature .petrus-wordmark{width:150px}.hero-signature>span:last-child{font-size:8px;padding-left:12px}.collage-detail{height:185px;width:66%}.design-sticker{width:108px;height:108px;font-size:16px;right:-8px}.brand-ribbon span:last-child{font-size:8px}.brand-ribbon>.wrap{gap:20px}.design-explorer{gap:5%;grid-template-columns:1fr 1.5fr}.design-photo{height:350px}.design-caption{display:block}.design-caption .text-link{margin-top:18px}.selected-work .project-grid{column-gap:6%}.selected-work .project-grid .project-card:nth-child(even){padding-top:100px}.header-actions{gap:20px}.brand>span{display:none}
}
@media(max-width:800px){
 .header-inner{height:84px}.brand img{width:55px;height:57px}.brand>span{display:block}.design-hero{padding-top:35px;padding-bottom:45px;grid-template-columns:1fr 1fr;gap:10px;min-height:560px}.hero-collage{height:450px}.hero-copy h1{font-size:7.7vw}.hero-copy .hero-intro{display:block;margin-top:35px;max-width:290px}.hero-copy .hero-intro p{font-size:15px;margin-bottom:20px}.hero-copy>.eyebrow{font-size:8px;margin-bottom:25px}.hero-copy .button{font-size:12px;min-height:52px;padding:13px 16px;gap:22px}.hero-signature{margin-top:30px}.hero-signature .petrus-wordmark{width:135px}.hero-signature>span:last-child{display:none}.collage-detail{height:170px;width:78%;left:-5%}.collage-main{bottom:80px;left:0}.design-sticker{width:94px;height:94px;font-size:14px;right:-7px}.collage-label{font-size:8px;padding:7px 9px;top:12px;left:12px}.collage-coordinate{font-size:7px}.brand-ribbon>.wrap{min-height:68px;gap:15px}.brand-ribbon span:first-child{font-size:21px;max-width:320px;line-height:1.1}.brand-ribbon span:last-child{max-width:190px;line-height:1.6}.brand-ribbon span:nth-child(2){font-size:30px}.section{padding-block:80px}.section-head h2{font-size:55px}.selected-work .project-grid .project-card:nth-child(even){padding-top:75px}.project-card h3{font-size:26px}.design-lab{padding-block:75px}.design-lab h2{margin-bottom:40px;font-size:58px}.design-explorer{grid-template-columns:1fr;gap:30px}.design-controls{display:flex;gap:22px;padding:0}.design-controls button{font-size:26px;padding:16px 0}.design-controls button>span:first-child{font-size:9px;margin-right:0;margin-top:5px}.design-controls button>span:last-child{font-size:23px}.design-controls>p{display:none}.design-photo{height:400px}.design-caption{display:flex}.design-caption .text-link{margin-top:0}.services-layout h2{font-size:54px}.method-copy h2{font-size:52px}.cta-row h2{font-size:51px}.cta-row{gap:35px;grid-template-columns:1.3fr 1fr}.footer-brandline{padding-bottom:50px}.footer-top .brand-slogan{font-size:15px!important}
}
@media(max-width:560px){
 .header-actions{gap:22px}.brand>span{font-size:8px}.design-hero{grid-template-columns:1fr;padding-top:33px;gap:32px;padding-bottom:30px}.hero-copy{padding:0}.hero-copy>.eyebrow{font-size:8px;max-width:none;margin-bottom:25px}.hero-copy h1{font-size:clamp(57px,14.5vw,81px);line-height:.96;letter-spacing:-.07em}.hero-copy h1 em:after{height:6px;bottom:-10px}.hero-copy .hero-intro{margin-top:30px;max-width:360px}.hero-copy .hero-intro p{font-size:15px;max-width:340px;line-height:1.5;margin-bottom:19px}.hero-copy .button{min-height:53px;font-size:13px;gap:28px}.hero-signature{display:none}.hero-collage{height:375px;margin-left:9%;margin-right:7px}.collage-main{inset:0 0 45px 0}.collage-detail{left:-9%;width:67%;height:150px;padding:6px;bottom:0}.collage-detail img{height:calc(100% - 22px)}.collage-detail>span{font-size:8px;padding-top:6px}.design-sticker{right:-12px;top:43%;width:93px;height:93px;font-size:14px}.collage-coordinate{bottom:0;right:-4px;font-size:6px}.brand-ribbon>.wrap{padding-block:17px;min-height:75px;gap:12px;flex-wrap:wrap}.brand-ribbon span:first-child{font-size:22px;max-width:280px;flex:1}.brand-ribbon span:nth-child(2){font-size:34px}.brand-ribbon span:last-child{max-width:none;width:100%;font-size:8px;letter-spacing:.04em}.section{padding-block:65px}.section-head h2{font-size:54px}.section-head .eyebrow{font-size:9px;margin-bottom:20px}.selected-work .project-grid{row-gap:40px}.selected-work .project-grid .project-card:nth-child(even){padding-top:0}.selected-work .project-card:nth-child(even){margin-left:8%}.selected-work .project-card:nth-child(3) .project-photo{aspect-ratio:1.2}.project-card h3{font-size:28px}.project-meta{font-size:8px;gap:8px}.photo-arrow{width:38px;height:38px;right:15px;bottom:18px}.design-lab{padding-block:60px}.design-lab h2{font-size:43px;margin-bottom:30px}.design-controls{gap:12px}.design-controls button{font-size:21px;display:block;position:relative;padding-block:14px;letter-spacing:-.05em;line-height:1.3}.design-controls button>span:first-child{display:block;font-size:9px;margin:0 0 9px}.design-controls button>span:last-child{position:absolute;right:0;top:11px;font-size:17px}.design-explorer{gap:25px}.design-photo{height:280px}.design-index{font-size:73px;right:12px;bottom:8px}.design-caption{display:block;margin-top:24px}.design-caption h3{font-size:26px}.design-caption p{font-size:14px}.design-caption .text-link{margin-top:18px}.services-section{padding-block:65px}.services-layout h2{font-size:50px}.service-row h3{font-size:23px}.service-row>span:last-child{height:30px;width:30px;font-size:22px;margin-left:-12px}.service-row:hover{padding-left:0}.method-copy h2{font-size:45px}.method-stamp{width:118px;height:118px;font-size:38px;left:17px;bottom:20px}.method-stamp small{font-size:8px}.about-strip{padding-top:0;padding-bottom:65px}.large-copy{font-size:25px}.cta-band{padding-block:45px 55px}.cta-row{grid-template-columns:1fr;gap:26px}.cta-row h2{font-size:clamp(39px,11vw,53px)}.cta-row p{font-size:16px}.site-footer{padding-top:40px}.footer-brandline{gap:20px;padding-bottom:35px}.footer-brandline .petrus-wordmark{width:70%}.footer-brandline>span:last-child{font-size:17px}.footer-top>div:first-child{grid-column:1/-1}.footer-top .brand-slogan{font-size:18px!important;max-width:none;margin-bottom:8px}.footer-top{gap:28px 18px}.metrics{gap:12px}.metrics>div{padding-left:10px;border-left-width:3px}.metrics strong{font-size:28px}.page-intro h1{font-size:clamp(40px,11vw,58px)}.project-title-row h1{font-size:43px}
}
@media(max-width:560px){.selected-work .project-grid{grid-template-columns:1fr}}
html[lang=en] .hero-copy h1{font-size:clamp(60px,6.3vw,100px)}
@media(max-width:800px){html[lang=en] .hero-copy h1{font-size:6.1vw}}
@media(max-width:560px){html[lang=en] .hero-copy h1{font-size:clamp(40px,12vw,62px)}}
@media(prefers-reduced-motion:reduce){.collage-detail:hover{transform:rotate(-5deg)}.collage-main:hover img{transform:none}}