:root{--bg:#101824;--ink:#f8f4ec;--muted:#c2c9d4;--line:rgba(255,255,255,.2);--yellow:#ffe16b;--cyan:#6ee7ff;--pink:#ff7cb9;--blue:#7396ff;--max:1280px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}#cityCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-2;display:block}.film-grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.site-header{height:82px;position:fixed;z-index:10;left:50%;top:0;transform:translateX(-50%);width:min(var(--max),calc(100% - 48px));display:flex;justify-content:space-between;align-items:center}.brand{display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:-1.2px}.brand strong{font-weight:900}.brand strong span{font-weight:500;color:#c0c7d2}.brand-mark{display:block;width:27px;height:27px;position:relative}.brand-mark i{position:absolute}.brand-mark i:nth-child(1){width:18px;height:18px;left:0;bottom:0;border:2px solid currentColor}.brand-mark i:nth-child(2){width:12px;height:12px;right:0;top:0;background:var(--yellow)}.brand-mark i:nth-child(3){width:8px;height:8px;left:7px;top:7px;background:var(--bg);transform:rotate(45deg)}.site-header nav{display:flex;gap:28px;font-size:13px;color:#c0c6d1}.site-header nav a:hover{color:#fff}.nav-cta{font-size:13px;font-weight:800;border:1px solid var(--line);border-radius:5px;padding:10px 14px;background:rgba(16,24,36,.35);backdrop-filter:blur(10px)}.nav-cta span{color:var(--yellow);margin-left:6px}
.city-story{height:700vh;position:relative}.city-sticky{height:100vh;position:sticky;top:0;overflow:hidden}.city-copy{position:absolute;z-index:5;left:max(24px,calc((100% - var(--max))/2));top:50%;transform:translateY(-50%);width:min(500px,43vw);pointer-events:none}.eyebrow{font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;color:#d0d7e2;margin:0 0 16px}.scene-count{font:700 12px ui-monospace,monospace;letter-spacing:.15em;color:#aab6c8;margin:0}.scene-count span{color:var(--yellow);font-size:25px;letter-spacing:-.1em}.city-copy h1{font-size:clamp(3.7rem,7vw,8rem);line-height:.8;letter-spacing:-.11em;margin:18px 0;text-transform:uppercase}.city-copy h1 em{font-style:normal;color:var(--yellow)}.city-copy>p:last-of-type{max-width:365px;color:#d1d8e5;line-height:1.65}.scene-track{display:flex;gap:6px;margin-top:28px}.scene-track i{height:3px;width:27px;background:rgba(255,255,255,.25);transition:.2s}.scene-track i.active{background:var(--yellow);box-shadow:0 0 12px rgba(255,225,107,.5)}.city-hud{position:absolute;z-index:5;right:max(24px,calc((100% - var(--max))/2));bottom:23px;display:flex;gap:22px;font:700 10px ui-monospace,monospace;letter-spacing:.14em;color:#d0d8e4}.city-hud span:first-child{color:var(--cyan)}.city-legend{position:absolute;z-index:5;right:max(24px,calc((100% - var(--max))/2));top:108px;display:flex;align-items:center;gap:7px;color:#cad3df;font-size:11px;background:rgba(10,18,29,.42);backdrop-filter:blur(10px);padding:9px 11px;border:1px solid rgba(255,255,255,.13)}.city-legend i{width:7px;height:7px;border-radius:50%;background:var(--cyan)}.city-legend i:nth-of-type(2){background:var(--yellow)}.city-legend i:nth-of-type(3){background:var(--pink)}
.city-contact{position:absolute;z-index:8;right:max(24px,calc((100% - var(--max))/2));top:50%;width:390px;padding:25px;background:rgba(15,23,36,.88);border:1px solid rgba(255,255,255,.24);box-shadow:0 26px 80px rgba(0,0,0,.4);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transform:translateY(-40%) translateX(60px) scale(.9);transition:opacity .25s,transform .25s}.city-contact.visible{pointer-events:auto}.city-contact small{font:800 9px ui-monospace,monospace;letter-spacing:.14em;color:var(--yellow)}.city-contact h2{font-size:36px;line-height:.9;letter-spacing:-.08em;margin:12px 0 22px;text-transform:uppercase}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.city-contact label{display:block;color:#d1d8e5;font-size:12px;margin-bottom:15px}.city-contact input,.city-contact textarea{display:block;width:100%;margin-top:7px;padding:9px 0;color:#fff;border:0;border-bottom:1px solid rgba(255,255,255,.25);background:transparent;outline:0;font:inherit;resize:vertical}.city-contact input:focus,.city-contact textarea:focus{border-color:var(--yellow)}.city-contact button{border:0;background:var(--yellow);color:#151820;padding:13px 14px;font:900 12px inherit;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}.city-contact button span{font-size:17px;margin-left:6px}.honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
footer{max-width:var(--max);margin:auto;padding:30px 24px;display:flex;justify-content:space-between;color:#8492a7;font:700 10px ui-monospace,monospace;letter-spacing:.12em}
@media(max-width:860px){.site-header{height:70px;width:calc(100% - 32px)}.site-header nav{display:none}.nav-cta{font-size:11px;padding:8px 10px}.city-copy{left:24px;top:21%;transform:none;width:calc(100% - 48px)}.city-copy h1{font-size:clamp(3.4rem,13vw,5.5rem)}.city-copy>p:last-of-type{max-width:310px}.city-hud{right:16px;bottom:13px;font-size:8px}.city-legend{top:78px;right:16px;font-size:9px}.city-contact{left:16px;right:16px;top:48%;width:auto;transform:translateY(-40%) translateX(30px) scale(.94)}.form-row{grid-template-columns:1fr}footer{flex-wrap:wrap;gap:14px}.brand{font-size:17px}}
/* Readability over the animated city */
.city-copy,
.city-copy h1,
.city-copy .eyebrow,
.city-copy .scene-count,
.city-copy > p:last-of-type,
.city-hud,
.city-legend{
  text-shadow:0 2px 4px rgba(3,8,15,.86),0 0 18px rgba(3,8,15,.76);
}
.city-copy h1{
  text-shadow:0 4px 8px rgba(3,8,15,.92),0 0 30px rgba(3,8,15,.82);
}
.city-copy h1 em{
  text-shadow:0 3px 7px rgba(3,8,15,.9),0 0 18px rgba(255,225,107,.18);
}
.city-copy > p:last-of-type{
  background:linear-gradient(90deg,rgba(9,17,28,.68),rgba(9,17,28,.24),transparent);
  padding:7px 11px 7px 0;
  border-radius:4px;
}

/* Hide native browser scrollbar; scrolling still works normally. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}

/* SEO services section */
.services-section{position:relative;z-index:2;background:#f7f4ed;color:#151b26;padding:125px 24px}
.services-inner{max-width:1120px;margin:auto}
.services-section .eyebrow{color:#46546b;text-shadow:none}
.services-section h2{font-size:clamp(3.2rem,6vw,6.6rem);line-height:.82;letter-spacing:-.1em;text-transform:uppercase;margin:0}
.services-section h2 em{font-style:normal;color:#416cb5}
.services-intro{max-width:590px;color:#4c596d;line-height:1.65;font-size:17px;margin:28px 0 55px}
.services-list{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid #c9d0da}
.services-list article{padding:28px 24px 31px 0;border-bottom:1px solid #c9d0da;min-height:182px;position:relative}
.services-list article:nth-child(odd){padding-right:42px}
.services-list article:nth-child(even){padding-left:42px;border-left:1px solid #c9d0da}
.services-list span{font:700 11px ui-monospace,monospace;color:#5877a8}
.services-list h3{font-size:25px;letter-spacing:-.06em;margin:25px 0 9px}
.services-list p{margin:0;color:#536075;line-height:1.55;max-width:440px}
@media(max-width:860px){
  .services-section{padding:90px 24px}
  .services-list{grid-template-columns:1fr}
  .services-list article,.services-list article:nth-child(odd),.services-list article:nth-child(even){padding:23px 0;border-left:0;min-height:0}
  .services-list h3{margin-top:17px}
}

/* Connected, lightly animated continuation below the living city */
.services-section{
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 88% 8%, rgba(110,231,255,.19), transparent 27%),
    radial-gradient(circle at 10% 92%, rgba(255,225,107,.16), transparent 26%),
    linear-gradient(145deg,#e7eef5 0%,#f7f4ed 48%,#e8f2f5 100%);
}
.services-section:before,
.services-section:after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  pointer-events:none;
  filter:blur(2px);
}
.services-section:before{
  width:680px;
  height:680px;
  top:-380px;
  right:-180px;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 36px, rgba(65,108,181,.13) 37px 38px, transparent 39px 70px);
  animation:cityRipple 20s linear infinite;
}
.services-section:after{
  width:110%;
  height:210px;
  left:-5%;
  bottom:-60px;
  opacity:.42;
  background-image:
    linear-gradient(rgba(67,104,142,.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,104,142,.17) 1px, transparent 1px);
  background-size:42px 42px;
  transform:perspective(620px) rotateX(64deg);
  transform-origin:bottom;
  animation:cityGrid 13s linear infinite;
}
.services-inner{position:relative}
.services-inner:before{
  content:"";
  position:absolute;
  left:-120px;
  right:-120px;
  top:-65px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(65,108,181,.55),transparent);
  box-shadow:0 0 18px rgba(65,108,181,.35);
}
@keyframes cityRipple{
  to{transform:rotate(360deg)}
}
@keyframes cityGrid{
  to{background-position:0 42px,42px 0}
}
@media(prefers-reduced-motion:reduce){
  .services-section:before,.services-section:after{animation:none}
}

/* Dark seamless continuation for the services section */
.services-section{
  color:#f5f7fb;
  background:
    radial-gradient(circle at 88% 8%, rgba(110,231,255,.16), transparent 28%),
    radial-gradient(circle at 12% 92%, rgba(255,225,107,.13), transparent 28%),
    radial-gradient(circle at 52% 55%, rgba(64,97,151,.18), transparent 42%),
    linear-gradient(180deg,#101824 0%,#0d1724 46%,#0a121c 100%);
}
.services-section .eyebrow{color:#a9c3de}
.services-section h2{color:#f5f7fb;text-shadow:0 3px 12px rgba(0,0,0,.45)}
.services-section h2 em{color:#ffe16b}
.services-intro{color:#c5d2e2;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.services-list{border-top-color:rgba(190,221,255,.2)}
.services-list article{border-bottom-color:rgba(190,221,255,.16)}
.services-list article:nth-child(even){border-left-color:rgba(190,221,255,.16)}
.services-list article:hover{background:linear-gradient(90deg,rgba(110,231,255,.08),rgba(255,225,107,.03));}
.services-list span{color:#6ee7ff}
.services-list h3{color:#f7fbff;text-shadow:0 2px 7px rgba(0,0,0,.55)}
.services-list p{color:#b6c6d8}
.services-section:before{
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 36px, rgba(110,231,255,.12) 37px 38px, transparent 39px 70px);
}
.services-section:after{
  background-image:
    linear-gradient(rgba(110,231,255,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,231,255,.11) 1px, transparent 1px);
  opacity:.35;
}
.services-inner:before{
  background:linear-gradient(90deg,transparent,rgba(110,231,255,.55),transparent);
  box-shadow:0 0 18px rgba(110,231,255,.25);
}

/* Underground continuation beneath the city */
.underground-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:950px;
  background:
    radial-gradient(circle at 20% 15%, rgba(109,185,213,.08), transparent 27%),
    radial-gradient(circle at 82% 22%, rgba(255,225,107,.06), transparent 24%),
    linear-gradient(180deg,#0d1724 0%,#0a111a 34%,#070c12 100%);
}
#undergroundCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:-3;
  pointer-events:none;
}
.underground-vignette{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,5,8,.8),transparent 28%,transparent 70%,rgba(2,5,8,.78)),
    linear-gradient(180deg,rgba(4,8,13,.1),rgba(3,7,11,.64));
}
.underground-caption{
  position:absolute;
  right:clamp(24px,7vw,110px);
  bottom:40px;
  z-index:0;
  color:rgba(173,205,227,.35);
  font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
}
.underground-section .services-inner{
  position:relative;
  z-index:2;
}
.underground-section .services-list{
  background:linear-gradient(145deg,rgba(10,17,27,.67),rgba(6,10,16,.35));
  backdrop-filter:blur(4px);
}
.underground-section .services-list article{
  transition:background .25s ease, transform .25s ease;
}
.underground-section .services-list article:hover{
  background:linear-gradient(90deg,rgba(110,231,255,.11),rgba(255,225,107,.04));
  transform:translateX(5px);
}
.underground-section h2{
  text-shadow:0 4px 18px rgba(0,0,0,.86),0 0 30px rgba(110,231,255,.1);
}
.underground-section .services-intro{
  max-width:650px;
  text-shadow:0 3px 12px rgba(0,0,0,.94);
}
@media(max-width:860px){
  .underground-section{min-height:1100px}
  .underground-caption{right:24px;bottom:22px;font-size:8px}
}

/* Clear descent from city level into the underground */
.underground-section{
  border-top:1px solid rgba(110,231,255,.19);
  box-shadow:inset 0 35px 70px rgba(8,21,34,.62);
}
.underground-descent{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:150px;
  z-index:1;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:rgba(205,230,244,.63);
  font:800 10px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
  background:linear-gradient(180deg,rgba(19,42,64,.46),rgba(7,13,20,0));
}
.descent-line{
  width:65px;height:1px;
  background:linear-gradient(90deg,transparent,#6ee7ff);
  box-shadow:0 0 10px rgba(110,231,255,.45);
}
.descent-arrow{
  color:#ffe16b;
  font-size:18px;
  animation:descentArrow 1.7s ease-in-out infinite;
}
@keyframes descentArrow{50%{transform:translateY(7px);opacity:.55}}
.underground-section .services-inner{padding-top:34px}