/* Keystone Lab — Design System
   Global entry point. Consumers link THIS file only.
   Order: fonts → tokens → base reset. */

/* Keystone Lab — Webfonts
   Display / titles: Gotham (geometric grotesque, the wordmark face) — titles
   and big letters only.
   Body / small text: Space Mono (monospace) — body copy, captions, UI text.
   Accent script: "lab" is set in a handwritten marker hand. The original
   brand file was not provided; Caveat (Google Fonts) is the nearest match
   and is flagged as a substitution in readme.md. */

/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/68de847d-0dac-4ca9-9e50-ed6869cbe242.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ebd11c89-dfbc-4c54-96bc-b765af196f58.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/fdc0a542-7527-4729-8575-19d71719c07e.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;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/13590192-b341-4064-986e-a3c510347a73.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/68de847d-0dac-4ca9-9e50-ed6869cbe242.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ebd11c89-dfbc-4c54-96bc-b765af196f58.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fdc0a542-7527-4729-8575-19d71719c07e.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;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/13590192-b341-4064-986e-a3c510347a73.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;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/68de847d-0dac-4ca9-9e50-ed6869cbe242.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ebd11c89-dfbc-4c54-96bc-b765af196f58.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/fdc0a542-7527-4729-8575-19d71719c07e.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;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/13590192-b341-4064-986e-a3c510347a73.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cbdc8d96-5882-444a-aafa-97cd7dc87f2b.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/04dfe39f-2223-4921-b771-53fbeeef8845.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;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/521cad91-6977-4e76-a2d6-9ae9b5f63e9e.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;
}
/* vietnamese */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/f4079850-555d-4eda-a919-80b7f33aa82a.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/78326ed4-93b5-445b-94cf-e331b207e482.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;
}
/* latin */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/41323f44-e0ab-41d6-911a-e78da78628a3.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: 'Gotham';
  src: url("../fonts/c1940c1d-d911-4629-9d59-367e6b0bdd46.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url("../fonts/48701169-cfeb-405a-865b-09fd2627160d.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url("../fonts/0d1c78b4-0aea-4d3e-962a-0d81747f7d2d.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gotham';
  src: url("../fonts/38e48705-7667-4609-a8d7-d16a6c08e851.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Keystone Lab — Color
   A near-monochrome system: ink black + paper white, with one signature
   sky-blue accent (sampled #A8DEF8 from the brand mark) and its "+" motif.
   Restraint is the brand: color is used sparingly, as punctuation. */

:root {
  /* — Ink / neutrals ————————————————————————————— */
  --ink-900: #0A0A0A;   /* primary ink — logo black, headlines, body */
  --ink-800: #1A1A1C;   /* raised surfaces on dark, deep panels */
  --ink-700: #3A3A3E;   /* secondary text on light */
  --ink-600: #4E4E54;   /* body copy on light */
  --ink-500: #6E6E76;   /* muted / captions / meta */
  --ink-400: #93939A;   /* faint meta, list numbers */
  --ink-300: #B8B8BE;   /* disabled text, hairline-on-dark */
  --ink-200: #DCDCDF;   /* hairline borders on light */
  --ink-100: #EEEEF0;   /* subtle fills, hover wash */
  --paper:   #F7F7F5;   /* off-white page (warm paper) */
  --white:   #FFFFFF;   /* pure white cards / reverse text */

  /* — Sky (signature accent) —————————————————————— */
  --sky-500: #A8DEF8;   /* brand blue — the mark, the "+", accents */
  --sky-600: #7FCBF2;   /* pressed / deeper accent */
  --sky-400: #C6E9FB;   /* hover wash, tints */
  --sky-200: #E4F5FE;   /* faint background tint */
  --sky-ink: #0A3A52;   /* readable text on a sky field */

  /* — Semantic ——————————————————————————————————— */
  --success: #4FB477;
  --warning: #E3A32B;
  --danger:  #E0503A;
  --info:    var(--sky-500);

  /* — Semantic surface / text aliases ————————————— */
  --bg-page:        var(--paper);
  --bg-surface:     var(--white);
  --bg-inverse:     var(--ink-900);
  --bg-accent:      var(--sky-500);
  --bg-accent-soft: var(--sky-200);
  --bg-hover:       var(--ink-100);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-inverse:   var(--white);
  --text-on-accent: var(--sky-ink);
  --text-accent:    var(--sky-600);

  --border-hair:    var(--ink-200);
  --border-strong:  var(--ink-900);
  --border-accent:  var(--sky-500);
}

/* Keystone Lab — Typography
   Gotham does all the work. The signature move is the WORDMARK register:
   uppercase Gotham with wide, even letter-spacing — architectural, calm,
   confident. Body is set in Gotham Book at a comfortable reading measure.
   The Caveat script is reserved for the "lab" accent only — never body copy. */

:root {
  /* — Families ——————————————————————————————————— */
  --font-display: 'Gotham', 'Helvetica Neue', Arial, sans-serif;  /* titles & big letters */
  --font-body:    'Space Mono', 'Courier New', ui-monospace, monospace;  /* body & small text */
  --font-script:  'Caveat', 'Segoe Script', cursive;   /* "lab" accent only */

  /* — Weights ————————————————————————————————————— */
  --fw-book:   400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-bold:   700; /* @kind font */
  --fw-black:  900; /* @kind font */

  /* — Type scale (fluid-ready base 16px) ——————————— */
  --fs-3xs: 0.6875rem;  /* 11 — micro labels, legal */
  --fs-2xs: 0.75rem;    /* 12 — meta, eyebrow caption */
  --fs-xs:  0.8125rem;  /* 13 — small UI, tags */
  --fs-sm:  0.9375rem;  /* 15 — dense UI text */
  --fs-md:  1rem;       /* 16 — body base */
  --fs-lg:  1.1875rem;  /* 19 — lead paragraph */
  --fs-xl:  1.5rem;     /* 24 — small headings */
  --fs-2xl: 2rem;       /* 32 — H3 */
  --fs-3xl: 2.75rem;    /* 44 — H2 */
  --fs-4xl: 3.75rem;    /* 60 — H1 */
  --fs-5xl: 5.5rem;     /* 88 — display */
  --fs-6xl: 8rem;       /* 128 — hero mega */

  /* — Line height ————————————————————————————————— */
  --lh-tight:   1.02;   /* @kind font */
  --lh-snug:    1.12;   /* @kind font */
  --lh-normal:  1.5;    /* @kind font */
  --lh-relaxed: 1.65;   /* @kind font */

  /* — Letter-spacing —————————————————————————————— */
  --ls-mega:   -0.02em;  /* huge display tightens up @kind font */
  --ls-tight:  -0.01em;  /* @kind font */
  --ls-normal: 0;        /* @kind font */
  --ls-wide:   0.08em;   /* eyebrows, small caps labels @kind font */
  --ls-wordmark: 0.34em; /* the KEYSTONE wordmark register @kind font */
  --ls-wider:  0.18em;   /* section eyebrows @kind font */
}

/* Keystone Lab — Spacing & layout
   An 8px base rhythm with generous, editorial whitespace. Premium =
   space to breathe: sections are wide, margins are large, density is low. */

:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 192px;

  /* — Layout ————————————————————————————————————— */
  --container-max: 1280px;
  --container-wide: 1560px;
  --gutter: 24px;
  --section-y: 128px;      /* vertical rhythm between page sections */
  --section-y-sm: 80px;
}

/* Keystone Lab — Effects: radii, borders, shadows, motion
   The brand is architectural and precise. Corners are mostly SHARP or barely
   softened — a keystone is a hard-edged block. Shadows are soft and low, used
   only to float a card off the page, never heavy. Motion is confident and
   smooth with a signature ease — no bounce, no gimmicks. */

:root {
  /* — Radii ——————————————————————————————————————— */
  --radius-none: 0;       /* default — sharp, architectural */
  --radius-xs:   2px;
  --radius-sm:   4px;     /* inputs, small controls */
  --radius-md:   8px;     /* cards */
  --radius-lg:   14px;    /* large panels, modals */
  --radius-pill: 999px;   /* pills, tags, round buttons */

  /* — Borders ————————————————————————————————————— */
  --border-1: 1px;
  --border-2: 2px;        /* the signature confident hairline+ */
  --stroke-mark: 3px;     /* keystone-mark stroke weight */

  /* — Shadows (soft, cool, low) ——————————————————— */
  --shadow-xs: 0 1px 2px rgba(10,10,10,0.05);
  --shadow-sm: 0 2px 8px rgba(10,10,10,0.06);
  --shadow-md: 0 10px 30px rgba(10,10,10,0.08);
  --shadow-lg: 0 24px 60px rgba(10,10,10,0.12);
  --shadow-sky: 0 16px 40px rgba(127,203,242,0.35);   /* accent glow */
  --focus-ring: 0 0 0 3px rgba(168,222,248,0.6);

  /* — Motion —————————————————————————————————————— */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);      /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);      /* @kind other */
  --ease-swift:  cubic-bezier(0.4, 0, 0.2, 1);        /* @kind other */
  --dur-fast:   140ms;    /* @kind other */
  --dur-base:   260ms;    /* @kind other */
  --dur-slow:   520ms;    /* @kind other */
  --dur-reveal: 900ms;    /* @kind other */
}

/* Keystone Lab — Base reset & primitives
   Lightweight, opinionated defaults so any consuming page inherits the brand
   voice without extra work. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-book);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings — Gotham, tight, dark ink */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }

p { margin: 0 0 1em; text-wrap: pretty; }

/* Wordmark / eyebrow register — the signature spaced uppercase */
.ks-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.ks-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
}
.ks-script { font-family: var(--font-script); letter-spacing: 0; }

/* Links — inherit ink, sky underline on hover */
a { color: var(--text-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--text-accent); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

::selection { background: var(--sky-500); color: var(--ink-900); }




  html,body{height:100%}
  body{margin:0;background:var(--paper);overflow:hidden}
  #app{height:100vh;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
  #app::-webkit-scrollbar{width:10px}
  #app::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:10px}
  @keyframes klRise{from{transform:translateY(105%)}to{transform:translateY(0)}}
  @keyframes klFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  @keyframes klFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(2deg)}}
  @keyframes klZoom{from{transform:scale(1.12)}to{transform:scale(1)}}
  @keyframes klPage{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── Gallery lightbox ─────────────────────────────────────── */
.kl-lb{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(8,8,8,.94);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.kl-lb.is-open{display:flex;animation:klLbFade .18s ease}
@keyframes klLbFade{from{opacity:0}to{opacity:1}}
.kl-lb-fig{margin:0;max-width:92vw;max-height:88vh;display:flex;align-items:center;justify-content:center}
.kl-lb-img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;
  border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:block;animation:klLbFade .2s ease}
.kl-lb-img.kl-lb-in{animation:klLbFade .2s ease}
.kl-lb-close,.kl-lb-nav{position:fixed;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);
  cursor:pointer;line-height:1;transition:background .15s ease,transform .15s ease;z-index:1}
.kl-lb-close:hover,.kl-lb-nav:hover{background:rgba(255,255,255,.2)}
.kl-lb-close{top:22px;right:24px;width:44px;height:44px;border-radius:50%;font-size:26px}
.kl-lb-nav{top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;font-size:30px}
.kl-lb-nav:hover{transform:translateY(-50%) scale(1.06)}
.kl-lb-prev{left:24px}.kl-lb-next{right:24px}
.kl-lb-count{position:fixed;bottom:24px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);
  font-size:13px;letter-spacing:.08em;font-family:var(--font-mono,monospace)}
@media(max-width:640px){.kl-lb-nav{width:42px;height:42px;font-size:24px}
  .kl-lb-prev{left:10px}.kl-lb-next{right:10px}.kl-lb-close{top:14px;right:14px}}

/* ── Case study « Back » button ───────────────────────────── */
.kl-back{transition:background .15s ease,transform .15s ease}
.kl-back:hover{background:rgba(0,0,0,.62)!important;transform:translateX(-2px)}
@media(max-width:640px){.kl-back{top:74px!important;left:16px!important;padding:8px 14px!important}}

/* ═══════════ Mobile responsive (Keystone Lab) ═══════════ */
#kl-burger,#kl-menu{display:none}
@media(max-width:760px){
  html,body{overflow-x:hidden;max-width:100%}
  header{padding:12px 16px !important}
  header>div{display:none !important}       /* clock */
  header nav{display:none !important}        /* desktop links + lang */
  #kl-burger{display:flex;position:fixed;top:11px;right:14px;z-index:60;width:44px;height:44px;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
    background:rgba(15,15,15,.40);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.20);border-radius:12px;cursor:pointer;padding:0}
  #kl-burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px}
  #kl-menu{display:flex;position:fixed;inset:0;z-index:70;flex-direction:column;
    align-items:flex-start;justify-content:center;gap:4px;padding:32px 30px;
    background:rgba(10,10,10,.975);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;pointer-events:none;transition:opacity .25s ease}
  body.kl-menu-open #kl-menu{opacity:1;pointer-events:auto}
  #kl-menu-close{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:27px;line-height:1;cursor:pointer}
  #kl-menu-links{display:flex;flex-direction:column;gap:4px}
  .kl-menu-link{font-family:var(--font-display,'Helvetica Neue',sans-serif);font-weight:800;text-transform:uppercase;
    font-size:clamp(34px,11vw,52px);line-height:1.18;letter-spacing:-.01em;color:#fff;text-decoration:none}
  .kl-menu-link:active{color:var(--sky-500,#8fd0ff)}
  #kl-menu-lang{display:flex;gap:16px;margin-top:38px}
  .kl-menu-lang-btn{background:none;border:none;color:rgba(255,255,255,.5);font-family:var(--font-mono,monospace);
    font-size:14px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:6px 2px}
  .kl-menu-lang-btn.active{color:#fff;font-weight:700}
  /* Grids collapse */
  [style*="repeat(3"]{grid-template-columns:1fr !important}
  [style*="repeat(2"]{grid-template-columns:1fr !important}
  [style*="repeat(4"]{grid-template-columns:1fr 1fr !important}
  /* Landing giant title fits viewport */
  [style*="9.5vw"]{font-size:8.6vw !important}
  /* multi-column fr grids -> stack on mobile */
  [style*="0.9fr 1.1fr"],[style*="1.15fr 0.85fr"],[style*="1.1fr 1fr"],[style*="1.4fr 1fr 1.2fr"],[style*="1.4fr 1fr"],[style*="1fr 1.1fr"],[style*="1fr 1fr"]{grid-template-columns:1fr !important}
}
@media(min-width:761px){#kl-burger,#kl-menu{display:none !important}}

/* ═══════════ Mobile audit fixes (batch — not yet themed) ═══════════ */
@media(max-width:760px){
  /* 1 — Footer giant email no longer clipped: shrink + allow wrap */
  a[style*="clamp(30px, 5vw, 64px)"]{
    font-size:clamp(18px,5.6vw,24px) !important;
    gap:10px !important;
    word-break:break-word !important;
    max-width:100% !important;
  }
  /* 2 — Services / "What we do" list rows: let long titles wrap */
  [style*="clamp(18px, 2.1vw, 28px)"]{        /* home · What we do */
    white-space:normal !important;
    font-size:16px !important;
    line-height:1.15 !important;
  }
  [style*="clamp(20px, 2.8vw, 36px)"]{        /* services page rows */
    white-space:normal !important;
    font-size:18px !important;
    line-height:1.15 !important;
  }
  /* 3 — Oversized mono leads scaled down */
  [style*="clamp(22px, 2.5vw, 32px)"]{font-size:18px !important;line-height:1.32 !important}  /* aboutLead  */
  [style*="clamp(24px, 3.2vw, 44px)"]{font-size:22px !important;line-height:1.26 !important}  /* visionLead */
  /* 4 — Leftover vertical dividers on stacked stat / value grids */
  [style*="border-right: 1px solid var(--ink-800)"],
  [style*="border-right: 1px solid var(--ink-200)"]{border-right:0 !important}
  /* 5 — Value / stat cells: kill the wide 40px side padding once stacked */
  [style*="32px 40px"]{padding:24px 0 !important}
}