@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300;font-display:swap;src:url(fonts/hanken-grotesk-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/hanken-grotesk-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/hanken-grotesk-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-mono-latin-500-normal.woff2) format("woff2")}
:root{
  color-scheme:dark;
  --carbon:#060808;
  --paper:#eef3f2;
  --paper-56:rgba(238,243,242,.56);
  --paper-30:rgba(238,243,242,.32);
  --line:rgba(238,243,242,.18);
  --line-soft:rgba(238,243,242,.09);
  --teal:#22c9b8;
  --teal-hi:#4be3d3;
  --teal-deep:#0f6f66;
  --grot:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gutter:clamp(16px,5vw,72px);
  --nav-h:70px;
  --radius:3px;
  --max:1300px;
}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem)}
html.menu-open{overflow:hidden}
body{margin:0;background:var(--carbon);color:var(--paper);font:400 15.5px/1.55 var(--grot);-webkit-font-smoothing:antialiased;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:70;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:rgba(6,8,8,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--paper);text-decoration:none;font-weight:500;font-size:1.05rem;letter-spacing:-.01em;white-space:nowrap}
.brand .mark{width:18px;height:18px;flex:none}
.nav-links{display:flex;gap:2rem;list-style:none;margin:0;padding:0}
.nav-links a{display:block;padding:.6rem 0;font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-56);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--paper)}
.nav-actions{display:flex;align-items:center;gap:.5rem}

.btn{display:inline-flex;align-items:stretch;gap:3px;text-decoration:none;color:var(--carbon);font:500 .74rem/1 var(--grot);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.btn-text{display:flex;align-items:center;padding:0 1.05rem;height:2.5rem;background:var(--teal);border-radius:var(--radius);transition:background .2s}
.btn-icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;background:var(--teal);border-radius:var(--radius);transition:background .2s,transform .2s}
.btn-icon svg{width:14px;height:14px}
.btn:hover .btn-text,.btn:hover .btn-icon{background:var(--teal-hi)}
.btn.is-ghost{color:var(--paper)}
.btn.is-ghost .btn-text,.btn.is-ghost .btn-icon{background:transparent;border:1px solid var(--line)}
.btn.is-ghost:hover .btn-text,.btn.is-ghost:hover .btn-icon{background:transparent;border-color:var(--paper)}

.nav-burger{display:none;width:2.5rem;height:2.5rem;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:transparent;color:var(--paper);cursor:pointer;align-items:center;justify-content:center}
.nav-burger svg{width:16px;height:16px}
.nav-burger .x{display:none}
.nav-burger.is-open .bars{display:none}
.nav-burger.is-open .x{display:block}

.menu{position:fixed;inset:0;z-index:60;background:var(--carbon);padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 2rem) var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:space-between;gap:2rem;overflow:auto}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.menu ul a{display:inline-flex;align-items:center;gap:.7rem;color:var(--paper);text-decoration:none;font-size:clamp(2.1rem,9vw,3.2rem);font-weight:300;letter-spacing:-.02em;line-height:1.15}
.menu ul a .sq{width:8px;height:8px;background:var(--teal);border-radius:1px}
.menu-foot{display:flex;flex-direction:column;gap:.6rem;font:400 .68rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-56);border-top:1px solid var(--line);padding-top:1.25rem}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media (max-width:480px){
  .nav .btn .btn-text{display:none}
  .brand span{font-size:.98rem}
}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 3rem);padding-bottom:2.25rem;overflow:hidden;isolation:isolate}
.hero canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.hero #schematic{z-index:-3;transition:opacity 1.8s ease}
.hero #city{z-index:-2;opacity:0;transition:opacity 1.8s ease}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.8s ease;background:linear-gradient(180deg,rgba(6,8,8,.62) 0%,rgba(6,8,8,.16) 26%,rgba(6,8,8,.22) 52%,rgba(6,8,8,.94) 100%)}
.hero.is-3d #city,.hero.is-3d .hero-shade{opacity:1}
.hero.is-3d #schematic{opacity:0}
.hero-rule{height:1px;background:var(--line);margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.hero-title{margin:0;font-weight:300;font-size:clamp(2.6rem,8.4vw,7.6rem);line-height:.98;letter-spacing:-.028em;text-wrap:balance}
.hero-title .l1,.hero-title .l2{display:block}
.hero-title .l2{text-align:right;margin-top:.06em}
.hero-meta{display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-top:clamp(1.5rem,3vw,2.5rem);font:400 .66rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-56)}
.hero-meta .disc{display:inline-flex;gap:.9rem;flex-wrap:wrap}
.hero-meta .disc i{font-style:normal;color:var(--paper-30)}

/* ---------- Sections ---------- */
.section{padding-block:clamp(4.5rem,9vw,8.5rem);border-top:1px solid var(--line)}
.tag{display:inline-flex;align-items:center;gap:.5rem;font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.42rem .6rem}
.tag .sq{width:6px;height:6px;background:var(--teal);border-radius:1px;flex:none}
.tag.is-text{border:0;padding:0;color:var(--paper-56)}
.section-title{margin:.9rem 0 0;font-weight:400;font-size:clamp(1.65rem,2.7vw,2.3rem);letter-spacing:-.018em;line-height:1.15;text-wrap:balance}
.section-lede{margin:0;max-width:46ch;color:var(--paper-56);font-size:1rem}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 3rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,3.75rem)}

/* Statement blocks (scroll-lit words) */
.statement{text-align:center}
.statement .tag{margin-bottom:2rem}
.statement h2{margin:0 auto;max-width:26ch;font-weight:400;font-size:clamp(1.6rem,3.3vw,2.7rem);line-height:1.28;letter-spacing:-.016em;text-wrap:balance}
.statement .w{transition:color .4s ease}
.statement .w.dim{color:var(--paper-30)}
.statement .actions{margin-top:2.75rem;display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}

/* Services */
.section-services{position:relative}
.section-services::before{content:"";position:absolute;left:50%;top:40%;width:min(70vw,900px);height:min(50vw,640px);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(15,111,102,.28),transparent 70%);pointer-events:none}
.section-services .wrap{position:relative}
.services-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem) clamp(2rem,5vw,4.5rem)}
.services-grid .connectors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;color:rgba(238,243,242,.42)}
.card{position:relative;z-index:1;background:var(--carbon);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;display:flex;flex-direction:column;gap:1.3rem;min-height:100%}
.card.is-low{margin-top:5rem}
.card-top{display:flex;justify-content:space-between;align-items:center}
.card-top .sqi{width:10px;height:10px;color:var(--teal)}
.card h3{margin:0;font-weight:400;font-size:1.7rem;letter-spacing:-.018em;line-height:1.12}
.card p{margin:0;color:var(--paper-56);font-size:.98rem}
.card .scope{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line-soft);font:400 .62rem/1.8 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-56)}
@media (max-width:1100px){.services-grid{grid-template-columns:repeat(2,1fr)}.card.is-low{margin-top:3rem}}
@media (max-width:640px){.services-grid{grid-template-columns:1fr;gap:2.5rem}.card.is-low{margin-top:0}}

/* Sectors */
.sectors{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sector{background:var(--carbon);padding:1.35rem 1.2rem 1.25rem;display:flex;flex-direction:column;gap:2.6rem;min-height:10rem}
.sector .cls{font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-56)}
.sector .name{margin-top:auto;font-size:1.06rem;line-height:1.3;letter-spacing:-.01em;text-wrap:balance}
@media (max-width:1000px){.sectors{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.sectors{grid-template-columns:repeat(2,1fr)}.sector{min-height:8.5rem}}

/* Approach: stage strip */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:0 2rem;border-top:1px solid var(--line);margin-top:clamp(3.5rem,7vw,5.5rem);text-align:left}
.stage{position:relative;padding-top:1.6rem}
.stage::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--teal);border-radius:1px}
.stage .num{font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-56)}
.stage h3{margin:.9rem 0 .55rem;font-weight:400;font-size:1.3rem;letter-spacing:-.012em;line-height:1.2}
.stage p{margin:0;color:var(--paper-56);font-size:.95rem}
.stage .out{margin-top:1.1rem;font:400 .62rem/1.8 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-56)}
@media (max-width:900px){.stages{grid-template-columns:repeat(2,1fr);gap:2.75rem 2rem;border-top:0}.stage{border-top:1px solid var(--line)}}
@media (max-width:520px){.stages{grid-template-columns:1fr}}

/* Insights */
.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.insight{background:var(--carbon);padding:1.6rem;display:flex;flex-direction:column;gap:1.4rem;min-height:15rem}
.insight .tag{align-self:flex-start}
.insight h3{margin:0;font-weight:400;font-size:1.32rem;line-height:1.3;letter-spacing:-.012em;text-wrap:balance;max-width:24ch}
.insight .soon{margin-top:auto;display:inline-flex;align-items:center;gap:.5rem;font:400 .62rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-56)}
.insight .soon .sq{width:6px;height:6px;border:1px solid var(--teal);border-radius:1px}
@media (max-width:820px){.insights{grid-template-columns:1fr}.insight{min-height:0}}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem 5rem;align-items:start}
.contact-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.crow{display:grid;grid-template-columns:6.5rem 1fr auto;align-items:center;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
.crow .k{font:500 .64rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-56)}
.crow .v{font-size:1.12rem;letter-spacing:-.01em;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.copy{font:500 .6rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:.55rem .65rem;cursor:pointer;transition:border-color .2s}
.copy:hover{border-color:var(--paper)}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:2.5rem}}
@media (max-width:480px){.crow{grid-template-columns:5.5rem 1fr auto;gap:.75rem}.crow .v{font-size:1rem}}

/* Footer */
.footer{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,5rem) calc(1.5rem + env(safe-area-inset-bottom,0px))}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;gap:3rem;flex-wrap:wrap;margin-bottom:clamp(3rem,6vw,5rem)}
.footer-links{display:flex;flex-direction:column;gap:.3rem;list-style:none;margin:0;padding:0}
.footer-links a{display:inline-flex;align-items:center;gap:.7rem;color:var(--paper);text-decoration:none;font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:300;letter-spacing:-.018em;line-height:1.25}
.footer-links a .sq{width:8px;height:8px;background:var(--teal);border-radius:1px;opacity:0;transform:scale(0);transition:opacity .25s,transform .25s}
.footer-links a:hover .sq{opacity:1;transform:none}
.footer-note{max-width:34ch;color:var(--paper-56);margin:.9rem 0 0;font-size:.95rem}
.footer-bottom{display:flex;justify-content:space-between;gap:.75rem 2rem;flex-wrap:wrap;font:400 .62rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-56);padding-top:1.25rem;border-top:1px solid var(--line-soft)}
.footer-bottom a{color:inherit;text-decoration:none}
.footer-bottom a:hover{color:var(--paper)}

/* BIM viewers */
.section-bim .section-head{margin-bottom:clamp(1.5rem,3vw,2.25rem)}
.viewer{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:radial-gradient(ellipse at 50% 62%,rgba(15,111,102,.18),transparent 62%),var(--carbon);height:clamp(400px,56vw,680px)}
.viewer canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:pan-y;cursor:grab}
.viewer canvas:active{cursor:grabbing}
.viewer.is-unavailable canvas{display:none}
.viewer.is-unavailable::after{content:"The 3D model needs WebGL to display";position:absolute;inset:0;display:grid;place-items:center;font:500 .66rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-56)}
.viewer-hud{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:.8rem}
.viewer-hud > *{pointer-events:auto}
.legend{display:flex;flex-wrap:wrap;gap:.35rem;align-self:flex-start}
.chip{display:inline-flex;align-items:center;gap:.5rem;font:500 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:rgba(6,8,8,.74);border:1px solid var(--line);border-radius:var(--radius);padding:.5rem .6rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s,color .2s}
.chip .sw{width:8px;height:8px;border-radius:1px;background:var(--c,var(--teal));flex:none}
.chip:hover{border-color:var(--paper)}
.chip:not(.is-on){color:var(--paper-56)}
.chip:not(.is-on) .sw{opacity:.25}
.chip.is-alert{border-color:rgba(229,72,77,.6)}
.viewer-tools{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;justify-content:space-between;align-self:stretch}
.viewer-tools .grp{display:flex;flex-wrap:wrap;gap:.35rem}
.range{display:inline-flex;align-items:center;gap:.6rem;font:500 .6rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-56);background:rgba(6,8,8,.74);border:1px solid var(--line);border-radius:var(--radius);padding:.35rem .6rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.range input{accent-color:var(--teal);width:clamp(90px,14vw,150px);margin:0}
.viewer-status{font:500 .6rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-56);background:rgba(6,8,8,.74);border:1px solid var(--line);border-radius:var(--radius);padding:.45rem .6rem;max-width:34ch}
.viewer-status b{font-weight:500;color:var(--paper)}
.viewer-foot{display:flex;justify-content:space-between;gap:.5rem 2rem;flex-wrap:wrap;margin-top:.8rem;font:400 .6rem/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-56)}
.bim-row{display:grid;grid-template-columns:1.25fr 1fr;gap:2.5rem;margin-top:clamp(2rem,4vw,3rem);align-items:center}
.bim-row .viewer{height:clamp(320px,36vw,460px)}
.bim-text{display:flex;flex-direction:column;gap:1.1rem}
.bim-text h3{margin:0;font-weight:400;font-size:clamp(1.35rem,2vw,1.6rem);letter-spacing:-.016em;line-height:1.2;text-wrap:balance}
.bim-text p{margin:0;color:var(--paper-56)}
.bim-list{display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.5rem;margin:.4rem 0 0;padding:0;list-style:none;font:400 .62rem/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-56)}
.bim-list li{display:flex;gap:.55rem;align-items:baseline}
.bim-list li::before{content:"";width:5px;height:5px;background:var(--teal);border-radius:1px;flex:none;position:relative;top:-1px}
@media (max-width:900px){.bim-row{grid-template-columns:1fr;gap:2rem}.bim-row .viewer{height:clamp(300px,70vw,420px)}}
@media (max-width:640px){.viewer{height:clamp(380px,110vw,520px)}.viewer-hud{padding:.6rem}.range input{width:80px}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
a.v{color:inherit;text-decoration:none}
a.v:hover{color:var(--teal-hi)}
noscript .ns{padding:1rem var(--gutter);font:500 .66rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-56)}
[hidden]{display:none!important}
img{max-width:100%}