/* ===================================================================
   altr - editorial design layer
   -------------------------------------------------------------------
   Loaded after styles.css. Keeps every production token (paper, bone,
   copper, Clash Grotesk, Lora) and restyles the shared components that
   all 50 pages already use, so the whole site moves at once.

   Three ideas carry the look:
   1. Archival engravings, duotoned to paper + ink, as editorial plates.
   2. The keycap from the brand guide, as a real press interaction.
   3. Mono labels against large display type, with a lot of quiet.
   =================================================================== */

:root {
  --veil-rgb: 247, 243, 236;
  --ink-rgb: 26, 23, 20;
  --rule: rgba(var(--ink-rgb), 0.13);
  --rule-ink: rgba(var(--ink-rgb), 0.28);

  /* styles.css carries a third hairline at 0.11 and uses it on 70 borders.
     The system allows one weight, plus a heavier one to open a block, so
     --line is aliased rather than left as a second opinion. */
  --line: var(--rule);
  --plate-ground: #EDE4D6;
  --gutter: clamp(20px, 5vw, 48px);
}

/* -- ground ------------------------------------------------------- */
/* the old ambient blobs read as SaaS gradient; a flat warm sheet with
   one hairline baseline is calmer and lets the plates carry the color */
body {
  background: var(--paper);
  letter-spacing: -0.016em;
}

body::after {
  content: none;
}

body::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), transparent 26%);
}

/* -- type --------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-weight: 500;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

h1,
.page-hero h1 {
  font-size: clamp(2.35rem, 4.5vw, 4rem);
  line-height: 1.0;
  /* display type set across the full 1180px column reads as a banner,
   not a sentence - two or three shortish lines hold together better */
  max-width: min(21ch, 100%);
}

h2,
.section-top h2 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.03;
  max-width: min(24ch, 100%);
}

/* mono labels: the brand guide asks for these on eyebrows, metadata,
   process steps and captions */
.kicker,
.section-kicker,
.eyebrow,
.work-tag,
.case-meta,
.content-label,
.service-badge,
.gap-grid span,
.step-num,
.plate-caption {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.kicker,
.section-kicker,
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 20px;
}

/* labels stand on their own - no glyph in front of them */
.kicker::before,
.section-kicker::before,
.eyebrow::before {
  content: none;
}

.statement {
  max-width: min(22ch, 100%);
  font-family: var(--sans);
  font-size: clamp(1.6rem, 3.4vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
}

/* two-tone headline: ink for the claim, dim for the rest, copper for
   the one word the sentence turns on */
.two-tone {
  color: var(--bone-dim);
}

.two-tone b {
  font-weight: inherit;
  color: var(--bone);
}

.two-tone em {
  font-style: normal;
  color: var(--copper);
}

/* Lora italic is the one soft voice on the page - asides and pull
   quotes only, never headlines */
.aside-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--bone-soft);
  max-width: min(38ch, 100%);
}

/* -- rhythm ------------------------------------------------------- */
.band {
  background: transparent;
  border-top: 1px solid var(--rule);
  border-bottom: 0;
}

.band-inner,
.home-section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--section-air) var(--gutter);
}

.section-top {
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}

/* -- keycap press ------------------------------------------------- */
/* brand guide: motion should reference pressing a key - slight downward
   movement, shadow compression, quick return */
.button {
  position: relative;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out),
  background 160ms var(--ease-out), color 160ms var(--ease-out);
}

.button.primary {
  background: var(--bone);
  color: var(--paper);
  border: 1px solid var(--bone);
  box-shadow: 0 3px 0 rgba(var(--ink-rgb), 0.28);
}

.button.secondary {
  background: var(--paper-raised);
  color: var(--bone);
  border: 1px solid var(--line-control);
  box-shadow: 0 3px 0 rgba(var(--ink-rgb), 0.12);
}

.button:hover {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(var(--ink-rgb), 0.24);
}

.button:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(var(--ink-rgb), 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .button:hover,
  .button:active {
    transform: none;
  }

}

/* -- cards -------------------------------------------------------- */
.gap-grid article,
.work-card,
.step,
.service-arm,
.engagement-item,
.text-block {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rule-ink);
  border-radius: 0;
  padding: 24px 0 0;
  box-shadow: none;
  transition: border-color 200ms var(--ease-out);
}

.work-card {
  display: block;
  text-decoration: none;
  padding-bottom: 24px;
}

.work-card:hover,
.gap-grid article:hover,
.service-arm:hover {
  border-top-color: var(--copper);
}

.gap-grid article h3,
.work-card h3,
.step h3,
.service-arm h3 {
  margin: 14px 0 10px;
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.gap-grid p,
.work-card p,
.step p,
.service-arm p {
  font-size: 15.5px;
  line-height: 1.64;
  color: var(--bone-soft);
  max-width: min(42ch, 100%);
}

/* panels that hold prose need the same room as the cells */
.content-split,
.intake-panel,
.impact-detail,
.featured-work-card,
.trust-panel,
.founder-card,
.workshop-topic-card,
.real-estate-card,
.learning-feature-card,
.learning-brief,
/* these two kept their own padding, 48px and 32px, which made three card
   paddings where the system allows one */
.content-panel,
.article-callout {
  padding: clamp(26px, 2.6vw, 40px) clamp(24px, 2.4vw, 38px);
}

.work-more {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
}

.work-card:hover .work-more {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.step-num {
  color: var(--copper);
}

/* -- connector ---------------------------------------------------- */
/* thin rule that terminates in an arrowhead, used to tie a section to
   its call to action */
.connector {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(28px, 4vw, 44px) 0 0;
}

.connector::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule-ink);
}

.connector::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--rule-ink);
  border-right: 1px solid var(--rule-ink);
  transform: rotate(45deg) translateX(-3px);
}

@keyframes ticker-slide {
  to {
    transform: translateX(-50%);
  }
}

/* -- nav ---------------------------------------------------------- */
.nav {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
}

.nav-links a {
  font-size: 15px;
  letter-spacing: -0.01em;
}

.nav-links .nav-cta {
  border-radius: var(--radius);
  box-shadow: 0 3px 0 rgba(var(--ink-rgb), 0.22);
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}

.nav-links .nav-cta:hover {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(var(--ink-rgb), 0.2);
}

/* -- closer ------------------------------------------------------- */
.closer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--section-air) var(--gutter);
  border-top: 1px solid var(--rule);
  text-align: left;
}

.closer h2 {
  max-width: min(16ch, 100%);
  margin-bottom: 16px;
}

.closer p {
  max-width: min(46ch, 100%);
  margin-bottom: 28px;
}

/* -- footer ------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--rule-ink);
  background: var(--paper-sunk);
}

.footer-links a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.footer-links a:hover {
  color: var(--copper);
}

/* -- start at the top --------------------------------------------- */
/* .site-shell already reserves the nav height, and page heroes were
   stacking another ~130px on top of it, so every page opened with the
   headline sitting near the middle of the viewport */
.page-hero,
.lede-hero,
.learning-hero,
.learning-hero-compact {
  padding-top: clamp(20px, 2.4vw, 38px);
  padding-bottom: clamp(34px, 4.4vw, 62px);
}

main > .band:first-child > .band-inner,
main > section:first-of-type > .band-inner {
  padding-top: clamp(22px, 2.6vw, 40px);
}

/* the two one-off heroes carry their own padding and their own gutter,
   which left them both low on the page and out of line with every
   section under them */
.strategy-hero,
.lead-magnet-hero {
  align-content: center;
  min-height: 0;
  padding: clamp(24px, 3vw, 44px) var(--gutter) clamp(44px, 5.5vw, 76px);
}

.strategy-hero-copy {
  align-self: center;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
}

/* the remaining page-specific first sections each carried their own
   top padding on top of the shell's nav offset */
.about-simple,
.impact-hero-topline,
.legal,
.guide-thank-you,
.lead-magnet-copy {
  padding-top: clamp(20px, 2.4vw, 38px);
}

.about-page-simple {
  min-height: 0;
}

/* the globe is taller than the copy beside it; centring left the
   headline floating in the middle of the band */
.about-intro-grid {
  align-items: start;
}

/* an explicit px cap here beat the global measure rule */
.about-beliefs h2 {
  max-width: min(26ch, 100%);
}

/* -- full-bleed hero plate ---------------------------------------- */
/* one engraving, running the full width behind the headline, with a
   paper scrim carrying it from opaque on the copy side to open on the
   image side. no framed thumbnails - the picture is the ground */
.hero-plate {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(74vh, 660px);
  overflow: hidden;
}


.hero-plate-inner {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 68px) var(--gutter);
}

.hero-plate-inner h1 {
  max-width: min(17ch, 100%);
  margin: 0 0 22px;
}

/* image attribution lives at the very bottom of the page, under the
   footer links, not over the artwork */
.plate-credit-foot {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 28px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
}

@media (max-width: 900px) {
  .hero-plate {
    min-height: auto;
    flex-direction: column;
    align-items: stretch;
  }

/* on narrow screens the copy covers the whole frame, so the scrim
   has to work top-to-bottom instead of left-to-right */
.hero-plate-bg::after {
  background:
  linear-gradient(180deg,
  rgba(var(--veil-rgb), 0.95) 0%,
  rgba(var(--veil-rgb), 0.9) 62%,
  var(--paper) 100%);
}

}

/* -- form fields -------------------------------------------------- */
/* the stock field gradient reads cool grey against warm paper */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  background: var(--paper-raised);
  border: 1px solid var(--line-control);
  border-radius: 8px;
  color: var(--bone);
  font-family: var(--text);
}

input::placeholder,
textarea::placeholder {
  color: var(--bone-dim);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--copper);
}

/* -- page heroes -------------------------------------------------- */
/* .page-lede sets margin-bottom: 0, so the actions have to carry the
   gap themselves or they sit on the last line of the lede */
.page-hero h1 {
  margin-bottom: 22px;
}

.page-lede {
  max-width: min(58ch, 100%);
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.58;
}

.page-hero-actions,
.hero-actions {
  margin-top: clamp(26px, 3.4vw, 38px);
}

.hero-lede {
  max-width: min(46ch, 100%);
  margin: 0 0 32px;
  font-size: clamp(1.02rem, 1.35vw, 1.16rem);
  line-height: 1.58;
  color: var(--bone-soft);
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* the plates are the artwork - let them keep their own proportions
   rather than cropping the scene out of them */
.hero-plate img,
.process-plate img {
  aspect-ratio: auto;
  object-fit: contain;
}

.steps-stacked {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(28px, 4vw, 44px);
}

.steps-stacked .step {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}

.steps-stacked .step:first-child {
  border-top-color: var(--rule-ink);
}

.steps-stacked .step h3 {
  margin: 8px 0 8px;
}

.steps-stacked .step p {
  max-width: min(52ch, 100%);
}

.why-split {
  display: grid;
  grid-template-columns: 1.32fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}

.why-split .aside-note a {
  color: var(--copper);
  text-underline-offset: 3px;
}

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

.home-industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* -- responsive --------------------------------------------------- */
@media (max-width: 980px) {
  .hero-split,
  .process-split,
  .why-split {
    grid-template-columns: 1fr;
  }

/* 460px was chosen for phones, but this block starts at 980px, so on a
   768px tablet the plate stopped short and left a third of the row empty
   with the wash image cut off mid-page. Once the layout is one column the
   plate should fill it. */
.hero-plate {
  max-width: 100%;
}

.process-plate {
  position: static;
  max-width: 460px;
}

.gap-grid,
.home-industry-grid {
  grid-template-columns: 1fr;
}
}

@media (max-width: 860px) {
  .statement {
    max-width: 100%;
  }

}

/* ===================================================================
   Home: giving each section its own shape
   -------------------------------------------------------------------
   Four sections in a row all built from hairline-topped cards read as
   one undifferentiated block. Each one now gets a distinct treatment
   so the page can be scanned: outcomes as a light row, the process as
   a sunk numbered block, industries as real bordered cards, and the
   argument as a full-bleed band over the second engraving.
   =================================================================== */

/* -- 1. outcomes: light, wide, no card furniture ------------------- */
.home-main #who-this-is-for .gap-grid {
  gap: clamp(24px, 3.4vw, 52px);
}

.home-main #who-this-is-for .gap-grid article {
  border-top: 1px solid var(--rule-ink);
  padding-top: 20px;
}

.home-main #who-this-is-for .gap-grid h3 {
  font-size: clamp(1.15rem, 1.6vw, 1.38rem);
}

/* -- 2. process: sunk ground, numerals carry it -------------------- */
.home-how {
  background: var(--paper-sunk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.home-how .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  margin-top: clamp(30px, 4vw, 48px);
}

.home-how .step {
  position: relative;
  border-top: 1px solid var(--rule-ink);
  padding-top: 26px;
}

/* the numeral is the landmark, not a label */
.home-how .step-num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: none;
  color: var(--copper);
  opacity: 0.42;
}

.home-how .step h3 {
  margin: 0 0 10px;
}

/* -- 3. industries ------------------------------------------------ */
/* superseded by the cell grid below: shared borders, no lift */
.home-industry-grid .work-card h3 {
  margin: 12px 0 10px;
}

.home-industry-grid .work-more::after {
  content: " \2192";
}

/* -- 4. the argument: full-bleed over the second engraving --------- */
.home-why {
  position: relative;
  isolation: isolate;
  border-top: 0;
  overflow: hidden;
}

.home-why-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/plates/bg-shop.webp") center 34% / cover no-repeat;
}

.home-why-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
  linear-gradient(90deg,
  var(--paper) 0%,
  rgba(var(--veil-rgb), 0.96) 38%,
  rgba(var(--veil-rgb), 0.72) 62%,
  rgba(var(--veil-rgb), 0.6) 100%),
  linear-gradient(180deg,
  var(--paper) 0%,
  rgba(var(--veil-rgb), 0.55) 26%,
  rgba(var(--veil-rgb), 0.55) 72%,
  var(--paper) 100%);
}

.home-why .why-split {
  align-items: center;
}

.home-why .statement {
  max-width: min(20ch, 100%);
}

/* -- 5. closer: full-bleed dark finale ---------------------------- */
/* the ink ground is the site's existing close, and it is the right
   idea - it was the centred text inside a floating rounded card that
   made it look like a stray banner. Full width, left aligned, copy on
   one side and the call on the other. */
.closer {
  max-width: none;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rule-ink);
  border-radius: 0;
  text-align: left;
  background: var(--paper-sunk);
  padding: clamp(56px, 6.6vw, 96px) var(--gutter);
  /* one centred column holds every child, so the pages that wrap their
   closer and the pages that do not both land in the page grid */
  display: grid;
  grid-template-columns: minmax(0, var(--page-max));
  justify-content: center;
}

.closer-inner {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}

/* a bare button as a grid child stretches the whole column */
.closer > .button,
.closer .closer-actions {
  justify-self: start;
}

/* inside main.page the column is already constrained, so the band does
   not need the page gutter on top of it */
.page > .closer {
  padding-left: clamp(22px, 2.6vw, 40px);
  padding-right: clamp(22px, 2.6vw, 40px);
}

.page > .closer h2 {
  margin-bottom: 16px;
}

.page > .closer p {
  margin-bottom: 28px;
}

.home-main > .closer .kicker {
  color: rgba(var(--veil-rgb), 0.62);
}

.closer h2 {
  max-width: min(14ch, 100%);
  margin: 0 0 16px;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.0;
}

.closer p {
  max-width: min(46ch, 100%);
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.14rem);
  line-height: 1.58;
}

.closer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* the outline button has to invert on the ink ground */
.home-main > .closer .button.secondary {
  color: var(--paper);
  background: transparent;
  border-color: rgba(var(--veil-rgb), 0.42);
  box-shadow: 0 3px 0 rgba(var(--veil-rgb), 0.16);
}

.home-main > .closer .button.secondary:hover {
  border-color: var(--paper);
  box-shadow: 0 2px 0 rgba(var(--veil-rgb), 0.16);
}

.home-main > .closer .closer-note {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--veil-rgb), 0.5);
}

@media (max-width: 860px) {
  .home-how .steps,
  .home-main #who-this-is-for .gap-grid,
  .closer-inner {
    grid-template-columns: 1fr;
  }

.home-why-bg::after {
  background: linear-gradient(180deg,
  rgba(var(--veil-rgb), 0.95) 0%,
  rgba(var(--veil-rgb), 0.9) 60%,
  var(--paper) 100%);
}

}

/* ===================================================================
   Sitewide system, part 1: strip the decoration
   -------------------------------------------------------------------
   styles.css carries 25 gradients and 40 box-shadows. Diagonal copper
   gradients over translucent fills, with a radius and a drop shadow,
   are the house style of generic SaaS - the opposite of raw. Flat
   ground, hairline rules, square corners; contrast comes from type and
   structure, not from simulated light.
   =================================================================== */


/* no panel keeps a gradient fill or a drop shadow */
.content-split,
.intake-panel,
.impact-detail,
.featured-work-card,
.trust-panel,
.founder-card,
.workshop-topic-card,
.real-estate-card,
.impact-card,
.tutorial-card,
.learning-feature-card,
.learning-brief {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
}

/* hover states move the border, not a shadow */
.impact-card:hover,
.tutorial-card:hover,
.real-estate-card:hover,
.workshop-topic-card:hover,
.featured-work-card:hover,
.learning-feature-card:hover {
  border-color: var(--line-control);
  box-shadow: none;
  transform: none;
}

/* the nav pill is the one place a soft shadow was doing real work
   (lifting a floating bar off the page); everything else loses it */
.cta-section,
.conversation-section,
.article-related,
.impact-primary-section,
.strategy-outputs,
.guide-highlights {
  box-shadow: none;
}

/* ===================================================================
   Sitewide system, part 2: one vertical rhythm
   -------------------------------------------------------------------
   Six section wrappers each set their own padding, so the rhythm
   changed from page to page. They all run on --section-air now.
   =================================================================== */

.product-page-section,
.article-section,
.strategy-section,
.tutorials-section,
.real-estate-section,
.workshop-topics-section,
.learning-index-section,
.impact-primary-section,
.conversation-section,
.guide-highlights,
.guide-positioning,
.about-beliefs,
.about-who,
.about-mission {
  padding-top: var(--section-air);
  padding-bottom: 0;
}

/* a rule between sections, not a gap - the grid stays visible */
.product-page-section + .product-page-section,
.article-section + .article-section {
  border-top: 1px solid var(--rule);
}

/* ===================================================================
   Sitewide system, part 3: the spine and the archetypes
   -------------------------------------------------------------------
   From design-language/RESEARCH.md. The references that hold together
   across many pages do it with fewer section types, one hairline
   weight, shared borders instead of gaps, a closed mono label system,
   and a number on everything.
   =================================================================== */

:root {
  /* one radius, and it belongs to the keycap alone */
  --radius: 2px;

  /* three section steps, nothing between them */
  --air-s: clamp(40px, 5vw, 64px);
  --air-m: clamp(64px, 8vw, 112px);
  --air-l: clamp(96px, 11vw, 176px);
  --section-air: var(--air-m);
}

/* -- A. Plate hero: the shop floor behind the type ---------------- */
/* the workshop scene runs full width behind the headline, blurred back
   and washed down to tone - the same treatment as the wash band lower
   on the page, so the hero and the closing section rhyme */
.hero-plate {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(62vh, 540px);
  overflow: hidden;
}

.hero-plate-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/plates/wash-workshop.webp") 68% center / cover no-repeat;
}

.hero-plate-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
  linear-gradient(90deg,
  var(--paper) 0%,
  rgba(var(--veil-rgb), 0.94) 32%,
  rgba(var(--veil-rgb), 0.62) 54%,
  rgba(var(--veil-rgb), 0.34) 100%),
  linear-gradient(180deg,
  var(--paper) 0%,
  rgba(var(--veil-rgb), 0.24) 22%,
  rgba(var(--veil-rgb), 0.24) 72%,
  var(--paper) 100%);
}

.hero-plate-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: clamp(44px, 5.5vw, 76px) var(--gutter);
}

.hero-plate-panel {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
}

.hero-plate-panel h1 {
  margin: 0 0 20px;
  max-width: min(17ch, 100%);
}

.hero-plate-panel .hero-lede {
  max-width: min(44ch, 100%);
  margin-bottom: 28px;
}

/* the home process steps are a ledger, not three cards */
.home-how .steps {
  display: block;
  margin-top: clamp(28px, 3.6vw, 44px);
  border-top: 1px solid var(--rule-ink);
}

.home-how .step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 0;
  padding: 24px 0;
  border-top: 0;
  border-bottom: 1px solid var(--rule);
}

.home-how .step-num {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.home-how .step h3,
.home-how .step p {
  grid-column: 2;
}

.home-how .step:last-child {
  border-bottom: 0;
}

.home-how .step-num {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--copper);
  opacity: 1;
}

.home-how .step h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.home-how .step p {
  max-width: min(60ch, 100%);
}

/* -- E. Cell grid: shared borders, no gaps, no lift --------------- */
.gap-grid,
.home-industry-grid,
.engagement-grid,
.engagement-grid-2up,
.service-arm-grid,
.text-block-grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule-ink);
  border-left: 1px solid var(--rule);
}

.gap-grid > *,
.home-industry-grid > *,
.engagement-grid > *,
.engagement-grid-2up > *,
.service-arm-grid > *,
.text-block-grid > * {
  margin: 0;
  padding: clamp(26px, 2.6vw, 40px) clamp(24px, 2.4vw, 38px);
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.home-industry-grid .work-card:hover,
.gap-grid article:hover,
.engagement-grid > *:hover {
  background: var(--paper-sunk);
  border-color: var(--rule);
  transform: none;
  box-shadow: none;
}

.home-industry-grid .work-card:hover h3 {
  color: var(--copper);
}

/* -- H. Press band: the closer, already built, retuned ------------ */
.closer {
  padding-top: var(--air-m);
  padding-bottom: var(--air-m);
}

/* -- motion: nothing over 150ms except the key press -------------- */
.motion-ready .reveal-on-scroll,
.reveal-on-scroll,
[data-strategy-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

@media (max-width: 900px) {
  .hero-plate {
    min-height: 0;
  }

.hero-plate-bg::after {
  background: linear-gradient(180deg,
  rgba(var(--veil-rgb), 0.94) 0%,
  rgba(var(--veil-rgb), 0.9) 62%,
  var(--paper) 100%);
}

.ledger-row,
.home-how .step {
  grid-template-columns: 1fr;
  gap: 8px;
}

.gap-grid,
.home-industry-grid,
.engagement-grid,
.engagement-grid-2up,
.service-arm-grid,
.text-block-grid {
  grid-template-columns: 1fr !important;
}

}

/* ===================================================================
   The wash band
   -------------------------------------------------------------------
   An engraving sunk so far back it reads as tone rather than picture.
   One per page, on the section that carries the argument, so a page
   has a single moment where the material shows through.
   =================================================================== */

.wash,
.home-why,
.cta-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.wash::before,
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/plates/bg-shop.webp") center 38% / cover no-repeat;
}

.wash::after,
.cta-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
  linear-gradient(90deg,
  var(--paper) 0%,
  rgba(var(--veil-rgb), 0.96) 40%,
  rgba(var(--veil-rgb), 0.74) 66%,
  rgba(var(--veil-rgb), 0.62) 100%),
  linear-gradient(180deg,
  var(--paper) 0%,
  rgba(var(--veil-rgb), 0.58) 28%,
  rgba(var(--veil-rgb), 0.58) 70%,
  var(--paper) 100%);
}

/* the workshop plate on alternate page families, so the wash is not
   the same picture on every page of the site */
.home-why .home-why-bg {
  background-image: url("assets/plates/wash-brick.webp");
  background-position: center 30%;
}

.cta-section {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  /* a band holding one line and a button does not need the air a full
     section gets: measured at 363px tall for 173 characters, 62% padding */
  padding-top: var(--air-s);
  padding-bottom: var(--air-s);
}

@media (max-width: 900px) {
  .wash::after,
  .cta-section::after {
    background: linear-gradient(180deg,
    rgba(var(--veil-rgb), 0.95) 0%,
    rgba(var(--veil-rgb), 0.9) 60%,
    var(--paper) 100%);
  }

}

/* ===================================================================
   House rules, enforced rather than enumerated
   -------------------------------------------------------------------
   SYSTEM.md says one shadow and one radius. Enumerating components was
   never going to hold: styles.css still carried 19 soft drop shadows
   and 21 different radius values on components this layer had not
   named.

   These use !important because a universal selector has specificity
   zero, so `* { box-shadow: none }` loses to `.nav { box-shadow: ... }`
   no matter which file loads last. Stating the law needs the same
   weight as the exceptions to it.

   Soft drop shadows are the clearest "generated template" tell on a
   page. Printed matter has edges, not glows.
   =================================================================== */

*,
*::before,
*::after {
  box-shadow: none !important;
  border-radius: 0 !important;
  animation: none !important;
}

/* the keycap press is the one shadow, because it is the brand doing
   something real: the button travels and the shadow compresses */
.button,
.nav-links .nav-cta,
.brand-mark,
input,
textarea,
select {
  border-radius: var(--radius) !important;
}

.button.primary,
.nav-links .nav-cta {
  box-shadow: 0 3px 0 rgba(var(--ink-rgb), 0.28) !important;
}

.button.secondary {
  box-shadow: 0 3px 0 rgba(var(--ink-rgb), 0.12) !important;
}

.button:hover,
.nav-links .nav-cta:hover {
  box-shadow: 0 2px 0 rgba(var(--ink-rgb), 0.24) !important;
}

.button:active {
  box-shadow: 0 0 0 rgba(var(--ink-rgb), 0.2) !important;
}

.home-main > .closer .button.secondary {
  box-shadow: 0 3px 0 rgba(var(--veil-rgb), 0.16) !important;
}

/* A focus ring is not decoration, and it has to clear 3:1 against the
   ground it sits on (WCAG 2.2 SC 1.4.11). The old ring hardcoded the
   light-theme copper at 0.22 alpha, which composites to 1.22:1 on ink
   and is invisible. Solid accent, which measures 5.08:1. */
:focus-visible {
  box-shadow: 0 0 0 3px var(--copper) !important;
  outline-color: var(--copper) !important;
}

/* the current page is marked with a rule, not a glow */
.nav .nav-dropdown-trigger[aria-current="page"],
.nav-links a:not(.nav-cta)[aria-current="page"] {
  box-shadow: inset 0 -1px 0 var(--bone) !important;
}

/* -- no ambient anything ----------------------------------------- */
body::after,
body::before {
  content: none !important;
}

/* -- nothing transitions for longer than the key press ------------ */
*:not(.button):not(.nav-cta) {
  transition-duration: 150ms;
}

/* -- touch targets ------------------------------------------------ */
/* Measured at 375px: footer links rendered 18px tall, the work-index
   filter toggle 28px, and the Engineering page's booking link 22px.
   Anything a thumb has to hit gets 44px, which is the smallest target
   both Apple and Google publish. Links inside prose are left alone --
   they are read, not aimed at. */
@media (max-width: 680px) {
  .footer-links a,
  .conversation-link,
  .tutorials-filter-group-toggle,
  .tutorials-view-btn,
  .impact-view-btn {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* the footer is a wrapping row, so the targets are widened in place:
     the padding grows the hit box, the negative margin keeps the gap
     looking the same */
  .footer-links a {
    padding: 0 10px;
    margin: 0 -10px;
  }

  .conversation-link {
    justify-content: center;
    min-width: 44px;
  }

  /* The open menu sat on rgba(255,255,255,0.98). Two percent is enough to
     read a near-black button with white text straight through it, so the
     hero showed behind the menu. A menu is opaque. */
  .nav-links {
    background: #fff;
  }

  /* 10px is below what a phone renders legibly */
  .step-num,
  .home-how .step-num {
    font-size: 11px;
  }
}

/* -- images keep their own shape ---------------------------------- */
/* An <img> width/height attribute is a presentational hint, so any rule
   that sets width but not height leaves the attribute height standing:
   the guide cover stretched to 327x1590 from a 1224x1584 original, and
   two case-study images sat letterboxed in a 420px box. A bare element
   selector loses to every class rule, so the three images deliberately
   cropped with object-fit: cover keep their height: 100%. */
img {
  height: auto;
}

/* The long two-clause headline is clamped to keep it on two lines on a wide
   screen, but the 17px floor meant that at 375px the h1 rendered at 20px
   while the h2s below it were 30px: the most important line on the page was
   the smallest. The floor now sits above the h2 floor. The desktop cap is
   unchanged, so the two-line headline is unaffected. */
.page-hero h1.hero-title-long {
  font-size: clamp(36px, 5.4vw, 58px);
}

/* h2 carries margin-bottom: 0 so section headers can control their own
   spacing, but where an h2 is followed directly by body copy that left a
   51px headline sitting 0px above its paragraph, in every closing band.
   The body rhythm is 12px under a 20px h3; a headline this size needs
   more. Class rules still win, so deliberate spacing is untouched. */
h2 + p {
  margin-top: 16px;
}

/* -- one accent, and no diagonal wash ------------------------------ */
/* The callout carried a 2px sage rule on 17 pages, which is a second
   accent on a system that declares one. The intake panels and the
   strategy hero still painted a 135deg translucent copper gradient,
   the pattern the slop pass was meant to remove; the other gradients
   in styles.css are dead, overridden here already. */
.article-callout {
  border-left-color: var(--copper);
  background-image: none;
}

.intake-note,
.intake-form,
.strategy-hero {
  background-image: none;
}

.intake-note,
.intake-form {
  background-color: var(--paper-sunk);
}

/* -- the strategy hero ------------------------------------------- */
/* It ran a canvas of pale rounded keycaps drifting behind the headline:
   ambient motion with no referent, in JavaScript where the house rule
   against animation cannot reach it, drawing the one radius the system
   reserves for buttons. The Appian Way replaces it. A route already worn
   into the ground is what the page is about. */
.strategy-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/plates/scene-passage.webp") 34% center / cover no-repeat;
}

.strategy-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* the etching is light and its left third is open sky, so the veil can
     come off much earlier than the workshop hero needs */
  background:
  linear-gradient(90deg,
  var(--paper) 0%,
  rgba(var(--veil-rgb), 0.96) 26%,
  rgba(var(--veil-rgb), 0.8) 42%,
  rgba(var(--veil-rgb), 0.4) 62%,
  rgba(var(--veil-rgb), 0.18) 100%),
  linear-gradient(180deg,
  rgba(var(--veil-rgb), 0.6) 0%,
  rgba(var(--veil-rgb), 0.12) 20%,
  rgba(var(--veil-rgb), 0.12) 72%,
  var(--paper) 100%);
}

/* -- index grid ---------------------------------------------------- */
/* Three columns, shared hairlines, no gap: the cell grid the system
   already specifies for a set. Each cell carries the scene for its
   category as its mark, and the whole cell is the link. */
.index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-ink);
  border-left: 1px solid var(--rule);
}

.index-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2vw, 28px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.cell-mark {
  display: block;
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
  background-color: var(--plate-ground);
  background-size: cover;
  background-repeat: no-repeat;
  border: 1px solid var(--rule);
}

.index-cell h2 {
  margin: 6px 0 0;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.2;
}

.index-cell h2 a {
  color: var(--bone);
  text-decoration: none;
}

.index-cell:hover h2 a {
  color: var(--copper);
}

.index-cell h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.index-cell p {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--bone-soft);
}

.index-cell .ledger-date {
  margin-top: auto;
  padding-top: 14px;
}

.ledger-meta,
.ledger-date {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* a scene per category, cropped to the mark */
.mark-real-estate { background-image: url("assets/plates/scene-colosseum.webp"); background-position: 50% 40%; }
.mark-nonprofit   { background-image: url("assets/plates/scene-piazza.webp");    background-position: 50% 55%; }
.mark-ecommerce   { background-image: url("assets/plates/scene-port.webp");      background-position: 62% 60%; }
.mark-technology  { background-image: url("assets/plates/scene-bridge.webp");    background-position: 46% 50%; }
.mark-mcp         { background-image: url("assets/plates/scene-bridge.webp");    background-position: 78% 62%; }
.mark-agents      { background-image: url("assets/plates/scene-forum.webp");     background-position: 40% 58%; }
.mark-strategy    { background-image: url("assets/plates/scene-road.webp");      background-position: 30% 62%; }
.mark-rag         { background-image: url("assets/plates/scene-basilica.webp");  background-position: 40% 55%; }
.mark-skills      { background-image: url("assets/plates/scene-forum.webp");     background-position: 72% 48%; }

@media (max-width: 900px) {
  .index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

/* One column on a phone, but stacking a 16:9 plate over every card makes
   the blog index nine screens long. The cell becomes a row instead: the
   plate as a square mark on the left, the text beside it. */
@media (max-width: 620px) {
  .index-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .index-cell {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }

  .cell-mark {
    aspect-ratio: 1;
    margin-bottom: 0;
    grid-row: 1 / span 99;
    align-self: start;
  }

  .index-cell .ledger-meta,
  .index-cell h2,
  .index-cell p,
  .index-cell .ledger-date {
    grid-column: 2;
  }

  .index-cell .ledger-date {
    margin-top: 10px;
    padding-top: 0;
  }
}

/* the services menu was wrapping "Commercial Real Estate" onto two lines */
.nav .nav-dropdown-panel {
  min-width: 232px;
}

/* -- a scene behind every hero ------------------------------------ */
/* The plates are toned deep ink through copper to paper, so they carry
   colour and hold their line rather than sitting back as a grey wash.
   The veil clears the left, where the type sits, and lets the drawing
   run at full strength across the rest. */
.page-hero.hero-scene,
.article-hero.hero-scene,
.about-simple.hero-scene,
.lead-magnet-hero.hero-scene,
.guide-thank-you.hero-scene {
  position: relative;
  isolation: isolate;
}

.hero-scene::before,
.hero-scene::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  transform: translateX(-50%);
}

.hero-scene::before {
  content: "";
  position: absolute;
  z-index: -2;
  background-position: 62% 45%;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-scene::after {
  content: "";
  position: absolute;
  z-index: -1;
  background:
  linear-gradient(90deg,
  var(--paper) 0%,
  rgba(var(--veil-rgb), 0.97) 30%,
  rgba(var(--veil-rgb), 0.78) 46%,
  rgba(var(--veil-rgb), 0.34) 66%,
  rgba(var(--veil-rgb), 0.14) 100%),
  linear-gradient(180deg,
  rgba(var(--veil-rgb), 0.5) 0%,
  rgba(var(--veil-rgb), 0.06) 22%,
  rgba(var(--veil-rgb), 0.06) 70%,
  var(--paper) 100%);
}

.hero-scene > * {
  position: relative;
}

/* on a phone the type runs the full width, so the veil turns vertical */
@media (max-width: 680px) {
  .hero-scene::after {
    background:
    linear-gradient(180deg,
    rgba(var(--veil-rgb), 0.88) 0%,
    rgba(var(--veil-rgb), 0.82) 52%,
    rgba(var(--veil-rgb), 0.3) 78%,
    var(--paper) 100%);
  }
}

.scene-workshop::before  { background-image: url("assets/plates/scene-workshop.webp"); }
.scene-colosseum::before { background-image: url("assets/plates/scene-colosseum.webp"); }
.scene-port::before      { background-image: url("assets/plates/scene-port.webp"); }
.scene-piazza::before    { background-image: url("assets/plates/scene-piazza.webp"); }
.scene-basilica::before  { background-image: url("assets/plates/scene-basilica.webp"); }
.scene-forum::before     { background-image: url("assets/plates/scene-forum.webp"); }
.scene-bridge::before    { background-image: url("assets/plates/scene-bridge.webp"); }
.scene-road::before      { background-image: url("assets/plates/scene-road.webp"); }

/* =================================================================
   Dark. The token names were never changed from the original dark
   theme, so this is a value swap rather than a second stylesheet.
   ================================================================= */
:root {
  --veil-rgb: 20, 17, 14;
  --ink-rgb: 242, 237, 228;

  --paper: #14110E;
  --paper-sunk: #0E0C0A;
  --paper-raised: #1C1815;
  --night: #0E0C0A;
  --night-2: #14110E;
  --night-3: #1C1815;

  --bone: #F2EDE4;
  --bone-soft: #D6CEC2;
  --bone-dim: #A79C8D;

  /* #A65529 manages only 3.54:1 on this ground, so the accent is lifted
     to 5.08:1 and stays copper rather than turning orange */
  --copper: #C2703A;
  --sage: var(--copper);
  --steel: var(--bone-dim);

  --line-strong: rgba(var(--ink-rgb), 0.24);
  --line-control: rgba(var(--ink-rgb), 0.42);
  --plate-ground: #1C1815;
}

html,
body {
  /* without this the UA keeps light defaults for what it paints itself:
     Chrome's autofill fill goes pale behind cream text on the intake form,
     and scrollbars and select popups stay light against the ink page */
  color-scheme: dark;
  background: var(--paper);
  color: var(--bone);
}

/* the keycap is pressed out of paper, so on ink it needs the cream cut */
.brand-mark {
  background-image: url("assets/altr_key_logo_cream_taupe_transparent.png");
}

/* a keycap on a dark ground presses the other way: light cap, dark legend */
.button.primary,
.nav-links .nav-cta {
  background: var(--bone);
  color: var(--paper);
  border-color: var(--bone);
}

.button.primary:hover,
.nav-links .nav-cta:hover {
  background: #FFFFFF;
  color: var(--paper);
}

.button.secondary {
  background: transparent;
  color: var(--bone);
  border-color: var(--line-control);
}

.button.secondary:hover {
  border-color: var(--bone);
}

/* images sat on a literal white card, which is a lamp on this ground */
.real-estate-card-image,
.cre-hero-image img,
.workshop-hero-image img,
.article-inline-media img {
  background: var(--plate-ground);
}

.workshop-calendar iframe {
  background: var(--paper-raised);
}

/* the mobile menu was opaque white */
@media (max-width: 680px) {
  .nav-links {
    background: var(--paper-raised);
    border-color: var(--line-strong);
  }
}

/* the nav sits over a scene now, so it needs its own ground */
.nav {
  background: rgba(var(--veil-rgb), 0.82);
}

/* The closing band already inverts: background var(--bone), color
   var(--paper). Swapping the tokens turns it into a paper band at the
   foot of an ink site, which is the same idea the other way up, so it
   is left alone. */

/* -- surfaces styles.css hardcoded --------------------------------- */
/* These were written as literal paper and white rather than tokens, so the
   theme swap left them light with light type on top. The nav dropdown was
   the worst of it: a near-opaque paper panel carrying #F2EDE4 links. */
.nav .nav-dropdown-panel {
  background: rgba(var(--veil-rgb), 0.98);
  border-color: var(--line-strong);
}

.nav.is-menu-open,
.workshop-topic-grid {
  background: rgba(var(--veil-rgb), 0.98);
}

.workshop-topic-card {
  background: var(--paper-raised);
}

/* Two cells in the same category share a plate, which put identical
   thumbnails side by side. Varying the zoom as well as the position over
   a six-cell cycle keeps the category readable while making neighbours
   plainly different pictures. */
/* the y values stay in the lower half, where the architecture is; the top
   of these plates is open sky and crops to an empty rectangle */
.index-cell:nth-child(6n+1) .cell-mark { background-size: 170% auto; background-position: 24% 58%; }
.index-cell:nth-child(6n+2) .cell-mark { background-size: 240% auto; background-position: 76% 64%; }
.index-cell:nth-child(6n+3) .cell-mark { background-size: 190% auto; background-position: 50% 70%; }
.index-cell:nth-child(6n+4) .cell-mark { background-size: 260% auto; background-position: 14% 62%; }
.index-cell:nth-child(6n+5) .cell-mark { background-size: 155% auto; background-position: 88% 55%; }
.index-cell:nth-child(6n)   .cell-mark { background-size: 210% auto; background-position: 38% 76%; }

/* the index sits under its own hero, with one air step between them */
.index-section {
  padding-top: var(--air-s);
}