:root{--red:#df1724;--ink:#262626;--paper:#f7f7f5}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Urbanist,Arial,sans-serif;font-size:18px;line-height:1.5}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{max-width:100%;object-fit:cover}h1,h2,h3,nav,.button,.label,.phone,.about-facts strong{font-family:Phudu,Arial,sans-serif}h1,h2,h3,p{margin:0}h2{font-size:56px;font-weight:600;line-height:.99;letter-spacing:-1px}h3{font-size:30px;line-height:1.08;font-weight:500}p{color:#686868}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--red);outline-offset:5px}.container{max-width:1300px;margin:auto}.section{padding:100px 32px}.label{font-size:14px;letter-spacing:1.6px;display:block;margin-bottom:27px}.skip{position:absolute;top:-100px;background:white;padding:10px;z-index:10}.skip:focus{top:0}header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:14px 4%;background:var(--paper)}header img{width:105px;height:70px;object-fit:contain}nav{display:flex;gap:33px;font-size:18px}nav a:hover{color:var(--red)}.phone{font-size:22px}.phone small{display:block;font-family:Urbanist;font-size:12px;color:#777}.hero{position:relative;min-height:690px;height:calc(100svh - 100px);max-height:900px;overflow:hidden;background:#eeeae4}.visual{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity .5s}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,241,235,.97),rgba(244,241,235,.65) 35%,transparent 65%);pointer-events:none}.hero-inner{position:relative;z-index:1;max-width:1400px;margin:auto;height:100%;min-height:690px;padding:55px 4% 35px;display:flex;flex-direction:column;justify-content:space-between}.hero-note{max-width:340px}.hero-note p{font-size:20px;line-height:1.45;color:#343434;margin-bottom:26px}.hero-note .label{margin-bottom:16px}.button{display:inline-flex;align-items:center;gap:30px;background:var(--red);color:white;padding:15px 22px;border-radius:6px;font-size:18px}.button:hover{background:#b6111c}.button span{font-family:Arial}.hero h1{font-size:clamp(90px,11vw,165px);font-weight:500;line-height:.92;letter-spacing:-3px;max-width:1100px;margin-top:30px}.hero h1 em{font-style:normal;color:var(--red)}.slide-controls{position:absolute;right:4%;bottom:40px;display:flex;align-items:center;gap:8px}.slide-controls span{font-size:13px;margin-right:12px;background:var(--paper);padding:8px}.slide-controls button{height:42px;min-width:42px;border:1px solid #d0d0cb;background:var(--paper);border-radius:50%;font-size:18px}.slide-controls #pause{border-radius:4px;font-size:12px;padding:0 12px}.credentials{background:#292929;color:white}.credentials .container{display:flex;justify-content:space-between;padding:26px 32px;font-size:16px}.intro-heading{display:grid;grid-template-columns:1fr 2fr;gap:0 70px}.intro-heading .label{grid-row:1/3}.intro-heading p{max-width:510px;margin-top:26px}.concern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:65px}.concern-grid img{width:100%;height:270px;filter:saturate(.7);transition:filter .3s}.concern-grid a:hover img{filter:saturate(1)}small{font-size:12px;letter-spacing:.4px}.concern-grid small,.project-grid small{display:block;margin:22px 0 12px}.concern-grid p{margin:15px 0 22px;max-width:320px}.link{display:inline-block;font-size:15px;border-bottom:1px solid;padding-bottom:4px}.pale{background:#eaeae5}.service-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:100px}.service-layout img{display:block;width:100%;height:210px;margin:35px 0 15px}.service-layout>div>p{font-size:15px}.service-list{padding-top:35px}details{border-bottom:1px solid #babbb5}summary{list-style:none;padding:27px 0;display:flex;align-items:center;gap:20px;font-family:Phudu;font-size:25px;line-height:1.15;cursor:pointer}summary::-webkit-details-marker{display:none}summary span{font-family:Urbanist;font-size:12px;color:#74746e}summary b{margin-left:auto;font-size:24px;font-weight:400}details p{padding:0 30px 26px;font-size:17px}details[open] summary b{transform:rotate(45deg)}.project-heading{max-width:700px}.project-heading p{max-width:460px;margin-top:24px}.project-grid{display:grid;grid-template-columns:1.2fr .9fr 1fr;gap:42px;margin-top:60px}.project-grid article:nth-child(2){padding-top:80px}.project-grid article:nth-child(3){padding-top:30px}.project-grid img{width:100%;height:350px;filter:saturate(.7)}.project-grid p{font-size:16px;margin-top:16px}.dark{background:#292929;color:#f7f7f5}.about-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:130px}.about-layout p{color:#c3c3bf;max-width:520px;margin:25px 0}.about-facts>div{border-top:1px solid #565651;padding:24px 0 33px}.about-facts strong{font-size:44px;line-height:1.1;display:block;font-weight:500}.about-facts span{display:block;color:#b6b6b0;font-size:15px;margin-top:10px}.contact-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:100px}.contact-layout h2{font-size:90px}.contact-layout p{margin-bottom:25px}.contact-phone{display:block;font-size:30px;margin-top:28px}.address{font-size:15px;margin-top:28px}footer{border-top:1px solid #d6d6d0}footer .container{display:flex;justify-content:space-between;gap:30px;padding:26px 32px;font-size:12px}footer span:first-child{font-weight:700}@media(min-width:1600px){.hero-inner{max-width:1500px}.hero h1{font-size:180px}}@media(max-width:900px){nav{gap:16px}.phone{display:none}.hero h1{font-size:100px}.hero{height:720px}.hero-inner{min-height:720px}.slide-controls{bottom:25px}.hero h1{margin-bottom:55px}.service-layout,.about-layout{gap:45px}.section{padding:75px 25px}.concern-grid{gap:20px}.concern-grid img{height:220px}.project-grid{gap:22px}.project-grid img{height:250px}.contact-layout{gap:40px}.contact-layout h2{font-size:70px}.intro-heading{gap:35px}h2{font-size:48px}}@media(max-width:600px){header{height:85px;padding:10px 20px}header img{width:80px;height:60px}nav{gap:13px;font-size:14px}nav a:first-child{display:none}.hero{height:730px;min-height:0}.hero-inner{min-height:0;height:100%;padding:30px 22px}.hero:after{background:linear-gradient(90deg,rgba(244,241,235,.9),rgba(244,241,235,.5) 65%,rgba(244,241,235,.2))}.visual{background-position:62% center}.hero-note{max-width:280px}.hero-note p{font-size:18px}.hero h1{font-size:76px;letter-spacing:-1px;line-height:.96;margin-bottom:62px}.slide-controls{right:22px;bottom:25px}.credentials .container{gap:15px;padding:22px;font-size:12px}.section{padding:65px 22px}.intro-heading,.service-layout,.about-layout,.contact-layout{display:block}h2{font-size:46px}.intro-heading p{font-size:17px}.concern-grid,.project-grid{display:block;margin-top:35px}.concern-grid>a{display:block;margin-top:38px}.concern-grid img{height:260px}.concern-grid p{max-width:100%}.service-list{margin-top:20px}.service-layout img{height:220px}.project-grid article:nth-child(n){padding-top:0;margin-top:45px}.project-grid img{height:330px}.about-facts{margin-top:45px}.contact-layout h2{font-size:68px;margin-bottom:32px}footer .container{flex-wrap:wrap;padding:24px 22px;gap:15px}.label{margin-bottom:20px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* Home composition follows the supplied Optik reference. */
header{justify-content:flex-start;gap:60px;padding:14px 5.2%;height:95px}header nav{gap:28px}header .phone{margin-left:auto}.hero{height:calc(100svh - 95px);min-height:660px;max-height:1000px;background:#f7f7f5}.visual{left:30%;background-position:center;mask-image:linear-gradient(90deg,transparent,#000 20%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 20%)}.hero:after{background:linear-gradient(0deg,rgba(0,0,0,.18),transparent 35%);left:38%}.hero-inner{max-width:none;min-height:660px;padding:0 5.2%;display:block}.hero-note{position:absolute;top:22%;width:245px;max-width:24%;z-index:2}.hero-note p{font-size:20px;line-height:1.45;margin-bottom:44px}.hero-note .button{background:#161616;font-size:17px;padding:15px 19px;gap:16px}.hero-note .button span{background:white;color:#111;width:26px;height:26px;border-radius:50%;text-align:center;line-height:26px}.hero h1{position:absolute;left:5.2%;right:3%;bottom:75px;max-width:none;white-space:nowrap;font-size:clamp(80px,12.8vw,245px);letter-spacing:-.035em;line-height:1;margin:0;font-weight:600;color:transparent;background:linear-gradient(90deg,#111 0%,#111 33%,#fff 44%,#fff 100%);background-clip:text;-webkit-background-clip:text}.slide-controls{bottom:20px;right:5.2%}.slide-controls button{height:34px;min-width:34px}.slide-controls span{background:transparent;color:#222}.credentials{background:#393939}@media(max-width:900px){header{gap:32px}.hero,.hero-inner{min-height:660px}.hero-note{max-width:33%;width:230px}.hero-note p{font-size:18px}.hero h1{font-size:12.7vw;margin:0}.visual{left:28%}}@media(max-width:600px){header{padding:10px 20px;gap:25px;height:85px}header nav{gap:13px}.hero{height:calc(100svh - 85px);min-height:640px}.hero-inner{min-height:640px;padding:0 22px}.hero-note{top:30px;max-width:70%;width:260px}.hero-note p{font-size:17px;margin-bottom:20px}.visual{left:0;top:180px;background-position:65% center;mask-image:linear-gradient(180deg,transparent,#000 25%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%)}.hero:after{left:0;background:linear-gradient(0deg,rgba(0,0,0,.4),transparent 50%)}.hero h1{font-size:17vw;white-space:normal;left:22px;right:20px;bottom:90px;line-height:.98;background:none;color:white;letter-spacing:-.025em}.slide-controls{right:22px}.slide-controls span{color:white}.hero-note .button{font-size:15px}.credentials .container{font-size:11px}}
@media(min-width:601px){.hero h1{font-size:11.2vw;letter-spacing:-.04em}.hero-note .button{white-space:nowrap;font-size:15px;gap:12px;padding:14px 16px}.hero h1{background-image:linear-gradient(90deg,#111 0%,#111 30%,#fff 30%,#fff 100%)}}
.hero:after{background:linear-gradient(0deg,rgba(0,0,0,.48),transparent 55%)}
/* White studio direction: the isolated subject carries each slide. */
header,.hero{background:#fff}.visual{left:25%;inset-block:0;background-size:contain;background-repeat:no-repeat;background-position:right center;mask-image:none;-webkit-mask-image:none}.hero:after{display:none}.hero h1{background:none;-webkit-text-fill-color:initial;color:#111;text-shadow:0 2px 20px rgba(255,255,255,.65)}.hero-note p{color:#333}.slide-controls span{color:#222}.slide-controls button{background:#fff}.hero-note{top:23%}@media(max-width:600px){.visual{left:0;top:175px;bottom:110px;background-position:center;background-size:contain}.hero-note{top:26px}.hero h1{color:#111;font-size:15vw;bottom:75px}.slide-controls span{color:#222}}
.visual{left:15%;background-size:cover;background-position:right center}.hero h1{font-size:11vw;bottom:60px}.hero-note{top:23%}@media(max-width:600px){.visual{left:0;background-size:contain}.hero h1{font-size:15vw;bottom:75px}}
/* Keep the hero layout while reducing every slide image to 75% height. */
.visual{top:0;bottom:auto;height:75%;background-size:contain;background-position:right center}@media(max-width:600px){.visual{top:175px;bottom:auto;height:52%;background-size:contain}}
/* Reduce the hero section, not the artwork. */
.hero{height:clamp(495px,calc(75svh - 71.25px),750px);min-height:0;max-height:none}.hero-inner{height:100%;min-height:0}.visual{top:0;bottom:0;height:100%;background-size:cover;background-position:right center}.hero-note{top:15%}.hero-note p{margin-bottom:25px}.hero h1{bottom:55px;font-size:min(11vw,23vh)}
@media(max-width:600px){.hero{height:max(480px,calc(75svh - 63.75px))}.hero-inner{min-height:0}.hero-note{top:22px}.hero-note p{font-size:16px}.visual{top:120px;bottom:50px;height:auto;background-size:contain}.hero h1{font-size:15vw;bottom:65px}.hero-note .button{padding:10px 14px}}
/* Each concern has a distinct composition within the same type system. */
.hero[data-slide="1"] .visual{left:-24%;right:24%;background-position:center}
.hero[data-slide="1"] .hero-note{left:auto;right:6%;top:43%;width:285px;max-width:26%}
.hero[data-slide="1"] h1{left:63%;right:4%;top:8%;bottom:auto;white-space:normal;font-size:clamp(60px,6.8vw,130px);line-height:.95}
.hero[data-slide="2"] .visual{left:28%;right:-6%;background-position:right center}
.hero[data-slide="2"] h1{left:5.2%;right:52%;top:9%;bottom:auto;white-space:normal;font-size:clamp(60px,7.5vw,140px);line-height:.95}
.hero[data-slide="2"] .hero-note{top:auto;bottom:14%;width:320px;max-width:29%}
@media(max-width:900px) and (min-width:601px){.hero[data-slide="1"] .hero-note{top:38%;max-width:30%}.hero[data-slide="1"] h1{left:62%;font-size:7vw}.hero[data-slide="2"] .hero-note{max-width:38%;bottom:10%}.hero[data-slide="2"] h1{font-size:8vw}}
@media(max-width:600px){.hero[data-slide="1"] .visual{left:-25%;right:15%;top:120px;bottom:0}.hero[data-slide="1"] h1{left:48%;right:18px;top:25px;font-size:12vw}.hero[data-slide="1"] .hero-note{left:22px;right:auto;top:20px;bottom:auto;width:42%;max-width:42%}.hero[data-slide="1"] .hero-note p{font-size:13px;line-height:1.4;margin-bottom:14px}.hero[data-slide="1"] .button{white-space:normal;font-size:12px;gap:8px}.hero[data-slide="2"] .visual{left:12%;right:-12%;top:140px;bottom:30px}.hero[data-slide="2"] h1{left:22px;right:35%;top:25px;font-size:13vw}.hero[data-slide="2"] .hero-note{left:22px;top:auto;bottom:70px;width:43%;max-width:43%}.hero[data-slide="2"] .hero-note p{font-size:13px;line-height:1.4;margin-bottom:12px}.hero[data-slide="2"] .button{white-space:normal;font-size:12px;gap:8px}}
@media(min-width:601px){.hero[data-slide="1"] .visual{left:-20%;right:39%;background-size:contain;background-position:right center}.hero[data-slide="1"] h1{left:64%;font-size:6.5vw}.hero[data-slide="1"] .hero-note{left:64%;right:4%;top:47%;max-width:30%;width:auto}.hero[data-slide="2"] .visual{background-size:contain}}
/* Fill the second and third compositions without changing slide one. */
@media(min-width:601px){
.hero[data-slide="1"] .visual{left:-36%;right:32%;background-size:cover;background-position:right center;mask-image:linear-gradient(90deg,#000 85%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent 100%)}
.hero[data-slide="1"] h1{left:60%;right:3%;top:12%;font-size:7.2vw}
.hero[data-slide="1"] .hero-note{left:61%;right:5%;top:51%;max-width:none}
.hero[data-slide="2"] .visual{left:8%;right:-12%;background-size:cover;background-position:right center}
.hero[data-slide="2"] h1{left:5.2%;right:49%;top:10%;font-size:8vw}
.hero[data-slide="2"] .hero-note{left:5.2%;bottom:15%;max-width:29%;width:340px}
}
.hero h1{text-shadow:none}
@media(min-width:901px){.hero[data-slide="0"] .hero-note{width:480px;max-width:38%}.hero[data-slide="0"] .hero-note p{max-width:none}}
@media(min-width:601px) and (max-width:900px){.hero[data-slide="0"] .hero-note{width:360px;max-width:44%}}
@media(min-width:901px){
.hero[data-slide="1"] .hero-note{left:59%;right:3%;width:auto;max-width:none}
.hero[data-slide="2"] .hero-note{width:510px;max-width:39%;bottom:15%}
.hero[data-slide="1"] .hero-note p,.hero[data-slide="2"] .hero-note p{max-width:none}
}
@media(min-width:601px) and (max-width:900px){.hero[data-slide="1"] .hero-note{left:60%;right:3%;max-width:none}.hero[data-slide="2"] .hero-note{width:390px;max-width:44%}}
/* Land slide: one continuous headline, matching the first slide. */
@media(min-width:601px){
.hero[data-slide="1"] h1{left:5.2%;right:3%;top:auto;bottom:55px;white-space:nowrap;font-size:min(11vw,23vh);line-height:1}
.hero[data-slide="1"] .hero-note{left:61%;right:4%;top:15%;bottom:auto;width:auto;max-width:none}
}
@media(max-width:600px){
.hero[data-slide="1"] h1{left:22px;right:15px;top:auto;bottom:65px;white-space:nowrap;font-size:12vw;line-height:1}
.hero[data-slide="1"] .hero-note{left:22px;right:22px;top:22px;width:auto;max-width:none}
.hero[data-slide="1"] .hero-note p{font-size:16px;max-width:340px}
.hero[data-slide="1"] .visual{top:145px;bottom:95px}
}
/* Land keeps a single-line title but uses a top-led composition. */
@media(min-width:601px){
.hero[data-slide="1"] h1{left:5.2%;right:3%;top:5%;bottom:auto;white-space:nowrap;font-size:min(10.5vw,21vh);line-height:1}
.hero[data-slide="1"] .hero-note{left:64%;right:4%;top:auto;bottom:19%;width:auto;max-width:none}
}
@media(max-width:600px){
.hero[data-slide="1"] h1{left:22px;right:15px;top:22px;bottom:auto;white-space:nowrap;font-size:12vw}
.hero[data-slide="1"] .visual{top:80px;bottom:130px}
.hero[data-slide="1"] .hero-note{left:22px;right:22px;top:auto;bottom:65px}
.hero[data-slide="1"] .hero-note p{font-size:14px;max-width:none;margin-bottom:12px}
}