/* ============================================================
   TOKENS
   Signature idea: the "accreditation credential" — badges,
   punch-holes, tracking codes, zone maps — the actual visual
   language of Bertan's world (event access & accreditation).
   ============================================================ */
:root{
  --ink:        #0A0D10;   /* base background */
  --ink-2:      #0E1216;   /* alt background */
  --panel:      #12171C;   /* card surface */
  --panel-2:    #171D23;   /* raised card surface */
  --paper:      #EEEAE0;   /* primary text on dark */
  --paper-dim:  #A6ACB2;   /* secondary text on dark */
  --paper-mute: #6D747B;   /* tertiary / caption text */
  --flare:      #FF4419;   /* signature accent */
  --flare-ink:  #0A0D10;   /* text-on-flare */
  --flare-dim:  #5C2415;   /* deep accent for washes */
  --line:       rgba(238,234,224,0.10);
  --line-2:     rgba(238,234,224,0.20);

  --display: "Big Shoulders Display", Impact, sans-serif;
  --body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1180px;
  --edge: 20px;
  --nav-h: 64px;

  --ease: cubic-bezier(.22,.68,0,1);
}
@media (min-width:640px){ :root{ --edge: 32px; } }
@media (min-width:1024px){ :root{ --edge: 56px; --nav-h: 76px; } }

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0; background:var(--ink); color:var(--paper);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:.005em; text-transform:uppercase; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--flare); color:var(--flare-ink); padding:10px 16px; border-radius:4px;
  font-family:var(--mono); font-size:13px; transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

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

.wrap{ max-width:var(--container); margin:0 auto; padding-inline:var(--edge); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-dim);
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--flare); flex:none;
}

.section{ padding-block: 88px; position:relative; }
@media (min-width:1024px){ .section{ padding-block:132px; } }
.section-head{ max-width:640px; margin-bottom:48px; }
@media (min-width:1024px){ .section-head{ margin-bottom:64px; } }
.section-title{
  font-size:clamp(2.1rem, 6vw, 3.6rem); line-height:0.98; margin-top:14px;
}
.section-title em{ font-style:normal; color:var(--flare); }
.section-kicker{ margin-top:16px; color:var(--paper-dim); font-size:1rem; max-width:52ch; }
@media (min-width:1024px){ .section-kicker{ font-size:1.1rem; } }

.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 22px; border-radius:3px; white-space:nowrap;
  transition:transform .35s var(--ease), background-color .2s, border-color .2s, color .2s;
  will-change:transform;
}
.btn-primary{ background:var(--flare); color:var(--flare-ink); font-weight:600; }
.btn-primary:hover{ background:#ff5a30; }
.btn-ghost{ border:1px solid var(--line-2); color:var(--paper); }
.btn-ghost:hover{ border-color:var(--flare); color:var(--flare); }
.btn svg{ width:14px; height:14px; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

/* ---------- Credential / badge motif ---------- */
.chip{
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 14px 8px 24px; border:1px solid var(--line-2); border-radius:3px;
  color:var(--paper-dim); background:linear-gradient(180deg, rgba(238,234,224,.035), transparent);
}
.chip::before{
  content:""; position:absolute; left:9px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%;
  background:var(--ink); box-shadow:0 0 0 1.5px var(--line-2);
}
.chip.is-active{ border-color:var(--flare); color:var(--flare); }
.chip.is-active::before{ box-shadow:0 0 0 1.5px var(--flare); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(10,13,16,0); border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.nav.is-scrolled{ background:rgba(10,13,16,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-color:var(--line); }
.nav.is-hidden{ transform:translateY(-100%); }
.nav-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ font-family:var(--mono); font-weight:600; font-size:15px; letter-spacing:.06em; display:flex; align-items:center; gap:8px; white-space:nowrap; flex:none; }
.logo .dot{ width:6px; height:6px; border-radius:50%; background:var(--flare); }
.nav-links{ display:none; align-items:center; gap:2px; }
@media (min-width:1280px){ .nav-links{ display:flex; } }
.nav-links a{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--paper-dim); padding:10px 12px; position:relative; white-space:nowrap;
  transition:color .2s;
}
@media (min-width:1360px){ .nav-links a{ padding:10px 16px; } }
.nav-links a:hover{ color:var(--paper); }
.nav-links a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:1px;
  background:var(--flare); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:hover::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-cta .btn{ padding:10px 16px; }
.nav-cv{ display:none; }
@media (min-width:640px) and (max-width:1279px), (min-width:1400px){ .nav-cv{ display:inline-flex; } }

.lang-switch{
  display:none; align-items:center; border:1px solid var(--line-2); border-radius:20px; padding:3px;
  flex:none;
}
@media (min-width:1280px){ .lang-switch{ display:flex; } }
.mobile-menu .lang-switch{ display:flex; align-self:flex-start; }
.lang-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; padding:6px 11px; border-radius:16px;
  color:var(--paper-mute); transition:background-color .25s var(--ease), color .25s;
}
.lang-btn.is-active{ background:var(--flare); color:var(--flare-ink); }
.mobile-menu .lang-btn{ font-size:13px; padding:8px 16px; }

.burger{ display:flex; flex-direction:column; gap:5px; width:26px; padding:6px 0; }
@media (min-width:1280px){ .burger{ display:none; } }
.burger span{ height:2px; background:var(--paper); transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:99; background:var(--ink);
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  display:flex; flex-direction:column; justify-content:space-between; padding:36px var(--edge) 40px;
  border-top:1px solid var(--line);
}
.mobile-menu.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-menu nav a{ font-family:var(--display); font-size:12vw; line-height:1.1; text-transform:uppercase; display:block; padding:6px 0; color:var(--paper); }
.mobile-menu-foot{ display:flex; flex-direction:column; gap:14px; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end;
  padding-top:calc(var(--nav-h) + 24px); padding-bottom:56px; overflow:hidden;
  background:transparent;
}
.hero-grid{
  position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(120% 70% at 70% 20%, black, transparent 78%);
}
.hero-dot{ position:absolute; width:5px; height:5px; border-radius:50%; background:var(--flare); opacity:.7; }
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-eyebrow{ margin-bottom:22px; }
.hero-name{
  font-size:clamp(3.4rem, 15vw, 9.5rem); line-height:.86; letter-spacing:-.01em;
}
.hero-name .line{ display:block; overflow:hidden; }
.hero-name .line span{ display:block; transform:translateY(110%); transition:transform .9s var(--ease); }
.hero-name .line:nth-child(2) span{ color:var(--flare); }
.hero.is-loaded .hero-name .line span{ transform:translateY(0); }
.hero.is-loaded .hero-name .line:nth-child(2) span{ transition-delay:.08s; }

.hero-headline{
  margin-top:28px; max-width:15ch;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.35rem, 3.6vw, 2.1rem); line-height:1.08; color:var(--paper);
}
.hero-bio{ margin-top:22px; max-width:46ch; color:var(--paper-dim); font-size:1.02rem; }
.hero-actions{ margin-top:34px; display:flex; flex-wrap:wrap; gap:14px; }

.hero-badge{
  position:absolute; right:var(--edge); top:calc(var(--nav-h) + 64px); z-index:2;
  width:172px; padding:14px 14px 16px; border-radius:10px;
  background:linear-gradient(160deg, var(--panel-2), var(--panel));
  border:1px solid var(--line-2); box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transition:transform .2s linear;
  display:none;
}
@media (min-width:900px){ .hero-badge{ display:block; } }
.hero-badge::before{
  content:""; position:absolute; left:50%; top:-7px; transform:translateX(-50%);
  width:34px; height:14px; border-radius:0 0 10px 10px; background:var(--ink);
  box-shadow:inset 0 -1px 0 var(--line-2);
}
.hero-badge-photo{
  height:96px; border-radius:6px; margin-bottom:10px;
  background:
    repeating-linear-gradient(135deg, rgba(255,68,25,.18) 0 2px, transparent 2px 10px),
    linear-gradient(160deg, #1c2129, #0d1013);
  display:flex; align-items:flex-end; padding:6px;
}
.hero-badge-photo{ position:relative; overflow:hidden; background-size:cover; background-position:center; }
.hero-badge-photo.has-photo{ background-color:#0d1013; }
.hero-badge-mono{ font-family:var(--display); font-weight:900; font-size:2.4rem; line-height:1; color:var(--flare); opacity:.9; }
.hero-badge-name{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.03em; color:var(--paper); }
.hero-badge-role{ font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--flare); margin-top:2px; }
.hero-badge-bars{ margin-top:12px; display:flex; gap:2px; align-items:flex-end; height:16px; }
.hero-badge-bars i{ display:block; width:3px; background:var(--line-2); }

.scroll-cue{
  position:absolute; left:var(--edge); bottom:28px; z-index:2;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-mute);
}
.scroll-cue i{ position:relative; width:1px; height:34px; background:var(--line-2); overflow:hidden; display:block; }
.scroll-cue i::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--flare); animation:scrollline 2.2s var(--ease) infinite; }
@keyframes scrollline{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }
@media (prefers-reduced-motion: reduce){ .scroll-cue i::after{ animation:none; top:0; } }

/* ============================================================
   NUMBERS
   ============================================================ */
.numbers{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink-2);
}
.numbers-grid{ display:grid; grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .numbers-grid{ grid-template-columns:repeat(5,1fr); } }
.numbers-item{
  padding:34px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative;
}
.numbers-grid > .numbers-item:nth-child(2n){ border-right:0; }
@media (min-width:760px){
  .numbers-grid > .numbers-item:nth-child(2n){ border-right:1px solid var(--line); }
  .numbers-grid > .numbers-item:last-child{ border-right:0; }
  .numbers-item{ border-bottom:0; }
}
.numbers-value{ font-family:var(--display); font-size:clamp(2.4rem,6vw,3.4rem); color:var(--flare); line-height:1; }
.numbers-label{ margin-top:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); }

/* ============================================================
   REVEAL UTILITY
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ transform:none; transition:opacity .4s; } }

/* ============================================================
   WORK / PROJECTS
   ============================================================ */
.project-grid{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .project-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .project-grid{ grid-template-columns:repeat(3,1fr); } }

.project-card{
  position:relative; text-align:left; width:100%; padding:22px 20px 20px;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
  transition:transform .4s var(--ease), border-color .3s, background-color .3s;
  cursor:pointer;
}
.project-card:hover{ transform:translateY(-4px); border-color:var(--line-2); background:var(--panel-2); }
.project-card-tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--flare); }
.project-card-title{ margin-top:12px; font-size:1.4rem; line-height:1.08; }
.project-card-line{ margin-top:14px; color:var(--paper-dim); font-size:.92rem; }
.project-card-foot{ margin-top:20px; display:flex; align-items:center; justify-content:space-between; }
.project-card-foot span{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-mute); }
.project-card-foot svg{ width:15px; height:15px; color:var(--paper-mute); transition:transform .3s var(--ease), color .3s; }
.project-card:hover .project-card-foot svg{ transform:translate(3px,-3px); color:var(--flare); }

/* ============================================================
   EXPERIENCE / TIMELINE
   ============================================================ */
.timeline{ position:relative; }
.timeline-item{
  position:relative; padding-left:34px; border-left:1px solid var(--line);
  padding-bottom:8px;
}
.timeline-item:last-child{ border-left-color:transparent; }
.timeline-dot{
  position:absolute; left:-6.5px; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--ink); border:2px solid var(--line-2); transition:border-color .3s, background-color .3s;
}
.timeline-item.is-open .timeline-dot{ border-color:var(--flare); background:var(--flare); }
.timeline-head{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 0; text-align:left;
}
.timeline-org{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-mute); }
.timeline-role{ display:block; margin-top:8px; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.3rem,3vw,1.9rem); line-height:1.05; }
.timeline-when-m{ display:block; margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--paper-mute); }
@media (min-width:640px){ .timeline-when-m{ display:none; } }
@media (max-width:639px){ .timeline-when{ display:none; } }
.timeline-when{ flex:none; font-family:var(--mono); font-size:11.5px; color:var(--paper-mute); padding-top:4px; white-space:nowrap; }
.timeline-plus{
  flex:none; width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; margin-top:2px;
  transition:transform .35s var(--ease), border-color .3s;
}
.timeline-item.is-open .timeline-plus{ transform:rotate(45deg); border-color:var(--flare); }
.timeline-plus svg{ width:12px; height:12px; }
.timeline-panel{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.timeline-panel-inner{ padding:2px 0 30px; display:grid; gap:22px; }
@media (min-width:760px){ .timeline-panel-inner{ grid-template-columns:1.1fr .9fr; } }
.timeline-col h4{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-mute); margin-bottom:10px; }
.timeline-col p{ color:var(--paper-dim); font-size:.96rem; }
.timeline-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* ============================================================
   CAPABILITIES
   ============================================================ */
.cap-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.cap-panel{ display:none; }
.cap-panel.is-active{ display:block; }
.cap-desc{ color:var(--paper-dim); max-width:56ch; margin-bottom:26px; }
.cap-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.cap-tags .chip{ font-size:12px; padding:10px 16px 10px 26px; color:var(--paper); }

/* ============================================================
   BEHIND THE SCENES
   ============================================================ */
.behind{ background:var(--ink-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.behind-lead{ font-size:clamp(1.5rem,4vw,2.4rem); line-height:1.15; max-width:20ch; }
.behind-lead .dim{ color:var(--paper-mute); }
.behind-lead .hot{ color:var(--flare); }
.behind-grid{ margin-top:52px; display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (min-width:640px){ .behind-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:640px) and (max-width:1023px){ .behind-grid > .behind-node:last-child:nth-child(odd){ grid-column:span 2; } }
@media (min-width:1024px){ .behind-grid{ grid-template-columns:repeat(4,1fr); } .behind-grid > .behind-node:last-child:nth-child(4n+3){ grid-column:span 2; } }
.behind-node{ background:var(--ink-2); padding:26px 22px; text-align:left; width:100%; transition:background-color .3s; }
.behind-node:hover, .behind-node.is-open{ background:var(--panel); }
.behind-node-top{ display:flex; align-items:center; justify-content:space-between; }
.behind-node-title{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); }
.behind-node-q{ margin-top:10px; font-size:1.05rem; color:var(--paper-dim); line-height:1.3; }
.behind-node-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.behind-node-a p{ padding-top:14px; font-size:.92rem; color:var(--paper-dim); border-top:1px dashed var(--line-2); margin-top:14px; }
.behind-node-icon{ width:16px; height:16px; flex:none; color:var(--paper-mute); transition:transform .35s var(--ease), color .3s; }
.behind-node.is-open .behind-node-icon{ transform:rotate(45deg); color:var(--flare); }

/* ============================================================
   CASE STUDIES
   ============================================================ */
.case{ border-top:1px solid var(--line); }
.case:last-child{ border-bottom:1px solid var(--line); }
.case-row{ width:100%; text-align:left; padding:30px 0; display:flex; align-items:center; gap:20px; justify-content:space-between; }
.case-num{ font-family:var(--mono); font-size:12px; color:var(--paper-mute); flex:none; width:34px; }
.case-title-wrap{ flex:1; }
.case-cat{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--flare); }
.case-title{ display:block; margin-top:6px; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:clamp(1.3rem,3.4vw,2.1rem); line-height:1.05; }
.case-plus{ flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; transition:transform .35s var(--ease), border-color .3s; }
.case.is-open .case-plus{ transform:rotate(45deg); border-color:var(--flare); }
.case-plus svg{ width:13px; height:13px; }
.case-panel{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.case-panel-inner{ padding-bottom:36px; display:grid; gap:24px; }
@media (min-width:760px){ .case-panel-inner{ grid-template-columns:repeat(3,1fr); } }
.case-field h5{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-mute); margin-bottom:8px; }
.case-field p{ color:var(--paper-dim); font-size:.94rem; }
.case-photo{
  grid-column:1/-1; height:220px; border-radius:8px; margin-top:4px;
  background:
    repeating-linear-gradient(135deg, rgba(255,68,25,.10) 0 2px, transparent 2px 12px),
    linear-gradient(160deg, #1a1f26, #0d1013);
  display:flex; align-items:flex-end; padding:16px;
}
.case-photo span{ font-family:var(--mono); font-size:11px; color:var(--paper-mute); letter-spacing:.04em; }

/* ============================================================
   ABOUT / OPERATOR / HOW I THINK
   ============================================================ */
.operator-head{ font-size:clamp(1.9rem,5vw,3rem); line-height:1.06; max-width:16ch; }
.operator-head .accent{ color:var(--flare); }
.operator-note{ margin-top:20px; font-family:var(--mono); font-size:13px; color:var(--paper-mute); border-left:2px solid var(--line-2); padding-left:14px; max-width:48ch; }

.flow{ margin-top:64px; position:relative; padding-left:26px; }
.flow-line{ position:absolute; left:5px; top:6px; bottom:6px; width:1px; background:var(--line-2); }
.flow-line-fill{ position:absolute; left:0; top:0; width:1px; height:0%; background:var(--flare); transition:height .1s linear; }
.flow-step{ position:relative; padding:22px 0; display:flex; align-items:baseline; gap:18px; }
.flow-step::before{
  content:""; position:absolute; left:-26px; top:28px; width:11px; height:11px; border-radius:50%;
  background:var(--ink); border:2px solid var(--line-2); transition:border-color .4s, background-color .4s;
}
.flow-step.is-active::before{ border-color:var(--flare); background:var(--flare); }
.flow-idx{ font-family:var(--mono); font-size:12px; color:var(--paper-mute); flex:none; width:24px; }
.flow-label{ font-size:clamp(1.3rem,3.4vw,2.1rem); color:var(--paper-mute); transition:color .4s; }
.flow-step.is-active .flow-label{ color:var(--paper); }

.think-grid{ margin-top:96px; display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:760px){ .think-grid{ grid-template-columns:repeat(2,1fr); } }
.think-item{ padding:26px 0; border-top:1px solid var(--line); display:flex; gap:20px; }
@media (min-width:760px){ .think-item{ padding:30px 28px; } .think-item:nth-child(odd){ border-right:1px solid var(--line); } }
.think-idx{ font-family:var(--display); font-size:1.6rem; color:var(--flare-dim); flex:none; }
.think-body h4{ font-size:1.15rem; text-transform:none; letter-spacing:0; font-weight:700; font-family:var(--body); }
.think-body p{ margin-top:8px; color:var(--paper-dim); font-size:.94rem; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:var(--flare); color:var(--flare-ink); }
.contact-title{ font-size:clamp(2.6rem,9vw,6rem); line-height:.95; }
.contact-actions{ margin-top:40px; display:flex; flex-wrap:wrap; gap:14px; }
.contact .btn-primary{ background:var(--flare-ink); color:var(--paper); }
.contact .btn-primary:hover{ background:#000; }
.contact .btn-ghost{ border-color:rgba(10,13,16,.35); color:var(--flare-ink); }
.contact .btn-ghost:hover{ border-color:var(--flare-ink); }
.contact .eyebrow{ color:rgba(10,13,16,.65); }
.contact .eyebrow::before{ background:var(--flare-ink); }
.contact-links{ margin-top:56px; display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid rgba(10,13,16,.2); }
@media (min-width:640px){ .contact-links{ grid-template-columns:repeat(3,1fr); } }
.contact-link{ padding:20px 0; border-bottom:1px solid rgba(10,13,16,.2); }
@media (min-width:640px){ .contact-link{ border-right:1px solid rgba(10,13,16,.2); padding-right:20px; } .contact-link:last-child{ border-right:0; } }
.contact-link h5{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.contact-link a{ display:inline-block; margin-top:8px; font-family:var(--display); font-size:1.3rem; text-transform:uppercase; border-bottom:1px solid transparent; transition:border-color .2s; }
.contact-link a:hover{ border-color:var(--flare-ink); }
.contact-link a.ats-link{ display:block; margin-top:6px; font-family:var(--mono); font-size:11px; text-transform:none; opacity:.75; letter-spacing:.02em; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding:32px var(--edge) 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; }
.foot small{ font-family:var(--mono); font-size:11.5px; color:var(--paper-mute); letter-spacing:.03em; }
.to-top{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); display:flex; align-items:center; gap:8px; }
.to-top:hover{ color:var(--flare); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-scrim{
  position:fixed; inset:0; z-index:200; background:rgba(6,7,9,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  display:flex; align-items:flex-end; justify-content:center;
}
@media (min-width:760px){ .modal-scrim{ align-items:center; padding:40px; } }
.modal-scrim.is-open{ opacity:1; pointer-events:auto; }
.modal{
  width:100%; max-width:760px; max-height:88vh; max-height:88svh; overflow-y:auto;
  background:var(--panel-2); border:1px solid var(--line-2);
  border-radius:16px 16px 0 0; padding:32px var(--edge) 40px;
  transform:translateY(24px); transition:transform .4s var(--ease);
}
@media (min-width:760px){ .modal{ border-radius:16px; padding:44px; } }
.modal-scrim.is-open .modal{ transform:translateY(0); }
.modal-close{
  position:sticky; top:0; float:right; margin-left:12px;
  width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center; background:var(--panel-2);
}
.modal-close svg{ width:14px; height:14px; }
.modal-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--flare); }
.modal-title{ margin-top:10px; font-size:clamp(1.6rem,5vw,2.6rem); line-height:1.05; max-width:24ch; }
.modal-grid{ margin-top:30px; display:grid; gap:22px; }
@media (min-width:640px){ .modal-grid{ grid-template-columns:1fr 1fr; } }
.modal-field h5{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-mute); margin-bottom:8px; }
.modal-field p{ color:var(--paper-dim); font-size:.95rem; }

/* placeholder text style — used across the site for editable fields */
.ph{ color:var(--paper-mute); font-style:normal; }

/* ============================================================
   WHY ME / PROBLEMS I SOLVE
   ============================================================ */
.why-grid{
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:640px){
  .why-grid{ grid-template-columns:repeat(2,1fr); }
}
.why-card{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:32px 28px; position:relative;
  transition:transform .35s var(--ease), border-color .3s, background-color .3s;
  display:flex; flex-direction:column; justify-content:space-between;
}
.why-card:hover{
  transform:translateY(-4px); border-color:var(--line-2); background:var(--panel-2);
}
.why-card-top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;
}
.why-card-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--flare); text-transform:uppercase; font-weight:600;
}
.why-card-badge{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  padding:4px 9px; border-radius:3px;
  background:rgba(255,68,25,0.12); color:var(--flare); text-transform:uppercase;
}
.why-card-title{
  font-size:clamp(1.4rem, 3.2vw, 1.95rem); line-height:1.06; margin-bottom:14px;
}
.why-card-pain{
  font-size:.97rem; color:var(--paper); line-height:1.45;
  border-left:2px solid var(--flare); padding-left:12px; margin-bottom:16px;
  font-style:italic;
}
.why-card-sol{
  font-size:.92rem; color:var(--paper-dim); line-height:1.55;
}

/* ============================================================
   HOW WE WORK / ENGAGEMENT MODELS
   ============================================================ */
.models-grid{
  display:grid; grid-template-columns:1fr; gap:20px;
}
@media (min-width:900px){
  .models-grid{ grid-template-columns:repeat(3,1fr); }
}
.model-card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:34px 28px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .35s var(--ease), border-color .3s, background-color .3s;
  position:relative; overflow:hidden;
}
.model-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:transparent; transition:background-color .3s;
}
.model-card:hover{
  transform:translateY(-5px); border-color:var(--line-2); background:var(--panel-2);
}
.model-card:hover::before{
  background:var(--flare);
}
.model-tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--flare); margin-bottom:12px;
}
.model-title{
  font-size:clamp(1.4rem, 2.8vw, 1.85rem); line-height:1.1; margin-bottom:14px;
}
.model-desc{
  font-size:.94rem; color:var(--paper-dim); line-height:1.5; margin-bottom:24px;
}
.model-points{
  list-style:none; padding:0; margin:0 0 32px 0;
  display:flex; flex-direction:column; gap:12px;
}
.model-points li{
  font-size:.88rem; color:var(--paper-dim);
  display:flex; align-items:flex-start; gap:10px; line-height:1.4;
}
.model-points li::before{
  content:"→"; color:var(--flare); font-family:var(--mono); font-weight:700; flex:none;
}
.model-foot{
  margin-top:auto; padding-top:20px; border-top:1px solid var(--line);
}
.model-foot .btn{
  width:100%; justify-content:center;
}

/* ============================================================
   SIDE PROJECTS (PREVIEW ON MAIN & SUBPAGE)
   ============================================================ */
.side-preview-grid{
  display:grid; grid-template-columns:1fr; gap:18px;
}
@media (min-width:760px){
  .side-preview-grid{ grid-template-columns:repeat(3,1fr); }
}
.side-card{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:26px 24px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .35s var(--ease), border-color .3s;
}
.side-card:hover{
  transform:translateY(-4px); border-color:var(--flare);
}
.side-card-top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.side-tech{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--paper-mute); text-transform:uppercase;
}
.side-status{
  font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:2px;
  background:rgba(255,68,25,0.14); color:var(--flare); letter-spacing:.06em;
  text-transform:uppercase;
}
.side-title{
  font-size:1.35rem; line-height:1.15; margin-bottom:10px;
}
.side-desc{
  font-size:.9rem; color:var(--paper-dim); line-height:1.45; margin-bottom:20px;
}
.side-link{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--flare); display:inline-flex;
  align-items:center; gap:6px; transition:gap .2s;
}
.side-card:hover .side-link{
  gap:10px;
}
.side-action-bar{
  margin-top:36px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px; padding:24px 28px;
  background:var(--ink-2); border:1px solid var(--line); border-radius:8px;
}
.side-action-bar p{
  color:var(--paper-dim); font-size:.95rem; max-width:55ch;
}


/* ============================================================
   TACTICAL COURT BACKGROUND (BASKETBALL & VOLLEYBALL)
   ============================================================ */
/* FIXED TACTICAL COURT BLUEPRINT (BASKETBALL + VOLLEYBALL) */
.fixed-court-bg{
  position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none;
  z-index:0; overflow:hidden;
}
.fixed-court-bg svg{
  width:100%; height:100%; object-fit:cover;
}
main{ position:relative; z-index:2; }

/* ============================================================
   LOGOS STRIP: TRUSTED BY & DELIVERED FOR
   ============================================================ */
.logos-section{
  padding:40px 0; background:var(--ink); border-bottom:1px solid var(--line);
}
.logos-eyebrow{
  text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--paper-mute); margin-bottom:28px;
}
.logos-grid{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:28px 48px;
}
.logo-item{
  display:flex; align-items:center; gap:10px; opacity:.85; filter:grayscale(20%);
  transition:opacity .3s, filter .3s, transform .3s;
}
.logo-item:hover{
  opacity:1; filter:grayscale(0%); transform:translateY(-2px);
}
.logo-item img{
  height:46px; width:auto; max-width:170px; object-fit:contain;
}
@media (max-width:640px){ .logo-item img{ height:36px; max-width:130px; } }
/* wide wordmarks read heavier than crests at the same height */
.logo-item[data-org="uefa"] img{ height:28px; }
@media (max-width:640px){ .logo-item[data-org="uefa"] img{ height:22px; } }

/* ============================================================
   DID YOU KNOW / PROBLEM-SOLUTION HIGHLIGHTS
   ============================================================ */
.dyk-grid{
  display:grid; grid-template-columns:1fr; gap:18px;
}
@media (min-width:760px){
  .dyk-grid{ grid-template-columns:repeat(2,1fr); }
}
.dyk-card{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:30px 26px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .35s var(--ease), border-color .3s, background-color .3s;
  position:relative;
}
.dyk-card:hover{
  transform:translateY(-4px); border-color:var(--flare); background:var(--panel-2);
}
.dyk-top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.dyk-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--flare);
}
.dyk-metric{
  font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:3px;
  background:rgba(255,68,25,0.12); color:var(--flare); letter-spacing:.06em;
}
.dyk-title{
  font-size:clamp(1.25rem, 2.5vw, 1.6rem); line-height:1.15; margin-bottom:16px;
}
.dyk-prob{
  font-size:.9rem; color:var(--paper-dim); line-height:1.5; margin-bottom:14px;
  border-left:2px solid rgba(238,234,224,.15); padding-left:12px;
}
.dyk-prob strong{ color:var(--paper); }
.dyk-sol{
  font-size:.9rem; color:var(--paper-dim); line-height:1.5;
  border-left:2px solid var(--flare); padding-left:12px;
}
.dyk-sol strong{ color:var(--flare); }


/* ============================================================
   LANYARD STRAP & HOLOGRAPHIC BADGE
   ============================================================ */
.hero-badge{ perspective:1000px; }
.hero-badge::after{
  content:""; position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:26px; height:42px;
  background:repeating-linear-gradient(45deg, #FF4419, #FF4419 6px, #0A0D10 6px, #0A0D10 12px);
  border-radius:2px 2px 0 0; box-shadow:0 -4px 10px rgba(0,0,0,.6);
  z-index:-1;
}
.hero-badge-clip{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:20px; height:10px; background:#4A525A; border-radius:2px;
  border:1px solid #78828C; box-shadow:0 2px 4px rgba(0,0,0,.5);
}
.badge-holo{
  position:absolute; inset:0; border-radius:10px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,68,25,0.2) 40%, rgba(0,229,255,0.15) 75%, transparent 100%);
  opacity:0; transition:opacity .4s; mix-blend-mode:color-dodge;
}
.hero-badge:hover .badge-holo{ opacity:1; }

/* LIVE OPERATIONS STATUS WIDGET */
.live-ops-pill{
  display:inline-flex; align-items:center; gap:10px; padding:6px 14px; border-radius:20px;
  background:rgba(18,23,28,.9); border:1px solid var(--line-2); margin-bottom:18px;
}
.pulse-led{
  width:8px; height:8px; border-radius:50%; background:#10B981;
  box-shadow:0 0 10px #10B981; animation:ledPulse 2s infinite;
}
@keyframes ledPulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.4; transform:scale(.85); } }
.live-ops-text{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--paper-dim);
}
.live-ops-event{
  font-family:var(--mono); font-size:11px; font-weight:600; color:var(--paper);
}

/* EXECUTIVE PROOF BAR */
.proof-bar{
  background:var(--ink-2); border-bottom:1px solid var(--line); padding:32px 0;
}
.proof-grid{
  display:grid; grid-template-columns:1fr; gap:16px;
}
@media (min-width:760px){ .proof-grid{ grid-template-columns:repeat(3,1fr); } }
.proof-item{
  padding:20px 24px; border-left:3px solid var(--flare); background:var(--panel); border-radius:0 6px 6px 0;
}
.proof-val{
  font-family:var(--display); font-size:2.4rem; line-height:1; color:var(--paper);
}
.proof-lbl{
  font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--flare); margin-top:6px;
}
.proof-note{
  font-size:.88rem; color:var(--paper-mute); margin-top:4px;
}

/* FLOODLIGHT TRANSITION */
.arena-floodlight-beam{
  height:40px; background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(255,68,25,0.18), transparent 70%);
  pointer-events:none;
}

/* ZONE FILTER BAR */
.zone-filters{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px;
}
.zone-filter-btn{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 14px; border-radius:3px; background:var(--panel); border:1px solid var(--line-2);
  color:var(--paper-dim); cursor:pointer; transition:all .2s;
}
.zone-filter-btn:hover{ border-color:var(--flare); color:var(--paper); }
.zone-filter-btn.is-active{ background:var(--flare); color:var(--flare-ink); font-weight:600; border-color:var(--flare); }

/* SCAN LINE & ACCESS GRANTED */
.laser-scan{
  position:absolute; top:0; left:0; right:0; height:2px; background:#10B981;
  box-shadow:0 0 8px #10B981; opacity:0; pointer-events:none;
}
.project-card:hover .laser-scan{
  animation:laserSweep .8s ease-in-out forwards;
}
@keyframes laserSweep{ 0%{ top:0%; opacity:1; } 100%{ top:100%; opacity:0; } }

/* TOURNAMENT RADAR MAP */
.radar-map-wrap{
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:32px 28px; margin-top:36px;
}
.radar-svg{
  width:100%; height:auto; max-height:460px; display:block; filter:drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}
.radar-node{
  cursor:pointer; transition:transform .2s ease;
}
@keyframes flightDash {
  from { stroke-dashoffset: 40; }
  to { stroke-dashoffset: 0; }
}
.flight-arc-path {
  animation: flightDash 2.5s linear infinite;
}
.radar-city-list{
  display:grid; grid-template-columns:repeat(1,1fr); gap:12px; margin-top:24px;
}
@media (min-width:600px){ .radar-city-list{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:960px){ .radar-city-list{ grid-template-columns:repeat(3,1fr); } }
.radar-city-chip{
  width:100%; font:inherit; color:inherit; display:block;
  padding:12px 16px; background:var(--ink-2); border:1px solid var(--line); border-radius:6px;
  cursor:pointer; transition:all .2s ease; text-align:left; user-select:none;
}
.radar-city-chip:hover{
  border-color:var(--flare); background:var(--ink); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.radar-city-chip strong{ display:block; font-family:var(--mono); font-size:12px; color:var(--paper); }
.radar-city-chip span{ font-size:.85rem; color:var(--paper-dim); }

/* DECISION MATRIX */
.decision-grid{
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:32px;
}
@media (min-width:760px){ .decision-grid{ grid-template-columns:repeat(2,1fr); } }
.decision-card{
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px 22px;
}
.decision-trigger{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--flare); margin-bottom:8px;
}
.decision-symptom{
  font-size:.92rem; color:var(--paper-dim); line-height:1.45; margin-bottom:12px;
}
.decision-action{
  font-size:.88rem; color:var(--paper); font-weight:600; border-top:1px dashed var(--line-2); padding-top:10px;
}

/* RADIO DISPATCH LOG IN DYK */
.dispatch-toggle-btn{
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 8px; border-radius:3px; background:transparent; border:1px solid var(--line-2);
  color:var(--paper-mute); cursor:pointer; margin-top:10px; display:inline-flex; align-items:center; gap:6px;
}
.dispatch-toggle-btn:hover{ color:var(--flare); border-color:var(--flare); }
.dispatch-log-box{
  display:none; margin-top:12px; padding:12px 14px; background:var(--ink-2); border-left:2px solid var(--flare);
  border-radius:0 4px 4px 0; font-family:var(--mono); font-size:11px; color:var(--paper-dim); line-height:1.5;
}
.dispatch-log-box.is-open{ display:block; }


/* ============================================================
   SLEEK LUXURY ACCREDITATION BADGE SYSTEM
   ============================================================ */
/* SLEEK FLOATING CREDENTIAL CORNER BADGE */
.floating-pass{
  position:fixed; right:24px; bottom:24px; z-index:90;
  background:rgba(14,18,22,.88); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(238,234,224,.12); border-radius:10px;
  padding:14px 18px; box-shadow:0 20px 45px rgba(0,0,0,.6);
  display:none; flex-direction:column; gap:10px; width:240px;
  transition:border-color .3s, transform .3s var(--ease), opacity .3s var(--ease);
}
.floating-pass.is-hidden{ opacity:0; transform:translateY(16px); pointer-events:none; }
.pass-head-right{ display:flex; align-items:center; gap:10px; }
.pass-close{ width:18px; height:18px; line-height:16px; text-align:center; border-radius:50%; font-size:14px; color:var(--paper-mute); }
.pass-close:hover{ color:var(--paper); background:rgba(238,234,224,.08); }
@media (min-width:1280px){ .floating-pass{ display:flex; } }
.floating-pass:hover{ border-color:var(--flare); transform:translateY(-3px); }
.pass-head{
  display:flex; align-items:center; justify-content:space-between;
}
.pass-label{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-mute);
}
.pass-status-indicator{
  width:7px; height:7px; border-radius:50%; background:#10B981; box-shadow:0 0 6px #10B981;
}
.pass-title{
  font-family:var(--display); font-size:1.35rem; line-height:1; text-transform:uppercase; color:var(--paper);
}
.pass-chips{
  display:flex; gap:4px;
}
.pass-chip{
  font-family:var(--mono); font-size:9px; letter-spacing:.06em; padding:3px 6px; border-radius:2px;
  background:rgba(238,234,224,.04); border:1px solid var(--line); color:var(--paper-mute);
  transition:all .3s;
}
.pass-chip.is-unlocked{
  background:rgba(255,68,25,.18); border-color:var(--flare); color:var(--flare); font-weight:600;
}
.pass-progress-track{
  width:100%; height:3px; background:rgba(238,234,224,.08); border-radius:2px; overflow:hidden;
}
.pass-progress-fill{
  height:100%; width:15%; background:var(--flare); transition:width .4s var(--ease);
}

/* ============================================================
   MAP VIEW TOGGLE, LABELS, CITY CHIPS
   ============================================================ */
.map-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.map-toolbar small{ font-family:var(--mono); font-size:11px; color:var(--paper-mute); letter-spacing:.04em; }
.map-view-btns{ display:flex; gap:6px; }
.radar-node:focus{ outline:none; }
.radar-node:focus-visible .node-halo{ stroke:#fff; stroke-width:2; }
.radar-city-chip.is-active{ border-color:var(--flare); }
@media (max-width:640px){ .radar-map-wrap{ padding:16px 12px !important; } }

/* Project modal: org logo band */
.modal-logo{ margin-top:22px; height:88px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, rgba(255,68,25,.08) 0 2px, transparent 2px 12px), linear-gradient(160deg,#1a1f26,#0d1013); }
.modal-logo img{ max-height:44px; max-width:60%; object-fit:contain; }
.modal-logo.is-photo{ height:auto; aspect-ratio:16/7; overflow:hidden; background:#0d1013; }
.modal-logo.is-photo img{ max-height:none; max-width:none; width:100%; height:100%; object-fit:cover; }
.case-photo img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.case-photo.has-img{ padding:0; overflow:hidden; }

/* Analytics consent bar (only shown when a GA4 id is configured) */
.consent-bar{ position:fixed; left:16px; right:16px; bottom:16px; z-index:150; max-width:560px;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:10px; padding:16px 18px;
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; box-shadow:0 20px 40px rgba(0,0,0,.5); }
.consent-bar p{ flex:1 1 260px; font-size:.88rem; color:var(--paper-dim); }
.consent-bar .btn{ padding:10px 14px; }

body.menu-open{ overflow:hidden; }

/* ============================================================
   EVENT LOG (full list of roles, grouped by year)
   ============================================================ */
.event-log{ border-top:1px solid var(--line); }
.event-year{ display:grid; grid-template-columns:1fr; gap:4px 28px; padding:18px 0; border-bottom:1px solid var(--line); }
@media (min-width:760px){ .event-year{ grid-template-columns:96px 1fr; } }
.event-year-label{ font-family:var(--display); font-weight:800; font-size:1.9rem; line-height:1; color:var(--flare); }
.event-rows{ display:flex; flex-direction:column; }
.event-row{ display:grid; grid-template-columns:1fr; gap:2px 24px; padding:8px 0; }
.event-row + .event-row{ border-top:1px dashed var(--line); }
@media (min-width:760px){ .event-row{ grid-template-columns:1.25fr 1fr; align-items:baseline; } }
.event-name{ font-weight:600; color:var(--paper); }
.event-role{ font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--paper-dim); }
.event-role .org{ color:var(--flare); }
.event-year.is-collapsed{ display:none; }
.event-log-more{ margin-top:24px; }

/* ============================================================
   SOCIAL IMPACT
   ============================================================ */
.impact-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:760px){ .impact-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .impact-grid{ grid-template-columns:repeat(3,1fr); } }
.impact-card{ background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:26px 24px; display:flex; flex-direction:column; gap:12px;
  transition:transform .35s var(--ease), border-color .3s; }
.impact-card:hover{ transform:translateY(-4px); border-color:var(--flare); }
.impact-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.impact-org{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--flare); }
.impact-year{ font-family:var(--mono); font-size:10.5px; color:var(--paper-mute); white-space:nowrap; }
.impact-title{ font-size:1.45rem; line-height:1.08; }
.impact-desc{ color:var(--paper-dim); font-size:.93rem; }

/* ============================================================
   BACKGROUND: education, languages, certificates, titles
   ============================================================ */
.bg-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
@media (min-width:640px){ .bg-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .bg-grid{ grid-template-columns:repeat(4,1fr); } }
.bg-col{ background:var(--panel); padding:26px 22px; }
.bg-col h3{ font-family:var(--mono); font-weight:600; font-size:11px; letter-spacing:.14em; color:var(--paper-mute); margin-bottom:16px; }
.bg-item{ padding:10px 0; }
.bg-item + .bg-item{ border-top:1px dashed var(--line); }
.bg-item strong{ display:block; font-weight:600; color:var(--paper); line-height:1.3; }
.bg-item span{ display:block; margin-top:3px; font-family:var(--mono); font-size:11.5px; color:var(--paper-dim); }
.bg-col.is-titles strong{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.15rem; letter-spacing:.01em; }
.bg-col.is-titles span{ color:var(--flare); }

/* Alternating section surface (applied in markup so the rhythm survives reordering) */
.section.alt{ background:rgba(14,18,22,.92); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ============================================================
   HOBBY PROJECTS TEASER (links to /projects)
   ============================================================ */
.hobby-teaser{ padding-block:72px; }
.hobby-card{ display:flex; flex-wrap:wrap; align-items:center; gap:24px 32px; padding:28px 30px; border-radius:14px;
  background:linear-gradient(120deg, #F3EFE6, #E9E3D6); color:#0A0D10; transition:transform .35s var(--ease), box-shadow .35s; }
.hobby-card:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -20px rgba(255,68,25,.45); }
.hobby-emojis{ display:flex; gap:6px; font-size:2rem; line-height:1; }
.hobby-emojis span{ width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; transition:transform .3s var(--ease); }
.hobby-card:hover .hobby-emojis span:nth-child(odd){ transform:rotate(-8deg) translateY(-3px); }
.hobby-card:hover .hobby-emojis span:nth-child(even){ transform:rotate(8deg) translateY(-3px); }
.hobby-text{ flex:1 1 260px; display:flex; flex-direction:column; gap:6px; }
.hobby-card .eyebrow{ color:#5b6168; }
.hobby-title{ font-family:var(--display); font-weight:900; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1; text-transform:uppercase; }
.hobby-desc{ color:#3c4248; font-size:.98rem; }