@font-face { font-family: "Manrope Variable"; font-style: normal; font-display: swap; font-weight: 200 800; src: url('../fonts/manrope-latin-variable.woff2') format('woff2-variations'); }
:root { color-scheme: light; --bg:#ffffff; --surface:#eef5f8; --line:#d3e0e7; --text:#18254a; --muted:#526575; --blue:#086b9a; --radius:20px; --shadow:0 16px 46px rgba(24,57,76,.08); --font-body:"Manrope Variable","Segoe UI",sans-serif; --header-height:82px; font-family:var(--font-body); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.65; text-rendering:optimizeLegibility; }
img { display:block; max-width:100%; }
a { color:inherit; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
.skip-link { position:fixed; top:12px; left:12px; z-index:100; padding:10px 14px; background:white; color:var(--text); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }
.shell { width:min(1180px,calc(100% - 40px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:30; border-bottom:1px solid var(--line); background:rgba(255,255,255,.97); backdrop-filter:blur(18px); }
.nav-wrap { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; flex:0 0 auto; align-items:center; }
.brand img { width:206px; height:auto; object-fit:contain; }
.nav-toggle { display:none; width:46px; height:44px; padding:10px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--text); }
.nav-toggle span { display:block; height:2px; margin:5px 0; background:currentColor; }
.site-nav { display:flex; align-items:center; gap:26px; }
.site-nav a { font-size:.94rem; text-decoration:none; }
.site-nav a:hover,.site-nav a[aria-current='page'] { color:var(--blue); }
.button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:8px; padding:12px 21px; border:1px solid var(--blue); border-radius:999px; background:var(--blue); color:white; font-weight:700; text-decoration:none; transition:transform 180ms ease; }
.button:hover { transform:translateY(-2px); }
.site-nav .button { color:white; }
.button.secondary { background:white; color:var(--blue); }
.button.small { min-height:44px; padding:8px 15px; font-size:.9rem; }
h1,h2,h3 { margin:0 0 20px; font-weight:750; line-height:1.16; letter-spacing:-.045em; overflow-wrap:break-word; }
h1 { font-size:clamp(2.4rem,4.7vw,4rem); }
h2 { font-size:clamp(2rem,3.5vw,3rem); }
h3 { font-size:1.7rem; }
.eyebrow,.chapter-number,.service-role { margin:0 0 14px; color:var(--blue); font-size:.73rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.hero { padding:30px 0; }
.hero-panel { position:relative; min-height:610px; display:grid; align-items:center; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:#e7f0f5 url('../images/hero-mountain.webp') center / cover no-repeat; isolation:isolate; }
.hero-panel::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#f7fafcee 0%,#f7fafcea 42%,#f7fafc12 80%); }
.hero-copy { width:65%; padding:clamp(30px,4.5vw,58px); }
.hero-copy > p:not(.eyebrow) { max-width:42ch; color:#364e61; font-size:1.06rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.section { padding:96px 0; }
.section.compact { padding-block:50px 84px; }
.soft { background:#f7fafc; }
.section-heading { max-width:760px; margin-bottom:36px; }
.section-heading > p:not(.eyebrow),.lead { color:var(--muted); font-size:1.08rem; }
/* The scene and copy stay in separate columns throughout the three acts. */
.studio-story { position:relative; display:grid; min-height:300svh; margin-top:24px; border-block:1px solid var(--line); background:#f8fbfc; }
.studio-story-sticky { position:sticky; top:var(--header-height); grid-area:1 / 1; display:grid; grid-template-columns:minmax(0,62%) minmax(0,38%); height:calc(100svh - var(--header-height)); align-self:start; }
.story-visual { position:relative; min-width:0; height:100%; overflow:hidden; background:radial-gradient(ellipse at 50% 40%,#fff,#e7f0f4); border-right:1px solid var(--line); }
.story-canvas,.story-visual picture { position:absolute; inset:0; display:block; width:100%; height:100%; }
.story-canvas { opacity:0; }
.story-visual picture img { width:100%; height:100%; object-fit:contain; }
html[data-motion-mode='full'].is-webgl-ready .story-canvas { opacity:1; }
html[data-motion-mode='full'].is-webgl-ready .story-visual picture { opacity:0; pointer-events:none; }
.story-rail { grid-column:2; background:#fff; }
.story-rail span { display:none; }
.scene-label { position:absolute; top:28px; left:28px; display:grid; gap:5px; pointer-events:none; }
.scene-label span { color:var(--blue); font-size:.67rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.scene-label strong { font-size:1.1rem; }
.scene-legend { position:absolute; bottom:116px; left:28px; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:.73rem; color:var(--muted); }
.scene-legend > span::before { content:''; display:inline-block; width:18px; height:3px; margin-right:7px; vertical-align:middle; }
.legend-hot::before { background:#d83d2c; }
.legend-cold::before { background:#087aad; }
.scene-legend small { flex-basis:100%; font-size:.65rem; }
.story-chapters { position:relative; z-index:5; width:38%; grid-area:1 / 1; margin-left:62%; pointer-events:none; }
.story-beat { display:flex; min-height:100svh; flex-direction:column; justify-content:center; padding:100px clamp(24px,3vw,48px) 60px; }
.story-beat h2 { max-width:15ch; font-size:clamp(1.9rem,2.6vw,2.7rem); }
.story-beat > p:not(.chapter-number) { margin:0; color:var(--muted); font-size:.94rem; }
.story-beat .thermal-explanation { margin-top:20px !important; padding-top:20px; border-top:1px solid var(--line); }
.installation-photos { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:24px; pointer-events:auto; }
.installation-photos.single-photo { grid-template-columns:1fr; }
.installation-photos button { min-width:0; padding:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#f1f6f8; color:var(--text); text-align:left; cursor:zoom-in; }
.installation-photos img { width:100%; aspect-ratio:3 / 4; object-fit:contain; max-height:240px; }
.installation-photos.single-photo img { aspect-ratio:auto; height:240px; }
.installation-photos span { display:block; padding:8px 10px; font-size:.69rem; font-weight:750; }
.experience-controls { --mode-accent:#086b9a; position:absolute; z-index:10; bottom:20px; left:20px; max-width:calc(62% - 40px); display:flex; flex-wrap:wrap; gap:6px; padding:7px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.97); box-shadow:var(--shadow); }
.experience-controls[hidden] { display:none; }
html[data-climate-mode='heating'] .experience-controls { --mode-accent:#b93222; }
.experience-controls button { min-height:44px; border:1px solid transparent; background:transparent; color:var(--muted); font-size:.72rem; font-weight:750; }
.motion-toggle { display:flex; align-items:center; gap:8px; padding:7px; }
.control-copy { display:grid; text-align:left; }
.control-kicker,.climate-switch legend { font-size:.53rem; color:var(--muted); font-weight:750; letter-spacing:.07em; text-transform:uppercase; }
.control-value { color:var(--text); font-size:.83rem; }
.motion-toggle:disabled { cursor:not-allowed; opacity:.55; }
.switch-track { position:relative; width:30px; height:18px; border:1px solid #7e96a5; border-radius:16px; }
.switch-thumb { position:absolute; top:3px; left:3px; width:10px; height:10px; border-radius:50%; background:#7e96a5; }
.motion-toggle[aria-pressed='true'] .switch-thumb { background:var(--mode-accent); transform:translateX(12px); }
.motion-state { display:none; }
.climate-switch { position:relative; display:grid; grid-template-columns:repeat(2,auto); margin:0; padding:13px 0 0 6px; border:0; border-left:1px solid var(--line); gap:3px; }
.climate-switch legend { position:absolute; top:0; left:10px; }
.climate-switch button { display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 8px; border-radius:7px; }
.climate-switch svg { width:14px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.6; }
.climate-switch button[aria-pressed='true'] { border-color:var(--mode-accent); background:#eef5f8; color:var(--mode-accent); }
.studio-story noscript { padding:20px; color:var(--muted); }
.service-showcase { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.service-feature { min-width:0; border:1px solid var(--line); border-radius:var(--radius); background:#f5f9fb; }
.service-feature-copy { height:100%; display:flex; flex-direction:column; padding:clamp(26px,3.5vw,42px); }
.service-feature-copy h3 { max-width:16ch; margin-top:14px; font-size:clamp(1.7rem,2.7vw,2.3rem); }
.service-feature-copy p { color:var(--muted); margin:0 0 24px; }
.service-feature-copy a { margin-top:auto; color:var(--blue); font-weight:750; text-decoration:none; }
.service-support-rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:20px; border:1px solid var(--line); border-radius:var(--radius); }
.service-support { padding:28px; }
.service-support + .service-support { border-left:1px solid var(--line); }
.service-support > span { color:var(--blue); font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.service-support h3 { font-size:1.45rem; margin:10px 0 14px; }
.service-support p { margin:0; color:var(--muted); font-size:.93rem; }
.tenant-section { border-top:1px solid var(--line); }
.tenant-layout { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(32px,5vw,72px); }
.tenant-product { margin:0; min-width:0; }
.tenant-product img { width:100%; height:auto; }
.tenant-product figcaption { margin-top:20px; font-weight:750; font-size:1.05rem; }
.tenant-product figcaption span { display:block; color:var(--muted); font-weight:400; font-size:.88rem; }
.tenant-copy { min-width:0; }
.tenant-copy h2 { max-width:15ch; }
.tenant-copy > p { color:var(--muted); }
.tenant-copy .button { margin-top:12px; text-align:center; }
.tenant-document { display:flex; align-items:center; gap:14px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line); text-decoration:none; color:var(--blue); font-weight:700; }
.tenant-document svg { width:28px; height:34px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; }
.tenant-document small { display:block; margin-top:3px; font-size:.75rem; font-weight:400; color:var(--muted); }
.tenant-document:hover span { text-decoration:underline; text-underline-offset:4px; }
@media (max-width:700px) {
  .tenant-layout { grid-template-columns:1fr; gap:30px; }
  .tenant-product { max-width:480px; margin-inline:auto; }
  .tenant-copy h2 { max-width:18ch; }
  .tenant-copy .button { width:100%; }
}
.work-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.work-card { min-width:0; overflow:hidden; border-radius:var(--radius); background:var(--surface); }
.work-card img { width:100%; aspect-ratio:3 / 4; height:100%; object-fit:cover; transition:transform 400ms ease; }
.work-card:hover img,.gallery-button:hover img { transform:scale(1.025); }
.section-action { margin-top:30px; }
.split { display:grid; grid-template-columns:300px 1fr; align-items:center; gap:clamp(36px,8vw,100px); }
.about-portrait-frame { width:300px; max-width:100%; margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.about-portrait { width:100%; height:auto; object-fit:contain; }
.about-portrait-caption { display:grid; padding:18px 22px; }
.about-portrait-caption span { color:var(--blue); font-size:.68rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.about-portrait-caption strong { margin-top:3px; font-size:1.25rem; }
.fact-list { padding:0; margin:26px 0 0; list-style:none; }
.fact-list li { position:relative; padding-left:25px; margin:15px 0; color:var(--muted); }
.fact-list li::before { content:''; position:absolute; left:0; top:.66em; width:8px; height:8px; border-radius:50%; background:var(--blue); }
.location-card { display:grid; grid-template-columns:1.15fr .85fr; gap:36px; padding:clamp(28px,5vw,54px); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.contact-details { display:grid; gap:12px; align-content:center; overflow-wrap:anywhere; }
.contact-details a { text-underline-offset:4px; }
.page-hero { padding:74px 0 44px; }
.page-hero p { max-width:700px; color:var(--muted); font-size:1.1rem; }
.gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding-bottom:90px; }
.gallery-button { width:100%; aspect-ratio:3 / 4; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); cursor:zoom-in; }
.gallery-button img { width:100%; height:100%; object-fit:cover; transition:transform 400ms ease; }
.contact-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:46px; padding-bottom:92px; }
.contact-panel,.form-panel,.legal-panel { padding:clamp(26px,5vw,46px); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.contact-panel address { font-style:normal; }
.contact-panel a,.form-note a { color:var(--blue); }
.hours { margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.field { margin-bottom:18px; }
.field label { display:block; margin-bottom:7px; font-weight:700; }
.field input,.field textarea { width:100%; border:1px solid #8ea5b3; border-radius:10px; padding:13px 14px; background:white; color:var(--text); }
.field textarea { min-height:150px; resize:vertical; }
.form-note { color:var(--muted); font-size:.9rem; }
.hidden-field { position:absolute !important; left:-10000px !important; }
.legal-wrap { max-width:880px; padding-bottom:92px; }
.legal-panel h2 { margin-top:34px; font-size:1.55rem; }
.legal-panel h2:first-child { margin-top:0; }
.legal-panel p,.legal-panel li { color:var(--muted); }
.social-follow { padding-block:36px 54px; background:white; }
.social-follow-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:26px; }
.social-follow h2 { margin:0 0 8px; font-size:1.55rem; }
.social-follow p { margin:0; max-width:42ch; color:var(--muted); }
.social-badges { display:flex; flex-wrap:wrap; gap:12px; }
.social-badge { display:flex; align-items:center; gap:14px; padding:15px 20px; border:1px solid var(--line); border-radius:16px; text-decoration:none; background:#f8fbfc; }
.social-badge svg { width:32px; height:32px; flex:none; }
.social-badge span { display:grid; gap:3px; }
.social-badge strong { font-size:1rem; }
.social-badge small { color:var(--muted); font-size:.78rem; }
.social-badge.instagram svg { fill:none; stroke:#a52f65; stroke-width:2; }
.social-badge.instagram .icon-dot { fill:#a52f65; stroke:none; }
.social-badge.linkedin svg { fill:#0a66c2; }
.social-badge:hover { border-color:var(--blue); background:#edf6fb; }
.site-footer { border-top:1px solid var(--line); background:#f5f9fb; }
.footer-main { display:grid; grid-template-columns:1fr auto; align-items:end; gap:40px; padding:48px 0 30px; }
.footer-brand img { width:246px; height:auto; object-fit:contain; margin-bottom:22px; }
.footer-brand p { max-width:530px; margin:0; color:var(--muted); }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:18px; }
.footer-links a { text-decoration:none; }
.footer-bottom { padding:20px 0 30px; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; }
.lightbox[hidden] { display:none; }
.lightbox { position:fixed; inset:0; z-index:80; background:rgba(248,251,253,.98); overscroll-behavior:contain; }
.lightbox-frame { position:absolute; inset:80px 20px 92px; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; touch-action:pan-y pinch-zoom; }
.lightbox img { width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; user-select:none; }
.lightbox-close { position:absolute; top:max(18px,env(safe-area-inset-top)); right:18px; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; background:white; color:var(--text); font-size:1.7rem; }
.lightbox-controls { position:absolute; bottom:max(18px,env(safe-area-inset-bottom)); left:20px; right:20px; display:flex; align-items:center; justify-content:center; gap:24px; }
.lightbox-controls button { width:48px; height:48px; border:1px solid var(--line); border-radius:50%; background:white; color:var(--blue); font-size:1.5rem; }
.lightbox-counter { min-width:70px; text-align:center; font-variant-numeric:tabular-nums; color:var(--muted); }
.lightbox-controls button[hidden] { display:none; }
@media (max-width:1000px) {
  .nav-toggle { display:block; }
  .site-nav { position:absolute; top:82px; left:20px; right:20px; display:none; align-items:stretch; flex-direction:column; gap:0; padding:12px; border:1px solid var(--line); border-radius:16px; background:white; box-shadow:var(--shadow); }
  .site-nav.open { display:flex; }
  .site-nav a { padding:12px 10px; }
  .site-nav .button { margin-top:8px; }
  .hero-copy { width:75%; }
  .experience-controls { gap:3px; left:10px; max-width:calc(62% - 20px); }
  .climate-switch svg { display:none; }
  .system-switch { flex-basis:100%; border-left:0; border-top:1px solid var(--line); }
  .scene-legend { bottom:182px; }
  .story-beat { padding-inline:22px; }
  .work-grid,.gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .location-card,.contact-layout { grid-template-columns:1fr; }
}
@media (max-width:700px) {
  :root { --header-height:72px; }
  .shell { width:min(100% - 28px,1180px); }
  .brand img { width:180px; }
  .nav-wrap { min-height:72px; }
  .site-nav { top:72px; left:14px; right:14px; }
  .hero { padding-top:18px; }
  .hero-panel { min-height:620px; align-items:end; border-radius:20px; background-position:65% center; }
  .hero-panel::before { background:linear-gradient(0deg,#f7fafc 0%,#f7fafcf2 55%,#f7fafc05 100%); }
  .hero-copy { width:100%; padding:26px 22px; }
  h1 { font-size:clamp(2.2rem,9vw,3rem); }
  .hero-actions .button { width:100%; }
  .section { padding-block:66px; }
  .studio-story { display:block; min-height:auto; }
  .studio-story-sticky { top:72px; display:block; height:48svh; z-index:6; }
  .story-visual { width:100%; border-right:0; border-bottom:1px solid var(--line); }
  .story-rail { display:none; }
  .scene-label { top:14px; left:16px; }
  .scene-label strong { font-size:.85rem; }
  .scene-legend { left:16px; bottom:124px; font-size:.62rem; }
  .scene-legend small { display:none; }
  .story-chapters { z-index:0; width:100%; margin:0; padding-inline:22px; }
  .story-beat { min-height:65svh; justify-content:flex-start; padding:32px 0 52px; }
  .story-beat h2 { max-width:22ch; font-size:1.9rem; }
  .story-beat > p:not(.chapter-number) { font-size:.88rem; }
  .installation-photos { max-width:420px; margin-top:18px; }
  .installation-photos img { max-height:180px; }
  .experience-controls { left:10px; right:10px; bottom:10px; max-width:none; justify-content:center; padding:5px; }
  .system-switch { flex-basis:auto; border-top:0; border-left:1px solid var(--line); }
  .experience-controls button { font-size:.64rem; padding-inline:5px; }
  .control-kicker { display:none; }
  .control-value { font-size:.7rem; }
  .motion-toggle { gap:5px; }
  .switch-track { display:none; }
  .motion-toggle[aria-pressed='false'] .control-value { text-decoration:line-through; }
  .service-showcase,.service-support-rail { grid-template-columns:1fr; }
  .service-support + .service-support { border-left:0; border-top:1px solid var(--line); }
  .work-grid,.gallery { gap:12px; }
  .work-card,.gallery-button { border-radius:12px; }
  .split { grid-template-columns:1fr; gap:32px; }
  .about-portrait-frame { width:240px; }
  .footer-main { grid-template-columns:1fr; align-items:start; }
  .footer-links { justify-content:flex-start; }
}
html[data-motion-mode='reduced'] .studio-story,html[data-motion-mode='static'] .studio-story { display:block; min-height:auto; }
html[data-motion-mode='reduced'] .studio-story-sticky,html[data-motion-mode='static'] .studio-story-sticky { position:relative; top:auto; display:block; height:min(75svh,700px); }
html[data-motion-mode='reduced'] .story-visual,html[data-motion-mode='static'] .story-visual { width:100%; border-right:0; }
html[data-motion-mode='reduced'] .story-canvas,html[data-motion-mode='static'] .story-canvas { display:none; }
html[data-motion-mode='reduced'] .story-rail,html[data-motion-mode='static'] .story-rail { display:none; }
html[data-motion-mode='reduced'] .experience-controls,html[data-motion-mode='static'] .experience-controls { max-width:calc(100% - 40px); }
html[data-motion-mode='reduced'] .story-chapters,html[data-motion-mode='static'] .story-chapters { display:grid; width:min(1180px,calc(100% - 40px)); grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-inline:auto; padding-block:54px 72px; }
html[data-motion-mode='reduced'] .story-beat,html[data-motion-mode='static'] .story-beat { min-height:auto; padding:0; justify-content:flex-start; }
@media (max-width:700px) {
  html[data-motion-mode='reduced'] .studio-story-sticky,html[data-motion-mode='static'] .studio-story-sticky { height:54svh; }
  html[data-motion-mode='reduced'] .story-chapters,html[data-motion-mode='static'] .story-chapters { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
}