/* ==========================================================================
   DigiCov - Sections
   ========================================================================== */

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

.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 2rem + 6vw, 7rem));
  padding-bottom: clamp(3.5rem, 2rem + 6vw, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* Two blurred gradient orbs drifting behind the type. The blur is heavy
   enough that they read as ambient light rather than as shapes. */
.hero-orb {
  position: absolute;
  z-index: -2;
  border-radius: var(--r-full);
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  will-change: transform;
}
.hero-orb--a {
  width: 520px; height: 520px;
  top: -190px; right: -130px;
  background: radial-gradient(circle at 30% 30%, #FF7A00, transparent 68%);
  animation: drift-a 22s var(--ease-in-out) infinite alternate;
}
.hero-orb--b {
  width: 440px; height: 440px;
  bottom: -220px; left: -140px;
  background: radial-gradient(circle at 60% 40%, #FF5A3C, transparent 68%);
  opacity: 0.32;
  animation: drift-b 26s var(--ease-in-out) infinite alternate;
}
@keyframes drift-a {
  to { transform: translate3d(-70px, 60px, 0) scale(1.12); }
}
@keyframes drift-b {
  to { transform: translate3d(60px, -50px, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none; }
}

/* Faint technical grid, masked to fade out toward the edges */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right,  rgba(30, 35, 43, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 35, 43, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 35%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 65% at 50% 35%, #000 30%, transparent 78%);
  pointer-events: none;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
}
@media (max-width: 1000px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.45rem 0.9rem 0.45rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-body);
  box-shadow: var(--e-1);
}

.hero .display { margin-top: var(--s-6); }
.hero .lead    { margin-top: var(--s-6); max-width: 54ch; }

.hero-actions {
  margin-top: var(--s-10);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.hero-proof {
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--s-8);
  justify-content: start;
}
@media (max-width: 520px) {
  .hero-proof { grid-template-columns: repeat(2, minmax(0, auto)); gap: var(--s-6); }
}
.hero-proof .stat-value { font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2rem); }
.hero-proof .stat-label { margin-top: var(--s-1); font-size: var(--fs-xs); }

/* ---- Hero visual: a stylised product surface, built from divs ------------ */

.hero-visual { position: relative; }

.hero-panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-24);
  box-shadow: var(--e-4);
  overflow: hidden;
  /* A slight 3D tilt that eases flat when the visitor hovers it */
  transform: perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition: transform var(--d-slower) var(--ease-out);
}
.hero-visual:hover .hero-panel {
  transform: perspective(1400px) rotateY(-2deg) rotateX(1deg);
}
@media (max-width: 1000px) {
  .hero-panel, .hero-visual:hover .hero-panel { transform: none; }
}

.hero-panel-bar {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.hero-panel-dot { width: 9px; height: 9px; border-radius: var(--r-full); background: var(--border); }
.hero-panel-dot:nth-child(1) { background: #FF5F57; }
.hero-panel-dot:nth-child(2) { background: #FEBC2E; }
.hero-panel-dot:nth-child(3) { background: #28C840; }
.hero-panel-title {
  margin-left: var(--s-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.hero-panel-body { padding: var(--s-6); display: grid; gap: var(--s-4); }

.metric-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.metric {
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  background: var(--surface);
}
.metric-label { font-size: var(--fs-xs); color: var(--text-muted); }
.metric-value {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: var(--tr-heading);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.metric-delta { margin-top: var(--s-1); font-size: var(--fs-xs); font-weight: 600; color: var(--c-success); }

/* Sparkline draws itself in on load */
.spark { width: 100%; height: 62px; }
.spark path {
  fill: none;
  stroke: url(#sparkGrad);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: draw 2.4s var(--ease-out) 0.5s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .spark path { animation: none; stroke-dashoffset: 0; }
}

.hero-task {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  font-size: var(--fs-sm);
  color: var(--text-body);
}
.hero-task svg { width: 18px; height: 18px; color: var(--c-success); flex: none; }
.hero-task span { margin-left: auto; font-size: var(--fs-xs); color: var(--text-muted); }

/* Floating accent cards that gently bob beside the panel */
.hero-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  box-shadow: var(--e-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
}
.hero-float-icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: var(--r-8);
  background: var(--grad-brand);
  color: var(--c-white);
  flex: none;
}
.hero-float-icon svg { width: 16px; height: 16px; }
.hero-float--b { top: 62%; right: -12%; animation: bob 7.5s var(--ease-in-out) 0.8s infinite alternate; }
@keyframes bob { to { transform: translateY(-14px); } }
@media (max-width: 1200px) { .hero-float--b { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-float { animation: none; } }

/* --------------------------------------------------------------------------
   Trust strip
   -------------------------------------------------------------------------- */

.trust-strip {
  padding-block: var(--s-10);
  border-block: 1px solid var(--border);
  background: var(--surface-alt);
}
.trust-strip-label {
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-8);
}

/* --------------------------------------------------------------------------
   Feature split - alternating image/text rows
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 1rem + 5vw, 5.5rem);
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

.split--flip .split-media { order: -1; }
@media (max-width: 900px) { .split--flip .split-media { order: 0; } }

.split-list { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
.split-list li { display: flex; gap: var(--s-4); }
.split-list .tick {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: var(--r-full);
  background: var(--accent-wash);
  color: var(--c-coral);
  flex: none;
  margin-top: 1px;
}
.split-list .tick svg { width: 14px; height: 14px; }
.split-list strong { display: block; color: var(--text-strong); font-family: var(--font-display); font-size: var(--fs-body); }
.split-list p { font-size: var(--fs-sm); margin-top: 2px; }

/* --------------------------------------------------------------------------
   Process - connected steps
   -------------------------------------------------------------------------- */

.process { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-6); position: relative; }
@media (max-width: 1100px) { .process { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .process { grid-template-columns: minmax(0, 1fr); } }

.process-step { position: relative; padding-top: var(--s-8); }

/* The rail that threads the steps together */
.process-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border);
}
.process-step::after {
  content: '';
  position: absolute;
  top: -4px; left: 0;
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  background: var(--grad-brand);
  box-shadow: 0 0 0 4px var(--surface);
}
.section--dark .process-step::before { background: var(--border-invert); }
.section--dark .process-step::after  { box-shadow: 0 0 0 4px var(--surface-invert); }

.process-step .h4 { margin-bottom: var(--s-2); }
.process-step p { font-size: var(--fs-sm); }
.process-num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  color: var(--c-coral);
  margin-bottom: var(--s-3);
  display: block;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--c-charcoal);
  border-radius: var(--r-24);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  text-align: center;
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 620px; height: 620px;
  top: -55%; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 122, 0, 0.34), transparent 62%);
  filter: blur(60px);
  pointer-events: none;
}
.cta-band .h2 { color: var(--c-white); max-width: 20ch; margin-inline: auto; }
.cta-band .lead { color: var(--text-on-invert-mut); max-width: 56ch; margin: var(--s-5) auto 0; }
.cta-band .hero-actions { justify-content: center; margin-top: var(--s-10); }
.cta-band-meta {
  margin-top: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-6);
  font-size: var(--fs-xs);
  color: var(--text-on-invert-mut);
}
.cta-band-meta span { display: inline-flex; align-items: center; gap: var(--s-2); }

/* --------------------------------------------------------------------------
   Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3rem, 2rem + 4vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  isolation: isolate;
}
.page-head::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 560px; height: 560px;
  top: -300px; right: -120px;
  background: radial-gradient(circle, rgba(255, 122, 0, 0.16), transparent 66%);
  filter: blur(70px);
  pointer-events: none;
}
.page-head .h1   { margin-top: var(--s-4); max-width: 20ch; }
.page-head .lead { margin-top: var(--s-5); max-width: 60ch; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.breadcrumb a:hover { color: var(--c-coral); }
.breadcrumb svg { width: 12px; height: 12px; opacity: 0.5; }

/* --------------------------------------------------------------------------
   Service detail rows (services page)
   -------------------------------------------------------------------------- */

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  padding-block: var(--s-16);
  border-bottom: 1px solid var(--border);
}
.service-row:last-child { border-bottom: 0; }
@media (max-width: 900px) { .service-row { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); } }

.service-row-aside { position: sticky; top: calc(var(--header-h) + var(--s-8)); align-self: start; }
@media (max-width: 900px) { .service-row-aside { position: static; } }

.service-row-aside .card-icon { margin-bottom: var(--s-5); }
.service-row-aside .h2 { font-size: var(--fs-h3); }

.deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
@media (max-width: 560px) { .deliverables { grid-template-columns: minmax(0, 1fr); } }
.deliverable {
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
  background: var(--surface);
  transition: border-color var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out);
}
.deliverable:hover { border-color: var(--c-coral); background: var(--surface-alt); }
.deliverable strong { display: block; font-family: var(--font-display); color: var(--text-strong); font-size: var(--fs-sm); margin-bottom: var(--s-1); }
.deliverable p { font-size: var(--fs-xs); line-height: var(--lh-normal); }

/* --------------------------------------------------------------------------
   Industries
   -------------------------------------------------------------------------- */

.industry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-8);
  border-radius: var(--r-16);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out), color var(--d-slow) var(--ease-out);
}
/* The charcoal fill wipes upward from the bottom edge */
.industry-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-charcoal);
  transform: translateY(101%);
  transition: transform var(--d-slower) var(--ease-expo);
  z-index: 0;
}
.industry-card > * { position: relative; z-index: 1; }
.industry-card:hover { transform: translateY(-5px); box-shadow: var(--e-3); }
.industry-card:hover::before { transform: translateY(0); }
.industry-card:hover :where(.h3, strong) { color: var(--c-white); }
.industry-card:hover p { color: var(--text-on-invert-mut); }
.industry-card:hover .card-icon { background: var(--grad-brand); color: var(--c-white); }
.industry-card p { font-size: var(--fs-sm); }
.industry-card .h3, .industry-card p, .industry-card .card-icon { transition: color var(--d-slow) var(--ease-out), background var(--d-slow) var(--ease-out); }

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

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 1rem + 5vw, 5rem);
  align-items: start;
}
@media (max-width: 960px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }

.form-card {
  padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-24);
  box-shadow: var(--e-2);
}
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); }
@media (max-width: 620px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-grid .field--full { grid-column: 1 / -1; }

.contact-aside { display: grid; gap: var(--s-4); }

.contact-tile {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  background: var(--surface-alt);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.contact-tile:hover { border-color: var(--c-coral); transform: translateX(3px); }
.contact-tile .card-icon { width: 42px; height: 42px; margin: 0; border-radius: var(--r-8); }
.contact-tile .card-icon svg { width: 19px; height: 19px; }
.contact-tile strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--text-strong); margin-bottom: 2px; }
.contact-tile p, .contact-tile a { font-size: var(--fs-sm); line-height: var(--lh-normal); }
.contact-tile a:hover { color: var(--c-coral); }

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

.value-card {
  padding: var(--s-8);
  border-radius: var(--r-16);
  border: 1px solid var(--border-invert);
  background: rgba(255, 255, 255, 0.03);
  transition: background var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.value-card:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-4px); }
.value-card .card-icon { background: rgba(255, 255, 255, 0.08); }
.value-card p { font-size: var(--fs-sm); }

.timeline { display: grid; gap: 0; border-left: 2px solid var(--border); margin-left: var(--s-2); }
.timeline-item { position: relative; padding: 0 0 var(--s-10) var(--s-8); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--s-2) - 1px);
  top: 4px;
  width: 14px; height: 14px;
  border-radius: var(--r-full);
  background: var(--grad-brand);
  box-shadow: 0 0 0 4px var(--surface);
}
.timeline-year {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  color: var(--c-coral);
}
.timeline-item .h4 { margin: var(--s-2) 0; }
.timeline-item p { font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   Utility pages (thank-you / 404)
   -------------------------------------------------------------------------- */

.centered-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + var(--s-16)) var(--gutter) var(--s-16);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.centered-page .hero-orb--a { top: -240px; right: -160px; }
.centered-page-inner { max-width: 58ch; }
.centered-page .lead { margin: var(--s-5) auto var(--s-10); }
.success-mark {
  display: grid;
  place-items: center;
  width: 78px; height: 78px;
  margin: 0 auto var(--s-8);
  border-radius: var(--r-full);
  background: var(--grad-brand);
  color: var(--c-white);
  box-shadow: var(--e-brand);
}
.success-mark svg { width: 34px; height: 34px; }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 12vw, 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--tr-display);
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Narrow-viewport safety
   The hero panel is decorative; below this width its two-up metric row is the
   single widest thing on the page, so it collapses rather than forcing a
   horizontal scrollbar.
   -------------------------------------------------------------------------- */

@media (max-width: 460px) {
  .metric-row { grid-template-columns: minmax(0, 1fr); }
  .hero-panel-title { display: none; }
  .hero-task { flex-wrap: wrap; }
  .hero-task span { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   Connection globe (hero)
   The canvas is square and sized from its container; globe.js reads the box
   and handles devicePixelRatio, so this only has to own the layout.
   -------------------------------------------------------------------------- */

.globe {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.globe-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

/* The orb is dark now and paints its own halo on the canvas, so this layer
   only needs to lift it off the page a touch. */
.globe-glow {
  position: absolute;
  z-index: 0;
  width: 74%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-full);
  background: radial-gradient(circle at 50% 50%,
              rgba(255, 122, 0, 0.10), rgba(255, 90, 60, 0.04) 55%, transparent 72%);
  filter: blur(34px);
  pointer-events: none;
}


@media (max-width: 1000px) {
  /* Below the hero split the globe would dominate the fold, so cap it */
  .globe { max-width: 460px; margin-inline: auto; }
}

/* On phones the globe cannot sit beside the copy, so it bleeds off the right
   edge instead - a partial orb rather than a shrunken illegible one. It is
   pulled out of the grid and parked top-right, above where the headline wraps,
   because charcoal type over a charcoal sphere has no contrast. The hero
   already clips overflow, so the off-canvas portion never widens the page. */
@media (max-width: 900px) {
  .hero .hero-visual[data-reveal] {
    display: block;
    position: absolute;
    transform: none;        /* neutralise the reveal's entry scale */
    top: calc(var(--header-h) - 3.5rem);
    right: -34%;
    width: 74%;
    max-width: none;
    z-index: 0;
    opacity: 0.34;
    pointer-events: none;   /* never intercepts a tap meant for the copy */
    /* Fade the edge that faces the copy. The visible sliver is the LEFT of
       this box (the right half sits off-canvas), so the ramp runs left to
       right: dissolved where it meets the text, strongest at the screen edge. */
    -webkit-mask-image: linear-gradient(to right, transparent 2%, #000 52%);
    mask-image: linear-gradient(to right, transparent 2%, #000 52%);
  }
  .globe { max-width: none; }
  /* Copy sits above it, and stays clear of the visible sliver */
  .hero-copy { position: relative; z-index: 1; }
  .hero .display,
  .hero .lead { max-width: 17ch; }
}

@media (max-width: 560px) {
  .hero .hero-visual[data-reveal] { top: calc(var(--header-h) - 4.5rem); right: -40%; width: 82%; opacity: 0.27; }
  .hero .display { max-width: 13ch; }
  .hero .lead    { max-width: none; }
}

/* --------------------------------------------------------------------------
   Sticky stack cards ("How we work")
   Every card pins at the same place, each one a little lower than the last, so
   the next card slides up and covers it as you scroll. Scrolling back reverses
   it for free - that is just how position: sticky behaves, no JS required.
   main.js only adds the recede-into-the-distance scale on top.
   -------------------------------------------------------------------------- */

.stack-section { background: var(--surface-alt); overflow: clip; }

.stack {
  display: grid;
  gap: var(--s-8);
  /* Room below the last card so it can rest before the next section arrives */
  padding-bottom: var(--s-16);
}

.stack-card {
  position: sticky;
  /* Each card parks 14px lower, leaving a sliver of the one beneath visible */
  top: calc(var(--header-h) + var(--s-6) + var(--i) * 14px);
  z-index: calc(var(--i) + 1);

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);

  min-height: clamp(24rem, 20rem + 14vw, 30rem);
  padding: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  border-radius: var(--r-24);
  border: 1px solid rgba(30, 35, 43, 0.06);
  box-shadow: 0 18px 40px -28px rgba(30, 35, 43, 0.35);

  background: var(--card-bg, var(--c-white));
  transform-origin: 50% 0%;
  will-change: transform;
}

/* --p is written by main.js: 0 while the card is front-most, 1 once fully covered */
.stack-card {
  transform: scale(calc(1 - (var(--p, 0) * 0.055)));
}

@media (max-width: 860px) {
  .stack-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    top: calc(var(--header-h) + var(--s-4) + var(--i) * 10px);
  }
}

/* Reduced motion: no pinning, no scaling - just a plain sequence of cards */
@media (prefers-reduced-motion: reduce) {
  .stack-card { position: static; transform: none; }
}

/* ---- Card content ---------------------------------------------------- */

.stack-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-coral);
}
.stack-eyebrow svg { width: 15px; height: 15px; }
.stack-eyebrow b { font-weight: 700; opacity: 0.45; }

.stack-card .h2 { margin-top: var(--s-5); max-width: 15ch; }
.stack-card p   { margin-top: var(--s-4); max-width: 46ch; font-size: var(--fs-lead); line-height: var(--lh-normal); }

.stack-points { margin-top: var(--s-8); display: grid; gap: var(--s-3); }
.stack-points li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-body);
}
.stack-points svg { width: 16px; height: 16px; color: var(--c-coral); flex: none; }

/* Final card is inverted, so the sequence lands somewhere rather than fading out */
.stack-card--dark { border-color: rgba(255, 255, 255, 0.1); }
.stack-card--dark .h2 { color: var(--c-white); }
.stack-card--dark p,
.stack-card--dark .stack-points li { color: var(--text-on-invert-mut); }
.stack-card--dark .stack-eyebrow { color: var(--c-orange); }

/* ---- Card visual ----------------------------------------------------- */

.stack-visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-16);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 20px 40px -30px rgba(30, 35, 43, 0.5);
  display: grid;
  place-items: center;
  overflow: hidden;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.stack-card--dark .stack-visual {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.stack-visual svg { width: 78%; height: auto; overflow: visible; }

@media (max-width: 860px) {
  .stack-visual { aspect-ratio: 16 / 10; }
}

/* --------------------------------------------------------------------------
   Service index ("What we do")
   Nine identical boxes is the most generic pattern there is, and this section
   sits directly above the stacking cards - more cards would read as noise. So
   the services become a typographic index instead: a quiet numbered list that
   drives one live preview panel. Every row is a real link, so the preview is
   pure enhancement; with no JS and no pointer you still get a clean list.
   -------------------------------------------------------------------------- */

.svc {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.svc-list { border-top: 1px solid var(--border); }

.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-5);
  padding: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem) var(--s-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-strong);
  transition: background var(--d-base) var(--ease-out),
              padding-left var(--d-slow) var(--ease-out);
}

/* The accent bar grows from the left edge instead of the row moving - keeps the
   type on a stable baseline while still registering the hover. */
.svc-row::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  border-radius: var(--r-full);
  background: var(--grad-brand);
  transform: translateY(-50%);
  transition: height var(--d-slow) var(--ease-expo);
}
.svc-row.is-active { background: rgba(255, 122, 0, 0.035); padding-left: var(--s-6); }
.svc-row.is-active::before { height: 62%; }

.svc-num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--d-base) var(--ease-out);
}
.svc-row.is-active .svc-num { color: var(--c-coral); }

.svc-name {
  display: block;              /* inline spans would run the name and the
                                  description together on a single line */
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  line-height: 1.2;
}
.svc-desc {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
}

.svc-go {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--text-muted);
  flex: none;
  transition: all var(--d-base) var(--ease-out);
}
.svc-go svg { width: 15px; height: 15px; }
.svc-row.is-active .svc-go {
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--c-white);
  transform: rotate(-45deg);
}


/* ---- Mobile: each row carries its own art ---------------------------- */

/* Hover is not portable, and hiding the preview left small screens with no
   artwork at all. So every row owns a compact tile: same tint, same mark,
   always visible, and - because nothing resizes - no layout shift while
   scrolling. */
.svc-mini {
  display: none;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  border-radius: var(--r-12);
  background: var(--art-bg, var(--surface-alt));
  color: var(--c-charcoal);
  flex: none;
  transition: transform var(--d-slow) var(--ease-spring),
              box-shadow var(--d-slow) var(--ease-out);
}
.svc-mini svg { width: 22px; height: 22px; opacity: .85; }

/* ---- Preview panel --------------------------------------------------- */

.svc-preview {
  position: sticky;
  top: calc(var(--header-h) + var(--s-8));
  border-radius: var(--r-24);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: var(--s-6);
  box-shadow: var(--e-2);
  overflow: hidden;
}

/* All nine panels are stacked in the same grid cell and cross-faded, so the
   panel never changes height as you move down the list. */
.svc-panels { display: grid; }
.svc-panel {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--d-slow) var(--ease-out),
              transform var(--d-slow) var(--ease-out);
}
.svc-panel.is-active { opacity: 1; pointer-events: auto; transform: none; }

.svc-art {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-16);
  display: grid;
  place-items: center;
  background: var(--art-bg, var(--surface-alt));
  overflow: hidden;
}
.svc-art::after {
  content: '';
  position: absolute;
  inset: auto -20% -45% -20%;
  height: 70%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 122, 0, 0.20), transparent 70%);
  filter: blur(26px);
  pointer-events: none;
}
.svc-art svg { width: 36%; height: auto; color: var(--c-charcoal); opacity: .88; position: relative; z-index: 1; }
.svc-art-ring {
  position: absolute;
  width: 62%; aspect-ratio: 1;
  border-radius: var(--r-full);
  border: 1px solid rgba(30, 35, 43, 0.10);
}
.svc-art-ring:nth-of-type(2) { width: 84%; }

.svc-panel h3 { margin-top: var(--s-6); font-size: var(--fs-h3); }
.svc-panel p  { margin-top: var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-relaxed); }
.svc-panel .chip-row { margin-top: var(--s-5); }
.svc-panel .link-arrow { margin-top: var(--s-6); }

@media (max-width: 940px) {
  /* The preview cannot sit beside the list any more, and repeating it below
     would just duplicate what each row already says - so it goes. */
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc-preview { display: none; }
  /* The tile replaces the index number, which is decorative once there is
     a picture doing the same job. */
  .svc-mini { display: grid; }
  .svc-num  { display: none; }
  .svc-row  { gap: var(--s-4); padding-inline: var(--s-2); }

  /* main.js marks whichever row is crossing the middle of the viewport, so
     the highlight tracks the scroll the way hover tracks the pointer. Only
     transform, colour and shadow change - never size - so the list never
     shifts under the reader's thumb. */
  .svc-row.is-active { background: none; padding-left: var(--s-2); }
  .svc-row.is-active::before { height: 0; }
  .svc-row.is-active .svc-mini {
    transform: scale(1.06);
    box-shadow: 0 10px 22px -12px rgba(255, 90, 60, .65);
  }
  .svc-row.is-active .svc-go {
    background: var(--grad-brand);
    border-color: transparent;
    color: var(--c-white);
    transform: none;
  }
  .svc-row:active { background: rgba(255, 122, 0, 0.05); }
}

/* --------------------------------------------------------------------------
   Comparison ("Built for growing businesses")
   The section's own copy sets up a three-way choice - off-the-shelf vs an
   enterprise build vs us - so the section is that comparison rather than
   another row of cards. Inverted, because the page had no dark moment between
   the hero and the closing CTA.
   -------------------------------------------------------------------------- */

/* The table is wider than a phone. It scrolls inside its own box so the page
   itself never scrolls sideways. */
.cmp-wrap {
  margin-top: var(--s-12);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}
.cmp-wrap::-webkit-scrollbar { height: 6px; }
.cmp-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: var(--r-full); }

.cmp {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  text-align: left;
}

.cmp th, .cmp td {
  padding: var(--s-5) var(--s-5);
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: 0; }

/* Row labels stay put while the options scroll past them */
.cmp tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-invert);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-white);
  white-space: nowrap;
}

.cmp thead th {
  padding-block: var(--s-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-invert-mut);
  white-space: nowrap;
}
.cmp thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--surface-invert); }

.cmp td {
  font-size: var(--fs-sm);
  color: var(--text-on-invert-mut);
}

/* ---- The DigiCov column ---------------------------------------------- */

.cmp .is-ours { background: rgba(255, 255, 255, 0.045); }
.cmp thead .is-ours {
  color: var(--c-white);
  /* Orange at low alpha over charcoal muddies to brown, so the tint stays
     neutral and the brand colour arrives as a crisp cap instead. Painted as a
     background layer rather than border-image, which did not render here. */
  background:
    linear-gradient(115deg, var(--c-orange), var(--c-coral)) top / 100% 3px no-repeat,
    rgba(255, 255, 255, 0.085);
  border-radius: var(--r-12) var(--r-12) 0 0;
}
.cmp tbody .is-ours {
  color: var(--c-white);
  font-weight: 500;
}
.cmp tbody tr:last-child .is-ours { border-radius: 0 0 var(--r-12) var(--r-12); }

.cmp-ours-head {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  letter-spacing: 0;
  text-transform: none;
  font-size: var(--fs-body);
  font-weight: 800;
}
.cmp-ours-head img { height: 22px; width: auto; }

.cmp-tick {
  display: inline-grid;
  place-items: center;
  width: 17px; height: 17px;
  margin-right: var(--s-2);
  border-radius: var(--r-full);
  background: var(--grad-brand);
  color: var(--c-white);
  vertical-align: -3px;
}
.cmp-tick svg { width: 10px; height: 10px; }

.cmp-note {
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  color: var(--text-on-invert-mut);
}

/* --------------------------------------------------------------------------
   Comparison - small screens
   The table used to scroll sideways, which buried the DigiCov column off the
   right edge: the one column that matters was the one nobody saw. Below the
   breakpoint each row becomes its own card instead, so all three answers to a
   question sit stacked and the page never scrolls horizontally.
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
  .cmp-wrap { overflow: visible; }

  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp { min-width: 0; width: 100%; }
  .cmp thead { display: none; }          /* headers move into each cell */

  .cmp tr {
    margin-bottom: var(--s-4);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--r-16);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
  }
  .cmp tbody tr:last-child { margin-bottom: 0; }

  /* The question becomes the card title */
  .cmp tbody th {
    position: static;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--s-4) var(--s-5);
    font-size: var(--fs-body);
    white-space: normal;
  }

  .cmp td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    padding: var(--s-3) var(--s-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: right;
  }
  .cmp tbody tr td:last-child { border-bottom: 0; }

  /* Each cell labels which option it belongs to */
  .cmp td::before {
    content: attr(data-col);
    flex: none;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-on-invert-mut);
    opacity: .75;
  }

  /* Our answer stays the emphasis as a highlighted final row. Neutral tint
     plus an orange edge - orange at low alpha over charcoal goes brown. */
  .cmp tbody .is-ours {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 0;
    box-shadow: inset 3px 0 0 0 var(--c-orange);
  }
  .cmp tbody .is-ours::before { color: var(--c-orange); opacity: 1; }
  .cmp tbody .is-ours { color: var(--c-white); font-weight: 600; }
  .cmp tbody tr:last-child .is-ours { border-radius: 0; }

  /* The tick is a separate flex item, so space-between strands it in the
     middle of the row. The highlight already marks this column - drop it. */
  .cmp-tick { display: none; }
  .cmp-note { margin-top: var(--s-6); }
}

/* --------------------------------------------------------------------------
   Industries bento
   The page already uses a list (services), a table (comparison), stacking
   cards (process) and an accordion (FAQ). A uniform card grid here would be
   the fifth variation on "boxes in a row", so the industries get an
   asymmetric bento instead: one feature tile carrying the argument, smaller
   tiles carrying the breadth.
   -------------------------------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

.bento-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  min-height: 13rem;
  border-radius: var(--r-16);
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-slow) var(--ease-out),
              box-shadow var(--d-slow) var(--ease-out),
              border-color var(--d-slow) var(--ease-out);
}
.bento-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--e-3);
  border-color: transparent;
}

/* The feature tile: two columns wide, two rows tall, and inverted so the eye
   lands on it before the smaller tiles. */
.bento-tile--feature {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: flex-end;
  padding: var(--s-8);
  background: var(--surface-invert);
  border-color: transparent;
  color: var(--text-on-invert-mut);
}
.bento-tile--feature::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -40% -30% auto auto;
  width: 26rem; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 122, 0, 0.28), transparent 62%);
  filter: blur(50px);
}
/* Faint dot field, echoing the globe's land matrix */
.bento-tile--feature::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 78% 18%, #000, transparent 68%);
  mask-image: radial-gradient(ellipse at 78% 18%, #000, transparent 68%);
}
.bento-tile--feature .bento-name { font-size: var(--fs-h2); color: var(--c-white); }
.bento-tile--feature .bento-desc { max-width: 40ch; }

/* One warm tile keeps the grid from reading as a wall of white */
.bento-tile--tint { background: #FFF3E8; border-color: transparent; }

.bento-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: var(--r-12);
  background: var(--accent-wash);
  color: var(--c-coral);
  flex: none;
  margin-bottom: auto;
  transition: background var(--d-slow) var(--ease-out),
              color var(--d-slow) var(--ease-out),
              transform var(--d-slow) var(--ease-spring);
}
.bento-icon svg { width: 22px; height: 22px; }
.bento-tile:hover .bento-icon {
  background: var(--grad-brand);
  color: var(--c-white);
  transform: scale(1.06) rotate(-4deg);
}
.bento-tile--feature .bento-icon {
  width: 54px; height: 54px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-orange);
}
.bento-tile--feature .bento-icon svg { width: 26px; height: 26px; }

.bento-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  line-height: 1.15;
  color: var(--text-strong);
}
.bento-desc { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-body); }
.bento-tile--feature .bento-desc { color: var(--text-on-invert-mut); }

.bento-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.bento-tag {
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-full);
  border: 1px solid var(--border-invert);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-on-invert-mut);
}

/* Arrow only appears on the tile you are pointing at */
.bento-go {
  position: absolute;
  top: var(--s-6); right: var(--s-6);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--text-muted);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: all var(--d-slow) var(--ease-out);
}
.bento-go svg { width: 13px; height: 13px; }
.bento-tile:hover .bento-go {
  opacity: 1;
  transform: none;
  background: var(--grad-brand);
  border-color: transparent;
  color: var(--c-white);
}
.bento-tile--feature .bento-go { border-color: var(--border-invert); color: var(--text-on-invert-mut); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-tile--feature { grid-column: span 2; grid-row: span 1; min-height: 15rem; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-tile--feature { grid-column: span 1; }
  .bento-tile { min-height: 0; }
  /* No hover on touch, so the arrow would never show */
  .bento-go { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Contact aside
   Email is the only channel published, so four boxed tiles would be three
   boxes of nothing. An editorial rail instead: rules rather than cards.
   -------------------------------------------------------------------------- */

.rail { display: grid; gap: var(--s-8); }

.rail-block { padding-bottom: var(--s-8); border-bottom: 1px solid var(--border); }
.rail-block:last-child { padding-bottom: 0; border-bottom: 0; }

.rail-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}

.rail-email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 700;
  letter-spacing: var(--tr-heading);
  color: var(--text-strong);
  background-image: var(--grad-brand);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  padding-bottom: 3px;
  transition: background-size var(--d-slow) var(--ease-expo), color var(--d-base) var(--ease-out);
}
.rail-email:hover { color: var(--c-coral); background-size: 100% 2px; }
.rail-note { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted); }

.rail-figure {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  line-height: 1;
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rail-steps { display: grid; gap: var(--s-5); counter-reset: step; }
.rail-step { display: flex; gap: var(--s-4); }
.rail-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-coral);
  padding-top: 3px;
  flex: none;
}
.rail-step strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  color: var(--text-strong);
}
.rail-step p { margin-top: 2px; font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* --------------------------------------------------------------------------
   Contact - inverted treatment
   The page was white type on white cards on a white page, so nothing had any
   weight. The header goes charcoal and the aside becomes a dark panel, which
   frames the form card instead of letting it dissolve into the background.
   The form itself stays light on purpose: dark form fields are harder to scan
   and fill, and this is the one page where completing the form is the job.
   -------------------------------------------------------------------------- */

.page-head--dark {
  background: var(--surface-invert);
  border-bottom-color: transparent;
}
.page-head--dark::before {
  /* Orange at low alpha over charcoal goes brown, so lift the glow's opacity
     and let it sit as light rather than tint. */
  background: radial-gradient(circle, rgba(255, 122, 0, 0.30), transparent 64%);
}
.page-head--dark .h1 { color: var(--c-white); }
.page-head--dark .lead { color: var(--text-on-invert-mut); }
.page-head--dark .lead strong { color: var(--c-white); }
.page-head--dark .breadcrumb { color: var(--text-on-invert-mut); }
.page-head--dark .breadcrumb a:hover { color: var(--c-orange); }

/* A faint dot field, the same device used on the bento feature tile */
.page-head--dark::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse at 82% 30%, #000, transparent 62%);
  mask-image: radial-gradient(ellipse at 82% 30%, #000, transparent 62%);
  pointer-events: none;
}

/* The aside becomes the dark counterweight to the white form card */
.contact-aside--panel {
  position: sticky;
  top: calc(var(--header-h) + var(--s-8));
  padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  border-radius: var(--r-24);
  background: var(--surface-invert);
  color: var(--text-on-invert-mut);
  overflow: hidden;
  isolation: isolate;
}
.contact-aside--panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto -30% -45% auto;
  width: 20rem; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 122, 0, 0.26), transparent 62%);
  filter: blur(46px);
}

.contact-aside--panel .rail-block { border-bottom-color: rgba(255, 255, 255, 0.10); }
.contact-aside--panel .rail-label { color: rgba(255, 255, 255, 0.55); }
.contact-aside--panel .rail-email { color: var(--c-white); }
.contact-aside--panel .rail-email:hover { color: var(--c-orange); }
.contact-aside--panel .rail-note { color: var(--text-on-invert-mut); }
.contact-aside--panel .rail-step strong { color: var(--c-white); }
.contact-aside--panel .rail-step p { color: var(--text-on-invert-mut); }

@media (max-width: 960px) {
  .contact-aside--panel { position: static; }
}