/* Roofline source components, B.W. identity. Refero Samara media framing and
   Stykka restraint; Taste 7/6/4. Layers: base0, media1, copy2, nav10, dialog30. */
:root{--ink:#112e59;--paper:#f8fafb;--copy:#405267;--ease:cubic-bezier(.22,.72,.2,1)}
body{background:var(--paper);color:var(--ink)}
body h1,body h2,body h3{letter-spacing:-.025em!important;font-weight:400!important;text-wrap:balance}
body h1{font-size:clamp(40px,4.3vw,62px)!important;line-height:1.12!important}body h2{font-size:clamp(32px,3.1vw,46px)!important;line-height:1.2!important}body h3{font-size:28px!important;line-height:1.25!important}
body p,body a,body button,body label,body input,body textarea,body small{letter-spacing:0!important}body[data-business] main p{font-size:20px!important;line-height:1.6!important}
.preview-strip{min-height:34px;padding:5px 5%;background:#edf2f6;color:#405267;font-size:16px}.preview-strip a{color:#112e59}
.header,.header.over-hero,.inner .header{position:relative!important;top:auto!important;height:80px!important;min-height:80px;padding:5px 5%!important;background:var(--paper)!important;color:#112e59!important;border:0;backdrop-filter:none;box-shadow:none;z-index:10}
.header .brand{width:120px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.business-logo{display:block}.header nav a{color:#112e59!important;font-weight:400!important}.header nav{gap:28px}.header-actions .nav-cta{display:inline-flex}
body[data-business] :is(.btn,.nav-cta,.btn.light,.back,.opening .btn){border-radius:12px;min-height:54px;padding:14px 22px!important;font-size:18px!important;line-height:1.4;font-weight:400;white-space:nowrap;gap:20px;background:#112e59;color:#f8fafb;border:1px solid #112e59;box-shadow:inset 0 1px #ffffff22,0 5px 12px #17314d12;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn::before,.btn::after,.nav-cta::before,.nav-cta::after{display:none!important}.btn:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 16px #17314d22;filter:none}.btn:active,.nav-cta:active{transform:translateY(1px)}
/* The message and action now belong to the first viewport. The photo retains
   its native color and an independent camera plane, not a dark full-frame wash. */
body .hero{position:relative;display:grid;grid-template-columns:.84fr 1.16fr;align-items:center;gap:0;height:min(650px,calc(100svh - 135px));min-height:530px;max-height:650px;padding:26px 3% 30px 6%;background:var(--paper);overflow:visible}
.hero-art-clip{position:relative!important;inset:auto!important;grid-column:2;grid-row:1;height:100%;width:100%;overflow:hidden;border-radius:22px;box-shadow:0 18px 40px #17314d18}.hero-art{height:100%;width:100%;inset:0;transform:none}.hero-photo{height:100%;width:100%;object-fit:cover;object-position:54% 50%;filter:none!important}.hero-shade{display:none!important}
.hero-content{position:relative!important;grid-column:1;grid-row:1;inset:auto!important;transform:none!important;display:block!important;width:auto!important;max-width:none!important;margin:0;padding:20px 9% 20px 0;color:#112e59}
.hero h1{max-width:12ch;font-size:clamp(42px,4.5vw,64px)!important;line-height:1.1!important;letter-spacing:-.025em!important}.hero-kicker{color:#405267!important;margin:0 0 24px!important;font-size:17px!important;font-weight:400;text-transform:none}.hero-side{min-width:0;max-width:37ch;margin:26px 0 0}.hero-side p{color:#405267!important;margin:0 0 28px!important}.hero .btn{width:auto}.hero-bottom{display:none}
/* Source section families remain, with calmer hierarchy and tighter rhythm. */
.wrap{max-width:1320px}.intro{display:grid;grid-template-columns:1fr 1.1fr;gap:30px 8%;padding-top:72px!important;padding-bottom:60px!important}.intro>div:last-of-type{padding:0}.intro h2{max-width:17ch}.intro p{max-width:47ch}.family-photo{grid-column:1/-1;width:100%;height:220px;object-fit:cover;object-position:center 55%;border-radius:18px;margin-top:8px;filter:none;display:none}
.service-section{padding-top:36px!important;padding-bottom:70px!important}.section-head{gap:22px;margin-bottom:32px}.section-head:has(>p){display:block}.section-head>p{max-width:44ch;margin-top:20px}.service-row{grid-template-columns:180px 1fr auto!important;gap:36px;padding:28px 0;background:transparent!important;border-radius:0}.service-row img{height:130px;width:180px;border-radius:14px}.service-row h3{margin-bottom:8px}.service-row p{margin:0}.round-arrow{background:transparent!important;color:#112e59!important;border:0!important;border-radius:0!important;box-shadow:none!important;font-size:28px}.row-num{display:none}
.materials{padding:64px 0;background:#edf2f5}.materials .label{font-size:16px!important;text-transform:none;margin-bottom:16px}.material-tabs{margin-top:30px}.material-tabs button{border-radius:12px;background:transparent;border:1px solid #a4b5c4;box-shadow:none;padding:16px 22px!important;font-weight:400!important}.material-tabs button[aria-selected=true]{background:#112e59}.material-panel{grid-template-columns:1.2fr 1fr;min-height:450px}.sample-stage{min-height:420px}.sample-copy{padding:38px 30px}.sample-copy h3{font-size:36px!important}.sample-copy .micro{display:none}.sample-copy p{max-width:34ch}.sample-copy .material-question{border-top:1px solid #bac7d1;padding-top:20px;margin-top:24px}.sample-stage small{font-size:16px}.sample-float{max-width:620px}.sample-float img{max-height:380px}.sample-no{display:none}
.featured{background:var(--paper);grid-template-columns:1.25fr 1fr;min-height:540px;margin:0;padding:72px 5%;gap:6%}.featured-photo{border-radius:18px;min-height:430px}.featured-photo img{object-fit:cover;object-position:center}.featured-copy{background:transparent!important;color:#112e59;padding:38px 0}.featured-copy p,.featured-copy h2{color:#112e59}.featured-copy p{color:#405267;margin:24px 0}.photo-caption{display:none}
.craft-bench{padding-top:64px;padding-bottom:64px;background:#edf2f5}.inspection-window{background:#e4ebef;box-shadow:inset 0 1px #fff,0 14px 30px #17314d12}.bench-intro h2{max-width:14ch}.process{padding:70px 0}.steps article{background:transparent;box-shadow:none;border-radius:0}.steps article>span{color:#405267}.journal-teaser{padding:20px 0 70px}.note-points p{font-size:20px!important}
.cta{background:#e4edf4!important;color:#112e59!important;padding:58px 6%;gap:6%;border-radius:0;box-shadow:inset 0 1px #f8fafb}.cta::before,.cta::after{display:none!important}.cta h2,.cta p{color:#112e59!important}.cta h2{max-width:15ch}.cta p{max-width:40ch}.footer{background:#f8fafb;padding-bottom:28px}.footer-top .brand{width:160px}.footer-top p{font-size:20px}.footer-bottom{padding-bottom:20px}.utility-dock{position:static!important;display:flex!important;justify-content:flex-end;gap:16px;transform:none!important;margin:0;padding:18px 0 0;border-top:1px solid #c7d2db;width:100%}.utility-dock button{position:static!important;inset:auto!important;background:transparent!important;color:#112e59!important;border:1px solid #9fb1c2!important;box-shadow:none!important;font-size:16px!important;font-weight:400!important;padding:12px 18px!important;min-height:48px;transform:none!important;opacity:1!important}.utility-dock .guide-trigger{display:flex!important;gap:10px;align-items:center}.utility-dock .guide-trigger small{font-size:16px!important}.utility-dock .guide-trigger>span{display:none}
/* Inner archetypes retain the template; no forced shared hero replacement. */
.opening{min-height:540px!important}.opening-copy{padding-top:36px!important;padding-bottom:36px!important}.opening h1{max-width:16ch}.opening .opening-lead{max-width:42ch}.opening--workshop .opening-art,.opening--detail .opening-art{bottom:36px}.opening--journal .opening-art{bottom:36px}.opening--material{background:#e7eef3;color:#112e59}.opening--material .opening-copy,.opening--material .opening-lead{color:#112e59}.opening--project,.opening--story{background:#112e59}.opening--project .opening-copy,.opening--story .opening-copy{color:#f8fafb}.opening--project .opening-light,.opening--story .opening-light{background:linear-gradient(90deg,#071d35dc,transparent 75%)}.opening--project .btn,.opening--story .btn{background:#f8fafb;color:#112e59;border-color:#f8fafb}.opening-caption{display:none}.core-grid .core-item h2{font-size:28px!important}.core-grid .core-item{box-shadow:none;background:#edf2f5}.text-link{font-weight:400!important}.service-row,.project-card{scroll-margin-top:30px}
/* Native timelines preserve soft scale; transforms never depend on scroll events. */
@keyframes bw-camera{from{transform:scale(1)}to{transform:scale(1.07)}}
@keyframes bw-model{from{transform:translateY(12px) rotate(-2deg)}to{transform:translateY(-12px) rotate(1deg)}}
@keyframes bw-arrive{from{opacity:.8;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
 @supports(animation-timeline:view()){
 .hero-art,.opening-media{animation:bw-camera linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
 .sample-float{animation:bw-model linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
 }
 .arrived{animation:bw-arrive .6s var(--ease) both}.material-panel:not([hidden]) .sample-copy{animation:bw-arrive .35s var(--ease) both}
}
[data-motion-off] *,[data-motion-off] *::before,[data-motion-off] *::after{animation:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}.hero-art,.opening-media,.sample-float{transform:none!important}}
@media(max-width:1100px){.header-actions .nav-cta{display:none}.header nav{gap:20px}.hero h1{font-size:48px!important}.hero-side{margin-top:20px}.hero-content{padding-right:7%}.hero-side p{font-size:19px!important}.opening{min-height:500px!important}}
@media(max-width:700px){
 .preview-strip{min-height:34px;padding:5px 5%;gap:12px}.preview-strip a{max-width:none}.header,.header.over-hero{height:72px!important;min-height:72px;padding:4px 6%!important}.header .brand{width:108px!important}.header #navigation{background:#f8fafb!important;color:#112e59!important;box-shadow:0 18px 28px #17314d20}.header #navigation a{color:#112e59!important}.header .menu{background:#112e59}
 body .hero{display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:0;max-height:none;padding:20px 6% 28px;gap:26px}.hero-content{order:0;padding:0!important;margin:0!important}.hero h1{font-size:42px!important;max-width:15ch;line-height:1.12!important}.hero-kicker{margin-bottom:14px!important;font-size:16px!important}.hero-side{margin:18px 0 0;max-width:none}.hero-side p{font-size:19px!important;line-height:1.5!important;margin-bottom:20px!important}.hero .btn{width:auto;min-width:220px}.hero-art-clip{order:1;height:270px!important;min-height:270px;border-radius:18px}.hero-photo{object-position:center 58%}.hero-art{position:absolute}.intro{display:block;padding:34px 0!important}.intro>div+div{margin-top:24px}.intro h2{max-width:17ch}.intro p{font-size:19px!important}.service-section{padding:20px 0 44px!important}.section-head{margin-bottom:24px}.service-row{grid-template-columns:105px 1fr!important;gap:20px;padding:24px 0}.service-row img{width:105px;height:125px}.service-row h3{font-size:24px!important}.service-row p{font-size:18px!important;line-height:1.5!important}.service-row .round-arrow{display:none}.materials{padding:44px 0}.material-panel{display:block;min-height:0}.material-panel[hidden]{display:none}.sample-stage{min-height:300px}.sample-copy{padding:24px 0 0}.sample-copy h3{font-size:30px!important}.sample-float img{max-height:260px}.sample-stage small{bottom:0}.material-tabs{margin-top:24px}.featured{display:block;padding:44px 6%;min-height:0}.featured-photo{height:310px;min-height:310px}.featured-copy{padding:30px 0 0}.featured-copy h2{max-width:18ch}.craft-bench{padding:44px 6%}.process{padding:44px 0}.journal-teaser{padding:0 0 44px}.cta{padding:44px 6%;display:block}.cta>div+div{margin-top:24px}.cta .btn{white-space:normal}.footer-top{gap:26px}.utility-dock{justify-content:flex-start;flex-wrap:wrap}.utility-dock button{font-size:16px!important}.footer-top .brand{width:145px}.opening{min-height:0!important}.opening-copy{padding-top:26px!important;padding-bottom:26px!important}.opening h1{font-size:40px!important}.opening--workshop .opening-art,.opening--detail .opening-art,.opening--journal .opening-art{inset:auto}.opening--project,.opening--story{min-height:600px!important}.opening--project .opening-light,.opening--story .opening-light{background:linear-gradient(0deg,#071d35e8,transparent 90%)}
 body[data-business] main p{font-size:19px!important}body h2{font-size:34px!important}body h3{font-size:26px!important}.btn,.nav-cta{max-width:100%}
}
@media(max-width:360px){body .hero h1{font-size:36px!important}.hero-art-clip{height:230px!important;min-height:230px}.hero-side p{font-size:18px!important}.preview-strip,.preview-strip a{font-size:16px!important}.service-row{gap:14px;grid-template-columns:90px 1fr!important}.service-row img{width:90px}.service-row h3{font-size:22px!important}}
html:not(.js) .hero-content{padding-top:0!important}html:not(.js) .header{height:auto!important}

body .hero h1{text-shadow:none!important}.service-row::before,.service-row::after{display:none!important}

@media(max-width:700px){body .intro.wrap{padding:34px 6%!important}}

.utility-dock .guide-trigger{white-space:nowrap!important}.utility-dock .guide-trigger small{color:#405267!important}.bench-intro h2,.note-points{color:#112e59}.inspection-controls input{accent-color:#112e59}.cta{border-top:0!important}

html:not(.js) .utility-dock{display:none!important}
/* Fidelity correction: preserve Roofline's full photographic opening and
   bottom-aligned two-column composition rather than substituting a split hero. */
body:not(.inner) .header.over-hero{position:absolute!important;top:34px!important;left:0;right:0;background:transparent!important;color:#fff!important}
body:not(.inner) .header.over-hero nav a{color:#fff!important;text-shadow:0 1px 6px #14213566}
body:not(.inner) .header.over-hero .brand{background:#f8fafbf5!important;padding:7px 10px!important;width:140px!important;border-radius:10px;box-shadow:0 4px 16px #102b4920!important}
body .hero{display:block;height:min(780px,calc(100svh - 34px));min-height:620px;max-height:780px;padding:0;overflow:hidden;background:#112e59}
.hero-art-clip{position:absolute!important;inset:0!important;height:100%;border-radius:0;box-shadow:none}
.hero-photo{object-position:center 48%}.hero-art{position:absolute;inset:0;transform:none}
.hero-shade{display:block!important;position:absolute;inset:0;background:linear-gradient(180deg,#081a3655 0%,transparent 36%,#081a36bb 76%,#081a36ed 100%);z-index:1}
.hero-content{position:absolute!important;inset:auto 6% 60px!important;display:grid!important;grid-template-columns:1.25fr 1fr;gap:0 8%;align-items:end;padding:0!important;color:#f8fafb!important}
.hero-kicker{grid-column:1/-1;color:#f8fafb!important;margin-bottom:22px!important;text-shadow:0 1px 4px #112e5933}.hero h1{color:#f8fafb!important;max-width:14ch;font-size:62px!important;text-shadow:none!important}.hero-side{max-width:37ch;margin:0;justify-self:end}.hero-side p{color:#f8fafb!important;margin-bottom:22px!important}.hero .btn{background:#f8fafb!important;color:#112e59!important;border-color:#f8fafb!important}
@media(max-width:700px){body:not(.inner) .header.over-hero{top:34px!important}.header.over-hero .brand{width:122px!important}.hero .hero-content{display:block!important;inset:auto 6% 32px!important}.hero h1{font-size:40px!important;max-width:15ch}.hero-kicker{margin-bottom:16px!important}.hero-side{margin-top:20px;max-width:none}.hero-side p{font-size:19px!important}.hero .hero-art-clip{height:100%!important;min-height:0;border-radius:0}.hero-photo{object-position:57% 28%}.hero-shade{background:linear-gradient(180deg,#081a3640,transparent 25%,#081a36b3 50%,#081a36f2 100%)}body .hero{height:calc(100svh - 34px);min-height:690px;max-height:790px}.hero .btn{min-width:220px}}
@media(max-width:360px){.hero h1{font-size:36px!important}.hero-side p{font-size:18px!important}body .hero{min-height:650px}}
html:not(.js) body:not(.inner) .header.over-hero{position:relative!important;top:auto!important;background:#112e59!important}html:not(.js) .hero-content{padding-top:0!important}

.hero-content{z-index:2!important}.hero-art-clip{z-index:0}.hero-art{animation-duration:auto}
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
.hero{view-timeline-name:--bw-hero;view-timeline-axis:block}.hero-art{animation-timeline:--bw-hero;animation-range:exit 0% exit 100%}
.opening{view-timeline-name:--bw-opening;view-timeline-axis:block}.opening-media{animation-timeline:--bw-opening;animation-range:exit 0% exit 100%}
.materials{view-timeline-name:--bw-material;view-timeline-axis:block}.sample-float{animation-timeline:--bw-material;animation-range:entry 0% exit 100%}
}}

@media(max-width:700px){.hero-side{padding:0!important}body .hero{min-height:620px}}
@media(max-width:360px){body:not(.inner) .header.over-hero{top:58px!important}body .hero{height:calc(100svh - 58px);min-height:600px}}

@media(max-width:700px){.wrap{padding-left:6%!important;padding-right:6%!important}}