/* Layout: left-aligned, one column of plain talk. The hero pairs the promise with the
     thing we actually deliver each morning (a report on the desk). Services are ruled rows,
     not cards. One deep-blue band for proof, one for contact.
     Palette: lavender-blue page and lines; highlights in the logo's leaf greens and gold. */
  :root {
    --bg: #EEF0F8;          /* lavender-tinted evening */
    --surface: #F8F9FD;
    --ink: #13233A;         /* deep night blue */
    --muted: #4A5870;
    --line: #C5CBE1;        /* Lavender Blue */
    --accent: #2E5B39;      /* logo dark leaf */
    --deep: #234630;        /* deeper leaf, band gradient */
    --on-accent: #F8F9FD;
    --ochre: #A8720F;       /* logo gold, darkened for contrast */
    --ochre-soft: #F2E1B5;  /* pale gold */
    --pastel: #CFE3D3;      /* pale leaf green */
    --shadow: 19 35 58;

    --display: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
    --body: "Instrument Sans", "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0E1726; --surface: #16223A; --ink: #E6EAF5; --muted: #A3AEC6; --line: #2A3854;
      --accent: #8CC79A; --deep: #5C9A69; --on-accent: #0E1726; --ochre: #E2AC42; --ochre-soft: #3A3018;
      --pastel: #1E3A2A;
      --shadow: 0 0 0; color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0E1726; --surface: #16223A; --ink: #E6EAF5; --muted: #A3AEC6; --line: #2A3854;
    --accent: #8CC79A; --deep: #5C9A69; --on-accent: #0E1726; --ochre: #E2AC42; --ochre-soft: #3A3018;
    --pastel: #1E3A2A;
    --shadow: 0 0 0; color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body {
    background: var(--bg); color: var(--ink);
    font-family: var(--body); font-size: 1.0625rem; line-height: 1.6;
  }
  .wrap { max-width: 1120px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
  h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -0.015em; }
  h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); font-weight: 800; }
  h2 { font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 700; }
  h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; }
  p { margin: 0; max-width: 62ch; }
  a { color: inherit; }
  a:focus-visible, summary:focus-visible { outline: 3px solid var(--ochre); outline-offset: 3px; border-radius: 4px; }

  .eyebrow { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .lede { font-size: clamp(1.1rem, 1.9vw, 1.3rem); color: var(--muted); }
  .stack { display: flex; flex-direction: column; gap: 1.25rem; }

  /* Header */
  header.site { padding-block: 22px; }
  .site-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; }
  .wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; text-decoration: none; }
  .wordmark-text span { color: var(--accent); }
  nav.site-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.98rem; }
  nav.site-nav a { text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
  nav.site-nav a:hover { border-bottom-color: var(--ochre); }

  main { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 120px); padding-block: clamp(28px, 5vw, 56px) clamp(64px, 9vw, 120px); }

  /* Hero */
  .hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
  .hero h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--ochre-soft) 62%); }
  .btn-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
  .btn {
    display: inline-block; background: var(--accent); color: var(--on-accent);
    font-weight: 600; text-decoration: none; padding: 14px 24px; border-radius: 999px;
    transition: transform 0.15s ease;
  }
  .btn:hover { transform: translateY(-2px); }
  .text-link { font-weight: 600; text-underline-offset: 4px; text-decoration-color: var(--ochre); text-decoration-thickness: 2px; }

  /* The morning report: the signature object */
  .report {
    background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
    padding: clamp(20px, 3vw, 30px); font-family: var(--mono); font-size: 0.9rem; line-height: 1.55;
    box-shadow: 0 18px 40px -18px rgb(var(--shadow) / 0.45);
    transform: rotate(1.4deg);
  }
  .report-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--line); }
  .report-head strong { font-weight: 500; }
  .tag { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--pastel); color: var(--ink); padding: 2px 8px; border-radius: 3px; }
  .report dl { margin: 14px 0 0; display: flex; flex-direction: column; gap: 14px; }
  .report dt { color: var(--muted); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .report dd { margin: 2px 0 0; }
  .report ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .report li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); }
  .report li::before { content: "\2713"; color: var(--accent); }
  .report li.you::before { content: "\2192"; color: var(--ochre); }
  .report-foot { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); font-weight: 500; }

  /* Services: ruled rows */
  .section-head { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: clamp(24px, 4vw, 40px); }
  .service { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px clamp(28px, 5vw, 72px); padding-block: clamp(24px, 4vw, 40px); border-top: 1px solid var(--line); }
  .service:last-child { border-bottom: 1px solid var(--line); }
  .service p { color: var(--muted); }
  .ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; }
  .ticks li::before { content: ""; width: 9px; height: 9px; background: var(--ochre); border-radius: 2px; transform: translateY(-1px); }

  /* Process: a real sequence, so it is numbered */
  .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 28px clamp(20px, 3vw, 36px); counter-reset: step; }
  .steps li { counter-increment: step; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .steps li::before { content: counter(step); font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--accent); }
  .steps h3 { font-size: 1.2rem; }
  .steps p { color: var(--muted); font-size: 1rem; }

  /* Blue bands */
  .band { background: linear-gradient(135deg, var(--accent), var(--deep)); color: var(--on-accent); border-radius: 10px; padding: clamp(28px, 5vw, 56px); }
  .band .eyebrow { color: var(--on-accent); opacity: 0.8; }
  .band p { max-width: 60ch; }
  .band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(28px, 5vw, 64px); align-items: start; }

  /* Who we've worked with: plain name tiles, no logos */
  .names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .names li { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); padding: 20px 18px; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; min-width: 0; }
  .names img { display: block; height: 64px; width: auto; max-width: 100%; object-fit: contain; border-radius: 4px; }

  /* About */
  .people { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px clamp(24px, 4vw, 56px); }
  .person { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
  .mono-badge { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--accent); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--accent); }
  .person p { color: var(--muted); font-size: 1rem; }

  /* FAQ */
  .faq { display: flex; flex-direction: column; }
  .faq details { border-top: 1px solid var(--line); padding-block: 18px; }
  .faq details:last-child { border-bottom: 1px solid var(--line); }
  .faq summary { cursor: pointer; font-family: var(--display); font-weight: 700; font-size: 1.2rem; list-style-position: outside; }
  .faq details p { margin-top: 10px; color: var(--muted); }

  /* Contact */
  .contact-list { margin: 0; display: flex; flex-direction: column; gap: 14px; }
  .contact-list dt { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
  .contact-list dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; user-select: all; }

  /* Things David still needs to fill in */
  .todo { border: 1.5px dashed var(--ochre); border-radius: 4px; padding: 0 6px; font-family: var(--mono); font-size: 0.88em; font-weight: 500; }

  footer.site { border-top: 1px solid var(--line); padding-block: 28px 40px; color: var(--muted); font-size: 0.95rem; }
  footer .site-row { align-items: baseline; }

  @media (max-width: 820px) {
    .hero, .service, .band-grid { grid-template-columns: minmax(0, 1fr); }
    .report { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover { transform: none; } }

  /* Inner pages */
  .page-head h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
  .more-link { margin-top: clamp(20px, 3vw, 28px); }
  .band .btn { background: var(--on-accent); color: var(--accent); }
  nav.site-nav a[aria-current] { border-bottom-color: var(--ochre); }

  /* Home page: services at a glance */
  .service-summary { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px clamp(24px, 4vw, 48px); }
  .service-summary li { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .service-summary h3 { font-size: 1.3rem; }
  .service-summary p { color: var(--muted); font-size: 1rem; }
  .portrait { display: block; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
  @media (max-width: 480px) { .person { grid-template-columns: 84px minmax(0, 1fr); } .portrait { width: 84px; height: 84px; } }
  .logo-mark { display: block; height: 38px; width: auto; }