:root {
  --bg: #ffffff; --fg: #1f2328; --muted: #656d76; --link: #2b4aa8; --line: #e3e6ea; --accent: #2b4aa8;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="dark"] { --bg: #14171c; --fg: #e6e8eb; --muted: #9aa3ad; --link: #8fa8ff; --line: #2a2f37; --accent: #8fa8ff; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.65 var(--font); }
a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; }

/* top nav */
.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: 820px; margin: 0 auto; padding: 0 20px; height: 52px; display: flex; align-items: center; gap: 22px; }
.nav .brand { white-space: nowrap; font-weight: 600; margin-right: auto; color: var(--fg); }
.nav a.sec { color: var(--muted); font-size: 14px; padding: 14px 0; border-bottom: 2px solid transparent; }
.nav a.sec.active, .nav a.sec:hover { color: var(--fg); border-color: var(--accent); text-decoration: none; }
.nav button { background: none; border: 1px solid var(--line); color: var(--fg); border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.nav button:hover { border-color: var(--accent); }

main { max-width: 820px; margin: 0 auto; padding: 36px 20px 80px; }
.hero { display: flex; gap: 28px; align-items: center; margin-bottom: 24px; }
.hero img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; }
.hero h1 { margin: 0; font-size: 2.1rem; line-height: 1.2; }
.hero .tag { color: var(--muted); font-size: 1.1rem; margin: 6px 0 12px; }
.icons { display: flex; gap: 10px; flex-wrap: wrap; }
.icons a { border: 1px solid var(--line); border-radius: 999px; padding: 2px 12px; font-size: 13px; color: var(--fg); }
.icons a:hover { border-color: var(--accent); text-decoration: none; }
.about p { margin: 0 0 14px; }

section { margin-top: 48px; }
h2 { font-size: 1.5rem; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.item { display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; margin-bottom: 20px; }
.item .t { font-weight: 600; }
.item .o { color: var(--muted); }
.item .r { text-align: right; color: var(--muted); font-size: 14px; }
.item ul { grid-column: 1 / -1; margin: 6px 0 0; padding-left: 20px; }
.item li { margin: 2px 0; }
/* roomier spacing overall */
main { line-height: 1.7; }
.item { margin-bottom: 30px; }
.item li { margin: 4px 0; }
section { margin-top: 64px; }
/* certifications as a card grid */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid .item { display: block; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
.grid .item .head { align-items: flex-start; }
.grid .item .logo { width: 56px; height: 40px; }
.grid .item .t { font-size: 15px; line-height: 1.4; }
.grid .item .o { font-size: 13px; margin-top: 2px; }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }
body.ats .grid { display: block; } body.ats .grid .item { border: 0; padding: 0; margin-bottom: 6px; border-radius: 0; }
body.ats .item { margin-bottom: 10px; } body.ats section { margin-top: 16px; } body.ats main { line-height: 1.4; }
.item .head { display: flex; gap: 14px; align-items: center; }
.item .logo { width: 76px; height: 44px; object-fit: contain; border-radius: 6px; background: #fff; padding: 3px; border: 1px solid var(--line); flex: none; }
body.ats .item .head { display: block; } body.ats .item .logo { display: none; }
.item .sub { grid-column: 1 / -1; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent); }
body.ats .item .sub { color: #000; font-size: 11pt; font-style: italic; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.chips span { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 999px; padding: 2px 12px; font-size: 14px; }
.group { font-weight: 600; }
.ph { background: #fff3bf; color: #5c4600; border-radius: 3px; padding: 0 3px; }
:root[data-theme="dark"] .ph { background: #4a3d00; color: #ffe58a; }

/* ATS view: single column, plain, no decoration */
body.ats { font: 11pt/1.4 Arial, Helvetica, sans-serif; --fg: #000; --bg: #fff; --muted: #000; --link: #000; --line: #000; }
body.ats .nav-inner { max-width: 760px; }
body.ats .nav a.sec { display: none; }
body.ats main { max-width: 760px; padding-top: 24px; }
body.ats .hero { display: block; margin-bottom: 8px; }
body.ats .hero img, body.ats .icons, body.ats .about { display: none; }
body.ats .hero h1 { font-size: 20pt; }
body.ats .hero .tag { font-size: 11pt; margin: 2px 0; }
body.ats .contact { display: block; }
body.ats h2 { font-size: 12pt; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid #000; margin-bottom: 8px; }
body.ats section { margin-top: 16px; }
body.ats .item { display: block; margin-bottom: 10px; }
body.ats .item .r { text-align: left; font-size: 11pt; }
body.ats .chips { display: block; } body.ats .chips span { background: none; padding: 0; border-radius: 0; font-size: 11pt; }
body.ats .chips span:not(:last-child)::after { content: ", "; }
body.ats .ph { background: none; color: #000; }
.contact { display: none; }
.summary { display: none; } body.ats .summary { display: block; }

@media (max-width: 640px) {
  .hero { flex-direction: column; align-items: flex-start; }
  .nav a.sec { display: none; }
  .item { grid-template-columns: 1fr; } .item .r { text-align: left; }
}
@media print {
  .nav { display: none; }
  html { scroll-padding-top: 0; }
  body { font-size: 10.5pt; }
  main { padding: 0; max-width: none; }
  section { margin-top: 22px; break-inside: auto; } .item { break-inside: avoid; margin-bottom: 16px; }
  .grid { gap: 8px; } .grid .item { padding: 8px 10px; margin: 0; }
  body.ats section { margin-top: 16px; } body.ats .item { margin-bottom: 10px; }
  .ph { background: none; color: inherit; }
  @page { margin: 14mm; }
}

/* experience: highlights + collapsible details */
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.stat { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stat b { display: block; font-size: 1.35rem; line-height: 1.2; color: var(--accent); }
.stat span { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.toggle { grid-column: 1 / -1; justify-self: start; margin-top: 10px; background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-size: 14px; cursor: pointer; }
.toggle:hover { text-decoration: underline; }
.more { grid-column: 1 / -1; display: none; }
.item.open .more { display: block; }
.stat, .item .more { }
/* CliftonStrengths */
.strengths { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.str { position: relative; border-radius: 12px; padding: 18px 14px 14px; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.str i { font-style: normal; font-size: 12px; opacity: .85; }
.str b { font-size: 1rem; overflow-wrap: anywhere; }
.str span { font-size: 12px; opacity: .9; }
.str.drelationship { background: #2b6cb0; } .str.dstrategic { background: #2f855a; }
.str.dexecuting { background: #6b46c1; } .str.dinfluencing { background: #c05621; }
.strtext { display: none; }
body.ats .strengths, body.ats .stats, body.ats .toggle { display: none; }
body.ats .more { display: block; } body.ats .strtext { display: block; margin: 0; }
@media print {
  .toggle { display: none; } .more { display: block; }
  .stats { margin: 8px 0 0; } .stat { padding: 6px 10px; }
  .str { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (max-width: 640px) { .item .head ~ .stats { grid-template-columns: 1fr 1fr; } }

/* expanded details: one card per theme, two columns, airy bullets */
.item.open .more { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.grp { background: color-mix(in srgb, var(--accent) 5%, transparent); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; padding: 14px 18px 8px; break-inside: avoid; }
.grp .sub { margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.grp ul { list-style: none; padding: 0; margin: 0; }
.grp li { position: relative; padding-left: 16px; margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.grp li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .55; }
@media (max-width: 760px) { .item.open .more { grid-template-columns: 1fr; } }
/* ATS + print keep it plain and fully open */
body.ats .more { display: block; }
body.ats .grp { background: none; border: 0; padding: 0; border-radius: 0; }
body.ats .grp .sub { text-transform: none; letter-spacing: 0; font-size: 11pt; font-style: italic; color: #000; margin: 6px 0 2px; }
body.ats .grp ul { list-style: disc; padding-left: 20px; } body.ats .grp li { padding-left: 0; margin: 2px 0; font-size: 11pt; line-height: 1.4; }
body.ats .grp li::before { display: none; }
@media print { .more { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .grp { padding: 8px 12px 2px; } .grp li { font-size: 9.5pt; margin-bottom: 6px; } body.ats .more { display: block; } }

/* visual shows only the strongest bullets; ATS shows all */
.item .x { display: none; }
body.ats .item .x { display: list-item; }
/* monogram tile for organisations without a logo */
.item .logo.badge { display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
body.ats .item .logo.badge { display: none; }

/* skills: four scannable cards (visual) / plain lines (ATS) */
.skgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.skcard { border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px 8px; }
.skcard h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.skcard ul { list-style: none; margin: 0; padding: 0; }
.skcard li { padding: 9px 0; border-top: 1px solid var(--line); line-height: 1.4; }
.skcard li:first-child { border-top: 0; padding-top: 0; }
.skcard li b { display: block; font-weight: 600; font-size: 15px; }
.skcard li span { display: block; color: var(--muted); font-size: 13px; margin-top: 1px; }
.skats { display: none; }
body.ats .skgrid { display: none; } body.ats .skats { display: block; } body.ats .skats p { margin: 0 0 4px; }
@media (max-width: 760px) { .skgrid { grid-template-columns: 1fr; } }
@media print { .skcard { break-inside: avoid; padding: 10px 14px 4px; } .skgrid { gap: 10px; } .skcard li { padding: 5px 0; } .skcard li b { font-size: 9.5pt; } .skcard li span { font-size: 8.5pt; } body.ats .skgrid { display: none; } }

/* CliftonStrengths tooltips: hover, keyboard focus, or tap */
.str { cursor: help; outline-offset: 3px; }
.str .tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); width: 220px; padding: 10px 12px; border-radius: 8px; background: var(--fg); color: var(--bg); font-style: normal; font-size: 13px; line-height: 1.45; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 5; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.str .tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--fg); }
.str:hover .tip, .str:focus .tip { opacity: 1; transform: translateX(-50%); }
.str:first-child .tip { left: 0; transform: translateY(4px); } .str:first-child:hover .tip, .str:first-child:focus .tip { transform: none; }
.str:first-child .tip::after { left: 28px; }
.str:last-child .tip { left: auto; right: 0; transform: translateY(4px); } .str:last-child:hover .tip, .str:last-child:focus .tip { transform: none; }
.str:last-child .tip::after { left: auto; right: 28px; margin-left: 0; }
body.ats .tip { display: none; }
@media print { .tip { display: none; } }
.strengths { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.str b { font-size: .95rem; }
@media (max-width: 640px) { .strengths { grid-template-columns: repeat(2, minmax(0, 1fr)); } .str .tip { width: 180px; } }
.str { padding: 16px 10px 12px 12px; }
.str b { font-size: .88rem; overflow-wrap: normal; hyphens: none; white-space: nowrap; }
@media (max-width: 640px) { .str b { font-size: .95rem; white-space: normal; } }

/* certifications: top picks + "show all"; ATS and print-ATS show everything */
.grid:not(.all) .cmore { display: none; }
body.ats .grid .cmore { display: block; }
.gtoggle { margin-top: 14px; background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-size: 14px; cursor: pointer; }
.gtoggle:hover { text-decoration: underline; }
body.ats .gtoggle { display: none; } @media print { .gtoggle { display: none; } }
/* promotion line under TDCX */
.prog { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; margin-top: 8px; font-size: 13px; color: var(--muted); }
.prog em { font-style: normal; font-weight: 600; margin-right: 8px; color: var(--accent); }
.prog span:not(:last-child)::after { content: "→"; margin: 0 8px; opacity: .6; }
.prog small { font-size: 12px; }
body.ats .prog { display: block; font-size: 11pt; margin: 2px 0; } body.ats .prog em { font-style: italic; color: #000; }
body.ats .prog span { display: inline; } body.ats .prog span:not(:last-child)::after { content: ";"; margin: 0 4px 0 0; opacity: 1; }

/* ===== Visual hero: navy + amber ===== */
:root { --hero-bg: #101a38; --hero-glow: #2b3f86; --amber: #ffb547; --hero-soft: #8fa6e8; --hero-text: #c7d0ea; }
body { overflow-x: hidden; }
.herod { width: 100vw; margin: -36px 0 0 calc(50% - 50vw); background: radial-gradient(900px 340px at 85% 0%, var(--hero-glow) 0%, transparent 62%), var(--hero-bg); color: #fff; padding: 48px 20px 40px; }
.herod-in { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: 1fr 210px; gap: 28px; align-items: center; }
.herod-hi { color: var(--hero-soft); font-weight: 600; margin-bottom: 4px; }
.herod h1 { margin: 0; font-size: 3.3rem; line-height: 1.05; letter-spacing: -.02em; } .herod h1 em { font-style: normal; color: var(--amber); }
.herod-sub { color: var(--hero-text); font-size: 1.15rem; margin: 14px 0 22px; max-width: 34ch; }
.herod-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.herod .btn { display: inline-block; border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; border: 1px solid var(--hero-soft); color: #fff; text-decoration: none; }
.herod .btn:hover { border-color: #fff; text-decoration: none; }
.herod .btn.p { background: var(--amber); border-color: var(--amber); color: #101a38; } .herod .btn.p:hover { filter: brightness(1.08); }
.herod-ats { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--hero-text); text-decoration: underline; text-underline-offset: 3px; } .herod-ats:hover { color: #fff; }
.herod-photo { position: relative; width: 210px; height: 210px; border-radius: 50%; overflow: hidden; border: 4px solid rgba(255,255,255,.25); background: linear-gradient(160deg, #3a4f96, #1c2c63); display: flex; align-items: center; justify-content: center; justify-self: center; }
.herod-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.herod-photo .mono { font-size: 4rem; font-weight: 700; color: var(--amber); letter-spacing: .02em; }
.herod-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.herod-chips span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 8px 14px; font-size: 13px; color: var(--hero-text); }
.herod-chips b { color: var(--amber); font-size: 1.1rem; margin-right: 6px; }
@media (max-width: 640px) { .herod { padding: 32px 20px 28px; } .herod-in { grid-template-columns: 1fr; } .herod h1 { font-size: 2.4rem; } .herod-photo { width: 150px; height: 150px; justify-self: start; order: -1; } .herod-photo .mono { font-size: 3rem; } }
@media print { .herod { margin-top: 0; padding: 22px 20px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .herod-btns, .herod-ats { display: none; } .herod h1 { font-size: 2.2rem; } .herod-photo { width: 120px; height: 120px; } .herod-photo .mono { font-size: 2.4rem; } .herod-chips { margin-top: 0; } }
.herod + .about { margin-top: 40px; } @media print { .herod + .about { margin-top: 20px; } }

/* ===== Hero photo as a cut-out standing on the banner (no circle) ===== */
.herod { padding-bottom: 0; overflow: hidden; }
.herod-in { grid-template-columns: 1fr 330px; grid-template-rows: auto auto; column-gap: 24px; align-items: center; }
.herod-copy { grid-column: 1; grid-row: 1; padding-top: 4px; }
.herod-chips { grid-column: 1; grid-row: 2; margin: 8px 0 36px; }
.herod-photo { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end; width: 100%; max-width: 330px; height: auto; min-height: 260px; border: 0; border-radius: 0; background: none; overflow: visible; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.herod-photo::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 120%; aspect-ratio: 1; transform: translate(-50%, 45%); border-radius: 50%; background: radial-gradient(circle, rgba(255,181,71,.28) 0%, rgba(255,181,71,0) 62%); pointer-events: none; }
.herod-photo img { position: relative; inset: auto; width: auto; height: auto; max-width: 100%; max-height: 400px; object-fit: contain; object-position: bottom; display: block; }
.herod-photo .mono { position: relative; font-size: 7.5rem; line-height: 1; font-weight: 800; color: rgba(255,181,71,.22); letter-spacing: .02em; margin-bottom: 18px; }
.herod-photo.has .mono { display: none; }
.herod h1 { font-size: 3.8rem; }
@media (max-width: 640px) {
  .herod { padding-bottom: 0; }
  .herod-in { grid-template-columns: 1fr; }
  .herod-copy, .herod-chips, .herod-photo { grid-column: 1; grid-row: auto; }
  .herod-photo { order: 3; justify-self: center; max-width: 280px; min-height: 0; margin-top: 4px; } .herod-chips { order: 2; margin-bottom: 20px; } .herod-copy { order: 1; }
  .herod h1 { font-size: 2.8rem; } .herod-photo img { max-height: 300px; } .herod-photo .mono { font-size: 5rem; }
}
@media print { .herod { padding-bottom: 0; } .herod-photo { max-width: 200px; min-height: 0; } .herod-photo img { max-height: 220px; } .herod-photo .mono { font-size: 4rem; } .herod h1 { font-size: 2.6rem; } .herod-chips { margin-bottom: 20px; } }

/* larger hero photo: taller banner, bigger cut-out (he faces left, toward the text, so it stays on the right) */
.herod-in { grid-template-columns: 1fr 390px; }
.herod-photo { max-width: 390px; min-height: 300px; }
.herod-photo img { max-height: 520px; }
.herod-photo .mono { font-size: 9rem; }
@media (max-width: 860px) { .herod-in { grid-template-columns: 1fr 300px; } .herod-photo { max-width: 300px; } .herod-photo img { max-height: 400px; } }
@media (max-width: 640px) { .herod-in { grid-template-columns: 1fr; } .herod-photo { max-width: 340px; } .herod-photo img { max-height: 440px; } }
@media print { .herod-photo { max-width: 240px; } .herod-photo img { max-height: 280px; } .herod-in { grid-template-columns: 1fr 240px; } }

/* photo on the LEFT: he faces right, so he looks toward the text */
.herod { background: radial-gradient(900px 340px at 15% 0%, var(--hero-glow) 0%, transparent 62%), var(--hero-bg); }
.herod-in { grid-template-columns: 390px 1fr; column-gap: 32px; }
.herod-photo { grid-column: 1; grid-row: 1 / span 2; justify-self: start; }
.herod-copy { grid-column: 2; grid-row: 1; }
.herod-chips { grid-column: 2; grid-row: 2; }
@media (max-width: 860px) { .herod-in { grid-template-columns: 300px 1fr; } }
@media (max-width: 640px) { .herod-in { grid-template-columns: 1fr; } .herod-copy, .herod-chips, .herod-photo { grid-column: 1; grid-row: auto; } .herod-photo { justify-self: center; } }
@media print { .herod-in { grid-template-columns: 240px 1fr; } }

/* ATS-only trims: shorter TDCX list, fewer certifications, single-line strengths */
body.ats .y, body.ats .na { display: none; }
body.ats .strline { margin: 14px 0 0; }

/* ===== ATS compact layout: one-line headers, tight spacing (target: 2 pages) ===== */
body.ats { font-size: 10pt; line-height: 1.32; }
body.ats main { padding-top: 14px; }
body.ats h2 { font-size: 11pt; margin: 0 0 4px; padding-bottom: 2px; }
body.ats section { margin-top: 10px; }
body.ats .hero h1 { font-size: 17pt; } body.ats .hero .tag { font-size: 10pt; }
body.ats .item { display: grid; grid-template-columns: 1fr auto; gap: 0 14px; margin-bottom: 5px; }
body.ats .item .head { display: block; }
body.ats .item .head > div > div { display: inline; }
body.ats .item .head .o::before { content: ", "; }
body.ats .item .t { font-weight: 700; } body.ats .item .o { color: #000; }
body.ats .item .r { text-align: right; font-size: 10pt; white-space: nowrap; }
body.ats .item .r br { display: none; } body.ats .item .r span + span { margin-left: 10px; }
body.ats .item .sub { grid-column: 1 / -1; font-size: 10pt; margin: 3px 0 0; }
body.ats .item ul, body.ats .grp ul { grid-column: 1 / -1; margin: 1px 0 0; padding-left: 18px; }
body.ats .grp li, body.ats .item li { margin: 0 0 1px; font-size: 10pt; line-height: 1.32; }
body.ats .prog { grid-column: 1 / -1; font-size: 9.5pt; margin: 0 0 2px; }
body.ats .grid .item { display: block; margin-bottom: 2px; padding: 0; }
body.ats .skats p { margin: 0 0 2px; }
body.ats .strline { margin: 8px 0 0; }
@media print { body.ats { font-size: 10pt; } @page { margin: 12mm; } }
body.ats .item .y, body.ats .item.na, body.ats .grp li.y { display: none !important; }
body.ats .item .r br + span { margin-left: 12px; }

/* ===== Ticker: "Worked with and certified by" ===== */
.ticker { width: 100vw; margin: 0 0 0 calc(50% - 50vw); background: #0b1430; padding: 18px 0 20px; overflow: hidden; }
.ticker-label { text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); font-weight: 600; margin-bottom: 14px; }
.tk-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.tk-row + .tk-row { margin-top: 10px; }
.tk-track { display: flex; gap: 12px; width: max-content; animation: tk-left 40s linear infinite; padding: 2px 0; }
.tk-row.rev .tk-track { animation-name: tk-right; }
.ticker:hover .tk-track { animation-play-state: paused; }
@keyframes tk-left { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
@keyframes tk-right { from { transform: translateX(calc(-50% - 6px)); } to { transform: translateX(0); } }
.tk { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 10px; padding: 7px 14px 7px 10px; flex: none; }
.tk img { height: 26px; width: auto; max-width: 88px; object-fit: contain; display: block; }
.tk b { color: #101a38; font-size: 13px; font-weight: 600; white-space: nowrap; }
.ticker + .about { margin-top: 44px; }
body.ats .ticker, body.ats #foot { display: none; }
@media (prefers-reduced-motion: reduce) { .tk-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; padding: 0 20px; } .tk-row { -webkit-mask-image: none; mask-image: none; } .tk-track .tk:nth-child(n+6):nth-child(-n+10) { } }
@media print { .ticker, #foot { display: none; } }

/* ===== Match the hero below: navy headings, amber accents, navy footer ===== */
:root { --head: #101a38; --deco: #ffb547; }
:root[data-theme="dark"] { --head: #ffffff; }
body:not(.ats) h2 { color: var(--head); border-bottom: 1px solid var(--line); position: relative; }
body:not(.ats) h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 3px; border-radius: 2px; background: var(--deco); }
body:not(.ats) .nav a.sec.active, body:not(.ats) .nav a.sec:hover { border-color: var(--deco); }
body:not(.ats) .item .t { color: var(--head); }
body:not(.ats) .stat { border-top: 3px solid var(--deco); } body:not(.ats) .stat b { color: var(--head); }
body:not(.ats) .grp { border-left-color: var(--deco); background: color-mix(in srgb, var(--deco) 7%, transparent); }
body:not(.ats) .grp .sub { color: var(--head); } body:not(.ats) .grp li::before { background: var(--deco); opacity: 1; }
body:not(.ats) .skcard { border-top: 3px solid var(--deco); } body:not(.ats) .skcard h3 { color: var(--head); }
body:not(.ats) .prog em { color: var(--head); }
body:not(.ats) .grid .item { border-left: 3px solid var(--deco); }
body:not(.ats) .chips span { background: color-mix(in srgb, var(--deco) 14%, transparent); }
#foot { margin-top: 80px; background: radial-gradient(900px 300px at 15% 0%, var(--hero-glow) 0%, transparent 62%), var(--hero-bg); color: #fff; }
.foot-in { max-width: 820px; margin: 0 auto; padding: 44px 20px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.foot-hi { font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; color: var(--amber); } .foot-sub { color: var(--hero-text); margin-top: 4px; }
.foot-btns { display: flex; gap: 10px; flex-wrap: wrap; }
#foot .btn { display: inline-block; border-radius: 8px; padding: 9px 16px; font-size: 14px; font-weight: 600; border: 1px solid var(--hero-soft); color: #fff; text-decoration: none; } #foot .btn:hover { border-color: #fff; text-decoration: none; }
#foot .btn.p { background: var(--amber); border-color: var(--amber); color: #101a38; }
main { padding-bottom: 20px; }

/* ===== v2: calmer middle of the page. One treatment per content type; navy and amber stay in hero, ticker and footer ===== */
body:not(.ats) h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); font-weight: 600; border: 0; border-top: 1px solid var(--line); padding: 14px 0 0; margin: 0 0 30px; }
body:not(.ats) h2::after { display: none; }
body:not(.ats) section { margin-top: 72px; }
body:not(.ats) .about p { font-size: 1.06rem; line-height: 1.75; max-width: 68ch; margin: 0 0 16px; }

/* Experience and education: timeline rows */
.tl-row { display: grid; grid-template-columns: 170px 1fr; gap: 0 28px; padding: 0 0 38px; }
.tl-meta { padding-top: 3px; }
.tl-dates { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-place { font-size: 13px; color: var(--muted); opacity: .8; margin-top: 2px; }
.tl-main h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; color: var(--head); }
.tl-org { display: flex; align-items: center; gap: 8px; color: var(--muted); margin-top: 3px; font-size: 15px; }
.tl-logo { height: 20px; width: auto; max-width: 46px; object-fit: contain; border-radius: 3px; }
.tl-prog { list-style: none; margin: 12px 0 2px; padding: 0 0 0 14px; border-left: 2px solid var(--line); font-size: 13.5px; }
.tl-prog li { padding: 2px 0; } .tl-prog span { display: inline-block; width: 150px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-sub { margin: 18px 0 2px; font-size: 13px; font-weight: 600; color: var(--head); }
.tl-main ul { margin: 6px 0 0; padding-left: 18px; } .tl-main li { margin: 5px 0; line-height: 1.6; }
.tl-row .x { display: none; } .tl-row.open .x { display: list-item; }
.tl-row.older .tl-main li { color: color-mix(in srgb, var(--fg) 84%, transparent); }
.rtoggle, .ctoggle { margin-top: 14px; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Skills: tabs on the left, one list at a time */
.sk { display: grid; grid-template-columns: 230px 1fr; gap: 32px; }
.sk-tabs { display: flex; flex-direction: column; gap: 2px; }
.sk-tab { text-align: left; background: none; border: 0; border-left: 2px solid var(--line); padding: 9px 14px; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; }
.sk-tab:hover { color: var(--head); } .sk-tab.on { color: var(--head); border-left-color: var(--deco); font-weight: 600; }
.sk-panel { display: none; } .sk-panel.on { display: block; } .sk-h { display: none; }
.sk-panel ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 36px; }
.sk-panel li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.sk-panel li b { display: block; font-weight: 600; font-size: 15px; } .sk-panel li span { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }

/* Certifications and registrations: equal tiles, grouped by theme */
.cwrap .cg { margin-bottom: 34px; } .cg h3 { font-size: 13px; font-weight: 600; color: var(--head); margin: 0 0 12px; }
.cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ct { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); }
.ct-logo { width: 44px; height: 32px; object-fit: contain; flex: none; background: #fff; border-radius: 6px; }
.ct-logo.badge { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--head); background: color-mix(in srgb, var(--fg) 7%, var(--bg)); }
.ct-t { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--head); }
.ct-t a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ct-t span { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }
.cwrap:not(.all) .cmore { display: none; }

@media (max-width: 760px) {
  .tl-row { grid-template-columns: 1fr; gap: 4px; } .tl-meta { display: flex; gap: 10px; align-items: baseline; }
  .tl-prog span { display: block; width: auto; }
  .sk { grid-template-columns: 1fr; gap: 14px; } .sk-tabs { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .sk-tab { border-left: 0; border-bottom: 2px solid var(--line); white-space: nowrap; padding: 8px 10px; } .sk-tab.on { border-bottom-color: var(--deco); }
  .sk-panel ul { columns: 1; } .cgrid { grid-template-columns: 1fr; }
}
@media print {
  .tl-row { break-inside: avoid; padding-bottom: 14px; grid-template-columns: 120px 1fr; }
  .rtoggle, .ctoggle { display: none; }
  .sk { grid-template-columns: 1fr; } .sk-tabs { display: none; } .sk-panel { display: block !important; margin-bottom: 8px; } .sk-h { display: block; font-size: 10pt; margin: 8px 0 2px; }
  .sk-panel ul { columns: 2; } .ct { break-inside: avoid; padding: 6px 10px; }
  body:not(.ats) section { margin-top: 26px; } body:not(.ats) h2 { margin-bottom: 14px; }
}
@media print { body.ats { } @page { margin: 10mm 12mm; } }
@media print { body.ats .item { break-inside: auto; } body.ats .item li, body.ats .item .sub { break-inside: avoid; } body.ats .item .sub { break-after: avoid; } }
.tl-logo { background: #fff; padding: 2px 5px; height: 24px; box-sizing: border-box; }

/* ===== Experience as cards (no coloured edges): logo, role, dates, grouped bullets ===== */
.rcs { display: flex; flex-direction: column; gap: 18px; }
.rc { border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px 22px; background: var(--bg); }
.rc-head { display: flex; align-items: center; gap: 16px; }
.rc-logo { width: 52px; height: 52px; object-fit: contain; flex: none; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.rc-title { flex: 1; min-width: 0; } .rc-title h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; color: var(--head); }
.rc-org { color: var(--muted); font-size: 15px; margin-top: 2px; }
.rc-when { text-align: right; font-size: 13.5px; color: var(--muted); line-height: 1.5; flex: none; font-variant-numeric: tabular-nums; }
.rc-prog { list-style: none; margin: 16px 0 0; padding: 12px 14px; background: color-mix(in srgb, var(--fg) 4%, transparent); border-radius: 10px; font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: baseline; }
.rc-prog em { font-style: normal; font-weight: 600; color: var(--head); width: 100%; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.rc-prog li span { display: block; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.rc-stat { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.rc-stat b { display: block; font-size: 1.3rem; line-height: 1.2; color: var(--head); }
.rc-stat span { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.rc-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 36px; margin-top: 14px; }
.rc-sub { margin: 12px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rc ul { margin: 6px 0 0; padding-left: 18px; } .rc li { margin: 6px 0; line-height: 1.6; font-size: 15px; }
.rc-flat { margin-top: 14px; }
.rc .x { display: none; } .rc.open .x { display: list-item; }
.rc.older .rc-logo { width: 44px; height: 44px; }
@media (max-width: 760px) { .rc { padding: 18px 18px 16px; } .rc-head { flex-wrap: wrap; } .rc-when { text-align: left; width: 100%; padding-left: 68px; margin-top: -6px; } .rc-groups { grid-template-columns: 1fr; } .rc-logo { width: 46px; height: 46px; } }
@media print { .rc { break-inside: avoid; padding: 12px 14px; margin-bottom: 8px; } .rc-groups { grid-template-columns: 1fr 1fr; } .rc li { font-size: 9.5pt; margin: 3px 0; } .rtoggle { display: none; } }

/* ===== Contact gate (modal) ===== */
.herod button.btn, #foot button.btn { font-family: inherit; cursor: pointer; background: transparent; }
.herod button.btn.p, #foot button.btn.p { background: var(--amber); }
.gate[hidden] { display: none; } .gate { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gate-back { position: absolute; inset: 0; background: rgba(8, 14, 34, .72); backdrop-filter: blur(3px); }
.gate-card { position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow: auto; background: #fff; color: #1f2328; border-radius: 16px; padding: 30px 28px 26px; box-shadow: 0 24px 60px rgba(0,0,0,.4); border-top: 6px solid var(--hero-bg); }
.gate-x { position: absolute; right: 12px; top: 8px; border: 0; background: none; font-size: 28px; line-height: 1; color: #656d76; cursor: pointer; }
.gate-card h2 { margin: 0 0 6px; font-size: 1.35rem; color: #101a38; border: 0; padding: 0; text-transform: none; letter-spacing: 0; }
.gate-card h2::after { display: none; }
.gate-sub { margin: 0 0 18px; color: #4a5260; font-size: 14.5px; line-height: 1.55; }
.gate-form { display: flex; flex-direction: column; gap: 14px; }
.gate-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: #101a38; }
.gate-form input:not([type="checkbox"]) { font: inherit; font-size: 15px; font-weight: 400; padding: 10px 12px; border: 1px solid #c9ced6; border-radius: 8px; color: #1f2328; background: #fff; }
.gate-form input:focus { outline: 2px solid #ffb547; outline-offset: 1px; border-color: #101a38; }
.gate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gate-check { flex-direction: row !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; font-size: 13px !important; color: #4a5260 !important; line-height: 1.5; }
.gate-check input { margin-top: 3px; flex: none; }
.gate-code { letter-spacing: .4em; font-size: 22px !important; text-align: center; }
.gate-btn { background: #ffb547; color: #101a38; border: 0; border-radius: 8px; padding: 12px 18px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.gate-btn:disabled { opacity: .6; cursor: wait; } .gate-btn:hover:not(:disabled) { filter: brightness(1.06); }
.gate-err { margin: 0; padding: 9px 12px; background: #fdecea; color: #8a1c14; border-radius: 8px; font-size: 13.5px; line-height: 1.45; } .gate-err[hidden] { display: none; }
.gate-note { margin: 0; font-size: 12.5px; color: #656d76; }
.gate-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gate-link { background: none; border: 0; padding: 0; font: inherit; font-size: 13.5px; color: #2b4aa8; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .gate-link:disabled { color: #8a919c; cursor: default; text-decoration: none; }
.gate-contact { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
.gate-contact a { display: block; border: 1px solid #dfe3e8; border-radius: 10px; padding: 11px 14px; color: #101a38; font-weight: 600; text-decoration: none; }
.gate-contact a:hover { border-color: #101a38; } .gate-contact a span { display: block; font-size: 12px; font-weight: 600; color: #656d76; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 480px) { .gate-row { grid-template-columns: 1fr; } .gate-card { padding: 26px 20px 22px; } }
@media print { .gate { display: none !important; } }
.gate .gate-card h2 { font-size: 1.35rem; color: #101a38; text-transform: none; letter-spacing: 0; border: 0; padding: 0; margin: 0 0 6px; font-weight: 700; }
.gate .gate-card h2::after { display: none; }
.gate-form input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; min-width: 0; }
.gate-row > label { min-width: 0; }
.gate-card { overflow-x: hidden; }

/* =====================================================================
   Apple HIG layer
   - System type (SF on Apple devices), 17px body, tight tracking on large text
   - Content layer: grouped surfaces (standard material), concentric radii, no glass
   - Liquid Glass ONLY on the controls and navigation layer: floating nav, buttons over the hero, the contact sheet
   - Respects Reduce Motion, Reduce Transparency, Increase Contrast; 44px touch targets
   ===================================================================== */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --bg: #ffffff; --fg: #1d1d1f; --head: #1d1d1f; --muted: #6e6e73; --line: rgba(60, 60, 67, .14); --link: #0066cc;
  --grouped: #f5f5f7; --elev: #ffffff;
  --glass: rgba(255, 255, 255, .56); --glass-edge: rgba(255, 255, 255, .72); --glass-shadow: 0 10px 34px rgba(0, 0, 0, .12);
  --fill: rgba(120, 120, 128, .14);
}
:root[data-theme="dark"] {
  --bg: #000000; --fg: #f5f5f7; --head: #f5f5f7; --muted: #a1a1a6; --line: rgba(235, 235, 245, .16); --link: #2997ff;
  --grouped: #1c1c1e; --elev: #2c2c2e;
  --glass: rgba(40, 40, 44, .52); --glass-edge: rgba(255, 255, 255, .2); --glass-shadow: 0 10px 34px rgba(0, 0, 0, .55);
  --fill: rgba(120, 120, 128, .32);
}
html { scroll-padding-top: 92px; }
body { font: 17px/1.47 var(--font); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid rgba(0, 113, 227, .55); outline-offset: 2px; border-radius: 8px; }
:root[data-theme="dark"] :focus-visible { outline-color: rgba(41, 151, 255, .7); }

/* --- Navigation layer: floating Liquid Glass bar --- */
.nav { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); width: min(920px, calc(100% - 24px)); z-index: 40; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .5); }
.nav-inner { max-width: none; height: 56px; padding: 0 10px 0 22px; gap: 4px; }
.nav .brand { font-weight: 600; font-size: 17px; letter-spacing: -.02em; color: var(--fg); }
.nav a.sec { padding: 9px 14px; border: 0; border-radius: 999px; font-size: 15px; color: var(--muted); }
.nav a.sec:hover, .nav a.sec.active { background: var(--fill); color: var(--fg); text-decoration: none; }
.nav button { min-height: 40px; border: 0; border-radius: 999px; background: var(--fill); color: var(--fg); padding: 0 16px; font: inherit; font-size: 14px; font-weight: 500; }
.nav button:hover { background: color-mix(in srgb, var(--fill) 70%, var(--fg) 12%); }
body:not(.ats) main { padding-top: 0; }
body.ats main { padding-top: 92px; }

/* --- Content layer: type scale --- */
body:not(.ats) h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); line-height: 1.12; letter-spacing: -.028em; text-transform: none; font-weight: 700; color: var(--head); border: 0; padding: 0; margin: 0 0 28px; }
body:not(.ats) h2::after { display: none; }
body:not(.ats) section { margin-top: 92px; }
body:not(.ats) .about p { font-size: 1.22rem; line-height: 1.5; letter-spacing: -.018em; max-width: 60ch; margin: 0 0 18px; color: var(--fg); }
body:not(.ats) .about p + p { color: color-mix(in srgb, var(--fg) 78%, transparent); }
.herod { margin-top: 0; padding-top: 112px; }
.herod h1 { font-size: clamp(3.4rem, 8vw, 5rem); letter-spacing: -.035em; line-height: 1; }
.herod-hi { font-size: 1.05rem; }
.herod-sub { font-size: 1.3rem; line-height: 1.38; letter-spacing: -.016em; }

/* --- Controls over the hero and footer: capsule + Liquid Glass (secondary), solid tinted (primary) --- */
.herod .btn, #foot .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.herod .btn:not(.p), #foot .btn:not(.p) { background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 4px 16px rgba(0, 0, 0, .2); color: #fff; }
.herod .btn:not(.p):hover, #foot .btn:not(.p):hover { background: rgba(255, 255, 255, .22); text-decoration: none; }
.herod .btn.p, #foot .btn.p { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 18px rgba(255, 181, 71, .28); }
.herod-ats { font-size: 14px; }

/* --- Content layer: grouped surfaces with concentric corners (outer 24, inner 14) --- */
.rcs { gap: 16px; }
.rc { background: var(--grouped); border: 0; border-radius: 24px; padding: 30px; }
.rc-logo { border: 0; border-radius: 14px; background: #fff; }
.rc-title h3 { font-size: 1.32rem; letter-spacing: -.022em; font-weight: 700; }
.rc-org { font-size: 16px; } .rc-when { font-size: 14px; }
.rc-prog, .rc-stat { background: var(--elev); border: 0; border-radius: 14px; }
.rc li { font-size: 16px; line-height: 1.5; margin: 7px 0; }
.rc-sub { font-size: 12.5px; letter-spacing: .05em; }
.ct { background: var(--grouped); border: 0; border-radius: 18px; padding: 14px 18px; }
.ct-logo { background: #fff; border-radius: 9px; }
.ct-t { font-size: 15px; } .ct-t span { font-size: 13px; }
.cg h3 { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 14px; }
.tl { background: var(--grouped); border-radius: 24px; padding: 4px 26px; }
.tl-row { padding: 20px 0; border-top: 1px solid var(--line); }
.tl .tl-row:first-child { border-top: 0; }
.tl-main h3 { font-size: 1.1rem; letter-spacing: -.018em; }
.strengths { gap: 12px; } .str { border-radius: 20px; }
.sk-tab { border: 0 !important; border-radius: 12px; padding: 11px 14px; min-height: 44px; font-size: 16px; }
.sk-tab.on { background: var(--grouped); color: var(--head); font-weight: 600; }
.sk-panel li b { font-size: 16px; } .sk-panel li span { font-size: 14px; }
.rtoggle, .ctoggle { font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.ticker-label { font-size: 12.5px; }
.tk { border-radius: 999px; padding: 8px 16px 8px 12px; }
.tk-pause { margin: 0 auto 10px; display: flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .24); background: rgba(255, 255, 255, .12); color: #fff; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); }
.tk-pause:hover { background: rgba(255, 255, 255, .2); }
.ticker.paused .tk-track { animation-play-state: paused; }

/* --- Contact sheet: regular (more opaque) Liquid Glass, because it carries a lot of text --- */
.gate-back { background: rgba(8, 14, 34, .5); -webkit-backdrop-filter: none; backdrop-filter: none; }
.gate-card { border-radius: 30px; border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(34px) saturate(185%); backdrop-filter: blur(34px) saturate(185%); box-shadow: 0 30px 80px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .8); padding: 34px 30px 28px; }
.gate-form input:not([type="checkbox"]) { min-height: 48px; border-radius: 14px; font-size: 17px; border: 1px solid rgba(60, 60, 67, .22); background: rgba(255, 255, 255, .9); }
.gate-btn { min-height: 50px; border-radius: 999px; font-size: 17px; }
.gate-contact a { border-radius: 16px; background: rgba(255, 255, 255, .7); }
.gate .gate-card h2 { font-size: 1.5rem; letter-spacing: -.025em; }

/* --- Accessibility: touch targets, reduced transparency, reduced motion, increased contrast --- */
@media (pointer: coarse) { .nav button, .toggle, .gtoggle, .tk-pause { min-height: 44px; } }
@media (prefers-reduced-transparency: reduce) {
  .nav, .gate-card, .herod .btn:not(.p), #foot .btn:not(.p), .tk-pause { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav { background: var(--bg); } .gate-card { background: #fff; }
  .herod .btn:not(.p), #foot .btn:not(.p) { background: rgba(255, 255, 255, .22); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav { background: var(--bg); } .gate-card { background: #fff; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .tk-pause { display: none; } }
@media (prefers-contrast: more) { :root { --line: rgba(60, 60, 67, .5); --muted: #48484a; } :root[data-theme="dark"] { --line: rgba(235, 235, 245, .5); --muted: #d1d1d6; } .rc, .ct, .tl { border: 1px solid var(--line); } }

@media (max-width: 760px) {
  body:not(.ats) section { margin-top: 68px; }
  .rc { padding: 22px 20px; border-radius: 22px; } .tl { padding: 2px 18px; border-radius: 22px; }
  .nav-inner { padding-left: 16px; } .nav .brand { font-size: 16px; }
}
@media print { .nav, .tk-pause { display: none !important; } body:not(.ats) main { padding-top: 0; } .rc, .ct, .tl { background: #fff; border: 1px solid #d2d2d7; } .herod { padding-top: 22px; } }
/* nav legibility over the dark hero (HIG: keep text contrast high on glass) */
.nav { --glass: rgba(255, 255, 255, .66); }
:root[data-theme="dark"] .nav { --glass: rgba(40, 40, 44, .6); }
.nav a.sec { color: color-mix(in srgb, var(--fg) 82%, transparent); }
.nav .brand, .nav button { color: var(--fg); }
.tl .tl-logo { height: 32px; max-width: 60px; padding: 3px 6px; border-radius: 8px; }
/* print: keep the designed PDF compact now that screen spacing is larger */
@media print {
  body:not(.ats) { font-size: 10pt; }
  body:not(.ats) h2 { font-size: 15pt; margin: 0 0 8px; }
  body:not(.ats) section { margin-top: 16px; }
  body:not(.ats) .about p { font-size: 10.5pt; line-height: 1.45; margin: 0 0 8px; max-width: none; }
  .herod h1 { font-size: 34pt; } .herod-sub { font-size: 11.5pt; margin: 8px 0 0; }
  .rc { padding: 12px 14px; border-radius: 12px; margin: 0; } .rcs { gap: 8px; }
  .rc-title h3 { font-size: 12pt; } .rc-org, .rc-when { font-size: 9.5pt; } .rc li { font-size: 9.5pt; margin: 3px 0; line-height: 1.38; }
  .rc-prog, .rc-stats { margin-top: 8px; } .rc-stat b { font-size: 12pt; } .rc-stat span { font-size: 8.5pt; }
  .tl { padding: 0 14px; border-radius: 12px; } .tl-row { padding: 8px 0; } .tl-main h3 { font-size: 10.5pt; }
  .ct { padding: 6px 10px; border-radius: 10px; } .ct-t { font-size: 9.5pt; } .ct-t span { font-size: 8.5pt; }
  .cg h3 { font-size: 11pt; margin-bottom: 6px; } .cwrap .cg { margin-bottom: 12px; }
  .strengths { gap: 6px; } .str { padding: 8px 10px 8px; border-radius: 12px; }
  .sk-panel li { padding: 4px 0; } .sk-panel li b { font-size: 9.5pt; } .sk-panel li span { font-size: 8.5pt; }
}

/* =====================================================================
   v3: navy and amber through the whole page, icons, pinned section titles, navy credentials band
   (Content stays on standard materials. Glass is used only for the nav, the pinned section label and controls.)
   ===================================================================== */
:root {
  --navy: #101a38; --amber: #ffb547;
  --fg: #151b36; --head: #101a38; --muted: #5a6382; --link: #1f3fae;
  --bg: #ffffff; --grouped: #f0f2f9; --elev: #ffffff; --line: rgba(16, 26, 56, .11); --fill: rgba(16, 26, 56, .07);
  --glass: rgba(255, 255, 255, .68); --glass-edge: rgba(255, 255, 255, .78);
  --tab-on: #101a38;
}
:root[data-theme="dark"] {
  --bg: #0a1024; --fg: #eef1fb; --head: #f5f7ff; --muted: #a4aed0; --link: #8fa8ff;
  --grouped: #111a38; --elev: #1a2550; --line: rgba(160, 175, 230, .2); --fill: rgba(160, 175, 230, .16);
  --glass: rgba(22, 30, 62, .62); --glass-edge: rgba(255, 255, 255, .18);
  --tab-on: #26356d;
}
body { background: var(--bg); color: var(--fg); }

/* --- Icons --- */
.i { width: 18px; height: 18px; flex: none; }
.btn .i { margin-right: 8px; }
.ic { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--amber); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ic .i { width: 19px; height: 19px; margin: 0; }
body.ats .ic, body.ats .i { display: none; }

/* --- Pinned section titles: the current section's label stays in view while you read it --- */
body:not(.ats) section > h2 {
  position: sticky; top: 80px; z-index: 6; display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%;
  margin: 0 0 28px; padding: 7px 20px 7px 8px; border-radius: 999px; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; color: var(--head);
  background: var(--glass); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 6px 22px rgba(16, 26, 56, .12), inset 0 1px 0 rgba(255, 255, 255, .5);
}
html { scroll-snap-type: y proximity; }
body:not(.ats) section, #biography, .ticker { scroll-snap-align: start; scroll-margin-top: 72px; }

/* --- Brand colour on the content layer (restrained: navy for emphasis, amber for markers and icons) --- */
.rc-title h3, .tl-main h3, .ct-t, .rc-stat b { color: var(--head); }
.rc-sub { color: var(--link); }
.rc li::marker, .tl-main li::marker { color: var(--amber); }
.rc-prog em { color: var(--muted); }
.rtoggle, .ctoggle { color: var(--link); }
.sk-tab { display: flex; align-items: center; gap: 10px; }
.sk-tab .i { color: var(--muted); }
.sk-tab.on { background: var(--tab-on); color: #fff; }
.sk-tab.on .i { color: var(--amber); }
.sk-panel li b { color: var(--head); }
.str.drelationship { background: var(--navy); color: #fff; }
.str.dstrategic { background: var(--amber); color: var(--navy); }
:root[data-theme="dark"] .str.drelationship { background: #26356d; }
.tl-row .tl-dates { color: var(--muted); }

/* --- Credentials band: registrations and certifications on navy --- */
.band { width: 100vw; margin: 92px 0 0 calc(50% - 50vw); padding: 8px 20px 76px; color: #fff; background: radial-gradient(900px 360px at 85% 0%, var(--hero-glow) 0%, transparent 62%), var(--hero-bg); scroll-snap-align: start; }
.band-in { max-width: 820px; margin: 0 auto; }
.band section { margin-top: 64px; }
.band section:first-child { margin-top: 56px; }
.band section > h2 { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); box-shadow: 0 6px 22px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .2); }
.band .ic { background: rgba(255, 255, 255, .14); }
.band .ct { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.band .ct-t, .band .ct-t a { color: #fff; }
.band .ct-t span { color: #b9c3e3; }
.band .cg h3 { color: #fff; display: flex; align-items: center; gap: 8px; }
.band .cg h3 .i { color: var(--amber); }
.band .ctoggle { color: var(--amber); }
.ct-logo { width: 64px; height: 36px; padding: 2px 4px; box-sizing: border-box; }
.ct-logo.badge { width: 44px; }

@media (max-width: 760px) { body:not(.ats) section > h2 { top: 76px; font-size: 1.05rem; } .band { padding-bottom: 56px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; } }
@media (prefers-reduced-transparency: reduce) { body:not(.ats) section > h2 { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } .band section > h2 { background: rgba(255, 255, 255, .16); } }
@media print {
  html { scroll-snap-type: none; }
  body:not(.ats) section > h2 { position: static; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; font-size: 13pt; }
  .ic { -webkit-print-color-adjust: exact; print-color-adjust: exact; width: 26px; height: 26px; }
  .band { width: auto; margin: 16px 0 0; padding: 0; background: #fff; color: #1d1d1f; }
  .band section > h2, .band .cg h3 { color: #1d1d1f; background: none; } .band .ic { background: var(--navy); }
  .band .ct { background: #fff; border: 1px solid #d2d2d7; } .band .ct-t, .band .ct-t a { color: #1d1d1f; } .band .ct-t span { color: #555; }
  .str { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* band section labels must win over the general pinned-label style */
body:not(.ats) .band section > h2 { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .24); box-shadow: 0 6px 22px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .22); }
body:not(.ats) .band section > h2 .ic { background: rgba(255, 255, 255, .16); color: var(--amber); }

/* =====================================================================
   Designed PDF (A4, two pages): index.html?view=pdf
   A purpose-built paper layout, not a print of the web page.
   ===================================================================== */
@page { size: A4; margin: 0; }
body.pdf { background: #e9ebf2; font: 9pt/1.42 var(--font); color: #1b2140; letter-spacing: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.pdf * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.pdf .nav, body.pdf #foot, body.pdf .gate { display: none !important; }
body.pdf main { padding: 0; max-width: none; margin: 0; }
body.pdf .pg { width: 210mm; height: 297mm; margin: 0 auto 10mm; display: grid; grid-template-columns: 66mm 1fr; background: #fff; box-shadow: 0 4px 24px rgba(0, 0, 0, .15); overflow: hidden; break-after: page; page-break-after: always; }
body.pdf .pg:last-child { break-after: auto; page-break-after: auto; margin-bottom: 0; }

body.pdf .sb { background: linear-gradient(180deg, #101a38 0%, #172458 100%); color: #e7ebfa; padding: 12mm 7mm 8mm; }
body.pdf .sb-photo { margin: -2mm -3mm 4mm; height: 62mm; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: radial-gradient(60mm 40mm at 50% 100%, rgba(255, 181, 71, .3), transparent 70%); }
body.pdf .sb-photo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
body.pdf .sb-name { font-size: 21pt; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; color: #fff; }
body.pdf .sb-role { color: #ffb547; font-size: 8.8pt; margin: 2mm 0 4mm; line-height: 1.35; }
body.pdf .sb-h { font-size: 7pt; letter-spacing: .16em; text-transform: uppercase; color: #ffb547; font-weight: 700; margin: 5mm 0 2mm; padding-bottom: 1mm; border-bottom: .3mm solid rgba(255, 255, 255, .18); }
body.pdf .sb-row { display: flex; gap: 2.5mm; align-items: flex-start; font-size: 8.2pt; margin: 1.6mm 0; word-break: break-all; }
body.pdf .sb-row svg { width: 3.6mm; height: 3.6mm; flex: none; color: #ffb547; margin-top: .3mm; }
body.pdf .sb-stat { display: flex; gap: 2.5mm; align-items: baseline; margin: 1.2mm 0; }
body.pdf .sb-stat b { color: #ffb547; font-size: 11pt; min-width: 15mm; }
body.pdf .sb-stat span { font-size: 7.8pt; color: #c7d0ea; }
body.pdf .sb-g { font-weight: 700; color: #fff; font-size: 8pt; margin: 2.4mm 0 .6mm; }
body.pdf .sb-i { font-size: 7.8pt; color: #c7d0ea; line-height: 1.45; }
body.pdf .sb-c { margin: 1.6mm 0; }
body.pdf .sb-c b { display: block; font-size: 7.9pt; color: #fff; line-height: 1.3; font-weight: 600; }
body.pdf .sb-c span { display: block; font-size: 7.2pt; color: #aab6d8; }
body.pdf .sts { display: grid; gap: 1.2mm; }
body.pdf .st { display: flex; align-items: baseline; gap: 2mm; font-size: 8pt; }
body.pdf .st i { font-style: normal; color: #ffb547; width: 3mm; }
body.pdf .st b { color: #fff; font-weight: 600; }
body.pdf .st span { color: #aab6d8; font-size: 7pt; margin-left: auto; }

body.pdf .mn { padding: 12mm 11mm 8mm 10mm; }
body.pdf .mn-h { font-size: 7.5pt; letter-spacing: .16em; text-transform: uppercase; color: #101a38; font-weight: 800; border-bottom: .3mm solid #101a38; padding-bottom: 1.2mm; margin: 0 0 3mm; }
body.pdf .mn .mn-h:not(:first-child) { margin-top: 6mm; }
body.pdf .mn p { margin: 0 0 2.4mm; font-size: 9pt; line-height: 1.5; }
body.pdf .r { margin-bottom: 4.6mm; }
body.pdf .r-head { display: flex; justify-content: space-between; gap: 4mm; align-items: flex-start; }
body.pdf .r-t b, body.pdf .e b { display: block; font-size: 10.2pt; color: #101a38; line-height: 1.25; }
body.pdf .e b { font-size: 9.2pt; }
body.pdf .r-t span, body.pdf .e span { display: block; color: #5a6382; font-size: 8.6pt; }
body.pdf .r-d { text-align: right; font-size: 7.8pt; color: #5a6382; white-space: nowrap; line-height: 1.4; }
body.pdf .r-prog { margin: 1.6mm 0 1mm; font-size: 7.8pt; color: #5a6382; }
body.pdf .r-prog em { font-style: normal; font-weight: 700; color: #101a38; margin-right: 1.5mm; }
body.pdf .r-prog small { font-size: 7.2pt; }
body.pdf .r-prog i { font-style: normal; color: #ffb547; margin: 0 1mm; }
body.pdf .r-sub { font-size: 7.2pt; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: #1f3fae; margin: 2.2mm 0 .5mm; }
body.pdf .r ul { margin: .6mm 0 0; padding-left: 4mm; }
body.pdf .r li { margin: .5mm 0; font-size: 8.6pt; line-height: 1.38; }
body.pdf .r li::marker { color: #ffb547; }
body.pdf .e { display: flex; justify-content: space-between; gap: 4mm; margin-bottom: 2.4mm; }
@media print { body.pdf { background: #fff; } body.pdf .pg { margin: 0; box-shadow: none; } }
/* PDF: compact certification list in the main column; slightly tighter page 1 */
body.pdf .cgp { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6mm 6mm; }
body.pdf .cc b { display: block; font-size: 8pt; color: #101a38; line-height: 1.25; font-weight: 600; }
body.pdf .cc span { display: block; font-size: 7.2pt; color: #5a6382; }
body.pdf .mn { padding-bottom: 6mm; }
body.pdf .mn p { font-size: 8.8pt; line-height: 1.46; margin-bottom: 2mm; }
body.pdf .r li { font-size: 8.4pt; line-height: 1.34; margin: .4mm 0; }
body.pdf .r { margin-bottom: 4mm; }

/* ===== Locked sections (experience, education) until the visitor verifies ===== */
.lockcard { display: flex; gap: 22px; align-items: center; background: var(--grouped); border-radius: 24px; padding: 30px; position: relative; overflow: hidden; flex-wrap: wrap; }
.lockcard::after { content: ""; position: absolute; inset: 0 0 0 58%; background: repeating-linear-gradient(180deg, transparent 0 14px, var(--line) 14px 22px); -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); opacity: .8; pointer-events: none; }
.lk-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: var(--amber); display: flex; align-items: center; justify-content: center; flex: none; }
.lk-ic .i { width: 26px; height: 26px; margin: 0; }
.lk-t { position: relative; z-index: 1; max-width: 46ch; }
.lk-t b { display: block; font-size: 1.15rem; line-height: 1.3; color: var(--head); letter-spacing: -.02em; }
.lk-t p { margin: 4px 0 14px; color: var(--muted); font-size: 15px; }
.lockcard .btn.p { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--amber); color: var(--navy); border: 0; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 18px rgba(255, 181, 71, .28); }
button.herod-ats { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: var(--hero-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; margin-top: 12px; display: inline-block; text-align: left; }
button.herod-ats:hover { color: #fff; }
body.ats section .btn { padding: 6px 14px; border: 1px solid #000; background: #fff; color: #000; font: inherit; border-radius: 6px; cursor: pointer; }
@media (max-width: 760px) { .lockcard { padding: 22px 20px; } .lockcard::after { inset: 0 0 0 40%; } }
@media print { .lockcard { background: #fff; border: 1px solid #d2d2d7; } .lockcard::after, .lockcard .btn { display: none; } }

/* CliftonStrengths tooltip: open BELOW the tile and sit above the pinned section label (it used to be hidden behind it) */
.strengths { position: relative; z-index: 8; }
.str:hover, .str:focus, .str:focus-within { z-index: 30; }
.str .tip { bottom: auto; top: calc(100% + 12px); z-index: 30; transform: translateX(-50%) translateY(-4px); }
.str .tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--fg); }
.str:hover .tip, .str:focus .tip { transform: translateX(-50%); }
.str:first-child .tip { transform: translateY(-4px); } .str:first-child:hover .tip, .str:first-child:focus .tip { transform: none; }
.str:last-child .tip { transform: translateY(-4px); } .str:last-child:hover .tip, .str:last-child:focus .tip { transform: none; }

/* Ticker pause control: a small round icon in the corner of the strip (no extra line) */
.ticker { position: relative; }
.tk-pause { position: absolute; top: 10px; right: max(16px, calc(50% - 410px)); margin: 0; width: 34px; height: 34px; min-height: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 3; }
.tk-pause svg { width: 15px; height: 15px; }
@media (pointer: coarse) { .tk-pause { width: 44px; height: 44px; top: 4px; } }

/* Round icon buttons: LinkedIn, email, call, WhatsApp (Liquid Glass controls over the navy hero and footer) */
.ib { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; cursor: pointer; text-decoration: none; padding: 0; font: inherit; color: #fff; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 4px 16px rgba(0, 0, 0, .2); }
.ib:hover { background: rgba(255, 255, 255, .24); text-decoration: none; }
.ib .i { width: 21px; height: 21px; margin: 0; }
.herod-btns { align-items: center; }
.herod-note { margin: 12px 0 0; font-size: 13px; color: var(--hero-text); }
@media (pointer: coarse) { .ib { width: 48px; height: 48px; } }
@media (prefers-reduced-transparency: reduce) { .ib { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .22); } }
@media print { .ib, .herod-note { display: none; } }
/* keep "Unlock full profile" and the four icons on one row */
.herod-btns { gap: 8px; flex-wrap: wrap; }
.herod .ib { width: 42px; height: 42px; }
.herod .ib .i { width: 19px; height: 19px; }
.herod .btn.p { padding: 0 18px; font-size: 15px; }
@media (pointer: coarse) { .herod .ib { width: 44px; height: 44px; } }

/* ===== Verification sheet: six code boxes, icons on the verified screen ===== */
.gate-otpwrap { display: flex; flex-direction: column; gap: 8px; }
.gate-otpwrap > label { font-size: 13px; font-weight: 600; color: #101a38; }
.gate-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.gate .gate-otp input { width: 100%; min-width: 0; min-height: 56px; padding: 0; text-align: center; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; color: #101a38; border-radius: 14px; caret-color: #ffb547; }
.gate .gate-otp input:focus { outline: 2px solid #ffb547; outline-offset: 1px; border-color: #101a38; background: #fff; }
.gate-contact a { display: flex; align-items: center; gap: 14px; }
.gate-contact a > div { min-width: 0; }
.gi { width: 40px; height: 40px; border-radius: 50%; background: #101a38; color: #ffb547; display: flex; align-items: center; justify-content: center; flex: none; font-style: normal; }
.gi svg { width: 19px; height: 19px; }
@media (max-width: 400px) { .gate .gate-otp input { min-height: 50px; font-size: 22px; } .gate-otp { gap: 6px; } }

/* Verification sheet: never show a scrollbar handle; tighten up on short windows */
.gate-card { max-height: calc(100dvh - 24px); scrollbar-width: none; -ms-overflow-style: none; }
.gate-card::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (max-height: 720px) {
  .gate-card { padding: 22px 24px 20px; border-radius: 26px; }
  .gate .gate-card h2 { font-size: 1.3rem; }
  .gate-sub { margin-bottom: 12px; font-size: 14px; line-height: 1.45; }
  .gate-form { gap: 10px; }
  .gate .gate-otp input { min-height: 48px; font-size: 22px; border-radius: 12px; }
  .gate-btn { min-height: 46px; font-size: 16px; }
  .gi { width: 34px; height: 34px; } .gi svg { width: 17px; height: 17px; }
  .gate-contact { gap: 8px; margin-bottom: 12px; }
  .gate-contact a { padding: 8px 12px; border-radius: 14px; }
}
@media (max-height: 520px) {
  .gate-card { padding: 16px 18px 14px; }
  .gate-sub { margin-bottom: 8px; }
  .gate .gate-otp input { min-height: 42px; font-size: 20px; }
  .gate-links { margin-top: -2px; }
}

/* Brand: optional KZ monogram in the menu and a signature over the hero photo (drop the files into /brand to switch them on) */
.nav .brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { height: 34px; width: auto; max-width: 54px; object-fit: contain; border-radius: 8px; background: #101a38; padding: 3px 5px; box-sizing: content-box; }
.herod-photo { position: relative; }
.herod-sign { position: absolute; left: 50%; bottom: 7%; width: 78%; max-width: 300px; transform: translateX(-50%) rotate(-4deg); pointer-events: none; z-index: 2; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
@media (max-width: 640px) { .brand-name { display: none; } .brand-mark { height: 30px; } }
@media print { .herod-sign { display: none; } }

/* Signature is anchored to the photo itself so it always lies across the suit */
.hp-fig { position: relative; display: block; line-height: 0; max-width: 100%; }
.hp-fig .hp-img { position: relative; display: block; width: auto; height: auto; max-width: 100%; max-height: 520px; object-fit: contain; }
.hp-fig .herod-sign { position: absolute; left: 50%; bottom: 9%; width: 86%; max-width: none; height: auto; transform: translateX(-50%) rotate(-4deg); pointer-events: none; z-index: 2; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
/* the monogram is now cropped tight (wider than tall), so size the chip by height */
.brand-mark { height: 32px; width: auto; max-width: none; padding: 5px 8px; box-sizing: content-box; border-radius: 9px; }
.hp-fig .herod-sign { width: 92%; bottom: 8%; }
@media (max-width: 640px) { .brand-mark { height: 28px; } }
/* phones: the main button gets its own row, the four icons sit together underneath */
@media (max-width: 480px) { .herod-btns .btn.p { flex: 1 0 100%; justify-content: center; } .herod-btns { gap: 10px; } }
/* signature: smaller, softer, tucked low so it supports the photo instead of competing with it */
.hp-fig .herod-sign { width: 56%; left: 55%; bottom: 4.5%; opacity: .86; transform: translateX(-50%) rotate(-3deg); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .4)); }

/* Faint KZ monogram watermark behind the cut-out photo (silently absent if brand/kz-monogram.webp is missing) */
.herod-photo::after { content: ""; position: absolute; left: 50%; top: 6%; width: 125%; aspect-ratio: 311 / 220; transform: translateX(-50%); background: url("brand/kz-monogram.webp") center / contain no-repeat; opacity: .25; pointer-events: none; z-index: 0; -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%); }
.herod-photo .hp-fig { z-index: 1; }
@media (max-width: 640px) { .herod-photo::after { width: 110%; top: 10%; } }
@media print { .herod-photo::after { display: none; } }
.herod-photo::after { width: 104%; top: 9%; filter: saturate(1.7) brightness(1.1); opacity: .27; }
/* watermark: discreet (15%) */
.herod-photo::after { opacity: .15; filter: saturate(1.5) brightness(1.05); }
/* watermark: fainter (9%) */
.herod-photo::after { opacity: .09; }
/* hero subtitle: each phrase on its own line */
.herod-sub .hs-line { display: block; }
.herod-sub { max-width: none; }
.herod-sub strong { color: #fff; font-weight: 700; }
.herod-note { text-wrap: balance; max-width: 40ch; line-height: 1.45; }

/* Hero actions: the main button on its own row (more prominent), then the note, then the quieter icon row */
.herod-cta { margin-top: 4px; }
.herod-cta .btn.p { min-height: 54px; padding: 0 30px; font-size: 17px; }
.herod-cta .btn.p .i { width: 20px; height: 20px; }
.herod-note { margin: 12px 0 0; }
.herod-icons { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
@media (max-width: 480px) { .herod-cta .btn.p { width: 100%; } .herod-icons { gap: 12px; } }
/* hero: with the stats chips hidden, lower the text a little so the space above and below it is balanced (desktop only) */
@media (min-width: 761px) { .herod-copy { margin-top: 40px; } }

/* --- About me: pinned pill, large intro line, three cards, closing line --- */
body:not(.ats) #biography { padding-top: 40px; }
body:not(.ats) #biography > h2 { margin-left: auto; margin-right: auto; }
body:not(.ats) .about { text-align: center; }
body:not(.ats) .about .ab-lead { font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.3; letter-spacing: -.02em; font-weight: 500; max-width: 24em; margin: 0 auto 36px; color: var(--head); }
.ab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; margin: 0 0 32px; }
.ab-card { background: var(--grouped); border: 1px solid var(--line); border-radius: 22px; padding: 24px 24px 26px; box-shadow: 0 8px 24px rgba(16, 26, 56, .06); }
.ab-card .ic { width: 48px; height: 48px; margin-bottom: 16px; }
.ab-card .ic .i { width: 24px; height: 24px; }
.ab-card h3 { margin: 0 0 8px; font-size: 1.35rem; line-height: 1.2; letter-spacing: -.02em; color: var(--head); }
body:not(.ats) .ab-card p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--muted); max-width: none; }
body:not(.ats) .about .ab-close { max-width: 38em; margin: 0 auto; font-size: 1.05rem; line-height: 1.55; color: var(--muted); }
@media (max-width: 760px) { .ab-cards { grid-template-columns: 1fr; gap: 12px; } body:not(.ats) #biography { padding-top: 28px; } }
body:not(.ats) .about .ab-lead { margin-bottom: 18px; }
body:not(.ats) .about .ab-sub { max-width: 34em; margin: 0 auto 36px; font-size: 1.15rem; line-height: 1.5; color: var(--muted); }
/* About lead: the key phrase in orange (deeper on white for legibility, bright amber in dark mode) */
body:not(.ats) .about .ab-lead strong, body:not(.ats) .about .ab-lead b { color: #c26a00; font-weight: 600; }
:root[data-theme="dark"] body:not(.ats) .about .ab-lead strong, :root[data-theme="dark"] body:not(.ats) .about .ab-lead b { color: var(--amber); }

/* No underline appears on hover anywhere (links, toggles, buttons, form links) */
a:hover, a:focus-visible, button:hover, .toggle:hover, .gtoggle:hover, .rtoggle:hover, .ctoggle:hover, .gate-link:hover, .ct-t a:hover { text-decoration: none !important; }
/* the few items that are underlined at rest keep exactly that, so hovering changes nothing */
.rtoggle:hover, .ctoggle:hover, .ct-t a:hover, .gate-link:hover:not(:disabled), .herod-ats:hover { text-decoration: underline !important; }

/* Verification sheet: soft fade in and out (a gentle rise on the card), skipped when Reduce Motion is on */
.gate .gate-back { opacity: 0; transition: opacity .28s ease; }
.gate .gate-card { opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .28s ease, transform .34s cubic-bezier(.2, .8, .2, 1); }
.gate.show .gate-back, .gate.show .gate-card { opacity: 1; }
.gate.show .gate-card { transform: none; }
.gate-sub + .gate-sub { margin-top: -8px; }
@media (prefers-reduced-motion: reduce) { .gate .gate-back, .gate .gate-card { transition: opacity .01s; transform: none; } }

/* Career progression: a timeline, oldest to current (horizontal on desktop, stacked on phones) */
.rc-tl { margin: 16px 0 0; padding: 16px 20px 18px; background: var(--elev); border-radius: 14px; }
.rc-tl-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px; }
.rc-tl ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.rc-tl li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-right: 14px; min-width: 0; }
.rc-tl .d { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rc-tl i { position: relative; display: block; height: 12px; }
.rc-tl i::before { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: var(--elev); border: 2px solid color-mix(in srgb, var(--fg) 38%, transparent); z-index: 1; }
.rc-tl i::after { content: ""; position: absolute; left: 12px; right: 0; top: 5px; height: 2px; background: color-mix(in srgb, var(--fg) 18%, transparent); }
.rc-tl li:last-child i::after { display: none; }
.rc-tl b { font-size: 15px; line-height: 1.3; color: var(--head); font-weight: 650; }
.rc-tl li.now i::before { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 28%, transparent); }
.rc-tl li.now .d { color: color-mix(in srgb, var(--amber) 70%, var(--fg)); font-weight: 600; }
@media (max-width: 640px) {
  .rc-tl ol { grid-auto-flow: row; gap: 14px; }
  .rc-tl li { display: grid; grid-template-columns: 12px 1fr; column-gap: 14px; row-gap: 2px; padding-right: 0; }
  .rc-tl i { grid-column: 1; grid-row: 1 / span 2; height: auto; align-self: stretch; }
  .rc-tl i::before { top: 3px; }
  .rc-tl i::after { left: 5px; right: auto; width: 2px; height: auto; top: 15px; bottom: -17px; }
  .rc-tl .d { grid-column: 2; grid-row: 1; } .rc-tl b { grid-column: 2; grid-row: 2; }
}
@media print { .rc-tl { padding: 8px 12px; margin-top: 8px; } .rc-tl b { font-size: 9.5pt; } }

/* nav monogram sits straight on the glass (no navy tile); a soft shadow keeps the gold legible on pale glass */
.brand-mark { background: none; padding: 0 4px; border-radius: 0; filter: drop-shadow(0 1px 1.5px rgba(16, 26, 56, .45)); }
/* on the pale light-mode glass the gold is deepened a touch so it stays readable */
:root:not([data-theme="dark"]) .brand-mark { filter: brightness(.8) saturate(1.25) drop-shadow(0 1px 1px rgba(16, 26, 56, .35)); }

/* Footer, centred like the About section: monogram, statement, one clear action, fine print */
#foot { margin-top: 0; background: radial-gradient(700px 320px at 50% 0%, var(--hero-glow) 0%, transparent 70%), var(--hero-bg); }
.foot2 { flex-direction: column; justify-content: center; text-align: center; gap: 0; padding: 64px 20px 36px; max-width: 760px; }
.foot-mark { height: 46px; width: auto; margin-bottom: 18px; opacity: .95; }
.foot2 .foot-hi { font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; letter-spacing: -.03em; color: #fff; }
.foot2 .foot-hi em { font-style: normal; color: var(--amber); }
.foot2 .foot-sub { margin-top: 10px; font-size: 1.02rem; }
.foot2 .foot-btns { justify-content: center; align-items: center; margin-top: 28px; }
.foot-fine { margin-top: 44px; padding-top: 18px; width: 100%; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 12.5px; color: var(--hero-soft); }
@media (max-width: 640px) { .foot2 { padding: 48px 20px 28px; } .foot-fine { margin-top: 32px; } }

/* Footer back to the compact two-column row, now with a one-line copyright underneath */
#foot { margin-top: 80px; background: radial-gradient(900px 300px at 15% 0%, var(--hero-glow) 0%, transparent 62%), var(--hero-bg); }
.foot-in { flex-direction: row; justify-content: space-between; text-align: left; padding: 44px 20px 22px; max-width: 820px; gap: 24px; }
.foot-in .foot-hi { font-size: 1.9rem; line-height: 1.15; letter-spacing: -.02em; color: #fff; }
.foot-in .foot-hi em { font-style: normal; color: var(--amber); }
.foot-in .foot-sub { margin-top: 4px; font-size: 1rem; }
.foot-in .foot-btns { margin-top: 0; justify-content: flex-end; }
.foot-in .foot-fine { flex: 0 0 100%; margin-top: 6px; padding-top: 16px; text-align: center; }
@media (max-width: 640px) { .foot-in { flex-direction: column; align-items: flex-start; padding: 36px 20px 20px; } .foot-in .foot-btns { justify-content: flex-start; } .foot-in .foot-fine { text-align: left; } }
.foot-in .foot-hi { font-size: 1.6rem; white-space: nowrap; }
.foot-in .foot-btns { flex-wrap: nowrap; gap: 8px; }
@media (max-width: 860px) { .foot-in { flex-direction: column; align-items: flex-start; } .foot-in .foot-btns { flex-wrap: wrap; justify-content: flex-start; } .foot-in .foot-fine { text-align: left; } }

/* ===== Motion (only when JS adds .js-motion; never for Reduce Motion, ATS or PDF) ===== */
.js-motion .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
.js-motion .rv.in { opacity: 1; transform: none; }
.js-motion .rv.done { transition: transform .28s ease, box-shadow .28s ease, opacity .2s ease; transition-delay: 0ms; }
/* hover lift on cards (no underline, just a soft rise) */
.js-motion .ab-card.done:hover, .js-motion .ct.done:hover, .js-motion .rc-stat.done:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(16, 26, 56, .18); }
.js-motion .str.done:hover { transform: translateY(-3px); }
/* career progression: the line draws across, then the current dot pulses once */
.js-motion .rc-tl i::after { transform-origin: left center; transform: scaleX(0); transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.js-motion .rc-tl.in li:nth-child(1) i::after { transform: scaleX(1); transition-delay: .35s; }
.js-motion .rc-tl.in li:nth-child(2) i::after { transform: scaleX(1); transition-delay: .9s; }
.js-motion .rc-tl li i::before { transition: background .4s ease, border-color .4s ease; }
.js-motion .rc-tl.in li.now i::before { animation: dotPulse 1.6s ease-out 1.5s 1 both; }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@media (max-width: 640px) {
  .js-motion .rc-tl i::after { transform-origin: top center; transform: scaleY(0); }
  .js-motion .rc-tl.in li:nth-child(1) i::after, .js-motion .rc-tl.in li:nth-child(2) i::after { transform: scaleY(1); }
}
/* hero entrance */
@keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroPhoto { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
.hero-in .herod-copy > * { animation: heroRise .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero-in .herod-copy > :nth-child(1) { animation-delay: .05s; } .hero-in .herod-copy > :nth-child(2) { animation-delay: .15s; }
.hero-in .herod-copy > :nth-child(3) { animation-delay: .28s; } .hero-in .herod-copy > :nth-child(4) { animation-delay: .4s; }
.hero-in .herod-copy > :nth-child(5) { animation-delay: .5s; } .hero-in .herod-copy > :nth-child(6) { animation-delay: .6s; }
.hero-in .hp-fig { animation: heroPhoto 1.2s ease-out both; }
@media (prefers-reduced-motion: reduce) { .js-motion .rv, .hero-in .herod-copy > *, .hero-in .hp-fig { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }
@media print { .js-motion .rv { opacity: 1 !important; transform: none !important; } }

/* ===== Accessibility, bot trap, privacy page ===== */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: #ffb547; color: #101a38; font-weight: 700; text-decoration: none; transition: top .15s ease; }
.skip:focus { top: 12px; outline: 2px solid #101a38; outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.gate-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gate-captcha:empty { display: none; }
.gate-captcha { min-height: 0; }
.gate-check a { color: #1f3fae; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.gate-check a:hover { text-decoration: underline !important; }
.foot-fine a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.foot-fine a:hover { text-decoration: underline !important; color: #fff; }

.legal-page { background: var(--bg); color: var(--fg); }
.legal-page .nav-inner { justify-content: space-between; }
.legal-back { font-size: 14px; font-weight: 600; color: var(--head); text-decoration: none; padding: 8px 14px; border-radius: 999px; background: var(--fill); }
.legal { max-width: 720px; margin: 0 auto; padding: 120px 20px 40px; line-height: 1.65; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -.03em; line-height: 1.1; margin: 0 0 6px; color: var(--head); }
.legal h2 { font-size: 1.2rem; letter-spacing: -.02em; margin: 34px 0 8px; color: var(--head); border: 0; padding: 0; }
.legal h2::after { display: none; }
.legal p, .legal li { font-size: 1.02rem; color: var(--fg); }
.legal ul { padding-left: 1.2em; margin: 8px 0; } .legal li { margin: 6px 0; }
.legal a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { text-decoration: underline !important; }
.legal-date { color: var(--muted); font-size: .95rem; margin: 0 0 22px; }
.legal-lead { font-size: 1.15rem !important; line-height: 1.55; padding: 16px 18px; border-radius: 16px; background: var(--grouped); }
.legal-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 20px 50px; }

/* phones: the four headline numbers sit two by two instead of in a tall single column */
@media (max-width: 640px) {
  .rc-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .rc-stat { padding: 12px 12px !important; min-width: 0; }
  .rc-stat b { font-size: 1.2rem !important; }
  .rc-stat span { font-size: 12px !important; line-height: 1.35; }
}

/* contrast fixes found by the accessibility check (light mode) */
:root:not([data-theme="dark"]) .rc-tl li.now .d { color: #8a4f00; }
:root:not([data-theme="dark"]) .tl-place { color: #596380; }

/* ===== Hero morph (desktop): sticky stage with the particle orb behind the hero ===== */
.mh { position: relative; height: 380vh; width: 100vw; margin: -36px 0 0 calc(50% - 50vw); }
.mh-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(900px 340px at 15% 0%, var(--hero-glow) 0%, transparent 62%), var(--hero-bg); }
.mh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.mh .herod { position: relative; z-index: 2; flex: 1; width: 100%; margin: 0; padding: 92px 20px 16px; background: none; display: flex; align-items: center; overflow: visible; }
.mh .herod-in { width: 100%; }
.mh .herod-photo img { max-height: min(520px, calc(100vh - 360px)); }
.mh .herod-photo, .mh .ticker { will-change: transform, opacity; }
.mh .ticker { position: relative; z-index: 3; width: 100%; margin: 0; flex: none; }
.mh .herod-copy { position: relative; }
.mh .hs-line { font-size: calc(1.3rem + var(--mt, 0) * 1.7rem); line-height: 1.12; letter-spacing: -.02em; margin-bottom: calc(var(--mt, 0) * 6px); }
.mh .hs-line.is-morph { color: #dfe6ff; font-weight: 600; }
.mh .hs-line.is-word { color: #fff; font-weight: 700; letter-spacing: -.03em; transition: opacity .45s ease, color .45s ease; }
.mh .hs-line.is-word.on { opacity: 1; } .mh .hs-line.is-word.off { opacity: .26; } .mh .hs-line.is-word:not(.on):not(.off) { opacity: .7; }
.mh .hs-line.is-word.on.ai { color: var(--amber); }
.mh-desc { position: absolute; left: 0; right: 0; min-height: 5.5em; pointer-events: none; }
.mh-desc p { position: absolute; left: 0; top: 0; margin: 0; max-width: 34ch; font-size: 1.12rem; line-height: 1.5; color: var(--hero-text); opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.mh-desc p.on { opacity: 1; transform: none; }
.mh .tk-pause { z-index: 4; }
.hero-in .mh .herod-copy > * { animation: none; }
body:not(.ats) section.mh { margin: 0 0 0 calc(50% - 50vw); padding: 0; }

/* hero morph: calmer, sleeker words and no overlap (room is reserved by morph.js before anything moves) */
.mh .hs-line { font-size: calc(1.3rem + var(--mt, 0) * 1.25rem); line-height: 1.14; margin-bottom: calc(var(--mt, 0) * .28em); }
.mh .hs-line.is-word { font-weight: 650; letter-spacing: -.03em; }
.mh .hs-line.is-word.off { opacity: .3; }
.mh-desc p { font-size: 1.05rem; line-height: 1.55; max-width: 32ch; }
.mh .herod-copy { box-sizing: border-box; }
.mh .herod-sub { margin-bottom: 22px; }
@media (hover: none) { .mh .herod .btn, .mh .ib { -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* big screens: use the room, a larger photo, and no faint KZ watermark competing with the orb */
.mh .herod-photo img { max-height: min(660px, calc(100vh - 330px)); }
.mh .herod-photo::after { display: none; }
@media (min-width: 1200px) { .mh .herod-in { max-width: 1120px; grid-template-columns: 470px 1fr; column-gap: 56px; } .mh .herod-photo { max-width: 470px; } .mh .herod h1 { font-size: 4.4rem; } }
.mh .herod-photo { z-index: 2; }

/* photo sits right on the ticker (no gap): the hero row stretches to the ticker and the photo hugs its bottom */
.mh .herod { padding-bottom: 0; align-items: stretch; }
.mh .herod-in { align-self: stretch; align-items: stretch; height: 100%; }
.mh .herod-photo { align-self: end; }
.mh .herod-copy { align-self: center; }
.mh .herod-photo::before { transform: translate(-50%, 55%); }
@media (max-height: 760px) { .mh .herod-photo img { max-height: calc(100vh - 300px); } }

/* centre the photo + text group on wide screens (the text column used to stretch and leave empty space on the right) */
@media (min-width: 1200px) { .mh .herod-in { grid-template-columns: 470px minmax(0, 500px); justify-content: center; column-gap: 64px; } }
@media (min-width: 861px) and (max-width: 1199px) { .mh .herod-in { justify-content: center; } }

/* wide screens, second pass: the text column only needs the width of its text, so the whole group (orb, photo, words) is centred visually */
@media (min-width: 1200px) {
  .mh .herod-in { grid-template-columns: 470px 350px; column-gap: 44px; justify-content: center; padding-left: 56px; box-sizing: border-box; max-width: 1200px; }
  .mh .herod-copy { width: 350px; max-width: 350px; }
}

/* ===== Hero morph on tablets and phones ===== */
@media (max-width: 860px) {
  .mh .herod { padding: 84px 20px 0; }
  .mh .herod-in { grid-template-columns: 300px 1fr; column-gap: 24px; justify-content: center; max-width: 100%; }
  .mh .herod-photo img { max-height: calc(100svh - 330px); }
}
@media (max-width: 640px) {
  .mh .herod { padding: 76px 22px 0; }
  .mh .herod-in { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); row-gap: 0; padding-left: 0; }
  .mh .herod-copy { grid-column: 1; grid-row: 1; width: auto; max-width: none; align-self: start; }
  .mh .herod-photo { grid-column: 1; grid-row: 2; justify-self: center; align-self: end; min-height: 0; height: 100%; max-width: none; margin: 0; width: 100%; display: flex; justify-content: center; align-items: flex-end; }
  .mh .hp-fig { height: 100%; max-height: 100%; display: flex; align-items: flex-end; }
  .mh .herod-photo img, .mh .hp-fig .hp-img { height: 100%; max-height: 100%; width: auto; object-fit: contain; object-position: bottom; }
  .mh .herod h1 { font-size: 2.9rem; }
  .mh .hs-line { font-size: calc(1.12rem + var(--mt, 0) * 1.05rem); }
  .mh .herod-sub { margin: 8px 0 16px; }
  .mh .herod-note, .mh .herod-icons { display: none; }
  .mh .herod-cta .btn.p { width: 100%; min-height: 50px; }
  .mh-desc p { font-size: .98rem; max-width: none; }
  .mh .ticker { padding: 10px 0 12px; }
  .mh .ticker-label { margin-bottom: 8px; font-size: 11px; }
  .mh .tk-row.rev { display: none; }
  .mh .tk-pause { top: 6px; right: 12px; width: 30px; height: 30px; }
}

@media (max-width: 640px) {
  .mh .hp-fig { flex: none; width: fit-content; }
  .mh .herod-in { height: auto; align-self: stretch; }
  .mh .herod-photo { min-height: 0 !important; }
}
@media (max-width: 640px) {
  .mh .herod-in { height: 100%; }
  .mh .herod-photo { overflow: hidden; }
  .mh .hp-fig { height: 100%; }
  .mh .hp-fig .herod-sign { width: 70%; bottom: 5%; left: 50%; max-width: 220px; }
}
@media (max-width: 640px) {
  .mh .herod { min-height: 0; overflow: hidden; }
  .mh .herod-in { min-height: 0; }
  .mh .hp-fig, .mh .herod-photo { min-height: 0; }
  .mh .hp-fig .hp-img { height: 100%; width: auto; max-width: none; }
}

/* ===== phone menu: a button in the top bar opens a glass panel with the section links ===== */
.nav-menu { display: none; }
@media (max-width: 760px) {
  body:not(.ats) .nav-menu { display: inline-flex; align-items: center; justify-content: center; width: 40px; padding: 0 !important; }
  body:not(.ats) .nav #nav-links { display: none !important; }
  body:not(.ats) .nav.open #nav-links {
    display: flex !important; flex-direction: column; gap: 2px; position: absolute; left: 0; right: 0; top: calc(100% + 10px); padding: 8px;
    border-radius: 24px; border: 1px solid var(--glass-edge); background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 18px 40px rgba(16, 26, 56, .28);
  }
  body:not(.ats) .nav.open a.sec { display: block; padding: 14px 18px; font-size: 17px; border-radius: 16px; }
  .nav-menu svg { width: 20px; height: 20px; }
}

/* skills tabs on phones: swipe sideways, no scrollbar, with a soft fade on the right edge as a hint */
.sk-tabs { scrollbar-width: none; -ms-overflow-style: none; }
.sk-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
@media (max-width: 760px) { .sk-tabs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); padding-right: 24px; } }
@media (max-width: 760px) {
  body:not(.ats) .nav.open #nav-links { background: color-mix(in srgb, var(--bg) 95%, transparent); border-color: color-mix(in srgb, var(--fg) 14%, transparent); }
}

/* skills tabs on phones: a tidy 2 x 2 grid instead of a sideways scroller, so there is no scrollbar at all */
@media (max-width: 760px) {
  .sk-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; overflow: visible !important; padding: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .sk-tab { justify-content: flex-start; min-width: 0; padding: 10px 12px !important; font-size: 14px !important; line-height: 1.25; text-align: left; }
  .sk-tab span { white-space: normal; }
}

/* ticker: slide by exactly one set of logos (set in app.js), so the loop is seamless at any screen width */
@keyframes tk-left { from { transform: translateX(0); } to { transform: translateX(calc(var(--tk-shift, 50%) * -1)); } }
@keyframes tk-right { from { transform: translateX(calc(var(--tk-shift, 50%) * -1)); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .tk-track .tk-dup { display: none; } }

/* ===== Privacy note page (same structure as the SyncPaws policy: numbered cards, "On this page" list, "At a glance" box) ===== */
.legal-page { background: var(--grouped); }
.pv-wrap { max-width: 1120px; margin: 0 auto; padding: 108px 20px 30px; }
.pv-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); margin-bottom: 22px; }
.pv-crumbs a { color: var(--muted); text-decoration: none; } .pv-crumbs a:hover { color: var(--head); text-decoration: underline !important; }
.pv-title { font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -.035em; line-height: 1.05; margin: 0 0 10px; color: var(--head); }
.pv-sub { font-size: 1.15rem; color: var(--muted); margin: 0 0 14px; }
.pv-meta { font-size: 13px; color: var(--muted); margin: 0 0 30px; }
.pv-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 24px; align-items: start; }
.pv-toc { position: sticky; top: 96px; max-height: calc(100vh - 116px); overflow: auto; background: var(--elev); border: 1px solid var(--line); border-radius: 20px; padding: 18px 12px 12px; scrollbar-width: thin; }
.pv-toc summary { list-style: none; cursor: pointer; font-weight: 700; font-size: 1.05rem; color: var(--head); padding: 0 8px 12px; }
.pv-toc summary::-webkit-details-marker { display: none; }
.pv-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pv-toc a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: var(--fg); font-size: 14px; line-height: 1.3; text-decoration: none; }
.pv-toc a i { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600; background: var(--fill); color: var(--head); }
.pv-toc a:hover { background: var(--fill); text-decoration: none !important; }
.pv-toc a.on { background: color-mix(in srgb, var(--amber) 22%, transparent); font-weight: 600; }
.pv-toc a.on i { background: var(--amber); color: #101a38; }
.pv-main { display: grid; gap: 16px; outline: none; min-width: 0; }
.pv-card { background: var(--elev); border: 1px solid var(--line); border-radius: 22px; padding: 28px 32px; scroll-margin-top: 96px; box-shadow: 0 6px 22px rgba(16, 26, 56, .05); }
.pv-card h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 1.35rem; letter-spacing: -.02em; color: var(--head); border: 0; padding: 0; }
.pv-card h2::after { display: none; }
.pv-n { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; font-weight: 700; background: color-mix(in srgb, var(--amber) 28%, transparent); color: var(--head); }
.pv-card h3 { font-size: 1.05rem; margin: 22px 0 8px; color: var(--head); }
.pv-card p, .pv-card li { font-size: 1rem; line-height: 1.7; color: var(--fg); }
.pv-card p { margin: 0 0 14px; } .pv-card p:last-child { margin-bottom: 0; }
.pv-card ul { margin: 6px 0 14px; padding-left: 1.25em; } .pv-card li { margin: 7px 0; }
.pv-card a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .pv-card a:hover { text-decoration: underline !important; }
.pv-glance { padding: 0; } .pv-glance summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 20px 28px; }
.pv-glance summary::-webkit-details-marker { display: none; }
.pv-glance summary::before { content: "▸"; color: var(--muted); transition: transform .2s; } .pv-glance[open] summary::before { transform: rotate(90deg); }
.pv-glance summary b { font-size: 1.05rem; color: var(--head); } .pv-glance summary span { font-size: 13px; color: var(--muted); }
.pv-glance ul { margin: 0; padding: 0 28px 24px 48px; }
.pv-table { display: grid; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin: 6px 0 4px; }
.pv-row { display: grid; grid-template-columns: 1.1fr 1.7fr 1.3fr; gap: 16px; padding: 14px 18px; font-size: .95rem; line-height: 1.5; border-top: 1px solid var(--line); }
.pv-row:first-child { border-top: 0; } .pv-row > span:first-child { font-weight: 600; color: var(--head); }
.pv-head { background: var(--fill); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .pv-head > span:first-child { color: var(--muted); }
.pv-contact { padding: 16px 18px; border-radius: 16px; background: var(--fill); }
.pv-top { font-size: 14px; }
.legal-foot { text-align: center; color: var(--muted); font-size: 13px; padding: 24px 20px 56px; }
@media (max-width: 899px) {
  .pv-grid { grid-template-columns: 1fr; gap: 16px; } .pv-toc { position: static; max-height: none; overflow: visible; }
  .pv-toc summary { padding-bottom: 4px; } .pv-toc[open] summary, .pv-toc details[open] summary { padding-bottom: 12px; }
  .pv-toc summary::after { content: "▾"; float: right; color: var(--muted); }
}
@media (max-width: 640px) {
  .pv-wrap { padding: 96px 16px 20px; } .pv-card { padding: 22px 18px; border-radius: 18px; } .pv-card h2 { font-size: 1.2rem; gap: 10px; }
  .pv-n { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; }
  .pv-row { grid-template-columns: 1fr; gap: 4px; } .pv-head { display: none; }
  .pv-glance summary { padding: 18px; flex-wrap: wrap; } .pv-glance ul { padding: 0 18px 20px 38px; }
}
@media print { .pv-toc, .nav, .skip { display: none; } .pv-grid { display: block; } .pv-card { box-shadow: none; break-inside: avoid; } }

/* the numbered headings here are plain card headings, not the site's pinned pills */
body.legal-page .pv-card > h2 { position: static; display: flex; width: auto; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; border-radius: 0; margin: 0 0 14px; font-size: 1.35rem; }

/* privacy page header: a solid bar at the top (like the SyncPaws policy) so it never floats over the text */
body.legal-page .nav { position: sticky; top: 0; left: auto; transform: none; width: 100%; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
body.legal-page .nav-inner { max-width: 1120px; margin: 0 auto; height: 60px; padding: 0 20px; }
.pv-wrap { padding-top: 26px; }
.pv-toc { top: 80px; max-height: calc(100vh - 100px); }
.pv-card { scroll-margin-top: 80px; }
html:has(.legal-page) { scroll-padding-top: 80px; }
@media (max-width: 640px) { .pv-wrap { padding-top: 20px; } body.legal-page .nav-inner { padding: 0 16px; } }

/* privacy page: the same floating Liquid Glass bar as the main site, but it holds its own space at the top so it never sits on the text when you arrive */
body.legal-page .nav { position: sticky; top: 12px; left: auto; transform: none; margin: 12px auto 0; width: min(920px, calc(100% - 24px)); border: 1px solid var(--glass-edge); border-bottom: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(185%); backdrop-filter: blur(22px) saturate(185%); box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .5); }
body.legal-page .nav-inner { max-width: none; height: 56px; padding: 0 10px 0 22px; margin: 0; }
.pv-wrap { padding-top: 30px; }
.pv-toc { top: 92px; max-height: calc(100vh - 110px); }
.pv-card { scroll-margin-top: 92px; }
html:has(.legal-page) { scroll-padding-top: 92px; }
@media (max-width: 760px) { body.legal-page .nav-inner { padding-left: 16px; } }

/* the dark bands (registrations, certifications, strengths) keep their titles in place instead of pinning over the cards */
.band section > h2, #strengths > h2 { position: static; }
/* PDF links keep the page's look */
body.pdf a { color: inherit; text-decoration: none; }
body.pdf .sb-c a, body.pdf .cc a { border-bottom: 1px dotted currentColor; }
body:not(.ats) .band section > h2, body:not(.ats) #strengths > h2 { position: static; }

/* designed PDF sidebar: a little tighter so five skill groups fit */
body.pdf .sb-h { margin: 3.6mm 0 1.6mm; }
body.pdf .sb-stat { margin: .8mm 0; gap: 2mm; } body.pdf .sb-stat b { font-size: 10pt; min-width: 22mm; white-space: nowrap; } body.pdf .sb-stat span { font-size: 7.4pt; line-height: 1.3; }
body.pdf .sb-g { margin: 1.8mm 0 .4mm; font-size: 7.8pt; }
body.pdf .sb-i { font-size: 7.4pt; line-height: 1.35; }