/* ===========================================================================
   ericmineart.com

   Typography follows Butterick's Practical Typography. The decoration around
   it is warmer and more confident than a plain reading site: a grid-paper
   texture, layered panels, colour-coded practice areas. The rules that survive
   all of it:

   - body text at 20px, with 142% line spacing
   - measure held to ~33em, roughly 68 characters (Butterick: 45–90)
   - one space between sentences, typographic quotes (applied at build time)
   - no underlining for emphasis; italic and weight carry it
   - all caps only for short labels, and always letterspaced
   - heading hierarchy from weight and space, not dramatic size jumps

   Layout is wider than a pure reading site because the page has cards, prompt
   grids, and a portrait to place. The running text inside it is not.
   ========================================================================= */

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

:root {
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Surfaces: warm paper, not cold white */
  --paper: #fdfaf4;
  --paper-sunk: #f6efe2;
  --paper-deep: #efe5d3;

  --ink: #17181c;
  --ink-muted: #575960;
  --ink-faint: #5f6168; /* clears AA on all three paper tones, incl. --paper-deep */
  --rule: #e0d6c2;

  /* The five voices. Teal anchors, clay leads, amber lifts. */
  --teal: #14524c;
  --teal-soft: #dfeeea;
  --clay: #c4472c;
  --clay-soft: #fbe3da;
  --amber: #d78b1e;
  --amber-soft: #fdeed2;
  /* Amber is bright enough to fail contrast as text, so text uses a darker
     tone while bars, fills, and rules keep the brighter one. */
  --amber-ink: #96600c;
  --indigo: #3b5b96;
  --indigo-soft: #e3e9f6;
  --plum: #7b3f63;
  --plum-soft: #f3e2ec;

  --accent: var(--teal);
  --accent-hover: #0c3a35;
  --accent-wash: var(--teal-soft);

  --measure: 33em;
  --measure-wide: 38em;
  --leading: 1.42;

  --wrap-max: 78rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --shadow-card: 0 1px 2px rgba(40, 28, 12, 0.05), 0 8px 24px -12px rgba(40, 28, 12, 0.18);
  --shadow-lift: 0 2px 4px rgba(40, 28, 12, 0.07), 0 18px 40px -16px rgba(40, 28, 12, 0.26);

  /* Dark band for the client logos. Logos arrive knocked out or greyscale,
     so they need a dark, low-chroma ground to sit on. */
  --band: #10403b;
  --band-ink: #f4efe4;
  --band-muted: rgba(244, 239, 228, 0.66);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15161a;
    --paper-sunk: #1c1e24;
    --paper-deep: #23262d;

    --ink: #ece8df;
    --ink-muted: #a5a7ae;
    --ink-faint: #7f8189;
    --rule: #33363e;

    --teal: #6cc0b2;
    --teal-soft: #16302d;
    --clay: #ef8465;
    --clay-soft: #34201a;
    --amber: #e9b45c;
    --amber-soft: #322616;
    --amber-ink: #e9b45c;
    --indigo: #8fa9e0;
    --indigo-soft: #1e2436;
    --plum: #cf93b4;
    --plum-soft: #2e2029;

    --accent: var(--teal);
    --accent-hover: #97d6cb;
    --accent-wash: var(--teal-soft);

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 40px -16px rgba(0, 0, 0, 0.7);

    --band: #12332f;
    --band-ink: #e8e5de;
    --band-muted: rgba(232, 229, 222, 0.64);
  }
}

/* Per-practice-area theming. Set the theme class on a container and everything
   inside picks it up: rules, card edges, prompt cards, links.

   --hue      paints bars, rules, fills and card edges
   --hue-ink  paints text set in that colour, and is darkened where needed so
              every combination clears WCAG AA */
.t-strategy   { --hue: var(--teal);   --hue-soft: var(--teal-soft);   --hue-ink: var(--teal); }
.t-leadership { --hue: var(--indigo); --hue-soft: var(--indigo-soft); --hue-ink: var(--indigo); }
.t-marketing  { --hue: var(--clay);   --hue-soft: var(--clay-soft);   --hue-ink: var(--clay); }
.t-workshops  { --hue: var(--amber);  --hue-soft: var(--amber-soft);  --hue-ink: var(--amber-ink); }
:root { --hue: var(--teal); --hue-soft: var(--teal-soft); --hue-ink: var(--teal); }

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: var(--leading);
  font-weight: 400;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* --- Headings ------------------------------------------------------------ */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin: 0 0 0.5em;
  hyphens: none;
}

h1 { font-size: clamp(2.15rem, 1.4rem + 2.9vw, 3.4rem); font-weight: 700; letter-spacing: -0.024em; }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 700; letter-spacing: -0.018em; }
h3 { font-size: 1.32rem; }
h4 { font-size: 1.1rem; }

h2 + p, h3 + p, h4 + p { margin-top: 0; }

p {
  margin: 0 0 1.05em;
  max-width: var(--measure);
  hyphens: auto;
}
p + p { margin-top: 0; }

blockquote {
  margin: 2.25rem 0;
  padding: 0.15rem 0 0.15rem 1.4rem;
  border-left: 3px solid var(--hue);
  font-style: italic;
  color: var(--ink-muted);
  max-width: var(--measure);
}
blockquote p:last-child { margin-bottom: 0; }

ul, ol { max-width: var(--measure); padding-left: 1.15em; margin: 0 0 1.05em; }
li { margin-bottom: 0.35em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 3.5rem 0; }

strong { font-weight: 600; }

/* --- Links --------------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* --- Small type ---------------------------------------------------------- */

.label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.9rem;
  display: block;
}

/* Label with a colored dot, for section openers */
.label--dot { display: flex; align-items: center; gap: 0.55rem; }
.label--dot::before {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--hue);
  flex: none;
}

.meta {
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

.lede {
  font-size: 1.4rem;
  line-height: 1.38;
  color: var(--ink-muted);
  max-width: 30em;
  margin-bottom: 1.6rem;
  text-wrap: pretty;
}

/* Marker behind a phrase in a headline. Both are painted as backgrounds so
   they sit behind the glyphs without needing a stacking context, and both are
   positioned against the inline box: the baseline of lowercase letters sits at
   roughly 0.8em, so a band from 0.54em covers the lower third of the word. */
.hl {
  background-image: linear-gradient(var(--amber-soft), var(--amber-soft));
  background-repeat: no-repeat;
  background-size: 100% 0.46em;
  background-position: 0 0.42em;
  padding-inline: 0.08em;
  margin-inline: -0.08em;
}

/* A heavier underline swash, for the single most important word */
.swash {
  background-image: linear-gradient(var(--clay), var(--clay));
  background-repeat: no-repeat;
  background-size: 100% 0.16em;
  background-position: 0 0.86em;
  padding-bottom: 0.06em;
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 58rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem;
  font-family: var(--sans); font-size: 0.9rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.section { padding-block: clamp(3.25rem, 7vw, 6rem); position: relative; }
.section--sunk { background: var(--paper-sunk); }
.section--deep { background: var(--paper-deep); }

/* --- Collage textures ----------------------------------------------------
   Halftone dots and a torn top edge give sections a printed, cut-paper feel
   without loading any images.
   ------------------------------------------------------------------------ */

.dots { position: relative; }
.dots::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, var(--hue) 1.1px, transparent 1.2px);
  background-size: 15px 15px;
  opacity: 0.14;
  pointer-events: none;
}
.dots > * { position: relative; }

.tilt-top {
  position: relative;
  clip-path: polygon(0 1.6rem, 100% 0, 100% 100%, 0 100%);
  margin-top: -1.6rem;
  padding-top: calc(clamp(3.25rem, 7vw, 6rem) + 1.6rem);
}

/* Decorative floating shapes, aria-hidden in markup */
.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

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

.site-header {
  padding-block: 1.5rem 1.25rem;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: relative;
  z-index: 20;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
}
.wordmark:hover { color: var(--teal); }

.wordmark__dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--clay);
  display: inline-block;
  flex: none;
  transform: translateY(-0.15em);
}

.wordmark__sub {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  align-items: center;
}

.nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding: 0.25rem 0;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--clay);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav .nav__cta {
  background: var(--teal);
  color: var(--paper);
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
}
.nav .nav__cta::after { display: none; }
.nav .nav__cta:hover { background: var(--clay); color: var(--paper); }

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

.hero {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60rem 32rem at 88% -8%, var(--amber-soft), transparent 62%),
    radial-gradient(48rem 30rem at -6% 6%, var(--teal-soft), transparent 60%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (min-width: 60rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.hero h1 { max-width: 17ch; margin-bottom: 1.15rem; }

.hero__intro {
  font-size: 1.28rem;
  line-height: 1.42;
  color: var(--ink-muted);
  max-width: 31em;
  text-wrap: pretty;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--paper);
  border: 1.5px solid var(--teal);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  margin-bottom: 1.5rem;
}

/* Portrait layering: two axis-aligned panels stepped behind the photo. The
   point is to anchor the portrait to the page rather than let it float, so
   the offsets are square, even, and quiet. No rotation. */
.portrait-stack {
  position: relative;
  max-width: 21rem;
  margin-inline: auto;
  isolation: isolate;
}

/* Nearest panel: a teal wash stepped down and right */
.portrait-stack::before {
  content: "";
  position: absolute;
  inset: 0.9rem -0.9rem -0.9rem 0.9rem;
  background: color-mix(in srgb, var(--teal) 22%, var(--paper));
  z-index: -1;
}

/* Furthest panel: the same wash at half strength, one step further out */
.portrait-stack::after {
  content: "";
  position: absolute;
  inset: 1.8rem -1.8rem -1.8rem 1.8rem;
  background: color-mix(in srgb, var(--teal) 8%, var(--paper));
  z-index: -2;
}

.portrait {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  background: var(--paper-deep);
  filter: grayscale(0.55) contrast(1.04);
  box-shadow: var(--shadow-card);
}

@media (max-width: 40rem) {
  .portrait-stack { max-width: 16rem; }
  .portrait-stack::before { inset: 0.7rem -0.7rem -0.7rem 0.7rem; }
  .portrait-stack::after { inset: 1.4rem -1.4rem -1.4rem 1.4rem; }
}

.portrait-figure { margin: 0; }

/* Clears the stepped panels, which extend below the photo */
.portrait-figure figcaption {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 3.25rem;
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 40rem) {
  .portrait-figure figcaption { margin-top: 2.5rem; }
}

/* --- Prompt cards --------------------------------------------------------
   Each service leads with the situation a client describes. Set as a quiet
   quotation card: serif italic, a coloured rule marking the practice area,
   and the service name as a caption. No tails, no tilt.
   ------------------------------------------------------------------------ */

.prompt-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--hue);
  border-radius: 2px;
  padding: 1.25rem 1.4rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

a.prompt-card:hover {
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
}

.prompt-card__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.4;
  margin: 0;
  max-width: none;
  color: var(--ink);
  text-wrap: pretty;
}

.prompt-card__who {
  display: block;
  font-family: var(--sans);
  font-style: normal; /* the pull-quote variant sits inside an italic blockquote */
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.85rem;
  text-wrap: balance;
}

a.prompt-card:hover .prompt-card__who { color: var(--hue-ink); }

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: 2.5rem;
}

/* A single prompt set as a pull quote, for the top of a service page */
.pull-prompt {
  border-left: 3px solid var(--hue);
  padding: 0.35rem 0 0.35rem 1.25rem;
  margin: 1.75rem 0 0;
  max-width: 34em;
  color: var(--ink);
}

.pull-prompt p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.38;
  color: var(--ink);
  margin: 0;
  max-width: none;
  text-wrap: pretty;
}

.pull-prompt .prompt-card__who { margin-top: 0.7rem; }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
  padding: 0.78rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--teal);
  color: #fdfaf4;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.15s ease;
}
.btn:hover {
  background: var(--clay);
  color: #fdfaf4;
  transform: translate(1.5px, 1.5px);
  box-shadow: 1.5px 1.5px 0 var(--ink);
}
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

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

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }

/* --- Facts strip --------------------------------------------------------- */

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.75rem 2rem;
  max-width: none;
}

.facts li {
  margin: 0;
  padding: 1.35rem 1.4rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0.9rem;
  box-shadow: var(--shadow-card);
}
.facts li:nth-child(4n+1) { --hue: var(--teal);   --hue-ink: var(--teal); }
.facts li:nth-child(4n+2) { --hue: var(--clay);   --hue-ink: var(--clay); }
.facts li:nth-child(4n+3) { --hue: var(--amber);  --hue-ink: var(--amber-ink); }
.facts li:nth-child(4n+4) { --hue: var(--indigo); --hue-ink: var(--indigo); }

.facts .fact__n {
  font-family: var(--serif);
  font-size: 2.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
  color: var(--hue-ink);
  display: block;
  margin-bottom: 0.5rem;
}

.facts .fact__t {
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.42;
  color: var(--ink-muted);
  display: block;
}

/* --- Practice areas & service cards -------------------------------------- */

.area { margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.area:last-child { margin-bottom: 0; }

.area__head {
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 2px solid var(--hue);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
}

.area__head h2 { margin-bottom: 0; color: var(--ink); }
.area__head p {
  color: var(--ink-muted);
  font-size: 1.05rem;
  margin: 0;
  max-width: 34em;
  font-family: var(--sans);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1.5rem;
}

.service {
  margin: 0;
  padding: 1.5rem 1.6rem 1.6rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  position: relative;
  overflow: hidden;
}

.service::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.4rem;
  background: var(--hue);
}

.service:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.service h3 { font-size: 1.24rem; margin: 0.35rem 0 0.7rem; }
.service h3 a { color: var(--ink); text-decoration: none; }
.service h3 a:hover { color: var(--hue-ink); }

/* The prompt inside a service card: a quiet tinted quotation, squared off */
.service__prompt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.38;
  color: var(--ink);
  background: var(--hue-soft);
  border-left: 3px solid var(--hue);
  border-radius: 0 2px 2px 0;
  padding: 0.8rem 0.95rem;
  margin: 0 0 0.95rem;
  max-width: none;
  text-wrap: pretty;
}

.service__summary {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-muted);
  margin: 0 0 1rem;
  max-width: none;
  font-family: var(--sans);
}

.service__more {
  font-family: var(--sans);
  font-size: 0.87rem;
  font-weight: 600;
  display: inline-block;
  margin-top: auto;
  text-decoration: none;
  color: var(--hue-ink);
}
.service__more:hover { text-decoration: underline; text-underline-offset: 0.16em; color: var(--hue-ink); }

/* --- Client band ---------------------------------------------------------
   Logos arrive knocked out or greyscale, so the band is dark. The row is a
   five-up grid on desktop and a snap-scrolling strip on narrow screens, which
   is also the shape a real carousel would take later.
   ------------------------------------------------------------------------ */

.client-band {
  background: var(--band);
  color: var(--band-ink);
  border-block: 2px solid var(--ink);
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.client-band .label { color: var(--band-muted); }
.client-band .label--dot::before { background: var(--amber); }

.client-row {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  max-width: none; /* opt out of the body-text measure that ul inherits */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(11rem, 1fr);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 0.5rem;
}

@media (min-width: 62rem) {
  .client-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow-x: visible;
    gap: 2rem;
  }
}

.client {
  margin: 0;
  scroll-snap-align: start;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.client__logo {
  width: 100%;
  max-width: 12rem;
  height: 3.75rem;
  object-fit: contain;
  opacity: 0.9;
  /* Real logos may arrive in colour; this keeps the row visually even */
  filter: grayscale(1);
  transition: opacity 0.16s ease;
}
.client:hover .client__logo { opacity: 1; }

.client__work {
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--band-muted);
  max-width: 18ch;
  text-wrap: balance;
}

/* The client's name is the logo's alt text, so no separate label is needed */

/* --- Prose page with a sidebar -------------------------------------------
   The reading column keeps its measure, so on wide screens the space to its
   right was simply empty. The sidebar fills it with navigation and context,
   set in Inter so it reads as apparatus rather than as more article.
   ------------------------------------------------------------------------ */

.layout-aside { display: block; }

@media (min-width: 64rem) {
  .layout-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 17.5rem;
    gap: 3.5rem;
    align-items: start;
  }
}

.aside {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-muted);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1.5rem 1.5rem 1.65rem;
  margin-top: 3rem;
  position: relative;
  overflow: hidden;
}

/* The dot-paper texture, so the column is not a stark empty panel */
.aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, var(--hue) 1.1px, transparent 1.2px);
  background-size: 15px 15px;
  opacity: 0.16;
  pointer-events: none;
}
.aside > * { position: relative; }

@media (min-width: 64rem) {
  .aside { margin-top: 0; position: sticky; top: 2rem; }
}

.aside__block + .aside__block {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}

.aside h2,
.aside__title {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.85rem;
  padding: 0;
  border: 0;
  display: block;
  line-height: 1.3;
}

.aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}
.aside li { margin: 0 0 0.85rem; }
.aside li:last-child { margin-bottom: 0; }

.aside p {
  margin: 0 0 0.8rem;
  max-width: none;
  font-size: 0.92rem;
}
.aside p:last-child { margin-bottom: 0; }

.aside a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--hue) 45%, transparent); }
.aside a:hover { color: var(--hue-ink); }

/* List links are already legible as links from their position; dropping the
   rule keeps the column quiet next to a page of running text. */
.aside li > a { text-decoration: none; }
.aside li > a:hover { text-decoration: underline; text-underline-offset: 0.16em; }

.aside__item-title {
  display: block;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}

.aside__item-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-top: 0.15rem;
}

.aside .btn {
  font-size: 0.88rem;
  padding: 0.6rem 1.1rem;
  box-shadow: 2px 2px 0 var(--ink);
  width: 100%;
  text-align: center;
}
.aside .btn:hover { box-shadow: 1px 1px 0 var(--ink); }

/* --- Prose page ---------------------------------------------------------- */

.page-head {
  padding-block: clamp(2.75rem, 6vw, 4.5rem) 0;
  position: relative;
}
.page-head h1 { max-width: 20ch; }

.page-head--tinted {
  background:
    radial-gradient(46rem 24rem at 85% -20%, var(--hue-soft), transparent 65%);
  padding-bottom: 2.5rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 0;
}

.prose { padding-block: 2.5rem clamp(3rem, 7vw, 5rem); }
.prose h2 { margin-top: 2.75rem; }
.prose h3 { margin-top: 2rem; }
.prose > :first-child { margin-top: 0; }

/* A colored bar beside prose h2s, tying pages to the practice-area colour. The bar
   hangs into the margin on wider screens so the heading text stays flush with
   the body text below it. */
.prose h2 {
  padding-left: 0.85rem;
  border-left: 4px solid var(--hue);
  line-height: 1.2;
}

@media (min-width: 48rem) {
  .prose h2 { margin-left: -1.1rem; }
}

/* --- Article list -------------------------------------------------------- */

.article-list { list-style: none; padding: 0; margin: 0; max-width: 46rem; }

.article-list li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.article-list li:first-child { padding-top: 0; }

.article-list h3 { margin-bottom: 0.35rem; font-size: 1.4rem; }
.article-list h3 a { color: var(--ink); text-decoration: none; }
.article-list h3 a:hover { color: var(--clay); }

.article-list p {
  color: var(--ink-muted);
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0.4rem 0 0;
  max-width: var(--measure);
}

.empty-note {
  border: 2px solid var(--ink);
  border-radius: 1rem;
  padding: 1.7rem 1.85rem;
  background: var(--amber-soft);
  max-width: var(--measure);
  box-shadow: var(--shadow-card);
}
.empty-note p:last-child { margin-bottom: 0; }

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

.form { max-width: 34rem; margin-top: 2rem; }
.field { margin-bottom: 1.35rem; }

.field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0.55rem;
  padding: 0.68rem 0.8rem;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 4px var(--clay-soft);
}

.field textarea { min-height: 9rem; resize: vertical; }

.field__hint {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 0.35rem;
}

.hp { position: absolute; left: -9999px; }

/* --- Callout ------------------------------------------------------------- */

.callout {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 1.15rem;
  padding: clamp(1.75rem, 4vw, 2.6rem);
  max-width: 46rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.callout::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0.5rem;
  background: var(--hue);
}
.callout h2 {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
  padding-left: 0;
  border-left: 0;
}
.callout p { margin-bottom: 0; color: var(--ink-muted); }

/* Big closing CTA band */
.cta-band {
  background: var(--teal);
  color: #fdfaf4;
  border-block: 2px solid var(--ink);
}
.cta-band h2 { color: #fdfaf4; padding-left: 0; border-left: 0; max-width: 18ch; }
.cta-band p { color: rgba(253, 250, 244, 0.86); font-size: 1.15rem; max-width: 34em; }
.cta-band a { color: #fdfaf4; text-decoration-color: rgba(253, 250, 244, 0.5); }
.cta-band a:hover { color: var(--amber); }
.cta-band .btn { background: #fdfaf4; color: var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,0.45); }
.cta-band .btn:hover { background: var(--amber); color: var(--ink); }

@media (prefers-color-scheme: dark) {
  .cta-band { background: var(--teal-soft); }
  .cta-band h2, .cta-band p, .cta-band a { color: var(--ink); }
  .cta-band p { color: var(--ink-muted); }
  .cta-band .btn { background: var(--teal); color: #15161a; }
}

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

.site-footer {
  border-top: 2px solid var(--ink);
  padding-block: 3rem 3.5rem;
  background: var(--paper-sunk);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.25rem 3rem;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer .meta { max-width: 30ch; }

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.93rem;
  font-weight: 500;
}
.footer-nav a { color: var(--ink-muted); text-decoration: none; }
.footer-nav a:hover { color: var(--clay); }

.colophon {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 2.5rem;
  line-height: 1.5;
  max-width: 52ch;
}

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

.stack > * + * { margin-top: 1.05em; }
.mt-0 { margin-top: 0; }
.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;
}

@media print {
  .site-header, .site-footer, .btn-row, .cta-band { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .service, .facts li, .callout, .prompt-card { box-shadow: none; border: 1px solid #999; }
}