:root { --ink:#101511; --surface:#171d18; --line:#344039; --soft:#a8b0aa; --paper:#eef0ea; --accent:#b8d951; --accent-ink:#162011; --radius:14px; --font-sans:'Manrope','Segoe UI',Arial,sans-serif; --font-mono:'JetBrains Mono','Cascadia Mono',Consolas,monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:clip; background:var(--ink); color:var(--paper); font-family:var(--font-sans); font-synthesis:none; font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
::selection { background:var(--accent); color:var(--accent-ink); }
html { scrollbar-color:var(--line) transparent; }
::-webkit-scrollbar { width:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:99px; border:3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.skip-link { position:absolute; top:-4rem; left:1rem; z-index:210; padding:.75rem 1rem; background:var(--accent); color:var(--ink); font-weight:800; border-radius:8px; } .skip-link:focus { top:1rem; }
.section-shell { width:min(1360px, calc(100% - 64px)); margin-inline:auto; }
.site-header { position:sticky; top:0; z-index:100; width:100%; height:76px; box-sizing:border-box; padding-inline:max(32px, calc((100% - 1360px) / 2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(238,240,234,.16); background:rgba(16,21,17,.5); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); transition:background .35s ease,border-color .35s ease,box-shadow .35s ease; }
.site-header.scrolled { background:rgba(16,21,17,.78); border-color:rgba(238,240,234,.24); box-shadow:0 18px 40px -24px rgba(0,0,0,.6); }
.brand { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.06em; line-height:1.2; }
.brand-mark { width:29px; height:29px; display:grid; place-items:center; border:1px solid var(--accent); color:var(--accent); border-radius:50%; font:500 16px/1 var(--font-mono); transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s ease,color .3s ease; }
.brand:hover .brand-mark { transform:rotate(180deg); background:var(--accent); color:var(--accent-ink); }
nav { display:flex; align-items:center; gap:32px; font-size:13px; color:var(--soft); } nav a,.nav-link,.text-link { transition:color .25s ease; } nav a:hover,.nav-link:hover,.text-link:hover { color:var(--accent); }
nav a { position:relative; padding:4px 0; } nav a::after { content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--accent); transition:right .3s cubic-bezier(.16,1,.3,1); } nav a:hover::after { right:0; }
.nav-link { font:14px var(--font-mono); color:var(--paper); }.nav-link span { display:inline-block; color:var(--accent); font-size:16px; margin-left:5px; transition:transform .3s cubic-bezier(.16,1,.3,1); }.nav-link:hover span { transform:translate(3px,-3px); }
.hero { position:relative; isolation:isolate; min-height:calc(100dvh - 76px); overflow:hidden; background:var(--ink); }.hero-content { position:relative; z-index:2; min-height:calc(100dvh - 76px); display:flex; align-items:center; padding:clamp(54px,7vw,96px) 0 66px; }.hero-copy { max-width:690px; }.hero-network { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; }.hero-network::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--ink) 0%,rgba(16,21,17,.98) 28%,rgba(16,21,17,.62) 49%,rgba(16,21,17,.08) 74%,rgba(16,21,17,.2) 100%); }.city-scene { display:block; width:100%; height:100%; min-width:1260px; transform-origin:72% 58%; backface-visibility:hidden; }.network-hairlines { stroke-width:1; opacity:.8; }.network-arteries { stroke-width:1.45; }.network-arteries .draw { stroke-dasharray:1; stroke-dashoffset:1; opacity:0; }.city-ready .network-arteries .draw { animation:draw-city 1.35s cubic-bezier(.23,1,.32,1) forwards; }.city-ready .d1 { animation-delay:.05s; }.city-ready .d2 { animation-delay:.13s; }.city-ready .d3 { animation-delay:.25s; }.city-ready .d4 { animation-delay:.36s; }.city-ready .d5 { animation-delay:.48s; }.city-ready .d6 { animation-delay:.59s; }.city-ready .d7 { animation-delay:.69s; }.city-ready .d8 { animation-delay:.78s; }.city-ready .d9 { animation-delay:.88s; }.network-nodes { opacity:0; }.city-ready .network-nodes { animation:node-in .42s .72s ease-out forwards; }.city-label { fill:#d4f36a; font:600 11px var(--font-mono); letter-spacing:1.8px; }.city-label--muted { fill:#a8b0aa; font-size:8px; letter-spacing:1px; } @keyframes draw-city { 0% { stroke-dashoffset:1; opacity:0; } 12% { opacity:1; } 100% { stroke-dashoffset:0; opacity:1; } } @keyframes node-in { from { opacity:0; } to { opacity:1; } }
.eyebrow { color:var(--accent); margin:0 0 20px; font:600 11px/1.3 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.065em; }
h1 { margin-bottom:26px; font-size:clamp(3.75rem,7.7vw,7.7rem); line-height:.91; font-weight:800; } h1 em { color:var(--accent); font-style:italic; }
.hero-summary { max-width:435px; color:var(--soft); font-size:17px; line-height:1.6; }
.hero-actions { display:flex; align-items:center; gap:27px; margin-top:34px; }.button { position:relative; overflow:hidden; min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:23px; padding:0 22px; border:1px solid transparent; border-radius:8px; font:600 13px var(--font-sans); cursor:pointer; transition:transform .3s cubic-bezier(.16,1,.3,1),background .25s ease,box-shadow .35s ease; white-space:nowrap; }.button:hover { transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(184,217,81,.45); }.button:active { transform:translateY(1px) scale(.98); }.button-primary { background:var(--accent); color:var(--accent-ink); }.button-primary:hover { background:#c8e961; }.button::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.5) 42%,transparent 64%); transform:translateX(-120%); transition:transform .7s cubic-bezier(.16,1,.3,1); }.button:hover::before { transform:translateX(120%); }.text-link { color:var(--paper); font-size:13px; text-decoration:underline; text-decoration-color:rgba(238,240,234,.35); text-underline-offset:5px; transition:text-decoration-color .25s ease; }.text-link:hover { text-decoration-color:var(--accent); }
@supports (animation-timeline:view()) { .hero-network .city-scene { animation:city-orbit linear both; animation-timeline:view(block); animation-range:cover 0% exit 100%; } } @keyframes city-orbit { from { transform:perspective(1500px) translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1); } to { transform:perspective(1500px) translate3d(-2.5%,2%,0) rotateY(-4deg) rotateZ(-.55deg) scale(1.065); } }
.hero-network::before { content:""; position:absolute; z-index:1; inset:0 auto 0 -18%; width:18%; opacity:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(212,243,106,.8),transparent); transform:skewX(-12deg) translateX(-100%); }.hero-network .city-background,.hero-network .city-orbit { position:absolute; inset:-5%; display:block; width:110%; height:110%; min-width:0; max-width:none; object-fit:cover; object-position:center; transform-origin:70% 52%; backface-visibility:hidden; }.hero-network .city-background { opacity:0; clip-path:inset(0 100% 0 0); transform:scale(1.055); }.hero-network.is-ready .city-background { animation:city-assemble 1.8s cubic-bezier(.23,1,.32,1) forwards,drone-orbit 24s 1.8s cubic-bezier(.77,0,.175,1) infinite alternate; }.hero-network.is-ready::before { animation:network-scan 1.25s .12s cubic-bezier(.23,1,.32,1) both; }.hero-network .city-orbit { z-index:0; opacity:0; transform:scale(1.04); } @keyframes city-assemble { from { opacity:0; clip-path:inset(0 100% 0 0); transform:scale(1.055); } 70% { opacity:1; } to { opacity:1; clip-path:inset(0 0 0 0); transform:scale(1); } } @keyframes network-scan { 0% { opacity:0; transform:skewX(-12deg) translateX(-100%); } 18% { opacity:.8; } 100% { opacity:0; transform:skewX(-12deg) translateX(780%); } } @keyframes drone-orbit { from { transform:scale(1) translate3d(0,0,0) rotate(.01deg); } to { transform:scale(1.075) translate3d(-2.2%,1.4%,0) rotate(.42deg); } } @supports (animation-timeline:view()) { .hero-network .city-scene { animation:none; }.hero-network.is-ready .city-background { animation:city-assemble 1.8s cubic-bezier(.23,1,.32,1) forwards,drone-orbit 24s 1.8s cubic-bezier(.77,0,.175,1) infinite alternate; }.hero-network .city-orbit { animation:city-scroll-switch linear both; animation-timeline:view(block); animation-range:cover 0% exit 100%; } } @keyframes city-scroll-switch { from { opacity:0; transform:scale(1.04) translate3d(0,0,0); } to { opacity:.78; transform:scale(1.1) translate3d(-2.8%,1.8%,0) rotate(.5deg); } }
.trust { min-height:80px; display:flex; align-items:center; gap:23px; border-top:1px solid rgba(238,240,234,.16); border-bottom:1px solid rgba(238,240,234,.16); overflow:hidden; }.trust p { flex:0 0 auto; margin:0; color:#d6dcd5; font:600 11px/1.3 var(--font-mono); letter-spacing:.07em; }.trust span { width:5px; height:5px; background:var(--accent); transform:rotate(45deg); }
.statement { padding:148px 0; }.statement h2 { max-width:840px; margin-bottom:20px; font-size:clamp(2.8rem,5vw,5.5rem); line-height:.98; }.statement-copy { max-width:495px; color:#c0c8c1; font-size:17px; line-height:1.65; }.project-grid { display:grid; grid-template-columns:1.55fr .82fr .82fr; grid-template-rows:auto; gap:16px; margin-top:60px; }.project { position:relative; min-height:340px; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(238,240,234,.08); transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1),border-color .5s ease; }.project:hover { transform:translateY(-6px); box-shadow:0 30px 60px -28px rgba(0,0,0,.55); border-color:rgba(184,217,81,.35); }.project-feature { grid-row:span 2; min-height:650px; background:#283128; }.project-feature img { width:100%; height:100%; object-fit:cover; filter:saturate(.94); transform:scale(1.001); transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s ease; }.project-feature:hover img { transform:scale(1.06); filter:saturate(1.08); }.project-caption { position:absolute; left:26px; bottom:25px; right:26px; }.project-caption h3 { font-size:26px; letter-spacing:-.035em; margin-bottom:7px; }.project-caption p,.project p { color:#e0e5df; font-size:15px; line-height:1.55; margin-bottom:0; }.project-type { padding:25px; background:#c4d6a5; color:#142015; display:flex; flex-direction:column; justify-content:flex-end; }.project-type h3 { max-width:230px; font-size:29px; letter-spacing:-.035em; line-height:1.02; margin-bottom:15px; }.project-type p { color:#293b29; }.index { position:absolute; top:25px; right:25px; font:600 12px var(--font-mono); font-variant-numeric:tabular-nums; }.project-detail { padding:25px; background:linear-gradient(145deg,#304636,#1d2b22); display:flex; flex-direction:column; justify-content:flex-end; }.project-detail h3 { color:var(--accent); font-size:26px; letter-spacing:-.035em; margin-bottom:12px; }.signal { position:absolute; top:30px; left:30px; width:78px; height:78px; border:1px solid rgba(184,217,81,.65); border-radius:50%; box-shadow:0 0 0 14px rgba(184,217,81,.05),0 0 0 30px rgba(184,217,81,.025); transition:transform .6s cubic-bezier(.16,1,.3,1); }.project:hover .signal { transform:scale(1.12) rotate(8deg); }
.services { display:grid; grid-template-columns:.9fr 1.1fr; gap:10vw; padding:32px 0 150px; }.services-intro h2 { font-size:clamp(2.8rem,4.5vw,4.7rem); line-height:.98; }.service-list { border-top:1px solid var(--line); }.service { position:relative; display:grid; grid-template-columns:70px 1fr; gap:20px; padding:25px 22px 29px 0; border-bottom:1px solid var(--line); transition:transform .4s cubic-bezier(.16,1,.3,1); }.service::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(184,217,81,.08),transparent); opacity:0; transition:opacity .4s ease; }.service:hover { transform:translateX(14px); }.service:hover::before { opacity:1; }.service span { position:relative; color:var(--accent); font:11px var(--font-mono); font-variant-numeric:tabular-nums; }.service h3 { position:relative; font-size:23px; letter-spacing:-.045em; margin:0 0 7px; }.service p { position:relative; max-width:410px; margin-bottom:0; color:var(--soft); font-size:13px; line-height:1.6; }
.approach { display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:center; padding-bottom:150px; }.approach-image { min-height:660px; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(238,240,234,.1); }.approach-image img { height:660px; width:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.16,1,.3,1); }.approach-image:hover img { transform:scale(1.045); }.approach h2 { font-size:clamp(2.8rem,4.6vw,4.9rem); line-height:.98; margin-bottom:42px; }.approach ol { padding:0; margin:0; list-style:none; }.approach li { display:grid; gap:6px; padding:19px 0; border-top:1px solid var(--line); transition:border-color .3s ease; }.approach li:last-child { border-bottom:1px solid var(--line); }.approach li:hover { border-color:var(--accent); }.approach strong { font-size:15px; }.approach li span { color:var(--soft); font-size:13px; }
.contact { padding-bottom:100px; }.contact-panel { position:relative; overflow:hidden; padding:clamp(32px,7vw,90px); border-radius:var(--radius); background:#d5e4bb; color:#152014; box-shadow:0 50px 100px -40px rgba(0,0,0,.6); }.contact-panel::after { content:""; position:absolute; top:-40%; right:-15%; width:55%; aspect-ratio:1; background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%); pointer-events:none; }.contact-panel .eyebrow { color:#3b552d; }.contact h2 { position:relative; max-width:740px; font-size:clamp(2.7rem,5vw,5.6rem); line-height:.96; margin-bottom:55px; }.contact label { position:relative; display:block; margin-bottom:10px; font-size:12px; font-weight:700; }.form-row { position:relative; display:grid; grid-template-columns:1fr auto; gap:12px; }.form-row input { min-width:0; height:50px; padding:0 16px; border:1px solid #809273; border-radius:8px; background:rgba(255,255,255,.35); color:#152014; font:14px var(--font-sans); outline:none; transition:border-color .25s ease,box-shadow .25s ease,background .25s ease; }.form-row input::placeholder { color:#53634d; }.form-row input:focus { border-color:#274921; background:rgba(255,255,255,.55); box-shadow:0 0 0 3px rgba(39,73,33,.15); }.form-message { min-height:20px; margin:10px 0 0; color:#284322; font-size:12px; position:relative; }.form-message.error { color:#823b25; }
.site-footer { display:grid; grid-template-columns:1.4fr 1.6fr 1fr; gap:30px; padding:0 0 38px; color:#c0c8c1; font-size:13px; }.site-footer p { margin:0; line-height:1.6; }.site-footer > :last-child { grid-column:1/-1; padding-top:35px; border-top:1px solid var(--line); }.site-footer a:not(.brand) { color:var(--paper); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.reveal { animation:rise .38s cubic-bezier(.16,1,.3,1) both; }.delayed { animation-delay:.06s; }.reveal-on-scroll { opacity:0; transform:translateY(24px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),transition-delay .01s; }.reveal-on-scroll.in-view { opacity:1; transform:none; }.project-grid .reveal-on-scroll:nth-child(2).in-view { transition-delay:.08s; }.project-grid .reveal-on-scroll:nth-child(3).in-view { transition-delay:.16s; }.service-list .service:nth-child(2).in-view { transition-delay:.06s; }.service-list .service:nth-child(3).in-view { transition-delay:.12s; }.service-list .service:nth-child(4).in-view { transition-delay:.18s; }@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@media (max-width:820px) { .section-shell { width:min(100% - 40px,1360px); }.site-header { padding-inline:20px; height:68px; }.site-header nav { display:none; }.nav-link { font-size:10px; }.hero,.hero-content { min-height:calc(100dvh - 68px); }.hero-content { padding:64px 0 56px; }.city-scene { min-width:920px; transform:translateX(-18%); }.hero-network::after { background:linear-gradient(90deg,var(--ink) 0%,rgba(16,21,17,.88) 46%,rgba(16,21,17,.18) 100%); }.services { gap:42px; padding-bottom:100px; }.approach { gap:40px; padding-bottom:100px; }.approach-image,.approach-image img { min-height:410px; height:410px; }.site-footer { grid-template-columns:1fr 1fr; }.site-footer > :last-child { grid-column:1/-1; } }
@media (max-width:560px) { .section-shell { width:calc(100% - 32px); }.site-header { padding-inline:16px; }.brand { font-size:10px; }.brand-mark { width:26px; height:26px; }.nav-link { font-size:0; }.nav-link span { margin:0; }.hero-content { align-items:center; padding:48px 0; }.city-scene { min-width:800px; transform:translateX(-28%); }.hero-copy { max-width:100%; }.hero h1 { font-size:clamp(3.15rem,16vw,4.65rem); line-height:.94; }.hero-summary { font-size:15px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }.trust { margin-inline:0; width:100%; padding:0 16px; gap:16px; }.trust p { font-size:9px; }.trust p:nth-of-type(3),.trust span:nth-of-type(2) { display:none; }.services { padding-bottom:84px; }.service { grid-template-columns:42px 1fr; }.approach { padding-bottom:84px; }.approach-image,.approach-image img { min-height:360px; height:360px; }.contact { width:100%; padding-bottom:64px; }.contact-panel { border-radius:0; }.form-row { grid-template-columns:1fr; }.form-row .button { width:100%; }.site-footer { grid-template-columns:1fr; gap:20px; }.site-footer > :last-child { grid-column:auto; } }
@media (min-width:561px) and (max-width:820px) { .section-shell { width:min(calc(100% - 40px),1360px); } }
@media (max-width:820px) { .project-grid,.services,.approach { grid-template-columns:1fr; }.project-feature { min-height:510px; }.project-type,.project-detail { min-height:280px; } }
@media (max-width:560px) { .project-grid { margin-top:40px; }.project-feature { min-height:400px; }.project-caption { left:20px; right:20px; bottom:20px; } }
/* The hero is a pinned camera scene: scroll changes the point of view rather than pushing the city away. */
.hero { min-height:185dvh; overflow:visible; }.hero-stage { position:sticky; top:0; height:100dvh; overflow:hidden; background:#101511; }.hero-content { min-height:100dvh; }.hero-network::after { z-index:4; background:linear-gradient(90deg,rgba(16,21,17,.98) 0%,rgba(16,21,17,.94) 32%,rgba(16,21,17,.7) 52%,rgba(16,21,17,.16) 78%,rgba(16,21,17,.28) 100%); }.hero-network .city-background,.hero-network .city-build,.hero-network .city-orbit { inset:-3%; width:106%; height:106%; object-position:center; image-rendering:auto; filter:brightness(.66) saturate(.52) contrast(1.13); }.hero-network .city-background { z-index:0; opacity:0; clip-path:none; transform:translate3d(-1.2%,.6%,0) rotate(-.18deg) scale(1.025); }.hero-network .city-build { position:absolute; z-index:2; display:block; max-width:none; opacity:0; transform:translate3d(-1.2%,.6%,0) rotate(-.18deg) scale(1.025); }.hero-network .city-orbit { z-index:1; opacity:0; transform:translate3d(-1.2%,.6%,0) rotate(-.18deg) scale(1.025); }.hero-network.is-ready .city-background { animation:city-field 1.5s .95s cubic-bezier(.23,1,.32,1) forwards,drone-orbit 26s 2.1s linear infinite alternate; }.hero-network.is-ready .city-build-west { animation:build-west 1.05s .08s cubic-bezier(.23,1,.32,1) forwards,drone-orbit 26s 2.1s linear infinite alternate; }.hero-network.is-ready .city-build-east { animation:build-east 1.05s .22s cubic-bezier(.23,1,.32,1) forwards,drone-orbit 26s 2.1s linear infinite alternate; }.hero-network.is-ready .city-build-north { animation:build-north 1.05s .36s cubic-bezier(.23,1,.32,1) forwards,drone-orbit 26s 2.1s linear infinite alternate; }.hero-network.is-ready .city-build-south { animation:build-south 1.05s .5s cubic-bezier(.23,1,.32,1) forwards,drone-orbit 26s 2.1s linear infinite alternate; } @keyframes city-field { from { opacity:0; } to { opacity:.48; } } @keyframes build-west { from { opacity:0; clip-path:inset(0 100% 0 0); } to { opacity:.26; clip-path:inset(0 62% 0 0); } } @keyframes build-east { from { opacity:0; clip-path:inset(0 0 0 100%); } to { opacity:.26; clip-path:inset(0 0 0 62%); } } @keyframes build-north { from { opacity:0; clip-path:inset(100% 23% 0 23%); } to { opacity:.2; clip-path:inset(0 23% 52% 23%); } } @keyframes build-south { from { opacity:0; clip-path:inset(0 23% 100% 23%); } to { opacity:.2; clip-path:inset(52% 23% 0 23%); } } @keyframes drone-orbit { from { transform:translate3d(-1.2%,.6%,0) rotate(-.18deg) scale(1.025); } to { transform:translate3d(1.2%,-.8%,0) rotate(.18deg) scale(1.025); } } @supports (animation-timeline:view()) { .hero-network .city-orbit { animation:city-scroll-switch linear both; animation-timeline:view(block); animation-range:entry 0% exit 100%; } } @keyframes city-scroll-switch { from { opacity:0; transform:translate3d(-1.2%,.6%,0) rotate(-.18deg) scale(1.025); } to { opacity:.28; transform:translate3d(1.2%,-.8%,0) rotate(.18deg) scale(1.025); } } @media (max-width:820px) { .hero { min-height:155dvh; }.hero-stage,.hero-content { min-height:100dvh; }.hero-stage { height:100dvh; }.hero-network .city-background,.hero-network .city-build,.hero-network .city-orbit { inset:-6%; width:112%; height:112%; object-position:62% center; } } @media (max-width:560px) { .hero { min-height:145dvh; }.hero-network::after { background:linear-gradient(90deg,rgba(16,21,17,.97),rgba(16,21,17,.75) 63%,rgba(16,21,17,.36)); } }
@supports (animation-timeline:view()) { .hero-network .city-orbit { animation-range:entry 0% exit 100%; } }
.hero-network svg[hidden] { display:none; }
/* One city lives behind the entire page, not inside a single hero panel. */
.site-city { position:fixed; z-index:0; inset:0; overflow:hidden; pointer-events:none; background:#101511; }.site-city::after { content:""; position:absolute; z-index:5; inset:0; background:rgba(16,21,17,.72); }.site-city-frame { position:absolute; inset:-4%; width:108%; height:108%; max-width:none; object-fit:cover; object-position:center; opacity:0; filter:brightness(.78) saturate(.46) contrast(1.14); transform:translate3d(-1.4%,.8%,0) rotate(-.18deg); will-change:transform,opacity; }.site-city-frame-build { z-index:1; }.site-city-frame-full { z-index:2; }.site-city-frame-orbit { z-index:3; }.site-city.city-ready .site-city-frame-build { animation:network-forms 1.55s cubic-bezier(.23,1,.32,1) forwards,city-drift 28s 1.6s linear infinite alternate; }.site-city.city-ready .site-city-frame-full { animation:network-resolves 1.75s .72s cubic-bezier(.23,1,.32,1) forwards,city-drift 28s 1.6s linear infinite alternate; } @keyframes network-forms { from { opacity:0; transform:translate3d(-1.4%,.8%,0) rotate(-.18deg); } to { opacity:.56; transform:translate3d(-1.4%,.8%,0) rotate(-.18deg); } } @keyframes network-resolves { from { opacity:0; clip-path:inset(0 100% 0 0); transform:translate3d(-1.4%,.8%,0) rotate(-.18deg); } 48% { opacity:.36; } to { opacity:.56; clip-path:inset(0 0 0 0); transform:translate3d(-1.4%,.8%,0) rotate(-.18deg); } } @keyframes city-drift { from { transform:translate3d(-1.4%,.8%,0) rotate(-.18deg); } to { transform:translate3d(1.4%,-.8%,0) rotate(.18deg); } } @supports (animation-timeline:scroll()) { .site-city-frame-orbit { animation:page-orbit linear both; animation-timeline:scroll(root); animation-range:0% 100%; } .site-city-frame-full { animation:page-base-orbit linear both; animation-timeline:scroll(root); animation-range:0% 100%; } } @keyframes page-orbit { 0% { opacity:0; transform:translate3d(-2%,1%,0) rotate(-.28deg); } 45% { opacity:.12; transform:translate3d(0,0,0) rotate(0deg); } 100% { opacity:.34; transform:translate3d(2%,-1%,0) rotate(.28deg); } } @keyframes page-base-orbit { from { opacity:.56; transform:translate3d(-1.4%,.8%,0) rotate(-.18deg); } to { opacity:.34; transform:translate3d(1.4%,-.8%,0) rotate(.18deg); } } .site-header,main,.site-footer { position:relative; }.site-header { z-index:100; }.site-footer,main { z-index:1; }.hero { min-height:calc(100dvh - 76px); overflow:hidden; }.hero-stage { position:relative; top:auto; height:auto; min-height:calc(100dvh - 76px); background:transparent; }.hero-network { display:none; }.hero-content { min-height:calc(100dvh - 76px); }.statement,.services,.approach,.contact,.trust { position:relative; background:transparent; } @media (max-width:820px) { .site-city-frame { inset:-12%; width:124%; height:124%; object-position:66% center; }.hero,.hero-stage,.hero-content { min-height:calc(100dvh - 68px); } } @media (prefers-reduced-motion:reduce) { .site-city-frame-build { opacity:.32; animation:none; }.site-city-frame-full { opacity:.46; animation:none; }.site-city-frame-orbit { display:none; } }
.hero-stage { top:76px; height:calc(100dvh - 76px); }.hero-content { min-height:calc(100dvh - 76px); } @media (max-width:820px) { .hero-stage { top:68px; height:calc(100dvh - 68px); }.hero-content { min-height:calc(100dvh - 68px); } }
.hero,.hero-stage { background:transparent; }.hero-stage { position:relative; top:auto; height:auto; min-height:calc(100dvh - 76px); } @media (max-width:820px) { .hero-stage { min-height:calc(100dvh - 68px); } }
@media (prefers-reduced-motion:reduce) { .hero { min-height:calc(100dvh - 76px); }.hero-stage { position:relative; height:auto; min-height:calc(100dvh - 76px); }.hero-network .city-build,.hero-network .city-orbit { display:none; }.hero-network .city-background,.hero-network.is-ready .city-background { opacity:.48; animation:none; transform:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.reveal { animation:none; }.reveal-on-scroll { opacity:1; transform:none; transition:none; }.network-arteries .draw,.network-nodes { opacity:1; stroke-dashoffset:0; }.hero-network .city-background,.hero-network.is-ready .city-background { opacity:1; clip-path:inset(0); animation:none; transform:none; }.hero-network .city-orbit { display:none; animation:none; }.hero-network::before { display:none; }.button::before { display:none; }.button:hover,.project:hover,.approach-image:hover img,.project-feature:hover img { transform:none; } }

/* Three-scene city film: build once, then a seamless right/left camera orbit. */
.site-city { background:#020502; }
.site-city::after { z-index:2; background:rgba(10,15,11,.68); transition:background .9s cubic-bezier(.23,1,.32,1); }
.site-city::before { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; opacity:1; background:linear-gradient(90deg,rgba(5,9,6,.5) 0%,rgba(5,9,6,.14) 46%,rgba(5,9,6,.42) 100%),radial-gradient(ellipse 88% 90% at 63% 50%,transparent 42%,rgba(4,8,5,.42) 100%); transition:opacity .8s cubic-bezier(.23,1,.32,1); }
.site-city-video { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:brightness(.66) saturate(.5) contrast(1.08); }
.site-city-orbit-video { z-index:1; opacity:0; transition:opacity .45s cubic-bezier(.23,1,.32,1); }
.site-city.orbit-active .site-city-orbit-video { opacity:1; }
.site-city.scene-cover .site-city-build-video { opacity:0; }
.site-city.scene-cover .site-city-orbit-video { opacity:1; transition:none; }
.site-city.deep-link { background:#101511 url("assets/toronto-contact-poster.jpg") center / cover no-repeat; }
.site-city.deep-link::before { opacity:1; }
.site-city.deep-link::after { background:rgba(16,21,17,.82); }

.site-header,main,.site-footer { transition:opacity .32s cubic-bezier(.23,1,.32,1),transform .32s cubic-bezier(.23,1,.32,1),visibility 0s linear .32s; }
body.is-intro { overflow:hidden; }
body.is-intro .site-city::before { opacity:0; }
body.is-intro .site-city::after { background:rgba(2,5,2,.06); }
body.is-intro .site-city.scene-cover::after { background:rgba(2,5,2,.82); transition-duration:.52s; }
body.is-intro .site-city-video { filter:brightness(.95) saturate(.72) contrast(1.06); }
body.is-intro .skip-link,body.is-intro .site-header,body.is-intro main,body.is-intro .site-footer { opacity:0; visibility:hidden; pointer-events:none; transform:translateY(16px); }
body.site-ready .site-header { opacity:1; visibility:visible; transform:none; transition-delay:.04s; }
body.site-ready main { opacity:1; visibility:visible; transform:none; transition-delay:.08s; }
body.site-ready .site-footer { opacity:1; visibility:visible; transform:none; transition-delay:.12s; }
body.site-ready .site-city-orbit-video { filter:brightness(.61) saturate(.4) contrast(1.1) blur(1.05px); transform:scale(1.018); }

@media (max-width:820px) { .site-city-video { object-position:60% center; } }
@media (prefers-reduced-motion:reduce) { .site-city-video { display:none; } body.is-intro { overflow:auto; } body.is-intro .site-header,body.is-intro main,body.is-intro .site-footer { opacity:1; visibility:visible; pointer-events:auto; transform:none; } }

/* Content and legal pages */
.contact-form-grid { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.contact-form-grid label { margin:0; color:#273222; }
.contact-form-grid input,.contact-form-grid textarea { display:block; width:100%; min-width:0; margin-top:9px; padding:14px 16px; border:1px solid #809273; border-radius:8px; background:rgba(255,255,255,.35); color:#152014; font:14px var(--font-sans); outline:none; resize:vertical; transition:border-color .25s ease,box-shadow .25s ease,background .25s ease; }
.contact-form-grid input { height:50px; }
.contact-form-grid textarea { min-height:132px; line-height:1.5; }
.contact-form-grid input::placeholder,.contact-form-grid textarea::placeholder { color:#53634d; }
.contact-form-grid input:focus,.contact-form-grid textarea:focus { border-color:#274921; background:rgba(255,255,255,.55); box-shadow:0 0 0 3px rgba(39,73,33,.15); }
.contact-form-grid label span { font-weight:400; opacity:.68; }
.contact-field-full { grid-column:1/-1; }
.contact-consent { position:relative; display:flex !important; align-items:flex-start; gap:10px; max-width:650px; margin:20px 0 0 !important; font-weight:500 !important; line-height:1.45; }
.contact-consent input { width:16px; height:16px; margin:1px 0 0; accent-color:#314b27; }
.contact-consent a { color:inherit; text-underline-offset:3px; }
.contact-submit-row { position:relative; display:flex; align-items:center; gap:18px; margin-top:24px; }
.contact-submit-row p { max-width:330px; margin:0; color:#44563d; font-size:12px; line-height:1.45; }
.footer-links { display:flex; flex-wrap:wrap; gap:14px; }
.legal-page { min-height:100vh; background:var(--ink); color:var(--paper); }
.legal-page .site-header { position:relative; border-bottom:1px solid var(--line); }
.legal-main { width:min(100% - 48px,900px); margin:0 auto; padding:clamp(72px,10vw,140px) 0 80px; }
.legal-main h1 { max-width:760px; margin:12px 0 22px; font-size:clamp(3.1rem,7vw,6.4rem); letter-spacing:-.075em; line-height:.93; }
.legal-lede { max-width:650px; color:#c0c8c1; font-size:17px; line-height:1.6; }
.legal-notice { max-width:760px; margin:42px 0; padding:18px 20px; border:1px solid rgba(184,217,81,.42); background:rgba(184,217,81,.08); color:#e1e9c9; font-size:14px; line-height:1.55; }
.legal-copy { max-width:760px; }
.legal-copy section { padding:28px 0; border-top:1px solid var(--line); }
.legal-copy h2 { margin:0 0 13px; font-size:clamp(1.45rem,3vw,2.15rem); letter-spacing:-.045em; }
.legal-copy p,.legal-copy li { color:#c0c8c1; font-size:15px; line-height:1.7; }
.legal-copy p { margin:0 0 13px; }
.legal-copy ul { margin:0; padding-left:20px; }
.legal-copy a { color:#dceca8; text-decoration-thickness:1px; text-underline-offset:3px; }
.legal-page .site-footer { padding-top:35px; border-top:1px solid var(--line); }
@media (max-width:560px) { .contact-form-grid { grid-template-columns:1fr; gap:14px; }.contact-field-full { grid-column:auto; }.contact-submit-row { align-items:flex-start; flex-direction:column; gap:12px; }.legal-main { width:calc(100% - 32px); padding-top:68px; }.legal-page .site-header { position:relative; }.legal-page .site-footer { padding-top:26px; } }

/* The approach is intentionally typographic: the Toronto world behind it is the only image. */
.approach { grid-template-columns:minmax(0,.88fr) minmax(460px,1.12fr); gap:clamp(54px,11vw,178px); align-items:start; min-height:590px; padding-top:38px; }
.approach-copy { max-width:540px; padding-top:8px; }
.approach h2 { max-width:530px; margin:0; font-size:clamp(3.35rem,5.1vw,6.1rem); line-height:.93; letter-spacing:-.06em; }
.approach-summary { max-width:390px; margin:28px 0 0; color:#c0c8c1; font-size:16px; line-height:1.6; }
.approach-steps { align-self:end; width:100%; max-width:600px; padding:0; margin:0; list-style:none; }
.approach-steps li { display:grid; grid-template-columns:42px 1fr; column-gap:18px; row-gap:7px; padding:25px 0 27px; border-top:1px solid rgba(238,240,234,.22); transition:border-color .3s ease,transform .35s cubic-bezier(.16,1,.3,1); }
.approach-steps li:last-child { border-bottom:1px solid rgba(238,240,234,.22); }
.approach-steps .step-number { grid-row:span 2; color:var(--accent); font:500 11px/1.45 var(--font-mono); font-variant-numeric:tabular-nums; }
.approach-steps li:hover { border-color:var(--accent); transform:translateX(8px); }
.approach-steps strong { font-size:18px; letter-spacing:-.035em; }
.approach-steps li span { color:#c0c8c1; font-size:14px; line-height:1.55; }
@media (max-width:820px) { .approach { grid-template-columns:1fr; gap:42px; min-height:0; padding-top:0; }.approach-copy { padding-top:0; }.approach h2 { max-width:650px; }.approach-steps { max-width:none; }.approach-steps li { grid-template-columns:38px 1fr; } }
@media (max-width:560px) { .approach h2 { font-size:clamp(3rem,13vw,4.4rem); }.approach-summary { margin-top:22px; }.approach-steps li { padding:20px 0 22px; }.approach-steps strong { font-size:16px; } }