/* Routel site styles.
   Layout: framed hero with a generated swirl and a floating nav bar, the headline below it, then a ruled
   "sheet" of sections. Cobalt, navy and sand on paper grey, in light and dark themes.

   Contents: tokens · base · buttons · header · hero · intro · sheet · cards & rail · home sections ·
             service explorer · services page · how-we-work page · planner page · contact page · footer · responsive */

/* ---------- Tokens ---------- */
:root {
  /* Brand colours: the same in both themes (used on art blocks and the sand/cobalt panels). */
  --c-cobalt: #2a36c8;
  --c-navy: #141c78;
  --c-sand: #d8c6a8;
  --c-sand-light: #dccab0;
  --c-amber: #c98a2b;
  --c-violet: #5a3fb8;
  --c-ink: #121318;
  --c-paper-ink: #15161d;
  --c-paper-muted: #5b5d66;

  /* Theme colours: light value first, dark second. The theme comes from color-scheme below. */
  color-scheme: light dark;
  --bg: light-dark(#ebeae7, #0c0d14);
  --surface: light-dark(#ffffff, #161826);
  --raised: light-dark(#ffffff, #23263d);
  --ink: light-dark(#121318, #ecebe6);
  --muted: light-dark(#5b5d66, #a3a4ae);
  --line: light-dark(#d3d1cb, #2b2d3e);
  --chip: light-dark(#f4f3f0, #1d2032);
  --accent: light-dark(#2a36c8, #3f4be0);
  --navy: light-dark(#141c78, #10165c);
  --shadow: 0 1px 2px light-dark(rgb(18 19 24 / 0.06), rgb(0 0 0 / 0.3)),
            0 8px 24px light-dark(rgb(18 19 24 / 0.08), rgb(0 0 0 / 0.35));

  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --frame: 120rem;
  --gutter: clamp(1rem, 3vw, 2rem);
  --section: clamp(3.5rem, 8vw, 6.5rem);
  --radius: clamp(0.875rem, 1.5vw, 1.125rem);
  --r-sm: 4px;
}
/* Set before paint by the head script (saved choice, else the system setting). */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* Colour sets for service and step blocks. --dash colours the swirl texture drawn by site.js. */
.tone-cobalt { --tone-bg: var(--c-cobalt); --tone-ink: #fff; --chip-bg: var(--c-sand); --chip-ink: var(--c-paper-ink); --dash: var(--c-sand-light); }
.tone-sand { --tone-bg: var(--c-sand); --tone-ink: var(--c-paper-ink); --chip-bg: var(--c-cobalt); --chip-ink: #fff; --dash: var(--c-cobalt); }
.tone-navy { --tone-bg: var(--navy); --tone-ink: #fff; --chip-bg: var(--c-sand); --chip-ink: var(--c-paper-ink); --dash: var(--c-sand-light); }
.tone-ink { --tone-bg: #1b1d2c; --tone-ink: #fff; --chip-bg: var(--c-sand); --chip-ink: var(--c-paper-ink); --dash: var(--c-sand-light); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }

.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon .fill { fill: currentColor; stroke: none; }

.wrap { max-width: var(--frame); margin-inline: auto; padding-inline: var(--gutter); }
.display { font-weight: 500; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.display em { font-style: normal; font-weight: 300; }
.label { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
}
.tag .icon { width: 1.375rem; height: 1.375rem; padding: 0.25rem; border-radius: 2px; background: rgb(255 255 255 / 0.18); stroke-width: 2.2; }

.chip { padding: 0.25rem 0.625rem; border-radius: 3px; background: var(--chip-bg, var(--accent)); color: var(--chip-ink, #fff); font-size: 0.75rem; font-weight: 500; }

/* ---------- Buttons ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.pill:hover { border-color: var(--ink); }

/* Label plus an inset arrow square. Default cobalt; -light is white; sand inside the dark panels. */
.cta {
  --cta-bg: var(--accent); --cta-ink: #fff; --arrow-bg: var(--c-sand); --arrow-ink: var(--c-paper-ink);
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 2.75rem;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  border-radius: var(--r-sm);
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.cta-light { --cta-bg: var(--surface); --cta-ink: var(--ink); --arrow-bg: var(--accent); --arrow-ink: #fff; box-shadow: inset 0 0 0 1px var(--line); }
:is(.feature, .band, .card-cta) .cta { --cta-bg: var(--c-sand); --cta-ink: var(--c-paper-ink); --arrow-bg: var(--c-navy); --arrow-ink: var(--c-sand); }
.cta .arrow { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 2px; background: var(--arrow-bg); color: var(--arrow-ink); }
.cta .arrow .icon { width: 0.9375rem; height: 0.9375rem; transform: rotate(-45deg); transition: transform 0.2s ease; }
.cta:hover .arrow .icon { transform: rotate(-45deg) translateX(3px); }

.text-link { display: inline-flex; font-size: 0.875rem; font-weight: 500; border-bottom: 1px solid currentColor; }
.text-link:hover { color: var(--accent); }

/* ---------- Header: fixed bar over the hero, theme toggle on the right ---------- */
.site-header { position: fixed; inset: calc(1rem + env(safe-area-inset-top, 0px)) 0 auto; z-index: 50; pointer-events: none; }
.site-header .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  padding-block: 1rem;
  padding-inline: calc(1rem + var(--gutter) * 0.5);
}
.navbar, .theme-btn { pointer-events: auto; }
.navbar, .menu { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--raised); box-shadow: var(--shadow); }
.navbar {
  position: relative;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: 0.3125rem 0.3125rem 0.3125rem 0.875rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.625rem; }
.brand img { width: 1.75rem; height: 1.75rem; }
.brand-word { width: auto; height: 0.8125rem; fill: none; stroke: currentColor; stroke-width: 8; stroke-miterlimit: 10; }
.nav-links { display: flex; gap: 0.25rem; font-size: 0.875rem; }
.nav-links a { padding: 0.375rem 0.625rem; border-radius: var(--r-sm); color: var(--muted); white-space: nowrap; }
.nav-links a:hover { background: var(--chip); color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.menu-btn {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.menu-btn .icon { width: 1.125rem; height: 1.125rem; }
.menu-btn[aria-expanded="true"] .i-open, .menu-btn[aria-expanded="false"] .i-close { display: none; }
.menu { position: absolute; top: calc(100% + 0.5rem); right: 0; display: grid; gap: 0.25rem; width: min(17rem, calc(100vw - 2rem)); padding: 0.5rem; }
.menu a:not(.cta) { padding: 0.625rem 0.75rem; border-radius: var(--r-sm); font-size: 0.9375rem; }
.menu a:not(.cta):hover { background: var(--chip); }
.menu a[aria-current="page"] { color: var(--accent); font-weight: 500; }
.menu .cta { justify-content: space-between; margin-top: 0.25rem; }
.menu-main { display: none; gap: 0.25rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--line); }
.theme-btn {
  grid-column: 3;
  justify-self: end;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #f1ece2;
  cursor: pointer;
}
.theme-btn .icon { width: 1.75rem; height: 1.75rem; stroke-width: 1.8; filter: drop-shadow(0 1px 3px rgb(10 14 60 / 0.45)); }
[data-theme="dark"] .theme-btn .i-moon, [data-theme="light"] .theme-btn .i-sun { display: none; }
/* Past the hero the toggle sits on the page, so it gets a surface of its own. */
.site-header.is-scrolled .theme-btn { border-color: var(--line); background: var(--raised); color: var(--ink); box-shadow: var(--shadow); }
.site-header.is-scrolled .theme-btn .icon { width: 1.375rem; height: 1.375rem; filter: none; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: calc(100% - 2rem);
  max-width: var(--frame);
  min-height: clamp(34rem, 84svh, 64rem);
  margin: calc(1rem + env(safe-area-inset-top, 0px)) auto 0;
  padding: 7rem 1rem 1rem;
  border-radius: var(--radius);
  /* Shown until the swirl canvas paints. */
  background: radial-gradient(60% 70% at 50% 42%, var(--c-sand) 0%, #b8a7b4 35%, var(--c-cobalt) 75%);
  overflow: hidden;
  isolation: isolate;
}
.hero-page { min-height: clamp(15rem, 28vw, 20rem); }
.swirl { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; }
.hero-mast { position: absolute; left: 50%; bottom: 2.5rem; z-index: -1; width: auto; height: 66%; transform: translateX(-50%); fill: var(--c-ink); pointer-events: none; }
.hero-mast-cells { fill: none; stroke: var(--c-sand-light); stroke-width: 0.8; opacity: 0.55; }
.hero .wrap { position: relative; width: 100%; padding: 0; }
.trades { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(0.5rem, 1.5vw, 1.25rem); }
.trades li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r-sm);
  background: rgb(244 238 228 / 0.92);
  color: var(--c-ink);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  backdrop-filter: blur(6px);
}
.trades li { transition: transform 0.25s ease; }
.trades li:hover { transform: translateY(-3px); }
.trades .icon { width: 1.125rem; height: 1.125rem; color: var(--c-cobalt); stroke-width: 1.8; }

/* ---------- Intro: headline under the hero ---------- */
.intro .wrap {
  display: grid;
  gap: 1.75rem;
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem);
  padding-inline: calc(1rem + var(--gutter) * 0.5);
}
.intro .label { margin-bottom: 0.875rem; }
.intro h1 { max-width: 13em; font-size: clamp(2.375rem, 4.6vw, 5.75rem); }
.hero-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }
.hero-lede { flex: 1 1 18rem; max-width: 34rem; color: var(--muted); }
.actions, .jump { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.jump { gap: 0.5rem; }
.counts { display: flex; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.counts li { padding: 0.625rem 1.25rem; text-align: center; }
.counts li + li { border-left: 1px solid var(--line); }
.counts b { display: block; font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--accent); }
.counts span { font-size: 0.75rem; color: var(--muted); }

/* ---------- Sheet: ruled frame holding the sections ---------- */
.sheet { width: calc(100% - 2rem); max-width: var(--frame); margin-inline: auto; border: 1px solid var(--line); border-bottom: 0; }
.sheet .wrap { max-width: none; }
.sheet > section + section { border-top: 1px solid var(--line); }
.section { padding-block: var(--section); }
.inset { padding: clamp(0.75rem, 1.5vw, 1.125rem); }
.section-head { display: grid; gap: 1.25rem; justify-items: start; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head h2 { max-width: 14em; font-size: clamp(2.125rem, 5vw, 3.75rem); }
.section-head p { max-width: 32rem; color: var(--muted); }

/* ---------- Cards and the drag rail (How we work) ---------- */
.rail-wrap { position: relative; }
.rail {
  display: flex;
  gap: 1rem;
  padding: 0.25rem var(--gutter) 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.card {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(19.5rem, 80vw);
  min-height: 29rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  scroll-snap-align: start;
}
.card-top { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.25rem 0; }
.card-mark { width: 1.125rem; height: 1.125rem; color: var(--accent); }
.card .chip { --chip-bg: var(--accent); --chip-ink: #fff; }
.card-art { position: relative; display: grid; place-items: end start; min-height: 9.5rem; padding: 0 0.75rem 0.75rem; border-radius: var(--r-sm); background: var(--tone-bg, var(--chip)); color: var(--tone-ink, var(--ink)); overflow: hidden; }
.card .num { font-size: 6.5rem; font-weight: 500; line-height: 0.85; letter-spacing: -0.06em; }
.card-body { display: grid; gap: 0.5rem; padding: 0.25rem 0.5rem 0.5rem; }
.card h3 { font-size: 1.375rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }
.card-body > p { font-size: 0.875rem; color: var(--muted); }
.gets { display: flex; flex-wrap: wrap; gap: 0.375rem; padding-top: 0.25rem; }
.gets li { padding: 0.1875rem 0.5rem; border: 1px solid var(--line); border-radius: 3px; font-size: 0.75rem; }
.card-cta { justify-content: space-between; padding: 1.25rem; border-color: transparent; background: var(--accent); color: #fff; }
.card-cta .card-mark { color: var(--c-sand); }
.card-cta h3 { font-size: 2.25rem; line-height: 1.02; letter-spacing: -0.04em; }
.card-cta p { font-size: 0.9375rem; opacity: 0.82; }
.card-cta > div { display: grid; gap: 1rem; justify-items: start; }

.drag-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: none;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: -2.25rem 0 0 -2.25rem;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .rail-wrap.is-scrollable .rail { cursor: grab; user-select: none; -webkit-user-select: none; }
  .rail-wrap.is-scrollable .rail.is-dragging { cursor: grabbing; }
  .rail-wrap.is-scrollable .drag-badge { display: grid; }
  .rail-wrap.is-scrollable:hover .drag-badge { opacity: 1; }
  .rail-wrap.is-dragging .drag-badge { transform: scale(0.8); }
  .rail-wrap.is-scrollable.over-link .drag-badge { opacity: 0; transform: scale(0.5); }
}

/* ---------- Dark panels with sand dashes (feature) and the cobalt band ---------- */
.feature, .band { --dash: var(--c-sand-light); position: relative; border-radius: var(--r-sm); color: #fff; overflow: hidden; isolation: isolate; }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 5rem);
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: var(--navy);
}
.feature-copy { display: grid; gap: 1.25rem; justify-items: start; max-width: 28rem; padding-block: clamp(0.5rem, 2vw, 1.5rem); }
.feature-copy h2 { font-size: clamp(2rem, 4vw, 3rem); }
.feature-copy p { color: rgb(255 255 255 / 0.8); }
.feature-copy p b { color: #fff; font-weight: 600; }
.feature-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); background: var(--c-cobalt); color: var(--c-sand); }
.feature-icon .icon { width: 1.5rem; height: 1.5rem; }
.band {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--accent);
}
.band h2 { max-width: 10em; font-size: clamp(2.125rem, 5vw, 3.5rem); }
.band div { display: grid; gap: 1.25rem; justify-items: start; max-width: 22rem; }
.band p { color: rgb(255 255 255 / 0.85); }

/* Sand cards that sit inside the feature panel. Fixed paper colours: they read the same in both themes. */
.steps, .flow { border-radius: var(--r-sm); background: var(--c-sand); color: var(--c-paper-ink); padding: clamp(0.75rem, 2vw, 1.25rem); }
.steps li, .flow-head, .flow li { border-radius: 3px; background: #fff; box-shadow: 0 1px 2px rgb(18 19 24 / 0.1); }
.steps { display: grid; gap: 0.625rem; }
.steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; align-items: center; padding: 0.875rem 1rem; }
.steps b { grid-row: span 2; font-size: 2rem; font-weight: 500; line-height: 1; letter-spacing: -0.04em; color: var(--c-cobalt); font-variant-numeric: tabular-nums; }
.steps h3 { font-size: 0.9375rem; font-weight: 600; }
.steps p { font-size: 0.8125rem; color: var(--c-paper-muted); }

/* Home: the four steps drawn as a small diagram, a spine down the middle with nodes either side. */
.flow { position: relative; }
.flow-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; box-shadow: none; font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.flow-badges { display: flex; }
.flow-badges span { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border: 2px solid #fff; border-radius: 50%; background: var(--c-cobalt); color: #fff; }
.flow-badges span + span { margin-left: -0.5rem; }
.flow-badges span:nth-child(2) { background: var(--c-amber); }
.flow-badges span:nth-child(3) { background: var(--c-navy); }
.flow-badges span:nth-child(4) { background: var(--c-ink); }
.flow-badges .icon { width: 0.875rem; height: 0.875rem; stroke-width: 2.4; }
.flow ol {
  --spine: 1.5px solid rgb(21 22 29 / 0.3);
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(0.25rem, 2vw, 1.25rem) 3.25rem;
}
.flow ol::before { content: ""; position: absolute; left: 50%; top: 3.25rem; bottom: 4.5rem; border-left: var(--spine); }
.flow li { position: relative; display: grid; gap: 0.25rem; padding: 0.75rem 0.875rem; }
.flow li:nth-child(even) { transform: translateY(2.25rem); }
.flow li::after { content: ""; position: absolute; top: 50%; width: 1.25rem; border-top: var(--spine); }
.flow li:nth-child(odd)::after { left: 100%; }
.flow li:nth-child(even)::after { right: 100%; }
.flow li b { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; }
.flow li b::before { content: ""; flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--dot, var(--c-ink)); }
.flow li:nth-child(1) { --dot: var(--c-violet); }
.flow li:nth-child(2) { --dot: var(--c-amber); }
.flow li:nth-child(3) { --dot: var(--c-cobalt); }
.flow li > span:not(.flow-note) { font-size: 0.75rem; line-height: 1.4; color: var(--c-paper-muted); }
.flow-note {
  position: absolute;
  right: -0.5rem;
  bottom: -1.125rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem;
  border-radius: 999px;
  background: var(--c-cobalt);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgb(20 28 120 / 0.35);
}
.flow-note .icon { width: 1.125rem; height: 1.125rem; padding: 0.1875rem; border-radius: 50%; background: rgb(255 255 255 / 0.22); stroke-width: 3; }

/* ---------- Home: about and contact ---------- */
.about-frame { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2rem clamp(1.5rem, 4vw, 4rem); }
.about-main { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.about-statement { font-size: clamp(1.625rem, 3.4vw, 2.75rem); line-height: 1.1; }
.about-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); font-size: 0.9375rem; color: var(--muted); }
.about-cols h3 { margin-bottom: 0.5rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(2.5rem, 6vw, 4rem); }
.points, .details, .faq { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.points li { display: grid; gap: 0.5rem; align-content: start; padding: 1.5rem; }
.points li + li { border-left: 1px solid var(--line); }
.points h3 { display: flex; align-items: center; gap: 0.625rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; }
.points h3::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; background: var(--accent); }
.points p { font-size: 0.875rem; color: var(--muted); }

.contact .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-intro { display: grid; gap: 1.25rem; justify-items: start; }
.contact-intro h2 { max-width: 10em; font-size: clamp(2.25rem, 5vw, 3.75rem); }
.contact-intro p { max-width: 26rem; color: var(--muted); }
.details div { display: grid; gap: 0.125rem; padding: 1.125rem 1.25rem; }
.details div + div { border-top: 1px solid var(--line); }
.details dt { font-size: 0.8125rem; color: var(--muted); }
.details dd { font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.details a:hover { color: var(--accent); }

/* ---------- Home: service explorer (list left, one open panel right; accordion when narrow) ---------- */
.svc {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: repeat(4, auto) 1fr;
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.svc-item { display: contents; }
.svc-tab {
  grid-column: 1;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.125rem 1rem;
  width: 100%;
  padding: 1.25rem 1rem;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.svc-n { grid-row: span 2; align-self: start; padding-top: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc-tab b { font-size: clamp(1.375rem, 2.3vw, 1.875rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.035em; }
.svc-tab small { grid-column: 2; font-size: 0.8125rem; color: var(--muted); }
.svc-go { grid-column: 3; grid-row: 1 / span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: 2px; transition: transform 0.2s ease; }
.svc-go .icon { width: 0.9375rem; height: 0.9375rem; }
.svc-tab:hover b { color: var(--accent); }
.svc-tab:hover .svc-go { transform: translateX(3px); }
.svc-tab[aria-expanded="true"] { border-top-color: transparent; border-radius: var(--r-sm); background: var(--accent); color: #fff; }
.svc-tab[aria-expanded="true"] b { color: #fff; }
.svc-tab[aria-expanded="true"] :is(.svc-n, small) { color: rgb(255 255 255 / 0.75); }
.svc-tab[aria-expanded="true"] .svc-go { border-color: transparent; background: var(--c-sand); color: var(--c-paper-ink); transform: none; }
.svc-item:has(.svc-tab[aria-expanded="true"]) + .svc-item .svc-tab { border-top-color: transparent; }
.svc-panel { grid-column: 2; grid-row: 1 / -1; display: grid; gap: 1.5rem; animation: rise 0.35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.svc-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(15rem, 26vw, 22rem);
  padding: 1rem 1.25rem 1.25rem;
  border-radius: var(--r-sm);
  background: var(--tone-bg);
  color: var(--tone-ink);
  overflow: hidden;
  isolation: isolate;
}
.svc-art-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.svc-count { font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.8; }
.svc-icon { position: absolute; right: 6%; top: 50%; z-index: -1; width: min(42%, 15rem); height: auto; transform: translateY(-46%); stroke-width: 0.7; }
.svc-art-title { max-width: 8em; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.045em; }
.svc-body { display: grid; gap: 1.25rem; padding-inline: 0.25rem; }
.svc-body > p { max-width: 40rem; font-size: 1.0625rem; color: var(--muted); }
.svc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 0.25rem; }
.svc-pair { flex: 1 1 18rem; max-width: 30rem; padding-left: 0.875rem; border-left: 2px solid var(--accent); font-size: 0.875rem; color: var(--muted); }
.svc-cta { grid-column: 1; display: grid; gap: 1rem; justify-items: start; margin-top: 1.5rem; padding: 1.25rem; border: 1px dashed var(--line); border-radius: var(--r-sm); }
.svc-cta p { font-size: 0.9375rem; color: var(--muted); }
.svc-cta b { color: var(--ink); font-weight: 600; }

/* Ticked list, shared by the explorer and the services page. */
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; font-size: 0.9375rem; font-weight: 500; }
.ticks li { display: flex; gap: 0.625rem; align-items: baseline; padding-block: 0.75rem; border-top: 1px solid var(--line); }
.ticks li::before { content: ""; flex: none; width: 0.375rem; height: 0.375rem; background: var(--accent); transform: translateY(-0.15rem); }

/* ---------- Services page ---------- */
.panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(2rem, 5vw, 3.5rem); scroll-margin-top: 6rem; }
.panel:first-child { padding-top: 0; }
.panel + .panel { border-top: 1px solid var(--line); }
.panel:nth-of-type(even) .panel-art { order: 2; }
.panel-art {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 24rem;
  padding: 1rem;
  border-radius: var(--r-sm);
  background: var(--tone-bg);
  color: var(--tone-ink);
  overflow: hidden;
}
.panel-art .card-mark { color: inherit; }
.panel-art .num { position: relative; font-size: clamp(5rem, 12vw, 9rem); font-weight: 500; line-height: 0.85; letter-spacing: -0.06em; }
/* To use a photo: swap the icon for <img class="panel-icon" src="..." alt="">. */
.panel-icon { position: absolute; right: -6%; top: 12%; width: 72%; height: auto; opacity: 0.22; stroke-width: 0.6; }
img.panel-icon { inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.panel-copy { display: grid; gap: 1.25rem; align-content: center; }
.panel-copy h2 { font-size: clamp(2.125rem, 4.5vw, 3.5rem); }
.panel-copy > p { max-width: 34rem; color: var(--muted); }
.pairs { display: grid; gap: 0.5rem; }
.pairs h3 { font-size: 0.8125rem; font-weight: 600; }
.pair { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.875rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 0.875rem; color: var(--muted); transition: border-color 0.15s ease; }
.pair b { color: var(--accent); font-weight: 600; }
.pair:hover { border-color: var(--accent); }

/* ---------- How we work page ---------- */
.faq { max-width: 52rem; }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.125rem 1.25rem; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 2px; background: var(--chip); font-weight: 500; }
.faq details[open] summary::after { content: "\2013"; background: var(--accent); color: #fff; }
.faq details p { max-width: 40rem; padding: 0 1.25rem 1.375rem; color: var(--muted); }

/* ---------- Planner page ---------- */
.planner { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.q { min-width: 0; margin: 0 0 clamp(2rem, 5vw, 3.25rem); padding: 0; border: 0; }
.q legend { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.25rem; padding: 0; font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; }
.q legend span { font-weight: 300; color: var(--accent); }
.picks, .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.fields { gap: 1rem; }
.pick, .choice { position: relative; display: block; cursor: pointer; }
.pick input, .choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick input:focus-visible + .pick-face, .choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.pick-face {
  position: relative;
  display: grid;
  gap: 1.5rem;
  align-content: space-between;
  min-height: 10rem;
  padding: 1.125rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color 0.15s ease;
}
.pick-face .icon { width: 2rem; height: 2rem; color: var(--accent); stroke-width: 1.4; }
.pick-face b { display: block; font-size: 1.125rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.pick-face small { font-size: 0.75rem; opacity: 0.75; }
.pick-face::after { content: ""; position: absolute; top: 1rem; right: 1rem; width: 1.375rem; height: 1.375rem; border: 1px solid var(--line); border-radius: 2px; background: var(--chip); }
.pick:hover .pick-face { border-color: var(--ink); }
.pick input:checked + .pick-face { border-color: transparent; background: var(--tone-bg); color: var(--tone-ink); }
.pick input:checked + .pick-face .icon { color: inherit; }
.pick input:checked + .pick-face::after {
  border-color: #fff;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a36c8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center / 0.875rem no-repeat;
}
.choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.choice span { display: block; padding: 0.6875rem 1.125rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 0.9375rem; font-weight: 500; }
.choice input:checked + span { border-color: var(--accent); background: var(--accent); color: #fff; }
.field { display: grid; gap: 0.375rem; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.field input, .field textarea { width: 100%; padding: 0.8125rem 0.875rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: inherit; font: inherit; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field :focus-visible { outline-offset: 1px; }
.brief { position: sticky; top: 6rem; display: grid; gap: 1.25rem; padding: 1.5rem; border-radius: var(--r-sm); background: var(--c-sand); color: var(--c-paper-ink); }
.brief h2 { font-size: 2rem; }
.brief-empty { font-size: 0.9375rem; }
.brief dl div { display: grid; gap: 0.125rem; padding-block: 0.75rem; border-top: 1px solid rgb(21 22 29 / 0.18); }
.brief dt { font-size: 0.75rem; opacity: 0.75; }
.brief dd { font-weight: 600; overflow-wrap: anywhere; }
.brief-hints { display: grid; gap: 0.5rem; }
.brief-hints li { padding: 0.75rem 0.875rem; border-radius: 3px; background: rgb(255 255 255 / 0.55); font-size: 0.8125rem; line-height: 1.45; }
.brief-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.brief-actions .cta { --cta-bg: var(--c-cobalt); --arrow-bg: #fff; --arrow-ink: var(--c-cobalt); }
.brief-actions .pill { min-height: 2.75rem; border-color: rgb(21 22 29 / 0.35); background: transparent; color: var(--c-paper-ink); }
.brief-actions .pill:hover { background: rgb(255 255 255 / 0.4); }
.brief [aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.brief-status { min-height: 1.25rem; font-size: 0.8125rem; }

/* ---------- Contact page ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.way { display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: 16rem; padding: 1.25rem; border-radius: var(--r-sm); background: var(--tone-bg); color: var(--tone-ink); transition: transform 0.2s ease; }
a.way:hover { transform: translateY(-3px); }
.way .chip { align-self: flex-start; }
.way b { display: block; font-size: clamp(1.375rem, 2.4vw, 2rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; overflow-wrap: anywhere; }
.way span span { font-size: 0.8125rem; opacity: 0.8; }
.tell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); margin-top: clamp(2.5rem, 6vw, 4rem); }
.tell li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.tell b { grid-row: span 2; font-size: 2.75rem; font-weight: 300; line-height: 0.9; letter-spacing: -0.05em; color: var(--accent); }
.tell h3 { font-size: 1.0625rem; font-weight: 600; }
.tell p { font-size: 0.875rem; color: var(--muted); }

/* ---------- Footer: closes the sheet frame ---------- */
.site-footer { margin-bottom: 1rem; }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  width: calc(100% - 2rem);
  padding-block: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--muted);
  font-size: 0.8125rem;
}
.footer-nap { display: grid; gap: 0.125rem; font-style: normal; }
.footer-nap strong { color: var(--ink); font-weight: 600; }
.footer-nap a:hover, .footer-nav a:hover { color: var(--ink); }
.footer-nav { display: flex; flex-wrap: wrap; align-content: start; gap: 0.5rem 1.5rem; }
.site-footer small { flex-basis: 100%; padding-top: 0.75rem; border-top: 1px solid var(--line); font-size: inherit; }

/* ---------- Motion (animations live in motion.js) ---------- */
/* Load-in elements start hidden while motion.js runs. If it never arrives, they appear after 3s anyway. */
.motion :is(.navbar, .theme-btn, .hero-mast, .trades li, .intro .wrap > *) { opacity: 0; animation: motion-fallback 0s 3s forwards; }
@keyframes motion-fallback { to { opacity: 1; visibility: visible; } }
/* Headline words rise out of a clipped line. The padding keeps descenders from being cut off. */
.word { display: inline-block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; vertical-align: top; }
.word > span { display: inline-block; }
.has-gsap .svc-panel { animation: none; }
/* Cross-fade between pages; the fixed header stays put. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .trades { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trades li:nth-child(n + 5) { display: none; }
}
@media (max-width: 60rem) {
  .site-header .wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .navbar { grid-column: 1; justify-self: start; width: 100%; max-width: 26rem; }
  .theme-btn { grid-column: 2; }
  .nav-links { display: none; }
  .menu-main { display: grid; }
  .about-frame, .contact .wrap, .planner, .feature, .svc { grid-template-columns: minmax(0, 1fr); }
  .svc { grid-template-rows: none; }
  .svc-panel { grid-column: 1; grid-row: auto; padding: 0.75rem 0 1.75rem; }
  .brief { position: static; }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way { min-height: 11rem; }
}
@media (max-width: 46rem) {
  .hero { min-height: max(34rem, 78svh); padding-top: 6rem; }
  .hero-page { min-height: 14rem; }
  .hero-mast { height: 56%; bottom: 7.5rem; }
  .trades { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .trades li { min-height: 2.75rem; font-size: 0.8125rem; }
  .points, .panel, .tell { grid-template-columns: minmax(0, 1fr); }
  .points li + li { border-left: 0; border-top: 1px solid var(--line); }
  .flow ol { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding-left: 1.75rem; padding-bottom: 1.25rem; }
  .flow ol::before { left: 0.75rem; top: 2.25rem; bottom: 3rem; }
  .flow li:nth-child(even) { transform: none; }
  .flow li:is(:nth-child(odd), :nth-child(even))::after { left: auto; right: 100%; width: 1rem; }
  .flow-note { right: 0.5rem; }
  .panel:nth-of-type(even) .panel-art { order: 0; }
  .panel-art { min-height: 15rem; }
}
@media (max-width: 30rem) {
  .about-cols, .ticks, .fields { grid-template-columns: minmax(0, 1fr); }
  .pair { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
  .pick-face { min-height: 9rem; padding: 0.875rem; }
  .counts li { padding-inline: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}