/* Prismatic Syntax — ink, paper and one blue.
   Single source of truth for colour, type, shape and glass. Every page links this file;
   nothing below it should carry a literal colour value.

   Hard rule: blue carries white text on top of it, never ink. As small text on
   ink, use --blue-light: #0046ff on #05090d is too dark to read at body size. */

/* The typefaces, served from this domain rather than Google. Hotlinking them sent every
   visitor's IP to Google on page load, before anything was consented to, on a site that
   deliberately serves people abroad. Both families are variable, so one file per family
   per subset covers every weight the site uses. Nothing here calls a third-party host. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-tight-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-tight-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/manrope-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
  --ink:        #05090d;                  /* nav, dark sections, footer */
  --ink-2:      #0a0f16;                  /* raised surfaces on ink */
  --paper:      #fdfdfd;                  /* light page background */
  --mist:       #f4f6f8;                  /* alternate light band */
  --surface:    #ffffff;                  /* cards on paper or mist */
  --line:       #e4e7ec;                  /* hairlines on light */
  --line-dark:  rgba(255, 255, 255, .1);  /* hairlines on ink */
  --text:       #111317;                  /* headings and body on light */
  --grey:       #5a5f69;                  /* secondary text on light */
  --grey-dark:  rgba(255, 255, 255, .72); /* secondary text on ink */
  --blue:       #0046ff;                  /* accent: buttons, links, active states */
  --blue-dark:  #0038cc;                  /* accent hover */
  --blue-light: #6f9bff;                  /* accent as small text on ink */
  --whatsapp:   #25D366;                  /* the floating chat button only */

  --f-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Manrope", "Helvetica Neue", Arial, sans-serif;
  --ease:      cubic-bezier(.16, 1, .3, 1);

  /* Corners nest the way Apple's do: whatever sits inside a container takes a
     smaller radius than the container, and controls are capsules. */
  --r-lg:28px;--r-md:20px;--r-sm:14px;--r-xs:10px;--r-pill:999px;
  /* Liquid Glass, matched to iOS 27 on a device: clear rather than tinted, a heavy
     blur that pulls colour up from whatever is behind, and a bright rim that
     catches the light at the corners (the ::after ring further down). Dark over
     dark content and frosted white over light content, like the system controls. */
  --glass-fill:color-mix(in srgb,var(--ink) 52%,transparent);
  --glass-fill-light:color-mix(in srgb,var(--surface) 70%,transparent);
  --glass-blur:blur(22px) saturate(190%);
  --glass-edge:color-mix(in srgb,var(--surface) 14%,transparent);
  --glass-rim:linear-gradient(150deg,color-mix(in srgb,var(--surface) 62%,transparent),color-mix(in srgb,var(--surface) 12%,transparent) 32%,color-mix(in srgb,var(--surface) 4%,transparent) 58%,color-mix(in srgb,var(--surface) 34%,transparent));
  --glass-shine:inset 0 1px 0 color-mix(in srgb,var(--surface) 18%,transparent),0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent);
  /* Light cards sit on the page the way iOS widgets do: barely lifted. */
  --lift:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent),0 14px 34px -20px color-mix(in srgb,var(--ink) 22%,transparent);
  /* Dark bands get a soft blue light behind them, so the glass on them has colour to pick up. */
  --ink-glow:radial-gradient(55% 60% at 88% 0%,color-mix(in srgb,var(--blue) 24%,transparent),transparent 72%),radial-gradient(45% 55% at 0% 100%,color-mix(in srgb,var(--blue) 12%,transparent),transparent 70%),var(--ink);
  --glass-rim-light:linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--surface) 30%,transparent) 40%,color-mix(in srgb,var(--surface) 70%,transparent));
  /* light-band cards as glass: bright where the light comes in, thinner and a shade
     cooler where it leaves */
  --glass-card:linear-gradient(155deg,var(--surface) 12%,color-mix(in srgb,var(--surface) 40%,transparent) 68%,color-mix(in srgb,var(--line) 50%,transparent));
  --glass-card-rec:linear-gradient(155deg,color-mix(in srgb,var(--blue) 4%,var(--surface)) 12%,color-mix(in srgb,var(--blue) 7%,transparent) 68%,color-mix(in srgb,var(--blue) 13%,transparent));
  --glass-card-edge:color-mix(in srgb,var(--ink) 8%,transparent);
}

/* Apple's corners are continuous curves. Where the browser can draw one, the radii
   grow to keep the same visual roundness; each stylesheet opts its boxes in with
   corner-shape. */
@supports (corner-shape:squircle) {
  :root { --r-lg:46px; --r-md:34px; --r-sm:24px; --r-xs:16px; }
  .glass-stage :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.founder,.incl,.tier,.stat-box,.cta-box)::before { corner-shape:squircle; }
}

/* ── CLEAR GLASS ── iOS's clear glass: you see what is behind it, bent at the edges,
   under a lit bezel. A light section is flat, so each one that holds cards gets a still
   of the prism to sit over (.glass-wall, a different angle per section). Every card
   shows its own copy of that still (::before), lined up with the real one by home.js and
   blown up a little, so what shows through a card no longer lines up with what shows
   beside it: that offset at the rim is the refraction. The middle is frosted (::after),
   because grey and blue text needs about 86% white over the prism's darkest blue to stay
   readable; the rim stays clear, and that is where the prism shows.
   Backgrounds and a transform only. Filters and masks here turned to black rectangles on
   several iPhones, which is also why the copy is only drawn on cards near the screen
   (.is-lit, set by home.js). A section's cards are listed in GLASS in home.js too. */
.glass-stage { position:relative; }
.band.glass-stage { overflow:clip; }
.glass-wall { position:absolute; left:var(--x,50%); top:var(--y,55%); width:var(--w,clamp(320px,30vw,460px)); height:auto; transform:translate(-50%,-50%); pointer-events:none; user-select:none; }
@media (max-width:760px) { .glass-wall { left:var(--xm,50%); top:var(--ym,var(--y,55%)); width:var(--wm,min(80vw,340px)); } }
.glass-stage :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.founder,.incl,.tier,.stat-box,.cta-box) { overflow:hidden; border-color:color-mix(in srgb,var(--surface) 85%,transparent); box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 9%,transparent),var(--lift); }
.glass-stage :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.founder,.incl,.tier,.stat-box,.cta-box).is-lit::before { content:''; position:absolute; inset:0; z-index:-2; border-radius:inherit; pointer-events:none; background:var(--wall) no-repeat var(--wx) var(--wy) / var(--ww) var(--wh); transform:scale(1.09); }
.glass-stage :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.founder,.incl,.tier,.stat-box,.cta-box)::after { inset:0; padding:0; -webkit-mask:none; mask:none; box-shadow:none; background:radial-gradient(118% 118% at 50% 46%,color-mix(in srgb,var(--surface) 88%,transparent) 0 58%,color-mix(in srgb,var(--surface) 30%,transparent) 100%); }
.glass-stage :is(.p-card.pop,.m-card.rec,.tier.rec)::after { background:radial-gradient(118% 118% at 50% 46%,color-mix(in srgb,color-mix(in srgb,var(--blue) 6%,var(--surface)) 88%,transparent) 0 58%,color-mix(in srgb,var(--blue) 12%,transparent) 100%); }
/* solid again wherever the glass cannot do its job */
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .glass-wall, .glass-stage :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.founder,.incl,.tier,.stat-box,.cta-box)::before { display:none; }
}

/* ── BACK TO TOP ── the glass button home.js adds to every page once it is a screen
   down. Glass like the nav, so it blurs what scrolls behind it, and it flips to frosted
   white over light sections the same way (home.js sets .on-light). It only fades: it
   never travels in. home.css and site.css stand it on top of their WhatsApp button. */
.to-top { position:fixed; right:calc(24px + env(safe-area-inset-right)); bottom:calc(24px + env(safe-area-inset-bottom)); z-index:180; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--glass-fill); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-shine); color:var(--surface); cursor:pointer; opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s, background-color .4s, box-shadow .4s, color .4s; }
.to-top.is-shown { opacity:1; visibility:visible; transition-delay:0s; }
.to-top::after { content:''; position:absolute; inset:0; padding:1px; border-radius:inherit; background:var(--glass-rim); -webkit-mask:linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0); -webkit-mask-composite:xor; mask:linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0); mask-composite:exclude; pointer-events:none; }
.to-top svg { width:20px; height:20px; transition:transform .3s var(--ease); }
.to-top:hover svg { transform:translateY(-2px); }
.to-top:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.to-top.on-light { background:var(--glass-fill-light); box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 7%,transparent), 0 10px 30px -16px color-mix(in srgb,var(--ink) 28%,transparent); color:var(--text); }
.to-top.on-light::after { background:var(--glass-rim-light); }
@media (max-width:760px) { .to-top { right:calc(18px + env(safe-area-inset-right)); bottom:calc(18px + env(safe-area-inset-bottom)); } }
/* the menu sheet covers the page, so there is nothing to go back to the top of */
body:has(.mobile-menu.open) .to-top { opacity:0; visibility:hidden; }
/* solid wherever the glass cannot do its job, as with the nav */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
  .to-top { background:var(--ink); }
  .to-top.on-light { background:var(--surface); }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .to-top { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--ink); }
  .to-top.on-light { background:var(--surface); box-shadow:0 0 0 1px var(--text); }
}
@media (prefers-reduced-motion:reduce) { .to-top:hover svg { transform:none; } }
@media print { .to-top { display:none; } }