/* ============================================================
   FourOneSix IT — Website V2 — Site styles
   Linear-inspired restraint. Typography does the heavy lifting.
   ============================================================ */

/* ------------------------------------------------------------
   TOP NAV — sticky, minimal, quiet
   ------------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out);
}
.nav.is-scrolled {
  border-bottom-color: var(--c-line);
}
.nav__inner {
  max-width: var(--content-nav);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  transition: height var(--dur-base) var(--ease-out);
}
.nav.is-scrolled .nav__inner {
  height: var(--nav-h-scrolled);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;           /* no extra leading around the <img> */
  color: var(--c-ink);
}
.nav__brand img {
  /* Prominent logo — scales down proportionally when nav shrinks on scroll,
     and at smaller viewports. Aspect ratio preserved via width: auto. */
  height: 80px;
  width: auto;
  transition: height var(--dur-base) var(--ease-out);
}
.nav.is-scrolled .nav__brand img {
  height: 42px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.nav__links a {
  position: relative;
  padding: var(--sp-2) 0;
  font-weight: 450;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a:hover {
  color: var(--c-ink);
}
.nav__menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
}
@media (max-width: 840px) {
  .nav__links { display: none; }
  .nav__menu-btn { display: inline-flex; }
  .nav__inner { padding: 0 var(--sp-5); }
  .nav__brand img { height: 56px; }
  .nav.is-scrolled .nav__brand img { height: 36px; }
}

.nav__mobile {
  display: none;
  border-top: 1px solid var(--c-line);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: var(--c-bg);
}
.nav__mobile.is-open { display: block; }
.nav__mobile a {
  display: block;
  padding: var(--sp-3) 0;
  font-size: var(--fs-md);
  color: var(--c-ink-2);
  border-bottom: 1px solid var(--c-line);
}
.nav__mobile a:last-of-type { border-bottom: 0; }

/* ------------------------------------------------------------
   GLOBAL LAYOUT
   ------------------------------------------------------------ */
main { display: block; }

.section {
  padding: var(--sp-10) 0;
  border-bottom: 1px solid var(--c-line);
}
.section:last-of-type { border-bottom: 0; }
.section--dark {
  background: var(--c-bg-dark);
  color: var(--c-ink-on-dark);
  border-bottom-color: transparent;
}
.section--dark .section__eyebrow { color: var(--c-ink-on-dark-2); }
.section--dark .section__kicker { color: var(--c-ink-on-dark-2); }

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--sp-6);
}
.container--wide {
  max-width: var(--content-wide);
}

.section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 450;
  color: var(--c-ink-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  margin: 0 0 var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.section__mark {
  display: inline-block;
  width: 18px;
  height: 18px;
  color: var(--c-accent);
  flex: 0 0 auto;
}
.section--dark .section__mark { color: var(--c-accent); }

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero {
  padding: var(--sp-11) 0 var(--sp-10);
  border-bottom: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
  background: var(--c-bg);
}
/* Warm gradient wash — morning light in the upper-right corner.
   Positioned with radial-gradient rather than an SVG so it scales
   natively and respects the page flow. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      900px 520px at 92% 8%,
      rgba(237, 125, 58, 0.14) 0%,
      rgba(237, 125, 58, 0.06) 38%,
      transparent 72%
    ),
    radial-gradient(
      540px 380px at 6% 110%,
      rgba(237, 125, 58, 0.05) 0%,
      transparent 70%
    );
  pointer-events: none;
  z-index: 0;
}
.hero__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  position: relative;
  z-index: 1;
}
/* Corner signature mark — abstract composition, orange-accented */
.hero__mark {
  position: absolute;
  top: var(--sp-8);
  right: var(--sp-6);
  width: 112px;
  height: 112px;
  color: var(--c-accent);
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 900px) {
  .hero__mark { width: 72px; height: 72px; opacity: 0.45; }
}
@media (max-width: 640px) {
  .hero__mark { display: none; }
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 450;
  color: var(--c-ink-3);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  margin: 0 0 var(--sp-6);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.hero__eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-ink-3);
}
.hero__headline {
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 500;
  margin: 0 0 var(--sp-7);
  max-width: 20ch;
  color: var(--c-ink);
}
.hero__headline em {
  font-style: normal;
  color: var(--c-ink-3);
}
.hero__headline .accent {
  color: var(--c-accent-ink);
  font-style: normal;
}
.hero__lede {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-body);
  color: var(--c-ink-2);
  max-width: 58ch;
  margin: 0 0 var(--sp-8);
  font-weight: 400;
}
.hero__actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-9);
}
.hero__meta {
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.hero__meta-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--c-ink-4);
}
.hero__meta-value {
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  font-weight: 450;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 48px;
  padding: 0 var(--sp-5);
  font-size: var(--fs-base);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: all var(--dur-fast) var(--ease-out);
  letter-spacing: var(--ls-body);
}
.btn--primary {
  background: var(--c-ink);
  color: var(--c-bg);
}
.btn--primary:hover {
  background: var(--c-accent);
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
}
.btn--ghost:hover {
  border-color: var(--c-ink);
  background: var(--c-bg-2);
}
.btn__arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow {
  transform: translateX(2px);
}

/* ------------------------------------------------------------
   PAGE HERO
   ------------------------------------------------------------
   Sub-page hero: smaller and quieter than the home page hero.
   The home hero earns its dramatic display type because it's
   doing positioning work; sub-pages just need to set the topic
   and lede before the content begins.
   ------------------------------------------------------------ */
.page-hero {
  padding: var(--sp-10) 0 var(--sp-9);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
  position: relative;
  overflow: hidden;
  /* Uniform hero height across sub-pages (about / contact / stories /
     disciplines) so the bigtype wordmark anchored to the bottom doesn't
     shift between page navigations. Tall enough to accommodate the
     longest current lede with comfortable breathing room. */
  min-height: clamp(440px, 58vh, 620px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 720px) {
  .page-hero { min-height: clamp(360px, 64vh, 520px); }
}
/* Same warm corner wash as the home hero, but softer — sub-pages
   shouldn't shout. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      720px 420px at 92% 8%,
      rgba(237, 125, 58, 0.10) 0%,
      rgba(237, 125, 58, 0.04) 38%,
      transparent 72%
    );
  pointer-events: none;
  z-index: 0;
}
.page-hero > .container {
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 var(--sp-6);
  max-width: 22ch;
}
.page-hero h1 em {
  font-style: normal;
  color: var(--c-ink-3);
}
.page-hero h1 .accent {
  color: var(--c-accent-ink);
  font-style: normal;
}
.page-hero__lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  max-width: 60ch;
  margin: 0;
  font-weight: 400;
}

/* Pre-footer contact band — a hook for the contact section when it's
   used at the bottom of a sub-page (vs. on the dedicated /contact/
   page). No layout changes for now; the .section base handles padding
   and the divider. Reserved so we can tune it later (e.g. give it a
   subtle background) without touching every page. */
.contact-band { /* intentionally empty — see comment above */ }

/* ------------------------------------------------------------
   SECTION — DISCIPLINES (teaser tiles)
   ------------------------------------------------------------
   Compact tile grid used on the home page and the /disciplines/
   index. Each tile is a thin card with an index label, a short
   title, and a one-line framing. Hover lifts the arrow.

   The goal is to make the shape of the practice legible at a
   glance — you scan twelve names and understand the surface
   area without clicking anything. Then the interested reader
   clicks through.
   ------------------------------------------------------------ */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--c-line);
  border-left: 1px solid var(--c-line);
}
@media (max-width: 1024px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .tiles { grid-template-columns: 1fr; }
}
.tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* top-justify so titles align across tiles */
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
  color: var(--c-ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
  position: relative;
  min-height: 180px;
}
.tile:hover {
  background: var(--c-bg-2);
}
.tile__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.tile__title {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-2);
  color: var(--c-ink);
}
.tile__sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--c-ink-2);
  margin: 0;
}
.tile__arrow {
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-6);
  font-family: var(--font-mono);
  color: var(--c-ink-4);
  transition: transform var(--dur-fast) var(--ease-out),
              color    var(--dur-fast) var(--ease-out);
}
.tile:hover .tile__arrow {
  color: var(--c-accent-ink);
  transform: translate(2px, -2px);
}

/* Section-trailing "view all" link — used on the home page after
   the Stories teaser and under the Disciplines tiles. Not a button;
   a sentence with an arrow. */
.section__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: var(--sp-2);
  transition: color var(--dur-fast) var(--ease-out);
}
.section__link:hover { color: var(--c-ink); }
.section__link::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease-out);
}
.section__link:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------
   STORY TEASER CARD (home page)
   ------------------------------------------------------------
   Compact 3-up grid of case studies on the home page. Each card
   links to the full narrative on /stories/. Deliberately less
   dense than the full .story block — sector, headline, one-line
   outcome, link.
   ------------------------------------------------------------ */
.stories-teaser {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
@media (max-width: 900px) {
  .stories-teaser { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .stories-teaser { grid-template-columns: 1fr; }
}
.story-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  color: var(--c-ink);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform    var(--dur-fast) var(--ease-out);
}
.story-card:hover {
  border-color: var(--c-ink-4);
}
.story-card__sector {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0;
}
.story-card__title {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0;
  color: var(--c-ink);
}
.story-card__outcome {
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--c-ink-2);
  margin: 0;
}
.story-card__cta {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}

/* ------------------------------------------------------------
   ABOUT TEASER (home page)
   ------------------------------------------------------------
   The home page shows a tight summary of the firm + a link to
   the full About page. The full principal card and extended
   bio live on /about/. This keeps the home page from doubling
   as an "About page in disguise."
   ------------------------------------------------------------ */
.about-teaser p {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-5);
  max-width: 62ch;
}
.about-teaser p:last-of-type { margin-bottom: var(--sp-6); }

/* ------------------------------------------------------------
   CTA BAND (home page)
   ------------------------------------------------------------
   Smaller than the full contact form. Used on the home page as
   a pre-footer nudge to book a call — the full form lives on
   /contact/.
   ------------------------------------------------------------ */
.cta-band {
  background: var(--c-bg-dark);
  color: var(--c-ink-on-dark);
  border-bottom: 0;
  position: relative;
  overflow: hidden;
}
.cta-band > .container {
  position: relative;
  z-index: 1;
}
/* Signal-emitter watermark — third in the home-page sequence.
   Cream on dark, slightly higher opacity than the grey-on-light
   variants because light-on-dark reads fainter at the same value. */
.cta-band__watermark {
  position: absolute;
  top: 50%;
  left: -38%;
  transform: translateY(-50%);
  width: clamp(1000px, 135vw, 2000px);
  height: clamp(1000px, 135vw, 2000px);
  color: var(--c-ink-on-dark);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.cta-band__watermark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@media (max-width: 720px) {
  .cta-band__watermark {
    width: clamp(700px, 170vw, 1200px);
    height: clamp(700px, 170vw, 1200px);
    opacity: 0.05;
    left: -60%;
  }
}
.cta-band .section__eyebrow { color: var(--c-ink-on-dark-2); }
.cta-band .section__mark { color: var(--c-accent); }
.cta-band h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-6);
  max-width: 22ch;
  color: var(--c-ink-on-dark);
}
.cta-band p {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-ink-on-dark-2);
  margin: 0 0 var(--sp-7);
  max-width: 60ch;
}
.cta-band__actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  align-items: center;
}
.cta-band__direct {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-on-dark-2);
}
.cta-band__direct a {
  color: var(--c-ink-on-dark);
  border-bottom: 1px solid var(--c-line-dark);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.cta-band__direct a:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}
/* On dark, the ghost button needs brighter ink so it reads as
   a control rather than a shadow. */
.cta-band .btn--ghost {
  color: var(--c-ink-on-dark);
  border-color: var(--c-line-dark);
}
.cta-band .btn--ghost:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

/* ------------------------------------------------------------
   SECTION — WHAT I DO
   Two-column: left intro, right list of capability statements.
   ------------------------------------------------------------ */
.what {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 840px) {
  .what {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
}
.what__intro h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-5);
  max-width: 16ch;
}
.what__intro p {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0;
  max-width: 40ch;
}
.what__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-line);
}
.what__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--c-line);
}
.what__item-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  padding-top: 8px;
}
@media (max-width: 640px) {
  .what__item {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}
.what__item h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-3);
  color: var(--c-ink);
}
.what__item p {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0;
  max-width: 58ch;
}

/* ------------------------------------------------------------
   SECTION — HOW I WORK (DARK)
   The differentiated methodology, on the dark band.
   ------------------------------------------------------------ */
.how h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-6);
  max-width: 22ch;
  color: var(--c-ink-on-dark);
}

.how__lede {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-ink-on-dark-2);
  max-width: 62ch;
  margin: 0 0 var(--sp-9);
}
.how__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-line-dark);
  border: 1px solid var(--c-line-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (max-width: 720px) {
  .how__grid { grid-template-columns: 1fr; }
}
.how__cell {
  background: var(--c-bg-dark);
  padding: var(--sp-7);
}
.how__cell-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-ink-on-dark-2);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  margin: 0 0 var(--sp-4);
}
.how__cell h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-3);
  color: var(--c-ink-on-dark);
}
.how__cell p {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-ink-on-dark-2);
  margin: 0;
}

/* ------------------------------------------------------------
   SECTION — CASE STORIES
   Long-form, narrative, anonymized.
   ------------------------------------------------------------ */
.stories h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-9);
  max-width: 26ch;
}
.story {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--c-line);
}
.story:last-child { border-bottom: 1px solid var(--c-line); }
@media (max-width: 840px) {
  .story {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}
.story__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-ink-3);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  padding-top: 6px;
}
.story__meta-row span:first-child {
  display: block;
  color: var(--c-ink-4);
  margin-bottom: 2px;
}
.story__meta-row span:last-child {
  color: var(--c-ink-2);
  text-transform: none;
  font-family: var(--font-sans);
  letter-spacing: var(--ls-body);
  font-size: var(--fs-sm);
}
.story__body h3 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-5);
  max-width: 24ch;
}
.story__body p {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-4);
  max-width: 62ch;
}
.story__outcome {
  margin-top: var(--sp-5);
  padding: var(--sp-5) var(--sp-5);
  background: var(--c-bg-2);
  border-left: 2px solid var(--c-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.story__outcome-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--c-accent-ink);
  margin: 0 0 var(--sp-2);
  font-weight: 500;
}
.story__outcome p {
  font-size: var(--fs-base);
  color: var(--c-ink);
  margin: 0;
  line-height: var(--lh-base);
}

/* ------------------------------------------------------------
   Case-studies graphics — per-story watermarks + small marks.
   Each story has a unique mark designed for its narrative
   (envelope→identity, datacenter exit, dissolved perimeter).
   The mark appears small in the eyebrow and oversized as a
   recessive watermark behind the meta column. Watermarks
   alternate sides (L → R → L) for visual rhythm.
   ------------------------------------------------------------ */
.story {
  position: relative;
  overflow: hidden;
}
.story > .story__meta,
.story > .story__body {
  position: relative;
  z-index: 1;
}
.story__watermark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(280px, 38vw, 520px);
  height: clamp(280px, 38vw, 520px);
  color: var(--c-ink-3);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.story__watermark--left  { left: -8%; }
.story__watermark--right { right: -8%; }
.story__watermark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@media (max-width: 840px) {
  .story__watermark {
    width: clamp(260px, 70vw, 420px);
    height: clamp(260px, 70vw, 420px);
    opacity: 0.04;
  }
  .story__watermark--left  { left: -22%; }
  .story__watermark--right { right: -22%; }
}

/* Per-story eyebrow — sits above the H3, gives the small mark
   a home and adds Case study · 0X numbering for rhythm. */
.story__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0 0 var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.story__mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--c-accent);
}

/* ------------------------------------------------------------
   Stories hero watermark — fanned-arc motif. Three trajectories
   sharing one anchor, terminating at progressively higher and
   farther positions; the longest arc has an outlined endpoint
   suggesting "still open." Same recessive grey as the
   discipline-hero watermark, left-positioned to balance the
   typographic hero on the right.
   ------------------------------------------------------------ */
.stories-hero__watermark {
  position: absolute;
  top: 50%;
  left: -4%;
  transform: translateY(-50%);
  width: clamp(520px, 72vw, 1080px);
  height: clamp(360px, 50vw, 760px);
  color: var(--c-ink-3);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.stories-hero__watermark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@media (max-width: 720px) {
  .stories-hero__watermark {
    width: clamp(380px, 95vw, 640px);
    height: clamp(260px, 65vw, 460px);
    opacity: 0.05;
    left: -16%;
  }
}

/* ------------------------------------------------------------
   SECTION — WHO THIS IS FOR / NOT FOR
   Two-column qualifier.
   ------------------------------------------------------------ */
.fit h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-9);
  max-width: 22ch;
}
.fit__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
}
@media (max-width: 720px) {
  .fit__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.fit__col {
  padding: var(--sp-7);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-bg);
}
.fit__col--yes {
  background: var(--c-bg);
  border-color: var(--c-ink);
}
.fit__col-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  margin: 0 0 var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-ink-3);
}
.fit__col--yes .fit__col-label { color: var(--c-ink); }
.fit__col--yes .fit__col-label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--c-accent);
}
.fit__col--no .fit__col-label::before {
  content: "";
  width: 8px;
  height: 1px;
  background: var(--c-ink-4);
}
.fit__col h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-5);
  max-width: 20ch;
}
.fit__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fit__col li {
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}
.fit__col li:first-child { border-top: 0; padding-top: 0; }

/* ------------------------------------------------------------
   SECTION — ABOUT
   Firm first, principal as supporting aside. Where the personal /
   first-name-basis content lives so the homepage itself stays
   company-voiced.
   ------------------------------------------------------------ */
.about h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-8);
  max-width: 22ch;
}
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 840px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
}
.about__firm h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-5);
  color: var(--c-ink);
}
.about__firm p {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-5);
  max-width: 62ch;
}
.about__firm p:last-child { margin-bottom: 0; }

.about__principal {
  padding: var(--sp-7);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  position: relative;
}
.about__portrait {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  margin: 0 0 var(--sp-4);
}
.about__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(0.9) contrast(1.03);
}
.about__principal-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--c-ink-3);
  margin: 0 0 var(--sp-2);
}
.about__principal-name {
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: var(--ls-heading);
  color: var(--c-ink);
  margin: 0 0 var(--sp-1);
}
.about__principal-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--c-accent-ink);
  margin: 0 0 var(--sp-5);
}
.about__principal-bio {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0;
}

/* ------------------------------------------------------------
   SECTION — REVIEWS (Google)
   Loaded dynamically from /api/reviews
   ------------------------------------------------------------ */
.reviews__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
  flex-wrap: wrap;
}
.reviews__header h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0;
  max-width: 22ch;
}
.reviews__header-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--c-ink-3);
}
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 900px) { .reviews__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reviews__grid { grid-template-columns: 1fr; } }
.review {
  padding: var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.review__stars {
  color: var(--c-accent);
  font-size: var(--fs-sm);
  letter-spacing: 2px;
}
.review__text {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0;
  flex: 1;
}
.review__attr {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
}
.review__attr-name { color: var(--c-ink); font-weight: 500; }
.review__attr-time { color: var(--c-ink-3); font-size: var(--fs-xs); }
.reviews__skeleton {
  height: 180px;
  background: var(--c-bg-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-line);
}

/* ------------------------------------------------------------
   SECTION — CONTACT
   ------------------------------------------------------------ */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-9);
  align-items: start;
}
@media (max-width: 840px) {
  .contact { grid-template-columns: 1fr; gap: var(--sp-7); }
}
.contact__intro h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 500;
  margin: 0 0 var(--sp-5);
  max-width: 16ch;
}
.contact__intro p {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-7);
  max-width: 44ch;
}
.contact__direct {
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
}
.contact__direct-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
}
.contact__direct-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--c-ink-4);
  width: 96px;
  flex: 0 0 auto;
}
.contact__direct a {
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.contact__direct a:hover {
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}

.form {
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: var(--sp-7);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;           /* let grid children shrink below input intrinsic width */
}
.form__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--c-ink-3);
}
.form__input, .form__textarea, .form__select {
  width: 100%;            /* fill the grid cell rather than the browser default */
  max-width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--c-ink);
  letter-spacing: var(--ls-body);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: 0;
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent);
}
.form__textarea {
  min-height: 140px;
  resize: vertical;
  line-height: var(--lh-base);
}
.form__honey {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}
.form__submit {
  align-self: start;
  margin-top: var(--sp-2);
}
.form__status {
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  min-height: 1.2em;
}
.form__status.is-error { color: #B82222; }
.form__status.is-ok    { color: #2A7F3F; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.footer {
  padding: var(--sp-9) 0 var(--sp-7);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
}
.footer__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-7);
}
@media (max-width: 720px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
.footer__brand img { height: 28px; margin-bottom: var(--sp-4); }
.footer__brand p {
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
  max-width: 36ch;
  line-height: var(--lh-base);
  margin: 0;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--c-ink-4);
  margin: 0 0 var(--sp-4);
  font-weight: 450;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.footer__col a { color: var(--c-ink-2); }
.footer__col a:hover { color: var(--c-ink); }
.footer__bottom {
  max-width: var(--content-wide);
  margin: var(--sp-8) auto 0;
  padding: var(--sp-5) var(--sp-6) 0;
  border-top: 1px solid var(--c-line);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--c-ink-4);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
}

/* ------------------------------------------------------------
   CREDENTIALS STRIP (just above footer)
   ------------------------------------------------------------ */
.creds {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
}
.creds__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
  flex-wrap: wrap;
}
.creds__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);
  color: var(--c-ink-4);
}
.creds__items {
  display: flex;
  gap: var(--sp-7);
  align-items: center;
  flex-wrap: wrap;
}
.creds__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
}
.creds__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  color: var(--c-ink-3);
}

/* ============================================================
   Discipline page — editorial layouts
   ------------------------------------------------------------
   Classes used on individual discipline pages to break away
   from the about__grid two-column template, so each page
   can have its own rhythm while sharing DNA (nav, footer,
   hero, CTA band, connected-to tiles).

   Conventions:
   - .prose-narrow    narrower column for long-form reading
   - .disc-lede       oversized opening paragraph
   - .compare         two-up comparison block
   - .unlock-list     styled list for "what this opens up"
   - .pullquote       big-type callout for a single sentence
   - .ceiling         frame for the capability-ceiling SVG
   - .section-head    alternate section-header treatment used
                      instead of the eyebrow for body sections
   ============================================================ */

.prose-narrow {
  max-width: 680px;
  margin: 0 auto;
}
.prose-narrow p {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-5);
}
.prose-narrow p strong {
  color: var(--c-ink);
  font-weight: 500;
}

.disc-lede {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem) !important;
  line-height: var(--lh-snug) !important;
  color: var(--c-ink) !important;
  letter-spacing: var(--ls-heading);
  margin-bottom: var(--sp-6) !important;
}

.section-head {
  max-width: 680px;
  margin: 0 auto var(--sp-6);
}
.section-head__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: var(--sp-3);
}
.section-head h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--c-ink);
  margin: 0;
}
.section-head h2 em {
  font-style: italic;
  color: var(--c-accent-ink);
}

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin: var(--sp-6) 0;
}
.compare--three {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 960px) {
  .compare--three { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .compare { grid-template-columns: 1fr; }
}
.compare__card {
  padding: var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.compare__card--muted {
  background: var(--c-bg-2);
}
.compare__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.compare__h {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--c-ink);
  margin: 0;
  font-weight: 500;
}
.compare__body {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0;
}

.unlock-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-6) auto 0;
  max-width: 720px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-6);
}
@media (max-width: 560px) {
  .unlock-list { grid-template-columns: 1fr; }
}
.unlock-list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink-2);
}
.unlock-list li::before {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--c-accent);
  line-height: 1.4;
  flex-shrink: 0;
}
.unlock-list strong {
  display: block;
  color: var(--c-ink);
  font-weight: 500;
  margin-bottom: 2px;
}

.pullquote {
  position: relative;
  max-width: 860px;
  margin: var(--sp-8) auto;
  padding: var(--sp-7) 0 var(--sp-6) var(--sp-7);
  font-size: clamp(1.625rem, 3.2vw, 2.5rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--c-ink);
  font-weight: 500;
  text-align: left;
  border-left: 4px solid var(--c-accent);
}
/* Oversized decorative quote mark — anchored at top-left, drawn
   in the accent colour. Deliberately oversized so it reads as
   typographic ornament rather than punctuation. Uses the left
   double-quote glyph in the sans stack (Geist renders it cleanly). */
.pullquote::before {
  content: "\201C";
  position: absolute;
  left: var(--sp-5);
  top: -0.1em;
  font-size: 5em;
  line-height: 1;
  color: var(--c-accent);
  font-weight: 500;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0;
}
.pullquote em {
  color: var(--c-accent-ink);
  font-style: italic;
}
.pullquote__attrib {
  display: block;
  margin-top: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-3);
  font-weight: 400;
}
/* When a pullquote sits inside a warm section, make the accent
   ornament read against the tinted background. */
.section--warm .pullquote {
  border-left-color: var(--c-accent-ink);
}
.section--warm .pullquote::before {
  color: var(--c-accent-ink);
}
.section--warm .pullquote__attrib {
  color: var(--c-accent-ink);
  opacity: 0.8;
}

.ceiling {
  margin: var(--sp-7) auto 0;
  max-width: 980px;
}
.ceiling__frame {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  padding: var(--sp-6) var(--sp-5);
}
.ceiling svg {
  width: 100%;
  height: auto;
  display: block;
}
.ceiling__caption {
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-3);
  text-align: center;
}

/* A softer section background — used to separate the visual
   feature from plain-prose sections on discipline pages. */
.section--muted {
  background: var(--c-bg-2);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

/* A warm, intentionally accented section wash. Reserved for
   moments that should wear the brand colour — pullquotes, a
   hero-adjacent thesis moment, occasional CTAs. Used deliberately,
   never decoratively: if every section is warm, no section is. */
.section--warm {
  background: var(--c-bg-warm);
  border-top: 1px solid var(--c-line-warm);
  border-bottom: 1px solid var(--c-line-warm);
  position: relative;
}
.section--warm .section-head__kicker,
.section--warm .section__eyebrow {
  color: var(--c-accent-ink);
}

/* ============================================================
   Migration page — pre-flight checklist card
   ------------------------------------------------------------
   Styled after an aviation-style pre-flight reference card.
   Numbered list with monospace numerals and checkmark
   indicators. The signature visual for the Migration page.
   ============================================================ */

.preflight {
  margin: var(--sp-6) auto 0;
  max-width: 880px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  padding: var(--sp-6);
}
.preflight__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
.preflight__head-left {
  flex: 1;
}
.preflight__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin-bottom: var(--sp-2);
}
.preflight__title {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--c-ink);
  margin: 0;
  font-weight: 500;
}
.preflight__stamp {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-4);
  border: 1px solid var(--c-line);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.preflight__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.preflight__list > li {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: 1px dashed var(--c-line);
  align-items: start;
}
.preflight__list > li:last-child { border-bottom: 0; padding-bottom: var(--sp-2); }
.preflight__list > li:first-child { padding-top: 0; }

@media (max-width: 560px) {
  .preflight__list > li {
    grid-template-columns: 56px 1fr;
    gap: var(--sp-3);
  }
}

.preflight__num {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  color: var(--c-accent-ink);
  letter-spacing: 0.04em;
}
.preflight__num::before {
  content: "✓";
  color: var(--c-ink-3);
  font-size: var(--fs-sm);
}
.preflight__item-title {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink);
  margin: 0 0 var(--sp-2);
  font-weight: 500;
}
.preflight__item-body {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0;
}

/* ============================================================
   Forcing-function cards — 3-up (or 4-up) grid of "moments"
   Used on Migration page for "where clients start" and for
   the asset-control four keys.
   ============================================================ */

.moments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-6) 0 0;
}
.moments--four { grid-template-columns: repeat(4, 1fr); }
.moments--pair { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .moments, .moments--four, .moments--pair { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .moments, .moments--four, .moments--pair { grid-template-columns: 1fr; }
}
.moment {
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.moment__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-accent-ink);
}
.moment__h {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--c-ink);
  margin: 0;
  font-weight: 500;
}
.moment__body {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0;
}

/* ============================================================
   Inline example callouts — styled to feel like margin notes
   or field observations. Used for anonymized failure stories.
   ============================================================ */

.field-note {
  max-width: 720px;
  margin: var(--sp-5) auto;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-2);
  border-left: 2px solid var(--c-ink-4);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  font-style: italic;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.field-note strong {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-ink-3);
  display: block;
  margin-bottom: var(--sp-2);
}

/* ============================================================
   Discipline marks — small line-art SVG glyphs per discipline
   ------------------------------------------------------------
   Three sizes for three placements:
     .disc-mark         inline glyph (tiles, eyebrows)      28px
     .disc-hero__mark   larger, hero area of a discipline   56px
     .tile__mark        tile-sized, in the disciplines grid 32px
   Marks use currentColor so they inherit orange from their
   placement context. Family-resemblance by design: 24x24
   viewBox, 1.4 stroke-width, rounded caps, flat rhythm.
   ============================================================ */

.disc-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  color: var(--c-accent-ink);
  flex: 0 0 auto;
  vertical-align: middle;
}
.disc-mark svg { width: 100%; height: 100%; display: block; }

.disc-hero__mark {
  display: inline-block;
  width: 56px;
  height: 56px;
  color: var(--c-accent);
  margin: 0 0 var(--sp-5);
}
.disc-hero__mark svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------
   Disc hero crest — wraps the hero mark + eyebrow into a single
   inline row, so the icon reads as part of the discipline
   identifier instead of a floating decoration. Icon shrinks
   from 56px (standalone) to 32px (inline). Eyebrow size bumps
   from fs-xs to fs-base with a weight increase, making the
   discipline name carry appropriate weight.
   ------------------------------------------------------------ */
.disc-hero__crest {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
  flex-wrap: wrap;
}
.disc-hero__crest .disc-hero__mark {
  width: 32px;
  height: 32px;
  margin: 0;
  flex: 0 0 auto;
}
.disc-hero__crest .section__eyebrow {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--c-ink-2);
}
@media (max-width: 720px) {
  .disc-hero__crest { gap: var(--sp-3); }
  .disc-hero__crest .disc-hero__mark { width: 28px; height: 28px; }
  .disc-hero__crest .section__eyebrow { font-size: var(--fs-sm); }
}

/* ------------------------------------------------------------
   Disc hero watermark — an oversized, recessive copy of the
   discipline mark splayed across the hero background. Echoes
   the .section--numbered treatment: same accent colour, same
   low opacity, same "present but recessive" character. Sits
   behind the warm corner wash on .page-hero::before and below
   the .container z-index, so content stays dominant.
   ------------------------------------------------------------ */
.disc-hero__watermark {
  position: absolute;
  top: 50%;
  left: -6%;
  transform: translateY(-50%);
  width: clamp(460px, 62vw, 920px);
  height: clamp(460px, 62vw, 920px);
  color: var(--c-ink-3);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.disc-hero__watermark svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 720px) {
  .disc-hero__watermark {
    width: clamp(340px, 85vw, 560px);
    height: clamp(340px, 85vw, 560px);
    opacity: 0.04;
    left: -22%;
  }
}


/* ------------------------------------------------------------
   Home hero watermark — oversized SVG abstraction of the
   FourOneSix circuit-arc mark. Same visual system as
   .disc-hero__watermark: left-positioned, recessive grey,
   behind content. Balances the small .hero__mark top-right.
   ------------------------------------------------------------ */
.hero__watermark {
  position: absolute;
  top: 50%;
  left: -38%;
  transform: translateY(-50%);
  width: clamp(1000px, 135vw, 2000px);
  height: clamp(1000px, 135vw, 2000px);
  color: var(--c-ink-3);
  opacity: 0.16;     /* bumped from 0.05 — animation now reads */
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.hero__watermark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@media (max-width: 720px) {
  .hero__watermark {
    width: clamp(700px, 170vw, 1200px);
    height: clamp(700px, 170vw, 1200px);
    opacity: 0.12;
    left: -60%;
  }
}

/* ------------------------------------------------------------
   Home hero — outsized brand wordmark.
   "FourOneSix" set massive in display type, anchored to the
   hero bottom as a brand signature. Low-opacity grey on the
   warm background; reads as wallpaper, not headline.
   ------------------------------------------------------------ */
.hero__bigtype {
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.18em;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(140px, 22vw, 340px);
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--c-ink);
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
/* Accent the "One" in the middle of the wordmark — same muted
   orange used on the contact page, so the brand reads "FOUR · ONE · SIX". */
.hero__bigtype-accent {
  color: var(--c-accent-ink);
}

/* ============================================================
   APPROACH — replaces the earlier disciplines tile grid.
   "Business as a service. Not IT as a service." Pull-quote-scale
   typographic moment, restrained lede, soft text-link CTA.
   No tiles, no icons, no enumeration of specialties.
   ============================================================ */
.section.approach {
  padding: var(--sp-11) 0 var(--sp-10);
  position: relative;
  overflow: hidden;
}
.section.approach > .container { position: relative; z-index: 1; }
.approach__watermark {
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: clamp(420px, 52vw, 760px);
  height: clamp(420px, 52vw, 760px);
  color: var(--c-ink-3);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.approach__watermark svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 720px) {
  .approach__watermark { width: clamp(320px, 80vw, 540px); height: clamp(320px, 80vw, 540px); right: -22%; opacity: 0.08; }
}
.approach__headline {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  font-weight: 600;
  color: var(--c-ink);
  margin: var(--sp-2) 0 var(--sp-7);
  max-width: 22ch;
}
.approach__headline em {
  font-style: normal;
  color: var(--c-ink-3);
}
.approach__lede {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-body);
  color: var(--c-ink-2);
  max-width: 60ch;
  margin: 0 0 var(--sp-7);
  font-weight: 400;
}
.approach__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-accent);
  transition: gap 0.2s ease;
}
.approach__cta:hover {
  gap: calc(var(--sp-3) + 4px);
}
.approach__arrow {
  transition: transform 0.2s ease;
  display: inline-block;
}
.approach__cta:hover .approach__arrow {
  transform: translateX(2px);
}

/* ============================================================
   WHAT-WE-DO + HOW-WE-WORK bridge — paired connection-diagram
   watermark. The "what" section holds the upper half (filled
   anchor + descending trace); the "how" section holds the
   lower half (continuing trace + outlined anchor). The two
   halves use the same horizontal scale so the trace reads
   as continuous when scrolling across the section boundary.
   Each half lives inside its own section so it always renders
   correctly against that section's background — the light
   "what" half uses dark-grey, the dark "how" half uses light-grey.
   ============================================================ */
.section--has-bridge {
  position: relative;
  overflow: hidden;
}
.section--has-bridge > .container { position: relative; z-index: 1; }

.what-how-bridge {
  position: absolute;
  right: -6%;
  width: clamp(420px, 50vw, 820px);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.what-how-bridge svg {
  width: 100%;
  height: auto;       /* derive height from viewBox aspect ratio (1:1) */
  display: block;
  overflow: visible;
}

/* Top half — anchored to the bottom of the "what" section. Height
   auto-derives from the viewBox aspect ratio (1:1, square), so both
   halves render at identical dimensions and the trace's exit X
   matches the entry X of the bottom half exactly. */
.what-how-bridge--top {
  bottom: 0;
  color: var(--c-ink-3);   /* dark grey, visible on light bg */
  opacity: 0.18;
}

/* Bottom half — anchored to the top of the "how" section, mirrored
   color (light grey) for visibility on dark bg */
.what-how-bridge--bottom {
  top: 0;
  color: var(--c-ink-on-dark-2);   /* light, visible on dark bg */
  opacity: 0.22;
}

@media (max-width: 840px) {
  .what-how-bridge {
    right: -22%;
    width: clamp(340px, 76vw, 540px);
  }
  .what-how-bridge--top    { opacity: 0.14; }
  .what-how-bridge--bottom { opacity: 0.18; }
}

/* ------------------------------------------------------------
   Home hero — animated signal motion.
   Travelling pulses ride each concentric arc; terminal nodes
   breathe; branching traces draw on, fade, redraw. Total motion
   budget is small — feels like a network coming online, not a
   screensaver. Fully paused under prefers-reduced-motion.
   ------------------------------------------------------------ */
.hero-signal-pulse {
  r: 4;
  fill: var(--c-accent);
  filter: drop-shadow(0 0 6px rgba(237, 125, 58, 0.6));
}
@keyframes hero-node-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.18); }
}
.hero-breathe-1 { animation: hero-node-breathe 3.2s ease-in-out infinite;        transform-origin: center; transform-box: fill-box; }
.hero-breathe-2 { animation: hero-node-breathe 3.2s ease-in-out infinite 0.6s;   transform-origin: center; transform-box: fill-box; }
.hero-breathe-3 { animation: hero-node-breathe 3.2s ease-in-out infinite 1.2s;   transform-origin: center; transform-box: fill-box; }
.hero-breathe-4 { animation: hero-node-breathe 3.2s ease-in-out infinite 1.8s;   transform-origin: center; transform-box: fill-box; }
@keyframes hero-trace-draw {
  0%   { stroke-dashoffset: 30; opacity: 0; }
  30%  { opacity: 1; }
  80%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.hero-trace {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: hero-trace-draw 4.5s ease-in-out infinite;
}
.hero-trace-2 { animation-delay: 1.5s; }
.hero-trace-3 { animation-delay: 3s; }

/* Headline italic gets a thin orange rule that draws on once
   on load — a small typographic moment that doesn't loop. */
.hero__headline em {
  position: relative;
  display: inline-block;
}
.hero__headline em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--c-accent);
  transform-origin: left center;
  animation: hero-rule-draw 1.2s ease-out 0.3s both;
}
@keyframes hero-rule-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-signal-pulse,
  .hero-breathe-1, .hero-breathe-2, .hero-breathe-3, .hero-breathe-4,
  .hero-trace, .hero-trace-2, .hero-trace-3 { animation: none; }
  .hero-signal-pulse { display: none; }
  .hero__headline em::after { animation: none; transform: scaleX(1); }
}

.tile__mark {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--c-accent-ink);
  margin-bottom: var(--sp-4);
  transition: transform var(--dur-base) var(--ease-out);
}
.tile__mark svg { width: 100%; height: 100%; display: block; }
.tile:hover .tile__mark {
  transform: translateY(-2px);
  color: var(--c-accent);
}

/* ============================================================
   Ornament — decorative section break
   ------------------------------------------------------------
   Small orange tri-dot motif between major sections, with
   hairlines on either side. Used sparingly — one or two
   per long page, and only where a visual breath helps.
   ============================================================ */

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin: var(--sp-9) auto 0;
  max-width: 280px;
  color: var(--c-accent);
}
.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.25;
}
.ornament__glyph {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.ornament__glyph span {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0.55;
}
.ornament__glyph span:nth-child(2) { opacity: 1; width: 6px; height: 6px; }

/* ============================================================
   Hand-drawn emphasis — wobbly underline under em phrases
   ------------------------------------------------------------
   Applied to <em> elements via .hand-underline. The underline
   is an inline SVG squiggle, drawn in accent orange, sitting
   slightly below the baseline so it reads as annotation rather
   than decoration. Use on headline emphasis once per page;
   too many and it turns into noise.
   ============================================================ */

.hand-underline {
  position: relative;
  font-style: normal;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'><path d='M4 7 C 40 3, 80 9, 120 6 S 200 3, 240 7 S 290 5, 296 6' fill='none' stroke='%23ED7D3A' stroke-width='2.4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.35em;
  padding-bottom: 0.18em;
}

/* A hand-drawn arrow used in margin notes */
.hand-arrow {
  display: inline-block;
  color: var(--c-accent);
  vertical-align: middle;
  width: 32px;
  height: 18px;
}
.hand-arrow svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   Oversized section numerals
   ------------------------------------------------------------
   Display-scale numeral rendered as background to a section,
   using data-num for the value. Kept at very low opacity so
   the text stays dominant. Activates on sections tagged
   .section--numbered; the container is raised to z-index: 1
   to ride on top of the numeral.
   ============================================================ */

.section--numbered {
  position: relative;
  overflow: hidden;
}
.section--numbered::before {
  content: attr(data-num);
  position: absolute;
  top: -0.08em;
  right: 3%;
  font-family: var(--font-mono);
  font-size: clamp(8rem, 20vw, 18rem);
  line-height: 0.85;
  color: var(--c-accent);
  opacity: 0.07;
  letter-spacing: -0.06em;
  font-weight: 500;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
.section--numbered > .container {
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .section--numbered::before {
    font-size: clamp(6rem, 28vw, 11rem);
    right: 5%;
    opacity: 0.05;
  }
}
/* Dark variant — on dark sections the numeral needs a different
   tint so it still reads as recessive. */
.section--numbered.section--dark::before,
.section--numbered.cta-band::before {
  color: var(--c-accent);
  opacity: 0.10;
}

/* ============================================================
   Discovery split — two-column treatment for the migration
   engagement-shape section (business discovery | technical
   discovery). Similar in spirit to .compare but a lighter
   visual weight — no cards, just columns with kickers.
   ============================================================ */

.discovery-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin: var(--sp-6) 0 0;
}
@media (max-width: 720px) {
  .discovery-split { grid-template-columns: 1fr; gap: var(--sp-5); }
}
.discovery-col__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  margin-bottom: var(--sp-3);
}
.discovery-col h3 {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  color: var(--c-ink);
  margin: 0 0 var(--sp-4);
  font-weight: 500;
}
.discovery-col p {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
  margin: 0 0 var(--sp-4);
}

/* ------------------------------------------------------------
   Fit section watermark — dual-cluster motif. Two anchor nodes,
   each with their own partial orbit and satellite network, with
   a soft dashed boundary between them. Visual metaphor for the
   "who this is for / who this isn't for" decision the section
   asks the reader to make. Fourth in the home-page watermark
   sequence (hero L → disciplines R → fit R → cta-band L).
   ------------------------------------------------------------ */
.section.fit {
  position: relative;
  overflow: hidden;
}
.section.fit > .container {
  position: relative;
  z-index: 1;
}
.fit__watermark {
  position: absolute;
  top: 50%;
  right: -38%;
  transform: translateY(-50%);
  width: clamp(1000px, 135vw, 2000px);
  height: clamp(1000px, 135vw, 2000px);
  color: var(--c-ink-3);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.fit__watermark svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
@media (max-width: 720px) {
  .fit__watermark {
    width: clamp(700px, 170vw, 1200px);
    height: clamp(700px, 170vw, 1200px);
    opacity: 0.04;
    right: -60%;
  }
}

/* -------------------------------------------------------------
   Constellation diagram — nodes + connection hover interactions.
   Default: primary connections sit at modest opacity, reach-down
   lines from the apex sit much fainter. On hover of any node,
   the SVG gains .is-hovering and the connected lines gain
   .is-active (driven by inline JS on disciplines/index.html).
   Hovered node gets a warm glow; non-hovered nodes fade back.
   ------------------------------------------------------------- */
.constellation__svg .connections .conn {
  stroke: var(--c-ink-3, #9A9085);
  opacity: 0.35;
  transition: opacity 220ms ease-out, stroke 220ms ease-out, stroke-width 220ms ease-out;
}
.constellation__svg .connections .conn--strong {
  opacity: 0.45;
}
.constellation__svg .connections .conn--reach {
  opacity: 0.14;
  stroke-dasharray: 2 6;
}

.constellation__svg .node {
  cursor: pointer;
  transition: opacity 220ms ease-out, filter 220ms ease-out;
}
.constellation__svg .node__dot,
.constellation__svg .node__halo {
  transition: filter 220ms ease-out;
}
.constellation__svg .node a,
.constellation__svg .node a text {
  outline: none;
}

/* Apex node gets a perpetual soft halo */
.constellation__svg .node--apex .node__dot {
  filter: drop-shadow(0 0 6px rgba(237, 125, 58, 0.35));
}

/* Hovered / focused node: glow + scale lift on the dot */
.constellation__svg .node:hover .node__dot,
.constellation__svg .node:focus-within .node__dot {
  filter: drop-shadow(0 0 10px rgba(237, 125, 58, 0.75));
}
.constellation__svg .node--apex:hover .node__dot,
.constellation__svg .node--apex:focus-within .node__dot {
  filter: drop-shadow(0 0 16px rgba(237, 125, 58, 0.85));
}
.constellation__svg .node--apex:hover .node__halo,
.constellation__svg .node--apex:focus-within .node__halo {
  opacity: 0.75;
}

/* Fade non-hovered siblings + dim all connections while hovering */
.constellation__svg.is-hovering .node {
  opacity: 0.30;
}
.constellation__svg.is-hovering .node:hover,
.constellation__svg.is-hovering .node:focus-within {
  opacity: 1;
}
.constellation__svg.is-hovering .connections .conn {
  opacity: 0.05;
}

/* Active connections — the lines that touch the hovered node */
.constellation__svg.is-hovering .connections .conn.is-active {
  opacity: 0.95;
  stroke: var(--c-accent, #ED7D3A);
  stroke-width: 1.8;
  stroke-dasharray: 0;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .constellation__svg .connections .conn,
  .constellation__svg .node,
  .constellation__svg .node__dot,
  .constellation__svg .node__halo {
    transition: none;
  }
}

/* ============================================================
   PAGE-HERO + SECTION WATERMARK SYSTEM (about, contact)
   --------------------------------------------------------------
   Shared bigtype wordmark + per-page hero watermarks + per-
   section watermarks. Echoes the home-hero treatment so the
   whole site reads as one visual system, but each page gets
   its own distinct motif (about = blueprint compass, contact
   = signal emanation). Static — no motion outside the home hero.
   ============================================================ */

/* Shared outsized wordmark — anchors hero bottoms across pages.
   Tunable knob: opacity (currently 0.055 — try 0.04 / 0.07). */
.bigtype-wordmark {
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: -0.18em;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(120px, 20vw, 300px);
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--c-ink);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
@media (max-width: 720px) {
  .bigtype-wordmark { font-size: clamp(96px, 26vw, 180px); opacity: 0.045; }
}

/* Contact page — wordmark in muted orange instead of grey,
   so the page reads as "warm reach out" vs about's sober tone. */
.page-hero--contact .bigtype-wordmark {
  color: var(--c-accent-ink);
  opacity: 0.085;
}
@media (max-width: 720px) {
  .page-hero--contact .bigtype-wordmark { opacity: 0.07; }
}

/* Disciplines page — framework-plot watermark, right-anchored.
   A sparse blueprint grid with plotted points connected by a
   path. Distinct motif from every other page (no concentric
   rings, no pillars, no horizon, no arc fan) and on-thesis
   with the new "we map the work" framing on the home page. */
.disciplines-hero__watermark {
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: clamp(420px, 56vw, 820px);
  height: clamp(420px, 56vw, 820px);
  color: var(--c-ink-3);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.disciplines-hero__watermark svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 720px) {
  .disciplines-hero__watermark { width: clamp(320px, 84vw, 560px); height: clamp(320px, 84vw, 560px); right: -22%; opacity: 0.08; }
}

/* About page — Toronto cityscape watermark behind the wordmark.
   Anchored to the hero bottom, fades to transparent at the top so
   it doesn't compete with the headline. The bigtype sits on top
   at higher opacity so it reads as the dominant element.
   Tunable knobs:
     .about-hero__cityscape opacity (currently 0.13)
     .page-hero--about .bigtype-wordmark opacity (currently 0.13)
*/
.about-hero__cityscape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(200px, 36vh, 420px);
  background-image: url('../assets/toronto-skyline.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  opacity: 0.13;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  /* Fade the top edge so the skyline doesn't compete with the eyebrow/headline */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 70%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 70%);
}
/* Bump the about wordmark so it reads on top of the cityscape */
.page-hero--about .bigtype-wordmark {
  opacity: 0.13;
  color: var(--c-ink);
}
@media (max-width: 720px) {
  .about-hero__cityscape { height: clamp(160px, 28vh, 260px); opacity: 0.10; }
  .page-hero--about .bigtype-wordmark { opacity: 0.11; }
}

/* About hero — architectural compass watermark, right-anchored */
.about-hero__watermark {
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: clamp(420px, 56vw, 820px);
  height: clamp(420px, 56vw, 820px);
  color: var(--c-ink-3);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.about-hero__watermark svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 720px) {
  .about-hero__watermark { width: clamp(320px, 80vw, 540px); height: clamp(320px, 80vw, 540px); right: -25%; opacity: 0.08; }
}

/* About body — per-column watermarks behind the firm + principal */
.section.about {
  position: relative;
  overflow: hidden;
}
.section.about > .container { position: relative; z-index: 1; }
.about__firm-watermark,
.about__principal-watermark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-ink-3);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.about__firm-watermark      { left: -10%;  width: clamp(380px, 46vw, 680px); height: clamp(380px, 46vw, 680px); opacity: 0.06; }
.about__principal-watermark { right: -8%; width: clamp(320px, 40vw, 580px); height: clamp(320px, 40vw, 580px); opacity: 0.07; color: var(--c-accent); }
.about__firm-watermark svg,
.about__principal-watermark svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 840px) {
  .about__firm-watermark      { left: -28%; width: clamp(280px, 70vw, 460px); height: clamp(280px, 70vw, 460px); opacity: 0.05; }
  .about__principal-watermark { right: -28%; width: clamp(260px, 65vw, 420px); height: clamp(260px, 65vw, 420px); opacity: 0.06; }
}

/* Contact hero — signal-emanation watermark, right-anchored */
.contact-hero__watermark {
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: clamp(440px, 60vw, 880px);
  height: clamp(440px, 60vw, 880px);
  color: var(--c-ink-3);
  opacity: 0.10;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.contact-hero__watermark svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 720px) {
  .contact-hero__watermark { width: clamp(340px, 88vw, 580px); height: clamp(340px, 88vw, 580px); right: -22%; opacity: 0.08; }
}

/* Contact body — envelope watermark behind the contact intro column */
.section.contact-section {
  position: relative;
  overflow: hidden;
}
.section.contact-section > .container { position: relative; z-index: 1; }
.contact__intro-watermark {
  position: absolute;
  top: 50%;
  left: -10%;
  transform: translateY(-50%);
  width: clamp(360px, 44vw, 640px);
  height: clamp(360px, 44vw, 640px);
  color: var(--c-ink-3);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.contact__intro-watermark svg { width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 840px) {
  .contact__intro-watermark { left: -28%; width: clamp(280px, 70vw, 440px); height: clamp(280px, 70vw, 440px); opacity: 0.06; }
}