/* ============================================================================
   MarginMax Solutions — PREMIUM ENGRAVED (dark)
   The house style locked 2026-08-15. Source of truth for the system:
   C:\dev\content-agent\.poster-build\poster-demo-cta-premium.svg + PREMIUM-STYLE.md

   This is a SECOND world, scoped to premium surfaces. The paper-light world in
   css/styles.css still governs every other page on the live site. Do not merge
   the two token sets.
   ============================================================================ */

/* --- Fonts (self-hosted, latin subsets from Google Fonts; variable wght) ------- */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 500 600;
  font-display: swap;
  src: url('/fonts/source-serif-4-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter's stand-ins while inter-latin.woff2 is still on its way. A system sans scaled to
   Inter's width and vertical metrics, so the swap does not reflow the text: without it the
   home hero lede re-wrapped on swap (lab CLS 0.125, 2026-09-29). Nothing changes once Inter
   has loaded. Values measured from inter-latin.woff2 against Arial-metric Liberation Sans
   and Roboto over the site's own copy (fontTools); Arial for iOS, macOS and Windows,
   Roboto for Android. The unicode-range is Inter's own, so a glyph Inter lacks (the arrow
   U+2192) still falls through to the system font exactly as before. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 106.79%;
  ascent-override: 90.72%;
  descent-override: 22.59%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Fallback Roboto';
  src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 107.44%;
  ascent-override: 90.17%;
  descent-override: 22.45%;
  line-gap-override: 0%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  /* Ground: near-black forest, lifted toward olive where the light falls */
  --pg-ground:      #101208;
  --pg-ground-mid:  #23251a;
  --pg-ground-lift: #3a3a28;
  --pg-plate:       #171a10;
  --pg-plate-lift:  #2c3122;

  /* Ivory: the paper voice, now emitted rather than printed */
  --pg-ivory:       #F1ECDD;
  --pg-ivory-soft:  #D4CFC0;
  --pg-ivory-mute:  #9C978A;

  /* Gold: warm bronze metal, never yellow */
  --pg-gold:        #C99F4E;
  --pg-gold-light:  #D9B463;
  --pg-gold-pale:   #F3DFA4;
  --pg-gold-deep:   #8F6524;

  /* Hairlines: engraved rules, always gold at low alpha */
  --pg-rule:        rgba(201, 159, 78, 0.22);
  --pg-rule-strong: rgba(201, 159, 78, 0.42);
  --pg-rule-faint:  rgba(201, 159, 78, 0.11);

  --pg-space-section: clamp(54px, 7.4vw, 104px);
  --pg-radius:        10px;
  --pg-ease:          cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

/* The topo contours are deliberately hung past the corners, so the clip lives
   on the root. `clip` rather than `hidden` so no scroll container is created. */
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  background: var(--pg-ground);
  color: var(--pg-ivory-soft);
  font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* hidden first as the fallback, then clip. This matters: overflow-x
     hidden makes <body> a scroll container, and a scroll container
     ancestor silently kills position: sticky on everything inside it.
     clip does the same visual job without becoming one, so the
     scroll-driven hero on the landing pages actually pins. The pair is
     deliberate, so a browser without clip keeps the old behaviour
     rather than gaining a horizontal scrollbar. */
  overflow-x: hidden;
  overflow-x: clip;
  /* Explicit, and not redundant: when one axis is non-visible the other
     axis's `visible` is promoted to `auto`, which makes <body> a scroll
     container again and re-breaks sticky. `visible` alongside `clip` is
     the one pairing that does not. */
  overflow-y: visible;
}

img, svg, video { display: block; max-width: 100%; }

::selection { background: rgba(201, 159, 78, 0.32); color: var(--pg-ivory); }

/* --- The ground ----------------------------------------------------------- */
/* Four stacked fields, exactly as the poster stacks them: radial glow, warm
   top-left corner, top-right darkener, then a vignette over everything. */

.pg-ground {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 8% 4%,  rgba(138, 106, 53, 0.30) 0%, rgba(138, 106, 53, 0) 55%),
    radial-gradient(72% 52% at 100% 0%, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(130% 90% at 30% 8%, var(--pg-ground-lift) 0%, var(--pg-ground-mid) 34%, var(--pg-ground) 100%);
}

.pg-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(112% 96% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.58) 100%);
}

/* Hand-drawn topo contours. Mirrored corners, sparse on purpose: the dense
   generated field was rejected when the poster style was set. */
.pg-topo {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}
.pg-topo--tl { top: -40px; left: -40px;  width: min(46vw, 520px); }
.pg-topo--br { bottom: -40px; right: -40px; width: min(46vw, 520px); }

/* Ghosted mark behind the content, the poster's watermark move. */
.pg-watermark {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(74vw, 700px);
  opacity: 0.022;
  -webkit-mask-image: radial-gradient(62% 62% at 50% 45%, #000 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
          mask-image: radial-gradient(62% 62% at 50% 45%, #000 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
}

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

.pg-wrap {
  position: relative;
  width: min(100% - 40px, 1120px);
  margin-inline: auto;
}
.pg-wrap--tight { width: min(100% - 40px, 760px); }

section { position: relative; }

.pg-section { padding-block: var(--pg-space-section); }

/* --- Type ----------------------------------------------------------------- */

h1, h2, h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  color: var(--pg-ivory);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 { font-size: clamp(42px, 6.2vw, 78px); }
h2 { font-size: clamp(32px, 5vw, 60px); line-height: 1.08; }
h3 { font-size: clamp(21px, 2.3vw, 27px); line-height: 1.22; letter-spacing: -0.01em; }

p { max-width: 68ch; }

/* The signature move: one italic pivot word per headline, filled with gold
   metal. Gradient type is the locked world's own device, used only here, on
   the crest, and on the pill number. */
.pg-pivot {
  font-style: italic;
  background: linear-gradient(180deg, #F9ECC0 0%, #EACC7E 45%, #CE9E48 75%, #A5762C 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .pg-pivot { color: var(--pg-gold-light); -webkit-text-fill-color: var(--pg-gold-light); }
}

.pg-lede {
  font-size: clamp(17px, 1.55vw, 20px);
  color: var(--pg-ivory-soft);
  max-width: 60ch;
}

.pg-fine {
  font-size: 14px;
  color: var(--pg-ivory-mute);
  max-width: 62ch;
}

/* The rule-flanked kicker. One named kicker for the page, not an eyebrow on
   every section. */
.pg-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none; /* the global p measure would box the flex row and pin it left */
  gap: 20px;
  font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--pg-gold-light);
}
.pg-kicker::before,
.pg-kicker::after {
  content: '';
  width: clamp(28px, 5vw, 58px);
  height: 2px;
  background: var(--pg-gold);
  opacity: 0.85;
  flex: none;
}

/* Mono is reserved for time, references, and measurement. Never for reading. */
.pg-mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Crest + wordmark ----------------------------------------------------- */

/* The crest opens the page as a seal. The wordmark lives in the nav and again
   in the close, so repeating it here would only push the ledger below the fold. */
.pg-crest {
  display: block;
  margin: 0 auto clamp(13px, 1.7vw, 19px);
  width: clamp(72px, 8.2vw, 90px);
}

/* --- The gold pill -------------------------------------------------------- */
/* Glossy dark green fill, 4px gold-gradient ring, top sheen, sparkle glint.
   The poster's hero object, made clickable. */

.pg-pill {
  --pill-pad-y: clamp(16px, 2vw, 24px);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  padding: var(--pill-pad-y) clamp(28px, 4.4vw, 56px);
  border-radius: 999px;
  background: linear-gradient(180deg, #2c3122 0%, #202417 50%, #171a10 100%);
  border: 3px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(180deg, #2c3122 0%, #202417 50%, #171a10 100%),
    linear-gradient(135deg, #F3DFA4 0%, #C99F4E 45%, #8F6524 75%, #D9B463 100%);
  box-shadow: 0 10px 34px -12px rgba(0, 0, 0, 0.8), 0 2px 0 rgba(249, 236, 192, 0.06) inset;
  text-decoration: none;
  transition: transform 0.35s var(--pg-ease), box-shadow 0.35s var(--pg-ease);
}

/* Top sheen, inset so the ring reads as metal thickness above it. */
.pg-pill::before {
  content: '';
  position: absolute;
  inset: 5px 12px auto 12px;
  height: 38%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(247, 231, 178, 0.26) 0%, rgba(247, 231, 178, 0) 100%);
  pointer-events: none;
}

.pg-pill__label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 700;
  font-size: clamp(26px, 4.6vw, 56px);
  line-height: 1;
  letter-spacing: 0.005em;
  background: linear-gradient(180deg, #F9ECC0 0%, #EACC7E 45%, #CE9E48 75%, #A5762C 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
@supports not (background-clip: text) {
  .pg-pill__label { color: var(--pg-gold-pale); -webkit-text-fill-color: var(--pg-gold-pale); }
}

.pg-pill__icon { width: clamp(24px, 3.2vw, 40px); flex: none; }

/* The glint rides the pill's upper-left corner, full brightness. */
.pg-pill__spark {
  position: absolute;
  top: -8px;
  left: 4%;
  width: clamp(20px, 2.6vw, 30px);
  pointer-events: none;
}

.pg-pill:hover,
.pg-pill:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px -14px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(243, 223, 164, 0.22);
}

/* Quiet sibling action. Engraved hairline, no fill. */
.pg-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--pg-rule-strong);
  border-radius: 999px;
  color: var(--pg-ivory);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: border-color 0.3s var(--pg-ease), background 0.3s var(--pg-ease), transform 0.3s var(--pg-ease);
}
.pg-ghost:hover,
.pg-ghost:focus-visible {
  border-color: var(--pg-gold);
  background: rgba(201, 159, 78, 0.08);
  transform: translateY(-1px);
}
.pg-ghost .pg-arrow { color: var(--pg-gold-light); transition: transform 0.3s var(--pg-ease); }
.pg-ghost:hover .pg-arrow { transform: translateX(3px); }

/* --- Focus --------------------------------------------------------------- */

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--pg-gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Nav ------------------------------------------------------------------ */

.pg-nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0 14px;
  border-bottom: 1px solid var(--pg-rule-faint);
}

.pg-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--pg-ivory);
}
.pg-nav__mark { width: 30px; flex: none; }
.pg-nav__name {
  font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #FFFFFF 0%, #C9C6BB 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .pg-nav__name { color: var(--pg-ivory); -webkit-text-fill-color: var(--pg-ivory); }
}

.pg-nav__links {
  display: flex;
  gap: clamp(16px, 2.6vw, 32px);
  list-style: none;
}
.pg-nav__links a {
  white-space: nowrap;
  color: var(--pg-ivory-soft);
  text-decoration: none;
  font-size: 14px;
  padding-block: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--pg-ease), border-color 0.25s var(--pg-ease);
}
.pg-nav__links a:hover { color: var(--pg-ivory); border-bottom-color: var(--pg-gold); }

.pg-nav__call {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--pg-rule-strong);
  color: var(--pg-gold-light);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: border-color 0.25s var(--pg-ease), background 0.25s var(--pg-ease);
}
.pg-nav__call:hover { border-color: var(--pg-gold); background: rgba(201, 159, 78, 0.1); }
.pg-nav__num { color: var(--pg-ivory); font-variant-numeric: tabular-nums; }
.pg-nav__num::before { content: ' · '; color: var(--pg-rule-strong); }

/* The live dot: the one place a status color appears. */
.pg-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pg-gold-light);
  box-shadow: 0 0 0 3px rgba(217, 180, 99, 0.18);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .pg-dot { animation: pg-pulse 2.6s var(--pg-ease) infinite; }
}
@keyframes pg-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(217, 180, 99, 0.18); }
  50%      { box-shadow: 0 0 0 7px rgba(217, 180, 99, 0.02); }
}

/* --- Motion: the one authored moment -------------------------------------- */
/* Every section is visible by default. The ledger is the only thing on the page
   that animates, so nothing can be caught blank by a jump or restored scroll. */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

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

.pg-footer {
  border-top: 1px solid var(--pg-rule-faint);
  padding: 44px 0 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--pg-ivory-mute);
}
.pg-footer a { color: var(--pg-ivory-soft); text-decoration: none; }
.pg-footer a:hover { color: var(--pg-gold-light); }
.pg-footer__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }

/* ============================================================================
   COMPONENTS — the dispatch ledger and its plates
   ============================================================================ */

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

/* Sized so the ledger's first entries clear the fold on a 720px laptop: the
   mechanism has to be in the first viewport, not teased below it. */
.pg-hero { padding: clamp(20px, 2.6vw, 32px) 0 clamp(30px, 4vw, 52px); text-align: center; }

.pg-hero h1 {
  max-width: 15ch;
  margin: clamp(18px, 2.4vw, 28px) auto clamp(16px, 2vw, 24px);
}

.pg-hero .pg-lede { margin-inline: auto; max-width: 74ch; }

/* --- The ledger ----------------------------------------------------------- */
/* A dispatch log, engraved. Mono time in the left rail, the event in ivory,
   a gold rule under each entry. This is the mechanism running, not a claim
   about it, and every line is something the demo number actually does. */

.pg-ledger {
  margin: clamp(20px, 2.4vw, 30px) auto 0;
  max-width: 780px;
  text-align: left;
  border-top: 1px solid var(--pg-rule-strong);
  border-bottom: 1px solid var(--pg-rule-strong);
  background: linear-gradient(180deg, rgba(44, 49, 34, 0.34) 0%, rgba(23, 26, 16, 0.24) 100%);
}

.pg-ledger__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid var(--pg-rule);
  color: var(--pg-gold-light);
}
.pg-ledger__head .pg-mono { font-size: 11px; }
.pg-ledger__note {
  font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--pg-ivory-mute);
}

.pg-ledger__list { list-style: none; }

.pg-ledger__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: clamp(14px, 2.4vw, 28px);
  align-items: baseline;
  padding: clamp(13px, 1.5vw, 17px) clamp(16px, 2.4vw, 26px);
  border-bottom: 1px solid var(--pg-rule-faint);
}
.pg-ledger__row:last-child { border-bottom: 0; }

.pg-ledger__time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--pg-gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pg-ledger__event { color: var(--pg-ivory); font-size: clamp(15px, 1.5vw, 17px); line-height: 1.5; }
.pg-ledger__event b { font-weight: 600; color: var(--pg-gold-light); }
.pg-ledger__event i {
  display: block;
  font-style: normal;
  font-size: 13.5px;
  color: var(--pg-ivory-mute);
  margin-top: 3px;
  line-height: 1.55;
}

/* The authored moment: entries write themselves in, in sequence, once. Gated on
   the `js` class so the log is fully readable if the script never runs. */
@media (prefers-reduced-motion: no-preference) {
  .js .pg-ledger--armed .pg-ledger__row {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(3px);
  }
  .js .pg-ledger--armed.is-running .pg-ledger__row {
    animation: pg-strike 0.68s var(--pg-ease) forwards;
    animation-delay: calc(var(--i) * 0.32s);
  }
}
@keyframes pg-strike {
  from { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  to   { opacity: 1; transform: none;             filter: blur(0); }
}

/* The pill sits at the foot of the ledger as its last entry: the reader can
   check the whole log by dialing it. */
.pg-ledger__foot {
  padding: clamp(24px, 3.4vw, 38px) clamp(16px, 2.4vw, 26px) clamp(26px, 3.6vw, 40px);
  border-top: 1px solid var(--pg-rule);
  text-align: center;
}
.pg-ledger__cue {
  display: block;
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pg-gold-light);
}
.pg-ledger__micro {
  margin: 18px auto 0;
  max-width: 46ch;
  font-size: 13px;
  color: var(--pg-ivory-mute);
}

/* --- Lane plates ---------------------------------------------------------- */
/* Four engraved plates, not a card grid. Each is a full-width band split into
   a wide reading column and a narrow authored detail, alternating side. */

.pg-plate {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(40px, 5.6vw, 76px);
  border-top: 1px solid var(--pg-rule-faint);
}
.pg-plate:first-of-type { border-top: 1px solid var(--pg-rule); }
.pg-plate:nth-of-type(even) .pg-plate__body  { order: 2; }
.pg-plate:nth-of-type(even) .pg-plate__detail { order: 1; }

.pg-plate__ref {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pg-gold);
}
.pg-plate__ref::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--pg-rule);
}

.pg-plate h3 { margin-bottom: 14px; }
.pg-plate p { color: var(--pg-ivory-soft); max-width: 46ch; }
.pg-plate p + p { margin-top: 13px; }

.pg-plate__list {
  margin-top: 18px;
  list-style: none;
  display: grid;
  gap: 9px;
}
.pg-plate__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  color: var(--pg-ivory-soft);
}
.pg-plate__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pg-gold);
}

/* The authored detail: a small engraved instrument, drawn in the world's own
   grammar. Never an icon tile. */
.pg-detail {
  position: relative;
  border: 1px solid var(--pg-rule);
  border-radius: var(--pg-radius);
  background: linear-gradient(180deg, rgba(44, 49, 34, 0.42) 0%, rgba(16, 18, 8, 0.42) 100%);
  padding: clamp(16px, 2vw, 22px);
  box-shadow: 0 20px 44px -28px rgba(0, 0, 0, 0.9);
}
.pg-detail__cap {
  display: block;
  margin-bottom: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pg-gold);
}

/* Transcript detail: alternating speaker lines. */
.pg-turn { display: grid; gap: 4px; padding-block: 9px; border-top: 1px solid var(--pg-rule-faint); }
.pg-turn:first-of-type { border-top: 0; padding-top: 0; }
.pg-turn__who {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pg-ivory-mute);
}
.pg-turn__who--ai { color: var(--pg-gold); }
.pg-turn__said { font-size: 14.5px; line-height: 1.5; color: var(--pg-ivory); }

/* Chain detail: a workflow, each step hung off a vertical gold rule. */
.pg-chain { list-style: none; position: relative; padding-left: 22px; }
.pg-chain::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--pg-gold) 0%, rgba(201, 159, 78, 0.15) 100%);
}
.pg-chain li { position: relative; padding-block: 8px; font-size: 14.5px; color: var(--pg-ivory); }
.pg-chain li::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 1.05em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pg-ground);
  border: 1.5px solid var(--pg-gold);
}
.pg-chain li span { display: block; font-size: 12.5px; color: var(--pg-ivory-mute); margin-top: 2px; }

/* Frame detail: a browser or handset chrome, drawn as engraved hairlines. */
.pg-frame { border: 1px solid var(--pg-rule); border-radius: 8px; overflow: hidden; }
.pg-frame__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--pg-rule-faint);
  background: rgba(44, 49, 34, 0.4);
}
.pg-frame__dots { display: inline-flex; gap: 4px; }
.pg-frame__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--pg-rule-strong); }
.pg-frame__url {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--pg-ivory-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pg-frame__body { padding: 18px 16px 20px; }
.pg-frame__h {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--pg-ivory);
  line-height: 1.15;
  margin-bottom: 8px;
}
.pg-frame__p { font-size: 13px; color: var(--pg-ivory-mute); margin-bottom: 14px; }
.pg-frame__btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pg-ground);
  background: linear-gradient(180deg, #EACC7E 0%, #C99F4E 100%);
}
.pg-frame__row { display: flex; gap: 8px; margin-top: 14px; }
.pg-frame__tile {
  flex: 1;
  border: 1px solid var(--pg-rule-faint);
  border-radius: 6px;
  padding: 9px 10px;
}
.pg-frame__tile b {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--pg-gold-light);
}
.pg-frame__tile span { font-size: 10.5px; color: var(--pg-ivory-mute); letter-spacing: 0.04em; }

/* --- Standing-today band -------------------------------------------------- */
/* The honest inventory. Two columns of plain fact: running now, still building. */

.pg-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: clamp(26px, 3.4vw, 40px);
  border-top: 1px solid var(--pg-rule);
}
.pg-status__col h3 { margin-bottom: 16px; font-size: clamp(19px, 2vw, 23px); }
.pg-status__list { list-style: none; display: grid; gap: 11px; }
.pg-status__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 15px;
  color: var(--pg-ivory-soft);
}
.pg-status__list svg { width: 15px; margin-top: 4px; flex: none; }
.pg-status__col--refusals .pg-status__list li { color: var(--pg-ivory-mute); }

/* --- Steps ---------------------------------------------------------------- */

.pg-steps {
  counter-reset: step;
  list-style: none;
  margin-top: clamp(30px, 4vw, 48px);
  border-top: 1px solid var(--pg-rule);
}
.pg-steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: clamp(52px, 7vw, 84px) 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
  padding-block: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--pg-rule-faint);
}
.pg-steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1;
  background: linear-gradient(180deg, #F9ECC0 0%, #EACC7E 45%, #CE9E48 75%, #A5762C 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.pg-steps h3 { margin-bottom: 8px; }
.pg-steps p { color: var(--pg-ivory-soft); }

/* --- Founder -------------------------------------------------------------- */

.pg-founder {
  display: grid;
  grid-template-columns: clamp(150px, 20vw, 230px) 1fr;
  gap: clamp(26px, 4.4vw, 62px);
  align-items: center;
}
.pg-founder__portrait {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--pg-gold);
  box-shadow: 0 24px 54px -26px rgba(0, 0, 0, 0.9);
}
.pg-founder__portrait img { width: 100%; height: 100%; object-fit: cover; }
.pg-founder blockquote {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(21px, 2.6vw, 31px);
  line-height: 1.28;
  color: var(--pg-ivory);
  letter-spacing: -0.012em;
}
.pg-founder cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pg-gold);
}

/* --- Close ---------------------------------------------------------------- */
/* The poster's foot, at page scale: mark, tagline, pill, domain rule. */

.pg-close { text-align: center; padding-bottom: clamp(56px, 8vw, 104px); }
.pg-close h2 { max-width: 17ch; margin: 0 auto clamp(18px, 2.4vw, 28px); }
.pg-close .pg-lede { margin: 0 auto clamp(30px, 4vw, 44px); }
.pg-close__mark { width: clamp(40px, 5vw, 56px); margin: clamp(38px, 5vw, 56px) auto clamp(20px, 2.6vw, 30px); }

/* The colophon: the poster's full lockup, at the one place on a scrolling page
   with no fold to pay for. Real text, so the silver gradient is painted on
   rather than baked into an image. */
.pg-wordmark {
  margin: 0 auto;
  max-width: none;
  font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 4.6vw, 50px);
  line-height: 1;
  letter-spacing: clamp(0.1em, 0.4vw, 0.16em);
  text-indent: clamp(0.1em, 0.4vw, 0.16em); /* offset the trailing tracking */
  text-transform: uppercase;
  background: linear-gradient(180deg, #FFFFFF 0%, #C9C6BB 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .pg-wordmark { color: var(--pg-ivory); -webkit-text-fill-color: var(--pg-ivory); }
}

.pg-wordsub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 20px);
  margin: clamp(9px, 1.2vw, 15px) auto clamp(22px, 3vw, 34px);
  max-width: none;
}
.pg-wordsub span {
  font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 1.8vw, 20px);
  letter-spacing: clamp(0.16em, 0.34vw, 0.38em);
  text-indent: clamp(0.16em, 0.34vw, 0.38em);
  text-transform: uppercase;
  color: var(--pg-gold);
  white-space: nowrap;
}
.pg-wordsub::before,
.pg-wordsub::after {
  content: '';
  width: clamp(28px, 5vw, 62px);
  height: 2px;
  background: var(--pg-gold);
  opacity: 0.9;
  flex: none;
}
.pg-close__tagline {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 2.4vw, 30px);
  color: var(--pg-ivory);
  max-width: none;
}
.pg-close__domain {
  margin-top: 18px;
  font-family: 'Inter', 'Inter Fallback', 'Inter Fallback Roboto', sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--pg-gold);
  text-decoration: none;
  display: inline-block;
}
.pg-close__domain:hover { color: var(--pg-gold-light); }

.pg-close__alt { margin: 22px auto 0; font-size: 14px; color: var(--pg-ivory-mute); }
.pg-close__alt a { color: var(--pg-ivory); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--pg-rule-strong); }
.pg-close__alt a:hover { text-decoration-color: var(--pg-gold); }

/* ============================================================================
   RESPONSIVE — mobile is the primary scene for this audience
   ============================================================================ */

@media (max-width: 900px) {
  .pg-plate { grid-template-columns: 1fr; gap: 26px; }
  .pg-plate:nth-of-type(even) .pg-plate__body  { order: 0; }
  .pg-plate:nth-of-type(even) .pg-plate__detail { order: 0; }
  .pg-plate p { max-width: none; }
  .pg-founder { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pg-founder__portrait { width: min(60vw, 200px); }
}

@media (max-width: 1140px) {
  /* Brand and the call action are what matter here; the links are secondary
     and were wrapping to three lines before they had room to sit. The six
     links, the brand and the numbered call pill need about 1120px on one row
     (measured 2026-09-29, when "Free consultation" joined the menu), so they
     fold into the menu below 1140px. */
  .pg-nav__links { display: none; }
}

@media (max-width: 720px) {
  .pg-ledger__head { flex-direction: column; align-items: flex-start; gap: 5px; }
  .pg-ledger__row { grid-template-columns: 1fr; gap: 4px; }
  .pg-ledger__time { font-size: 11px; }
  .pg-topo--tl, .pg-topo--br { width: 62vw; opacity: 0.75; }
}

@media (max-width: 560px) {
  .pg-wrap, .pg-wrap--tight { width: calc(100% - 32px); }
  .pg-nav__num { display: none; }
  .pg-nav__call { padding: 9px 14px; }
  .pg-pill { width: 100%; padding-inline: 18px; gap: 10px; }
  .pg-pill__label { font-size: clamp(23px, 8vw, 34px); }
  .pg-steps li { grid-template-columns: 1fr; gap: 6px; }
  .pg-frame__row { flex-wrap: wrap; }
}

/* Narrowest phones: the brand word and the call pill cannot both fit on one
   line, and the mark alone still identifies the page. */
@media (max-width: 380px) {
  .pg-nav__name { display: none; }
  .pg-nav { gap: 12px; }
}

/* ==========================================================================
   LANDING SURFACES — shared by the per-industry pages (HVAC, plumbing,
   attorneys). Added 2026-08-21 with /industries/hvac, the first of the three.
   Nothing here is page-specific; a per-page style block owns only what is
   genuinely one page's, such as a hero stage awaiting its render.
   ========================================================================== */

/* A plate that OPENS its own section carries an h2 for document structure,
   set at the plate heading's scale. Semantics say section opener, typography
   says plate. Both are true, and the alternative is a page whose sections
   have no heading above them. */
.pg-plate h2 {
  font-size: clamp(21px, 2.3vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}

/* --- The register ---------------------------------------------------------
   Distinct from .pg-ledger, and the difference is the point. The ledger
   TRACES one event in sequence, so it reads as a single column of time. The
   register TALLIES a whole shift, so it carries a third column: the outcome,
   and where the agent stopped. A ledger is a story; a register is a night's
   record. Static by design, since the world allows one authored motion
   moment per page and a landing hero spends it.
   -------------------------------------------------------------------------- */
.pg-register { border-top: 1px solid var(--pg-rule); }

.pg-register__row {
  display: grid;
  grid-template-columns: 92px 1fr 168px;
  gap: 22px;
  padding: 20px 0;
  border-bottom: 1px solid var(--pg-rule-faint);
  align-items: baseline;
}

.pg-register__time {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--pg-gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pg-register__what { color: var(--pg-ivory-soft); line-height: 1.6; }
.pg-register__what b { color: var(--pg-ivory); font-weight: 600; }
.pg-register__what i {
  display: block;
  margin-top: 5px;
  color: var(--pg-ivory-mute);
  font-style: italic;
  font-size: 14px;
}

.pg-register__out {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pg-ivory-mute);
  text-align: right;
}
.pg-register__out--booked { color: var(--pg-gold-light); }

@media (max-width: 720px) {
  .pg-register__row { grid-template-columns: 78px 1fr; gap: 14px; }
  .pg-register__out { grid-column: 2; text-align: left; margin-top: 6px; }
}

/* --- The price line -------------------------------------------------------
   A published price is read, not sold. Set as a row of engraved terms so it
   reads as a specification off a data plate rather than a pricing card, which
   is the object this world exists to refuse.
   -------------------------------------------------------------------------- */
.pg-price {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px; /* five entries fit the offer plate's column at desktop widths */
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--pg-rule);
}
.pg-price div { padding: 10px 0; }
.pg-price dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pg-ivory-mute);
  margin-bottom: 7px;
}
.pg-price dd {
  margin: 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: clamp(21px, 2.3vw, 27px);
  color: var(--pg-ivory);
  line-height: 1;
}