:root {
    --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --wrap:1200px;
    /* from the current abidpatel.com */
    --navy:#002F69; --navy-deep:#00224D;
    --azure:#0087FF; --azure-dark:#006FD6; --azure-soft:#66B8FF; --azure-pale:#9FD4FF;
    --black:#0B0C0E;
    /* light sections: off-white, warm-neutral so it is not too striking against the charcoal */
    --paper:#EFEEE9; --paper-border:#E2E0D8;
    --body-bg:#F8F7F3;
    --ink:#21242B; --ink-soft:#565A62; --ink-faint:#8A8D95; --line:#E4E2DA;
    /* Raised surfaces and panels. These exist so dark mode has one place to
       change them: any card, input or panel that used to say #fff or #F4F9FC
       reads from here instead. A new card that hard-codes white will look
       wrong in dark mode, so use these. */
    --surface:#fff;                        /* cards, inputs, raised things */
    --panel:#F4F9FC; --panel-border:#E1EDF5;  /* the pale-blue heading and form panels */
    --head-ink:#051923;                    /* section heading text */
    --rule:rgba(31,33,38,.12);             /* the hairline under a white section */
    --scrim:rgba(11,14,20,.55);            /* behind a modal */
    --btn-ink:#fff;                        /* text on an azure button */
    /* ITJW pastel families: 50 bg / 200 border / 100 chip / 600 accent */
    --sky-50:#F0F9FF; --sky-200:#BAE6FD; --sky-100:#E0F2FE; --sky-600:#0284C7;
    --rose-50:#FFF1F2; --rose-200:#FECDD3; --rose-100:#FFE4E6; --rose-600:#E11D48;
    --amber-50:#FFFBEB; --amber-200:#FDE68A; --amber-100:#FEF3C7; --amber-600:#D97706;
    --emerald-50:#ECFDF5; --emerald-200:#A7F3D0; --emerald-100:#D1FAE5; --emerald-600:#059669;
    --violet-50:#F5F3FF; --violet-200:#DDD6FE; --violet-100:#EDE9FE; --violet-600:#7C3AED;
    /* structure tokens - charcoal */
    --hero:#1F2126; --hero-deep:#141519; --stat-col:#66B8FF; --chip:#0087FF; --foot-hover:#66B8FF;
  }
  * { box-sizing:border-box; }
  /* THE FRAME IS ON body, THE PAGE COLOUR IS ON main. Not the obvious way
     round, and it is deliberate.
     iPhone Safari fills the strip behind the clock with the BODY background.
     Measured in the simulator, not guessed: with the page colour on body that
     strip is a pale bar sitting on top of the charcoal header, and moving the
     charcoal onto body makes it disappear into the header. It ignores the
     theme-color meta and `html` for that strip, though both are set below and
     are what other browsers read.
     So body carries the charcoal of the header and footer, and <main>, which
     is exactly the region between them, carries the page colour. Charcoal in
     both themes, because the frame is charcoal in both.
     A section inside main still paints its own background over this; the page
     colour only ever shows in the gaps between them, as before. */
  html { background:var(--hero); }
  body { margin:0; background:var(--hero); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65;
    -webkit-font-smoothing:antialiased; }
  main { background:var(--body-bg); }
  .wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
  h1,h2,h3 { margin:0; line-height:1.18; letter-spacing:-.015em; font-weight:700; text-wrap:balance; }
  p { margin:0 0 1rem; }
  a { color:inherit; }
  :focus-visible { outline:2px solid var(--azure); outline-offset:3px; border-radius:6px; }

  .pill { display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
    font-weight:700; padding:6px 14px; border-radius:999px; }
  .pill--hero { color:var(--azure-pale); border:1px solid rgba(102,184,255,.45); background:rgba(255,255,255,.06); }
  .pill--light { color:var(--sky-600); background:var(--sky-50); border:1px solid var(--sky-200); }

  .btn { font-size:.9rem; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:14px 26px; border-radius:999px; cursor:pointer; border:1px solid transparent; transition:all .2s; }
  .btn:hover { transform:translateY(-2px); }
  .btn--azure { background:var(--azure); color:var(--btn-ink); box-shadow:0 8px 20px -12px rgba(0,20,50,.3); }
  .btn--azure:hover { background:var(--azure-dark); }
  /* deliberately literal white in BOTH themes: this is the inverse button that
     sits on the charcoal hero, where a dark fill would disappear */
  .btn--white { background:#fff; color:#21242B; box-shadow:0 8px 20px -10px rgba(0,20,50,.35); }
  .btn--white:hover { background:var(--sky-50); }

  /* announcement banner - solid azure */
  .banner { background:var(--azure); color:#fff; font-size:.83rem; }
  .banner__in { width:100%; padding:8px 30px; display:flex; align-items:center; gap:10px; }
  .banner__tag { background:#fff; color:var(--navy); font-size:.6rem; font-weight:700; letter-spacing:.1em;
    text-transform:uppercase; padding:2px 9px; border-radius:999px; flex:none; }
  .banner__txt { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
  .banner__x { background:none; border:0; color:rgba(255,255,255,.8); cursor:pointer; font-size:.95rem; line-height:1; padding:4px; flex:none; }
  .banner__x:hover { color:#fff; }
  .banner.is-hidden { display:none; }

  /* header - black bar like the current site, full width */
  .topbar { position:sticky; top:0; z-index:60; background:var(--hero); backdrop-filter:blur(10px); color:#fff; border-bottom:1px solid rgba(255,255,255,.1); }
  .topbar__in { width:100%; padding:0 30px; height:74px; display:flex; align-items:center; gap:20px; }
  .brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
  .brand__mark { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px;
    background:var(--azure); color:#fff; font-weight:700; font-size:.95rem; transition:transform .2s; }
  .brand:hover .brand__mark { transform:scale(1.06); }
  .brand__text { display:flex; flex-direction:column; justify-content:center; line-height:1.05; }
  .brand__name { font-weight:700; font-size:1.1rem; letter-spacing:-.01em; }
  .brand__sub { font-size:.66rem; color:rgba(255,255,255,.5); font-weight:500; letter-spacing:.01em; margin-top:5px; }
  /* nav cluster in a pill; each button bordered, hover-highlight, active-highlight, CTA inside */
  .nav { margin-left:auto; display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:5px 6px; }
  .nav a { font-size:.88rem; font-weight:600; color:rgba(255,255,255,.72); text-decoration:none; padding:8px 16px;
    border-radius:999px; border:1px solid rgba(255,255,255,.16); transition:all .2s; white-space:nowrap; }
  .nav a:hover { color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); }
  .nav a[data-route].is-active { color:#fff; background:var(--azure); border-color:var(--azure); }
  /* Connect always reads as the primary action */
  .nav a.nav__accent { background:var(--azure); color:#fff; border-color:var(--azure); }
  .nav a.nav__accent:hover { background:var(--azure-dark); border-color:var(--azure-dark); color:#fff; }
  .burger { display:none; margin-left:auto; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff;
    width:42px; height:42px; border-radius:11px; cursor:pointer; place-items:center; }
  .mobile-menu { display:none; background:var(--hero); padding:8px 24px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
  .mobile-menu.is-open { display:block; }
  .mobile-menu a { display:flex; align-items:center; justify-content:space-between; color:rgba(255,255,255,.75); text-decoration:none;
    font-size:.98rem; font-weight:600; padding:9px 12px; margin:4px 0; border-radius:10px; }
  .mobile-menu a:hover, .mobile-menu a.is-active { background:rgba(255,255,255,.1); color:#fff; }
  .mobile-menu a.mm-accent:hover, .mobile-menu a.mm-accent.is-active { background:var(--azure); color:#fff; }

  .view { display:none; animation:fade .35s ease both; }
  .view.is-active { display:block; }
  @keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

  /* hero - solid charcoal, flat, white text */
  .hero { background:var(--hero); color:#fff; padding:76px 0 84px; }
  .hero__in { max-width:var(--wrap); margin:0 auto; padding:0 24px;
    display:grid; grid-template-columns:1.35fr 1fr; gap:56px; align-items:center; }
  .hero h1 { font-size:clamp(2.7rem,6vw,4.1rem); color:#fff; margin:1rem 0 1.05rem; }
  .rotator { display:block; min-height:2.55rem; margin:0 0 1.05rem; position:relative; line-height:1.15; }
  .rotator__item { font-size:clamp(1.45rem,3.4vw,2.1rem); font-weight:600; letter-spacing:-.015em; line-height:1.15; position:absolute; left:0; top:0;
    color:var(--stat-col); opacity:0; transform:translateY(10px); transition:opacity .5s,transform .5s; white-space:nowrap; }
  .rotator__item.is-active { opacity:1; transform:none; }
  .rotator--static { position:static; min-height:0; }
  .rotator--static .rotator__item { position:static; opacity:1; transform:none; display:inline; white-space:normal; }
  .hero__lead { font-size:1.08rem; color:rgba(255,255,255,.82); max-width:48ch; margin-bottom:1.7rem; }
  .hero__cta { display:flex; gap:12px; flex-wrap:wrap; }
  .hero__cta .btn { flex:0 1 auto; min-width:158px; padding:11px 22px; font-size:.88rem; }
  .stats { margin-top:2.3rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.15);
    display:grid; grid-template-columns:repeat(4,auto); gap:16px 36px; justify-content:start; }
  .stat b { display:block; font-size:1.5rem; font-weight:700; color:var(--stat-col); letter-spacing:-.02em; }
  .stat span { font-size:.73rem; color:rgba(255,255,255,.6); font-weight:500; }
  .stat .tbc { font-size:.55rem; color:rgba(255,255,255,.45); border:1px dashed rgba(255,255,255,.3); border-radius:4px; padding:0 4px; margin-left:5px; vertical-align:2px; }

  /* hero card - white card on charcoal */
  .hcard { background:var(--surface); color:var(--ink); border-radius:20px; padding:30px; position:relative;
    box-shadow:0 30px 60px -25px rgba(0,10,30,.55); }
  .hcard__badge { position:absolute; top:-11px; right:18px; background:var(--azure); color:#fff; font-size:.66rem;
    font-weight:700; letter-spacing:.01em; padding:5px 13px; border-radius:999px; }
  .hcard__head { display:flex; align-items:center; gap:15px; margin-bottom:1.2rem; }
  .hcard__av { width:62px; height:62px; border-radius:16px; background:var(--hero); display:grid; place-items:center;
    color:#fff; font-weight:700; font-size:1.35rem; flex:none; overflow:hidden; }
  .hcard__av img { width:100%; height:100%; object-fit:cover; }
  .hcard__head h3 { font-size:1.25rem; color:var(--ink); font-weight:700; }
  .hcard__head .role { font-size:.85rem; color:var(--azure-dark); font-weight:700; }
  .hcard__head .loc { font-size:.75rem; color:var(--ink-faint); }
  .hcard ul { list-style:none; margin:0 0 1.3rem; padding:0; display:flex; flex-direction:column; gap:8px; }
  .hcard li { display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--ink-soft); }
  .hcard li .tick { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; flex:none; }
  .hcard li .tick svg { width:13px; height:13px; }
  .hcard li:nth-child(1) .tick { background:var(--sky-100); color:var(--sky-600); }
  .hcard li:nth-child(2) .tick { background:var(--rose-100); color:var(--rose-600); }
  .hcard li:nth-child(3) .tick { background:var(--amber-100); color:var(--amber-600); }
  .hcard li:nth-child(4) .tick { background:var(--emerald-100); color:var(--emerald-600); }
  .hcard__btn { display:flex; width:100%; align-items:center; justify-content:center; gap:8px; background:var(--hero);
    color:#fff; font-weight:700; font-size:.85rem; padding:12px; border-radius:999px; cursor:pointer; text-decoration:none; transition:all .2s; }
  .hcard__btn:hover { background:var(--hero-deep); }

  /* sections */
  .section { padding:70px 0; }
  .section--paper { background:var(--paper); border-top:1px solid var(--paper-border); border-bottom:1px solid var(--paper-border); }
  .section--dark { background:var(--hero); color:#fff; }
  /* white sections matching the #ITjustworks services section, with a subtle charcoal divider */
  .section--white { background:var(--surface); border-bottom:1px solid var(--rule); }
  /* charcoal section with no heading banner (Speaking) */
  .section--dark2 { background:var(--hero); }
  .section--dark2 .section__head { background:transparent; border:none; box-shadow:none; padding:0; }
  .section--dark2 .section__head h2 { color:#fff; }
  .section--dark2 .section__head p { color:rgba(255,255,255,.72); }
  .section--dark2 .pill--light { color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); }
  /* each section heading in its own banner (the #ITjustworks pale-blue banner colour), full content width */
  .section__head { margin:0 0 40px; text-align:center; background:var(--panel); border:1px solid var(--panel-border);
    border-radius:22px; padding:30px 40px; box-shadow:0 2px 10px rgba(15,35,80,.04); }
  .section__head h2 { font-size:clamp(1.8rem,3.8vw,2.4rem); margin:.7rem 0 .5rem; color:var(--head-ink); }
  .section__head p { color:var(--ink-soft); font-size:.98rem; margin:0; }
  .section--dark .section__head { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); box-shadow:none; }
  .section--dark .section__head h2 { color:#fff; }
  .section--dark .section__head p { color:rgba(255,255,255,.72); }
  .section--dark .pill--light { color:#fff; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); }

  /* about */
  .about { display:grid; grid-template-columns:.75fr 1.35fr; gap:48px; align-items:center; }
  .about__photo { aspect-ratio:1/1; border-radius:20px; overflow:hidden; display:grid; place-items:center; position:relative;
    background:var(--hero); color:rgba(255,255,255,.9); font-weight:600; font-size:.8rem; text-align:center; }
  .about__photo img { width:100%; height:100%; object-fit:cover; display:block; }
  .about__photo .ph { padding:0 20px; letter-spacing:.04em; }
  .about__body { text-align:left; }
  .about__body p { color:var(--ink-soft); font-size:.98rem; }
  .about__itjw { display:flex; align-items:center; gap:10px; font-size:.9rem; background:var(--sky-50); border:1px solid var(--sky-200);
    border-radius:12px; padding:13px 16px; color:var(--ink-soft); }
  .about__itjw a { color:var(--azure-dark); font-weight:700; text-decoration:none; }
  .about__itjw a:hover { text-decoration:underline; }
  .about__itjw .itjw-ic { color:var(--azure-dark); flex:none; display:grid; place-items:center; }
  .about__itjw .itjw-ic svg { width:18px; height:18px; display:block; }

  /* expertise - pastel multi-hue cards, centred, on the charcoal band */
  .grid-exp { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:1000px; margin:0 auto; }
  .exp { flex:1 1 190px; max-width:230px; border-radius:16px; padding:18px 16px; display:flex; flex-direction:column; gap:12px;
    border:2px solid; transition:all .25s cubic-bezier(.4,0,.2,1); background:var(--surface); cursor:pointer; text-align:left; font:inherit; color:inherit; min-height:136px; }
  .exp:hover { transform:translateY(-4px); box-shadow:0 14px 26px -12px rgba(15,35,80,.18); }
  .exp__ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; flex:none; box-shadow:0 1px 3px rgba(15,35,80,.08); }
  .exp__ic svg { width:21px; height:21px; }
  .exp span { font-size:.92rem; font-weight:600; color:var(--ink); line-height:1.25; }
  .exp.p0 { background:var(--sky-100); border-color:var(--sky-200); } .exp.p0 .exp__ic { background:var(--sky-200); color:var(--sky-600); }
  .exp.p1 { background:var(--rose-100); border-color:var(--rose-200); } .exp.p1 .exp__ic { background:var(--rose-200); color:var(--rose-600); }
  .exp.p2 { background:var(--amber-100); border-color:var(--amber-200); } .exp.p2 .exp__ic { background:var(--amber-200); color:var(--amber-600); }
  .exp.p3 { background:var(--emerald-100); border-color:var(--emerald-200); } .exp.p3 .exp__ic { background:var(--emerald-200); color:var(--emerald-600); }
  .exp.p4 { background:var(--violet-100); border-color:var(--violet-200); } .exp.p4 .exp__ic { background:var(--violet-200); color:var(--violet-600); }
  .cv-row { margin-top:34px; text-align:center; }
  .tap-hint { display:flex; align-items:center; justify-content:center; gap:7px; margin:-22px 0 28px; font-size:.82rem;
    color:rgba(255,255,255,.55); font-weight:500; }
  .tap-hint svg { width:15px; height:15px; }

  /* project cards - white with pastel header panels */
  .grid-proj { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
  .card { flex:1 1 300px; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
    transition:all .25s cubic-bezier(.4,0,.2,1); box-shadow:0 2px 6px rgba(15,35,80,.05); cursor:pointer; text-align:left; font:inherit; }
  /* projects: whole card tinted pastel */
  .card--solid.p0 { background:var(--sky-50); border-color:var(--sky-200); }
  .card--solid.p1 { background:var(--rose-50); border-color:var(--rose-200); }
  .card--solid.p2 { background:var(--amber-50); border-color:var(--amber-200); }
  .card--solid.p3 { background:var(--emerald-50); border-color:var(--emerald-200); }
  .card--solid.p4 { background:var(--violet-50); border-color:var(--violet-200); }
  .card--solid .card__logo { aspect-ratio:16/9; height:auto; }
  .card:hover { transform:translateY(-4px); box-shadow:0 18px 36px -16px rgba(15,35,80,.2); }
  .card__more { margin-top:auto; padding-top:10px; font-size:.8rem; font-weight:700; color:var(--azure-dark);
    display:inline-flex; align-items:center; gap:6px; }
  .card:hover .card__more { gap:9px; }
  .card__logo { height:118px; display:grid; place-items:center; text-align:center; padding:0 14px; position:relative;
    font-weight:700; font-size:1.25rem; }
  .card.p0 .card__logo { background:var(--sky-100); color:var(--sky-600); }
  .card.p1 .card__logo { background:var(--rose-100); color:var(--rose-600); }
  .card.p2 .card__logo { background:var(--amber-100); color:var(--amber-600); }
  .card.p3 .card__logo { background:var(--emerald-100); color:var(--emerald-600); }
  .card.p4 .card__logo { background:var(--violet-100); color:var(--violet-600); }
  .card__logo .ph { position:absolute; bottom:8px; right:10px; font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; opacity:.55; font-weight:700; }
  /* an uploaded logo sits inside the coloured panel, never cropped */
  .card__img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; padding:14px 8px; display:block; }
  .card__body { padding:22px; display:flex; flex-direction:column; gap:.55rem; flex:1; }
  .card__body h3 { font-size:1.2rem; color:var(--ink); font-weight:700; }
  .card__body p { font-size:.9rem; color:var(--ink-soft); margin:0; }

  /* speaking logos - centred wall */
  .logos { display:flex; flex-wrap:wrap; justify-content:center; gap:13px; max-width:900px; margin:0 auto; }
  /* speaking-engagement logo tiles */
  .logo-chip { flex:0 1 172px; border:1px solid var(--line); border-radius:14px; background:#fff; min-height:104px;
    display:flex; align-items:center; justify-content:center; gap:8px; padding:7px 9px; overflow:hidden; transition:all .25s; }
  .logo-chip:hover { border-color:var(--azure); transform:translateY(-3px); box-shadow:0 10px 20px -10px rgba(0,60,140,.2); }
  .logo-chip img { max-width:100%; max-height:80px; object-fit:contain; display:block; }
  /* fill = zoom the logo to cover the whole tile (crops surrounding whitespace) */
  .logo-chip--fill { padding:0; position:relative; border:0; }
  .logo-chip--fill img { position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; }
  .logo-chip--text { gap:6px; padding:16px 14px; }
  .logo-chip--text .logo-word { font-size:1rem; font-weight:800; color:var(--violet-600); letter-spacing:-.02em; }
  .logo-chip--text .logo-mark { max-height:46px; width:auto; }
  /* nudge a logo left (leaf overhang), no clip */
  .logo-chip--shl { justify-content:flex-start; }
  .logo-chip--shl img { max-width:92%; }

  /* inner-page header - full-bleed charcoal band, centred text */
  .page-head { background:var(--hero); color:#fff; padding:60px 0 64px; text-align:center; }
  .page-head__in { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
  .page-head h1 { font-size:clamp(1.9rem,4.2vw,2.6rem); color:#fff; margin:.9rem 0 .55rem; }
  .page-head p { color:rgba(255,255,255,.8); font-size:.95rem; max-width:60ch; margin:0 auto; }

  /* ---- a blog post on its own page ---- */
  /* a comfortable reading measure, narrower than the rest of the site */
  .wrap--read { max-width:760px; }
  .page-head--post h1 { max-width:22ch; margin-left:auto; margin-right:auto; }
  .post__meta { color:rgba(255,255,255,.72); font-size:.86rem; font-weight:600;
    letter-spacing:.02em; margin:.9rem auto 0; }
  .post { font-size:1.06rem; line-height:1.75; color:var(--ink); }
  .post > :first-child { margin-top:0; }
  .post > :last-child { margin-bottom:0; }
  .post p { margin:0 0 1.15em; }
  .post h2 { font-size:clamp(1.35rem,2.8vw,1.7rem); margin:1.9em 0 .6em; color:var(--ink); }
  .post h3 { font-size:clamp(1.12rem,2.2vw,1.3rem); margin:1.6em 0 .5em; color:var(--ink); }
  .post ul, .post ol { margin:0 0 1.15em; padding-left:1.5em; }
  .post li { margin:0 0 .45em; }
  .post li::marker { color:var(--azure-dark); }
  .post blockquote { margin:1.5em 0; padding:.2em 0 .2em 22px; border-left:3px solid var(--azure);
    color:var(--ink-soft); font-size:1.1rem; font-style:italic; }
  .post blockquote p:last-child { margin-bottom:0; }
  .post a { color:var(--azure-dark); text-decoration:underline; text-underline-offset:2px; }
  .post a:hover { color:var(--navy); }
  .post figure { margin:1.8em 0; text-align:center; }
  .post figure img { max-width:100%; height:auto; border-radius:14px; display:block; margin:0 auto;
    box-shadow:0 14px 32px -18px rgba(15,35,80,.35); }
  .post__hero { margin:0 0 2em; }
  .post__foot { display:flex; gap:12px; flex-wrap:wrap; margin:44px 0 0;
    padding-top:28px; border-top:1px solid var(--line); }
  /* newer / older post */
  .pnav { display:flex; gap:16px; flex-wrap:wrap; margin:22px 0 0; }
  .pnav__i { flex:1 1 260px; display:flex; flex-direction:column; gap:5px; text-decoration:none;
    background:var(--paper); border:1px solid var(--paper-border); border-radius:14px;
    padding:15px 18px; transition:all .2s; }
  .pnav__i:hover { border-color:var(--azure); transform:translateY(-2px);
    box-shadow:0 14px 28px -18px rgba(15,35,80,.3); }
  .pnav__i--next { text-align:right; }
  /* the newest and oldest posts only ever have one neighbour, so a lone card
     keeps to its own half rather than stretching across the page */
  .pnav__i:only-child { flex:0 1 min(50%,340px); }
  .pnav__i--next:only-child { margin-left:auto; }
  .pnav__k { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
    color:var(--azure-dark); }
  .pnav__t { font-size:.95rem; font-weight:700; color:var(--ink); line-height:1.35; }
  /* a post card in the list links to its page rather than opening a pop-up */
  .card--post { text-decoration:none; color:inherit; }
  .card__date { font-size:.74rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
    color:var(--ink-soft); }
  .empty { color:var(--ink-soft); text-align:center; margin:0; }

  /* resources - pastel media panels */
  .res-list { display:flex; flex-direction:column; gap:20px; }
  .res { background:var(--surface); border:1px solid var(--line); border-radius:18px; display:grid; grid-template-columns:300px 1fr;
    overflow:hidden; transition:all .25s; box-shadow:0 2px 6px rgba(15,35,80,.05); text-align:left; cursor:pointer; font:inherit; width:100%; }
  .res:hover { transform:translateY(-3px); box-shadow:0 18px 36px -16px rgba(15,35,80,.2); }
  .res__media { display:grid; place-items:center; min-height:170px; position:relative; }
  .res.p0 .res__media { background:var(--sky-100); color:var(--sky-600); }
  .res.p2 .res__media { background:var(--amber-100); color:var(--amber-600); }
  .res.p3 .res__media { background:var(--emerald-100); color:var(--emerald-600); }
  .res.p1 .res__media { background:var(--rose-100); color:var(--rose-600); }
  .res__media svg { width:42px; height:42px; }
  .res__media .ph { position:absolute; bottom:8px; left:10px; font-size:.52rem; letter-spacing:.08em; text-transform:uppercase; opacity:.6; font-weight:700; }
  /* a supplied picture is fitted inside the panel, never cropped */
  .res__media .res__img { max-width:100%; max-height:200px; width:auto; height:auto; object-fit:contain; padding:14px; display:block; }
  .res__body { padding:22px 26px; display:flex; flex-direction:column; justify-content:center; gap:.7rem; }
  .res__body h3 { font-size:1.22rem; color:var(--ink); font-weight:700; }
  .res__body p { font-size:.9rem; color:var(--ink-soft); margin:0; }
  .res__links { display:flex; gap:18px; flex-wrap:wrap; margin-top:0; }
  .res__links a { font-size:.83rem; font-weight:700; color:var(--azure-dark); text-decoration:none; }
  .res__links a:hover { text-decoration:underline; }
  .type-tag { align-self:flex-start; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:4px 12px; border-radius:999px; }
  .res.p0 .type-tag { color:var(--sky-600); background:var(--sky-50); border:1px solid var(--sky-200); }
  .res.p1 .type-tag { color:var(--rose-600); background:var(--rose-50); border:1px solid var(--rose-200); }
  .res.p2 .type-tag { color:var(--amber-600); background:var(--amber-50); border:1px solid var(--amber-200); }
  .res.p3 .type-tag { color:var(--emerald-600); background:var(--emerald-50); border:1px solid var(--emerald-200); }

  /* connect */
  .connect-grid { display:grid; grid-template-columns:1.25fr .9fr; gap:28px; align-items:stretch; text-align:left; }
  /* contact form: same panel colour as the social side-card, white input boxes like the social buttons */
  .form-card { background:var(--panel); border:1px solid var(--panel-border); border-radius:22px; padding:30px;
    box-shadow:0 2px 6px rgba(15,35,80,.05); display:flex; flex-direction:column; }
  .form-card h2 { font-size:1.25rem; color:var(--ink); margin-bottom:1.1rem; font-weight:700; }
  .field { margin-bottom:15px; }
  .field--grow { flex:1; display:flex; flex-direction:column; min-height:120px; }
  .field--grow textarea { flex:1; }
  .field label { display:block; font-size:.75rem; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
  .field input,.field textarea { width:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:12px 14px; font:inherit; font-size:.9rem; color:var(--ink); }
  .field input:focus,.field textarea:focus { outline:none; border-color:var(--azure); box-shadow:0 0 0 3px rgba(0,135,255,.15); }
  .field textarea { resize:vertical; min-height:120px; }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .turnstile { display:flex; align-items:center; gap:12px; border:1px solid var(--line); background:var(--surface); border-radius:12px;
    padding:12px 14px; margin-bottom:16px; color:var(--ink-soft); font-size:.84rem; }
  .turnstile .box { width:26px; height:26px; background:var(--azure); border-radius:8px; flex:none; display:grid; place-items:center;
    box-shadow:0 4px 10px -3px rgba(0,135,255,.6); }
  .turnstile .box svg { width:15px; height:15px; color:#fff; }
  .turnstile small { margin-left:auto; font-size:.56rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); font-weight:700; }
  .side-card { background:var(--panel); border:1px solid var(--panel-border); border-radius:22px; padding:30px; }
  .side-card h2 { font-size:1.2rem; color:var(--ink); margin-bottom:1.1rem; font-weight:700; }
  .socials { display:flex; flex-direction:column; gap:10px; }
  .social { display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:13px; text-decoration:none;
    background:var(--surface); border:1px solid var(--line); transition:all .2s; color:var(--ink); }
  .social:hover { transform:translateX(3px); border-color:var(--azure); }
  .social .sic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; }
  .social .sic svg { width:18px; height:18px; }
  .social.p0 .sic { background:var(--sky-100); color:var(--sky-600); }
  .social.p1 .sic { background:var(--rose-100); color:var(--rose-600); }
  .social.p2 .sic { background:var(--amber-100); color:var(--amber-600); }
  .social.p3 .sic { background:var(--emerald-100); color:var(--emerald-600); }
  .social.p4 .sic { background:var(--violet-100); color:var(--violet-600); }
  .social.p5 .sic { background:var(--sky-100); color:var(--sky-600); }
  .social b { font-weight:700; font-size:.92rem; }
  .social small { display:block; font-size:.72rem; color:var(--ink-faint); }

  /* /links hub - solid charcoal like the hero */
  .links-page { background:var(--hero); min-height:82vh; display:flex; align-items:center; justify-content:center; padding:56px 0; }
  .linkbio { max-width:440px; width:100%; margin:0 auto; padding:0 22px; text-align:center; color:rgba(255,255,255,.85); }
  .linkbio__av { width:90px; height:90px; border-radius:22px; margin:0 auto 16px; display:grid; place-items:center; overflow:hidden;
    background:var(--chip); color:#fff; font-weight:700; font-size:1.9rem; box-shadow:0 16px 40px -12px rgba(0,10,30,.6); }
  .linkbio__av img { width:100%; height:100%; object-fit:cover; }
  .linkbio h2 { font-size:1.6rem; color:#fff; margin-bottom:.25rem; }
  .linkbio__handle { font-size:.8rem; color:var(--stat-col); font-weight:700; margin-bottom:.8rem; }
  .linkbio__sub { color:rgba(255,255,255,.65); font-size:.85rem; margin-bottom:22px; }
  .linkbio__socials { display:flex; justify-content:center; gap:15px; margin-bottom:24px; }
  .linkbio__socials svg { width:20px; height:20px; color:rgba(255,255,255,.65); }
  .linkbio__socials a:hover svg { color:#fff; }
  .linkbtn { display:flex; align-items:center; gap:12px; width:100%; padding:15px 20px; margin-bottom:12px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:15px; text-decoration:none;
    color:#fff; font-weight:600; font-size:.92rem; text-align:left; line-height:1.35;
    transition:all .2s; backdrop-filter:blur(4px); }
  .linkbtn span { flex:1; }
  .linkbtn .lk-ic { width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
    background:rgba(255,255,255,.1); color:var(--stat-col); }
  .linkbtn .lk-ic svg { width:17px; height:17px; }
  .linkbtn .lk-go { flex:none; color:rgba(255,255,255,.4); transition:transform .2s,color .2s; }
  .linkbtn .lk-go svg { width:16px; height:16px; display:block; }
  .linkbtn:hover { transform:translateY(-2px); background:var(--azure); border-color:var(--azure); color:#fff; box-shadow:0 10px 24px -14px rgba(0,0,0,.55); }
  .linkbtn:hover .lk-ic { background:rgba(255,255,255,.2); color:#fff; }
  .linkbtn:hover .lk-go { color:#fff; transform:translateX(3px); }
  .linkbtn small { display:block; font-weight:500; font-size:.72rem; color:rgba(255,255,255,.5); margin-top:1px; }
  .linkbtn:hover small { color:rgba(255,255,255,.75); }

  /* footer - solid charcoal */
  .footer { background:var(--hero); color:rgba(255,255,255,.7); padding:46px 0 40px; font-size:.83rem; border-top:1px solid rgba(255,255,255,.1); }
  .footer__grid { display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; margin-bottom:28px; }
  .footer__brand { max-width:42ch; }
  .footer__brand .fb-line { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:1.05rem; margin-bottom:10px; }
  .footer__brand .fb-mark { width:34px; height:34px; border-radius:10px; background:var(--chip); display:grid; place-items:center;
    color:#fff; font-weight:700; font-size:.85rem; }
  .footer h4 { color:#fff; font-size:.82rem; margin:0 0 12px; font-weight:700; }
  .footer ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
  .footer a { color:rgba(255,255,255,.7); text-decoration:none; font-size:.83rem; }
  .footer a:hover { color:var(--foot-hover); }
  .footer__base { border-top:1px solid rgba(255,255,255,.15); padding-top:18px; display:flex; flex-wrap:wrap; gap:12px;
    justify-content:space-between; font-size:.75rem; color:rgba(255,255,255,.5); }
  .footer__base a { font-size:.72rem; color:rgba(255,255,255,.4); }

  /* detail modal (opened from any project or resource card) */
  .modal[hidden] { display:none; }
  .modal { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; }
  .modal__backdrop { position:absolute; inset:0; background:var(--scrim); backdrop-filter:blur(3px); }
  /* No border here: a white card on a white page needs no edge, and adding a
     transparent one would inset the content by a pixel. Dark mode adds a real
     edge below, where a dark card on a dark scrim would otherwise dissolve. */
  .modal__card { position:relative; background:var(--surface); border-radius:22px;
    max-width:560px; width:100%; max-height:88vh; overflow:auto;
    box-shadow:0 40px 90px -30px rgba(0,10,30,.75); animation:modalin .28s cubic-bezier(.4,0,.2,1) both; }
  @keyframes modalin { from { opacity:0; transform:translateY(16px) scale(.98); } to { opacity:1; transform:none; } }
  .modal__x { position:absolute; top:14px; right:14px; z-index:2; width:34px; height:34px; border-radius:10px; border:0; cursor:pointer;
    background:rgba(255,255,255,.92); color:var(--ink); font-size:.95rem; display:grid; place-items:center; box-shadow:0 2px 8px rgba(0,0,0,.18); }
  .modal__x:hover { background:#fff; }
  .modal__head { padding:32px 34px 26px; display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
  .modal__head .mh-ic { width:52px; height:52px; border-radius:14px; display:grid; place-items:center; }
  .modal__head .mh-ic svg { width:26px; height:26px; }
  .modal__head h3 { font-size:1.55rem; color:var(--ink); font-weight:700; }
  .modal__head.p0 { background:var(--sky-50); } .modal__head.p0 .mh-ic { background:var(--sky-100); color:var(--sky-600); }
  .modal__head.p1 { background:var(--rose-50); } .modal__head.p1 .mh-ic { background:var(--rose-100); color:var(--rose-600); }
  .modal__head.p2 { background:var(--amber-50); } .modal__head.p2 .mh-ic { background:var(--amber-100); color:var(--amber-600); }
  .modal__head.p3 { background:var(--emerald-50); } .modal__head.p3 .mh-ic { background:var(--emerald-100); color:var(--emerald-600); }
  .modal__head.p4 { background:var(--violet-50); } .modal__head.p4 .mh-ic { background:var(--violet-100); color:var(--violet-600); }
  .modal__tag { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:4px 12px; border-radius:999px; background:var(--surface); color:var(--ink-soft); border:1px solid var(--line); }
  .modal__body { padding:26px 34px 32px; }
  .modal__body p { color:var(--ink-soft); font-size:.96rem; }
  .modal__body p:last-of-type { margin-bottom:0; }
  .modal__links { display:flex; gap:16px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
  .modal__links a { font-size:.85rem; font-weight:700; color:var(--azure-dark); text-decoration:none; }
  .modal__links a:hover { text-decoration:underline; }

  @media (max-width:960px) {
    .nav, .nav__cta { display:none; }
    .burger { display:grid; margin-left:0; }
    /* the nav pill carried margin-left:auto on desktop; with it hidden, the
       theme button takes over pushing the cluster to the right */
    .theme-toggle { margin-left:auto; }
    .hero__in, .about, .connect-grid { grid-template-columns:1fr; }
    .hero { padding:52px 0 56px; }
    .stats { grid-template-columns:repeat(2,auto); }
    .about__photo { max-width:280px; margin:0 auto; }
    .res { grid-template-columns:1fr; }
    .res__media { min-height:110px; }
    .section { padding:52px 0; }
    .page-head { padding:44px 0 48px; }
    /* centre the whole site on mobile */
    .hero__in { text-align:center; }
    .rotator__item { left:0; right:0; text-align:center; }
    .hero__lead { margin-left:auto; margin-right:auto; }
    .hero__cta { justify-content:center; }
    .stats { justify-content:center; text-align:center; }
    .about__body { text-align:center; }
    .about__itjw { justify-content:center; text-align:left; }
    .res { grid-template-columns:1fr; text-align:center; }
    .res__body { align-items:center; }
    .res__links { justify-content:center; }
    .type-tag { align-self:center; }
    .card__body { align-items:center; text-align:center; }
    .card__more { align-self:center; }
    .form-card, .side-card { text-align:left; }
    /* single, centred column for cards / hero card / socials on narrow view */
    .grid-proj { max-width:400px; margin-left:auto; margin-right:auto; }
    .hcard { max-width:800px; margin-left:auto; margin-right:auto; }
    .socials { max-width:400px; margin-left:auto; margin-right:auto; }
    .side-card h2 { text-align:center; }
    .hcard__badge { right:auto; left:50%; transform:translateX(-50%); }
  }
  /* two-column expertise grid on phones */
  @media (max-width:600px) {
    .grid-exp .exp { flex:0 1 calc(50% - 7px); max-width:none; }
  }
  /* projects: all in one row on desktop */
  @media (min-width:961px) {
    .grid-proj--row .card { flex:1 1 calc(25% - 18px); max-width:none; }
  }

  /* ==========================================================================
     DARK MODE
     Opt-in only: the reader turns it on with the header button and the choice
     is remembered. There is deliberately no prefers-color-scheme rule, so an
     OS set to dark still gets the light site until the button is pressed.

     Almost all of this is just redefining the palette. The header, hero,
     footer and /links page are already charcoal and already correct, so they
     are left alone: dark mode is the rest of the page catching up with them.
     ========================================================================== */
  html[data-theme="dark"] {
    color-scheme:dark;
    /* One continuous charcoal. The page sits just under the header's #1F2126
       rather than far below it, so the branded bands read as part of the same
       surface instead of two lighter strips around a black box. */
    --body-bg:#1B1D22;
    /* What was white now LIFTS off the page rather than sinking into it.
       A card is lighter than its background in dark, the reverse of light. */
    --surface:#24272E;
    --paper:#202228; --paper-border:#2F333A;
    --panel:#1F2229; --panel-border:#2E333B;
    --line:#31353D;
    --rule:rgba(255,255,255,.10);
    --ink:#E9EBEE; --ink-soft:#A9AEB7; --ink-faint:#7E848E;
    --head-ink:#F2F4F7;
    /* #0087FF is too dark to read on a dark page. --azure-dark carries every
       link on the site, so it goes LIGHTER than --azure here, not darker;
       that also makes it a sensible hover for the azure button. */
    --azure:#4FA8FF; --azure-dark:#6FB6FF;
    /* The accent is light enough here that white sitting on it drops to about
       2.5:1. Azure buttons take dark text instead, which reads at roughly 7:1
       and is the usual way round for a light accent on a dark interface. */
    --btn-ink:#0C1016;
    --scrim:rgba(0,0,0,.72);
    /* Pastel families: the tints darken, the accents brighten. Violet is held
       back a little because purples read louder than the other hues against a
       cool dark background at the same distance from it. */
    --sky-50:#111C26;     --sky-100:#152532;     --sky-200:#22415A;     --sky-600:#5FBCF7;
    --rose-50:#241419;    --rose-100:#2E1920;    --rose-200:#4E2733;    --rose-600:#FB7185;
    --amber-50:#241C0F;   --amber-100:#2E2414;   --amber-200:#4D3B1D;   --amber-600:#FBBF24;
    --emerald-50:#0E201A; --emerald-100:#122B23; --emerald-200:#1D4838; --emerald-600:#34D399;
    --violet-50:#1B1728;  --violet-100:#231D35;  --violet-200:#392E55;  --violet-600:#A78BFA;
    /* No background here: the canvas is charcoal in both themes, set once on
       `html` above. Setting --body-bg on it again would put a slightly
       different dark under the overscroll than the header sitting next to it. */
  }

  /* Brand logos are supplied as artwork for a light background, so their tiles
     stay light. Off-white rather than pure white so a wall of them does not
     glare. Same for a card or resource panel holding an uploaded logo: the
     coloured placeholder can darken, a real picture cannot. */
  html[data-theme="dark"] .logo-chip { background:#EFEEE9; border-color:#3A3E46; }
  html[data-theme="dark"] .card__logo:has(img) { background:#EFEEE9; }
  html[data-theme="dark"] .res__media:has(.res__img) { background:#EFEEE9; }

  /* The hero card's button is charcoal on white in light mode. On a dark card
     that reads as a hole, so it takes the accent instead. */
  html[data-theme="dark"] .hcard__btn { background:var(--azure); color:var(--btn-ink); }
  html[data-theme="dark"] .hcard__btn:hover { background:var(--azure-dark); }

  /* The logo tiles keep a LIGHT background, so anything written on one has to
     keep its light-mode colour. The dark palette's violet is far too pale to
     sit on off-white. */
  html[data-theme="dark"] .logo-chip--text .logo-word { color:#6D28D9; }

  /* Navy on charcoal is unreadable; an article link brightens on hover here. */
  html[data-theme="dark"] .post a:hover { color:var(--azure-pale); }

  /* .btn--white does two jobs. On the charcoal hero it is the inverse button
     and stays white in both themes. Sitting on an ordinary page section it is
     only a quiet secondary, and a white slab there is far too loud on dark, so
     it becomes an outline button instead. */
  html[data-theme="dark"] .section--white .btn--white {
    background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none; }
  html[data-theme="dark"] .section--white .btn--white:hover {
    background:var(--surface); border-color:var(--azure); }

  /* The newer/older cards are a shade darker than the page in light mode, so
     they recede. On dark that would make them holes; they lift instead. */
  html[data-theme="dark"] .pnav__i { background:#2B2F37; border-color:#3B404A; }

  /* A dark card on a dark scrim needs an edge to read as a raised sheet. */
  html[data-theme="dark"] .modal__card { border:1px solid rgba(255,255,255,.14); }

  /* The modal's close button floats over the coloured head. */
  html[data-theme="dark"] .modal__x { background:rgba(255,255,255,.14); color:var(--ink); }
  html[data-theme="dark"] .modal__x:hover { background:rgba(255,255,255,.26); }

  /* the theme button itself, sitting on the charcoal top bar */
  .theme-toggle { display:inline-flex; align-items:center; justify-content:center; flex:none;
    width:42px; height:42px; border-radius:11px; cursor:pointer; padding:0;
    color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
    transition:background .2s,border-color .2s; }
  .theme-toggle:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.32); }
  .theme-toggle svg { width:19px; height:19px; display:block; }
  /* One button, two icons; CSS picks which shows, so the script never redraws
     it and the markup is identical in both themes. The moon shows in LIGHT
     mode because the icon advertises what you will get, not where you are. */
  .theme-toggle .icon-sun { display:none; }
  html[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
  html[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
  @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }