/* V20 — more breathing room, restrained feedback, and image-led service stories. */
.brand-hero{--hero-drop:clamp(220px,19vw,390px);padding-top:160px}
.brand-kicker{margin-bottom:70px}
.brand-message .brand-statement{margin-top:46px}
.brand-message .brand-bottom{margin-top:88px}
.brand-hero+.hero .portfolio-heading{padding-top:96px;padding-bottom:64px}

/* Dots occupy the existing column gap: labels keep their alignment on hover. */
.studio-capability h3,.studio-case-link b{position:relative}
.studio-capability h3::before,.studio-case-link b::before{content:'';position:absolute;left:-19px;top:.56em;width:8px;height:8px;border-radius:50%;background:var(--accent-sage);opacity:0;transform:scale(.45);transition:opacity .2s,transform .25s var(--ease)}
.studio-capability:is(:hover,:focus-visible) h3::before,.studio-case-link:is(:hover,:focus-visible) b::before{opacity:1;transform:scale(1)}
.studio-capability:is(:hover,:focus-visible){padding-left:0;padding-right:0}
.quick-actions a:is(:hover,:focus-visible),.quick-actions .quick-contact:is(:hover,:focus-visible){background:var(--accent-sage);color:var(--accent-ink)}
.filters button,.service-options span{transition:background-color .22s,border-color .22s,color .22s}
.filters button:is(:hover,:focus-visible){background:var(--accent-sage);border-color:var(--accent-sage);color:var(--accent-ink)}
.filters button[aria-pressed="true"]{border-color:var(--accent-ink)}
.service-options input:checked+span{border-color:var(--accent-ink)}
.service-options input:focus-visible+span{background:var(--accent-sage);color:var(--accent-ink);outline:2px solid currentColor;outline-offset:4px}
@media(hover:hover){
 .service-options label:hover span{background:var(--accent-sage);border-color:var(--accent-sage);color:var(--accent-ink)}
 .service-options label:hover input:checked+span{background:var(--accent-sand);border-color:var(--accent-ink)}
}

/* Exchange the existing content neutral and website lavender accent backgrounds. */
.svc--content .content-direction-board,.svc--content .project-modes,.svc--content .svc-cta{background:var(--svc-color)}
.svc--website .svc-web-visual,.svc--website .svc-responsive-study,.svc--website .svc-cta{background:var(--svc-color)}

/* Use verified project images as editorial plates; never invent client applications. */

/* One lead film and two supporting stories, all in their original image ratio. */
.content-channel{padding-top:45px;padding-bottom:115px}
.channel-heading{margin-bottom:46px}
.channel-films{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:38px 6vw;align-items:start}
.channel-film:first-child{grid-row:span 2}
.channel-film:nth-child(2){padding-top:0}
.channel-film:first-child .film-thumb{margin-bottom:26px}
.channel-film:first-child h3{font-size:clamp(23px,2.3vw,34px);line-height:1.5;max-width:750px}
.channel-film:not(:first-child) h3{font-size:16px;margin-bottom:8px}
.channel-film:not(:first-child) .film-index{margin-top:15px}
.channel-film:not(:first-child)>.text-link{min-height:38px}
.film-editorial-note{font-size:15px;line-height:1.9;color:var(--muted);max-width:620px;margin-top:24px}
.content-approach{padding-top:35px;padding-bottom:110px}
.content-direction-board{min-height:530px}
.content-story{padding-top:95px;padding-bottom:105px;max-width:2000px;margin:auto}
.content-story-heading{display:flex;gap:7vw;align-items:end;justify-content:space-between;margin-bottom:48px}
.content-story-heading h2{font:400 clamp(45px,6vw,88px)/1.05 var(--studio-type, Arial, sans-serif);letter-spacing:-.055em}
.content-story-heading p{font-size:15px;line-height:1.9;max-width:380px}
.content-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.content-story-card{min-width:0}
.content-story-image{display:block;overflow:hidden;position:relative;aspect-ratio:720/404}
.content-story-image img{width:100%;height:100%;object-fit:contain;transition:transform .7s var(--ease)}
.content-story-image>span{position:absolute;right:12px;bottom:12px;width:36px;height:36px;background:var(--paper);display:grid;place-items:center;border-radius:50%}
.content-story-card .eyebrow{margin-top:26px;font-size:10px}
.content-story-card h3{font-size:25px;line-height:1.5;margin-top:15px}
.content-story-card p{font-size:15px;line-height:1.9;margin-top:16px;max-width:480px}
.content-story-note{font-size:11px;color:var(--muted);margin-top:32px}
@media(hover:hover){.content-story-image:hover img{transform:scale(1.025)}}

/* Native 9042 hover cursor, with no surrounding stroke. Text fields retain an I-beam. */
@media(hover:hover) and (pointer:fine){
 body :is(a,button,summary,label,[role="button"],[data-zoom]):hover,
 body :is(a,button,summary,label,[role="button"],[data-zoom]):hover *{cursor:url('/assets/brand/cursor-9042-hover.svg?v=31') 8 5,pointer!important}
 body :is(input,textarea,[contenteditable="true"]),
 body :is(input,textarea,[contenteditable="true"]):is(:hover,:focus),
 body [contenteditable="true"] *,body [contenteditable="true"]:hover *{cursor:text!important}
 body :is(input[type="checkbox"],input[type="radio"],input[type="submit"],input[type="button"],select),
 body :is(input[type="checkbox"],input[type="radio"],input[type="submit"],input[type="button"],select):is(:hover,:focus){cursor:url('/assets/brand/cursor-9042-hover.svg?v=31') 8 5,pointer!important}
 body :disabled,body [aria-disabled="true"],body :disabled:is(:hover,:focus),body [aria-disabled="true"]:is(:hover,:focus){cursor:not-allowed!important}
}
@media(min-width:1600px){.brand-hero{padding-top:175px}}
@media(min-width:701px) and (max-width:1000px){
 .brand-hero{--hero-drop:175px;padding-top:145px}
 .brand-kicker{margin-bottom:54px}
 .brand-message .brand-bottom{margin-top:55px}
 .brand-hero+.hero .portfolio-heading{padding-top:95px}
}
@media(max-width:700px){
 .brand-hero{padding-top:112px;--hero-drop:0px}
 .brand-kicker{margin-bottom:38px}
 .brand-hero-grid{gap:48px}
 .brand-message .brand-statement{margin-top:32px}
 .brand-message .brand-bottom{margin-top:42px}
 .brand-hero+.hero .portfolio-heading{padding-top:76px;padding-bottom:42px}
 .studio-capability h3::before,.studio-case-link b::before{width:7px;height:7px;left:-13px;top:.59em}
 .content-channel{padding-top:25px;padding-bottom:70px}
 .channel-heading{margin-bottom:30px}
 .channel-films{grid-template-columns:1fr;gap:40px}
 .channel-film:first-child{grid-row:auto}
 .channel-film:first-child h3{font-size:23px}
 .channel-film:not(:first-child) h3{font-size:20px}
 .channel-film:first-child .film-thumb{margin-bottom:0}
 .film-editorial-note{font-size:14px;margin-top:18px}
 .content-approach{padding-top:10px;padding-bottom:70px}
 .content-direction-board{min-height:470px}
 .content-story{padding-top:65px;padding-bottom:70px}
 .content-story-heading{display:block;margin-bottom:32px}
 .content-story-heading h2{font-size:48px}
 .content-story-heading p{margin-top:22px;font-size:14px}
 .content-story-grid{grid-template-columns:1fr;gap:40px}
 .content-story-card h3{font-size:24px}
 .content-story-card p{font-size:15px}
}
@media(prefers-reduced-motion:reduce){
 .studio-capability h3::before,.studio-case-link b::before,.filters button,.service-options span,.content-story-image img{transition:none}
}