/* V17: aligned rhythm and a restrained palette sampled from the supplied references. */
:root{
 --accent-sage:#b5c2a4;
 --accent-sand:#d4c4ae;
 --accent-soft:#e8e7de;
 --accent-ink:#211a14;
}
::selection{background:var(--accent-sand);color:var(--accent-ink)}

/* One shared baseline, including the services link and its separate toggle. */
.header-nav{align-items:center}
.header-nav>a,.header-nav .nav-services>a{display:flex;align-items:center;min-height:44px;padding:13px 0;line-height:1.6}
.header-nav .nav-services{align-items:center}
.header-nav .nav-services-toggle{height:44px;min-height:44px;line-height:1}
.header-nav .service-dropdown{left:auto;right:0}
.service-dropdown a{padding:0 9px;margin-inline:-9px;transition:background-color .2s,color .2s}
.service-dropdown a:is(:hover,:focus-visible){background:var(--accent-sage);color:var(--accent-ink)}
.service-dropdown a:is(:hover,:focus-visible) small{color:var(--accent-ink)}
.menu .menu-service-links a{transition:color .2s;text-underline-offset:6px}
.menu .menu-service-links a:is(:hover,:focus-visible){color:var(--accent-sage);text-decoration:underline;text-decoration-thickness:1px}
.menu .menu-body nav>a:is(:hover,:focus-visible){color:var(--accent-sage)}

/* Same top edge, bottom edge and frame size throughout each rolling collection. */
.portfolio-roller .roller-item{padding-top:0}
.portfolio-roller .hero-panel,.portfolio-roller .work-card{padding-top:0!important;margin-top:0!important}
.portfolio-roller .hero-preview{height:clamp(440px,43vw,730px)}
.portfolio-roller .card-image{aspect-ratio:1/1}

/* Keep the title and form on the same grid even on wide monitors. */
.contact-page-intro,.contact-layout{width:100%;max-width:1800px;margin-inline:auto}
.contact-layout>#brief-form{min-width:0;margin-left:0;text-align:left}

/* Existing large panels stay quiet; accent colors sit mainly on small controls. */
.svc-cta,.coming-scene,.content-direction-board,.project-modes,.studio-film{background:var(--accent-soft)}
.coming-topline i{background:var(--accent-sage)}
.identity-colors>span:nth-child(3){background:var(--accent-sage)}
.svc-switcher a::before{background:var(--accent-sage)}
.service-options input:checked+span{background:var(--accent-sage);border-color:var(--accent-sage);color:var(--accent-ink)}
.filters button[aria-pressed="true"]{background:var(--accent-sand);border-color:var(--accent-sand);color:var(--accent-ink)}
.pill:is(:hover,:focus-visible),.light-panel .pill:is(:hover,:focus-visible){background:var(--accent-sand);border-color:var(--accent-sand);color:var(--accent-ink)}
.quick-actions .quick-contact:is(:hover,:focus-visible),.submit-inquiry:is(:hover,:focus-visible){background:var(--accent-sage);border-color:var(--accent-sage);color:var(--accent-ink)}
.quick-actions a:is(:hover,:focus-visible){background:var(--accent-soft);color:var(--accent-ink)}
.roller-controls button:is(:hover,:focus-visible),.dark-zone .roller-controls button:is(:hover,:focus-visible){background:var(--accent-sage);border-color:var(--accent-sage);color:var(--accent-ink)}
.hero-panel:is(:hover,:focus-visible) .hero-panel-open,.work-card a:is(:hover,:focus-visible) .card-open{background:var(--accent-sand);color:var(--accent-ink)}
.service-row::before{background:var(--accent-sage)}
.service-row:is(:hover,:focus-visible)::before{opacity:.08}
.service-row:is(:hover,:focus-visible)>span:last-child{color:var(--accent-sage)}
.contact-layout input:focus,.contact-layout textarea:focus{box-shadow:0 1px 0 var(--accent-sage)}

/* Native SVG cursors use the original 9 path; no pointer-following overlay. */
@media(hover:hover) and (pointer:fine){
 body,body *{cursor:url('/assets/brand/cursor-nine.svg') 9 5,auto!important}
 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-nine-active.svg') 9 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-nine-active.svg') 9 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(max-width:700px){
 .portfolio-roller .hero-preview{height:clamp(400px,117vw,560px)}
}
@media(prefers-reduced-motion:reduce){
 .service-dropdown a,.menu .menu-service-links a{transition:none}
}