/* ============================================================
   STYLE.CSS — Alvin Silva site, shared stylesheet
   Combines: design tokens, reset/layout/buttons, header/nav/
   footer/accessibility/consent components.

   STATUS (verified 2026-08-04): this file is currently UNUSED.
   No <link> tag anywhere in this repository references it — I
   checked with a precise `href="style.css"` search across every
   .html file and found zero matches. index.html and portfolio.html
   were clearly forked from this file at some point (their inline
   :root token blocks are still byte-identical to the ones below,
   e.g. --navy: #f4f6fb) but now each carries its own full inline
   <style> block instead of linking here, so the two have already
   started to drift independently. Before deleting or re-linking
   this file, decide one of:
     (a) delete it — the two pages' inline styles are now the real
         source of truth, or
     (b) actually wire <link rel="stylesheet" href="style.css"> into
         both pages and migrate their shared tokens/components back
         out of the inline blocks, to stop the drift and cut ~400
         duplicated lines per page.
   Until one of those happens, do not assume edits here affect the
   live site — they currently don't.
   ============================================================ */

/* ============================================================
   TOKENS.CSS — Alvin Silva brand × glass-morphism design system
   Shared design tokens for index.html + portfolio.html
   Cascade: :root defaults -> OS prefers-color-scheme -> explicit
   html[data-theme] attribute (always wins, set by in-page toggle)
   ============================================================ */
:root {
  /* ---- LIGHT THEME — default / fallback (no prefers-color-scheme
     support, and print) ---- */
  --navy:        #f4f6fb;
  --navy-2:      #eef1f8;
  --card:        #ffffff;
  --blue:        #0057c2;
  --sky:         #0069a8;
  --gold:        #8a6d00;
  --green:       #0f7d51;
  --violet:      #5b34c9;
  --red:         #c62828;
  --link:        #0052cc;   /* dedicated, WCAG-AA link color, distinct from decorative accent colors */
  --link-hover:  #003d99;
  --text:        #0d1224;
  --text-2:      #2b3350;
  --text-3:      rgba(20,26,46,.72);
  --glass:       linear-gradient(135deg, rgba(10,20,60,.06), rgba(10,20,60,.025));
  --glass-strong:linear-gradient(135deg, rgba(255,255,255,.94), rgba(240,244,252,.9));
  --line:        rgba(10,20,60,.16);
  --line-gold:   rgba(140,110,0,.4);
  --divider:     rgba(10,20,60,.12);
  --radius:      14px;
  --accent:      #0069a8;
  --accent-soft: rgba(0,105,168,.12);
  --on-gold:     #ffffff;
  --header-bg:       rgba(244,246,251,.9);
  --header-border:   rgba(0,102,255,.3);
  --footer-bg:       rgba(255,255,255,.94);
  --footer-border:   rgba(0,102,255,.25);
  --mobile-menu-bg:  linear-gradient(160deg,#ffffff,#eef1fb);
  --input-bg:        rgba(255,255,255,.85);
  --pill-bg:         rgba(90,110,160,.1);
  --pill-bg-hover:   rgba(90,110,160,.18);
  --doc-cover-bg:    #f4f6fb;
  --font-display:'Montserrat', system-ui, sans-serif;
  --font-body:   'Poppins', system-ui, sans-serif;
  --font-cond:   'Roboto Condensed', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, monospace;
  --shadow-1:    0 8px 32px rgba(20,30,60,.10), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-2:    0 18px 48px rgba(20,30,60,.14), 0 6px 18px rgba(0,102,255,.12);
  --ease:        cubic-bezier(.22,.8,.28,1);
  --body-bg:     radial-gradient(1200px 600px at 85% -5%, rgba(0,102,255,.08), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(0,191,255,.06), transparent 55%), linear-gradient(160deg, #f4f6fb 0%, #eef1fb 48%, #e9ecf7 100%);
}

/* ---- Dark theme, applied automatically when the OS/browser prefers dark ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --navy:#0a0e27; --navy-2:#0d1224; --card:#1a1f3a;
    --blue:#0066FF; --sky:#00BFFF; --gold:#FFD700; --green:#34D399; --violet:#A78BFA; --red:#F87171;
    --link:#4db8ff; --link-hover:#8ad4ff;
    --text:#ffffff; --text-2:#e0e6ed; --text-3:rgba(224,230,237,.62);
    --glass:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    --glass-strong:linear-gradient(135deg, rgba(10,20,60,.62), rgba(10,14,39,.78));
    --line:rgba(255,255,255,.13); --line-gold:rgba(255,215,0,.28); --divider:rgba(255,255,255,.09);
    --accent:#00BFFF; --accent-soft:rgba(0,191,255,.14); --on-gold:#0a0e27;
    --header-bg:rgba(10,14,39,.86); --header-border:rgba(0,102,255,.45);
    --footer-bg:rgba(6,9,24,.96); --footer-border:rgba(0,102,255,.4);
    --mobile-menu-bg:linear-gradient(160deg,#0d1430,#070b1d);
    --input-bg:rgba(10,16,42,.7); --pill-bg:rgba(255,255,255,.06); --pill-bg-hover:rgba(255,255,255,.12);
    --doc-cover-bg:#1a1f3a;
    --shadow-1:0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
    --shadow-2:0 18px 48px rgba(0,0,0,.55), 0 6px 18px rgba(0,102,255,.25);
    --body-bg:radial-gradient(1200px 600px at 85% -5%, rgba(0,102,255,.20), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(0,191,255,.10), transparent 55%), linear-gradient(160deg, #0a0e27 0%, #0b1030 48%, #070b1d 100%);
  }
}

/* ---- Explicit manual overrides (in-page theme toggle sets data-theme;
   always wins over both the default and the OS media-query above) ---- */
html[data-theme="dark"] {
  --navy:#0a0e27; --navy-2:#0d1224; --card:#1a1f3a;
  --blue:#0066FF; --sky:#00BFFF; --gold:#FFD700; --green:#34D399; --violet:#A78BFA; --red:#F87171;
  --link:#4db8ff; --link-hover:#8ad4ff;
  --text:#ffffff; --text-2:#e0e6ed; --text-3:rgba(224,230,237,.62);
  --glass:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  --glass-strong:linear-gradient(135deg, rgba(10,20,60,.62), rgba(10,14,39,.78));
  --line:rgba(255,255,255,.13); --line-gold:rgba(255,215,0,.28); --divider:rgba(255,255,255,.09);
  --accent:#00BFFF; --accent-soft:rgba(0,191,255,.14); --on-gold:#0a0e27;
  --header-bg:rgba(10,14,39,.86); --header-border:rgba(0,102,255,.45);
  --footer-bg:rgba(6,9,24,.96); --footer-border:rgba(0,102,255,.4);
  --mobile-menu-bg:linear-gradient(160deg,#0d1430,#070b1d);
  --input-bg:rgba(10,16,42,.7); --pill-bg:rgba(255,255,255,.06); --pill-bg-hover:rgba(255,255,255,.12);
  --doc-cover-bg:#1a1f3a;
  --shadow-1:0 8px 32px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
  --shadow-2:0 18px 48px rgba(0,0,0,.55), 0 6px 18px rgba(0,102,255,.25);
  --body-bg:radial-gradient(1200px 600px at 85% -5%, rgba(0,102,255,.20), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(0,191,255,.10), transparent 55%), linear-gradient(160deg, #0a0e27 0%, #0b1030 48%, #070b1d 100%);
}
html[data-theme="light"] {
  --navy:#f4f6fb; --navy-2:#eef1f8; --card:#ffffff;
  --blue:#0057c2; --sky:#0069a8; --gold:#8a6d00; --green:#0f7d51; --violet:#5b34c9; --red:#c62828;
  --link:#0052cc; --link-hover:#003d99;
  --text:#0d1224; --text-2:#2b3350; --text-3:rgba(20,26,46,.72);
  --glass:linear-gradient(135deg, rgba(10,20,60,.06), rgba(10,20,60,.025));
  --glass-strong:linear-gradient(135deg, rgba(255,255,255,.94), rgba(240,244,252,.9));
  --line:rgba(10,20,60,.16); --line-gold:rgba(140,110,0,.4); --divider:rgba(10,20,60,.12);
  --accent:#0069a8; --accent-soft:rgba(0,105,168,.12); --on-gold:#ffffff;
  --header-bg:rgba(244,246,251,.9); --header-border:rgba(0,102,255,.3);
  --footer-bg:rgba(255,255,255,.94); --footer-border:rgba(0,102,255,.25);
  --mobile-menu-bg:linear-gradient(160deg,#ffffff,#eef1fb);
  --input-bg:rgba(255,255,255,.85); --pill-bg:rgba(90,110,160,.1); --pill-bg-hover:rgba(90,110,160,.18);
  --doc-cover-bg:#f4f6fb;
  --shadow-1:0 8px 32px rgba(20,30,60,.10), inset 0 1px 0 rgba(255,255,255,.6);
  --shadow-2:0 18px 48px rgba(20,30,60,.14), 0 6px 18px rgba(0,102,255,.12);
  --body-bg:radial-gradient(1200px 600px at 85% -5%, rgba(0,102,255,.08), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(0,191,255,.06), transparent 55%), linear-gradient(160deg, #f4f6fb 0%, #eef1fb 48%, #e9ecf7 100%);
}

/* ---- Persona accent colors (index.html only — harmless no-ops on
   portfolio.html, which never sets data-persona) ---- */
html[data-persona="government"]   { --accent:#FFD700; --accent-soft:rgba(255,215,0,.13); }
html[data-persona="humanitarian"] { --accent:#34D399; --accent-soft:rgba(52,211,153,.13); }
html[data-persona="private"]      { --accent:#60A5FA; --accent-soft:rgba(96,165,250,.14); }
html[data-persona="academic"]     { --accent:#A78BFA; --accent-soft:rgba(167,139,250,.14); }
html[data-theme="light"][data-persona="government"]   { --accent:#8a6d00; --accent-soft:rgba(138,109,0,.12); }
html[data-theme="light"][data-persona="humanitarian"] { --accent:#0f7d51; --accent-soft:rgba(15,125,81,.12); }
html[data-theme="light"][data-persona="private"]      { --accent:#1d5fd1; --accent-soft:rgba(29,95,209,.12); }
html[data-theme="light"][data-persona="academic"]     { --accent:#5b34c9; --accent-soft:rgba(91,52,201,.12); }

/* ============================================================
   BASE.CSS — reset, typography, layout primitives, buttons
   Shared for index.html + portfolio.html.
   ============================================================ */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%; --a11y-scale:1; }
body {
  font-family:var(--font-body); font-weight:400; line-height:1.65; font-size:calc(1rem * var(--a11y-scale,1));
  color:var(--text);
  background: var(--body-bg);
  background-attachment:fixed;
  min-height:100vh; overflow-x:hidden;
}
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url('assets/logo-512.png') center/ min(78vw,560px) no-repeat;
  opacity:.045;
}
main, header, footer { position:relative; z-index:1; }
img { max-width:100%; display:block; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.15; letter-spacing:-.01em; }
a { color:var(--link); }
a:hover { color:var(--link-hover); }
button { font-family:inherit; }
::selection { background:rgba(255,215,0,.35); color:var(--text); }
::-webkit-scrollbar { width:9px; height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(100,140,200,.35); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:rgba(100,140,200,.55); }
:focus-visible { outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }

.skip-link {
  position:absolute; top:-48px; left:8px; z-index:12000;
  background:var(--gold); color:var(--on-gold); font-family:var(--font-display); font-weight:700;
  padding:.6rem 1.1rem; border-radius:0 0 10px 10px; text-decoration:none; transition:top .25s;
}
.skip-link:focus { top:0; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- Layout primitives — single column, stacked, mobile-first ---- */
.wrap { width:100%; max-width:1280px; margin:0 auto; padding:0 clamp(1rem,4vw,2.5rem); }
.section { padding:clamp(3.5rem,8vw,6rem) 0; position:relative; }
.section-alt { background:linear-gradient(180deg, var(--navy-2) 0%, transparent 100%); opacity:.97; border-block:1px solid var(--divider); }
.kicker {
  font-family:var(--font-cond); font-size:.8rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.9rem;
  display:flex; align-items:center; gap:.7rem; justify-content:center;
}
.kicker::before,.kicker::after { content:''; height:1px; width:34px; background:linear-gradient(90deg,transparent,var(--accent)); }
.kicker::after { transform:scaleX(-1); }
.section-title {
  font-size:clamp(1.7rem,4.6vw,2.6rem); font-weight:800; text-align:center; margin-bottom:.9rem;
}
.section-title .hl, .grad-text {
  background:linear-gradient(92deg, var(--sky) 0%, var(--blue) 45%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.section-sub { text-align:center; color:var(--text-3); max-width:720px; margin:0 auto clamp(2rem,5vw,3.2rem); font-weight:300; font-size:clamp(.95rem,2.4vw,1.05rem); }

.glass { background:var(--glass); border:1px solid var(--line); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); box-shadow:var(--shadow-1); }
.glass-strong { background:var(--glass-strong); border:1px solid var(--line); backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px) saturate(180%); box-shadow:var(--shadow-1); }
.glass-gold { background:linear-gradient(135deg, rgba(255,215,0,.14), rgba(255,215,0,.04)); border:1px solid var(--line-gold); backdrop-filter:blur(14px); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-display); font-weight:700; font-size:.92rem; letter-spacing:.03em;
  padding:.85rem 1.7rem; border-radius:999px; border:2px solid transparent; cursor:pointer;
  text-decoration:none; transition:transform .25s var(--ease), box-shadow .25s, background .25s, color .25s;
  position:relative; overflow:hidden; min-height:48px;
}
.btn svg { width:17px; height:17px; flex:none; }
.btn-primary { background:linear-gradient(135deg, var(--blue), var(--sky)); color:#fff; box-shadow:0 8px 24px rgba(0,102,255,.35); }
.btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg, var(--sky), var(--gold)); opacity:0; transition:opacity .3s; }
.btn-primary span,.btn-primary svg { position:relative; z-index:1; }
.btn-primary:hover::after { opacity:1; }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,191,255,.45); }
.btn-gold { background:transparent; color:var(--gold); border-color:var(--gold); }
.btn-gold:hover { background:var(--gold); color:var(--on-gold); transform:translateY(-3px); box-shadow:0 12px 30px rgba(255,215,0,.35); }
.btn-ghost { background:var(--pill-bg); color:var(--text); border-color:var(--line); }
.btn-ghost:hover { background:var(--pill-bg-hover); transform:translateY(-2px); }
.btn-sm { padding:.5rem 1.05rem; font-size:.8rem; min-height:40px; }

.chip {
  display:inline-flex; align-items:center; gap:.45rem; padding:.42rem 1rem; border-radius:999px;
  font-family:var(--font-cond); font-size:.82rem; font-weight:600; letter-spacing:.06em;
  border:1px solid var(--line); background:var(--pill-bg); color:var(--text-2);
}

/* ---- Theme toggle (sun/moon switch in header) ---- */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem; cursor:pointer;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:var(--pill-bg); color:var(--text); flex:none; transition:.25s;
}
.theme-toggle:hover { border-color:var(--gold); transform:translateY(-2px); }
.theme-toggle svg { width:19px; height:19px; }
.theme-toggle .icon-moon { display:block; }
.theme-toggle .icon-sun { display:none; }
html[data-theme="light"] .theme-toggle .icon-moon { display:none; }
html[data-theme="light"] .theme-toggle .icon-sun { display:block; }
.mm-theme-row { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.6rem; margin-top:.4rem; border-top:1px solid var(--divider); }

/* ---- Tooltip (used for inline glossary terms) ---- */
.tooltip { position:relative; display:inline-block; cursor:help; border-bottom:2px dotted var(--sky); }
.tooltip .tt {
  visibility:hidden; opacity:0; width:min(300px, 84vw);
  position:absolute; z-index:400; bottom:calc(100% + 10px); left:50%; transform:translate(-50%, 6px);
  background:rgba(8,12,32,.97); border:1px solid var(--line); border-radius:12px;
  padding:.85rem 1rem; font-family:var(--font-body); font-size:.85rem; line-height:1.55; color:#fff;
  box-shadow:0 14px 40px rgba(0,0,0,.65), 0 4px 14px rgba(0,102,255,.3);
  transition:opacity .25s, transform .25s, visibility .25s; pointer-events:none; text-align:left; font-weight:300;
}
.tooltip .tt::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:rgba(8,12,32,.97); }
.tooltip:hover .tt, .tooltip:focus .tt, .tooltip:focus-within .tt, .tooltip.open .tt {
  visibility:visible; opacity:1; transform:translate(-50%, 0); pointer-events:auto;
}
.tooltip .tt strong { color:#FFD700; font-weight:600; display:block; margin-bottom:.2rem; font-family:var(--font-cond); letter-spacing:.05em; text-transform:uppercase; font-size:.72rem; }

/* ---- Scroll reveal (base rule; IntersectionObserver adds .in) ---- */
html.js .reveal { opacity:0; transform:translateY(34px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal.in { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  html.js .reveal { opacity:1; transform:none; }
}

/* ============================================================
   COMPONENTS.CSS — header/nav, accessibility toolbar, footer,
   floating elements, cookie consent. Shared for index.html +
   portfolio.html.
   ============================================================ */

/* ---- HEADER / NAV (Stronghold dropdown pattern, mobile-first) ---- */
.site-header {
  position:sticky; top:0; z-index:1000;
  background:var(--header-bg); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--header-border); box-shadow:0 8px 30px rgba(0,0,0,.2);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem clamp(1rem,4vw,2.5rem); max-width:1400px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; min-width:0; }
.brand img { width:46px; height:46px; border-radius:50%; border:2px solid var(--gold); background:#fff; padding:2px; flex:none; }
.brand-name { font-family:var(--font-display); font-weight:800; font-size:1.02rem; letter-spacing:.03em; background:linear-gradient(45deg,var(--sky),var(--blue),var(--gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; white-space:nowrap; }
.brand-sub { font-family:var(--font-cond); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); white-space:nowrap; }

.nav-links { display:none; list-style:none; align-items:center; gap:.35rem; }
.nav-links > li > a, .drop-btn {
  font-family:var(--font-cond); font-size:.92rem; font-weight:600; letter-spacing:.06em;
  color:var(--text); text-decoration:none; padding:.55rem .85rem; border-radius:8px;
  display:inline-flex; align-items:center; gap:.4rem; background:none; border:1px solid transparent; cursor:pointer;
  transition:.25s;
}
.nav-links a:hover, .drop-btn:hover, .drop.open .drop-btn { color:var(--gold); background:rgba(255,215,0,.08); }
.nav-links a[aria-current="page"] { color:var(--gold); background:rgba(255,215,0,.10); }
.drop { position:relative; }
.drop-btn .chev { width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform .3s; }
.drop.open .drop-btn .chev { transform:rotate(225deg) translateY(-1px); }
.drop-menu {
  position:absolute; top:calc(100% + .6rem); left:50%; transform:translate(-50%, -8px);
  min-width:250px; padding:.6rem; border-radius:14px; opacity:0; visibility:hidden; transition:.28s var(--ease);
  background:var(--mobile-menu-bg);
  border:1px solid var(--line-gold); box-shadow:0 20px 50px rgba(0,0,0,.35); z-index:1001;
}
.drop.open .drop-menu { opacity:1; visibility:visible; transform:translate(-50%, 0); }
.drop-head { font-family:var(--font-cond); font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); padding:.45rem .8rem .55rem; border-bottom:1px solid var(--line); margin-bottom:.4rem; }
.drop-item { display:flex; align-items:center; gap:.7rem; padding:.6rem .8rem; border-radius:9px; color:var(--text); text-decoration:none; font-size:.9rem; transition:.2s; }
.drop-item svg { width:16px; height:16px; color:var(--sky); flex:none; }
.drop-item:hover { background:rgba(255,215,0,.12); color:var(--gold); }
.nav-cta { display:none; align-items:center; gap:.6rem; }

.menu-btn { display:inline-flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.55rem; z-index:1102; }
.menu-btn span { width:24px; height:2.5px; background:var(--text); border-radius:2px; transition:.3s; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform:rotate(-45deg) translate(6px,-6px); }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:1098; opacity:0; visibility:hidden; transition:.3s; }
.overlay.show { opacity:1; visibility:visible; }
.mobile-menu {
  position:fixed; top:0; right:-105%; width:min(84vw, 340px); height:100dvh; z-index:1099;
  background:var(--mobile-menu-bg); border-left:1px solid var(--line);
  padding:1.4rem; transition:right .35s var(--ease); overflow-y:auto;
  display:flex; flex-direction:column;
}
.mobile-menu.open { right:0; }
.mobile-menu .mm-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; }
.mobile-menu .mm-head img { width:52px; height:52px; border-radius:50%; border:2px solid var(--gold); }
.mm-close { background:none; border:none; color:var(--text); font-size:1.6rem; cursor:pointer; padding:.4rem; line-height:1; }
.mm-group { margin-bottom:1.1rem; }
.mm-group-title { font-family:var(--font-cond); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); margin-bottom:.5rem; padding-left:.2rem; }
.mm-link { display:flex; align-items:center; gap:.7rem; padding:.68rem .6rem; color:var(--text); text-decoration:none; font-size:1rem; border-radius:9px; }
.mm-link svg { width:16px; height:16px; color:var(--sky); }
.mm-link:active, .mm-link:hover, .mm-link[aria-current="page"] { background:var(--pill-bg); color:var(--gold); }
.mm-persona { margin-top:auto; padding-top:1.2rem; border-top:1px solid var(--line); }
.mm-persona .chip { width:100%; justify-content:flex-start; margin-bottom:.45rem; cursor:pointer; background:var(--pill-bg); }
.mm-persona .chip.active { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* ---- ACCESSIBILITY TOOLBAR ---- */
.a11y-fab { position:fixed; bottom:1.2rem; left:1.2rem; z-index:950; width:52px; height:52px; border-radius:50%; border:1px solid var(--line-gold); cursor:pointer; background:linear-gradient(135deg, rgba(10,20,60,.92), rgba(10,14,39,.96)); color:var(--gold); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.45); transition:.3s; }
html[data-theme="light"] .a11y-fab { background:linear-gradient(135deg, #ffffff, #eef1fb); }
.a11y-fab:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(255,215,0,.25); }
.a11y-fab svg { width:24px; height:24px; }
.a11y-panel { position:fixed; top:50%; right:-105%; transform:translateY(-50%); z-index:1140; width:min(320px, 88vw); border-radius:18px 0 0 18px; padding:1.3rem 1.3rem 1.4rem; transition:right .4s var(--ease); max-height:86dvh; overflow-y:auto; }
.a11y-panel.open { right:0; }
.a11y-panel h2 { font-size:1rem; font-weight:800; display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; color:var(--text); }
.a11y-panel h2 svg { width:18px; height:18px; color:var(--gold); }
.a11y-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.6rem 0; border-top:1px solid var(--divider); }
.a11y-row:first-of-type { border-top:none; }
.a11y-row .ar-name { font-family:var(--font-cond); font-size:.85rem; font-weight:600; letter-spacing:.04em; color:var(--text); }
.a11y-row .ar-desc { font-size:.72rem; color:var(--text-3); font-weight:300; }
.a11y-close { position:absolute; top:.8rem; right:.8rem; background:none; border:none; color:var(--text-3); font-size:1.1rem; cursor:pointer; padding:.3rem; }
html.a11y-contrast body { background:#000 !important; }
html.a11y-contrast .glass, html.a11y-contrast .glass-strong, html.a11y-contrast .glass-gold { background:#0a0a0a !important; border-color:#FFD700 !important; }
html.a11y-contrast p, html.a11y-contrast li, html.a11y-contrast td, html.a11y-contrast .section-sub { color:#fff !important; }
html.a11y-contrast h1, html.a11y-contrast h2, html.a11y-contrast h3, html.a11y-contrast h4 { color:#fff !important; -webkit-text-fill-color:#fff !important; }
html.a11y-grayscale body { filter:grayscale(1); }
html.a11y-links a { text-decoration:underline !important; text-underline-offset:3px; }
html.a11y-largecursor, html.a11y-largecursor a, html.a11y-largecursor button { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M6 3 L34 20 L20 23 L15 36 Z' fill='%23FFD700' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 6 3, auto !important; }
@media print { .a11y-fab, .a11y-panel { display:none !important; } }

/* ---- FOOTER ---- */
.site-footer { background:var(--footer-bg); border-top:1px solid var(--footer-border); padding:3.2rem 0 1.6rem; margin-top:2rem; }
.footer-grid { display:grid; gap:2rem; margin-bottom:2.2rem; }
.footer-brand p { font-size:.86rem; font-weight:300; color:var(--text-3); line-height:1.7; margin-top:.8rem; max-width:340px; }
.footer-col h4 { font-family:var(--font-cond); font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.45rem; }
.footer-col a { color:var(--text-3); text-decoration:none; font-size:.88rem; transition:.2s; }
.footer-col a:hover { color:var(--sky); padding-left:4px; }
.socials { display:flex; gap:.7rem; margin-top:1.1rem; }
.socials a { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, var(--blue), var(--sky)); transition:transform .3s var(--ease), box-shadow .3s; }
.socials a svg { width:18px; height:18px; fill:#fff; }
.socials a:hover { transform:translateY(-4px) rotate(8deg); box-shadow:0 10px 24px rgba(0,191,255,.45); }
.footer-base { border-top:1px solid var(--divider); padding-top:1.4rem; display:flex; flex-direction:column; gap:.8rem; align-items:center; text-align:center; }
.footer-base p { font-size:.8rem; color:var(--text-3); font-weight:300; }
.footer-legal a, .linklike { color:var(--text-3); font-size:.8rem; text-decoration:none; background:none; border:none; cursor:pointer; font-family:inherit; padding:0; }
.footer-legal a:hover, .linklike:hover { color:var(--gold); text-decoration:underline; }
.pwa-badge { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-cond); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green); border:1px solid rgba(52,211,153,.4); background:rgba(52,211,153,.08); padding:.3rem .8rem; border-radius:999px; }
.pwa-badge svg { width:13px; height:13px; }

/* ---- FLOATING ELEMENTS (back-to-top, toast, install banner) ---- */
.back-to-top { position:fixed; bottom:1.2rem; right:1.2rem; z-index:900; width:48px; height:48px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg, var(--blue), var(--sky)); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform:translateY(12px); transition:.3s; box-shadow:0 8px 22px rgba(0,102,255,.4); }
.back-to-top.visible { opacity:1; visibility:visible; transform:none; }
.back-to-top svg { width:20px; height:20px; fill:#fff; }
.install-banner { position:fixed; bottom:1.2rem; left:1rem; right:4.6rem; z-index:950; border-radius:14px; padding:.85rem 1rem; display:flex; align-items:center; gap:.8rem; transform:translateY(140%); transition:transform .45s var(--ease); }
.install-banner.show { transform:none; }
.install-banner .ib-icon { width:38px; height:38px; flex:none; border-radius:10px; background:rgba(255,215,0,.15); border:1px solid var(--line-gold); display:flex; align-items:center; justify-content:center; }
.install-banner .ib-icon svg { width:18px; height:18px; color:var(--gold); }
.install-banner p { font-size:.82rem; flex:1; color:var(--text-2); }
.install-banner .ib-x { background:none; border:none; color:var(--text-3); font-size:1.15rem; cursor:pointer; padding:.3rem; }
.toast { position:fixed; top:88px; left:50%; transform:translate(-50%, -16px); z-index:1300; padding:.75rem 1.3rem; border-radius:999px; font-family:var(--font-cond); font-size:.85rem; letter-spacing:.05em; opacity:0; visibility:hidden; transition:.35s var(--ease); white-space:nowrap; color:var(--text); }
.toast.show { opacity:1; visibility:visible; transform:translate(-50%, 0); }

/* ---- COOKIE CONSENT (GDPR / RA 10173 aligned) ---- */
.consent-banner {
  position:fixed; bottom:.75rem; left:50%; transform:translate(-50%, 140%); z-index:1150;
  width:min(560px, calc(100% - 1.5rem)); border-radius:16px; padding:.9rem 1.05rem;
  transition:transform .5s var(--ease);
}
.consent-banner.show { transform:translate(-50%, 0); }
.consent-close {
  position:absolute; top:.55rem; right:.55rem; width:30px; height:30px; border-radius:50%;
  background:var(--pill-bg); border:1px solid var(--line); color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.consent-close svg { width:13px; height:13px; }
.consent-banner h3 { font-size:.92rem; font-weight:700; display:flex; align-items:center; gap:.5rem; margin-bottom:.3rem; color:var(--text); padding-right:1.8rem; }
.consent-banner h3 svg { width:16px; height:16px; color:var(--gold); }
.consent-banner p { font-size:.78rem; font-weight:300; color:var(--text-2); line-height:1.55; margin-bottom:.7rem; }
.consent-banner p a { color:var(--sky); }
.consent-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.consent-actions .btn { min-height:38px; padding:.45rem 1rem; font-size:.76rem; flex:1 1 130px; }
.consent-prefs { display:none; margin:.9rem 0; padding:.9rem 1rem; border:1px dashed var(--line); border-radius:12px; }
.consent-prefs.open { display:block; }
.pref-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.45rem 0; }
.pref-row + .pref-row { border-top:1px solid var(--divider); }
.pref-row .pr-name { font-family:var(--font-cond); font-size:.82rem; font-weight:600; letter-spacing:.06em; }
.pref-row .pr-desc { font-size:.72rem; color:var(--text-3); font-weight:300; }
.switch { position:relative; width:46px; height:26px; flex:none; }
.switch input { opacity:0; width:100%; height:100%; position:absolute; margin:0; cursor:pointer; z-index:2; }
.switch .track { position:absolute; inset:0; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid var(--line); transition:.25s; }
.switch .track::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.25s var(--ease); }
.switch input:checked + .track { background:linear-gradient(135deg, var(--blue), var(--sky)); border-color:transparent; }
.switch input:checked + .track::after { transform:translateX(20px); }
.switch input:disabled { cursor:not-allowed; }
.switch input:disabled + .track { background:rgba(255,215,0,.25); border-color:var(--line-gold); }
@media print { .consent-banner { display:none !important; } }

/* ---- Doc-cover thumbnail (used by portfolio.html doc-cards) ---- */
.doc-cover { overflow:hidden; aspect-ratio:16/9; background:var(--doc-cover-bg); border-bottom:1px solid var(--line); }
.doc-cover img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }

/* ---- Shared responsive breakpoints (nav) ---- */
@media (min-width:900px) {
  .nav-links { display:flex; }
  .nav-cta { display:flex; }
  .menu-btn { display:none; }
  .footer-grid { grid-template-columns:1.4fr 1fr 1fr 1fr; }
  .footer-base { flex-direction:row; justify-content:space-between; }
  .install-banner { right:auto; max-width:400px; }
}
@media print {
  .site-header, .back-to-top, .install-banner, .toast, .hero-banner, .consent-banner { display:none !important; }
  body { background:#fff; color:#000; }
  body::before { display:none; }
  .glass, .glass-strong, .glass-gold { background:#fff; border:1px solid #999; box-shadow:none; }
  .section-title, .hero h1, h3 { color:#000; -webkit-text-fill-color:#000; }
}