:root{color-scheme:light;--navy:#102635;--deep:#0b1e2b;--teal:#76dfcc;--ink:#172d3a;--muted:#435b64;--paper:#f8faf8;--rule:#cbd8d7;--green:#12675c}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:inherit;text-underline-offset:.25em}
a:focus-visible{outline:3px solid #008f81;outline-offset:5px}
.wrap{width:min(1120px,calc(100% - 80px));margin-inline:auto}
.skip{position:absolute;top:12px;left:12px;transform:translateY(-200%);background:white;color:var(--ink);padding:8px 16px;z-index:1}
.skip:focus{transform:none}
.masthead,.hero,.contact,footer{background:var(--navy);color:#f6fbfc}
.masthead{border-bottom:1px solid #2b4553}
.nav,.brand,nav{display:flex;align-items:center}
.nav{min-height:78px;justify-content:space-between;gap:20px}
.brand{gap:12px;font-weight:650;letter-spacing:.015em;text-decoration:none;white-space:nowrap}
.brand img{display:block;border-radius:5px}
.brand-tagline{display:block;color:var(--teal);font-size:.75rem;font-weight:500;letter-spacing:normal;line-height:1.4;white-space:normal}
nav{gap:clamp(15px,4vw,36px)}
nav a{font-size:.92rem;text-decoration:none;color:#d8e7e9;padding-block:9px}
nav a:hover{color:var(--teal);text-decoration:underline}
.hero{background:radial-gradient(ellipse at 83% 50%,#173b49,var(--navy) 54%,var(--deep))}
.hero-layout{padding-block:clamp(68px,10vw,126px)}
.eyebrow{margin:0 0 17px;color:var(--green);font:650 .77rem/1.6 ui-monospace,Consolas,monospace;letter-spacing:.085em;text-transform:uppercase}
.hero .eyebrow,.contact .eyebrow{color:var(--teal)}
.eyebrow span{margin-inline:.22em}
h1,h2,h3,p{margin-top:0}
h1,h2{font-family:Georgia,serif;font-weight:400;letter-spacing:-.048em;line-height:1.06}
h1{font-size:clamp(3.1rem,6.2vw,5.6rem);margin-bottom:26px}
h1 em{color:var(--teal);font-style:normal}
h2{font-size:clamp(2.45rem,5vw,4rem);margin-bottom:22px}
h3{font-size:1.25rem;line-height:1.25;margin-bottom:12px}
.hero-copy{color:#d2e1e5;font-size:clamp(1rem,2vw,1.2rem);max-width:78ch;margin-bottom:28px}
.design-squiggle{max-width:600px;margin:0}
.design-squiggle img{display:block;width:100%;height:auto}
.design-squiggle figcaption{margin-top:8px;color:#d2e1e5;font-size:.8rem;line-height:1.45}
.button{display:inline-flex;align-items:center;gap:.9em;max-width:100%;background:var(--teal);color:#092831;border:1px solid transparent;text-decoration:none;font-weight:700;font-size:.94rem;line-height:1.3;padding:13px 17px;border-radius:4px;overflow-wrap:anywhere}
.button:hover{background:#b2f5e9}
.button:focus-visible{outline-color:#f6fbfc}
.section{padding-block:clamp(56px,8vw,96px)}
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3.4vw,42px);margin-top:38px}
.services article{border-top:1px solid var(--rule);padding-top:16px}
.services p,.bio{color:var(--muted)}
.services .example{font-size:.93rem;margin-bottom:0}
.about{background:#e5edf3}
.about-layout{
  display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,620px);
  grid-template-areas:"portrait copy";
  align-items:center;
  justify-content:center;
  gap:clamp(28px,6vw,76px);
}
.about-copy{grid-area:copy}
.about-copy h2{margin-bottom:8px}
.about-portrait-frame{
  grid-area:portrait;
  width:min(100%,280px);
  border:5px solid #fff;
}
.about-portrait{
  display:block;
  width:100%;
  height:auto;
}
.role{font-weight:650;color:var(--green);margin-bottom:20px}
.bio{font-size:1.08rem}
.credential{border-top:1px solid var(--rule);padding-top:16px;margin:24px 0 0;font-size:.94rem;font-weight:650}
.contact{background:#000}
.contact-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;
  gap:clamp(24px,5vw,64px);
}
.contact h2{max-width:17ch}
.contact p:not(.eyebrow){color:#d2e1e5;margin-bottom:25px}
footer{border-top:1px solid #2b4553;padding-block:22px;color:#c8dadf;font-size:.85rem}
@media(max-width:760px){.wrap{width:calc(100% - 44px)}.services{grid-template-columns:1fr;gap:26px}}
@media(max-width:760px){
  .about-layout{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "portrait";
    gap:28px;
  }
  .about-portrait-frame{width:min(100%,220px)}
}
@media(max-width:760px){.contact-layout{grid-template-columns:1fr}}
@media(max-width:460px){.nav{align-items:flex-start;flex-direction:column;gap:6px;padding-block:12px}.brand img{width:36px;height:36px}nav{gap:24px}.hero-layout{padding-block:50px 62px}}