/* Lumsdaine Consulting marketing site — page + component styles.
   Layers on top of the Modernist design system (styles.css). Every colour,
   font and space here resolves to a design-system token; no raw values that
   the token sheet already carries. */

body { margin: 0; text-wrap: pretty; background: var(--color-bg); }

/* Small in-copy links default to the deep accent step (accent at 13–16px
   fails contrast); buttons and nav links opt out via their own classes. */
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }

/* Content column and section rules */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.rule { height: 2px; border: 0; margin: 0; background: var(--color-divider); }

/* — Header — */
.site-nav { padding-inline: clamp(20px, 5vw, 72px); gap: clamp(16px, 3vw, 40px); }
.site-nav .nav-brand { font-size: 18px; letter-spacing: -0.01em; }
.site-nav a { font-size: 14px; }
.site-nav .btn-primary { color: var(--color-bg); } /* keep paper ink over the accent fill */

/* — Kickers / eyebrows — */
.kicker {
  display: block;
  font-size: 13px; line-height: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 42px;
}
.kicker--hero { margin-bottom: 28px; }
.kicker--tight { margin-bottom: 14px; }

/* — Hero — */
.hero { padding: 112px 0 84px; }
.display {
  font-size: clamp(42px, 6.2vw, 84px);
  line-height: 1.06; letter-spacing: -0.02em;
  margin: 0 0 0 -0.058em; /* optical left alignment for Archivo 800 caps — keep */
}
.display--service { font-size: clamp(38px, 5.4vw, 72px); }
.display span { display: block; }

.lead { font-size: 17px; line-height: 1.65; max-width: 58ch; margin: 40px 0 0; }
.button-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 32px; }

/* — Services carousel: a scroll-snap rail, no JavaScript — */
.services { padding: 72px 0 56px; }
.services-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 16px clamp(24px, 4vw, 56px);
  margin-bottom: 42px;
}

.svc-tabs { display: flex; flex-wrap: wrap; gap: 12px clamp(20px, 3vw, 40px); }
.svc-tabs a {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  padding-bottom: 6px; border-bottom: 2px solid transparent;
}
.svc-tabs a:hover { color: var(--color-accent); }

/* Active tab is driven by the inline script (and tracks swipes, not just clicks).
   The first tab ships with .is-active so the state is correct before/without JS. */
.svc-tabs a.is-active {
  color: var(--color-accent-700);
  border-bottom-color: var(--color-accent);
}

.rail {
  display: flex;
  gap: clamp(32px, 6vw, 96px);
  /* Display headings carry a -0.058em optical offset that hangs left of the
     panel edge. A scroll container cannot scroll past 0, so without room for it
     the first glyph is clipped. Hold it in padding, pull the rail back by the
     same amount so panels stay aligned with the rest of the page, and match it
     with scroll-padding so snapping still rests with the padding visible. */
  padding-left: 6px;
  margin-left: -6px;
  scroll-padding-left: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;
}
.rail::-webkit-scrollbar { display: none; }
.panel {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  /* vertical only: keeps the nav + tab strip in view when a tab is clicked */
  scroll-margin-top: 160px;
}
.panel .lead { margin-top: 32px; }
.panel .rule { margin: 56px 0 0; }
.panel .dolist { padding-top: 56px; }
.panel .deliver { padding-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .rail { scroll-behavior: auto; }
}

/* — Home: "How we work" split — */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 28px clamp(24px, 5vw, 96px);
  align-items: center;
  padding: 84px 0;
}
.split-title { font-size: 32px; line-height: 1.2; letter-spacing: -0.015em; margin: 0; }
.split-copy {
  font-size: 15.5px; line-height: 1.75; margin: 24px 0 0; max-width: 48ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.split-figure { margin: 0; }
.split-figure img { width: 100%; aspect-ratio: 951 / 665; object-fit: cover; }

/* — Home: the engagement — */
.engagement { padding: 72px 0 84px; }
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.step-label { font-size: 15px; margin: 0 0 12px; color: var(--color-accent); }
.step-title { font-size: 20px; line-height: 1.25; margin: 0 0 12px; }
.step-copy {
  font-size: 15px; line-height: 1.7; margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — Carousel panels: "What we do" blocks — */
.dolist { padding: 72px 0 56px; }
.doblock {
  padding: 42px 0;
  border-top: 2px solid var(--color-divider);
}
.doblock--first { border-top: 0; padding-top: 0; }
.doblock-title { font-size: 24px; line-height: 1.2; margin: 0 0 14px; }
.doblock-copy {
  font-size: 15.5px; line-height: 1.75; margin: 0; max-width: 62ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

/* — Service pages: "What you leave with" — */
.deliver { padding: 72px 0 84px; }
.deliver-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 40px; }
.deliver-item {
  font-size: 15.5px; line-height: 1.7; margin: 0;
  border-top: 2px solid var(--color-divider); padding-top: 20px;
}

/* — Contact band (the one red field) + footer — */
.contact { background: var(--color-accent); color: var(--color-bg); }
.contact .wrap { padding-top: 84px; padding-bottom: 84px; }
.contact-title {
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.06; letter-spacing: -0.015em;
  margin: 0 0 0 -0.058em;
}
.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px; margin-top: 56px; max-width: 900px;
}
.contact-label { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 12px; opacity: 0.8; }
.contact-value { font-size: 20px; margin: 0; color: var(--color-bg); }
a.contact-value:hover { color: var(--color-bg); } /* stay paper-coloured on the red ground */

.site-footer {
  display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
  padding: 56px 0; font-size: 13px; line-height: 1.65;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* — Responsive — */
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; }
  .split-figure { order: -1; } /* photograph first */
}