/* Dr Gregory Gorman — site stylesheet. Single hand-written file, no framework. */

:root {
  color-scheme: light;

  --paper: #F7F9FB;
  --paper-2: #EEF2F6;
  --white: #FFFFFF;
  --ink: #243B53;
  --ink-2: #52606D;
  --line: #D9E2EC;
  --navy-900: #0B1F33;
  --navy-700: #102A43;
  --navy-100: #E1E8F0;
  --teal-600: #147D7E;
  --teal-700: #0F6566;
  --teal-100: #DCEEEE;
  --amber-500: #D6A84B;
  --paper-on-navy: #F4F1EA;

  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Fonts: self-hosted, Latin subset only */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-serif-4-latin-600.woff2") format("woff2");
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, picture { max-width: 100%; display: block; }
/* Width/height attributes reserve space; height:auto keeps the intrinsic ratio once CSS sizes the image. */
img { height: auto; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
p, li, a { overflow-wrap: break-word; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}
@media (min-width: 600px) {
  body { font-size: 17px; }
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy-700);
}

h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: 1.2;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.small { font-size: 0.875rem; color: var(--ink-2); }

.prose { max-width: 68ch; }
.prose p + p { margin-top: 1em; }

a { color: var(--teal-600); }
a:hover { color: var(--teal-700); }

table { font-variant-numeric: tabular-nums; }
.pricing-fee { font-variant-numeric: tabular-nums; }

/* Layout */
.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}
@media (max-width: 400px) {
  .container { padding-inline: 16px; }
}

.section {
  padding-block: 56px;
}
@media (min-width: 900px) {
  .section { padding-block: 96px; }
}
.section--alt { background: var(--paper-2); }
.section--navy { background: var(--navy-900); color: var(--paper-on-navy); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--paper-on-navy); }
.section--navy a { color: var(--paper-on-navy); text-decoration-thickness: 2px; text-underline-offset: 2px; }

.stack { display: grid; gap: 24px; }
.stack > * { min-width: 0; }

/* Skip link */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  background: var(--navy-900);
  color: var(--paper-on-navy);
  padding: 10px 16px;
  border-radius: 4px;
  z-index: 100;
  transition: top 0.1s ease;
}
.skip-link:focus {
  top: 8px;
}

/* Focus */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--teal-700);
  outline-offset: 2px;
}

/* Header */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  height: 60px;
  display: flex;
  align-items: center;
}
@media (min-width: 900px) {
  .site-header { height: 72px; }
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}
@media (min-width: 500px) {
  .site-header .container { gap: 16px; }
}
.wordmark {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--navy-700);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { color: var(--navy-700); }

.site-nav { display: flex; align-items: center; gap: 12px; }
@media (min-width: 500px) {
  .site-nav { gap: 24px; }
}
@media (max-width: 399px) {
  .wordmark { font-size: 0.875rem; }
  .site-header .container { gap: 6px; }
  .site-nav { gap: 6px; }
  .site-header .btn { padding-inline: 10px; font-size: 0.875rem; white-space: nowrap; }
  .nav-disclosure summary { padding-inline: 6px; }
}
.nav-links {
  display: none;
  list-style: none;
  gap: 24px;
  align-items: center;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
.nav-links a:hover { color: var(--teal-600); }
@media (min-width: 900px) {
  .nav-links { display: flex; }
  .nav-disclosure { display: none; }
}

.nav-disclosure { position: relative; }
.nav-disclosure summary {
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  color: var(--navy-700);
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure[open] summary { border-color: var(--navy-700); }
.nav-disclosure .menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  display: grid;
  gap: 4px;
  min-width: 200px;
  z-index: 10;
}
.nav-disclosure .menu-panel a {
  display: block;
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 4px;
}
.nav-disclosure .menu-panel a:hover { background: var(--paper-2); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--teal-600);
  color: #fff;
}
.btn-primary:hover { background: var(--teal-700); color: #fff; }
.btn-secondary {
  background: transparent;
  border-color: var(--navy-700);
  color: var(--navy-700);
}
.btn-secondary:hover { background: var(--navy-100); color: var(--navy-700); }
.section--navy .btn-secondary { border-color: var(--paper-on-navy); color: var(--paper-on-navy); }
.section--navy .btn-secondary:hover { background: rgba(244,241,234,0.12); }

@media (max-width: 400px) {
  .btn { width: 100%; }
  .site-nav .btn,
  .card .btn { width: auto; }
}

.text-link {
  color: var(--teal-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 2px;
}
.text-link:hover { color: var(--teal-700); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Tags */
.tag {
  display: inline-block;
  background: var(--teal-100);
  color: var(--navy-700);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: 4px;
}

/* Cards */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px;
}
@media (min-width: 600px) {
  .card { padding: 32px; }
}
a.card { text-decoration: none; color: inherit; display: block; }
a.card:hover { border-color: var(--navy-700); }

.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
.card-grid > * { min-width: 0; }
@media (min-width: 600px) {
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Credibility strip */
.credibility-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 16px;
}
.credibility-strip ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.credibility-strip li {
  font-size: 0.9375rem;
  color: var(--ink-2);
  padding-inline: 8px;
}
@media (min-width: 900px) {
  .credibility-strip ul { grid-template-columns: repeat(4, 1fr); }
  .credibility-strip li {
    border-left: 1px solid var(--line);
  }
  .credibility-strip li:first-child { border-left: none; }
}

/* Numbered steps */
.steps {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  counter-reset: step;
}
@media (min-width: 900px) {
  .steps--3 { grid-template-columns: repeat(3, 1fr); }
  .steps--5 { grid-template-columns: repeat(1, 1fr); }
}
.step-num {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--amber-500);
  line-height: 1;
  margin-bottom: 8px;
}
.step { display: grid; gap: 8px; }
.step-list { display: grid; gap: 24px; }
.step-list .step {
  grid-template-columns: 48px 1fr;
  display: grid;
  align-items: start;
  gap: 16px;
}
.step-list .step-num { margin-bottom: 0; }

/* Report previews: fixed-ratio frame, image contained (never stretched or cropped) */
.report-shot__frame {
  background: var(--navy-100);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
/* Example-report pair. Desktop: the two figures share one image height. Column widths follow each
   image's own aspect ratio (flex-grow = ratio, basis = the frame's fixed mat), so both frames end up
   the same height with an identical mat on every side, and neither image is stretched or letterboxed. */
.report-shot__frame picture { width: 100%; height: 100%; display: grid; place-items: center; }
.report-shot__frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(11, 31, 51, 0.15);
}
.report-gallery .report-shot__frame { aspect-ratio: auto; }
.report-gallery .report-shot__frame img { width: 100%; }
.report-caption {
  font-size: 0.875rem;
  color: var(--ink-2);
  margin-top: 8px;
}
.report-disclosure {
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}
.report-gallery {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 24px;
}
.report-gallery > * { min-width: 0; max-width: 560px; }
@media (min-width: 900px) {
  .report-gallery { display: flex; align-items: flex-start; }
  .report-gallery > * { max-width: none; flex: var(--ratio, 1) 1 26px; }
}
/* Proof links are secondary to the primary "Book a call" button: quiet text links, not buttons */
.proof-link { font-size: 0.9375rem; text-decoration-thickness: 1px; }

/* Example work cards: the whole card is the PDF link (stretched-link pattern keeps the link text as the accessible name) */
.card--link { position: relative; }
.card--link a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link:hover { border-color: var(--navy-700); }
.card--link:focus-within { outline: 3px solid var(--teal-700); outline-offset: 2px; }
.card--link a:focus-visible { outline: none; }
/* The thumbnail runs to the card's edges (thin mat, no card padding around it) to gain width; text keeps the card's padding. */
.example-card { padding: 0; overflow: hidden; }
.example-card .report-shot__frame { position: relative; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; }
.example-card .report-shot__frame picture { position: absolute; inset: 6px; width: auto; height: auto; display: flex; align-items: center; justify-content: center; }
.example-card .report-shot__frame img { max-width: 100%; max-height: 100%; }
.example-card__body { padding: 24px; }
@media (min-width: 600px) { .example-card__body { padding: 32px; } }

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.data-table th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-2);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.data-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table-scroll {
  overflow-x: auto;
}

@media (max-width: 700px) {
  .data-table--responsive thead { display: none; }
  .data-table--responsive, .data-table--responsive tbody, .data-table--responsive tr, .data-table--responsive td {
    display: block;
    width: 100%;
  }
  .data-table--responsive tr {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
  }
  .data-table--responsive td {
    border-bottom: none;
    padding: 6px 0;
  }
  .data-table--responsive td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ink-2);
    margin-bottom: 2px;
  }
}

/* FAQ */
.faq { display: grid; gap: 4px; }
.faq details {
  border-bottom: 1px solid var(--line);
  padding-block: 16px;
}
.faq summary {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--navy-700);
  cursor: pointer;
  color-scheme: light;
}
.faq summary::marker { color: var(--ink-2); }
.faq p { margin-top: 12px; }

/* Rules */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* Footer */
.site-footer {
  background: var(--navy-900);
  color: var(--paper-on-navy);
  padding-block: 56px;
}
.site-footer a { color: var(--paper-on-navy); }
.footer-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
.footer-grid nav ul { list-style: none; display: grid; gap: 8px; }
.footer-grid nav a { text-decoration: none; }
.footer-grid nav a:hover { text-decoration: underline; }
.footer-bottom {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid rgba(244, 241, 234, 0.2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--paper-on-navy);
}

/* Forms */
.form-field { display: grid; gap: 6px; margin-bottom: 20px; }
.form-field label { font-weight: 500; color: var(--navy-700); }
.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--white);
  color: var(--ink);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.radio-group { display: grid; gap: 8px; }
.radio-option { display: flex; align-items: center; gap: 8px; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Hero */
.hero-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid--split { grid-template-columns: 1.1fr 1fr; }
}
.hero-eyebrow-rule {
  display: inline-block;
  border-bottom: 3px solid var(--amber-500);
  padding-bottom: 2px;
}

/* Headshot: 4:5 frame; a real photo (object-fit: cover) or the typographic placeholder fill it identically */
.headshot {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
}
.headshot--placeholder {
  background: var(--navy-100);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.headshot--placeholder span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 3rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.headshot--sm { max-width: 168px; }
.headshot--sm.headshot--placeholder span { font-size: 2.25rem; }

/* Home hero: two columns (text ~58% / portrait ~42%), top-aligned. Single column below 900px:
   text first, then the portrait centred at 200px. The portrait keeps the shared 4:5 .headshot crop. */
.hero-grid--portrait { align-items: start; }
.hero-grid--portrait .hero-portrait { justify-self: center; width: 200px; }
.hero-grid--portrait .hero-portrait .headshot { max-width: none; }
@media (min-width: 900px) {
  .hero-grid--portrait { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 80px; }
  /* Flush to the right container edge; top edge on the h1 (margin = eyebrow line + the h1's 12px top
     margin). Width scales from 200px at 900px to 256px by ~1200px, then holds. */
  .hero-grid--portrait .hero-portrait { justify-self: end; width: clamp(200px, 18.67vw + 32px, 256px); margin-top: 38px; }
}

/* Service-page hero: copy left, page-1 thumbnail of the example report right; text first on mobile
   (200px, centred). Thin border, no shadow. From 900px the thumbnail is taken out of flow and sized from
   the row, so it runs from the h1's top edge (margin = eyebrow line + the h1's 12px top margin) to the
   buttons' bottom edge at any width, keeping its own ratio. */
.hero-grid--proof { align-items: start; }
.hero-grid--proof .hero-proof { justify-self: center; width: 200px; }
.hero-grid--proof .hero-proof img { border: 1px solid var(--line); border-radius: 4px; box-shadow: none; }
.hero-grid--proof a.hero-proof:hover img { border-color: var(--navy-700); }
.hero-grid--proof a.hero-proof:focus-visible { outline: none; }
.hero-grid--proof a.hero-proof:focus-visible img { outline: 3px solid var(--teal-700); outline-offset: 2px; }
@media (min-width: 900px) {
  .hero-grid--proof { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 80px; }
  .hero-grid--proof .hero-proof { position: relative; align-self: stretch; justify-self: stretch; width: auto; margin-top: 38px; }
  .hero-grid--proof .hero-proof picture { position: absolute; inset: 0; }
  .hero-grid--proof .hero-proof img { width: auto; height: 100%; max-width: 100%; margin-left: auto; object-fit: contain; object-position: right top; }
}

/* About hero: copy left, portrait right on desktop; portrait above the copy on mobile */
.about-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
.about-grid > * { min-width: 0; }
.about-photo { order: -1; }
.about-photo .headshot { max-width: 160px; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1fr 240px; gap: 64px; align-items: start; }
  .about-photo { order: 0; }
  .about-photo .headshot { max-width: 240px; }
}

/* Short titled points, two-up on wider screens */
.point-grid {
  display: grid;
  gap: 24px 40px;
  grid-template-columns: 1fr;
}
.point-grid > * { min-width: 0; }
@media (min-width: 700px) {
  .point-grid { grid-template-columns: 1fr 1fr; }
}
.point-grid.point-grid--plain p { margin-top: 0; color: inherit; max-width: 68ch; }
.point-grid h3 { font-size: 1.0625rem; }
.point-grid p { margin-top: 4px; color: var(--ink-2); }

/* Plain bulleted lists used sparingly */
.tick-list { list-style: none; display: grid; gap: 10px; max-width: 68ch; }
.tick-list li { padding-left: 20px; position: relative; }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 2px;
  background: var(--amber-500);
}

.method-list dt { font-weight: 600; color: var(--navy-700); }
.method-list dd { margin: 0 0 12px; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}