/* =========================================================================
   OPTION 3 — "THE PROFESSIONAL"
   Clean, corporate-credible, recruiter-friendly. High contrast, generous
   type, accessible by construction (WCAG 2.1 AA colour ratios throughout).
   The safest option to send to an HR screener or an L&D director.
   ========================================================================= */

:root{
  --navy:#12263F;
  --navy-2:#1D3A5F;
  --teal:#0E7C86;
  --teal-dark:#0A5C64;
  --amber:#C77D24;
  --bg:#FFFFFF;
  --surface:#F5F8FA;
  --surface-2:#E8EFF3;
  --ink:#12263F;
  --body:#41525F;
  --muted:#68798A;
  --line:#DAE3EA;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:10px;
  --shadow:0 1px 2px rgba(18,38,63,.05), 0 12px 28px -12px rgba(18,38,63,.16);
  --shadow-lg:0 2px 4px rgba(18,38,63,.06), 0 26px 50px -18px rgba(18,38,63,.24);
  --wrap:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--teal)}
h1,h2,h3,h4{color:var(--ink); line-height:1.2; margin:0; letter-spacing:-.02em}
:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; border-radius:4px }

.wrap{ width:min(var(--wrap),100% - 3rem); margin-inline:auto }
.wrap-narrow{ width:min(760px,100% - 3rem); margin-inline:auto }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff;
  padding:.85rem 1.25rem; z-index:200; border-radius:0 0 8px 0;
}
.skip:focus{ left:0 }

.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); margin:0 0 .9rem;
}

/* ---------- Header ---------- */
.hdr{ position:sticky; top:0; z-index:60; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line) }
.hdr .bar{ display:flex; align-items:center; gap:2rem; padding:.9rem 0 }
.logo{ display:flex; align-items:center; gap:.75rem; text-decoration:none }
.logo .mark{
  width:40px; height:40px; border-radius:9px; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:16px; letter-spacing:-.02em; flex:none;
}
.logo b{ display:block; color:var(--ink); font-size:1.02rem; font-weight:700; line-height:1.2 }
.logo span{ display:block; font-size:12px; color:var(--muted) }
.menu{ margin-left:auto; display:flex; align-items:center; gap:.35rem }
.menu a{
  font-size:14.5px; font-weight:500; color:var(--body); text-decoration:none;
  padding:.55rem .85rem; border-radius:7px;
}
.menu a:hover{ background:var(--surface); color:var(--ink) }
.menu a[aria-current="page"]{ color:var(--teal); font-weight:600; background:var(--surface) }
.menu a.btn{ margin-left:.5rem; color:#fff; font-weight:600 }
.menu a.btn:hover{ color:#fff; background:var(--teal-dark) }
.burger{ display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:7px; padding:.45rem .6rem; font-size:19px; cursor:pointer; color:var(--ink) }
@media (max-width:880px){
  .burger{ display:block }
  .menu{
    display:none; position:absolute; inset:100% 0 auto 0; background:#fff;
    flex-direction:column; align-items:stretch; gap:0; padding:.75rem 1.5rem 1.25rem;
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);
  }
  .menu.open{ display:flex }
  .menu a{ padding:.85rem .5rem }
  .menu .btn{ margin:.6rem 0 0; justify-content:center }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:15px; font-weight:600; text-decoration:none; cursor:pointer;
  padding:.8rem 1.4rem; border-radius:8px; border:1.5px solid var(--teal);
  background:var(--teal); color:#fff; transition:.18s;
}
.btn:hover{ background:var(--teal-dark); border-color:var(--teal-dark) }
.btn-outline{ background:transparent; color:var(--teal) }
.btn-outline:hover{ background:var(--surface); color:var(--teal-dark) }
.btn-navy{ background:var(--navy); border-color:var(--navy) }
.btn-navy:hover{ background:var(--navy-2); border-color:var(--navy-2) }
.btn-lg{ padding:1rem 1.9rem; font-size:16px }
.link-arrow{ font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem }
.link-arrow:hover{ text-decoration:underline }

/* ---------- Hero ---------- */
.hero{ background:linear-gradient(180deg,var(--surface) 0%, #fff 100%); border-bottom:1px solid var(--line) }
.hero .inner{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,5vw,4rem); align-items:center; padding:clamp(3rem,7vw,5.5rem) 0 }
.hero h1{ font-size:clamp(2.1rem,4.6vw,3.35rem); margin-bottom:1.1rem }
.hero h1 span{ color:var(--teal) }
.hero .lede{ font-size:clamp(1.05rem,1.6vw,1.2rem); max-width:52ch; margin:0 0 1.9rem }
.hero .actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.75rem }
.availability{
  display:inline-flex; align-items:center; gap:.55rem; font-size:14px; font-weight:600;
  color:var(--navy); background:#fff; border:1px solid var(--line); border-radius:99px;
  padding:.45rem .95rem; box-shadow:var(--shadow);
}
.availability i{ width:9px; height:9px; border-radius:50%; background:#16A34A; display:block }
.headshot{ position:relative }
.headshot img{
  width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius);
  border:6px solid #fff; box-shadow:var(--shadow-lg);
}
@media (max-width:880px){ .hero .inner{ grid-template-columns:1fr } .headshot{ max-width:300px } }

/* ---------- Logos / tools strip ---------- */
.strip{ border-bottom:1px solid var(--line); background:#fff }
.strip .inner{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2.25rem; padding:1.4rem 0 }
.strip p{ margin:0; font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted) }
.strip ul{ list-style:none; display:flex; flex-wrap:wrap; gap:1rem 1.75rem; margin:0; padding:0 }
.strip li{ font-weight:600; color:var(--navy); font-size:15px }

/* ---------- Sections ---------- */
.sec{ padding:clamp(3.25rem,6.5vw,5.5rem) 0 }
.sec.alt{ background:var(--surface); border-block:1px solid var(--line) }
.sec-head{ max-width:60ch; margin-bottom:2.5rem }
.sec-head h2{ font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:.75rem }
.sec-head p{ margin:0; font-size:1.05rem }
.sec-head.center{ margin-inline:auto; text-align:center }

/* ---------- Cards ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.75rem }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
  box-shadow:var(--shadow);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:#C3D4E0 }
.card .thumb{ position:relative; background:var(--surface-2) }
.card .thumb img{ width:100%; aspect-ratio:16/9; object-fit:cover }
.card .badge{
  position:absolute; top:.85rem; left:.85rem; background:rgba(255,255,255,.95);
  color:var(--navy); font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:.35rem .7rem; border-radius:99px;
}
.card .body{ padding:1.4rem 1.5rem 1.6rem; flex:1; display:flex; flex-direction:column }
.card h3{ font-size:1.2rem; margin-bottom:.55rem }
.card p{ margin:0 0 1.1rem; font-size:.97rem; color:var(--body) }
.card .foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.card .tools{ font-size:12.5px; color:var(--muted) }
.card .more{ font-size:14px; font-weight:600; color:var(--teal) }
.card:hover .more{ text-decoration:underline }

/* ---------- Filters ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem }
.filters button{
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:.55rem 1.1rem;
  border-radius:99px; border:1.5px solid var(--line); background:#fff; color:var(--body);
}
.filters button:hover{ border-color:var(--teal); color:var(--teal) }
.filters button[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff }

/* ---------- Value / services ---------- */
.vals{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem }
.val{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow) }
.val .ic{
  width:44px; height:44px; border-radius:10px; background:var(--surface-2); color:var(--teal);
  display:grid; place-items:center; margin-bottom:1rem;
}
.val .ic svg{ width:22px; height:22px }
.val h3{ font-size:1.1rem; margin-bottom:.5rem }
.val p{ margin:0; font-size:.95rem }

/* ---------- Process ---------- */
.timeline{ display:grid; grid-template-columns:repeat(5,1fr); gap:1.25rem; counter-reset:t }
.timeline li{ list-style:none; counter-increment:t; position:relative; padding-top:2.6rem }
.timeline li::before{
  content:counter(t); position:absolute; top:0; left:0; width:34px; height:34px; border-radius:50%;
  background:var(--teal); color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px;
}
.timeline li::after{ content:''; position:absolute; top:17px; left:34px; right:-1.25rem; height:2px; background:var(--line) }
.timeline li:last-child::after{ display:none }
.timeline h3{ font-size:1.05rem; margin-bottom:.4rem }
.timeline p{ margin:0; font-size:.93rem }
@media (max-width:900px){
  .timeline{ grid-template-columns:1fr }
  .timeline li::after{ display:none }
}

/* ---------- Stats ---------- */
.statbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem }
.statbar div{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; text-align:center }
.statbar b{ display:block; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--navy); letter-spacing:-.03em }
.statbar span{ font-size:13px; color:var(--muted) }
@media (max-width:760px){ .statbar{ grid-template-columns:1fr 1fr } }

/* ---------- Testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem }
.quotes figure{ margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; box-shadow:var(--shadow) }
.quotes blockquote{ margin:0 0 1rem; font-size:1rem; color:var(--ink) }
.quotes figcaption{ font-size:13.5px; color:var(--muted) }
.quotes figcaption b{ display:block; color:var(--ink); font-size:14.5px }

/* ---------- Project page ---------- */
.crumbs{ font-size:13.5px; color:var(--muted); padding:1.25rem 0 }
.crumbs a{ color:var(--muted); text-decoration:none }
.crumbs a:hover{ color:var(--teal); text-decoration:underline }
.proj-hero{ background:var(--surface); border-bottom:1px solid var(--line); padding-bottom:2.5rem }
.proj-hero h1{ font-size:clamp(1.9rem,4.2vw,3rem); margin:.4rem 0 .9rem }
.proj-hero .sub{ font-size:1.15rem; max-width:60ch; margin:0 }
.factbox{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.25rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; margin-top:2rem; box-shadow:var(--shadow);
}
.factbox span{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem }
.factbox b{ font-size:.98rem; color:var(--ink); font-weight:600 }

.player{ padding:clamp(2rem,4vw,3rem) 0 }
.player-head{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem }
.player-head h2{ font-size:1.4rem }
.player-head .hint{ margin-left:auto; font-size:13.5px; color:var(--muted) }
.embed-frame{
  width:100%; background:#0B1220; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-lg);
}
.embed-frame iframe{ width:100%; height:100%; border:0; display:block }
.embed-video{ width:100%; border-radius:var(--radius); border:1px solid var(--line) }
.embed-note{ font-size:13.5px; color:var(--muted); margin-top:.9rem }
.embed-cta{
  display:inline-flex; align-items:center; gap:.5rem; font-size:15px; font-weight:600;
  text-decoration:none; padding:.9rem 1.5rem; border-radius:8px; background:var(--teal); color:#fff;
}
.embed-cta:hover{ background:var(--teal-dark) }

.detail{ display:grid; grid-template-columns:1fr 300px; gap:clamp(2rem,4vw,3.5rem); padding-bottom:4rem }
@media (max-width:900px){ .detail{ grid-template-columns:1fr } }
.detail h2{ font-size:1.45rem; margin:2.25rem 0 .85rem }
.detail h2:first-child{ margin-top:0 }
.detail p{ margin:0 0 1.1rem }
.detail ul{ margin:0 0 1.5rem; padding-left:1.25rem }
.detail li{ margin-bottom:.65rem }
.detail li::marker{ color:var(--teal) }
.outcome{ background:var(--surface); border-left:4px solid var(--teal); border-radius:0 var(--radius) var(--radius) 0; padding:1.5rem 1.75rem; margin:1.5rem 0 }
.outcome h2{ margin-top:0 }
.side{ position:sticky; top:88px; align-self:start }
.side .box{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow); margin-bottom:1.25rem }
.side h3{ font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.85rem }
.pillrow{ display:flex; flex-wrap:wrap; gap:.45rem }
.pill{ font-size:12.5px; font-weight:600; background:var(--surface-2); color:var(--navy); border-radius:99px; padding:.35rem .75rem }

.morework{ border-top:1px solid var(--line) }

/* ---------- Resume ---------- */
.cv{ display:grid; grid-template-columns:1fr 280px; gap:3rem; padding-bottom:4rem }
@media (max-width:900px){ .cv{ grid-template-columns:1fr } }
.cv-item{ padding:1.5rem 0; border-bottom:1px solid var(--line) }
.cv-item .top{ display:flex; gap:1rem; flex-wrap:wrap; align-items:baseline; margin-bottom:.5rem }
.cv-item h3{ font-size:1.15rem }
.cv-item .org{ color:var(--teal); font-weight:600 }
.cv-item .when{ margin-left:auto; font-size:13.5px; color:var(--muted) }
.cv-item ul{ margin:.6rem 0 0; padding-left:1.25rem }
.cv-item li{ margin-bottom:.45rem; font-size:.97rem }
/* Skill groups. Replaced the old .meter percentage bars, whose widths were
   self-assigned numbers rather than anything measured. */
.skillgroup{ margin-bottom:1.15rem }
.skillgroup:last-child{ margin-bottom:0 }
.skillgroup h4{ font-size:12px; letter-spacing:.08em; text-transform:uppercase;
                color:var(--muted); font-weight:700; margin-bottom:.55rem }

/* ---------- Contact ---------- */
/* Honeypot. Off-screen rather than display:none, because some bots skip fields
   they can tell are hidden. Never announced, never tabbable. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.form-status{ margin:.9rem 0 0; font-size:.95rem; line-height:1.5 }
.form-status:empty{ display:none }
.form-status.is-ok{ color:var(--teal); font-weight:600 }
.form-status.is-bad{ color:#b3261e; font-weight:600 }

.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,3.5rem) }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr } }
.field{ margin-bottom:1.25rem }
.field label{ display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:.45rem }
.field input,.field textarea,.field select{
  width:100%; font:inherit; font-size:15.5px; padding:.8rem .95rem; border:1.5px solid var(--line);
  border-radius:8px; background:#fff; color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--teal); outline:none; box-shadow:0 0 0 3px rgba(14,124,134,.15) }
.field .help{ font-size:13px; color:var(--muted); margin-top:.35rem }

/* ---------- CTA band ---------- */
.band{ background:var(--navy); color:#fff; text-align:center; padding:clamp(3rem,6vw,4.5rem) 0 }
.band h2{ color:#fff; font-size:clamp(1.6rem,3.4vw,2.3rem); margin-bottom:.85rem }
.band p{ color:#B9C9D8; max-width:52ch; margin:0 auto 1.9rem }
.band .btn{ background:#fff; color:var(--navy); border-color:#fff }
.band .btn:hover{ background:var(--surface-2); border-color:var(--surface-2) }
.band .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45) }
.band .btn-outline:hover{ background:rgba(255,255,255,.12); color:#fff }

/* ---------- Footer ---------- */
.ftr{ background:var(--surface); border-top:1px solid var(--line); padding:3rem 0 2rem }
.ftr-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:2.25rem }
@media (max-width:760px){ .ftr-grid{ grid-template-columns:1fr } }
.ftr h4{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.9rem }
.ftr ul{ list-style:none; margin:0; padding:0 }
.ftr li{ margin-bottom:.55rem }
.ftr a{ color:var(--body); text-decoration:none; font-size:15px }
.ftr a:hover{ color:var(--teal); text-decoration:underline }
.ftr .legal{ border-top:1px solid var(--line); padding-top:1.5rem; font-size:13.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:1rem }
.ftr .legal .sp{ margin-left:auto }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(14px) }
.reveal.in{ opacity:1; transform:none; transition:opacity .55s ease, transform .55s ease }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{ opacity:1; transform:none; transition:none }
  html{ scroll-behavior:auto }
  .card:hover{ transform:none }
}

@media print{
  .hdr,.ftr,.band,.burger{ display:none }
  body{ font-size:12pt; color:#000 }
}