/* Hirrest: drawn timber frames and a quiet Finnish pine landscape. */
.timber-drawing { position:absolute; width: min(38vw,560px); right:3vw; bottom:8%; color:var(--sand); opacity:.38; pointer-events:none; }
.timber-line { stroke-dasharray:1; stroke-dashoffset:0; animation: timber-draw 3.8s cubic-bezier(.22,.61,.36,1) both; }
.timber-line-late { animation-delay:.65s; }
@keyframes timber-draw { from { stroke-dashoffset:1; opacity:0; } to { stroke-dashoffset:0; opacity:1; } }
.forest-section { position:relative; isolation:isolate; overflow:hidden; }
.forest-section > .container { position:relative; z-index:1; }
.route.forest-section { padding-bottom:clamp(190px,20vw,300px); }
.pine-forest { position:absolute; bottom:-2px; left:0; width:100%; height:clamp(180px,25vw,360px); pointer-events:none; color:var(--sage); }
.forest-layer-0 { opacity:.17; }
.forest-layer-1 { opacity:.25; }
.forest-layer-2 { opacity:.48; }
.forest-section .pine-forest { mask-image:linear-gradient(to bottom,transparent,black 17%); }
.contact.forest-section { background:linear-gradient(120deg,#253328,#2b1f16 75%); }
.contact .pine-forest { height:85%; width:65%; opacity:.21; color:#a6b694; mask-image:linear-gradient(to right,black,transparent); }
.forest-section.is-in-view .forest-layer { animation:forest-arrive 2.3s cubic-bezier(.2,.65,.3,1) both; }
.forest-section.is-in-view .forest-layer-1 { animation-delay:.13s; }
.forest-section.is-in-view .forest-layer-2 { animation-delay:.26s; }
@keyframes forest-arrive { from { transform:translateY(32px); opacity:0; } }
.draw-frame-target { position:relative; }
.interaction-frame { position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px); pointer-events:none; overflow:visible; color:var(--ochre); opacity:0; transition:opacity .2s; }
.interaction-frame rect { fill:none; stroke:currentColor; stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .65s cubic-bezier(.22,.61,.36,1); }
.draw-frame-target:focus-visible > .interaction-frame { opacity:1; }
.draw-frame-target:focus-visible > .interaction-frame rect { stroke-dashoffset:0; }
.draw-frame-target:focus-visible { outline:2px solid var(--ochre); outline-offset:6px; }
.button > .interaction-frame { color:currentColor; inset:4px; width:calc(100% - 8px); height:calc(100% - 8px); }
.route-card > .interaction-frame { inset:0; width:100%; height:100%; }
@media (hover:hover) { .draw-frame-target:hover > .interaction-frame { opacity:1; } .draw-frame-target:hover > .interaction-frame rect { stroke-dashoffset:0; } }
@media (max-width:680px) { .timber-drawing { width:66vw; right:-18vw; bottom:24%; opacity:.17; } .route.forest-section { padding-bottom:180px; } .contact .pine-forest { width:100%; height:55%; opacity:.12; } }
@media (prefers-reduced-motion:reduce) { .timber-line,.forest-section.is-in-view .forest-layer { animation:none!important; } .interaction-frame,.interaction-frame rect { transition:none!important; } }

/* More space around the drawing; the frame follows the link's own ink. */
.interaction-frame { inset:-10px -14px; width:calc(100% + 28px); height:calc(100% + 20px); color:inherit; }
.draw-frame-target:focus-visible { outline-color:currentColor; outline-offset:12px; }
.hero-pro { padding:1rem 1.15rem; border-top-color:transparent; }
.hero-pro > .interaction-frame { inset:0; width:100%; height:100%; }
.hero-actions { gap:1.5rem 2.4rem; }
.hero .text-link { border-bottom-color:transparent; padding:.5rem .35rem; }
.hero .interaction-frame { color:#fff; }
.button > .interaction-frame { inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); }
.intro { position:relative; isolation:isolate; overflow:hidden; background:linear-gradient(145deg,#e3e8d9 0%,#f7f2e8 43%,#e7d3a9 100%); }
.intro > .container { position:relative; z-index:1; }
.wood-contours { position:absolute; top:0; right:-15%; width:110%; height:1200px; color:#536b46; opacity:.13; pointer-events:none; mask-image:linear-gradient(90deg,transparent,black 60%); }
.pro { position:relative; isolation:isolate; overflow:hidden; padding-bottom:clamp(310px,33vw,470px); background:radial-gradient(ellipse at 80% 95%,#925348,transparent 65%),#582b2d; }
.pro-grid { position:relative; z-index:1; }
.assembly-art { position:absolute; bottom:0; right:0; width:min(1100px,95%); height:auto; color:#ead7ae; pointer-events:none; }
.draft-grid { opacity:.22; }
.assembly-structure { opacity:.8; }
.assembly-rails { opacity:.72; }
.assembly-joints { opacity:.9; }
.pro.is-assembled .assembly-bent { animation:assemble-bent 1.8s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--step)*.3s); }
.pro.is-assembled .assembly-rails path { stroke-dasharray:1; animation:connect-rails 2s ease 1.4s both; }
.pro.is-assembled .assembly-joints { animation:joint-reveal 1.3s ease 2.8s both; }
@keyframes assemble-bent { from { opacity:0; transform:translateY(-65px); } to { opacity:1; transform:translateY(0); } }
@keyframes connect-rails { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes joint-reveal { from { opacity:0; } to { opacity:.9; } }
@media(max-width:680px) { .wood-contours { width:220%; right:-95%; opacity:.1; height:850px; } .pro { padding-bottom:230px; } .assembly-art { width:660px; max-width:none; right:-125px; opacity:.65; } .hero-actions { gap:1.5rem; } }
@media(prefers-reduced-motion:reduce) { .pro.is-assembled .assembly-bent,.pro.is-assembled .assembly-rails path,.pro.is-assembled .assembly-joints { animation:none!important; } }

/* Real timber grain and compact, progressively enhanced building tabs. */
.button > .interaction-frame { inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); }
.wood-grain { position:absolute; inset:0; pointer-events:none; background:url('/assets/images/craft-surface-1800.webp') center / cover; opacity:.12; mix-blend-mode:multiply; }
.building-tabs { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid rgba(59,42,31,.3); gap:4px; }
.building-tabs[hidden] { display:none; }
.building-tabs button { border:0; border-bottom:3px solid transparent; padding:1.1rem .8rem; background:rgba(247,242,232,.7); cursor:pointer; color:var(--brown); font-weight:600; min-height:64px; }
.building-tabs button[aria-selected="true"] { background:var(--brown); color:white; border-bottom-color:var(--sage); }
.building-tabs button > .interaction-frame { inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); }
.building-tabs button:focus-visible { outline:2px solid var(--brown); outline-offset:2px; z-index:2; }
.building-grid.tab-panels { display:block; }
.tab-panels .building-card { display:grid; grid-template-columns:1.2fr 1fr; align-items:stretch; }
.tab-panels .building-card[hidden] { display:none; }
.tab-panels .building-card picture { aspect-ratio:3/2; }
.tab-panels .card-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(1.5rem,4vw,4rem); background:rgba(247,242,232,.65); }
@media(max-width:680px) { .building-tabs { grid-template-columns:repeat(2,1fr); } .building-tabs button { font-size:.9rem; padding:.85rem .6rem; } .tab-panels .building-card { grid-template-columns:1fr; } .tab-panels .building-card picture { aspect-ratio:3/2; } .tab-panels .card-copy { min-height:200px; } .wood-grain { background-size:auto 100%; opacity:.09; } }

.building-gallery { width:min(1488px,calc(100vw - 2 * var(--pad))); margin-left:50%; transform:translateX(-50%); }
.gallery-thumbs { display:flex; gap:12px; margin-top:1.8rem; }
.gallery-thumb { padding:3px; border:2px solid transparent; background:transparent; cursor:pointer; flex:1; min-width:0; max-width:140px; }
.gallery-thumb img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.gallery-thumb[aria-pressed="true"] { border-color:var(--sage); }
.gallery-thumb:hover { border-color:var(--brown); }
.gallery-thumb:focus-visible { outline:2px solid var(--brown); outline-offset:3px; }
.gallery-thumb > .interaction-frame { display:none; }
@media(max-width:680px) { .gallery-thumbs { gap:8px; margin-top:1.25rem; } }
/* Portrait image beside the building introduction. */
.intro-detail { display:block; width:100%; max-width:380px; aspect-ratio:3 / 4; }
.intro-detail img { width:100%; height:100%; object-fit:cover; object-position:45% center; }
@media(max-width:680px) { .intro-detail { width:min(100%,320px); aspect-ratio:3 / 4; } }
/* Local photographic backgrounds: keep all text above a quiet wash. */
.craft-story,.material,.people,.faq,.process { position:relative; isolation:isolate; overflow:hidden; }
.photo-wash { position:absolute; inset:0; z-index:-1; pointer-events:none; background-image:var(--wash-image); background-size:cover; background-position:center; opacity:.09; }
.craft-story .photo-wash { opacity:.07; }
.route .photo-wash { opacity:.08; mask-image:linear-gradient(black,transparent 85%); }
.pro .photo-wash { opacity:.10; mask-image:linear-gradient(black,transparent 75%); }
.contact .photo-wash { opacity:.09; }
.process-film { position:absolute; inset:0; z-index:-1; opacity:.13; pointer-events:none; background:url('/assets/images/work-film-poster.webp') center / cover; }
.process-film video { width:100%; height:100%; object-fit:cover; }
.process > .container { position:relative; }
.film-toggle { position:absolute; bottom:20px; right:var(--pad); border:1px solid currentColor; padding:.5rem .85rem; background:var(--paper); color:var(--brown); font-size:.8rem; cursor:pointer; z-index:2; }
.film-toggle[hidden] { display:none; }
@media(max-width:680px),(prefers-reduced-motion:reduce) { .process-film video { display:none; } .film-toggle { display:none; } .photo-wash { background-position:center; opacity:.07; } }

/* A single quiet line, drawn from left to right across the control. */
.underline-target { position:relative; }
.interaction-underline { position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; pointer-events:none; transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.22,.61,.36,1); }
.underline-target:focus-visible > .interaction-underline { transform:scaleX(1); }
.underline-target:focus-visible { outline:2px solid currentColor; outline-offset:5px; }
@media(hover:hover) { .underline-target:hover > .interaction-underline { transform:scaleX(1); } }
@media(prefers-reduced-motion:reduce) { .interaction-underline { transition:none; } }