/* Super Agency — editorial content blocks (Motto-style rhythm, theme tokens: Neue Montreal, 10px rem base, black/white) */
.sa-section{padding-top:12rem;padding-bottom:4rem}
.sa-section+.sa-section{padding-top:8rem}
.sa-section.dark{background:#000;color:#fff;padding-top:12rem;padding-bottom:12rem;margin-top:8rem}
@media (max-width:768px){.sa-section{padding-top:8rem;padding-bottom:2rem}.sa-section.dark{padding-top:8rem;padding-bottom:8rem;margin-top:4rem}}
/* chapter opener — huge uppercase, two lines max */
.sa-chapter{font-size:clamp(5.6rem,9.5vw,15rem);line-height:.92;letter-spacing:-.035em;font-weight:500;text-transform:uppercase;max-width:14ch;margin:0 0 8rem}
@media (max-width:768px){.sa-chapter{margin-bottom:5rem}}
/* 1/3 – 2/3 grid: small parenthetical kicker left, content right */
.sa-grid{display:grid;grid-template-columns:1fr 2fr;gap:6rem 8rem;align-items:start}
.sa-grid.even{grid-template-columns:1fr 1fr}
@media (max-width:1024px){.sa-grid,.sa-grid.even{grid-template-columns:1fr;gap:4rem}}
.sa-kicker{font-size:1.5rem;letter-spacing:.06em;text-transform:uppercase;color:#6b6b6b;font-weight:500;padding-top:.6rem}
.sa-kicker::before{content:"(";}
.sa-kicker::after{content:")";}
.dark .sa-kicker{color:#9a9a9a}
.sa-kicker-text{font-size:2.2rem;line-height:1.4;max-width:32rem;margin-top:2rem;color:#000}
.dark .sa-kicker-text{color:#fff}
/* big statement */
.sa-statement{font-size:clamp(3rem,3.4vw,5.2rem);line-height:1.08;letter-spacing:-.025em;font-weight:500;margin:0 0 5rem;max-width:22ch}
.sa-statement.lg{font-size:clamp(3.4rem,4.2vw,6.4rem);max-width:18ch}
/* labelled paragraphs */
/* editorial voice: black label, grey regular-weight body, generous leading, ~60-character measure */
.sa-labelled{display:flex;flex-direction:column;gap:4.8rem;max-width:66rem}
.sa-labelled .lbl{font-size:2.6rem;font-weight:500;line-height:1.3;letter-spacing:-.01em;margin:0 0 1.4rem;color:#000}
.sa-labelled p{font-size:2.4rem;line-height:1.5;font-weight:400;letter-spacing:0;color:#8c8c8c;margin:0 0 1.8rem}
.sa-labelled p:last-child{margin-bottom:0}
.sa-labelled p a{color:#000}
.dark .sa-labelled .lbl{color:#fff}.dark .sa-labelled p{color:#9a9a9a}.dark .sa-labelled p a{color:#fff}
/* numbered list — (01) title / grey text */
.sa-numbered{display:grid;grid-template-columns:1fr 1fr;gap:5rem 6rem;margin:0;padding:0;list-style:none}
.sa-numbered.one{grid-template-columns:1fr}
.sa-numbered li{display:grid;grid-template-columns:6rem 1fr;gap:1rem;align-items:start}
.sa-numbered .n{font-size:0;position:relative;width:2.4rem;height:2.4rem;margin-top:.8rem;background:url("data:image/svg+xml;utf8,") no-repeat center/contain}
.sa-numbered .n::before,.sa-numbered .n::after{content:none}
.dark .sa-numbered .n{background-image:url("data:image/svg+xml;utf8,")}
.sa-numbered .t{font-size:2.6rem;font-weight:500;line-height:1.2;letter-spacing:-.01em}
.sa-numbered .d{font-size:1.9rem;line-height:1.5;color:#555;margin-top:1rem}
.dark .sa-numbered .t{color:#fff}.dark .sa-numbered .d{color:#b5b5b5}.dark .sa-numbered .n{color:#9a9a9a}
@media (max-width:768px){.sa-numbered{grid-template-columns:1fr;gap:3rem}.sa-numbered .t{font-size:2.2rem}}
/* photo with caption */
.sa-photo{margin:0}
.sa-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2rem;display:block}
@media (max-width:1024px){.sa-photo img{aspect-ratio:4/3}}
.sa-photo.wide img{aspect-ratio:16/10}
.sa-photo figcaption{display:flex;justify-content:space-between;gap:2rem;font-size:1.8rem;margin-top:1.6rem;color:#000}
.sa-photo figcaption span:last-child{color:#6b6b6b}
.sa-photo a{color:inherit;text-decoration:none}
/* card grid (dark cards on light, or outlined on dark) */
.sa-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0;padding:0;list-style:none}
.sa-cards.four{grid-template-columns:repeat(4,1fr)}
.sa-cards li{background:#000;color:#fff;border-radius:2rem;padding:3.2rem;min-height:24rem;display:flex;flex-direction:column;justify-content:space-between;transition:background .4s}
.sa-cards li:hover{background:#0119ff}
.sa-cards .n{font-size:1.4rem;color:#9a9a9a;letter-spacing:.06em}
.sa-cards .t{font-size:2.4rem;font-weight:500;line-height:1.15;letter-spacing:-.01em}
.dark .sa-cards li{background:transparent;border:1px solid #333}
.dark .sa-cards li:hover{background:#111}
@media (max-width:1024px){.sa-cards,.sa-cards.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.sa-cards,.sa-cards.four{grid-template-columns:1fr}.sa-cards li{min-height:16rem}}
/* chips row */
.sa-chips{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:3rem}
.sa-chips .button,.sa-chips a.button.border{font-size:1.7rem;font-weight:500;height:5.6rem;padding:0 3.2rem;letter-spacing:.005em}
@media (max-width:768px){.sa-chips .button,.sa-chips a.button.border{font-size:1.5rem;height:5rem;padding:0 2.6rem}}
/* marquee divider (reuses theme marquee) */
.sa-divider{overflow:hidden;white-space:nowrap;margin:10rem 0 2rem;font-size:clamp(6rem,10vw,16rem);line-height:1;letter-spacing:-.03em;font-weight:500;text-transform:uppercase}
.sa-divider .track{display:inline-block;animation:saMarq 28s linear infinite;padding-right:4rem}
.sa-divider .track span{padding-right:4rem}
@keyframes saMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ---- site-wide mobile overflow guards (footer nowrap links, mega-menu panel width) ---- */
html,body{overflow-x:clip}
@media (max-width:768px){
footer nav .menu{grid-template-columns:1fr;gap:4rem 0}
footer nav .menu ul{width:100%}
footer nav .menu ul.type-2{margin-left:0}
footer nav .menu ul li a.link{white-space:normal;height:auto;line-height:1.3;display:inline-block}
.menu-content,.menu-content .menu-silos{max-width:100%;box-sizing:border-box}
.menu-content .menu-silos .col{min-width:0;flex:1 1 13rem}
.menu-content .menu-silos a{white-space:normal}
.sa-grid{gap:3rem}
.sa-chapter{font-size:clamp(4.4rem,13vw,7rem);max-width:100%;word-break:normal;overflow-wrap:anywhere}
.sa-statement{max-width:100%}
}
/* ---- Work With Us card with inline lead form (white) — same rhythm as the contact form ---- */
.lets-talk.has-form{display:grid;grid-template-columns:1fr 1.25fr;gap:4rem 8rem;align-items:stretch}
.lets-talk.has-form small{grid-column:1/-1}
.lets-talk.has-form .item{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.lets-talk.has-form .item .caption{flex-direction:column;align-items:flex-start;gap:3rem}
.lets-talk.has-form .item .caption span{font-size:6.4rem;line-height:1.05;letter-spacing:-.03em}
.lets-talk .sa-lead-note{font-size:2rem;line-height:1.5;color:#555;max-width:44rem;margin:0}
.lets-talk .content-form.light{background:#fff;padding:0;margin:0;border-radius:0;align-self:stretch;display:flex}
.content-form.light form{display:flex;flex-direction:column;justify-content:space-between;width:100%;min-height:100%;margin-top:0} /* theme default margin-top:4rem pushed the form 4rem below its box and ate the card's bottom padding */
.content-form.light form .row{display:flex;flex-wrap:wrap;gap:4rem 6rem}
.content-form.light form .row .col-12{flex:0 0 100%}
.content-form.light form .row .col-6{flex:1 1 calc(50% - 3rem)}
.lets-talk .content-form.light form .row .form-item,.lets-talk .content-form.light form .form-item{height:10rem}
.content-form.light form .form-textarea{height:20rem;margin-top:4rem}
.content-form.light form input,.content-form.light form textarea{color:#000;caret-color:#000;border-bottom:1px solid #000}
.content-form.light form .title{color:#000}
.content-form.light form input:focus~.title,.content-form.light form input:not(:placeholder-shown)~.title,.content-form.light form textarea:focus~.title,.content-form.light form textarea:not(:placeholder-shown)~.title{color:#6b6b6b}
.content-form.light form input:-webkit-autofill{-webkit-text-fill-color:#000!important}
/* floating labels: the theme only lifts the label for text/email/number inputs — tel and url fields need the same */
.content-form form input[type=tel]:focus~.title,.content-form form input[type=tel]:not(:placeholder-shown)~.title,
.content-form form input[type=url]:focus~.title,.content-form form input[type=url]:not(:placeholder-shown)~.title{top:1.6rem;font-size:1.6rem}
.content-form.light form input[type=tel]:focus~.title,.content-form.light form input[type=tel]:not(:placeholder-shown)~.title,
.content-form.light form input[type=url]:focus~.title,.content-form.light form input[type=url]:not(:placeholder-shown)~.title{color:#6b6b6b}
.lets-talk .content-form.light form>.form-item:last-child{height:auto;display:flex;justify-content:flex-end;margin-top:4rem}
.content-form.light form .button{margin:0}
.sa-lead-msg{font-size:2.2rem;line-height:1.4;padding:2rem 0}
.sa-lead-msg.err{color:#b00}
@media (max-width:1024px){.lets-talk.has-form{grid-template-columns:1fr;gap:4rem}.lets-talk.has-form .item .caption span{font-size:4.8rem}.lets-talk.has-form .item .icons{margin:3rem 0}.content-form.light form .row{gap:2rem 3rem}.content-form.light form .form-item{height:8rem}}
@media (max-width:768px){.lets-talk.has-form .item .caption span{font-size:3.6rem}.content-form.light form .row .col-6{flex:0 0 100%}.content-form.light form .form-textarea{height:16rem}}
/* crisp rounded border on retina after the fade-up animation (no fractional compositing layer left behind) */
.lets-talk{border-width:.15rem;isolation:isolate;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* ---- mobile: portrait imagery (work cards, editorial photos, article cards) + form button breathing room ---- */
@media (max-width:768px){
.work-cards figure{height:auto;aspect-ratio:4/5}
.work-cards figure img,.work-cards figure video{width:100%;height:100%;object-fit:cover}
.sa-photo img{aspect-ratio:4/5}
.blog-cards .item figure img{aspect-ratio:4/5}
.blog-detail .cover img{height:auto;aspect-ratio:4/5}
.content-image .image img,.content-caption.image figure img{aspect-ratio:4/5;object-fit:cover;height:auto}
.lets-talk .content-form.light form>.form-item:last-child{margin-top:3rem;margin-bottom:0}
}
/* ---- mobile tightening: icon top-right, shorter form rhythm, 3:4 portrait cards ---- */
@media (max-width:768px){
.lets-talk.has-form{position:relative;gap:2.4rem;padding:3.2rem 2.4rem 2.4rem}
.lets-talk.has-form .item{gap:1.6rem}
.lets-talk.has-form .item .icons{position:absolute;top:2.6rem;right:2rem;margin:0}
.lets-talk.has-form .item .icons img{width:7rem}
.lets-talk.has-form .item .caption{gap:1.4rem;padding-top:1rem}
.lets-talk.has-form .item .caption span{font-size:3.2rem;line-height:1.08;max-width:85%}
.lets-talk .sa-lead-note{font-size:1.6rem;line-height:1.45}
.lets-talk .content-form.light form .row{gap:0.8rem 0}
.lets-talk .content-form.light form .row .form-item,.lets-talk .content-form.light form .form-item{height:6.8rem}
.content-form.light form input{height:5rem;font-size:2.2rem}
.content-form.light form .title{font-size:1.8rem;top:2.4rem}
.content-form.light form .form-textarea{height:11rem;margin-top:1.6rem}
.content-form.light form textarea{font-size:1.8rem}
.lets-talk .content-form.light form>.form-item:last-child{margin-top:2.4rem;margin-bottom:0}
.work-cards figure{aspect-ratio:3/4}
.sa-photo img{aspect-ratio:3/4}
.blog-cards .item figure img{aspect-ratio:3/4}
}
/* button never touches the card border */
.lets-talk .content-form.light form>.form-item:last-child{margin-bottom:0;padding-bottom:0}
@media (max-width:768px){.lets-talk .content-form.light form>.form-item:last-child{margin-top:2.8rem}}
/* ---- sunburst block: radial dashed rays (canvas) + items cycling in the centre ---- */
.sa-orbit-section{margin-top:6rem;position:relative;overflow:hidden;isolation:isolate}
.sa-orbit-section .sa-kicker{color:#9a9a9a;position:relative;z-index:2}
/* rays live on the section (not the burst box) so they fill the padding bands above/below the circles */
.sa-burst{position:relative;width:100vw;margin:2rem 0 0 calc(50% - 50vw);height:clamp(84rem,105vh,124rem);z-index:1}
.sa-burst-count{position:relative;z-index:2}
.sa-burst-stage{position:absolute;top:0;left:50%;height:100%;aspect-ratio:1/1;transform:translateX(-50%)}
.sa-burst-svg{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;display:block;shape-rendering:geometricPrecision;transform:translate(-50%,-50%) rotate(0deg);animation:saSpin 300s linear infinite;will-change:transform}
@keyframes saSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sa-burst-svg{animation:none}}
.sa-burst-svg path{opacity:.6}
.sa-burst .nd{position:absolute;transform:translate(-50%,-50%);aspect-ratio:1/1}
.sa-burst .node{animation:saBreath 5s ease-in-out infinite;animation-delay:var(--dl,0s);will-change:transform}
.sa-burst a.node:hover{background:#fff;color:#000;animation-play-state:paused}
@keyframes saBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.sa-burst .node{animation:none}}
.sa-burst .node{font-size:var(--fs,2rem);text-decoration:none;transition:background .4s ease,color .4s ease;width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;padding:8%;border-radius:50%;background:#000;color:#fff;border:1px solid #fff;font-weight:500;line-height:1.05;letter-spacing:-.02em;overflow-wrap:anywhere}
.sa-burst-word{display:none}
.sa-burst-count{text-align:right;margin-top:1.2rem;font-size:1.4rem;letter-spacing:.1em;color:#9a9a9a}
.button.border.light{border:1px solid #fff;color:#fff}
.sa-orbit-section .sa-orbit-fallback{display:none}
@media (min-width:769px) and (max-width:1279px){
.sa-burst{height:clamp(60rem,min(100vh,100vw),100rem)}
.sa-burst .node{font-size:calc(var(--fs,2rem) * .72)}
}
/* tablet + mobile: same ring layout as desktop, fully static (no spin, no breathing) */
@media (max-width:1279px){
.sa-burst-svg{animation:none;transform:translate(-50%,-50%)}
.sa-burst .node{animation:none;transition:none}
}
@media (max-width:768px){
.sa-burst{height:auto;aspect-ratio:1/1;width:100vw;margin:1.6rem 0 0 calc(50% - 50vw)}
.sa-burst .node{font-size:calc(var(--fs,2rem) * .48);padding:4%;overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto;line-height:1.1}
.sa-burst-count{margin-top:1.6rem}
}
/* ---- insights: same component as Works (.work-cards) ---- */
.work-cards.sa-insights{max-width:176rem;width:100%;margin:auto;padding:0 2rem 10rem}
.work-cards.sa-insights .items{margin-top:2rem;grid-template-columns:repeat(3,1fr)}
@media (max-width:1023px){.work-cards.sa-insights .items{grid-template-columns:repeat(2,1fr);gap:3rem}}
@media (max-width:600px){.work-cards.sa-insights .items{grid-template-columns:1fr}}
@media (max-width:1279px){.work-cards.sa-insights figure{height:auto;aspect-ratio:4/5}}
.work-cards.sa-insights .item{color:#000;text-decoration:none}
.work-cards.sa-insights figure{height:auto;aspect-ratio:4/5}
.work-cards.sa-insights figure img{width:100%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.work-cards.sa-insights .item:hover figure img{transform:scale(1.05)}
.work-cards.sa-insights figure figcaption ul li .tag{font-size:2rem;background:#fff;height:5rem;color:#000;display:flex;justify-content:center;align-items:center;white-space:nowrap;padding:0 2rem;border-radius:100vmax}
.work-cards.sa-insights .caption{display:flex;flex-direction:column;gap:1rem}
.work-cards.sa-insights .caption span{font-size:3.2rem;line-height:1.15;letter-spacing:-.02em}
.work-cards.sa-insights .caption .date{font-size:1.6rem;color:#7a7a7a}
@media (max-width:1024px){.work-cards.sa-insights figure figcaption ul li .tag{font-size:1.4rem;height:3.6rem;padding:0 1.2rem}.work-cards.sa-insights .caption span{font-size:2.4rem}}
@media (max-width:768px){.work-cards.sa-insights{padding-bottom:6rem}.work-cards.sa-insights figure{aspect-ratio:3/4}.work-cards.sa-insights .caption span{font-size:2rem}}
/* ---- one image radius site-wide (full-bleed images excepted) ---- */
:root{--sa-radius:2rem}
.work-cards figure,.work-cards .video video,.blog-cards .item,.blog-cards .item figure,.blog-detail .cover img,.carousel-slider figure img,.costumer .swiper .swiper-slide,.costumer .swiper .swiper-slide .info img,.sa-photo img,.sa-cards li,.sa-insight-media,.pl .item figure,.pl .item figure img{border-radius:var(--sa-radius)}
.blog-cards .item figure{border-radius:var(--sa-radius) var(--sa-radius) 0 0}
@media (max-width:1024px){:root{--sa-radius:1.6rem}}
/* ---- client logo wall: logos are 290x290 artboards with padding baked in, so fill the cell (theme scaled natural px, which collapsed on tablet/mobile) ---- */
.clients .logos .item img{width:70%;height:70%;object-fit:contain;transform:none}
@media (max-width:1024px){.clients .logos{grid-template-columns:repeat(4,1fr)}.clients .logos .item img{width:64%;height:64%}}
@media (max-width:768px){.clients .logos{grid-template-columns:repeat(3,1fr)}.clients .logos .item img{width:68%;height:68%}}
@media (max-width:480px){.clients .logos{grid-template-columns:repeat(2,1fr)}.clients .logos .item img{width:70%;height:70%}}
@media (max-width:768px){.clients .logos{gap:1rem}}
/* ---- why-us floating cards: no transform animation (GPU sampling shimmers 1px borders). Static rotation, drift via margins → crisp re-paint every frame ---- */
.why-us .items-content .why-item{will-change:auto;backface-visibility:visible;transform:rotate(var(--rotation));animation:saWhyDrift 26s ease-in-out infinite;border:2px solid #d9d9d9;outline:0;max-width:30rem;padding:2rem;font-size:2.8rem;border-radius:8px;transform-origin:center}
.why-us .items-content .why-item:hover{animation-play-state:paused}
@keyframes saWhyDrift{
0%{margin:0 0 0 0}
25%{margin:4rem 0 0 4rem}
50%{margin:8rem 0 0 0}
75%{margin:4rem 0 0 -4rem}
100%{margin:0 0 0 0}
}
@media (max-width:768px){.why-us .items-content .why-item{max-width:15rem;font-size:1.6rem}}
@media (prefers-reduced-motion:reduce){.why-us .items-content .why-item{animation:none}}
/* ---- awards list: year | project (left-aligned at the middle column) | award (right) ---- */
@media (min-width:769px){
.awards-content .awards-list li{display:grid;grid-template-columns:16rem 1fr auto;grid-template-rows:auto;column-gap:4rem;align-items:center}
.awards-content .awards-list li>div{display:contents}
.awards-content .awards-list li .year{grid-column:1;grid-row:1;width:auto}
.awards-content .awards-list li .project{grid-column:2;grid-row:1;max-width:none!important;width:100%;margin:0!important;text-align:left!important;justify-self:stretch}
.awards-content .awards-list li .award{grid-column:3;grid-row:1;text-align:right;white-space:nowrap}
}
/* tablet stacked layout: list spans the full content width (equal gutters left/right) */
@media (max-width:1024px){.awards-content .awards-list{max-width:none;width:100%}}
/* small tablet / mobile: year | award (middle) | project (right) on one row */
@media (max-width:768px){
.awards-content .awards-list li{display:grid;grid-template-columns:auto 1fr auto;column-gap:2rem;align-items:center;padding:1.6rem 0}
.awards-content .awards-list li>div{display:contents}
.awards-content .awards-list li .year{grid-column:1;width:auto;padding-right:0!important}
.awards-content .awards-list li .award{grid-column:2;text-align:left;white-space:nowrap}
.awards-content .awards-list li .project{grid-column:3;max-width:none;text-align:right;margin-left:0}
.awards-content .awards-list li span{font-size:2rem}
}
@media (max-width:480px){
.awards-content .awards-list li{grid-template-columns:auto 1fr;row-gap:.2rem}
.awards-content .awards-list li .award{grid-column:2;grid-row:1;text-align:right}
.awards-content .awards-list li .project{grid-column:1/-1;grid-row:2;text-align:left}
.awards-content .awards-list li span{font-size:1.8rem}
}
/* tablet (incl. iPad Pro portrait 1024–1279): one step smaller */
@media (min-width:769px) and (max-width:1279px){
.awards-content .awards-list li{grid-template-columns:12rem 1fr auto;column-gap:3rem;height:7rem}
.awards-content .awards-list li span{font-size:2.4rem}
}
/* ---- intro questions (manifesto): centred, bold, ruled ---- */
.sa-questions{max-width:110rem;margin:5rem auto 2rem;border-top:1px solid #000}
.sa-questions p{margin:0;padding:3.2rem 2rem;border-bottom:1px solid #000;text-align:center;font-size:3.6rem;font-weight:500;line-height:1.2;letter-spacing:-.025em;color:#000}
@media (max-width:1024px){.sa-questions p{font-size:2.8rem;padding:2.4rem 1rem}}
@media (max-width:768px){.sa-questions{margin-top:3rem}.sa-questions p{font-size:2.2rem;padding:2rem .5rem}}
/* ---- steps grid: big numbers, bold title, grey description ---- */
.sa-steps-section .sa-kicker{margin-bottom:4rem}
.sa-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8rem 6rem;margin:0;padding:0;list-style:none}
.sa-steps li{display:flex;flex-direction:column}
.sa-steps .n{font-size:12rem;font-weight:500;line-height:.9;letter-spacing:-.05em;color:#000;margin-bottom:3.5rem}
.sa-steps .t{font-size:2.6rem;font-weight:500;line-height:1.2;letter-spacing:-.01em;color:#000;margin-bottom:1.6rem}
.sa-steps .d{font-size:2rem;line-height:1.5;color:#666;max-width:44rem}
.dark .sa-steps .n,.dark .sa-steps .t{color:#fff}.dark .sa-steps .d{color:#b5b5b5}
@media (max-width:1024px){.sa-steps{grid-template-columns:repeat(2,1fr);gap:6rem 4rem}.sa-steps .n{font-size:9rem}}
@media (max-width:768px){.sa-steps{grid-template-columns:repeat(2,1fr);gap:4.5rem 3rem}.sa-steps .n{font-size:7rem;margin-bottom:2rem}.sa-steps .t{font-size:2.2rem}.sa-steps .d{font-size:1.8rem}}
/* ---- services hub accordion: sub-service links ---- */
.accordion-container .list ul.sa-service-links{list-style:none;margin:0;padding:0;display:grid!important;grid-template-columns:1fr 1fr;gap:.2rem 3rem;width:100%}
.accordion-container .list .sa-service-links li{margin:0;padding:0;list-style:none}
.accordion-container .list .sa-service-links li:before{display:none}
.accordion-container .list ul.sa-service-links li a{font-size:2rem!important;line-height:1.3;color:#000;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.2);display:inline-block;padding:.5rem 0;transition:border-color .3s}
.accordion-container .list .sa-service-links li a:hover{border-color:#000}
@media (max-width:768px){.accordion-container .list .sa-service-links{grid-template-columns:1fr}.accordion-container .list .sa-service-links li a{font-size:1.7rem}}
.sa-muted{color:#8a8a8a}.sa-muted a{color:#8a8a8a}
/* landing: steps grid inside the theme's section padding */
.sa-steps-landing{padding:4rem 1rem 8rem}
@media (min-width:1025px){.sa-steps-landing{padding:5rem 4rem 10rem}}
/* ---- dark band (landing: How we work) ---- */
.sa-dark-band{background:#000;color:#fff;padding-top:0;padding-bottom:0}
.sa-dark-band .headlines{padding:14rem 0 4rem}
.sa-dark-band .sa-steps-landing{padding-top:2rem;padding-bottom:14rem}
@media (max-width:768px){.sa-dark-band .headlines{padding:8rem 0 2rem}.sa-dark-band .sa-steps-landing{padding-bottom:8rem}.sa-steps-section.sa-dark-band,.sa-sitemap-section{padding-top:8rem;padding-bottom:8rem}}
.sa-dark-band .content-headlines,.sa-dark-band .content-headlines .head span,.sa-dark-band .content-headlines .caption p,.sa-dark-band .content-headlines small{color:#fff}
.sa-dark-band .content-headlines small{color:#9a9a9a}
.sa-dark-band .sa-steps .n,.sa-dark-band .sa-steps .t{color:#fff}.sa-dark-band .sa-steps .d{color:#b5b5b5}
/* ---- steps + image split (landing: Why enterprises choose) ---- */
.sa-steps-split{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:stretch}
.sa-steps-split .sa-steps.two{grid-template-columns:repeat(2,1fr);gap:10rem 5rem}
.sa-steps-split .sa-steps .n{font-size:10rem}
.sa-steps-figure{margin:0;position:relative;height:100%}
.sa-steps-figure img{width:100%;height:100%;min-height:40rem;object-fit:cover;border-radius:var(--sa-radius);display:block}
@media (max-width:1024px){.sa-steps-split{grid-template-columns:1fr;gap:4rem}.sa-steps-figure{position:static}.sa-steps-figure img{aspect-ratio:16/10}}
@media (max-width:768px){.sa-steps-split .sa-steps.two{grid-template-columns:repeat(2,1fr);gap:4.5rem 3rem}}
@media (max-width:600px){.sa-steps,.sa-steps-split .sa-steps.two{grid-template-columns:1fr;gap:4.5rem}}
.accordion-container .tab-itens .list:has(.sa-service-links){flex:0 0 auto;width:min(100%,76rem)}
.accordion-container .list ul.sa-service-links{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4rem}
.accordion-container .list ul.sa-service-links li a{font-size:2.4rem!important;padding:.7rem 0}
@media (max-width:1024px){.accordion-container .tab-itens .list:has(.sa-service-links){width:100%}}
/* service link rows: equal height, text vertically centred between rules */
.accordion-container .submenuItems .list ul.sa-service-links{gap:0 4rem!important}
.accordion-container .submenuItems .list ul.sa-service-links li{display:block!important;font-size:2.4rem;margin:0;padding:0}
.accordion-container .submenuItems .list ul.sa-service-links li::before{content:none!important}
.accordion-container .submenuItems .list ul.sa-service-links li:nth-child(-n+2) a{border-top:1px solid rgba(0,0,0,.25)}
@media (max-width:768px){.accordion-container .submenuItems .list ul.sa-service-links li:nth-child(2) a{border-top:0}}
.accordion-container .submenuItems .list ul.sa-service-links li a{display:flex!important;align-items:center;height:5rem;box-sizing:border-box;padding:0!important;line-height:1.2;border-bottom:1px solid rgba(0,0,0,.25);width:100%}
.accordion-container .submenuItems .list ul.sa-service-links li a:hover{border-color:#000}
.accordion-container .submenuItems .list ul.sa-service-links{grid-auto-rows:5.8rem;align-items:stretch}
.accordion-container .submenuItems .list ul.sa-service-links li{height:5.8rem!important;min-height:0!important;line-height:1!important;overflow:hidden}
.accordion-container .submenuItems .list ul.sa-service-links li a{height:100%!important}
/* services hub accordion: wider description column, pulled a little left of the +/- button */
@media (min-width:769px){
.accordion-container .submenuItems .tab-itens:has(.sa-service-links){justify-content:space-between;gap:8rem}
.accordion-container .submenuItems .tab-itens:has(.sa-service-links) .caption{flex:0 1 66rem;padding-right:8rem;margin-top:-2.4rem;gap:3rem}
.accordion-container .submenuItems .tab-itens:has(.sa-service-links) p{max-width:none;margin-left:0;font-size:2rem;line-height:1.55}
}
/* steps section on black (e.g. "The nine capabilities") */
.sa-steps-section.sa-dark-band{padding-top:14rem;padding-bottom:14rem;margin-top:6rem}
.sa-steps-section.sa-dark-band+.sa-steps-section.sa-dark-band{margin-top:0;padding-top:0}
.sa-steps-section.sa-dark-band .sa-kicker{color:#9a9a9a}
/* ---- html sitemap ---- */
.sa-sitemap{display:grid;grid-template-columns:repeat(4,1fr);gap:5rem 4rem;margin-top:4rem;align-items:start}
.sa-sitemap-col{display:flex;flex-direction:column;gap:5rem}
.sa-sitemap-group ul{list-style:none;margin:1.6rem 0 0;padding:0}
.sa-sitemap-group li{margin:0 0 .6rem}
.sa-sitemap-group a{font-size:1.8rem;color:#000;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.15)}
.sa-sitemap-group a:hover{border-color:#000}
@media (max-width:1024px){.sa-sitemap{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){.sa-sitemap{grid-template-columns:1fr;gap:3rem}}
/* footer extra columns + sitemap link */
footer nav .menu .sa-footer-col li a{font-size:1.75rem}
footer .bottom .item .sa-sitemap-link{color:#fff;opacity:.6;text-decoration:none;margin-right:2rem;font-size:1.3rem}
@media (min-width:1280px){footer nav .menu{grid-template-columns:auto repeat(4,auto);gap:4rem 7rem;justify-content:start;align-items:start}footer nav .menu ul{width:auto}footer nav .menu ul.type-2{margin-left:0}footer nav .menu ul.type-2 span{font-size:2.6rem}footer nav .menu ul.type-2 ul{margin-top:1.8rem}footer nav .menu ul.type-2 li{margin:0 0 1.2rem}footer nav .menu ul.type-2 li a{font-size:1.75rem;line-height:1.3}}
@media (max-width:1024px){footer nav .menu ul.sa-footer-col{margin-left:0}}
/* main overlay menu: 8 items, slightly smaller so the longest label never clips */
.menu-content .menu ul.sa-main-nav li a{font-size:clamp(4.8rem,7.8vh,12rem);margin-bottom:.5rem;white-space:nowrap}
.menu-content .menu ul.sa-main-nav li{overflow:visible}
@media (max-width:768px){.menu-content .menu ul.sa-main-nav li a{font-size:clamp(3.4rem,6vh,5.2rem)}}
/* sitemap on black */
.sa-sitemap-section{padding-top:14rem;padding-bottom:14rem;margin-top:0}
.sa-sitemap-section .sa-chapter{color:#fff}
.sa-sitemap-section .sa-kicker{color:#9a9a9a}
.sa-sitemap-section .sa-sitemap-group a{color:#fff;border-bottom-color:rgba(255,255,255,.25)}
.sa-sitemap-section .sa-sitemap-group a:hover{border-color:#fff}
/* sitemap: shorter hero, breathing room before the form */
.start.type-2.sa-start-short{min-height:0!important;height:auto!important;padding-bottom:6rem}
.start.type-2.sa-start-short .bottom{position:static;margin-top:4rem}
.sa-gap{height:8rem}
@media (max-width:768px){.sa-gap{height:4rem}}
footer nav .menu ul.type-2 > span{color:#8a8a8a!important;pointer-events:none}
/* ---- legal pages: same typography as editorial prose ---- */
.sa-legal{display:block;max-width:none}
.sa-legal h2,.sa-legal h3,.sa-legal h4{font-size:3rem;font-weight:500;line-height:1.15;letter-spacing:-.02em;margin:4.8rem 0 1.2rem;color:#000} /* same voice as labelled prose / FAQ */
.sa-legal h2:first-child,.sa-legal h3:first-child{margin-top:0}
.sa-legal p,.sa-legal li{font-size:2.4rem;line-height:1.4;font-weight:500;letter-spacing:-.01em;color:#2f2f2f;margin:0 0 1.6rem}
.sa-legal ul{list-style:disc;margin:0 0 2rem;padding:0 0 0 1.8rem}.sa-legal ol{list-style:decimal;margin:0 0 2rem;padding:0 0 0 1.8rem}.sa-legal li{display:list-item;padding:0;margin-left:0}.sa-legal ul ul,.sa-legal ol ol{margin:.6rem 0 0}
.sa-legal li{margin-bottom:.6rem}
.sa-legal b,.sa-legal strong{color:#000;font-weight:500}
.sa-legal a{color:#000;text-decoration:underline;text-underline-offset:.2em}
.sa-legal table{width:100%;border-collapse:collapse;margin:1rem 0 3rem;font-size:1.7rem;font-weight:500;color:#2f2f2f}
.sa-legal td,.sa-legal th{border-bottom:1px solid rgba(0,0,0,.15);padding:1rem .8rem;text-align:left;vertical-align:top}
.sa-legal span{font:inherit!important;color:inherit!important}
@media (max-width:768px){.sa-legal h2,.sa-legal h3,.sa-legal h4{font-size:2.4rem}.sa-legal p,.sa-legal li{font-size:2rem;line-height:1.45}}
.sa-legal p,.sa-legal h2,.sa-legal h3,.sa-legal h4,.sa-legal ul,.sa-legal ol,.sa-legal table{margin-left:0!important;padding-left:0;text-indent:0}
.sa-legal ul,.sa-legal ol{padding-left:1.8rem!important}
.sa-legal p{padding-left:0!important}
.sa-legal ul,.sa-legal ol{list-style:none!important;padding-left:0!important}
.sa-legal li{position:relative;padding-left:2.4rem!important}
.sa-legal li::before{content:"–";position:absolute;left:0;top:0;color:#8a8a8a}
/* footer: caption + Let's Talk sit in the head row (title | caption | arrow); caption starts at the Studio column */
footer .content .head{align-items:flex-start;flex-wrap:wrap}
footer .content .head a.sa-to-top{display:block;margin-top:.8rem;cursor:pointer}
@media (min-width:1280px){footer .content .head a.sa-to-top svg{width:10rem;height:10rem}}
footer .content .head .sa-footer-caption{display:flex;flex-direction:column;gap:3rem;max-width:none;margin:0}
footer .content .head .sa-footer-caption span{display:block;text-align:left;text-indent:0;color:#fff;letter-spacing:-.01em}
@media (min-width:1280px){
footer .content .head .sa-footer-caption{flex:0 0 auto;width:calc(51% - 8rem);margin-left:auto;margin-right:6.4rem;padding-top:1.6rem}
footer .content .head .sa-footer-caption span{font-size:3.2rem;line-height:1.15}
footer nav{margin:8rem 0 8rem}
footer nav .menu{gap:4rem 6rem;justify-content:space-between;width:100%}
}
@media (max-width:1279px){
footer .content .head .sa-footer-caption{order:3;width:100%;margin-top:4rem}
footer .content .head .sa-footer-caption span{font-size:2.4rem;line-height:1.2}
}
/* ---- responsive QA pass (tablet / mobile) ---- */
/* why-us cards: positions are card centres, kept inside the viewport on every width */
.why-us .items-content .why-item{transform:translate(-50%,-50%) rotate(var(--rotation))}
.why-us .items-content .why-item:nth-child(1){top:22%;left:28%}
.why-us .items-content .why-item:nth-child(2){top:28%;left:66%}
.why-us .items-content .why-item:nth-child(3){top:48%;left:20%}
.why-us .items-content .why-item:nth-child(4){top:70%;left:72%}
.why-us .items-content .why-item:nth-child(5){top:78%;left:36%}
.why-us .items-content .why-item:nth-child(6){top:52%;left:84%}
.why-us .items-content .why-item:nth-child(7){top:88%;left:56%}
.why-us .items-content .why-item:nth-child(8){top:16%;left:48%}
.why-us .items-content .why-item:nth-child(9){top:60%;left:32%}
.why-us .items-content .why-item:nth-child(10){top:34%;left:80%}
.why-us .items-content .why-item:nth-child(11){top:76%;left:88%}
@media (max-width:1024px){
.why-us .items-content .why-item{max-width:22rem;font-size:2rem;padding:1.6rem}
.why-us .items-content .why-item:nth-child(1){top:18%;left:26%}
.why-us .items-content .why-item:nth-child(2){top:24%;left:70%}
.why-us .items-content .why-item:nth-child(3){top:44%;left:18%}
.why-us .items-content .why-item:nth-child(4){top:70%;left:74%}
.why-us .items-content .why-item:nth-child(5){top:80%;left:30%}
.why-us .items-content .why-item:nth-child(6){top:52%;left:82%}
.why-us .items-content .why-item:nth-child(7){top:90%;left:58%}
.why-us .items-content .why-item:nth-child(8){top:12%;left:50%}
.why-us .items-content .why-item:nth-child(9){top:62%;left:36%}
.why-us .items-content .why-item:nth-child(10){top:36%;left:60%}
.why-us .items-content .why-item:nth-child(11){top:82%;left:84%}
@keyframes saWhyDrift{0%{margin:0}25%{margin:2rem 0 0 2rem}50%{margin:4rem 0 0 0}75%{margin:2rem 0 0 -2rem}100%{margin:0}}
}
@media (max-width:768px){
.why-us span{font-size:5.2rem}
.why-us .items-content .why-item{max-width:16rem;font-size:1.5rem;padding:1.2rem}
.why-us .items-content .why-item:nth-child(1){top:14%;left:30%}
.why-us .items-content .why-item:nth-child(2){top:22%;left:72%}
.why-us .items-content .why-item:nth-child(3){top:30%;left:26%}
.why-us .items-content .why-item:nth-child(4){top:78%;left:72%}
.why-us .items-content .why-item:nth-child(5){top:84%;left:28%}
.why-us .items-content .why-item:nth-child(6){top:64%;left:74%}
.why-us .items-content .why-item:nth-child(7){top:96%;left:56%}
.why-us .items-content .why-item:nth-child(n+8){display:none}
}
/* lead form card + contact form: wider gutters on tablet / mobile */
@media (max-width:1024px){
section.pb{padding:0 4rem 8rem}
.lets-talk,.lets-talk.has-form{padding:5rem 4rem 4rem}
.lets-talk.has-form{gap:4rem}
.content-form{padding:5rem 4rem}
.content-form.light{padding:0}
}
@media (max-width:768px){
section.pb{padding:0 2.4rem 6rem}
.lets-talk,.lets-talk.has-form{padding:4rem 2.4rem 2.4rem}
.content-form{padding:4rem 2.4rem}
.content-form.light{padding:0}
}
/* consistent breathing room above the lead form on every template */
section#work-with{margin-top:0;padding-top:6rem}
@media (max-width:768px){section#work-with{padding-top:4rem}}
/* back-to-top */
@media (max-width:1279px){footer .content .head a.sa-to-top svg{width:7rem;height:7rem}}
@media (max-width:768px){footer .content .head a.sa-to-top svg{width:5.6rem;height:5.6rem}}
/* footer menu on tablet: main nav spans two rows, four columns stack 2×2 beside it */
@media (min-width:769px) and (max-width:1279px){
footer nav .menu{display:grid;grid-template-columns:auto 1fr 1fr;gap:5rem 5rem;align-items:start}
footer nav .menu > ul:first-child{grid-row:1/3}
footer nav .menu ul.type-2{margin-left:0;width:100%}
footer nav .menu ul.type-2 span{font-size:2.2rem}
footer nav .menu ul.type-2 li a{font-size:1.6rem}
}
/* hamburger menu: smaller items on tablet / short viewports */
@media (max-width:1024px){
.menu-content .menu ul.sa-main-nav li a{font-size:clamp(3.6rem,6.2vh,8rem)}
}
@media (max-height:760px){
.menu-content .menu ul.sa-main-nav li a{font-size:clamp(3.2rem,5.6vh,8rem)}
}
/* footer on phones: main nav full width, then the four lists in two columns (one column only under 480px) */
@media (max-width:768px){
footer nav .menu{display:grid;grid-template-columns:1fr 1fr;gap:4rem 3rem;align-items:start}
footer nav .menu > ul:first-child{grid-column:1/-1}
footer nav .menu ul.type-2{margin-left:0;width:100%}
footer nav .menu ul.type-2 span{font-size:2rem}
footer nav .menu ul.type-2 li a{font-size:1.5rem}
}
@media (max-width:480px){footer nav .menu{grid-template-columns:1fr}}
/* works carousel head: title + caption must fit between 769 and 1279px (was overflowing the viewport at ~1032px) */
@media (min-width:769px) and (max-width:1279px){
.works .head{flex-wrap:wrap;gap:3rem;align-items:flex-end}
.works .head .title{font-size:min(16rem,18vw);flex:0 0 auto}
.works .head .caption{flex:1 1 30rem;min-width:0;max-width:40rem}
}
/* home hero on tablets: right column too narrow for the 5.6rem headline → fluid size, wider caption, wrapping buttons */
@media (min-width:769px) and (max-width:1024px){
.start.type-3 .caption{width:52%}
.start.type-3 .caption span{font-size:clamp(3.6rem,5vw,5rem);line-height:1.02}
.start.type-3 .caption .buttons{flex-wrap:wrap;gap:1.2rem}
}
/* client logos reveal (IntersectionObserver in app.js); without JS they are simply visible */
.sa-logos-js .clients .logos .item img{opacity:0;transform:translateY(3rem);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--i,0) * 60ms)}
.sa-logos-js .clients .logos .item.is-in img{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.sa-logos-js .clients .logos .item img{transition:none;opacity:1;transform:none}}
/* works carousel on tablets (769–1279): two full cards, same gutter on both sides */
@media (min-width:769px) and (max-width:1279px){
section.pl.works{padding-right:4rem}
.works .head{padding-right:0}
}
@media (max-width:768px){section.pl.works{padding-right:2rem}}
/* works head: breathing room between the caption text and the button */
.works .head .caption{gap:2.4rem}
.works .head .caption .button{margin-top:.6rem}
/* why-us: proportional height instead of 100vh (tablet portrait left half the section empty) */
@media (max-width:1279px){.why-us{height:auto;min-height:0;aspect-ratio:4/3;max-height:90rem}}
@media (max-width:768px){.why-us{aspect-ratio:3/4;max-height:72rem}}
/* home hero: never a fixed 85vh box below desktop (stacked layout left ~450px of empty space under the buttons) */
@media (max-width:1024px){
.start.type-3{height:auto;min-height:0}
.start.type-3 .video{height:min(70vh,80rem)}
.start.type-3 .caption{justify-content:flex-start;gap:3rem}
}
@media (max-width:768px){.start.type-3 .video{height:auto;aspect-ratio:4/3;max-height:52vh}}
/* work-card discipline tags: identical on /works and in every carousel; a touch smaller on desktop */
@media (min-width:1371px){.work-cards figure figcaption ul li a{font-size:1.7rem;height:4.4rem;padding:0 2rem}.work-cards figure figcaption ul{gap:1.2rem}}
/* content headlines on tablets: headline column was ~30% wide ("manufacture / rs" broke mid-word) → wider head, narrower caption, no word breaks */
@media (min-width:769px) and (max-width:1279px){
.content-headlines .item{gap:4rem}
.content-headlines .head{max-width:62%;flex:1 1 62%}
.content-headlines .head span{font-size:clamp(3.6rem,5vw,5.2rem);line-height:1.08;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.content-headlines .caption{max-width:34%;flex:1 1 34%}
}
@media (max-width:768px){.content-headlines .head span{overflow-wrap:normal;word-break:keep-all;hyphens:none;font-size:clamp(2.8rem,7.4vw,4rem)}}
/* hamburger menu, every device: nav centred (both axes) in the space between the header and the bottom links */
.menu-content .menu{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;margin-top:0;padding-top:8rem;min-height:0}
.menu-content .menu ul.sa-main-nav{width:auto;text-align:center}
.menu-content .menu ul.sa-main-nav li{justify-content:center}
.menu-content .menu ul.sa-main-nav li a{text-align:center;justify-content:center}
@media (max-width:768px){.menu-content .menu{padding-top:6rem}}
@media (max-width:768px){.sa-labelled{max-width:none}.sa-labelled p{font-size:2rem;line-height:1.5}.sa-labelled .lbl{font-size:2.1rem}}
/* type-2 hero (Insights, Works, Search, case-study / article detail): content-sized instead of 80vh, so the list is visible on landing */
.start.type-2{height:auto;min-height:0;padding-bottom:4rem}
.start.type-2 .marquee-item{height:auto;padding:10rem 0 4rem}
.start.type-2 .marquee-item .marquee{margin-top:0}
.start.type-2 .caption{padding:10rem 0 2rem}
.start.type-2 .caption .marquee{margin-top:0}
.start.type-2 .detail-caption{padding:10rem 8rem 3rem;min-height:0}
.start.type-2 .bottom{margin-top:2rem}
.works-content{margin-top:5rem}
@media (max-width:1279px){
.start.type-2{height:auto;min-height:0;padding-bottom:3rem}
.start.type-2 .marquee-item{height:auto;padding:6rem 0 3rem}
.start.type-2 .marquee-item .marquee{margin-top:0}
.start.type-2 .caption{padding:6rem 0 2rem}
.start.type-2 .caption .marquee{margin-top:0}
.start.type-2 .detail-caption{padding:6rem 4rem 2rem;min-height:0}
.start.type-2 .bottom{margin-top:2rem}
.works-content{margin-top:4rem}
}
@media (max-width:768px){
.start.type-2 .marquee-item{padding:4rem 0 2rem}
.start.type-2 .caption{padding:4rem 0 1rem}
.start.type-2 .detail-caption{padding:4rem 2rem 1rem}
.start.type-2 .bottom{margin-top:2rem}
}
/* full-width editorial photos: keep faces (upper third) when the 16:9 image is cropped to 90vh */
.content-image img{object-position:50% 30%}
/* ---- language switcher (header + overlay menu) ---- */
.sa-lang{display:flex;gap:1.6rem;margin:0 3.2rem 0 0;padding:0;list-style:none}
.sa-lang li a{font-size:1.4rem;letter-spacing:.08em;color:#8a8a8a;text-decoration:none;transition:color .3s}
.sa-lang li a:hover{color:#000}
.sa-lang li.is-active a{color:#000;font-weight:500}
.menu-content .sa-lang{margin:0 0 2.4rem;justify-content:center}
.menu-content .sa-lang li a{color:#8a8a8a;font-size:1.6rem}
.menu-content .sa-lang li.is-active a,.menu-content .sa-lang li a:hover{color:#fff}
header .lang-button{flex:0 0 auto;z-index:5}
header .lang-button .lang-item span{font-weight:500;letter-spacing:.04em}
header .lang-button ul li a{text-decoration:none;font-weight:500;letter-spacing:.04em}
body.dark header .lang-button .lang-menu-item{background:#000;border-color:#fff;color:#fff}
body.dark header .lang-button ul li a{color:#fff}
body.dark header .lang-button ul li:hover{background:#fff}
body.dark header .lang-button ul li:hover a{color:#000}
@media (max-width:1024px){header .lang-button{width:7.2rem;margin:0 1.6rem 0 0}}
@media (max-width:480px){header .lang-button{width:6.6rem;margin:0 1.2rem 0 0}header .lang-button .lang-item{padding:0 1rem}}
/* DE/TR: long compound words in display headlines — let the browser hyphenate instead of overflowing */
html[lang="de-DE"] .start.type-3 .caption span,html[lang="tr-TR"] .start.type-3 .caption span,
html[lang="de-DE"] .content-headlines .head span,html[lang="tr-TR"] .content-headlines .head span,
html[lang="de-DE"] .sa-statement,html[lang="tr-TR"] .sa-statement,
html[lang="de-DE"] .headlines .item .head,html[lang="tr-TR"] .headlines .item .head{overflow-wrap:anywhere}
/* ---- editorial photo blocks that sit outside .content-image ----
sa_img_dims() writes the real width/height attributes onto lazy images so the browser reserves
the box and the page stops jumping mid-scroll. Inside .content-image an object-fit:cover rule
absorbs those attributes, but these bare `section > .image` blocks had no height rule at all:
img{width:100%} plus the file's own pixel height squeezed the photo horizontally — on
/our-studio/ a 1600x900 file was being drawn at 1429x900. height:auto restores the true ratio;
cover makes any imposed ratio crop instead of stretch. */
section > .image > .lazy > img { height: auto; object-fit: cover; }
/* /our-studio/: show the studio photo as a calm editorial band rather than the whole frame */
.page-template-about section > .image > .lazy > img { aspect-ratio: 21/9; object-position: 50% 42%; }
@media (max-width:1024px){ .page-template-about section > .image > .lazy > img { aspect-ratio: 16/9; } }
@media (max-width:768px){ .page-template-about section > .image > .lazy > img { aspect-ratio: 4/5; } }
/* DE/TR: İ, Ö, Ü dots sit above cap height. With line-height:1 the first line
overflowed the box and .start{overflow:hidden} cut the dots off. Small headroom. */
html[lang="de-DE"] .start.type-3 .caption span,
html[lang="tr-TR"] .start.type-3 .caption span{padding-top:.1em}
/* footer head: keep title | caption | back-to-top on one row in every language
(long German/Turkish headings used to push the arrow onto its own line) */
@media (min-width:1280px){
footer .content .head{flex-wrap:nowrap;align-items:flex-start}
footer .content .head .title{flex:0 0 auto;white-space:nowrap}
footer .content .head .sa-footer-caption{flex:1 1 auto;width:auto;min-width:34rem;max-width:52rem;margin-left:auto;margin-right:4.8rem}
footer .content .head a.sa-to-top{flex:0 0 auto}
html[lang="de-DE"] footer .content .head .title,
html[lang="tr-TR"] footer .content .head .title{font-size:clamp(6rem,5.2vw,9rem)}
}
@media (min-width:1921px){
html[lang="de-DE"] footer .content .head .title,
html[lang="tr-TR"] footer .content .head .title{font-size:clamp(9rem,5.2vw,13rem)}
}
/* form confirmation */
.sa-lead-msg[hidden],[data-lead-form][hidden]{display:none!important}
.sa-lead-msg.ok{color:#111;font-weight:500}
.content-form .sa-lead-msg{max-width:52rem}
.content-form .sa-lead-msg.ok:not([hidden]){display:flex;align-items:center;min-height:24rem;padding:0}
@media (max-width:768px){.content-form .sa-lead-msg.ok:not([hidden]){min-height:14rem}}
.sa-lead-msg,.formResMsg .susc,.formResMsg .fail{font-size:2.8rem;line-height:1.35;letter-spacing:-.01em}
@media (max-width:1279px){.sa-lead-msg,.formResMsg .susc,.formResMsg .fail{font-size:2.4rem}}
@media (max-width:600px){.sa-lead-msg,.formResMsg .susc,.formResMsg .fail{font-size:2.1rem}}
/* ---- privacy note under the submit button (information duty, no checkbox: a contact enquiry is
processed as a pre-contractual step, consent is only needed for marketing opt-ins) ---- */
.content-form form .sa-form-note{margin:1.6rem 0 0;font-size:1.3rem;line-height:1.5;color:#8a8a8a;max-width:52rem}
.content-form form .sa-form-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.content-form form .sa-form-note a:hover{color:#fff}
.content-form.light form .sa-form-note{color:#777}
.content-form.light form .sa-form-note a:hover{color:#111}
/* ---- editorial photography: monochrome and crisp (reference: schwarz-matt.com) ----
Studio and editorial photos only. Client work, logos, testimonial portraits and the Insights
artwork keep their colour. The look is one variable, so it can be tuned in a single place. */
:root{--sa-mono:grayscale(1) contrast(1.18) brightness(1.03)}
.content-image img,
section > .image > .lazy > img,
.pin-images img,
.sa-photo img,
.sa-steps-figure img,
.content-caption.image figure img{filter:var(--sa-mono)}