/* V19: an editorial zigzag, shared portfolio covers, and the V17 interaction palette. */
:root{--accent:#e8e7de;--accent-soft:#e8e7de;--accent-sage:#b5c2a4;--accent-sand:#d4c4ae}

.brand-hero{--hero-drop:clamp(180px,17vw,340px);--hero-overhang:150px;min-height:0;padding-bottom:0;position:relative}
.brand-hero-grid{flex:none;align-items:start;width:100%;max-width:1800px;margin:0 auto}
.brand-art{margin-top:var(--hero-drop);margin-bottom:calc(-1*var(--hero-overhang));overflow:visible;z-index:1}
.brand-art>.brand-signature{position:absolute;right:104px;bottom:-48px;padding:0;font-size:19px}
.brand-message .brand-bottom{padding-top:0;margin-top:64px;max-width:720px;min-height:44px}
.brand-message .brand-bottom>p{text-align:left}
.brand-hero+.hero .portfolio-heading{position:relative;display:block;max-width:1800px;margin-inline:auto;padding-top:64px;padding-bottom:44px}
.brand-hero+.hero .portfolio-heading>div,.brand-hero+.hero .portfolio-heading>p{max-width:64%}
.brand-hero+.hero .portfolio-heading>p{margin-top:20px}

/* The same square cover is used on every project entry point, without cropped collages. */
.portfolio-roller .hero-preview{aspect-ratio:1;height:auto;overflow:hidden}
.portfolio-roller .hero-preview img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform:none!important;transition:opacity .3s}
.portfolio-roller .hero-preview img:hover{opacity:.96}

/* Stronger feedback while the dropdown background and text colors remain stable. */
.header-nav .service-dropdown a{padding-left:20px}
.header-nav .service-dropdown a::before{width:7px;height:7px;background:var(--accent-sage)}
.header-nav .service-dropdown a:is(:hover,:focus-visible) .service-dropdown-label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

.menu-body{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(64px,8vw,205px)}
.menu-body aside{max-width:760px;width:100%;min-width:0;justify-self:end}
.menu-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.menu-feature{display:block;min-width:0}
.menu-feature img{aspect-ratio:1;width:100%;height:auto;object-fit:contain}
.menu-feature>span{align-items:baseline;font-size:12px;line-height:1.6}
.menu-feature [data-menu-feature-title]{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.menu-feature>span>b{flex:none}
.menu-body aside>p{margin-top:36px}

@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-sage.svg') 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-sage.svg') 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+.hero .portfolio-heading{padding-inline:0}
}
@media(min-width:701px) and (max-width:1000px){
 .brand-hero{--hero-drop:140px;--hero-overhang:70px}
 .brand-message .brand-bottom{margin-top:38px;gap:18px;flex-wrap:wrap}
 .brand-art>.brand-signature{font-size:16px;right:90px;bottom:-42px}
 .brand-hero+.hero .portfolio-heading{padding-top:70px}
 .brand-hero+.hero .portfolio-heading h2{font-size:clamp(48px,6.5vw,65px)}
}
@media(max-width:900px){
 .menu-body{display:block;min-height:calc(100dvh - 154px)}
 .menu-body aside{display:none}
}
@media(max-width:700px){
 .brand-hero{--hero-drop:0px;--hero-overhang:0px;min-height:0;padding:104px 16px 0}
 .brand-kicker{font-size:9px;gap:10px;margin-bottom:30px}
 .brand-kicker>span:last-child{max-width:140px;text-align:right}
 .brand-hero-grid{grid-template-columns:1fr;gap:30px}
 .brand-message h1{font-size:clamp(50px,15.2vw,94px);line-height:.95}
 .brand-message .brand-bottom{margin-top:28px;gap:20px;padding:0;flex-wrap:nowrap}
 .brand-message .brand-bottom>p{font-size:9px;text-align:right}
 .brand-art{width:min(78%,340px);max-width:none;aspect-ratio:1;padding:12px;margin:0 0 -12px;justify-self:end}
 .brand-art .real-brand-symbol,.brand-art .mark-echo{width:70%;height:70%;top:9%;left:15%}
 .brand-art:after{inset:9% 15% 20%}
 .brand-art .art-topline{font-size:8px}
 .brand-art .art-topline>span:last-child{display:none}
 .brand-art .art-bottomline{font-size:clamp(24px,6.5vw,34px)}
 .brand-art .art-bottomline>span:last-child{display:none}
 .brand-art>.brand-signature{display:none}
 .brand-hero+.hero .portfolio-heading{padding-top:60px;padding-bottom:28px}
 .brand-hero+.hero .portfolio-heading>div,.brand-hero+.hero .portfolio-heading>p{max-width:none}
 .brand-hero+.hero .portfolio-heading>p{margin-top:18px}
 .portfolio-roller .hero-preview{height:auto;aspect-ratio:1}
}
@media(prefers-reduced-motion:reduce){.portfolio-roller .hero-preview img{transition:none}}