/* ============================================================
   synqa.ca - pass 4 sub-page styles
   Editorial.  No scroll cinema.  Foundations + site.css carry the
   shell and tokens; this file holds the layouts used across
   /work, /work/[slug], /theta, /about, /contact.
   ============================================================ */

/* ----------------------------------------------------------------
   Sub-page boot - nav always docked, dock-wordmark element omitted.
   ----------------------------------------------------------------*/

body[data-subpage] .shell-nav {
  background: rgba(240, 234, 216, 0.92);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
body[data-subpage] .shell-nav-brand img { opacity: 1; }
body[data-subpage][data-surface="ink"] .shell-nav {
  background: rgba(31, 24, 20, 0.92);
}
body[data-subpage][data-surface="ink"] .shell-nav-brand img { filter: invert(1); }
body[data-subpage][data-surface="ink"] .shell-nav-links a { color: var(--bone); }
body[data-subpage][data-surface="ink"] .shell-nav-links a:hover { color: var(--clay); }

/* Shared sub-page hero - restrained.  Mono pre-header, Fraunces
   headline, optional body lead.  Centered or left-aligned per page.
   Top padding matches the .ch-07 product-hero (22vh) so /work lines up
   with /theta, /holm, /rewrite, /patchpal at the same start height. */
.subpage-hero {
  /* 14vh top (matches the product .ch-07 heroes for a consistent page-top) and
     7vh bottom so the hero -> first section gap is the same 14vh band as every
     other card-to-card gap on the field pages. Was 22vh / 14vh, which left the
     hero -> first section gap larger than the rest (it read as un-standardised). */
  padding: 14vh 0 7vh;
  position: relative;
}

/* Product-page hero alignment.  The shared .ch-07-inner grid is
   align-items: center (correct for the homepage Chapter 07, where it
   centers the chat card against the headline as you scroll into it).
   On the product sub-pages the card is a tall portrait screenshot, so
   centering pushes the short meta column (headline + body) down toward
   the middle of the image - which read as the hero "starting too far
   down."  Scoped to [data-subpage] (sub-pages only, never the
   homepage), top-align both columns so the headline sits at the 22vh
   padding edge, lining every product hero up with /theta. */
[data-subpage] .ch-07-inner { align-items: start; }
.subpage-hero-inner {
  /* Width comes from --content-w (site.css :root). */
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.subpage-hero-stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--stamp-fg);
}
.subpage-hero-stamp .period { color: var(--clay); margin: 0 6px; }
[data-surface="ink"] .subpage-hero-stamp { color: var(--fg-quiet-on-ink); }

.subpage-hero-head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 112px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  position: relative;
  max-width: 18ch;
}
.subpage-hero-head em { font-style: italic; color: var(--harbor); font-weight: 400; }
.subpage-hero-head .period { color: var(--clay); }
.subpage-hero-head .carbon {
  position: absolute;
  inset: 0;
  color: rgba(168, 156, 138, 0.42);
  z-index: -1;
  transform: translate(2px, 2px);
  pointer-events: none;
  will-change: transform;
}
.subpage-hero-head .carbon em { color: rgba(31, 77, 74, 0.32); }
.subpage-hero-head .carbon .period { color: rgba(181, 87, 58, 0.32); }

[data-surface="ink"] .subpage-hero-head { color: var(--bone); }
[data-surface="ink"] .subpage-hero-head em { color: var(--fg-cool-on-ink); }
[data-surface="ink"] .subpage-hero-head .carbon { color: rgba(213, 200, 168, 0.20); }

.subpage-hero-lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 56ch;
  margin: 0;
}
.subpage-hero-lead em {
  font-family: var(--font-display); font-style: italic;
  color: var(--harbor); font-weight: 400;
}
[data-surface="ink"] .subpage-hero-lead { color: var(--fg-quiet-on-ink); }
[data-surface="ink"] .subpage-hero-lead em { color: var(--fg-cool-on-ink); }

/* M02-drop initial state on sub-page headlines + leads. */
html.js .subpage-hero-head { opacity: 0; transform: translateY(28px); }
html.js .subpage-hero-lead { opacity: 0; transform: translateY(12px); }
html.js .subpage-hero-stamp { opacity: 0; transform: translateY(6px); }

/* ----------------------------------------------------------------
   /work - case study index
   Editorial.  Horizontal rows, one per case.  Mono header + Fraunces
   framing + one big Clay metric + Read. link.  Hairlines between rows.
   ----------------------------------------------------------------*/

.work-grid {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 4vh 80px 18vh;
  display: flex;
  flex-direction: column;
}
.work-row {
  display: grid;
  /* Shrinkable columns + fluid gap so the row fits from 1024px up - the
     old fixed 200/320/160 columns overflowed between the mobile breakpoint
     (1023px) and ~1110px. */
  grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) minmax(180px, 320px) minmax(132px, 160px);
  gap: clamp(28px, 3.6vw, 56px);
  align-items: center;
  padding: 56px 0;
  position: relative;
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.work-row:last-child { border-bottom: 1px solid var(--border); }
.work-row.is-in { opacity: 1; transform: translateY(0); }

.work-row-stamp {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stamp-fg);
}
.work-row-stamp .label { color: var(--ink); }
.work-row-stamp .period { color: var(--clay); margin: 0 4px; }

.work-row-head {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.1; letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
  max-width: 36ch;
  min-width: 0;
}
.work-row-head em { font-style: italic; color: var(--harbor); font-weight: 400; }
.work-row-head .period { color: var(--clay); }

.work-row-metric {
  display: flex; align-items: baseline; gap: 6px;
  justify-self: end;
  cursor: default;
}
.work-row-metric .value {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(56px, 5.4vw, 88px);
  line-height: 0.95; letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-block;
}
.work-row-metric .prefix {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 2.6vw, 42px);
  color: var(--ink);
  align-self: flex-start;
  padding-top: 0.3em;
}
.work-row-metric .unit {
  font-family: var(--font-display); font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 1.8vw, 28px);
  color: var(--clay);
  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;
}
.work-row-metric-label {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stone);
  text-align: right;
}
.work-row-metric-label .period { color: var(--clay); }
.work-row-metric-wrap {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  justify-self: end;
}

.work-row-cta {
  justify-self: end;
  white-space: nowrap;
  font-family: var(--font-body); font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 120ms var(--ease-standard), border-color 120ms var(--ease-standard);
}
.work-row-cta:hover { color: var(--clay); border-color: var(--clay); }
.work-row-cta .period { color: var(--clay); }

/* Pending / queued rows - Stone-tinted to signal "not yet". */
.work-row[data-state="queued"] .work-row-stamp .label,
.work-row[data-state="queued"] .work-row-head,
.work-row[data-state="queued"] .work-row-metric .value,
.work-row[data-state="queued"] .work-row-metric .prefix { color: var(--stone); }
.work-row[data-state="queued"] .work-row-cta {
  pointer-events: none; opacity: 0.6;
  border-color: transparent;
}

/* ----------------------------------------------------------------
   /work/[slug] - case study template
   ----------------------------------------------------------------*/

.case-hero {
  position: relative;
  padding: 24vh 0 6vh;
}
.case-hero-inner {
  max-width: var(--content-w); margin: 0 auto; padding: 0 80px;
  display: flex; flex-direction: column; gap: 32px;
}
.case-hero-stamp {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stamp-fg);
}
.case-hero-stamp .label { color: var(--ink); }
.case-hero-stamp .sector { color: var(--ink); font-weight: 500; }
.case-hero-stamp .period { color: var(--clay); margin: 0 6px; }

.case-hero-head {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 5.6vw, 96px);
  line-height: 1.02; letter-spacing: -0.022em;
  color: var(--ink); margin: 0;
  text-wrap: balance;
  position: relative;
  max-width: 22ch;
}
.case-hero-head em { font-style: italic; color: var(--harbor); font-weight: 400; }
.case-hero-head .period { color: var(--clay); }
.case-hero-head .carbon {
  position: absolute; inset: 0;
  color: rgba(168, 156, 138, 0.42);
  z-index: -1;
  transform: translate(2px, 2px);
  pointer-events: none;
  will-change: transform;
}
.case-hero-head .carbon em { color: rgba(31, 77, 74, 0.32); }
.case-hero-head .carbon .period { color: rgba(181, 87, 58, 0.32); }

.case-metric-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  padding: 56px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 56px;
}
.case-metric {
  display: flex; flex-direction: column; gap: 8px;
  cursor: default;
}
.case-metric-row {
  display: flex; align-items: baseline; gap: 8px;
}
.case-metric .prefix {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  color: var(--ink);
  align-self: flex-start;
  padding-top: 0.16em;
}
.case-metric .value {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(72px, 8vw, 120px);
  line-height: 0.95; letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-block;
}
.case-metric .unit {
  font-family: var(--font-display); font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 2.4vw, 36px);
  color: var(--clay);
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform;
}
.case-metric .label {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stone);
}
.case-metric .label .period { color: var(--clay); }

/* Long-form case sections - alternating Bone / Bone-100 surfaces for
   rhythm; the section join is a 1px hairline (decorative only - the
   editorial layout does not run an M07 wipe between sections here). */
.case-section {
  padding: 14vh 0;
  background: var(--bone);
}
.case-section.is-elevated {
  background: var(--bone-100);
}
.case-section + .case-section {
  border-top: 1px solid var(--border);
}
.case-section-inner {
  max-width: var(--content-w); margin: 0 auto; padding: 0 80px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
}
.case-section-meta {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stamp-fg);
}
.case-section-meta .period { color: var(--clay); margin: 0 6px; }
.case-section-head {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.08; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 24px;
  max-width: 24ch;
}
.case-section-head em { font-style: italic; color: var(--harbor); font-weight: 400; }
.case-section-head .period { color: var(--clay); }
.case-section-body {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 14px;
  max-width: 60ch;
}
.case-section-body em {
  font-family: var(--font-display); font-style: italic;
  color: var(--harbor); font-weight: 400;
}
.case-section-foot {
  margin-top: 32px;
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stamp-fg);
}
.case-section-foot .period { color: var(--clay); margin: 0 6px; }

/* Bottom CTA on the case study */
.case-cta-block {
  padding: 14vh 0;
  background: var(--bone);
  border-top: 1px solid var(--border);
}
.case-cta-block-inner {
  max-width: var(--content-w); margin: 0 auto; padding: 0 80px;
  display: flex; flex-direction: column; gap: 28px;
  align-items: flex-start;
}
.case-cta-block-head {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.05; letter-spacing: -0.018em;
  color: var(--ink); margin: 0;
  max-width: 18ch;
}
.case-cta-block-head em { font-style: italic; color: var(--harbor); font-weight: 400; }
.case-cta-block-head .period { color: var(--clay); }

/* ----------------------------------------------------------------
   /theta - longer-form Theta. page
   Sections: hero (mirror of Ch 7) · how it works · why we built it ·
             channels · waitlist form
   ----------------------------------------------------------------*/

.theta-section {
  padding: 12vh 0;
  position: relative;
}
.theta-section + .theta-section { border-top: 1px solid var(--border); }
.theta-section-inner {
  max-width: var(--content-w); margin: 0 auto; padding: 0 80px;
  display: flex; flex-direction: column; gap: 32px;
}
.theta-section-meta {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stamp-fg);
}
.theta-section-meta .period { color: var(--clay); margin: 0 6px; }
[data-surface="ink"] .theta-section-meta { color: var(--fg-quiet-on-ink); }
.theta-section-head {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.05; letter-spacing: -0.018em;
  color: var(--ink); margin: 0;
  max-width: 22ch;
}
.theta-section-head em { font-style: italic; color: var(--harbor); font-weight: 400; }
.theta-section-head .period { color: var(--clay); }

/* How it works - three hairline-bordered tiles in a row. */
.theta-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 32px;
}
.theta-step {
  position: relative;
  padding: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bone);
  display: flex; flex-direction: column; gap: 20px;
  min-height: 320px;
}
.theta-step-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 72px; line-height: 0.9;
  color: var(--ink); letter-spacing: -0.04em;
}
.theta-step-num .period { color: var(--clay); }
.theta-step-head {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
}
.theta-step-head .period { color: var(--clay); }
.theta-step-body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: var(--ink); margin: 0;
}

/* Why we built it - italic block quote. */
.theta-why {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  align-items: start;
}
.theta-why-stamp {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stamp-fg);
}
.theta-why-stamp .period { color: var(--clay); }
.theta-why-body {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 1.8vw, 28px);
  line-height: 1.4;
  color: var(--ink); margin: 0;
  max-width: 56ch;
}
.theta-why-body em {
  font-style: italic; color: var(--harbor); font-weight: 400;
}
.theta-why-body .period { color: var(--clay); }

/* Channels - six small cards in 2 rows. */
.theta-channels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}
.theta-channel {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--bone-100);
}
.theta-channel[data-status="soon"] {
  background: transparent;
  color: var(--stone);
}
.theta-channel-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; color: var(--ink); margin: 0;
}
.theta-channel[data-status="soon"] .theta-channel-name { color: var(--stone); }
.theta-channel-body {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--ink); margin: 0;
}
.theta-channel[data-status="soon"] .theta-channel-body { color: var(--stone); }
.theta-channel-stamp {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--clay);
}
.theta-channel[data-status="soon"] .theta-channel-stamp { color: var(--stone); }

/* Waitlist section - Ink surface so it punches at the close. */
.theta-waitlist {
  background: var(--ink);
  color: var(--bone);
  /* Less bottom space: the footer (also Ink) follows immediately, so a full
     14vh here read as one big dark void between the form and the footer. */
  padding: 14vh 0 8vh;
}
.theta-waitlist-inner {
  max-width: var(--content-w); margin: 0 auto; padding: 0 80px;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 96px;
  align-items: start;
}
.theta-waitlist-meta { display: flex; flex-direction: column; gap: 24px; }
.theta-waitlist-stamp {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stamp-fg);
}
/* theta-waitlist lives on Ink - use the light-on-ink text and chip inversion. */
.theta-waitlist .theta-waitlist-stamp { color: var(--fg-quiet-on-ink); }
.theta-waitlist-stamp .period { color: var(--clay); margin: 0 6px; }
.theta-waitlist-head {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 5.4vw, 80px);
  line-height: 1.02; letter-spacing: -0.022em;
  color: var(--bone); margin: 0;
}
.theta-waitlist-head em { font-style: italic; color: var(--fg-cool-on-ink); font-weight: 400; }
.theta-waitlist-head .period { color: var(--clay); }
.theta-waitlist-body {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--fg-quiet-on-ink); margin: 0;
  max-width: 44ch;
}
.theta-waitlist-body em {
  font-family: var(--font-display); font-style: italic;
  color: var(--fg-cool-on-ink); font-weight: 400;
}

.theta-form {
  display: flex; flex-direction: column;
  gap: 20px;
  background: var(--ink-800);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.theta-form-row { display: flex; flex-direction: column; gap: 8px; }
.theta-form label {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--bone);
  font-weight: 500;
}
.theta-form label .period { color: var(--clay); }
.theta-form input,
.theta-form select {
  font-family: var(--font-body); font-size: 16px;
  color: var(--bone);
  background: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: 46px;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard);
  appearance: none;
}
.theta-form input::placeholder { color: var(--fg-quiet-on-ink); }
.theta-form input:hover,
.theta-form select:hover { border-color: var(--fg-quiet-on-ink); }
/* R-15: plain :focus in its OWN rule block (not grouped with :focus-visible)
   so an old parser that drops an unknown :focus-visible selector still keeps
   this whole list intact and the inputs keep a visible focus ring. */
.theta-form input:focus,
.theta-form select:focus {
  border-color: var(--clay);
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.theta-form input:focus-visible,
.theta-form select:focus-visible {
  border-color: var(--clay);
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.theta-form select { background-color: var(--ink); color: var(--bone); }
.theta-form-row-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.theta-form-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 6px;
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--fg-quiet-on-ink);
}
.theta-form-foot .period { color: var(--clay); }
.theta-form-submit {
  display: inline-flex; align-items: center; gap: 1px;
  background: var(--clay); color: var(--bone);
  font-family: var(--font-display); font-weight: 500;
  font-size: 17px; letter-spacing: -0.005em;
  padding: 16px 32px; border-radius: var(--radius-md);
  border: none; cursor: pointer;
  text-decoration: none;
  min-height: 48px;
  transition: background var(--dur-fast) var(--ease-standard);
  will-change: transform;
}
.theta-form-submit:hover { background: var(--clay-hover); color: var(--bone); }
/* R-15: separate plain :focus block so this CTA keeps a visible focus ring
   on old parsers that drop the :focus-visible rule below entirely. */
.theta-form-submit:focus {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.theta-form-submit:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.theta-form-submit .period { color: var(--bone); }

/* ----------------------------------------------------------------
   /about - three stacked sections
   ----------------------------------------------------------------*/

.about-section {
  padding: 14vh 0;
  position: relative;
}
.about-section + .about-section { border-top: 1px solid var(--border); }
.about-section[data-surface="ink"] {
  background: var(--ink); color: var(--bone);
  border-color: var(--border-on-ink);
}
.about-section[data-surface="ink"] + .about-section { border-top: none; }
.about-section-inner {
  max-width: var(--content-w); margin: 0 auto; padding: 0 80px;
  /* Single column - the meta sits above the headline (like the hero), so the
     copy lines up at the card's left edge on every about card instead of being
     pushed right behind a 220px meta sidebar (which read as inconsistent
     positioning + a big empty left column). */
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* The about page is text-heavy (capped measures, no media column), so its cards
   run a touch narrower than the global --content-w; the copy fills them and they
   read clean. Other pages keep the wider --content-w. */
body[data-subpage="about"] .subpage-hero-inner,
body[data-subpage="about"] .about-section-inner,
body[data-subpage="about"] .about-team,
body[data-subpage="about"] .case-cta-block-inner {
  max-width: 1040px;
}

.about-section-meta {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stamp-fg);
}
.about-section[data-surface="ink"] .about-section-meta { color: var(--fg-quiet-on-ink); }
.about-section-meta .period { color: var(--clay); margin: 0 6px; }

.about-section-head {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.04; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 32px;
  max-width: 22ch;
}
.about-section[data-surface="ink"] .about-section-head { color: var(--bone); }
.about-section-head em { font-style: italic; color: var(--harbor); font-weight: 400; }
.about-section[data-surface="ink"] .about-section-head em { color: var(--fg-cool-on-ink); }
.about-section-head .period { color: var(--clay); }

.about-section-body {
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 14px;
  max-width: 60ch;
}
.about-section[data-surface="ink"] .about-section-body { color: var(--fg-quiet-on-ink); }
.about-section-body em {
  font-family: var(--font-display); font-style: italic;
  color: var(--harbor); font-weight: 400;
}
.about-section[data-surface="ink"] .about-section-body em { color: var(--fg-cool-on-ink); }

/* Two continents - arc panel position context + spacing.
   SVG + inner element styles live in site.css (.synqa-map-*). */
.about-arc-wrap {
  margin-top: 56px;
  width: 100%;
  aspect-ratio: 1280 / 460;
  position: relative;
}

/* ----------------------------------------------------------------
   /contact - same form as Ch 9, plus offices + press block
   ----------------------------------------------------------------*/

.contact-grid {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 80px 18vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 96px;
}
.contact-meta {
  display: flex; flex-direction: column; gap: 64px;
}
.contact-offices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.contact-office {
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
}
.contact-office-stamp {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
}
.contact-office-stamp.toronto { color: var(--clay); }
.contact-office-stamp.capetown { color: var(--harbor); }
.contact-office-stamp .period { color: var(--clay); }
.contact-office-address {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  color: var(--ink); margin: 0;
  font-style: normal;
}

.contact-press {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.contact-press-stamp {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stone);
}
.contact-press-stamp .period { color: var(--clay); }
.contact-press-list a {
  font-family: var(--font-body); font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid var(--bone-400);
  padding-bottom: 1px;
  display: inline-block; margin-right: 18px;
}
.contact-press-list a:hover { color: var(--clay); border-color: var(--clay); }

.contact-form-col {
  display: flex; flex-direction: column; gap: 16px;
}
.contact-form-stamp {
  font-family: var(--font-mono); font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp); text-transform: uppercase;
  color: var(--stamp-fg);
}
.contact-form-stamp .period { color: var(--clay); margin: 0 6px; }
.contact-form-head {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08; letter-spacing: -0.018em;
  color: var(--ink); margin: 0 0 8px;
}
.contact-form-head .period { color: var(--clay); }

/* Shared footer rules moved to site.css so index.html (which does not
   load subpages.css) inherits them alongside every other page. */

/* ----------------------------------------------------------------
   /theta slot-machine hero (one-off, /theta only).  Four horizontal
   lanes stacked vertically; each lane is one full line of display
   type.  Lane 0 (top) is blank by construction (the target is only
   three lines long: "This / is / Theta."), so it never spins and
   exists purely to give the head its four-line vertical footprint.
   Lanes 1-3 are spinners: each is a fixed-height window of one line-
   height that clips a vertical "tape" of stacked word rows.  The
   tape's first row is the start word, last row is the target word,
   middle rows are brand-clean fillers.  Tape translates upward to
   bring the target row into the window.  Single translateY per lane,
   easeOutQuint, ~1000ms, ~130ms lane-to-lane stagger.

   The static fallback (.slot-static) renders the final state
   instantly and is the only path shown under prefers-reduced-motion
   or no-JS.  The animated path (.slot-stage) is JS-mounted; when
   present it suppresses the static node.

   Brand-rule notes: the trailing period on "Theta." is the section's
   one Clay accent; no italics in this block; no additional accents.
   ----------------------------------------------------------------*/

.theta-slot {
  position: relative;
  /* The full roll headline is long; at the .ch-07-head 96px size it overflows
     the (narrower) hero copy column and clips. Size the slot a notch smaller so
     all three lines fit, and match the static footprint to the same size. */
  font-size: clamp(44px, 5.4vw, 72px);
  min-height: calc(3 * 1.02 * clamp(44px, 5.4vw, 72px));
  max-width: none;
  /* Defensive: never paint past the meta column.  The card sits in
     the next grid track; if a future copy revision pushes the slot
     wider than the column, clip here rather than colliding. */
  overflow: hidden;
}
/* Static fallback.  Visible by default; hidden once JS mounts the
   animated stage.  This is what no-JS, slow-JS, and reduced-motion
   users see. */
.theta-slot .slot-static {
  display: flex;
  flex-direction: column;
}
.theta-slot .slot-static-line {
  display: block;
  min-height: 1.02em;
}
.theta-slot .slot-static .period { color: var(--clay); }

/* Animated stage.  Mounted by subpages.js when motion is allowed.
   The driver toggles display between .slot-static and .slot-stage
   inline; the static node is the baseline on no-JS and reduced. */
.theta-slot .slot-stage {
  display: flex;
  flex-direction: column;
}

/* A lane is one horizontal slot WINDOW (a slot machine turned on its
   side).  It clips its tape along X with overflow:hidden so only the
   cell currently in the window is visible.  The tape is a horizontal
   row of equal-width cells, one word each; JS measures the widest word
   across all lanes and locks every cell + every lane window to that
   width, so each word lands left-aligned at the same x.  Lanes stack
   tightly down the column (the stage is column flex), each one
   line-height of the surrounding .ch-07-head tall. */
.theta-slot .slot-lane {
  display: block;
  position: relative;
  height: 1.02em;
  line-height: 1.02;
  overflow: hidden;
  /* Full width until JS locks it to the measured cell width.  Keeping
     it full-width pre-lock means the static fallback footprint is
     unaffected; the driver narrows it the instant it mounts the tape. */
  width: 100%;
}
.theta-slot .slot-lane.is-blank {
  /* Blank lane: no tape, just reserves the line height.  The  
     in the markup keeps the baseline so font fallback can't collapse
     the strip to zero on slow font load. */
  visibility: hidden;
}
.theta-slot .slot-lane .period { color: var(--clay); }

/* Tape: horizontal row of word cells.  JS sets translateX at frame
   time (right to left for the forward roll); no CSS transition
   (rAF-driven for honest staging). */
.theta-slot .slot-tape {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  will-change: transform;
}
.theta-slot .slot-row {
  flex: 0 0 auto;
  height: 1.02em;
  line-height: 1.02;
  /* One slot position.  JS locks the width to the lane's widest word;
     the word is left-aligned so it sits at the window's left edge when
     its cell is in view.  white-space:nowrap keeps a multi-letter word
     on one line; overflow:hidden clips anything past the cell. */
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

/* Replay / rewind toggle (P4).  Small mono stamp under the head.
   Text-only affordance: no glyphs, no arrows; the Clay period is the
   only accent (one Clay moment per composition rule still respected:
   the period mark on "Theta." is the headline's accent, the period
   on this stamp belongs to the toggle's own composition).
   ---------------------------------------------------------------- */
.theta-slot-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  /* Negative top margin pulls the toggle close to the head, so it
     reads as an annotation of the slot rather than a separate row in
     the column gap.  The .ch-07-meta parent uses gap:28px; we want
     ~10px of breathing room above the toggle. */
  margin: -18px 0 0;
  cursor: pointer;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--fs-stamp);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--stone);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color 120ms var(--ease-standard);
}
.theta-slot-toggle:hover { color: var(--ink); }
/* R-15: separate plain :focus block so this control keeps a visible focus
   ring on old parsers that drop the :focus-visible rule below entirely. */
.theta-slot-toggle:focus {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.theta-slot-toggle:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.theta-slot-toggle .label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--bone-400, currentColor);
}
.theta-slot-toggle .period { color: var(--clay); }
.theta-slot-toggle[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.4;
}

/* ----------------------------------------------------------------
   /theta hero card - preview screenshot variant.  Replaces the
   sample-chat composition with the actual Theta app preview image.
   The outer .ch-07-card (styled in pass3.css) carries the Bone-100
   surface, hairline border, padding, and the M09 slide-in tween;
   this block only restyles the inner image holder so the screenshot
   sits cleanly inside the card.  Keep the head + foot mono stamps
   from the original markup so the card still reads as a labelled
   artifact, not a bare image dump.
   ---------------------------------------------------------------- */
.ch-07-card-preview .ch-07-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hairline frame around the image keeps the "card within card"
     read and prevents a screenshot with a near-bone background from
     dissolving into the surface. */
  border: 1px solid var(--bone-400);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bone);
}
.ch-07-card-preview .ch-07-card-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* Aspect ratio is preserved by height:auto; no fixed dimensions so
     a future screenshot replacement with a different ratio works
     without a CSS edit. */
}

/* ----------------------------------------------------------------
   Responsive (light pass - pass 4-mobile is its own composition,
   covered in the brief's section 9; this is just enough to keep
   sub-pages from breaking at narrower widths in review)
   ----------------------------------------------------------------*/

@media (max-width: 1023px) {
  /* Sticky nav opacity (item: /about sec4 "Five people. Two cities." ghost).
     The subpage nav is rgba(...,0.92) + a 12px backdrop blur; on mobile the
     blur is frequently dropped/unreliable, so the large dark display heading
     bled through the 0.92 fill as a ghost band. On mobile make the nav FULLY
     opaque so it always occludes the content scrolling under it. The Ink-surface
     variant gets a solid Ink fill for the same reason. */
  body[data-subpage] .shell-nav {
    background: var(--bone);
  }
  body[data-subpage][data-surface="ink"] .shell-nav {
    background: var(--ink);
  }

  .subpage-hero-inner,
  .case-hero-inner,
  .theta-section-inner,
  .theta-waitlist-inner,
  .case-section-inner,
  .case-cta-block-inner,
  .about-section-inner,
  .contact-grid { padding: 0 32px; }

  /* work-grid: replace Nvh with scale tokens; tablet work-row
     tightened to match the phone-level padding in mobile.css. */
  .work-grid { padding: 0 32px var(--m-section-gap); }
  .work-row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: var(--m-space-md) 0;
  }
  .work-row-metric-wrap { justify-self: start; }
  .work-row-cta { justify-self: start; }

  .case-metric-band { grid-template-columns: 1fr; gap: 32px; }
  .case-section-inner { grid-template-columns: 1fr; gap: 24px; }
  .theta-steps { grid-template-columns: 1fr; }
  .theta-channels-grid { grid-template-columns: 1fr 1fr; }
  .theta-waitlist-inner { grid-template-columns: 1fr; gap: 48px; }
  .theta-form-row-grid { grid-template-columns: 1fr; }
  .about-section-inner { grid-template-columns: 1fr; gap: 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 64px; }
  .contact-offices { grid-template-columns: 1fr; }
  /* subpage-footer-inner and subpage-footer-bottom responsive rules
     now live in site.css alongside the other shared footer rules. */

  /* Item: hero body too long on phones. On /holm and /rewrite the
     .ch-07-body contains 3 full paragraphs (~140 words) that stack above
     the CTA card on mobile, pushing "Sit with us." / "Join the waitlist."
     far below the fold. On phones, show only the first paragraph; the
     remaining paragraphs carry supporting detail that works below the fold.
     Desktop is unaffected (rule is inside this media query).
     /patchpal: the third paragraph contains the brand-essential italic
     ("The road remembers the ones you skipped.") -- that line stays; hide
     the second paragraph instead so the voice lands and the CTA rises.
     /theta: 2 short paragraphs that work on mobile -- no rule applied. */
  body[data-subpage="holm"] .ch-07-body p:nth-child(n+2),
  body[data-subpage="rewrite"] .ch-07-body p:nth-child(n+2) {
    display: none;
  }
  body[data-subpage="patchpal"] .ch-07-body p:nth-child(2) {
    display: none;
  }

  /* Item: the italic phrase on the Harbor "Why We Built It" card
     ("We've sat in the chair" on /holm, "Every version of you is still in
     revision." on /rewrite, "Someone had to keep the list." on /patchpal)
     rendered low-contrast. Each page's inline <style> sets the em to Bone
     but at opacity:0.78, which desaturates it on the dark teal. AGENTS.md
     section 4: italic-serif on Harbor goes Bone-100 (full strength). Reset
     the opacity on mobile/tablet so it reads at full Bone. !important is
     needed to beat the page's inline-style-block rule; scoped to the mobile
     composition so desktop rendering is untouched (the desktop 0.78 is a
     separate pre-existing brand item, flagged for a desktop pass).
     /patchpal was missed in the pass-2 fix -- added here alongside holm
     and rewrite. */
  body[data-subpage="holm"] .theta-section.is-harbor .theta-why-body em,
  body[data-subpage="rewrite"] .theta-section.is-harbor .theta-why-body em,
  body[data-subpage="patchpal"] .theta-section.is-harbor .theta-why-body em {
    opacity: 1 !important;
  }
}

/* Item: the Harbor quote-card body ("Why We Built It") reads a touch heavy at
   tablet width. Phones keep the 20px from mobile.css; on the tablet sub-band
   (601-1023px) trim it so the quote card sits in proportion to the wider card.
   Scoped to the field pages with a body selector so it out-specifies the bare
   .theta-why-body:20px in mobile.css (which loads after this file). */
@media (min-width: 601px) and (max-width: 1023px) {
  body[data-subpage] .theta-section.is-harbor .theta-why-body {
    font-size: 18px;
    line-height: 1.5;
  }
}

/* ----------------------------------------------------------------
   Privacy-inquiry page: extend ch-09-form input styles to <select>.
   The select sits on a Bone-100 card (same as .ch-09-form), so it
   inherits the same border, focus ring, and Clay period rules.
   ---------------------------------------------------------------- */
.ch-09-form select {
  font-family: var(--font-body); font-size: 16px;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: 46px;
  outline: none;
  appearance: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard);
  /* Custom caret: a minimal Clay chevron rendered as a data-URI so no
     extra asset is needed. The token values are inlined since
     background-image cannot reference CSS custom properties. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B5573A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.ch-09-form select:hover { border-color: var(--ink); }
/* R-15: plain :focus in its OWN rule block (not grouped with :focus-visible)
   so an old parser that drops an unknown :focus-visible selector still keeps
   this rule intact and the select keeps a visible focus ring. */
.ch-09-form select:focus {
  border-color: var(--clay);
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
.ch-09-form select:focus-visible {
  border-color: var(--clay);
  outline: 2px solid var(--clay);
  outline-offset: 2px;
}
/* Muted placeholder option */
.ch-09-form select option[disabled] { color: var(--stone); }



/* ----------------------------------------------------------------
   Lightbox gallery mode: enlarged media + thumbnail strip + prev/next.
   Shown only when data-gallery-mode is set on .media-lightbox.
   The .media-lightbox-gallery wrapper is injected by subpages.js;
   it replaces the bare stage layout with a column: media-row, strip,
   nav row. Prev/next sit outside the column in absolute position so
   they do not push the strip down on narrow screens.
   ---------------------------------------------------------------- */
.media-lightbox-gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: min(1280px, 94vw);
  position: relative;
}

/* The enlarged media row: contains .media-lightbox-stage. */
.media-lightbox-media-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
}

/* Override stage sizing when inside gallery wrapper. */
.media-lightbox-gallery .media-lightbox-stage {
  max-width: 100%;
  max-height: 65vh;
  max-height: 65svh;
  transform: none;
  transition: none;
}

.media-lightbox[data-open="true"] .media-lightbox-gallery .media-lightbox-stage {
  transform: none;
}

.media-lightbox-gallery .media-lightbox-stage img,
.media-lightbox-gallery .media-lightbox-stage video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 65vh;
  max-height: 65svh;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--bone);
  box-shadow: 0 24px 70px rgba(31, 24, 20, 0.5);
}

/* Thumbnail strip inside the lightbox. */
.media-lightbox-thumb-strip {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 4px;
}

.media-lightbox-thumb {
  background: transparent;
  border: 1px solid rgba(240, 234, 216, 0.35);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 64px;
  aspect-ratio: 3 / 2;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.media-lightbox-thumb[aria-pressed="true"] {
  border-color: var(--clay);
  outline: 2px solid var(--clay);
  outline-offset: 1px;
}

.media-lightbox-thumb:hover {
  border-color: rgba(240, 234, 216, 0.7);
}

.media-lightbox-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Prev/next buttons: live inside .media-lightbox-media-row.
   On desktop (>=768px) they float to the sides of the stage via
   absolute positioning on the media-row (position: relative).
   On mobile (<768px) they display as inline flex children so the
   row becomes [prev] [stage] [next] in a flex row with wrapping. */
.media-lightbox-prev,
.media-lightbox-next {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--bone);
  border: 1px solid rgba(240, 234, 216, 0.4);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              background var(--dur-fast, 200ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.media-lightbox-prev:hover,
.media-lightbox-next:hover {
  border-color: var(--bone);
  background: rgba(240, 234, 216, 0.1);
}

.media-lightbox-prev:disabled,
.media-lightbox-next:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.media-lightbox-prev svg,
.media-lightbox-next svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

/* Desktop: absolute-position the buttons outside the stage so they
   do not compress the media frame. The media-row is position:relative. */
@media (min-width: 768px) {
  .media-lightbox-prev,
  .media-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  .media-lightbox-prev { left: -56px; }
  .media-lightbox-next { right: -56px; }
}

/* Mobile: prev/next are inline flex children flanking the stage. */
@media (max-width: 767px) {
  .media-lightbox-media-row {
    gap: 8px;
  }
}

/* ----------------------------------------------------------------
   /work full-page fixed background map (concept B).  Scoped to the
   work sub-page only.  A faint Ink coastline silhouette sits behind
   the whole page (z-index:-1, above the body Bone, below the
   transparent normal-flow content).  A left+right bleed mask makes
   the map strong at the outer margins and faint (0.14) behind the
   centred content.  Each Clay city pin drops in (M02) as its case
   entry scrolls into view; subpages.js toggles data-on.

   The old sticky rail map (.work-map) is hidden here but its markup
   is kept so subpages.js can copy its coast path into the bgmap and
   keep the case-entry reveals / active logic in runWorkMap() alive.
   The impact tally (.work-tally) stays in the right column.
   ---------------------------------------------------------------- */
/* The fixed map sits at z-index:-1, ABOVE the html Bone canvas but BELOW the
   page content. body's own opaque Bone (site.css) would paint over it, so drop
   it to transparent on this page only - html keeps the Bone canvas behind. */
body[data-subpage="work"] { background: transparent; }

[data-subpage="work"] .work-bgmap {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Strong at both edges, faint in the centre so the words read over it. */
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.14) 50%, #000 100%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0.14) 50%, #000 100%);
  /* The map stays hidden over the hero and fades in only as the first case
     entry (Theta) arrives - subpages.js adds .is-on (idempotent). */
  opacity: 0;
  transition: opacity 0.9s var(--ease-out);
}
[data-subpage="work"] .work-bgmap.is-on { opacity: 1; }
[data-subpage="work"] .work-bgmap svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Direction-flip stability (pass 8, re-landed 8.1): same freeze as .synqa-bg
   (synqa-backgrounds.css mobile block). The map is flex-CENTERED, so a fixed
   inset:0 box tracking the iOS dynamic viewport re-centres the continents on
   every toolbar swing. Top-anchor + the FROZEN px token (raw 100lvh was
   falsified on-device: it re-resolves per direction change in the
   frame-resize webview world - see the .synqa-bg note). */
@media (max-width: 1023px), (pointer: coarse) {
  [data-subpage="work"] .work-bgmap {
    inset: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--lvh-px, 1vh) * 100);
  }
}
/* Faint Ink silhouette with a quiet Harbor edge: the fill stays a faint Ink
   wash; a hairline non-scaling Harbor stroke edges the continents so they
   read as outlined land, not just a flat fill. */
[data-subpage="work"] .work-bgmap-coast {
  fill: #1F1814;
  fill-opacity: 0.085;
  stroke: #1F4D4A;
  stroke-opacity: 0.20;
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}
/* Pin drop: falls in from above and settles when its entry enters view.
   The pulsing ring (bgRing) animation is inline on the ring <circle>. */
[data-subpage="work"] .bgpin {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.55s var(--ease-out), transform 0.6s var(--ease-out);
}
[data-subpage="work"] .bgpin[data-on="1"] {
  opacity: 1;
  transform: translateY(0);
}
/* Pin OOMPH: a bigger Clay dot + a stronger ring; the .pop class (toggled by JS
   each time a project at that city scrolls by) fires a one-shot scale POP so the
   pin visibly RE-ITERATES. */
[data-subpage="work"] .bgpin-dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.45);
}
[data-subpage="work"] .bgpin-ring {
  stroke-width: 2;
  stroke-opacity: 0.75;
}
[data-subpage="work"] .bgpin.pop .bgpin-dot {
  animation: bgPop 0.6s var(--ease-out);
}

/* Hide the old sticky rail map (keep the markup for the JS coast copy +
   the entry-reveal observer); the tally stays in the right column. */
[data-subpage="work"] .work-map { display: none; }

/* ── Product hero mark ──────────────────────────────────────────────────────
   Sizing and flex rules moved to site.css (.product-hero-mark) so index.html
   (which does not load subpages.css) also gets them via .ch-07-hero-row. */