/* ==========================================================================
   B Productive - shared stylesheet
   Single stylesheet for Home, About, Services, Contact.
   Type-led, mobile-first, light mode primary.
   ========================================================================== */

/* ---------- Self-hosted fonts ------------------------------------------- */
/* Variable woff2 files — one upright + one italic for Newsreader, one for
   IBM Plex Sans. Self-hosted to avoid leaking visitor IPs to Google Fonts
   (LG München, Jan 2022). Double src is the progressive-enhancement
   pattern: modern browsers pick up the variations hint, older ones fall
   back to the same file as a regular woff2. */

@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-variable.woff2") format("woff2-variations"),
       url("assets/fonts/newsreader-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("assets/fonts/newsreader-italic-variable.woff2") format("woff2-variations"),
       url("assets/fonts/newsreader-italic-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/fonts/ibm-plex-sans-variable.woff2") format("woff2-variations"),
       url("assets/fonts/ibm-plex-sans-variable.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset / base ------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Tokens ------------------------------------------------------- */

:root {
  /* Color */
  --ink: #15171C;
  --paper: #F7F6F2;
  --stone: #6A6E78;
  --stone-soft: #B7B7B0;
  --rule: #D9D7CE;
  --blue: #2E7DD7;
  --blue-deep: #1F62B0;

  /* Type */
  --serif: "Newsreader", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale (8px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* Layout */
  --measure: 64ch;       /* body reading column, ~60-75 chars */
  --measure-narrow: 52ch;
  --page-pad: clamp(20px, 5vw, 40px);
  --page-max: 1120px;
}

/* ---------- Page shell --------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__inner {
  flex: 1 0 auto;
}

.container {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

.container--narrow {
  max-width: 760px;
}

/* Quiet mid-page CTA — for long pages (Services) where the visitor might decide
   they want to talk to us before reaching the closer. Hairlines + italic copy +
   inline link, nothing button-loud. */
.cta-aside {
  margin-top: var(--s-9);
  margin-bottom: var(--s-9);
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
}

.cta-aside__text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 22px);
  line-height: 1.4;
  color: var(--ink);
  max-width: 44ch;
  margin: 0;
}

/* ---------- Header / nav ------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: padding 200ms ease, border-color 200ms ease, background 200ms ease;
}

/* Once the user has scrolled past the top, tighten up and add a hairline + frosted glass.
   The class is toggled by site.js. */
.site-header.is-scrolled {
  padding-top: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom-color: var(--rule);
  background: rgba(247, 246, 242, 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.022em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.wordmark__mark {
  display: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
  align-self: center;
  flex: 0 0 auto;
  background-image: url("assets/b-productive-mark.jpg");
  background-size: cover;
  background-position: center;
}

.wordmark__text {
  position: relative;
  top: 1px;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
}

.nav a {
  font-size: 15px;
  color: var(--stone);
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}

.nav a:hover {
  color: var(--ink);
}

.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Quiet outlined-pill treatment for the Contact link — always visible "next step"
   without resorting to a sticky CTA bar. */
.nav a.nav__cta {
  padding: 7px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.nav a.nav__cta:hover {
  border-color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Active page state on the pill: solid ink fill (overrides the underline). */
.nav a.nav__cta[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------- Typography --------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
}

h4 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stone);
}

p {
  margin: 0 0 var(--s-5) 0;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
}

.prose {
  max-width: var(--measure);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
}

.prose p + p {
  margin-top: var(--s-5);
}

.prose strong {
  font-weight: 600;
  color: var(--ink);
}

.prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  transition: color 120ms ease, border-color 120ms ease;
}

.prose a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* Eyebrows / section labels */

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s-5);
}

.eyebrow__num {
  color: var(--ink);
  margin-right: 8px;
}

/* ---------- Sections ----------------------------------------------------- */

section {
  padding-top: clamp(56px, 9vw, 112px);
  padding-bottom: clamp(56px, 9vw, 112px);
}

.section--tight {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.section + .section {
  border-top: 1px solid var(--rule);
}

.section__head {
  margin-bottom: var(--s-7);
}

.section__head h2 {
  max-width: 22ch;
}

.section--two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
}

@media (min-width: 880px) {
  .section--two-col {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--s-9);
    align-items: start;
  }
}

/* ---------- Hero --------------------------------------------------------- */

.hero {
  padding-top: clamp(64px, 12vw, 144px);
  padding-bottom: clamp(64px, 10vw, 128px);
}

.hero__headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
  margin: 0;
}

.hero__headline em {
  font-style: italic;
}

.hero__sub {
  margin-top: var(--s-7);
  max-width: 56ch;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
}

.hero__cta {
  margin-top: var(--s-7);
}

/* ---------- CTA / button ------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 24px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.btn:hover {
  background: #2A2D34;
  border-color: #2A2D34;
  color: var(--paper);
}

.btn__arrow {
  display: inline-block;
  transition: transform 160ms ease;
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  align-items: center;
}

.cta-pair__or {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--stone);
  letter-spacing: 0.02em;
}

/* Quiet inline link with arrow */

.link-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 140ms ease, border-color 140ms ease, gap 140ms ease;
}

.link-inline:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.link-inline__arrow {
  transition: transform 160ms ease;
  font-family: var(--sans);
}

.link-inline:hover .link-inline__arrow {
  transform: translateX(3px);
}

/* ---------- Service cards (Home block 2) -------------------------------- */

.services-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
  margin-top: var(--s-2);
}

@media (min-width: 760px) {
  .services-pair {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 48ch;
}

.service-card__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.service-card__num {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  display: inline-block;
  margin-bottom: var(--s-3);
}

.service-card p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

/* ---------- People (Home block 4) --------------------------------------- */

.people {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-8);
}

@media (min-width: 760px) {
  .people {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-8);
  }
}

.person {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: 48ch;
}

.person__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.person__role {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: -4px;
}

.person p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
}

/* ---------- Closer / contact block -------------------------------------- */

.closer {
  padding-top: clamp(72px, 10vw, 128px);
  padding-bottom: clamp(72px, 10vw, 128px);
}

.closer__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}

.closer__body {
  margin-top: var(--s-6);
  max-width: 54ch;
  font-size: 18px;
  line-height: 1.6;
}

.closer__email {
  margin-top: var(--s-7);
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.005em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  transition: color 140ms ease, border-color 140ms ease;
}

.closer__email:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---------- Services page specifics ------------------------------------- */

.services-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

.services-jump__label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  align-self: center;
}

.services-jump a {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}

.services-jump a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.service-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
}

@media (min-width: 880px) {
  .service-block {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-9);
  }
}

.service-block__title h2 {
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.018em;
}

.service-block__title .subhead {
  margin-top: var(--s-5);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.8vw, 22px);
  line-height: 1.4;
  color: var(--stone);
  font-weight: 400;
  max-width: 28ch;
}

.service-detail {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

.service-detail__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-3);
}

@media (min-width: 600px) {
  .service-detail__row {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--s-6);
  }
}

.service-detail__label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
  padding-top: 4px;
}

.service-detail__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 60ch;
}

.service-detail__body p + p {
  margin-top: var(--s-4);
}

.fitlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.fitlist li {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}

.fitlist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 1px;
  background: var(--ink);
}

.fitlist--neg li::before {
  background: var(--stone-soft);
}

.fitlist--neg li {
  color: var(--stone);
}

/* ---------- About page specifics ---------------------------------------- */

.bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

@media (min-width: 880px) {
  .bio {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-9);
  }
}

.bio__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.bio__photo {
  display: block;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin-bottom: var(--s-6);
  filter: grayscale(100%) contrast(1.02);
  background: #E8E5DC;
}

/* LinkedIn glyph — sits next to a name. Inherits ink color, becomes underlined-only on hover */
.li-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 10px;
  vertical-align: -4px;
  color: var(--stone);
  border-radius: 3px;
  transition: color 140ms ease, background 140ms ease;
}

.li-link:hover {
  color: var(--ink);
}

.li-link svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}

/* Larger glyph for the longer About page, where names are display-scale serif */
.bio__name .li-link {
  width: 34px;
  height: 34px;
  margin-left: 14px;
  vertical-align: -6px;
}

.bio__name .li-link svg {
  width: 26px;
  height: 26px;
}

.person__photo {
  display: block;
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: var(--s-4);
  filter: grayscale(100%) contrast(1.02);
  background: #E8E5DC;
  border-radius: 2px;
}

.bio__role {
  margin-top: var(--s-3);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}

.bio__body {
  font-size: 17px;
  line-height: 1.75;
  max-width: 64ch;
}

.bio__body p + p {
  margin-top: var(--s-5);
}

/* ---------- Contact page specifics -------------------------------------- */

.contact {
  padding-top: clamp(80px, 14vw, 180px);
  padding-bottom: clamp(64px, 10vw, 128px);
}

.contact__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 14ch;
  text-wrap: balance;
}

.contact__body {
  margin-top: var(--s-7);
  max-width: 56ch;
  font-size: 19px;
  line-height: 1.6;
}

.contact__email {
  margin-top: var(--s-7);
  display: inline-block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.015em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
  transition: color 140ms ease, border-color 140ms ease;
}

.contact__email:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.contact__note {
  margin-top: var(--s-9);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
  max-width: 40ch;
  font-size: 15px;
  color: var(--stone);
  line-height: 1.6;
}

/* ---------- Contact form ------------------------------------------------ */

.form {
  margin-top: var(--s-8);
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

@media (min-width: 640px) {
  .form__row--two {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.field__label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

.field__hint {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--stone);
  font-weight: 400;
  line-height: 1.5;
  margin-top: -2px;
  margin-bottom: var(--s-1);
}

.field__input,
.field__textarea {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 8px 0 10px 0;
  width: 100%;
  border-radius: 0;
  transition: border-color 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.field__input:hover,
.field__textarea:hover {
  border-bottom-color: var(--stone);
}

.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

/* Suppress the global :focus-visible outline on form fields — the border-color change is already a sufficient indicator */
.field__input:focus-visible,
.field__textarea:focus-visible {
  outline: none;
}

.field__textarea {
  /* Auto-grow with content (modern browsers); falls back to min-height on older */
  field-sizing: content;
  resize: none;
  min-height: 96px;
  max-height: 320px;
  font-size: 18px;
  line-height: 1.55;
  /* Subtle scrollbar treatment for the rare case content exceeds max-height */
  scrollbar-width: thin;
  scrollbar-color: var(--stone-soft) transparent;
}

.field__textarea::-webkit-scrollbar {
  width: 6px;
}

.field__textarea::-webkit-scrollbar-track {
  background: transparent;
}

.field__textarea::-webkit-scrollbar-thumb {
  background-color: var(--stone-soft);
  border-radius: 3px;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--stone-soft);
  font-family: var(--serif);
  font-style: italic;
}

/* Honeypot - off-screen, never visible, never tab-focusable visually */
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-5);
  align-items: center;
  margin-top: var(--s-3);
}

.form__status {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--stone);
  min-height: 1.4em;
  line-height: 1.4;
  flex: 1 1 auto;
  min-width: 200px;
}

.form__status--error {
  color: #B23B3B;
}

.form__status--ok {
  color: var(--ink);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* The "thank you" panel that replaces the form on success */
.form-success {
  margin-top: var(--s-8);
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: rgba(255,255,255,0.4);
  max-width: 60ch;
}

.form-success__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--s-3) 0;
}

.form-success__body {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
}

.is-hidden { display: none !important; }


/* ---------- Footer ------------------------------------------------------- */

.site-footer {
  margin-top: var(--s-10);
  padding-top: var(--s-7);
  padding-bottom: var(--s-7);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--stone);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}

@media (min-width: 760px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

.site-footer__primary {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.site-footer__address {
  color: var(--stone);
  font-style: normal;
  line-height: 1.55;
  font-size: 13px;
  margin-top: var(--s-2);
}

.site-footer__address span {
  display: block;
}

.site-footer__email {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.005em;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  align-self: start;
  transition: color 140ms ease, border-color 140ms ease;
}

.site-footer__email:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.site-footer__location {
  color: var(--stone);
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-start;
}

@media (min-width: 760px) {
  .site-footer__links {
    align-items: flex-end;
  }
}

.site-footer__links a {
  color: var(--stone);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 140ms ease, border-color 140ms ease;
}

.site-footer__links a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.site-footer__meta {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: 13px;
  color: var(--stone);
}

/* Quiet utility row under the LinkedIn block: Privacy · Legal.
   Same muted color / size as the address, never prominent. */
.site-footer__utility {
  margin-top: var(--s-3);
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: 14px;
  color: var(--stone);
}

.site-footer__utility a {
  color: var(--stone);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 140ms ease, border-color 140ms ease;
}

.site-footer__utility a:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.site-footer__utility a[aria-current="page"] {
  color: var(--ink);
}

.site-footer__utility span {
  color: var(--stone-soft);
}

/* ---------- Legal / Privacy page ---------------------------------------- */

/* Each H2 + prose pair sits in a single readable column, matching the
   restrained two-col rhythm of the rest of the site but stacked because
   legal sections are short. */
.legal-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}

@media (min-width: 880px) {
  .legal-block {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-9);
    align-items: start;
  }
}

.legal-block h2 {
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.2;
  max-width: 18ch;
}

.legal-block .prose-list {
  margin-top: var(--s-2);
  margin-bottom: var(--s-2);
}

.legal-address {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--s-5);
}

.legal-updated {
  margin-top: var(--s-6);
  font-size: 14px;
  color: var(--stone);
}

/* ---------- Page intro (sub-pages) -------------------------------------- */

.page-intro {
  padding-top: clamp(56px, 10vw, 128px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.page-intro__kicker {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s-6);
}

.page-intro h1 {
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  max-width: 18ch;
}

.page-intro__body {
  margin-top: var(--s-7);
  max-width: var(--measure);
  font-size: 18px;
  line-height: 1.7;
}

.page-intro__body p + p {
  margin-top: var(--s-5);
}

/* ---------- Utilities ---------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  z-index: 100;
}

.skip-link:focus {
  left: var(--page-pad);
  top: var(--s-3);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Mobile nav: keep it simple. Links shrink, and on narrow screens the nav wraps
   to its own row beneath the wordmark so the Contact pill is never clipped off the
   right edge. Never a burger. */

@media (max-width: 560px) {
  .site-header__inner {
    flex-wrap: wrap;
    row-gap: var(--s-3);
  }
  .nav {
    width: 100%;
    justify-content: space-between;
    gap: var(--s-4);
  }
}

@media (max-width: 520px) {
  .wordmark {
    font-size: 20px;
  }
  .nav a {
    font-size: 14px;
  }
}