/* ============================================================================
   Codespark Infotech — "Meridian"
   ----------------------------------------------------------------------------
   Thesis: this company sells a shared working day across a 3.5–4.5h gap.
   So the page is built from that world — meridians, hours, overlap windows.

   Ground is cool drafting paper, not agency black. The accent is indigo,
   the dye India sent across the world. Brass is reserved for ONE job:
   marking hours that are lit in both places. Never decoration.

   Layout spine: a vertical meridian rule down the left of the content
   column. Markers hanging off it always encode something true —
   longitudes for regions, durations for process. Never 01 / 02 / 03.
   ========================================================================== */

@font-face {
  font-family: "Bricolage";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/bricolage-700.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/instrument-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/instrument-500.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/instrument-600.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/spacemono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/spacemono-700.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light;

  --ink: #0b1522;          /* deep navy printing ink */
  --ink-2: #132135;        /* raised surface on ink bands */
  --paper: #e7eaee;        /* cool drafting paper, blue cast */
  --sheet: #f6f7f9;        /* raised surface on paper */
  --indigo: #2b27d8;       /* the accent — indigo, the dye India exported */
  --indigo-lift: #443fff;  /* hover / active */
  --brass: #e0a02a;        /* LIT HOURS ONLY. never decorative */
  --brass-lift: #f0b444;   /* brass hover */
  --brass-deep: #8a5d08;   /* brass text on paper, for contrast */
  --rule: #c6cdd7;         /* hairlines */
  --text: #0b1522;
  --muted: #55667b;
  --error: #b3261e;

  --r-s: 4px;
  --r-m: 10px;
  --r-l: 18px;

  --wrap: 1240px;
  --gutter: 28px;
  --rail: 148px;
  --rail-gap: 40px;
  --hdr: 68px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --f-display: "Bricolage", "Instrument Sans", system-ui, sans-serif;
  --f-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Space Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--indigo); text-decoration: none; }
a:hover { color: var(--indigo-lift); }
::selection { background: var(--indigo); color: #fff; }

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-m);
}
.skip:focus { left: 12px; color: #fff; }

/* Paper texture. Subtle — it should read as stock, not as a filter. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------- Layout: the meridian spine ---------- */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  column-gap: var(--rail-gap);
}
.wrap > .eyebrow { grid-column: 1; justify-self: end; text-align: right; margin: 4px 0 0; }
.wrap > .col { grid-column: 2; min-width: 0; }

/* the meridian rule, and the tick that crosses it */
.col {
  position: relative;
  border-left: 1px solid var(--rule);
  padding-left: var(--rail-gap);
}
.col::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 13px;
  width: 28px;
  height: 1px;
  background: var(--indigo);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.6s var(--ease-out);
}
.col.is-in::before { transform: scaleX(1); }
.no-js .col::before { transform: scaleX(1); }

/* a plain centred block, for full-bleed rows */
.wrap-plain {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.band { padding: 104px 0; position: relative; }
.band-tight { padding: 64px 0; }
/* a band that continues the one above it rather than starting a new beat */
.band-flush { padding-top: 0; }

/* Ink surfaces. The dark bands, the AI offer card and the footer are all the
   same palette, so it is declared once — otherwise the three drift apart the
   first time someone retunes the dark tones. */
.band-ink,
.ai-offer,
.ftr {
  --paper: #0b1522;
  --sheet: #132135;
  --text: #e7eaee;
  --text-strong: #ffffff;
  --muted: #90a2b8;
  --muted-dim: #7286a0;
  --rule: #26394f;
  --indigo: #8b86ff;
  --indigo-lift: #a9a5ff;
  --brass-deep: #e0a02a;
  background: var(--ink);
  color: var(--text);
}
/* A raised band. Surfaces inside it step up to white so inputs and cards
   still read as objects sitting on top, not as holes cut into it. */
.band-sheet {
  background: #f1f3f6;
  --sheet: #ffffff;
}

/* ---------- Type ---------- */

.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.5;
}
.eyebrow b { color: var(--indigo); font-weight: 700; }

.h1 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2.9rem, 7.6vw, 6.4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 26px;
}
.h1 .line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.h1 .line > span { display: block; }
.h1 em { font-style: normal; color: var(--indigo); }

.h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  margin: 0 0 18px;
}
.h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
  margin: 0 0 44px;
}
.lead-tight { margin-bottom: 28px; }
.note { font-size: 0.9rem; color: var(--muted); margin: 0; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  padding: 14px 26px;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: var(--r-m);
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 0.97rem;
  letter-spacing: -0.005em;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease), transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 1px 0 rgba(11, 21, 34, 0.16);
}
.btn-primary:hover { background: var(--indigo-lift); color: #fff; }
.band-ink .btn-primary { color: var(--ink); }
.band-ink .btn-primary:hover { color: var(--ink); }

.btn-ghost {
  background: transparent;
  border-color: var(--rule);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--text); color: var(--text); }

.btn-sm { padding: 10px 18px; font-size: 0.9rem; }

/* ---------- Header ---------- */

.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.hdr.is-solid {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--rule);
}
.nav-sentinel { position: absolute; top: 1px; width: 1px; height: 1px; }

.nav {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--hdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark { width: 15px; height: 15px; fill: var(--indigo); flex: none; }
.brand-name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.03em;
}
.brand-sub { color: var(--muted); font-weight: 700; }

.nav-menu { display: flex; align-items: center; gap: 28px; }
.nav-menu > a:not(.btn) {
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.nav-menu > a:not(.btn):hover { color: var(--text); }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle-bar {
  width: 16px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Hero ---------- */

.hero { padding: calc(var(--hdr) + 54px) 0 84px; position: relative; overflow: hidden; }

.hero-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-bottom: 30px;
}
.hero-eyebrow > span { display: inline-flex; align-items: center; gap: 8px; }
.hero-eyebrow > span + span { padding-left: 18px; border-left: 1px solid var(--rule); }
.hero-eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
}

.hero-sub { max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 54px; }

/* ---------- SIGNATURE: the overlap band ----------
   A live 24-hour strip. Reads the visitor's real timezone, draws their
   working day against India's, and lights the hours that exist in both
   places at once. The claim the whole business rests on, made checkable. */

.ob {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  padding: 26px 30px 22px;
  max-width: 960px;
}

.ob-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.ob-kicker {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}
.ob-note {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.ob-clocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 18px 0 22px;
}
.ob-clock { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ob-zone {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ob-time {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: clamp(1.45rem, 3.4vw, 1.95rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.18;
}

.ob-chart { display: grid; gap: 9px; }

.ob-row {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 132px;
  align-items: center;
  gap: 14px;
}
.ob-label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.ob-val {
  font-family: var(--f-mono);
  font-size: 0.78rem;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ob-val-lit { color: var(--brass-deep); font-weight: 700; }

.ob-track {
  position: relative;
  height: 26px;
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--rule) 42%, transparent);
}
.ob-track-clip {
  position: absolute;
  inset: 0;
  border-radius: var(--r-s);
  overflow: hidden;
}
.ob-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--s, 0%);
  width: var(--w, 0%);
  border-radius: var(--r-s);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s var(--ease-out);
}
.ob.is-in .ob-bar { transform: scaleX(1); }
.no-js .ob-bar { transform: scaleX(1); }

.ob-bar-you { background: color-mix(in srgb, var(--ink) 24%, transparent); }
.ob-bar-us { background: color-mix(in srgb, var(--indigo) 38%, transparent); }
.ob-bar-lap {
  background: var(--brass);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass-deep) 45%, transparent);
}

.ob.is-in .ob-bar-us { transition-delay: 0.14s; }
.ob.is-in .ob-bar-lap { transition-delay: 0.3s; }

/* right now, on the same scale — this is what ties the ticking
   clocks above to the bars below */
.ob-now {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: var(--now, 50%);
  width: 1px;
  background: var(--text);
  opacity: 0.55;
  z-index: 2;
  pointer-events: none;
}

.ob-axis {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 132px;
  gap: 14px;
  margin-bottom: 2px;
}
.ob-ticks {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.ob-foot {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--muted);
}
.ob-foot b { color: var(--text); font-weight: 600; }

/* ---------- Services ---------- */

.svc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.svc {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 26px 24px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  color: var(--text);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.svc:hover {
  color: var(--text);
  border-color: var(--indigo);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -20px rgba(11, 21, 34, 0.45);
}
.svc-w6 { grid-column: span 6; }
.svc-w12 { grid-column: span 12; }
.svc-icon { width: 24px; height: 24px; color: var(--indigo); margin-bottom: 6px; }
.svc p { margin: 0; color: var(--muted); font-size: 0.96rem; }
/* the AI line is a footnote to the service, not a second headline —
   the indigo rule marks it, the type stays quiet */
.svc .svc-ai {
  margin-top: 12px;
  padding-left: 11px;
  border-left: 1px solid var(--indigo);
  font-family: var(--f-mono);
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--muted);
}
.svc-more {
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.86rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.svc .svc-more { color: var(--indigo); margin-top: auto; padding-top: 14px; }
.svc-more::after { content: "\2192"; transition: transform 0.25s var(--ease); }
.svc:hover .svc-more::after { transform: translateX(4px); }

.svc-row { flex-direction: row; align-items: flex-start; gap: 22px; }
.svc-row .svc-icon { margin: 2px 0 0; }
.svc-row > div { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.svc-also { margin: 26px 0 0; font-size: 0.95rem; color: var(--muted); }
.svc-also a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.svc-also a:hover { text-decoration-color: currentColor; }

/* ---------- Stack + marquee ---------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; }
.marquee-group {
  display: flex;
  align-items: center;
  gap: 56px;
  margin: 0 28px 0 0;
  padding: 0;
  list-style: none;
}
.marquee-group img {
  height: 30px;
  width: auto;
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity 0.3s var(--ease), filter 0.3s var(--ease);
}
.marquee-group img:hover { opacity: 1; filter: none; }

@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: slide 46s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
}
@keyframes slide { to { transform: translateX(-50%); } }

.stack-below { margin-top: 36px; }

.stack-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  column-gap: 40px;
  margin-top: 8px;
}
.stack-group {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}
.stack-key {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--indigo);
  min-width: 74px;
  flex: none;
}
.stack-group span:last-child { color: var(--muted); }

/* ---------- AI ---------- */

.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.ai-card {
  padding: 26px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
}
.ai-card .svc-icon { margin-bottom: 12px; }
.ai-card p { margin: 0; color: var(--muted); font-size: 0.96rem; }

.ai-offer {
  margin-top: 14px;
  padding: 28px 30px;
  border-radius: var(--r-l);
  background: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.ai-offer .h3 { color: var(--text-strong); }
.ai-offer p { margin: 0; color: var(--muted); max-width: 56ch; font-size: 0.96rem; }
.ai-offer .btn-primary { background: var(--brass); color: var(--ink); }
.ai-offer .btn-primary:hover { background: var(--brass-lift); color: var(--ink); }

/* ---------- Work ---------- */

.work-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.work-card {
  padding: 28px 26px;
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  background: var(--sheet);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.work-card:hover { border-color: var(--indigo); transform: translateY(-3px); }
.work-tag {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 14px;
}
.work-card p { margin: 0; color: var(--muted); font-size: 0.96rem; }

/* ---------- Regions: the markers are real longitudes ---------- */

.region-grid { display: grid; }
.region {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  gap: 28px;
  padding: 30px 0;
  border-top: 1px solid var(--rule);
}
.region:last-child { border-bottom: 1px solid var(--rule); }
.region-meta { display: flex; flex-direction: column; gap: 5px; }
.region-meta .h3 { margin: 0; }
.region-lon {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--indigo);
  letter-spacing: 0.02em;
}
.region-gap {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.region ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.region li {
  color: var(--muted);
  font-size: 0.96rem;
  padding-left: 20px;
  position: relative;
}
.region li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 9px;
  height: 1px;
  background: var(--indigo);
}

/* ---------- Process: the markers are real durations ---------- */

.proc-stack { margin-top: 8px; }
.proc {
  position: sticky;
  top: calc(var(--hdr) + 20px);
  padding-bottom: 18px;
}
.proc-inner {
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  background: var(--ink-2);
  padding: 40px 38px;
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.proc-when {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
}
.proc-inner p {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 56ch;
}
.proc .h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 12px; }

/* ---------- Engagement models ---------- */

.models {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
}
.model { border-top: 2px solid var(--indigo); padding-top: 18px; }
.model p { margin: 0; color: var(--muted); font-size: 0.96rem; }

/* ---------- FAQ ---------- */

.faq { max-width: 840px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  transition: color 0.2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--indigo); }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 1.5px solid var(--indigo);
  border-bottom: 1.5px solid var(--indigo);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details p {
  margin: 0;
  padding: 0 44px 24px 0;
  color: var(--muted);
  max-width: 68ch;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px;
}

.hp-field { position: absolute; left: -9999px; opacity: 0; }

#quote-form { display: grid; gap: 20px; }
.field { display: grid; gap: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label, .field-label { font-weight: 500; font-size: 0.93rem; }
.opt { color: var(--muted); font-weight: 400; font-size: 0.84rem; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 0.98rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 116px; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--indigo) 16%, transparent);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); }

.need-group { display: flex; flex-wrap: wrap; gap: 8px; }
.need-pill { position: relative; }
.need-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.need-pill span {
  display: inline-block;
  padding: 9px 15px;
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  font-size: 0.89rem;
  color: var(--muted);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    background 0.2s var(--ease);
}
.need-pill span:hover { border-color: var(--text); color: var(--text); }
.need-pill input:checked + span {
  border-color: var(--indigo);
  background: var(--indigo);
  color: #fff;
}
.need-pill input:focus-visible + span { outline: 2px solid var(--indigo); outline-offset: 2px; }

.field-error { margin: 0; color: var(--error); font-size: 0.84rem; }
.form-status { margin: 0; font-size: 0.94rem; min-height: 1.4em; }
.form-status.is-success { color: var(--brass-deep); font-weight: 600; }
.form-status.is-error { color: var(--error); }
.form-note { margin: 0; color: var(--muted); font-size: 0.87rem; }

/* intl-tel-input, restyled for paper */
.iti { width: 100%; }
.iti__selected-country, .iti--separate-dial-code .iti__selected-country-primary { background: transparent; }
.iti__selected-country:hover .iti__selected-country-primary { background: rgba(11, 21, 34, 0.05); }
.iti__selected-dial-code { color: var(--text); }
.iti__arrow { border-top-color: var(--muted); }
.iti__dropdown-content {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  color: var(--text);
}
.iti__search-input {
  background: var(--sheet);
  color: var(--text);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-body);
}
.iti__search-input:focus { outline: none; }
.iti__country-list { background: transparent; }
.iti__country.iti__highlight { background: rgba(43, 39, 216, 0.08); }
.iti__dial-code { color: var(--muted); }

.rail-col { display: grid; gap: 26px; align-content: start; padding-top: 8px; }
.rail-item { display: grid; gap: 8px; justify-items: start; }
.rail-item p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.rail-email {
  font-family: var(--f-mono);
  font-size: 0.92rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 3px;
  transition: border-color 0.2s var(--ease);
}
.rail-email:hover { border-color: var(--indigo); }

.rail-address {
  font-style: normal;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0 0 8px;
}

.rail-next {
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  padding: 22px 24px;
  background: var(--sheet);
}
.rail-next ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: step; }
.rail-next li {
  color: var(--muted);
  font-size: 0.93rem;
  padding-left: 30px;
  position: relative;
  counter-increment: step;
}
.rail-next li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--indigo);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
}

/* ---------- Footer ---------- */

.ftr { padding: 64px 0 28px; }
.ftr .brand { color: var(--text-strong); }
.ftr .brand:hover { color: var(--text-strong); }
.ftr .brand-sub { color: var(--muted); }
.ftr .brand-mark { fill: var(--brass); }

.ftr-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.ftr-brand p { color: var(--muted); font-size: 0.92rem; margin: 16px 0; max-width: 40ch; }
.ftr-address { font-style: normal; color: var(--muted); font-size: 0.88rem; line-height: 1.7; }
.ftr-col { display: grid; gap: 11px; align-content: start; }
.ftr-col h4 {
  margin: 0 0 4px;
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}
.ftr-col a { color: var(--muted); font-size: 0.92rem; }
.ftr-col a:hover { color: var(--text-strong); }

.ftr-legal {
  max-width: var(--wrap);
  margin: 48px auto 0;
  padding: 22px var(--gutter) 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  align-items: center;
}
.ftr-legal p { margin: 0; color: var(--muted-dim); font-size: 0.82rem; }
.ftr-legal nav { display: flex; gap: 20px; }
.ftr-legal a { color: var(--muted-dim); font-size: 0.82rem; }
.ftr-legal a:hover { color: var(--text-strong); }

/* ---------- Subpages: services, hub, about, contact, legal ---------- */

.hero-page { padding: calc(var(--hdr) + 46px) 0 16px; }
.hero-page .h1 { font-size: clamp(2.3rem, 5.4vw, 4.3rem); }
.hero-page .lead { margin-bottom: 28px; }
/* subpage heroes are short, so the first band tucks in closer than on home */
.hero-page .hero-actions { margin-bottom: 0; }
.hero-page + .band { padding-top: 78px; }

.breadcrumb {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 24px;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb i { font-style: normal; color: var(--rule); margin: 0 9px; }

.subservice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 14px;
}
.subservice {
  padding: 24px 24px 22px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
}
.subservice p { margin: 0; color: var(--muted); font-size: 0.96rem; }

.stack-label {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block;
  padding: 7px 14px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.prose { max-width: 68ch; }
.prose p { color: var(--muted); font-size: 1.05rem; margin: 0 0 20px; }
.prose h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 36px 0 14px;
}
.prose h3 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.015em;
  margin: 28px 0 10px;
}
.prose ul, .prose ol { margin: 0 0 20px; padding-left: 20px; }
.prose li { color: var(--muted); font-size: 1.02rem; margin-bottom: 10px; }
.prose li::marker { color: var(--indigo); }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.prose a:hover { text-decoration-color: currentColor; }

.legal-address {
  font-style: normal;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 20px;
}
.legal-updated {
  font-family: var(--f-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin: 36px 0 0;
}

/* the closing prompt at the foot of every service page */
.page-cta { margin-top: 0; }

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

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  :root { --rail: 116px; --rail-gap: 30px; }
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .ftr-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .svc { grid-column: span 6; }
  .svc-w6, .svc-w12 { grid-column: span 12; }
  .proc-inner { grid-template-columns: 1fr; gap: 16px; padding: 32px 28px; }
  .region { grid-template-columns: 1fr; gap: 14px; }
  .region-meta { flex-direction: row; align-items: baseline; gap: 12px; }
}

@media (max-width: 780px) {
  :root { --gutter: 20px; }
  .band { padding: 72px 0; }
  .band-tight { padding: 48px 0; }
  .hero { padding: calc(var(--hdr) + 44px) 0 60px; }

  /* the meridian collapses — eyebrows become plain labels above the content */
  .wrap { grid-template-columns: minmax(0, 1fr); }
  .wrap > .eyebrow { grid-column: 1; justify-self: start; text-align: left; margin: 0 0 12px; }
  .wrap > .col { grid-column: 1; border-left: 0; padding-left: 0; }
  .col::before { display: none; }

  .nav-toggle { display: flex; }
  .nav-menu {
    position: absolute;
    inset: var(--hdr) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    display: none;
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu > a:not(.btn) { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; }
  .nav-menu > .btn { margin-top: 16px; }

  .ob { padding: 20px 18px 18px; }
  .ob-clocks { grid-template-columns: 1fr; gap: 14px; padding: 16px 0 18px; }
  .ob-row, .ob-axis { grid-template-columns: 54px minmax(0, 1fr); }
  .ob-val { grid-column: 2; text-align: left; margin-top: -2px; }
  .hero-eyebrow > span + span { padding-left: 0; border-left: 0; }

  .ai-offer { flex-direction: column; align-items: flex-start; }
  .field-row { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr; }
  .ftr-legal { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
  .svc, .svc-w6, .svc-w12 { grid-column: span 12; }
  .svc-row { flex-direction: column; gap: 8px; }
  .hero-actions { margin-bottom: 48px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .models { gap: 24px; }
  .marquee-group { gap: 36px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* final states, not hidden states. The clocks keep ticking — that is data. */
  [data-reveal] { opacity: 1; transform: none; }
  .ob-bar { transform: scaleX(1); }
  .col::before { transform: scaleX(1); }
  .proc { position: static; }
}