/* IN SYNC homepage: Ashish's isometric flow. Charcoal map, one glowing yellow route, transparent scenes.

   Stacked view (default, phones, tablets, no JavaScript): the seven districts one under another, with a
   short diagonal piece of the route between them. Map view (html.is-map, set by flow.js on wide and tall
   screens): the same districts placed on a 9000 x 8400 map along the diagonal, scaled by --map-zoom.
   Map sizes are in map pixels; the zoom never goes below 0.75, so 16px map text never shows below 12px. */

:root{
  --ink:#121419;--ink-2:#1a1d24;--ink-3:#232832;
  --line:rgba(244,242,234,.12);--line-2:rgba(244,242,234,.22);
  --text:#f4f2ea;--text-2:#c9ccd2;--text-3:#aeb2ba;
  --yellow:#ffd000;--yellow-2:#ffe066;--on-yellow:#14171d;
  --ease:cubic-bezier(.16,1,.3,1);
  --r-card:20px;--r-inner:14px;
  --grid:repeating-linear-gradient(26.565deg,rgba(244,242,234,.035) 0 1px,transparent 1px 56px),repeating-linear-gradient(153.435deg,rgba(244,242,234,.035) 0 1px,transparent 1px 56px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background-color:var(--ink);background-image:var(--grid);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;padding-bottom:104px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3{font-family:Manrope,'DM Sans',sans-serif;margin:0;color:#fff}
p{margin:0}
.y{color:var(--yellow)}
.soft{color:#dfe1e5}
.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.01em;padding-right:.04em}
.placeholder{color:var(--yellow-2);border-bottom:1px dashed rgba(255,224,102,.6)}

/* Keyboard focus: always visible, on every control. */
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:8px}
.map-zone:focus,.world-viewport:focus{outline:none}
.world-viewport:focus-visible{outline:3px solid var(--yellow);outline-offset:-6px}
.skip-link{position:fixed;z-index:100;left:16px;top:-80px;background:var(--yellow);color:var(--on-yellow);font-weight:700;padding:12px 18px;border-radius:999px;text-decoration:none;transition:top .3s var(--ease)}
.skip-link:focus{top:12px}

/* ---------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:40;height:72px;display:flex;align-items:center;gap:24px;padding:0 clamp(16px,4vw,48px);background:rgba(18,20,25,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;flex:none;border-radius:8px}
.brand img{height:36px;width:auto}
.main-nav{display:flex;align-items:center;gap:clamp(14px,2vw,28px);margin-left:auto}
.main-nav a{position:relative;color:var(--text-2);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;padding:10px 0;transition:color .3s var(--ease)}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:2px;background:var(--yellow);transition:right .4s var(--ease)}
.main-nav a:hover,.main-nav a[aria-current]{color:#fff}
.main-nav a:hover::after,.main-nav a[aria-current]::after{right:0}
.main-nav .nav-starter{display:none}
.header-cta{flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;color:#fff;font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.header-cta span{color:var(--yellow)}
.header-cta:hover{background:rgba(255,208,0,.1);border-color:rgba(255,208,0,.6)}
.menu-toggle{display:none;flex:none;width:44px;height:44px;border:0;border-radius:999px;background:transparent;cursor:pointer;padding:12px 11px}
.menu-toggle span{display:block;height:2px;background:#fff;border-radius:2px;margin:4px 0;transition:transform .35s var(--ease),opacity .2s}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------------------------------------------------------------- shared pieces */
.kicker{color:var(--yellow);font-weight:600;font-size:16px;margin-bottom:18px}
.zone-copy h1{font-size:clamp(40px,6vw,64px);font-weight:800;line-height:1.06;letter-spacing:-.035em;margin-bottom:22px}
.zone-copy h2{font-size:clamp(34px,4.6vw,54px);font-weight:800;line-height:1.08;letter-spacing:-.035em;margin-bottom:18px}
.zone-copy>p{color:var(--text-2);font-size:18px;line-height:1.6;max-width:32em}
.zone-copy>p.lede{font-size:19px;max-width:28em}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}

.btn{display:inline-flex;align-items:center;gap:14px;min-height:54px;padding:6px 6px 6px 24px;border:1px solid transparent;border-radius:999px;font-weight:700;font-size:17px;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .5s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease)}
.btn-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;font-style:normal;font-size:18px;transition:transform .5s var(--ease)}
.btn:hover .btn-icon{transform:translate(2px,-1px) scale(1.06)}
.btn:active{transform:scale(.98)}
.btn-yellow{background:var(--yellow);color:var(--on-yellow);box-shadow:0 10px 30px -12px rgba(255,208,0,.45)}
.btn-yellow:hover{background:var(--yellow-2)}
.btn-yellow .btn-icon{background:rgba(20,23,29,.1)}
.btn-ghost{background:transparent;color:#fff;border-color:var(--line-2)}
.btn-ghost:hover{border-color:rgba(255,208,0,.6)}
.btn-ghost .btn-icon{background:rgba(244,242,234,.08)}
.link{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:700;font-size:17px;text-decoration:none;background:none;border:0;padding:0 2px;cursor:pointer;box-shadow:inset 0 -2px 0 var(--yellow);transition:color .3s var(--ease)}
.link:hover{color:var(--yellow)}

.disciplines,.apps-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px;max-width:560px}
.disciplines li,.apps-list li{display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid var(--line-2)}
.disciplines b,.apps-list b{font-family:Manrope,sans-serif;font-weight:800;font-size:18px;color:#fff}
.disciplines span,.apps-list span{color:var(--text-3);font-size:16px;line-height:1.45}
.apps-list li{border-top-color:rgba(255,208,0,.45)}

.points{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;max-width:32em}
.points li{position:relative;padding-left:28px;color:#e6e7ea;font-size:17px;line-height:1.5}
.points li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border:2px solid var(--yellow);transform:rotate(45deg)}

/* Screenshots of our own apps, in a two-layer frame. */
.tech-visual{display:grid;justify-items:center}
.shots{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:16px;width:100%;margin-top:-70px}
.shot{margin:0}
.bezel{padding:6px;border-radius:var(--r-card);background:rgba(244,242,234,.06);border:1px solid var(--line-2);box-shadow:0 24px 40px -18px rgba(0,0,0,.7)}
.bezel img{border-radius:var(--r-inner);width:100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.shot figcaption{margin-top:10px;color:var(--text-3);font-size:15px}
.shot-side{transform:translateY(-28px)}

.work-shelf{margin-top:28px}
.work-shelf h3{font-size:18px;margin-bottom:12px}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.work-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:var(--r-inner);background:var(--ink-2);border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .3s var(--ease)}
a.work-card:hover{border-color:rgba(255,208,0,.6)}
.work-card h3{font-size:17px}
.work-card strong{font-weight:600;font-size:15px;color:var(--text-2)}
.work-card p{color:var(--text-3);font-size:15px;line-height:1.5}
.work-status{align-self:flex-start;font-size:13px;font-weight:700;padding:2px 10px;border-radius:999px;background:rgba(255,208,0,.14);color:var(--yellow-2)}
.work-status.live{background:rgba(52,199,89,.16);color:#8ee6a5}
.work-tags{display:flex;flex-wrap:wrap;gap:6px}
.work-tags span{font-size:13px;color:var(--text-3);border:1px solid var(--line);border-radius:999px;padding:1px 9px}
.work-link{font-weight:700;font-size:15px;color:var(--yellow)}

/* Plan / Design / Build / Grow */
.stage-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:26px;max-width:520px}
.stage-tab{min-height:50px;padding:0 8px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:#fff;font-weight:700;font-size:16px;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.stage-tab:hover{border-color:rgba(255,208,0,.6)}
.stage-tab[aria-selected=true]{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.stage-panel{margin-top:14px;max-width:520px;padding:18px 20px;border-radius:var(--r-card);background:var(--ink-2);border:1px solid var(--line);min-height:150px}
.stage-panel p{color:#e6e7ea;font-size:17px;line-height:1.55}
.stage-panel .stage-get{margin-top:10px;color:var(--text-2);font-size:16px}
.stage-get b{color:var(--yellow)}

/* What it costs */
.price-card{margin-top:26px;max-width:540px;padding:20px 22px;border-radius:var(--r-card);background:var(--ink-2);border:1px solid var(--line)}
.price-card h3{font-size:18px;margin-bottom:8px}
.prices{margin:0;display:grid;gap:10px}
.prices div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:16px;padding-top:10px;border-top:1px solid var(--line)}
.prices dt{font-weight:700;font-size:16px;color:#fff}
.prices dd{margin:0;color:var(--text-2);font-size:16px;line-height:1.45}
.fine{margin-top:10px;color:var(--text-3);font-size:15px}

/* Project starter */
.starter{margin-top:26px;display:grid;gap:18px;max-width:600px}
.chip-label{font-weight:600;font-size:16px;color:var(--text-2);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:46px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:#fff;font-weight:600;font-size:16px;cursor:pointer;transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .4s var(--ease)}
.chip:hover{border-color:rgba(255,208,0,.6)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed=true]{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.brief-preview{padding:16px 18px;border-radius:var(--r-card);background:#fff3c2;color:var(--on-yellow)}
.brief-preview .chip-label{color:#5a4a00;margin-bottom:4px;font-size:15px}
#starter-brief{font-size:17px;line-height:1.5;font-weight:600}
#starter-brief.is-empty{font-weight:500;color:#4a4a3a}
.starter .btn{justify-self:start}

.connect-visual{display:grid;justify-items:center;gap:0}
/* The last island: Mr. Octo lifting off on a rocket. The contact card sits over the island's lower
   rocks (on phones it simply follows the picture). */
.connect-launch{width:min(380px,82%);height:auto;margin-bottom:-70px;position:relative;z-index:1}
.is-map .connect-visual{display:grid;grid-template-columns:minmax(0,1fr) 316px;align-items:end;align-self:center;justify-items:stretch}
.is-map .connect-launch{display:block;width:calc(100% + 40px);max-width:none;margin:0 -40px 30px -20px}
.is-map .connect-visual .contact-card{width:auto;padding:18px 20px}
.is-map .connect-visual .contact-card li{padding:8px 0}
.contact-card{position:relative;z-index:2;width:100%;max-width:440px;padding:22px 24px;border-radius:var(--r-card);background:var(--ink-2);border:1px solid var(--line-2);box-shadow:0 24px 40px -20px rgba(0,0,0,.7)}
.contact-card h3{font-size:20px;margin-bottom:10px}
.contact-card ul{list-style:none;margin:0;padding:0;display:grid}
.contact-card li{display:flex;flex-direction:column;padding:10px 0;border-top:1px solid var(--line)}
.contact-card li>:first-child{font-weight:700;font-size:18px;color:#fff;text-decoration:none;align-self:flex-start}
.contact-card a:hover{color:var(--yellow)}
.contact-card li>:last-child{color:var(--text-3);font-size:15px}
.contact-card .placeholder{color:var(--yellow-2)}
.contact-card a[href^="mailto:"]{font-size:15.5px;overflow-wrap:anywhere} /* long Gmail addresses still fit */

.zone-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--text-3);font-size:15px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 22px}
.zone-foot a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;padding:8px 0}
.zone-foot a:hover{color:#fff}
.motion-toggle{min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--text-2);font-weight:600;font-size:14px;cursor:pointer}
.motion-toggle:hover{color:#fff;border-color:rgba(255,208,0,.6)}
.motion-toggle:disabled{cursor:default;opacity:.8}
.zone-foot>a:last-child{margin-left:auto}

/* The scenes float gently while their district is the current one. */
.map-art{width:100%;height:auto;filter:drop-shadow(0 26px 26px rgba(0,0,0,.4))}
.is-current .map-art{animation:art-float 8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes art-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ---------------------------------------------------------------- stacked view */
.world-routes{display:none}
.map-zone{position:relative;display:grid;gap:28px;max-width:1180px;margin:0 auto;padding:88px 20px 24px;scroll-margin-top:64px}
.zone-home{padding-top:40px}
.zone-visual{margin:0;min-width:0;display:grid;justify-items:center}
.zone-visual .map-art{max-width:560px}
.zone-creative .zone-visual{order:2}
/* A piece of the glowing route between districts, top left to bottom right. */
.map-zone+.map-zone::before{content:"";position:absolute;left:24px;right:24px;top:14px;height:60px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 60' preserveAspectRatio='none'%3E%3Cline x1='2' y1='4' x2='96' y2='56' stroke='%23ffd000' stroke-opacity='.18' stroke-width='9' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3Cline x1='2' y1='4' x2='96' y2='56' stroke='%23ffd000' stroke-width='2.5' stroke-dasharray='3 9' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.map-zone+.map-zone::after{content:"";position:absolute;right:22px;top:68px;width:12px;height:12px;border-radius:50%;background:var(--yellow);box-shadow:0 0 14px rgba(255,208,0,.8);pointer-events:none}

@media (min-width:900px){
  .map-zone{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;padding:112px 40px 40px}
  .zone-creative{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .zone-creative .zone-visual{order:0}
  .zone-approach{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .zone-home{padding-top:56px}
}

/* Route position on any screen: a pill at the bottom left with Back and Next. */
.map-hud{position:fixed;z-index:35;left:12px;bottom:14px;display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border-radius:999px;background:rgba(26,29,36,.94);border:1px solid var(--line-2);box-shadow:0 12px 30px -10px rgba(0,0,0,.6)}
.hud-where{display:flex;flex-direction:column;line-height:1.2;font-size:13px;color:var(--text-3);min-width:0}
.hud-where strong{font-family:Manrope,sans-serif;font-size:15px;color:#fff;white-space:nowrap}
.hud-steps{display:flex;gap:6px}
.hud-steps button{min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:background-color .3s var(--ease),opacity .3s}
.hud-steps #hud-next{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.hud-steps button:disabled{opacity:.4;cursor:default}
.map-tools{display:none}

@media (max-width:999px){
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px 20px 20px;background:rgba(18,20,25,.98);border-bottom:1px solid var(--line);max-height:calc(100dvh - 64px);overflow:auto}
  .main-nav.open{display:flex}
  .main-nav a{font-family:Manrope,sans-serif;font-size:22px;font-weight:800;color:#fff;padding:14px 0;border-bottom:1px solid var(--line)}
  .main-nav a::after{display:none}
  .main-nav a[aria-current]{color:var(--yellow)}
  .main-nav .nav-starter{display:block}
  .header-cta{margin-left:auto}
  .menu-toggle{display:block}
}
@media (max-width:600px){
  .site-header{height:64px;gap:8px}
  .brand img{height:30px}
  .header-cta{padding:0 14px;font-size:14px}
  html{scroll-padding-top:64px}
  .map-zone{padding:84px 16px 16px;gap:20px}
  .zone-home{padding-top:28px}
  .zone-copy h1{font-size:40px}
  .zone-copy h2{font-size:34px}
  .zone-copy>p,.zone-copy>p.lede{font-size:17px}
  .actions{gap:12px 22px;margin-top:24px}
  .btn{font-size:16px;padding-left:20px}
  .disciplines,.apps-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 18px}
  .disciplines b,.apps-list b{font-size:16px}
  .disciplines span,.apps-list span{font-size:15px}
  .stage-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prices div{grid-template-columns:1fr;gap:2px}
  .shots{margin-top:-40px;gap:10px}
  .shot-side{transform:translateY(-14px)}
  .shot figcaption{font-size:13px}
  .work-grid{grid-template-columns:1fr}
  .zone-foot{flex-direction:column;align-items:flex-start;gap:8px}
  .zone-foot>a:last-child{margin-left:0}
  .map-zone+.map-zone::before{left:16px;right:16px}
  .map-zone+.map-zone::after{right:14px}
}
@media (max-width:480px){.hud-where{display:none}.map-hud{padding:5px}.hud-steps button{padding:0 14px}}

/* ---------------------------------------------------------------- map view */
html.is-map,html.is-map body{height:100%;overflow:hidden}
.is-map body{padding-bottom:0;background:var(--ink)}
.is-map .site-header{position:fixed;left:0;right:0;top:0}
.is-map .world-viewport{position:fixed;z-index:1;inset:72px 0 0;overflow:auto;scrollbar-width:none;overscroll-behavior:contain;touch-action:none;cursor:grab;background:radial-gradient(ellipse at 50% 45%,rgba(50,55,63,.3),transparent 60%),var(--ink)}
.is-map .world-viewport::-webkit-scrollbar{display:none}
.is-map .world-viewport.is-dragging{cursor:grabbing;user-select:none}
.is-map .world-stage{position:relative;width:9000px;height:8400px}
.is-map .world-map{position:absolute;left:0;top:0;width:9000px;height:8400px;transform:scale(var(--map-zoom,1));transform-origin:0 0;background-image:radial-gradient(circle at 18% 14%,rgba(255,208,0,.07),transparent 18%),radial-gradient(circle at 70% 70%,rgba(255,208,0,.045),transparent 22%),var(--grid)}
.is-map .world-routes{display:block;position:absolute;inset:0;width:9000px;height:8400px;overflow:visible;pointer-events:none}
/* The route: drawn once and never repainted (soft strokes and halos instead of blur filters, which the
   browser recalculated on every frame while the map travelled); only the dashes move, on a layer of
   their own. */
.route-glow{fill:none;stroke:#ffd000;stroke-width:22;stroke-linecap:round;opacity:.1}
.route-glow.wide{stroke-width:48;opacity:.04}
.route-halos{fill:#ffd000;opacity:.16}
.route-nodes{fill:#ffe066}
/* The marching dots along the route (900,500 to 7200,6800 in map pixels: 45 degrees, 8910 long): a dot
   pattern that slides by one dot spacing and loops. A transform, so the graphics card moves it and
   nothing is repainted. */
.route-dashes{display:none}
/* Travelling: pause what can wait, so the move itself stays smooth (js/flow.js adds .is-moving). */
.is-moving .pulses path,.is-moving .map-art,.is-moving .route-dashes span{animation-play-state:paused!important}
.is-map .route-dashes{display:block;position:absolute;left:900px;top:498px;width:8910px;height:5px;transform:rotate(45deg);transform-origin:0 50%;overflow:hidden;pointer-events:none;opacity:.7}
.route-dashes span{display:block;width:calc(100% + 23px);height:100%;margin-left:-23px;
  background:radial-gradient(circle,#ffd000 0 2px,transparent 2.5px) 0 50%/23px 5px repeat-x;will-change:transform;animation:route-dots 3s linear infinite}
@keyframes route-dots{to{transform:translateX(23px)}}

.is-map .map-zone{position:absolute;z-index:2;left:var(--cx);top:var(--cy);transform:translate(-50%,-50%);width:1320px;max-width:none;margin:0;padding:0;display:grid;grid-template-columns:540px minmax(0,1fr);gap:72px;align-items:center;opacity:.32;transition:opacity .7s var(--ease)}
.is-map .map-zone.is-current{opacity:1}
.is-map .map-zone::before,.is-map .map-zone::after{display:none}
/* A soft shade behind the copy, so the route never runs through the text at full strength. */
.is-map .zone-copy{position:relative;z-index:1}
.is-map .zone-copy::before{content:"";position:absolute;z-index:-1;inset:-60px -80px;background:radial-gradient(closest-side,rgba(18,20,25,.92),rgba(18,20,25,.75) 60%,rgba(18,20,25,0));pointer-events:none}
.is-map .zone-copy h1{font-size:64px}
.is-map .zone-copy h2{font-size:54px}
.is-map .zone-visual .map-art{max-width:none}
.is-map .zone-home{--cx:1400px;--cy:1000px;grid-template-columns:660px minmax(0,1fr);width:1360px;gap:40px}
.is-map .zone-home h1{font-size:58px}
.is-map .zone-studio{--cx:2300px;--cy:1900px;width:1240px;grid-template-columns:540px minmax(0,1fr)}
.is-map .zone-studio .map-art{width:88%}
.is-map .zone-technology{--cx:3200px;--cy:2800px;width:1400px;grid-template-columns:610px minmax(0,1fr);gap:56px}
.is-map .zone-technology .map-art{width:86%}
.is-map .zone-creative{--cx:4100px;--cy:3700px;grid-template-columns:minmax(0,1fr) 540px}
.is-map .zone-creative .zone-visual{order:0}
.is-map .zone-approach{--cx:5000px;--cy:4600px;width:1420px;grid-template-columns:520px minmax(0,1fr);gap:56px}
.is-map .zone-growth{--cx:5900px;--cy:5500px}
.is-map .zone-connect{--cx:6800px;--cy:6400px;width:1340px;grid-template-columns:660px minmax(0,1fr);gap:64px}
.is-map .zone-connect .zone-foot{margin-top:0;padding-top:16px}
.is-map .zone-connect h2{font-size:50px}
.is-map .starter{gap:14px;margin-top:20px}
.is-map .chip-label{margin-bottom:8px}
.is-map .brief-preview{padding:12px 18px}
.is-map .map-hud{left:24px;bottom:22px;padding:8px 8px 8px 20px}
.is-map .hud-where strong{font-size:17px}
.is-map .map-tools{position:fixed;z-index:35;right:222px;bottom:22px;display:flex;align-items:flex-end;gap:10px}
.tool-row{display:flex;flex-direction:column;align-items:stretch;gap:6px}
.zoom{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:3px;border-radius:999px;background:rgba(26,29,36,.94);border:1px solid var(--line-2)}
.zoom button{width:32px;height:32px;border:0;border-radius:50%;background:var(--ink-3);color:#fff;font-size:20px;line-height:1;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.zoom button:hover{background:var(--yellow);color:var(--on-yellow)}
.zoom output{min-width:50px;text-align:center;font-size:14px;color:var(--text-2)}
#recenter,.map-tools .motion-toggle{min-height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(26,29,36,.94);color:var(--text-2);font-weight:600;font-size:14px;cursor:pointer}
#recenter:hover{color:#fff;border-color:rgba(255,208,0,.6)}
.mini-map{position:relative;width:180px;height:120px;border-radius:16px;background-color:rgba(26,29,36,.94);background-image:var(--grid);border:1px solid var(--line-2);overflow:hidden}
.mini-route{position:absolute;left:15.6%;top:11.9%;width:73.5%;height:0;border-top:2px dashed rgba(255,208,0,.5);transform-origin:0 0;transform:rotate(35.3deg)}
.mini-dot{position:absolute;z-index:2;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.mini-dot::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#5f6672;border:2px solid var(--ink);transition:transform .3s var(--ease),background-color .3s}
.mini-dot:hover::before{background:var(--yellow-2)}
.mini-dot[aria-current]::before{background:var(--yellow);transform:scale(1.35);box-shadow:0 0 0 4px rgba(255,208,0,.25)}
.mini-camera{position:absolute;z-index:1;border:1px solid rgba(244,242,234,.7);background:rgba(255,208,0,.06);border-radius:4px;pointer-events:none}
.is-map .ai-launcher{bottom:22px;right:24px}

/* ---------------------------------------------------------------- the brief dialog */
body.modal-open{overflow:hidden}
.modal{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:32px;border:1px solid var(--line-2);border-radius:24px;background:var(--ink-2);color:var(--text);box-shadow:0 40px 80px -20px rgba(0,0,0,.8)}
.modal::backdrop{background:rgba(10,11,14,.72);backdrop-filter:blur(4px)}
.modal h2{font-size:32px;line-height:1.12;letter-spacing:-.03em;padding-right:44px;margin-bottom:10px}
.modal-description{color:var(--text-2);font-size:16px;margin-bottom:22px}
.modal-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer}
.modal-close:hover{border-color:var(--yellow)}
#project-form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#project-form label{display:block;font-weight:600;font-size:15px;color:#fff}
#project-form input:not([type=checkbox]),#project-form textarea,#project-form select{display:block;margin-top:6px;width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--ink);color:#fff;font-size:16px;font-weight:400}
#project-form textarea{resize:vertical;line-height:1.5}
#project-form ::placeholder{color:#9298a1}
#project-form input:focus-visible,#project-form textarea:focus-visible,#project-form select:focus-visible{outline:3px solid var(--yellow);outline-offset:1px;border-color:var(--yellow)}
#project-form fieldset{border:0;margin:0;padding:0}
#project-form legend{font-weight:600;font-size:15px;margin-bottom:8px}
.optional{color:var(--text-3);font-weight:400}
.checkboxes{display:flex;flex-wrap:wrap;gap:8px}
.checkboxes label{display:inline-flex!important;align-items:center;gap:8px!important;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;font-weight:500!important}
.checkboxes input{accent-color:var(--yellow);width:18px;height:18px;margin:0}
.checkboxes label:has(input:checked){border-color:var(--yellow);background:rgba(255,208,0,.1)}
#project-form .btn{justify-self:start;margin-top:4px}
.form-note{color:var(--text-3);font-size:14px}
.form-note a{color:var(--text-2)}
#brief-success{display:grid;gap:12px;justify-items:start}
#brief-success[hidden],#brief-form-wrap[hidden]{display:none}
.success-mascot{width:160px}
.brief-note{font-weight:600;color:#8ee6a5}
#brief-not-sent{color:#ffb3a8}
.brief-summary{width:100%;padding:16px 18px;border-radius:var(--r-inner);background:var(--ink);border:1px solid var(--line);display:grid;gap:4px;color:var(--text-2);font-size:15px}
.brief-summary strong{color:#fff}
.brief-summary p{white-space:pre-wrap}
#brief-success .button.whatsapp{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border-radius:999px;font-weight:700;text-decoration:none;margin:0}
@media (max-width:600px){.modal{padding:24px 18px}.modal h2{font-size:26px}.form-row{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- less motion */
[data-motion=off]{scroll-behavior:auto}
[data-motion=off] *,[data-motion=off] *::before,[data-motion=off] *::after{animation:none!important;transition-duration:.01ms!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* Map text never below 16 map pixels: at the smallest zoom (0.75) that is still 12px on screen. */
.is-map .shot figcaption,.is-map .work-card strong,.is-map .work-card p,.is-map .work-status,.is-map .work-tags span,.is-map .work-link,
.is-map .fine,.is-map .brief-preview .chip-label,.is-map .contact-card li>:last-child,.is-map .zone-foot,.is-map .zone-foot .motion-toggle{font-size:16px}
.is-map .zone-foot .motion-toggle{display:none}

/* Headlines without a lonely last word; phone numbers, prices and counters in even-width figures. */
h1,h2,h3{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.contact-card,.prices,.hud-where,.zoom output,.foot-phones{font-variant-numeric:tabular-nums}

/* Pulses: light runs along the circuit lines of each scene, like current. Each line (hand-traced in
   tools/pulse_paths.json, snapped to the painted line and smoothed by tools/build_pulses.py) carries a comet
   of four stacked strokes sharing one front edge: wide faint glow, tail, brighter middle, small hot head,
   so the tail tapers. The comet fades in, glides along the line at a steady speed, fades out, and the line
   rests; every line has its own speed and start. The glow is a stroke, not a filter, so nothing is
   re-blurred each frame. While the district is current its lines rest dimmed (img/flow-dim) so the light
   reads; paused or reduced motion restores the picture. */
.art-live{display:block;position:relative}
.art-base{display:block;width:100%;height:auto}
.art-dim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s}
.is-current .art-dim{opacity:1}
[data-motion=off] .art-dim{opacity:0}
.pulses{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;mix-blend-mode:screen}
.pulses path{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;
  stroke-dasharray:0 var(--g) var(--a) 3;stroke-dashoffset:.46}
.pulse-glow path{stroke:#ffb000;stroke-width:30}
.pulse-tail path{stroke:#ffcc00;stroke-width:12}
.pulse-mid path{stroke:#fff0a0;stroke-width:8}
.pulse-head path{stroke:#ffffff;stroke-width:6.5}
.is-current .pulse-head{filter:none}
.pulse-glow{opacity:.5}.pulse-tail{opacity:.9}.pulse-mid{opacity:1}
.is-current .pulses path{animation:pulse-run var(--dur) linear var(--delay) infinite}
/* Fixed numbers, not var(), so the browser slides the dash smoothly. */
@keyframes pulse-run{
  0%{stroke-dashoffset:.46;opacity:0}
  7%{opacity:1}
  52%{opacity:1}
  60%{stroke-dashoffset:-1.02;opacity:0}
  100%{stroke-dashoffset:-1.02;opacity:0}}
@media (prefers-reduced-motion:reduce){.pulses path{animation:none!important;opacity:0!important}.art-dim{opacity:0!important}}
/* Short laptop screens (about 560px of page height): the map controls shrink to one low row and the
   mini map steps aside (the route pill and the header still reach every district), so they do not sit on the scene. */
@media (max-height:772px){
  .map-tools{bottom:16px;gap:8px;align-items:center}
  .map-tools .tool-row{flex-direction:row;align-items:center;gap:8px}
  .map-tools .mini-map{display:none}
  .map-tools .motion-toggle,#recenter{min-height:36px;padding:0 12px;font-size:13px}
  .is-map .map-hud{bottom:8px;padding:4px 4px 4px 14px;left:auto;right:344px}
  .map-tools .zoom,.map-tools #recenter{display:none}
  .is-map .to-top{display:none} /* the logo and Back already return to the start */
  .is-map .map-tools{bottom:10px}
  .is-map .ai-launcher{bottom:8px;min-height:44px;padding:8px 14px 8px 8px}
}

/* Mr. Octo on the dark pages: the chat panel and its contact menu in the map's charcoal and yellow.
   assistant.css keeps the light look for the light /apps page; this file only loads on the dark ones. */
html .ai-panel{background:var(--ink-2);color:var(--text);border:1px solid var(--line-2);box-shadow:0 24px 60px -12px rgba(0,0,0,.7),0 0 0 1px rgba(255,208,0,.06)}
html .ai-head{background:var(--ink-3);border-bottom:1px solid var(--line)}
html .ai-head strong,html .ai-head b{color:var(--text)}
html .ai-head small{color:var(--text-3)}
html .ai-close{background:rgba(244,242,234,.08);color:var(--text)}
html .ai-close:hover{background:rgba(244,242,234,.16)}
html .ai-avatar,html .ai-mini{background:#2b2f38;border-color:rgba(255,208,0,.35)}
html .ai-msg.them{background:var(--ink-3);color:var(--text);border:1px solid var(--line)}
html .ai-msg.me{background:var(--yellow);color:#14161b;font-weight:500}
html .ai-msg a{color:var(--yellow-2)}
html .ai-msg.me a{color:#14161b}
html .ai-starters button{background:transparent;color:var(--text);border:1px solid var(--line-2);transition:background-color .2s ease,border-color .2s ease}
html .ai-starters button:hover{background:rgba(255,208,0,.1);border-color:var(--yellow)}
html .ai-typing i{background:var(--text-3)}
html .ai-whatsapp{background:#1f9e55}
html .ai-panel .ai-form{background:var(--ink-3);border-top:1px solid var(--line)}
html .ai-panel .ai-form textarea{background:var(--ink);color:var(--text);border:1px solid var(--line-2)}
html .ai-panel .ai-form textarea::placeholder{color:var(--text-3)}
html .ai-panel .ai-form textarea:focus{outline:2px solid var(--yellow);outline-offset:1px;border-color:transparent}
html .ai-foot{background:var(--ink-3);color:var(--text-3)}
html .ai-foot a{color:var(--yellow-2)}
html .ai-log{scrollbar-color:var(--line-2) transparent}
html .ai-menu{background:var(--ink-2);color:var(--text);border:1px solid var(--line-2);box-shadow:0 24px 60px -12px rgba(0,0,0,.7)}
html .ai-menu-sub{color:var(--text-3)}
html .ai-option-chat{background:var(--yellow);color:#14161b}
html .ai-option-chat::before{background:#14161b;opacity:.8}
html .ai-option-wa{background:rgba(37,211,102,.14);color:#7ee2a5;border:1px solid rgba(37,211,102,.35)}
html .ai-option-call{background:rgba(244,242,234,.06);color:var(--text);border:1px solid var(--line-2)}
html .ai-option:hover{filter:brightness(1.12)}

/* Intro: the IN SYNC mark builds itself in 3D (js/intro3d.js), once per visitor, then fades into the map.
   Shown only while html.intro-on (set by js/intro-gate.js before paint). */
.intro{display:none}
.intro-on .intro{display:flex;position:fixed;inset:0;z-index:200;align-items:center;justify-content:center;
  background-color:var(--ink);background-image:radial-gradient(ellipse at 50% 46%,rgba(255,208,0,.08),transparent 55%),var(--grid);
  transition:opacity .7s cubic-bezier(.32,.72,0,1);cursor:pointer}
.intro-on body{overflow:hidden}
.intro.out{opacity:0;pointer-events:none}
.intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.intro-svg{width:min(620px,84vw);height:auto;overflow:visible}
.intro.ready .intro-svg{display:none}
.intro-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:-1px}
.intro-skip{position:absolute;right:24px;bottom:24px;z-index:2;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(26,29,36,.8);color:var(--text-2);font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  transition:color .2s ease,border-color .2s ease}
.intro-skip:hover,.intro-skip:focus-visible{color:var(--text);border-color:var(--yellow)}
.intro-skip:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
/* The 2D version (phones, no WebGL): the same order, letters, line, swoosh, mark. */
.intro.flat .intro-part{opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:intro-rise .7s cubic-bezier(.2,.8,.2,1) forwards}
.intro.flat .intro-title{animation-delay:.1s}
.intro.flat .intro-sub{animation-delay:.6s}
.intro.flat .intro-rules{transform-origin:50% 50%;animation-name:intro-wide;animation-delay:.9s}
.intro.flat .intro-yellow,.intro.flat .intro-red{transform-origin:50% 50%;animation-name:intro-pop;animation-delay:1.1s}
.intro.flat .intro-tm{transform-origin:50% 50%;animation-name:intro-pop;animation-delay:1.35s}
@keyframes intro-rise{from{opacity:0;transform:translateY(14%)}to{opacity:1;transform:none}}
@keyframes intro-wide{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}
@keyframes intro-pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.intro-on .intro{display:none}}

/* "New" announcement chip above the homepage hero (links to /greetings) */
.new-chip{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin-bottom:18px;padding:6px 14px 6px 6px;border:1px solid rgba(255,208,0,.45);border-radius:999px;background:rgba(255,208,0,.08);color:#fff;font-size:15px;font-weight:600;line-height:1.3;text-decoration:none;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.new-chip b{flex:none;padding:3px 10px;border-radius:999px;background:var(--yellow);color:var(--on-yellow);font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.new-chip i{font-style:normal;color:var(--yellow);transition:transform .3s var(--ease)}
.new-chip:hover{background:rgba(255,208,0,.16);border-color:rgba(255,208,0,.8)}
.new-chip:hover i{transform:translateX(3px)}
@media (max-width:600px){.new-chip{font-size:13.5px}}