/* ==================================================================
   TABLE OF CONTENTS — styles.css
   Search this file for a tag like [CSS-05] to jump to a section.
   ==================================================================
   [CSS-01]  BASE — reset and defaults
   [CSS-02]  BACKGROUND — photo backdrop
   [CSS-03]  LAYOUT — helpers
   [CSS-04]  GLASS — base material
   [CSS-05]  GLASS-CLEAR — nav and drawer
   [CSS-06]  NAV — base
   [CSS-07]  HERO
   [CSS-08]  ABOUT
   [CSS-09]  WHY HIRE
   [CSS-10]  EMOJI ICONS
   [CSS-11]  EXPERIENCE — timeline
   [CSS-12]  EXPERIENCE — engagement cards
   [CSS-13]  EXPERIENCE — nested roles
   [CSS-14]  SKILLS
   [CSS-15]  CERTIFICATIONS
   [CSS-16]  PROJECTS — case studies
   [CSS-17]  INFRASTRUCTURE LAB
   [CSS-18]  EDUCATION
   [CSS-19]  ACHIEVEMENTS
   [CSS-20]  REFERENCES
   [CSS-21]  CONTACT — base
   [CSS-22]  FOOTER
   [CSS-23]  SCROLL REVEAL — basic
   [CSS-24]  ANIMATION FOUNDATION — data-reveal / tilt / depth
   [CSS-25]  SCROLL PROGRESS BAR
   [CSS-26]  HERO — scroll-scrubbed photo + cycling role text
   [CSS-27]  SECTION HEADERS — mirrored
   [CSS-28]  CARD DIAMOND corner accent
   [CSS-29]  RECRUITER BAR + TECHNICAL ARSENAL + PROOF OF WORK
   [CSS-30]  GLASS OVERRIDE — crystal-clear pass (later rules win)
   [CSS-31]  GLASS OVERRIDE — Liquid Glass refinement
   [CSS-32]  AMBIENT MOTION
   [CSS-33]  BUTTONS 1 — pill shape
   [CSS-34]  BUTTONS 2 — Liquid Capsule system
   [CSS-35]  BUTTONS 3 — shared base
   [CSS-36]  BUTTONS 4 — roles (primary / secondary / ghost)
   [CSS-37]  BUTTONS 5 — glass lens (icon-only round controls)
   [CSS-38]  BUTTONS 6 — hover
   [CSS-39]  BUTTONS 7 — focus ring
   [CSS-40]  BUTTONS 8 — press
   [CSS-41]  BUTTONS 9 — responsive
   [CSS-42]  BUTTONS 10 — accessibility
   [CSS-43]  LOGOS — Pearl Plate system
   [CSS-44]  NAVBAR — capsule links + mobile fixes
   [CSS-45]  CONTACT — Liquid Pane (overrides Contact base)
   [CSS-46]  WIDE SCREENS — ambient rail
   [CSS-47]  WIDE SCREENS — side rail
   [CSS-48]  NAV — one "Let's talk" on phones / tablets
   [CSS-49]  COMMAND CONSOLE
   [CSS-50]  PANELS — one size, home to footer
   [CSS-51]  READABILITY pass (white text)
   [CSS-52]  VIEWER GATE + DOCUMENT VIEWER
   [CSS-53]  STATUS PAGE
   [CSS-54]  REFERENCE-CALL BUTTON
   [CSS-55]  QR DIGITAL BUSINESS CARD
   [CSS-56]  LIVE FOCUS SLIDER
   [CSS-57]  NETWORK DIAGNOSTICS DEMO
   [CSS-58]  TICKET TRIAGE DEMO
   [CSS-59]  IT TOOLKIT
   [CSS-60]  ACCENT SWITCHER — colour dots next to the Aa toggle
   [CSS-61]  FILE ORGANIZER PREVIEW — toolkit modal
   [CSS-61a] SAFEGUARDS — what is kept from the removed Warm-White pass
   [CSS-61b] MOBILE — one glass layer only (phones, <=640px)
   [CSS-end] STAGGER INDEX + small helpers (replaces old inline style="" attributes)
   [CSS-62]  DISPLAY DOCK — the focus/accent/bold bar, moved to the right edge
   [CSS-63]  DARK SURFACE THEMES — Sapphire / Amethyst / Oxblood / Forest / Bronze / Slate / Plum / Teal / Cobalt
   [CSS-64]  NOW — "what I'm working on right now" cards (grid + status chips)
   [CSS-65]  CERTIFICATE HASH VERIFICATION — seal pill, hash box, "Certified record" state
   [CSS-66]  PRINT-FRIENDLY CV
   [CSS-67]  TERMINAL — interactive shell panel
   [CSS-68]  SKILLS RADAR — "orbit gauge" (concentric segmented rings) above .skills-grid
   [CSS-69]  SECTION HEADINGS — numbered label (numbers set by [JS-55]), ghost number, word reveal
   [CSS-71]  CONTACT + FOOTER JOIN — contact and footer glass share one edge, no gap; footer lexicon (coined words)
   [CSS-70]  TRANSPARENT GLASS — no fills, no tint, no sheen on any panel/card; edges stay. Text colour: [JS-50] dots
   Note: later PART sections intentionally override earlier ones (CSS cascade), so order matters. Do not reorder.
   ================================================================== */

/* =============================================================
   Sajid Mehmood — Portfolio
   Neutral frosted-glass design system (gray tint, blue + slate accents)
   ============================================================= */

:root{
  /* ---- palette ---- */
  --bg-deep:#0A0C0D;
  --bg-panel:#15171A;
  --bg-panel-2:#111214;
  /* 0 = Clear, 1 = Tinted — set live by the Clear <-> Blurred slider in
     script.js [JS-22]. Defaults to 0 so the very first paint (and a no-JS
     visit) matches the slider's own starting position, 0px = Clear. */
  --glass-amt: 0;
  /* Dark backing behind text on glass. --glass-floor is the minimum, what
     "Clear" keeps so type stays readable over the photo; --glass-ceil is the
     maximum at full Tinted (it used to be .46-.52). Tune these two numbers
     to make every glass card lighter or heavier at once. */
  --glass-floor: .14;
  --glass-ceil:  .32;
  --glass-veil:  calc(var(--glass-floor) + (var(--glass-ceil) - var(--glass-floor)) * var(--glass-amt));
  --veil-card:   rgba(13,14,16, calc(var(--glass-veil) * .8));   /* under-layer for role cards / career tiles */
  --glass-tint: rgba(255,255,255, calc(.06 * var(--glass-amt)));
  --glass-tint-strong: rgba(255,255,255, calc(.13 * var(--glass-amt)));
  --glass-border: rgba(255,255,255,.18);
  --glass-border-bright: rgba(255,255,255,.55);
  --accent:#5BAEF5;
  --accent-rgb:91,174,245;
  --accent-deep:#2F86D6;  --accent-deep-rgb:47,134,214;
  --accent-light:#CFE6FB; --accent-light-rgb:207,230,251;
  /* the accent switcher (script.js, ACCENT SWITCHER) overwrites the 6 values above */
  --accent-dim: rgba(var(--accent-rgb),.16);
  --amber:#8FA8BD;
  --amber-dim: rgba(143,168,189,.16);
  /* text hierarchy — white-based alpha scale so contrast is guaranteed
     against any part of the background photo, per the Liquid Glass
     readability pass (Part 6) */
  --text-rgb:255,255,255;   /* set by the theme picker (script.js) */
  --on-accent:#06182B;      /* text drawn on accent-coloured buttons */
  --text:#FFFFFF;
  --text-dim:rgba(255,255,255,.82);
  --text-faint:rgba(255,255,255,.68);
  --text-primary: var(--text);
  --text-secondary: var(--text-dim);
  --text-tertiary: var(--text-faint);
  --danger:#FF6B6B;

  /* ---- type — Apple system stack (Liquid Glass pass) ---- */
  --ff-display:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ff-body:"Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ff-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* ---- shape / depth ---- */
  --radius-lg:30px;
  --radius-md:22px;
  --radius-sm:14px;
  --shadow-ambient: 0 40px 90px -32px rgba(0,0,0,.55);
  --shadow-contact: 0 2px 10px rgba(0,0,0,.3);
  --blur-glass: blur(34px) saturate(1.7) contrast(1.05);
  --blur-section: blur(calc(2px * var(--glass-amt))) saturate(calc(1 + .3 * var(--glass-amt))) contrast(calc(1 + .02 * var(--glass-amt))); /* light blur for whole-section glass panels — shared by hero/.section/recruiter-bar */
  --blur-nav: blur(calc(18px * var(--glass-amt))) saturate(calc(1 + .35 * var(--glass-amt))) contrast(calc(1 + .03 * var(--glass-amt))); /* nav + mobile drawer (.glass-clear), tied to the same Clear/Tinted slider */

  --container: 1320px;
  --edge: clamp(20px, 4vw, 56px);

  /* shared outer-panel sizing — every top-level glass panel (hero,
     .section, recruiter bar) uses this so they're all the exact same
     width and stay centered, instead of each drifting to its own
     max-width/margin combo */
  --panel-max: 1560px;
  --panel-gutter: clamp(16px, 3.2vw, 40px);
}

/* ==================================================================
   [CSS-01]  BASE — reset and defaults
   ================================================================== */

/* ---------------------------------------------------------------
   Reset & base
--------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overscroll-behavior-y:none; background:var(--bg-deep); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
body{
  margin:0;
  background:var(--bg-deep);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--ff-display); margin:0; font-weight:600; letter-spacing:-.01em; }
.hero h1, .section h2, .contact-panel h2{ letter-spacing:-.03em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

::selection{ background:var(--accent-dim); color:var(--text); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ==================================================================
   [CSS-02]  BACKGROUND — photo backdrop
   ================================================================== */

/* ---------------------------------------------------------------
   Backdrop — the landscape photo, with a dark gradient wash for
   text legibility and the accent glows layered on top
--------------------------------------------------------------- */
.bg-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--bg-deep);
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  will-change:transform;
}
.bg-field::before{
  content:'';
  position:absolute; inset:0;
  background-image:url('assets/bg-landscape.jpg');
  background-size:cover;
  background-position:center 42%;
  filter:saturate(1.15) brightness(.86) contrast(1.04);
}
.bg-field::after{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 900px 600px at 12% -6%, rgba(var(--accent-rgb),.09), transparent 60%),
    radial-gradient(ellipse 700px 500px at 92% 18%, rgba(143,168,189,.10), transparent 55%),
    linear-gradient(180deg, rgba(8,9,10,.28) 0%, rgba(8,9,10,.30) 40%, rgba(8,9,10,.56) 100%);
}
.bg-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==================================================================
   [CSS-03]  LAYOUT — helpers
   ================================================================== */

/* ---------------------------------------------------------------
   Layout helpers
--------------------------------------------------------------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 var(--edge); position:relative; z-index:2; }
.section{
  position:relative; z-index:2;
  padding:112px 0;
  width:min(var(--panel-max), calc(100% - 2 * var(--panel-gutter)));
  margin:0 auto 28px;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(168deg, rgba(255,255,255,.10) 0%, var(--glass-tint) 16%, rgba(255,255,255,.02) 62%);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-border-bright);
  backdrop-filter:var(--blur-section);
  -webkit-backdrop-filter:var(--blur-section);
  box-shadow:
    var(--shadow-ambient),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -18px 30px -26px rgba(0,0,0,.3);
  overflow:hidden;
}
.section:last-of-type{ margin-bottom:0; }
.section-label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-mono); font-size:13px; color:var(--accent);
  margin-bottom:14px;
}
.section-label .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.section h2{ font-size:clamp(28px,3.4vw,40px); max-width:640px; }
.section-intro{ color:var(--text-dim); max-width:560px; margin-top:14px; font-size:16px; }

/* ==================================================================
   [CSS-04]  GLASS — base material
   ================================================================== */

/* ---------------------------------------------------------------
   The glass material — used everywhere a panel appears
--------------------------------------------------------------- */
.glass{
  position:relative;
  background:
    linear-gradient(168deg, rgba(255,255,255,.26) 0%, var(--glass-tint-strong) 14%, var(--glass-tint) 60%);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-border-bright);
  border-radius:var(--radius-lg);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  box-shadow:
    var(--shadow-ambient),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 -18px 30px -22px rgba(0,0,0,.35),
    var(--shadow-contact);
  overflow:hidden;
}
/* specular highlight tracking the pointer (set via --mx/--my in JS) */
.glass::before{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,20%), rgba(255,255,255,.30), transparent 62%);
  opacity:0; transition:opacity .35s ease;
}
.glass:hover::before{ opacity:1; }
.glass > *{ position:relative; z-index:1; }

.glass-tight{ border-radius:var(--radius-md); }

/* ==================================================================
   [CSS-05]  GLASS-CLEAR — nav and drawer
   ================================================================== */

/* ---------------------------------------------------------------
   Glass-clear — nav + mobile drawer (Part 2).
   Tied to the same --glass-amt slider as every other glass panel:
   at 0 (Clear) it's a thin bordered surface with no backdrop blur,
   letting the sharp photo show straight through; at 1 (Tinted) it
   picks up --blur-nav and a slightly richer tint, matching the rest
   of the site's glass. Does not affect .glass used elsewhere.
--------------------------------------------------------------- */
.glass-clear{
  position:relative;
  background:
    linear-gradient(168deg, rgba(255,255,255, calc(.09 * var(--glass-amt) + .03)) 0%, rgba(255,255,255, calc(.03 * var(--glass-amt) + .01)) 60%),
    rgba(13,14,16, calc(var(--glass-veil) * .5));
  border:1px solid rgba(255,255,255,.14);
  border-top-color:rgba(255,255,255,.4);
  border-radius:var(--radius-lg);
  backdrop-filter:var(--blur-nav);
  -webkit-backdrop-filter:var(--blur-nav);
  box-shadow:
    0 22px 50px -24px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -14px 24px -20px rgba(0,0,0,.3);
  overflow:hidden;
}
.glass-clear > *{ position:relative; z-index:1; }

/* ==================================================================
   [CSS-06]  NAV — base
   ================================================================== */

/* ---------------------------------------------------------------
   Nav
--------------------------------------------------------------- */
.nav{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  z-index:50; width:min(calc(100% - 32px), 1560px);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px 10px 20px;
}
/* Entrance fades opacity only — never touches `transform`, so it can
   never fight the translateX(-50%) centering above. This is the fix
   for the navbar losing its centering after its reveal animation ran
   (it previously shared [data-reveal]'s transform property, which
   overwrote translateX(-50%) once the cascade resolved). */
.nav-in{ animation:navFadeIn .5s var(--sp-ease) both; }
@keyframes navFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .nav-in{ animation:none; }
}
.nav-brand{ display:flex; align-items:center; gap:10px; white-space:nowrap; flex:none; font-family:var(--ff-display); font-weight:600; font-size:16px; }
.nav-brand .ping{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.nav-links{ display:flex; gap:var(--nav-gap,6px); align-items:center; flex:none; margin:0 var(--nav-gap,6px) 0 auto; padding-left:14px; }
.nav-links a{ white-space:nowrap; flex:none; }
.nav-cta{
  padding:9px 18px; border-radius:999px; background:var(--accent); color:var(--on-accent,#06182B);
  font-size:14px; font-weight:600; white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(var(--accent-rgb),.55);
  transition:transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(var(--accent-rgb),.7); }
.nav-toggle{ display:none; background:none; border:0; color:var(--text); padding:8px; }
.nav-toggle svg{ width:22px; height:22px; }

/* breakpoint + mobile drawer: see PART 11 at the end of this file */

/* ==================================================================
   [CSS-07]  HERO
   ================================================================== */

/* ---------------------------------------------------------------
   Hero
--------------------------------------------------------------- */
.hero{
  position:relative; z-index:2;
  padding:40px 0 100px;
  width:min(var(--panel-max), calc(100% - 2 * var(--panel-gutter)));
  margin:22px auto 28px;
  border-radius:var(--radius-lg);
  background:var(--glass-surface, linear-gradient(168deg, rgba(255,255,255,.10) 0%, var(--glass-tint) 16%, rgba(255,255,255,.02) 62%));
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-border-bright);
  backdrop-filter:var(--blur-section);
  -webkit-backdrop-filter:var(--blur-section);
  box-shadow:
    var(--shadow-ambient),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -18px 30px -26px rgba(0,0,0,.3);
  overflow:hidden;
}
@media (max-width:900px){ .hero{ margin-top:18px; } }
@media (max-width:640px){ .hero{ margin-top:14px; margin-bottom:20px; } }
/* Bismillah — centred at the top of the hero, above the chips and photo */
.hero-bismillah-wrap{ text-align:center; margin-bottom:clamp(20px,3vw,36px); }
.hero-bismillah{
  display:inline-block; margin:0;
  font-family:'Amiri','Noto Naskh Arabic','Scheherazade New','Traditional Arabic',serif;
  font-size:clamp(28px,3.4vw,48px); line-height:1.6; white-space:nowrap;
  color:var(--accent-light, var(--accent));
  text-shadow:0 0 18px rgba(var(--accent-rgb),.35), 0 2px 12px rgba(0,0,0,.45);
  user-select:none;
}
@media (max-width:640px){ .hero-bismillah{ font-size:26px; } }
.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
}

/* ---- entrance now handled by [data-reveal] from Part 1 — see index.html ---- */
.hero-photo-wrap{ position:relative; }

.status-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 10px; border-radius:999px;
  font-family:var(--ff-mono); font-size:12.5px; color:var(--accent);
  margin-bottom:24px;
}
.status-chip .ping{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.hero h1{
  font-size:clamp(38px,5.4vw,64px);
  line-height:1.04;
  margin-bottom:20px;
}
.hero h1 span{ display:block; }
.hero-sub{ font-size:18px; color:var(--text-dim); max-width:480px; margin-bottom:36px; }

.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px; }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px; font-size:14.5px; font-weight:600;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  border:1px solid transparent;
  position:relative; isolation:isolate;
}
.btn-arrow{ display:inline-block; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }
.btn-primary{
  background:linear-gradient(135deg, var(--accent), var(--accent-deep));
  color:var(--on-accent,#06182B);
  box-shadow:0 10px 24px -10px rgba(var(--accent-rgb),.6);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  overflow:hidden;
}
.btn-primary::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform:translateX(-120%); transition:transform .6s ease;
}
.btn-primary:hover::before{ transform:translateX(120%); }
.btn-primary > *{ position:relative; z-index:1; }
.btn-primary:hover{ transform:perspective(700px) translateY(-2px) translateZ(6px) scale(1.012); box-shadow:0 14px 30px -10px rgba(var(--accent-rgb),.75); }
.btn-primary:hover .btn-arrow{ transform:translateX(5px); }
.btn-ghost{
  background:rgba(255,255,255,.035); border-color:var(--glass-border); color:var(--text);
  border-radius:12px;
}
.btn-ghost::before, .btn-ghost::after{
  content:''; position:absolute; width:9px; height:9px; z-index:2;
  border:1.5px solid var(--accent); opacity:0;
  transition:opacity .25s ease, transform .25s ease;
}
.btn-ghost::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; transform:translate(5px,5px); }
.btn-ghost::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; transform:translate(-5px,-5px); }
.btn-ghost:hover{ background:rgba(255,255,255,.075); transform:perspective(700px) translateY(-2px) translateZ(6px); }
.btn-ghost:hover::before, .btn-ghost:hover::after{ opacity:1; transform:translate(0,0); }
.btn:active{ transform:perspective(700px) translateY(0) translateZ(0) scale(.97); transition-duration:.1s; }

/* status strip — reads like a live systems readout, not a stat-card grid */
.status-strip{
  display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:space-between; gap:0;
  padding:18px 22px;
}
.status-item{
  display:flex; flex-direction:column; gap:4px; flex:1 1 auto; min-width:0;
  padding:0 clamp(10px,1.3vw,20px); border-right:1px solid var(--glass-border);
}
.status-item:first-child{ padding-left:0; }
.status-item:last-child{ border-right:none; }
.status-item .val{ font-family:var(--ff-mono); font-size:20px; color:var(--text); }
.status-item .lbl{ font-size:12.5px; color:var(--text-faint); }

.hero-photo{
  aspect-ratio:4/5; padding:10px;
  transform-style:preserve-3d;
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover; border-radius:14px;
  filter:saturate(1.05);
}
.hero-photo-tag{
  position:absolute; bottom:22px; left:22px; right:22px;
  padding:12px 16px; display:flex; align-items:center; gap:10px;
  transform:translateZ(28px);
}
.hero-photo-tag .name{ font-family:var(--ff-display); font-size:15px; font-weight:600; }
.hero-photo-tag .role{ font-size:12.5px; color:var(--text-dim); }

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo-wrap{ max-width:340px; }
  .status-strip{ flex-direction:column; gap:14px; }
  .status-item{ border-right:none; border-bottom:1px solid var(--glass-border); padding:0 0 14px; }
  .status-item:last-child{ border-bottom:none; padding-bottom:0; }
}

/* ==================================================================
   [CSS-08]  ABOUT
   ================================================================== */

/* ---------------------------------------------------------------
   About
--------------------------------------------------------------- */
.about-grid{ display:grid; grid-template-columns:1.3fr .9fr; gap:40px; margin-top:44px; align-items:start; }
.about-copy p{ color:var(--text-dim); margin-bottom:16px; }
.about-copy strong{ color:var(--text); font-weight:600; }
.credential-list{ display:flex; flex-direction:column; gap:0; }
.credential-item{
  display:flex; justify-content:space-between; gap:12px;
  padding:14px 20px; border-bottom:1px solid var(--glass-border);
  font-size:14px;
}
.credential-item:last-child{ border-bottom:none; }
.credential-item .k{ color:var(--text-faint); }
.credential-item .v{ color:var(--text); text-align:right; }

.highlight-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:32px; }
.highlight-card{ padding:20px; }
.highlight-card .val{ font-family:var(--ff-mono); font-size:24px; color:var(--accent); }
.highlight-card .lbl{ font-size:13px; color:var(--text-dim); margin-top:4px; }

@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; }
  .highlight-row{ grid-template-columns:1fr 1fr; }
}

/* ==================================================================
   [CSS-09]  WHY HIRE
   ================================================================== */

/* ---------------------------------------------------------------
   Why hire — trait list (not generic identical-card grid: split rows)
--------------------------------------------------------------- */
.trait-list{ margin-top:44px; display:flex; flex-direction:column; gap:14px; }
.trait-row{
  display:grid; grid-template-columns:64px 1fr auto; gap:22px; align-items:center;
  padding:22px 26px;
}
.trait-icon{
  width:64px; height:64px; border-radius:14px; padding:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:32px;
  background:var(--accent-dim); border:1px solid rgba(var(--accent-rgb),.3);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.trait-row:hover .trait-icon{ transform:scale(1.1) rotate(-4deg); }
.trait-list .trait-row:nth-child(1){ transition-delay:0s; }
.trait-list .trait-row:nth-child(2){ transition-delay:0s; }
.trait-list .trait-row:nth-child(3){ transition-delay:0s; }
.trait-list .trait-row:nth-child(4){ transition-delay:0s; }
.trait-list .trait-row:nth-child(5){ transition-delay:0s; }
.trait-list .trait-row:nth-child(6){ transition-delay:0s; }

/* ==================================================================
   [CSS-10]  EMOJI ICONS
   ================================================================== */

/* ---------------------------------------------------------------
   3D emoji icons — used in place of flat glyphs/Font Awesome.
   Images degrade to their plain-text emoji via onerror if a CDN
   asset ever 404s, so nothing visually breaks.
--------------------------------------------------------------- */
.icon3d{ width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.45)) drop-shadow(0 0 1px rgba(255,255,255,.15)); }
.icon3d-sm{ width:18px; height:18px; object-fit:contain; flex:none; display:inline-block; vertical-align:-4px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.trait-title{ font-family:var(--ff-display); font-size:17px; margin-bottom:4px; }
.trait-desc{ font-size:14px; color:var(--text-dim); max-width:560px; }
.trait-tag{ font-family:var(--ff-mono); font-size:12px; color:var(--amber); white-space:nowrap; text-align:right; }

@media (max-width:760px){
  .trait-row{ grid-template-columns:1fr; text-align:left; }
  .trait-tag{ text-align:left; }
}

/* ==================================================================
   [CSS-11]  EXPERIENCE — timeline
   ================================================================== */

/* ---------------------------------------------------------------
   Experience — timeline (real sequence => numbering/connector earned)
--------------------------------------------------------------- */
.timeline{ margin-top:48px; position:relative; }
.timeline::before{
  content:''; position:absolute; left:11px; top:8px; bottom:8px; width:1px;
  background:linear-gradient(var(--glass-border), transparent);
}
.tl-progress{
  position:absolute; left:11px; top:8px; width:1px; height:0%;
  background:linear-gradient(var(--accent), rgba(var(--accent-rgb),.2));
  box-shadow:0 0 8px var(--accent); transition:height .15s linear; pointer-events:none;
}
.tl-item{ position:relative; padding:0 0 52px 44px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{
  position:absolute; left:0; top:4px; width:24px; height:24px; border-radius:50%;
  background:var(--bg-panel); border:1px solid var(--glass-border-bright);
  display:flex; align-items:center; justify-content:center;
}
.tl-dot::after{ content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
@keyframes tlDotIn{ 0%{ transform:scale(.3); opacity:.3; } 60%{ transform:scale(1.4); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
.tl-item.visible .tl-dot::after{ animation:tlDotIn .5s cubic-bezier(.34,1.56,.64,1); }
.tl-dot.is-visible::after{ animation:tlDotIn .5s cubic-bezier(.34,1.56,.64,1); }
.tl-meta{ display:flex; gap:12px; flex-wrap:wrap; align-items:baseline; margin-bottom:6px; }
.tl-date{ font-family:var(--ff-mono); font-size:13px; color:var(--amber); }
.tl-place{ font-size:13px; color:var(--text-faint); }
.tl-role{ font-family:var(--ff-display); font-size:20px; margin-bottom:2px; }
.tl-org{ font-size:14.5px; color:var(--text-dim); margin-bottom:16px; }
.tl-bullets{ display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.tl-bullets li{ font-size:14.5px; color:var(--text-dim); padding-left:18px; position:relative; }
.tl-bullets li::before{ content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--accent); }
.tl-stats{ display:flex; gap:10px; flex-wrap:wrap; }
.tl-stat{
  font-family:var(--ff-mono); font-size:12.5px; color:var(--text);
  padding:6px 12px; border-radius:8px;
  background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
}
.tl-quote{
  margin-top:18px; padding:18px 20px; font-size:14px; font-style:italic; color:var(--text-dim);
  border-left:2px solid var(--accent);
  background:rgba(255,255,255,.02);
}
.tl-quote cite{ display:block; margin-top:10px; font-style:normal; font-size:12.5px; color:var(--text-faint); }
.tl-item .cert-actions{ margin-top:16px; padding-top:0; }
.tl-item .skill-tags{ margin:14px 0 0; }
.tl-more{ margin-top:16px; border-top:1px solid var(--glass-border); padding-top:14px; }
.tl-more summary{ cursor:pointer; font-family:var(--ff-mono); font-size:12px; color:var(--accent); list-style:none; }
.tl-more summary::-webkit-details-marker{ display:none; }
.tl-more summary::after{ content:' +'; }
.tl-more[open] summary::after{ content:' –'; }
.tl-more p{ font-size:13.5px; color:var(--text-dim); margin-top:10px; }
.tl-more p strong{ color:var(--text); }

/* ==================================================================
   [CSS-12]  EXPERIENCE — engagement cards
   ================================================================== */

/* ---------------------------------------------------------------
   Engagement breakdown — interactive capability cards
   Replaces a plain <details> list: staggered reveal-in (via the
   existing [data-stagger]/[data-reveal] system), hover sweep +
   lift, and a CSS-only grid-template-rows expand/collapse (no JS
   height measuring, so it stays smooth at any content length).
--------------------------------------------------------------- */
.bd{ margin-top:22px; }
.bd-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.bd-eyebrow{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.bd-head h3{ font-family:var(--ff-display); font-size:14.5px; color:var(--text-dim); font-weight:500; margin:0; }
.bd-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.bd-card{
  position:relative; text-align:left; cursor:pointer; width:100%; display:block;
  padding:16px 18px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03); border:1px solid var(--glass-border);
  color:inherit; font:inherit; overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.bd-card::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(var(--accent-rgb),.10) 48%, transparent 66%);
  transform:translateX(-120%); transition:transform .7s ease;
}
.bd-card:hover::before{ transform:translateX(120%); }
.bd-card:hover{ transform:translateY(-3px); border-color:var(--glass-border-bright); background:rgba(255,255,255,.05); box-shadow:0 16px 30px -18px rgba(0,0,0,.5); }
.bd-card.is-open{ border-color:var(--accent); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.25), 0 16px 34px -18px rgba(0,0,0,.55); background:rgba(var(--accent-rgb),.045); }
.bd-card-top{ display:flex; align-items:center; gap:12px; position:relative; z-index:1; }
.bd-icon{
  flex:none; width:48px; height:48px; border-radius:12px; padding:6px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border); font-size:24px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), border-color .3s ease;
}
.bd-icon img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
.bd-card.is-open .bd-icon{ transform:rotate(-8deg) scale(1.08); border-color:var(--accent); }
.bd-card-titlewrap{ flex:1 1 auto; min-width:0; }
.bd-card-title{ font-family:var(--ff-display); font-size:14.5px; color:var(--text); margin-bottom:2px; }
.bd-card-tag{ font-family:var(--ff-mono); font-size:11px; color:var(--text-faint); }
.bd-card-plus{
  flex:none; width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--glass-border); font-size:14px; color:var(--text-faint); line-height:1;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), color .3s ease, border-color .3s ease;
}
.bd-card.is-open .bd-card-plus{ transform:rotate(135deg); color:var(--accent); border-color:var(--accent); }
.bd-card-bodywrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1); position:relative; z-index:1; }
.bd-card.is-open .bd-card-bodywrap{ grid-template-rows:1fr; }
.bd-card-body{ overflow:hidden; }
.bd-card-body p{ font-size:13px; line-height:1.6; color:var(--text-dim); padding-top:12px; margin-top:12px; border-top:1px solid var(--glass-border); }
@media (prefers-reduced-motion: reduce){
  .bd-card, .bd-card::before, .bd-icon, .bd-card-plus, .bd-card-bodywrap{ transition:none !important; }
}
.tl-logos{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.tl-logos img{
  height:26px; max-width:86px; object-fit:contain; border-radius:6px;
  padding:5px 9px; background:rgba(255,255,255,.05); border:1px solid var(--glass-border);
}

/* ==================================================================
   [CSS-13]  EXPERIENCE — nested roles
   ================================================================== */

/* ---------------------------------------------------------------
   Timeline — nested sub-positions (LinkedIn-style grouped roles
   under one company, rendered as a glass card inside a tl-item)
--------------------------------------------------------------- */
.tl-subroles{ margin-top:18px; padding:20px 20px 4px; }
.tl-subroles-label{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-faint); margin-bottom:16px; display:flex; align-items:center; gap:8px;
}
.tl-subroles-label::before{ content:''; width:16px; height:1px; background:var(--glass-border-bright); }
.tl-subrole{ position:relative; padding:0 0 20px 26px; }
.tl-subrole:last-child{ padding-bottom:2px; }
.tl-subrole::before{
  content:''; position:absolute; left:5px; top:15px; bottom:-4px; width:1px;
  background:var(--glass-border);
}
.tl-subrole:last-child::before{ display:none; }
.tl-subrole::after{
  content:''; position:absolute; left:1px; top:5px; width:9px; height:9px; border-radius:50%;
  background:var(--bg-panel); border:1px solid var(--glass-border-bright);
}
.tl-subrole-role{ font-family:var(--ff-display); font-size:16px; color:var(--text); margin-bottom:3px; }
.tl-subrole-meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; font-size:12.5px; margin-bottom:6px; }
.tl-subrole-meta .tl-date{ font-size:12px; }
.tl-subrole-meta .tl-place{ font-size:12px; }
.tl-subrole-org{ font-size:13px; color:var(--text-dim); margin-bottom:10px; }
.tl-subrole-bullets{ display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
.tl-subrole-bullets li{ font-size:13px; color:var(--text-dim); padding-left:16px; position:relative; }
.tl-subrole-bullets li::before{ content:''; position:absolute; left:0; top:7px; width:4px; height:4px; border-radius:50%; background:var(--amber); }
.tl-subrole .cert-actions{ margin-top:12px; }

/* ==================================================================
   [CSS-14]  SKILLS
   ================================================================== */

/* ---------------------------------------------------------------
   Skills — categorized
--------------------------------------------------------------- */
.skills-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.skill-card{ padding:24px; }
.skill-card .cat{ font-family:var(--ff-mono); font-size:12px; color:var(--amber); margin-bottom:8px; }
.skill-card h3{ font-size:17px; margin-bottom:14px; }
.skill-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; perspective:600px; }
.skill-tags span{
  font-size:12.5px; padding:5px 10px; border-radius:6px;
  background:rgba(255,255,255,.035); border:1px solid var(--glass-border); color:var(--text-dim);
  box-shadow:0 2px 6px -3px rgba(0,0,0,.5);
  transform-style:preserve-3d; display:inline-block;
  transition:transform .18s var(--sp-ease,ease), background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.skill-proof{ font-size:12.5px; color:var(--text-faint); font-family:var(--ff-mono); }
.skill-tags span:hover{
  transform:translateZ(5px) translateY(-2px) scale(1.045);
  background:rgba(255,255,255,.07); color:var(--text); border-color:var(--glass-border-bright);
  box-shadow:0 6px 12px -5px rgba(0,0,0,.55);
}

@media (max-width:900px){ .skills-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .skills-grid{ grid-template-columns:1fr; } }

/* ==================================================================
   [CSS-15]  CERTIFICATIONS
   ================================================================== */

/* ---------------------------------------------------------------
   Certifications
--------------------------------------------------------------- */
.cert-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.cert-card{ padding:22px; display:flex; flex-direction:column; gap:12px; }
.cert-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.cert-icon{
  width:54px; height:54px; border-radius:12px; flex:none; padding:7px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background:rgba(255,255,255,.05); border:1px solid var(--glass-border);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.cert-card:hover .cert-icon{ transform:scale(1.1) rotate(-4deg); }
.cert-badge{ font-family:var(--ff-mono); font-size:11px; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.cert-badge.verified{ color:var(--accent); background:var(--accent-dim); }
.cert-badge.award{ color:var(--amber); background:var(--amber-dim); }
.cert-badge.progress{ color:var(--text-dim); background:rgba(255,255,255,.06); }
.cert-title{ font-family:var(--ff-display); font-size:16px; }
.cert-issuer{ font-size:13px; color:var(--text-dim); }
.cert-category{ font-family:var(--ff-mono); font-size:11px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }
.cert-date{ font-family:var(--ff-mono); font-size:12px; color:var(--text-faint); }
.cert-desc{ font-size:13px; line-height:1.55; color:var(--text-dim); }
.cert-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px; }
.cert-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-mono); font-size:11px; padding:7px 12px;
  border-radius:999px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,.04); color:var(--text);
  text-decoration:none; transition:transform .2s ease, background .2s ease;
}
.cert-btn:hover{ background:rgba(255,255,255,.09); transform:translateY(-1px); }
.cert-btn:active{ transform:translateY(0) scale(.96); }
.cert-btn.primary{ color:var(--accent); background:var(--accent-dim); border-color:transparent; }
.edu-card .cert-actions{ margin-top:14px; padding-top:0; }

/* Display-object hover — small lift + perspective tilt, no blur,
   no excessive rotation. Decoupled from the entrance stagger delay
   once revealed, so hover feels immediate rather than laggy. */
.cert-card{ transform-style:preserve-3d; }
.cert-card[data-reveal].is-visible{ transition:opacity var(--sp-duration) var(--sp-ease), transform .35s var(--sp-ease); }
.cert-card:hover{ transform:perspective(900px) translateY(-4px) translateZ(6px) rotateX(1.5deg); }

@media (max-width:900px){ .cert-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .cert-grid{ grid-template-columns:1fr; } }

/* ==================================================================
   [CSS-16]  PROJECTS — case studies
   ================================================================== */

/* ---------------------------------------------------------------
   Projects / case studies
--------------------------------------------------------------- */
.case-list{ display:flex; flex-direction:column; gap:18px; margin-top:44px; }
.case-card{ padding:0; }
.case-head{ transform-style:preserve-3d; }
.case-head:hover{ background:rgba(255,255,255,.03); }
.case-head[data-reveal]{
  transition:background .2s ease,
             opacity var(--sp-duration) var(--sp-ease),
             transform var(--sp-duration) var(--sp-ease);
  transition-delay:0s,
             calc(var(--sp-i,0) * var(--sp-stagger-step)),
             calc(var(--sp-i,0) * var(--sp-stagger-step));
}
.case-head[data-reveal].is-visible{
  transition:background .2s ease, opacity var(--sp-duration) var(--sp-ease), transform .3s var(--sp-ease);
}
.case-head{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:22px 26px; cursor:pointer;
}
.case-head-left{ display:flex; align-items:center; gap:16px; }
.case-num{
  font-family:var(--ff-mono); font-size:22px; font-weight:600; color:var(--text-dim);
  width:34px; flex:none; text-align:center; opacity:.6;
}
.case-title{ font-family:var(--ff-display); font-size:18px; }
.case-sub{ font-size:13px; color:var(--text-dim); margin-top:2px; }
.case-toggle{
  width:32px; height:32px; border-radius:50%; flex:none;
  border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease;
}
.case-card.open .case-toggle{ transform:rotate(45deg); }
.case-body{
  max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.16,1,.3,1);
}
.case-card.open .case-body{ max-height:900px; }
.case-body-inner{
  padding:0 26px 26px; display:grid; grid-template-columns:1fr 1fr; gap:24px;
  border-top:1px solid var(--glass-border); padding-top:22px; margin-top:0;
  opacity:0; transform:translateY(-6px); transition:opacity .3s ease .1s, transform .3s ease .1s;
}
.case-card.open .case-body-inner{ opacity:1; transform:translateY(0); }
.case-col h3{ font-family:var(--ff-mono); font-size:12px; color:var(--amber); margin-bottom:8px; text-transform:none; }
.case-col p{ font-size:14px; color:var(--text-dim); }
.case-col .skill-tags{ margin-bottom:0; }
.case-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; grid-column:1/-1; }
.case-stat{ font-family:var(--ff-mono); font-size:12.5px; padding:6px 12px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid var(--glass-border); }

@media (max-width:700px){
  .case-body-inner{ grid-template-columns:1fr; }
  .case-head{ padding:18px; }
}

/* ==================================================================
   [CSS-17]  INFRASTRUCTURE LAB
   ================================================================== */

/* ---------------------------------------------------------------
   Infrastructure Lab
--------------------------------------------------------------- */
.lab-board{ margin-top:44px; padding:0; }
.lab-board-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 26px; border-bottom:1px solid var(--glass-border);
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}
.lab-board-label{ color:var(--text-dim); }
.lab-board-count{ color:var(--text-faint); }

.lab-ticket{ border-bottom:1px solid var(--glass-border); }
.lab-ticket:last-child{ border-bottom:none; }

.lab-ticket-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:17px 26px; cursor:pointer; list-style:none;
  transition:background .18s ease;
}
.lab-ticket-head::-webkit-details-marker{ display:none; }
.lab-ticket-head:hover{ background:rgba(255,255,255,.035); }
.lab-ticket-head--static{ cursor:default; }
.lab-ticket-head--static:hover{ background:none; }

.lab-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.lab-dot--done{ background:var(--accent); box-shadow:0 0 7px var(--accent); }
.lab-dot--doc{ background:var(--amber); box-shadow:0 0 7px rgba(143,168,189,.55); }
.lab-dot--pending{ background:var(--text-faint); }

.lab-id{ font-family:var(--ff-mono); font-size:12px; color:var(--text-faint); white-space:nowrap; }
.lab-cat{ font-family:var(--ff-mono); font-size:11.5px; color:var(--amber); text-transform:uppercase; letter-spacing:.03em; }
.lab-title{ flex:1 1 220px; min-width:140px; font-family:var(--ff-display); font-size:15px; color:var(--text); }
.lab-status{ font-family:var(--ff-mono); font-size:11px; padding:4px 11px; border-radius:999px; white-space:nowrap; margin-left:auto; }
.lab-status--done{ color:var(--accent); background:var(--accent-dim); }
.lab-status--doc{ color:var(--amber); background:var(--amber-dim); }
.lab-status--pending{ color:var(--text-faint); background:rgba(255,255,255,.05); }

.lab-ticket-head::after{
  content:'+'; flex:none; width:16px; text-align:center;
  font-family:var(--ff-mono); font-size:15px; color:var(--text-faint);
}
.lab-ticket[open] .lab-ticket-head::after{ content:'–'; }

.lab-ticket-body{ padding:2px 26px 22px; display:flex; gap:20px; }
.lab-ticket-body--full{ display:block; }
.lab-thumb{ width:120px; height:88px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--glass-border); flex:none; }
.lab-ticket-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.lab-desc{ font-size:13.5px; color:var(--text-dim); }
.lab-ticket-text p{ font-size:13px; color:var(--text-dim); margin:0; }
.lab-ticket-text p strong{ color:var(--text); }
.lab-ticket-text .skill-tags{ margin:1px 0 0; }
.lab-ticket-text .skill-proof{ font-size:12.5px; color:var(--text-faint); font-family:var(--ff-mono); }

.lab-ticket-empty .lab-cat{ color:var(--text-faint); }
.lab-empty-note{ margin:0; padding:0 26px 20px; font-size:13px; font-style:italic; color:var(--text-faint); }

@media (max-width:760px){
  .lab-board-head{ padding:14px 20px; }
  .lab-ticket-head{ padding:15px 20px 15px 18px; gap:10px; }
  .lab-title{ flex:1 1 100%; order:5; font-size:14px; margin-top:2px; }
  .lab-status{ order:4; margin-left:0; }
  .lab-ticket-head::after{ order:6; margin-left:auto; }
  .lab-ticket-body{ flex-direction:column; padding:0 20px 20px; }
  .lab-thumb{ width:100%; height:150px; }
  .lab-empty-note{ padding:0 20px 18px; }
}

/* ==================================================================
   [CSS-18]  EDUCATION
   ================================================================== */

/* ---------------------------------------------------------------
   Education
--------------------------------------------------------------- */
.edu-list{ margin-top:44px; display:flex; flex-direction:column; gap:16px; }
.edu-card{ padding:26px; }
.edu-top{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.edu-degree{ font-family:var(--ff-display); font-size:18px; }
.edu-school{ font-size:14px; color:var(--text-dim); }
.edu-date{ font-family:var(--ff-mono); font-size:12.5px; color:var(--amber); white-space:nowrap; }
.edu-result{ font-size:13px; color:var(--accent); margin-bottom:10px; }
.edu-desc{ font-size:14px; color:var(--text-dim); margin-bottom:14px; }
.edu-quote{ font-size:13px; font-style:italic; color:var(--text-dim); border-left:2px solid var(--amber); padding-left:14px; }
.edu-quote cite{ display:block; margin-top:8px; font-style:normal; font-size:12px; color:var(--text-faint); }

/* ==================================================================
   [CSS-19]  ACHIEVEMENTS
   ================================================================== */

/* ---------------------------------------------------------------
   Achievements
--------------------------------------------------------------- */
.award-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.award-card{ padding:24px; }
.award-icon{
  width:60px; height:60px; border-radius:14px; margin-bottom:14px; padding:8px;
  display:flex; align-items:center; justify-content:center; font-size:30px;
  background:var(--amber-dim); border:1px solid rgba(143,168,189,.35);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.award-card:hover .award-icon{ transform:scale(1.1) rotate(-4deg); }
.award-grid .award-card:nth-child(1){ transition-delay:0s; }
.award-grid .award-card:nth-child(2){ transition-delay:0s; }
.award-grid .award-card:nth-child(3){ transition-delay:0s; }
.award-title{ font-family:var(--ff-display); font-size:16px; margin-bottom:6px; }
.award-org{ font-size:12.5px; color:var(--amber); font-family:var(--ff-mono); margin-bottom:12px; }
.award-desc{ font-size:13.5px; color:var(--text-dim); }

@media (max-width:900px){ .award-grid{ grid-template-columns:1fr; } }

/* ==================================================================
   [CSS-20]  REFERENCES
   ================================================================== */

/* ---------------------------------------------------------------
   References
--------------------------------------------------------------- */
.refs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:44px; }
.ref-card{ padding:24px; display:flex; flex-direction:column; gap:10px; }
.ref-top{ display:flex; align-items:center; gap:14px; }
.ref-avatar{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ff-display); font-size:15px; color:var(--accent);
  background:var(--accent-dim); border:1px solid rgba(var(--accent-rgb),.3);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.ref-card:hover .ref-avatar{ transform:scale(1.1); }
.refs-grid .ref-card:nth-child(1){ transition-delay:0s; }
.refs-grid .ref-card:nth-child(2){ transition-delay:0s; }
.ref-name{ font-family:var(--ff-display); font-size:16px; }
.ref-role{ font-size:13px; color:var(--text-dim); }
.ref-org{ font-size:12.5px; color:var(--amber); font-family:var(--ff-mono); }
.ref-meta{ display:flex; gap:10px; flex-wrap:wrap; font-size:12.5px; color:var(--text-faint); }
.ref-desc{ font-size:13.5px; color:var(--text-dim); }
.ref-link{ font-size:12.5px; color:var(--accent); text-decoration:none; margin-top:4px; }
.ref-link:hover{ text-decoration:underline; }
.refs-note{ margin-top:18px; font-size:13px; color:var(--text-faint); font-style:italic; }

@media (max-width:760px){ .refs-grid{ grid-template-columns:1fr; } }

/* ==================================================================
   [CSS-21]  CONTACT — base
   ================================================================== */

/* ---------------------------------------------------------------
   Contact — premium crystal-clear glass, redesigned.
   No blur (inherits the blur-free .glass token from Part 5).
   No glow, no box-shadow pulse — the availability dot is fully
   static. Depth comes from perspective/translateZ + layered
   borders only, and stays still at idle; the only motion is the
   existing [data-reveal] entrance system already used everywhere
   else on the site (opacity + transform, IntersectionObserver-
   driven, one-shot).
--------------------------------------------------------------- */
.contact-panel{
  margin-top:44px; padding:0; overflow:hidden;
  clip-path:polygon(28px 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%,0 28px);
  perspective:1400px;
}
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
}
.contact-left{ padding:48px 40px 48px 48px; display:flex; flex-direction:column; align-items:flex-start; }
.contact-right{
  padding:48px 48px 48px 40px; border-left:1px solid var(--glass-border);
  transform:translateZ(14px);
}
.contact-panel h2{ font-size:clamp(26px,3vw,34px); margin-bottom:12px; }
.contact-panel .lede{ color:var(--text-dim); max-width:380px; margin-bottom:20px; font-size:14.5px; }

/* still, non-glowing availability indicator */
.contact-avail{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--ff-mono); font-size:12.5px; color:var(--text-dim);
  margin-bottom:26px;
}
.contact-avail .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.contact-avail .contact-time{ color:var(--text-faint); }
.contact-avail .contact-time::before{ content:'· '; }

.contact-left .btn{ margin-bottom:30px; }

/* secondary, compact — not the main focus */
.contact-shortcuts{ display:flex; flex-wrap:wrap; gap:10px; }

.contact-right .section-label{ margin-bottom:22px; }

/* form — inputs integrated directly into the glass, no sub-cards */
.contact-form{ display:flex; flex-direction:column; gap:20px; }
.cf-field{ display:flex; flex-direction:column; gap:6px; }
.cf-field label{ font-family:var(--ff-mono); font-size:11.5px; color:var(--text-faint); letter-spacing:.02em; }
.cf-field input, .cf-field textarea{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--text);
  background:transparent; border:none; border-bottom:1px solid var(--glass-border);
  border-radius:0; padding:6px 2px 10px; resize:none;
  transition:border-color .2s ease;
}
.cf-field input::placeholder, .cf-field textarea::placeholder{ color:var(--text-faint); }
.cf-field input:hover, .cf-field textarea:hover{ border-color:var(--glass-border-bright); }
.cf-field input:focus, .cf-field textarea:focus{ outline:none; border-color:var(--accent); }
.cf-field-area textarea{
  border:1px solid var(--glass-border); border-radius:var(--radius-sm);
  padding:10px 12px; resize:vertical;
}
.cf-field-area textarea:focus{ border-color:var(--accent); }
/* honeypot — visually hidden, still reachable by bots that fill every field */
.cf-hp{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); opacity:0; pointer-events:none; }

.cf-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.cf-submit{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:inherit;
  font-size:14.5px; font-weight:600; color:var(--text);
  padding:12px 22px; border-radius:999px;
  background:linear-gradient(168deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.045) 100%);
  border:1px solid var(--glass-border-bright);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.5);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cf-submit:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -16px rgba(0,0,0,.55); border-color:var(--glass-border-bright); }
.cf-submit:active{ transform:translateY(0); }
.cf-submit:disabled{ opacity:.65; cursor:default; transform:none; }
.cf-status{ font-size:12.5px; color:var(--text-dim); margin:0; }
.cf-status.is-success{ color:var(--accent); }
.cf-status.is-error{ color:#ff9d9d; }

@media (max-width:820px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-left{ padding:32px 28px 28px; }
  .contact-right{ padding:0 28px 32px; border-left:none; border-top:1px solid var(--glass-border); margin-top:8px; padding-top:28px; transform:none; }
}

/* ==================================================================
   [CSS-22]  FOOTER
   ================================================================== */

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
footer{ padding:20px var(--edge) 60px; position:relative; z-index:2; }
.footer-panel{
  width:min(var(--panel-max), calc(100% - 2 * var(--panel-gutter)));
  margin:0 auto; padding:26px 32px;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(168deg, rgba(255,255,255,.10) 0%, var(--glass-tint) 16%, rgba(255,255,255,.02) 62%);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-border-bright);
  backdrop-filter:var(--blur-section);
  -webkit-backdrop-filter:var(--blur-section);
  box-shadow:
    var(--shadow-ambient),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -18px 30px -26px rgba(0,0,0,.3);
  overflow:hidden;
}
.footer-line{
  text-align:center; font-family:var(--ff-display); font-size:15px; font-style:italic;
  color:var(--text-dim); margin:0 0 18px; padding-bottom:18px;
  border-bottom:1px solid var(--glass-border);
}
.footer-row{
  max-width:100%; margin:0; padding:0;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:13px; color:var(--text-faint);
}
.footer-row a{ color:var(--text-dim); }
.footer-row a:hover{ color:var(--accent); }

@media (max-width:640px){
  .footer-row{ justify-content:center; text-align:center; }
  .footer-line{ font-size:14px; }
}

/* ==================================================================
   [CSS-23]  SCROLL REVEAL — basic
   ================================================================== */

/* ---------------------------------------------------------------
   Scroll reveal (single, restrained — no slide, fade only)
--------------------------------------------------------------- */

.reveal{ opacity:0; transition:opacity .6s ease; }
.reveal.visible{ opacity:1; }

/* ==================================================================
   [CSS-24]  ANIMATION FOUNDATION — data-reveal / tilt / depth
   ================================================================== */

/* =============================================================
   Spatial Animation Foundation — Part 1
   Reusable [data-*] system. Transform + opacity only. No blur,
   no glow, no bounce. Independent of the existing .reveal/.glass
   systems above — does not modify them.
   ============================================================= */
:root{
  --sp-ease: cubic-bezier(.16,.84,.44,1);
  --sp-duration: .7s;
  --sp-stagger-step: 0ms;
  --sp-reveal-distance: 22px;
  --sp-tilt-max: 6deg;
}

[data-reveal]{
  opacity:0;
  transform:translate3d(0, var(--sp-reveal-distance), 0);
  transition:opacity var(--sp-duration) var(--sp-ease),
             transform var(--sp-duration) var(--sp-ease);
  transition-delay:calc(var(--sp-i, 0) * var(--sp-stagger-step));
  will-change:transform, opacity;
}
[data-reveal="down"]{ transform:translate3d(0, calc(-1 * var(--sp-reveal-distance)), 0); }
[data-reveal="left"]{ transform:translate3d(calc(-1 * var(--sp-reveal-distance)), 0, 0); }
[data-reveal="right"]{ transform:translate3d(var(--sp-reveal-distance), 0, 0); }
[data-reveal="scale"]{ transform:translate3d(0,0,0) scale(.96); }
[data-reveal="depth"]{ transform:perspective(1000px) translate3d(0,0,-56px) scale(.95); }
[data-reveal].is-visible{ opacity:1; transform:translate3d(0,0,0) scale(1); }

[data-depth],[data-parallax]{ will-change:transform; }
[data-tilt]{ transform-style:preserve-3d; will-change:transform; }
[data-tilt]:not([data-reveal]){ transition:transform .5s var(--sp-ease); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ transition:none !important; opacity:1 !important; transform:none !important; }
  [data-depth],[data-parallax],[data-tilt]{ transform:none !important; transition:none !important; }
}

/* Tiny mobile compatibility fix — shallower depth so About/Skills/
   Experience stay readable and don't push content off-screen. */
@media (max-width:640px){
  :root{ --sp-reveal-distance:14px; }
  [data-reveal="depth"]{ transform:perspective(800px) translate3d(0,0,-28px) scale(.97); }
  [data-tilt]{ transform:none !important; }
}


/* ==================================================================
   [CSS-25]  SCROLL PROGRESS BAR
   ================================================================== */

/* ---------------------------------------------------------------
   Scroll progress
--------------------------------------------------------------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; background:var(--accent);
  box-shadow:0 0 8px var(--accent); z-index:60; width:0%;
}

/* ==================================================================
   [CSS-26]  HERO — scroll-scrubbed photo + cycling role text
   ================================================================== */

/* =================================================================
   NEW — Scroll-scrubbed hero photo + cycling role text
   The mouse-tilt (JS, on .hero-photo-wrap) and this scroll-rotate
   (CSS var, on the inner .hero-photo) compose in the same 3D space
   because the wrap already has transform-style:preserve-3d.
================================================================= */
.hero-photo{
  transform: perspective(1000px) rotateY(var(--scrollRotY, 0deg)) rotateX(var(--scrollRotX, 0deg));
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.hero-photo-tag .role{
  transition: opacity .28s ease, transform .28s ease;
}
.hero-photo-tag .role.swap{ opacity:0; transform:translateY(4px); }

.scroll-scrub-hint{
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:18px; font-family:var(--ff-mono); font-size:11.5px;
  color:var(--text-faint); letter-spacing:.04em;
}
.scroll-scrub-hint span{
  display:inline-block; color:var(--accent);
}

@media (max-width:900px){ .scroll-scrub-hint{ justify-content:flex-start; } }

/* ==================================================================
   [CSS-27]  SECTION HEADERS — mirrored
   ================================================================== */

/* =================================================================
   NEW — Mirrored / reflected section headers
   JS stamps data-mirror="<same text>" on every section h2. The
   ::after renders a flipped, gradient-masked ghost copy beneath it.
================================================================= */
.section h2, .contact-panel h2{ position:relative; isolation:isolate; }
.section h2[data-mirror]::after, .contact-panel h2[data-mirror]::after{
  content: attr(data-mirror);
  position:absolute; left:0; top:100%; width:100%; height:100%;
  transform: scaleY(-1); transform-origin:top;
  background: linear-gradient(to bottom, rgba(255,255,255,.14), transparent 72%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), transparent 68%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), transparent 68%);
  pointer-events:none; user-select:none; z-index:-1;
}

/* one-time glitch flicker as each heading enters view */
@keyframes glitchFlicker{
  0%{   text-shadow:2px 0 var(--accent), -2px 0 var(--amber); transform:translateX(-1.5px); }
  20%{  text-shadow:-2px 0 var(--accent), 2px 0 var(--amber); transform:translateX(1.5px); }
  40%{  text-shadow:1.5px 0 var(--accent), -1.5px 0 var(--amber); transform:translateX(-.75px); }
  60%{  text-shadow:-1px 0 var(--accent), 1px 0 var(--amber); transform:translateX(.75px); }
  80%{  text-shadow:.5px 0 var(--accent), -.5px 0 var(--amber); transform:translateX(0); }
  100%{ text-shadow:none; transform:translateX(0); }
}
.section h2.glitch-in, .contact-panel h2.glitch-in{
  animation: glitchFlicker .55s steps(3,end) both;
}

/* ==================================================================
   [CSS-28]  CARD DIAMOND corner accent
   ================================================================== */

/* =================================================================
   NEW — Diamond corner accent on cards
   A small glowing diamond marker in the top-right of every card,
   dim at rest, lighting up on hover — a "system status" accent
   that echoes the diamond bokeh in the reference design.
================================================================= */
.trait-row, .award-card, .cert-card, .skill-card, .edu-card,
.ref-card, .highlight-card, .case-card, .credential-list{
  --diamond: var(--accent);
}
.award-card, .edu-card{ --diamond: var(--amber); }

.trait-row::after, .award-card::after, .cert-card::after, .skill-card::after,
.edu-card::after, .ref-card::after, .highlight-card::after, .case-card::after{
  content:''; position:absolute; top:14px; right:14px; z-index:2;
  width:7px; height:7px; background:var(--diamond); transform:rotate(45deg) scale(.85);
  box-shadow:0 0 10px 1px var(--diamond); opacity:.28; pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.trait-row:hover::after, .award-card:hover::after, .cert-card:hover::after,
.skill-card:hover::after, .edu-card:hover::after, .ref-card:hover::after,
.highlight-card:hover::after, .case-card:hover::after{
  opacity:.95; transform:rotate(45deg) scale(1.25);
}

/* case-card gets its diamond mirrored to the left so it doesn't
   collide with the open/close chevron */
.case-card::after{ right:auto; left:14px; top:14px; }

/* ==================================================================
   [CSS-29]  RECRUITER BAR + TECHNICAL ARSENAL + PROOF OF WORK
   ================================================================== */

/* =================================================================
   PART 4 — Recruiter fast-pass, Technical Arsenal, Proof of Work
   Append-only. Reuses existing tokens/glass system. No new blur
   layers, no invented data.
================================================================= */

/* --- Recruiter fast-pass bar (sits right under the hero) --- */
.recruiter-bar{
  width:min(var(--panel-max), calc(100% - 2 * var(--panel-gutter)));
  margin:-10px auto 64px; padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  flex-wrap:wrap;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(168deg, rgba(255,255,255,.10) 0%, var(--glass-tint) 16%, rgba(255,255,255,.02) 62%);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-border-bright);
  backdrop-filter:var(--blur-section);
  -webkit-backdrop-filter:var(--blur-section);
  box-shadow:
    var(--shadow-ambient),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -18px 30px -26px rgba(0,0,0,.3);
  overflow:hidden;
}
.recruiter-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; width:100%; padding:0; }
.recruiter-label{ display:flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:12.5px; color:var(--text-dim); white-space:nowrap; }
.recruiter-label .ping{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 2.2s ease-in-out infinite; }
.recruiter-links{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.recruiter-link{
  font-size:13px; color:var(--text-dim); padding:8px 14px; border-radius:999px;
  border:1px solid var(--glass-border); transition:border-color .2s ease, color .2s ease;
}
.recruiter-link:hover{ color:var(--text); border-color:var(--glass-border-bright); }
.recruiter-link-cv{
  color:var(--on-accent,#06182B); background:var(--accent); border-color:transparent; font-weight:600;
  display:inline-flex; align-items:center; gap:6px;
}
.recruiter-link-cv:hover{ color:var(--on-accent,#06182B); filter:brightness(1.08); }
@media (max-width:640px){
  .recruiter-bar{ margin-top:0; }
  .recruiter-inner{ flex-direction:column; align-items:flex-start; }
  .recruiter-links{ width:100%; }
  .recruiter-link{ flex:1 1 auto; text-align:center; }
}

/* --- Technical Arsenal (interactive tag cloud, inside #skills) --- */
.arsenal-block{ margin-top:56px; padding-top:44px; border-top:1px solid var(--glass-border); }
.arsenal-h3{ font-size:clamp(20px,3vw,26px); margin:6px 0 22px; }
.arsenal-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.arsenal-tab{
  font-family:var(--ff-mono); font-size:12.5px; color:var(--text-dim);
  padding:9px 16px; border-radius:999px; border:1px solid var(--glass-border);
  background:rgba(255,255,255,.03); cursor:pointer; transition:all .2s ease;
}
.arsenal-tab:hover{ color:var(--text); border-color:var(--glass-border-bright); }
.arsenal-tab.active{ color:var(--on-accent,#06182B); background:var(--accent); border-color:transparent; }
.arsenal-panel{ padding:26px; position:relative; }
.arsenal-cloud{ display:none; flex-wrap:wrap; gap:10px; }
.arsenal-cloud.active{ display:flex; }
.arsenal-cloud span{
  padding:7px 13px; font-size:13px; color:var(--text-dim);
  background:rgba(255,255,255,.035); border:1px solid var(--glass-border); border-radius:999px;
}
.arsenal-proof{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--glass-border);
  font-size:12.5px; color:var(--text-faint);
}
.arsenal-proof a{ color:var(--accent); }

/* --- Proof of work strip --- */
.proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.proof-stat{
  display:block; padding:22px 20px; border-radius:var(--radius-md);
  text-align:center; transition:transform .25s ease, border-color .25s ease;
}
.proof-stat:hover{ transform:translateY(-3px); border-color:var(--glass-border-bright); }
.proof-stat .val{ font-family:var(--ff-mono); font-size:32px; color:var(--accent); }
.proof-stat .lbl{ font-size:12.5px; color:var(--text-dim); margin-top:6px; }
@media (max-width:760px){
  .proof-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ==================================================================
   [CSS-30]  GLASS OVERRIDE — crystal-clear pass (later rules win)
   ================================================================== */

/* =================================================================
   PART 5 — Final visual language pass: crystal-clear, not frosted.
   Redefines the .glass token in place (later in the cascade wins)
   instead of rewriting every .glass usage across the file — kills
   backdrop-filter blur everywhere, compensates with a touch more
   surface opacity + the existing layered shadow/border so panels
   stay legible and dimensional through transparency, not haze.
   .glass-clear (nav/hero/recruiter bar) was already blur-free.
================================================================= */
:root{ --blur-glass:none; }
.glass{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:
    linear-gradient(168deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.075) 16%, rgba(255,255,255,.045) 62%);
}

/* Nav capsule: pin centering with max specificity so no later rule
   (or a future append) can ever re-introduce the "loses centering"
   bug noted in Part 2 — this is a belt-and-braces restatement, not
   a behavior change. */
.nav{ position:fixed; top:16px; left:50%; right:auto; transform:translateX(-50%); margin:0; }

/* Contact form styling now lives with the rest of the Contact
   redesign, up near .contact-panel — this Formspree-integration
   pass only added behavior (script.js), not a second style block. */

/* ==================================================================
   [CSS-31]  GLASS OVERRIDE — Liquid Glass refinement
   ================================================================== */

/* =================================================================
   PART 6 — iOS 27 / Liquid Glass visual refinement
   Purely presentational. No HTML changed, no functionality touched.
   Redefines tokens + the .glass/.glass-clear surfaces + buttons in
   place (later in the cascade wins, same approach as Part 5) rather
   than rewriting every rule that consumes them. Also switches off a
   couple of earlier decorative effects (heading "glitch" flicker,
   glowing diamond corner markers, chamfered/bracket buttons) that
   read as neon/HUD rather than a calm, premium Apple surface.
================================================================= */

:root{
  /* named aliases for the 3-layer glass system described in the
     brief — map onto the tokens already used everywhere so nothing
     else in the file needs to be rewritten */
  /* Every alpha below follows --glass-amt (0 Clear → 1 Tinted). The white
     specular stops stay intact so the surface reads as glass at 0; the dark
     backing is --glass-veil (floor .14 → ceil .32). It used to run .46-.52
     with a 22px blur, 50% desaturation and 12% dimming, which turned every
     card into a dark, colourless slab and hid the photo behind it. */
  --glass-surface: linear-gradient(155deg, rgba(255,255,255, calc(.14 * var(--glass-amt) + .07)) 0%, rgba(255,255,255, calc(.055 * var(--glass-amt) + .03)) 16%, rgba(13,14,16, calc(var(--glass-veil) * .75)) 58%, rgba(13,14,16, var(--glass-veil)) 100%);
  --glass-surface-strong: linear-gradient(155deg, rgba(255,255,255, calc(.20 * var(--glass-amt) + .10)) 0%, rgba(255,255,255, calc(.08 * var(--glass-amt) + .04)) 14%, rgba(13,14,16, calc(var(--glass-veil) * .7)) 56%);
  --glass-highlight: rgba(255,255,255,.4);
  --glass-shadow: 0 26px 60px -28px rgba(0,0,0,.55);
  /* A soft frost that keeps the photo's own colour: a little extra
     saturation instead of the old 50% desaturation, almost no dimming,
     and a 14px ceiling (was 22px). At Clear (0) all of it is a no-op. */
  --blur-glass-liquid: blur(calc(14px * var(--glass-amt))) saturate(calc(1 + .1 * var(--glass-amt))) brightness(calc(1 - .04 * var(--glass-amt))) contrast(1.02);
}

/* ---- Real 3D liquid glass surface (cards, panels) -----------------
   Three layers: translucent surface, a bright-on-top / dim-on-bottom
   edge, and a soft shadow that separates the panel from the photo
   behind it. A light backdrop blur is reintroduced here — it only
   softens what's *behind* the panel, never the panel's own text, so
   type stays perfectly sharp while the glass finally reads as a
   dimensional material rather than a flat tinted rectangle. */
.glass{
  background: var(--glass-surface);
  border:1px solid var(--glass-border);
  border-top-color: var(--glass-highlight);
  border-bottom-color: rgba(255,255,255,.08);
  backdrop-filter: var(--blur-glass-liquid);
  -webkit-backdrop-filter: var(--blur-glass-liquid);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -20px 34px -26px rgba(0,0,0,.4);
}
/* gentle surface gradient sweep, independent of the pointer-tracked
   specular highlight already defined on .glass::before above */
.glass::after{
  content:'';
  position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, transparent 30%, transparent 72%, rgba(255,255,255,.05) 100%);
  mix-blend-mode:overlay;
}

/* Nav / hero surfaces get the same bright-top / dim-bottom edge
   treatment as the rest of the glass family; their blur/tint now
   comes from --blur-nav and the --glass-amt-scaled background set
   on .glass-clear above, so they track the Clear/Tinted slider too. */
.glass-clear{
  border-top-color: var(--glass-highlight);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow:
    0 22px 50px -24px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -14px 24px -20px rgba(0,0,0,.32);
}

/* No "glass on glass": inner surfaces nested inside an already-glass
   parent (skill tags, tl-stat pills, cert-btn chips, lab-thumb frame)
   stay as a plain thin-bordered chip rather than a second full glass
   material — this was already the case throughout the file, this
   just states the rule so it doesn't drift as the site evolves. */

/* ---- Buttons — premium physical glass controls, not HUD chrome ----
   Replaces the angled chamfer (clip-path) on the primary button and
   the animated corner brackets on the ghost button with a calm
   rounded-glass surface, in line with the rest of the design system
   and away from the "gaming console" read those effects had. */
.btn{ border-radius:16px; }
.btn-primary{
  clip-path:none;
  background:linear-gradient(168deg, rgba(255,255,255,.22), rgba(var(--accent-rgb),.92) 55%, var(--accent-deep));
  box-shadow:
    0 14px 30px -12px rgba(var(--accent-rgb),.55),
    inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -12px rgba(var(--accent-rgb),.7), inset 0 1px 0 rgba(255,255,255,.6); }
.btn-primary:active{ transform:translateY(0) scale(.98); }
.btn-ghost{
  background:var(--glass-surface);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-highlight);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px -16px rgba(0,0,0,.5);
}
.btn-ghost::before, .btn-ghost::after{ content:none; }
.btn-ghost:hover{
  background:var(--glass-surface-strong);
  border-color:var(--glass-border-bright);
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 14px 26px -14px rgba(0,0,0,.55);
}

/* cf-submit (contact form send button) gets the same calm glass
   treatment for consistency with the rest of the button system */
.cf-submit{ background:var(--glass-surface); }
.cf-submit:hover{ background:var(--glass-surface-strong); }

/* ---- Turn off the two neon/gaming-coded decorative effects -------
   1) The colored-glow "glitch" flicker on section headings (accent /
      amber text-shadow) reads as cyberpunk neon, not premium Apple,
      and the brief explicitly asks to avoid glowing typography.
      The mirrored reflection under each heading is left in place —
      it's a quiet Apple-style effect, not a glow. */
.section h2.glitch-in, .contact-panel h2.glitch-in{ animation:none; text-shadow:none; transform:none; }

/* 2) The glowing rotated "diamond" status marker in card corners —
      an unnecessary decorative accent the brief calls out directly.
      Removing it is a pure visual simplification; it carries no
      content or function. */
.trait-row::after, .award-card::after, .cert-card::after, .skill-card::after,
.edu-card::after, .ref-card::after, .highlight-card::after, .case-card::after{
  content:none;
}

/* ---- Mobile: keep the glass calm and the type crisp --------------
   Heavy backdrop blur is the single most expensive paint operation
   on scroll-heavy mobile pages, so it's dialled back (not removed)
   below the point where devices are guaranteed to be handhelds. */
@media (max-width:640px){
  :root{ --blur-glass-liquid: blur(calc(10px * var(--glass-amt))) saturate(calc(1 + .1 * var(--glass-amt))) brightness(calc(1 - .04 * var(--glass-amt))); }
}

/* ==================================================================
   [CSS-32]  AMBIENT MOTION
   ================================================================== */

/* =================================================================
   PART 7 — Ambient motion pass
   Slow, continuous, non-jittery movement only — nothing here shakes,
   vibrates or flickers. Every element targeted below is checked
   against the JS-driven transforms already in the page ([data-tilt],
   [data-depth]/[data-parallax], the hero photo's scroll-rotation via
   --scrollRotY/X, the pointer-tracked --mx/--my specular highlight)
   so none of this fights with them. The existing global
   `@media (prefers-reduced-motion: reduce)` rule near the top of the
   file already disables every animation-duration site-wide, so it
   covers everything added here automatically.
================================================================= */

/* ---- Background: slow cinematic drift instead of a static photo -- */
.bg-field::before{
  transform-origin:center 42%;
  animation: bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  0%{ transform:scale(1) translate(0,0); }
  100%{ transform:scale(1.06) translate(-1.1%, -0.8%); }
}
/* oversized (inset:-4%) so the slow pan below never exposes an edge */
.bg-field::after{
  inset:-4%;
  animation: glowDrift 24s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(-1.4%, -1%); }
}

/* ---- Universal "live" radar ping ------------------------------
   Applies to every existing <span class="ping"> in the markup (nav
   brand, hero status chip, hero photo tag, recruiter bar) with no
   HTML changes — an expanding, fading ring reads as "moving" without
   ever displacing the dot itself. */
.ping{ position:relative; }
.ping::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--accent);
  animation: pingRadar 2.6s cubic-bezier(0,0,.2,1) infinite;
  pointer-events:none;
}
@keyframes pingRadar{
  0%{ transform:scale(1); opacity:.5; }
  100%{ transform:scale(2.6); opacity:0; }
}

/* ---- Section label dot: soft pulse instead of a static dot ------- */
.section-label .dot{ animation: pulse 2.6s ease-in-out infinite; }

/* ---- Scroll hint arrow: a gentle, expected "keep scrolling" bounce */
.scroll-scrub-hint span{ animation: hintBounce 1.8s ease-in-out infinite; }
@keyframes hintBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(5px); }
}

/* ---- Hero photo tag: a very small idle float ---------------------
   translateZ(28px) is kept in every keyframe step so this never
   collapses the tag's position in the preserve-3d hero-photo stack;
   only the Y offset moves. */
.hero-photo-tag{ animation: tagFloat 5s ease-in-out infinite; }
@keyframes tagFloat{
  0%,100%{ transform:translateZ(28px) translateY(0); }
  50%{ transform:translateZ(28px) translateY(-4px); }
}

/* ---- Lab ticket status dots: a soft "live system" breathing glow -
   Only on resolved/documented tickets — the pending/not-logged dot
   stays static, which also reinforces its meaning. */
.lab-dot--done{ animation: dotBreatheAccent 3.4s ease-in-out infinite; }
.lab-dot--doc{ animation: dotBreatheAmber 3.4s ease-in-out infinite; }
@keyframes dotBreatheAccent{
  0%,100%{ box-shadow:0 0 5px var(--accent); }
  50%{ box-shadow:0 0 12px var(--accent); }
}
@keyframes dotBreatheAmber{
  0%,100%{ box-shadow:0 0 5px rgba(143,168,189,.55); }
  50%{ box-shadow:0 0 12px rgba(143,168,189,.75); }
}

/* ---- Primary CTA: a small idle nudge on the arrow, paused on hover
   so the deliberate hover push-effect (already defined earlier)
   still reads clearly instead of being masked by the loop. */
.btn-primary .btn-arrow{ animation: arrowNudge 1.8s ease-in-out infinite; }
.btn-primary:hover .btn-arrow{ animation:none; }
@keyframes arrowNudge{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(3px); }
}

/* ==================================================================
   [CSS-33]  BUTTONS 1 — pill shape
   ================================================================== */

/* =================================================================
   PART 8 — Glass pill buttons
   Every clickable button on the site now shares one shape and one
   material: a fully rounded glass pill, using the same liquid-glass
   tokens (--glass-surface / --glass-highlight / --blur-glass-liquid)
   Part 6 already introduced. Append-only, later-in-cascade-wins —
   same approach as Parts 5–7 — rather than rewriting every button
   rule scattered through the file.
================================================================= */

/* Shape — every button becomes a true pill, no exceptions */
.btn, .nav-cta, .nav-toggle, .recruiter-link, .recruiter-link-cv,
.cert-btn, .cf-submit, .arsenal-tab{
  border-radius:999px;
}
.btn-primary::before{ display:none; } /* old chamfer sweep doesn't suit a plain pill */
.btn-ghost::before, .btn-ghost::after{ content:none; } /* corner brackets don't suit a pill */

/* Standalone buttons — ones sitting directly on the photo background
   rather than nested inside an existing glass card (hero CTAs, the
   nav "Let's talk" pill, the mobile menu toggle, the recruiter-bar
   links, the Arsenal filter tabs) — get the full liquid-glass
   material, blur included. */
.btn-primary, .btn-ghost, .nav-cta, .nav-toggle, .recruiter-link,
.recruiter-link-cv, .arsenal-tab{
  background:var(--glass-surface);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-highlight);
  backdrop-filter:var(--blur-glass-liquid);
  -webkit-backdrop-filter:var(--blur-glass-liquid);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), 0 12px 26px -16px rgba(0,0,0,.5);
  color:var(--text);
}
.btn-primary:hover, .btn-ghost:hover, .nav-cta:hover, .nav-toggle:hover,
.recruiter-link:hover, .recruiter-link-cv:hover, .arsenal-tab:hover{
  background:var(--glass-surface-strong);
  border-color:var(--glass-border-bright);
  transform:translateY(-2px);
}

/* Primary / active actions keep a accent accent so they still read as
   "the" button to press — now as a tinted glass pill instead of a
   solid fill. */
.btn-primary, .recruiter-link-cv, .nav-cta, .arsenal-tab.active{
  color:var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 14px 30px -14px rgba(var(--accent-rgb),.5);
}

/* Buttons nested inside an already-glass card (certificate actions,
   the contact-form submit) skip a second blur layer — the same
   "no glass on glass" rule the rest of the file already follows —
   and just pick up the tinted glass gradient + pill shape. */
.cert-btn, .cf-submit{
  background:var(--glass-surface);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-highlight);
}
.cert-btn:hover, .cf-submit:hover{
  background:var(--glass-surface-strong);
  border-color:var(--glass-border-bright);
}
.cert-btn.primary{ color:var(--accent); }



/* ==================================================================
   [CSS-34]  BUTTONS 2 — Liquid Capsule system
   ================================================================== */

/* =================================================================
   PART 9 — Liquid Capsule / Spatial Glass button system
   Every button on the site is redrawn as a thin piece of transparent
   liquid glass floating above the page. Append-only, later-in-cascade
   wins (same approach as Parts 5–8). HTML and JS are untouched.

   Construction, all from CSS on the existing elements:
     1  outer spatial shadow ...... --lg-sh          (box-shadow)
     2  glass body ................ background + backdrop-filter
     3  inner translucent surface . --lg-edge        (inset shadows)
     4  fine highlight border ..... border-color, bright top/left,
                                    darker bottom/right
     5  internal reflection ....... ::before (crescent, drifts on hover)
     6  light sweep ............... ::after  (passes across on hover)

   Three roles, one material:
     Liquid Core    .btn-primary .nav-cta .recruiter-link-cv
                    .cert-btn.primary .cf-submit .arsenal-tab.active
     Secondary      .recruiter-link .cert-btn .arsenal-tab
     Ghost          .btn-ghost
     Glass Lens     .nav-toggle .bd-card-plus .case-toggle
   No pointer-position code of any kind: depth is static, and motion
   comes only from hover / focus / active / reveal states.
================================================================= */

/* Registered so glass tint, reflection strength and the accent core can
   fade smoothly instead of snapping (gradients cannot transition). */
@property --lg-spec{ syntax:'<number>'; inherits:false; initial-value:.14; }
@property --lg-veil{ syntax:'<number>'; inherits:false; initial-value:.3; }
@property --lg-core{ syntax:'<number>'; inherits:false; initial-value:0; }

:root{
  --lg-ease:      cubic-bezier(.22,.7,.2,1);
  --lg-ease-soft: cubic-bezier(.45,.1,.25,1);
  --lg-dur:       .55s;

  --lg-b-rest:  calc(22px * var(--glass-amt));   /* backdrop blur, resting — tied to the Clear/Tinted slider */
  --lg-b-hover: calc(16px * var(--glass-amt));   /* a touch clearer on hover */

  /* 1 — outer spatial shadow: contact + mid + ambient */
  --lg-sh-rest:  0 1px 1.5px rgba(0,0,0,.36), 0 10px 20px -10px rgba(0,0,0,.52), 0 26px 40px -26px rgba(0,0,0,.55);
  --lg-sh-hover: 0 1px 2px rgba(0,0,0,.42),   0 16px 28px -10px rgba(0,0,0,.60), 0 38px 54px -28px rgba(0,0,0,.62);
  --lg-sh-press: 0 .5px 1px rgba(0,0,0,.42),  0 4px 8px -5px rgba(0,0,0,.55),    0 10px 16px -12px rgba(0,0,0,.42);

  /* 3 — glass thickness: bright upper-left rim, darker lower-right rim,
         1px translucent inner border, upper glow, lower shade */
  --lg-edge-rest:  inset 1px 1px 0 rgba(255,255,255,.44), inset -1px -1px 0 rgba(16,18,20,.34), inset 0 0 0 1px rgba(255,255,255,.04), inset 0 12px 14px -13px rgba(255,255,255,.20), inset 0 -10px 14px -12px rgba(0,0,0,.42);
  --lg-edge-hover: inset 1px 1px 0 rgba(255,255,255,.66), inset -1px -1px 0 rgba(16,18,20,.30), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 14px 16px -13px rgba(255,255,255,.30), inset 0 -12px 16px -12px rgba(0,0,0,.46);
  --lg-edge-press: inset 1px 1px 0 rgba(255,255,255,.72), inset -1px -1px 0 rgba(16,18,20,.44), inset 0 0 0 2px rgba(255,255,255,.075), inset 0 6px 10px -8px rgba(255,255,255,.34), inset 0 -8px 12px -9px rgba(0,0,0,.52);

  /* very fine surface grain, white speckle at low alpha */
  --lg-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 0 0 0 -.34'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");

  --lg-trans:
    --lg-spec var(--lg-dur) var(--lg-ease),
    --lg-veil var(--lg-dur) var(--lg-ease),
    --lg-core .7s var(--lg-ease),
    box-shadow var(--lg-dur) var(--lg-ease),
    border-color var(--lg-dur) var(--lg-ease),
    color .45s ease,
    backdrop-filter var(--lg-dur) var(--lg-ease),
    -webkit-backdrop-filter var(--lg-dur) var(--lg-ease),
    translate var(--lg-dur) var(--lg-ease),
    scale var(--lg-dur) var(--lg-ease),
    outline-color .4s ease,
    outline-offset .4s var(--lg-ease);
  /* press: quick in, slow release (release uses --lg-trans) */
  --lg-trans-press:
    --lg-spec .14s ease-out,
    --lg-veil .14s ease-out,
    --lg-core .3s ease-out,
    box-shadow .14s ease-out,
    border-color .14s ease-out,
    color .2s ease,
    backdrop-filter .2s ease-out,
    -webkit-backdrop-filter .2s ease-out,
    translate .14s ease-out,
    scale .14s ease-out,
    outline-color .2s ease,
    outline-offset .2s ease;
}

/* ==================================================================
   [CSS-35]  BUTTONS 3 — shared base
   ================================================================== */

/* -----------------------------------------------------------------
   REST — the shared Liquid Capsule
   ":not(.lg-none)" is a specificity lift (the class never exists) so
   these rules outrank the older per-button hover rules without
   !important. Order in this block: rest → hover → focus → press.
----------------------------------------------------------------- */
:is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none){
  --lg-spec:.14; --lg-veil:.30; --lg-core:0;
  --lg-b:var(--lg-b-rest); --lg-sat:1.08;
  --lg-fg:rgba(255,255,255,.92);
  --lg-edge:var(--lg-edge-rest);
  --lg-sh:var(--lg-sh-rest);
  --lg-glow:inset 0 0 0 0 transparent, 0 0 0 0 transparent;
  --lg-bc:rgba(255,255,255,.40) rgba(255,255,255,.16) rgba(255,255,255,.10) rgba(255,255,255,.28);
  /* the accent "energy" layer — invisible until --lg-core > 0 */
  --lg-extra:
    radial-gradient(100% 120% at 50% 138%, rgba(var(--accent-rgb),calc(var(--lg-core) * .40)) 0%, rgba(var(--accent-rgb),calc(var(--lg-core) * .13)) 42%, transparent 70%),
    radial-gradient(42% 70% at 74% 124%, rgba(var(--accent-light-rgb),calc(var(--lg-core) * .22)), transparent 100%);

  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-color:var(--lg-bc);
  border-radius:999px;
  color:var(--lg-fg);
  font-family:var(--ff-body); font-weight:500; letter-spacing:.012em;
  text-shadow:0 1px 1px rgba(0,0,0,.28);
  text-decoration:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  background:
    var(--lg-extra),
    radial-gradient(90% 160% at 4% -30%, rgba(255,255,255,var(--lg-spec)), transparent 58%),   /* upper-left specular */
    radial-gradient(60% 140% at 50% 48%, rgba(255,255,255,.055), transparent 72%),            /* optical centre / bulge */
    radial-gradient(100% 140% at 104% 130%, rgba(0,0,0,.30), transparent 62%),                /* lower-right shade */
    var(--lg-noise) 0 0 / 120px 120px repeat,
    rgba(18,20,22,var(--lg-veil));
  -webkit-backdrop-filter:blur(var(--lg-b)) saturate(var(--lg-sat)) brightness(.92);
          backdrop-filter:blur(var(--lg-b)) saturate(var(--lg-sat)) brightness(.92);
  box-shadow:var(--lg-edge), var(--lg-sh), var(--lg-glow);
  outline:1.5px solid transparent; outline-offset:0;
  transition:var(--lg-trans);
}

/* glass on glass: buttons sitting inside an already-glass card skip
   their own blur (same rule the rest of the file follows) and carry a
   slightly denser body instead */
:is(.cert-btn,.cf-submit):not(.lg-none){
  --lg-veil:.34;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* per-button sizing and type — the system face, medium weight */
.btn:not(.lg-none)           { padding:13px 24px; }
.nav-cta:not(.lg-none)       { padding:10px 20px; font-size:14px; }
.recruiter-link:not(.lg-none){ padding:9px 16px;  font-size:13px; }
.recruiter-link-cv:not(.lg-none){ gap:6px; }
.cert-btn:not(.lg-none)      { padding:8px 14px;  font-size:12px; gap:7px; }
.arsenal-tab:not(.lg-none)   { padding:10px 18px; font-size:13px; }
.cf-submit:not(.lg-none)     { padding:13px 24px; }

/* Revealed buttons keep the site's scroll-reveal (opacity + transform,
   staggered) — hover/press use the separate `translate`/`scale`
   properties, so the two systems never fight, and the stagger delay
   no longer leaks into hover. */
.btn[data-reveal]:not(.lg-none){
  transition:
    var(--lg-trans),
    opacity var(--sp-duration) var(--sp-ease) calc(var(--sp-i,0) * var(--sp-stagger-step)),
    transform var(--sp-duration) var(--sp-ease) calc(var(--sp-i,0) * var(--sp-stagger-step));
}

/* 5 — internal reflection: an upper crescent, brighter on the left */
:is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none)::before{
  content:''; display:block; position:absolute; z-index:-1; pointer-events:none;
  top:1px; bottom:auto; left:7%; right:7%; width:auto; height:52%;
  border:0; border-radius:999px 999px 50% 50% / 100% 100% 60% 60%;
  background:
    radial-gradient(45% 90% at 26% 8%, rgba(255,255,255,.30), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.04) 62%, rgba(255,255,255,0) 100%);
  opacity:.7; transform:none; translate:0 0;
  transition:opacity var(--lg-dur) var(--lg-ease), translate .7s var(--lg-ease);
}
/* 6 — light sweep: parked off-glass, crosses once on hover */
:is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none)::after{
  content:''; display:block; position:absolute; z-index:-1; pointer-events:none;
  top:0; bottom:0; left:0; right:0; width:auto; height:auto;
  border:0; border-radius:inherit; transform:none;
  background:linear-gradient(103deg, transparent 32%, rgba(255,255,255,.10) 43%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.07) 57%, transparent 68%);
  opacity:0; translate:-105% 0;
  transition:opacity .45s ease, translate 0s linear .45s;
}

/* icons suspended in the glass */
.cert-btn .icon3d-sm{
  filter:grayscale(1) brightness(1.3) contrast(.92) drop-shadow(0 0 0 rgba(255,255,255,0));
  opacity:.86; transition:filter .5s var(--lg-ease), opacity .5s ease;
}
.btn-arrow{ transition:transform .6s var(--lg-ease), text-shadow .5s ease, color .5s ease; text-shadow:0 0 0 rgba(255,255,255,0); }
.btn-primary .btn-arrow{ animation:none; } /* calm the idle nudge — depth stays static */

/* ==================================================================
   [CSS-36]  BUTTONS 4 — roles (primary / secondary / ghost)
   ================================================================== */

/* -----------------------------------------------------------------
   ROLES
----------------------------------------------------------------- */
/* Liquid Core — accent lives inside the glass, not on it */
:is(.btn-primary,.nav-cta,.recruiter-link-cv,.cert-btn.primary,.cf-submit,.arsenal-tab.active){
  --lg-core:1;
  --lg-fg:#fff;
  --lg-veil:.26;
  --lg-bc:rgba(255,255,255,.60) rgba(255,255,255,.26) rgba(255,255,255,.14) rgba(255,255,255,.44);
  --lg-glow:inset 0 -10px 18px -10px rgba(var(--accent-rgb),.22), 0 12px 26px -16px rgba(var(--accent-rgb),.30);
  font-weight:600;
}
:is(.btn-primary,.recruiter-link-cv,.cf-submit) .btn-arrow{ color:var(--accent-light); }
/* the small moving light: the crescent drifts slowly inside the glass */
:is(.btn-primary,.nav-cta,.recruiter-link-cv,.cert-btn.primary,.cf-submit,.arsenal-tab.active):not(.lg-none)::before{
  animation:lgDrift 9s ease-in-out infinite alternate;
}
@keyframes lgDrift{
  from{ transform:translateX(-5%); }
  to  { transform:translateX(6%); }
}

/* Secondary — neutral silver glass */
:is(.recruiter-link,.cert-btn,.arsenal-tab):not(.lg-none){ --lg-fg:rgba(255,255,255,.88); }

/* Ghost — almost invisible until you reach for it */
.btn.btn-ghost{
  --lg-spec:.05; --lg-veil:.05; --lg-b:10px; --lg-sat:1.05;
  --lg-fg:rgba(255,255,255,.80);
  --lg-bc:rgba(255,255,255,.26) rgba(255,255,255,.10) rgba(255,255,255,.06) rgba(255,255,255,.18);
  --lg-sh:0 8px 18px -12px rgba(0,0,0,.40);
  --lg-edge:inset 1px 1px 0 rgba(255,255,255,.20), inset -1px -1px 0 rgba(16,18,20,.16), inset 0 0 0 1px rgba(255,255,255,.02), inset 0 12px 14px -13px rgba(255,255,255,.08), inset 0 -10px 14px -12px rgba(0,0,0,.20);
  font-weight:500;
}
.btn.btn-ghost::before{ opacity:.35; }

/* ==================================================================
   [CSS-37]  BUTTONS 5 — glass lens (icon-only round controls)
   ================================================================== */

/* -----------------------------------------------------------------
   GLASS LENS — icon-only round controls
   The old rotate() on the whole control is replaced by rotating only
   the glyph, so the rim, highlight and shadow never swing around.
----------------------------------------------------------------- */
:is(.nav-toggle,.bd-card-plus,.case-toggle):not(.lg-none){
  --lg-spec:.24; --lg-veil:.26; --lg-core:0;
  --lg-b:calc(18px * var(--glass-amt)); --lg-sat:1.08;
  --lg-sh:0 1px 1.5px rgba(0,0,0,.34), 0 6px 12px -6px rgba(0,0,0,.5), 0 14px 20px -14px rgba(0,0,0,.45);
  --lg-glow:inset 0 0 0 0 transparent, 0 0 0 0 transparent;
  --lg-bc:rgba(255,255,255,.42) rgba(255,255,255,.16) rgba(255,255,255,.10) rgba(255,255,255,.30);
  --lg-extra:radial-gradient(circle at 50% 122%, rgba(var(--accent-rgb),calc(var(--lg-core) * .46)), transparent 72%);

  position:relative; isolation:isolate; overflow:hidden;
  align-items:center; justify-content:center;
  padding:0; border:1px solid transparent; border-color:var(--lg-bc);
  border-radius:50%;
  color:var(--lg-fg);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:
    var(--lg-extra),
    radial-gradient(circle at 31% 23%, rgba(255,255,255,calc(var(--lg-spec) + .08)), rgba(255,255,255,.05) 30%, transparent 50%),  /* specular */
    radial-gradient(circle closest-side, transparent calc(100% - 5px), rgba(255,255,255,.15) calc(100% - 4.5px), rgba(255,255,255,.15) calc(100% - 3.5px), transparent calc(100% - 3px)),  /* inner ring */
    radial-gradient(circle closest-side, rgba(255,255,255,.06), transparent 62%, rgba(0,0,0,.30) 100%),  /* lens bulge + refractive rim */
    rgba(18,20,22,var(--lg-veil));
  -webkit-backdrop-filter:blur(var(--lg-b)) saturate(var(--lg-sat)) brightness(.92);
          backdrop-filter:blur(var(--lg-b)) saturate(var(--lg-sat)) brightness(.92);
  box-shadow:var(--lg-edge), var(--lg-sh), var(--lg-glow);
  outline:1.5px solid transparent; outline-offset:0;
  transition:var(--lg-trans);
}
.nav-toggle:not(.lg-none){ width:44px; height:44px; }
.bd-card-plus:not(.lg-none){ width:24px; height:24px; font-size:0; line-height:0; }
.case-toggle:not(.lg-none){ width:32px; height:32px; font-size:0; line-height:0; }

/* nested inside glass cards: no second blur, denser body */
:is(.bd-card-plus,.case-toggle):not(.lg-none){
  --lg-veil:.34;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* lens glint — a small arc of light, upper left */
:is(.nav-toggle,.bd-card-plus,.case-toggle):not(.lg-none)::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  left:17%; top:8%; width:48%; height:27%;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,0));
  transform:rotate(-24deg); opacity:.7;
  transition:opacity var(--lg-dur) var(--lg-ease);
}
/* hairline glyph drawn in CSS (1.5px), so it can turn on its own */
:is(.bd-card-plus,.case-toggle):not(.lg-none)::after{
  content:''; flex:none; display:block;
  width:9px; height:9px;
  background:
    linear-gradient(currentColor,currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center / 1.5px 100% no-repeat;
  opacity:.9;
  filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  transition:transform .6s var(--lg-ease), opacity .4s ease, filter .5s ease;
}
.case-toggle:not(.lg-none)::after{ width:12px; height:12px; }
.bd-card-plus:not(.lg-none){ --lg-fg:rgba(255,255,255,.80); }

.nav-toggle svg{
  stroke-width:1.5; opacity:.92;
  filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  transition:filter .5s ease, opacity .4s ease;
}

/* open state — accent wakes up inside the lens, glyph turns to ×  */
.bd-card.is-open .bd-card-plus,
.case-card.open .case-toggle{
  --lg-core:1;
  --lg-bc:rgba(var(--accent-light-rgb),.62) rgba(255,255,255,.22) rgba(255,255,255,.12) rgba(var(--accent-light-rgb),.42);
  transform:none; color:var(--accent-light); border-color:var(--lg-bc);
}
.bd-card.is-open .bd-card-plus::after,
.case-card.open .case-toggle::after{ transform:rotate(45deg); opacity:1; }

/* ==================================================================
   [CSS-38]  BUTTONS 6 — hover
   ================================================================== */

/* -----------------------------------------------------------------
   HOVER — Vision Pro optical response (real pointers only)
   glass clears · rim brightens · reflection slides · light crosses ·
   depth deepens · a microscopic lift
----------------------------------------------------------------- */
@media (hover:hover){
  :is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none):hover{
    --lg-spec:.22; --lg-veil:.20; --lg-b:var(--lg-b-hover); --lg-sat:1.22;
    --lg-fg:#fff;
    --lg-edge:var(--lg-edge-hover); --lg-sh:var(--lg-sh-hover);
    --lg-bc:rgba(255,255,255,.66) rgba(255,255,255,.28) rgba(255,255,255,.18) rgba(255,255,255,.48);
    transform:none; filter:none;
    translate:0 -1px;
  }
  :is(.cert-btn,.cf-submit):not(.lg-none):hover{ --lg-veil:.25; }

  :is(.btn-primary,.nav-cta,.recruiter-link-cv,.cert-btn.primary,.cf-submit,.arsenal-tab.active):hover{
    --lg-core:1.3;
    --lg-bc:rgba(255,255,255,.86) rgba(255,255,255,.40) rgba(255,255,255,.24) rgba(255,255,255,.64);
    --lg-glow:inset 0 -10px 20px -10px rgba(var(--accent-rgb),.30), 0 14px 30px -14px rgba(var(--accent-rgb),.38);
  }
  .btn.btn-ghost:hover{
    --lg-veil:.13; --lg-spec:.16;
    --lg-sh:0 12px 22px -12px rgba(0,0,0,.5);
  }

  :is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none):hover::before{
    opacity:.95; translate:4% 0; transform:none;
  }
  :is(.btn-primary,.nav-cta,.recruiter-link-cv,.cert-btn.primary,.cf-submit,.arsenal-tab.active):not(.lg-none):hover::before{
    animation-play-state:paused; /* the drifting light settles while you look at it */
  }
  :is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none):hover::after{
    opacity:1; translate:105% 0; transform:none;
    transition:opacity .35s ease, translate .8s var(--lg-ease-soft);
  }

  :is(.btn,.recruiter-link-cv,.cf-submit):not(.lg-none):hover .btn-arrow{
    transform:translateX(3px); text-shadow:0 0 8px rgba(255,255,255,.55);
  }
  .cert-btn:not(.lg-none):hover .icon3d-sm{
    opacity:1; filter:grayscale(1) brightness(1.5) contrast(.92) drop-shadow(0 0 4px rgba(255,255,255,.4));
  }

  /* lenses — own hover, or the card/row they belong to */
  .nav-toggle:not(.lg-none):hover,
  .bd-card:hover .bd-card-plus:not(.lg-none),
  .case-head:hover .case-toggle:not(.lg-none){
    --lg-spec:.34; --lg-veil:.16; --lg-b:calc(14px * var(--glass-amt)); --lg-sat:1.22;
    --lg-fg:#fff;
    --lg-sh:0 1px 2px rgba(0,0,0,.4), 0 9px 16px -6px rgba(0,0,0,.56), 0 20px 26px -16px rgba(0,0,0,.5);
    --lg-bc:rgba(255,255,255,.68) rgba(255,255,255,.28) rgba(255,255,255,.18) rgba(255,255,255,.50);
    transform:none; filter:none;
  }
  .nav-toggle:not(.lg-none):hover{ translate:0 -1px; }
  .nav-toggle:not(.lg-none):hover svg{ opacity:1; filter:drop-shadow(0 0 4px rgba(255,255,255,.5)); }
  .bd-card:hover .bd-card-plus:not(.lg-none)::after,
  .case-head:hover .case-toggle:not(.lg-none)::after{ opacity:1; filter:drop-shadow(0 0 3px rgba(255,255,255,.55)); }
  .nav-toggle:not(.lg-none):hover::before,
  .bd-card:hover .bd-card-plus:not(.lg-none)::before,
  .case-head:hover .case-toggle:not(.lg-none)::before{ opacity:1; }
}

/* ==================================================================
   [CSS-39]  BUTTONS 7 — focus ring
   ================================================================== */

/* -----------------------------------------------------------------
   FOCUS — spatial ring: thin silver outline, soft translucent halo,
   a faint accent glow inside the glass
----------------------------------------------------------------- */
:is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab,.nav-toggle):not(.lg-none):focus-visible{
  outline:1.5px solid rgba(236,242,244,.80); outline-offset:3px;
  --lg-glow:inset 0 0 16px rgba(var(--accent-rgb),.20), 0 0 0 7px rgba(255,255,255,.055);
  --lg-fg:#fff;
}
:is(.btn-primary,.nav-cta,.recruiter-link-cv,.cert-btn.primary,.cf-submit,.arsenal-tab.active):not(.lg-none):focus-visible{
  --lg-glow:inset 0 0 18px rgba(var(--accent-rgb),.30), 0 0 0 7px rgba(255,255,255,.055);
}
.bd-card:focus-visible .bd-card-plus:not(.lg-none){
  --lg-bc:rgba(255,255,255,.68) rgba(255,255,255,.28) rgba(255,255,255,.18) rgba(255,255,255,.50);
  --lg-glow:inset 0 0 8px rgba(var(--accent-rgb),.30), 0 0 0 3px rgba(255,255,255,.07);
}

/* ==================================================================
   [CSS-40]  BUTTONS 8 — press
   ================================================================== */

/* -----------------------------------------------------------------
   PRESS — a glass control pushed in 1.5px: shadow compresses, rim
   thickens and brightens, reflection flares, then eases back out
----------------------------------------------------------------- */
:is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab,.nav-toggle):not(.lg-none):active{
  --lg-spec:.32; --lg-veil:.27; --lg-b:calc(20px * var(--glass-amt));
  --lg-edge:var(--lg-edge-press); --lg-sh:var(--lg-sh-press);
  --lg-bc:rgba(255,255,255,.74) rgba(255,255,255,.32) rgba(255,255,255,.20) rgba(255,255,255,.54);
  transform:none; filter:none;
  translate:0 1.5px; scale:.99;
  transition:var(--lg-trans-press);
}
:is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none):active::before{
  opacity:1; translate:0 0; transform:none;
  transition:opacity .14s ease-out;
}
:is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none):active::after{
  opacity:.55; translate:0 0; transform:none;
  transition:opacity .14s ease-out, translate 0s;
}
.nav-toggle:not(.lg-none):active::before{ opacity:1; }

.cf-submit:disabled{ pointer-events:none; opacity:.6; }

/* ==================================================================
   [CSS-41]  BUTTONS 9 — responsive
   ================================================================== */

/* -----------------------------------------------------------------
   RESPONSIVE
----------------------------------------------------------------- */
/* tablet — a little less depth and blur */
@media (max-width:900px){
  :root{
    --lg-b-rest:calc(18px * var(--glass-amt)); --lg-b-hover:calc(14px * var(--glass-amt));
    --lg-sh-rest:  0 1px 1.5px rgba(0,0,0,.34), 0 8px 16px -10px rgba(0,0,0,.50), 0 16px 26px -20px rgba(0,0,0,.50);
    --lg-sh-hover: 0 1px 2px rgba(0,0,0,.40),   0 12px 22px -10px rgba(0,0,0,.56), 0 24px 34px -22px rgba(0,0,0,.56);
  }
}
/* mobile — same material, lighter blur and no grain; easy to tap */
@media (max-width:640px){
  :root{
    --lg-b-rest:calc(13px * var(--glass-amt)); --lg-b-hover:calc(11px * var(--glass-amt));
    --lg-noise:linear-gradient(transparent,transparent);
    --lg-sh-rest:  0 1px 1.5px rgba(0,0,0,.34), 0 6px 12px -8px rgba(0,0,0,.50), 0 12px 20px -16px rgba(0,0,0,.48);
    --lg-sh-hover: 0 1px 2px rgba(0,0,0,.40),   0 8px 16px -8px rgba(0,0,0,.54),  0 16px 24px -18px rgba(0,0,0,.52);
  }
}
@media (max-width:640px), (pointer:coarse){
  :is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none){ min-height:44px; }
  .nav-toggle:not(.lg-none){ width:44px; height:44px; }
}

/* ==================================================================
   [CSS-42]  BUTTONS 10 — accessibility
   ================================================================== */

/* -----------------------------------------------------------------
   ACCESSIBILITY
----------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  /* keep the glass and the hover / focus / press states; drop the
     sweep and the drifting light */
  :is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none)::after{ display:none; }
  :is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab):not(.lg-none)::before,
  :is(.btn-primary,.nav-cta,.recruiter-link-cv,.cert-btn.primary,.cf-submit,.arsenal-tab.active):not(.lg-none)::before{ animation:none; }
  .btn-arrow{ transition:none; }
}
@media (forced-colors: active){
  :is(.btn,.nav-cta,.nav-link,.contact-pill,.recruiter-link,.cert-btn,.cf-submit,.arsenal-tab,.nav-toggle):not(.lg-none):focus-visible{
    outline-color:Highlight;
  }
}


/* ==================================================================
   [CSS-43]  LOGOS — Pearl Plate system
   ================================================================== */

/* =================================================================
   PART 10 — Pearl Plate logo system
   Most partner logos are dark artwork on white, so on the dark glass
   theme they were tiny and low-contrast. Each logo now sits on its
   own thin pearl-glass plate: bright enough to read at a glance,
   depth from layered shadow, a small accent foot-mark that lengthens
   on hover, and a faint accent sheen that crosses once. The plate is a
   wrapper span; logos are multiplied into it so white JPG backgrounds
   melt away. Sizes scale from one variable (--plate-h).
================================================================= */
.tl-logos{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0 6px; }

.logo-plate{
  --plate-h:72px;
  position:relative; isolation:isolate; overflow:hidden; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--plate-h); padding:8px 10px;
  border-radius:20px;
  background:
    radial-gradient(120% 90% at 18% -20%, #fff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f7f9fa 0%, #e9edef 100%);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -10px 16px -12px rgba(20,28,32,.22),
    0 0 0 1px rgba(255,255,255,.22),
    0 1px 1.5px rgba(0,0,0,.40),
    0 12px 22px -12px rgba(0,0,0,.65);
  transition:transform .5s var(--lg-ease,ease), box-shadow .5s var(--lg-ease,ease);
}
/* widths follow the logo's shape */
.logo-plate--sq{ width:calc(var(--plate-h) * 1.22); }
.logo-plate--md{ width:calc(var(--plate-h) * 1.72); }
.logo-plate--wd{ width:calc(var(--plate-h) * 2.28); }
.logo-plate--xw{ width:calc(var(--plate-h) * 2.94); }

.logo-plate img{
  position:relative; z-index:0; display:block;
  width:100%; height:100%; max-width:none;
  object-fit:contain; mix-blend-mode:multiply;
  padding:0; border:0; border-radius:0; background:none;
  filter:saturate(1.05) contrast(1.03);
}

/* accent foot-mark: a small index tab at rest, longer on hover */
.logo-plate::after{
  content:''; position:absolute; z-index:2; pointer-events:none;
  left:50%; bottom:0; width:16%; height:2px;
  border-radius:2px 2px 0 0; background:var(--accent); opacity:.6;
  translate:-50% 0;
  transition:width .5s var(--lg-ease,ease), opacity .4s ease;
}
/* one faint accent sheen, parked off-plate */
.logo-plate::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 34%, rgba(var(--accent-rgb),.10) 46%, rgba(255,255,255,.85) 50%, rgba(var(--accent-rgb),.10) 54%, transparent 66%);
  translate:-110% 0;
  transition:translate 0s linear .5s;
}

/* education seals: larger, square, one per school */
.logo-plate--seal{ --plate-h:88px; width:var(--plate-h); padding:10px; border-radius:24px; }
/* Aptech's mark is a full-bleed photo, so let it fill the seal */
.logo-plate.is-photo{ padding:0; }
.logo-plate.is-photo img{ mix-blend-mode:normal; object-fit:cover; filter:saturate(.8) contrast(1.02); }

.edu-top{ align-items:center; justify-content:flex-start; gap:14px 18px; }
.edu-top > div{ flex:1 1 240px; min-width:0; }
.edu-top .edu-date{ margin-left:auto; flex:none; }

@media (hover:hover){
  .logo-plate:hover{
    transform:translateY(-2px);
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -10px 16px -12px rgba(20,28,32,.22),
      0 0 0 1px rgba(255,255,255,.34),
      0 1px 2px rgba(0,0,0,.45),
      0 18px 28px -12px rgba(0,0,0,.72);
  }
  .logo-plate:hover::after{ width:46%; opacity:1; }
  .logo-plate:hover::before{ translate:110% 0; transition:translate .9s var(--lg-ease-soft,ease); }
}

@media (max-width:560px){
  .logo-plate{ --plate-h:60px; border-radius:16px; }
  .logo-plate--seal{ --plate-h:68px; border-radius:20px; }
  .tl-logos{ gap:10px; }
}
@media (prefers-reduced-motion: reduce){
  .logo-plate::before{ display:none; }
  .logo-plate:hover{ transform:none; }
}


/* ==================================================================
   [CSS-44]  NAVBAR — capsule links + mobile fixes
   ================================================================== */

/* =================================================================
   PART 11 — Navbar: every link is a Liquid Capsule + mobile fixes
   Every nav link now uses the exact same glass-capsule material as
   the "Let's talk" button (the .nav-link class is part of the shared
   selector lists in Part 9). "Let's talk" keeps the accent core; links
   are the silver secondary role, the active link gets a soft accent
   core so you can see where you are. Spacing is one variable:
   --nav-gap (same gap between every pill, links and CTA alike).
================================================================= */
.nav{ --nav-gap:6px; --nl-fs:13px; --nl-px:14px; --nl-py:9px; gap:0; }

/* same size, same height — links and CTA line up exactly */
.nav-link:not(.lg-none),
.nav-cta:not(.lg-none){
  padding:var(--nl-py) var(--nl-px); font-size:var(--nl-fs); line-height:1.25;
  white-space:nowrap;
}
.nav-link:not(.lg-none){ --lg-fg:rgba(255,255,255,.88); font-weight:500; }
.nav > .nav-cta:not(.lg-none){ padding:var(--nl-py) calc(var(--nl-px) + 4px); }

/* Density steps so every link + the CTA always fit on ONE row.
   A ≥1500 · B 1400–1499 · C 1260–1399 · D 1180–1259. Below 1180px
   (tablets / phones) the menu button + drawer take over. */
@media (min-width:1400px) and (max-width:1499px){
  .nav{ --nav-gap:5px; --nl-fs:12.5px; --nl-px:11px; --nl-py:8px; }
}
@media (min-width:1260px) and (max-width:1399px){
  .nav{ --nav-gap:4px; --nl-fs:12px; --nl-px:8px; --nl-py:8px; }
  .nav-brand{ font-size:15px; }
}
@media (min-width:1180px) and (max-width:1259px){
  .nav{ --nav-gap:3px; --nl-fs:11.5px; --nl-px:7px; --nl-py:7px; }
  .nav-brand{ font-size:15px; }
}

/* current section — same glass, brighter rim, accent waking inside */
.nav-link.active:not(.lg-none){
  --lg-core:.75; --lg-spec:.22; --lg-veil:.22;
  --lg-fg:#fff;
  --lg-edge:var(--lg-edge-hover);
  --lg-bc:rgba(255,255,255,.66) rgba(255,255,255,.28) rgba(255,255,255,.18) rgba(255,255,255,.48);
  --lg-glow:inset 0 -8px 16px -10px rgba(var(--accent-rgb),.26), 0 10px 22px -14px rgba(var(--accent-rgb),.30);
}

/* hamburger ⇄ close */
.nav-toggle .i-close{ display:none; }
.nav-toggle[aria-expanded="true"] .i-open{ display:none; }
.nav-toggle[aria-expanded="true"] .i-close{ display:inline; }
.nav-toggle[aria-expanded="true"]:not(.lg-none){
  --lg-core:1;
  --lg-bc:rgba(var(--accent-light-rgb),.62) rgba(255,255,255,.22) rgba(255,255,255,.12) rgba(var(--accent-light-rgb),.42);
  color:var(--accent-light);
}

/* ---- Desktop: full row of pills ---------------------------------- */
@media (min-width:1180px){
  .nav-toggle, .mob-drawer, .nav-scrim{ display:none !important; }
}

/* ---- Menu button appears only on tablets / phones ------------------ */
/* Tablets & phones (<1180px): menu button + drawer */
@media (max-width:1179px){
  .nav{ width:min(calc(100% - 32px), 860px); justify-content:space-between; }
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; margin-left:10px; }
  .nav > .nav-cta{ margin-left:auto; }
}

/* ---- Mobile / tablet drawer ---------------------------------------
   Was see-through (page text showed through the links) and could run
   off the bottom of the screen. Now: a dense dark glass sheet, two
   columns of the same capsule links, scrolls inside itself, closes on
   tap outside / Esc / link tap. */
.nav-scrim{
  position:fixed; inset:0; z-index:48;
  background:rgba(4,6,7,.55);
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.nav-scrim.open{ opacity:1; visibility:visible; transition-delay:0s; }

.mob-drawer.glass-clear{
  position:fixed; z-index:49; inset:auto;
  top:calc(env(safe-area-inset-top, 0px) + 84px);
  left:max(16px, calc((100% - 860px) / 2)); right:max(16px, calc((100% - 860px) / 2));
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  padding:12px; border-radius:26px;
  max-height:calc(100vh - 104px - env(safe-area-inset-top, 0px));
  max-height:calc(100dvh - 104px - env(safe-area-inset-top, 0px));
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  background:
    linear-gradient(168deg, rgba(255,255,255, calc(.12 * var(--glass-amt) + .04)) 0%, rgba(255,255,255, calc(.03 * var(--glass-amt) + .01)) 55%),
    rgba(12,14,16, calc(.55 + .25 * var(--glass-amt)));   /* was .1-1.0: fully opaque at Tinted. It floats over the page, so it keeps a floor. */
  -webkit-backdrop-filter:blur(calc(16px + 12px * var(--glass-amt))) saturate(calc(1.1 + .2 * var(--glass-amt))); backdrop-filter:blur(calc(16px + 12px * var(--glass-amt))) saturate(calc(1.1 + .2 * var(--glass-amt)));
  transform-origin:top center;
  transform:translateY(-8px) scale(.97); opacity:0;
  visibility:hidden; pointer-events:none;
  transition:transform .3s var(--lg-ease), opacity .22s ease, visibility 0s linear .3s;
}
.mob-drawer.glass-clear.open{
  transform:none; opacity:1; visibility:visible; pointer-events:auto;
  transition-delay:0s;
}
/* pills inside the drawer: no second blur layer, slightly denser body */
.mob-drawer .nav-link:not(.lg-none){
  width:100%; min-height:46px; font-size:14px; padding:11px 14px;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  --lg-veil:.34;
}
.mob-drawer .mob-cta:not(.lg-none){
  grid-column:1 / -1; min-height:50px; font-size:15px; margin-top:4px;
  -webkit-backdrop-filter:none; backdrop-filter:none;
}

/* ---- Phones ------------------------------------------------------- */
@media (max-width:640px){
  .nav{ top:calc(env(safe-area-inset-top, 0px) + 12px); padding:8px 8px 8px 18px; }
  .nav-brand{ font-size:15px; }
  .mob-drawer.glass-clear{ top:calc(env(safe-area-inset-top, 0px) + 78px); }

  .hero{ padding:48px 0 56px; }
  .hero-grid{ gap:36px; }
  /* headline flows as one paragraph — no orphaned "that" */
  .hero h1{ font-size:clamp(32px, 9.4vw, 42px); }
  .hero h1 span{ display:inline; }
  .hero-sub{ font-size:16.5px; margin-bottom:28px; }
  /* buttons: primary full width, the two CV buttons share a row */
  .hero-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:32px; }
  .hero-actions .btn{ justify-content:center; width:100%; }
  .hero-actions .btn-primary{ grid-column:1 / -1; }

  .section{ padding:72px 0; }
}
@media (max-width:400px){
  .nav > .nav-cta:not(.lg-none){ padding:8px 14px; }
}
@media (max-width:340px){
  .nav > .nav-cta{ display:none; }
}

/* Recruiter fast-pass: was edge-to-edge on phones while every other
   panel keeps the page gutter — now matches the sections' margins. */
/* recruiter-bar width now comes from the shared --panel-max /
   --panel-gutter formula set on the base .recruiter-bar rule above,
   so it always matches the hero and section panels exactly. */
@media (max-width:640px){
  .recruiter-bar{ padding:16px; margin-bottom:28px; }
  .recruiter-links{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .recruiter-link{ width:100%; }
  .recruiter-link-cv{ grid-column:1 / -1; }
}
.recruiter-link:last-child:nth-child(even){ grid-column:1 / -1; } /* no orphan pill in the 2-col grid (phones only, see rule above) */
@media (min-width:641px){
  .mob-drawer.glass-clear{ grid-template-columns:repeat(4, 1fr); }
  .recruiter-link:last-child:nth-child(even){ grid-column:auto; }
}


/* Contact-panel shortcuts (CV · Email · WhatsApp · LinkedIn): same
   glass capsule as the rest of the site's secondary buttons */
.contact-pill:not(.lg-none){
  padding:10px 20px; font-size:13.5px; line-height:1.25; min-height:40px;
  --lg-fg:rgba(255,255,255,.90); font-weight:500;
}
.contact-left .contact-shortcuts{ margin-top:-4px; }

/* icon-only contact pills — CV / Email / WhatsApp / LinkedIn as bold circular buttons */
.contact-pill-icon:not(.lg-none){
  padding:0; width:48px; height:48px; min-height:48px; min-width:48px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.pill-icon{ width:24px; height:24px; display:block; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45)); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.contact-pill-icon:hover .pill-icon{ transform:scale(1.12) rotate(-4deg); }

/* drawer: an odd number of links (9 with Experience) — let the last one span the
   row instead of orphaning it, at every width. (A min-width:641px reset used to
   undo this; it was only right while the count was an even eight.) */
.mob-drawer .nav-link:nth-last-child(2){ grid-column:1 / -1; }

/* Navbar readability: it floats over page content while scrolling, and
   the old fully-clear capsule let headings show through the brand and
   buttons. It follows --glass-amt but keeps a floor (tint .18, blur 8px) so
   it never goes fully clear over moving content; at Tinted it is exactly as
   heavy as before (.28 tint, 14px). */
.nav.glass-clear{
  background:
    linear-gradient(168deg, rgba(255,255,255, calc(.12 * var(--glass-amt) + .04)) 0%, rgba(255,255,255, calc(.03 * var(--glass-amt) + .01)) 60%),
    rgba(10,12,14, calc(.18 + .10 * var(--glass-amt)));
  -webkit-backdrop-filter:blur(calc(8px + 6px * var(--glass-amt))) saturate(calc(1.1 + .2 * var(--glass-amt)));
          backdrop-filter:blur(calc(8px + 6px * var(--glass-amt))) saturate(calc(1.1 + .2 * var(--glass-amt)));
}
/* Scrolled state: nav gains a touch more body once content is behind
   it, so links stay readable over busy parts of the page, while it
   reads as fully transparent at the top of the hero. Toggled by JS
   adding/removing .nav--scrolled — falls back to the value above if
   the class is never added. */
.nav.glass-clear.nav--scrolled{
  background:
    linear-gradient(168deg, rgba(255,255,255, calc(.10 * var(--glass-amt) + .03)) 0%, rgba(255,255,255, calc(.02 * var(--glass-amt) + .01)) 60%),
    rgba(10,12,14, calc(.34 + .16 * var(--glass-amt)));
  -webkit-backdrop-filter:blur(calc(12px + 8px * var(--glass-amt))) saturate(calc(1.1 + .2 * var(--glass-amt)));
          backdrop-filter:blur(calc(12px + 8px * var(--glass-amt))) saturate(calc(1.1 + .2 * var(--glass-amt)));
}


/* ==================================================================
   [CSS-45]  CONTACT — Liquid Pane (overrides Contact base)
   ================================================================== */

/* =================================================================
   PART 12 — Contact: "Liquid Pane"
   A one-off material reserved for the contact panel. Where the other
   panels are thin, clear glass, this one is a thick slab of liquid:
     · real backdrop refraction (blur + saturation) over the photo
     · three slow, morphing colour pools suspended inside the glass
     · a curved meniscus highlight along the top edge
     · a chromatic rim (cool on the left, warm on the right) like
       light dispersing through thick glass
     · a light streak that crosses the pane every few seconds
     · inputs pressed into the glass as dark wells
     · the column divider is a hairline with a single accent bead
   HTML: one decorative <span class="cp-liquid"> added; JS untouched.
================================================================= */
.contact-panel.glass{
  border-radius:40px;
  clip-path:none;
  border:1px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.62);
  border-left-color:rgba(255,255,255,.36);
  border-bottom-color:rgba(255,255,255,.07);
  background:
    radial-gradient(120% 60% at 50% -14%, rgba(255,255,255,.22), transparent 60%),   /* meniscus */
    radial-gradient(85% 60% at 104% 112%, rgba(0,0,0,.38), transparent 70%),         /* pooled shade */
    linear-gradient(160deg, rgba(255,255,255,.10) 0%, rgba(12,14,16,.30) 52%, rgba(12,14,16,.44) 100%);
  /* follows the Clear <-> Blurred slider: no blur at 0px */
  -webkit-backdrop-filter:blur(calc(26px * var(--glass-amt))) saturate(calc(1 + .5 * var(--glass-amt))) brightness(calc(1 - .1 * var(--glass-amt)));
          backdrop-filter:blur(calc(26px * var(--glass-amt))) saturate(calc(1 + .5 * var(--glass-amt))) brightness(calc(1 - .1 * var(--glass-amt)));
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255,255,255,.42),
    inset -1px -1px 0 rgba(0,0,0,.36),
    inset 2px 0 0 rgba(120,190,255,.14),      /* chromatic rim — cool */
    inset -2px 0 0 rgba(255,150,120,.10),     /* chromatic rim — warm */
    inset 0 34px 60px -42px rgba(255,255,255,.24),
    inset 0 -54px 80px -52px rgba(0,0,0,.58),
    0 2px 3px rgba(0,0,0,.40),
    0 44px 90px -44px rgba(0,0,0,.78);
}

/* liquid layer — sits behind all content */
.contact-panel > .cp-liquid{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  border-radius:inherit; pointer-events:none;
}
.cp-liquid i{
  position:absolute; display:block; aspect-ratio:1;
  filter:blur(36px); opacity:.5;
  border-radius:42% 58% 63% 37% / 45% 40% 60% 55%;
}
.cp-liquid i:nth-child(1){
  width:52%; left:-12%; top:-24%;
  background:radial-gradient(circle at 38% 36%, rgba(var(--accent-rgb),.85), rgba(var(--accent-rgb),0) 68%);
  animation:cpPool1 21s ease-in-out infinite alternate;
}
.cp-liquid i:nth-child(2){
  width:56%; right:-14%; bottom:-30%;
  background:radial-gradient(circle at 60% 40%, rgba(96,160,255,.75), rgba(96,160,255,0) 68%);
  animation:cpPool2 26s ease-in-out infinite alternate;
}
.cp-liquid i:nth-child(3){
  width:30%; left:38%; top:34%; opacity:.32;
  background:radial-gradient(circle at 50% 50%, rgba(255,168,132,.8), rgba(255,168,132,0) 68%);
  animation:cpPool3 18s ease-in-out infinite alternate;
}
@keyframes cpPool1{
  0%  { transform:translate(0,0) rotate(0deg) scale(1);          border-radius:42% 58% 63% 37% / 45% 40% 60% 55%; }
  100%{ transform:translate(26%,30%) rotate(50deg) scale(1.2);   border-radius:58% 42% 38% 62% / 55% 60% 40% 45%; }
}
@keyframes cpPool2{
  0%  { transform:translate(0,0) rotate(0deg) scale(1.05);       border-radius:55% 45% 40% 60% / 50% 55% 45% 50%; }
  100%{ transform:translate(-30%,-24%) rotate(-40deg) scale(.9); border-radius:40% 60% 55% 45% / 60% 40% 60% 40%; }
}
@keyframes cpPool3{
  0%  { transform:translate(-40%,-20%) scale(.9); }
  100%{ transform:translate(60%,30%) scale(1.25); }
}
/* fine grain + a light streak that crosses the pane */
.cp-liquid::before{
  content:''; position:absolute; inset:0;
  background:var(--lg-noise) 0 0 / 120px 120px repeat;
  opacity:.5; mix-blend-mode:soft-light;
}
.cp-liquid::after{
  content:''; position:absolute; top:-30%; bottom:-30%; left:-40%; width:32%;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.05) 38%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.05) 62%, transparent 100%);
  transform:translateX(0) skewX(-16deg);
  animation:cpStreak 11s cubic-bezier(.45,.1,.25,1) infinite;
}
@keyframes cpStreak{
  0%,55%{ transform:translateX(0) skewX(-16deg); opacity:0; }
  62%   { opacity:1; }
  92%   { opacity:1; }
  100%  { transform:translateX(480%) skewX(-16deg); opacity:0; }
}

/* availability: a small liquid capsule */
.contact-panel .contact-avail{
  display:inline-flex; flex-wrap:wrap; padding:8px 16px 8px 13px;
  border-radius:22px; margin-bottom:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14); border-top-color:rgba(255,255,255,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -12px rgba(0,0,0,.6);
}
.contact-panel .contact-avail .dot{ width:7px; height:7px; box-shadow:0 0 10px rgba(var(--accent-rgb),.85); }

/* divider: hairline + one accent bead (vertical on desktop) */
.contact-panel .contact-right{ border-left:0; position:relative; }
.contact-right::before{
  content:''; position:absolute; left:0; top:8%; bottom:8%; width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.40) 28%, rgba(255,255,255,.40) 72%, transparent);
  box-shadow:1px 0 0 rgba(0,0,0,.28);
}
.contact-right::after{
  content:''; position:absolute; left:-3.5px; top:50%; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, rgba(var(--accent-rgb),.95) 55%, rgba(var(--accent-rgb),.35));
  box-shadow:0 0 14px rgba(var(--accent-rgb),.65);
}

/* inputs: pressed into the glass */
.contact-panel .cf-field input,
.contact-panel .cf-field textarea{
  background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.16));
  border:1px solid rgba(255,255,255,.12); border-top-color:rgba(0,0,0,.35);
  border-radius:16px; padding:12px 16px;
  box-shadow:inset 0 2px 7px rgba(0,0,0,.38), inset 0 -1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.07);
  transition:border-color .25s ease, box-shadow .3s ease, background .3s ease;
}
.contact-panel .cf-field input:hover,
.contact-panel .cf-field textarea:hover{ border-color:rgba(255,255,255,.28); border-top-color:rgba(0,0,0,.35); }
.contact-panel .cf-field input:focus,
.contact-panel .cf-field textarea:focus{
  outline:none; border-color:rgba(var(--accent-rgb),.7); border-top-color:rgba(var(--accent-rgb),.5);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.38), 0 0 0 3px rgba(var(--accent-rgb),.16), 0 0 24px -6px rgba(var(--accent-rgb),.5);
}
.contact-panel .cf-field label{ padding-left:4px; }
.contact-form{ gap:18px; }

@media (max-width:820px){
  .contact-panel.glass{ border-radius:30px; }
  .contact-panel .contact-right{ border-top:0; }
  .contact-right::before{ left:8%; right:8%; top:0; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.40) 28%, rgba(255,255,255,.40) 72%, transparent); }
  .contact-right::after{ left:50%; top:-3.5px; margin-left:-4px; }
  .cp-liquid i{ filter:blur(28px); }
}
@media (prefers-reduced-motion: reduce){
  .cp-liquid i, .cp-liquid::after{ animation:none; }
  .cp-liquid::after{ display:none; }
}

/* Liquid Pane — phone refinements */
@media (max-width:820px){
  .cp-liquid::after{ width:22%; background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.03) 38%, rgba(255,255,255,.11) 50%, rgba(255,255,255,.03) 62%, transparent 100%); }
}
@media (max-width:430px){
  .contact-panel .contact-avail{ font-size:11px; padding:8px 13px 8px 11px; flex-wrap:nowrap; white-space:nowrap; }
}

/* Navbar polish: the grain that suits big buttons reads as speckle on
   small nav pills — keep the glass, drop the noise there. */
.nav .nav-link, .nav .nav-cta, .mob-drawer .nav-link, .mob-drawer .nav-cta{
  --lg-noise:linear-gradient(transparent, transparent);
}


/* Logos inside a sub-role card (HIA Project): a little smaller than the
   employer row so they sit under the org line without crowding it */
.tl-logos--sub{ margin:14px 0 12px; gap:10px; }
.tl-logos--sub .logo-plate{ --plate-h:56px; border-radius:16px; }
@media (max-width:560px){ .tl-logos--sub .logo-plate{ --plate-h:50px; } }

/* ==================================================================
   [CSS-46]  WIDE SCREENS — ambient rail
   ================================================================== */

/* =================================================================
   PART 13 — Wide-viewport "ambient rail"
   On very wide monitors the fixed 1320px container still leaves a
   dead, empty gutter on both sides. Instead of just stretching the
   content wider (which thins out the glass cards) or shrinking the
   side padding further, this fills that margin with a quiet
   decorative signal — a hairline circuit rail with a few glowing
   nodes, echoing the .ping/mono-font "systems readout" language the
   rest of the site already uses. Pure CSS, no markup changed:
   attached to body::before/::after, fixed, non-interactive, and
   only switched on once there's genuinely spare width to use.
================================================================= */
@media (min-width:1600px){
  body::before, body::after{
    content:'';
    position:fixed; top:8%; bottom:8%; width:1px; z-index:1; pointer-events:none;
    background:
      radial-gradient(circle at 50% 14%, rgba(var(--accent-rgb),.85) 0 2px, transparent 3px),
      radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb),.85) 0 2px, transparent 3px),
      radial-gradient(circle at 50% 86%, rgba(var(--accent-rgb),.85) 0 2px, transparent 3px),
      linear-gradient(180deg, transparent 0%, rgba(255,255,255,.16) 12%, rgba(255,255,255,.16) 88%, transparent 100%);
    opacity:.7;
    animation:pulse 3.6s ease-in-out infinite;
  }
  body::after{ animation-delay:1.2s; }
  body::before{ left:clamp(24px, calc((100vw - var(--container)) / 4), 96px); }
  body::after{  right:clamp(24px, calc((100vw - var(--container)) / 4), 96px); }
}
@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none; }
}

/* ==================================================================
   [CSS-47]  WIDE SCREENS — side rail
   ================================================================== */

/* =================================================================
   PART 14 — Side rail: puts the wide left gutter to work
   On the wide monitors where the gutter is largest, this gives it a
   job — one glass "dock" holding the quick-contact links (reusing
   real links already in the Contact section) instead of empty
   space. One cohesive capsule, not separate floating orbs — icons
   sit monochrome at rest and light up accent on hover, matching the
   rest of the site's glass material instead of clashing brand
   colors. Vertically centered, fully hidden below the width where
   the gutter is too narrow to hold it without crowding the panels.
================================================================= */
.side-rail{
  position:fixed; left:0; top:50%; z-index:40;
  transform:translateY(-50%);
  display:none; align-items:center; justify-content:center;
  width:var(--panel-gutter);
}
.side-rail-dock{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 8px;
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12) 0%, var(--glass-tint) 30%, rgba(255,255,255,.02) 100%);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-border-bright);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:
    0 20px 40px -22px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.side-rail-link{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid transparent;
  color:var(--text-dim); text-decoration:none;
  background:transparent;
  transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.side-rail-link:hover{
  background:rgba(var(--accent-rgb),.14);
  border-color:rgba(var(--accent-rgb),.4);
  color:var(--accent);
  transform:scale(1.08);
}
.side-rail-icon{ width:19px; height:19px; display:block; }
.side-rail-line{
  width:20px; height:1px; margin:3px 0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}

@media (min-width:1400px){
  .side-rail{ display:flex; }
}
@media (prefers-reduced-motion: reduce){
  .side-rail-link{ transition:none; }
}


/* ==================================================================
   [CSS-48]  NAV — one "Let's talk" on phones / tablets
   ================================================================== */

/* =================================================================
   PART 11 — One "Let's talk" on phones / tablets
   Below 1180px the menu button opens the drawer, which already ends
   with its own "Let's talk" capsule. The duplicate in the top bar is
   hidden there, and the menu button takes its place at the right.
   (Desktop keeps the bar button; the drawer is hidden there.)
================================================================= */
@media (max-width:1179px){
  .nav > .nav-cta:not(.lg-none){ display:none; }
  .nav .nav-toggle{ margin-left:auto; }
}


/* ==================================================================
   [CSS-49]  COMMAND CONSOLE
   ================================================================== */

/* =================================================================
   PART 12 — Command Console (Ctrl/⌘ + K)
   A glass palette in the same material as the buttons: thin bright
   upper-left rim, darker lower-right rim, layered depth. Motion is a
   short fade and 8px settle; reduced-motion users get none.
================================================================= */
html.cmdk-open{ overflow:hidden; }
.cmdk{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:flex-start; justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 12vh) 16px 16px;
}
.cmdk[hidden]{ display:none; }
.cmdk-scrim{
  position:absolute; inset:0; background:rgba(6,8,9,.58);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .25s ease;
}
.cmdk-panel{
  position:relative; isolation:isolate; overflow:hidden;
  width:min(580px,100%); max-height:min(70vh,560px);
  display:flex; flex-direction:column;
  border-radius:26px;
  background:
    radial-gradient(90% 60% at 10% -12%, rgba(255,255,255,.10), transparent 60%),
    rgba(18,20,22,.82);
  border:1px solid transparent;
  border-color:rgba(255,255,255,.34) rgba(255,255,255,.14) rgba(255,255,255,.10) rgba(255,255,255,.24);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.28), inset -1px -1px 0 rgba(16,18,20,.40),
    0 2px 4px rgba(0,0,0,.40), 0 34px 70px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.1); backdrop-filter:blur(24px) saturate(1.1);
  opacity:0; translate:0 -8px; scale:.985;
  transition:opacity .25s ease, translate .35s var(--lg-ease,ease), scale .35s var(--lg-ease,ease);
}
.cmdk.is-open .cmdk-scrim{ opacity:1; }
.cmdk.is-open .cmdk-panel{ opacity:1; translate:0 0; scale:1; }

.cmdk-search{
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:box-shadow .3s ease;
}
.cmdk-search:focus-within{ box-shadow:inset 0 -1px 0 rgba(var(--accent-rgb),.55); }
.cmdk-search-icon{ width:20px; height:20px; flex:none; color:rgba(var(--text-rgb,255,255,255),.62); }
.cmdk-search input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:#fff; font:500 16px/1.4 var(--ff-body); letter-spacing:.01em;
}
.cmdk-search input::placeholder{ color:rgba(var(--text-rgb,255,255,255),.5); }

.cmdk-list{ list-style:none; margin:0; padding:8px; overflow-y:auto; overscroll-behavior:contain; }
.cmdk-group{
  padding:10px 12px 6px; font:500 10.5px/1 var(--ff-mono);
  letter-spacing:.14em; text-transform:uppercase; color:rgba(var(--text-rgb,255,255,255),.5);
}
.cmdk-item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  min-height:46px; padding:8px 12px; border-radius:16px; cursor:pointer;
  color:rgba(var(--text-rgb,255,255,255),.9); font:500 14.5px/1.3 var(--ff-body); letter-spacing:.01em;
  transition:background .2s ease, box-shadow .2s ease;
}
.cmdk-item:hover{ background:rgba(255,255,255,.05); }
.cmdk-item.is-active{
  background:rgba(255,255,255,.09);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22), inset 0 0 0 1px rgba(var(--accent-rgb),.30);
}
.cmdk-ico{
  display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  font:600 13px/1 var(--ff-mono); color:rgba(var(--text-rgb,255,255,255),.8);
  background:radial-gradient(circle at 31% 23%, rgba(255,255,255,.26), rgba(255,255,255,.04) 45%, transparent 60%), rgba(18,20,22,.4);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.34), inset -1px -1px 0 rgba(16,18,20,.4);
}
.cmdk-item.is-active .cmdk-ico{ color:var(--accent); }
.cmdk-hint{ font:500 11px/1 var(--ff-mono); color:rgba(var(--text-rgb,255,255,255),.5); white-space:nowrap; max-width:46vw; overflow:hidden; text-overflow:ellipsis; }
.cmdk-item.is-active .cmdk-hint{ color:rgba(var(--text-rgb,255,255,255),.72); }
.cmdk-empty{ padding:26px 12px; text-align:center; font-size:14px; color:rgba(var(--text-rgb,255,255,255),.6); }

.cmdk-foot{
  display:flex; gap:18px; padding:10px 18px; border-top:1px solid rgba(255,255,255,.10);
  font:500 11px/1 var(--ff-mono); color:rgba(var(--text-rgb,255,255,255),.5);
}
.cmdk kbd, .cmdk-tip kbd{
  display:inline-block; min-width:20px; padding:3px 6px; margin-right:4px;
  border-radius:7px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.35); text-align:center;
  font:500 11px/1.2 var(--ff-mono); color:rgba(var(--text-rgb,255,255,255),.78);
}
.cmdk-esc{ flex:none; }

.cmdk-toast{
  position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 28px); z-index:210;
  translate:-50% 12px; opacity:0; pointer-events:none;
  padding:10px 18px; border-radius:999px;
  font:500 13px/1 var(--ff-body); letter-spacing:.01em; color:#fff;
  background:rgba(18,20,22,.82); border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.28), 0 12px 28px -12px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:opacity .3s ease, translate .35s var(--lg-ease,ease);
}
.cmdk-toast.is-on{ opacity:1; translate:-50% 0; }

/* side-rail trigger: same lens as the three contact links */
button.side-rail-link{ padding:0; cursor:pointer; appearance:none; -webkit-appearance:none; font:inherit; }
.rail-cmd .side-rail-icon{ width:22px; height:22px; }

/* footer tip — the tap-friendly way in (phones, tablets) */
.cmdk-tip{ margin:18px 0 0; text-align:center; }
.cmdk-tip-btn{
  background:none; border:0; padding:8px 12px; cursor:pointer; border-radius:999px;
  font:500 12px/1 var(--ff-mono); letter-spacing:.06em; color:var(--text-faint);
  transition:color .3s ease;
}
.cmdk-tip-btn:hover{ color:var(--accent); }
.cmdk-tip-btn:focus-visible{ outline:1.5px solid rgba(236,242,244,.8); outline-offset:3px; border-radius:999px; }
.cmdk-tip-keys{ margin-left:8px; }
@media (hover:none){ .cmdk-tip-keys{ display:none; }}

@media (max-width:640px){
  .cmdk{ padding-top:calc(env(safe-area-inset-top,0px) + 8vh); }
  .cmdk-foot{ display:none; }
  .cmdk-search input{ font-size:16px; } /* no iOS zoom-on-focus */
}
@media (prefers-reduced-motion: reduce){
  .cmdk-scrim, .cmdk-panel, .cmdk-toast{ transition:none; }
}


/* ==================================================================
   [CSS-50]  PANELS — one size, home to footer
   ================================================================== */

/* =================================================================
   PART 13 — One panel size, home → footer
   Hero, every section, the recruiter bar and the footer panel now
   share ONE width, radius and gap, and their content starts at the
   same left/right line.
   What was different before:
   · the footer sat inside a padded <footer>, so its panel was ~2×edge
     narrower than every other panel
   · the recruiter bar overlapped the hero by 10px, left a 64px gap
     below, and its content sat ~150px further out than the sections'
   · the footer's content used its own 32px inset
   Height still follows content on purpose (padding is shared by the
   content panels; the two slim strips keep their compact padding).
================================================================= */
:root{
  --panel-w:   min(var(--panel-max), calc(100% - 2 * var(--panel-gutter)));
  --panel-gap: 28px;
}
.hero, .section, .recruiter-bar, .footer-panel{
  width:var(--panel-w);
  margin-left:auto; margin-right:auto;
  border-radius:var(--radius-lg);
}
.section{ margin-bottom:var(--panel-gap); }
.hero{ margin-bottom:var(--panel-gap); }

/* recruiter bar: same gap as every other panel, content on the shared line */
.recruiter-bar{ margin-top:0; margin-bottom:var(--panel-gap); padding-left:0; padding-right:0; }
.recruiter-inner{ padding:0 var(--edge); }

/* footer: full-width wrapper (no side padding) so its panel matches the
   rest; content aligned to the same inner line as the sections */
footer{ padding-left:0; padding-right:0; }

/* The previous section's own margin-bottom already provides the
   standard --panel-gap (28px) below it. Without this, footer's base
   20px top padding stacked on top of that margin, making the gap
   above the footer panel 48px instead of the 28px used everywhere
   else — this keeps every glass-panel gap equal, mobile included. */
footer{ padding-top:0; }

.footer-panel{
  padding-left: max(var(--edge), calc((var(--panel-w) - var(--container)) / 2 + var(--edge)));
  padding-right:max(var(--edge), calc((var(--panel-w) - var(--container)) / 2 + var(--edge)));
}
@media (max-width:640px){
  .recruiter-bar{ padding-left:0; padding-right:0; }
}


/* ==================================================================
   [CSS-51]  READABILITY pass (white text)
   ================================================================== */

/* =================================================================
   PART 14 — Readability pass (text stays white)
   White on the dark glass is the right call: the panels are only a
   light tint over a near-black page, so dark text would lose
   contrast. Instead the greys are lifted, and the smallest type
   (11–12.5px labels, 13px body copy) is nudged up ~1px.
================================================================= */
:root{
  --text-dim:   rgba(255,255,255,.88);   /* was .82 */
  --text-faint: rgba(255,255,255,.76);   /* was .68 */
}

/* body copy: 13–14.5px → 14–15px */
.tl-bullets li{ font-size:15px; }
.edu-desc, .lab-desc, .award-desc, .ref-desc, .bd-card-body p{ font-size:14.5px; }
.cert-desc{ font-size:14px; }

/* meta lines, dates, citations: 12–12.5px → 13px */
.cf-field label, .lab-cat, .cert-date, .edu-quote cite, .lab-id, .skill-card .cat,
.tl-more summary, .tl-subrole-meta, .tl-subrole-meta .tl-date, .tl-subrole-meta .tl-place,
.trait-tag, .arsenal-proof, .award-org, .case-stat, .cf-status, .edu-date, .ref-link,
.ref-meta, .ref-org, .skill-proof, .lab-ticket-text .skill-proof, .tl-quote cite,
.tl-stat, .proof-stat .lbl, .status-item .lbl{ font-size:13px; }

/* tracked uppercase labels: 11px → 12px */
.bd-card-tag, .bd-eyebrow, .cert-badge, .cert-category, .contact-panel .contact-avail,
.lab-board-head, .lab-status, .tl-subroles-label{ font-size:12px; }

/* ==================================================================
   [CSS-52]  VIEWER GATE + DOCUMENT VIEWER
   ================================================================== */

/* =================================================================
   VIEWER GATE + IN-SITE DOCUMENT VIEWER
   Name-capture prompt shown before a CV/certificate view or
   download, and a same-site modal viewer for certificates + CV
   (so visitors never get redirected to drive.google.com). Reuses
   the .cmdk glass-panel visual language.
================================================================= */
html.vgate-open, html.vview-open{ overflow:hidden; }

.vgate, .vview{
  position:fixed; inset:0; z-index:220;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.vgate[hidden], .vview[hidden]{ display:none; }

.vgate-scrim, .vview-scrim{
  position:absolute; inset:0; background:rgba(6,8,9,.6);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .25s ease;
}
.vgate.is-open .vgate-scrim, .vview.is-open .vview-scrim{ opacity:1; }

.vgate-panel{
  position:relative; isolation:isolate;
  width:min(400px,100%);
  padding:32px 28px 26px;
  border-radius:26px;
  background:
    radial-gradient(90% 60% at 10% -12%, rgba(255,255,255,.10), transparent 60%),
    rgba(18,20,22,.86);
  border:1px solid transparent;
  border-color:rgba(255,255,255,.34) rgba(255,255,255,.14) rgba(255,255,255,.10) rgba(255,255,255,.24);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.28), inset -1px -1px 0 rgba(16,18,20,.40),
    0 2px 4px rgba(0,0,0,.40), 0 34px 70px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.1); backdrop-filter:blur(24px) saturate(1.1);
  opacity:0; translate:0 -8px; scale:.985;
  transition:opacity .25s ease, translate .35s ease, scale .35s ease;
}
.vgate.is-open .vgate-panel{ opacity:1; translate:0 0; scale:1; }

.vgate-close{
  position:absolute; top:14px; right:14px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:rgba(var(--text-rgb,255,255,255),.7);
  font-size:18px; line-height:1; cursor:pointer;
}
.vgate-close:hover{ background:rgba(255,255,255,.1); color:#fff; }

.vgate-icon{ font-size:26px; margin-bottom:10px; }
.vgate-title{ margin:0 0 6px; font-size:19px; font-weight:700; color:#fff; }
.vgate-sub{ margin:0 0 20px; font-size:13.5px; line-height:1.5; color:rgba(var(--text-rgb,255,255,255),.62); }

.vgate-form{ display:flex; flex-direction:column; gap:14px; }
.vgate-label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; font-weight:600; color:rgba(var(--text-rgb,255,255,255),.72); }
.vgate-optional{ font-weight:400; color:rgba(var(--text-rgb,255,255,255),.42); }
.vgate-input{
  padding:11px 13px; border-radius:12px; font-size:16px; color:#fff; /* 16px: no iOS zoom-on-focus */
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  outline:none; transition:border-color .18s ease, background .18s ease;
}
.vgate-input::placeholder{ color:rgba(var(--text-rgb,255,255,255),.34); }
.vgate-input:focus{ border-color:rgba(var(--accent-rgb),.55); background:rgba(255,255,255,.09); }
.vgate-input:invalid.is-touched{ border-color:rgba(240,110,110,.6); }

.vgate-submit{
  margin-top:4px; padding:12px 16px; border-radius:12px; border:none; cursor:pointer;
  font-size:14.5px; font-weight:700; color:var(--on-accent,#06182B);
  background:var(--accent,#5BAEF5);
  transition:opacity .18s ease, transform .18s ease;
}
.vgate-submit:hover{ opacity:.9; }
.vgate-submit:disabled{ opacity:.6; cursor:default; }
.vgate-status{ margin:2px 0 0; font-size:12.5px; min-height:16px; color:rgba(var(--text-rgb,255,255,255),.55); }
.vgate-status.is-error{ color:rgba(240,110,110,.9); }

.vview-panel{
  position:relative; isolation:isolate; overflow:hidden;
  width:min(920px,100%); height:min(86vh,900px);
  display:flex; flex-direction:column;
  border-radius:22px;
  background:rgba(14,16,17,.92);
  border:1px solid transparent;
  border-color:rgba(255,255,255,.34) rgba(255,255,255,.14) rgba(255,255,255,.10) rgba(255,255,255,.24);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.28), inset -1px -1px 0 rgba(16,18,20,.40),
    0 2px 4px rgba(0,0,0,.40), 0 34px 70px -24px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.1); backdrop-filter:blur(24px) saturate(1.1);
  opacity:0; translate:0 8px; scale:.985;
  transition:opacity .25s ease, translate .35s ease, scale .35s ease;
}
.vview.is-open .vview-panel{ opacity:1; translate:0 0; scale:1; }

.vview-head{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px 14px 20px; border-bottom:1px solid rgba(255,255,255,.1);
}
.vview-title{ font-size:14.5px; font-weight:700; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vview-actions{ display:flex; align-items:center; gap:14px; flex:none; }
.vview-open{ font-size:12.5px; font-weight:600; color:var(--accent,#5BAEF5); text-decoration:none; white-space:nowrap; }
.vview-open:hover{ text-decoration:underline; }
.vview-close{
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:rgba(var(--text-rgb,255,255,255),.7);
  font-size:18px; line-height:1; cursor:pointer;
}
.vview-close:hover{ background:rgba(255,255,255,.1); color:#fff; }

.vview-body{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.3); }
.vview-iframe{ width:100%; height:100%; border:0; }
.vview-img{ max-width:100%; max-height:100%; object-fit:contain; }
.vview-loading{ font-size:13px; color:rgba(var(--text-rgb,255,255,255),.5); }

@media (max-width:640px){
  /* Bottom-sheet layout: anchored to the bottom edge, full width, safe-area
     aware, so the on-screen keyboard opening doesn't shove the panel
     around or clip its bottom under iOS's home-indicator bar. */
  .vgate, .vview{ align-items:flex-end; padding:0; }
  .vgate-panel{
    width:100%; max-height:88vh; overflow-y:auto;
    border-radius:22px 22px 0 0;
    padding:24px 20px calc(22px + env(safe-area-inset-bottom,0px));
    translate:0 16px;
  }
  .vgate.is-open .vgate-panel{ translate:0 0; }
  .vview-panel{
    width:100%; height:92dvh; max-height:none;
    border-radius:18px 18px 0 0;
    translate:0 16px;
  }
  .vview.is-open .vview-panel{ translate:0 0; }
  .vview-head{ padding-left:16px; padding-right:16px; }
  .vview-body{ padding-bottom:env(safe-area-inset-bottom,0px); }
}

/* ==================================================================
   [CSS-53]  STATUS PAGE
   ================================================================== */

/* =================================================================
   STATUS PAGE — live availability widget styled like a real status
   page (recruiter-facing, reuses .glass/.glass-clear/.ping tokens).
================================================================= */
.sp-summary{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px; padding:20px 24px; border-radius:20px; margin:20px 0 26px;
}
.sp-overall{
  display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:#fff;
}
.sp-overall .ping{ width:9px; height:9px; border-radius:50%; background:var(--accent,#5BAEF5); box-shadow:0 0 10px var(--accent,#5BAEF5); flex:none; }
.sp-metrics{ display:flex; gap:28px; flex-wrap:wrap; }
.sp-metric{ display:flex; flex-direction:column; gap:2px; }
.sp-val{ font:700 17px/1.1 var(--ff-mono); color:#fff; }
.sp-lbl{ font-size:11.5px; color:rgba(var(--text-rgb,255,255,255),.5); text-transform:uppercase; letter-spacing:.04em; }

.sp-incidents{ display:flex; flex-direction:column; gap:10px; }
.sp-inc-head{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(var(--text-rgb,255,255,255),.5); margin-bottom:2px; }
.sp-incident{ padding:16px 18px; border-radius:14px; }
.sp-inc-top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.sp-inc-badge{
  font:700 10.5px/1 var(--ff-mono); text-transform:uppercase; letter-spacing:.04em;
  color:var(--accent,#5BAEF5); background:rgba(var(--accent-rgb),.12);
  border:1px solid rgba(var(--accent-rgb),.3); border-radius:999px; padding:4px 9px;
}
.sp-inc-date{ font:500 11.5px/1 var(--ff-mono); color:rgba(var(--text-rgb,255,255,255),.45); }
.sp-inc-title{ font-size:14.5px; font-weight:700; color:#fff; margin-bottom:4px; }
.sp-inc-desc{ font-size:13px; line-height:1.5; color:rgba(var(--text-rgb,255,255,255),.62); margin:0; }

@media (max-width:640px){
  .sp-summary{ flex-direction:column; align-items:flex-start; gap:14px; padding:18px; }
  .sp-metrics{ gap:20px; width:100%; }
}

/* ==================================================================
   [CSS-54]  REFERENCE-CALL BUTTON
   ================================================================== */

/* =================================================================
   REFERENCE-CALL CTA — sits below the education testimonials.
================================================================= */
.ref-cta{
  margin-top:22px; padding:20px 24px; border-radius:18px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.ref-cta-title{ font-size:15px; font-weight:700; color:#fff; margin-bottom:3px; }
.ref-cta-desc{ margin:0; font-size:13px; color:rgba(var(--text-rgb,255,255,255),.6); }
.ref-cta-btn{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; font-size:13.5px; font-weight:700;
  cursor:pointer; transition:background .18s ease, border-color .18s ease;
}
.ref-cta-btn:hover{ background:rgba(255,255,255,.11); border-color:rgba(var(--accent-rgb),.4); }
@media (max-width:640px){
  .ref-cta{ flex-direction:column; align-items:flex-start; }
  .ref-cta-btn{ width:100%; justify-content:center; }
}

/* ==================================================================
   [CSS-55]  QR DIGITAL BUSINESS CARD
   ================================================================== */

/* =================================================================
   QR DIGITAL BUSINESS CARD — sits under the contact quick-links.
================================================================= */
.qr-card{
  margin-top:18px; padding:14px 16px; border-radius:16px;
  display:flex; align-items:center; gap:14px;
}
.qr-img{ width:64px; height:64px; border-radius:8px; background:#fff; padding:4px; flex:none; }
.qr-title{ font-size:13px; font-weight:700; color:#fff; margin-bottom:3px; }
.qr-download{ font-size:12px; font-weight:600; color:var(--accent,#5BAEF5); text-decoration:none; }
.qr-download:hover{ text-decoration:underline; }
.qr-card.qr-failed .qr-title::after{ content:" — scan unavailable right now"; font-weight:400; color:rgba(var(--text-rgb,255,255,255),.5); }
.qr-noscript{ display:block; font-size:11.5px; color:rgba(var(--text-rgb,255,255,255),.55); margin-top:4px; max-width:220px; }

/* ==================================================================
   [CSS-56]  LIVE FOCUS SLIDER
   ================================================================== */

/* =================================================================
   LIVE FOCUS SLIDER — sits between the nav and the hero panel.
   Independent of the Liquid Glass tint control above: this one
   drives a real filter:blur() on the hero panel itself, so it's
   obvious to anyone landing on the page. Left = 0px, fully Clear.
   Right = 100px, fully Blurred. Value tracked in --focus-fill for
   the track-fill gradient and echoed in the live px readout.
================================================================= */
.focus-slider{
  position:relative; z-index:5;
  width:min(var(--panel-max), calc(100% - 2 * var(--panel-gutter)));
  max-width:640px;
  margin:92px auto 0;
  padding:12px 22px;
  border-radius:999px;
  display:flex; align-items:center;
  background:
    linear-gradient(120deg, rgba(var(--accent-rgb),.16) 0%, rgba(255,255,255,.05) 45%, rgba(var(--accent-rgb),.10) 100%),
    rgba(16,18,20,.4);
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-border-bright);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:
    0 20px 44px -26px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.24);
}
/* margin-top = nav's own fixed "top" offset + its real measured
   height (--nav-h, set in script.js) + a fixed breathing-room gap,
   so the slider always clears the nav by the same visible amount
   regardless of safe-area insets or the nav's rendered height. */
@media (max-width:900px){ .focus-slider{ margin-top:calc(16px + var(--nav-h, 60px) + 20px); } }
@media (max-width:640px){ .focus-slider{ margin-top:calc(env(safe-area-inset-top, 0px) + 12px + var(--nav-h, 52px) + 16px); padding:10px 16px; } }

.focus-slider-inner{
  display:flex; align-items:center; gap:14px; width:100%;
}
.focus-slider-label{
  display:flex; align-items:center; gap:7px; flex:none;
  font-family:var(--ff-mono); font-size:11.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
  white-space:nowrap;
}
.focus-icon{
  width:11px; height:11px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);
}
.focus-icon--soft{ filter:blur(2.5px); opacity:.9; }

.focus-slider-track-wrap{
  position:relative; flex:1; min-width:70px;
  display:flex; align-items:center; gap:10px;
}
.focus-slider-input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:999px; outline:none; cursor:pointer;
  background:linear-gradient(90deg,
    var(--accent) 0%, var(--accent) var(--focus-fill, 0%),
    rgba(255,255,255,.16) var(--focus-fill, 0%));
}
.focus-slider-input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:20px; height:20px; border-radius:50%; cursor:pointer;
  background:#fff; border:2px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.45), 0 0 0 6px rgba(var(--accent-rgb),.14);
  transition:transform .15s ease, box-shadow .15s ease;
}
.focus-slider-input::-webkit-slider-thumb:hover{
  transform:scale(1.15);
  box-shadow:0 2px 10px rgba(0,0,0,.5), 0 0 0 9px rgba(var(--accent-rgb),.2);
}
.focus-slider-input::-moz-range-track{ height:6px; border-radius:999px; background:rgba(255,255,255,.16); }
.focus-slider-input::-moz-range-progress{ height:6px; border-radius:999px; background:var(--accent); }
.focus-slider-input::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; cursor:pointer;
  background:#fff; border:2px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}

.focus-slider-readout{
  font-family:var(--ff-mono); font-size:12px; font-weight:700; color:var(--accent);
  min-width:40px; text-align:right; flex:none;
}

.focus-ink-toggle{
  flex:none; display:flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px; cursor:pointer;
  font-family:var(--ff-mono); font-size:11px; font-weight:700;
  letter-spacing:.02em; white-space:nowrap;
  color:var(--text-dim); background:rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.focus-ink-toggle:hover{ border-color:var(--glass-border-bright); }
.focus-ink-toggle[aria-pressed="true"]{
  color:var(--on-accent,#06182B); background:var(--accent); border-color:var(--accent);
}

@media (max-width:560px){
  .focus-slider-label-text{ display:none; }
  .focus-slider-inner{ gap:10px; }
  .focus-ink-toggle{ padding:6px 9px; font-size:10px; }
}

/* User-controlled via the "Aa" button next to the focus slider (not
   automatic anymore) — flips text/iconography on every blurred panel
   to black, for when a heavy blur washes out white text. Panel is
   toggled via JS (.blur-ink class), and the choice is remembered
   across visits (localStorage). */
.blur-ink,
.blur-ink *{
  color:#000 !important;
  -webkit-text-fill-color:#000 !important;
  transition:color .18s ease;
}
.blur-ink svg{ color:#000 !important; }
.blur-ink ::placeholder{ color:rgba(0,0,0,.55) !important; }

/* ==================================================================
   [CSS-57]  NETWORK DIAGNOSTICS DEMO
   ================================================================== */

/* =================================================================
   LIVE NETWORK DIAGNOSTICS SIMULATOR
================================================================= */
.diag-panel{ margin-top:20px; padding:22px 24px; border-radius:20px; }
.diag-form{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.diag-input{
  flex:1; min-width:180px; padding:11px 14px; border-radius:12px; font-size:14px; color:var(--text);
  background:var(--glass-tint); border:1px solid var(--glass-border); outline:none;
  font-family:var(--ff-mono);
}
.diag-input:focus{ border-color:rgba(var(--accent-rgb),.55); }
.diag-run{
  padding:11px 20px; border-radius:12px; border:none; cursor:pointer;
  font-size:14px; font-weight:700; color:var(--on-accent,#06182B); background:var(--accent);
  transition:opacity .18s ease;
}
.diag-run:hover{ opacity:.9; }
.diag-run:disabled{ opacity:.55; cursor:default; }

.diag-console{
  font-family:var(--ff-mono); font-size:12.5px; line-height:1.7;
  background:rgba(0,0,0,.35); border-radius:14px; padding:16px 18px;
  min-height:64px; max-height:280px; overflow-y:auto; color:rgba(var(--text-rgb,255,255,255),.8);
}
.diag-line{ white-space:pre-wrap; word-break:break-word; opacity:0; animation:diagIn .25s ease forwards; }
@keyframes diagIn{ from{ opacity:0; translate:0 3px; } to{ opacity:1; translate:0 0; } }
.diag-line.ok{ color:var(--accent,#5BAEF5); }
.diag-line.warn{ color:#f0c96e; }
.diag-line.muted{ color:rgba(var(--text-rgb,255,255,255),.45); }
.diag-hop{ display:flex; gap:10px; }
.diag-hop .hn{ color:rgba(var(--text-rgb,255,255,255),.4); width:2.4em; flex:none; }
.diag-summary{ margin-top:12px; font-size:12px; color:rgba(var(--text-rgb,255,255,255),.55); }
@media (max-width:640px){
  .diag-form{ flex-direction:column; }
  .diag-run{ width:100%; }
}

/* ==================================================================
   [CSS-58]  TICKET TRIAGE DEMO
   ================================================================== */

/* =================================================================
   LIVE TICKET TRIAGE DEMO
================================================================= */
.triage-input{ resize:vertical; min-height:44px; line-height:1.5; }
.triage-result{ margin-top:4px; }
.triage-card{
  background:rgba(0,0,0,.35); border-radius:14px; padding:18px 20px;
  opacity:0; animation:diagIn .25s ease forwards;
}
.triage-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.triage-id{ font-family:var(--ff-mono); font-size:12.5px; color:var(--text-faint); }
.triage-badge{ font-family:var(--ff-mono); font-size:11px; padding:4px 10px; border-radius:999px; white-space:nowrap; font-weight:700; }
.triage-badge.p1{ color:var(--danger); background:rgba(255,107,107,.16); }
.triage-badge.p2{ color:#f0c96e; background:rgba(240,201,110,.14); }
.triage-badge.p3{ color:var(--accent); background:var(--accent-dim); }
.triage-badge.p4{ color:var(--text-faint); background:rgba(255,255,255,.06); }
.triage-cat{ font-size:15px; font-weight:600; margin-bottom:12px; }
.triage-row{ display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--text-dim); margin-bottom:4px; }
.triage-step{ font-size:13px; color:var(--text-dim); margin-top:4px; line-height:1.6; }
.triage-foot{ margin-top:14px; font-size:11.5px; color:var(--text-faint); font-family:var(--ff-mono); }
@media (max-width:640px){
  .triage-card{ padding:16px; }
}


/* ==================================================================
   [CSS-59]  IT TOOLKIT
   ================================================================== */

/* =================================================================
   SAJID IT TOOLKIT — follows the site's "Aa" text-colour switch.
   White text mode (default): dark glass like every other panel, all text white.
   Black text mode (.blur-ink on #toolkit, .tk-ink on the modal): light panel, all text black.
   Everything is scoped to #toolkit / .tk-* so nothing else is affected.
================================================================= */
#toolkit, .tk-panel{
  --tk-ink:#fff; --tk-dim:#fff; --tk-line:rgba(255,255,255,.26);
  --tk-card:rgba(255,255,255,.08); --tk-soft:rgba(255,255,255,.10); --tk-field:rgba(255,255,255,.12);
  --tk-btn:rgba(255,255,255,.10); --tk-btn-h:rgba(255,255,255,.20);
  --tk-acc:var(--accent-deep); --tk-acc-2:var(--accent-deep); --tk-on-acc:#fff; --tk-tint:rgba(var(--accent-rgb),.18); --tk-tint-line:rgba(var(--accent-rgb),.55);
  --tk-warn-bg:rgba(240,201,110,.16); --tk-warn-line:rgba(240,201,110,.6);
  --tk-code-bg:#0b1218; --tk-code-fg:#fff;
  color:var(--tk-ink);
}
#toolkit.blur-ink, .tk-modal.tk-ink .tk-panel{
  --tk-ink:#000; --tk-dim:#000; --tk-line:rgba(0,0,0,.24);
  --tk-card:#ffffff; --tk-soft:rgba(0,0,0,.06); --tk-field:#ffffff;
  --tk-btn:#ffffff; --tk-btn-h:#f1f5f7;
  --tk-acc:var(--accent); --tk-acc-2:var(--accent-deep); --tk-on-acc:#000; --tk-tint:rgba(var(--accent-deep-rgb),.14); --tk-tint-line:rgba(var(--accent-deep-rgb),.55);
  --tk-warn-bg:rgba(240,190,60,.28); --tk-warn-line:rgba(150,100,0,.6);
  --tk-code-bg:#f3f6f8; --tk-code-fg:#000;
}
#toolkit.blur-ink{
  background:linear-gradient(168deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 100%);
}
#toolkit h2, #toolkit h3, #toolkit .section-label, #toolkit .section-intro, .tk-seo{ color:var(--tk-ink); }
#toolkit .section-label .dot{ background:var(--tk-ink); box-shadow:none; }
#toolkit :focus-visible, .tk-modal :focus-visible{ outline:3px solid var(--tk-ink); outline-offset:2px; }
.tk-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px 24px; flex-wrap:wrap; }
.tk-badge, .tk-chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
  font:600 12.5px/1 var(--ff-body); color:var(--tk-ink); background:var(--tk-tint); border:1px solid var(--tk-tint-line);
  white-space:nowrap;
}
.tk-seo{ max-width:680px; margin:14px 0 26px; font-size:15px; line-height:1.6; }

.tk-filter{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:22px; }
.tk-filter[hidden]{ display:none; }
.tk-search{ flex:1 1 240px; max-width:340px; padding:11px 16px; border-radius:14px; border:1px solid var(--tk-line); background:var(--tk-field); color:var(--tk-ink); font:400 15px var(--ff-body); }
.tk-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.tk-fchip{ padding:8px 14px; border-radius:999px; border:1px solid var(--tk-line); background:var(--tk-btn); color:var(--tk-ink); font:500 13.5px var(--ff-body); }
.tk-fchip[aria-pressed="true"]{ background:var(--tk-acc); border-color:var(--tk-acc); color:var(--tk-on-acc); }

.tk-grid{ display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .tk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .tk-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.tk-card{
  display:flex; flex-direction:column; min-width:0; padding:22px; border-radius:var(--radius-md);
  background:var(--tk-card); border:1px solid var(--tk-line);
  box-shadow:0 1px 2px rgba(0,0,0,.10), 0 16px 34px -18px rgba(0,0,0,.4);
  transition:transform .3s var(--lg-ease, ease), box-shadow .3s ease;
  animation:tkIn .45s ease both;
}
.tk-card:hover{ transform:translateY(-3px); box-shadow:0 1px 2px rgba(0,0,0,.14), 0 22px 40px -18px rgba(0,0,0,.5); }
@keyframes tkIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.tk-ico{ width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:14px; color:var(--tk-ink); background:var(--tk-tint); border:1px solid var(--tk-tint-line); }
.tk-ico svg{ width:24px; height:24px; }
.tk-card h3{ font-size:18px; margin:16px 0 8px; line-height:1.25; }
.tk-card p{ flex:1; color:var(--tk-dim); font-size:14.5px; line-height:1.55; margin:0 0 16px; }
.tk-meta{ display:flex; flex-wrap:wrap; gap:6px 8px; margin:0 0 16px; padding:0; list-style:none; font:500 12.5px var(--ff-body); color:var(--tk-dim); }
.tk-meta li{ padding:4px 9px; border-radius:8px; background:var(--tk-soft); }

.tk-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:11px 18px;
  border-radius:14px; border:1px solid var(--tk-line); background:var(--tk-btn); color:var(--tk-ink);
  font:600 14.5px var(--ff-body); text-decoration:none; transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.tk-btn:hover{ transform:translateY(-1px); background:var(--tk-btn-h); box-shadow:0 8px 18px -10px rgba(0,0,0,.5); }
.tk-btn:active{ transform:scale(.98); }
.tk-btn.tk-primary{ background:var(--tk-acc); border-color:var(--tk-acc); color:var(--tk-on-acc); }
.tk-btn.tk-primary:hover{ background:var(--tk-acc-2); }
.tk-btn[disabled]{ opacity:.7; cursor:not-allowed; transform:none; box-shadow:none; }
.tk-btn.done{ background:var(--tk-tint); border-color:var(--tk-tint-line); color:var(--tk-ink); }
.tk-note{ margin:26px 0 0; padding:14px 18px; border-radius:14px; background:var(--tk-soft); border:1px solid var(--tk-line); color:var(--tk-dim); font-size:14px; line-height:1.55; }
.tk-empty{ color:var(--tk-dim); padding:18px 0; }

html.tk-open{ overflow:hidden; }
.tk-modal{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:16px; opacity:0; transition:opacity .22s ease; }
.tk-modal[hidden]{ display:none; }
.tk-modal.is-open{ opacity:1; }
.tk-scrim{ position:absolute; inset:0; background:rgba(8,14,20,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.tk-panel{
  position:relative; width:min(760px,100%); max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain;
  padding:28px; border-radius:var(--radius-lg);
  background:linear-gradient(160deg, rgba(26,30,34,.98), rgba(14,16,18,.98));
  border:1px solid var(--glass-border); border-top-color:var(--glass-border-bright); box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:translateY(12px) scale(.985); transition:transform .28s var(--lg-ease, ease);
}
.tk-modal.tk-ink .tk-panel{ background:#ffffff; border-color:rgba(0,0,0,.12); }
.tk-modal.is-open .tk-panel{ transform:none; }
.tk-x{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; border:1px solid var(--tk-line); background:var(--tk-btn); color:var(--tk-ink); font-size:26px; line-height:1; }
.tk-mh{ display:flex; gap:16px; align-items:center; padding-right:48px; }
.tk-mh h3{ font-size:clamp(20px,3vw,26px); margin:0 0 8px; color:var(--tk-ink); }
.tk-mv{ display:flex; flex-wrap:wrap; gap:8px; margin:0; }
.tk-md{ margin:18px 0; color:var(--tk-dim); line-height:1.65; font-size:15.5px; }
.tk-facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 20px; }
.tk-facts div{ padding:12px 14px; border-radius:12px; background:var(--tk-soft); border:1px solid var(--tk-line); min-width:0; }
.tk-facts .wide{ grid-column:1 / -1; }
.tk-facts dt{ font:600 12px var(--ff-body); color:var(--tk-dim); margin-bottom:4px; }
.tk-facts dd{ margin:0; font-weight:600; font-size:14.5px; overflow-wrap:anywhere; color:var(--tk-ink); }
.tk-facts dd.mono{ font:500 12.5px var(--ff-mono); font-weight:500; }
.tk-hint{ display:block; margin-top:6px; font:400 12px var(--ff-body); color:var(--tk-dim); }
.tk-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.tk-panel h4{ font-size:15px; margin:18px 0 8px; color:var(--tk-ink); }
.tk-panel ul.tk-list, .tk-panel ol.tk-list{ margin:0; padding-left:20px; color:var(--tk-dim); line-height:1.6; font-size:14.5px; }
.tk-warn{ margin:20px 0 0; padding:14px 16px; border-radius:14px; background:var(--tk-warn-bg); border:1px solid var(--tk-warn-line); color:var(--tk-ink); font-size:14.5px; line-height:1.55; }
.tk-support, .tk-dl{ margin-top:22px; padding:20px; border-radius:var(--radius-md); background:var(--tk-soft); border:1px solid var(--tk-line); }
.tk-support p, .tk-dl p{ margin:0 0 14px; color:var(--tk-dim); font-size:14.5px; line-height:1.6; }
.tk-support h4, .tk-dl h4{ margin-top:0; }
.tk-row{ display:flex; flex-wrap:wrap; gap:10px; }
.tk-honor{ margin:14px 0 0 !important; font-size:13px !important; }
.tk-ok{ font-weight:700; color:var(--tk-ink) !important; margin-bottom:6px !important; }
.tk-src{ margin-top:18px; border-radius:14px; overflow:hidden; border:1px solid var(--tk-line); }
.tk-src-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--tk-soft); font:600 13px var(--ff-mono); color:var(--tk-ink); }
.tk-src pre{ margin:0; padding:16px; max-height:340px; overflow:auto; background:var(--tk-code-bg); color:var(--tk-code-fg); font:400 13px/1.6 var(--ff-mono); tab-size:4; }
.tk-c{ opacity:.8; font-style:italic; } .tk-k, .tk-s, .tk-v, .tk-l{ font-weight:600; }
.tk-how{ margin-top:16px; padding-top:14px; border-top:1px solid var(--tk-line); color:var(--tk-dim); }
.tk-how h4{ margin:0 0 8px !important; }
.tk-how li{ margin-bottom:6px; }
.tk-how strong{ color:var(--tk-ink); }
@media (max-width:640px){
  .tk-panel{ padding:20px 16px; }
  .tk-facts, .tk-cols{ grid-template-columns:minmax(0,1fr); }
  .tk-row .tk-btn{ width:100%; }
}

/* ---- Custom script request (Toolkit) ---- */
.tk-req{ border:1.5px dashed var(--tk-tint-line); background:transparent; }
.tk-cursor{ margin-left:2px; color:var(--tk-acc); animation:tkBlink 1.1s steps(1) infinite; }
.tk-panel .tk-cursor{ display:none; }
@keyframes tkBlink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .tk-cursor{ animation:none; } }
.tk-track{ display:flex; gap:8px; margin:0 0 18px; padding:0; list-style:none; counter-reset:tkstep; }
.tk-track li{ flex:1; padding:9px 10px; border-radius:10px; border:1px solid var(--tk-line); background:var(--tk-soft); color:var(--tk-dim); font:600 12.5px var(--ff-body); text-align:center; counter-increment:tkstep; }
.tk-track li::before{ content:counter(tkstep) ". "; }
.tk-track li.on{ background:var(--tk-tint); border-color:var(--tk-tint-line); color:var(--tk-ink); }
.tk-rq .tk-chips{ margin-bottom:4px; }
.tk-lab{ display:block; margin-top:14px; font:600 13px var(--ff-body); color:var(--tk-ink); }
.tk-in{ display:block; width:100%; margin-top:6px; padding:11px 14px; border-radius:12px; border:1px solid var(--tk-line); background:var(--tk-field); color:var(--tk-ink); font:400 15px var(--ff-body); resize:vertical; }
.tk-in::placeholder{ color:var(--tk-dim); opacity:.6; }
.tk-rq-pre{ margin:16px 0; padding:14px 16px; border-radius:12px; background:var(--tk-code-bg); color:var(--tk-code-fg); font:400 12.5px/1.6 var(--ff-mono); overflow-x:auto; white-space:pre; }
@media (max-width:520px){ .tk-track{ flex-direction:column; } }


/* ==================================================================
   [CSS-end]  STAGGER INDEX + small helpers (replaces old inline style="" attributes)
   ================================================================== */

/* data-sp="N" in index.html sets the reveal delay order. Change the order by editing the number there. */
[data-sp="0"]{ --sp-i:0; }
[data-sp="1"]{ --sp-i:1; }
[data-sp="2"]{ --sp-i:2; }
[data-sp="3"]{ --sp-i:3; }
[data-sp="4"]{ --sp-i:4; }
[data-sp="5"]{ --sp-i:5; }
[data-sp="6"]{ --sp-i:6; }
[data-sp="7"]{ --sp-i:7; }
[data-sp="8"]{ --sp-i:8; }
[data-sp="9"]{ --sp-i:9; }
[data-sp="10"]{ --sp-i:10; }
[data-sp="11"]{ --sp-i:11; }
[data-sp="12"]{ --sp-i:12; }
[data-sp="13"]{ --sp-i:13; }

/* hero photo tag: small accent status dot */
.hero-photo-tag .ping{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); flex:none; }

/* ==================================================================
   [CSS-60]  ACCENT SWITCHER — colour dots next to the Aa toggle
   ================================================================== */

.accent-picker{ display:inline-flex; gap:8px; align-items:center; margin-left:10px; }
.accent-dot{ width:18px; height:18px; border-radius:50%; padding:0; cursor:pointer; border:2px solid rgba(255,255,255,.35); background:var(--dot); transition:transform .15s ease, border-color .15s ease; }
.accent-dot:hover{ transform:scale(1.15); }
.accent-dot[aria-pressed="true"]{ border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.25); }

/* ==================================================================
   [CSS-61]  FILE ORGANIZER PREVIEW — "what would happen" box in the toolkit modal
   ================================================================== */

.tk-preview{ margin-top:18px; padding:16px; border-radius:var(--radius-sm); border:1px solid var(--glass-border); }
.tk-preview h4{ margin:0 0 6px; }
.tk-preview textarea{ width:100%; min-height:72px; resize:vertical; padding:10px 12px; border-radius:10px; border:1px solid var(--glass-border); background:rgba(0,0,0,.25); color:inherit; font:13px/1.5 var(--ff-mono); box-sizing:border-box; }
.tk-prev-list{ list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; font:13px/1.4 var(--ff-mono); }
.tk-prev-list li{ display:flex; justify-content:space-between; gap:12px; padding:6px 10px; border-radius:8px; background:rgba(255,255,255,.05); }
.tk-prev-list .to{ color:var(--accent); font-weight:600; white-space:nowrap; }
.tk-prev-list .stay{ color:var(--text-faint); white-space:nowrap; }

/* ==================================================================
   [CSS-11b]  EXPERIENCE — career strip + role cards (redesign)
   Loaded last so it refines the timeline rules above without
   changing the markup hooks the JS relies on.
   ================================================================== */

/* ---- Career at a glance: one tile per role, bar = time in role ---- */
.career-strip{
  margin-top:36px; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
}
.cs-item{
  position:relative; display:flex; flex-direction:column; gap:3px;
  padding:16px 16px 14px; border-radius:var(--radius-sm);
  background:linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 70%), var(--veil-card);
  border:1px solid var(--glass-border); border-top-color:var(--glass-border-bright);
  color:inherit; text-decoration:none;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
}
.cs-item:hover{ border-color:var(--glass-border-bright); background:linear-gradient(168deg, rgba(255,255,255,.12), rgba(255,255,255,.04) 70%), var(--veil-card); transform:translateY(-2px); }
.cs-item:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.cs-role{ font-family:var(--ff-display); font-size:14.5px; font-weight:600; color:var(--text); line-height:1.3; }
.cs-org{ font-size:13px; color:var(--text-dim); line-height:1.35; }
.cs-date{ margin-top:8px; font-family:var(--ff-mono); font-size:12px; color:var(--text-faint); }
.cs-bar{ display:block; height:3px; margin-top:12px; border-radius:3px; background:rgba(255,255,255,.10); overflow:hidden; }
.cs-bar i{ display:block; height:100%; border-radius:3px; background:var(--text-faint); }
.cs-bar .cs-w100{ width:100%; } .cs-bar .cs-w45{ width:45%; } .cs-bar .cs-w18{ width:18%; }
.cs-now{ border-color:rgba(var(--accent-rgb),.55); background:linear-gradient(168deg, rgba(var(--accent-rgb),.16), rgba(255,255,255,.03) 72%), var(--veil-card); }
.cs-now .cs-bar i{ background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* ---- Role cards: date column on the left, story on the right ---- */
.timeline{ margin-top:32px; }
.timeline .tl-item{
  margin:0 0 28px 44px; padding:30px 32px;
  display:grid; grid-template-columns:minmax(150px, 190px) minmax(0, 1fr); column-gap:36px; row-gap:0;
  border-radius:var(--radius-md);
  background:linear-gradient(168deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 55%), var(--veil-card);
  border:1px solid var(--glass-border); border-top-color:var(--glass-border-bright);
  scroll-margin-top:96px;
}
.timeline .tl-item:last-child{ margin-bottom:0; padding-bottom:30px; }
.timeline .tl-item > *{ grid-column:2; min-width:0; }
.timeline .tl-item > .tl-dot{ position:absolute; grid-column:auto; left:-44px; top:34px; }
.timeline .tl-item::before{
  content:''; position:absolute; left:-20px; top:45px; width:20px; height:1px;
  background:var(--glass-border-bright); opacity:.6;
}
.timeline .tl-item > .tl-meta{
  grid-column:1; grid-row:1 / span 24; align-self:start;
  flex-direction:column; align-items:flex-start; gap:8px; margin:0;
  position:sticky; top:104px;
}
.timeline .tl-date{ font-size:14px; font-weight:500; color:var(--text); line-height:1.35; }
.timeline .tl-place{ font-size:13px; color:var(--text-faint); }
.timeline .tl-role{ font-size:clamp(21px, 2.4vw, 26px); font-weight:600; letter-spacing:-.015em; line-height:1.2; margin-bottom:4px; }
.timeline .tl-org{ font-size:15px; margin-bottom:20px; }
.timeline .tl-bullets{ margin-bottom:20px; }
.tl-status{
  display:inline-flex; align-items:center; gap:8px; margin-top:4px;
  padding:5px 11px; border-radius:999px; font-size:12.5px; color:var(--text);
  background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.5);
}
.tl-status .ping{ width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); animation:pulse 2.2s ease-in-out infinite; }
.timeline .tl-item--now{
  border-color:rgba(var(--accent-rgb),.5); border-top-color:rgba(var(--accent-rgb),.8);
  background:linear-gradient(168deg, rgba(var(--accent-rgb),.12) 0%, rgba(255,255,255,.025) 55%), var(--veil-card);
  box-shadow:0 24px 50px -30px rgba(var(--accent-rgb),.45);
}
.timeline .tl-quote{
  margin-top:22px; padding:20px 22px; border-left:0; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.04); border:1px solid var(--glass-border);
  position:relative;
}
.timeline .tl-quote::before{ content:'\201C'; position:absolute; top:6px; left:14px; font-size:38px; line-height:1; color:var(--accent); opacity:.7; font-family:Georgia, serif; }
.timeline .tl-quote{ padding-left:44px; }

@media (max-width:860px){
  .timeline .tl-item{ grid-template-columns:minmax(0,1fr); padding:24px 20px; margin-left:36px; }
  .timeline .tl-item > *{ grid-column:1; }
  .timeline .tl-item > .tl-meta{ grid-row:auto; position:static; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:12px; }
  .timeline .tl-item > .tl-dot{ left:-36px; top:28px; }
  .timeline .tl-item::before{ left:-12px; width:12px; top:39px; }
  .timeline .tl-status{ margin-top:0; }
}
@media (prefers-reduced-motion: reduce){
  .cs-item{ transition:none; } .cs-item:hover{ transform:none; } .tl-status .ping{ animation:none; }
}
.cs-date{ font-size:11.5px; letter-spacing:-.01em; }
@media (max-width:860px){ .cs-item{ padding:13px 14px 12px; } .cs-date{ margin-top:6px; } .cs-bar{ margin-top:9px; } }

/* The "Positions in this engagement" panel sits inside a role card, which is already the glass
   surface. It keeps the thin border and a soft sheen but drops its own blur and dark backing,
   per the "no glass on glass" rule stated in Part 6 (which had no rule enforcing it here). */
.timeline .tl-subroles.glass{
  background:linear-gradient(168deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 70%);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.03);
}

/* ==================================================================
   [CSS-61a] SAFEGUARDS — what is kept from the removed Warm-White pass
   ==================================================================

   The "Warm-White Refinement" that used to end this file re-pointed every
   colour token to a light palette, set every blur token to none, painted
   .section / .glass / .glass-clear / the nav as solid #FFF / #FBFAF6, hid
   the background photo (.bg-field, .bg-grain) and the white/black ink
   toggle, and flattened the buttons with !important. That is what made the
   glass panels opaque, so it was removed (its own banner said: "To roll
   back: delete from this banner to the end of the file").

   Kept below: only rules about behaviour and layout, not about the theme.
   ================================================================== */

/* Anything carrying the hidden attribute stays hidden even where a class
   sets display (.ref-cta, .cert-card, .arsenal-block ...). data-pending is a
   markup-only marker; this rule plus the hidden attribute is what holds a
   section back. */
[hidden]{ display:none !important; }

/* Reduced motion: stop looping animations, and never leave revealed content invisible. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* Phones: the control row wraps instead of overflowing, and touch targets reach 44px. */
@media (max-width:640px){
  .focus-slider-inner{ flex-wrap:wrap; justify-content:center; max-width:100%; }
  .accent-picker{ flex-wrap:wrap; justify-content:center; max-width:100%; }
  .btn,.cert-btn,.nav-cta,.contact-pill,.tk-btn,.cf-submit,.recruiter-link{ min-height:44px; }
  .nav-toggle{ min-width:44px; min-height:44px; }
}

/* About-page highlight cards: layout tweaks from the same pass, unchanged. */
.highlight-row{ margin-top:24px; }
.highlight-card .val{ font-size:clamp(15px,1.5vw,20px); overflow-wrap:anywhere; }

/* Scroll-parallax stays switched off, as it was (it caused overlaps).
   Delete this one rule to bring the data-depth parallax back. */
[data-depth]{ transform:none !important; translate:none !important; }


/* ==================================================================
   [CSS-57]  REGION-AWARE CONTACT VAULT
   Radar head + masked reveal rows. States set by script.js via
   data-state: checking | full | social | unknown
   ================================================================== */
[data-geo-contact][hidden],
.geo-vault [hidden],
.qr-card[hidden]{ display:none !important; }

.geo-vault{
  position:relative; display:grid; gap:12px;
  max-width:540px; margin:6px 0 4px; padding:16px 18px 14px;
  border-radius:22px;
}
.gv-head{ display:flex; align-items:center; gap:14px; }
.gv-head-text{ min-width:0; flex:1; }
.gv-title{ font-size:15.5px; font-weight:600; color:var(--text); line-height:1.3; }
.gv-sub{ font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-top:2px; }

.gv-radar{ position:relative; width:46px; height:46px; flex:none; border-radius:50%; }
.gv-radar i{ position:absolute; border-radius:50%; border:1px solid rgba(var(--accent-rgb),.5); }
.gv-radar i:nth-child(1){ inset:0; }
.gv-radar i:nth-child(2){ inset:9px; opacity:.7; }
.gv-radar i:nth-child(3){ inset:18px; border-color:transparent; background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16); transition:background .4s ease, box-shadow .4s ease; }
.gv-radar::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(var(--accent-rgb),.55), transparent 30%);
  animation:gvSweep 1.4s linear infinite;
}
.geo-vault[data-state="checking"] .gv-radar i:nth-child(1){ animation:gvPing 1.6s ease-out infinite; }
.geo-vault:not([data-state="checking"]) .gv-radar::after{ display:none; }
.geo-vault[data-state="social"] .gv-radar i,
.geo-vault[data-state="unknown"] .gv-radar i{ border-color:rgba(143,168,189,.5); }
.geo-vault[data-state="social"] .gv-radar i:nth-child(3),
.geo-vault[data-state="unknown"] .gv-radar i:nth-child(3){ background:var(--amber); box-shadow:0 0 0 4px var(--amber-dim); border-color:transparent; }
@keyframes gvSweep{ to{ transform:rotate(360deg); } }
@keyframes gvPing{ 0%{ transform:scale(.7); opacity:.9; } 100%{ transform:scale(1.18); opacity:0; } }

.gv-pill{
  flex:none; margin-left:auto; padding:5px 11px; border-radius:999px;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); background:rgba(var(--accent-rgb),.12); border:1px solid rgba(var(--accent-rgb),.45);
}
.geo-vault[data-state="social"] .gv-pill,
.geo-vault[data-state="unknown"] .gv-pill{ color:var(--amber); background:var(--amber-dim); border-color:rgba(143,168,189,.45); }

.gv-rows{ display:grid; gap:8px; }
.gv-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:15px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  color:var(--text); text-decoration:none;
  transition:border-color .25s ease, background .25s ease;
}
.gv-row.is-revealed{ border-color:rgba(var(--accent-rgb),.45); background:rgba(var(--accent-rgb),.07); }
a.gv-row--link:hover{ border-color:rgba(var(--accent-rgb),.55); background:rgba(var(--accent-rgb),.09); }
.gv-ico{ width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:11px; color:var(--accent); background:rgba(var(--accent-rgb),.14); }
.gv-ico svg{ width:18px; height:18px; display:block; }
.gv-body{ display:grid; gap:1px; min-width:0; flex:1; }
.gv-lbl{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.gv-val{ font-size:14.5px; letter-spacing:.04em; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; color:var(--text-dim); }
.gv-row.is-revealed .gv-val{ color:var(--text); letter-spacing:.01em; animation:gvUnblur .45s ease both; }
@keyframes gvUnblur{ from{ filter:blur(6px); opacity:.25; } to{ filter:blur(0); opacity:1; } }

.gv-acts{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.gv-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:7px 13px;
  font:inherit; font-size:12.5px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer;
  color:var(--text); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:999px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.gv-btn:hover{ background:rgba(var(--accent-rgb),.16); border-color:rgba(var(--accent-rgb),.55); color:var(--accent-light); }
.gv-btn--go{ background:rgba(var(--accent-rgb),.18); border-color:rgba(var(--accent-rgb),.5); }
.gv-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.gv-note{ margin:0; display:none; font-size:12.5px; color:var(--text-dim); }
.geo-vault[data-state="social"] .gv-note,
.geo-vault[data-state="unknown"] .gv-note{ display:block; }
.gv-note a{ color:var(--accent); text-decoration:none; font-weight:600; }
.gv-note a:hover{ text-decoration:underline; }
.gv-foot{ margin:0; font-size:11.5px; line-height:1.5; color:var(--text-faint); }

@media (max-width:520px){
  .geo-vault{ padding:14px; }
  .gv-row{ flex-wrap:wrap; }
  .gv-acts{ width:100%; justify-content:flex-start; }
  .gv-pill{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .gv-radar::after, .gv-radar i, .gv-row.is-revealed .gv-val{ animation:none !important; }
}


/* ==================================================================
   [CSS-58]  NO GRAIN — removes the white speckle/dot texture everywhere
   (global film grain, glass-button noise, contact-panel noise), so the
   surfaces stay clean even when the blur slider is at 0px.
   Delete this block to bring the grain back.
   ================================================================== */
:root{ --lg-noise:linear-gradient(transparent, transparent); }
.bg-grain{ display:none !important; }
.cp-liquid::before{ display:none !important; }

/* vault: brighter accent tones so icons, radar and the status pill stay readable on dark glass */
.gv-ico{ color:var(--accent-light); background:rgba(var(--accent-rgb),.22); }
.gv-pill{ color:var(--accent-light); background:rgba(var(--accent-rgb),.2); border-color:rgba(var(--accent-rgb),.6); }
.gv-radar i{ border-color:rgba(var(--accent-light-rgb),.6); }
.gv-radar i:nth-child(3){ background:var(--accent-light); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.28); }
.geo-vault[data-state="social"] .gv-radar i:nth-child(3),
.geo-vault[data-state="unknown"] .gv-radar i:nth-child(3){ background:var(--amber); }
.geo-vault[data-state="social"] .gv-pill,
.geo-vault[data-state="unknown"] .gv-pill{ color:#D5E0EA; }


/* ==================================================================
   [CSS-59]  QR CARD — bigger, scannable code + tap-to-enlarge
   ================================================================== */
.qr-card{ gap:16px; }
.qr-img{ width:112px; height:112px; padding:6px; border-radius:12px; cursor:zoom-in; object-fit:contain; }
.qr-img:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.qr-hint{ display:block; margin-top:4px; font-size:11.5px; color:var(--text-faint); }

.qr-zoom{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:20px; }
.qr-zoom[hidden]{ display:none !important; }
.qr-zoom-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.72); }
.qr-zoom-panel{
  position:relative; display:grid; justify-items:center; gap:12px;
  padding:18px 18px 16px; border-radius:22px; background:#fff; color:#111;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
}
.qr-zoom-img{ width:min(300px, 72vw); height:auto; display:block; }
.qr-zoom-cap{ margin:0; font-size:13px; color:#333; }
.qr-zoom-close{
  font:inherit; font-size:13px; font-weight:600; padding:8px 18px; min-height:38px; cursor:pointer;
  color:#111; background:#eee; border:1px solid #ccc; border-radius:999px;
}
.qr-zoom-close:hover{ background:#e2e2e2; }


/* ==================================================================
   [CSS-61b] MOBILE — one glass layer only (phones, <=640px)
   ==================================================================
   On a phone the page was glass inside glass inside glass: the section
   panel, then the Contact panel with its own border/blur/liquid layer,
   then the vault, QR card and cards inside that. Now the hero / section
   panels are the ONE glass surface; everything nested in them becomes a
   flat tile (thin border, soft tint, no blur, no sheen, no shadow).
   The nav and the mobile drawer float over the page, so they keep
   their own glass. Desktop is untouched.
   ================================================================== */
@media (max-width:640px){

  /* every nested glass surface -> flat tile */
  :is(.hero,.section) :is(.glass,.glass-clear){
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 70%), var(--veil-card);
    border:1px solid var(--glass-border);
    box-shadow:none;
  }
  :is(.hero,.section) :is(.glass,.glass-clear)::before,
  :is(.hero,.section) :is(.glass,.glass-clear)::after{ display:none; }

  /* the name tag sits on top of the portrait, so it keeps a firmer backing */
  .hero .hero-photo-tag.glass-clear{ background:rgba(13,14,16,.55); }

  /* Contact: drop the panel's own glass (border, blur, liquid pools, rim) and
     let the section be the glass. Also hand the width back: the old side
     padding stacked on the section's own gutter and squeezed everything. */
  .section .contact-panel.glass{
    background:none; border:0; box-shadow:none; border-radius:0; overflow:visible;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .contact-panel > .cp-liquid{ display:none; }
  .contact-panel .contact-left{ padding:0 0 24px; }
  .contact-panel .contact-right{ padding:28px 0 0; margin-top:4px; }
  .contact-panel .contact-avail{ box-shadow:none; }

  /* vault + QR card fill the column instead of shrink-wrapping their text */
  .contact-left .geo-vault,
  .contact-left .qr-card{ width:100%; max-width:none; }
  .contact-left .contact-shortcuts{ margin-top:8px; }
  .geo-vault{ padding:14px; }
  /* keep the Instagram handle on one line next to its Open button */
  .gv-val{ letter-spacing:0; font-size:14px; }
  .gv-row--link .gv-val{ overflow-wrap:normal; white-space:nowrap; }
  .gv-row--link .gv-btn--go{ padding:7px 11px; }
}

/* ==================================================================
   [CSS-VC]  VISITOR LOCAL STRIP — the visitor's own place, time and weather
   Sits beside the "Available — Doha" chip in the hero (see script.js [JS-31]).
   ================================================================== */
.chip-row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:24px; }
.chip-row .status-chip{ margin-bottom:0; }

.visitor-chip{
  flex-wrap:wrap; row-gap:2px; column-gap:9px; max-width:100%;
  border-radius:18px; color:var(--text-dim);
  opacity:0; transform:translateY(4px);
  transition:opacity .45s ease, transform .45s ease;
}
.visitor-chip.is-in{ opacity:1; transform:none; }
.visitor-chip .vc-pin{ width:13px; height:13px; flex:none; color:var(--accent); }
.visitor-chip .vc-time{ color:var(--text); font-variant-numeric:tabular-nums; }
.visitor-chip .vc-wx{ display:inline-flex; align-items:center; gap:5px; }
.visitor-chip .vc-wx-ico{ font-size:14px; line-height:1; }
.visitor-chip .vc-time::before,
.visitor-chip .vc-wx::before,
.visitor-chip .vc-diff::before{ content:'\00B7'; margin-right:9px; color:var(--text-faint); }
/* the time-difference note is a desktop extra; phones keep the chip short */
.visitor-chip .vc-diff{ display:none; color:var(--text-faint); }
@media (min-width:720px){ .visitor-chip .vc-diff:not([hidden]){ display:inline; } }
@media (max-width:430px){ .visitor-chip{ font-size:11px; } }
@media (prefers-reduced-motion: reduce){ .visitor-chip{ transition:none; transform:none; } }

/* [CSS-VC] spacing fix — the older `.contact-left .contact-shortcuts{margin-top:-4px}` rule cancelled the
   vault's 4px bottom margin, so the icon buttons touched the panel. One explicit gap, same as above the QR card. */
.contact-left .geo-vault{ margin-bottom:18px; }
.contact-left .contact-shortcuts{ margin-top:0; }


/* ==================================================================
   [CSS-48]  SIDE RAIL v2 — "the thread"
   The old capsule dock was ~62px wide inside a gutter that is at most
   40px, so it ran over the panel edge. This version lives entirely in
   the gutter: a hairline thread with the contact links strung on it as
   small glass beads. The thread fills with the accent colour as you
   scroll (--rail-p is set in script.js [JS-48]). Labels slide out on
   hover / keyboard focus and are allowed to overlap the panels.
   ================================================================== */
.side-rail .side-rail-dock{
  position:relative; width:100%;
  gap:12px; padding:52px 0;
  background:none; border:0; border-radius:0;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:none;
}
/* the thread */
.side-rail .side-rail-dock::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:1px;
  transform:translateX(-.5px); pointer-events:none;
  background:linear-gradient(180deg, transparent 0, rgba(255,255,255,.34) 16%, rgba(255,255,255,.34) 84%, transparent 100%);
}
/* scroll progress along the thread */
.side-rail .side-rail-dock::after{
  content:''; position:absolute; left:50%; top:0; width:2px; margin-left:-1px;
  height:calc(var(--rail-p, 0) * 100%); max-height:100%;
  border-radius:2px; pointer-events:none;
  background:linear-gradient(180deg, transparent 0, var(--accent) 100%);
  box-shadow:0 0 10px rgba(var(--accent-rgb), .65);
}
/* beads */
.side-rail .side-rail-link{
  position:relative; z-index:1;
  width:30px; height:30px; border-radius:50%;
  background:rgba(12,13,15,.58);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--text-dim);
  transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.side-rail .side-rail-link[hidden]{ display:none; }
.side-rail .side-rail-icon{ width:15px; height:15px; }
.side-rail .rail-cmd .side-rail-icon{ width:16px; height:16px; }
.side-rail .side-rail-link:hover,
.side-rail .side-rail-link:focus-visible{
  transform:none;
  background:var(--accent); border-color:var(--accent);
  color:var(--on-accent,#06182B);
  box-shadow:0 0 0 5px rgba(var(--accent-rgb), .18), 0 8px 20px -8px rgba(var(--accent-rgb), .8);
}
/* separator becomes a knot on the thread */
.side-rail .side-rail-line{
  position:relative; z-index:1;
  width:7px; height:7px; margin:2px 0;
  border-radius:1px; transform:rotate(45deg);
  background:rgba(var(--accent-rgb), .9);
  box-shadow:0 0 8px rgba(var(--accent-rgb), .6);
}
/* label that slides out of each bead (text comes from aria-label) */
.side-rail .side-rail-link::after{
  content:attr(aria-label);
  position:absolute; left:calc(100% + 12px); top:50%;
  translate:-6px -50%;
  padding:7px 11px; border-radius:9px; white-space:nowrap;
  font:500 12px/1 var(--ff-body); letter-spacing:.01em; color:#fff;
  background:rgba(14,15,17,.88);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, translate .22s var(--lg-ease, ease);
}
.side-rail .side-rail-link:hover::after,
.side-rail .side-rail-link:focus-visible::after{ opacity:1; translate:0 -50%; }
@media (prefers-reduced-motion: reduce){
  .side-rail .side-rail-link, .side-rail .side-rail-link::after{ transition:none; }
}


/* ==================================================================
   [CSS-49]  SPEED + BRIGHT ACCENTS + BOLD TOGGLE
   ================================================================== */

/* -- Speed 1: if script.js is slow or blocked, content still appears (never stays invisible) -- */
@keyframes revealFailsafe{ to{ opacity:1; transform:none; } }
html:not(.js-ready) [data-reveal]{ animation:revealFailsafe .3s ease 2.5s forwards; }

/* -- Speed 2: hundreds of permanent GPU layers -> only while animating in -- */
[data-reveal].is-visible{ will-change:auto; }
[data-depth],[data-parallax]{ will-change:auto; }

/* -- Speed 3: skip drawing far-below-the-fold sections until they're near the viewport -- */
#lab, #diagnostics, #triage, #education, #certifications{
  content-visibility:auto;
  contain-intrinsic-size:auto 900px;
}

/* -- Speed 4: no endless full-screen background animation on phones / tablets -- */
@media (max-width:900px), (pointer:coarse){
  .bg-field::before, .bg-field::after{ animation:none; }
}

/* -- Accent dots: bigger, ringed, glowing in their own colour so they read on glass -- */
.accent-picker{ gap:10px; }
.accent-dot{
  width:22px; height:22px;
  border:2px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 0 10px -1px var(--dot);
}
.accent-dot:hover{ transform:scale(1.18); }
.accent-dot[aria-pressed="true"]{
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 0 4px rgba(255,255,255,.22), 0 0 14px 1px var(--dot);
}

/* -- Slider pill needs more room for the extra button -- */
.focus-slider{ max-width:860px; }
.focus-bold-toggle b{ font-weight:900; font-size:1.15em; }

/* -- Bold mode: thickens the glyph outlines with a thin stroke instead of switching
      to a heavier font weight. A stroke adds NO width, so line breaks, wrapping and the
      layout stay exactly as designed. (em = scales with each element's own font size.) -- */
html.text-bold *{ -webkit-text-stroke:.032em currentColor; paint-order:stroke fill; }
html.text-bold .focus-bold-toggle b{ -webkit-text-stroke:0; }


/* ==================================================================
   [CSS-50]  SITE-WIDE THEME — the colour dots restyle the whole page
   script.js [JS-28] sets --accent*, --text*, --text-rgb, --glass-border*
   and --on-accent on <html>; everything below just follows them.
   ================================================================== */
.accent-dot[data-accent="white"]{ background:#fff; }
.accent-dot[data-accent="black"]{ background:#000; border-color:rgba(255,255,255,.8); }
html[data-theme] ::selection{ background:rgba(var(--accent-rgb),.35); }

/* -- Black theme: black text needs a light surface to read on, whatever the photo shows -- */
html[data-theme="black"]{
  --glass-surface: linear-gradient(155deg, rgba(255,255,255,.78), rgba(238,240,244,.66));
  --glass-surface-strong: linear-gradient(155deg, rgba(255,255,255,.88), rgba(240,242,246,.78));
  --veil-card: rgba(255,255,255,.6);
  --glass-tint: rgba(0,0,0,.04);
  --glass-tint-strong: rgba(0,0,0,.08);
}
/* !important: the blur slider writes an inline transparent background on the panels */
html[data-theme="black"] :is(.hero, .recruiter-bar, .section, .footer-panel, .nav, .mob-drawer, .focus-slider){
  background-color:rgba(244,246,249,.76) !important;
}
html[data-theme="black"] .diag-console{ background:rgba(255,255,255,.6); }
/* dark pop-ups keep white text */
html[data-theme="black"] :is(.cmdk-panel, .vgate-panel, .vview-panel, .cmdk-toast){
  --text:#fff; --text-rgb:255,255,255;
  --text-dim:rgba(255,255,255,.82); --text-faint:rgba(255,255,255,.68);
  --glass-border:rgba(255,255,255,.18); --glass-border-bright:rgba(255,255,255,.55);
}
/* black theme: rail sits on the page background (not on a panel) so keeps white icons; readout stays dark */
html[data-theme="black"] .side-rail{ --text-dim:rgba(255,255,255,.88); }
html[data-theme="black"] .focus-slider-readout{ color:#000; }


/* ==================================================================
   [CSS-62]  DISPLAY DOCK — the focus/accent/bold bar, moved to the right edge
   A slim glass capsule sits on the right edge, centred vertically. Its
   lens orb blurs in step with the slider, and a thin meter under it shows
   the current blur. Hover (mouse) or tap/click (touch, keyboard) and the
   capsule UNFOLDS into a vertical control panel with a springy overshoot:
   readout → vertical "lens" slider → text-colour dots (a ring slides between
   them, a bloom ripples out on pick; they recolour the dock's TEXT only) → bold switch, each staggered in.
   Same IDs as before (#heroFocusRange, #focusSliderReadout, #textColourPicker,
   #boldToggle) so the existing JS keeps driving everything.
   ================================================================== */
.fx-dock{
  --fx-spring: cubic-bezier(.2,1.25,.35,1);
  --fx-out: cubic-bezier(.2,.8,.2,1);
  --fx-dot: 20px; --fx-gap: 9px; --fx-pitch: calc(var(--fx-dot) + var(--fx-gap));
  --fx-n: 6;    /* number of text-colour dots */
  --fx-h: calc(var(--fx-dot) * var(--fx-n) + var(--fx-gap) * (var(--fx-n) - 1) + 57px);   /* slider length = dot column + bold switch */
  --lens: 0;                   /* 0..1, written by script.js [JS-50] */
  --fx-hw: clamp(26px, calc(var(--panel-gutter) - 8px), 34px);   /* capsule width: always fits inside the gutter */
  /* the dock's text follows the site-wide text colour chosen with its own dots ([JS-50]) */
  --glass-border:rgba(255,255,255,.2); --glass-border-bright:rgba(255,255,255,.5);
  position:fixed; z-index:45;
  right:max(2px, calc((var(--panel-gutter) - var(--fx-hw)) / 2)); top:50%;
  transform:translateY(-50%);
  color:var(--text); font-family:var(--ff-mono);
  -webkit-text-stroke:0;
}
.fx-dock *{ box-sizing:border-box; }

/* ---------- collapsed capsule ---------- */
.fx-handle{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:9px;
  width:var(--fx-hw); padding:13px 0 14px; margin:0; cursor:pointer;
  font:inherit; color:var(--text-dim);
  border-radius:999px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),.26) 0%, rgba(var(--accent-rgb),.05) 60%),
    rgba(14,15,18,.5);
  border:1px solid var(--glass-border); border-top-color:var(--glass-border-bright);
  -webkit-backdrop-filter:blur(18px) saturate(1.5); backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 18px 38px -18px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform .45s var(--fx-spring), opacity .22s ease, box-shadow .3s ease, border-color .3s ease;
}
.fx-handle:hover{
  transform:scale(1.06);
  border-color:rgba(var(--accent-rgb),.6);
  box-shadow:0 18px 38px -18px rgba(0,0,0,.75), 0 0 26px -6px rgba(var(--accent-rgb),.55), inset 0 1px 0 rgba(255,255,255,.3);
}
.fx-handle:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

.fx-lens{ position:relative; width:16px; height:16px; flex:none; display:block; order:0; }
.fx-lens i{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff 0, var(--accent) 52%, var(--accent-deep) 100%);
  box-shadow:0 0 14px rgba(var(--accent-rgb),.75);
  filter:blur(calc(var(--lens) * 5px));           /* the orb goes soft as the page does */
  transition:filter .12s linear, background .3s ease;
}
.fx-lens::before{                                   /* "psst, I'm here" rings, 3 times after load */
  content:''; position:absolute; inset:-4px; border-radius:50%;
  border:1.5px solid rgba(var(--accent-rgb),.7);
  opacity:0; animation:fxHint 2.6s ease-out 1.6s 3;
}
@keyframes fxHint{ 0%{ transform:scale(.7); opacity:.85; } 100%{ transform:scale(2.1); opacity:0; } }

.fx-handle::after{                                  /* live blur meter */
  content:''; order:1; flex:none; width:3px; height:30px; border-radius:3px;
  background:linear-gradient(to top, var(--accent) calc(var(--lens) * 100%), rgba(255,255,255,.2) calc(var(--lens) * 100%));
}
.fx-handle-text{
  order:2; writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:9px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}

/* ---------- unfolded panel ---------- */
.fx-panel{
  position:absolute; right:0; top:50%;
  width:134px; padding:12px 14px 16px;
  border-radius:30px; overflow:hidden;
  transform-origin:right center;
  transform:translateY(-50%) translateX(22px) scale(.55,.38);
  opacity:0; visibility:hidden; pointer-events:none;
  background:
    linear-gradient(165deg, rgba(var(--accent-rgb),.24) 0%, rgba(255,255,255,.04) 42%),
    rgba(12,13,16,.7);
  border:1px solid var(--glass-border); border-top-color:var(--glass-border-bright);
  -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform .55s var(--fx-spring), opacity .2s linear, visibility 0s linear .55s;
}
.fx-dock[data-open="true"] .fx-panel{
  transform:translateY(-50%); opacity:1; visibility:visible; pointer-events:auto;
  transition:transform .55s var(--fx-spring), opacity .2s linear, visibility 0s;
}
.fx-dock[data-open="true"] .fx-handle{ opacity:0; transform:translateX(10px) scale(.6); pointer-events:none; }

/* staggered entrance of each block (order set by --k in the HTML) */
.fx-in{ opacity:0; transform:translateX(16px); transition:opacity .2s ease, transform .25s var(--fx-out); }
.fx-dock[data-open="true"] .fx-in{
  opacity:1; transform:none;
  transition:opacity .35s var(--fx-out) calc(130ms + var(--k, 0) * 60ms), transform .55s var(--fx-spring) calc(130ms + var(--k, 0) * 60ms);
}

/* colour bloom: ripples out of the dot you picked */
.fx-bloom{
  position:absolute; left:var(--bx, 50%); top:var(--by, 50%); width:20px; height:20px; margin:-10px 0 0 -10px;
  border-radius:50%; pointer-events:none; opacity:0; transform:scale(0);
  background:radial-gradient(circle, rgba(var(--accent-rgb),.6) 0%, rgba(var(--accent-rgb),0) 70%);
}
.fx-bloom.go{ animation:fxBloom .85s var(--fx-out); }
@keyframes fxBloom{ 0%{ transform:scale(0); opacity:1; } 100%{ transform:scale(15); opacity:0; } }

/* header: live readout + close */
.fx-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.fx-readout{
  display:inline-block; min-width:0; flex:none;
  font-family:var(--ff-mono); font-size:16px; font-weight:700; letter-spacing:-.02em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.fx-readout.tick{ animation:fxTick .22s var(--fx-out); }
@keyframes fxTick{ from{ transform:translateY(-6px); opacity:.35; } to{ transform:none; opacity:1; } }
.fx-close{
  width:26px; height:26px; padding:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font:400 17px/1 var(--ff-body); color:var(--text-dim);
  background:rgba(255,255,255,.07); border:1px solid var(--glass-border);
  transition:transform .35s var(--fx-spring), background .2s ease, color .2s ease;
}
.fx-close:hover, .fx-close:focus-visible{ transform:rotate(90deg); background:var(--accent); color:var(--on-accent,#06182B); outline:none; }

.fx-body{ display:flex; gap:14px; align-items:stretch; }

/* vertical slider: bottom = Clear, top = Blurred */
.fx-focus{ display:flex; gap:7px; align-items:stretch; align-self:flex-start; }
.fx-cap{
  display:flex; justify-content:space-between; writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);
}
.fx-cap b{ font-weight:600; }
.fx-track{ position:relative; width:30px; height:var(--fx-h); flex:none; }
.fx-track::before{                                   /* tick marks */
  content:''; position:absolute; right:-3px; top:3px; bottom:3px; width:5px;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.26) 0 1px, transparent 1px calc((var(--fx-h) - 6px) / 10));
  -webkit-mask:linear-gradient(90deg, #000, transparent); mask:linear-gradient(90deg, #000, transparent);
  pointer-events:none;
}
.fx-range{
  position:absolute; left:50%; top:50%; margin:0; padding:0;
  width:var(--fx-h); height:30px;
  translate:-50% -50%; rotate:-90deg;
  -webkit-appearance:none; appearance:none; background:transparent; outline:none; cursor:grab;
}
.fx-range:active{ cursor:grabbing; }
.fx-range::-webkit-slider-runnable-track{
  height:8px; border-radius:999px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--focus-fill, 0%), rgba(255,255,255,.16) var(--focus-fill, 0%));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.fx-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-9px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff 0, #fff 45%, rgba(255,255,255,.78) 100%);
  border:2px solid var(--accent);
  box-shadow:0 3px 10px rgba(0,0,0,.55), 0 0 0 6px rgba(var(--accent-rgb),.16);
  transition:transform .3s var(--fx-spring), box-shadow .3s ease;
}
.fx-range:hover::-webkit-slider-thumb{ transform:scale(1.1); }
.fx-range:active::-webkit-slider-thumb{ transform:scale(1.2); box-shadow:0 4px 12px rgba(0,0,0,.6), 0 0 0 12px rgba(var(--accent-rgb),.24); }
.fx-range:focus-visible::-webkit-slider-thumb{ box-shadow:0 3px 10px rgba(0,0,0,.55), 0 0 0 4px rgba(var(--accent-rgb),.5); }
.fx-range::-moz-range-track{ height:8px; border-radius:999px; background:rgba(255,255,255,.16); }
.fx-range::-moz-range-progress{ height:8px; border-radius:999px; background:var(--accent); }
.fx-range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%; background:#fff; border:2px solid var(--accent);
  box-shadow:0 3px 10px rgba(0,0,0,.55), 0 0 0 6px rgba(var(--accent-rgb),.16);
}

/* right column: colour dots + bold switch */
.fx-side{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:14px; width:40px; }
.fx-dots{ position:relative; display:flex; flex-direction:column; align-items:center; gap:var(--fx-gap); margin:0; padding:0; max-width:none; }
.fx-dots::after{                                     /* the ring that slides between dots */
  content:''; position:absolute; left:50%; top:0; width:calc(var(--fx-dot) + 10px); height:calc(var(--fx-dot) + 10px); margin:-5px 0 0 calc(var(--fx-dot) / -2 - 5px);
  border-radius:50%; border:2px solid #fff; pointer-events:none;
  box-shadow:0 0 14px rgba(var(--accent-rgb),.75), inset 0 0 8px rgba(var(--accent-rgb),.35);
  transform:translateY(calc(var(--sel, 0) * var(--fx-pitch)));
  transition:transform .5s var(--fx-spring);
}
.fx-dots .text-colour-dot{
  width:var(--fx-dot); height:var(--fx-dot); margin:0; padding:0; flex:none; cursor:pointer; border-radius:50%;
  background:var(--dot-colour, #fff);
  border:2px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 0 10px -1px var(--dot-colour, #fff);
  opacity:0; scale:.3;                               /* pop in one by one when the panel opens */
  transition:scale .2s ease, opacity .15s ease, transform .25s var(--fx-spring), box-shadow .25s ease, border-color .25s ease;
}
.fx-dock[data-open="true"] .fx-dots .text-colour-dot{
  opacity:1; scale:1;
  transition:scale .5s var(--fx-spring) calc(300ms + var(--d, 0) * 45ms), opacity .25s ease calc(300ms + var(--d, 0) * 45ms),
             transform .25s var(--fx-spring), box-shadow .25s ease, border-color .25s ease;
}
.text-colour-dot[data-text-colour="white"]{ --dot-colour:#FFFFFF; --d:0; }
.text-colour-dot[data-text-colour="black"]{ --dot-colour:#000000; --d:1; border-color:rgba(255,255,255,.8); }
.text-colour-dot[data-text-colour="sapphire"]{ --dot-colour:#7FB8F0; --d:2; }
.text-colour-dot[data-text-colour="amethyst"]{ --dot-colour:#C4A5F5; --d:3; }
.text-colour-dot[data-text-colour="amber"]{ --dot-colour:#F5C26B; --d:4; }
.text-colour-dot[data-text-colour="mint"]{ --dot-colour:#8FE5C0; --d:5; }
.fx-dots .text-colour-dot:hover{ transform:scale(1.18); }
.fx-dots .text-colour-dot[aria-pressed="true"]{
  transform:scale(.8); border-color:rgba(255,255,255,.95);
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 14px 1px var(--dot-colour);
}
.fx-dots .text-colour-dot:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .fx-dots .text-colour-dot, .fx-dock[data-open="true"] .fx-dots .text-colour-dot{ transition:none; }
  .fx-dots::after{ transition:none; }
}

/* ---- dock text = the site-wide text colour (set on <html> by [JS-50] from the dots below) ---- */
.fx-dock{ --dock-text:var(--text); --dock-text-dim:var(--text-dim); --dock-text-faint:var(--text-faint); }

/* every text element in the dock reads the variables. Selectors are kept at (or above) the specificity of
   the rules they override; the bold switch's pressed state and the close button's hover keep their own
   on-accent colours because they sit on an accent fill. */
.fx-dock .fx-readout{ color:var(--dock-text); }
.fx-dock .fx-cap{ color:var(--dock-text-faint); }
.fx-dock .fx-handle-text{ color:var(--dock-text-dim); }
/* blur-state label keeps its fade (crystal/soft full, blurred dim, frosted faint); the extra attribute
   selector outranks the per-state rules that appear later in [CSS-62] */
.fx-dock[data-text-colour][data-fx-state] .fx-preview-label{ color:var(--dock-text); }
.fx-dock[data-text-colour][data-fx-state="blurred"] .fx-preview-label{ color:var(--dock-text-dim); }
.fx-dock[data-text-colour][data-fx-state="frosted"] .fx-preview-label{ color:var(--dock-text-faint); }
.fx-dock .fx-bold:not([aria-pressed="true"]){ color:var(--dock-text-dim); }
.fx-dock .fx-bold:not([aria-pressed="true"]) b{ color:var(--dock-text); }
.fx-dock .fx-close:not(:hover):not(:focus-visible){ color:var(--dock-text-dim); }

/* bold switch */
.fx-bold{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:40px; padding:6px 0 5px; margin:0; cursor:pointer;
  border-radius:14px; font-family:var(--ff-mono); color:var(--text-dim);
  background:rgba(255,255,255,.07); border:1px solid var(--glass-border);
}
.fx-bold b{ font-size:19px; line-height:1; font-weight:500; -webkit-text-stroke:0; }
.fx-bold-txt{ font-size:8.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.fx-bold:hover{ border-color:var(--glass-border-bright); }
.fx-bold:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.fx-bold[aria-pressed="true"]{ color:var(--on-accent,#06182B); background:var(--accent); border-color:var(--accent); }
.fx-bold[aria-pressed="true"] b{ font-weight:900; animation:fxPop .4s var(--fx-spring); }
@keyframes fxPop{ 0%{ transform:scale(.6); } 100%{ transform:scale(1); } }
/* .fx-bold also carries .fx-in, so keep its own entrance transition (below beats the base button transition) */
.fx-bold.fx-in{ transition:opacity .2s ease, transform .25s var(--fx-out), background .2s ease, color .2s ease, border-color .2s ease; }
.fx-dock[data-open="true"] .fx-bold.fx-in{
  transition:opacity .35s var(--fx-out) calc(130ms + var(--k, 0) * 60ms), transform .55s var(--fx-spring) calc(130ms + var(--k, 0) * 60ms),
             background .2s ease, color .2s ease, border-color .2s ease;
}

/* The old bar sat in the page flow and pushed the hero down; the nav is fixed, so give the hero its own clearance */
.hero{ margin-top:calc(16px + var(--nav-h, 60px) + 22px); }

/* ---------- phones / tablets: capsule becomes a round button, bottom-right ---------- */
@media (max-width:900px){
  .fx-dock{ --fx-hw:52px; --fx-dot:22px; top:auto; transform:none; bottom:calc(env(safe-area-inset-bottom, 0px) + 18px); right:max(14px, env(safe-area-inset-right, 0px)); }
  .fx-handle{ width:52px; height:52px; padding:0; gap:0; justify-content:center; }
  .fx-lens{ width:22px; height:22px; }
  .fx-handle::after, .fx-handle-text{ display:none; }
  .fx-panel{ top:auto; bottom:0; transform-origin:bottom right; transform:translateX(12px) scale(.5); }
  .fx-dock[data-open="true"] .fx-panel{ transform:none; }
}
/* short screens (laptops with toolbars, phones in landscape): tighter dot column so the panel always fits */
@media (max-height:620px){ .fx-dock{ --fx-dot:17px; --fx-gap:6px; } }
@media (max-height:480px){ .fx-dock{ --fx-dot:14px; --fx-gap:4px; } }
@media (prefers-reduced-motion:reduce){
  .fx-lens::before{ animation:none; }
  .fx-panel{ transform:translateY(-50%); }
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){ .fx-panel{ transform:none; } }

/* ---------- dock upgrade 1 — live before/after blur preview chip ---------- */
/* miniaturised hero, blurred in sync with the real slider (JS-50 writes --fx-chip-blur on the dock) */
.fx-preview{
  display:flex; align-items:center; gap:8px; margin:2px 0 12px;
}
.fx-preview-chip{
  position:relative; width:52px; height:36px; border-radius:10px;
  overflow:hidden; flex:none;
  border:1px solid var(--glass-border);
  border-top-color:var(--glass-border-bright);
  background:rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.fx-preview-img{
  position:absolute; inset:-2px;               /* -2px so blur edges don't show a seam */
  background-image:url('assets/bg-landscape.jpg');
  background-size:cover;
  background-position:42% center;
  filter:blur(var(--fx-chip-blur, 0px)) saturate(1.1) brightness(.95);
  transition:filter .08s linear;               /* instant-feeling, still smooth */
}
.fx-preview-label{
  min-width:0; white-space:nowrap;
  font-family:var(--ff-mono);
  font-size:10px;                              /* 10px + tight tracking keeps "Blurred" / "Frosted" inside the 106px panel body */
  letter-spacing:.03em;
  text-transform:uppercase;
  color:var(--accent);
  transition:color .2s ease;
}
/* the label's colour shifts at each threshold so the user feels the state change, not just reads it */
.fx-dock[data-fx-state="crystal"] .fx-preview-label{ color:var(--accent); }
.fx-dock[data-fx-state="soft"]    .fx-preview-label{ color:var(--text); }
.fx-dock[data-fx-state="blurred"] .fx-preview-label{ color:var(--text-dim); }
.fx-dock[data-fx-state="frosted"] .fx-preview-label{ color:var(--text-faint); }
@media (prefers-reduced-motion:reduce){
  .fx-preview-img{ transition:none; }
  .fx-preview-label{ transition:none; }
}

/* ---------- dock upgrade 2 — hover / focus try-before-you-buy on colour dots ---------- */
/* the dock previews a hovered colour on its own glass only; the rest of the page stays on the committed theme.
   --preview-accent is the dot's swatch colour, which is very dark on the dark themes, so text is lifted toward white. */
.fx-dock[data-preview="true"] .fx-panel,
.fx-dock[data-preview="true"] .fx-handle{
  background:
    linear-gradient(165deg,
      color-mix(in srgb, var(--preview-accent, var(--accent)) 26%, transparent) 0%,
      rgba(255,255,255,.04) 42%),
    rgba(12,13,16,.44);
  border-top-color:color-mix(in srgb, var(--preview-accent, var(--accent)) 70%, white 30%);
}
.fx-dock[data-preview="true"] .fx-readout,
.fx-dock[data-preview="true"] .fx-preview-label{
  color:color-mix(in srgb, var(--preview-accent, var(--accent)) 45%, white 55%);
}
@media (prefers-reduced-motion:reduce){
  .fx-dock[data-preview="true"] .fx-panel,
  .fx-dock[data-preview="true"] .fx-handle{ transition:none; }
}

/* ---------- dock upgrade 3 — slider groove + glass-bead thumb ---------- */
/* groove: the track reads as a channel cut into the glass. It lives on ::after (behind the slider, z-index -1)
   because ::before already draws the tick marks; 12px wide so it frames the 8px native track instead of hiding under it. */
.fx-track::after{
  content:'';
  position:absolute; left:50%; top:3px; bottom:3px; z-index:-1;
  width:12px; margin-left:-6px; border-radius:999px;
  background:linear-gradient(180deg,
    rgba(0,0,0,.30) 0%, rgba(0,0,0,.16) 100%);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(255,255,255,.08);
  pointer-events:none;
}
/* thumb: real glass bead — specular highlight in the upper-left (hover / active / focus-visible rules above still apply) */
.fx-range::-webkit-slider-thumb{
  background:
    radial-gradient(circle at 34% 30%, #fff 0%, #fff 45%,
                    rgba(255,255,255,.72) 100%);
  box-shadow:
    0 3px 10px rgba(0,0,0,.55),
    0 0 0 6px rgba(var(--accent-rgb),.16),
    inset -1px -1px 1px rgba(0,0,0,.15),
    inset 1px 1px 1px rgba(255,255,255,.9);
}
.fx-range::-moz-range-thumb{
  background:
    radial-gradient(circle at 34% 30%, #fff 0%, #fff 45%,
                    rgba(255,255,255,.72) 100%);
  box-shadow:
    0 3px 10px rgba(0,0,0,.55),
    0 0 0 6px rgba(var(--accent-rgb),.16),
    inset -1px -1px 1px rgba(0,0,0,.15),
    inset 1px 1px 1px rgba(255,255,255,.9);
}
.fx-range:focus-visible::-moz-range-thumb{       /* Firefox had no keyboard ring on the thumb */
  box-shadow:0 3px 10px rgba(0,0,0,.55), 0 0 0 4px rgba(var(--accent-rgb),.5);
}


/* ==================================================================
   [CSS-63]  DARK SURFACE THEMES — Sapphire / Amethyst / Oxblood / Forest / Bronze / Slate / Plum / Teal / Cobalt
   script.js [JS-28] sets data-dark and --surface-rgb / --surface-a on <html>.
   Panels become tinted charcoal or black glass (never white); text stays light.
   !important for the same reason as the Black theme: the blur slider writes an
   inline transparent background on the panels at 0px.
   ================================================================== */
html[data-dark] :is(.hero, .recruiter-bar, .section, .footer-panel, .nav, .mob-drawer){
  background-color:rgba(var(--surface-rgb), var(--surface-a, .7)) !important;
}
html[data-dark] .diag-console{ background:rgba(var(--surface-rgb), .55); }
html[data-dark] ::selection{ background:rgba(255,255,255,.28); }
/* the dot swatches for dark colours need a visible edge on the dark dock */
.accent-dot:is([data-accent="sapphire"],[data-accent="amethyst"],[data-accent="oxblood"],[data-accent="forest"],[data-accent="bronze"],[data-accent="slate"],[data-accent="plum"],[data-accent="teal"],[data-accent="cobalt"]){ border-color:rgba(255,255,255,.7); }


/* ==================================================================
   [CSS-64]  NOW — "what I'm working on right now" cards
   index.html [HTML-26], script.js [JS-51]. The cards are plain
   .glass .glass-tight panels (no new surface treatment); this block only
   adds the grid, the type and the three status chips. Nothing here
   animates, and the entrance comes from the shared [data-reveal] system.
   ================================================================== */
.now-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px; }
.now-card{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:24px; }
.now-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.now-icon{ font-size:28px; line-height:1; }
.now-label{ font-size:17px; margin:0; }
.now-text{ font-size:14.5px; line-height:1.6; color:var(--text-dim); margin:0; }
.now-elapsed{ margin-top:auto; padding-top:4px; font-family:var(--ff-mono); font-size:12px; color:var(--text-faint); }

/* status chips — same pill shape as .lab-status */
.now-chip{ font-family:var(--ff-mono); font-size:11px; text-transform:capitalize; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.now-chip--active{ color:var(--accent); background:var(--accent-dim); }
.now-chip--learning{ color:var(--amber); background:var(--amber-dim); }
.now-chip--reading{ color:var(--text-faint); background:rgba(255,255,255,.05); }

/* same breakpoints as .skills-grid: 3 columns desktop, 2 tablet, 1 phone */
@media (max-width:900px){ .now-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:620px){ .now-grid{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  .now-card{ transition:none; animation:none; }
}


/* ==================================================================
   [CSS-65]  CERTIFICATE HASH VERIFICATION — pill + modal extras
   index.html [HTML-27], script.js [JS-52]. The modal is a .vgate with a
   .vgate-panel inside ([CSS-52]), so the glass surface, the fade/slide and
   the phone bottom-sheet all come from there. This block only adds the
   pill, the hash box, the pending state and the scroll lock. Colours are
   var(--accent) / var(--amber) so the accent switcher keeps working.
   ================================================================== */
html.verify-open{ overflow:hidden; }

/* the seal pill that sits under each certificate's buttons */
.cert-verify-pill{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--ff-mono); font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:6px 13px 6px 10px; border-radius:999px; cursor:pointer;
  color:var(--text); background:rgba(var(--text-rgb),.06);
  border:1px solid rgba(var(--text-rgb),.5);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.cert-verify-pill svg{ flex:none; }
.cert-verify-pill:hover{ background:rgba(var(--text-rgb),.14); border-color:var(--text); transform:translateY(-1px); }
.cert-verify-pill:active{ transform:translateY(0) scale(.96); }
.cert-verify-pill:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }

/* "Certified record": hash not published yet — dashed edge says "on file", solid edge (above) says "hash-sealed" */
.cert-verify-pill.is-pending{ border-style:dashed; border-color:rgba(var(--text-rgb),.45); }
.verify-panel.is-pending .verify-pending{ color:var(--text); }

/* the SHA-256 itself — same field look as .vgate-input, monospace, one click selects it all */
.verify-hash{
  display:block; margin:0 0 12px; padding:12px 13px; border-radius:12px;
  font-family:var(--ff-mono); font-size:12.5px; line-height:1.55;
  color:var(--text); background:transparent; border:1px solid rgba(var(--text-rgb),.3);
  word-break:break-all; -webkit-user-select:all; user-select:all;
}

/* .cert-btn is built for links; these two are <button>s, so give them a hand cursor and a thumb-friendly size */
.verify-panel .cert-btn{ cursor:pointer; font-size:12.5px; padding:9px 16px; }

@media (prefers-reduced-motion:reduce){
  .cert-verify-pill{ transition:none; }
  .cert-verify-pill:hover, .cert-verify-pill:active{ transform:none; }
  .verify-modal .vgate-scrim, .verify-modal .vgate-panel{ transition:none; }
  .verify-modal .vgate-panel{ translate:0 0; scale:1; }
}

/* =====================================================================
   [CSS-66]  PRINT-FRIENDLY CV — Ctrl/⌘+P turns the page into a clean,
   black-on-white, single-column CV. CSS only; delete this whole block
   (and the [HTML-28] header) to remove the feature.
   ===================================================================== */
.print-only{ display:none; }

@media print{
  /* hide all interactive / decorative chrome */
  .nav, .mob-drawer, .nav-scrim, .side-rail, .fx-dock,
  .bg-field, .bg-grain, .scroll-progress,
  .cmdk, .cmdk-toast, .vgate, .vview, .tk-modal, .qr-zoom,
  #verifyModal, .cmdk-tip, #toolkit, #lab, #diagnostics, #triage,
  #status, #now, #playbook, .cert-actions, .cert-verify-pill,
  .scroll-scrub-hint, .cp-liquid, .fx-bloom, button, .btn{
    display:none !important;
  }

  body{ background:#fff !important; color:#000 !important; font-size:11pt; margin:2cm; }

  /* kill glass */
  .glass, .glass-clear, .section, .hero, .recruiter-bar,
  .footer-panel, .contact-panel.glass{
    background:#fff !important; border:1px solid #ccc !important;
    box-shadow:none !important; backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important; color:#000 !important;
    border-radius:0 !important; clip-path:none !important;
  }

  /* all text black */
  *{ color:#000 !important; text-shadow:none !important; }

  /* single-column reflow */
  .hero-grid, .about-grid, .contact-grid, .skills-grid, .cert-grid,
  .award-grid, .refs-grid, .now-grid, .proof-grid, .case-body-inner,
  .tk-cols, .tk-facts{
    display:block !important;
  }

  /* scroll-reveal content must be visible on paper */
  [data-reveal], [data-reveal].is-visible{
    opacity:1 !important; transform:none !important; transition:none !important;
  }

  /* page breaks */
  #experience, #education, #certifications, #contact{
    page-break-before:always; break-before:page;
  }
  .tl-item, .cert-card, .edu-card, .case-card, .now-card{
    page-break-inside:avoid; break-inside:avoid;
  }

  /* show where external links go */
  a[href^="http"]:not([href*="sajidmk.com"])::after{
    content:" (" attr(href) ")"; font-size:.85em; color:#555 !important;
    word-break:break-all;
  }

  /* print-only CV header */
  .print-only{ display:block !important; }
  .print-cv-header{ text-align:center; margin-bottom:1.5cm; border-bottom:1px solid #ccc; padding-bottom:.5cm; }
  .print-cv-header h1{ font-size:22pt; margin:0 0 .2cm; }
  .print-title{ font-size:12pt; color:#333 !important; margin:0 0 .3cm; }
  .print-contact{ font-size:10pt; color:#555 !important; margin:0; }
}

/* ==================================================================
   [CSS-67]  TERMINAL — interactive shell panel (HTML-29, JS-53)
   The surface is the normal .glass material; nothing new is invented.
   ================================================================== */
.term-window{ margin-top:28px; max-width:880px; cursor:text; }
.term-window:focus-within{ border-color:var(--accent); }

.term-titlebar{
  display:flex; align-items:center; gap:8px; padding:11px 16px;
  border-bottom:1px solid var(--glass-border);
  font-family:var(--ff-mono); font-size:12px; color:var(--text-faint);
}
/* OS window-chrome colours — deliberately NOT theme colours */
.term-dot{ width:12px; height:12px; border-radius:50%; flex:none; }
.term-dot--red{ background:#ff5f57; }
.term-dot--amber{ background:#febc2e; }
.term-dot--green{ background:#28c840; }
.term-title{ flex:1; text-align:center; margin-right:52px; /* 3 dots + 2 gaps, keeps the title centred */ }

.term-out{
  font-family:var(--ff-mono); font-size:13.5px; line-height:1.6; color:var(--text);
  max-height:420px; overflow-y:auto; overscroll-behavior:contain;
  background:transparent; padding:18px;
}
.term-out:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

.term-line{ display:block; white-space:pre-wrap; word-break:break-word; }
.term-ok{ color:var(--accent); }
.term-warn{ color:var(--amber); }
.term-muted{ color:var(--text-faint); }
.term-err{ color:#ff9d9d; }

.term-link{
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
  transition:opacity .15s ease; cursor:pointer;
}
.term-link:hover{ opacity:.8; }
.term-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; }

.term-prompt-row{
  display:flex; align-items:center; gap:8px; padding:0 18px 16px;
  font-family:var(--ff-mono); font-size:13.5px; line-height:1.6;
}
.term-prompt{ color:var(--accent); font-family:var(--ff-mono); white-space:nowrap; }
.term-input{
  flex:1; min-width:0; background:transparent; border:0; padding:0; margin:0;
  font:inherit; color:inherit; outline:none; caret-color:var(--accent);
}

/* 16px inputs stop iOS Safari from zooming the page when the field gains focus */
@media (max-width:820px){
  .term-out, .term-prompt-row, .term-input{ font-size:16px; }
}
@media (prefers-reduced-motion:reduce){
  .term-link{ transition:none; }
  .term-out{ scroll-behavior:auto; }
}

/* ==================================================================
   [CSS-68]  SKILLS RADAR — "orbit gauge" (concentric segmented rings) above .skills-grid
   The toggle button gets the existing .arsenal-tab pill style via JS
   (see [JS-54]); nothing new is invented for it here.
   ================================================================== */
.skills-radar-wrap{ margin-bottom:40px; padding:26px; }
.radar-h3{ font-size:clamp(20px,3vw,26px); margin:0 0 16px; }
.radar-toolbar{ display:flex; flex-wrap:wrap; gap:8px; }
.radar-toggle{ cursor:pointer; }

.skills-radar{ position:relative; max-width:560px; margin:20px auto 0; }
.skills-radar svg{ display:block; width:100%; height:auto; overflow:visible; color:var(--text); }

/* orbit gauge: every ring = one skill, 5 segments = 5 levels */
.radar-hit{ fill:none; stroke:transparent; stroke-width:24; pointer-events:stroke; }
.radar-track{ fill:none; stroke:currentColor; stroke-width:15; stroke-linecap:round; opacity:.1; }
.radar-fill{ fill:none; stroke:currentColor; stroke-width:15; stroke-linecap:round; }
/* learning / not certified: the same bar, drawn as a row of dots instead of a solid pill */
.radar-axis[data-certified="false"] .radar-fill{ stroke-width:5; stroke-dasharray:.01 9.5; opacity:.9; }
.radar-label{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.04em; fill:currentColor; opacity:.78; pointer-events:none; }
.radar-node{ pointer-events:none; }
.radar-dot{ fill:rgba(10,12,13,.82); stroke:currentColor; stroke-width:1.6; cursor:pointer; outline:none; pointer-events:auto; }
.radar-dot:focus-visible{ stroke-width:3; }
.radar-num{ font-family:var(--ff-mono); font-size:11px; font-weight:700; fill:currentColor; pointer-events:none; }
.radar-core-num{ font-family:var(--ff-mono); font-size:30px; font-weight:700; fill:currentColor; }
.radar-core-cap{ font-family:var(--ff-mono); font-size:8.5px; letter-spacing:.18em; fill:currentColor; opacity:.6; }

/* hover / focus: the chosen ring lights up, the others step back */
.radar-axis.is-active .radar-track{ opacity:.2; }
.radar-axis.is-active .radar-dot{ stroke-width:2.6; }
.has-active .radar-axis:not(.is-active){ opacity:.32; }

/* "Show only certified" */
.radar-hide-noncert [data-certified="false"]{ opacity:.18; }

/* motion only where the user allows it */
@media (prefers-reduced-motion:no-preference){
  .radar-axis{ transition:opacity .25s ease; }
  .radar-track, .radar-fill, .radar-node, .radar-label{ transition:opacity .25s ease; }
  .radar-pre .radar-fill, .radar-pre .radar-track{ opacity:0; }
  .radar-pre .radar-node, .radar-pre .radar-label{ opacity:0; }
  .radar-in .radar-fill{ animation:radarBar .55s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--d) * 28ms); }
  .radar-in .radar-track{ animation:radarTrack .5s ease both; animation-delay:calc(var(--d) * 28ms); }
  .radar-in .radar-node, .radar-in .radar-label{ animation:radarNode .5s ease both; animation-delay:calc(var(--i) * 110ms + 450ms); }
}
@keyframes radarBar{   from{ opacity:0; } to{ opacity:1; } }
@keyframes radarTrack{ from{ opacity:0; } to{ opacity:.1; } }
@keyframes radarNode{  from{ opacity:0; } to{ opacity:1; } }

/* tooltip */
.radar-tip{
  position:absolute; left:0; top:0; z-index:5;
  width:max-content; max-width:220px; padding:10px 12px;
  font-size:12.5px; line-height:1.45; color:var(--text);
  border-radius:14px;
  background:rgba(10,12,14,.86);                       /* floating tip: keeps a backing so it reads over any content */
  border:1px solid var(--glass-border); border-top-color:var(--glass-border-bright);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-ambient);
  pointer-events:none; opacity:0; visibility:hidden;
}
.radar-tip.is-on{ opacity:1; visibility:visible; }
.radar-tip-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.radar-tip-head b{ font-weight:600; }
.radar-tip-val{ font-family:var(--ff-mono); color:var(--accent); }
.radar-badge{
  display:inline-block; margin:6px 0 4px; padding:2px 8px; border-radius:999px;
  font-family:var(--ff-mono); font-size:11px;
  border:1px solid var(--glass-border); color:var(--text-faint);
}
.radar-badge.is-cert{ color:var(--accent); border-color:rgba(var(--accent-rgb),.45); background:var(--accent-dim); }
.radar-tip-note{ color:var(--text-dim); }

/* legend */
.radar-legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px;
  margin:18px 0 0; font-size:12.5px; color:var(--text-faint);
}
.radar-key{ display:inline-flex; align-items:center; gap:7px; }
.radar-key-dot{ width:14px; height:7px; border-radius:99px; background:var(--text); }
.radar-key-dot.is-hollow{ width:14px; height:7px; border-radius:0; background:radial-gradient(circle, var(--text) 1.6px, transparent 2px) 0 50% / 5px 7px repeat-x; border:0; }

/* ==================================================================
   [CSS-69]  SECTION HEADINGS — bigger type, numbered label, word-by-word
   reveal with a one-time accent light sweep, outlined ghost number.
   JS ([JS-55]) splits each h2 into .sh-w > .sh-wi words and adds .sh-in
   when it scrolls into view. No glow: the sweep is a colour pass, not a
   text-shadow. Without JS (or with reduced motion) everything is visible.
   ================================================================== */
/* Numbers come from [JS-55] as data-sec on the label (and its h2). CSS counters
   were dropped: content-visibility:auto (see "Speed 3") isolates counter scope,
   so every deferred section restarted at 01, and hidden/pending sections
   would otherwise leave gaps. */

/* ---- label: number · dot · text · drawn line ---- */
.section-label{
  gap:12px; margin-bottom:18px;
  font-size:14px; letter-spacing:.16em; text-transform:uppercase;
}
.section-label[data-sec]::before{
  content:attr(data-sec);
  color:var(--text-faint); letter-spacing:.08em;
}
.section-label::after{
  content:''; flex:none; height:1px; width:clamp(60px,18vw,200px);
  background:linear-gradient(90deg, currentColor, transparent);
  opacity:.55; transform-origin:left center;
}
.section-label.sh-pre{ opacity:0; transform:translateY(8px); }
.section-label.sh-pre::after{ transform:scaleX(0); }
.section-label.sh-pre.sh-in{ opacity:1; transform:none; }
.section-label.sh-pre.sh-in::after{ transform:scaleX(1); }

/* ---- the heading itself ---- */
.section h2{
  font-size:clamp(34px,5.2vw,64px); line-height:1.04; max-width:900px;
  letter-spacing:-.035em; font-weight:700;
}
.contact-panel h2{ font-size:clamp(32px,4vw,48px); line-height:1.06; letter-spacing:-.03em; font-weight:700; }
.section-intro{ font-size:17px; margin-top:20px; }

/* outlined ghost number sitting behind the heading */
.section > .container > .section-label + h2[data-sec]::before{
  content:attr(data-sec);
  position:absolute; right:0; top:50%; z-index:-2;
  transform:translateY(-50%);
  font-family:var(--ff-mono); font-size:2.4em; font-weight:700; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(var(--text-rgb),.16);
  pointer-events:none; user-select:none; white-space:nowrap;
}

/* ---- word split ---- */
.sh-split{ text-wrap:balance; }
.sh-w{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding:.08em .04em .16em; margin:-.08em -.04em -.16em;
}
.sh-wi{
  display:inline-block;
  background:linear-gradient(105deg, var(--text) 40%, var(--accent) 50%, var(--text) 60%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.sh-split:not(.sh-in) .sh-wi{ transform:translateY(108%); }
.sh-split.sh-in .sh-wi{
  transform:none;
  transition:transform .85s var(--sp-ease,cubic-bezier(.16,.84,.44,1)) calc(.1s + var(--i,0) * 70ms);
  animation:shSweep 1.5s ease-out calc(.35s + var(--i,0) * 70ms) both;
}
@keyframes shSweep{
  from{ background-position:100% 0; }
  to{   background-position:0 0; }
}
/* reflection + ghost number fade in after the words land */
.sh-split::after, .sh-split::before{ transition:opacity .9s ease .5s; }
.sh-split:not(.sh-in)::after, .sh-split:not(.sh-in)::before{ opacity:0; }

/* light "ink" panel (#toolkit): plain ink colour, no sweep */
#toolkit .sh-wi{ background:none; -webkit-text-fill-color:currentColor; color:var(--tk-ink); animation:none !important; }
#toolkit .section > .container > .section-label + h2[data-sec]::before,
#toolkit h2::before{ -webkit-text-stroke-color:rgba(0,0,0,.14); }

@media (max-width:700px){
  .section > .container > .section-label + h2[data-sec]::before{ display:none; }
  .section-label{ font-size:13px; letter-spacing:.12em; }
}
@media (prefers-reduced-motion:reduce){
  .section-label.sh-pre, .section-label.sh-pre::after{ opacity:1; transform:none; }
  .sh-split:not(.sh-in) .sh-wi{ transform:none; }
  .sh-split.sh-in .sh-wi{ transition:none; animation:none; }
  .sh-split::after, .sh-split::before{ transition:none; }
  .sh-split:not(.sh-in)::after, .sh-split:not(.sh-in)::before{ opacity:1; }
  .sh-wi{ background:none; -webkit-text-fill-color:currentColor; color:inherit; }
}

/* ==================================================================
   [CSS-70]  TRANSPARENT GLASS — every panel, card, chip and the dock itself has NO fill, NO colour tint and NO
   sheen; only the thin border edge remains, so the photo shows straight through. The Clear/Blurred slider still
   controls the backdrop BLUR of the big panels. Pop-ups (command menu, viewer, gate, modals) keep a backing so
   they stay readable over the page. Site-wide text colour comes from the dock dots ([JS-50] -> --text*).
   ================================================================== */
:root{
  --glass-floor:0; --glass-ceil:0; --glass-veil:0;
  --veil-card:transparent; --glass-tint:transparent; --glass-tint-strong:transparent;
  --glass-surface:none; --glass-surface-strong:none;
}
:is(.nav, .mob-drawer, .hero, .section, .recruiter-bar, .footer-panel,
    .glass, .glass-clear, .glass-tight,
    .btn, .recruiter-link, .cf-submit,
    .cs-item, .tl-item, .bd-card, .tl-quote, .tl-subroles, .tk-card, .tk-note, .gv-row,
    .diag-console, .geo-vault, .status-strip, .hero-photo-tag,
    .fx-panel, .fx-handle, .fx-preview-chip, .fx-bold){
  background:none !important;
  background-color:transparent !important;
}
/* sheen layers that make glass look like glass */
:is(.glass, .glass-clear, .glass-tight)::before,
:is(.glass, .glass-clear, .glass-tight)::after,
.fx-panel::before, .fx-panel::after, .fx-handle::before{ background:none !important; }
/* inner highlights / dark insets go; the outer edge stays */
:is(.glass, .glass-clear, .glass-tight, .nav, .mob-drawer){ box-shadow:none !important; }
/* themes can never tint panels */
html[data-dark] :is(.hero, .recruiter-bar, .section, .footer-panel, .nav, .mob-drawer),
html[data-theme="black"] :is(.hero, .recruiter-bar, .section, .footer-panel, .nav, .mob-drawer, .focus-slider){
  background:none !important; background-color:transparent !important;
}
html[data-dark] .diag-console, html[data-theme="black"] .diag-console{ background:transparent !important; }
/* chips and form fields: no fill either (their borders stay) */
.skill-tags > *, main :is(input, textarea, select){ background:none !important; background-color:transparent !important; }

/* ---- site-wide font colour: labels and links that were hard-coded white/accent/blue-grey now follow it ----
   (text on solid accent fills — the white Run buttons, tk-primary — keeps its dark on-accent colour for contrast) */
:root{ --amber:var(--text-dim); --amber-dim:rgba(var(--text-rgb),.12); }
:is(.nav-link, .nav-brand, .nav-cta, .section-label, .highlight-card .val, .status-item .val, .cert-btn, .cert-btn.primary,
    .cert-badge.verified, .bd-card-plus, .recruiter-link, .btn, .btn-arrow, .proof-stat .val, .gv-pill, .tk-cursor):not(:hover):not(:focus-visible):not(.tk-primary){
  color:var(--text);
}
/* the Toolkit panel has its own ink variables — tie them to the same site-wide colour, and drop its fills */
#toolkit{
  --tk-ink:var(--text); --tk-dim:var(--text-dim); --tk-line:rgba(var(--text-rgb),.26);
  --tk-card:transparent; --tk-soft:transparent; --tk-field:transparent; --tk-btn:transparent; --tk-btn-h:rgba(var(--text-rgb),.12);
}
:is(.bd-eyebrow, .lab-status, .edu-result, .now-chip, .status-chip, .radar-toggle, .term-prompt, .section-intro, .tk-seo,
    .scroll-scrub-hint, .scroll-scrub-hint *, .gv-note a, .cf-submit-text, .tk-badge):not(:hover):not(:focus-visible){ color:var(--text); }

/* ==================================================================
   [CSS-71]  CONTACT + FOOTER JOIN — one continuous glass panel
   Contact's bottom corners and the footer's top corners are squared off and the double border becomes a single
   hairline divider, so there is no notch or gap between the two panels.
   ================================================================== */
#contact{ margin-bottom:0 !important; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom-width:0; }
footer{ margin-top:0; padding-top:0; }
.footer-panel{
  margin-top:0;
  border-top-left-radius:0; border-top-right-radius:0;
  border-top:1px solid rgba(var(--text-rgb),.22);
}

/* footer lexicon: four coined words, each with a one-line meaning (text colour follows the dock dots) */
.footer-lexicon{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:22px 28px;
  margin:0 0 20px; padding:0 0 22px; border-bottom:1px solid rgba(var(--text-rgb),.16);
}
.footer-lexicon > div{ margin:0; }
.footer-lexicon dt{
  font-family:var(--ff-display); font-style:italic; font-weight:600; font-size:21px; letter-spacing:.01em;
  color:var(--text); margin:0 0 6px;
}
.footer-lexicon dt::after{
  content:''; display:block; width:26px; height:1px; margin-top:7px; background:currentColor; opacity:.5;
}
.footer-lexicon dd{ margin:0; font-size:13px; line-height:1.55; color:var(--text-dim); }
.footer-lexicon dd i{ font-family:var(--ff-mono); font-style:normal; font-size:11px; letter-spacing:.08em; opacity:.7; margin-right:4px; }
@media (max-width:900px){ .footer-lexicon{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px){ .footer-lexicon{ grid-template-columns:1fr; text-align:left; } }

/* [CSS-CMS] CLIENT WORK + PRIVATE ADMIN ACCESS — keeps existing Liquid Glass */
.footer-row .footer-admin-link{display:inline-flex;align-items:center;gap:.4em;padding:8px 14px;border:1px solid var(--glass-border);border-radius:999px;background:rgba(255,255,255,.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);font-size:12px;letter-spacing:.025em;transition:background .2s,transform .2s}
.footer-row .footer-admin-link:hover,.footer-row .footer-admin-link:focus-visible{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.client-case{position:relative;isolation:isolate}
.client-case::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(125deg,rgba(211,174,95,.06),transparent 48%)}
.client-case .client-demo-link{display:inline-flex;margin-top:18px}
#cmsExtraProjects:empty{display:none}
#cmsExtraProjects{display:contents}
@media (prefers-reduced-motion:reduce){.footer-row .footer-admin-link{transition:none}}