/* ==========================================================================
   Trigon IT Solutions — "Prism Ledger"
   A light, editorial product-studio interface.
   Contents:
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout: shell, section, coordinate rail
     05  Header & mobile sheet
     06  Buttons, links, labels
     07  Hero
     08  Capability strip
     09  Service index
     10  Case studies
     11  FAQ accordion
     12  Insight grid
     13  Enquiry panel & forms
     14  Interior page furniture
     15  Footer
     16  Motion, focus, reduced motion
     17  Responsive
   ========================================================================== */

/* 01  Tokens ------------------------------------------------------------- */
:root {
  /* Surfaces */
  --paper:        #F7F5F0;   /* warm drafting paper — dominant canvas */
  --paper-white:  #FFFDF8;   /* navbar + raised cards */
  --mist:         #E7F0FF;
  --sand:         #FFF1DE;

  /* Ink */
  --ink:          #111827;
  --ink-70:       #4B5563;
  --ink-50:       #6B7280;
  --ink-35:       #9CA3AF;

  /* Signal */
  --blue:         #316BFF;
  --blue-press:   #2154D8;
  --blue-wash:    #DDE8FF;
  --violet:       #7C5CFF;

  /* Structure */
  --rule:         #D9DDE7;
  --rule-soft:    #E8EAF0;

  /* Radii — restrained, structural */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;

  /* Shadows — soft, low offset */
  --sh-1: 0 1px 2px rgba(17, 24, 39, .04);
  --sh-2: 0 6px 18px -10px rgba(17, 24, 39, .18);
  --sh-3: 0 14px 40px -22px rgba(17, 24, 39, .28);

  /* Motion */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --t-fast: 180ms;
  --t-base: 220ms;
  --t-slow: 260ms;

  /* Metrics */
  --shell: 1240px;
  --gutter: 32px;
  --header-h: 76px;
  --rail-w: 132px;
}

/* 02  Reset & base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--paper);
  /* Sparse graph-paper lines, visible only across large open areas. */
  background-image:
    linear-gradient(to right,  rgba(17,24,39,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.028) 1px, transparent 1px);
  background-size: 88px 88px;
  color: var(--ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 200;
  background: var(--blue); color: #fff; padding: 10px 16px;
  border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 14px; }

/* 03  Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.05;
}

.display {
  font-size: clamp(40px, 6.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -.035em;
  margin-bottom: .32em;
}

.h-section {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -.03em;
}

.h-card { font-size: clamp(20px, 2vw, 25px); letter-spacing: -.02em; line-height: 1.18; }

/* Controlled serif accent — used only inside oversized editorial statements. */
.serif {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
}

.lede {
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.66;
  color: var(--ink-70);
  max-width: 58ch;
}

.body-narrow { max-width: 58ch; }

.label {
  font-family: "DM Mono", ui-monospace, "SFMono-Regular", monospace;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.label::before {
  content: "";
  width: 20px; height: 2px;
  background: var(--blue);
  flex: none;
}
.label.no-rule::before { display: none; }

.mono-line {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-70);
  margin: 0 0 6px;
}
.mono-line.dim { color: var(--ink-35); }

/* 04  Layout ------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(64px, 8vw, 116px); position: relative; }
.section-tight { padding-block: clamp(48px, 5vw, 72px); }

/* Section surfaces rotate to create visual chapters. */
.surface-mist  { background: var(--mist); }
.surface-sand  { background: var(--sand); }
.surface-white { background: var(--paper-white); }
.surface-mist, .surface-sand, .surface-white { background-image: none; }

/* The coordinate rail: a narrow index column at the far left. */
.section-grid {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}

.rail { position: sticky; top: calc(var(--header-h) + 40px); }
.rail-idx {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--blue);
}
.rail-line {
  display: block;
  width: 1px; height: 56px;
  background: linear-gradient(var(--blue), transparent);
  margin: 12px 0;
}
.rail-label {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-35);
}

/* Section head — asymmetric: title left, support text offset right. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 24px 56px;
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 60px);
}
.section-head .lede { padding-bottom: 6px; }

/* 05  Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--paper-white);
  border-bottom: 1px solid var(--rule-soft);
  transition: box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
/* Scrolled state stays paper-white — never a dark surface. */
.site-header.is-scrolled {
  background: rgba(255, 253, 248, .92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--blue-wash);
  box-shadow: var(--sh-2);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand-tile {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: var(--blue);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), var(--sh-2);
  position: relative;
  transition: transform var(--t-fast) var(--ease);
}
/* Coordinate Violet appears only as a secondary edge on the mark. */
.brand-tile::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--violet);
  opacity: .45;
  pointer-events: none;
}
.brand-tile svg { width: 22px; height: 22px; }
.brand:hover .brand-tile { transform: translateY(-1px); }

.brand-word {
  font-size: 19px; font-weight: 700; letter-spacing: -.025em; color: var(--ink);
}
.brand-word-accent { color: var(--blue); }

.nav-primary { margin-inline: auto; }
.nav-primary ul { display: flex; align-items: center; gap: 4px; }

.nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink-50);
  border-radius: var(--r-sm);
  transition: color var(--t-fast) var(--ease);
}
.nav-link:hover { color: var(--ink); }
.nav-link .nav-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--blue);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active .nav-dot { opacity: 1; transform: none; }
/* Fine blue underline marks the active route. */
.nav-link.is-active::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 1px;
  height: 1.5px; background: var(--blue);
}

.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.menu-trigger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.menu-trigger:hover { border-color: var(--blue); background: var(--paper-white); }
.menu-bars { display: grid; gap: 5px; width: 18px; }
.menu-bars i { display: block; height: 1.5px; background: var(--ink); border-radius: 2px; }
.menu-bars i:last-child { width: 12px; margin-left: auto; }
.menu-bars.is-x i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-bars.is-x i:last-child  { width: 18px; transform: translateY(-3.25px) rotate(-45deg); }

/* Mobile sheet — full-height paper white */
.sheet {
  position: fixed; inset: 0; z-index: 120;
  background: var(--paper-white);
  display: flex; flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.sheet[hidden] { display: none; }
.sheet.is-open { opacity: 1; transform: none; }

.sheet-top {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--rule-soft);
  flex: none;
}
.sheet-top .label { margin: 0; }
.sheet-top .menu-trigger { display: inline-flex; }

.sheet-nav { padding-block: 20px; flex: 1; }
.sheet-nav ul { display: grid; }
.sheet-nav a {
  display: flex; align-items: baseline; gap: 18px;
  padding: 18px 0;
  font-size: clamp(28px, 8vw, 40px); font-weight: 700; letter-spacing: -.03em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-soft);
  min-height: 44px;
}
.sheet-nav a.is-active { color: var(--blue); }
.sheet-idx {
  font-family: "DM Mono", monospace;
  font-size: 12px; letter-spacing: .1em;
  color: var(--ink-35);
}
.sheet-nav a.is-active .sheet-idx { color: var(--blue); }

.sheet-foot { padding-block: 24px 40px; flex: none; }
.sheet-foot .mono-line { margin-bottom: 14px; }

body.menu-open { overflow: hidden; }

/* 06  Buttons, links, tags ---------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 15px; font-weight: 500; letter-spacing: -.01em;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--sh-2); }
.btn-primary:hover { background: var(--blue-press); transform: translateY(-1px); }
.btn-primary:active { transform: scale(.97); }

.btn-ghost {
  background: var(--paper-white);
  color: var(--ink);
  border-color: var(--rule);
}
.btn-ghost:hover { border-color: var(--blue); transform: translateY(-1px); }
.btn-ghost:active { transform: scale(.97); }

.btn-sm { padding: 10px 16px; min-height: 42px; font-size: 14.5px; }
.btn-block { width: 100%; }

/* Quiet text link with a moving coordinate dot + drawn line. */
.tlink {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
}
.tlink::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 1.5px; width: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--ease);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink .coord {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
  transition: transform 200ms var(--ease);
}
.tlink:hover .coord { transform: translateX(8px); }

.tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-70);
}
.tag::before { content: ""; width: 14px; height: 2px; background: var(--violet); flex: none; }
.tag.tag-blue::before { background: var(--blue); }

.actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

/* 07  Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(56px, 7vw, 104px) clamp(56px, 7vw, 96px); }

.hero-grid {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 55fr) minmax(0, 45fr);
  gap: 0 48px;
  align-items: center;
}

.hero-copy { padding-right: 12px; }
/* Wide enough that a two-word first line ("Build the software.") holds one
   line at desktop sizes. */
.hero-copy .display { max-width: 17ch; }
.hero-copy .lede { margin-bottom: 34px; }

.hero-descriptor {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-70);
  max-width: 46ch;
}

.hero-art { position: relative; }
.hero-art svg { width: 100%; height: auto; }

/* 08  Capability strip --------------------------------------------------- */
.pillars {
  display: grid;
  /* Auto-fits however many pillars are configured. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border: 1px solid rgba(49, 107, 255, .18);
  border-radius: var(--r-lg);
  background: rgba(255, 253, 248, .5);
  overflow: hidden;
}
.pillar {
  padding: 30px 28px;
  border-right: 1px solid rgba(49, 107, 255, .18);
  transition: background-color var(--t-fast) var(--ease);
}
.pillar:last-child { border-right: 0; }
.pillar h3 { font-size: 20px; }
.pillar:hover { background: rgba(255, 253, 248, .95); }
.pillar-idx {
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: .1em; color: var(--blue);
  display: block; margin-bottom: 16px;
}
.pillar h3 { font-size: 21px; margin-bottom: .45em; }
.pillar p { font-size: 15.5px; line-height: 1.6; color: var(--ink-70); }

/* 09  Service index ------------------------------------------------------ */
.service-index { border-top: 1px solid var(--rule); }

.service-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1.05fr) minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  padding: 34px 0 34px 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background-color var(--t-fast) var(--ease);
}
/* A 2px blue vertical rule appears on hover. */
.service-row::before {
  content: "";
  position: absolute; left: -20px; top: 26px; bottom: 26px;
  width: 2px; background: var(--blue);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.service-row:hover::before { opacity: 1; }
.service-row:hover .service-copy { transform: translateX(4px); }
.service-row:hover .service-name { color: var(--blue); }

.service-num {
  font-family: "DM Mono", monospace;
  font-size: 12px; letter-spacing: .1em; color: var(--ink-35);
  padding-top: 8px;
}
.service-name {
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
  margin: 0;
  transition: color var(--t-fast) var(--ease);
}
.service-copy {
  color: var(--ink-70); font-size: 15.5px; line-height: 1.6;
  transition: transform var(--t-fast) var(--ease);
}
.service-items {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 12px;
}
.service-items li {
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-50);
}
.service-go {
  align-self: center;
  width: 42px; height: 42px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-50);
  transition: border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.service-row:hover .service-go {
  border-color: var(--blue); color: var(--blue); transform: translateX(3px);
}
.service-go svg { width: 15px; height: 15px; }

/* 10  Case studies ------------------------------------------------------- */
.case-list { display: grid; gap: clamp(40px, 5vw, 72px); }

.case {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px;
  align-items: center;
}
/* Staggered, art-directed rhythm rather than a flat grid. */
.case:nth-child(even) { margin-left: auto; }
.case:nth-child(even) .case-art { order: 2; }
.case:nth-child(even) .case-meta { order: 1; }
.case:nth-child(odd)  { width: 96%; }
.case:nth-child(even) { width: 96%; }

.case-art {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper-white);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
/* A 3D scene is an object in the page, not a picture in a frame — so the
   frame, fill and clipping all come off and it floats like the hero does.
   An uploaded photograph keeps the frame. */
.case-art.is-scene,
.map-frame.is-scene {
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  border-radius: 0;
  /* A little inset so a panel swinging wide cannot reach the viewport edge.
     A definite width, not max-width: auto margins on a grid item with an auto
     width switch off stretch and collapse it to zero. */
  width: 94%;
  justify-self: center;
  margin-inline: auto;
}
.case-art svg { width: 100%; height: auto; display: block; transition: transform var(--t-base) var(--ease); }
.case:hover .case-art svg { transform: scale(1.02); }

.case-meta .h-card { margin-bottom: .4em; }
.case-summary { color: var(--ink-70); font-size: 16px; max-width: 44ch; }
.case-scope {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 20px;
}
.case-scope li {
  font-size: 12.5px;
  padding: 5px 11px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-70);
  background: var(--paper-white);
}
.case-status {
  margin-top: 18px;
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-35);
}
.case-line {
  display: block; height: 1px; background: var(--rule);
  margin-top: 20px;
  transform: scaleX(.4); transform-origin: left;
  transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.case:hover .case-line { transform: scaleX(1); background: var(--blue); }

/* 11  FAQ ---------------------------------------------------------------- */
.faq-list { display: grid; gap: 12px; max-width: 900px; }

.faq {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--paper-white);
  overflow: hidden;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.faq[open] { border-color: var(--blue-wash); box-shadow: var(--sh-2); }

.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -.015em;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--blue); }

.faq-sign {
  position: relative;
  width: 22px; height: 22px; flex: none;
}
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--blue);
  transform: translate(-50%, -50%);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.faq-sign::before { width: 13px; height: 1.5px; }
.faq-sign::after  { width: 1.5px; height: 13px; }
.faq[open] .faq-sign::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

.faq-body {
  padding: 0 24px 24px;
  color: var(--ink-70);
  font-size: 16px;
  max-width: 62ch;
}

/* 12  Insight grid ------------------------------------------------------- */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.insight {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}
/* Cropped editorial rhythm: the middle column drops. */
.insight:nth-child(2) { margin-top: 34px; }

.insight-art {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-white);
  margin-bottom: 20px;
}
.insight-art svg { width: 100%; height: auto; transition: transform var(--t-base) var(--ease); }
.insight:hover .insight-art svg { transform: scale(1.02); }

.insight h3 {
  font-size: 20px; letter-spacing: -.02em; line-height: 1.22;
  margin: 10px 0 .45em;
  transition: color var(--t-fast) var(--ease);
}
.insight:hover h3 { color: var(--blue); }
.insight p { color: var(--ink-70); font-size: 15px; line-height: 1.6; }
.insight-foot { margin-top: auto; padding-top: 18px; }

/* 13  Enquiry panel & forms --------------------------------------------- */
.enquiry-panel {
  background: var(--mist);
  border: 1px solid rgba(49, 107, 255, .16);
  border-radius: var(--r-lg);
  padding: clamp(32px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.enquiry-panel .h-section { max-width: 15ch; }
.enquiry-note {
  margin-top: 26px;
  font-family: "DM Mono", monospace;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-50);
}

.field { display: grid; gap: 7px; margin-bottom: 18px; }
.field > label {
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-70);
}
.field .req { color: var(--blue); }

.input, .select, .textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  min-height: 46px;
  font-size: 16px;
  color: var(--ink);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236B7280' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
  padding-right: 38px;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-35); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-wash);
}
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: #C0392B; }
.field-error {
  font-size: 13px; color: #C0392B;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* Honeypot */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-note { font-size: 13.5px; color: var(--ink-50); margin-top: 14px; }

.alert {
  border-radius: var(--r-md);
  padding: 18px 20px;
  margin-bottom: 26px;
  border: 1px solid var(--rule);
  background: var(--paper-white);
  font-size: 15.5px;
}
.alert-ok { border-color: rgba(49,107,255,.35); background: var(--blue-wash); }
.alert-ok strong { display: block; margin-bottom: 4px; }
.alert-bad { border-color: rgba(192,57,43,.3); background: #FDEDEA; }

/* 14  Interior page furniture ------------------------------------------- */
.page-head {
  padding-block: clamp(52px, 6vw, 92px) clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--rule);
}
.page-head .display { max-width: 16ch; }
.page-head .lede { margin-top: 6px; }

.crumbs {
  display: flex; align-items: center; gap: 10px;
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-35);
  margin-bottom: 22px;
}
.crumbs a:hover { color: var(--blue); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }

.card {
  background: var(--paper-white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-1);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.card:hover { border-color: var(--blue-wash); transform: translateY(-1px); }
.card h3 { font-size: 19px; margin-bottom: .4em; }
.card p { color: var(--ink-70); font-size: 15.5px; line-height: 1.6; }

.value-card { position: relative; padding-left: 28px; }
.value-card::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 2px; background: var(--blue-wash);
  transition: background-color var(--t-fast) var(--ease);
}
.value-card:hover::before { background: var(--blue); }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid var(--rule);
  background: var(--paper-white);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14.5px;
  color: var(--ink-70);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--blue); color: var(--ink); }

.process { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.process-step {
  display: grid;
  grid-template-columns: 84px 200px minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.process-step .service-num { padding-top: 0; }
.process-step h3 { font-size: 21px; margin: 0; }
.process-step p { color: var(--ink-70); font-size: 15.5px; }

.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.stat { border-left: 2px solid var(--blue); padding-left: 20px; }
.stat dt {
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-50);
  margin-bottom: 8px;
}
.stat dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 42ch; }

.detail-list { display: grid; gap: 10px; }
.detail-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15.5px; color: var(--ink-70);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-soft);
}
.detail-list li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue); flex: none; margin-top: 9px;
}

.prose { max-width: 66ch; }
.prose p { font-size: 17px; color: var(--ink-70); margin-bottom: 1.1em; }
.prose h2 { font-size: 28px; margin-top: 1.4em; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.contact-block { display: grid; gap: 22px; }
.contact-item { border-top: 1px solid var(--rule); padding-top: 16px; }
.contact-item .label { margin-bottom: 8px; }
.contact-item a, .contact-item span { font-size: 17px; color: var(--ink); }
.contact-item a:hover { color: var(--blue); }

/* 15  Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--paper-white);
  border-top: 1px solid var(--rule);
  padding-block: clamp(52px, 6vw, 82px) 34px;
  margin-top: 0;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 44px 40px;
}
.footer-identity .brand { margin-bottom: 20px; }
.footer-descriptor {
  font-size: 15.5px; font-weight: 500; color: var(--ink);
  max-width: 34ch; margin-bottom: 20px; line-height: 1.5;
}
.footer-col .label { margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a, .footer-static { font-size: 15px; color: var(--ink-70); }
.footer-col a { transition: color var(--t-fast) var(--ease); }
.footer-col a:hover { color: var(--blue); }
.footer-col a.is-active { color: var(--ink); }
.footer-col a.is-active::before {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: var(--blue); margin-right: 8px;
  vertical-align: middle;
}

.social { display: flex; gap: 8px; }
.social a {
  width: 38px; height: 38px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: .06em;
  color: var(--ink-70);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.social a:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }

/* Final thin Vector Blue rule */
.footer-rule {
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--violet) 55%, transparent);
  margin: clamp(36px, 4vw, 56px) 0 22px;
  border-radius: 2px;
}
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 22px; flex-wrap: wrap;
}
.footer-bottom .mono-line { margin: 0; }

.footer-legal { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
.footer-legal a {
  font-size: 13.5px;
  color: var(--ink-50);
  transition: color var(--t-fast) var(--ease);
}
.footer-legal a:hover { color: var(--blue); }
.footer-legal a.is-active { color: var(--ink); }

/* -- Policy pages -------------------------------------------------------- */
.legal-body { max-width: 68ch; }
.legal-section { margin-bottom: clamp(30px, 3.4vw, 46px); }
.legal-section:last-child { margin-bottom: 0; }
.legal-section h3 {
  display: flex; align-items: baseline; gap: 14px;
  font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -.02em;
  margin-bottom: .6em;
}
.legal-num {
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: .1em; color: var(--blue);
  flex: none;
}
.legal-section p {
  font-size: 16.5px; line-height: 1.7; color: var(--ink-70);
  margin-bottom: 1em;
}
.legal-section .detail-list { margin: 4px 0 18px; }
.legal-section .detail-list a { color: var(--blue); }
.legal-section .detail-list a:hover { text-decoration: underline; }

.legal-contact {
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--rule);
}
.legal-siblings {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}

/* 15b  Icons, logos and doodles ----------------------------------------- */

/* Line icons inherit ink from their parent, so they never fight the palette. */
.ico { flex: none; display: inline-block; vertical-align: -.18em; }

.icon-badge {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--r-sm);
  display: inline-grid; place-items: center;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.icon-badge.is-blue   { background: var(--blue-wash); color: var(--blue); }
.icon-badge.is-violet { background: #EDE8FF;          color: var(--violet); }
.icon-badge.is-plain  { background: #F1F3F8;          color: var(--ink-70); }

.card:hover .icon-badge,
.pillar:hover .icon-badge,
.process-step:hover .icon-badge { transform: translateY(-1px); }
.card:hover .icon-badge.is-blue { background: var(--blue); color: #fff; }

.card-top, .pillar-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 16px;
}
.card-top .mono-line, .pillar-top .pillar-idx { margin: 0; }

/* Brand marks keep their own colours; the tile around them stays neutral. */
.logo-mark { display: block; flex: none; }

.stack-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.stack-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 18px 16px;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.stack-tile:hover {
  border-color: var(--blue-wash);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.stack-mark { margin-bottom: 10px; }
.stack-name { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.stack-role {
  font-family: "DM Mono", monospace;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-35);
}

/* Small logo rows beside copy */
.hero-marks, .service-logos, .card-logos {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
/* No rule here — .hero-descriptor already draws one directly above. */
.hero-marks { margin-top: 22px; gap: 14px; }
.hero-marks li { display: flex; }
.hero-marks-note {
  font-family: "DM Mono", monospace;
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-35);
  align-self: center;
}
.service-logos { margin-top: 14px; gap: 10px; opacity: .85; }
.card-logos { margin: 12px 0 4px; gap: 10px; }

/* Doodles — loose marginalia, never a control. */
.doodle { display: block; overflow: visible; pointer-events: none; }
.doodle-blue   { color: var(--blue); }
.doodle-violet { color: var(--violet); }

/* Sits under a phrase without affecting its line box. */
.hero-accent, .enquiry-copy .h-section { position: relative; display: inline-block; }
.doodle-under {
  position: absolute; left: 0; right: 0; top: 100%;
  width: 100%; height: auto;
  margin-top: -2px;
  opacity: .55;
}
.enquiry-copy .h-section .doodle-under { display: none; }
.enquiry-copy > .doodle-under {
  position: static; width: 62%; margin: 10px 0 0; opacity: .5;
}

.doodle-inline {
  display: inline-block;
  width: 22px; height: 22px;
  vertical-align: .18em;
  margin-left: 10px;
  opacity: .65;
}
.doodle-after {
  display: inline-block;
  width: 46px; height: 32px;
  margin-left: 14px;
  vertical-align: middle;
  opacity: .5;
}
.doodle-corner {
  width: 78px; height: 44px;
  margin-top: 26px;
  opacity: .28;
}

.more-link { margin-top: 40px; display: flex; align-items: center; }

/* Icon-bearing list and label variants */
.detail-list li::before { display: none; }
.detail-list li .ico { color: var(--blue); margin-top: 2px; }

.chip { display: inline-flex; align-items: center; gap: 9px; }
.chip .ico { color: var(--blue); }

.stat dt { display: flex; align-items: center; gap: 8px; }
.stat dt .ico { color: var(--blue); }

.contact-item .label .ico { color: var(--blue); }
.contact-item .label::before { display: none; }

.process-step h3 { display: flex; align-items: center; gap: 12px; }

.faq-q { display: flex; align-items: flex-start; gap: 12px; }
.faq-ico { color: var(--blue); margin-top: 3px; opacity: .75; }

.case-status { display: flex; align-items: center; gap: 8px; }
.case-status .ico { color: var(--ink-35); }

.insight-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.insight-foot .mono-line { display: flex; align-items: center; gap: 7px; margin: 0; }
.insight-go { color: var(--ink-35); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.insight:hover .insight-go { color: var(--blue); transform: translateX(4px); }

.enquiry-points {
  display: grid; gap: 11px;
  margin: 24px 0 0;
}
.enquiry-points li {
  display: flex; align-items: center; gap: 11px;
  font-size: 15.5px; color: var(--ink);
}
.enquiry-points .ico { color: var(--blue); }
.enquiry-note { display: flex; align-items: center; gap: 8px; }
.form-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-note .ico { color: var(--ink-35); }

.footer-direct a, .footer-direct .footer-static {
  display: flex; align-items: flex-start; gap: 10px;
}
.footer-direct .ico { color: var(--blue); opacity: .75; margin-top: 3px; }

/* Social marks: ink at rest, brand colour on hover. */
.social a svg { transition: transform var(--t-fast) var(--ease); }
.social a[data-brand="facebook"]:hover  { border-color: #1877F2; color: #1877F2; }
.social a[data-brand="instagram"]:hover { border-color: #C13584; color: #C13584; }
.social a[data-brand="twitter"]:hover   { border-color: #111827; color: #111827; }
.social a[data-brand="linkedin"]:hover  { border-color: #0A66C2; color: #0A66C2; }

/* Page artwork frames */
.split-art { align-items: center; }
.about-art, .map-frame {
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-white);
  box-shadow: var(--sh-1);
}
.map-frame { margin-bottom: 6px; }
.about-art svg, .map-frame svg { width: 100%; height: auto; display: block; }

/* The 3D strata needs room to separate, and no frame to clip against. */
.about-art-3d {
  border: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

/* Shared layout for the prism and orbit figures. */
.figure-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.figure-grid-flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.figure-art { display: grid; justify-items: center; gap: 16px; }
.figure-caption { margin: 0; }

/* 15d  Depth & 3D -------------------------------------------------------
   Scroll- and pointer-driven only. Nothing loops; every transform traces back
   to where the reader is on the page or where their pointer is.             */

.helix-section { overflow: hidden; }

.helix-grid {
  display: grid;
  /* An even split — the staircase needs the room to read at this size. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.helix-steps { display: grid; gap: 12px; margin-top: 30px; }
.helix-steps li {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 15.5px; color: var(--ink-70);
  padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft);
}
.helix-steps strong { color: var(--ink); font-weight: 500; }
.helix-step-n {
  font-family: "DM Mono", monospace; font-size: 11px;
  letter-spacing: .1em; color: var(--blue); flex: none;
}

.helix-wrap { display: grid; justify-items: center; gap: 18px; }
.helix-caption { margin: 0; }

/* --- Staircase: solid blocks climbing with scroll -----------------------
   Each block carries a top surface, a front face and a side face, so it reads
   as a solid with real thickness rather than a sheet — which is what keeps it
   apart from the flat plates on the About page. The stage is tilted once and
   every block inherits that view.                                          */
.steps {
  --grow: .2;   /* 0 = collapsed flat, 1 = full run */
  --yaw: -40deg;
  --pit: 56deg;
  --rise: 40px; /* lift per tread at full growth — close to the riser depth,
                   so consecutive treads meet rather than float apart */
  position: relative;
  /* 100% keeps it inside its column — a fixed px width wider than the column
     would push the page sideways. */
  width: min(480px, 100%, 92vw);
  aspect-ratio: 1 / 1;
  perspective: 1600px;
  perspective-origin: 50% 54%;
}
/* The stage drops by half the run's total lift, so the staircase grows about
   its own middle instead of climbing out of the top of the frame. */
.steps-stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform:
    rotateX(var(--pit))
    rotateZ(var(--yaw))
    translateZ(calc(var(--rise) * var(--grow) * -2));
  transition: transform 60ms linear;
}

/* One tread. It steps along a single axis and lifts — a small lateral offset
   with a large rise just stacks the treads on top of one another instead of
   reading as stairs, so the run is the dominant movement. */
.step {
  position: absolute;
  left: 50%; top: 50%;
  width: 34%; height: 31%;
  margin: -15.5% 0 0 -17%;
  transform-style: preserve-3d;
  transform:
    translateX(calc((var(--i) - 2) * 25%))
    translateZ(calc(var(--i) * var(--rise) * var(--grow)));
  transition: transform 60ms linear;
}

.step-top {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  padding: 0 13px;
  border-radius: 7px;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  box-shadow: 0 20px 34px -26px rgba(17, 24, 39, .55);
}
/* The riser hangs off the tread's leading edge. Rotating a child about a
   shared edge is what turns a rectangle into a solid — one face is enough to
   read the thickness; a second only added clutter at this size. */
.step-front {
  position: absolute;
  left: 0; top: 100%;
  width: 100%; height: 26px;
  transform-origin: top center;
  transform: rotateX(-90deg);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(rgba(17, 24, 39, .13), rgba(17, 24, 39, .05));
  border: 1px solid var(--rule-soft);
  border-top: 0;
}
.step-side { display: none; }

.step.is-mist .step-top  { background: #EDF3FF; border-color: rgba(49, 107, 255, .24); }
.step.is-sand .step-top  { background: #FFF6EA; border-color: rgba(224, 180, 120, .34); }
.step.is-plain .step-top { background: #FAFBFE; }
.step.is-lead .step-top  { background: var(--blue); border-color: var(--blue); }
.step.is-lead .step-front { background: linear-gradient(rgba(33, 84, 216, .95), rgba(33, 84, 216, .8)); }
.step.is-lead .step-side  { background: linear-gradient(90deg, rgba(26, 68, 176, .95), rgba(26, 68, 176, .8)); }

.step-rule {
  display: block; height: 5px; width: var(--w);
  border-radius: 3px;
  background: rgba(17, 24, 39, .14);
}
.step-rule.is-on { background: var(--blue); opacity: .65; }
.step.is-lead .step-rule    { background: rgba(255, 255, 255, .4); }
.step.is-lead .step-rule.is-on { background: #fff; opacity: .9; }

/* Rides the top tread, so it marks how far the run has got. */
.step-marker {
  position: absolute;
  left: 50%; top: 50%;
  width: 17px; height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #B7A6FF, var(--violet));
  box-shadow: 0 0 0 6px rgba(124, 92, 255, .16);
  transform:
    translateX(calc((var(--i) - 2) * 25%))
    translateZ(calc(var(--i) * var(--rise) * var(--grow) + 24px));
  transition: transform 60ms linear;
}

.steps-shadow {
  position: absolute;
  left: 14%; right: 14%; bottom: 6%;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(49, 107, 255, .2), transparent 70%);
  filter: blur(3px);
  transform: scaleX(calc(.75 + .35 * var(--grow)));
  transition: transform 60ms linear;
}

/* --- Scene: real elements in one 3D space ------------------------------
   Shared by the hero turntable, the case turntables and the contact plan.
   Each layer declares its own --z; --sep scales them all at once, and --spin
   revolves the stage about whichever axis the variant chooses.            */
.s3d {
  --p: 0;      /* scroll progress, 0…1 */
  --sep: 1;    /* depth separation multiplier */
  --spin: 0deg;
  --pit: 12deg;
  --tx: 0deg;  /* pointer tilt, hero only */
  --ty: 0deg;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  perspective: 1250px;
  perspective-origin: 50% 46%;
}
.s3d-stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* Short enough to track the scroll wheel rather than lag behind it. */
  transition: transform 80ms linear;
}
.s3d-stage > * {
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 80ms linear;
}

/* -- Shared parts -- */
.s3d-plane {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background-image:
    linear-gradient(to right,  rgba(17,24,39,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,24,39,.07) 1px, transparent 1px);
  background-size: 34px 34px;
  transform: translateZ(calc(var(--z) * var(--sep)));
}
.s3d-bar { display: flex; align-items: center; gap: 5px; flex: none; }
.s3d-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); }
.s3d-dot:first-child { background: var(--blue); }
.s3d-addr { flex: 1; height: 7px; margin-left: 8px; border-radius: 4px; background: #F1F4FA; }

.s3d-rows { display: flex; flex-direction: column; gap: 7px; }
.s3d-row { height: 8px; width: var(--w); border-radius: 4px; background: rgba(17, 24, 39, .12); }
.s3d-row.is-on { background: var(--blue); opacity: .75; }
.s3d-row.is-soft { background: rgba(49, 107, 255, .22); }

.s3d-chart { display: flex; align-items: flex-end; gap: 6px; height: 100%; }
.s3d-chart i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--blue-wash); }
.s3d-chart i.is-on { background: var(--blue); }

.s3d-metric { display: flex; flex-direction: column; gap: 7px; justify-content: center; height: 100%; }
.s3d-metric-k { height: 6px; width: 46%; border-radius: 3px; background: rgba(17,24,39,.16); }
.s3d-metric-v { height: 14px; width: 72%; border-radius: 4px; background: var(--violet); opacity: .8; }
.s3d-metric-v.is-blue { background: var(--blue); }

.s3d-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; flex: 1; }
.s3d-tiles i { border-radius: 6px; background: rgba(49, 107, 255, .14); }
.s3d-tiles i.is-on { background: var(--blue); opacity: .8; }

.s3d-floor {
  position: absolute;
  left: 12%; right: 12%; bottom: 2%;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(49, 107, 255, .2), transparent 70%);
  filter: blur(3px);
  transform: scaleX(calc(.8 + .3 * var(--p)));
  transition: transform 80ms linear;
}

/* -- Turntable: panels stood around a vertical axis, spun by scroll --------
   The radius is deliberately smaller than half a panel, so the panels overlap
   through the axis and the group reads as one solid object turning rather
   than cards splayed apart with a hole in the middle. */
.s3d-turn { perspective: 1050px; }
.s3d-turn .s3d-stage {
  transform: rotateX(calc(var(--pit) + var(--tx))) rotateY(calc(var(--spin) + var(--ty)));
}
.s3d-panel {
  position: absolute;
  left: 50%; top: 50%;
  width: 44%; height: 50%;
  margin: -25% 0 0 -22%;
  padding: 12px 13px;
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  border-radius: 11px;
  background: rgba(255, 253, 248, .93);
  border: 1px solid var(--rule);
  box-shadow: 0 26px 50px -32px rgba(17, 24, 39, .5);
  transform: rotateY(var(--a)) translateZ(64px);
  /* Back faces stay visible on purpose. The panels carry bars, not text, so a
     reversed one is indistinguishable — and culling them left the group with
     only a single off-centre panel through much of the turn. */
  backface-visibility: visible;
}
.s3d-panel.is-mist { background: rgba(237, 243, 255, .93); border-color: rgba(49, 107, 255, .22); }
.s3d-panel.is-sand { background: rgba(255, 246, 234, .93); border-color: rgba(224, 180, 120, .32); }

.s3d-axis {
  position: absolute;
  left: 50%; top: 50%;
  width: 1.4px; height: 64%;
  margin: -32% 0 0 -.7px;
  background: linear-gradient(transparent, rgba(124, 92, 255, .5), transparent);
}
.s3d-orbiter {
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #7FA6FF, var(--blue));
  box-shadow: 0 0 0 5px rgba(49, 107, 255, .14);
  transform: rotateY(calc(var(--spin) * -1.5)) translateZ(132px) translateY(-40px);
}

/* -- Hero turntable: two tiers around a glass core -----------------------
   Bigger than the case turntable and built differently — three wide panels on
   an upper ring and three smaller ones below on a tighter radius, offset by
   half a step. The hero should not read as a larger copy of a case card. */
.s3d-hero-turn {
  perspective: 1250px;
  /* Bleeds a little into the column gap so the object carries the hero. */
  width: 112%;
  margin-left: -6%;
}
.s3d-hero-turn .s3d-panel {
  width: 46%; height: 50%;
  margin: -25% 0 0 -23%;
  transform: rotateY(var(--a)) translateZ(122px) translateY(-13%);
}
.s3d-hero-turn .s3d-panel.is-lower {
  width: 32%; height: 33%;
  margin: -16.5% 0 0 -16%;
  padding: 9px 10px;
  gap: 6px;
  transform: rotateY(var(--a)) translateZ(86px) translateY(58%);
}
/* The core sits on the axis, so both rings sweep around something solid. */
.s3d-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 24%; height: 32%;
  margin: -16% 0 0 -12%;
  clip-path: polygon(50% 0%, 100% 82%, 0% 100%);
  background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(206,222,252,.7));
  border: 1px solid rgba(124, 92, 255, .28);
}
.s3d-hero-turn .s3d-axis { height: 86%; margin-top: -43%; }
.s3d-orbiter.is-violet {
  background: radial-gradient(circle at 34% 30%, #B7A6FF, var(--violet));
  box-shadow: 0 0 0 5px rgba(124, 92, 255, .14);
  transform: rotateY(calc(var(--spin) * 1.35 + 180deg)) translateZ(168px) translateY(64px);
}
.s3d-hero-turn .s3d-orbiter { transform: rotateY(calc(var(--spin) * -1.5)) translateZ(176px) translateY(-58px); }

/* -- Contact plan: a turntable seen from above -------------------------- */
.s3d-map { perspective: 1300px; }
/* Spun about the vertical of the plan itself, so the ground stays a ground.
   The stage is inset so the plan's *diagonal* still fits inside the box as it
   turns — a full-width plan would sweep past the edges and widen the page. */
.s3d-map .s3d-stage {
  inset: 19%;
  transform: rotateX(var(--pit)) rotateZ(var(--spin));
}
.s3d-map .s3d-plane { left: 0; top: 0; width: 100%; height: 100%; }
.s3d-route {
  height: 8px;
  border-radius: 5px;
  background: rgba(49, 107, 255, .2);
  transform: translateZ(calc(var(--z) * var(--sep))) rotateZ(var(--rot, 0deg));
}
.s3d-route.is-violet { background: rgba(124, 92, 255, .18); }
.s3d-block {
  border-radius: 7px;
  background: #F1F4FA;
  border: 1px solid #E2E6EF;
  transform: translateZ(calc(var(--z) * var(--sep)));
}
.s3d-halo {
  border-radius: 50%;
  border: 1px solid rgba(49, 107, 255, .35);
  background: rgba(49, 107, 255, .07);
  transform: translateZ(calc(var(--z) * var(--sep)));
}
/* The margin puts the pin's point — not its box — on the coordinate it is
   given. It counter-rotates so it stays upright as the plan turns beneath it. */
.s3d-pin {
  width: 34px; height: 34px;
  margin: -34px 0 0 -17px;
  border-radius: 50% 50% 50% 0;
  background: var(--blue);
  transform: translateZ(calc(var(--z) * var(--sep))) rotateZ(calc(var(--spin) * -1)) rotate(-45deg);
  box-shadow: 0 14px 26px -10px rgba(49, 107, 255, .9);
}
.s3d-pin::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; background: var(--paper-white);
}

/* --- Prism: solid faces around a shared axis ---------------------------- */
.prism {
  --p: 0;
  --spin: 0deg;
  --lean: 0deg;
  position: relative;
  width: min(300px, 68vw);
  height: min(320px, 72vw);
  perspective: 1000px;
  display: grid;
  place-items: center;
}
.prism-stage {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--lean)) rotateY(var(--spin));
  transition: transform 130ms linear;
}

/* An equilateral triangle 152px on a side: inradius 44px, circumradius 88px.
   The three side panels stand at 120° on the inradius. */
.prism-face {
  position: absolute;
  left: 50%; top: 50%;
  width: 152px; height: 210px;
  margin: -105px 0 0 -76px;
  transform: rotateY(var(--r)) translateZ(44px);
  /* Translucent, so the far faces read through the near ones — that is what
     makes it a solid rather than a card. */
  background: linear-gradient(155deg,
    rgba(255, 255, 255, .74),
    rgba(214, 228, 255, .58) 52%,
    rgba(186, 207, 250, .5));
  border: 1px solid rgba(49, 107, 255, .3);
  box-shadow: inset 0 0 46px rgba(49, 107, 255, .14);
  backface-visibility: visible;
}
/* A specular band that shifts as the solid turns. */
.prism-face::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, .8) 50%, transparent 60%);
  opacity: calc(.25 + .5 * var(--p));
}

/* The three vertical corners, on the circumradius. */
.prism-edge {
  position: absolute;
  left: 50%; top: 50%;
  width: 1.6px; height: 210px;
  margin: -105px 0 0 -.8px;
  transform: rotateY(var(--e)) translateZ(88px);
  background: linear-gradient(rgba(49, 107, 255, .1), var(--blue) 22%, var(--violet) 78%, rgba(124, 92, 255, .1));
  border-radius: 2px;
}

/* Caps: the triangle's centroid sits at 2/3 of the box height, so the box has
   to be pulled back by h/6 for the centroid to land on the axis of rotation. */
.prism-cap {
  position: absolute;
  left: 50%; top: 50%;
  width: 152px; height: 132px;
  margin: -66px 0 0 -76px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: rgba(49, 107, 255, .2);
  backface-visibility: visible;
}
.prism-cap-top    { transform: rotateX(90deg) translateZ(105px)  translateY(-22px); }
.prism-cap-bottom { transform: rotateX(90deg) translateZ(-105px) translateY(-22px); }
.prism-shadow {
  position: absolute;
  left: 50%; bottom: 6%;
  width: 190px; height: 26px;
  margin-left: -95px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(49, 107, 255, .26), transparent 68%);
  filter: blur(2px);
  transform: scaleX(calc(.82 + .3 * var(--p)));
  transition: transform 130ms linear;
}

/* --- Orbit: nodes travelling fixed tracks ------------------------------- */
.orbit {
  --p: 0;
  position: relative;
  width: min(320px, 72vw);
  height: min(320px, 72vw);
  perspective: 1000px;
  display: grid;
  place-items: center;
}
.orbit-stage {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--p) * 42deg));
  transition: transform 130ms linear;
}
.orbit-ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 82%; height: 82%;
  margin: -41% 0 0 -41%;
  border-radius: 50%;
  border: 1.6px solid rgba(49, 107, 255, .5);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateZ(var(--rz)) scale(var(--sc));
}
.orbit-ring:nth-child(2) { border-color: rgba(124, 92, 255, .5); }
.orbit-ring:nth-child(3) { border-color: rgba(49, 107, 255, .38); }

/* The node spans the ring's own box and rotates about its centre, so the dot
   drawn at the box edge traces the ring exactly. Rotating a small dot and
   translating it would only move it by its own width. */
.orbit-node {
  position: absolute;
  inset: 0;
  transform: rotate(calc((var(--p) + var(--n) * .33) * 360deg));
  transition: transform 130ms linear;
}
.orbit-node::before {
  content: "";
  position: absolute;
  left: 100%; top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 5px rgba(49, 107, 255, .15);
}
.orbit-ring:nth-child(2) .orbit-node::before {
  background: var(--violet);
  box-shadow: 0 0 0 5px rgba(124, 92, 255, .15);
}
.orbit-core {
  position: absolute;
  left: 50%; top: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #fff, var(--blue-wash) 60%, #C6D8FF);
  box-shadow: 0 0 0 1px rgba(49, 107, 255, .3), 0 16px 34px -16px rgba(49, 107, 255, .7);
}

/* --- Strata: planes pulled apart through depth -------------------------- */
.strata {
  --p: 0;
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 5 / 4;
  perspective: 1100px;
  display: grid;
  place-items: center;
}
.strata-stage {
  position: relative;
  width: 60%; height: 56%;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-34deg);
}
/* The plates fan diagonally across their own plane as well as lifting through
   Z. Lifting alone would only make the front plate larger and hide the rest. */
.strata-plate {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--paper-white);
  box-shadow: 0 14px 30px -16px rgba(17, 24, 39, .4);
  padding: 10px 12px;
  /* The fan runs up and to the right, so each plate's bottom-left corner is
     the part that stays visible — put the label there. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform:
    translate3d(
      calc(var(--t) * var(--p) * 30%),
      calc(var(--t) * var(--p) * -34%),
      calc(var(--t) * 52px)
    );
  transition: transform 160ms linear;
}
.strata-plate.is-mist  { background: #EDF3FF; }
.strata-plate.is-sand  { background: #FFF6EA; }
.strata-plate.is-blue  { background: var(--blue); border-color: var(--blue); }
.strata-label {
  display: block;
  font-family: "DM Mono", monospace;
  font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 7px;
  white-space: nowrap;
}
.strata-plate.is-blue .strata-label { color: rgba(255, 255, 255, .85); }
.strata-line {
  display: block; height: 4px; border-radius: 2px;
  background: rgba(17, 24, 39, .13);
  margin-bottom: 5px;
}
.strata-line:last-child { margin-bottom: 0; }
.strata-plate.is-blue .strata-line { background: rgba(255, 255, 255, .38); }

/* Layered parallax — used on the hero artwork. */
[data-depth] {
  --dy: 0px;
  --dr: 0deg;
  transform: translate3d(0, var(--dy), 0) rotateZ(var(--dr));
  transition: transform 140ms linear;
  will-change: transform;
}

/* Pointer tilt — the element leans toward the cursor and eases back to flat. */
[data-tilt] {
  --tx: 0deg;
  --ty: 0deg;
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty));
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
[data-tilt].is-tilting {
  transition: transform 90ms linear, box-shadow 300ms var(--ease);
  box-shadow: var(--sh-3);
}

/* An element carrying both needs one combined transform — two rules setting
   `transform` on the same element means the later one silently wins and the
   other effect does nothing. */
[data-depth][data-tilt] {
  transform:
    translate3d(0, var(--dy), 0)
    perspective(1100px)
    rotateX(var(--tx))
    rotateY(var(--ty))
    rotateZ(var(--dr));
}

/* An uploaded photograph turns like a page as it passes. A 3D scene does its
   own rotating, so the wrapper stays still and the two never compound. */
.case-art {
  --turn: 0deg;
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateY(var(--turn));
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.case:hover .case-art {
  transform: perspective(1400px) rotateY(var(--turn)) translateY(-3px);
  box-shadow: var(--sh-3);
}
.case-art.is-scene,
.case:hover .case-art.is-scene { transform: none; box-shadow: none; }

/* Pillars rise out of depth in sequence as the band is reached. */
[data-rise] { perspective: 1000px; }
[data-rise] > * {
  --rise: 0;
  transform: translateZ(calc((1 - var(--rise)) * -140px)) translateY(calc((1 - var(--rise)) * 18px));
  opacity: calc(.25 + .75 * var(--rise));
  transition: transform 520ms var(--ease), opacity 520ms var(--ease);
}

/* Stack tiles: a scroll-driven 3D wave, plus an individual lean on hover.
   --wz/--wr come from scroll, --tx/--ty/--lift from the pointer, and the two
   compose in one transform so they never fight each other. */
.stack-grid { perspective: 1000px; perspective-origin: 50% 40%; }
.stack-tile {
  --tx: 0deg; --ty: 0deg; --lift: 0px;
  --wz: 0px; --wr: 0deg; --wo: 1;
  transform-style: preserve-3d;
  transform:
    translateZ(calc(var(--wz) + var(--lift)))
    rotateX(calc(var(--wr) + var(--tx)))
    rotateY(var(--ty));
  opacity: var(--wo);
}
.stack-tile.is-lean { transition: transform 90ms linear, box-shadow 200ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .steps-stage, .step, .step-marker, .steps-shadow,
  .prism-stage, .prism-shadow, .orbit-stage, .orbit-node, .strata-plate,
  .s3d-stage, .s3d-stage > *, .s3d-floor, .s3d-panel, .s3d-orbiter,
  [data-depth], [data-tilt], [data-rise] > *, .stack-tile { transition: none; }
  [data-tilt], [data-depth], .stack-tile { transform: none; }
  .case-art { transform: none; }
  [data-rise] > * { transform: none; opacity: 1; }
  .strata-plate { transform: translateZ(calc(var(--t) * 60px)); }
}

/* 15c  Floating WhatsApp action ----------------------------------------- */

.wa-fab {
  position: fixed;
  right: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 56px;
  padding: 0 8px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .5), 0 2px 8px rgba(17, 24, 39, .18);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease), gap var(--t-base) var(--ease),
              padding var(--t-base) var(--ease);
}
.wa-fab:hover { background: #1EBE5A; transform: translateY(-2px); }
.wa-fab:active { transform: scale(.97); }

.wa-fab-icon {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
}
.wa-fab-icon svg { width: 30px; height: 30px; }

/* The label stays collapsed until hover, so the button never covers content. */
.wa-fab-text {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  opacity: 0;
  transition: max-width var(--t-base) var(--ease), opacity var(--t-base) var(--ease),
              padding var(--t-base) var(--ease);
}
.wa-fab:hover .wa-fab-text,
.wa-fab:focus-visible .wa-fab-text {
  max-width: 220px;
  opacity: 1;
  padding-right: 12px;
}

/* Touch devices cannot hover, so keep it a clean circular button there. */
@media (hover: none) {
  .wa-fab { padding: 0; }
  .wa-fab-text { display: none; }
  .wa-fab-icon { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab, .wa-fab-text { transition: none; }
}

/* 15e  Article ----------------------------------------------------------- */

.post-title { max-width: 20ch; }
.post-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: "DM Mono", monospace;
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-50);
}
.post-meta .ico { color: var(--blue); }

.post-shell { padding-block: clamp(40px, 5vw, 68px) clamp(48px, 6vw, 88px); }

.post-art {
  margin: 0 0 clamp(30px, 4vw, 48px);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper-white);
  box-shadow: var(--sh-2);
}
.post-art svg, .post-art img { width: 100%; height: auto; display: block; }

/* Long-form reading column — measure capped, headings given air. */
.post-body {
  max-width: 68ch;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink-70);
}
.post-body > *:first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.15em; }
.post-body h2 {
  font-size: clamp(23px, 2.6vw, 31px);
  color: var(--ink);
  margin: 1.9em 0 .5em;
  letter-spacing: -.025em;
}
.post-body h3 {
  font-size: clamp(19px, 2vw, 23px);
  color: var(--ink);
  margin: 1.6em 0 .45em;
}
.post-body h4 { font-size: 17px; color: var(--ink); margin: 1.4em 0 .4em; }
.post-body a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body strong { color: var(--ink); font-weight: 500; }
.post-body ul, .post-body ol { margin: 0 0 1.15em; padding-left: 1.25em; }
.post-body ul { list-style: none; padding-left: 0; }
.post-body ul li {
  position: relative; padding-left: 24px; margin-bottom: .6em;
}
.post-body ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--blue);
}
.post-body ol { list-style: decimal; }
.post-body ol li { margin-bottom: .6em; padding-left: 4px; }
.post-body ol li::marker { color: var(--blue); font-family: "DM Mono", monospace; font-size: .85em; }

.post-body blockquote {
  margin: 1.7em 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--blue);
  color: var(--ink);
  font-size: 1.06em;
}
.post-body blockquote p:last-child { margin-bottom: 0; }

.post-body code {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .88em;
  background: var(--blue-wash);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 5px;
}
.post-body pre {
  margin: 1.5em 0;
  padding: 18px 20px;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}
.post-body pre code { background: none; padding: 0; font-size: inherit; }

.post-body img {
  width: 100%; height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  margin: 1.5em 0;
}
.post-body figure { margin: 1.6em 0; }
.post-body figcaption {
  font-size: 13.5px; color: var(--ink-50); margin-top: 8px; text-align: center;
}
.post-body hr {
  border: 0; height: 1px; background: var(--rule); margin: 2.2em 0;
}
.post-body table {
  width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px;
  display: block; overflow-x: auto;
}
.post-body th, .post-body td {
  border: 1px solid var(--rule); padding: 9px 12px; text-align: left;
}
.post-body th { background: var(--blue-wash); color: var(--ink); font-weight: 500; }

.post-foot {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.ico-flip { transform: scaleX(-1); }

/* Blog index cards link through, so headings carry the anchor. */
.insight h3 a { color: inherit; }
.insight h3 a:hover { color: var(--blue); }
.insight-art { display: block; }
.insight-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.insight-grid-2 .insight:nth-child(2) { margin-top: 0; }

/* 16  Motion, focus ------------------------------------------------------ */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Entrance sequence — removed entirely under reduced motion. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* 17  Responsive ---------------------------------------------------------
   Breakpoints step down in five stages rather than one, so nothing has to
   survive a large jump: 1280 → 1080 → 960 → 760 → 620 → 460.               */

/* Uploaded photography sits in the same frames as the generated artwork. */
.case-art img, .insight-art img {
  width: 100%; height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--t-base) var(--ease);
}
.insight-art img { aspect-ratio: 8 / 5; }
.case:hover .case-art img, .insight:hover .insight-art img { transform: scale(1.02); }
.hero-photo { width: 100%; height: auto; border-radius: var(--r-lg); }

/* Long words and URLs must never push a column wider than the viewport. */
.h-section, .display, .h-card, .service-name, .footer-col a, .contact-item a {
  overflow-wrap: break-word;
}

@media (max-width: 1280px) {
  :root { --shell: 1140px; --gutter: 30px; }
}

@media (max-width: 1080px) {
  :root { --rail-w: 104px; --gutter: 28px; }
  .nav-primary ul { gap: 0; }
  .nav-link { padding: 9px 9px; font-size: 14.5px; }
  .stack-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
  .figure-grid, .figure-grid-flip { gap: 34px; }
  .service-row { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 20px; }
}

@media (max-width: 960px) {
  .nav-primary { display: none; }
  .menu-trigger { display: inline-flex; }

  /* .nav-primary carried the auto margin that pushed the actions right. With
     it hidden the brand and the actions sat side by side against the left
     edge, so the trigger has to claim the free space itself. */
  .header-actions { margin-left: auto; }

  /* The coordinate rail collapses into a single label above the heading. */
  .section-grid, .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail {
    position: static;
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 20px;
  }
  .rail-line { width: 24px; height: 1px; margin: 0;
    background: linear-gradient(90deg, var(--blue), transparent); }

  .section-head { grid-template-columns: minmax(0, 1fr); align-items: start; }

  .hero-copy { padding-right: 0; margin-bottom: 44px; }
  .hero-art { width: min(520px, 100%); justify-self: center; }

  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillar { border-right: 0; border-bottom: 1px solid rgba(49,107,255,.18); }
  .pillar:last-child { border-bottom: 0; }

  .service-row { grid-template-columns: 60px minmax(0, 1fr); row-gap: 14px; }
  .service-copy { grid-column: 2; }
  .service-go { grid-column: 2; justify-self: start; }
  .service-row::before { left: -14px; }

  /* Case studies keep their stagger through alternating margin offsets. */
  .case { grid-template-columns: minmax(0, 1fr); gap: 24px; width: 100%; }
  .case:nth-child(even) .case-art { order: 0; }
  .case:nth-child(even) .case-meta { order: 0; }
  .case:nth-child(even) { margin-left: 0; padding-left: 6%; }
  .case:nth-child(odd)  { padding-right: 6%; }

  .insight-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .insight:nth-child(2) { margin-top: 0; }

  .enquiry-panel { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .enquiry-panel .h-section { max-width: none; }

  .split { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .helix-grid { grid-template-columns: minmax(0, 1fr); }
  .insight-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .figure-grid, .figure-grid-flip { grid-template-columns: minmax(0, 1fr); }
  /* Artwork leads on narrow screens, copy follows. */
  .figure-grid-flip .figure-art { order: -1; }
  .process-step { grid-template-columns: 60px minmax(0, 1fr); row-gap: 8px; }
  .process-step p { grid-column: 2; }

  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .stack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split-art { gap: 28px; }
  .doodle-after { display: none; }
  .about-art { order: -1; }
}

/* Tablet portrait — the point where two-column body copy stops working. */
@media (max-width: 760px) {
  :root { --gutter: 24px; }
  .hero { padding-block: clamp(40px, 6vw, 72px) clamp(44px, 6vw, 76px); }
  .hero-copy .display { max-width: none; }
  /* A definite width, not max-width plus auto margins: auto margins on a grid
     item whose width is auto switch off stretch, so the item shrinks to fit
     its content — and the 3D scene inside sizes from a percentage, which then
     resolves against nothing and collapses the hero art to zero. */
  .hero-art { width: min(460px, 100%); justify-self: center; }
  /* No column gap to bleed into once the hero is a single column. */
  .s3d-hero-turn { width: 100%; margin-left: 0; }
  .section-head { gap: 16px; margin-bottom: 32px; }
  .enquiry-panel { padding: 28px 22px; }
  .faq summary { padding: 18px 18px; gap: 14px; }
  .faq-body { padding: 0 18px 20px; }
  .case-scope li, .chip { font-size: 13px; }
  .process-step { padding: 20px 0; }
  .page-head { padding-block: 40px 30px; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; --header-h: 68px; }
  body { font-size: 16px; background-size: 64px 64px; }
  .brand-word { font-size: 17px; }
  .brand-tile { width: 40px; height: 40px; }
  .header-actions .btn-primary { display: none; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: minmax(0, 1fr); }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .case:nth-child(even), .case:nth-child(odd) { padding-inline: 0; }
  .actions { gap: 16px; }
  .actions .btn { width: 100%; }

  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stack-tile { padding: 14px 13px; }
  .hero-marks { gap: 10px; }
  .hero-marks-note { display: none; }
  /* The hand-drawn underline crowds a wrapped headline at this width. */
  .doodle-under { display: none; }
  .doodle-corner { display: none; }

  /* Keep the floating action clear of a full-width final button. */
  .wa-fab { height: 52px; }
  @media (hover: none) { .wa-fab-icon { width: 52px; height: 52px; } }
  .site-footer { padding-bottom: 92px; }
}

/* Small phones — the last stop before content would start to clip. */
@media (max-width: 460px) {
  :root { --gutter: 16px; --header-h: 64px; }
  body { background-size: 52px 52px; }
  .display { font-size: clamp(31px, 9.4vw, 40px); letter-spacing: -.03em; }
  .h-section { font-size: clamp(25px, 7.6vw, 32px); }
  .lede { font-size: 16px; }
  .brand-word { font-size: 16px; }
  .brand-tile { width: 36px; height: 36px; border-radius: 9px; }
  .brand-tile svg { width: 19px; height: 19px; }
  .stack-grid { grid-template-columns: minmax(0, 1fr); }
  .service-row { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .service-items li { font-size: 10.5px; }
  .process-step { grid-template-columns: 44px minmax(0, 1fr); }
  .enquiry-panel { padding: 22px 18px; border-radius: var(--r-md); }
  .card { padding: 20px; }
  .faq summary { font-size: 16px; padding: 16px 15px; }
  .faq-body { padding: 0 15px 18px; font-size: 15px; }
  .sheet-nav a { font-size: clamp(25px, 7.5vw, 32px); padding: 15px 0; }
  .social a { width: 36px; height: 36px; }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .case-scope { gap: 6px; }
}

/* Print — keep the ink, drop the furniture. */
@media print {
  .site-header, .sheet, .site-footer, .enquiry-panel { display: none; }
  body { background: #fff; }
}