/* ==========================================================================
   Keleno — styles.css
   Palette:
     ink        #0B0F19  — headings, primary buttons, dark/moody sections
                           (hero, CTA banner, footer)
     ink-soft   #4B5568  — body text on light backgrounds
     paper      #FFFFFF  — page base
     surface    #F5F6F8  — alternating section background
     line       #E4E6EB  — borders, dividers
     accent     #19A950  — primary brand accent, sampled from the Keleno
                           logo's green node — used sparingly against both
                           light and dark (ink) backgrounds
     accent-deep #127939 — accent hover / pressed
     accent-tint #ECF8F1 — pale accent fill for chips/badges
   Dark sections (.hero, .cta-banner, .section--dark) share
   a faint diagonal accent streak texture (--streak) for a moody, editorial
   feel, referencing reflectionsglobal.com without copying its palette.
   Type: Inter (body/UI), Montserrat (eyebrows, tags, stat labels — the
   "engineering" accent voice)
   ========================================================================== */

:root {
  --ink: #0B0F19;
  --ink-soft: #4B5568;
  --ink-faint: #8A93A6;
  --paper: #FFFFFF;
  --surface: #F5F6F8;
  --surface-deep: #ECEEF2;
  --line: #E4E6EB;
  --accent: #19A950;
  --accent-deep: #127939;
  --accent-light: #59C181;
  --accent-tint: #ECF8F1;
  --signal: var(--accent);
  --signal-tint: var(--accent-tint);

  --streak: repeating-linear-gradient(
    115deg,
    rgba(89, 193, 129, 0.14) 0px,
    rgba(89, 193, 129, 0.14) 1.5px,
    transparent 1.5px,
    transparent 64px
  );

  --font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "Montserrat", "Segoe UI", Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-card: 0 1px 2px rgba(11, 15, 25, 0.04), 0 10px 30px rgba(11, 15, 25, 0.06);
  --shadow-lift: 0 20px 45px rgba(11, 15, 25, 0.12);

  --container: 1200px;
}

/* ---------- Dark section decoration ----------
   Shared moody-charcoal treatment for hero / CTA / named-IP sections:
   ink background + faint diagonal streak texture behind the content. */

.hero,
.cta-banner,
.section--dark,
.contact-split-brand {
  position: relative;
  overflow: hidden;
}

.hero::before,
.cta-banner::before,
.section--dark::before,
.contact-split-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--streak);
  z-index: -1;
  pointer-events: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

h1, h2, h3, h4 {
  font-family: var(--font-body);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 700; letter-spacing: -0.02em; }
h1.h1--md { font-size: clamp(2rem, 3.4vw, 2.7rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1rem; font-weight: 400; }

ul, ol { margin: 0; padding: 0; list-style: none; }

.container {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
}

.container--narrow {
  width: min(820px, 100% - 3rem);
  margin-inline: auto;
}

/* ---------- Eyebrow / mono accents ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.eyebrow--light { color: var(--accent-light); }
.eyebrow--light::before { background: var(--accent-light); }

.section-intro {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 42rem;
}

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

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.96rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  min-height: 46px;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(3px); }

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; }

.btn-accent { background: var(--accent); color: var(--paper); }
.btn-accent:hover { background: var(--accent-deep); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }

.btn-outline--light { color: var(--paper); border-color: rgba(255, 255, 255, 0.35); }
.btn-outline--light:hover { border-color: var(--paper); }

.btn-outline--contrast { background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-card); }
.btn-outline--contrast:hover { border-color: var(--ink); }

.btn-ghost { background: transparent; color: var(--accent); padding: 0.5rem 0; min-height: 0; font-size: 0.94rem; }
.btn-ghost:hover { color: var(--accent-deep); transform: none; }

/* ---------- Topbar (contact strip) ---------- */

.topbar { background: var(--ink); color: rgba(255, 255, 255, 0.75); font-size: 0.82rem; }

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
}

.topbar-contact { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }

.topbar-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.18s ease;
}

.topbar-contact a:hover { color: var(--paper); }
.topbar-contact svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent-light); }

.topbar-social { display: flex; align-items: center; gap: 0.6rem; }

.topbar-social a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.75);
  transition: border-color 0.18s ease, color 0.18s ease;
}

.topbar-social a:hover { border-color: var(--paper); color: var(--paper); }
.topbar-social svg { width: 13px; height: 13px; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1.1rem 0;
}

.brand {
  position: relative;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  color: var(--ink);
  margin-right: auto;
}

.brand .dot { color: var(--accent); }

.brand-logo { height: 50px; width: auto; display: block; flex-shrink: 0; }

.brand-state {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* State B (chip + tagline) stays in normal flow — it's the wider of the two, so it
   sets the link's box size and nothing ever has to reflow when the states swap. */
.brand-state--b { opacity: 0; transition: opacity 0.7s ease; }

.brand-state--a { position: absolute; inset: 0; opacity: 1; transition: opacity 0.7s ease; }

.brand.is-alt .brand-state--a { opacity: 0; }
.brand.is-alt .brand-state--b { opacity: 1; }

.brand-mark { height: 44px; width: auto; display: block; flex-shrink: 0; }

.brand-chip-stage { position: relative; height: 44px; width: 44px; flex-shrink: 0; }

.brand-chip-stage .brand-mark--chip { position: static; height: 100%; width: 100%; }

.brand-mark--chip { object-fit: contain; }

/* A small signal flies in from a pin and lands in the chip's center square, on
   loop, for as long as the chip state is showing. */
.brand-chip-spark {
  position: absolute;
  top: 22%;
  left: 76%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 5px 1px rgba(25, 169, 80, 0.7);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
  pointer-events: none;
}

.brand.is-alt .brand-chip-spark { animation: brandChipFly 1.9s ease-in-out infinite; }

@keyframes brandChipFly {
  0% { top: 22%; left: 76%; opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  10% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }
  45% { top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
  58% { top: 50%; left: 50%; opacity: 1; transform: translate(-50%, -50%) scale(0.85); }
  80% { top: 50%; left: 50%; opacity: 0.9; transform: translate(-50%, -50%) scale(1); }
  100% { top: 50%; left: 50%; opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .brand-chip-spark { display: none; }
}

.brand-wordmark {
  height: 28px;
  width: auto;
  display: block;
  opacity: 0;
}

.brand.is-revealing .brand-wordmark { animation: brandWordFadeIn 0.7s ease-out 1.15s forwards; }

@keyframes brandWordFadeIn { to { opacity: 1; } }

.brand-tagline-text {
  font-weight: 800;
  font-size: 1.65rem;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

@keyframes brandDrawIn { to { stroke-dashoffset: 0; } }

/* Hidden (undrawn) resting state — .is-revealing is toggled by JS to (re)play the
   draw-in every time this state comes back into view, not just on first page load. */
.brand-dot-1 { stroke-dasharray: 107.11; stroke-dashoffset: 107.11; }
.brand-line-1 { stroke-dasharray: 17.06; stroke-dashoffset: 17.06; }
.brand-dot-2 { stroke-dasharray: 76.65; stroke-dashoffset: 76.65; }
.brand-line-2 { stroke-dasharray: 20.3; stroke-dashoffset: 20.3; }
.brand-dot-3 { stroke-dasharray: 59.69; stroke-dashoffset: 59.69; }

.brand.is-revealing .brand-dot-1 { animation: brandDrawIn 0.35s ease-out 0s forwards; }
.brand.is-revealing .brand-line-1 { animation: brandDrawIn 0.25s ease-out 0.3s forwards; }
.brand.is-revealing .brand-dot-2 { animation: brandDrawIn 0.3s ease-out 0.5s forwards; }
.brand.is-revealing .brand-line-2 { animation: brandDrawIn 0.25s ease-out 0.75s forwards; }
.brand.is-revealing .brand-dot-3 { animation: brandDrawIn 0.3s ease-out 0.95s forwards; }

@media (max-width: 480px) {
  .brand-tagline-text { font-size: 1.3rem; }
  .brand-wordmark { height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-dot-1, .brand-dot-2, .brand-dot-3, .brand-line-1, .brand-line-2 {
    animation: none;
    stroke-dashoffset: 0;
  }
  .brand-wordmark { animation: none; opacity: 1; }
  .brand-state--a, .brand-state--b { transition: none; }
}

.site-nav { display: flex; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.site-nav > ul > li { position: relative; }

.site-nav a.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink);
  padding: 0.5rem 0;
}

.site-nav a.nav-link svg { width: 13px; height: 13px; color: var(--ink-faint); transition: transform 0.2s ease; }

.has-dropdown:hover a.nav-link svg,
.has-dropdown:focus-within a.nav-link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  width: 18.5rem;
  background: var(--accent-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown a {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}

.dropdown a:hover { background: var(--surface); color: var(--accent); }

.dropdown-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--accent-deep);
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dropdown-icon svg { width: 19px; height: 19px; }

.dropdown a:hover .dropdown-icon { background: var(--accent); color: var(--paper); transform: scale(1.06); }

.dropdown-text { min-width: 0; padding-top: 0.15rem; }

.dropdown a small {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ink-faint);
  margin-top: 0.2rem;
  line-height: 1.4;
}

/* ---------- Mega-menu dropdown (AI Services) ---------- */

.mega-dropdown {
  width: 54rem;
  max-width: 90vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2rem 0.4rem;
  padding: 1.1rem 0.6rem;
}

.mega-dropdown .dropdown-icon { width: 36px; height: 36px; }
.mega-dropdown .dropdown-icon svg { width: 17px; height: 17px; }
.mega-dropdown a { padding: 0.45rem 0.5rem; gap: 0.6rem; }

.has-mega-dropdown .dropdown { left: 0; transform: translateY(6px); }
.has-mega-dropdown:hover .dropdown,
.has-mega-dropdown:focus-within .dropdown { left: 0; transform: translateY(0); }

.mega-col + .mega-col { border-left: 1px solid var(--line); padding-left: 0.8rem; }

.mega-col-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.5rem;
  padding: 0 0.8rem;
}

.header-actions { display: flex; align-items: center; gap: 1.2rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle span { width: 18px; height: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }

/* ---------- Breadcrumb ---------- */

.breadcrumb {
  padding: 1.1rem 0;
  font-size: 0.86rem;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}

.breadcrumb ol { display: flex; gap: 0.5rem; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--line); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li[aria-current] { color: var(--ink); font-weight: 500; }

/* ---------- Page hero (subpages) ---------- */

.page-hero {
  padding: 4.5rem 0 4rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.page-hero h1 { max-width: 40rem; }
.page-hero h1.h1--md { max-width: 44rem; }
.page-hero .section-intro { margin-top: 1.1rem; }

.page-hero--compact { padding: 3.2rem 0 2.8rem; }

.page-hero--split .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;
}

.page-hero--split h1, .page-hero--split .section-intro { max-width: none; }

.page-hero-visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}

@media (min-width: 781px) {
  .page-hero--compact.page-hero--split .container { grid-template-columns: 1.25fr 0.75fr; gap: 2.5rem; }
}

.page-hero-visual-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- AquaSense hero — cinematic split + floating data readouts ---------- */

@media (min-width: 781px) {
  .aquasense-hero .container { grid-template-columns: 3fr 2fr; }
}

.aquasense-hero .page-hero-visual-frame { aspect-ratio: 4 / 5; }

.hero-data-chip,
.hero-status-chip {
  position: absolute;
  z-index: 2;
  opacity: 0;
  animation: heroChipIn 0.6s ease forwards var(--chip-delay, 0s), heroChipFloat 4.6s ease-in-out infinite var(--chip-delay, 0s);
}

.hero-data-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-md);
  background: rgba(10, 10, 10, 0.58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  color: #fff;
}

.hero-data-chip-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.hero-data-chip-value { font-family: var(--font-mono); font-size: 0.92rem; font-weight: 600; }

.hero-data-chip--do { top: 8%; left: 6%; --chip-delay: 0.5s; }
.hero-data-chip--ph { top: 8%; right: 6%; --chip-delay: 0.75s; }
.hero-data-chip--temp { bottom: 24%; left: 6%; --chip-delay: 1s; }
.hero-data-chip--ammonia { bottom: 24%; right: 6%; --chip-delay: 1.25s; }

.hero-status-chip {
  left: 0;
  right: 0;
  bottom: 6%;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem 0.55rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  --chip-delay: 1.5s;
}

.hero-status-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}

.hero-status-chip-icon svg { width: 12px; height: 12px; }

@keyframes heroChipIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroChipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-data-chip, .hero-status-chip { animation: none; opacity: 1; }
}

.hero-photo-cluster {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.1rem;
  align-items: center;
  max-width: 22rem;
  margin: 0 auto;
}

.hero-photo-cluster-main,
.hero-photo-cluster-secondary {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}

.hero-photo-cluster img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 781px) {
  .hero-photo-cluster { max-width: none; margin: 0; }
}

/* ---------- Insights hero ---------- */

.insights-hero { background: var(--ink); padding: 3.5rem 0 4rem; }

.insights-hero-badge {
  display: block;
  width: fit-content;
  margin: 0 auto 2.2rem;
  padding: 0.55rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}

.insights-hero-banner {
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  aspect-ratio: 2.5 / 1;
}

.insights-hero-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

.insights-hero-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 15, 25, 0.4), rgba(11, 15, 25, 0.6));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.insights-hero-banner-overlay h1 {
  color: var(--paper);
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  max-width: 42rem;
  line-height: 1.35;
}

/* ---------- Insight tabs ---------- */

.insight-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 3rem;
}

.insight-tab {
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.insight-tab:hover { background: var(--accent-tint); }

.insight-tab.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.insight-panel[hidden] { display: none; }

/* ---------- Latest resources (homepage) ---------- */

.resource-grid-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.resource-grid-small {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.resource-tile {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  color: var(--paper);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resource-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.resource-grid-featured .resource-tile { aspect-ratio: 16 / 11; }

.resource-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.resource-tile:hover img { transform: scale(1.05); }

.resource-tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 15, 25, 0.05) 40%, rgba(11, 15, 25, 0.88) 100%);
}

.resource-tile-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.4rem;
}

.resource-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 0.8rem;
}

.resource-tile-title,
.resource-tile-title.brochure-card-caption {
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--paper);
  line-height: 1.3;
}

.resource-grid-featured .resource-tile-title { font-size: 1.4rem; }

.resource-tile-desc {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

/* ---------- Blog cards ---------- */

.blog-card {
  display: block;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.blog-card-image { display: block; aspect-ratio: 16 / 10; }
.blog-card-image img,
.blog-card-image svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-card-body { display: block; padding: 1.4rem 1.5rem 1.6rem; }

.blog-card-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.7rem;
}

.blog-card-title { display: block; font-size: 1.12rem; margin-bottom: 0.6rem; }

.blog-card-excerpt { display: block; font-size: 0.94rem; color: var(--ink-soft); margin: 0 0 1rem; line-height: 1.6; }

.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
}

.blog-card-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.blog-card:hover .blog-card-link svg { transform: translateX(3px); }

/* ---------- Article ---------- */

.article-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.article-hero-image {
  margin-top: 2.2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--line);
}

.article-hero-image img,
.article-hero-image svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.article-body { font-size: 1.06rem; line-height: 1.8; color: var(--ink-soft); }
.article-body h2 { margin: 2.6rem 0 1.1rem; font-size: 1.5rem; color: var(--ink); }
.article-body h3 { margin: 2rem 0 0.8rem; font-size: 1.18rem; color: var(--ink); }
.article-body p { margin: 0 0 1.35rem; }
.article-body ul, .article-body ol { margin: 0 0 1.35rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: 0.55rem; }
.article-body li::marker { color: var(--accent); }
.article-body strong { color: var(--ink); font-weight: 600; }

.article-body blockquote {
  margin: 2.2rem 0;
  padding: 1.3rem 1.6rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.article-body blockquote p {
  margin: 0;
  font-size: 1.1rem;
  color: var(--ink);
  font-style: italic;
}

.article-cta {
  margin-top: 3rem;
  padding: 2.2rem;
  background: var(--surface);
  border-radius: var(--radius-lg);
  text-align: center;
}

.article-cta h3 { margin-bottom: 0.6rem; }
.article-cta p { color: var(--ink-soft); margin-bottom: 1.4rem; }

/* ---------- Sitemap ---------- */

.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6rem 2rem;
}

.sitemap-col h2 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.1rem;
}

.sitemap-col ul { display: grid; gap: 0.65rem; }

.sitemap-col a {
  font-size: 0.96rem;
  color: var(--ink-soft);
  transition: color 0.15s ease;
}

.sitemap-col a:hover { color: var(--accent-deep); }

/* ---------- Section spacing ---------- */

.section { padding: 6rem 0; }
.section--tight { padding: 4rem 0; }
.section--tight-top { padding-top: 1.5rem; }
.section--surface, .section--tint { background: var(--surface); }
.section--dark { background: var(--ink); color: rgba(255, 255, 255, 0.7); }
.section--dark h2, .section--dark h3 { color: var(--paper); }

.section-head { max-width: 42rem; margin-bottom: 3rem; }
.section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  max-width: none;
}

/* Closing paragraph that follows a grid or diagram inside a section. */
.section-outro {
  margin: 2.6rem 0 0;
  max-width: 46rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Callout variant: a soft-tinted, rounded note with a colored accent bar,
   for a closing line that should read as a takeaway rather than body copy. */
.section-outro--callout {
  max-width: none;
  padding: 1.2rem 1.6rem;
  background: var(--accent-tint);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
}

/* Multi-paragraph body copy inside a section. */
.prose-block { max-width: 46rem; }
.prose-block p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}
.prose-block p:last-child { margin-bottom: 0; }
.prose-block strong,
.section-outro strong,
.track-record-body strong { color: var(--ink); font-weight: 600; }

/* ---------- Track record ---------- */

.track-record-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

.track-record-heading {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.35;
  margin: 0;
}

.track-record-body p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}

.track-record-body p:last-child { margin-bottom: 0; }

/* ---------- Cards ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--ink); }

.card-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: 1.3rem;
}

.card-icon svg { width: 22px; height: 22px; }

.card h3 { margin-bottom: 0.6rem; }
.card p { font-size: 0.95rem; margin-bottom: 0; }
.card address { font-style: normal; font-size: 0.86rem; color: var(--ink-faint); margin-top: 0.8rem; }

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  margin-top: 1.1rem;
}

.card-link svg { width: 14px; height: 14px; transition: transform 0.2s ease; }
.card:hover .card-link svg { transform: translateX(3px); }

/* ---------- Testimonials ---------- */

.testimonial-card {
  display: flex;
  flex-direction: column;
}

.testimonial-quote-mark {
  width: 30px;
  height: 30px;
  color: var(--accent);
  margin-bottom: 1rem;
}

.testimonial-card blockquote {
  margin: 0 0 1.5rem;
  flex: 1;
}

.testimonial-card blockquote p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

.testimonial-attribution {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}

.testimonial-logo { height: 30px; width: auto; max-width: 92px; object-fit: contain; flex-shrink: 0; }

.testimonial-role { font-size: 0.86rem; font-weight: 600; color: var(--ink); margin: 0; }
.testimonial-company { font-size: 0.82rem; color: var(--ink-faint); margin: 0.1rem 0 0; }

.service-sublist {
  display: grid;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

.service-sublist li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.service-sublist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- Leadership cards ---------- */

.leadership-grid { align-items: start; }

.leader-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
}

.leader-header {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}

.leader-avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 500;
}

.leader-avatar img { width: 100%; height: 100%; object-fit: cover; }

.leader-header h3 { margin-bottom: 0.25rem; }

.leader-title {
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin: 0;
}

.leader-highlights {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}

.leader-highlights li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.leader-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.leader-meta {
  font-size: 0.86rem;
  color: var(--ink-faint);
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  margin: 0;
}

.leader-meta + .leader-meta { border-top: none; padding-top: 0.5rem; }

.leader-meta strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

/* Awards/skills/previously collapsed behind a toggle (About page) */

.leader-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.leader-toggle-chev {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.leader-toggle[aria-expanded="true"] .leader-toggle-chev { transform: rotate(45deg); }

.leader-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  margin-top: 1rem;
}

.leader-toggle[aria-expanded="true"] + .leader-detail { grid-template-rows: 1fr; }

.leader-detail-inner { overflow: hidden; }
.leader-detail .leader-meta:first-child { border-top: 1px solid var(--line); padding-top: 0.9rem; }

/* ---------- Placeholder blocks (proof strip / case studies not live yet) ---------- */

.placeholder-note {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.4rem 1.6rem;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.placeholder-note svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-faint); }

.placeholder-note a { color: var(--ink-soft); text-decoration: underline; }
.placeholder-note a:hover { color: var(--accent-deep); }

.placeholder-note--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.placeholder-note--stacked .eyebrow { margin-bottom: 0; }

/* ---------- Media frame (embedded case-study video) ---------- */

.media-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

.media-frame video, .media-frame img { display: block; width: 100%; height: auto; }

.media-frame--compact { max-width: 320px; }

/* ---------- Data table ---------- */

.table-frame {
  margin-top: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.data-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.92rem; }

.data-table th {
  text-align: left;
  padding: 0.9rem 1.3rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.data-table td {
  padding: 1rem 1.3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: top;
}

.data-table tbody tr:hover { background: var(--surface); }

.data-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.data-table td:nth-child(2) { font-family: var(--font-mono); font-size: 0.86rem; white-space: nowrap; }

/* ---------- Hero with photo anchored left, copy alongside it (Hospitality) ----------
   The source photo is not a clean rectangle: the main body ends at x≈1954 of
   2752, but a palm-frond protrusion reaches to x≈2257 across the top right,
   and everything past that is the blank margin the image was generated with.
   The media column's ::before spacer holds 2257:1536 as a height floor, so at
   rest the whole photo — protrusion included — is visible. If the copy column
   ever runs taller, object-fit trims from the right, which spends the photo's
   own blank margin (invisible against the white copy column) before it reaches
   any actual imagery. */

.hospitality-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--paper);
  overflow: hidden;
}

.hospitality-hero-media { position: relative; }
.hospitality-hero-media::before { content: ""; display: block; padding-top: 68.06%; }

.hospitality-hero-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.hospitality-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 2.8vw, 2.6rem) clamp(1.4rem, 2.6vw, 2.4rem);
}

.hospitality-hero-copy h1 { font-size: clamp(1.55rem, 2.2vw, 2rem); line-height: 1.18; }
.hospitality-hero-copy .eyebrow { margin-bottom: 0.8rem; }
.hospitality-hero-copy .section-intro { max-width: none; font-size: 1rem; line-height: 1.62; margin-top: 0.9rem; }
.hospitality-hero-copy .hero-actions { margin-top: 1.4rem; }

@media (max-width: 1300px) {
  /* Below this the side-by-side split leaves the media column too narrow and
     too tall, and the crop starts eating the photo itself. Stacking gives the
     media the full width at the photo's own ratio, so the protrusion and the
     whole photo body are always fully visible. */
  .hospitality-hero { grid-template-columns: 1fr; }
  .hospitality-hero-copy { padding: 2.5rem clamp(1.5rem, 6vw, 2.5rem); }
}

/* ---------- Animated MCP architecture diagram (Hospitality) ----------
   Inline SVG so the connectors can be animated. The "before" tangle drifts
   out of sync and flickers; the "after" side flows cleanly through the MCP
   server. Motion is gated on .reveal.is-visible so nothing animates offscreen. */

.mcp-diagram-frame {
  background: var(--paper);
  margin-top: 2.5rem;
}

.mcp-diagram-scroll { overflow-x: auto; }

.mcp-diagram-heading { margin-top: 3.5rem; }
.mcp-legend { margin-top: 2.5rem; }

/* ---------- "Why this matters now" bento grid (Hospitality) ----------
   Asymmetric 3-column grid so the four reasons read with rhythm instead of a
   flat 2x2, with the one card carrying a hard number promoted to a wide dark
   feature tile. The .reveal sits on the container, never the cards, so the
   cards' hover transform is never overridden by the reveal transform. */

.timing-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.timing-card {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* 01 | 02 02  /  03 03 | 04 */
.timing-card:nth-child(2),
.timing-card:nth-child(3) { grid-column: span 2; }

.timing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(25, 169, 80, 0.4);
}

.timing-card h3 { font-size: 1.14rem; margin-bottom: 0.6rem; padding-right: 3rem; }
.timing-card p { font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

.timing-card-num {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-family: var(--font-mono);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  opacity: 0.13;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.timing-card:hover .timing-card-num { opacity: 0.24; }

/* Featured dark tile carrying the statistic */

.timing-card--feature {
  background: var(--ink);
  border-color: transparent;
  display: flex;
  flex-direction: column;
}
.timing-card--feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--streak);
  z-index: -1;
  pointer-events: none;
}
.timing-card--feature h3 { color: var(--paper); }
.timing-card--feature p { color: rgba(255, 255, 255, 0.68); }
.timing-card--feature .timing-card-num { color: var(--accent-light); opacity: 0.3; }
.timing-card--feature:hover { border-color: rgba(89, 193, 129, 0.5); }

.timing-card .timing-stat-value {
  font-family: var(--font-mono);
  font-size: clamp(2.8rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent-light);
  margin: 0 0 0.7rem;
}

.timing-card .timing-stat-label {
  font-size: 0.86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  max-width: 24rem;
  margin: 0 0 1.6rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
  .timing-bento { grid-template-columns: 1fr; }
  .timing-card:nth-child(2),
  .timing-card:nth-child(3) { grid-column: span 1; }
}

/* ---------- Vividity: capability cards and the two product diagrams
   (Hospitality) ---------- */

.vv-subhead { margin-top: 3.5rem; margin-bottom: 1.6rem; }
.vv-subhead-note {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 44rem;
  margin: -0.9rem 0 1.6rem;
}

.vv-capabilities .card { padding: 1.7rem; }
.vv-capabilities .card h4 { font-size: 1rem; color: var(--ink); margin-bottom: 0.5rem; }
.vv-capabilities .card p { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.vv-capabilities .card-icon { width: 40px; height: 40px; margin-bottom: 1rem; }
.vv-capabilities .card-icon svg { width: 20px; height: 20px; }

.vv-diagram-frame { background: var(--paper); }
.vv-diagram-scroll { overflow-x: auto; }

.vv-diagram {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body);
  --vv-system: #2B3446;
}

/* Spec strip + connector row, sitting inside the diagram's own frame so the
   architecture drawing and the facts about it read as a single card. */

.vv-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

.vv-spec { padding: 1.6rem 1.5rem; }
.vv-spec + .vv-spec { border-left: 1px solid var(--line); }

.vv-spec-icon {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.vv-spec-icon svg { width: 1.1rem; height: 1.1rem; }

.vv-spec-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.4rem;
}

.vv-spec-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.vv-connectors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.1rem;
  padding: 1.1rem 1.5rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.vv-connectors-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0;
}

.vv-connector-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.vv-connector {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.34rem 0.85rem;
}

.vv-connector--primary {
  color: var(--accent-deep);
  background: var(--accent-tint);
  border-color: rgba(25, 169, 80, 0.35);
}
.vv-connector--primary span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border-left: 1px solid rgba(25, 169, 80, 0.35);
  padding-left: 0.5rem;
}

@media (max-width: 860px) {
  .vv-specs { grid-template-columns: 1fr; }
  .vv-spec + .vv-spec { border-left: none; border-top: 1px solid var(--line); }
}

/* Flow diagram: guest message to sent reply */

.vv-step-box { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.vv-step-badge { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 1.5; }
.vv-step-badge-text { font-size: 13px; font-weight: 700; fill: var(--accent-deep); }
.vv-step-title { font-size: 13px; font-weight: 600; fill: var(--ink); }
/* 10px, not 10.5 — at 10.5 the longest line came within 2px of the box edge,
   which a font fallback would overflow. */
.vv-step-desc { font-size: 10px; fill: var(--ink-soft); }

/* The approval gate is the point of the diagram — give it the accent. */
.vv-step--human .vv-step-box { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 2; }
.vv-step--human .vv-step-badge { fill: var(--accent); stroke: var(--accent); }
.vv-step--human .vv-step-badge-text { fill: #fff; }
.vv-step--human .vv-step-title { fill: var(--accent-deep); }

.vv-arrow {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 6;
  opacity: 0.75;
}
.vv-arrow-head {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

/* Architecture diagram */

.vv-arch-box { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.vv-arch-box--system { fill: var(--vv-system); stroke: none; }
.vv-arch-label { font-size: 14px; font-weight: 600; fill: var(--ink); }
.vv-arch-sub { font-size: 11.5px; fill: var(--ink-soft); }
.vv-arch-label--light { fill: #fff; }
.vv-arch-sub--light { fill: rgba(255, 255, 255, 0.6); }

.vv-arch-platform { fill: var(--ink); stroke: var(--accent); stroke-width: 1.5; }
.vv-arch-platform-title { font-size: 17px; font-weight: 700; fill: #fff; }
.vv-arch-chip { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.vv-arch-chip--ai { fill: rgba(25, 169, 80, 0.18); stroke: var(--accent-light); }
.vv-arch-chip-text { font-size: 12.5px; font-weight: 500; fill: rgba(255, 255, 255, 0.9); }

.vv-arch-link {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 6;
  opacity: 0.75;
}

/* Motion, gated on the reveal so nothing animates offscreen */

.reveal .vv-step,
.reveal .vv-arch-node { opacity: 0; }

.reveal.is-visible .vv-step,
.reveal.is-visible .vv-arch-node {
  animation: mcpNodeIn 0.55s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.reveal.is-visible .vv-arrow,
.reveal.is-visible .vv-arch-link {
  animation: mcpDashDrift 1.4s linear infinite;
  animation-delay: calc(var(--i, 0) * -0.28s);
}

.reveal.is-visible .vv-step--human .vv-step-box {
  animation: vvGatePulse 2.6s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes vvGatePulse {
  0%, 100% { stroke-width: 2; }
  50% { stroke-width: 3.4; }
}

@media (max-width: 1080px) {
  .vv-diagram { width: 1060px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal .vv-step,
  .reveal .vv-arch-node { opacity: 1; }
  .reveal.is-visible .vv-step,
  .reveal.is-visible .vv-arch-node,
  .reveal.is-visible .vv-arrow,
  .reveal.is-visible .vv-arch-link,
  .reveal.is-visible .vv-step--human .vv-step-box { animation: none; }
}

/* ---------- Closing statement: the section's takeaway, promoted from a plain
   paragraph into an elevated panel with the "from … to … to …" clause read as
   a connected three-step chain (Hospitality) ---------- */

.closing-statement {
  position: relative;
  overflow: hidden;
  margin-top: 3rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 2.6rem clamp(1.4rem, 3vw, 2.6rem) 2.8rem;
}

.closing-statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.closing-statement-lead {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 38rem;
  margin: 0 0 2.1rem;
}
.closing-statement-lead strong { color: var(--accent-deep); font-weight: 700; }

.closing-chain {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.closing-chain-step {
  position: relative;
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
  padding: 1.7rem 1.4rem;
  text-align: center;
}

/* Chevron sitting in the gap, pointing to the next step. */
.closing-chain-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 0.8rem);
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0.55;
}

.closing-chain-icon {
  display: inline-grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent);
  margin-bottom: 0.9rem;
  box-shadow: 0 1px 3px rgba(11, 15, 25, 0.08);
}
.closing-chain-icon svg { width: 1.35rem; height: 1.35rem; }

.closing-chain-step p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.closing-chain-step strong { color: var(--ink); font-weight: 600; }

@media (max-width: 820px) {
  .closing-chain { grid-template-columns: 1fr; gap: 1.9rem; }
  /* Chain turns vertical: point the chevron down into the next step. */
  .closing-chain-step:not(:last-child)::after {
    top: calc(100% + 0.95rem);
    left: 50%;
    transform: translate(-50%, -50%) rotate(135deg);
  }
}

/* ---------- Protocol-layer intro: text + a feature-highlight rail filling
   the column the prose block leaves empty (Hospitality) ---------- */

.protocol-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: 3.2rem;
  align-items: start;
}

.protocol-intro-grid .prose-block { max-width: none; }

.protocol-highlights {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 0 1.5rem;
}

.protocol-highlight {
  display: flex;
  gap: 1rem;
  padding: 1.5rem 0;
}
.protocol-highlight + .protocol-highlight { border-top: 1px solid var(--line); }

.protocol-highlight-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
}
.protocol-highlight-icon svg { width: 1.3rem; height: 1.3rem; }

.protocol-highlight h3 { font-size: 0.98rem; margin-bottom: 0.4rem; }
.protocol-highlight p { font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }

@media (max-width: 980px) {
  .protocol-intro-grid { grid-template-columns: 1fr; }
  .protocol-highlights { margin-top: 0.5rem; }
}

.mcp-diagram {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body);
  --dg-muted: #9AA3B2;
  --dg-system: #2B3446;
  --dg-tangle: #6B7386;
}

.mcp-dg-title { font-size: 22px; font-weight: 700; fill: var(--ink); }
.mcp-dg-caption { font-size: 13px; fill: var(--ink-faint); }
.mcp-dg-divider { stroke: var(--line); stroke-width: 2; }

.mcp-node rect { fill: var(--dg-system); }
.mcp-node text { font-size: 13px; font-weight: 500; fill: #fff; }
.mcp-node--muted rect { fill: var(--dg-muted); }
.mcp-node--live rect { fill: var(--accent); }

.mcp-dg-server-box { fill: var(--ink); stroke: var(--accent); stroke-width: 1.5; }
.mcp-dg-server-title { font-size: 15px; font-weight: 700; fill: #fff; }
.mcp-dg-server-sub { font-size: 12px; fill: rgba(255, 255, 255, 0.62); }

.mcp-dg-server-halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.mcp-dg-tangle line {
  stroke: var(--dg-tangle);
  stroke-width: 1.8;
  stroke-dasharray: 5 9;
}

.mcp-dg-link {
  stroke: var(--accent-light);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 9 11;
}

/* Entrance + continuous motion, only once the block scrolls into view */

.reveal .mcp-node,
.reveal .mcp-dg-server { opacity: 0; }

.reveal.is-visible .mcp-node,
.reveal.is-visible .mcp-dg-server {
  animation: mcpNodeIn 0.6s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

.reveal.is-visible .mcp-dg-tangle line {
  animation:
    mcpDashDrift calc(2.4s + var(--i, 0) * 0.22s) linear infinite,
    mcpTangleFlicker calc(3.1s + var(--i, 0) * 0.37s) ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.31s);
}

.reveal.is-visible .mcp-dg-link {
  animation: mcpDashDrift 1.6s linear infinite;
  animation-delay: calc(var(--i, 0) * -0.4s);
}

.reveal.is-visible .mcp-dg-server-halo {
  animation: mcpServerPulse 2.8s ease-out infinite;
  animation-delay: 0.8s;
}

@keyframes mcpNodeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mcpDashDrift {
  to { stroke-dashoffset: -40; }
}

@keyframes mcpTangleFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes mcpServerPulse {
  0% { opacity: 0.55; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.07); }
}

@media (max-width: 920px) {
  .mcp-diagram { width: 940px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal .mcp-node,
  .reveal .mcp-dg-server { opacity: 1; }
  .reveal.is-visible .mcp-node,
  .reveal.is-visible .mcp-dg-server,
  .reveal.is-visible .mcp-dg-tangle line,
  .reveal.is-visible .mcp-dg-link,
  .reveal.is-visible .mcp-dg-server-halo { animation: none; }
}

/* ---------- Animated arrow flow overlay on the pipeline diagram (Healthcare) ---------- */

.pipeline-diagram-wrap { position: relative; }

.pipeline-flow-layer { position: absolute; inset: 0; pointer-events: none; }

.pipeline-flow-dot {
  position: absolute;
  width: 0.6%;
  aspect-ratio: 1;
  min-width: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--dot-color, #5aa9ff);
  box-shadow: 0 0 8px 2px var(--dot-color, #5aa9ff);
  animation: pipelineDotPulse 1.8s ease-in-out infinite;
  animation-delay: var(--dot-delay, 0s);
}

@keyframes pipelineDotPulse {
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.75); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .pipeline-flow-dot { animation: none; opacity: 0.85; }
}

/* ---------- Two-column pipeline intro (Healthcare) ---------- */

.pipeline-intro { margin-bottom: 3rem; }

.pipeline-intro-label {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.6rem;
}

.pipeline-intro .section-intro { max-width: none; }

/* ---------- 6-phase lifecycle S-curve diagram (Healthcare) ---------- */

.lifecycle-diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "p1 a12 p2 a23 p3"
    ".  .   .   .  vc"
    "p6 a56 p5 a45 p4";
  align-items: center;
  gap: 0.4rem 0;
  margin-top: 2.5rem;
}

.lifecycle-phase--1 { grid-area: p1; }
.lifecycle-phase--2 { grid-area: p2; }
.lifecycle-phase--3 { grid-area: p3; }
.lifecycle-phase--4 { grid-area: p4; }
.lifecycle-phase--5 { grid-area: p5; }
.lifecycle-phase--6 { grid-area: p6; }
.lifecycle-arrow--12 { grid-area: a12; }
.lifecycle-arrow--23 { grid-area: a23; }
.lifecycle-arrow--56 { grid-area: a56; }
.lifecycle-arrow--45 { grid-area: a45; }
.lifecycle-connector-v { grid-area: vc; }

.lifecycle-phase {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.3rem 1.5rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lifecycle-phase:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); }

.lifecycle-phase-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--accent-light);
  flex-shrink: 0;
}

.lifecycle-phase-icon svg { width: 22px; height: 22px; }

.lifecycle-phase-body { min-width: 0; }

.lifecycle-phase-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin: 0 0 0.2rem;
}

.lifecycle-phase-title { font-size: 1rem; font-weight: 700; color: var(--paper); margin: 0; }

.lifecycle-arrow,
.lifecycle-connector-v {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
}

.lifecycle-arrow { width: 36px; }
.lifecycle-connector-v { height: 32px; }
.lifecycle-arrow svg, .lifecycle-connector-v svg { width: 22px; height: 22px; }

.lifecycle-arrow--12 svg, .lifecycle-arrow--23 svg { animation: lifecycleNudgeX 1.8s ease-in-out infinite; }
.lifecycle-arrow--56 svg, .lifecycle-arrow--45 svg { animation: lifecycleNudgeXRev 1.8s ease-in-out infinite; }
.lifecycle-connector-v svg { animation: lifecycleNudgeY 1.8s ease-in-out infinite; }

.lifecycle-arrow--23 svg { animation-delay: 0.3s; }
.lifecycle-connector-v svg { animation-delay: 0.6s; }
.lifecycle-arrow--45 svg { animation-delay: 0.9s; }
.lifecycle-arrow--56 svg { animation-delay: 1.2s; }

@keyframes lifecycleNudgeX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes lifecycleNudgeXRev { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes lifecycleNudgeY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes lifecycleNudgePulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .lifecycle-arrow svg, .lifecycle-connector-v svg { animation: none; }
}

/* ---------- Cinematic full-width video section (AquaSense) ---------- */

.cinematic-video {
  position: relative;
  min-height: min(60vh, 640px);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--ink);
}

.cinematic-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

.cinematic-video-overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  background: linear-gradient(180deg, rgba(11, 15, 25, 0.35) 0%, rgba(11, 15, 25, 0.55) 55%, rgba(11, 15, 25, 0.85) 100%);
}

.cinematic-video-copy { max-width: 38rem; }
.cinematic-video-copy h2 { color: var(--paper); }
.cinematic-video-copy p { color: rgba(255, 255, 255, 0.82); font-size: 1.05rem; margin: 1rem 0 2.2rem; }

.cinematic-video-play {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1.7rem 0.7rem 0.7rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.cinematic-video-play:hover { transform: translateY(-2px); background: var(--accent-tint); }

.cinematic-video-play-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
}

.cinematic-video-play-icon svg { width: 16px; height: 16px; }

.cinematic-video.is-playing { min-height: 0; aspect-ratio: 16 / 9; background: #000; }
.cinematic-video-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }

.media-caption {
  padding: 0.9rem 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--ink-faint);
  margin: 0;
}

/* ---------- CTA banner ---------- */

.cta-banner {
  background: var(--ink);
  border-radius: var(--radius-xl);
  padding: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-banner h2 { color: var(--paper); font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 0.5rem; }
.cta-banner p { color: rgba(255, 255, 255, 0.62); margin: 0; max-width: 32rem; }
.cta-banner-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.cta-banner--photo {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}

.cta-banner--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 15, 25, 0.92) 0%, rgba(11, 15, 25, 0.8) 45%, rgba(11, 15, 25, 0.55) 100%);
  z-index: -1;
}

/* ---------- Careers: photo showcase card ---------- */

.careers-photo-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: stretch;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 20rem;
}

.careers-photo-media { position: relative; overflow: hidden; }
.careers-photo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.careers-photo-panel {
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.2rem);
}

.careers-photo-panel h2 { color: var(--paper); font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 0.9rem; }
.careers-photo-panel p { color: rgba(255, 255, 255, 0.78); margin: 0; font-size: 1.02rem; line-height: 1.6; }

/* Mirrors the layout (panel left, photo right) for visual rhythm when two photo-cards
   land on the same page — image stays the wider column either way. */
.careers-photo-card--reverse { grid-template-columns: 1fr 1.15fr; }

/* ---------- Careers: why choose ---------- */

.why-choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.why-choose-image { border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3.4; }
.why-choose-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.why-choose-list { display: grid; gap: 2.2rem; }
.why-choose-item h3 { margin-bottom: 0.6rem; }
.why-choose-item p { margin: 0; color: var(--ink-soft); }

/* ---------- Careers: open positions accordion ---------- */

.jobs-accordion { display: flex; align-items: stretch; gap: 1rem; min-height: 32rem; }

.job-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 1 5.5rem;
  border-radius: var(--radius-lg);
  background: var(--ink);
  overflow: hidden;
  cursor: pointer;
  transition: flex-basis 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.job-panel.is-active { flex: 1 1 0%; cursor: default; }

.job-panel-toggle {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 1.6rem 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}

.job-panel:not(.is-active) .job-panel-toggle {
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}

.job-panel-title {
  color: var(--paper);
  font-weight: 600;
  font-size: 1.1rem;
  white-space: nowrap;
}

.job-panel:not(.is-active) .job-panel-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.job-panel-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--accent-light);
  transition: transform 0.3s ease;
}

.job-panel.is-active .job-panel-chevron { transform: rotate(90deg); }
.job-panel:not(.is-active) .job-panel-chevron { display: none; }

.job-panel-body {
  display: none;
  padding: 0 1.8rem 1.8rem;
  overflow-y: auto;
  min-height: 0;
}

.job-panel.is-active .job-panel-body { display: block; flex: 1 1 auto; }

.job-panel-body p { color: rgba(255, 255, 255, 0.78); font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.2rem; }

.job-panel-subhead {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--accent-light);
  margin: 0 0 0.8rem !important;
}

.job-panel-body ul { display: grid; gap: 0.7rem; padding-left: 1.2rem; }
.job-panel-body li { color: rgba(255, 255, 255, 0.78); font-size: 1.02rem; line-height: 1.6; }
.job-panel-body li::marker { color: var(--accent-light); }

.apply-now-btn { margin-top: 1.6rem; }

.jobs-cta { text-align: center; margin-top: 2.2rem; }
.jobs-cta p { color: var(--ink-soft); margin-bottom: 1rem; }

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

.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.55); padding: 4.5rem 0 2rem; }

.footer-top {
  display: grid;
  grid-template-columns: 1.3fr repeat(6, 0.8fr);
  gap: 1.6rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-brand .brand { color: var(--paper); margin-bottom: 1rem; }
.footer-brand .brand-logo { height: 40px; }
.footer-brand p { font-size: 0.92rem; max-width: 22rem; }

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 500;
  margin-bottom: 1rem;
}

.footer-col ul { display: grid; gap: 0.7rem; }
.footer-col a { font-size: 0.92rem; }
.footer-col a:hover { color: var(--paper); }

.footer-office { display: grid; gap: 0.25rem; }
.footer-office strong { font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.footer-office address { font-style: normal; font-size: 0.82rem; line-height: 1.5; color: rgba(255, 255, 255, 0.4); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.8rem;
  font-size: 0.84rem;
}

.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a:hover { color: var(--paper); }

.footer-social { display: flex; gap: 0.8rem; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.footer-social a:hover { border-color: var(--paper); color: var(--paper); }
.footer-social svg { width: 15px; height: 15px; }

/* ---------- Utility grids ---------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-sm);
  z-index: 100;
  font-weight: 600;
  font-size: 0.9rem;
}

.skip-link:focus { top: 1rem; }

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

.hero {
  padding: 6rem 0 6.5rem;
  background: var(--ink);
}

.hero--video::before, .hero--image::before { content: none; }

.hero-bg-video, .hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(11, 15, 25, 0.94) 0%, rgba(11, 15, 25, 0.85) 32%, rgba(11, 15, 25, 0.62) 68%, rgba(11, 15, 25, 0.5) 100%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
}

.hero--video .hero-grid, .hero--image .hero-grid { grid-template-columns: 1fr; }
.hero--video .hero-grid > div, .hero--image .hero-grid > div { max-width: 38rem; }

.hero h1 { margin-bottom: 1.3rem; color: var(--paper); font-size: clamp(2.1rem, 3.6vw, 3rem); }

.hero-sub {
  font-size: 1.14rem;
  color: rgba(255, 255, 255, 0.66);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

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

.trust-strip { padding: 2.2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.trust-line { font-size: 1.02rem; color: var(--ink-soft); max-width: 46rem; margin: 0; }

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

/* ---------- Logo marquee ---------- */

.logo-marquee {
  margin-top: 1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  width: max-content;
  animation: logo-marquee 34s linear infinite;
}

.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }

.logo-marquee-track img {
  height: 52px;
  width: auto;
  /* 170px cropped the widest wordmark lockups (bookingsync, Streamline,
     BookingPal — all >5:1 aspect) down to as little as 40% of the row's
     52px height. 260px lets every current logo but those three reach full
     height; the three widest still cap out, but at ~32-49px instead of
     ~21-32px, with no logo below the old floor. */
  max-width: 260px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 1;
  transition: transform 0.2s ease;
}

.logo-marquee-track img:hover { transform: scale(1.05); }

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Industry cards ---------- */

.industry-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.industry-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.industry-card-media { height: 12rem; background-size: cover; background-repeat: no-repeat; }

.industry-card-media--hospitality {
  background-color: #C7D0FF;
  background-image: url('../assets/industry-hospitality.jpg');
  background-position: center 70%;
}

.industry-card-media--healthcare {
  background-color: #BDEFDE;
  background-image: url('../assets/industry-healthcare.jpg');
  background-position: center 30%;
}

.industry-card-body { padding: 2rem; }
.industry-card-body h3 { margin: 0.4rem 0 0.8rem; font-size: 1.3rem; }
.industry-card-body p { font-size: 0.96rem; }

/* ---------- Value stats ---------- */

.value-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
}

.value-stat {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.4rem;
  text-align: center;
}

.value-stat-number {
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--accent-deep);
  margin: 0 0 0.6rem;
  letter-spacing: -0.02em;
}

.value-stat-label {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
}

/* ---------- Contact — split screen ---------- */

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-split-brand,
.contact-split-form {
  display: flex;
  align-items: center;
  padding: 5rem clamp(1.5rem, 4vw, 4rem);
}

.contact-split-brand { background: var(--ink); color: rgba(255, 255, 255, 0.82); }
.contact-split-form { background: var(--paper); }

.contact-split-inner { width: 100%; max-width: 30rem; margin-inline: auto; }

.contact-split-brand h1 { color: var(--paper); margin-bottom: 1.1rem; font-size: clamp(2rem, 3.2vw, 2.7rem); }

.contact-split-value { font-size: 1.05rem; color: rgba(255, 255, 255, 0.72); margin-bottom: 2.2rem; max-width: 28rem; }

.contact-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  margin-bottom: 2.4rem;
  line-height: 1.5;
}

.contact-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-light);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(89, 193, 129, 0.2);
}

.contact-badge strong { color: var(--paper); font-weight: 600; }

.contact-direct { display: grid; gap: 0.2rem; margin-bottom: 2.4rem; }

.contact-direct-row {
  display: flex;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  transition: opacity 0.15s ease;
}

.contact-direct-row:first-child { border-top: none; padding-top: 0; }

a.contact-direct-row:hover { opacity: 0.75; }

.contact-direct-row svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-light); margin-top: 0.15rem; }
.contact-direct-row strong { display: block; font-size: 0.9rem; color: var(--paper); font-weight: 600; }
.contact-direct-row span { display: block; font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); margin-top: 0.1rem; }

.contact-social { display: flex; gap: 0.7rem; }

.contact-social a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.75);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.contact-social a svg { width: 16px; height: 16px; }

.contact-social a:hover { border-color: var(--accent-light); color: var(--paper); transform: translateY(-2px); }

.contact-split-form h2 { margin-bottom: 0.5rem; }
.contact-form-lede { color: var(--ink-soft); margin-bottom: 2rem; font-size: 0.98rem; }

/* Service chips */
.field-group { margin-bottom: 1.5rem; }
.field-group-label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); margin-bottom: 0.7rem; }

.chip-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.chip-input { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  user-select: none;
}

.chip:hover { border-color: var(--ink-faint); }

.chip-input:checked + .chip {
  background: var(--accent-tint);
  border-color: var(--accent);
  color: var(--accent-deep);
}

.chip-input:focus-visible + .chip { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Floating-label fields */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.field-float { position: relative; margin-bottom: 1.4rem; }

.field-float input,
.field-float textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.35rem 0.9rem 0.55rem;
}

.field-float textarea { resize: vertical; min-height: 7.5rem; padding-top: 1.6rem; }

.field-float label {
  position: absolute;
  left: 0.9rem;
  top: 0.95rem;
  font-size: 0.98rem;
  color: var(--ink-faint);
  pointer-events: none;
  transition: transform 0.15s ease, font-size 0.15s ease, color 0.15s ease, top 0.15s ease;
}

.field-float input:focus,
.field-float textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field-float input:focus + label,
.field-float input:not(:placeholder-shown) + label,
.field-float textarea:focus + label,
.field-float textarea:not(:placeholder-shown) + label {
  top: 0.45rem;
  font-size: 0.72rem;
  color: var(--accent-deep);
}

.field-float input.is-invalid,
.field-float textarea.is-invalid { border-color: #C0392B; }

.field-float input.is-invalid + label,
.field-float textarea.is-invalid + label { color: #C0392B; }

.optional-mark { color: var(--ink-faint); font-weight: 400; font-size: 0.82em; }

.contact-form-error { font-size: 0.86rem; color: #C0392B; margin: -0.5rem 0 1.3rem; }

/* Drag-and-drop file upload */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 1.8rem 1rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dropzone:focus-within { border-color: var(--accent); }
.dropzone.is-dragover { border-color: var(--accent); background: var(--accent-tint); }
.dropzone.is-invalid { border-color: #C0392B; }

.dropzone-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone svg { width: 22px; height: 22px; color: var(--ink-faint); }
.dropzone-text { margin: 0; font-size: 0.92rem; color: var(--ink); }
.dropzone-text span { color: var(--accent); font-weight: 600; text-decoration: underline; }
.dropzone-hint { margin: 0; font-size: 0.8rem; color: var(--ink-faint); }
.dropzone-filename { margin: 0; font-size: 0.86rem; color: var(--accent-deep); font-weight: 600; }

/* Submit button + spinner */
.contact-submit { width: 100%; justify-content: center; margin-top: 0.4rem; }
.contact-submit[disabled] { opacity: 0.75; cursor: not-allowed; transform: none; }

.contact-form-consent {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-align: center;
}

.contact-form-consent a { color: var(--ink-soft); text-decoration: underline; }
.contact-form-consent a:hover { color: var(--accent-deep); }

.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

.contact-submit.is-loading .btn-spinner { display: inline-block; }
.contact-submit.is-loading svg { display: none; }

@keyframes btn-spin { to { transform: rotate(360deg); } }

#contact-form-success { animation: contact-success-in 0.5s ease; }

@keyframes contact-success-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-field { display: grid; gap: 0.4rem; margin-bottom: 1.3rem; }

.form-field label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  width: 100%;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-field textarea { resize: vertical; min-height: 8rem; }

.form-success {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.6rem;
  background: var(--signal-tint);
  border-radius: var(--radius-md);
  color: var(--ink);
}

.form-success[hidden] { display: none; }

.form-success svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--signal); margin-top: 0.1rem; }
.form-success h3 { margin-bottom: 0.3rem; }
.form-success p { margin: 0; font-size: 0.94rem; color: var(--ink-soft); }

/* ---------- Lead-gate modal (brochure downloads) ---------- */

.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.lead-modal.is-open { display: flex; }

body.modal-open { overflow: hidden; }

.lead-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 25, 0.55);
}

.lead-modal-dialog {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: min(28rem, 100%);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lift);
}

.lead-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
}

.lead-modal-close:hover { background: var(--surface); color: var(--ink); }
.lead-modal-close svg { width: 16px; height: 16px; }

.lead-modal-dialog h3 { margin-bottom: 0.4rem; padding-right: 2rem; }
.lead-modal-sub { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 1.5rem; }

.lead-captcha-label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
  display: block;
}

.lead-captcha-input {
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink);
  background: #FAF3E9;
  border: 1.5px solid #EADFC9;
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  width: 100%;
}

.lead-captcha-input:focus { outline: none; border-color: var(--accent); }

.required-mark { color: #C0392B; }

.form-field input.is-invalid,
.lead-captcha-input.is-invalid {
  border-color: #C0392B;
}

.field-error {
  font-size: 0.82rem;
  color: #C0392B;
  margin: 0;
}

.lead-form-error {
  font-size: 0.86rem;
  color: #C0392B;
  margin: -0.5rem 0 1.3rem;
}

.lead-modal-dialog .btn { width: 100%; justify-content: center; }
.lead-modal-dialog .btn[disabled] { opacity: 0.7; cursor: not-allowed; transform: none; }

.lead-form-success { text-align: center; padding: 1rem 0; }
.lead-form-success svg { width: 40px; height: 40px; color: var(--accent); margin: 0 auto 1rem; display: block; }
.lead-form-success h3 { margin-bottom: 0.4rem; }
.lead-form-success p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* ---------- Header scrolled state ---------- */

.site-header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 12px 24px rgba(11, 15, 25, 0.05); }

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

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Products ---------- */

.product-tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 1rem;
}

.product-tagline span:not(:last-child)::after { content: "/"; margin-left: 0.5rem; color: var(--line); }

.product-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--ink); }

.product-card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: 1.3rem;
}

.product-card-icon svg { width: 24px; height: 24px; }

.product-card h3 { margin-bottom: 0.4rem; }
.product-card p { font-size: 0.92rem; margin-bottom: 0; }

.product-card-domain {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}

/* ---------- Brochure cards ---------- */

.brochure-card {
  display: block;
  background: var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brochure-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }

.brochure-card-image { display: block; aspect-ratio: 4 / 3; }
.brochure-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.brochure-card-body { display: block; padding: 1.2rem 1.4rem 1.4rem; }

.brochure-card-caption {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
  margin: 0;
}

.brochure-card-caption svg {
  width: 16px;
  height: 16px;
  margin-left: 0.3rem;
  vertical-align: -2px;
  color: var(--accent);
  transition: transform 0.2s ease;
}

.brochure-card:hover .brochure-card-caption { text-decoration: underline; }
.brochure-card:hover .brochure-card-caption svg { transform: translateX(3px); }

.brochure-filesize {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ---------- eBook listing rows: bookstore-style, cover feels like a real book ----------
   The eBooks tab only ever holds a couple of titles, and the shared
   .brochure-card grid (square thumbnail + caption) reads as a generic file
   download, not a book. Given a reference to an Amazon book listing, this
   mirrors that structure instead: a portrait cover with real page-stack
   depth, sitting beside title / byline / price, in its own scoped classes
   so .brochure-card and the other resource tabs are untouched. */

.ebook-list { display: flex; flex-direction: column; gap: 1.4rem; }

.ebook-row {
  display: flex;
  gap: 1.6rem;
  align-items: flex-start;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.ebook-row:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }

.ebook-cover-stack { position: relative; flex: 0 0 140px; }

.ebook-cover-stack::before,
.ebook-cover-stack::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: -4px;
  left: 4px;
  background: linear-gradient(90deg, #efe9da, #e0d9c6);
  border-radius: 2px 6px 6px 2px;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.08);
}
.ebook-cover-stack::before { transform: translate(3px, 2px); z-index: 0; }
.ebook-cover-stack::after { transform: translate(6px, 4px); z-index: -1; opacity: 0.75; }

.ebook-cover {
  position: relative;
  z-index: 1;
  aspect-ratio: 2 / 3;
  border-radius: 2px 6px 6px 2px;
  overflow: hidden;
  box-shadow: 3px 6px 14px rgba(15, 23, 42, 0.22), inset -3px 0 6px rgba(0, 0, 0, 0.25);
  transform: perspective(700px) rotateY(-6deg);
  transition: transform 0.3s ease;
}
.ebook-row:hover .ebook-cover { transform: perspective(700px) rotateY(0deg); }

.ebook-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.ebook-cover-kicker, .ebook-cover-title, .ebook-cover-subtitle {
  position: absolute;
  left: 10%;
  right: 10%;
  color: #fff;
  margin: 0;
  z-index: 2;
}
.ebook-cover-kicker { top: 7%; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.ebook-cover-title { top: 15%; font-size: 0.98rem; font-weight: 800; line-height: 1.2; }
.ebook-cover-subtitle { bottom: 8%; font-size: 0.62rem; line-height: 1.35; opacity: 0.85; }

.ebook-info { flex: 1; min-width: 0; padding-top: 0.2rem; }

.ebook-format { margin: 0 0 0.3rem; font-size: 0.78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; }

.ebook-title { margin: 0 0 0.35rem; font-size: 1.2rem; line-height: 1.32; }
.ebook-title a { color: var(--ink); text-decoration: none; }
.ebook-title a:hover { color: var(--accent); text-decoration: underline; }

.ebook-byline { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--ink-soft); }
.ebook-byline span { color: var(--accent); font-weight: 500; }

.ebook-price { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ink); }
.ebook-availability { margin: 0.1rem 0 1.1rem; font-size: 0.82rem; color: var(--ink-faint); }

.ebook-download { font-size: 0.88rem; padding: 0.7rem 1.3rem; }

@media (max-width: 640px) {
  .ebook-row { gap: 1.1rem; padding: 1.1rem; }
  .ebook-cover-stack { flex: 0 0 92px; }
  .ebook-cover-title { font-size: 0.72rem; }
  .ebook-cover-subtitle { font-size: 0.5rem; }
  .ebook-title { font-size: 1.02rem; }
  .ebook-price { font-size: 1.25rem; }
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem;
  text-align: center;
}

.stat-tile .stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.stat-tile .stat-label {
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* ---------- Dramatic hero stat cards (AquaSense business outcomes) ---------- */

.stat-hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.stat-hero-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: clamp(2.2rem, 4vw, 2.8rem) 1.6rem;
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.stat-hero-card:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); }

.stat-hero-card::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
  margin: 0 auto 1.4rem;
}

.stat-hero-value {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--paper);
  margin-bottom: 1rem;
}

.stat-hero-title { font-size: 1.1rem; font-weight: 600; color: var(--paper); margin: 0 0 0.3rem; }

.stat-hero-note { font-size: 0.86rem; color: rgba(255, 255, 255, 0.5); margin: 0; }

.stat-hero-disclaimer {
  max-width: 40rem;
  margin: 2.4rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

.product-spec-list {
  display: grid;
  gap: 0.6rem;
}

.product-spec-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.product-spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.product-spec-list li strong { color: var(--ink); }

/* ---------- Problem/solution flow comparison (AquaSense) ---------- */

.flow-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.flow-column {
  border-radius: var(--radius-lg);
  padding: 1.8rem clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  background: var(--paper);
}

.flow-column--after { background: var(--ink); border-color: var(--ink); }

.flow-column-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 1.4rem;
}

.flow-column--after .flow-column-label { color: var(--accent-light); }

.flow-step { display: flex; align-items: center; gap: 0.75rem; padding: 0.3rem 0; }

.flow-step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex-shrink: 0; }

.flow-column--after .flow-step-dot { background: rgba(255, 255, 255, 0.28); }

.flow-step-label { font-weight: 500; color: var(--ink-soft); }

.flow-column--after .flow-step-label { color: rgba(255, 255, 255, 0.85); }

.flow-connector { display: flex; }

.flow-connector span {
  width: 8px;
  text-align: center;
  overflow: visible;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.7rem;
  color: var(--ink-faint);
}

.flow-column--after .flow-connector span { color: var(--accent-light); }

.flow-step--bad .flow-step-dot { background: #EC202A; }
.flow-step--bad .flow-step-label { color: #EC202A; font-weight: 700; }

.flow-step--good .flow-step-dot { background: var(--accent); }
.flow-step--good .flow-step-label { color: var(--accent-light); font-weight: 700; }

.flow-footnote {
  max-width: 52rem;
  margin: 2.2rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- Automated feeding showcase — photo + traditional/AquaSense compare (AquaSense) ---------- */

.feeding-showcase {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 1.8rem;
  margin-top: 2.5rem;
  align-items: stretch;
}

.feeding-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  min-height: 22rem;
}

.feeding-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.feeding-compare { display: flex; flex-direction: column; gap: 1.2rem; }
.feeding-compare .flow-column { flex: 1; }

.feeding-outcome {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
  padding: 1.5rem 2rem;
  background: var(--accent-tint);
  border-radius: var(--radius-lg);
  text-align: center;
}

.feeding-outcome-step { font-size: 1.05rem; font-weight: 700; color: var(--accent-deep); }
.feeding-outcome-arrow { font-family: var(--font-mono); font-size: 1.2rem; color: var(--accent); }

/* ---------- CMFRI research-collaboration showcase (AquaSense) ---------- */

.cmfri-photo {
  margin-top: 2.5rem;
  aspect-ratio: 16 / 8;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
}

.cmfri-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cmfri-copy {
  max-width: 46rem;
  margin: 2.2rem auto 0;
  text-align: center;
  font-size: 1.05rem;
  color: var(--ink-soft);
}

.cmfri-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: fit-content;
  margin: 2rem auto 0;
  padding: 0.6rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.cmfri-badge-x { color: var(--line); font-weight: 400; text-transform: none; }

/* ---------- AquaSense ecosystem diagram (pond -> cloud -> dashboard) ---------- */

.ecosystem {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 1.2rem;
  margin-top: 2.5rem;
}

.ecosystem-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: 1.8rem 1.4rem;
}

.ecosystem-pond { width: 100%; max-width: 220px; height: auto; margin-bottom: 0.6rem; }

.ecosystem-buoy-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: ecosystemBuoyPulse 2.6s ease-out infinite;
  animation-delay: var(--pulse-delay, 0s);
}

@keyframes ecosystemBuoyPulse {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

.ecosystem-buoy { animation: ecosystemBuoyFloat 4.6s ease-in-out infinite; animation-delay: var(--pulse-delay, 0s); }

@keyframes ecosystemBuoyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.ecosystem-cloud-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--accent-light);
  margin-bottom: 0.9rem;
  animation: ecosystemCloudBreathe 3.8s ease-in-out infinite;
}

@keyframes ecosystemCloudBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.ecosystem-cloud-icon svg { width: 30px; height: 30px; }

.ecosystem-node-label { font-size: 1.1rem; font-weight: 700; color: var(--paper); margin: 0.3rem 0 0.2rem; }

.ecosystem-node-desc { font-size: 0.86rem; color: rgba(255, 255, 255, 0.55); margin: 0; }

.ecosystem-link {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-content: center;
  row-gap: 0.5rem;
  column-gap: 0.5rem;
  min-width: 60px;
}

.ecosystem-link-line { position: relative; height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.3)); }
.ecosystem-link-line:first-of-type { grid-column: 1; }
.ecosystem-link-line:last-of-type { grid-column: 3; }

.ecosystem-link-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 6px 1px rgba(89, 193, 129, 0.7);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: ecosystemFlowDot 4.4s ease-in-out infinite;
}

.ecosystem-link-line:last-of-type::after { animation-delay: 2.2s; }

@keyframes ecosystemFlowDot {
  0% { left: 0%; opacity: 0; }
  8% { opacity: 1; }
  42% { opacity: 1; }
  50% { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

.ecosystem-link-icon {
  grid-column: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--accent-light);
  flex-shrink: 0;
}

.ecosystem-link-icon svg { width: 18px; height: 18px; }

.ecosystem-link-tag {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
}

.ecosystem-dashboard-mock {
  width: 100%;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: 0.9rem;
  margin-bottom: 0.8rem;
}

.ecosystem-dashboard-bar { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }

.ecosystem-dashboard-dots { display: flex; gap: 4px; }
.ecosystem-dashboard-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }

.ecosystem-dashboard-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-right: auto;
}

.ecosystem-dashboard-live {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-light);
}

.ecosystem-dashboard-chart { display: block; width: 100%; height: 44px; overflow: visible; }

.ecosystem-dashboard-chart-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1.8s ease;
}

.ecosystem-node--dashboard.is-visible .ecosystem-dashboard-chart-line { stroke-dashoffset: 0; }

.ecosystem-dashboard-chart-dot {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transition: opacity 0.4s ease 1.7s;
}

.ecosystem-node--dashboard.is-visible .ecosystem-dashboard-chart-dot {
  opacity: 1;
  animation: ecosystemChartDotBreathe 2.4s ease-in-out 2.1s infinite;
}

@keyframes ecosystemChartDotBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.35); }
}

.ecosystem-dashboard-stats {
  display: flex;
  justify-content: space-between;
  padding-top: 0.7rem;
  margin-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ecosystem-dashboard-stats div { display: flex; flex-direction: column; gap: 0.15rem; }

.ecosystem-dashboard-stats span {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.ecosystem-dashboard-stats strong { font-family: var(--font-mono); font-size: 0.92rem; color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .ecosystem-buoy-ring { animation: none; opacity: 0.9; }
  .ecosystem-buoy,
  .ecosystem-cloud-icon,
  .ecosystem-dashboard-chart-dot { animation: none; }
  .ecosystem-link-line::after { display: none; }
  .ecosystem-dashboard-chart-line { transition: none; stroke-dashoffset: 0; }
  .ecosystem-node--dashboard.is-visible .ecosystem-dashboard-chart-dot { opacity: 1; }
}

/* ---------- Shared "live" pulsing dot (reused by the ecosystem dashboard mock) ---------- */

.param-dashboard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: paramPulse 2.2s ease-out infinite;
}

@keyframes paramPulse {
  0% { box-shadow: 0 0 0 0 rgba(25, 169, 80, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(25, 169, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 169, 80, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .param-dashboard-dot { animation: none; }
}

/* ---------- Sensor showcase — central illustration + 7 signal cards (AquaSense) ---------- */

.section--dark.sensor-showcase { background: radial-gradient(120% 120% at 50% 0%, #14314f 0%, #0B0F19 62%); }

.sensor-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: 980px;
  margin: 2.5rem auto 0;
}

.sensor-grid-col { display: flex; flex-direction: column; justify-content: center; gap: 1rem; height: 100%; }

.sensor-illustration { display: grid; place-items: center; width: clamp(170px, 22vw, 240px); margin: 0 auto; }
.sensor-illustration svg { width: 100%; height: auto; }

.sensor-ring--pulse { transform-box: fill-box; transform-origin: center; animation: sensorRingPulse 3.2s ease-out infinite; }

@keyframes sensorRingPulse {
  0% { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.08); opacity: 0; }
}

.sensor-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.1rem;
}

.sensor-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent-light);
}

.sensor-card-icon svg { width: 18px; height: 18px; }

.sensor-card-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.48);
  margin: 0 0 0.2rem;
}

.sensor-card-label strong { color: rgba(255, 255, 255, 0.8); font-weight: 600; }

.sensor-card-value { font-family: var(--font-mono); font-size: 1.2rem; font-weight: 700; color: var(--paper); margin: 0; }

.sensor-showcase-disclaimer {
  max-width: 34rem;
  margin: 2.4rem auto 0;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .sensor-ring--pulse { animation: none; opacity: 0.5; }
}

/* ---------- Dashboard hero mockup + annotated capabilities (AquaSense) ---------- */

.dash-hero {
  max-width: 1080px;
  margin: 2.5rem auto 0;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.dash-hero-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dash-hero-dots { display: flex; gap: 5px; }
.dash-hero-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }

.dash-hero-title { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.75); }

.dash-hero-live {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-light);
}

.dash-hero-body {
  display: grid;
  grid-template-columns: 56px 1fr 200px;
  gap: 1.2rem;
  padding: 1.2rem;
}

.dash-hero-rail { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; padding-top: 0.4rem; }

.dash-hero-rail-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.35);
}

.dash-hero-rail-icon svg { width: 17px; height: 17px; }

.dash-hero-rail-icon--active { background: rgba(255, 255, 255, 0.08); color: var(--accent-light); }

.dash-hero-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.dash-hero-stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.dash-hero-stat,
.dash-hero-chart-panel,
.dash-hero-mini,
.dash-hero-farms {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
}

.dash-hero-stat-label,
.dash-hero-panel-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 0.5rem;
}

.dash-hero-stat-value { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; color: var(--paper); margin: 0; }
.dash-hero-stat-value span { font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.4); margin-left: 0.2rem; }

.dash-hero-stat--alert .dash-hero-stat-value { color: #F5A524; }

.dash-hero-chart-panel { padding-bottom: 0.7rem; }
.dash-hero-chart { display: block; width: 100%; height: 90px; }
.dash-hero-chart-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dash-hero-chart-line--do { stroke: var(--accent-light); }
.dash-hero-chart-line--temp { stroke: #FAA41F; }

.dash-hero-chart-legend { display: flex; gap: 1.2rem; margin-top: 0.7rem; font-size: 0.74rem; color: rgba(255, 255, 255, 0.55); }
.dash-hero-chart-legend span { display: flex; align-items: center; gap: 0.4rem; }
.dash-hero-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dash-hero-legend-dot--do { background: var(--accent-light); }
.dash-hero-legend-dot--temp { background: #FAA41F; }

.dash-hero-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dash-hero-mini-value { font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--paper); margin: 0; }

.dash-hero-farm-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dash-hero-farm-row:first-of-type { border-top: none; }

.dash-hero-farm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.dash-hero-farm-row--warn .dash-hero-farm-dot { background: #F5A524; }

.dash-hero-caption { text-align: center; font-size: 0.8rem; color: var(--ink-faint); margin: 1.3rem 0 0; }

.dash-capabilities { margin-top: 3rem; }

/* ---------- Feature deck — tilted card carousel (AgriSense) ---------- */

.feature-deck {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;
  margin-top: 3.5rem;
  transition: opacity 0.25s ease;
}

.feature-deck.is-swapping { opacity: 0; }

.feature-card-flip {
  flex-shrink: 0;
  width: 320px;
  height: 360px;
  perspective: 1400px;
}

.feature-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
}

.feature-card-flip:hover .feature-card-inner,
.feature-card-flip.is-flipped .feature-card-inner { transform: rotateY(180deg); }

@media (prefers-reduced-motion: reduce) {
  .feature-card-inner { transition: none; }
}

.feature-card-face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.feature-card-face--front {
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  background: var(--paper);
  border: 1.5px dashed #c4cad6;
}

.feature-card-face--back { transform: rotateY(180deg); background: transparent; }

/* Dark backdrop card peeking out behind the tilted green card */
.feature-card-face--back::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: var(--ink);
  transform: rotate(7deg) translate(8px, -10px);
}

.feature-card-back-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  border-radius: var(--radius-lg);
  background: var(--accent);
  transform: rotate(-6deg);
  box-shadow: var(--shadow-lift);
}

.feature-card-face-head { display: flex; align-items: center; gap: 1rem; }

.feature-card-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--paper);
  flex-shrink: 0;
}

.feature-card-icon svg { width: 24px; height: 24px; }

.feature-card-face h3 { font-size: 1.2rem; margin: 0; }
.feature-card-face--front h3 { color: var(--accent-deep); }
.feature-card-back-body h3 { color: var(--paper); }

.feature-card-face p { font-size: 0.95rem; }
.feature-card-face--front p { color: var(--ink-soft); margin: auto 0 0; }
.feature-card-back-body p { color: rgba(255, 255, 255, 0.9); margin: 1.6rem 0 0; }

.feature-card-back-body .feature-card-icon { background: rgba(11, 15, 25, 0.85); }

.feature-deck-nav { display: flex; justify-content: center; gap: 1rem; margin-top: 2.2rem; }

.feature-deck-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.feature-deck-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.feature-deck-btn svg { width: 18px; height: 18px; }

/* ---------- Agriculture timeline image (AgriSense) ---------- */

.timeline-section { padding-bottom: 1.5rem; }
.timeline-section .section-head { margin-bottom: 1.5rem; }

/* ---------- AI Services: stage cards (Assess / Build / Scale) ---------- */

.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.stage-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
}

.stage-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.9rem;
}

.stage-card h3 { margin-bottom: 0.3rem; }

.stage-meta {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}

.stage-card .product-spec-list { gap: 0.7rem; }
.stage-card .product-spec-list li { font-size: 0.88rem; }

/* ---------- AI Services: FAQ ---------- */

.faq-item h4 { font-size: 1rem; color: var(--ink); margin-bottom: 0.4rem; }
.faq-item p { font-size: 0.92rem; margin-bottom: 0; }

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

@media (max-width: 1080px) {
  .header-inner { gap: 1.2rem; }

  .site-nav {
    display: block;
    position: fixed;
    inset: 0;
    top: 73px;
    background: var(--paper);
    padding: 1.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }

  .site-nav.is-open { transform: translateX(0); }

  .site-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav > ul > li { border-bottom: 1px solid var(--line); }

  .site-nav a.nav-link { padding: 1rem 0; width: 100%; justify-content: space-between; font-size: 1.02rem; }

  .dropdown {
    position: static;
    display: none;
    width: 100%;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0.8rem;
    opacity: 1;
    visibility: visible;
  }

  .has-dropdown.is-open .dropdown { display: block; }
  .has-dropdown.is-open a.nav-link svg { transform: rotate(180deg); }

  .mega-dropdown { grid-template-columns: 1fr; gap: 0.4rem; max-width: none; }
  .mega-col + .mega-col { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 0.6rem; margin-top: 0.4rem; }

  .header-actions .btn-outline { display: none; }
  .nav-toggle { display: flex; z-index: 60; position: relative; }

  body.nav-open { overflow: hidden; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .value-stats-grid { grid-template-columns: repeat(3, 1fr); }
  .resource-grid-small { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .sitemap-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  .topbar-inner { flex-direction: column; gap: 0.6rem; padding: 0.7rem 0; }
  .topbar-contact { justify-content: center; gap: 1rem; font-size: 0.78rem; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .track-record-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .resource-grid-featured { grid-template-columns: 1fr; }
  .resource-grid-small { grid-template-columns: repeat(2, 1fr); }
  .resource-grid-featured .resource-tile,
  .resource-grid-small .resource-tile { aspect-ratio: 4 / 3; }
  .insights-hero-banner { aspect-ratio: 1.1 / 1; border-radius: 2.5rem; }
  .insight-tabs { gap: 0.6rem; }
  .insight-tab { padding: 0.55rem 1.1rem; font-size: 0.86rem; }
  .stage-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .value-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 4rem 0; }
  .cta-banner { padding: 2.2rem; flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }

  .hero { padding: 3rem 0 3.5rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-bg-overlay { background: rgba(11, 15, 25, 0.86); }

  .page-hero--split .container { grid-template-columns: 1fr; gap: 2rem; }
  .page-hero-visual-frame { max-width: 20rem; margin: 0 auto; }

  .hero-data-chip { padding: 0.4rem 0.6rem; }
  .hero-data-chip-label { font-size: 0.58rem; }
  .hero-data-chip-value { font-size: 0.78rem; }
  .hero-status-chip { font-size: 0.76rem; padding: 0.45rem 0.85rem 0.45rem 0.45rem; }

  .flow-compare { grid-template-columns: 1fr; }
  .stat-hero-grid { grid-template-columns: 1fr; }

  .feeding-showcase { grid-template-columns: 1fr; }
  .feeding-photo { min-height: 16rem; }
  .feeding-outcome { padding: 1.2rem 1.4rem; }

  .cinematic-video { min-height: min(56vh, 480px); }
  .cinematic-video-overlay { padding: 2.5rem 1.2rem; }

  .cmfri-photo { aspect-ratio: 4 / 3; }

  .feature-deck { gap: 1.5rem; }
  .feature-card-flip { display: none; }
  .feature-card-flip--center { display: block; width: 100%; max-width: 300px; height: 360px; margin: 0 auto; }

  .lifecycle-diagram {
    grid-template-columns: 1fr;
    grid-template-areas: "p1" "a12" "p2" "a23" "p3" "vc" "p4" "a45" "p5" "a56" "p6";
    justify-items: center;
  }
  .lifecycle-arrow, .lifecycle-connector-v { width: auto; height: 28px; }
  .lifecycle-arrow--12, .lifecycle-arrow--23 { transform: rotate(90deg); }
  .lifecycle-arrow--56, .lifecycle-arrow--45 { transform: rotate(-90deg); }
  .lifecycle-arrow svg, .lifecycle-connector-v svg { animation: lifecycleNudgePulse 1.8s ease-in-out infinite; }

  .ecosystem { grid-template-columns: 1fr; }
  .ecosystem-node { padding: 1.4rem 1.1rem; }

  .ecosystem-link {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
    justify-items: center;
    row-gap: 0.4rem;
  }
  .ecosystem-link-line { width: 2px; height: 20px; background: linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.3)); }
  .ecosystem-link-line:first-of-type { grid-row: 1; grid-column: 1; }
  .ecosystem-link-icon { grid-row: 2; grid-column: 1; }
  .ecosystem-link-tag { grid-row: 3; grid-column: 1; }
  .ecosystem-link-line:last-of-type { grid-row: 4; grid-column: 1; }


  .section-head--split { flex-direction: column; align-items: flex-start; }

  .contact-split { grid-template-columns: 1fr; }
  .contact-split-brand,
  .contact-split-form { padding: 3.5rem clamp(1.5rem, 6vw, 2.5rem); }
  .form-row-2 { grid-template-columns: 1fr; }

  .sitemap-grid { grid-template-columns: 1fr; gap: 2rem; }

  .why-choose-grid { grid-template-columns: 1fr; }
  .why-choose-image { aspect-ratio: 16 / 10; }

  .jobs-accordion { flex-direction: column; min-height: 0; }
  .job-panel { flex-basis: auto !important; }
  .job-panel-toggle { flex-direction: row !important; justify-content: space-between; padding: 1.2rem 1.4rem; }
  .job-panel:not(.is-active) .job-panel-toggle { align-items: center; }
  .job-panel-title { writing-mode: horizontal-tb !important; transform: none !important; white-space: normal; }
  .job-panel:not(.is-active) .job-panel-chevron { display: block; transform: rotate(0deg); }
  .job-panel.is-active .job-panel-body { flex: 0 0 auto; overflow-y: visible; }

  .careers-photo-card { grid-template-columns: 1fr; min-height: 0; }
  .careers-photo-media { aspect-ratio: 16 / 10; }
  .careers-photo-panel { padding: 2.2rem clamp(1.5rem, 6vw, 2.5rem); }
  .careers-photo-card--reverse .careers-photo-media { order: -1; }

  .sensor-grid { display: flex; flex-direction: column; align-items: stretch; }
  .sensor-illustration { order: -1; margin-bottom: 0.5rem; }

  .dash-hero-body { grid-template-columns: 1fr; }
  .dash-hero-rail { flex-direction: row; justify-content: center; padding-top: 0; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .value-stats-grid { grid-template-columns: 1fr; }
  .resource-grid-small { grid-template-columns: 1fr; }
  .header-actions .btn span { display: none; }

  .dash-hero-stats-row,
  .dash-hero-mini-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   About page
   ========================================================================== */

/* ---------- Hero: full-bleed motion graphic behind left-aligned text ----------
   Reuses the site's existing .hero--video pattern (homepage, and hero-bg-video
   generally) rather than a bespoke treatment — same gradient overlay tuned for
   left-side text legibility, same video-behind-content structure. The stat row
   and the softened second clause of the h1 need light-on-dark colors here
   since this hero sits on --ink, not --paper like a plain page-hero. */

.about-hero h1 .soft { color: rgba(255, 255, 255, 0.55); }

.about-hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.8rem;
}

.about-hero-stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--paper);
}

.about-hero-stat-lbl {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.2rem;
}

/* ---------- Who we are: chip list ---------- */

.about-chip-list { display: flex; flex-direction: column; gap: 0.9rem; }

.about-chip {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.about-chip-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}

.about-chip-t { font-size: 0.94rem; font-weight: 600; color: var(--ink); }
.about-chip-d { font-size: 0.84rem; color: var(--ink-faint); margin-top: 0.15rem; }

/* ---------- Timeline: three chapters ---------- */

.about-timeline { position: relative; }

.about-timeline-line {
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(var(--accent), var(--line));
}

.about-tl-item { position: relative; padding-left: 3.6rem; padding-bottom: 2.8rem; }
.about-tl-item:last-child { padding-bottom: 0; }

.about-tl-dot {
  position: absolute;
  left: 8px;
  top: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
}

.about-tl-era {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.4rem;
}

.about-tl-item h3 { font-size: 1.18rem; margin-bottom: 0.5rem; }
.about-tl-item p { font-size: 0.96rem; color: var(--ink-soft); max-width: 42rem; margin: 0; }

/* ---------- Geographies: connected split ---------- */

.geo-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
}

.geo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.9rem;
}

.geo-connector { display: flex; align-items: center; justify-content: center; padding: 0 1.4rem; }
.geo-connector-line {
  width: 46px;
  height: 1px;
  background-image: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 10px);
}

.geo-flag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.geo-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.geo-card p { font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0.8rem; }
.geo-addr { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-faint); line-height: 1.6; font-style: normal; }

/* ---------- Office locations globe video (About) ----------
   Was a hand-built SVG world map with two pins; replaced with a produced
   globe animation that already marks both offices, so the frame just
   needs to hold a video now. */

.about-map-frame {
  position: relative;
  margin-bottom: 2.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.about-map-frame video { display: block; width: 100%; height: auto; }

@media (max-width: 780px) {
  .geo-split { grid-template-columns: 1fr; }
  .geo-connector { padding: 1rem 0; }
  .geo-connector-line { width: 1px; height: 28px; background-image: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 10px); }
}

/* ==========================================================================
   AgriSense
   ========================================================================== */

/* ---------- Hero: full-bleed generated field photo + numbered process strip ---------- */

.agri-hero-process {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 1.7rem;
}

.agri-hero-process span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.55rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
}

.agri-hero-process span:not(:first-child) { border-left: none; }
.agri-hero-process span:first-child { border-radius: 8px 0 0 8px; }
.agri-hero-process span:last-child { border-radius: 0 8px 8px 0; }

.agri-hero-process span b {
  color: var(--accent-light);
  font-weight: 600;
  margin-right: 0.4rem;
}

.reveal.is-visible .agri-hero-process span:nth-child(1) { animation: agriProcessPulse 6.4s ease-in-out infinite; }
.reveal.is-visible .agri-hero-process span:nth-child(2) { animation: agriProcessPulse 6.4s ease-in-out infinite; animation-delay: 1.6s; }
.reveal.is-visible .agri-hero-process span:nth-child(3) { animation: agriProcessPulse 6.4s ease-in-out infinite; animation-delay: 3.2s; }
.reveal.is-visible .agri-hero-process span:nth-child(4) { animation: agriProcessPulse 6.4s ease-in-out infinite; animation-delay: 4.8s; }

@keyframes agriProcessPulse {
  0%, 12%, 100% { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); }
  4% { background: rgba(25, 169, 80, 0.28); border-color: var(--accent-light); }
}

@media (max-width: 700px) {
  .agri-hero-process span { border-left: 1px solid rgba(255, 255, 255, 0.22) !important; border-radius: 8px !important; }
  .agri-hero-process { gap: 0.5rem; }
}

/* ---------- How AgriSense works: animated 4-stage flow diagram ---------- */

.agri-flow-frame { background: var(--paper); }
.agri-flow-scroll { overflow-x: auto; }

.agri-flow-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body);
}

.agri-flow-box { fill: var(--surface); stroke: var(--line); stroke-width: 1.5; }
.agri-flow-icon-bg { fill: var(--accent-tint); }
.agri-flow-icon { stroke: var(--accent-deep); stroke-width: 1.6; fill: none; }
.agri-flow-title { font-size: 15px; font-weight: 600; fill: var(--ink); }
.agri-flow-desc { font-size: 11.5px; fill: var(--ink-soft); }
.agri-flow-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; fill: var(--ink-faint); }

.agri-flow-arrow {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 6;
  opacity: 0.85;
}
.agri-flow-arrow-head { fill: var(--accent); }

.reveal .agri-flow-node { opacity: 0; }
.reveal.is-visible .agri-flow-node {
  animation: mcpNodeIn 0.55s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(var(--i, 0) * 140ms);
}
.reveal.is-visible .agri-flow-arrow { animation: mcpDashDrift 1.3s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal.is-visible .agri-hero-process span { animation: none; }
  .reveal .agri-flow-node { opacity: 1; }
  .reveal.is-visible .agri-flow-node,
  .reveal.is-visible .agri-flow-arrow { animation: none; }
}

@media (max-width: 900px) {
  .agri-flow-svg { width: 780px; }
}

/* ---------- Toolkit: intrinsically-sized photo pair + icon spec grid ----------
   The weather station photo is square (900x900) and the Scout app screenshot
   is a tall phone shot (700x1254, ~0.56:1) — two very different native
   shapes. Stacking them at equal width (the previous layout) made the app
   screenshot enormous and left the section badly top-heavy against the text
   column beside it. Here each photo keeps its own aspect-ratio and only
   height is fixed, so they sit side by side at their natural proportions —
   no cropping, no shared box forcing one to distort to match the other. */

.toolkit-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.75rem;
  align-items: center;
  margin-bottom: 3rem;
}

.toolkit-grid .section-head { margin-bottom: 1.5rem; }

.toolkit-photo-pair {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}

.toolkit-photo {
  position: relative;
  margin: 0;
  flex: 0 1 auto;
  height: clamp(190px, 30vw, 360px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

.toolkit-photo--wide { aspect-ratio: 900 / 900; }
.toolkit-photo--tall { aspect-ratio: 700 / 1254; }

.toolkit-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.toolkit-photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem 0.8rem;
  background: linear-gradient(0deg, rgba(11, 15, 25, 0.82), transparent);
  color: var(--paper);
  font-size: 0.8rem;
  line-height: 1.4;
}

.toolkit-spec-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.1rem;
}

.toolkit-spec-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.1rem;
}

.toolkit-spec-item .card-icon { margin-bottom: 0.9rem; }
.toolkit-spec-item p { font-size: 0.88rem; font-weight: 600; color: var(--ink); margin: 0; line-height: 1.35; }

@media (max-width: 900px) {
  .toolkit-grid { grid-template-columns: 1fr; }
  .toolkit-flow-frame { max-width: 420px; margin-inline: auto; }
  .toolkit-spec-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .toolkit-photo figcaption { font-size: 0.72rem; padding: 0.7rem 0.8rem 0.6rem; }
  .toolkit-spec-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Toolkit: field-to-app dataflow diagram (fills the column
   beside the intro text + photo pair, so that column isn't left as bare
   whitespace) ---------- */

.toolkit-flow-frame { background: var(--paper); padding: 1.6rem 1.2rem; }

.toolkit-flow-svg {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-body);
}

.toolkit-flow-line { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 7; opacity: 0.75; }
.toolkit-flow-icon-bg { fill: var(--accent-tint); }
.toolkit-flow-icon { stroke: var(--accent-deep); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.toolkit-flow-num { font-family: var(--font-mono); font-size: 10px; font-weight: 600; fill: var(--ink-faint); }
.toolkit-flow-title { font-size: 14px; font-weight: 600; fill: var(--ink); }
.toolkit-flow-desc { font-size: 11px; fill: var(--ink-soft); }

.reveal .toolkit-flow-node { opacity: 0; }
.reveal.is-visible .toolkit-flow-node {
  animation: mcpNodeIn 0.55s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(var(--i, 0) * 140ms);
}
.reveal.is-visible .toolkit-flow-line { animation: mcpDashDrift 1.1s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal .toolkit-flow-node { opacity: 1; }
  .reveal.is-visible .toolkit-flow-node,
  .reveal.is-visible .toolkit-flow-line { animation: none; }
}

/* ---------- Field scrapbook: hand-set overlapping photo cards ----------
   All eight source photos share the same native ratio (1026x766). Each
   card's width is set per-photo for visual variety, but height always
   follows that same aspect-ratio rather than a fixed pixel value, so
   object-fit:cover never actually has to crop anyone out of frame —
   only the on-canvas SIZE varies, not the box shape. */

.field-scrapbook {
  position: relative;
  width: 100%;
  height: 760px;
}

.field-photo {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  z-index: var(--z, 1);
  margin: 0;
  background: var(--paper);
  padding: 10px 10px 34px;
  border-radius: 3px;
  box-shadow: 0 18px 40px -14px rgba(11, 15, 25, 0.3), 0 3px 8px rgba(11, 15, 25, 0.14);
  transform: rotate(var(--r));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.field-photo:hover,
.field-photo:focus-within {
  transform: translateY(-6px) scale(1.035) rotate(0deg);
  box-shadow: 0 28px 55px -14px rgba(11, 15, 25, 0.36), 0 5px 12px rgba(11, 15, 25, 0.18);
  z-index: 50;
}

.field-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1026 / 766;
  object-fit: cover;
  border-radius: 1px;
}

.field-photo figcaption {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ink-soft);
}

@media (max-width: 1024px) {
  .field-scrapbook { height: auto; }
  .field-photo {
    position: relative;
    top: auto;
    left: auto;
    width: 84%;
    max-width: 380px;
    margin: 0 auto 2.4rem;
  }
  .field-photo:last-child { margin-bottom: 0; }
  .field-photo:hover,
  .field-photo:focus-within { transform: rotate(0deg) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .field-photo { transition: none; }
}

/* ---------- Sense tags: reuse .chip, non-interactive ---------- */

.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--line); }
.chip--static b { color: var(--accent); font-weight: 600; margin-right: 0.3rem; }

/* ---------- Sensed-data category cards: vertical scroll + dot pagination ----------
   Ten flat chips read as a wall of text with a lot of dead space beside the
   photo. Grouped into three category cards (weather / plant / soil) that
   snap-scroll inside a fixed-height panel, with dots on the side showing
   which of the three is in view — same footprint as the photo, no dead air. */

.sense-scroll-wrap { display: flex; gap: 0.9rem; }

.sense-scroll {
  flex: 1;
  height: 440px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.sense-card {
  scroll-snap-align: start;
  min-height: 100%;
  box-sizing: border-box;
  padding: 2.2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.sense-card:last-child { border-bottom: none; }
.sense-card .card-icon { margin-bottom: 1rem; }
.sense-card h3 { font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--ink); }
.sense-card p { font-size: 0.92rem; color: var(--ink-faint); margin: 0 0 1.1rem; }
.sense-card .chip-group { gap: 0.5rem; }
.sense-card .chip { font-size: 0.8rem; }

.sense-dots { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; }

.sense-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.sense-dot:hover { background: var(--accent-tint); }
.sense-dot.is-active { background: var(--accent); transform: scale(1.35); }

@media (max-width: 700px) {
  .sense-scroll { height: 380px; }
  .sense-card { padding: 1.6rem 1.4rem; }
}