/* xper137.com: minimal light support page for the LinkedIn profile. One family (IBM Plex Sans), Denim primary, Apache gold as decoration only. */

@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plex Fallback"; font-weight: 400; src: local("Arial"); size-adjust: 100.3%; ascent-override: 102.7%; descent-override: 27.9%; line-gap-override: 0%; }
@font-face { font-family: "Plex Fallback"; font-weight: 600; src: local("Arial Bold"), local("Arial"); size-adjust: 96.9%; ascent-override: 106.3%; descent-override: 28.9%; line-gap-override: 0%; }

:root {
  --denim: #1560BD;
  --denim-dark: #104a92;
  --gold: #DFBE6F;
  --paper: #FFFFFF;
  --paper-2: #F3F5F8;
  --ink: #0F1823;
  --ink-muted: #4A5568;
  --line: #D5DBE4;

  --font: "Plex Sans", "Plex Fallback", "Segoe UI", Arial, sans-serif;
  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 0;
  accent-color: var(--denim);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (min-width: 60em) { html { scroll-padding-top: 96px; } }

body {
  margin: 0;
  font: 400 1.0625rem/1.6 var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--denim); color: #fff; }

h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; font-weight: 600; }
p { text-wrap: pretty; }
ol, ul { padding: 0; list-style: none; }

a { color: var(--denim); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--denim); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.75rem 1rem; background: var(--denim); color: #fff; font-weight: 600; border-radius: 2px; text-decoration: none; }
.skip:focus { top: 1rem; }

/* Type roles */
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; }
h3, h4 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.35; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); line-height: 1.55; max-width: 36em; }
.lead + .lead { margin-top: 1rem; }
.fine { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-muted); max-width: 36em; }
.fine + .fine { margin-top: 0.5rem; }
.email-obf { font-weight: 600; overflow-wrap: anywhere; }
.email-obf a { font-weight: 600; }
h2 + .lead, h2 + .fine { margin-top: 1rem; }
.lead + .fine { margin-top: 0.75rem; }

/* Button */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.75rem 1.75rem; border: 1px solid transparent; border-radius: 2px; font: 600 1rem/1.35 var(--font); text-decoration: none; transition: background-color 0.2s, transform 0.25s var(--ease); }
.btn--primary { background: var(--denim); color: #fff; }
.btn--primary:hover { background: var(--denim-dark); }
.btn--outline-navy { background: transparent; color: var(--ink-on-navy); border-color: rgba(244, 246, 249, 0.5); }
.btn--outline-navy:hover { background: rgba(244, 246, 249, 0.08); border-color: rgba(244, 246, 249, 0.7); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-2px); } }
@media (prefers-reduced-motion: no-preference) { .btn:active { transform: scale(0.98); transition: background-color 0.2s, transform 0.12s var(--ease); } }

/* Header */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); z-index: 20; }
.site-header__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; padding-block: 0.5rem; }
.brand { display: inline-flex; align-items: center; min-height: 3.5rem; }
.brand img { display: block; height: 56px; width: auto; }
.nav ul { display: flex; gap: 0 1.25rem; }
.nav a { white-space: nowrap; }
@media (max-width: 25.99em) { .nav ul { gap: 0 0.75rem; } }
.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.6rem) / 0 2px no-repeat; transition: background-size 0.3s var(--ease), color 0.2s; }
.nav a:hover, .nav a[aria-current="true"] { color: var(--denim); background-size: 100% 2px; }
@media (min-width: 60em) {
  .site-header { position: sticky; top: 0; }
  .site-header__in { height: 96px; padding-block: 0; }
  .brand img { height: 72px; }
  .nav ul { gap: 0 2rem; }
}

/* Hero (navy, Signal Lines) */
:root { --navy-900: #0D141A; --navy-800: #111827; --ink-on-navy: #F4F6F9; --ink-on-navy-muted: #AEB9C9; --denim-300: #8DB8F5; --gold-hover: #C8B568; --line-on-navy: rgba(244, 246, 249, 0.16); }
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; min-height: max(32rem, min(calc(100svh - 96px), 52rem)); background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 100%); color: var(--ink-on-navy); }
.hero__lines { position: absolute; left: 0; right: 0; bottom: 3rem; z-index: -2; width: 100%; height: 40%; -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--navy-900) 30%, var(--navy-900) 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, var(--navy-900) 30%, var(--navy-900) 80%, transparent 100%); }
.hero__lines .lines { opacity: 0.85; }
.hero__veil { display: none; }
@media (min-width: 60em) {
  .hero__lines { inset: 0; height: 100%; -webkit-mask-image: none; mask-image: none; }
  .hero__veil { display: block; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--navy-900) 0%, rgba(13, 20, 26, 0.96) 24%, rgba(13, 20, 26, 0.62) 42%, rgba(13, 20, 26, 0) 66%); }
}
.hero__in { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: clamp(3.5rem, 2rem + 7vw, 7rem); }
.hero__eyebrow { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--denim-300); margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.hero__eyebrow::before { content: ""; display: block; width: 4rem; height: 4px; margin-bottom: 1.25rem; background: var(--gold); }
.hero h1 { max-width: 12em; font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.75rem); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink-on-navy); }
.hero__sub { max-width: 34rem; margin-top: clamp(1.5rem, 2.5vw, 2.25rem); font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); line-height: 1.5; color: var(--ink-on-navy-muted); }
.hero__audience { max-width: 32rem; margin-top: 1.5rem; font-size: 1rem; line-height: 1.55; color: var(--ink-on-navy-muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 3.5vw, 2.75rem); }
.hero__cta-note { margin-top: 0.875rem; font-size: 0.9375rem; color: var(--ink-on-navy-muted); }
.hero :focus-visible { outline-color: var(--denim-300); }

/* Short viewports (e.g. 870x631, 1280x720, phones in landscape): both CTA buttons must stay reachable without scrolling. */
@media (max-height: 760px) {
  .hero__in { padding-block: 2rem; }
  .hero__eyebrow { margin-bottom: 1rem; }
  .hero__eyebrow::before { margin-bottom: 0.875rem; }
  .hero h1 { max-width: 18em; font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.25rem); }
  .hero__sub { margin-top: 1rem; }
  .hero__audience { margin-top: 0.75rem; }
  .hero__cta { margin-top: 1.5rem; }
  .hero__cta-note { margin-top: 0.625rem; }
}
.btn--gold { background: var(--gold); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-hover); }

@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes flow { to { stroke-dashoffset: -1000; } }
.pkt { animation: flow var(--d, 50s) linear infinite; animation-delay: var(--o, 0s); }
.pkt:nth-child(1) { --d: 49s; --o: -11s; }
.pkt:nth-child(2) { --d: 46s; --o: -18s; }
.pkt:nth-child(3) { --d: 50s; --o: -3s; }
.pkt:nth-child(4) { --d: 58s; --o: -9s; }
.pkt:nth-child(5) { --d: 47s; --o: -21s; }
.pkt:nth-child(6) { --d: 40s; --o: -25s; }
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow { animation: rise 0.7s var(--ease) both; }
  .hero h1 { animation: rise 0.8s var(--ease) 0.08s both; }
  .hero__sub { animation: rise 0.7s var(--ease) 0.16s both; }
  .hero__cta { animation: rise 0.7s var(--ease) 0.2s both; }
  .hero__cta-note { animation: rise 0.7s var(--ease) 0.24s both; }
  .hero__audience { animation: rise 0.7s var(--ease) 0.28s both; }
}
@media (prefers-reduced-motion: reduce) { .packets { display: none; } .pkt { animation: none; } }
.hero.is-paused .pkt { animation-play-state: paused; }

/* Sections */
.section { padding-block: var(--section-y); }
.section--alt { background: var(--paper-2); }

/* Drawn hairlines (content is always visible; only rules animate) */
.draw { position: relative; --rule-h: 1px; --rule-c: var(--line); }
.draw::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--rule-h); background: var(--rule-c); transform-origin: left center; }
.js .draw::after { transform: scaleX(0); transition: transform 0.9s var(--ease) calc(var(--i, 0) * 90ms); }
.js .draw.is-in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .js .draw::after { transform: none; transition: none; } }

/* Proof band: four numbers, one row, 2x2 on mobile */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem clamp(1.5rem, 4vw, 3rem); }
.stat { padding-top: 1.25rem; --rule-h: 2px; --rule-c: var(--denim); }
.stat__num { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--denim); font-variant-numeric: tabular-nums; }
.stat__label { margin-top: 0.625rem; max-width: 20em; color: var(--ink-muted); }
@media (min-width: 48em) { .stats { grid-template-columns: repeat(4, 1fr); } }

/* Two-column layout: heading left, body right (stacked on mobile) */
.about { display: grid; gap: 1.5rem; }
.namelane { margin-top: 2rem; max-width: 24em; font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.42; letter-spacing: -0.01em; }
.namelane strong { font-weight: 600; }
@media (min-width: 60em) {
  .about { grid-template-columns: repeat(12, 1fr); column-gap: 2rem; align-items: start; }
  .about h2 { grid-column: 1 / 5; }
  .about__text, .about > .lead { grid-column: 6 / 13; }
}

/* About photo: small round portrait, Denim outer ring + gold inner ring, no effects */
.about__photo { display: block; width: 8rem; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 4px solid var(--denim); outline: 4px solid var(--gold); outline-offset: -8px; }
@media (min-width: 60em) {
  .about h2 { grid-row: 1; }
  .about__photo { grid-column: 1 / 5; grid-row: 2; width: 14rem; }
  .about__text { grid-row: 1 / span 2; }
}

/* Services */
.services { display: grid; gap: 2rem; margin-top: clamp(2rem, 4vw, 3rem); counter-reset: svc; }
.services--cont { counter-reset: svc 3; margin-top: clamp(2rem, 4vw, 3rem); }
.svc { counter-increment: svc; padding-top: 1.5rem; --rule-h: 2px; --rule-c: var(--denim); }
.svc::before { content: counter(svc); display: block; margin-bottom: 1rem; font-size: 2rem; font-weight: 400; line-height: 1; color: var(--denim); font-variant-numeric: tabular-nums; }
.svc h3 { max-width: 14em; }
.svc__body { margin-top: 0.625rem; max-width: 26em; color: var(--ink-muted); }
.svc-credential { margin-top: 2rem; font-size: 1.125rem; font-weight: 600; color: var(--denim); }
@media (min-width: 48em) { .services { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); } }

/* How I work: flat hairline panels, no shadow */
.panels { display: grid; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.panel { padding: 1.5rem; border: 1px solid var(--line); background: var(--paper); }
.panel__icon { display: block; margin-bottom: 0.75rem; width: 2rem; height: 2rem; color: var(--denim); }
.panel__icon svg { display: block; width: 100%; height: 100%; }
.panel__step { color: var(--denim); }
.panel__body { margin-top: 0.625rem; color: var(--ink-muted); }
@media (min-width: 48em) { .panels { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75em) {
  .panels { grid-template-columns: repeat(6, 1fr); }
  .panel { grid-column: span 2; }
  .panel:nth-child(n+4) { grid-column: span 3; }
}

/* Selected experience: ruled rows, years only */
.xp-list { display: grid; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); }
.xp { padding-block: 1.5rem; --rule-h: 1px; --rule-c: var(--line); }
.xp__year { color: var(--denim); font-weight: 600; font-variant-numeric: tabular-nums; }
.xp__body h4 { margin-top: 0.5rem; max-width: 32em; }
.xp__role { margin-top: 0.5rem; color: var(--ink-muted); max-width: 32em; }
.xp__result { margin-top: 0.375rem; font-weight: 600; }
.xp-group { margin-top: clamp(2rem, 4vw, 3rem); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--denim); }
.xp-group + .xp-list { margin-top: 0.75rem; }
.xp-note { margin-top: 2rem; max-width: 36em; padding-left: 1rem; border-left: 3px solid var(--denim); font-size: 1.125rem; font-weight: 500; line-height: 1.5; color: var(--ink-muted); }
#experience { padding-bottom: calc(var(--section-y) * 0.6); }
@media (max-width: 30em) { .xp-note { font-size: 1rem; padding-left: 0.875rem; } }
@media (min-width: 60em) {
  .xp { display: grid; grid-template-columns: 8rem 1fr; column-gap: 2rem; }
}

/* Closing / Contact: second dark section. Apache gold accents only, no shadows. */
.closing { background: var(--navy-900); color: var(--ink-on-navy); }
.closing a:not(.btn) { color: var(--denim-300); }
.closing :focus-visible { outline-color: var(--denim-300); }
.closing__grid { display: grid; gap: clamp(3rem, 5vw, 4rem); }
.accent { color: var(--gold); }
.eyebrow-dark { font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--denim-300); }
.closing h2 { margin-top: 1rem; max-width: 18em; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.1; letter-spacing: -0.025em; color: var(--ink-on-navy); }
.closing__text { margin-top: 1.25rem; max-width: 34rem; font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); line-height: 1.5; color: var(--ink-on-navy-muted); }
.closing__secondary { margin-top: 1.5rem; }
.closing__prefer { margin-top: 1rem; font-size: 0.9375rem; color: var(--ink-on-navy-muted); }
.closing__standard h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-on-navy); }
.xper { margin-top: clamp(1.5rem, 3vw, 2rem); }
.xper li { padding-top: 1.25rem; --rule-h: 1px; --rule-c: var(--line-on-navy); }
.xper li + li { margin-top: 1.25rem; }
.xper__letter { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-on-navy); }
.xper__text { margin-top: 0.375rem; color: var(--ink-on-navy-muted); max-width: 26em; }
@media (min-width: 60em) {
  .closing__grid { grid-template-columns: 7fr 5fr; }
}

/* Contact form */
.contact-form { display: grid; gap: 1.25rem; margin-top: clamp(1.75rem, 3vw, 2.25rem); max-width: 34rem; }
.field label { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--ink-on-navy); }
.field .req { color: var(--gold); }
.field input, .field textarea { display: block; width: 100%; margin-top: 0.5rem; padding: 0.75rem 0.875rem; border: 1px solid rgba(244, 246, 249, 0.3); border-radius: 2px; background: rgba(244, 246, 249, 0.04); color: var(--ink-on-navy); font: 400 1rem/1.4 var(--font); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-on-navy-muted); opacity: 0.8; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--denim-300); outline-offset: 2px; }
.field textarea { resize: vertical; min-height: 7rem; }
.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.contact-form__consent { margin-top: -0.5rem; font-size: 0.875rem; color: var(--ink-on-navy-muted); max-width: 34rem; }
.form-status { font-size: 0.9375rem; }
.form-status[data-state="ok"] { color: var(--ink-on-navy); }
.form-status[data-state="error"] { color: var(--gold); }
/* Honeypot: visually hidden, not display:none, so bots that fill every field still fill this one */
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 40em) {
  .contact-form { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

/* Footer */
.site-footer { padding-block: clamp(2.5rem, 4vw, 3.5rem) 2rem; background: var(--paper); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 0.9375rem; }
.site-footer__in { display: grid; gap: 2rem; }
.site-footer__id p + p { margin-top: 0.5rem; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.6rem) / 0 1px no-repeat; transition: background-size 0.3s var(--ease), color 0.2s; }
.site-footer__nav a:hover { color: var(--denim); background-size: 100% 1px; }
.site-footer__legal { padding-top: 1.5rem; border-top: 1px solid var(--line); }
@media (min-width: 60em) {
  .site-footer__in { grid-template-columns: 1fr auto; align-items: start; }
  .site-footer__legal { grid-column: 1 / -1; }
}

/* Privacy page prose */
.prose { padding-block: clamp(3rem, 6vw, 6rem); }
.prose .wrap { max-width: calc(46rem + 2 * var(--gutter)); }
.prose h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.1; letter-spacing: -0.025em; }
.prose p { margin-top: 0.875rem; max-width: 62ch; }
.prose .meta { margin-top: 1rem; color: var(--ink-muted); font-weight: 600; }