/* Williams refinement layer. Load after v4.css. See docs/website/williams/evidence/v5 for research and regression evidence. */
:root{--header-height:102px}.site-header,.site-header.scrolled{height:var(--header-height);transition:background-color .2s,border-color .2s,box-shadow .2s}.site-header.scrolled{box-shadow:0 1px 0 #ffffff0a}
.desktop-nav .nav-contact{border:0;padding:13px 0;gap:14px}
.desktop-nav .nav-contact:hover{background:transparent}
.menu-open{border:0;padding:10px 0 10px 14px;min-height:44px}
.menu-open>span{display:none}
.menu-open::after{content:'';display:inline-block;width:19px;height:8px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;margin-left:15px;vertical-align:middle}
.early-band{background:var(--paper)}
.text-link,.text-link:hover{gap:38px;transition:color .2s}
.text-link>span,.button>span,.nav-contact>span{transition:transform .2s var(--ease)}
.text-link:hover>span,.text-link:focus-visible>span,.button:hover>span,.button:focus-visible>span,.nav-contact:hover>span{transform:translate(2px,-2px)}
.site-header.entry-ready .wordmark>span{animation:wordmark-arrival .38s var(--ease) both}
@keyframes wordmark-arrival{from{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:none}}
:root{scrollbar-width:auto;scrollbar-color:#777b76 #f5f3ed}
:root:has(body.dark-page){scrollbar-color:#777b76 #17191b}
@media(max-width:950px){:root{--header-height:88px}}
@media(max-width:680px){:root{--header-height:82px}.text-link,.text-link:hover{gap:30px}}
@media(prefers-reduced-motion:reduce){.site-header.entry-ready .wordmark>span{animation:none}.text-link>span,.button>span,.nav-contact>span{transition:none}}
@media(forced-colors:active){:root{scrollbar-color:auto;scrollbar-width:auto}.site-header.entry-ready .wordmark>span{animation:none}}
/* Hero option A: real portfolio content replaces all decorative slabs. */
.hero-with-portfolio{min-height:720px;height:min(820px,calc(100svh - 102px));padding-bottom:95px}
.hero-with-portfolio .home-copy{width:62%;padding-top:0}
.hero-with-portfolio .home-copy h1{font-size:clamp(48px,4.65vw,72px);max-width:850px;line-height:1.08}
.hero-with-portfolio .home-copy>.eyebrow{margin-bottom:36px}
.hero-portfolio{position:absolute;width:29%;max-width:390px;right:var(--space);top:50%;transform:translateY(-53%);color:var(--paper)}
.hero-portfolio-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:12px}
.hero-portfolio-heading h2{font-size:11px;font-weight:500;line-height:1.5;letter-spacing:.09em;text-transform:uppercase;margin:0}
.hero-portfolio-heading>span{font-size:10px;color:var(--silver)}
.hero-product-row{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #4b4e4d;padding:15px 0;min-height:73px}
.hero-product-row>span{font-size:25px;line-height:1.15;letter-spacing:-.025em}
.hero-product-row small{display:block;font-size:10px;line-height:1.5;color:var(--silver);letter-spacing:.02em;margin-top:7px}
.hero-product-row>i{font-size:19px;font-style:normal;color:var(--silver);transition:transform .2s var(--ease),color .2s}
.hero-product-row:hover>i,.hero-product-row:focus-visible>i{transform:translate(2px,-2px);color:var(--paper)}
.hero-product-row:hover>span,.hero-product-row:focus-visible>span{color:#fff}
.hero-portfolio-note{font-size:10px;line-height:1.6;color:var(--silver);margin:18px 0 0}
@media(min-width:951px) and (max-width:1150px){.hero-with-portfolio .home-copy{width:60%}.hero-with-portfolio .home-copy h1{font-size:49px;max-width:650px}.hero-with-portfolio .home-copy>p:not(.eyebrow){max-width:390px;font-size:18px}.hero-with-portfolio .hero-actions{gap:12px}.hero-with-portfolio .hero-actions .button{font-size:12px;gap:18px;padding:12px 17px}.hero-portfolio{width:30%;max-width:none}.hero-product-row>span{font-size:23px}.hero-portfolio-heading>span{display:none}}
@media(max-width:950px){.hero-with-portfolio{display:block;height:auto;min-height:0;padding-top:50px;padding-bottom:80px}.hero-with-portfolio .home-copy{width:100%;padding:0}.hero-with-portfolio .home-copy h1{font-size:clamp(44px,6vw,64px);max-width:800px}.hero-portfolio{position:static;width:100%;max-width:none;transform:none;margin-top:45px}.hero-product-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px}.hero-product-row:first-child{grid-column:1/-1}.hero-portfolio-heading>span{display:block}.hero-portfolio-note{margin-top:15px}.hero-with-portfolio .home-location{margin-top:28px}.hero-with-portfolio .hero-baseline{bottom:24px}}
@media(max-width:680px){.hero-with-portfolio{padding-top:42px;padding-bottom:80px}.hero-with-portfolio .home-copy h1{font-size:clamp(37px,8.9vw,55px)}.hero-with-portfolio .home-copy>.eyebrow{margin-bottom:26px}.hero-portfolio{margin-top:35px}.hero-portfolio-heading{margin-bottom:10px}.hero-portfolio-heading h2{font-size:10px}.hero-portfolio-heading>span{font-size:9px}.hero-product-list{grid-template-columns:1fr;gap:0}.hero-product-row{min-height:62px;padding:11px 0;gap:16px}.hero-product-row>span{font-size:23px}.hero-product-row small{font-size:10px;margin-top:5px}.hero-product-row>i{font-size:18px}.hero-portfolio-note{font-size:9px}.hero-with-portfolio .home-location{font-size:10px}.hero-with-portfolio .hero-baseline{font-size:8px}}
@media(prefers-reduced-motion:reduce){.hero-product-row>i{transition:none}}
@media(forced-colors:active){.hero-product-row{border-color:CanvasText}}

/* Native dialog remains the interaction owner; this only softens its arrival. */
#site-menu[open]{animation:menu-arrival .18s ease-out both}
@keyframes menu-arrival{from{opacity:.8;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#site-menu[open]{animation:none}}