/* Scroll-aware navigation */
.site-header.wrap{position:sticky;top:12px;z-index:50;min-height:76px;margin-top:12px;padding:12px 18px;background:#f8f6ef;border:1px solid #d7d1c5;border-radius:10px;box-shadow:0 8px 24px #23231f12;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}
.site-header.wrap.nav-hidden:not(:focus-within){transform:translateY(calc(-100% - 24px));pointer-events:none}
.site-header.wrap.nav-scrolled{box-shadow:0 12px 28px #23231f20}
.site-header.wrap .wordmark{font-size:21px}
.site-header.wrap>nav:not(.mobile-nav){gap:8px}
.site-header.wrap>nav:not(.mobile-nav) a{border:0;border-radius:5px;padding:10px 15px}
.site-header.wrap>nav:not(.mobile-nav) a:hover,.site-header.wrap>nav:not(.mobile-nav) a:focus-visible{background:#e9e4d8;color:#a42b1f}
.site-header.wrap .header-cta{background:#23231f;color:#f8f6ef;border-color:#23231f;padding:13px 17px}
.site-header.wrap .header-cta:hover{background:#ad3829;border-color:#ad3829;color:white}
.site-header.wrap .mobile-nav{top:calc(100% + 8px);left:0;right:0;border:1px solid #d7d1c5;border-radius:8px;background:#f8f6ef;box-shadow:0 16px 30px #23231f20}
html{scroll-padding-top:105px}
/* Seamless strip: duplicated text is hidden from assistive technology. */
.name-strip{overflow:hidden;padding:20px 0}
.name-strip .marquee-track{display:flex;width:max-content;animation:portfolio-marquee 48s linear infinite}
.name-strip .marquee-track>.wrap{width:max-content;margin:0;display:flex;flex:none;flex-wrap:nowrap;justify-content:flex-start;gap:0}
.name-strip .marquee-track span{white-space:nowrap;font-size:20px;color:#656157}
.name-strip .marquee-track span::after{content:' ';display:inline-block;width:42px}
.name-strip:hover .marquee-track{animation-play-state:paused}
@keyframes portfolio-marquee{to{transform:translateX(-50%)}}
/* The three featured previews settle into their final positions. */
.hero-stage .preview-back{--rest-rotation:-9deg;animation:hero-drop .7s cubic-bezier(.22,1,.36,1) .05s backwards}
.hero-stage .preview-middle{--rest-rotation:7deg;animation:hero-drop .7s cubic-bezier(.22,1,.36,1) .16s backwards}
.hero-stage .preview-front{--rest-rotation:-5deg;animation:hero-drop .7s cubic-bezier(.22,1,.36,1) .27s backwards}
@keyframes hero-drop{from{opacity:0;transform:translateY(-75px) rotate(calc(var(--rest-rotation) - 3deg))}to{opacity:1;transform:translateY(0) rotate(var(--rest-rotation))}}
@media(max-width:600px){.hero-stage .preview-back{--rest-rotation:-7deg}.hero-stage .preview-front{--rest-rotation:-4deg}}
/* A stronger closing */
.contact-section .contact-layout{align-items:start;gap:clamp(45px,8vw,130px)}
.contact-section .contact-intro{position:sticky;top:115px}
.contact-section .contact-intro h2{font-size:clamp(64px,7.2vw,104px)}
.contact-section .contact-intro>p{margin-top:28px;color:#5e382c;font-size:16px}
.contact-section .contact-panel{padding:clamp(28px,4vw,48px);border-radius:8px;box-shadow:0 18px 42px #68392a14}
.contact-section .contact-panel h3{font-size:25px}
.site-footer{display:block;background:#23231f;color:#f8f6ef;padding:0;margin:0}
.site-footer .footer-inner{padding-block:62px 26px;display:grid;grid-template-columns:1fr auto;gap:65px 30px}
.site-footer .wordmark{font-size:clamp(28px,3.4vw,46px);width:max-content}
.site-footer .wordmark span{color:#ef8b70}
.site-footer nav{display:flex;gap:30px;align-items:start;font-size:14px;font-weight:600}
.site-footer nav a:hover,.site-footer .footer-bottom a:hover{color:#ef8b70}
.site-footer .footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;border-top:1px solid #696760;color:#c7c1b5;font-size:12px}
.site-footer .footer-bottom a{display:inline-flex;align-items:center;gap:8px;color:#f8f6ef}
.site-footer .footer-bottom svg{width:15px;height:15px}
@media(max-width:800px){.site-header.wrap{top:8px;margin-top:8px;min-height:67px;padding:10px 12px;gap:10px}.site-header.wrap .wordmark{font-size:19px}.site-header.wrap .header-cta{padding:11px 12px}.site-header.wrap .menu-toggle{width:42px;height:42px}.contact-section .contact-intro{position:static}.site-footer .footer-inner{gap:48px 24px}}
@media(max-width:600px){.name-strip{padding:17px 0}.name-strip .marquee-track span{font-size:18px}.contact-section .contact-intro h2{font-size:clamp(59px,15vw,78px)}.contact-section .contact-intro>p{margin-top:18px}.contact-section .contact-panel{padding:25px}.site-footer .footer-inner{grid-template-columns:1fr;gap:32px;padding-block:48px 24px}.site-footer nav{gap:24px}.site-footer .footer-bottom{grid-column:1;align-items:flex-end}.site-footer .footer-bottom span{max-width:210px}}
@media(max-width:360px){.site-header.wrap .header-cta{font-size:11px;padding:10px 9px}.site-header.wrap .wordmark{font-size:17px}.site-header.wrap .menu-toggle{width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.name-strip{overflow-x:auto}.name-strip .marquee-track{animation:none}.name-strip .marquee-track>[data-copy]{display:none}.site-header.wrap,.project-grid .project-card,.project-grid .project-visual,.project-grid .project-browser,.project-grid .round-link{transition:none!important}}

/* The header sits flush at the top, then becomes a floating bar on scroll. */
.site-header.wrap{top:0;margin-top:0;min-height:76px;padding:10px 0;background:var(--paper);border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none}
.site-header.wrap.nav-scrolled{top:10px;padding:10px 18px;background:#f8f6ef;border:1px solid #d7d1c5;border-radius:10px;box-shadow:0 12px 28px #23231f20}
.site-header.wrap .wordmark{white-space:nowrap;font-size:21px;line-height:1}
@media(max-width:800px){.site-header.wrap{top:0;margin-top:0;min-height:68px;padding:10px 0}.site-header.wrap.nav-scrolled{top:8px;padding:10px 12px}.site-header.wrap .wordmark{font-size:17px}}
@media(max-width:360px){.site-header.wrap .wordmark{font-size:15px}.site-header.wrap.nav-scrolled{padding-inline:9px}.site-header.wrap{gap:7px}}
@media(prefers-reduced-motion:reduce){.hero-stage .hero-preview{animation:none!important}}
@media(max-width:360px){.site-header.wrap .header-cta{white-space:nowrap;font-size:10px;gap:4px;padding:10px 7px}.site-header.wrap .header-cta svg{width:13px;height:13px}.site-header.wrap .wordmark{font-size:14px}}

@media(max-width:800px){.site-header.wrap .menu-toggle{margin-left:auto}}