@font-face{font-family:Manrope;src:url("assets/fonts/Manrope-Variable.woff2") format("woff2");font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:Inter;src:url("assets/fonts/Inter-Variable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--ink:#13282e;--ivory:#f5f4ef;--teal:#83c8c7;--muted:#b3c5c7;--line:rgba(131,200,199,.19)}
*{box-sizing:border-box}
html{min-width:320px;background:var(--ink)}
body{margin:0;color:var(--ivory);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--teal);color:var(--ink)}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--teal);outline-offset:7px}
.skip-link{position:absolute;top:12px;left:24px;z-index:5;padding:12px 20px;background:var(--ivory);color:var(--ink);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.page{max-width:1600px;margin:auto;min-height:100svh;padding:0 clamp(24px,5.5vw,88px);display:flex;flex-direction:column}
.header{min-height:144px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line)}
.brand{display:block;width:220px;flex-shrink:0}
.brand img{display:block;width:calc(100% + 29px);height:auto;max-width:none;margin:-9px -14px -3px}
.brand span{display:block;color:var(--muted);font-size:10px;letter-spacing:1.55px;text-align:center;white-space:nowrap}
.header-note{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.hero{display:grid;grid-template-columns:1.08fr 1fr;align-items:center;gap:clamp(16px,2vw,36px);flex:1;padding:70px 0 78px;min-height:650px}
.intro{position:relative;z-index:1}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 29px;color:var(--teal);font-size:10px;font-weight:500;letter-spacing:2px;text-transform:uppercase;line-height:1.6}
.diamond{display:inline-block;width:7px;height:7px;transform:rotate(45deg);background:var(--teal);flex-shrink:0}
h1{margin:0 0 28px;font-family:Manrope,Arial,sans-serif;font-size:clamp(42px,4.4vw,70px);font-weight:600;letter-spacing:-2.8px;line-height:1.12}
h1 span{color:var(--teal)}
.description{max-width:465px;margin:0;color:var(--muted);font-size:16px;line-height:1.85;text-wrap:pretty}
.contact{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:34px}
.contact-button{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:52px;padding:16px 23px;border:1px solid var(--teal);background:var(--teal);color:var(--ink);font-size:13px;font-weight:600;transition:background .18s ease,transform .18s ease}
.contact-button:hover{background:var(--ivory);transform:translateY(-2px)}
.contact-button svg{flex-shrink:0}
.email{display:inline-flex;align-items:center;min-height:44px;color:var(--ivory);font-size:13px;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:6px;transition:text-decoration-color .18s ease}
.email:hover{text-decoration-color:var(--teal)}
.contact-note{margin:18px 0 0;color:var(--muted);font-size:11px;line-height:1.7}
.illustration{position:relative;width:100%;max-width:520px;justify-self:end}
.city{display:block;width:100%;height:auto;overflow:visible}
.signal-line{animation:signal-arrive 1.8s ease-out both;stroke-dasharray:700;stroke-dashoffset:0}
/* A short pulse runs the line every 6s once it has drawn in; each node flashes as the pulse reaches it. */
.signal-pulse{stroke-dasharray:6 1000;stroke-dashoffset:6;animation:signal-pulse 6s linear 1.8s infinite}
.node{animation:node-flash 6s ease-out infinite}
.node:nth-child(1){animation-delay:2.5s}
.node:nth-child(2){animation-delay:3.65s}
.node:nth-child(3){animation-delay:4.9s}
.visual-caption{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:-28px;color:var(--muted);font-size:10px;letter-spacing:.8px}
.visual-caption span{display:block;width:24px;height:1px;background:var(--line)}
.footer{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:88px;border-top:1px solid var(--line);font-size:10px;line-height:1.7;color:var(--muted)}
.footer p{margin:0}
.footer-location{display:flex;align-items:center;gap:11px}
.footer-location .diamond{width:4px;height:4px}
.footer a{display:inline-flex;align-items:center;gap:16px;min-height:44px;color:var(--ivory)}
.footer a:hover{color:var(--teal)}
@keyframes signal-arrive{from{stroke-dashoffset:700;opacity:.1}to{stroke-dashoffset:0;opacity:1}}
@keyframes signal-pulse{60%,to{stroke-dashoffset:-100}}
@keyframes node-flash{from{fill:var(--ivory)}15%,to{fill:var(--teal)}}
@media(max-width:1100px){h1{font-size:clamp(40px,4.9vw,54px);letter-spacing:-2px}.hero{min-height:610px}.contact{gap:14px}.email{font-size:12px}.brand{width:200px}}
@media(max-width:780px){.header{min-height:112px}.header-note{max-width:120px;text-align:right;line-height:1.7;font-size:9px}.brand{width:180px}.brand span{font-size:8px;letter-spacing:1.3px}.hero{grid-template-columns:1fr;gap:30px;padding:54px 0 44px;min-height:0}.intro{max-width:560px}.eyebrow{font-size:9px;letter-spacing:1.7px;margin-bottom:25px}h1{font-size:clamp(36px,7.4vw,56px);letter-spacing:-1.9px}.description{max-width:490px;font-size:15px;line-height:1.8}.illustration{max-width:440px;justify-self:center;margin-top:-3px}.visual-caption{margin-top:-20px;font-size:9px}.footer{flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:22px 0;font-size:9px}.footer-location{order:3;width:100%}.footer a{min-height:32px}.contact-note{font-size:10px}}
@media(max-width:380px){.page{padding:0 20px}.header-note{font-size:8px;max-width:88px}.brand{width:160px}.brand span{font-size:7px}.contact{gap:10px}.contact-button{padding:14px 18px;gap:18px}.email{font-size:11px}h1{font-size:34px;letter-spacing:-1.6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}