/* Content remains visible when motion is unavailable. */
:root { --header-height:100px; }
.button, .text-link, .nav-brief, .desktop-nav a { transition:color 180ms ease,background-color 180ms ease,border-color 180ms ease; }
.button > span, .text-link > span, .nav-brief > span { transition:transform 180ms ease; }
@media (hover:hover) { .button:hover > span, .text-link:hover > span, .nav-brief:hover > span { transform:translate(2px,-2px); } }
@media (min-width:761px) and (max-width:1000px) { :root { --header-height:88px; } }
@media (max-width:760px) { :root { --header-height:80px; } }
@media (prefers-reduced-motion:reduce) { .button,.text-link,.nav-brief,.desktop-nav a,.button > span,.text-link > span,.nav-brief > span { transition:none; } }

/* One opening composition: the frame and its connection move together. */
.hero { position:relative; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:24px; align-items:start; }
.hero-copy { padding:32px 0 56px var(--gutter); }
.hero h1 { font-size:clamp(78px,min(8.6vw,13svh),148px); line-height:.91; margin:28px 0 26px; }
.hero-line { display:block; overflow:clip; padding:0 .025em .04em 0; margin-bottom:-.04em; }
.hero-line > span { display:block; }
.hero-description { line-height:1.65; max-width:490px; }
.hero-description strong { margin-bottom:7px; }
.hero-actions { margin-top:26px; gap:14px 22px; }
.hero-image { position:relative; min-width:0; margin:148px var(--gutter) 110px 16px; aspect-ratio:16/9; background:var(--panel); }
.hero-photo-window { position:absolute; inset:0; overflow:hidden; }
.hero-photo-window > .photo { width:100%; height:100%; object-fit:cover; object-position:50% 46%; }
.hero-edge { position:absolute; width:30%; height:28%; border-color:#a6afa0; border-style:solid; pointer-events:none; }
.edge-start { left:-14px; top:-14px; border-width:1px 0 0 1px; }
.edge-end { right:-14px; bottom:-14px; border-width:0 1px 1px 0; }
.hero-connection { position:absolute; width:calc(100% + 62px); height:72px; left:-62px; bottom:-72px; overflow:visible; pointer-events:none; }
.hero-connection path { fill:none; stroke:var(--orange); stroke-width:2; stroke-linecap:square; stroke-linejoin:miter; }
@media (min-width:761px) and (max-width:1100px) {
 .hero { column-gap:18px; }
 .hero h1 { font-size:8.7vw; }
 .hero-image { margin-left:8px; margin-top:82px; }
 .hero-description { font-size:16px; }
 .hero-actions { gap:10px 18px; }
 .hero .button { padding:16px 18px; }
 .hero-connection { width:calc(100% + 28px); left:-28px; }
}
@media (max-width:760px) {
 .hero { grid-template-columns:minmax(0,1fr); }
 .hero-copy { padding:26px var(--gutter) 0; }
 .hero h1 { font-size:clamp(72px,20.6vw,136px); line-height:.89; margin:22px 0 22px; }
 .hero-description { font-size:16px; line-height:1.6; max-width:560px; }
 .hero-description strong { margin-bottom:5px; }
 .hero-actions { margin-top:20px; gap:8px 10px; }
 .hero .button { min-height:50px; padding:14px 12px; gap:8px; }
 .hero .text-link { min-height:44px; padding:10px 0; gap:6px; }
 .hero-image { margin:38px calc(var(--gutter) + 10px) 94px; aspect-ratio:3/2; }
 .hero-photo-window > .photo { object-position:50% 50%; }
 .hero-edge { width:28%; height:32%; }
 .edge-start { left:-10px; top:-10px; }
 .edge-end { right:-10px; bottom:-10px; }
 .hero-connection { width:calc(100% + 10px); left:-10px; height:56px; bottom:-56px; }
}
@media (prefers-reduced-motion:reduce) {
 .hero-line > span, .hero-image, .hero-photo-window > .photo, .hero-edge { transform:none !important; opacity:1 !important; }
 .hero-connection path { stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
}

/* Navigation remains available when the small interaction script cannot run. */
@media (max-width:760px) {
 html:not(.has-navigation) .menu-toggle { display:none; }
 html:not(.has-navigation) .mobile-nav[hidden] { display:block; position:static; }
}