/* ==========================================================================
   DELVANO — Component system (spec §19)
   Restrained set. Architectural, never SaaS-pill, never library-demo.
   ========================================================================== */

@layer components {
/* --------------------------------------------------------------------------
   Wordmark & monogram (spec §5, ref 07)
   The wordmark is live text in Instrument Serif with wide editorial tracking:
   selectable, scalable, one less request. The D monogram is SVG.
   -------------------------------------------------------------------------- */

.wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tracking-wordmark);
  text-indent: var(--tracking-wordmark); /* optical centring for the tracking */
  color: var(--ink);
  white-space: nowrap;
}

.wordmark--footer {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.monogram {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--ink);
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   Header (spec §8)
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  transition: background-color var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out),
    transform var(--dur-ui-slow) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-inline: var(--margin-x);
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Solid once scrolled so the fixed bar never floats over live text. */
.header[data-scrolled="true"] {
  background-color: rgb(var(--obsidian-rgb) / 0.86);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--hairline);
}

.header[data-hidden="true"] {
  transform: translateY(-100%);
}

/* On ivory pages the bar inverts */
.header[data-header-tone="light"]:not([data-scrolled="true"]) .wordmark,
.header[data-header-tone="light"]:not([data-scrolled="true"]) .nav__link {
  color: var(--obsidian);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 0.4rem + 2vw, 2.5rem);
}

.nav__link {
  position: relative;
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  padding-block: var(--space-1);
  transition: color var(--dur-micro) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-micro-slow) var(--ease-out);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
}

.nav__link[aria-current="page"] {
  color: var(--bronze);
}

.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  background-color: var(--bronze);
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--bronze);
}

.nav__cta .arrow {
  transition: transform var(--dur-micro) var(--ease-out);
}

.nav__cta:hover .arrow,
.nav__cta:focus-visible .arrow {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Mobile navigation — full screen, simple, fast (spec §8)
   -------------------------------------------------------------------------- */

.menu-toggle {
  display: none;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
  padding: var(--space-1) 0;
}

.menu-toggle__bars {
  position: relative;
  display: block;
  width: 22px;
  height: 10px;
  flex: none;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--dur-micro-slow) var(--ease-out);
}

.menu-toggle__bars::before {
  top: 0;
}
.menu-toggle__bars::after {
  bottom: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
  transform: translateY(4.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
  transform: translateY(-4.5px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  padding: var(--header-h) var(--margin-x) var(--space-5);
  background-color: var(--obsidian);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out),
    visibility 0s linear var(--dur-ui);
}

.mobile-nav[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block: auto;
}

.mobile-nav__link {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--ivory);
  opacity: 0;
  transform: translateY(18px);
}

.mobile-nav[data-open="true"] .mobile-nav__link {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-ui) var(--ease-out) var(--delay, 0ms),
    transform var(--dur-ui) var(--ease-out) var(--delay, 0ms);
}

.mobile-nav__link[aria-current="page"] {
  color: var(--bronze);
}

.mobile-nav__foot {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-3);
}

@media (max-width: 899px) {
  .nav {
    display: none;
  }
  .menu-toggle {
    display: inline-flex;
  }
}

/* Lock scroll behind the open menu without layout shift */
body[data-menu-open="true"] {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Buttons & CTAs (spec §19: architectural, rectangular)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.25rem;
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--ink);
  background-color: var(--ink);
  color: var(--surface);
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: left;
  transition: background-color var(--dur-micro-slow) var(--ease-out),
    color var(--dur-micro-slow) var(--ease-out),
    border-color var(--dur-micro-slow) var(--ease-out);
}

.btn .arrow {
  transition: transform var(--dur-micro) var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.btn:hover .arrow,
.btn:focus-visible .arrow {
  transform: translateX(5px);
}

.btn--ghost {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background-color: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
}

.btn--wide {
  width: 100%;
}

/* Text CTA — the site's default action language */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding-block: var(--space-1);
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
}

.cta__line {
  position: relative;
  display: inline-block;
}

.cta__line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -6px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.35;
  transform-origin: right;
  transition: transform var(--dur-micro-slow) var(--ease-out),
    opacity var(--dur-micro-slow) var(--ease-out);
}

.cta:hover .cta__line::after,
.cta:focus-visible .cta__line::after {
  opacity: 1;
  transform: scaleX(1.02);
}

.cta .arrow {
  transition: transform var(--dur-micro) var(--ease-out);
}

.cta:hover .arrow,
.cta:focus-visible .arrow {
  transform: translateX(5px);
}

.cta--accent {
  color: var(--bronze);
}

.arrow {
  display: inline-block;
  width: 1em;
  flex: none;
}

/* --------------------------------------------------------------------------
   Concept badge — spec: concept work must stay visibly labelled
   -------------------------------------------------------------------------- */

.concept-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.375rem 0.625rem;
  border: 1px solid rgb(var(--bronze-rgb) / 0.4);
  font-size: 0.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bronze);
  white-space: nowrap;
}

.concept-badge::before {
  content: "";
  width: 4px;
  height: 4px;
  background-color: currentColor;
  flex: none;
}

.concept-badge--lg {
  padding: 0.5rem 0.875rem;
  font-size: var(--text-eyebrow);
}

/* --------------------------------------------------------------------------
   Project card (spec §19)
   -------------------------------------------------------------------------- */

.project-card {
  position: relative;
  display: block;
  color: var(--ink);
}

.project-card__media {
  position: relative;
  overflow: hidden;
}

.project-card__media .media {
  transition: transform var(--dur-ui-slow) var(--ease-editorial);
}

.project-card__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgb(var(--obsidian-rgb) / 0.55) 100%
  );
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out);
}

.project-card__hover {
  position: absolute;
  z-index: 4;
  inset-block-end: var(--space-3);
  inset-inline-start: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-ui) var(--ease-out),
    transform var(--dur-ui) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover .media,
  .project-card:focus-visible .media {
    transform: scale(1.025);
  }

  .project-card:hover .project-card__veil,
  .project-card:focus-visible .project-card__veil,
  .project-card:hover .project-card__hover,
  .project-card:focus-visible .project-card__hover {
    opacity: 1;
  }

  .project-card:hover .project-card__hover,
  .project-card:focus-visible .project-card__hover {
    transform: translateY(0);
  }
}

/* Touch and keyboard never depend on hover: the label is in the body copy. */
.project-card__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  padding-top: var(--space-3);
}

.project-card__name {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
}

.project-card__meta {
  font-size: var(--text-small);
  color: var(--ink-muted);
}

.project-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
  border-top: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   Service row (spec §19) — desktop: active row gains contrast
   -------------------------------------------------------------------------- */

.service-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--hairline);
  transition: opacity var(--dur-ui) var(--ease-out);
}

.service-row__index {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--bronze);
  line-height: 1.2;
}

.service-row__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

.service-row__copy {
  color: var(--ink-muted);
  max-width: var(--measure-narrow);
  padding-top: var(--space-1);
}

/* --------------------------------------------------------------------------
   Process step (spec §19)
   -------------------------------------------------------------------------- */

.step {
  position: relative;
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}

.step__index {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem);
  line-height: 1;
  color: var(--bronze);
  margin-bottom: var(--space-3);
}

.step__title {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}

.step__copy {
  font-size: var(--text-small);
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 30ch;
}

/* --------------------------------------------------------------------------
   Footer (spec §23) — restrained. No email, phone, address or social
   until real details exist.
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--obsidian);
  color: var(--ivory);
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-6) var(--space-4);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-6);
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer__descriptor {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--stone);
  margin-top: var(--space-1);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.footer__link {
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--stone);
  transition: color var(--dur-micro) var(--ease-out);
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--ivory);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small);
  color: var(--stone);
}

.footer__statement {
  font-family: var(--font-display);
  font-size: var(--text-body-lg);
  color: var(--ivory);
  letter-spacing: var(--tracking-tight);
}

@media (max-width: 767px) {
  .footer__top {
    flex-direction: column;
    gap: var(--space-4);
  }
  .footer__nav {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   Shared page furniture
   -------------------------------------------------------------------------- */

.page-hero {
  padding-block: clamp(8rem, 6rem + 8vw, 12rem) var(--section-y);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  transition: color var(--dur-micro) var(--ease-out);
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--ink);
}

.back-link .arrow {
  transition: transform var(--dur-micro) var(--ease-out);
}

.back-link:hover .arrow,
.back-link:focus-visible .arrow {
  transform: translateX(-4px);
}

.rule {
  height: 1px;
  background-color: var(--hairline);
  border: 0;
  margin: 0;
}

/* ==========================================================================
   Touch targets (spec §20)
   --------------------------------------------------------------------------
   The text CTAs, footer links, wordmark and back link are 18–35px tall — the
   right optical weight for the design, too small for a thumb. The hit area is
   grown to 44px with an invisible overlay so the composition does not move by
   a single pixel.

   Both conditions are needed: `pointer: coarse` catches touch devices at any
   width (a tablet at 1024 still has thumbs), and the width query catches the
   mobile layout on hybrid machines that report a fine pointer. Full-size
   desktop keeps the exact spacing of the approved references.
   ========================================================================== */

@media (pointer: coarse), (max-width: 899px) {
  .cta,
  .back-link,
  .wordmark,
  .nav__cta {
    position: relative;
  }

  .cta::before,
  .back-link::before,
  .wordmark::before,
  .nav__cta::before {
    content: "";
    position: absolute;
    inset-inline: -0.25rem;
    inset-block-start: 50%;
    height: 44px;
    transform: translateY(-50%);
    /* Invisible: this only enlarges the tap target. */
  }

  /* Padding grows the button, negative margin gives the height back to the
     header so the bar keeps its 5.25rem rhythm. */
  .menu-toggle {
    padding-block: 0.85rem;
    margin-block: -0.85rem;
  }

  /* Stacked footer links would overlap if the hit areas were merely grown,
     so here the padding does the work and the gap gives way to it. */
  .footer__nav {
    gap: 0;
  }

  .footer__link {
    padding-block: 0.8rem;
  }
}


/* ==========================================================================
   Composed components
   --------------------------------------------------------------------------
   Moved out of pages.css during the design-system consolidation. These are
   reusable pieces that happened to be authored next to the page that first
   needed them: the project form, palette and type specimens, capability and
   principle lists, process steps, and the content-placeholder block the spec
   requires wherever a fact may not be invented.

   Relative order is unchanged from pages.css, and no selector here is
   declared anywhere else, so the cascade resolves exactly as before.
   ========================================================================== */

/* ==========================================================================
   HOME — 02 Services (ref 01: three columns split by vertical hairlines)
   ========================================================================== */

.service-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) 0;
}


.service-col {
  padding-inline: var(--space-4);
  border-left: 1px solid var(--hairline);
}


.service-col:first-child {
  padding-inline-start: 0;
  border-left: 0;
}


.service-col__index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--bronze);
  margin-bottom: var(--space-2);
}


.service-col__title {
  margin-bottom: var(--space-3);
}


.service-col__copy {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  max-width: 32ch;
}


@media (max-width: 899px) {
  .service-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-col {
    padding-inline: 0;
    padding-top: var(--space-4);
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }

  .service-col:first-child {
    padding-top: 0;
    border-top: 0;
  }
}


.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}


.flow__step {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}


.flow__step .numeral {
  font-size: var(--text-small);
}


.flow__arrow {
  color: var(--bronze);
  opacity: 0.7;
  flex: none;
}


.approach__rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}


.approach__rail .step__index {
  margin-bottom: 0;
}


.approach__line {
  flex: 1;
  height: 1px;
  background-color: var(--hairline-strong);
  transform-origin: left;
}


.approach__tip {
  color: var(--bronze);
  opacity: 0.75;
  flex: none;
}


.approach__item:last-child .approach__line,
.approach__item:last-child .approach__tip {
  display: none;
}


/* --- Identity artefacts: palette, type, pillars --------------------------- */

.cs-artefacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}


.cs-artefact {
  padding: var(--space-4);
  border: 1px solid var(--hairline);
}


.cs-artefact__label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--project-accent-text, var(--bronze));
}


.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: var(--space-1);
}


.swatch__chip {
  display: block;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--hairline);
  margin-bottom: 0.5rem;
}


.swatch__name {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.4;
}


.swatch__hex {
  display: block;
  font-size: 0.625rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}


.specimen {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}


.specimen__row {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-2);
}


.specimen__row:first-child {
  border-top: 0;
  padding-top: 0;
}


.specimen__sample {
  display: block;
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}


/* Body samples in a type specimen run in the interface face, at the size the
   project actually sets its body copy. AURORA's board specifies a lighter,
   slightly larger setting than the other two. */
.specimen__sample--body {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
}

.specimen__sample--body-light {
  font-family: var(--font-ui);
  font-size: 1.125rem;
  font-weight: 300;
}

.specimen__name {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}


.pillars {
  display: grid;
  gap: var(--space-3);
}


.pillar__name {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--project-accent-text, var(--bronze));
  margin-bottom: 0.4rem;
}


.pillar__copy {
  font-size: var(--text-small);
  color: var(--ink-muted);
  line-height: 1.6;
}


/* --- Outcome -------------------------------------------------------------- */

.cs-outcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}


.cs-outcome__list {
  display: grid;
  gap: 0;
}

/* The outcome statement is a lede set at full ink and to a short measure, so
   it reads as a conclusion rather than as more body copy. */
.cs-outcome__statement {
  color: var(--ink);
  max-width: 26ch;
}

.cs-outcome__label {
  margin-bottom: var(--space-3);
}


.cs-outcome__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  padding-block: var(--space-2);
  border-top: 1px solid var(--hairline);
  color: var(--ink-muted);
  font-size: var(--text-small);
}


.cs-outcome__item::before {
  content: "";
  width: 5px;
  height: 5px;
  background-color: var(--project-accent, var(--bronze));
  transform: translateY(-2px);
}


.cs-note {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--project-accent, var(--bronze));
  font-size: var(--text-small);
  color: var(--ink-muted);
  max-width: 62ch;
  line-height: 1.65;
}


@media (max-width: 899px) {
  .cs-outcome {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}


.capabilities {
  display: grid;
  gap: 0;
}


.capabilities__item {
  padding-block: 0.625rem;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-small);
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}


.capabilities__item:first-child {
  border-top: 0;
  padding-top: 0;
}


.signature__stage {
  padding-top: var(--space-3);
  border-top: 1px solid var(--bronze);
}


.signature__stage:nth-child(n + 2) {
  border-top-color: var(--hairline-strong);
}


.signature__stage-index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h3);
  color: var(--bronze);
  line-height: 1;
  margin-bottom: var(--space-2);
}


.signature__stage-name {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}


/* --- Audience recognition ------------------------------------------------- */

.recognition {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--gutter);
}


.recognition__item {
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}


.recognition__lead {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: var(--space-2);
}


.recognition__copy {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  line-height: 1.25;
  color: var(--ink);
}


@media (max-width: 899px) {
  .recognition {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}


/* --- How we work / principles -------------------------------------------- */

.method {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}


.method__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}


.method__index {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--bronze);
  line-height: 1.1;
}


.method__title {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}


.method__copy {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.65;
  max-width: 40ch;
}


.principles {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4) var(--gutter);
}


.principle {
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}


.principle__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  margin-bottom: var(--space-2);
}


.principle__copy {
  font-size: var(--text-small);
  color: var(--ink-muted);
  line-height: 1.65;
}


@media (max-width: 899px) {
  .method {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 519px) {
  .principles {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* --------------------------------------------------------------------------
   Content placeholder — used wherever the spec forbids inventing facts
   (studio people, commercial minimums). Deliberately visible: it must read
   as an unfinished section, never as finished content.
   -------------------------------------------------------------------------- */

.placeholder {
  padding: var(--space-4);
  border: 1px dashed var(--hairline-strong);
  background-color: var(--surface-raised);
}


/* A placeholder block sitting above further form controls. */
.placeholder--stacked {
  margin-bottom: var(--space-4);
}

.placeholder__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-2);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bronze);
}


.placeholder__label::before {
  content: "";
  width: 4px;
  height: 4px;
  background-color: currentColor;
}


.placeholder__copy {
  font-size: var(--text-small);
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 62ch;
}


.people {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin-bottom: var(--space-5);
}


.person {
  border: 1px dashed var(--hairline-strong);
  padding: var(--space-1);
}


.person__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  background-color: var(--obsidian-raised);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 11px,
    rgb(var(--ivory-rgb) / 0.045) 11px 12px
  );
}


.person__frame::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
}


.person__caption {
  padding: var(--space-2) var(--space-1) var(--space-1);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--stone);
}


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


/* ==========================================================================
   START A PROJECT (ref 06, spec §14)
   The form is the conversion focus: everything else on the page gives way
   to it. One page, five numbered steps — not a wizard, so nothing is hidden
   behind a "next" button and the whole request is visible before sending.
   ========================================================================== */

.project-form {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: var(--space-7) var(--space-6);
  align-items: start;
}


.form-aside {
  position: sticky;
  top: var(--sticky-top);
  padding: var(--space-4);
  border: 1px solid var(--hairline);
  background-color: var(--obsidian-raised);
}


.form-aside__title {
  margin-bottom: var(--space-4);
}


.form-aside__list {
  display: grid;
  gap: var(--space-3);
}


.form-aside__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--hairline);
}


.form-aside__index {
  font-family: var(--font-display);
  color: var(--bronze);
  line-height: 1.3;
}


.form-aside__name {
  display: block;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}


.form-aside__copy {
  font-size: var(--text-small);
  color: var(--ink-muted);
  line-height: 1.6;
}


@media (max-width: 1023px) {
  .project-form {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .form-aside {
    position: static;
    order: -1;
  }
}


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

.form-step {
  border: 0;
  margin: 0;
  padding: 0 0 var(--space-6);
}


.form-step + .form-step {
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
}


.form-step__legend {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0;
  margin-bottom: var(--space-2);
}


.form-step__index {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bronze);
}


.form-step__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}


.form-step__hint {
  color: var(--ink-muted);
  font-size: var(--text-small);
  line-height: 1.6;
  margin-bottom: var(--space-4);
  max-width: 52ch;
}


/* --- Option grid (radio cards) -------------------------------------------- */

.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--space-1);
}


.option {
  position: relative;
}


.option__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}


.option__face {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid var(--hairline-strong);
  font-size: var(--text-small);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  transition: border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}


.option__face::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  transition: background-color var(--dur-micro) var(--ease-out);
}


.option__input:hover + .option__face {
  color: var(--ink);
  border-color: var(--ink-muted);
}


.option__input:checked + .option__face {
  color: var(--ink);
  border-color: var(--bronze);
  background-color: rgb(var(--bronze-rgb) / 0.07);
}


.option__input:checked + .option__face::before {
  background-color: var(--bronze);
  border-color: var(--bronze);
}


.option__input:focus-visible + .option__face {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}


/* --- Fields --------------------------------------------------------------- */

.field {
  display: block;
  margin-bottom: var(--space-3);
}


/* A field that follows an option group rather than another field. */
.field--spaced {
  margin-top: var(--space-3);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}


@media (max-width: 599px) {
  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}


.field__label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-muted);
}


.field__optional {
  color: var(--stone);
  opacity: 0.7;
  text-transform: none;
  letter-spacing: 0.02em;
}


.field__control {
  width: 100%;
  padding: 0.875rem 1rem;
  background-color: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--ink);
  font-size: var(--text-body);
  line-height: 1.5;
  transition: border-color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out);
}


.field__control::placeholder {
  color: var(--stone);
  opacity: 0.55;
}


.field__control:hover {
  border-color: var(--ink-muted);
}


.field__control:focus {
  outline: none;
  border-color: var(--bronze);
  background-color: rgb(var(--bronze-rgb) / 0.05);
}


.field__control:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}


textarea.field__control {
  min-height: 11rem;
  resize: vertical;
}


.field__control[aria-invalid="true"] {
  border-color: var(--error-line);
}


.field__error {
  display: none;
  margin-top: 0.5rem;
  font-size: var(--text-small);
  color: var(--error-ink);
}


.field__error[data-visible="true"] {
  display: block;
}


.field__note {
  margin-top: 0.5rem;
  font-size: var(--text-small);
  color: var(--stone);
}


/* --- Submit / states ------------------------------------------------------ */

.form-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}


.form-status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--bronze);
  font-size: var(--text-small);
  color: var(--ink-muted);
  line-height: 1.65;
}


.form-status[hidden] {
  display: none;
}


.form-status--error {
  border-left-color: var(--error-line);
  color: var(--error-ink);
}


.form-summary[hidden] {
  display: none;
}


.form-summary {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--error-line);
  color: var(--error-ink);
  font-size: var(--text-small);
}


.form-summary__list {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.25rem;
}


.form-summary__list a {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --- Success state -------------------------------------------------------- */

.form-success {
  padding-block: var(--space-6);
}


.form-success[hidden] {
  display: none;
}


.form-success__title {
  margin-bottom: var(--space-3);
}


.form-success__copy {
  max-width: 44ch;
  margin-bottom: var(--space-5);
}

/* --------------------------------------------------------------------------
   Chat trigger

   The control that stands in for Chatbase until someone asks for it. Obsidian
   so it reads on the Ivory bands as well as the dark ones, ringed in Bronze
   rather than filled with it — Bronze is an accent, never a surface.

   Every duration comes from the motion tokens, which collapse to 1ms under
   prefers-reduced-motion, so the reduced-motion contract needs no second rule
   here. Sizing is fixed rather than fluid: 56px clears the 44px touch target
   at every width, so no breakpoint is involved.
   -------------------------------------------------------------------------- */

.chat-trigger {
  position: fixed;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-end: max(1rem, env(safe-area-inset-right));
  z-index: calc(var(--z-header) - 1);

  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;

  background: var(--obsidian);
  color: var(--ivory);
  border: 1px solid rgb(var(--bronze-rgb) / 0.45);
  border-radius: 50%;
  cursor: pointer;

  transition:
    border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out),
    box-shadow var(--dur-micro) var(--ease-out);
}

.chat-trigger:hover {
  color: var(--bronze);
  border-color: var(--bronze);
  box-shadow: 0 0 0 6px rgb(var(--bronze-rgb) / 0.1);
}

.chat-trigger[aria-busy="true"] {
  cursor: progress;
  color: var(--stone);
  border-color: rgb(var(--stone-rgb) / 0.4);
}

.chat-trigger__icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* The open mobile menu owns the whole viewport; a floating control sitting on
   top of it would be the one element that ignores the overlay. Chatbase's own
   bubble cannot be reached this way, which is the other reason the vendor
   widget only ever appears after a deliberate click. */
.mobile-nav[data-open="true"] ~ .chat-trigger {
  visibility: hidden;
}

/* Status text exists for screen readers only: announcing the load must not
   move a single pixel of the page. */
.chat-trigger__status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
}