/* =============================================================
   ZEGLER - Sections
   Layout for each block of the homepage.
   ============================================================= */

/* ---------- Column hairlines (editorial structure) ------------- */
.ruled { position: relative; }
.ruled::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  max-width: var(--max-width);
  margin-inline: auto;
  background-image: linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent);
  opacity: 0.9;
}
.ruled > * { position: relative; z-index: 1; }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1rem + 6vw, 6rem));
  padding-bottom: clamp(3rem, 2rem + 4vw, 5.5rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 1rem + 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 1rem + 3vw, 4.5rem);
  }
}

.hero__title {
  margin-top: 1.25rem;
  /* Each line sits in its own reveal mask, so the type must never wrap:
     sized to fit the longest line at every viewport. */
  font-size: clamp(1.9rem, 1.1rem + 3.1vw, 4.05rem);
}
.hero__title .serif { color: var(--deep); }

.hero__lede {
  margin-top: 1.6rem;
  max-width: 47ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-mute);
  letter-spacing: -0.012em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--step--1);
  color: var(--ink-mute);
}
.hero__proof li { display: inline-flex; align-items: center; gap: 0.5rem; }
.hero__proof li::before {
  content: "";
  width: 6px; height: 6px;
  border: 1px solid var(--beige-deep);
  transform: rotate(45deg);
  flex: none;
}

/* ---- The dial: hero's interactive centrepiece ----------------- */
.dial {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin-inline: auto;
  transform: translate3d(0, 0, 0);
  transition: transform 700ms var(--ease-out);
}
.dial__canvas { width: 100%; height: 100%; display: block; }

.dial__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
  gap: 0.5rem;
}
.dial__label {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dial__word {
  position: relative;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  min-width: 6ch;
  color: var(--ink);
}
.dial__word span {
  display: inline-block;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.dial__word.is-out span { opacity: 0; transform: translateY(-14px); }

.dial__meta {
  position: absolute;
  left: 50%;
  bottom: -0.25rem;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  white-space: nowrap;
}

/* =============================================================
   PROBLEM  (dark)
   ============================================================= */
.problem__lead {
  display: grid;
  gap: var(--space-l);
  margin-bottom: clamp(3rem, 2rem + 3vw, 5rem);
}
@media (min-width: 900px) {
  .problem__lead { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-xl); align-items: end; }
}
.problem__title { font-size: var(--step-5); max-width: 15ch; }
.problem__title em { font-family: var(--font-serif); font-style: italic; color: var(--beige); }
.problem__body { color: #A9AAAD; max-width: 44ch; }
.problem__body p + p { margin-top: 1rem; }

.gaps {
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  border-top: 1px solid var(--line-invert);
}
@media (min-width: 700px) { .gaps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .gaps { grid-template-columns: repeat(4, 1fr); } }

/* Each cell is a fixed three-row shape: heading block, description that
   takes the slack, and the cost pinned to the bottom. That is what makes
   the four cost lines sit on one baseline however long the text above is. */
.gap {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  padding: clamp(1.75rem, 1.4rem + 1vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line-invert-soft);
}
@media (min-width: 700px) {
  .gap { padding-inline: clamp(1.25rem, 0.6rem + 1.8vw, 2.25rem); }
  .gap:not(:last-child) { border-right: 1px solid var(--line-invert-soft); }
  .gap:first-child { padding-left: 0; }
}
@media (min-width: 700px) and (max-width: 1079px) {
  .gap:nth-child(2n) { border-right: 0; padding-right: 0; }
  .gap:nth-child(2n + 1) { padding-left: 0; }
  .gap:nth-child(3) { padding-left: 0; }
}
@media (min-width: 1080px) {
  .gap:last-child { padding-right: 0; }
}

.gap__head { display: flex; align-items: baseline; gap: 0.85rem; }
.gap__num { color: var(--beige-deep); }
.gap__title {
  font-size: var(--step-1);
  letter-spacing: var(--tracking-snug);
  line-height: 1.2;
}
.gap__text {
  font-size: var(--step--1);
  color: #A9AAAD;
  line-height: 1.6;
  max-width: 34ch;
}

/* The consequence, set apart from the description that earns it. */
.gap__cost {
  display: block;
  align-self: end;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-invert-soft);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--beige);
}

.problem__turn {
  margin-top: clamp(1rem, 0.75rem + 0.8vw, 1.75rem);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line-invert-soft);
  display: grid;
  gap: var(--space-m);
  align-items: center;
}
@media (min-width: 900px) {
  .problem__turn { grid-template-columns: 1fr auto; gap: var(--space-xl); }
}
.problem__turn p {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: var(--tracking-snug);
  line-height: 1.3;
  max-width: 30ch;
}
.problem__turn em { font-family: var(--font-serif); font-style: italic; color: var(--beige); }

/* =============================================================
   SERVICES - expanding editorial rows
   ============================================================= */
.services { border-top: 1px solid var(--line); }

.service {
  border-bottom: 1px solid var(--line);
}

.service__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-s);
  width: 100%;
  padding: clamp(1.25rem, 1rem + 0.9vw, 1.9rem) 0;
  text-align: left;
  color: inherit;
  transition: color var(--dur) var(--ease-out);
}
@media (min-width: 900px) {
  .service__summary {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--space-m);
  }
}

.service__num { color: var(--ink-faint); transition: color var(--dur) var(--ease-out); }

.service__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.4vw, 2.15rem);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  transition: transform var(--dur-slow) var(--ease-out);
}
.service__tag {
  display: none;
  font-size: var(--step--1);
  color: var(--ink-mute);
}
@media (min-width: 900px) { .service__tag { display: block; } }

.service__toggle {
  position: relative;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  flex: none;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.service__toggle::before,
.service__toggle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.service__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }

.service:hover .service__num { color: var(--accent-ink); }
@media (hover: hover) and (min-width: 900px) {
  .service:hover .service__name { transform: translateX(10px); }
}
.service:hover .service__toggle { background: var(--sand); border-color: var(--beige); }

.service.is-open .service__toggle { background: var(--ink); border-color: var(--ink); color: var(--bone); transform: rotate(180deg); }
.service.is-open .service__toggle::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.service__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-in-out);
}
.service.is-open .service__panel { grid-template-rows: 1fr; }
.service__panel > div {
  overflow: hidden;
  /* Keep collapsed content out of the tab order and the a11y tree,
     without killing the open/close animation. */
  visibility: hidden;
  transition: visibility 0s linear var(--dur-slow);
}
.service.is-open .service__panel > div { visibility: visible; transition-delay: 0s; }

.service__detail {
  display: grid;
  gap: var(--space-m);
  padding-bottom: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out) 60ms, transform var(--dur-slow) var(--ease-out) 60ms;
}
.service.is-open .service__detail { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .service__detail {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1fr) 40px;
    gap: var(--space-m);
    align-items: start;
  }
  .service__detail > :first-child { grid-column: 2; }
}

.service__copy { color: var(--ink-mute); max-width: 46ch; }
.service__copy strong { color: var(--fg); font-weight: 500; }

.service__list { display: grid; gap: 0.55rem; }
.service__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  font-size: var(--step--1);
  color: var(--ink-mute);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--line-soft);
}
.service__list li::before {
  content: "";
  width: 5px; height: 5px;
  margin-top: 0.65em;
  background: var(--beige-deep);
  transform: rotate(45deg);
}

/* =============================================================
   SYSTEMS - "What we build" tabs
   ============================================================= */
.systems { background-color: var(--sand); background-image: url("../img/grain.png"); background-size: 64px 64px; }

.systems__layout {
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 960px) {
  .systems__layout {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(1.75rem, 1rem + 2.4vw, 3.25rem);
    align-items: start;
  }
}

.systems__tablist {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.systems__tablist::-webkit-scrollbar { display: none; }

@media (min-width: 960px) {
  .systems__tablist {
    display: grid;
    gap: 0;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    border-top: 1px solid var(--line);
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.systems__tab {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  color: var(--ink-mute);
  white-space: nowrap;
  transition: all var(--dur) var(--ease-out);
}
.systems__tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

@media (min-width: 960px) {
  .systems__tab {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    padding: 1.05rem 0.75rem 1.05rem 0;
    font-size: var(--step-0);
    white-space: normal;
    text-align: left;
  }
  .systems__tab[aria-selected="true"] {
    background: transparent;
    color: var(--fg);
    padding-left: 1rem;
  }
  .systems__tab::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--deep);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--dur) var(--ease-out);
  }
  .systems__tab[aria-selected="true"]::before { transform: scaleY(1); transform-origin: top; }
  .systems__tab:hover { color: var(--fg); }
}

.systems__tab .num { transition: color var(--dur) var(--ease-out); }
.systems__tab[aria-selected="true"] .num { color: var(--beige-deep); }

.systems__panels { position: relative; min-height: 24rem; }

.systems__panel {
  display: none;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  box-shadow: var(--shadow-s);
}
.systems__panel.is-active { display: block; animation: panel-in 520ms var(--ease-out) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .systems__panel.is-active { animation: none; }
}

.systems__panel h3 { margin-top: 0.75rem; font-size: var(--step-3); }
.systems__panel > p { margin-top: 0.85rem; color: var(--ink-mute); max-width: 52ch; }

/* Flow diagram */
.flow {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--space-m);
  padding: var(--space-m) 0;
  border-block: 1px solid var(--line-soft);
}
@media (min-width: 620px) {
  .flow {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 0;
  }
}
.flow__step {
  position: relative;
  display: grid;
  gap: 0.4rem;
  align-content: start;
  padding: 0.9rem 1rem;
  background: var(--bone);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
}
@media (min-width: 620px) {
  .flow__step { margin-right: 1.4rem; }
  .flow__step:last-child { margin-right: 0; }
  .flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -1.4rem;
    top: 50%;
    width: 1.4rem;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--line-strong) 0 4px, transparent 4px 8px);
  }
  .flow__step:not(:last-child)::before {
    content: "";
    position: absolute;
    right: -0.4rem;
    top: 50%;
    width: 5px; height: 5px;
    border-top: 1px solid var(--beige-deep);
    border-right: 1px solid var(--beige-deep);
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
  }
}
.flow__kind {
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--beige-ink);
}
.flow__step p { font-size: var(--step--1); line-height: 1.4; }
.flow__step--out { background: var(--deep); border-color: var(--deep); color: var(--bone); }
.flow__step--out .flow__kind { color: var(--beige); }

.systems__outcomes {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-m);
}
@media (min-width: 620px) { .systems__outcomes { grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2rem; } }
.systems__outcomes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  font-size: var(--step--1);
  color: var(--ink-mute);
}
.systems__outcomes svg { width: 1rem; height: 1rem; margin-top: 0.28em; color: var(--deep); flex: none; }

.systems__stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--line-soft);
}

/* =============================================================
   WHY ZEGLER
   ============================================================= */
.compare {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
}
@media (min-width: 860px) { .compare { grid-template-columns: repeat(3, 1fr); } }

.compare__col {
  background: var(--bone);
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.25rem);
  display: grid;
  gap: 1rem;
  align-content: start;
}
.compare__col--us { background: var(--ink); color: var(--bone); }
.compare__col--us .compare__label { color: var(--beige); }
.compare__col--us .compare__list li { color: #C9CACC; border-color: var(--line-invert-soft); }
.compare__col--us .compare__list li::before { color: var(--beige); }

.compare__label {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.compare__title { font-size: var(--step-2); }
.compare__list { display: grid; gap: 0.75rem; margin-top: 0.25rem; }
.compare__list li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: var(--ink-mute);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-soft);
}
.compare__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.compare__list li::before { content: "-"; color: var(--ink-faint); }
.compare__list--yes li::before { content: "✦"; color: var(--beige-deep); }

.principles {
  display: grid;
  gap: var(--space-m);
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
@media (min-width: 700px) { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .principles { grid-template-columns: repeat(4, 1fr); gap: var(--space-l); } }

.principle { display: grid; gap: 0.6rem; align-content: start; }
.principle__icon {
  width: 2.6rem; height: 2.6rem;
  display: grid;
  place-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--deep);
  margin-bottom: 0.5rem;
}
.principle__icon svg { width: 1.15rem; height: 1.15rem; }
.principle h3 { font-size: var(--step-1); }
.principle p { font-size: var(--step--1); color: var(--ink-mute); line-height: 1.55; }

/* =============================================================
   PROCESS (dark)
   ============================================================= */
.process__layout { display: grid; gap: var(--space-xl); }
@media (min-width: 960px) {
  .process__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); }
  .process__aside { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
}
.process__aside h2 { font-size: var(--step-4); }
.process__aside p { margin-top: 1.25rem; color: #A9AAAD; max-width: 36ch; }
.process__aside .btn { margin-top: 2rem; }

.steps { position: relative; padding-left: 2.5rem; }
.steps::before {
  content: "";
  position: absolute;
  left: 0.5rem; top: 0.75rem; bottom: 0.75rem;
  width: 1px;
  background: var(--line-invert-soft);
}
.steps__progress {
  position: absolute;
  left: 0.5rem; top: 0.75rem;
  width: 1px;
  height: calc(var(--fill, 0) * 1%);
  max-height: calc(100% - 1.5rem);
  background: linear-gradient(180deg, var(--beige), var(--deep-soft));
  transition: height 120ms linear;
}

.step {
  position: relative;
  padding-block: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
  border-bottom: 1px solid var(--line-invert-soft);
}
.step:last-child { border-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: calc(clamp(1.1rem, 0.8rem + 1vw, 1.75rem) + 0.55em);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ink);
  border: 1px solid var(--line-invert);
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.step.is-revealed::before { background: var(--beige); border-color: var(--beige); transform: scale(1.1); }

.step__head { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.step__head h3 { font-size: var(--step-2); }
.step__when {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--beige-deep);
  text-transform: uppercase;
}
.step p { margin-top: 0.6rem; color: #A9AAAD; font-size: var(--step--1); max-width: 52ch; line-height: 1.6; }
.step__out {
  display: inline-flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A8B8F;
}
.step__out b { color: var(--bone); font-weight: 500; letter-spacing: 0.02em; text-transform: none; font-size: var(--step--1); }

/* =============================================================
   WORK
   ============================================================= */
.work__grid { display: grid; gap: var(--space-m); }
@media (min-width: 900px) {
  .work__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-l); }
  .work__item--wide { grid-column: 1 / -1; }
}

.work__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-s);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.work__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: var(--line-strong); }

@media (min-width: 900px) {
  .work__item--wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    align-items: center;
    padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  }
}

.work__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.work__sector { font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-faint); }
.work__title { font-size: var(--step-3); max-width: 20ch; }
.work__title .serif { color: var(--deep); }
.work__text { color: var(--ink-mute); font-size: var(--step--1); max-width: 48ch; line-height: 1.6; }

.work__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
  padding-top: var(--space-s);
  border-top: 1px solid var(--line-soft);
}
.work__metric dt { font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.work__metric dd {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--tracking-snug);
}

/* Abstract visual panel for the featured case */
.work__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-m);
  background:
    radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--beige) 55%, transparent), transparent 60%),
    var(--ink);
  overflow: hidden;
  display: grid;
  place-content: center;
}
.work__visual svg { width: 100%; height: 100%; }

.work__note {
  margin-top: var(--space-l);
  font-size: var(--step--1);
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* =============================================================
   CTA + FORM (deep accent)
   ============================================================= */
.cta {
  background-color: var(--deep-strong);
  background-image: url("../img/grain.png");
  background-size: 64px 64px;
  color: var(--bone);
  --line: var(--line-invert);
  --line-soft: var(--line-invert-soft);
  --line-strong: color-mix(in srgb, var(--bone) 30%, transparent);
  --ink-mute: #B5A6A3;
  --ink-faint: #9C8A86;
  --fg: var(--bone);
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--deep-soft) 55%, transparent), transparent 70%);
  pointer-events: none;
}

.cta__layout { display: grid; gap: var(--space-xl); position: relative; }
@media (min-width: 980px) {
  .cta__layout { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 1rem + 5vw, 6rem); }
}
.cta__title { font-size: var(--step-5); max-width: 14ch; }
.cta__title .serif { color: var(--beige); }
.cta__text { margin-top: 1.5rem; color: #B5A6A3; max-width: 40ch; }

.cta__meta { display: grid; gap: 1rem; margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--line-invert-soft); }
.cta__meta div { display: grid; gap: 0.25rem; }
.cta__meta dt { font-size: var(--step--2); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #9C8A86; }
.cta__meta dd { margin: 0; font-size: var(--step-0); }
.cta__meta a { border-bottom: 1px solid color-mix(in srgb, var(--beige) 50%, transparent); padding-bottom: 1px; }
.cta__meta a:hover { border-bottom-color: var(--beige); }

.form { display: grid; gap: var(--space-m); }
.form__row { display: grid; gap: var(--space-m); }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, 1fr); } }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; justify-content: space-between; margin-top: 0.5rem; }
.form__small { font-size: var(--step--2); color: #9C8A86; max-width: 34ch; line-height: 1.5; }
.form__status {
  font-size: var(--step--1);
  color: var(--beige);
  min-height: 1.4em;
}
.form.is-sent .form__fields { display: none; }
.form__success { display: none; }
.form.is-sent .form__success {
  display: grid;
  gap: 0.75rem;
  padding: var(--space-l);
  border: 1px solid var(--line-invert-soft);
  border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--bone) 5%, transparent);
}
.form__success h3 { font-size: var(--step-2); color: var(--bone); }
.form__success p { color: #B5A6A3; font-size: var(--step--1); }

/* =============================================================
   FOOTER
   ============================================================= */
.footer {
  background-color: var(--ink);
  background-image: url("../img/grain.png");
  background-size: 64px 64px;
  color: var(--bone);
  padding-top: var(--space-2xl);
}

.footer__top {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--line-invert-soft);
}
@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.8fr)); gap: var(--space-l); }
}

.footer__statement {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: var(--tracking-snug);
  line-height: 1.25;
  max-width: 22ch;
  margin-top: 1.5rem;
}
.footer__statement em { font-family: var(--font-serif); font-style: italic; color: var(--beige); }

.footer__col h4 {
  font-size: var(--step--2);
  font-family: var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #7C7D81;
  margin-bottom: 1.1rem;
  font-weight: 500;
}
.footer__col li + li { margin-top: 0.6rem; }
.footer__col a {
  font-size: var(--step--1);
  color: #C9CACC;
  transition: color var(--dur) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.footer__col a:hover { color: var(--bone); }
.footer__col a svg { width: 0.7em; height: 0.7em; opacity: 0; transform: translateX(-4px); transition: all var(--dur) var(--ease-out); }
.footer__col a:hover svg { opacity: 1; transform: none; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-block: var(--space-m) var(--space-l);
  font-size: var(--step--2);
  color: #7C7D81;
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #C9CACC;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.to-top svg { width: 0.9em; height: 0.9em; transition: transform var(--dur) var(--ease-out); }
.to-top:hover svg { transform: translateY(-3px); }

/* ---------- Deep links added by the multi-page architecture ----- */
.service__col { display: grid; gap: 1.1rem; align-content: start; }
.service__more { color: var(--accent-ink); justify-self: start; }
.systems__more { margin-top: var(--space-m); color: var(--accent-ink); }

/* ---------- Full-bleed photographic band ------------------------
   Photographs sit edge to edge, between sections, never inside a
   text column. A hair of desaturation keeps four different rooms
   reading as one palette. */
.band {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  background: var(--sand);
}
.band img {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 440px);
  object-fit: cover;
  object-position: center;
  filter: saturate(0.94);
}
.band figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(2.5rem, 4vw, 4rem) var(--gutter) clamp(1rem, 2vw, 1.75rem);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ink) 62%, transparent));
  color: var(--bone);
  pointer-events: none;
}
.band figcaption span {
  display: block;
  max-width: var(--max-width);
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--step-1);
  letter-spacing: var(--tracking-snug);
  text-shadow: 0 1px 20px rgba(10, 11, 13, 0.35);
}

/* ---------- FAQ ------------------------------------------------ */
.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }

.faq__q {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding-block: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  line-height: 1.35;
  color: inherit;
}
.faq__toggle {
  position: relative;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  flex: none;
  transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.faq__toggle::before,
.faq__toggle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq:hover .faq__toggle { background: var(--sand); border-color: var(--beige); }
.faq.is-open .faq__toggle { background: var(--ink); border-color: var(--ink); color: var(--bone); transform: rotate(180deg); }
.faq.is-open .faq__toggle::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-in-out);
}
.faq.is-open .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-slow);
}
.faq.is-open .faq__panel > div { visibility: visible; transition-delay: 0s; }

.faq__a {
  max-width: 62ch;
  padding-bottom: clamp(1.1rem, 0.9rem + 0.6vw, 1.6rem);
  color: var(--ink-mute);
  font-size: var(--step-0);
  line-height: 1.6;
}

/* ---------- CTA band -------------------------------------------
   Used at the foot of every generated page and on the homepage, so it
   lives here rather than in pages.css. */
/* The band shares its element with .shell, so constrain the content
   rather than the shell itself - otherwise it inherits the shell's
   auto margins and centres, breaking the page's left-aligned rhythm. */
.cta__band { position: relative; }
.cta__band > * { max-width: 36rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.cta__band .btn--ghost { border-color: color-mix(in srgb, var(--bone) 28%, transparent); color: var(--bone); }
.cta__band .btn--ghost::after { background: var(--bone); }
.cta__band .btn--ghost:hover { color: var(--ink); border-color: var(--bone); }


/* ---------- Photographs inside the work cards -------------------- */
.work__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.94);
}

/* On the narrower cards the picture bleeds to the card's edges, so it
   reads as part of the card rather than a framed thumbnail inside it. */
.work__visual--top {
  aspect-ratio: 16 / 10;
  border-radius: 0;
  background: var(--ink);
  margin: calc(clamp(1.4rem, 1rem + 1.5vw, 2.25rem) * -1);
  margin-bottom: var(--space-xs);
}

/* A band sitting inside a dark section keeps the dark ground. */
.band--dark { background: var(--ink); }


/* Footer lines that are information rather than links. */
.footer__plain {
  font-size: var(--step--1);
  color: #9B9C9F;
  display: inline-block;
  line-height: 1.5;
}


/* When a full-bleed band follows a section, the section's bottom padding
   and the picture are doing the same job. Let the picture do it. */
.section--to-band { padding-bottom: var(--space-l); }

/* ---------- Band motion ------------------------------------------
   Two separate movements that must not fight each other: the scale
   settles once on reveal and is transitioned; the vertical drift is
   scroll-driven and rides on object-position, so no transition ever
   chases the scroll position. */
.band img {
  transform: scale(1.05);
  transition: transform 1600ms var(--ease-out);
  object-position: 50% calc(50% + var(--band-shift, 0%));
}
.band.is-revealed img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .band img {
    transform: none;
    transition: none;
    object-position: 50% 50%;
  }
}