/* Architect's Blueprint — complete, single-source visual system */
:root{color-scheme:light;--navy:#071426;--navy-2:#0b2035;--navy-3:#102c43;--teal:#14d7d0;--teal-dark:#087f83;--ink:#0b1c31;--muted:#425a72;--paper:#f3f8fc;--white:#fff;--line:#d8e5ef;--header-h:66px;--page-width:1240px;--gutter:clamp(18px,4vw,56px);--radius:14px;--shadow:0 18px 45px rgba(4,20,36,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 18px)}body{margin:0;background:var(--navy);color:#eaf4fc;font:16px/1.65 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-rendering:optimizeLegibility}img{max-width:100%;height:auto}a{color:#087f83;text-decoration:none;transition:color .18s ease,background-color .18s ease,border-color .18s ease}a:hover{color:#075e63}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #14d7d0;outline-offset:3px}.skip-link{position:absolute;left:1rem;top:-5rem;z-index:1000;padding:.8rem 1rem;background:var(--teal);color:var(--navy);border-radius:8px}.skip-link:focus{top:1rem}
.site-header{position:sticky;top:0;z-index:100;background:rgba(4,19,34,.96);backdrop-filter:blur(16px);border-bottom:1px solid rgba(20,215,208,.18);color:#f4f8fc}.header-inner{max-width:var(--page-width);min-height:var(--header-h);margin:auto;padding:8px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:10px;color:#f4f8fc;white-space:nowrap}.brand:hover{color:#fff}.brand-mark{font-size:1.65rem;font-weight:800;color:var(--teal);letter-spacing:-.12em}.brand-copy{display:grid;line-height:1.2}.brand-copy strong{font-size:1rem}.brand-copy small{color:#a8bfd2;font-size:.7rem;letter-spacing:.04em}.nav-menu ul{display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:0;margin:0;list-style:none}.nav-menu a{display:inline-flex;align-items:center;min-height:40px;color:#d6e4ef;font-size:.84rem;font-weight:550}.nav-menu a:hover,.nav-menu a.active{color:var(--teal)}.nav-menu .resume-link a{padding:0 16px;border:1px solid var(--teal-dark);border-radius:8px;color:var(--teal);background:rgba(20,215,208,.07)}.nav-menu .resume-link a:hover{background:var(--teal);color:var(--navy)}.nav-toggle{display:none}.scroll-progress{height:2px;background:var(--teal);width:0}
main section{scroll-margin-top:calc(var(--header-h) + 14px)}.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 70% 42%,rgba(0,180,190,.18),transparent 34%),linear-gradient(110deg,#041222 0%,#08243b 58%,#041426 100%);border-bottom:1px solid rgba(20,215,208,.35)}.hero:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(rgba(20,215,208,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(20,215,208,.15) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,transparent,#000 50%,#000)}.hero-grid{position:relative;z-index:1;max-width:var(--page-width);margin:auto;padding:clamp(38px,5vw,72px) var(--gutter) 30px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(290px,.92fr);gap:clamp(24px,5vw,72px);align-items:center;min-height:410px}.hero-content{max-width:650px}.eyebrow{margin:0 0 9px;color:var(--teal-dark);font-size:.72rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase}.hero .eyebrow{color:#6df5ed}.status-dot{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(20,215,208,.12)}h1,h2,h3,p{margin-top:0}h1{margin-bottom:12px;color:#f6f9fc;font-size:clamp(2.55rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.045em;font-weight:800}h1 span{color:var(--teal)}h2{margin-bottom:14px;font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.12;letter-spacing:-.03em;color:var(--ink)}h3{line-height:1.25}.hero-kicker{max-width:550px;margin-bottom:10px;color:#f4f8fc;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:600;line-height:1.35}.hero-subtitle{max-width:580px;margin-bottom:20px;color:#bfd0df;font-size:.96rem}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 19px;border:1px solid transparent;border-radius:8px;font-weight:700;font-size:.87rem;transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--teal);color:#04202d;border-color:var(--teal)}.btn-primary:hover{background:#8afaf3;color:#04202d}.btn-secondary{background:transparent;color:#f3f8fc;border-color:#3e8a9b}.btn-secondary:hover{background:#12384e;color:#fff;border-color:var(--teal)}.btn-ghost{color:#eaf4fc;border-color:rgba(190,220,240,.28)}.btn-ghost:hover{background:#17364d;color:#fff}.hero-signals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;list-style:none;margin:24px 0 0;padding:0}.hero-signals li{display:flex;flex-direction:column;gap:2px;border-right:1px solid rgba(180,215,235,.16);padding-right:10px}.hero-signals li:last-child{border-right:0}.hero-signals strong{color:var(--teal);font-size:1.1rem}.hero-signals span{color:#c1d3e1;font-size:.72rem;line-height:1.35}.avatar-stage{position:relative;justify-self:center;width:min(100%,410px);aspect-ratio:4/4.4;display:flex;align-items:end;justify-content:center}.avatar-stage:before{content:"";position:absolute;inset:10% 2% 0;border-radius:48% 48% 12px 12px;background:radial-gradient(ellipse,rgba(20,215,208,.25),transparent 65%)}.profile-img{position:relative;width:100%;height:100%;object-fit:cover;object-position:center 28%;border-radius:46% 46% 12px 12px;border:1px solid rgba(20,215,208,.65);box-shadow:0 0 0 10px rgba(20,215,208,.05),0 22px 55px rgba(0,0,0,.3);mask-image:linear-gradient(#000 78%,transparent 100%)}
.recruiter-section{max-width:var(--page-width);margin:auto;padding:30px var(--gutter);background:var(--paper);color:var(--ink)}.recruiter-section h2{font-size:1.4rem}.quick-view-location{color:var(--muted)}.quick-view-wrap{overflow-x:auto}.quick-view{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.quick-view th,.quick-view td{padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:.86rem}.quick-view th{width:180px;color:#263c52;background:#edf4f8}.quick-view td{color:#344c62}.meta{color:#536b80;font-size:.78rem}
#engineering-signal,#what-i-build{max-width:var(--page-width);margin:auto;padding:clamp(42px,5vw,70px) var(--gutter);background:var(--paper);color:var(--ink)}#engineering-signal h2,#what-i-build h2{color:var(--ink)}.section-intro{max-width:740px;color:var(--muted)}.signal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}.highlight-item{padding:22px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.highlight-item h3{margin-bottom:8px;color:var(--ink)}.highlight-item p{margin-bottom:0;color:#40566c;font-size:.9rem}.highlight-item:hover{transform:translateY(-3px);border-color:#68d9d2;box-shadow:0 12px 28px rgba(7,32,53,.1);background:#eafafa}.highlight-item:hover h3,.highlight-item:hover p{color:#102b42}
#featured-engineering{padding:clamp(40px,5vw,64px) max(var(--gutter),calc((100vw - var(--page-width))/2));background:radial-gradient(ellipse at 85% 20%,rgba(0,173,184,.13),transparent 30%),#06192b;color:#f5f9fc;border-top:1px solid rgba(20,215,208,.25);border-bottom:1px solid rgba(20,215,208,.25)}#featured-engineering h2{color:#f4f8fc}#featured-engineering h2 span{color:var(--teal)}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.project{overflow:hidden;position:relative;display:flex;flex-direction:column;padding:0 18px 18px;border:1px solid rgba(120,185,215,.24);border-radius:12px;background:linear-gradient(145deg,#0d2a42,#081b2e);color:#eaf4fc;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.project h3{margin:0 0 7px;font-size:1.02rem}.project h3 a{color:#f4f8fc}.project p{color:#c1d0df;font-size:.86rem;margin-bottom:12px}.project-duration{font-size:.72rem!important;color:#78e8e0!important;font-weight:650}.project:hover{transform:translateY(-3px);background:linear-gradient(145deg,#123951,#0b253b);border-color:var(--teal);box-shadow:0 16px 30px rgba(0,0,0,.2)}.project:hover h3 a,.project:hover p{color:#f4f8fc}.project-art{height:112px;margin:0 -18px 15px;position:relative;overflow:hidden;background:radial-gradient(circle at 75% 20%,rgba(20,215,208,.3),transparent 38%),linear-gradient(135deg,#0c3552,#061627);border-bottom:1px solid rgba(20,215,208,.25)}.project-art:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(20,215,208,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(20,215,208,.1) 1px,transparent 1px);background-size:22px 22px}.art-node{position:absolute;width:72px;height:72px;left:calc(50% - 36px);top:20px;border:1px solid #26e2dc;border-radius:18px;box-shadow:0 0 30px rgba(20,215,208,.2);transform:rotate(12deg)}.art-node:after{content:"";position:absolute;inset:15px;border:1px solid rgba(20,215,208,.7);border-radius:50%}.art-line{position:absolute;width:42%;height:55px;left:9%;top:30px;border-top:1px solid #17c9ce;border-right:1px solid #17c9ce;transform:skewY(-20deg)}.art-window{position:absolute;width:82px;height:55px;right:9%;top:29px;border:1px solid #37b8d7;border-radius:7px;background:linear-gradient(135deg,rgba(32,160,202,.25),rgba(7,20,38,.8));box-shadow:inset 0 10px 0 rgba(100,220,240,.1)}.art-window:before,.art-window:after{content:"";position:absolute;left:10px;right:10px;height:4px;background:#24d5d1;top:18px;box-shadow:0 10px 0 rgba(36,213,209,.45)}.art-copilot .art-node{border-radius:50%;transform:none}.art-mentor .art-node{border-radius:8px;transform:rotate(45deg)}.art-utilstack .art-window{left:15%;right:auto;width:65%;height:60px}.art-japa .art-node{border-radius:50%;width:64px;height:64px}.tag-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:auto 0 0}.tag-list li{padding:3px 8px;border-radius:999px;background:#123a55;color:#d8f7f4;font-size:.67rem;border:1px solid rgba(20,215,208,.16)}.other-builds-heading{margin:30px 0 14px;color:#eaf4fc}.other-builds{grid-template-columns:repeat(2,minmax(0,1fr))}
#architecture{padding:clamp(42px,5vw,70px) var(--gutter);max-width:var(--page-width);margin:auto;background:#f3f8fc;color:var(--ink)}#architecture h2{color:var(--ink)}.architecture-frame{margin:20px 0;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}.architecture-frame-header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:#334c63}.diagram-label{font-size:.75rem;font-weight:750;letter-spacing:.08em}.diagram-status{font-size:.75rem;color:#087f83}.architecture-diagram{width:100%;overflow-x:auto}.architecture-diagram svg{display:block;width:100%;min-width:600px;height:auto}.architecture-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.architecture-notes article{padding:16px;background:#fff;border:1px solid var(--line);border-radius:10px}.architecture-notes h3{color:var(--ink)}.architecture-notes p{color:var(--muted);font-size:.85rem}
#capability{padding:clamp(40px,5vw,64px) var(--gutter);background:#f3f8fc;color:var(--ink)}#capability h2{color:var(--ink)}.capability-grid,.certification-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.capability-grid>*{padding:16px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#243b51}.capability-grid>*:hover{background:#eafafa;color:#102b42;border-color:#65d9d2}
#experience{padding:clamp(40px,5vw,64px) var(--gutter);background:#071a2b;color:#f5f9fc}#experience h2{color:#f5f9fc}.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative}.timeline .job{padding:20px;border:1px solid rgba(120,185,215,.2);border-radius:12px;background:#0b263d;color:#eaf4fc}.timeline .job h3{color:#f5f9fc}.timeline .job p{color:#bfd0df;font-size:.85rem}.timeline .job:hover{border-color:var(--teal);background:#123951}
#open-source,#achievements,#about,#for-hiring-teams{padding:clamp(36px,5vw,60px) var(--gutter);background:#f3f8fc;color:var(--ink)}#open-source h2,#achievements h2,#about h2,#for-hiring-teams h2{color:var(--ink)}#open-source p,#about p,#for-hiring-teams p{max-width:850px;color:#40566c}.certification-grid>*{padding:18px;background:#fff;border:1px solid var(--line);border-radius:12px;color:#243b51}
#writing{padding:clamp(34px,4vw,48px) var(--gutter);background:#f3f8fc;color:var(--ink)}#writing h2{color:var(--ink)}#writing:not([hidden]){display:block}.writing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.writing-grid article{padding:16px;background:#fff;border:1px solid var(--line);border-radius:12px}.writing-grid h3{color:var(--ink);font-size:.95rem}.writing-grid p{color:#40566c;font-size:.84rem}
#contact{padding:clamp(40px,5vw,65px) var(--gutter);background:radial-gradient(ellipse at 70% 70%,rgba(20,215,208,.12),transparent 40%),#061627;color:#f4f8fc}#contact h2{color:#f4f8fc}.contact-container{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px}.contact-details{padding:24px;border:1px solid rgba(20,215,208,.25);border-radius:14px;background:#0b263d}.contact-details a{color:#6cf3eb}.contact-form{padding:24px;background:#fff;color:var(--ink);border-radius:14px}.contact-form label{display:block;color:#233a50;font-weight:650;margin:0 0 6px}.contact-form input,.contact-form textarea{width:100%;padding:12px;border:1px solid #9db0c1;border-radius:8px;margin-bottom:6px;color:#102033;background:#fff;font:inherit}.contact-form input:focus,.contact-form textarea:focus{border-color:#087f83}.contact-form .error{color:#b42318}.form-error-summary{padding:12px 14px;border:1px solid #b42318;border-radius:8px;background:#fff1f0;color:#7a271a}.form-error-summary[hidden]{display:none}footer{padding:20px var(--gutter);background:#030d18;color:#d4e2ee;border-top:1px solid rgba(20,215,208,.18)}footer p{margin:0;color:#b8cbd9;font-size:.8rem}footer a{color:#6cf3eb}.footer-inner{max-width:var(--page-width);margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-links{display:flex;flex-wrap:wrap;gap:16px}
@media(max-width:980px){.header-inner{gap:12px}.nav-menu ul{gap:10px}.nav-menu a{font-size:.78rem}.hero-grid{grid-template-columns:minmax(0,1fr) minmax(240px,.75fr)}.hero-signals{grid-template-columns:repeat(2,minmax(0,1fr))}.project-grid,.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.capability-grid,.certification-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){:root{--header-h:62px}.header-inner{min-height:var(--header-h)}.nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:1px solid #426277;border-radius:50%;background:transparent;color:#f4f8fc}.nav-toggle span{display:block;width:18px;height:2px;margin:auto;background:currentColor}.nav-menu{display:none;position:absolute;left:12px;right:12px;top:calc(var(--header-h) + 4px);max-height:calc(100dvh - var(--header-h) - 16px);overflow-y:auto;padding:12px;background:#061627;border:1px solid rgba(20,215,208,.3);border-radius:12px;box-shadow:var(--shadow)}.nav-menu.active{display:block}.nav-menu ul{display:flex;align-items:stretch;flex-direction:column;gap:3px}.nav-menu a{display:flex;width:100%;padding:8px 12px;color:#edf6fc;font-size:.95rem}.nav-menu .resume-link a{justify-content:center;margin-top:6px}.hero-grid{grid-template-columns:1fr;padding-top:34px;gap:18px}.hero-content{order:1}.avatar-stage{order:0;width:min(68%,280px);aspect-ratio:1/1.05}.hero h1{font-size:clamp(2.5rem,11vw,3.5rem)}.hero-subtitle{font-size:.92rem}.hero-signals{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hero-signals li{border-right:0;border-bottom:1px solid rgba(180,215,235,.16);padding:0 0 8px}.recruiter-section{padding-block:24px}.quick-view th{width:120px}#engineering-signal,#what-i-build{padding-block:36px}.signal-grid,.architecture-notes,.writing-grid{grid-template-columns:1fr}.project-grid,.featured-grid,.other-builds{grid-template-columns:1fr}.project-art{height:135px}.architecture-frame{padding:10px}.architecture-diagram svg{min-width:560px}.timeline{grid-template-columns:1fr}.contact-container{grid-template-columns:1fr}.contact-form,.contact-details{padding:18px}.footer-inner{flex-direction:column}.capability-grid,.certification-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* Follow-up polish: prevent portrait cropping and normalize section typography */
.profile-img {
  object-fit: cover;
  object-position: center 12%;
  border-radius: 18px;
  mask-image: none;
  -webkit-mask-image: none;
  aspect-ratio: 1 / 1;
}
.avatar-stage {
  aspect-ratio: 1 / 1;
  align-items: center;
  width: min(100%, 360px);
}
.avatar-stage:before {
  inset: 4%;
  border-radius: 22px;
}
.hero-grid {
  align-items: center;
}
.hero h1 { color: #f6f9fc; }
.hero h1 .typewriter { color: var(--teal); }
.hero p { color: #bfd0df; }
#engineering-signal, #what-i-build, #architecture, #capability,
#open-source, #achievements, #about, #for-hiring-teams, #writing {
  background-color: var(--paper);
  color: var(--ink);
}
#engineering-signal h2, #what-i-build h2, #architecture h2,
#capability h2, #open-source h2, #achievements h2, #about h2,
#for-hiring-teams h2, #writing h2 {
  color: var(--ink);
}
#engineering-signal p, #what-i-build p, #architecture p,
#capability p, #open-source p, #achievements p, #about p,
#for-hiring-teams p, #writing p {
  color: var(--muted);
}
#featured-engineering h2, #experience h2, #contact h2 { color: #f4f8fc; }
#featured-engineering p, #experience p, #contact .section-intro { color: #c1d0df; }
@media (max-width: 760px) {
  .avatar-stage { width: min(78%, 300px); }
  .profile-img { object-position: center 10%; }
}


/* Portfolio consistency pass: stable contrast, persistent actions, and visual case studies */
:root {
  --teal-soft: #baf8f3;
  --card-navy: #0b2035;
  --card-navy-2: #102c43;
}
#engineering-signal, #what-i-build, #architecture, #capability,
#open-source, #achievements, #about, #for-hiring-teams, #writing,
#engineering-case-studies {
  background: var(--paper);
  color: var(--ink);
}
#engineering-signal h2, #what-i-build h2, #architecture h2,
#capability h2, #open-source h2, #achievements h2, #about h2,
#for-hiring-teams h2, #writing h2, #engineering-case-studies h2 {
  color: var(--ink);
}
#engineering-signal .section-intro, #what-i-build .section-intro,
#architecture .section-intro, #capability .section-intro,
#open-source .section-intro, #achievements .section-intro,
#about .section-intro, #for-hiring-teams .section-intro,
#writing .section-intro, #engineering-case-studies .section-intro {
  color: var(--muted);
}
.eyebrow { color: var(--teal-dark); }
#what-i-build .highlight-item {
  position: relative;
  padding: 24px 22px 22px;
  border: 1px solid #c8dce8;
  border-top: 3px solid var(--teal-dark);
  background: linear-gradient(145deg, #fff, #f1f7fb);
  box-shadow: 0 8px 22px rgba(7, 20, 38, .055);
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#what-i-build .highlight-item::before {
  content: "↗";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border: 1px solid rgba(8,127,131,.35);
  border-radius: 12px;
  background: #e1f8f6;
  color: #075e63;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}
#what-i-build .highlight-item:nth-child(2)::before { content: "⌁"; }
#what-i-build .highlight-item:nth-child(3)::before { content: "☁"; }
#what-i-build .highlight-item:nth-child(4)::before { content: "✓"; }
#what-i-build .highlight-item h3 { color: var(--ink); }
#what-i-build .highlight-item p { color: #40566c; }
#what-i-build .highlight-item:hover,
#what-i-build .highlight-item:focus-within {
  transform: translateY(-3px);
  border-color: #63cfc8;
  background: linear-gradient(145deg, #fff, #e9f9f8);
  box-shadow: 0 14px 30px rgba(7, 32, 53, .12);
}
#what-i-build .highlight-item:hover h3,
#what-i-build .highlight-item:hover p { color: var(--ink); }
/* Buttons and links must remain identifiable before hover on every surface. */
#engineering-signal a:not(.btn), #what-i-build a:not(.btn),
#architecture a:not(.btn), #capability a:not(.btn),
#open-source a:not(.btn), #achievements a:not(.btn),
#about a:not(.btn), #for-hiring-teams a:not(.btn),
#writing a:not(.btn), #engineering-case-studies a:not(.btn) {
  color: #075e63;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#engineering-signal .btn, #what-i-build .btn, #architecture .btn,
#capability .btn, #open-source .btn, #achievements .btn,
#about .btn, #for-hiring-teams .btn, #writing .btn,
#engineering-case-studies .btn {
  color: #063247;
  background: #baf8f3;
  border: 1px solid #087f83;
  box-shadow: 0 2px 0 rgba(7, 20, 38, .08);
}
#engineering-signal .btn:hover, #what-i-build .btn:hover,
#architecture .btn:hover, #capability .btn:hover,
#open-source .btn:hover, #achievements .btn:hover,
#about .btn:hover, #for-hiring-teams .btn:hover,
#writing .btn:hover, #engineering-case-studies .btn:hover {
  color: #fff;
  background: #075e63;
  border-color: #075e63;
}
/* Technical capability tiles echo the navy project cards, with accessible contrast. */
#capability .capability-grid > * {
  background: linear-gradient(145deg, #0d2a42, #081b2e);
  border: 1px solid rgba(8,127,131,.35);
  color: #eaf4fc;
  box-shadow: 0 8px 22px rgba(7,20,38,.08);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#capability .capability-grid > * h3 { color: #f4f8fc; }
#capability .capability-grid > * p { color: #c8d9e6; }
#capability .capability-grid > *:hover,
#capability .capability-grid > *:focus-within {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #123951, #0b253b);
  border-color: var(--teal);
  box-shadow: 0 12px 26px rgba(7,20,38,.16);
}
#capability .capability-grid > *:hover h3,
#capability .capability-grid > *:hover p { color: #fff; }
/* Case studies: short, scannable narrative plus a simple visual flow. */
#engineering-case-studies { padding: clamp(40px, 5vw, 64px) var(--gutter); }
.case-study-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.case-study {
  padding: 0 22px 22px;
  background: #fff;
  color: var(--ink);
  border: 1px solid #d5e3ed;
  box-shadow: 0 10px 28px rgba(7,20,38,.07);
}
.case-study h3 { color: var(--ink); font-size: 1.12rem; margin: 4px 0 10px; }
.case-study p { color: #40566c; font-size: .9rem; line-height: 1.6; }
.case-study p strong { color: #173d56; }
.case-study:hover, .case-study:focus-within {
  background: #fff;
  border-color: #36bdb5;
  box-shadow: 0 15px 34px rgba(7,20,38,.12);
  transform: translateY(-2px);
}
.case-visual {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 104px;
  margin: 0 -22px 18px;
  padding: 18px 16px;
  overflow: hidden;
  background: radial-gradient(circle at 80% 15%, rgba(20,215,208,.18), transparent 32%), linear-gradient(135deg,#06192b,#10354d);
  border-bottom: 1px solid rgba(20,215,208,.35);
}
.case-step {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 7px;
  border: 1px solid rgba(122,225,220,.48);
  border-radius: 8px;
  background: rgba(8,38,59,.8);
  color: #f2fbff;
  text-align: center;
  font-size: .72rem;
  line-height: 1.3;
  font-weight: 650;
}
.case-arrow { color: #65eee5; font-size: 1.15rem; flex: 0 0 auto; }
.case-study .case-tags { display:flex; flex-wrap:wrap; gap:6px; margin: 2px 0 16px; padding:0; list-style:none; }
.case-study .case-tags li { border-radius:999px; padding:3px 9px; background:#e6f7f6; color:#075e63; border:1px solid #b7e8e4; font-size:.7rem; font-weight:650; }
@media (max-width: 760px) {
  .case-study-grid { grid-template-columns: 1fr; }
  .case-visual { min-height: 92px; padding: 14px 10px; gap: 5px; }
  .case-step { padding: 9px 4px; font-size: .65rem; }
  #what-i-build .highlight-item { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #what-i-build .highlight-item, #capability .capability-grid > *, .case-study { transition: none; }
}


/* Fix: secondary and ghost CTAs must remain visible on light backgrounds. */
.recruiter-section .btn-secondary,
.recruiter-section .btn-ghost,
#engineering-signal .btn-secondary, #engineering-signal .btn-ghost,
#what-i-build .btn-secondary, #what-i-build .btn-ghost,
#architecture .btn-secondary, #architecture .btn-ghost,
#engineering-case-studies .btn-secondary, #engineering-case-studies .btn-ghost,
#capability .btn-secondary, #capability .btn-ghost,
#open-source .btn-secondary, #open-source .btn-ghost,
#achievements .btn-secondary, #achievements .btn-ghost,
#about .btn-secondary, #about .btn-ghost,
#for-hiring-teams .btn-secondary, #for-hiring-teams .btn-ghost,
#writing .btn-secondary, #writing .btn-ghost {
  color: #063247;
  background: #e1f8f6;
  border: 1px solid #087f83;
  box-shadow: 0 2px 0 rgba(7, 20, 38, .08);
  text-decoration: none;
}
.recruiter-section .btn-secondary:hover,
.recruiter-section .btn-ghost:hover,
#engineering-signal .btn-secondary:hover, #engineering-signal .btn-ghost:hover,
#what-i-build .btn-secondary:hover, #what-i-build .btn-ghost:hover,
#architecture .btn-secondary:hover, #architecture .btn-ghost:hover,
#engineering-case-studies .btn-secondary:hover, #engineering-case-studies .btn-ghost:hover,
#capability .btn-secondary:hover, #capability .btn-ghost:hover,
#open-source .btn-secondary:hover, #open-source .btn-ghost:hover,
#achievements .btn-secondary:hover, #achievements .btn-ghost:hover,
#about .btn-secondary:hover, #about .btn-ghost:hover,
#for-hiring-teams .btn-secondary:hover, #for-hiring-teams .btn-ghost:hover,
#writing .btn-secondary:hover, #writing .btn-ghost:hover {
  color: #fff;
  background: #075e63;
  border-color: #075e63;
}
.recruiter-section .btn-secondary:focus-visible,
.recruiter-section .btn-ghost:focus-visible,
#engineering-signal .btn-secondary:focus-visible, #engineering-signal .btn-ghost:focus-visible,
#what-i-build .btn-secondary:focus-visible, #what-i-build .btn-ghost:focus-visible,
#architecture .btn-secondary:focus-visible, #architecture .btn-ghost:focus-visible,
#engineering-case-studies .btn-secondary:focus-visible, #engineering-case-studies .btn-ghost:focus-visible,
#capability .btn-secondary:focus-visible, #capability .btn-ghost:focus-visible,
#open-source .btn-secondary:focus-visible, #open-source .btn-ghost:focus-visible,
#achievements .btn-secondary:focus-visible, #achievements .btn-ghost:focus-visible,
#about .btn-secondary:focus-visible, #about .btn-ghost:focus-visible,
#for-hiring-teams .btn-secondary:focus-visible, #for-hiring-teams .btn-ghost:focus-visible,
#writing .btn-secondary:focus-visible, #writing .btn-ghost:focus-visible {
  outline: 3px solid #087f83;
  outline-offset: 3px;
}


/* Definitive light-surface button override: style.css declares button text with !important. */
.recruiter-section a.btn-secondary,
.recruiter-section a.btn-ghost,
#engineering-signal a.btn-secondary, #engineering-signal a.btn-ghost,
#what-i-build a.btn-secondary, #what-i-build a.btn-ghost,
#architecture a.btn-secondary, #architecture a.btn-ghost,
#engineering-case-studies a.btn-secondary, #engineering-case-studies a.btn-ghost,
#capability a.btn-secondary, #capability a.btn-ghost,
#open-source a.btn-secondary, #open-source a.btn-ghost,
#achievements a.btn-secondary, #achievements a.btn-ghost,
#about a.btn-secondary, #about a.btn-ghost,
#for-hiring-teams a.btn-secondary, #for-hiring-teams a.btn-ghost,
#writing a.btn-secondary, #writing a.btn-ghost,
#contact .contact-form button.btn-secondary {
  color: #063247 !important;
  background-color: #e1f8f6 !important;
  border: 1px solid #087f83 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
.recruiter-section a.btn-secondary:hover,
.recruiter-section a.btn-ghost:hover,
#engineering-signal a.btn-secondary:hover, #engineering-signal a.btn-ghost:hover,
#what-i-build a.btn-secondary:hover, #what-i-build a.btn-ghost:hover,
#architecture a.btn-secondary:hover, #architecture a.btn-ghost:hover,
#engineering-case-studies a.btn-secondary:hover, #engineering-case-studies a.btn-ghost:hover,
#capability a.btn-secondary:hover, #capability a.btn-ghost:hover,
#open-source a.btn-secondary:hover, #open-source a.btn-ghost:hover,
#achievements a.btn-secondary:hover, #achievements a.btn-ghost:hover,
#about a.btn-secondary:hover, #about a.btn-ghost:hover,
#for-hiring-teams a.btn-secondary:hover, #for-hiring-teams a.btn-ghost:hover,
#writing a.btn-secondary:hover, #writing a.btn-ghost:hover,
#contact .contact-form button.btn-secondary:hover {
  color: #ffffff !important;
  background-color: #075e63 !important;
  border-color: #075e63 !important;
}


/* Align Technical Range with the light cards in What I Build. */
#capability {
  background: var(--paper);
  color: var(--ink);
}
#capability .capability-grid > article {
  padding: 22px;
  border: 1px solid #c8dce8;
  border-top: 3px solid var(--teal-dark);
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, #f1f7fb);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(7, 20, 38, .055);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
#capability .capability-grid > article h3 {
  color: var(--ink);
  margin-bottom: 10px;
}
#capability .capability-grid > article p {
  color: #40566c;
  line-height: 1.65;
  margin-bottom: 0;
}
#capability .capability-grid > article:hover,
#capability .capability-grid > article:focus-within {
  transform: translateY(-3px);
  border-color: #63cfc8;
  background: linear-gradient(145deg, #ffffff, #e9f9f8);
  box-shadow: 0 14px 30px rgba(7, 32, 53, .12);
}
#capability .capability-grid > article:hover h3,
#capability .capability-grid > article:hover p {
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  #capability .capability-grid > article { transition: none; }
}