/* Castle Accounting Services LLC
   All colors live in :root. Change them there, not scattered through the file. */

@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("assets/fonts/cinzel-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/lora-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/lora-italic-variable.woff2") format("woff2");
}

:root {
  --navy-900: #0f1b2d;
  --navy-800: #16263f;
  --navy-700: #1f3555;
  --slate-600: #46566d;
  --slate-400: #7d8ca3;
  --paper: #f6f8fa;
  --white: #ffffff;
  --gold: #b08d3c;
  --gold-light: #d4b062;
  --border: #e3e7ed;

  /* Heraldic accents, added deliberately alongside navy/gold rather than in
     place of them -- rich and saturated, but kept to a small, consistent set
     (five colors used everywhere beats twelve used once). */
  --crimson: #9c2b2b;
  --crimson-light: #c1544e;
  --forest: #35603f;
  --parchment: #f7f1e3;
  --parchment-border: #e6d9bb;
  --stone: #7a7264;

  --shadow-sm: 0 1px 2px rgba(15, 27, 45, .06);
  --shadow-md: 0 2px 8px rgba(15, 27, 45, .08), 0 12px 32px rgba(15, 27, 45, .05);
  --radius: 3px;
  --max: 1120px;

  /* Three roles, not two: a carved-inscription display face for headings and
     price numerals, a warm book-serif for reading copy, and the plain system
     sans kept on as the utility face -- nav, buttons, labels, table data --
     anywhere small text needs to stay neutral rather than characterful. */
  --display: "Cinzel", Georgia, "Times New Roman", serif;
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--navy-800);
  background: var(--parchment);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.25; color: var(--navy-900); letter-spacing: .01em; }
h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: 0; margin: 0 0 1.1rem; }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); margin: 0 0 .7rem; }
h3 { font-size: 1.05rem; letter-spacing: .01em; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }
a { color: var(--navy-700); }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

section { padding: 96px 0; position: relative; }
/* Plain-white sections are now the exception, reserved for surfaces that are
   genuinely decisions rather than narrative (pricing tables, the add-on/tax
   grids) -- everywhere else sits on the parchment page color by default, so
   the page doesn't revert to a white SaaS canvas the moment .alt ends. */
section.alt { background: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Full dark band -- the one place the page goes bold rather than warm.
   Mirrors the .hero color treatment so the two dark sections read as a
   matched pair bookending the page, with Contact's parchment as the hinge
   between them. */
section.band {
  background: linear-gradient(170deg, var(--navy-900) 0%, var(--navy-800) 100%);
  color: #cbd5e3;
}
section.band h2 { color: var(--white); }
section.band .eyebrow { color: var(--crimson-light); }
section.band .section-head p { color: #a9b8cc; }
section.band .card-note { color: #a9b8cc; }
section.band a:not(.btn) { color: var(--gold-light); }

.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head p { color: var(--slate-600); margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .75rem;
}

/* ---------- header ---------- */

/* The header floats transparently over the hero and only turns solid once you
   scroll past it. A permanently white bar reads as a slab over the dark hero, and
   then dissolves into the white page sections below it — no visible top edge. */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

header.scrolled {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 12px rgba(15, 27, 45, .07);
}

/* Over the hero: light type and the white logo mark. */
header .brand-name { color: var(--white); }
header .brand-sub { color: rgba(255, 255, 255, .6); }
header .nav-links a { color: rgba(255, 255, 255, .82); }
header .nav-links a:hover { color: var(--white); }
header .nav-links a.btn-primary { background: var(--gold); color: var(--navy-900); }
header .nav-links a.btn-primary:hover { background: var(--gold-light); color: var(--navy-900); }
header .nav-toggle span { background: var(--white); }

header .logo-dark { display: none; }
header .logo-light { display: block; }

/* Scrolled: back to dark type on white. */
header.scrolled .brand-name { color: var(--navy-900); }
header.scrolled .brand-sub { color: var(--slate-400); }
header.scrolled .nav-links a { color: var(--slate-600); }
header.scrolled .nav-links a:hover { color: var(--navy-900); }
header.scrolled .nav-links a.btn-primary { background: var(--navy-800); color: var(--white); }
header.scrolled .nav-links a.btn-primary:hover { background: var(--navy-900); color: var(--white); }
header.scrolled .nav-toggle span { background: var(--navy-800); }
header.scrolled .logo-dark { display: block; }
header.scrolled .logo-light { display: none; }

/* The hero starts under the header rather than below it, so the transparent bar
   has something dark to sit on. */
.hero { margin-top: -72px; padding-top: 176px; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }

.brand svg { width: 30px; height: 30px; flex: none; }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: .02em;
}
.brand-sub {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--slate-400);
  font-weight: 600;
}

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-family: var(--sans);
  text-decoration: none;
  color: var(--slate-600);
  font-size: .93rem;
  font-weight: 500;
}
.nav-links a:hover { color: var(--navy-900); }
/* The rule above is more specific than .btn-primary, so the CTA needs its own line
   or it renders as gray text on a navy button. */
.nav-links a.btn-primary { color: var(--white); }
.nav-links a.btn-primary:hover { color: var(--white); }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary { background: var(--navy-800); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--navy-900); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--navy-800); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--slate-400); }
.btn-lg { padding: 15px 30px; font-size: 1rem; }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy-800); margin: 4px 0; }

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(170deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--white);
  padding: 104px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 75% 15%, rgba(176, 141, 60, .16), transparent 70%);
  pointer-events: none;
  z-index: 2;
}
.hero .wrap {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 40px;
}
.hero-inner { max-width: 680px; }
.hero h1 { color: var(--white); }
.hero .lede { font-size: 1.16rem; color: #cbd5e3; margin-bottom: 2rem; }
.hero .eyebrow { color: var(--gold-light); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn-primary { background: var(--gold); color: var(--navy-900); }
.hero .btn-primary:hover { background: var(--gold-light); }
.hero .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, .28); }
.hero .btn-ghost:hover { border-color: rgba(255, 255, 255, .6); }

/* The hero's one signature moment: a hand-drawn crest, not a stock photo or
   a second competing illustration. Hidden below 1080px so it never competes
   with the headline for space or attention on the screens most clients will
   actually use. */
.hero-crest {
  flex: none;
  width: 220px;
  height: 260px;
  display: none;
  color: var(--gold-light);
  opacity: 0;
  transform: translateY(10px);
  animation: crest-in .8s ease-out .25s forwards;
}
.hero-crest svg { width: 100%; height: 100%; overflow: visible; }
@keyframes crest-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-crest { animation: none; opacity: 1; transform: none; }
}
@media (min-width: 1080px) { .hero-crest { display: block; } }

.credential-strip {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--sans);
  font-size: .87rem;
  color: #a9b8cc;
}
.credential-strip span { display: flex; align-items: center; gap: 8px; }
.credential-strip span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

/* ---------- cards ---------- */

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm);
}
.card-icon { width: 38px; height: 38px; display: block; margin-bottom: 16px; }
.card-icon.icon-crimson { color: var(--crimson); }
.card-icon.icon-forest { color: var(--forest); }
.card-icon.icon-gold { color: var(--gold); }
.card p:last-child { margin-bottom: 0; }
.card .card-note { font-size: .9rem; color: var(--slate-600); }

.card ul { font-family: var(--sans); margin: 0; padding-left: 18px; color: var(--slate-600); font-size: .89rem; }
.card ul li { margin-bottom: 6px; }

/* Warm secondary text/borders on parchment, so cards don't read cool-grey
   against a cream background. Only three of the four sides -- border-top is
   the heraldic accent color and must stay untouched here, or this shorthand
   (higher specificity than .card.card-crimson, thanks to the "section" type
   selector) silently overwrites it back to parchment on every card. */
section.alt .card {
  border-right-color: var(--parchment-border);
  border-bottom-color: var(--parchment-border);
  border-left-color: var(--parchment-border);
}
section.alt .card-note,
section.alt .card ul,
section.alt .section-head p { color: var(--stone); }

/* Each service gets its own heraldic tincture, carried from the icon into a
   top edge on the card itself -- so the distinction is structural, not just
   a colored icon sitting on an otherwise identical white box. */
.card { border-top: 3px solid var(--border); }
.card.card-crimson { border-top-color: var(--crimson); }
.card.card-forest { border-top-color: var(--forest); }
.card.card-gold { border-top-color: var(--gold); }

/* ---------- pricing ---------- */

.tier {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  position: relative;
}
/* The seal reads as a wax stamp of approval on the charter -- overlapping the
   top edge the way an actual seal overlaps a folded document. */
.tier-seal {
  position: absolute;
  top: -18px;
  left: 26px;
  width: 38px;
  height: 38px;
  color: var(--gold);
  background: var(--white);
  border-radius: 50%;
}
.tier.featured {
  border-color: var(--gold);
  border-width: 2px;
  box-shadow: var(--shadow-md);
}
.tier.featured .tier-seal { color: var(--crimson); }
.tier.featured::before {
  content: "Most common";
  position: absolute;
  top: -14px;
  right: 16px;
  background: var(--crimson);
  color: var(--white);
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 13px;
  clip-path: polygon(8% 0, 100% 0, 100% 100%, 8% 100%, 0 50%);
}
.tier-name { font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--navy-900); margin: 0 0 4px; }
.price-row { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; }
.price-was {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--slate-400);
  text-decoration: line-through;
  text-decoration-color: var(--slate-400);
}
.price { font-family: var(--display); font-weight: 600; font-size: 2.2rem; color: var(--navy-900); line-height: 1; margin: 0; }
.price span { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--slate-400); }
.founding-note {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold);
  margin: 6px 0 0;
}
.founding-callout {
  background: rgba(176, 141, 60, .08);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 22px;
  font-size: .94rem;
  color: var(--navy-800);
  margin-bottom: 22px;
}
.founding-callout strong { color: var(--navy-900); }
.tier ul { font-family: var(--sans); list-style: none; padding: 0; margin: 22px 0 26px; font-size: .89rem; color: var(--slate-600); }
.tier ul li { padding: 7px 0 7px 26px; position: relative; border-top: 1px solid var(--border); }
.tier ul li:first-child { border-top: 0; }
.tier ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 15px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}
.tier .btn { margin-top: auto; text-align: center; }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-family: var(--sans);
  font-size: .92rem;
}
th, td { text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--border); }
th { background: var(--paper); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--slate-600); }
td:last-child, th:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

.price-note { font-size: .9rem; color: var(--slate-600); margin-top: 18px; }

/* ---------- about ---------- */

.about-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }

.disclosure {
  background: var(--paper);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
  font-size: .94rem;
  color: var(--slate-600);
}
.disclosure strong { color: var(--navy-900); }
.disclosure p:last-child { margin-bottom: 0; }

/* ---------- contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }

label { font-family: var(--sans); display: block; font-size: .85rem; font-weight: 600; color: var(--navy-800); margin-bottom: 6px; }
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--navy-900);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(176, 141, 60, .14);
}
textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute; left: -9999px; }

.contact-detail { margin-bottom: 26px; }
.contact-detail .label {
  font-family: var(--sans);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-400);
  font-weight: 700;
  margin-bottom: 3px;
}
.contact-detail a { color: var(--navy-800); text-decoration: none; font-weight: 500; }
.contact-detail a:hover { color: var(--gold); }

/* ---------- footer ---------- */

footer {
  background: var(--navy-900);
  color: #93a3b8;
  padding: 56px 0 34px;
  font-size: .9rem;
}
footer a { color: #cbd5e3; text-decoration: none; }
footer a:hover { color: var(--white); }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 24px; font-family: var(--sans); }
.footer-legal { font-family: var(--sans); padding-top: 26px; font-size: .82rem; line-height: 1.7; color: #7d8ca3; max-width: 780px; }
footer { font-family: var(--sans); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  section { padding: 64px 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 20px;
    box-shadow: var(--shadow-md);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--border); }
  header .nav-links a, header.scrolled .nav-links a { color: var(--slate-600); }
  header .nav-links a.btn-primary { background: var(--navy-800); color: var(--white); }
  .nav-links .btn { margin-top: 14px; text-align: center; border-bottom: 0; }
  .nav-toggle { display: block; }
  .hero { padding: 72px 0 64px; }
  .hero-actions .btn { width: 100%; text-align: center; }

  /* The Analysis & Advisory table has two long price strings ("$750 setup,
     then $150 / month") that force nowrap columns wider than a phone screen
     -- overflowing silently with no scroll affordance, so a visitor just
     never sees those two prices. Every other table on the page is short
     enough to fit as-is; only this one needs the wrap. */
  th, td { padding: 12px 14px; }
  td:last-child, th:last-child { white-space: normal; }
}

/* ==========================================================================
   Additions: real logo, hero video, about block
   ========================================================================== */

.site-logo { height: 46px; width: auto; display: block; }

/* Hero background video: Mark's own footage (a knight at a writing desk),
   tinted by the gradient/glow already on .hero so it reads as branded, not
   stock. Kept low-opacity so headline contrast never depends on frame content. */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
  opacity: .32;
}
@media (prefers-reduced-motion: reduce) {
  /* Looping motion is exactly what this setting asks sites to avoid.
     Dropping the element falls back to the poster frame (a still) or,
     if that's also unavailable, the plain gradient underneath. */
  .hero-video { display: none; }
}

/* Section divider: earlier attempts at an ornamental seam (a tiled
   crenellated pattern, twice) read as noise rather than texture -- repeating
   a shape across the full width just looks like a busted background image.
   This is the same idea done as restraint instead of repetition: one small
   mark, centered, on a single hairline. It reuses the hero crest's tower
   glyph so the motif only has to be learned once. */
.divider {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--max);
  margin: 0 auto 56px;
  padding: 0 24px;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--parchment-border);
}
.divider svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
section.band + .divider::before,
section.band + .divider::after,
.divider.on-dark::before,
.divider.on-dark::after { background: rgba(255, 255, 255, .16); }
.divider.on-dark svg { color: var(--gold-light); }

/* About */
.about-media { position: sticky; top: 96px; }
.about-headshot {
  width: 100%;
  border-radius: var(--radius);
  display: block;
  box-shadow: var(--shadow-md);
}
.edu-logos {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.edu-logos img {
  height: 42px;
  width: auto;
  max-width: 46%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .62;
  transition: filter .2s ease, opacity .2s ease;
}
.edu-logos img:hover { filter: grayscale(0); opacity: 1; }

.about-lead { font-size: 1.06rem; }

.fact-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 34px 0;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.fact-row .fact-label {
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-400);
  font-weight: 700;
  margin-bottom: 5px;
}
.fact-row .fact-value { font-family: var(--sans); font-size: .95rem; color: var(--navy-800); font-weight: 500; line-height: 1.4; }

/* About, on the navy band: body copy, the fact row, and the credential logos
   all need a light-on-dark pass. The disclosure box stays a light card on
   purpose -- it's the one thing on the page that most benefits from visually
   interrupting its section, so it reads as a callout rather than blending in. */
#about p { color: #cbd5e3; }
#about .about-lead { color: #dde5ef; }
#about .disclosure {
  background: var(--white);
  border-left-color: var(--crimson);
  box-shadow: var(--shadow-md);
}
#about .disclosure p { color: var(--slate-600); }
#about .disclosure p strong { color: var(--navy-900); }
#about .fact-row { border-color: rgba(255, 255, 255, .16); }
#about .fact-row .fact-label { color: rgba(255, 255, 255, .5); }
#about .fact-row .fact-value { color: #e4e9f0; }
#about .edu-logos { border-top-color: rgba(255, 255, 255, .16); }
#about .edu-logos img {
  background: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
  filter: none;
  opacity: 1;
  height: 36px;
}
#about .edu-logos img:hover { filter: none; opacity: 1; }

.pricing-block { margin-top: 76px; }
.pricing-block:first-of-type { margin-top: 0; }

@media (max-width: 900px) {
  /* Stacked, the headshot would stretch to the full column and upscale past its
     source resolution. Cap it so it stays a portrait, not a billboard. */
  .about-media { position: static; max-width: 380px; }
  .fact-row { grid-template-columns: 1fr; gap: 16px; }
}