/* ============================================================
   NorthHub Digital — styles
   Palette + type + motion rules live in DESIGN.md
   ============================================================ */

/* ---------- Fonts (self-hosted, Fontshare) ---------- */
@font-face {
  font-family: "Sentient";
  src: url("../fonts/sentient-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/sentient-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/sentient-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("../fonts/general-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: oklch(1 0 0);
  --surface: oklch(0.965 0.006 25);
  --ink: oklch(0.24 0.02 25);
  --muted: oklch(0.47 0.02 25);
  --oxblood: oklch(0.29 0.09 25);
  --oxblood-deep: oklch(0.24 0.08 25);
  --crimson: oklch(0.52 0.17 22);
  --crimson-deep: oklch(0.45 0.16 22);
  --amber: oklch(0.78 0.13 78);
  --hero-muted: oklch(0.86 0.035 35);
  --line: oklch(0.9 0.008 25);

  --serif: "Sentient", "Iowan Old Style", Georgia, serif;
  --sans: "General Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --z-header: 10;
  --z-skip: 100;

  --container: 71.25rem;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }

/* Anchor targets clear the fixed header */
[id] { scroll-margin-top: 5rem; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: var(--crimson); }

:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 3px;
  border-radius: 2px;
}
.hero :focus-visible,
.site-header:not(.scrolled) :focus-visible,
.site-footer :focus-visible { outline-color: var(--amber); }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute;
  top: -3rem; left: 1rem;
  z-index: var(--z-skip);
  background: var(--ink); color: var(--bg);
  padding: 0.6rem 1rem;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.button {
  display: inline-block;
  background: var(--crimson);
  color: oklch(1 0 0);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 0;
  border-radius: 0.375rem;
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.button:hover { background: var(--crimson-deep); transform: translateY(-1px); }
.button:active { transform: translateY(0); }

.button-light {
  background: oklch(1 0 0);
  color: var(--oxblood);
}
.button-light:hover { background: var(--hero-muted); }

.button-small { padding: 0.55rem 1.1rem; font-size: 0.9375rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  padding-block: 1rem;
  color: oklch(1 0 0);
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out), padding 0.3s var(--ease-out);
}
.site-header.scrolled {
  background: var(--bg);
  color: var(--ink);
  padding-block: 0.6rem;
  box-shadow: 0 1px 0 var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-hub { font-weight: 700; }
.wordmark-digital { font-family: var(--sans); font-weight: 400; font-size: 0.9em; opacity: 0.85; }

.site-nav {
  display: flex;
  gap: 1.75rem;
  margin-left: auto;
}
.site-nav a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease-out);
}
.site-nav a:hover { border-color: currentColor; }

.site-header:not(.scrolled) .header-cta {
  background: oklch(1 0 0 / 0.12);
  color: oklch(1 0 0);
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.4);
}
.site-header:not(.scrolled) .header-cta:hover { background: oklch(1 0 0 / 0.22); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  background: var(--oxblood);
  background-image:
    radial-gradient(90% 55% at 50% 108%, oklch(0.35 0.11 25 / 0.65), transparent 70%),
    radial-gradient(120% 90% at 20% 0%, oklch(0.33 0.1 25), var(--oxblood) 60%, var(--oxblood-deep));
  color: oklch(1 0 0);
  padding-block: clamp(6.5rem, 12vh, 8.5rem) 0;
}

/* Soft glow that trails the pointer (JS sets --mx/--my) */
.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(42rem 30rem at var(--mx, 50%) var(--my, 34%), oklch(0.38 0.12 25 / 0.5), transparent 65%);
  pointer-events: none;
}

.hero-contours {
  position: absolute;
  inset: 0;
  background-color: var(--hero-muted);
  -webkit-mask: url("../assets/contours.svg") no-repeat;
  mask: url("../assets/contours.svg") no-repeat;
  pointer-events: none;
}
.hero-contours-a {
  opacity: 0.28;
  -webkit-mask-size: 130% auto; mask-size: 130% auto;
  -webkit-mask-position: 70% 20%; mask-position: 70% 20%;
  animation: drift-a 80s linear infinite alternate;
  will-change: transform;
}
@keyframes drift-a { from { transform: translate3d(0,0,0); } to { transform: translate3d(-3%, 2%, 0) rotate(1deg); } }

/* Signal network: the terrain drifts, the connections hold still. */
.hero-network {
  position: absolute;
  inset: 0;
  background-color: var(--amber);
  opacity: 0.45;
  -webkit-mask: url("../assets/network.svg") no-repeat center / cover;
  mask: url("../assets/network.svg") no-repeat center / cover;
  pointer-events: none;
  animation: signal 8s ease-in-out infinite alternate;
}
@keyframes signal { from { opacity: 0.34; } to { opacity: 0.6; } }

/* ---------- Hero background option B: north sky ----------
   Toggled by adding .hero-north to the hero section; remove the class
   to restore the contours + network design. */
.hero-north .hero-contours,
.hero-north .hero-network { display: none; }

.hero-stars,
.hero-aurora { display: none; }

.hero-north .hero-stars {
  display: block;
  position: absolute;
  inset: 0;
  background-color: oklch(0.97 0.012 35);
  -webkit-mask: url("../assets/northsky.svg") no-repeat center / cover;
  mask: url("../assets/northsky.svg") no-repeat center / cover;
  pointer-events: none;
  animation: twinkle 9s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 0.95; } }

.hero-north .hero-aurora {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-north .hero-aurora::before,
.hero-north .hero-aurora::after {
  content: "";
  position: absolute;
}
/* Rose band, sweeping in from the upper left */
.hero-north .hero-aurora::before {
  left: -18%; top: -30%;
  width: 95%; height: 62%;
  background: radial-gradient(50% 42% at 50% 50%, oklch(0.62 0.14 30 / 0.55), transparent 70%);
  filter: blur(46px);
  transform: rotate(-14deg);
  animation: aurora-a 26s ease-in-out infinite alternate;
}
/* Amber band, higher and to the right, behind Polaris */
.hero-north .hero-aurora::after {
  right: -22%; top: -26%;
  width: 85%; height: 56%;
  background: radial-gradient(50% 40% at 50% 50%, oklch(0.74 0.12 70 / 0.38), transparent 70%);
  filter: blur(56px);
  transform: rotate(10deg);
  animation: aurora-b 34s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  to { transform: rotate(-8deg) translate3d(6%, 5%, 0); }
}
@keyframes aurora-b {
  to { transform: rotate(4deg) translate3d(-7%, 7%, 0); }
}

/* ---------- Hero background option C: lakeshore dusk ----------
   Toggled by adding .hero-lake to the hero section. Layered hill
   silhouettes with a low horizon glow; ridges drift at different
   speeds for a slow parallax. */
.hero-lake .hero-contours,
.hero-lake .hero-network { display: none; }

.hero-ridge-back,
.hero-ridge-front,
.hero-mist { display: none; }

.hero-lake .hero-ridge-back,
.hero-lake .hero-ridge-front {
  display: block;
  position: absolute;
  inset: 0 -1.5%;
  pointer-events: none;
}
.hero-lake .hero-ridge-back {
  background-color: oklch(0.23 0.06 25);
  -webkit-mask: url("../assets/ridge-back.svg") no-repeat center bottom / cover;
  mask: url("../assets/ridge-back.svg") no-repeat center bottom / cover;
  animation: ridge-drift 70s ease-in-out infinite alternate;
}
.hero-lake .hero-ridge-front {
  background-color: oklch(0.16 0.05 25);
  -webkit-mask: url("../assets/ridge-front.svg") no-repeat center bottom / cover;
  mask: url("../assets/ridge-front.svg") no-repeat center bottom / cover;
  animation: ridge-drift 46s ease-in-out infinite alternate-reverse;
}
@keyframes ridge-drift {
  from { transform: translate3d(-0.6%, 0, 0); }
  to { transform: translate3d(0.6%, 0, 0); }
}

/* Last light pooling on the horizon, plus thin dusk wisps up high */
.hero-lake .hero-mist {
  display: block;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 20% at 68% 61%, oklch(0.68 0.12 55 / 0.26), transparent 70%),
    radial-gradient(38% 6% at 26% 15%, oklch(0.8 0.06 40 / 0.11), transparent 70%),
    radial-gradient(46% 7% at 66% 27%, oklch(0.8 0.06 40 / 0.08), transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  animation: mist-breathe 18s ease-in-out infinite alternate;
}
@keyframes mist-breathe { from { opacity: 0.7; } to { opacity: 1; } }

/* ---------- Hero background option D: trace lines ----------
   Toggled by adding .hero-traces to the hero section. Long diagonal
   glowing lines with endpoint dots (per References/3.webp), baked into
   assets/tracelines.svg (gen_tracelines.py) in the site palette. The
   shared gradient and pointer glow stay as-is. */
.hero-traces .hero-contours,
.hero-traces .hero-network { display: none; }

.hero-tracelines { display: none; }

.hero-traces .hero-tracelines {
  display: block;
  position: absolute;
  inset: 0;
  background: url("../assets/tracelines.svg") no-repeat center / cover;
  pointer-events: none;
  animation: trace-shimmer 11s ease-in-out infinite alternate;
  will-change: opacity;
}
@keyframes trace-shimmer { from { opacity: 0.75; } to { opacity: 1; } }

/* ---------- Combo: lakeshore dusk + trace lines ----------
   Add BOTH .hero-lake and .hero-traces. The trace lines sit behind the
   ridges and tilt back into the sky, converging toward the horizon like
   star streaks; the dusk scene stays exactly as option C. */
.hero-lake.hero-traces .hero-contours,
.hero-lake.hero-traces .hero-network { display: none; }

.hero-lake.hero-traces .hero-tracelines {
  inset: -4% -8% 6%;
  opacity: 0.7;
  transform: perspective(1200px) rotateX(-10deg);
  transform-origin: 50% 0%;
  animation-name: trace-shimmer-far;
}
@keyframes trace-shimmer-far { from { opacity: 0.55; } to { opacity: 0.85; } }

.hero-inner {
  position: relative;
  max-width: 54rem;
  margin-inline: auto;
  margin-block: auto;
  padding-block: 1.5rem clamp(2rem, 4vh, 3.5rem);
  text-align: center;
}

.hero-title {
  font-size: clamp(2.75rem, 1.3rem + 6vw, 5.25rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
  animation: rise 0.9s var(--ease-out) 0.08s both;
}
.hero-title-hub { font-weight: 700; }
.hero-title-digital {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.58em;
  color: var(--hero-muted);
  letter-spacing: 0;
}

.hero-sub {
  color: var(--hero-muted);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: 2.5rem;
  animation: rise 0.9s var(--ease-out) 0.16s both;
}

/* Service links as the kicker line above the title */
.hero-services {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  animation: rise 0.9s var(--ease-out) 0.04s both;
}

.hero-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  flex-wrap: wrap;
  animation: rise 0.9s var(--ease-out) 0.24s both;
}
.hero-cta .button {
  border-radius: 99px;
  padding: 0.9rem 1.9rem;
}
.hero-cta-alt {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: oklch(1 0 0);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: oklch(1 0 0 / 0.35);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s var(--ease-out);
}
.hero-cta-alt::after {
  content: "→";
  margin-left: 0.5rem;
  transition: transform 0.2s var(--ease-out);
}
.hero-cta-alt:hover { text-decoration-color: var(--amber); }
.hero-cta-alt:hover::after { transform: translateX(3px); }
.hero-canada {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  color: var(--hero-muted);
  font-size: 0.9375rem;
  animation: rise 0.9s var(--ease-out) 0.32s both;
}
.hero-canada svg { flex: none; color: var(--amber); }

.hero-services a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  color: var(--hero-muted);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.hero-services a::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--amber);
  transition: background-color 0.2s var(--ease-out);
}
.hero-services a:hover { color: oklch(1 0 0); border-color: var(--amber); }
.hero-services a:hover::before { background: var(--amber); }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Hero glass screen (the scroll cue) ---------- */
.hero-screen {
  --screen-sink: clamp(4rem, 10vh, 7rem);
  position: relative;
  width: min(52rem, calc(100% - clamp(2.5rem, 8vw, 5rem)));
  margin-inline: auto;
  margin-bottom: calc(-1 * var(--screen-sink));
  background: oklch(1 0 0 / 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid oklch(1 0 0 / 0.22);
  border-bottom: 0;
  border-radius: 1.1rem 1.1rem 0 0;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.25),
    0 -24px 60px -30px oklch(0 0 0 / 0.5);
  transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-origin: 50% 100%;
  will-change: transform;
  animation: screen-rise 1s var(--ease-out) 0.4s backwards;
}
@keyframes screen-rise {
  from { opacity: 0; transform: translateY(2.5rem); }
}

.screen-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid oklch(1 0 0 / 0.14);
}
.screen-dots { display: flex; gap: 0.42rem; }
.screen-dots i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.28);
}
.screen-dots i:first-child { background: var(--amber); }
.screen-address {
  margin-inline: auto;
  padding: 0.32rem 1.1rem;
  border-radius: 99px;
  background: oklch(1 0 0 / 0.1);
  color: var(--hero-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
}

.screen-body {
  padding: clamp(1.6rem, 4vh, 2.4rem) clamp(1.4rem, 5vw, 2.6rem) 3rem;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
}
.screen-line {
  height: 0.7rem;
  width: 100%;
  border-radius: 99px;
  background: oklch(1 0 0 / 0.14);
}
.screen-title {
  height: 1.5rem;
  width: 58%;
  background: oklch(1 0 0 / 0.32);
}
.screen-cta {
  height: 2.4rem;
  width: 9rem;
  border-radius: 99px;
  background: var(--amber);
  margin-top: 0.5rem;
}

.screen-tag {
  position: absolute;
  top: -0.85rem;
  right: clamp(1rem, 6vw, 2.5rem);
  background: var(--amber);
  color: var(--oxblood-deep);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 99px;
  transform: rotate(2deg);
  box-shadow: 0 10px 24px -12px oklch(0 0 0 / 0.5);
}

/* ---------- Sections shared ---------- */
.section-head { max-width: 46rem; }
.section-head h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem);
  margin-bottom: 0.9rem;
}
.section-lede {
  color: var(--muted);
  font-size: 1.125rem;
}

/* ---------- Services ---------- */
.services { padding-block: clamp(4.5rem, 9vw, 7rem); }

.services .section-head { margin-bottom: clamp(3rem, 6vw, 5rem); }

.service {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.service + .service { border-top: 1px solid var(--line); }
.service-flip .service-copy { order: 2; }
.service-flip .service-visual { order: 1; }

.service-copy h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  margin-bottom: 0.9rem;
}
.service-copy > p {
  color: var(--muted);
  max-width: 34rem;
  margin-bottom: 1.4rem;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.6rem;
  display: grid;
  gap: 0.45rem;
  font-weight: 500;
}
.service-list li {
  padding-left: 1.4rem;
  position: relative;
}
.service-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--crimson);
}

.service-link {
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--crimson);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.service-link::after { content: " →"; }
.service-link:hover { color: var(--crimson-deep); border-color: var(--crimson-deep); }

/* Service visual 1 — browser sketch */
.service-visual { min-width: 0; }

.browser-sketch {
  position: relative;
  border: 1.5px solid var(--line);
  border-radius: 0.625rem;
  background: var(--bg);
  box-shadow: 0 24px 48px -24px oklch(0.24 0.02 25 / 0.18);
  max-width: 26rem;
  margin-inline: auto;
}
.browser-bar {
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1.5px solid var(--line);
}
.browser-bar i {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--line);
}
.browser-bar i:first-child { background: var(--crimson); }
.browser-body { padding: 1.6rem 1.4rem 1.9rem; display: grid; gap: 0.8rem; }
.sketch-line { height: 0.7rem; border-radius: 99px; background: var(--surface); }
.sketch-title { height: 1.3rem; width: 65%; background: oklch(0.9 0.02 25); }
.w-80 { width: 80%; }
.w-60 { width: 60%; }
.sketch-cta {
  height: 2.1rem; width: 8rem;
  border-radius: 0.375rem;
  background: var(--crimson);
  margin-top: 0.4rem;
}
.care-tag {
  position: absolute;
  right: -0.9rem; bottom: -0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--oxblood);
  color: var(--hero-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  border-radius: 99px;
  transform: rotate(-2deg);
}

/* Service visual 2 — type specimen */
.type-specimen {
  display: grid;
  justify-items: start;
  gap: 0.2rem;
  max-width: 26rem;
  margin-inline: auto;
  padding: 1rem 0;
}
.specimen-word {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 2rem + 2.5vw, 4rem);
  line-height: 1.1;
  color: oklch(0.82 0.015 25);
}
.specimen-word:nth-child(2) { color: var(--muted); margin-left: 1.2em; }
.specimen-em {
  color: var(--crimson);
  font-weight: 700;
  margin-left: 0.5em;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

/* Service visual 3 — honest chat */
.chat-sketch {
  display: grid;
  gap: 0.9rem;
  max-width: 24rem;
  margin-inline: auto;
}
.chat-q, .chat-a {
  padding: 0.9rem 1.2rem;
  border-radius: 1rem;
  font-size: 0.9975rem;
  line-height: 1.5;
}
.chat-q {
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  justify-self: start;
  border-bottom-left-radius: 0.25rem;
  max-width: 85%;
}
.chat-a {
  background: var(--oxblood);
  color: oklch(0.97 0.01 35);
  justify-self: end;
  border-bottom-right-radius: 0.25rem;
}

/* ---------- Process ---------- */
.process {
  background: var(--surface);
  padding-block: clamp(4rem, 8vw, 6rem);
}
.process .section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  counter-reset: step;
}
.step-num {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 2.375rem;
  line-height: 1;
  color: var(--crimson);
  margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.3125rem; margin-bottom: 0.5rem; }
.step p { color: var(--muted); font-size: 0.9975rem; }

/* ---------- About ---------- */
.about {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 9vw, 7rem);
}
.about-contours {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(48rem, 60vw);
  background-color: var(--crimson);
  opacity: 0.1;
  -webkit-mask: url("../assets/contours.svg") no-repeat right center / cover;
  mask: url("../assets/contours.svg") no-repeat right center / cover;
  pointer-events: none;
}
.about-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.about h2 { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 2.875rem); }
.about-prose { display: grid; gap: 1.1rem; max-width: 38rem; }
.about-prose p:last-child { color: var(--muted); }

/* ---------- Contact ---------- */
.contact {
  padding-block: clamp(1rem, 3vw, 2rem) clamp(5rem, 9vw, 7rem);
}
.contact-inner { max-width: 46rem; }
.contact .section-head { margin-bottom: 2.5rem; }

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.field { display: grid; gap: 0.4rem; }
.field-full { grid-column: 1 / -1; }

.field label { font-weight: 600; font-size: 0.9375rem; }

.field input,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 0.375rem;
  padding: 0.75rem 0.9rem;
  transition: border-color 0.2s var(--ease-out);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--crimson);
  box-shadow: 0 0 0 3px oklch(0.52 0.17 22 / 0.15);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-color: var(--crimson); }

.field-error {
  color: var(--crimson);
  font-size: 0.875rem;
  font-weight: 500;
}

.form-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.form-alt { color: var(--muted); font-size: 0.9375rem; }
.form-alt a { font-weight: 600; }

.form-status { grid-column: 1 / -1; font-weight: 500; }
.form-status:empty { display: none; }
.form-status.ok { color: oklch(0.45 0.1 150); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--oxblood);
  color: var(--hero-muted);
  padding-block: 3rem;
}
.footer-inner {
  display: flex;
  align-items: baseline;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}
.site-footer .wordmark { color: oklch(1 0 0); font-size: 1.125rem; }
.footer-meta { font-size: 0.9375rem; }
.footer-meta a { color: inherit; font-weight: 500; }
.footer-copy { margin-left: auto; font-size: 0.875rem; opacity: 0.75; }

/* ---------- Scroll reveals (enhance-only) ----------
   Content is never pre-hidden: the entrance is an animation that plays
   when .in lands, so JS-less browsers and headless renders see everything. */
.anim .reveal.in { animation: reveal-rise 0.7s var(--ease-out) both; }
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 56rem) {
  .service,
  .about-inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .service-flip .service-copy { order: 1; }
  .service-flip .service-visual { order: 2; }
  .service-visual { justify-self: start; width: 100%; }
  .browser-sketch, .type-specimen, .chat-sketch { margin-inline: 0; }
}

@media (max-width: 40rem) {
  .site-nav { display: none; }
  .header-inner { justify-content: space-between; }
  .hero { padding-top: 6.5rem; }
  .hero-services { gap: 0.25rem 1.1rem; }
  .hero-cta { flex-direction: column; gap: 0.9rem; }
  .hero-screen { --screen-sink: clamp(2.5rem, 7vh, 4rem); width: calc(100% - 2rem); }
  .screen-tag { top: -0.75rem; right: 1rem; }
  /* Keep Polaris and its constellation in the cropped frame */
  .hero-north .hero-stars { -webkit-mask-position: 76% top; mask-position: 76% top; }
  /* Keep line A's endpoint dot in frame, clear of the stacked eyebrow */
  .hero-traces .hero-tracelines { background-position: 37% center; }
  /* Combo: keep the full-length traces framed like the flat variant */
  .hero-lake.hero-traces .hero-tracelines { inset: -4% -8% 6%; background-position: 37% center; }
  .contact-form { grid-template-columns: 1fr; }
  .footer-copy { margin-left: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title, .hero-sub, .hero-services, .hero-cta, .hero-canada, .hero-screen { animation: none; }
  .hero-contours, .hero-network { animation: none; }
  .hero-north .hero-stars,
  .hero-north .hero-aurora::before,
  .hero-north .hero-aurora::after { animation: none; }
  .hero-lake .hero-ridge-back,
  .hero-lake .hero-ridge-front,
  .hero-lake .hero-mist { animation: none; }
  .hero-traces .hero-tracelines,
  .hero-lake.hero-traces .hero-tracelines { animation: none; }
  .hero-glow { display: none; }
  .anim .reveal.in { animation: none; }
  .button, .skip-link, .site-header { transition: none; }
}

/* ============ SUB-PAGES (services / about / contact) ============ */

/* Slim dark page-head band, same material as the home hero */
.page-head {
  position: relative;
  overflow: hidden;
  background-color: var(--oxblood);
  background-image:
    radial-gradient(90% 55% at 50% 108%, oklch(0.35 0.11 25 / 0.65), transparent 70%),
    radial-gradient(120% 90% at 20% 0%, oklch(0.33 0.1 25), var(--oxblood) 60%, var(--oxblood-deep));
  color: oklch(1 0 0);
  padding-block: clamp(7.5rem, 13vw, 9.5rem) clamp(3.25rem, 6vw, 4.75rem);
}
.page-head-contours {
  position: absolute;
  inset: 0;
  background-color: var(--hero-muted);
  opacity: 0.14;
  -webkit-mask: url("../assets/contours.svg") no-repeat 78% 30% / 120% auto;
  mask: url("../assets/contours.svg") no-repeat 78% 30% / 120% auto;
  pointer-events: none;
}
.page-head-inner { position: relative; }
.page-head h1 {
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  font-weight: 400;
  margin-bottom: 1rem;
}
.page-head h1 strong { font-weight: 700; }
.page-lede {
  color: var(--hero-muted);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  max-width: 56ch;
}
.page-head .hero-canada { margin-top: 1.75rem; }

/* Anchor pills in the page-head, same grammar as .hero-services */
.page-head-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.9rem;
  margin-top: 2rem;
}
.page-head-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  color: var(--hero-muted);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.page-head-nav a::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--amber);
  transition: background-color 0.2s var(--ease-out);
}
.page-head-nav a:hover { color: oklch(1 0 0); border-color: var(--amber); }
.page-head-nav a:hover::before { background: var(--amber); }

/* Current-page marker in the main nav */
.site-nav a[aria-current="page"] { border-color: var(--amber); }
.site-header.scrolled .site-nav a[aria-current="page"] { border-color: var(--crimson); }

/* Services page: deeper service sections reuse .service; h2 takes the h3 role */
.service-copy h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  margin-bottom: 0.9rem;
}
.list-label {
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.6rem;
}
.service-copy > p.list-label { color: var(--ink); margin-bottom: 0.6rem; }
.service-fit {
  max-width: 34rem;
  margin-block: 1.6rem 1.4rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border-radius: 10px;
  font-size: 0.9375rem;
  color: var(--muted);
}
.service-fit strong { color: var(--ink); }

/* Pointer from the homepage services trio to the full page */
.services-more {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
  font-weight: 500;
}

/* Marketing visual: roadside digital billboard */
.billboard-sketch { max-width: 23rem; margin-inline: auto; }
.billboard-face {
  display: grid;
  gap: 0.7rem;
  padding: 1.6rem 1.5rem;
  background: var(--oxblood);
  border-radius: 10px;
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.15) inset,
    0 18px 40px oklch(0.24 0.02 25 / 0.28);
}
.bb-line { height: 0.55rem; border-radius: 999px; background: oklch(1 0 0 / 0.22); }
.bb-title { height: 0.9rem; width: 58%; background: var(--amber); border-radius: 999px; }
.bb-w70 { width: 70%; }
.bb-w45 { width: 45%; }
.billboard-legs {
  display: flex;
  justify-content: center;
  gap: 3.25rem;
}
.billboard-legs i {
  width: 0.45rem;
  height: 2.4rem;
  background: var(--line);
  border-radius: 0 0 3px 3px;
}
.billboard-base { height: 0.35rem; background: var(--surface); border-radius: 999px; }

/* Custom tools visual: little app window with a checklist */
.tool-sketch {
  max-width: 23rem;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 18px 40px oklch(0.24 0.02 25 / 0.18);
  overflow: hidden;
}
.tool-body { display: grid; gap: 0.85rem; padding: 1.4rem 1.5rem 1.6rem; }
.tool-row { display: flex; align-items: center; gap: 0.7rem; }
.tool-check {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 4px;
  background: var(--crimson);
}
.tool-check.is-empty { background: var(--bg); border: 1.5px solid var(--line); }
.tool-row .sketch-line { flex: 1; }
.tool-meter {
  height: 0.5rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}
.tool-meter i {
  display: block;
  height: 100%;
  width: 68%;
  border-radius: inherit;
  background: var(--amber);
}

/* Integrations visual: spokes into the hub */
.hub-sketch { display: block; width: 100%; max-width: 22rem; margin-inline: auto; height: auto; }
.hub-sketch .spoke { stroke: var(--line); stroke-width: 2; fill: none; }
.hub-sketch .node { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.hub-sketch .node-dot { fill: var(--amber); }
.hub-sketch .core { fill: var(--crimson); }
.hub-sketch .core-leaf { fill: oklch(1 0 0); }

/* Closing CTA band on sub-pages */
.page-cta {
  background: var(--surface);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
  text-align: center;
}
.page-cta h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); margin-bottom: 0.9rem; }
.page-cta p { color: var(--muted); max-width: 46ch; margin: 0 auto 1.8rem; }

/* About page */
.about-section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.about-section + .about-section { padding-top: 0; }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.about-grid h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
.about-grid .prose { max-width: 38rem; }
.prose p { margin-bottom: 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose .aside { color: var(--muted); }
.placeholder-note {
  margin-top: 1.4rem;
  padding: 1.1rem 1.3rem;
  border: 1.5px dashed oklch(0.82 0.02 25);
  border-radius: 10px;
  background: oklch(0.985 0.004 25);
  color: var(--muted);
  font-size: 0.9375rem;
}
.placeholder-note strong { color: var(--ink); }
.values {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem clamp(1.5rem, 4vw, 3rem);
}
.values h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.values p { color: var(--muted); font-size: 0.9875rem; }
.bio {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 1.5rem clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}
.bio-photo {
  aspect-ratio: 4 / 5;
  max-width: 18rem;
  display: grid;
  place-items: center;
  gap: 0;
  border: 1.5px dashed oklch(0.82 0.02 25);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem;
}
.bio-photo svg { opacity: 0.5; margin-bottom: 0.6rem; }

/* Contact page */
.contact-page { padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(5rem, 9vw, 7rem); }
.contact-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-aside .aside-block + .aside-block {
  margin-top: 1.9rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--line);
}
.contact-aside h2 { font-size: 1.25rem; margin-bottom: 0.6rem; }
.contact-aside p { color: var(--muted); font-size: 0.9875rem; }
.next-steps {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0;
  counter-reset: nextstep;
  display: grid;
  gap: 0.8rem;
}
.next-steps li {
  counter-increment: nextstep;
  display: flex;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.9875rem;
}
.next-steps li::before {
  content: counter(nextstep);
  flex: none;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--crimson);
  font-size: 1.0625rem;
  line-height: 1.5;
}

@media (max-width: 56rem) {
  .about-grid, .bio, .contact-page-grid { grid-template-columns: minmax(0, 1fr); }
  .bio-photo { max-width: 14rem; }
}

@media (max-width: 40rem) {
  .page-head-nav { gap: 0 1.4rem; }
  .page-head-nav a { font-size: 0.75rem; letter-spacing: 0.11em; }
}

/* .hero-canada re-used on light backgrounds needs dark ink */
.contact-aside .hero-canada { margin-top: 0.75rem; color: var(--muted); }
.contact-aside .hero-canada svg { color: var(--crimson); }

/* Maple leaf inside the amber screen tag needs breathing room */
.screen-tag { display: inline-flex; align-items: center; gap: 0.4rem; }