/* ----------------------------------------------------------------- layout */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The section rhythm has exactly one owner: this rule. Nothing else - no inner
   container, no inline style, no per-page override - sets vertical section
   padding, so the gap between any two adjacent sections is always 2 x --sec. */
.section { padding-block: var(--sec); }

/* First section on an inner page: the extra top allowance clears the fixed
   header. Bottom padding stays on the rhythm. */
.section--head { padding-top: calc(var(--header-h) + var(--sec)); }

/* The last thing inside a section never adds its own trailing margin on top of
   the section's padding - that compounding is what produced uneven gaps. */
.section > .wrap > :last-child,
.section > .wrap > :last-child > :last-child,
.editorial > .wrap > :last-child { margin-bottom: 0; }

/* The two dark ink bands on the site: the hero and the closing CTA. */
.ink {
  background: var(--ink);
  color: #fff;
  --accent-text: var(--accent-on-ink);
}
.ink a:hover { color: var(--accent-on-ink); }
.ink-2 { background: var(--ink-2); }
.ink h1, .ink h2, .ink h3 { color: #fff; }
.ink p { color: var(--steel-ink); }

.mist { background: var(--mist); --accent-text: var(--accent-deep); }
.section--flush { padding-block: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

/* Column spans, mobile-first: everything is full width until 900px. */
.col-4, .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
}

/* Simple auto-fit card rails ---------------------------------------------- */

.rail {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.rail--2 { grid-template-columns: 1fr; }
.rail--3 { grid-template-columns: 1fr; }

@media (min-width: 760px) {
  .rail--2 { grid-template-columns: repeat(2, 1fr); }
  .rail--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1060px) {
  .rail--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Scroll rail: 2px progress bar on the left viewport edge, desktop only. */
/* One continuous track. The ticks sit UNDER the fill, so the fill reads as a
   single unbroken run of accent rather than being chopped into segments by the
   marks painted over it. Ticks are --line and are never the accent colour. */
.scrollrail {
  position: fixed;
  left: 0; top: 0;
  width: var(--rail);
  height: 100vh;
  background: rgba(223, 228, 236, .45);   /* --line, held back so ticks read */
  z-index: 90;
  display: none;
  overflow: hidden;
}
.scrollrail__tick {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
  opacity: .6;
  z-index: 0;
}
.scrollrail__fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 0;
  background: var(--accent);
  transform-origin: top;
  z-index: 1;              /* above the ticks - the fill stays continuous */
}
@media (min-width: 1100px) {
  .scrollrail { display: block; }
}

/* Scroll reveal ----------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 500ms ease, transform 500ms cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
.no-js .reveal { opacity: 1; transform: none; }

/* Anchor targets clear the fixed header rather than sliding under it. The
   services page stacks a sticky sub-nav beneath the header, so its layer
   sections clear both. */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.svcanchor { scroll-margin-top: calc(var(--header-h) + 82px); }