:root {
  --utility-ink: #173047;
  --utility-green: #27614c;
  --utility-saffron: #b85b20;
  --utility-paper: #fffdf8;
  --utility-cream: #f5eee0;
  --utility-line: #ddd2bf;
}

body:has(.utility-page) { background: var(--utility-cream); color: var(--utility-ink); }
body:has(.utility-page) > nav {
  width: min(1080px, calc(100% - 32px)); margin: 1rem auto 0;
  border: 1px solid var(--utility-line); border-radius: 14px;
}
.utility-page { width: min(1080px, calc(100% - 32px)); margin: 0 auto; padding: clamp(1rem,3vw,2.5rem) 0 4rem; }
.utility-page .hero {
  margin: 0 0 1.2rem; padding: clamp(2rem,5vw,4rem); border: 1px solid var(--utility-line);
  border-radius: 20px; background: linear-gradient(120deg,#fffdf8,#f2eadc);
  box-shadow: 0 12px 30px rgba(18,42,58,.08);
}
.utility-page .hero h1 {
  margin: .25rem 0 .9rem; max-width: 800px; color: var(--utility-ink);
  font: 700 clamp(2.3rem,5.4vw,4.5rem)/.98 Georgia, serif; letter-spacing: -.04em;
}
.utility-page .eyebrow { color: var(--utility-saffron); font-weight: 800; }
.utility-page .section, .utility-page .visual {
  display:block; max-width:none; margin:1.2rem 0; padding:clamp(1.2rem,3vw,2rem);
  border:1px solid var(--utility-line); border-radius:16px; background:var(--utility-paper);
}
.utility-page .section > h2, .utility-page .visual > h3 { color:var(--utility-ink); font:700 clamp(1.45rem,3vw,2.1rem)/1.15 Georgia,serif; }
.utility-page .card { height:100%; margin:0; border-color:var(--utility-line); background:#fffefa; }
.utility-page .card h2, .utility-page .card h3 { color:var(--utility-green); }
.utility-page .notice { border-left:4px solid var(--utility-saffron); background:#fff6e7; }
.utility-page a { color:var(--utility-green); text-underline-offset:.16em; }
.utility-page .table-wrap { overflow-x:auto; border:1px solid var(--utility-line); border-radius:12px; }
.utility-page th { background:#e7efe7; color:var(--utility-ink); }

body:has(.utility-page) > nav {
  width: 100%;
  max-width: none;
  min-height: 76px;
  margin: 0;
  padding-inline: clamp(1rem,4vw,4.5rem);
  border: 0;
  border-bottom: 1px solid var(--utility-line);
  border-radius: 0;
  background: rgba(255,253,248,.97);
  box-shadow: none;
}
.utility-page { width:min(1440px,100%); padding-top:0; }
.utility-page .hero {
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(280px,.72fr);
  grid-template-rows:auto auto auto auto 1fr;
  column-gap:clamp(2rem,5vw,5.5rem);
  align-items:start;
  min-height:560px;
  margin:0;
  padding:clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,5.5rem) 2.4rem;
  border-width:0 0 1px;
  border-radius:0;
  overflow:hidden;
  box-shadow:none;
}
.utility-page .hero > :not(.founder-portrait) { grid-column:1; position:relative; z-index:2; }
.utility-page .hero h1 { max-width:760px; font-size:clamp(3rem,5.2vw,5.5rem); line-height:.96; }
.utility-page .hero .lede,.utility-page .hero .notice { max-width:680px; }

@media(max-width:860px) {
  .utility-page .hero { grid-template-columns:1fr; min-height:0; padding:2.2rem 1.25rem; }
  .utility-page .hero > :not(.founder-portrait) { grid-column:1; }
}

@media(max-width:580px) {
  .utility-page, body:has(.utility-page) > nav { width:calc(100% - 20px); }
  .utility-page .hero, .utility-page .section, .utility-page .visual { padding:1.2rem; border-radius:15px; }
}