:root {
  --bg:#fff;
  --surface:#f5f7fa;
  --text:#172033;
  --muted:#536175;
  --accent:#142f55;
  --border:#dce2ea;
  --button:#142f55;
  --on-button:#fff;
  --placeholder:#eaf0f5;
  color-scheme:light;
  font-family:Arial,Helvetica,sans-serif;
  font-size:18px;
  line-height:1.75;
  color:var(--text);
  background:var(--bg)}

:root[data-theme=dark] {
  --bg:#111318;
  --surface:#1b202a;
  --text:#f1f5f9;
  --muted:#b0bdcf;
  --accent:#9ec3ef;
  --border:#343c4a;
  --button:#9ec3ef;
  --on-button:#111e31;
  --placeholder:#20304a;
  color-scheme:dark}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px}
body {
  margin:0}
a {
  color:var(--accent);
  text-underline-offset:5px}
button,input,select,textarea {
  font:inherit}
button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent}
:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px}
p {
  margin:0 0 20px}
h1,h2,h3 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-.025em;
  margin:0 0 22px}
h1 {
  font-size:clamp(36px,4.5vw,56px)}
h2 {
  font-size:clamp(29px,3vw,37px)}
h3 {
  font-size:26px}
header {
  position:sticky;
  top:0;
  z-index:10;
  background:var(--bg);
  border-bottom:1px solid var(--border)}
.container,.nav-wrap {
  width:min(1100px,calc(100% - 64px));
  margin:auto}
.nav-wrap {
  display:flex;
  align-items:center;
  gap:28px;
  min-height:84px}
.brand {
  display:flex;
  align-items:center;
  gap:7px;
  font-weight:600;
  text-decoration:none;
  letter-spacing:-.025em;
  color:var(--text);
  white-space:nowrap}
.brand-mark {
  font:28px Georgia,serif;
  display:grid;
  place-items:center;
  width:36px;
  height:38px;
  border:1px solid var(--border);
  margin-right:5px;
  color:var(--accent)}
nav {
  display:flex;
  gap:clamp(10px,1.5vw,24px);
  margin-left:auto}
nav a {
  white-space:nowrap;
  font-size:16px;
  text-decoration:none;
  color:var(--muted)}
nav a:hover,.text-link:hover {
  text-decoration:underline}
.theme-toggle {
  width:46px;
  height:46px;
  flex-shrink:0;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--bg);
  color:var(--accent);
  cursor:pointer;
  font-size:24px;
  line-height:1}
.sun {
  display:none}
[data-theme=dark] .sun {
  display:inline}
[data-theme=dark] .moon {
  display:none}
.hero {
  padding-top:128px;
  padding-bottom:96px}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:16px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:22px}
.intro {
  max-width:640px;
  font-size:20px;
  color:var(--muted)}
.actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin:40px 0 0}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  padding:13px 22px;
  background:var(--button);
  color:var(--on-button);
  border:1px solid transparent;
  border-radius:3px;
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  cursor:pointer}
.button:hover:not(:disabled) {
  filter:brightness(1.15)}
.button:disabled {
  opacity:1;
  cursor:not-allowed}
.text-link {
  font-size:16px;
  font-weight:600;
  text-decoration:none}
.text-link span {
  margin-left:12px}
.section {
  padding-top:104px;
  padding-bottom:104px}
.tinted {
  background:var(--surface);
  border-block:1px solid var(--border)}
.section-heading {
  display:block;
  margin-bottom:20px}
.section-heading p:last-child {
  color:var(--muted);
  font-style:italic;
  margin-bottom:0;
  max-width:65ch}
.services {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px}
.service {
  border-top:2px solid var(--accent);
  padding-top:23px;
  display:flex;
  flex-direction:column}
.service-number {
  font-size:16px;
  color:var(--muted);
  margin-bottom:22px}
.service h3 {
  min-height:63px;
  max-width:270px;
  margin-bottom:16px}
.price {
  color:var(--accent);
  font-weight:600;
  font-size:16px}
.service>p:not(.price),.service li {
  font-size:16px;
  color:var(--muted)}
.service ul {
  padding-left:18px;
  margin:0 0 22px}
.service li {
  padding-left:4px;
  margin-bottom:7px}
.service-note {
  border-top:1px solid var(--border);
  padding-top:16px}
.service .text-link {
  margin-top:auto;
  padding-top:10px}
.project {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px;
  align-items:center;
  margin-top:32px}
.project-image,.portrait {
  display:block;
  width:100%;
  height:auto}
.portrait {
  width:75%}
@media(min-width:901px) {
  .about > .portrait { width:100%; }
}
.project>div>p:not(.eyebrow) {
  color:var(--muted)}
.about {
  display:grid;
  grid-template-columns:minmax(0,440px) minmax(0,1fr);
  gap:clamp(40px,5vw,64px);
  align-items:center}
.about>div:last-child {
  max-width:630px}
.role {
  font-size:16px;
  color:var(--accent)}
.about p:not(.eyebrow,.role,.signature) {
  color:var(--muted)}
.signature {
  font:italic 25px Georgia,serif;
  margin-top:28px}
.email {
  display:inline-block;
  margin:6px 0 25px;
  font-size:16px;
  overflow-wrap:anywhere}
.small {
  font-size:16px}
.muted {
  color:var(--muted)}
footer {
  border-top:1px solid var(--border);
  padding:32px 0}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font-size:16px;
  color:var(--muted)}
footer strong {
  color:var(--text);
  font-size:16px}
footer p {
  margin:3px 0 0}
footer a {
  color:var(--muted)}
.skip {
  position:fixed;
  top:-100px;
  left:12px;
  padding:12px;
  background:var(--bg);
  z-index:20}
.skip:focus {
  top:10px}
@media(max-width:900px) {
  .container,.nav-wrap {
  width:calc(100% - 40px)}
.nav-wrap {
  flex-wrap:wrap;
  gap:4px;
  padding:8px 0}
.brand {
  font-size:16px}
.theme-toggle {
  margin-left:auto}
nav {
  order:3;
  width:100%;
  flex-wrap:wrap;
  justify-content:center;
  gap:4px 12px;
  padding-top:0}
.hero {
  padding-top:72px;
  padding-bottom:64px}
.section {
  padding-block:72px}
.section-heading,.project,.about {
  grid-template-columns:1fr;
  gap:25px}
.section-heading {
  margin-bottom:20px}
.section-heading p:last-child {
  max-width:100%}
.services {
  grid-template-columns:1fr;
  gap:35px}
.service h3 {
  min-height:0;
  max-width:100%}
.service-number {
  margin-bottom:12px}
.service .text-link {
  padding-top:0}
.portrait {
  max-width:270px}
.about { gap:0; }
.about > div:last-child { display:contents; }
.about .eyebrow { grid-row:1; }
.about h2 { grid-row:2; }
.about .role { grid-row:3; }
.about > .portrait { grid-row:4; justify-self:center; margin-bottom:25px; }
.footer-inner {
  align-items:flex-start;
  flex-direction:column;
  gap:14px}
.actions {
  gap:20px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}


/* Comfortable targets and relaxed spacing on every screen. */
nav a { display:inline-flex; align-items:center; min-height:44px; padding:4px 6px; }
.hero h1 { margin-bottom:32px; }
.text-link { display:inline-flex; align-items:center; min-height:44px; }
.button { min-height:52px; padding:14px 26px; }
.button:disabled { background:var(--surface); color:var(--muted); border-color:var(--border); }
.services { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.service {
  padding:36px;
  align-items:flex-start;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  min-width:0;
}
.service h3 { min-height:0; max-width:none; margin-bottom:18px; }
.service > p, .service ul { max-width:65ch; }
.service > p:not(.price), .service li { font-size:18px; }
.service .price { font-size:18px; margin-bottom:24px; }
.service ul { margin-bottom:28px; }
.service li { margin-bottom:10px; }
.service .service-note { width:100%; padding-top:20px; margin-bottom:28px; }
.service .text-link {
  min-height:48px;
  padding:10px 18px;
  border:1px solid var(--accent);
  border-radius:3px;
}
.service .text-link:hover { background:var(--surface); }
.service:first-child {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:56px;
  padding:44px;
  border-top:4px solid var(--accent);
  align-items:start;
}
.service:first-child h3 { grid-column:1; grid-row:1; }
.service:first-child .price { grid-column:1; grid-row:2; }
.service:first-child > p:not([class]) { grid-column:1; grid-row:3; }
.service:first-child ul { grid-column:2; grid-row:1 / 4; margin-top:0; }
.service:first-child .service-note { grid-column:2; grid-row:4; margin-bottom:0; }
.service:first-child .text-link { grid-column:1; grid-row:4; justify-self:start; margin-top:8px; }
.footer-inner { flex-wrap:wrap; }
@media(max-width:900px) {
  html { scroll-padding-top:155px; }
  .services { grid-template-columns:1fr; gap:28px; }
  .service, .service:first-child { display:flex; padding:28px; }
  .service h3 { min-height:0; }
  .actions { flex-wrap:wrap; }
  .brand { gap:5px; font-size:15px; }
  .nav-wrap { column-gap:6px; }
}

/* Contact choices use the site's existing palette and typography. */
.contact-intro { max-width:65ch; color:var(--muted); }
.contact-cards { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:32px; margin:32px 0 24px; }
.contact-card { display:flex; flex-direction:column; align-items:flex-start; padding:36px; border:1px solid var(--border); border-radius:4px; background:var(--surface); min-width:0; }
.contact-card > p { color:var(--muted); }
.contact-card .button { margin-top:auto; }
.contact-card .contact-note { margin:14px 0 0; }
.contact-form { width:100%; max-width:65ch; }
#form-help { font:inherit; color:var(--muted); }
.form-field { margin-bottom:20px; }
.form-field label { display:block; font-size:16px; font-weight:600; margin-bottom:6px; }
.form-field input,.form-field textarea { display:block; width:100%; min-width:0; padding:10px 12px; border:1px solid var(--muted); border-radius:3px; background:var(--bg); color:var(--text); }
.form-field textarea { resize:vertical; min-height:150px; }
.form-status { color:var(--text); margin:16px 0 0; overflow-wrap:anywhere; }
.form-status:empty { margin:0; }
.contact-form .button:disabled { cursor:wait; }
.button-quote { background:#142f55; color:#fff; border-color:var(--accent); }
.button-secondary { background:transparent; color:var(--accent); border-color:var(--accent); }
.button-secondary:hover { background:var(--bg); }
.email:hover, footer a:hover { text-decoration-thickness:2px; }
img { max-width:100%; height:auto; }
.project > *, .about > *, .section-heading > * { min-width:0; }
footer a { overflow-wrap:anywhere; max-width:100%; }
@media(max-width:600px) {
  .contact-cards { grid-template-columns:1fr; gap:24px; }
  .contact-card { padding:28px; }
  .contact-card .button { width:100%; }
  .hero { padding-top:56px; padding-bottom:48px; }
  .section { padding-block:56px; }
  .actions { margin:32px 0 0; }
}
.form-privacy { margin:20px 0 0; }
@media(max-width:360px) {
  nav { gap:4px; }
  .brand { gap:4px; font-size:14px; }
  .brand-mark { width:28px; margin-right:2px; }
  .service, .service:first-child, .contact-card { padding:24px; }
}