/* ==========================================================================
   Firenix Technologies — production stylesheet
   Ported 1:1 from approved prototype v8. Deltas from v8 are marked [PROD].
   Design system tokens: build spec §4 (do not change without sign-off).
   ========================================================================== */

:root {
  --bg: #ffffff;
  --bg-2: #fafbfc;
  --panel: #ffffff;
  --panel-2: #f3f5f8;
  --line: rgba(15, 20, 30, 0.1);
  --line-2: rgba(15, 20, 30, 0.16);
  --line-3: rgba(
    15,
    20,
    30,
    0.28
  ); /* [PROD] firmer boundary for ghost buttons */
  --line-input: rgba(
    15,
    20,
    30,
    0.52
  ); /* [PROD] WCAG 1.4.11 — form-field boundaries ≥3:1 */
  --txt: #11151c;
  --txt-dim: #566072;
  --txt-faint: #69707e;
  --accent: #e8451c;
  --accent-2: #ff7a36;
  --accent-ink: #c0360f;
  --accent-2-text: #ee5a1c; /* [PROD] cap for gradient TEXT ends: 3.43:1 on white (large-text AA) */
  --grad-a: #c9370d;
  --grad-b: #d2430e; /* [PROD] primary-button gradient: both stops ≥4.5:1 with white text
                                           (v8 used #d23a12→#f0601f; the light stop measured 3.28:1 — revert here if preferred) */
  --glow: rgba(232, 69, 28, 0.22);
  --cyan: #0bb3a6; /* fills / 3D emissive only */
  --cyan-ink: #0a7f75; /* [PROD] cyan as TEXT: 4.88:1 on white */
  --radius: 18px;
  --maxw: 1240px;
}

/* ---------- base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  background: var(--bg);
  color: var(--txt);
  font-family:
    "Archivo",
    system-ui,
    -apple-system,
    "Segoe UI",
    Arial,
    sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Sora", "Trebuchet MS", system-ui, sans-serif;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
address {
  font-style: normal;
} /* [PROD] semantic <address> in footer */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* [PROD] visible keyboard focus everywhere (v8 relied on browser defaults) */
:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible {
  outline-offset: 3px;
}

.eyebrow {
  font-family: "Sora";
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.btn {
  font-family: "Sora";
  font-weight: 600;
  font-size: 14.5px;
  padding: 13px 24px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: all 0.25s;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #fff;
  text-shadow: 0 1px 1px rgba(85, 22, 0, 0.32);
  box-shadow: 0 8px 28px -8px var(--glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px -8px var(--glow);
}
.btn-ghost {
  background: transparent;
  color: var(--txt);
  border: 1px solid var(--line-3);
}
.btn-ghost:hover {
  border-color: var(--accent-ink);
  color: var(--accent-ink);
} /* [PROD] hover text ≥4.5:1 */

/* ---------- header ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo img {
  height: 38px;
  width: auto;
  display: block;
  border-radius: 6px;
}
.navlinks {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: "Sora";
  font-size: 14px;
  font-weight: 500;
}
.navlinks a {
  color: var(--txt-dim);
  padding: 9px 15px;
  border-radius: 9px;
  transition: all 0.2s;
}
.navlinks a:hover {
  color: var(--txt);
  background: var(--panel-2);
}
.navlinks a[aria-current="page"] {
  color: var(--accent-ink);
  background: rgba(232, 69, 28, 0.08);
} /* [PROD] aria-current drives the active state */
.nav > .btn {
  padding: 11px 20px;
  font-size: 14px;
}
.menu-tg {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--txt);
  font-size: 24px;
  cursor: pointer;
  border-radius: 9px;
}
.mobile-menu {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding: 10px 28px 18px;
  flex-direction: column;
  gap: 4px;
  font-family: "Sora";
  font-size: 15px;
}
.mobile-menu a {
  padding: 11px 8px;
  border-radius: 8px;
  color: var(--txt-dim);
}
.mobile-menu a[aria-current="page"] {
  color: var(--accent-ink);
}
.mobile-menu.open {
  display: flex;
}

/* ---------- section rhythm & inner-page hero ---------- */
section.blk {
  padding: 72px 0;
}
.sec-head {
  max-width: 660px;
  margin-bottom: 44px;
}
.sec-head h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  margin: 16px 0 12px;
}
.sec-head p {
  color: var(--txt-dim);
  font-size: 16.5px;
}

.phero {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 60px 0 52px;
  position: relative;
  overflow: hidden;
}
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px 320px at 82% 0%,
    rgba(232, 69, 28, 0.07),
    transparent 60%
  );
}
.phero .wrap {
  position: relative;
}
.phero h1 {
  font-size: clamp(30px, 4vw, 48px);
  margin: 16px 0 12px;
}
.phero p {
  color: var(--txt-dim);
  font-size: 17px;
  max-width: 600px;
}
.phero .plink {
  color: var(--accent-ink);
  font-weight: 600;
}

/* [PROD] breadcrumbs on inner pages (spec §8g) */
.crumbs {
  font-family: "Sora";
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--txt-faint);
  margin-bottom: 16px;
}
.crumbs a {
  color: var(--txt-dim);
}
.crumbs a:hover {
  color: var(--accent-ink);
}
.crumbs .sep {
  margin: 0 8px;
  color: var(--txt-faint);
}

/* ---------- HOME: intro ---------- */
.intro {
  padding: 74px 0 26px;
  text-align: center;
  position: relative;
}
.intro .eyebrow {
  justify-content: center;
}
.intro h1 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 18px 0 18px;
}
.intro h1 span {
  background: linear-gradient(120deg, var(--accent), var(--accent-2-text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.intro p.lead {
  font-size: 18px;
  color: var(--txt-dim);
  max-width: 560px;
  margin: 0 auto 26px;
}
.intro .hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.cta-note {
  font-family: "Sora";
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--txt-faint);
  margin-top: 14px;
}
.intro .cta-note {
  text-align: center;
}
.scroll-cue {
  margin-top: 26px;
  font-family: "Sora";
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--txt-faint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.scroll-cue i {
  width: 18px;
  height: 28px;
  border: 1.5px solid var(--line-2);
  border-radius: 10px;
  position: relative;
  display: inline-block;
}
.scroll-cue i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 6px;
  background: var(--accent);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: dropdot 1.6s infinite;
}
/* [PATCH B9-RAIL-TOP/hero] v30 scroll-cue: a pill pinned to the stage, hidden once the visitor scrolls (JS adds .off past 2%) */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  z-index: 5;
  font:
    600 11px/1 "Sora",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5b6270;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  padding: 9px 14px;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 0.4s;
}
.scroll-cue::after {
  content: " \2193";
  letter-spacing: 0;
}
.scroll-cue.off {
  opacity: 0;
}
@media (max-width: 880px) {
  .scroll-cue {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue {
    display: none;
  }
}
body.no3d .scroll-cue {
  display: none;
}
@keyframes dropdot {
  0% {
    opacity: 0;
    top: 6px;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    top: 14px;
  }
  100% {
    opacity: 0;
  }
}

/* ---------- HOME: scroll-pinned 3D camera ---------- */
.cam-track {
  position: relative;
  height: 300vh;
} /* [WP-v2] was 440vh — owner: less scroll per stage */
.cam-sticky {
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cam-stage {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    680px 520px at 50% 42%,
    #ffffff,
    #eef1f5 70%,
    #e6eaef 100%
  );
}
#cv3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#cv3d:active {
  cursor: grabbing;
}
.no3d #cv3d,
.no3d .drag-tip {
  display: none;
} /* [PROD] graceful no-WebGL fallback */

.cam-head {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  z-index: 4;
  pointer-events: none;
}
.cam-head .eyebrow {
  justify-content: flex-start;
}
.cam-head h2 {
  font-size: clamp(24px, 3vw, 38px);
  max-width: 480px;
  margin-top: 12px;
}
.cam-head p {
  color: var(--txt-dim);
  font-size: 15.5px;
  max-width: 420px;
  margin-top: 10px;
}

.cam-card {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 330px;
  z-index: 5;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 18px 40px -18px rgba(15, 20, 30, 0.25);
  min-height: 160px;
}
.cam-card .tag {
  font-family: "Sora";
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan-ink);
  font-weight: 600;
}
.cam-card.fire .tag {
  color: var(--accent-ink);
}
.cam-card h3 {
  font-size: 19px;
  margin: 8px 0 8px;
}
.cam-card p {
  color: var(--txt-dim);
  font-size: 13.5px;
  line-height: 1.55;
}
.cam-card ul {
  list-style: none;
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cam-card li {
  font-family: "Sora";
  font-size: 11px;
  color: var(--txt-dim);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 3px 10px;
}

.stages {
  position: absolute;
  left: 28px;
  bottom: 30px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  z-index: 5;
}
.stg {
  font-family: "Sora";
  font-size: 12px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.8);
  color: var(--txt-dim);
  cursor: pointer;
  transition: all 0.22s;
}
.stg:hover {
  color: var(--txt);
  border-color: var(--accent);
}
.stg[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--grad-a), var(--grad-b));
  color: #fff;
  border-color: transparent;
}
.drag-tip {
  position: absolute;
  right: 28px;
  bottom: 30px;
  z-index: 5;
  font-family: "Sora";
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--txt-faint);
}

/* ---------- HOME: trust band + client marquee ---------- */
.trust-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  padding: 30px 0;
}
.trust-row {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  list-style: none;
}
.ts {
  text-align: center;
}
.ts b {
  font-family: "Sora";
  font-size: 34px;
  font-weight: 800;
  display: block;
  letter-spacing: -0.03em;
  background: linear-gradient(120deg, var(--accent), var(--accent-2-text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ts span {
  font-size: 12px;
  color: var(--txt-faint);
  letter-spacing: 0.05em;
}

.clients {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 26px 0;
}
.lbl {
  text-align: center;
  font-family: "Sora";
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--txt-faint);
  margin: 0 0 18px;
}
.mq {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}
.mq-track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: mq 28s linear infinite;
}
.mq:hover .mq-track,
.mq:focus-within .mq-track {
  animation-play-state: paused;
} /* [PROD] pausable */
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}
.mq-track span {
  font-family: "Sora";
  font-weight: 700;
  font-size: 20px;
  color: var(--txt-faint);
  white-space: nowrap;
}

/* ---------- pillars + inline-expand cards (shared accordion pattern) ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.pillar {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 4px 18px -8px rgba(15, 20, 30, 0.1);
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.pillar:hover {
  border-color: var(--accent);
}
.pillar.flag {
  border-color: rgba(232, 69, 28, 0.35);
  background: linear-gradient(165deg, #fff, #fff7f4);
}
.pillar.flag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.pillar .pic {
  font-family: "Sora";
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--accent-ink);
  text-transform: uppercase;
  font-weight: 600;
}
.pillar-h {
  display: block;
  font-family: "Sora";
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.02em;
  margin: 14px 0 10px;
  color: var(--txt);
}
.pillar-p {
  display: block;
  color: var(--txt-dim);
  font-size: 14.5px;
}
.pillar-head {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  padding: 34px 30px;
  display: block;
  position: relative;
}
.pillar.flag .pillar-head {
  padding-top: 36px;
}
.pillar-head .pex-tog {
  position: absolute;
  top: 32px;
  right: 26px;
  margin-top: 0;
}
.pillar.open {
  border-color: var(--accent);
  box-shadow: 0 16px 40px -18px var(--glow);
}
.pillar.open .pex-body {
  grid-template-rows: 1fr;
}
.pillar.open .pex-tog {
  transform: rotate(45deg);
}
.pillar .in-pad {
  margin: 0 30px 30px;
}

.pex-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: start;
}
.pex {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 4px 18px -8px rgba(15, 20, 30, 0.1);
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.pex.open {
  border-color: var(--accent);
  box-shadow: 0 16px 40px -18px var(--glow);
}
.pex-htitle {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  line-height: inherit;
}
.pex-head {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 28px 26px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-family: inherit;
}
.pex-head .ic {
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(232, 69, 28, 0.08);
  border: 1px solid rgba(232, 69, 28, 0.22);
  color: var(--accent-ink);
}
.pex-head .ic svg {
  width: 23px;
  height: 23px;
}
.pex-tt {
  flex: 1;
}
.pex-name {
  display: block;
  font-family: "Sora";
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--txt);
  margin-bottom: 7px;
}
.pex-s {
  display: block;
  color: var(--txt-dim);
  font-size: 14px;
  line-height: 1.5;
  font-family: "Archivo";
  font-weight: 400;
  letter-spacing: 0;
}
.pex-tog {
  flex: none;
  font-size: 26px;
  line-height: 1;
  color: var(--accent-ink);
  transition: transform 0.28s;
  margin-top: 3px;
}
.pex.open .pex-tog {
  transform: rotate(45deg);
}
.pex-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.pex-body > .in {
  overflow: hidden;
}
.pex.open .pex-body {
  grid-template-rows: 1fr;
}
.in-pad {
  margin: 0 26px 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.in-pad > p {
  color: var(--txt-dim);
  font-size: 14px;
  margin-bottom: 14px;
}
.pex-opts {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.pex-opts li {
  font-size: 13.5px;
  color: var(--txt-dim);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}
.pex-opts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.pex-opts b {
  color: var(--txt);
  font-family: "Sora";
  font-weight: 600;
}
.pex-brands {
  font-size: 12.5px;
  color: var(--txt-faint);
  margin-bottom: 16px;
}
.pex-brands b {
  color: var(--txt-dim);
  font-family: "Sora";
  font-weight: 600;
}
.pex-cta {
  font-family: "Sora";
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-ink);
}
.others-note {
  margin-top: 24px;
  text-align: center;
  color: var(--txt-faint);
  font-size: 14px;
}
.others-note a {
  color: var(--accent-ink);
  font-family: "Sora";
  font-weight: 600;
}

/* ---------- CTA band ---------- */
.ctaband {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    700px 360px at 50% 120%,
    rgba(232, 69, 28, 0.1),
    transparent 60%
  );
}
.ctaband .wrap {
  position: relative;
  text-align: center;
  padding: 76px 28px;
}
.ctaband h2 {
  font-size: clamp(28px, 4vw, 46px);
  margin-bottom: 14px;
}
.ctaband p {
  color: var(--txt-dim);
  font-size: 17px;
  max-width: 540px;
  margin: 0 auto 30px;
}
.ctaband .btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- AI page: capability grid ---------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cap {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 26px 22px;
  box-shadow: 0 4px 18px -8px rgba(15, 20, 30, 0.1);
}
.cap .ci {
  font-size: 24px;
  margin-bottom: 12px;
}
.cap h2 {
  font-size: 15.5px;
  margin-bottom: 7px;
}
.cap p {
  color: var(--txt-dim);
  font-size: 13px;
}
.cap.custom {
  grid-column: span 2;
  background: linear-gradient(165deg, #fff, #fff7f4);
  border-color: rgba(232, 69, 28, 0.35);
}
.cap.custom h2 {
  font-size: 18px;
}
.cap.custom .pic {
  font-family: "Sora";
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--accent-ink);
  text-transform: uppercase;
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.cap.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cap.slot {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-style: dashed;
}
.cap.slot p b {
  color: var(--txt-faint);
  font-family: "Sora";
}

/* ---------- [PROD-IMG] card illustrations (image pass, 2026-07-06) ----------
   Full-bleed media on capability + industry cards. Pending slots use the same
   honest-placeholder language as the case-study slot (dashed, labelled). */
.cap-img {
  display: block;
  width: calc(100% + 44px);
  max-width: calc(100% + 44px);
  margin: -26px -22px 16px;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 13px 13px 0 0;
  border-bottom: 1px solid var(--line);
}
.cap-img.wide {
  aspect-ratio: 16/9;
}
.ind-img {
  display: block;
  width: calc(100% + 44px);
  max-width: calc(100% + 44px);
  margin: -30px -22px 16px;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 13px 13px 0 0;
  border-bottom: 1px solid var(--line);
}
.cap-img.pend,
.ind-img.pend {
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border-bottom: 1px dashed var(--line-2);
}
.cap-img.pend span,
.ind-img.pend span {
  font-family: "Sora";
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-faint);
  border: 1px dashed var(--line-2);
  border-radius: 8px;
  padding: 8px 14px;
}
.cap.custom .cap-img {
  margin-bottom: 18px;
}

/* [PROD-IMG] static camera fallback (no-WebGL / reduced-motion / no-JS) — injected by camera.js */
.cam-fallback {
  position: absolute;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  width: min(880px, 86%);
  max-height: 68%;
  object-fit: contain;
}
body.no3d #cv3d {
  display: none;
}

/* ---------- partner band (Products) ---------- */
.partner-band {
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  padding: 38px 0;
}
.partner-band .lbl {
  margin-bottom: 26px;
}
.partner-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 46px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  max-width: 1100px;
  margin: 0 auto;
  list-style: none;
}
.partner-wall img {
  width: auto;
  filter: grayscale(1);
  opacity: 0.62;
  transition: all 0.25s;
}
.partner-wall img:hover {
  filter: none;
  opacity: 1;
}
.partner-wall .ptxt {
  font-family: "Sora";
  font-weight: 700;
  font-size: 16px;
  color: var(--txt-faint);
  letter-spacing: 0.04em;
}
.lh26 {
  height: 26px;
}
.lh30 {
  height: 30px;
}
.lh40 {
  height: 40px;
}
.lh44 {
  height: 44px;
} /* [PROD] fixed display heights, was inline styles */

/* ---------- industries grid ---------- */
.ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
}
.ind {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 22px;
  background: var(--panel);
  text-align: center;
  transition: all 0.3s;
  box-shadow: 0 4px 18px -8px rgba(15, 20, 30, 0.1);
}
.ind:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.ind h2 {
  /* [WP] selector corrected - src bundle had ".ind .ind h2" (dead rule); approved v8 styles this title (v8: .ind h4) */
  font-size: 15px;
  font-family: "Sora";
  margin-bottom: 6px;
}
.ind p {
  font-size: 12.5px;
  color: var(--txt-faint);
}

/* ---------- contact ---------- */
.intents {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}
.intent {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 26px 24px;
  cursor: pointer;
  transition: all 0.25s;
  text-align: left;
  font-family: inherit;
  box-shadow: 0 4px 18px -8px rgba(15, 20, 30, 0.1);
}
.intent:hover {
  border-color: var(--accent);
}
.intent[aria-pressed="true"] {
  border-color: var(--accent);
  background: #fff7f4;
  box-shadow: 0 8px 24px -10px var(--glow);
}
.intent .ii {
  font-size: 24px;
  margin-bottom: 10px;
}
.intent h2 {
  font-size: 17px;
  margin-bottom: 6px;
}
.intent p {
  color: var(--txt-dim);
  font-size: 13px;
}
.form-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 38px;
  max-width: 680px;
  box-shadow: 0 4px 18px -8px rgba(15, 20, 30, 0.1);
}
.form-panel h2 {
  font-size: 21px;
  margin-bottom: 6px;
}
.form-panel .fsub {
  color: var(--txt-dim);
  font-size: 14px;
  margin-bottom: 26px;
}
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fld.full {
  grid-column: span 2;
}
.fld label {
  font-family: "Sora";
  font-size: 12.5px;
  font-weight: 600;
  color: var(--txt-dim);
}
.fld input,
.fld select,
.fld textarea {
  font-family: "Archivo";
  font-size: 14.5px;
  padding: 12px 14px;
  border: 1px solid var(--line-input);
  border-radius: 10px;
  background: var(--bg);
  color: var(--txt);
  outline: none;
  transition: border-color 0.2s;
}
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  border-color: var(--accent-ink);
}
.fld input::placeholder,
.fld textarea::placeholder {
  color: var(--txt-faint);
}
.fld textarea {
  min-height: 110px;
  resize: vertical;
}
.fld.err input,
.fld.err select,
.fld.err textarea {
  border-color: var(--accent-ink);
}
.ferr {
  font-size: 12px;
  color: var(--accent-ink);
  display: none;
}
.fld.err .ferr {
  display: block;
}
.form-status {
  margin-top: 16px;
  font-size: 14px;
  font-family: "Sora";
  font-weight: 600;
}
.form-status.ok {
  color: var(--cyan-ink);
}
.form-status.bad {
  color: var(--accent-ink);
}
.form-note {
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--txt-faint);
}
.form-note a {
  color: var(--accent-ink);
  font-weight: 600;
}
.alt-contact {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 40px;
  color: var(--txt-dim);
  font-size: 14.5px;
}
.alt-contact a {
  color: var(--accent-ink);
  font-family: "Sora";
  font-weight: 600;
}
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
} /* [PROD] honeypot */

/* ---------- footer ---------- */
footer {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 56px 0 30px;
  content-visibility: auto;
  contain-intrinsic-size: auto 640px;
}
.f-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 44px;
  margin-bottom: 44px;
}
footer .f-h {
  font-family: "Sora";
  font-size: 12.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--txt-faint);
  margin-bottom: 18px;
  font-weight: 700;
}
footer .fl {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
footer .fl a {
  color: var(--txt-dim);
  font-size: 14px;
  transition: color 0.2s;
}
footer .fl a:hover {
  color: var(--accent-ink);
}
footer .about p {
  color: var(--txt-dim);
  font-size: 14px;
  max-width: 330px;
  margin: 16px 0 18px;
}
footer .addr {
  color: var(--txt-faint);
  font-size: 13px;
  line-height: 1.8;
}
footer .addr b {
  color: var(--txt-dim);
  font-weight: 600;
}
.f-bot {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--txt-faint);
  font-size: 12.5px;
}

/* ---------- skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--accent-ink);
  color: #fff;
  padding: 11px 18px;
  border-radius: 0 0 10px 0;
  font-family: "Sora";
  font-size: 13px;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}
#maincontent {
  outline: none;
}

/* ---------- 404 ---------- */
.nf {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 28px;
}
.nf h1 {
  font-size: clamp(34px, 5vw, 56px);
  margin: 14px 0;
}
.nf p {
  color: var(--txt-dim);
  max-width: 460px;
  margin: 0 auto 26px;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .pillars,
  .pex-grid,
  .intents {
    grid-template-columns: 1fr;
  }
  .cap-grid,
  .ind-grid {
    grid-template-columns: 1fr 1fr;
  }
  .cap.custom {
    grid-column: span 2;
  }
  .f-grid {
    grid-template-columns: 1fr 1fr;
  }
  .navlinks,
  .nav > .btn {
    display: none;
  }
  .menu-tg {
    display: inline-flex;
  }
  .frow {
    grid-template-columns: 1fr;
  }
  .fld.full {
    grid-column: span 1;
  }
  .trust-row {
    gap: 30px;
  }
  /* simplify the 3D hero on mobile: no scroll-pin (intentional — see spec §6) */
  .cam-track {
    height: auto;
  }
  .cam-sticky {
    position: static;
    height: auto;
    display: block;
  }
  .cam-stage {
    height: 60vh;
  }
  .cam-card {
    position: static;
    width: auto;
    transform: none;
    margin: 16px 28px 0;
    min-height: 0;
  }
  .cam-head {
    position: static;
    padding: 24px 28px 0;
  }
  .cam-head .eyebrow,
  .cam-head h2,
  .cam-head p {
    max-width: none;
  }
  .stages {
    position: static;
    margin: 14px 28px 0;
  }
  .drag-tip {
    display: none;
  }
}
@media (max-width: 560px) {
  footer {
    padding: 48px 0 28px;
  }
  .f-grid {
    gap: 34px;
  }
  footer .fl {
    gap: 16px;
  }
  footer .fl a {
    padding: 4px 0;
    line-height: 1.4;
  }
  .f-bot {
    gap: 10px;
  }
}

/* [PROD] reduced motion: kill all animation/transitions AND un-pin the 3D hero
   (spec §6: "prefers-reduced-motion kills it") */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .cam-track {
    height: auto;
  }
  .cam-sticky {
    position: static;
    height: auto;
    display: block;
  }
  .cam-stage {
    height: 60vh;
    min-height: 420px;
  }
  .cam-card {
    position: static;
    width: auto;
    transform: none;
    margin: 16px 28px 0;
    min-height: 0;
  }
  .cam-head {
    position: static;
    padding: 24px 28px 0;
  }
  .stages {
    position: static;
    margin: 14px 28px 0;
  }
  .drag-tip {
    display: none;
  }
  .mq {
    -webkit-mask-image: none;
    mask-image: none;
    overflow-x: auto;
  }
}

/* ==========================================================================
   [WP] WordPress-build additions - everything ABOVE is the audited static
   main.css, unchanged (one selector correction, marked inline). This block
   only styles things the static build did not have: hub->child "Full
   details" links and the child-page (product / AI / industry / brand /
   location) templates. All values derive from the spec 4 tokens.
   ========================================================================== */
.pex-more {
  font-family: "Sora";
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-dim);
  margin-left: 20px;
  transition: color 0.2s;
}
.pex-more:hover {
  color: var(--accent-ink);
}
.cap.linked {
  transition: border-color 0.25s;
}
.cap.linked:hover {
  border-color: var(--accent);
}
.cap-link {
  color: inherit;
}
.ind h2 a {
  color: inherit;
}

/* ---------- [WP] child-page prose ---------- */
.page-copy {
  /* max-width:760px; */
  padding: 40px 0 40px;
}
.page-copy h2 {
  font-size: 24px;
  margin: 36px 0 12px;
}
.page-copy h2:first-child {
  margin-top: 0;
}
.page-copy p {
  color: var(--txt-dim);
  font-size: 15.5px;
  margin-bottom: 16px;
}
.page-copy p b,
.page-copy strong {
  color: var(--txt);
  font-family: "Sora";
  font-weight: 600;
}
.page-copy ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 18px;
}
.page-copy ul li {
  font-size: 14.5px;
  color: var(--txt-dim);
  padding-left: 18px;
  position: relative;
  line-height: 1.55;
}
.page-copy ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.page-copy ul li b {
  color: var(--txt);
  font-family: "Sora";
  font-weight: 600;
}
.page-copy a {
  color: var(--accent-ink);
  font-weight: 600;
}

/* ---------- [WP] child-page FAQ (reuses the audited accordion + main.js binding) ---------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}
.faq-list .pex-head {
  padding: 22px 24px;
}
.faq-list .pex-name {
  font-size: 16px;
  margin-bottom: 0;
}
.faq-list .in-pad {
  margin: 0 24px 22px;
  padding-top: 16px;
}
.faq-list .in-pad p {
  margin-bottom: 0;
  font-size: 14.5px;
}

/* [WP-v2] Logged-in view: keep the sticky header + 3D stage clear of the
   WordPress admin bar (32px desktop / 46px mobile). Visitors are unaffected. */
body.admin-bar header {
  top: 32px;
}
body.admin-bar .cam-sticky {
  top: 104px;
  height: calc(100vh - 104px);
}
@media (max-width: 782px) {
  body.admin-bar header {
    top: 46px;
  }
}

/* ==========================================================================
   [PATCH R1+R2] Audit remediation batch 1-2 — additions only; nothing above
   this line was changed. Deleting this whole block reverts every visual
   patch at once.
   ------------------------------------------------------------------------ */
/* F-H2: AI-page case-study slot stays hidden until the real write-up exists
   (the card markup is untouched — remove this one rule to bring it back). */
.cap.slot {
  display: none;
}
/* F-M2: the 3D model reads as draggable on desktop. */
#cv3d {
  cursor: grab;
}
#cv3d:active {
  cursor: grabbing;
}
/* F-H3 / F-H1: mobile-menu action rows (quote / call / WhatsApp). */
.mobile-menu .mm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.mobile-menu .mm-actions .btn {
  justify-content: center;
  text-align: center;
}
/* G-M3: no-JS notice above the contact forms. */
.noscript-note {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 0 0 26px;
  font-size: 14.5px;
  color: var(--txt-dim);
}
.noscript-note a {
  color: var(--accent-ink);
}

/* ==========================================================================
   [PATCH R4] Batch 4 additions — appended below the R1+R2 block; delete this
   block to revert batch-4 visuals in one move.
   ------------------------------------------------------------------------ */
/* G-H2: consent line under each submit button */
.fnote-privacy {
  font-size: 12.5px;
  color: var(--txt-faint);
  margin: 12px 0 0;
}
.fnote-privacy a {
  color: var(--txt-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* G-H2: footer bottom-bar privacy link */
.f-bot a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =====================================================================
   [PATCH B6] Batch-6 tail — delete this whole block to revert B6 styling.
   B6-CAM static hero (mirrors audited PRM layout) · B6-WALL colored tiles ·
   B6-RAIL contact rail · B6-ICO intent icon sizing
   ===================================================================== */
body.no3d .cam-track {
  height: auto;
}
body.no3d .cam-sticky {
  position: static;
  height: auto;
  display: block;
}
body.no3d .cam-stage {
  height: 60vh;
  min-height: 420px;
}
body.no3d .cam-card {
  position: static;
  width: auto;
  transform: none;
  margin: 16px 28px 0;
  min-height: 0;
}
body.no3d .cam-head {
  position: static;
  padding: 24px 28px 0;
}
body.no3d .cam-head .eyebrow,
body.no3d .cam-head h2,
body.no3d .cam-head p {
  max-width: none;
}
body.no3d .stages {
  position: static;
  margin: 14px 28px 0;
}
body.no3d .drag-tip {
  display: none;
}

/* =====================================================================
   [PATCH B7] Batch-7 tail - delete this whole block to revert B7 styling.
   B7-HERO: static hero rebuilt as a stacked flow (headline / render / card /
            buttons) so no element can ever overlap or clip the image again.
   B7-SPLIT: stage-frame crossfade layers for the restored splitting.
   ===================================================================== */
body.no3d .cam-stage {
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 6px 0 2px;
}
body.no3d .cam-head {
  order: 1;
}
body.no3d .cam-frames {
  order: 2;
  position: relative;
  width: min(880px, 92%);
  margin: 8px auto 0;
}
body.no3d .cam-frames::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
body.no3d .cam-frames img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  max-height: none;
  object-fit: contain;
  transition: opacity 0.5s ease;
}
body.no3d .cam-card {
  order: 3;
  width: min(720px, calc(100% - 56px));
  margin: 14px auto 0;
  min-height: 150px;
}
body.no3d .stages {
  order: 4;
  position: static;
  justify-content: center;
  margin: 16px 28px 8px;
}
@media (prefers-reduced-motion: reduce) {
  body.no3d .cam-frames img {
    transition: none;
  }
}

.partner-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 184px));
  gap: 18px;
  justify-content: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
.partner-wall .ptile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line, #e7e9ee);
  border-radius: 14px;
  min-height: 96px;
  padding: 14px 18px;
  box-shadow: 0 1px 2px rgba(15, 20, 30, 0.04);
  transition:
    box-shadow 0.25s,
    transform 0.25s;
}
.partner-wall .ptile:hover {
  box-shadow: 0 10px 24px rgba(15, 20, 30, 0.1);
  transform: translateY(-2px);
}
.partner-wall .ptile img {
  filter: none;
  opacity: 1;
  width: auto;
}
.lh24 {
  height: 24px;
}
.lh34 {
  height: 34px;
}
.lh36 {
  height: 36px;
}

.cwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 26px;
  align-items: start;
}
.crail {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 96px;
}
.cnum-card,
.coff {
  background: #fff;
  border: 1px solid var(--line, #e7e9ee);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(15, 20, 30, 0.04);
}
.crail-k {
  font:
    600 11px/1 "Sora",
    sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 10px;
}
.cnum {
  display: block;
  text-decoration: none;
  padding: 10px 0;
  border-top: 1px solid var(--line, #eef0f4);
}
.cnum:first-of-type {
  border-top: 0;
  padding-top: 2px;
}
.cnum-k {
  display: block;
  font:
    600 10.5px/1 "Sora",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a919c;
  margin-bottom: 4px;
}
.cnum-n {
  display: block;
  font:
    600 21px/1.25 "Sora",
    sans-serif;
  color: var(--accent-ink, #c0360f);
}
.cnum:hover .cnum-n {
  text-decoration: underline;
}
.cnum-wa .cnum-n {
  color: #0aa396;
}
.cmail {
  margin: 10px 0 0;
  font-size: 13.5px;
  color: #4b5563;
}
.coff-h {
  font:
    600 14px/1.3 "Sora",
    sans-serif;
  margin: 0 0 6px;
}
.coff-a {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4b5563;
}
.cmap {
  display: block;
  border-radius: 12px;
  width: 100%;
}
.cdir {
  display: inline-block;
  margin-top: 10px;
  font:
    600 13px "Sora",
    sans-serif;
  color: var(--accent-ink, #c0360f);
  text-decoration: none;
}
.cdir:hover {
  text-decoration: underline;
}
.intents .ii {
  display: flex;
  align-items: center;
  justify-content: center;
}
.intents .ii svg {
  width: 26px;
  height: 26px;
}
@media (max-width: 980px) {
  .cwrap {
    grid-template-columns: 1fr;
  }
  .crail {
    position: static;
    display: contents;
  }
  .crail .cnum-card {
    order: -1;
    margin-bottom: 4px;
  }
  .crail .coff {
    order: 5;
  }
}

/* ============================================================
   [PATCH B8] Hero 3D v3 + contact rail redesign
   ============================================================ */
/* the frames box doubles as the 3D stage; the studio gradient matches the
   renders' backdrop so the photo->3D fade is seamless */
body.no3d .cam-frames {
  background: linear-gradient(180deg, #f6f7f8, #eaecef);
}
.cam-frames #cv3d {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  touch-action: pan-y;
  cursor: grab;
}
.cam-frames #cv3d.on {
  display: block;
  opacity: 1;
}
.cam-frames #cv3d:active {
  cursor: grabbing;
}
body.has3d .cam-frames img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.cam-frames .drag-tip {
  display: none;
}
body.has3d .cam-frames .drag-tip {
  display: block;
  position: absolute;
  right: 12px;
  bottom: 10px;
  left: auto;
  top: auto;
  z-index: 3;
  margin: 0;
  font:
    600 11px/1 "Sora",
    sans-serif;
  letter-spacing: 0.06em;
  color: #5b6270;
  background: rgba(255, 255, 255, 0.78);
  padding: 7px 10px;
  border-radius: 999px;
  pointer-events: none;
}
/* contact rail: rows that read as actions (icon + label + value + arrow) */
.cnum-card {
  padding: 18px 16px;
}
/* [PATCH B9-RAIL-TOP] numbers card relocated above the intents, full width */
.rail-top {
  margin: 0 0 34px;
}
.rail-top .cnum-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.rail-top .crail-k {
  grid-column: 1/-1;
  margin: 0 2px 2px;
}
.rail-top .cnum {
  margin: 0;
}
@media (max-width: 980px) {
  .rail-top .cnum-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .rail-top .cnum-card {
    grid-template-columns: 1fr;
  }
}
.cnum-card .crail-k {
  margin: 0 2px 12px;
}
.cnum-card .cnum {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  border: 1px solid rgba(15, 20, 30, 0.12);
  border-radius: 12px;
  text-decoration: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.cnum-card .cnum:hover {
  border-color: rgba(192, 54, 15, 0.45);
  box-shadow: 0 6px 18px rgba(15, 20, 30, 0.08);
  transform: translateY(-1px);
}
.cnum-card .cnum:focus-visible {
  outline: 2px solid #c0360f;
  outline-offset: 2px;
}
.cnum-card .cni {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fdf1ec;
  color: #c0360f;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cnum-card .cni svg {
  width: 19px;
  height: 19px;
}
.cnum-card .cnt {
  display: block;
  min-width: 0;
}
.cnum-card .cnum-k {
  display: block;
  font:
    600 10px/1 "Sora",
    sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #69707e;
  margin: 0 0 3px;
}
.cnum-card .cnum-n {
  display: block;
  font:
    700 15px/1.25 "Sora",
    sans-serif;
  color: #c0360f;
  overflow-wrap: anywhere;
}
.cnum-card .cna {
  color: #9aa1ad;
  font-size: 15px;
  transition:
    transform 0.18s ease,
    color 0.18s ease;
}
.cnum-card .cnum:hover .cna {
  transform: translateX(3px);
  color: #c0360f;
}
.cnum-card .cnum-wa .cni {
  background: #e7f8f5;
  color: #0aa396;
}
.cnum-card .cnum-wa .cnum-n {
  color: #0aa396;
}
@media (prefers-reduced-motion: reduce) {
  .cam-frames #cv3d,
  body.has3d .cam-frames img,
  .cnum-card .cnum,
  .cnum-card .cna {
    transition: none;
  }
}

/* ============================================================================
   [B10-HERO] The approved v31 hero, ported from firenix-homepage-preview-v31.php.
   Everything below is verbatim from that preview except the marked B10 line.
   ============================================================================ */
/* ===== [B9v5] split-lane stage: one narrative column left, product right =====
   Scoped to the pinned desktop stage. The stacked mobile layout and the
   no-3D fallback keep the original head + card exactly as before. */
@media (min-width: 981px) {
  /* [V31] was 881px - it overlapped the <=980px stacked block */
  body:not(.no3d) .cam-head {
    display: none;
  } /* the card is now the single narrative - no duplicate copy */
  body:not(.no3d) .cam-card {
    left: clamp(28px, 6vw, 120px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: min(400px, 32vw);
    max-width: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    backdrop-filter: none;
  }
  body:not(.no3d) .cam-card h3 {
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.06;
    letter-spacing: -0.01em;
    margin: 10px 0 14px;
  }
  body:not(.no3d) .cam-card p {
    font-size: 16.5px;
    line-height: 1.6;
    max-width: 40ch;
  }
  body:not(.no3d) .stages {
    left: clamp(28px, 6vw, 120px);
    right: auto;
    bottom: clamp(26px, 5vh, 52px);
  }
  body:not(.no3d) .cam-frames {
    background: radial-gradient(
      115% 85% at 66% 42%,
      #ffffff 0%,
      #f0f2f4 50%,
      #e1e4e8 100%
    );
  }
  body:not(.no3d) .scroll-cue {
    left: auto;
    right: 31.5%;
    transform: translateX(50%);
  }
  body:not(.no3d) .drag-tip {
    right: 26px;
    bottom: 26px;
  }
}

/* [B9v6] deeper studio vignette - more contrast under the white body */
@media (min-width: 881px) {
  body:not(.no3d) .cam-frames {
    background: radial-gradient(
      115% 85% at 66% 42%,
      #fdfdfd 0%,
      #edeff2 52%,
      #dcdfe3 100%
    );
  }
}
/* [B14-HERO] Since B14 the first paint carries a 1x1 transparent PNG
   (camera-stage-0.webp was DELETED - it depicted a separated camera), so the
   placement + mask below are INERT on the WebGL path: there is nothing to show or
   feather. They are kept only because the no-WebGL photo sequence reuses
   .cam-fallback for stages 1-3 + exploded, where body.no3d suppresses these
   :not(.no3d) rules anyway. Historical alignment note follows.
   [B10-HERO] Align the (former) first-paint hero photo with the 3D product lane.
   #camFrameA was camera-stage-0.webp. The theme centred it at left:50%, but with the split-lane layout the
   story card now sits at 6%-34% and the 3D camera at 69% - so the grey photo
   panel landed UNDER the text and the camera jumped sideways as the canvas
   faded in. Measured off the asset: the camera occupies 18%-82% of the frame
   (64% wide, centred at 50%), so a 78%-wide placement centred at 69% puts the
   photographed camera at 69% of the stage and 50% of its width - the same spot
   and the same size as the 3D model, so the crossfade dissolves instead of
   sliding.
   The mask then feathers the panel edges. The photo carries its own mid-grey
   studio backdrop (~rgb 200) against a much lighter stage (220-253), which
   would otherwise show as a hard rectangle. The horizontal stops are exact: the
   panel is fully transparent across the story card (which ends at 5.1% of the
   panel) and fully opaque before the camera begins (17.9% of the panel). If a
   browser lacks mask-composite the layers simply union, which is the old
   unmasked look - no worse than before, never broken. */
@media (min-width: 981px) {
  body:not(.no3d) .cam-fallback {
    left: 69%;
    top: 45%;
    width: 78%;
    max-width: none;
    max-height: none;
    -webkit-mask-image:
      linear-gradient(
        to right,
        transparent 0,
        transparent 7%,
        #000 18%,
        #000 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0,
        #000 13%,
        #000 87%,
        transparent 100%
      );
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(
        to right,
        transparent 0,
        transparent 7%,
        #000 18%,
        #000 100%
      ),
      linear-gradient(
        to bottom,
        transparent 0,
        #000 13%,
        #000 87%,
        transparent 100%
      );
    mask-composite: intersect;
  }
}

/* =========================================================================
   [B16-SUPPLY] Supply & Procurement section.
   APPEND-ONLY. Every selector below is new and used only by
   page-templates/template-supply.php. No existing rule is modified, so no
   existing page can change appearance. Breakpoint matches the sitewide 980px.
   ========================================================================= */

/* Two-column hero: copy left, illustration right. */
.hero-2col {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}
.hero-2col h1 {
  max-width: none;
}
.hero-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
}

/* Buttons sitting under the hero copy. */
.cta-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* Text-pill brand band. The partner wall uses logos; these lines have no
   logo assets, so they are set as type instead. Wrapper reuses .partner-band. */
.brow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 28px;
}
.btag {
  font-family: "Sora";
  font-weight: 600;
  font-size: 13px;
  color: var(--txt-dim);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 15px;
}

/* Inline aside used for the "also supplied" and dealer notes. */
.note {
  border: 1px dashed var(--line-2);
  background: var(--panel-2);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 18px 0;
  font-size: 14px;
  color: var(--txt-dim);
  max-width: 760px;
}
.note b {
  color: var(--txt);
  font-family: "Sora";
  font-weight: 600;
}

@media (max-width: 980px) {
  .hero-2col {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hero-img {
    order: -1;
    max-width: 460px;
  }
}

.elearning-blk {
  background: linear-gradient(
    180deg,
    rgba(232, 69, 28, 0.03),
    transparent 140px
  );
}
.elearning-copy {
  display: grid;
  gap: 20px; /* max-width:880px; */
}
.elearning-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #fff8f6 100%);
  box-shadow: 0 14px 34px rgba(18, 24, 38, 0.06);
}
.elearning-badge {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-family: "Sora";
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 14px 24px rgba(232, 69, 28, 0.18);
}
.elearning-content h2 {
  margin: 0 0 12px;
  font-size: 24px;
}
.elearning-content p {
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .elearning-item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 18px;
    border-radius: 18px;
  }
  .elearning-badge {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    font-size: 22px;
  }
  .elearning-content h2 {
    font-size: 21px;
  }
}

/* ---------- turnkey page theme ---------- */
.content-section {
  position: relative;
  padding: 84px 0 96px;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(232, 69, 28, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 248, 250, 1));
}
.content-section::before {
  content: "";
  position: absolute;
  inset: 24px 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 69, 28, 0.18), transparent);
}
.content-section .wrap {
  position: relative;
}
.content-section .wrap > p {
  max-width: 980px;
}
.content-section .wrap > p:first-child {
  color: var(--accent-ink);
  font-family: "Sora";
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.content-section .wrap > p:nth-child(2) {
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.9;
  color: var(--txt-dim);
  margin-bottom: 34px;
}
.content-section .wrap > p strong {
  display: inline-block;
  font-family: "Sora";
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.35;
  color: var(--txt);
  margin-top: 26px;
  padding-left: 18px;
  border-left: 4px solid var(--accent-ink);
}
.content-section .wrap > p:not(:first-child):not(:nth-child(2)) {
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--txt-dim);
  margin-bottom: 0;
}
.content-section .wrap > p:last-child {
  margin-top: 28px;
  padding: 28px 30px;
  border: 1px solid rgba(232, 69, 28, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 42px rgba(17, 24, 39, 0.06);
}

  .form-container {
            width: 100%;
            max-width: 48rem; /* Equivalent to max-w-2xl */
            background-color: white;
            padding: 2rem; /* Equivalent to p-8 */
            border-radius: 1.5rem; /* Equivalent to rounded-2xl */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Equivalent to shadow-xl */
        }
        @media (min-width: 768px) {
            .form-container {
                padding: 3rem; /* Equivalent to md:p-12 */
            }
        }
        .form-heading {
            font-size: 1.875rem; /* Equivalent to text-3xl */
            font-weight: 700; /* Equivalent to font-bold */
            text-align: center;
            color: #1f2937; /* Equivalent to text-gray-800 */
            margin-bottom: 2rem; /* Equivalent to mb-8 */
        }
        .input-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        @media (min-width: 768px) {
            .input-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .form-input, .form-textarea {
            width: 100%;
            padding: 1rem;
            border: 1px solid #d1d5db; /* Equivalent to border-gray-300 */
            border-radius: 0.5rem; /* Equivalent to rounded-lg */
            color: #1f2937;
            transition: all 0.2s ease-in-out;
        }
        .form-input::placeholder, .form-textarea::placeholder {
            color: #6b7280; /* Equivalent to placeholder-gray-500 */
        }
        .form-input:focus, .form-textarea:focus {
            outline: none;
            box-shadow: 0 0 0 2px #3b82f6;
        }
        .form-textarea {
            height: 8rem;
            resize: none;
        }
        .file-upload-section {
            display: flex;
            flex-direction: column;
            margin-bottom: 1.5rem;
        }
        @media (min-width: 768px) {
            .file-upload-section {
                flex-direction: row;
                align-items: center;
            }
        }
        .file-label {
            font-size: 1.125rem;
            font-weight: 500;
            color: #4b5563;
            margin-bottom: 0.5rem;
        }
        @media (min-width: 768px) {
            .file-label {
                width: 33.333333%;
                margin-bottom: 0;
            }
        }
        .captcha-section {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: 2rem;
            justify-content: space-between;
        }
        @media (min-width: 768px) {
            .captcha-section {
                flex-direction: row;
                align-items: center;
            }
        }
        .captcha-input-group {
            display: flex;
            flex-grow: 1;
            margin-bottom: 1rem;
        }
        @media (min-width: 768px) {
            .captcha-input-group {
                margin-bottom: 0;
            }
        }
        .captcha-label {
            display: block;
            color: #4b5563;
            font-weight: 500;
            margin-bottom: 0.5rem;
        }
        .captcha-content {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.25rem;
            font-weight: 700;
        }
        .captcha-refresh {
            color: #3b82f6;
            cursor: pointer;
            font-size: 1.125rem;
            transition: color 0.2s ease-in-out;
        }
        .captcha-refresh:hover {
            color: #1d4ed8;
        }
        .captcha-input {
            width: 4rem;
            padding: 0.5rem;
            border: 2px solid #d1d5db;
            border-radius: 0.5rem;
            text-align: center;
        }
        .submit-button {
            width: 100%;
            padding: 0.75rem 2rem;
            background-color: #2563eb;
            color: white;
            font-weight: 700;
            border-radius: 9999px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            cursor: pointer;
            transition: background-color 0.2s ease-in-out;
        }
        .submit-button:hover {
            background-color: #1d4ed8;
        }
        .error-message {
            color: #ef4444;
            font-size: 0.875rem;
            font-weight: 500;
            margin-top: 0.25rem;
        }
        .hidden {
            display: none;
        }
        .unvalid {
            border-color: #ef4444;
        }
        .valid {
            border-color: #10b981;
        }