/* V12 DESKTOP ART DIRECTION – restrained typographic finish.
   Approved V11 SVG retained unchanged. Exact same wordmark: header, statement, footer.
   Accent appears only as microinteraction, not brand typography or large colored shapes. */
:root{ --accent:#E86A3A; }
html{scroll-behavior:smooth;}
body{color:#111;background:#fff;}
/* Keep the header spare; the oversized wordmark belongs AFTER the hero. */
.site-header{background:#fff;}
.header-layout{min-height:88px;}
.brand{width:178px;}
.brand img{width:100%;height:auto;}
.header-cta{border-color:#c9c9c9;}
.header-cta:hover{border-color:#111;}
/* Main hero leads with service, not a second masthead. */
.hero{padding-top:41px;padding-bottom:21px;}
.hero-grid{min-height:616px;}
.hero-left{padding-top:52px;}
.hero-kicker{font-size:10px;letter-spacing:.16em;color:#6a6a6a;margin-bottom:29px;}
.hero h1{font-size:clamp(51px,5.05vw,76px);line-height:1.065;letter-spacing:-.072em;}
.hero-lead{font-size:16px;line-height:1.7;max-width:385px;margin-top:27px;color:#656565;}
.hero-links{margin-top:29px;}
.button-black{font-weight:550;}
.button-black .arr{color:var(--accent);font-size:17px;transition:transform .2s;}
.button-black:hover .arr{transform:translate(2px,-2px);}
.hero-image{height:602px;}
.hero-image.is-web-concept{background:linear-gradient(135deg,#f1f3f5,#d9dfe4 46%,#aab6c0);}
.hero-project-tag{border:1px solid #ededed;}
.hero-under-image{margin-top:17px;}
.hero-corner-cta{width:66px;height:66px;background:#fff!important;color:#141414;border:1px solid #e1e1e1;box-shadow:0 8px 20px #00000014;left:33%;bottom:115px;}
.hero-corner-cta:hover{background:#111!important;color:#fff;transform:translate(2px,-2px);}
.hero-indicators button{width:27px;height:3px;border-radius:10px;background:#d0d0d0;}
.hero-indicators button.active{background:var(--accent)!important;width:43px;}
.hero-sidekick{padding-top:23px;}
.mini-case-shell{border-color:#dedede;border-style:dashed;border-radius:23px 23px 0 0;}
/* Large, recognisable identity appears as an editorial SIGNATURE. */
.brand-statement.wrap{width:min(1100px,calc(100% - 128px));margin:65px auto 0;padding:0 0 35px;overflow:visible;}
.brand-statement-top{display:flex;justify-content:space-between;color:#898989;font-size:9px;font-weight:550;letter-spacing:.12em;margin-bottom:13px;}
.brand-statement img{display:block;width:100%;height:auto;}
/* 20-year positioning: ample air without exaggerated gaps. */
.trust{padding-top:75px;padding-bottom:116px;}
.trust-grid{margin-top:61px;gap:12%;}
.trust-titleline strong{font-size:clamp(118px,14.2vw,195px);letter-spacing:-.11em;}
.trust-copy h2{font-size:clamp(36px,3.4vw,52px);line-height:1.1;letter-spacing:-.055em;max-width:450px;}
.trust-copy p{font-size:16px;line-height:1.74;color:#626262;max-width:420px;}
/* Projects: visual-first, non-interactive bookmarks removed from HTML. */
.projects{background:#f8f8f8;padding-top:109px;padding-bottom:122px;}
.project-intro{margin-top:70px;margin-bottom:59px;}
.project-intro h2,.logo-title h2,.service-heading h2{letter-spacing:-.062em;line-height:1.075;font-weight:540;}
.project-intro p{font-size:16px;line-height:1.65;}
.project-filters{padding-top:22px;margin-bottom:36px;}
.filter-controls{gap:10px;}
.filter{font-size:12px;padding:12px 18px;border-color:#d4d4d4;position:relative;}
.filter.active{padding-left:28px;}
.filter.active:before{content:'';position:absolute;left:14px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(-50%);}
.work-grid{gap:74px 37px;}
.card-thumb{aspect-ratio:1.43;border-radius:11px;}
.card-thumb img{transition:transform .85s cubic-bezier(.16,1,.3,1);}
.work-card:hover .card-thumb img{transform:scale(1.028);}
.card-tags{top:17px;left:17px;gap:5px;}
.card-tags span{padding:7px 10px;background:#fffffff0;border:1px solid #ffffffaa;color:#333;font-size:10px;font-weight:500;}
.bookmark-corner{display:none!important;}
.card-info{padding-top:18px;}
.card-info strong{font-size:25px;letter-spacing:-.055em;}
.card-info small{font-size:13px;color:#777;}
.card-arrow{transition:transform .2s;}
.work-card:hover .card-arrow{transform:translate(3px,-3px);}
/* Partner list should feel generous, not like a dense badge grid. */
.logos{padding-top:129px;padding-bottom:132px;}
.logo-title{margin-top:70px;margin-bottom:81px;}
.logo-wall{gap:76px 45px;}
.logo-tile{color:#262626;min-height:88px;}
.logo-disclaimer{margin-top:78px;}
/* Dark service section anchors the visual rhythm. */
.services{background:#0c0c0c;padding-top:109px;padding-bottom:118px;}
.service-heading{margin-top:77px;margin-bottom:59px;}
.service-heading p{font-size:16px;line-height:1.75;}
.service-rows>div{min-height:146px;grid-template-columns:8% 45% 1fr 28px;}
.service-rows strong{font-size:clamp(27px,2.45vw,36px);}
.service-rows>div>span:nth-of-type(2){font-size:14px;color:#aaa;}
.service-rows b{font-size:25px;font-weight:300;color:#eee;}
/* Clear final contact gesture, no extra ornament. */
.contact{padding-top:115px;}
.contact-grid{padding-top:74px;padding-bottom:115px;}
.contact-grid h2{letter-spacing:-.073em;}
.contact-grid p:not(.eyebrow){font-size:16px;line-height:1.75;}
.footer{min-height:117px;}
/* Tablet/mobile only get protective adjustments; creative direction to be approved on desktop first. */
@media (min-width:761px) and (max-width:1320px){
 .hero{padding-top:32px;}.hero-grid{min-height:570px;}
 .hero-left{padding-top:38px;}.hero-image{height:561px;}
 .hero-corner-cta{bottom:107px;left:32%;}
 .brand-statement.wrap{width:min(1040px,calc(100% - 112px));margin-top:58px;}
 .trust{padding-top:72px;padding-bottom:106px;}
 .projects{padding-top:100px;padding-bottom:115px;}
 .work-grid{gap:60px 28px;}
 .logos{padding-top:116px;padding-bottom:119px;}
 .logo-wall{gap:64px 30px;}
 .services{padding-top:101px;padding-bottom:112px;}
 .contact{padding-top:104px;}
}
@media(max-width:760px){
 .hero{padding-top:16px;}.hero-grid{min-height:0;}
 .hero-left{padding-top:25px;}.hero-image{height:395px;}
 .hero-corner-cta{left:auto;right:14px;bottom:215px;}
 .brand-statement.wrap{width:calc(100% - 38px);margin-top:57px;padding-bottom:16px;}
 .brand-statement-top{font-size:8px;}
 .trust{padding-top:75px;padding-bottom:95px;}
 .projects{padding-top:91px;padding-bottom:98px;}
 .work-grid{gap:47px;}
 .logos{padding-top:94px;padding-bottom:99px;}
 .logo-wall{gap:50px 18px;}
 .services{padding-top:90px;padding-bottom:99px;}
 .service-rows>div{min-height:122px;}
 .contact{padding-top:85px;}.contact-grid{padding-top:60px;padding-bottom:84px;}
}
@media(prefers-reduced-motion: reduce){html{scroll-behavior:auto;}}