/* ─── Tokens (Concept #10: Crystalline) ────────────────────────────────── */
:root {
  /* The three crystal faces — taken directly from the logo */
  --face-light: #ff8533; /* top face */
  --face-dark: #dc5800; /* left face */
  --face-shadow: #9b592c; /* right/shadow face */
  --face-glint: #ffb97e; /* highlight on light face */

  /* Ground - Dark Grey Theme with High Text Contrast */
  --ivory: #16181f;
  --ivory-deep: #1e2029;
  --ink: #f8fafc;
  --ink-muted: #cbd5e1;
  --ink-dim: #94a3b8;
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.24);
  --orange-tint: rgba(255, 133, 51, 0.15);

  --max: 1280px;
  --pad-x: 32px;

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
/* The nav is position:fixed, so an anchor landing flush at the viewport top
   sits underneath it. Every fragment target keeps clear of the nav bar. */
:target,
section[id],
header[id] {
  scroll-margin-top: 90px;
}
body {
  background: var(--ivory);
  color: var(--ink);
  font-family:
    "Space Grotesk",
    "Fira Code",
    "Roboto Mono",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font-family: inherit;
}

.display {
  font-family:
    "Space Grotesk",
    -apple-system,
    sans-serif;
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}
h1,
h2,
h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ─── Logo facet fills (nav + footer inlined logo SVG) ─────────────────── */
/* The inlined logo SVG marks its three faces with these classes so we can
   recolor them in one place. Scoped to SVG <path> so it never collides
   with the .facet-bar primitive below. */
path.face-light  { fill: var(--face-light); }
path.face-dark   { fill: var(--face-dark); }
path.face-shadow { fill: var(--face-shadow); }

/* ─── Crystalline facet primitive (used throughout) ────────────────────── */
/* A short three-band ribbon that recurs as the "signature" of the design.
   light face → dark face → shadow face */
.facet-bar {
  display: inline-flex;
  height: 8px;
  width: 64px;
  border-radius: 1px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.facet-bar i {
  display: block;
  flex: 1;
  height: 100%;
}
.facet-bar i:nth-child(1) {
  background: var(--face-light);
}
.facet-bar i:nth-child(2) {
  background: var(--face-dark);
}
.facet-bar i:nth-child(3) {
  background: var(--face-shadow);
}

/* ─── Nav ──────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: 18px 0;
  background: rgba(22, 24, 31, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #ffffff !important;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
}
.nav-logo svg {
  height: 30px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}
.nav-links a {
  color: #e2e8f0 !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.18s ease;
}
.nav-links a:hover {
  color: #ff8533 !important;
}
.nav-cta {
  background: #ff8533 !important;
  color: #ffffff !important;
  padding: 11px 20px;
  font-weight: 500;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  padding-left: 24px;
  padding-right: 24px;
  transition: background 0.18s ease;
}
.nav-cta:hover {
  background: #dc5800 !important;
}

/* ─── Nav dropdowns ────────────────────────────────────────────────────
   Platform and Applications menus. Hover-open on desktop, click-toggle
   for touch / keyboard. The panel hangs from a thin three-face accent
   bar so it reads as a facet of the same crystal vocabulary. */
.has-menu {
  position: relative;
  /* Extend the hover hit-area 18px below the trigger so the cursor can
     cross the gap into the panel without :hover lapsing. The negative
     margin cancels the padding visually, leaving surrounding layout
     unchanged. */
  padding-bottom: 18px;
  margin-bottom: -18px;
}
.menu-trigger {
  background: none;
  border: none;
  cursor: pointer;
  color: #e2e8f0 !important;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0;
  transition: color 0.18s ease;
}
.menu-trigger:hover,
.has-menu:hover .menu-trigger,
.has-menu:focus-within .menu-trigger,
.menu-trigger[aria-expanded="true"] {
  color: #ff8533 !important;
}
.menu-trigger .caret {
  width: 9px;
  height: 9px;
  transition: transform 0.2s var(--ease-spring);
  color: currentColor;
}
.has-menu:hover .menu-trigger .caret,
.menu-trigger[aria-expanded="true"] .caret {
  transform: rotate(180deg);
}

.menu-panel {
  position: absolute;
  /* 100% is the bottom of .has-menu's padding box — i.e. 18px below the
     trigger. The padding doubles as the hover bridge above. */
  top: 100%;
  left: -20px;
  background: var(--ivory);
  border: 1px solid var(--hairline);
  box-shadow:
    0 1px 0 var(--hairline),
    0 30px 80px rgba(155, 89, 44, 0.22);
  padding: 22px 18px 18px;
  min-width: 360px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s var(--ease-spring),
    visibility 0s linear 0.2s;
  z-index: 200;
  pointer-events: none;
}
.menu-panel.cols-2 {
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
  min-width: 640px;
  left: -120px;
}
/* Right-anchor variant for panels whose trigger sits near the right edge
   of the nav (e.g. the Resources dropdown). Prevents the wide cols-2
   panel from overflowing off the viewport. */
.menu-panel.menu-panel-right {
  left: auto;
  right: -20px;
}
/* The three-face accent bar at the top of every panel — a literal slice
   of the crystal sitting above the items. */
.menu-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--face-light) 0%,
    var(--face-light) 38%,
    var(--face-dark) 38%,
    var(--face-dark) 72%,
    var(--face-shadow) 72%,
    var(--face-shadow) 100%
  );
}
/* Open states: hover (desktop), focus-within (keyboard), click (touch). */
.has-menu:hover .menu-panel,
.has-menu:focus-within .menu-panel,
.menu-trigger[aria-expanded="true"] + .menu-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.2s ease,
    transform 0.2s var(--ease-spring),
    visibility 0s linear 0s;
}

.menu-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  transition: background 0.14s ease;
}
.menu-item:hover,
.menu-item:focus-visible {
  background: var(--orange-tint);
  outline: none;
}
/* A thin facet bar appears on the left of the hovered item, so the
   active row picks up a single lit face from the panel's three. */
.menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: var(--face-light);
  opacity: 0;
  transition: opacity 0.14s ease;
}
.menu-item:hover::before,
.menu-item:focus-visible::before {
  opacity: 1;
}
.menu-item .menu-ic {
  width: 22px;
  height: 22px;
  color: var(--face-dark);
  flex-shrink: 0;
  margin-top: 1px;
}
.menu-item .menu-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.menu-item .menu-label {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
}
.menu-item .menu-desc {
  font-size: 12.5px;
  color: var(--ink-muted);
  line-height: 1.4;
  letter-spacing: 0;
}
/* Optional eyebrow line at the foot of a panel — small "See all X →"
   anchor matching the eyebrow style used elsewhere on the site. */
.menu-panel .menu-foot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--hairline);
  margin-top: 8px;
  padding: 14px 14px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.menu-panel .menu-foot a {
  color: var(--face-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.14s ease;
}
.menu-panel .menu-foot a:hover { color: var(--ink); }
.menu-panel .menu-foot .menu-meta {
  color: var(--ink-dim);
  font-weight: 500;
  letter-spacing: 0.12em;
}

/* ─── Mobile hamburger + drawer ────────────────────────────────────────
   The hamburger replaces the entire nav-links cluster on phone-sized
   viewports. The drawer is built by JS from .nav-links so the menu
   structure stays single-source. */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  color: var(--ink);
  align-items: center;
  justify-content: center;
}
.nav-hamburger svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 27, 31, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 199;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s ease,
    visibility 0s linear 0.22s;
}
.nav-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.22s ease,
    visibility 0s linear 0s;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 86%;
  max-width: 360px;
  background: var(--ivory);
  border-left: 1px solid var(--hairline);
  box-shadow: -10px 0 50px rgba(155, 89, 44, 0.18);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-spring);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-drawer.open {
  transform: translateX(0);
}
/* The same three-face accent bar the desktop menu panels use. */
.nav-drawer::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--face-light) 0%,
    var(--face-light) 38%,
    var(--face-dark) 38%,
    var(--face-dark) 72%,
    var(--face-shadow) 72%,
    var(--face-shadow) 100%
  );
  flex-shrink: 0;
  z-index: 1;
}

.nav-drawer-head {
  display: flex;
  justify-content: flex-end;
  padding: 14px 16px 4px;
}
.nav-drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  color: var(--ink);
  display: inline-flex;
}
.nav-drawer-close svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

.nav-drawer-body {
  flex: 1;
  padding: 4px 18px 18px;
}

.drawer-section {
  border-bottom: 1px solid var(--hairline);
}
.drawer-section:last-of-type {
  border-bottom: none;
}
.drawer-trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.drawer-trigger .drawer-caret {
  width: 11px;
  height: 11px;
  transition: transform 0.2s var(--ease-spring);
  color: var(--ink-muted);
  fill: none;
  stroke: currentColor;
}
.drawer-trigger[aria-expanded="true"] .drawer-caret {
  transform: rotate(180deg);
}
.drawer-sublist {
  display: none;
  padding: 0 0 14px;
  flex-direction: column;
  gap: 2px;
}
.drawer-sublist.open {
  display: flex;
}
.drawer-sublink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 15px;
  border-radius: 2px;
  transition: background 0.14s ease, color 0.14s ease;
}
.drawer-sublink:hover,
.drawer-sublink:focus-visible {
  color: var(--ink);
  background: var(--orange-tint);
  outline: none;
}
.drawer-sublink .icon {
  width: 20px;
  height: 20px;
  color: var(--face-dark);
  flex-shrink: 0;
}
.drawer-link {
  display: block;
  padding: 16px 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--hairline);
}
.drawer-cta {
  margin: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--ink);
  color: var(--ivory);
  padding: 14px 24px;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* Lock the page when the drawer is open so the body doesn't scroll
   behind the overlay. */
body.drawer-open {
  overflow: hidden;
}

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 84vh;
  padding: 170px 0 110px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Two soft orange glows, same recipe as the platform sub-page heroes
   (rel-hero, auto-hero, etc.) — keeps every page-level hero in one family. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 80% 32%, rgba(255, 133, 51, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 50% at 18% 82%, rgba(220, 88, 0, 0.14), transparent 70%);
  pointer-events: none;
}
/* The hero background is an abstract animated SVG representing Saltcorn's
   product category — a relational platform. Tables, views, workflows,
   connected by data-flow pulses. Not based on the logo. Designed to sit
   behind the H1 without competing with it. Masked to bleed in from the
   right, same convention as the platform sub-page hero diagrams, so it
   never fights the left-aligned headline. */
.hero-crystal {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
  transition: transform 0.6s var(--ease-spring);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 40%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 40%, black 100%);
}
.hero-crystal svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* The whole lattice drifts slowly — ambient motion. */
.hero-crystal .lattice {
  animation: lattice-drift 36s steps(540, end) infinite;
  transform-origin: 50% 50%;
}
@keyframes lattice-drift {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-10px, 6px);
  }
  50% {
    transform: translate(-4px, -8px);
  }
  75% {
    transform: translate(8px, 2px);
  }
}

/* Background dot grid — a faint construction lattice the entities sit on. */
.hero-crystal .grid-dot {
  fill: rgba(27, 27, 31, 0.08);
}

/* Relationship lines */
.hero-crystal .conn {
  fill: none;
  stroke: var(--face-shadow);
  stroke-width: 1.2;
  stroke-opacity: 0.36;
}
.hero-crystal .conn.alt {
  stroke: var(--face-dark);
  stroke-opacity: 0.3;
}

/* Selectors below are intentionally flat (no `.entity` ancestor) so they
   apply to elements both inline AND inside the shadow tree created by
   <use href="#sym-…"/>. The .hero-crystal scope keeps them local. All
   fills/strokes stay inside the warm orange/brown palette — never --ink. */

/* Entity card (table, view, form, calendar, payment, model, pdf) */
.hero-crystal .card {
  fill: rgba(245, 241, 234, 0.86);
  stroke: var(--face-shadow);
  stroke-width: 1;
  stroke-opacity: 0.45;
}
.hero-crystal .header {
  fill: var(--face-dark);
  fill-opacity: 0.42;
}
.hero-crystal .header-dot {
  fill: var(--ivory);
  fill-opacity: 0.85;
}
.hero-crystal .header-bar {
  fill: var(--ivory);
  fill-opacity: 0.6;
}

/* Table rows */
.hero-crystal .row-key {
  fill: var(--face-shadow);
  fill-opacity: 0.6;
}
.hero-crystal .row-cell {
  fill: var(--face-shadow);
  fill-opacity: 0.35;
}
.hero-crystal .row-cell.sm {
  fill-opacity: 0.2;
}
.hero-crystal .row-divider {
  stroke: var(--face-shadow);
  stroke-opacity: 0.22;
  stroke-width: 0.6;
}

/* Grid view cells */
.hero-crystal .view-cell {
  fill: var(--face-shadow);
  fill-opacity: 0.22;
}

/* Workflow node — standalone circle with inner dot */
.hero-crystal .wf-step {
  fill: rgba(245, 241, 234, 0.86);
  stroke: var(--face-shadow);
  stroke-width: 1;
  stroke-opacity: 0.5;
}
.hero-crystal .wf-step.active {
  stroke: var(--face-dark);
  stroke-opacity: 0.75;
}
.hero-crystal .wf-dot {
  fill: var(--face-shadow);
  fill-opacity: 0.6;
}
.hero-crystal .wf-dot.active {
  fill: var(--face-light);
  fill-opacity: 0.95;
}

/* Form view — labels + filled input boxes + submit chip (fill-only) */
.hero-crystal .form-label {
  fill: var(--face-shadow);
  fill-opacity: 0.5;
}
.hero-crystal .form-input {
  fill: var(--face-shadow);
  fill-opacity: 0.22;
}
.hero-crystal .form-submit {
  fill: var(--face-dark);
  fill-opacity: 0.6;
}

/* PDF document — folded corner + text lines + tag */
.hero-crystal .pdf-fold {
  fill: var(--face-shadow);
  fill-opacity: 0.32;
  stroke: var(--face-shadow);
  stroke-width: 0.8;
  stroke-opacity: 0.5;
  stroke-linejoin: round;
}
.hero-crystal .pdf-line {
  fill: var(--face-shadow);
  fill-opacity: 0.4;
}
.hero-crystal .pdf-tag {
  fill: var(--face-dark);
  fill-opacity: 0.6;
}

/* Email envelope — diagonal flap path */
.hero-crystal .email-flap {
  fill: none;
  stroke: var(--face-shadow);
  stroke-width: 1;
  stroke-opacity: 0.55;
  stroke-linejoin: round;
}

/* Calendar — day grid, one cell highlighted */
.hero-crystal .cal-day {
  fill: var(--face-shadow);
  fill-opacity: 0.28;
}
.hero-crystal .cal-day.today {
  fill: var(--face-dark);
  fill-opacity: 0.7;
}

/* Payment gateway — credit card with stripe, chip, number rows */
.hero-crystal .pay-stripe {
  fill: var(--face-shadow);
  fill-opacity: 0.55;
}
.hero-crystal .pay-chip {
  fill: var(--face-dark);
  fill-opacity: 0.6;
}
.hero-crystal .pay-num {
  fill: var(--face-shadow);
  fill-opacity: 0.45;
}
.hero-crystal .pay-num.sm {
  fill-opacity: 0.28;
}

/* Predictive model — small fully-connected neural net */
.hero-crystal .model-edge {
  stroke: var(--face-shadow);
  stroke-width: 0.5;
  stroke-opacity: 0.42;
}
.hero-crystal .model-node {
  fill: var(--face-shadow);
  fill-opacity: 0.65;
}
.hero-crystal .model-node.active {
  fill: var(--face-light);
  fill-opacity: 0.95;
}

/* Arrowheads at the end of relationship paths */
.hero-crystal .arrow-head {
  fill: var(--face-shadow);
  fill-opacity: 0.6;
}
.hero-crystal .arrow-head-alt {
  fill: var(--face-dark);
  fill-opacity: 0.55;
}

/* Data pulses — bright dots travelling along the relationship paths */
.hero-crystal .pulse {
  fill: var(--face-light);
  filter: url(#heroPulseGlow);
}
.hero-crystal .pulse.alt {
  fill: var(--face-dark);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 920px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 36px;
}
.hero h1 {
  font-size: clamp(56px, 12vw, 180px);
  letter-spacing: -0.05em;
  line-height: 0.9;
  margin-bottom: 36px;
}
.hero h1 .accent {
  background: linear-gradient(
    135deg,
    var(--face-light) 0%,
    var(--face-dark) 50%,
    var(--face-shadow) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: clamp(17px, 1.4vw, 21px);
  color: var(--ink-muted);
  max-width: 560px;
  margin-bottom: 48px;
  line-height: 1.55;
}
.actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-primary {
  background: var(--ink);
  color: var(--ivory);
  text-decoration: none;
  padding: 16px 32px;
  font-size: 15px;
  font-weight: 500;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Crystal-cut corners */
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  padding-left: 32px;
  padding-right: 32px;
  border: none;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.btn-primary:hover {
  background: var(--face-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  color: var(--ink);
  text-decoration: none;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 500;
  font-family: "Space Grotesk", sans-serif;
  border-bottom: 1px solid var(--hairline-strong);
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
}
.btn-secondary:hover {
  color: var(--face-dark);
  border-color: var(--face-dark);
}

.hero-meta {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
}
.hero-meta .facet-bar {
  transform: translateY(2px);
}

/* ─── Crystalline section divider ──────────────────────────────────────── */
.facet-divider {
  height: 24px;
  position: relative;
  background: var(--ivory);
}
.facet-divider svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ─── Section base ─────────────────────────────────────────────────────── */
/* z-index + background-color are load-bearing for the sticky-hero effect:
   every section needs to sit above the pinned hero (z-index) and be fully
   opaque (bg) so it visually covers the hero as it scrolls up over it. The
   background matches what the section already rendered via inherited body
   colour, so this is a no-visual-change opacity fix, not a recolour. */
.section {
  padding: 130px 0;
  position: relative;
  z-index: 10;
  background-color: var(--ivory);
}
/* Shared section header: icon + num + name + facet-bar.
   Always rendered on a <div> (not <p>) so it doesn't inherit page-level
   paragraph styles like .cycle p or .beyond p.
   align-items:center keeps the three-band facet-bar visually centred on
   the cap-height of the text (baseline alignment puts the bar ~3px low
   because the bar has no text baseline of its own). */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: "Space Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--face-dark);
  margin-bottom: 32px;
}
.section-eyebrow .num {
  font-size: 14px;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
}
/* Nudge the text portion (num + title) down 2px. Uppercase glyphs in
   Space Grotesk sit slightly above the geometric centre that
   align-items:center uses, so without this the text reads ~2px high
   relative to the icon and facet-bar. */
.section-eyebrow .num,
.section-eyebrow .title { transform: translateY(0.5px); }
.section-eyebrow .facet-bar { transform: translateY(0px); }
/* Modifier applied when the surrounding section background is dark
   (services .strip, .cycle; development .merla, .beyond; design-ref
   .reflection). */
.section-eyebrow.on-dark { color: var(--face-light); }
.section-eyebrow.on-dark .num { color: rgba(245, 241, 234, 0.5); }
.section-h {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  max-width: 900px;
  margin-bottom: 32px;
}
.section-sub {
  font-size: 18px;
  color: var(--ink-muted);
  max-width: 620px;
  margin-bottom: 72px;
  line-height: 1.55;
}

/* ─── The three pillars — literal three-face composition ───────────────── */
.pillars {
  background: var(--ivory-deep);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.pillar-block {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 110px 1fr;
  gap: 0;
  min-height: 460px;
  margin-top: 24px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(155, 89, 44, 0.18);
}
.pillar-face {
  padding: 32px 36px;
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.pillar-face h3 {
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: -0.03em;
  color: var(--ivory);
}
.pillar-face p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 241, 234, 0.82);
  max-width: 360px;
}
.pillar-face .pill-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pillar-top {
  grid-column: 1 / -1;
  background: var(--face-light);
  /* slight slant suggesting "top face" of a crystal — content stays level */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 24px 36px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.pillar-top h3 {
  font-size: clamp(20px, 2vw, 28px);
}
.pillar-top .pill-num {
  color: var(--ink);
  opacity: 0.5;
}
.pillar-top h3 {
  color: var(--ink);
}
.pillar-left {
  background: var(--face-dark);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.pillar-right {
  background: var(--face-shadow);
}

/* faux-3D inner highlight */
.pillar-face::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

/* ─── Capability prisms ────────────────────────────────────────────────── */
.prisms {
  background: var(--ivory);
}
.prism-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
/* Each prism is a card with a visible three-band "edge" along the top */
.prism {
  position: relative;
  background: white;
  padding: 0;
  box-shadow:
    0 1px 0 var(--hairline),
    0 14px 40px rgba(155, 89, 44, 0.06);
  display: flex;
  flex-direction: column;
  transition:
    transform 0.4s var(--ease-spring),
    box-shadow 0.4s ease;
}
.prism:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 var(--hairline),
    0 28px 56px rgba(155, 89, 44, 0.14);
}
.prism-top {
  height: 56px;
  display: grid;
  grid-template-columns: 2fr 1.4fr 1fr;
  position: relative;
}
.prism-top .f1 {
  background: var(--face-light);
}
.prism-top .f2 {
  background: var(--face-dark);
}
.prism-top .f3 {
  background: var(--face-shadow);
}
.prism-top .label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 24px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  mix-blend-mode: normal;
}
.prism-body {
  padding: 32px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.prism-body h3 {
  font-size: 26px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  color: #1b1b1f;
}
.prism-body p {
  font-size: 15px;
  color: rgba(27, 27, 31, 0.65);
  line-height: 1.6;
  flex: 1;
}
.prism-foot {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(27, 27, 31, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(27, 27, 31, 0.45);
  font-weight: 500;
}
.prism-foot strong {
  color: #1b1b1f;
  font-weight: 600;
}
.prism-foot span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.prism-foot span .icon { color: var(--face-dark); }

/* ─── Reflection (pull quote) ──────────────────────────────────────────── */
.reflection {
  background: var(--ivory);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.reflection::before {
  /* faint crystal silhouette in the corner */
  content: "";
  position: absolute;
  top: -10%;
  right: -10%;
  width: 540px;
  height: 540px;
  background: conic-gradient(
    from 200deg at 50% 50%,
    var(--face-shadow) 0deg,
    var(--face-dark) 120deg,
    var(--face-light) 240deg,
    var(--face-shadow) 360deg
  );
  filter: blur(80px);
  opacity: 0.28;
  pointer-events: none;
}
.reflection blockquote {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 4.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 1080px;
  margin-bottom: 48px;
  color: var(--ink);
}
.reflection blockquote em {
  font-style: normal;
  background: linear-gradient(
    135deg,
    var(--face-light) 0%,
    var(--face-dark) 60%,
    var(--face-shadow) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.reflection cite {
  font-style: normal;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.6);
  display: flex;
  gap: 16px;
  align-items: center;
}
.reflection cite::before {
  content: "";
  width: 36px;
  height: 1px;
  background: rgba(245, 241, 234, 0.4);
}
.reflection cite strong {
  color: var(--ink);
  font-weight: 600;
}

/* ─── Cases ────────────────────────────────────────────────────────────── */
.cases {
  background: var(--ivory);
}
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.case-card {
  background: var(--ivory-deep);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  position: relative;
  padding: 0;
  box-shadow:
    0 1px 0 var(--hairline),
    0 14px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  min-height: 360px;
  overflow: hidden;
  transition:
    transform 0.45s var(--ease-spring),
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    outline 0.45s ease;
}
.case-card:hover {
  transform: translateY(-8px) scale(1.025);
  border-color: rgba(255, 133, 51, 0.7);
  outline: 2px solid rgba(255, 185, 126, 0.65);
  box-shadow:
    0 0 28px rgba(255, 133, 51, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 24px 56px rgba(0, 0, 0, 0.65);
  z-index: 5;
}

/* ─── Interactive Hover Physics (Cards & Interactive Elements) ─────────── */
/* Reserved for the large, full-width "panel" cards (~480px+) — offering
   panels and the final-CTA block. Smaller chip/tile cards (how-col,
   spec-card, channel-chip, cap-tile, etc.) keep their own lighter hover. */
.offering-card,
.offering-stack,
.final-block,
.shot-frame,
.btn-primary,
.btn-secondary,
.final-btn {
  transition:
    transform 0.45s var(--ease-spring),
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    outline 0.45s ease !important;
}

.offering-card:hover,
.offering-stack:hover,
.final-block:hover,
.shot-frame:hover {
  transform: translateY(-8px) scale(1.025) !important;
  outline: 2px solid rgba(255, 185, 126, 0.65) !important;
  box-shadow:
    0 0 28px rgba(255, 133, 51, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 24px 56px rgba(0, 0, 0, 0.65) !important;
  z-index: 10;
}

.btn-primary:hover,
.btn-secondary:hover,
.final-btn:hover {
  transform: translateY(-4px) scale(1.035) !important;
  outline: 2px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow:
    0 0 22px rgba(255, 133, 51, 0.5),
    0 12px 30px rgba(0, 0, 0, 0.5) !important;
}
.case-band {
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--face-light) 0%,
    var(--face-light) 50%,
    var(--face-dark) 50%,
    var(--face-dark) 80%,
    var(--face-shadow) 80%,
    var(--face-shadow) 100%
  );
}
.case-body {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.case-tag {
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--face-dark);
  margin-bottom: 28px;
}
.case-body h3 {
  font-size: 28px;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}
.case-body p {
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.6;
  flex: 1;
}
.case-foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 500;
}

/* ─── Final CTA — crystal block ────────────────────────────────────────── */
.final {
  padding: 140px 0 160px;
  position: relative;
  z-index: 10;
  background: var(--ivory-deep);
  overflow: hidden;
}
.final-block {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 110px 1fr;
  min-height: 480px;
  box-shadow: 0 40px 100px rgba(155, 89, 44, 0.22);
}
.final-top {
  grid-column: 1 / -1;
  background: var(--face-light);
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.final-top .num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.final-top .facet-bar i:nth-child(1) {
  background: var(--face-dark);
}
.final-top .facet-bar i:nth-child(2) {
  background: var(--face-shadow);
}
.final-top .facet-bar i:nth-child(3) {
  background: var(--ink);
}

.final-left,
.final-right {
  padding: 48px 44px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 24px;
}
.final-left {
  background: var(--face-dark);
}
.final-right {
  background: var(--face-shadow);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.final-left h2 {
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 0.98;
  color: var(--ink);
  letter-spacing: -0.03em;
  max-width: 460px;
}
.final-left p,
.final-right p {
  font-size: 16px;
  line-height: 1.55;
  max-width: 400px;
}
.final-left p {
  color: var(--ink);
}
.final-right p {
  color: rgba(255, 255, 255, 0.92);
}
.final-right h3 {
  font-size: 22px;
  color: var(--ink);
  margin-bottom: 12px;
}
.final-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.final-btn {
  text-decoration: none;
  padding: 14px 24px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.18s ease;
}
.final-btn.fb-primary {
  background: var(--ivory);
  color: var(--ink);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  padding-left: 24px;
  padding-right: 24px;
}
.final-btn.fb-ghost {
  color: var(--ink);
  border-bottom: 1px solid rgba(245, 241, 234, 0.5);
}
.final-btn:hover {
  transform: translateY(-1px);
}

/* ─── Hero dot overlay ─────────────────────────────────────────────────
   Companion layer to a hero background like .schema-bg / .auto-bg, holding
   only the elements that actually animate. Everything static stays behind
   in the background layer, which then never repaints: a repaint inside a
   masked layer costs a re-raster of the whole layer, so isolating the two
   moving dots keeps that cost proportional to the dots rather than to the
   entire diagram. Geometry (inset, viewBox on the child svg) and the mask
   are deliberately identical to the background layer so the dots stay
   registered with the artwork they travel over. */
.hero-dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
  transition: transform 0.6s var(--ease-spring);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 40%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 40%, black 100%);
  /* Hints the compositor to keep this on its own layer, so the dots move
     without disturbing anything painted around them. */
  will-change: transform;
}
.hero-dots svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
/* Matches the background layer's own mobile treatment. */
@media (max-width: 820px) {
  .hero-dots {
    opacity: 0.5;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ─── Contact CTA strip (site-wide, sits just above the footer) ────────── */
/* position/z-index put the strip in the same stacking layer as .section and
   .footer, so it scrolls over sticky heroes instead of being painted under
   them. */
.contact-cta {
  padding: 32px 0;
  text-align: center;
  background: var(--ivory);
  border-top: 1px solid var(--hairline);
  position: relative;
  z-index: 10;
}
.contact-cta .btn-primary {
  padding: 12px 24px;
  font-size: 14px;
}

/* ─── Contact modal ──────────────────────────────────────────────────────
   Built lazily by js/main.js (same pattern as .lightbox) so the "Contact
   us" button on every page can pop the contact form in place, instead of
   navigating to index_daniel.html#contact. Wraps the existing .contact-block
   markup, so the form itself is styled identically to the on-page version. */
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: rgba(13, 13, 16, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: lightbox-in 0.22s ease;
}
.contact-modal[hidden] {
  display: none;
}
.contact-modal-panel {
  position: relative;
  width: 100%;
  max-width: 980px;
  max-height: 100%;
  overflow-y: auto;
  border-radius: 12px;
}
.contact-modal-panel .contact-block {
  margin-top: 0;
}
.contact-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(245, 241, 234, 0.25);
  border-radius: 50%;
  background: rgba(245, 241, 234, 0.06);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.contact-modal-close:hover {
  background: rgba(255, 133, 51, 0.9);
  border-color: rgba(255, 133, 51, 0.95);
}

/* ─── Footer ───────────────────────────────────────────────────────────── */
.footer {
  padding: 80px 0 36px;
  background: var(--ivory);
  border-top: 1px solid var(--hairline);
  position: relative;
  z-index: 10;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.footer-brand svg {
  height: 36px;
}
.footer-brand .brand-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.footer-brand p {
  color: var(--ink-muted);
  font-size: 14px;
  max-width: 300px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.footer-col h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-col a {
  display: block;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 10px;
  transition: color 0.18s ease;
}
.footer-col a:hover {
  color: var(--ink);
}
.footer-bottom {
  border-top: 1px solid var(--hairline);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}
.footer-bottom .license {
  background: linear-gradient(
    90deg,
    var(--face-light),
    var(--face-dark),
    var(--face-shadow)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* ─── Back to top (floating) ───────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--ivory-deep);
  color: var(--face-light);
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}
.back-to-top:hover {
  transform: translateY(-2px);
  border-color: var(--face-light);
  background: var(--orange-tint);
}

/* ─── Illustration system ──────────────────────────────────────────────── */
/* Hidden sprite host: <symbol> definitions referenced via <use href="#…"> */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Line icons: 24×24 nominal, 1.5px stroke, one orange-faceted accent.
   Stroke inherits currentColor so icons recolour with surrounding type. */
.icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  vertical-align: middle;
  color: var(--ink);
}
.icon.size-lg { width: 32px; height: 32px; }
.icon.size-xl { width: 40px; height: 40px; }
.icon.size-sm { width: 18px; height: 18px; }
.icon .ln {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: square;
  stroke-linejoin: round;
  fill: none;
}
.icon .facet { fill: var(--face-light); stroke: none; }
.icon .facet-dark { fill: var(--face-dark); stroke: none; }

/* Spot illustrations: figurative SVGs anchoring each capability card.
   Drawn in the same isometric three-face logic as the logo —
   .spot-light / .spot-dark / .spot-shadow fill the three crystal tones,
   .spot-line and .spot-edge carry the ink linework. */
.spot { width: 100%; height: auto; display: block; }
.spot .spot-light  { fill: var(--face-light); }
.spot .spot-dark   { fill: var(--face-dark); }
.spot .spot-shadow { fill: var(--face-shadow); }
.spot .spot-glint  { fill: var(--face-glint); }
.spot .spot-ink    { fill: var(--ink); }
.spot .spot-ivory  { fill: var(--ivory); }
.spot .spot-line {
  stroke: var(--ink);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.spot .spot-line.thin { stroke-width: 1; opacity: 0.55; }
.spot .spot-line.spot-dash { stroke-dasharray: 3 4; }
.spot .spot-edge {
  stroke: rgba(0, 0, 0, 0.2);
  stroke-width: 1;
  fill: none;
}

.prism-spot {
  margin: -4px -4px 22px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.prism-spot svg { max-height: 132px; }

.case-icon {
  width: 44px;
  height: 44px;
  color: var(--face-dark);
  margin-bottom: 22px;
}

/* Section dot-grid texture — sits behind content so cards read as facets
   of a solid, not boxes on a page. Soft top/bottom fade keeps it from
   competing with the section-eyebrow rules. */
.section.has-pattern { position: relative; }
.section.has-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(27, 27, 31, 0.12) 1px, transparent 1.4px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  opacity: 0.5;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.section.has-pattern > .container { position: relative; z-index: 1; }

/* Eyebrow icon: a tiny chip sitting before the section number. Colour
   inherits from the parent .section-eyebrow so the same icon tints
   correctly against light and dark section backgrounds. */
.eb-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
}

/* ─── Reveal (Staggered Left-to-Right Scroll Animation) ────────────────── */
.reveal {
  opacity: 0;
  transform: translateX(-70px);
  transition:
    opacity 1.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateX(0);
}

/* ─── Horizontal scroller ──────────────────────────────────────────────── */
/* Generic carousel: any element with .scroller becomes a horizontally
   scrollable strip. Without JS the native scrollbar is shown. main.js
   progressively enhances each one by wrapping it in a .scroller-frame
   and injecting left/right .scroller-arrow buttons; the native bar is
   then hidden in favour of the arrow controls. */
.scroller {
  margin-top: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.scroller::-webkit-scrollbar { height: 6px; }
.scroller::-webkit-scrollbar-track { background: rgba(245, 241, 234, 0.05); }
.scroller::-webkit-scrollbar-thumb { background: rgba(245, 241, 234, 0.2); }

.scroller-frame {
  position: relative;
  margin-top: 24px;
}
.scroller-frame > .scroller--enhanced {
  margin-top: 0;
  padding-bottom: 4px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.scroller-frame > .scroller--enhanced::-webkit-scrollbar { display: none; }

.scroller-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(245, 241, 234, 0.4);
  background: rgba(245, 241, 234, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    opacity 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    transform 0.22s var(--ease-spring);
}
.scroller-arrow:hover {
  background: rgba(255, 133, 51, 0.9);
  border-color: rgba(255, 133, 51, 0.95);
  transform: translateY(-50%) scale(1.06);
}
.scroller-arrow:active {
  transform: translateY(-50%) scale(0.95);
}
.scroller-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.scroller-arrow svg {
  width: 30px;
  height: 30px;
  display: block;
}
.scroller-arrow-left  { left: 4px; }
.scroller-arrow-right { right: 4px; }
@media (max-width: 700px) {
  .scroller-arrow { width: 44px; height: 44px; }
  .scroller-arrow svg { width: 22px; height: 22px; }
}

/* ─── Responsive ───────────────────────────────────────────────────────── */
/* Tablet portrait: the in-navbar menu is visible, but the Get Started /
   Get in touch CTA collapses out — it only returns at tablet-landscape
   widths (>= 1024px). The dropdown panels are narrowed and re-anchored
   so the wider two-column variants don't overflow the viewport. */
@media (max-width: 1023px) {
  .nav-links {
    gap: 20px;
  }
  .nav-links .nav-cta {
    display: none;
  }
  .menu-panel.cols-2 {
    min-width: 540px;
    left: -60px;
  }
}
@media (max-width: 1024px) {
  .prism-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .case-grid {
    grid-template-columns: 1fr;
  }
}
/* Mobile: hide the entire nav-links cluster and surface a hamburger
   that opens the slide-in drawer. */
@media (max-width: 767px) {
  .nav-links {
    display: none;
  }
  .nav-hamburger {
    display: inline-flex;
  }
}
@media (max-width: 820px) {
  .section {
    padding: 88px 0;
  }
  .hero {
    padding: 130px 0 90px;
    min-height: auto;
  }
  .hero-crystal {
    opacity: 0.5;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .pillar-block {
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr 1fr;
  }
  .pillar-left {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .prism-grid {
    grid-template-columns: 1fr;
  }
  .final-block {
    grid-template-columns: 1fr;
    grid-template-rows: 80px 1fr 1fr;
  }
  .final-right {
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
  }
  .hero-meta {
    font-size: 10px;
    gap: 12px;
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-crystal .lattice {
    animation: none;
  }
  /* SMIL animations (animate / animateMotion) are not toggled by CSS;
     they're harmless at rest since the universal animation:none below
     does not affect them — but they will continue running. Browsers
     that honour prefers-reduced-motion at the SMIL layer will pause them. */
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ─── Hero background image (standalone SVG lattice) ────────────────────── */
.hero-crystal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Split: a two-column text + media row ─────────────────────────────── */
/* Text on the left, a framed screenshot on the right. `.reverse` swaps the
   sides. Used for feature explainers and the numbered "how it works" steps. */
.split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.split.reverse { grid-template-columns: 1.15fr 0.85fr; }
.split.reverse .split-text { order: 2; }
.split.reverse .shot { order: 1; }
.split-text .section-h { margin-bottom: 24px; }
.split-text .lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 20px;
  max-width: 520px;
}
.split-text p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-muted);
  max-width: 520px;
}
.split-text p + p { margin-top: 18px; }

/* ─── Shot: a framed product screenshot with a faux window chrome ──────── */
/* Screenshots are shown at a capped height (top-aligned) so a tall image
   never dominates its row — the frame stays compact and never wider than
   its column (≤ 50% of the layout). Click / Enter opens the full image in
   the lightbox (see .lightbox and js/main.js). */
.shot { margin: 0; }
.shot-frame {
  position: relative;
  padding-top: 34px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 60px rgba(155, 89, 44, 0.14);
  cursor: zoom-in;
  transition: box-shadow 0.3s ease, transform 0.3s var(--ease-spring);
}
.shot-frame:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 70px rgba(155, 89, 44, 0.2);
}
.shot-frame:focus-visible {
  outline: 2px solid var(--face-dark);
  outline-offset: 3px;
}
.shot-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  background: var(--ivory-deep);
  border-bottom: 1px solid var(--hairline);
  z-index: 2;
}
.shot-frame::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--face-dark);
  box-shadow: 14px 0 0 var(--face-light), 28px 0 0 var(--face-shadow);
  z-index: 3;
}
.shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: top center;
}
/* "Enlarge" hint — a magnifier chip in the frame's title bar */
.shot-frame .shot-zoom {
  position: absolute;
  top: 9px;
  right: 12px;
  z-index: 3;
  width: 16px;
  height: 16px;
  color: var(--ink-dim);
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.shot-frame:hover .shot-zoom { opacity: 1; color: var(--face-dark); }
.shot figcaption {
  margin-top: 16px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
}

/* ─── Lightbox — full-size screenshot overlay (built by js/main.js) ─────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(13, 13, 16, 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: lightbox-in 0.22s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lightbox-fig {
  margin: 0;
  max-width: 1200px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lightbox-fig img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 130px);
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}
.lightbox-fig figcaption {
  font-family: "Space Grotesk", sans-serif;
  font-size: 14px;
  color: rgba(245, 241, 234, 0.75);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(245, 241, 234, 0.25);
  border-radius: 50%;
  background: rgba(245, 241, 234, 0.06);
  color: var(--ivory);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox-close:hover {
  background: rgba(255, 133, 51, 0.9);
  border-color: rgba(255, 133, 51, 0.95);
}

/* ─── Steps: numbered process explainer built from stacked .split rows ─── */
.steps .step + .step { margin-top: 88px; }
.step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: var(--ivory);
  background: var(--face-dark);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.step .split-text h3 {
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.step .split-text p {
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-muted);
  max-width: 460px;
}

/* ─── Case-grid column modifiers and centred action row ────────────────── */
.case-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.case-grid.cols-4 .case-card { min-height: auto; }
.case-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

/* ─── Spec grid — a compact reference list of typed items ──────────────── */
/* Used for the field-type reference on platform pages: a name in the
   orange-light face colour with a one-line explanation beside it. */
.spec-panel {
  margin-top: 72px;
  background: var(--ivory);
  color: var(--ink);
  padding: 44px 40px;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(27, 27, 31, 0.14);
}
.spec-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.55);
  margin-bottom: 28px;
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(245, 241, 234, 0.1);
  border: 1px solid rgba(245, 241, 234, 0.1);
}
.spec-item {
  background: var(--ivory);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.spec-name {
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--face-light);
}
.spec-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(245, 241, 234, 0.72);
}

/* Supporting paragraph inside a .reflection band, under the blockquote */
.reflection-note {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(245, 241, 234, 0.78);
  max-width: 760px;
  margin-bottom: 40px;
}

/* Inline links inside card copy */
.case-body p a {
  color: var(--face-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(220, 88, 0, 0.4);
  transition: border-color 0.2s ease;
}
.case-body p a:hover { border-color: var(--face-dark); }

/* Inline code — schema names like id and _sc_ tables in running copy */
code {
  font-family: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: rgba(27, 27, 31, 0.07);
  color: var(--face-dark);
}
.reflection code,
.spec-item code,
.case-card code {
  background: rgba(245, 241, 234, 0.12);
  color: var(--face-glint);
}
.actions.actions-center {
  justify-content: center;
  margin-top: 64px;
}

/* ─── Flow strip — a horizontal "a → b → c" pipeline of faceted nodes ────
   A reusable process ribbon: three (or more) tone-faced nodes separated by
   chevron connectors, reading left-to-right as a pipeline (e.g. event →
   trigger → action). Wraps to a vertical stack on narrow screens, where the
   chevrons rotate to point downward. */
.flow-strip {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  margin-bottom: 64px;
  box-shadow: 0 24px 60px rgba(155, 89, 44, 0.14);
}
.flow-node {
  flex: 1 1 220px;
  min-width: 200px;
  padding: 26px 28px;
  color: var(--ivory);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.flow-node.n1 { background: var(--face-light); }
.flow-node.n2 { background: var(--face-dark); }
.flow-node.n3 { background: var(--face-shadow); color: #fff; }
.flow-node .flow-k {
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.flow-node h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  color: inherit;
}
.flow-node p {
  font-size: 14px;
  line-height: 1.5;
  color: inherit;
}
.flow-arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--face-dark);
}
.flow-arrow svg { width: 26px; height: 26px; }
@media (max-width: 720px) {
  .flow-node { flex-basis: 100%; }
  .flow-arrow { width: 100%; padding: 6px 0; transform: rotate(90deg); }
}

@media (max-width: 1024px) {
  .case-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .split,
  .split.reverse {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .split.reverse .split-text,
  .split.reverse .shot { order: 0; }
  .split-text .lead,
  .split-text p { max-width: none; }
  .steps .step + .step { margin-top: 64px; }
  .case-grid.cols-4,
  .case-grid.cols-2 { grid-template-columns: 1fr; }
  .spec-panel { padding: 32px 22px; }
}

/* ─── Hero 3D Split Section ────────────────────────────────────────────── */
#hero-3d {
  background-color: #1a1a1e;
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  box-sizing: border-box;
  padding-top: 80px;
  overflow: hidden;
  z-index: 1;
}

#hero-3d::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('/files/serve/images/pcb-bg.png');
  background-size: cover;
  background-position: center;
  filter: grayscale(100%) contrast(150%);
  opacity: 0.04;
  z-index: -1;
}

#canvas-container, #hero-3d #canvas-container, canvas {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}

#hero-3d .hero-3d-left {
  background: transparent !important;
  background-color: transparent !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding: 4rem 2rem 4rem clamp(2rem, 5vw, 4.5rem);
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

#hero-3d .hero-eyebrow-small {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8533;
  margin-bottom: 1.25rem;
  text-align: left;
  max-width: 100%;
}

#hero-3d .hero-title-massive {
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(2.2rem, 3.2vw, 3.5rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 1.5rem;
  text-align: left;
  max-width: 100%;
  width: 100%;
}

#hero-3d .hero-features-list {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #d1d5db;
  margin-bottom: 1.5rem;
  text-align: left;
  max-width: 100%;
}

#hero-3d .hero-desc {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.125rem;
  line-height: 1.65;
  color: #94a3b8;
  max-width: 100%;
  width: 100%;
  margin: 0;
  text-align: left;
}

#hero-3d #canvas-container {
  width: 100%;
  max-width: 580px;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 580px;
  margin: auto;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 960px) {
  #hero-3d {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  /* The 3D canvas has no room to sit beside the text at this width and
     previously dropped underneath it, breaking the layout. Hide it
     entirely and let the text column take the full hero width instead. */
  #hero-3d #canvas-container {
    display: none !important;
  }
  #hero-3d .hero-3d-left {
    width: 100%;
    align-items: center;
    text-align: center;
    padding: 5rem 2rem 3rem 2rem;
  }
  #hero-3d .hero-eyebrow-small,
  #hero-3d .hero-title-massive,
  #hero-3d .hero-features-list,
  #hero-3d .hero-desc {
    text-align: center;
  }
  #hero-3d .hero-actions {
    justify-content: center;
  }
}

/* ─── Contact Us / Tell us what you want (Section 07) ──────────────────── */
/* Page background (not the .contact-form/.contact-aside panel background)
   for #contact — matched to .final's var(--ivory-deep) so the page doesn't
   step to the darker body var(--ivory) coming out of the final CTA above it. */
#contact {
  background: var(--ivory-deep);
}
.contact-block {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 24px;
}
.contact-form {
  background: var(--ivory-deep);
  padding: 48px 48px 52px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form .kicker {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff8533;
}
.contact-form h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 6px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  background: rgba(15, 17, 23, 0.7);
  border: 1px solid var(--hairline);
  color: var(--ink);
  padding: 13px 14px;
  width: 100%;
  border-radius: 6px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  background: #16181f;
  border-color: #ff8533;
}
.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}
/* The dropdown is the one field the generated form renders as a <select>.
   Drop the native control chrome and draw our own chevron so it sits at the
   same weight as the text inputs beside it. */
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.65)' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  text-overflow: ellipsis;
}
/* Native option lists don't inherit the panel colours in most browsers. */
.contact-form select option {
  background: #16181f;
  color: #ffffff;
}
/* ─── Generated contact form (Saltcorn <embed-view viewname="ContactForm">)
   The form body is rendered by Saltcorn, so instead of the hand-written
   .form-row / <label> markup it arrives as form.form-namespace using
   Bootstrap-flavoured classes (.row, .col-sm-6, .form-control, .text-muted)
   plus a couple of inline margins. These rules re-dress that markup so it
   reads the same as the rest of the panel. The kicker and the heading live
   in the .contact-form wrapper, outside the generated form. */
.contact-form .form-namespace {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* The generated markup wraps the second row in a bare <span> carrying inline
   margins; display:contents drops that span out of the layout so the row
   itself becomes a flex item of the form and picks up the 20px gap. */
.contact-form .form-namespace > span:not([class]) {
  display: contents;
}
/* !important beats the inline margin-top/bottom:2rem on the second row. */
.contact-form .form-namespace .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 !important;
}
.contact-form .form-namespace .col-sm-6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  min-width: 0;
}
/* Field captions are plain <span class="text-muted">, styled to match the
   old uppercase <label> text. */
.contact-form .form-namespace .text-muted {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted) !important;
}
/* The message caption and its textarea are direct siblings in the form, so
   the 20px form gap falls between them; pull it back to the 8px used
   between a caption and its field inside a column. */
.contact-form .form-namespace > .text-muted {
  margin-bottom: -12px;
}
/* Bootstrap's .form-control:focus / .form-select:focus outrank the plain
   .contact-form input:focus rule above, so restate the focus treatment here
   at matching weight. */
.contact-form .form-namespace .form-control:focus,
.contact-form .form-namespace .form-select:focus {
  outline: none;
  box-shadow: none;
  background-color: #16181f;
  border-color: #ff8533;
}
/* Submit row: the generated button is wrapped in a .text-start div with an
   inline margin-top. The button sizes to its own content — the standard
   button width used elsewhere on the site, not the full panel width. */
.contact-form .form-namespace .text-start {
  margin: 0 !important;
}
.contact-form .form-namespace .btn-primary {
  /* re-asserted over Bootstrap's .btn so the crystal-cut shape survives */
  background: var(--ink);
  color: var(--ivory);
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  padding: 16px 32px;
  border: none;
  border-radius: 0;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.contact-form .form-namespace .btn-primary:hover {
  background: var(--face-dark);
  color: var(--ivory);
  transform: translateY(-1px);
}

.contact-aside {
  background: #111318;
  color: var(--ink);
  padding: 48px 42px 52px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-left: 1px solid var(--hairline);
}
.contact-aside .kicker {
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff8533;
}
.contact-aside a.email {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 133, 51, 0.4);
  align-self: flex-start;
  padding-bottom: 4px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.contact-aside a.email:hover {
  color: #ff8533;
  border-color: #ff8533;
}
.contact-aside .note {
  font-size: 14.5px;
  color: var(--ink-muted);
  line-height: 1.6;
}

/* ─── Contact form: "vivid" panel variant (index_daniel.html) ───────────
   Restyles the default dark panel above to match the vibrant split-color
   "Next in the platform" CTA (.final-block/.final-left/.final-right) used
   elsewhere on the page, via the same --face-dark/--face-shadow tokens —
   a real match rather than an approximation. Add .contact-vivid alongside
   .contact-block in the markup to opt a contact section into this look. */
.contact-vivid.contact-block {
  border: none;
  box-shadow:
    0 0 40px rgba(220, 88, 0, 0.35),
    0 30px 80px rgba(0, 0, 0, 0.45);
}
.contact-vivid .contact-form {
  background: var(--face-dark);
}
.contact-vivid .contact-aside {
  background: var(--face-shadow);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
@media (max-width: 860px) {
  .contact-vivid .contact-aside {
    border-left: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
}
.contact-vivid .contact-form .kicker,
.contact-vivid .contact-aside .kicker {
  color: #fff;
}
.contact-vivid .contact-form h2,
.contact-vivid .contact-form label,
.contact-vivid .contact-form .text-muted {
  color: #fff !important;
}
.contact-vivid .contact-aside .note {
  color: rgba(255, 255, 255, 0.92);
}
.contact-vivid .contact-aside a.email {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.5);
}
.contact-vivid .contact-aside a.email:hover {
  color: #fff;
  border-bottom-color: #fff;
}
/* background-color, not the background shorthand, so the select keeps the
   chevron background-image it gets from the base rules above. */
.contact-vivid .contact-form input,
.contact-vivid .contact-form select,
.contact-vivid .contact-form textarea {
  background-color: rgba(0, 0, 0, 0.35);
  border: none;
  color: #fff;
}
.contact-vivid .contact-form input::placeholder,
.contact-vivid .contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.contact-vivid .contact-form input:focus,
.contact-vivid .contact-form select:focus,
.contact-vivid .contact-form textarea:focus {
  background-color: rgba(0, 0, 0, 0.5);
  border: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.contact-vivid .contact-form select option {
  background: #26262c;
}
.contact-vivid .contact-form .btn-primary {
  background: var(--ivory);
  color: var(--ink);
}
.contact-vivid .contact-form .btn-primary:hover {
  background: #26262c;
  color: var(--ink);
}

.news-callout {
  margin-top: 6px;
  padding: 20px;
  max-width: 640px;
  background: var(--orange-tint);
  border: 1px solid rgba(255, 133, 51, 0.25);
  border-radius: 8px;
}

.news-callout a {
  text-decoration: unset;
}

.news-callout p {
  margin-top: 7px;
  font-family: "Fira Code", "Space Grotesk", monospace;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}

/* Standalone "Recent news" section (index_daniel.html): sits directly under
   the hero with no section-eyebrow of its own, so it needs less top padding
   than a standard .section, and a larger callout to carry the section on
   its own. No bottom padding of its own — #problem's own top padding (set
   to match this 50px in index_daniel.html) is the entire gap down to
   "01 / Replace old tools", so the gap above and below read as equal. */
#news {
  background: var(--ivory);
  padding-top: 50px;
  padding-bottom: 0;
}
#news .news-callout {
  margin-top: 0;
  padding: 32px 40px;
  max-width: none;
}
#news .news-callout p {
  font-size: 18px;
  line-height: 1.6;
}

@media (max-width: 860px) {
  .contact-block {
    grid-template-columns: 1fr;
  }
  .contact-aside {
    border-left: none;
    border-top: 1px solid var(--hairline);
  }
  .form-row,
  .contact-form .form-namespace .row {
    grid-template-columns: 1fr;
  }
}

/* ─── Contact form: "services" panel variant (page/services.html) ───────
   That page's contact section carries the base .contact class rather than
   .section + #contact (used by index_daniel.html/design_reference.html),
   giving a collision-free hook for its own darker, square-edged panel —
   no border-radius, wider padding, --face-light accents in place of the
   generic --ink-muted / #ff8533 pairing the other pages use. Everything
   not restated here (the .form-namespace layout, the select's chevron,
   the button shape) comes from the shared rules above. */
.contact .contact-block {
  margin-top: 0;
  box-shadow: none;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.08);
}
.contact .contact-form {
  background: #222225;
  padding: 56px 56px 60px;
}
.contact .contact-form .kicker {
  color: var(--face-light);
}
.contact .contact-form h2 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
  max-width: 14ch;
}
.contact .contact-form .form-namespace {
  gap: 22px;
}
.contact .contact-form .text-muted {
  color: var(--ink-dim) !important;
  letter-spacing: 0.18em;
}
.contact .contact-form input,
.contact .contact-form select,
.contact .contact-form textarea {
  background-color: rgba(255, 255, 255, 0.04);
  border-radius: 0;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
.contact .contact-form input::placeholder,
.contact .contact-form textarea::placeholder {
  color: var(--ink-dim);
}
.contact .contact-form input:focus,
.contact .contact-form select:focus,
.contact .contact-form textarea:focus {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: var(--face-light);
}
.contact .contact-form textarea {
  min-height: 130px;
}
.contact .contact-form select option {
  background: #2a2a2e;
}
.contact .contact-form .form-namespace .btn-primary {
  padding: 16px 30px;
  font-size: 14px;
}
@media (max-width: 1024px) {
  .contact .contact-block {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .contact .contact-form,
  .contact .contact-aside {
    padding: 36px 28px;
  }
}

/* ─── Footer Social & Back to top button ───────────────────────────────── */
.footer-social a:hover {
  color: #ff8533 !important;
  transform: translateY(-3px) scale(1.15);
}
.back-to-top-btn {
  transition: all 0.25s var(--ease-spring);
}
.back-to-top-btn:hover {
  color: #ff8533 !important;
  transform: translateY(-2px);
}