@font-face{font-family:'Bodoni Moda';font-weight:400 900;font-style:normal;font-display:swap;src:url(/fonts/bodoni-moda-855ea6.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-weight:200 800;font-style:normal;font-display:swap;src:url(/fonts/manrope-814019.woff2) format('woff2')}
/* v7 tokens (pi-clean/site/home/style.css), identical to proto-ai-section */
:root{
  --bg:#0a1220;--bg2:#0d1829;--bg3:#111f35;--ink:#f3eee4;--ink-2:#c9cfd8;--muted:#98a3b3;--gold:#c6a568;--gold-d:#7d5f2e;
  --hair:rgba(198,165,104,.24);--hair-strong:rgba(198,165,104,.55);--hair-faint:rgba(243,238,228,.08);
  --disp:'Bodoni Moda',Georgia,serif;--sans:'Manrope',system-ui,sans-serif;--fs-caps:11.5px;
  --s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --pad:clamp(24px,6vw,96px);--maxw:1320px;
  --ease-out:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);--t-med:.6s;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- section: text LEFT 34 / visual RIGHT 66 like AI (the three areas alternate), with a 410px floor so "presence online." holds one line at 56px ---------- */
.gr{position:relative;min-height:100vh;max-width:var(--maxw);margin:0 auto;padding:var(--s9) var(--pad);
  display:grid;grid-template-columns:minmax(410px,34fr) 66fr;gap:clamp(32px,4vw,72px);align-items:center}
.gr::before,.gr::after{content:"";position:absolute;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(90deg,transparent,var(--hair) 20%,var(--hair) 80%,transparent)}
.gr::before{top:0}.gr::after{bottom:0}
.gr-copy{position:relative;z-index:1}
.gr-label{display:flex;align-items:center;gap:16px;margin:0 0 var(--s6);font-size:var(--fs-caps);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.gr-label::after{content:"";width:48px;height:1px;background:var(--gold)}
.gr-h{font-family:var(--disp);font-weight:400;font-size:clamp(40px,3.6vw,56px);line-height:1.06;letter-spacing:-.01em;margin:0 0 var(--s6);color:var(--ink)}
.gr-h{text-wrap:balance}
.gr-ln{display:block}   /* used only by alternative headlines (see README) */
.gr-line{margin:0 0 var(--s7);font-size:12.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.gr-line .dot{display:inline-block;margin:0 .7em;color:var(--gold)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;
  font-family:var(--sans);font-size:var(--fs-caps);font-weight:600;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;
  padding:20px 38px;border:1px solid var(--gold);transition:color var(--t-med) var(--ease-out),border-color var(--t-med) var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform var(--t-med) var(--ease-io)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.btn:focus-visible{outline:1px solid var(--gold);outline-offset:5px}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--hair-strong)}
.btn.ghost::before{background:var(--gold)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--bg);border-color:var(--gold)}
/* Learn more: identical to .ai-more and the security section's more-link */
.gr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px}
.gr-more{display:inline-flex;align-items:center;gap:8px;padding:6px 0;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(243,238,228,.65);text-decoration:none;transition:color var(--t-med) var(--ease-out)}
.gr-more-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(243,238,228,.26);transition:text-decoration-color var(--t-med) var(--ease-out)}
.gr-more-arrow{display:inline-block;font-size:12px;letter-spacing:0;transition:transform var(--t-med) var(--ease-out)}
.gr-more:hover,.gr-more:focus-visible{color:var(--ink)}
.gr-more:hover .gr-more-t,.gr-more:focus-visible .gr-more-t{text-decoration-color:var(--gold)}
.gr-more:hover .gr-more-arrow,.gr-more:focus-visible .gr-more-arrow{transform:translateX(2px)}
.gr-more:focus-visible{outline:1px solid var(--gold);outline-offset:6px}

/* ---------- "presence": pw-bulb, copied from proto-ai-section (same layers + filament power-up), scoped to #grow ---------- */
.gr-lit.pw-bulb{color:#fff6e3;
  text-shadow:0 0 1px #fff0cc,0 0 2px #e6cf9c,0 0 4px #c6a568,0 0 9px rgba(222,168,80,.45),0 0 16px rgba(222,168,80,.14)}
/* sync: growth.js adds .fx-in on the frame its clock starts; the hub point switches on at 1.0 s, the word warms 0.15 s ahead of it */
#grow.fx-in .gr-lit.pw-bulb{animation:fx-filament 1.6s cubic-bezier(.3,0,.2,1) .85s both}
#grow.fx-armed:not(.fx-in) .gr-lit.pw-bulb{color:#c6a568;text-shadow:0 0 1px rgba(198,165,104,.4)}
@keyframes fx-filament{
  0%{color:#c6a568;text-shadow:0 0 1px rgba(198,165,104,.4),0 0 2px rgba(230,207,156,0),0 0 4px rgba(198,165,104,0),0 0 9px rgba(222,168,80,0),0 0 16px rgba(222,168,80,0)}
  42%{color:#fffbf2;text-shadow:0 0 1px #ffffff,0 0 3px #f6e2b4,0 0 6px #d9b56f,0 0 12px rgba(222,168,80,.7),0 0 22px rgba(222,168,80,.24)}
  54%{color:#fff3da;text-shadow:0 0 1px #fff0cc,0 0 2px #e6cf9c,0 0 4px #c6a568,0 0 8px rgba(222,168,80,.36),0 0 14px rgba(222,168,80,.10)}
  60%{color:#fff8ea;text-shadow:0 0 1px #fff4d8,0 0 2px #ecd6a6,0 0 5px #cdab6c,0 0 10px rgba(222,168,80,.52),0 0 18px rgba(222,168,80,.17)}
  100%{color:#fff6e3;text-shadow:0 0 1px #fff0cc,0 0 2px #e6cf9c,0 0 4px #c6a568,0 0 9px rgba(222,168,80,.45),0 0 16px rgba(222,168,80,.14)}}

/* ---------- map: "points of presence coming online" (abstract city plan; no real place, labels or numbers) ---------- */
.gr-vis{margin:0;position:relative;min-width:0}
.gr-stage{position:relative}
.gr-map{display:block;width:100%;height:auto;overflow:visible}
.gr-traffic,.gr-top{position:absolute;left:0;top:0;width:100%;height:100%;display:block;pointer-events:none}
.gr-top{overflow:visible}
/* city lighting up: dark footprints, then warm fills in waves from the pin, a few bright windows */
.gr-bldg-dark{fill:rgba(243,238,228,.022)}
.gr-b0{fill:rgba(196,146,74,.075)}
.gr-b1{fill:rgba(210,160,86,.12)}
.gr-b2{fill:rgba(224,176,100,.17)}
.gr-b3{fill:rgba(240,200,130,.25)}
.gr-win{fill:#fbe7b8;fill-opacity:.85}
/* frozen traffic (reduced motion / no JS) */
.gr-sk-th{fill:none;stroke:rgba(255,241,210,.30);stroke-width:1;stroke-linecap:round}
.gr-sk-tt{fill:none;stroke:rgba(217,167,90,.30);stroke-width:1;stroke-linecap:round}
.gr-sk-hh{fill:#fff1d2;opacity:.85}
.gr-sk-ht{fill:#e0b46a;opacity:.85}
.gr-side{fill:none;stroke:rgba(243,238,228,.055);stroke-width:.7}
.gr-water{fill:#0c1729}
.gr-contour{fill:none;stroke:rgba(198,165,104,.085);stroke-width:.6}
.gr-shore2{fill:none;stroke:rgba(198,165,104,.10);stroke-width:.8}
.gr-coast{fill:none;stroke:rgba(214,185,124,.42);stroke-width:1.1}
.gr-river-bank{fill:none;stroke:rgba(198,165,104,.26);stroke-width:15;stroke-linecap:round}
.gr-river{fill:none;stroke:#0c1729;stroke-width:13;stroke-linecap:round}
.gr-ave{fill:none;stroke:rgba(243,238,228,.15);stroke-width:1;stroke-linejoin:round}
.gr-main{fill:none;stroke:rgba(230,207,156,.30);stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.gr-pt{fill:#f7e9c6}
.gr-hub .gr-pt{fill:#fff6e3}
.gr-ping{fill:none;stroke:#e2c88f;stroke-width:1}   /* hidden via its opacity attribute (JS animates it; CSS opacity would override) */
.gr-pin-body{fill:#0a1220;stroke:#e6cf9c;stroke-width:1.3;stroke-linejoin:round}
.gr-pin-eye{fill:#fff6e3}
.gr-pin-shadow{fill:rgba(198,165,104,.28)}
@media (max-width:860px){
  .gr{grid-template-columns:1fr;min-height:auto;padding:var(--s8) 22px var(--s9);gap:var(--s7);overflow-x:clip}
  .gr-vis{order:-1;margin:0 -10px}
  .gr-h{font-size:clamp(38px,10.5vw,46px)}
  .gr-side{stroke-width:1.4}.gr-ave{stroke-width:2}.gr-main{stroke-width:3}.gr-coast{stroke-width:2}.gr-contour{stroke-width:1.1}
  .gr-ping{stroke-width:2}.gr-sk-th,.gr-sk-tt{stroke-width:1.8}.gr-pin-body{stroke-width:2.2}
  .gr-pt{r:4.4px}.gr-hub .gr-pt{r:3px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.gr-more,.gr-more-t,.gr-more-arrow{transition:none}
  #grow.fx-in .gr-lit.pw-bulb{animation:none}
}