/* Family adaptive foundation — 22 October 2026. Brand-specific composition follows. */
html { -webkit-text-size-adjust:100%; scroll-padding-block-start:6rem; }
*,*::before,*::after { box-sizing:border-box; }
:where(main,section,article,header,footer,nav,div,figure) { min-inline-size:0; }
:where(h1,h2,h3) { text-wrap:balance; overflow-wrap:break-word; }
:where(p,li,dd) { overflow-wrap:break-word; }
:where(input,select,textarea) { font-size:1rem; max-inline-size:100%; }
:where(button,.button,.btn,.cx-action,.nav-cta) { max-inline-size:100%; white-space:normal; min-block-size:44px; line-height:1.3; }
:where(button,summary,[role="button"]) { touch-action:manipulation; }
:where(dialog,[role="dialog"]) { max-inline-size:calc(100vw - 2rem); max-block-size:calc(100dvh - 2rem); overflow:auto; overscroll-behavior:contain; }
:where(nav a,footer nav a) { min-block-size:44px; align-content:center; }
:where(.arrow,.cx-link-arrow,.cta-arrow) { display:inline-block; text-decoration:none; }
:where(a,button,input,select,textarea,summary):focus-visible { outline:3px solid currentColor; outline-offset:4px; }
@media(max-height:500px) and (orientation:landscape) { :where(.topbar,.site-header,.cx-nav) { position:relative; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } }

/* Restrained, decorative scroll depth. The copy and controls stay still. */
.brand-system .agency-cutout::before{transform:translate3d(0,var(--parallax-offset,0px),0) scale(1.02);will-change:transform}
.brand-system .page-hero::after,.brand-system .case-hero::after{transform:translate3d(0,var(--parallax-offset,0px),0);will-change:transform}
@media(prefers-reduced-motion:reduce){.brand-system .agency-cutout::before,.brand-system .page-hero::after,.brand-system .case-hero::after{transform:none!important;will-change:auto}}

.button,.nav-cta{border-radius:40px;white-space:normal}.hero-grid>*{min-width:0}
@media(min-width:701px) and (max-width:1100px){.hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.hero-copy{padding-block:52px;padding-right:24px}.hero h1,.page-hero h1{font-size:clamp(3rem,6.5vw,5rem)}.hero-grid,.page-hero .hero-grid{min-height:0}.section{padding-block:80px}.nav{gap:22px}.navlinks{gap:18px}}
@media(max-width:700px){.hero-grid,.page-hero .hero-grid{min-height:0}.hero-copy{padding-block:36px}.hero h1,.page-hero h1{font-size:clamp(2.75rem,10vw,4rem);line-height:1.08}.section{padding-block:64px}.section h2{font-size:clamp(2.25rem,8vw,3.5rem)}.hero-copy .lead{font-size:1.125rem;line-height:1.55}.button{font-size:1rem;gap:16px}.section-intro{gap:24px;margin-bottom:36px}.metric-grid strong{font-size:clamp(3.5rem,13vw,5rem)}}

/* About page: editorial portrait with a shaded copy panel on the image's right. */
.brand-system.page-about .page-hero.about-hero-photo{position:relative;display:flex;align-items:stretch;min-height:clamp(560px,calc(100svh - 150px),760px);padding:0;background:#242321;color:#fff}
.brand-system.page-about .about-hero-photo:after{content:none}
.brand-system.page-about .about-hero-image{position:absolute;inset:0;margin:0;overflow:hidden}
.brand-system.page-about .about-hero-image img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:left 44%;transform:translate3d(0,var(--parallax-offset,0px),0) scale(1.04);will-change:transform}
.brand-system.page-about .about-hero-content{display:flex;justify-content:flex-end;align-items:center;position:relative;z-index:2;width:min(calc(100% - 96px),1460px);min-height:inherit;padding-block:clamp(32px,5vw,68px)}
.brand-system.page-about .about-hero-panel{width:min(48%,620px);padding:clamp(30px,4vw,58px);border:1px solid rgba(255,255,255,.32);background:rgba(30,29,28,.78);color:#fff;box-shadow:0 24px 70px rgba(0,0,0,.3);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand-system.page-about .about-hero-panel .eyebrow{margin-bottom:22px;color:#f1c9b7}
.brand-system.page-about .about-hero-panel h1{font-size:clamp(3rem,5.4vw,5.8rem);line-height:1.02;margin-bottom:24px;color:#fff}
.brand-system.page-about .about-hero-panel .lead{max-width:38ch;margin-bottom:30px;color:#f6f2ef;font-size:clamp(1.08rem,1.35vw,1.3rem);line-height:1.55}
.brand-system.page-about .about-hero-panel .button{min-height:50px;white-space:normal}
@media(min-width:701px) and (max-width:1000px){.brand-system.page-about .about-hero-content{width:calc(100% - 64px)}.brand-system.page-about .about-hero-panel{width:min(56%,540px);padding:32px}.brand-system.page-about .about-hero-panel h1{font-size:clamp(2.8rem,5.7vw,4.5rem)}}
@media(max-width:700px){.brand-system.page-about .page-hero.about-hero-photo{display:block;min-height:0;padding:0 0 20px}.brand-system.page-about .about-hero-image{position:relative;inset:auto;width:100%;aspect-ratio:3/2}.brand-system.page-about .about-hero-image img{object-position:28% center}.brand-system.page-about .about-hero-content{width:calc(100% - 40px);min-height:0;margin:-44px auto 0;padding:0;justify-content:center}.brand-system.page-about .about-hero-panel{width:100%;padding:26px 24px}.brand-system.page-about .about-hero-panel .eyebrow{margin-bottom:14px}.brand-system.page-about .about-hero-panel h1{font-size:clamp(2.65rem,9vw,4rem);margin-bottom:18px}.brand-system.page-about .about-hero-panel .lead{font-size:1.08rem;line-height:1.52;margin-bottom:22px}}
@media(prefers-reduced-motion:reduce){.brand-system.page-about .about-hero-image img{transform:none!important;will-change:auto}}

/* Keep the About navigation solid and start the portrait below it. */
.brand-system.page-about .topbar{margin-block-end:0;background:#20201e;backdrop-filter:none;-webkit-backdrop-filter:none}
.brand-system.page-about .topbar .navlinks{background:#20201e}
.brand-system.page-about .page-hero.about-hero-photo{min-height:clamp(650px,calc(100svh - 60px),820px)}
.brand-system.page-about .about-hero-image img{object-position:left top}
@media(max-width:700px){.brand-system.page-about .topbar{margin-block-end:0}.brand-system.page-about .page-hero.about-hero-photo{min-height:0}.brand-system.page-about .about-hero-image img{object-position:28% top}}

/* Keep ordinary page scrolling free of section snapping; fixed navigation handles wayfinding. */


/* Homepage portrait as a background layer with restrained scroll depth. */
.brand-system .agency-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(90deg,#20201e 0%,#20201e 32%,rgba(32,32,30,.9) 48%,rgba(32,32,30,.42) 72%,rgba(32,32,30,.2) 100%)}
.brand-system .agency-hero>.wrap{position:static;z-index:1}
.brand-system .agency-hero .agency-bottom{grid-template-columns:minmax(0,1fr)}
.brand-system .agency-hero .agency-intro{max-width:580px}
.brand-system .agency-hero .agency-portrait{position:absolute;z-index:0;right:3%;bottom:0;width:min(58vw,760px);height:92%;max-width:none;margin:0;display:flex;justify-content:center;align-items:flex-end;border:0;overflow:hidden;pointer-events:none}
.brand-system .agency-hero .agency-cutout::before{display:none}
.brand-system .agency-hero .agency-portrait img{width:100%;height:100%;max-width:none;object-fit:contain;object-position:center bottom;transform:translate3d(0,var(--parallax-offset,0px),0) scale(1.035);will-change:transform}
@media(max-width:700px){
 .brand-system .agency-hero{background:linear-gradient(90deg,rgba(32,32,30,.97) 0%,rgba(32,32,30,.87) 48%,rgba(32,32,30,.55) 100%)}
 .brand-system .agency-hero .agency-bottom{grid-template-columns:minmax(0,1fr)}
 .brand-system .agency-hero .agency-intro{max-width:340px}
 .brand-system .agency-hero .agency-portrait{right:-23%;width:105%;height:88%;opacity:.64}
 .brand-system .agency-hero .agency-portrait img{object-position:center bottom}
}
@media(prefers-reduced-motion:reduce){.brand-system .agency-hero .agency-portrait img{transform:none!important;will-change:auto}}

/* Keep all hero copy above a dependable dark image wash for AA text contrast. */
.brand-system .agency-hero{background-color:#20201e}
.brand-system .agency-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(32,32,30,.82)}
.brand-system .agency-hero>.wrap{z-index:2}
.brand-system .agency-hero .agency-portrait{z-index:0}
.brand-system .agency-hero .agency-kicker>span{color:#faf8f5}
@media(prefers-reduced-motion:reduce){.brand-system .agency-hero::after{background:rgba(32,32,30,.82)}}