/* =============================================
   LSS - Lean Scalable Solutions
   Brand: Growth Green #1F7A45 | Scale Blue #0F5FA3
   Font: Segoe UI
   ============================================= */

:root {
  --green-dark:   #155430;
  --green:        #1F7A45;
  --green-light:  #2EA05C;
  --blue-dark:    #0A3F6E;
  --blue:         #0F5FA3;
  --blue-light:   #1A7FCF;
  --ink:          #0D1117;
  --storm:        #1E2D3D;
  --cloud:        #F5F6F7;
  --white:        #ffffff;
  --font:         'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius:       6px;
  --shadow:       0 2px 16px rgba(13,17,23,0.10);
  --shadow-lg:    0 8px 40px rgba(13,17,23,0.14);
  --transition:   0.22s ease;
  --max-width:    1140px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--blue-dark); }
ul { list-style: none; }

/* ---- Container ---- */
.container {
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* =============================================
   NAVIGATION
   ============================================= */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid rgba(107,119,133,0.15);
  box-shadow: 0 2px 12px rgba(13,17,23,0.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
/* =============================================
   logo height ratio is width * .88
   ============================================= */
.nav-logo img {
  width: 70px;
  height: 62px;
  border-radius: 0%;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.nav-logo-text .brand-short {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.nav-logo-text .brand-full {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--storm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

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

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--storm);
  letter-spacing: 0.01em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--ink);
  border-bottom-color: var(--green);
}

.nav-cta {
  background: var(--green) !important;
  color: var(--white) !important;
  padding: 8px 20px !important;
  border-radius: var(--radius) !important;
  border-bottom: none !important;
  font-weight: 600 !important;
  transition: background var(--transition) !important;
}

.nav-cta:hover {
  background: var(--green-dark) !important;
  color: var(--white) !important;
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all var(--transition);
}

/* =============================================
   NAV DROPDOWN (Problems)
   ============================================= */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--storm);
  letter-spacing: 0.01em;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active {
  color: var(--ink);
  border-bottom-color: var(--green);
}

.nav-dropdown-caret {
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}

.nav-dropdown.open .nav-dropdown-caret {
  transform: rotate(225deg);
  margin-top: 4px;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 200;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-dropdown-menu-inner {
  min-width: 300px;
  width: max-content;
  max-width: 380px;
  background: var(--white);
  border: 1px solid rgba(107,119,133,0.15);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 10px;
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--storm);
  border-radius: 4px;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.nav-dropdown-menu a:hover {
  background: var(--cloud);
  color: var(--ink);
}

.nav-dropdown-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--cloud);
  color: var(--storm);
  font-size: 0.7rem;
  font-weight: 700;
  transition: background var(--transition), color var(--transition);
}

.nav-dropdown-menu a:hover .nav-dropdown-num {
  background: var(--green);
  color: var(--white);
}

.nav-dropdown-menu .nav-dropdown-all {
  display: block;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(107,119,133,0.15);
  color: var(--green);
  font-weight: 600;
  white-space: normal;
}

/* =============================================
   HERO
   ============================================= */
.hero {
  background: linear-gradient(135deg, var(--ink) 0%, #0D2235 60%, var(--blue-dark) 100%);
  color: var(--white);
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,122,69,0.18) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 10%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15,95,163,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(31,122,69,0.2);
  border: 1px solid rgba(46,160,92,0.35);
  color: var(--green-light);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 20px;
}

.hero-tag::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-light);
}

.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.hero h1 span {
  background: linear-gradient(90deg, var(--green-light), var(--blue-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.1rem;
  color: rgba(245,246,247,0.75);
  max-width: 520px;
  margin-bottom: 36px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
}

.btn-primary:hover {
  background: var(--green-dark);
  color: var(--white);
  transform: translateY(-1px);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: var(--radius);
  border: 1.5px solid rgba(245,246,247,0.3);
  transition: border-color var(--transition), background var(--transition);
}

.btn-outline:hover {
  border-color: rgba(245,246,247,0.7);
  background: rgba(245,246,247,0.08);
  color: var(--white);
}

/* Hero card (right column) */
.hero-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 32px;
  backdrop-filter: blur(8px);
}

.hero-card-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245,246,247,0.5);
  margin-bottom: 20px;
}

.hero-pillars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pillar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.07);
}

.pillar-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.pillar-icon.green { background: rgba(31,122,69,0.3); }
.pillar-icon.blue  { background: rgba(15,95,163,0.3); }
.pillar-icon.teal  { background: rgba(26,127,207,0.2); }
.pillar-icon.black { background: rgba(30, 45, 61,0.2); }

.pillar-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(245,246,247,0.9);
}

.pillar-sub {
  font-size: 0.75rem;
  color: rgba(245,246,247,0.45);
  margin-top: 2px;
}

/* ---- Hero discipline-circle composition ----
   Circle positions and sizes are set at runtime by drawHeroLines()
   in index.html - circles are placed from the line termini, not
   the reverse. Desktop only; hidden ≤900px (see RESPONSIVE). */
.hero-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Connector lines, drawn from a point inside the paragraph out to each
   circle. Positioned absolutely against .hero-inner so coordinates are
   shared between the text anchor and the circles. */
.hero-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.hero-lines path {
  fill: none;
  stroke-width: 3;
  opacity: 0.8;
}

.hero-lines .line-digitisation  { stroke: #bcd9f2; }
.hero-lines .line-environmental { stroke: #bfe3cd; }
.hero-lines .line-operational   { stroke: #c7ccd1; }

.node {
  position: absolute;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: var(--white);
  padding: 1.4rem;
  transition: transform 0.25s ease, filter 0.25s ease;
  cursor: pointer;
  z-index: 2;
}

.node .label {
  font-weight: 700;
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  line-height: 1.25;
  color: var(--white);
}

.node .sub {
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(255,255,255,0.88);
  max-width: 85%;
  margin: 0 auto;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.node:hover .sub,
.node:focus-visible .sub {
  max-height: 100px;
  opacity: 1;
  margin-top: 0.55rem;
}

.node:hover,
.node:focus-visible {
  transform: scale(1.045);
  z-index: 5;
  color: var(--white);
}

.node:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

.node-digitisation {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 35% 30%, #6397c3, var(--blue) 75%);
}

.node-environmental {
  width: 192px;
  height: 192px;
  background: radial-gradient(circle at 35% 30%, #6da886, var(--green) 75%);
}

.node-operational {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at 35% 30%, #2c4156, var(--storm) 75%);
}

/* =============================================
   SECTION COMMONS
   ============================================= */
section { padding: 80px 0; }

.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 10px;
}

.section-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 16px;
}

.section-intro {
  font-size: 1.05rem;
  color: var(--storm);
  max-width: 600px;
  line-height: 1.7;
}

.section-header {
  margin-bottom: 52px;
}

/* =============================================
   SERVICES
   ============================================= */
.services { background: var(--cloud); }

.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.service-card {
  flex: 1 1 300px;
  max-width: 340px;
  display: block;
  background: var(--white);
  border-radius: 10px;
  padding: 32px;
  border: 1px solid rgba(107,119,133,0.12);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition), transform var(--transition);
}

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

.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.service-icon.green { background: rgba(31,122,69,0.1); }
.service-icon.blue  { background: rgba(15,95,163,0.1); }
.service-icon.teal  { background: rgba(26,127,207,0.1); }

.service-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.service-card p {
  font-size: 0.92rem;
  color: var(--storm);
  line-height: 1.65;
  margin-bottom: 20px;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}

.tag-green {
  background: rgba(31,122,69,0.1);
  color: var(--green-dark);
}

.tag-blue {
  background: rgba(15,95,163,0.1);
  color: var(--blue-dark);
}

/* =============================================
   ABOUT / WHY LSS
   ============================================= */
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

.stat-box {
  padding: 24px;
  border-radius: 10px;
  border: 1px solid rgba(107,119,133,0.15);
}

.stat-box.green { border-left: 3px solid var(--green); background: rgba(31,122,69,0.04); }
.stat-box.blue  { border-left: 3px solid var(--blue);  background: rgba(15,95,163,0.04); }

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-box.green .stat-number { color: var(--green); }
.stat-box.blue  .stat-number { color: var(--blue); }

.stat-label {
  font-size: 0.82rem;
  color: var(--storm);
  font-weight: 500;
}

/* Strengths list */
.strengths {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.strength-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.strength-bullet {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
}

.strength-item h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.strength-item p {
  font-size: 0.88rem;
  color: var(--storm);
  line-height: 1.6;
}

/* =============================================
   FEEDBACK STRIP
   ============================================= */
.feedback {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--blue-dark) 100%);
  color: var(--white);
  padding: 64px 0;
  text-align: center;
}

.feedback h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}

.feedback p {
  font-size: 1rem;
  color: rgba(245,246,247,0.75);
  max-width: 520px;
  margin: 0 auto 32px;
  line-height: 1.65;
}

.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  color: var(--green-dark);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition);
}

.btn-white:hover {
  background: var(--cloud);
  color: var(--green-dark);
  transform: translateY(-1px);
}

/* =============================================
   CONTACT
   ============================================= */
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.contact-info h2 { margin-bottom: 16px; }

.contact-info p {
  color: var(--storm);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 36px;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(107,119,133,0.15);
  transition: border-color var(--transition);
}

.contact-method:hover { border-color: var(--green); }

.contact-method-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(31,122,69,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.contact-method-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--storm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-method-value {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}

/* Contact form */
.contact-form-wrap {
  background: var(--cloud);
  border-radius: 12px;
  padding: 36px;
  border: 1px solid rgba(107,119,133,0.12);
}

.contact-form-wrap h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid rgba(107,119,133,0.2);
  border-radius: var(--radius);
  transition: border-color var(--transition);
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--green);
}

.form-group textarea { resize: vertical; min-height: 110px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-submit {
  width: 100%;
  padding: 13px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  margin-top: 6px;
}

.form-submit:hover {
  background: var(--green-dark);
  color: var(--white);
  transform: translateY(-1px);
}

.form-note {
  font-size: 0.78rem;
  color: var(--storm);
  text-align: center;
  margin-top: 12px;
}

/* =============================================
   FOOTER
   ============================================= */
footer {
  background: var(--ink);
  color: rgba(245,246,247,0.6);
  padding: 48px 0 28px;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.footer-brand .nav-logo-text .brand-short { color: var(--white); }
.footer-brand .nav-logo-text .brand-full  { color: rgba(245,246,247,0.4); }

.footer-brand p {
  font-size: 0.85rem;
  line-height: 1.6;
  max-width: 260px;
  margin-top: 12px;
}

.footer-legal {
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(245,246,247,0.5);
  margin-top: 10px;
}

.footer-nav h4 {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.footer-nav a {
  display: block;
  font-size: 0.88rem;
  color: rgba(245,246,247,0.55);
  margin-bottom: 8px;
  transition: color var(--transition);
}

.footer-nav a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(245,246,247,0.08);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.8rem;
}

.footer-bottom a { color: rgba(245,246,247,0.4); }
.footer-bottom a:hover { color: var(--white); }

/* =============================================
   PAGE HERO (inner pages)
   ============================================= */
.page-hero {
  background: linear-gradient(135deg, var(--ink) 0%, #0D2235 60%, var(--blue-dark) 100%);
  color: var(--white);
  padding: 64px 0 56px;
  position: relative;
  overflow: hidden;
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

/* =============================================
   HERO WAVE DECORATION
   Shared corner-flourish artwork (assets/waves.svg). One component,
   .bg-wave-frame(--top/--bottom), used on both the homepage .hero
   (top-left + bottom-right pair) and every inner-page .page-hero
   (top-left only), so the flourish is identical wherever it appears.
   Each instance is rotated/mirrored from the source's native
   top-right orientation. Rotating an <img> in place does not resize
   its CSS box, so a naive rotate() drifts the art off its intended
   corner - the frame holds the PIXEL FOOTPRINT the rotated art should
   fill, and the img is sized to the frame's PRE-rotation dimensions
   (via the shared --wave-size custom property) and rotated around its
   own centre, so the rotated result exactly fills the frame
   edge-to-edge.
   ============================================= */
.bg-wave-frame {
  --wave-size: clamp(280px, 42vw, 620px);
  position: absolute;
  width: var(--wave-size);
  aspect-ratio: 662.07416 / 580.77445;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.9;
}
.bg-wave-frame--top { top: 0; left: 0; }
.bg-wave-frame--bottom { bottom: 0; right: 0; }
.bg-wave-frame .bg-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  height: var(--wave-size);
  width: auto;
}
.bg-wave-frame--top .bg-wave { transform: translate(-50%, -50%) scaleX(-1) rotate(90deg); }
.bg-wave-frame--bottom .bg-wave { transform: translate(-50%, -50%) scaleY(-1) rotate(90deg); }

/* Inner-page .page-hero variant - same artwork/position, 60% the
   homepage size (shorter, single-column sections don't have room for
   the full-size flourish). */
.bg-wave-frame--small { --wave-size: clamp(170px, 25vw, 370px); }

@media (max-width: 900px) {
  .bg-wave-frame { --wave-size: clamp(200px, 60vw, 420px); opacity: 0.6; }
  .bg-wave-frame--small { --wave-size: clamp(120px, 36vw, 250px); }
}

.page-hero-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 10px;
}

.page-hero h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.page-hero p {
  font-size: 1.05rem;
  color: rgba(245,246,247,0.7);
  max-width: 580px;
  line-height: 1.7;
}

/* =============================================
   ABOUT PAGE
   ============================================= */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 52px;
}

.value-card {
  padding: 28px;
  border-radius: 10px;
  border: 1px solid rgba(107,119,133,0.15);
}

.value-icon {
  font-size: 1.8rem;
  margin-bottom: 14px;
}

.value-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.value-card p {
  font-size: 0.88rem;
  color: var(--storm);
  line-height: 1.65;
}

.team-intro {
  font-size: 1.05rem;
  color: var(--storm);
  max-width: 620px;
  line-height: 1.7;
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.approach-item {
  display: flex;
  gap: 16px;
}

.approach-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--cloud);
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  -webkit-text-stroke: 1px rgba(31,122,69,0.4);
}

.approach-item h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}

.approach-item p {
  font-size: 0.88rem;
  color: var(--storm);
  line-height: 1.65;
}

/* =============================================
   FOUNDING TEAM PROFILES (About page)
   ============================================= */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  margin-top: 52px;
}

.profile-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 28px;
  border-radius: 10px;
  border: 1px solid rgba(107,119,133,0.15);
}

.profile-links {
  display: flex;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.profile-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}

.profile-link:hover { color: var(--green-dark); }

.profile-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  flex-shrink: 0;
  color: var(--white);
}

.profile-link-icon svg { width: 14px; height: 14px; }

.profile-link--linkedin .profile-link-icon { background: #0A66C2; }
.profile-link--card .profile-link-icon { background: var(--green); }

.profile-passion {
  margin-top: auto;
  padding-top: 20px;
}

.profile-passion-inner {
  padding: 14px 16px;
  background: rgba(31,122,69,0.08);
  border: 1px solid rgba(31,122,69,0.18);
  border-radius: 8px;
}

.profile-passion-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--green);
  margin-bottom: 4px;
}

.profile-passion-text {
  font-size: 0.85rem;
  color: var(--green-dark);
  line-height: 1.6;
}

.profile-photo {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 18px;
}

.profile-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.profile-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.profile-bio {
  font-size: 0.9rem;
  color: var(--storm);
  line-height: 1.7;
}

/* =============================================
   SERVICES PAGE
   ============================================= */
.service-detail {
  padding: 80px 0;
  scroll-margin-top: 84px;
}

.service-detail:nth-child(odd) { background: var(--cloud); }

.service-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.service-detail:nth-child(even) .service-detail-inner {
  direction: rtl;
}

.service-detail:nth-child(even) .service-detail-content {
  direction: ltr;
}

.service-detail:nth-child(even) .service-detail-visual {
  direction: ltr;
}

.service-detail-content .section-label { margin-bottom: 8px; }

.service-detail-content h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.25;
}

.service-detail-content p {
  font-size: 0.97rem;
  color: var(--storm);
  line-height: 1.7;
  margin-bottom: 24px;
}

.service-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 500;
}

.service-feature::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* App-shell: a Power-Apps-style master/detail widget for "the tools
   that aren't software" - a left-hand nav menu of 10 capabilities,
   click one and its detail renders on the right. Deliberately mimics
   a canvas-app screen (nav rail + content pane) since the section
   sits directly under a Microsoft Power Platform page. Scoped to
   this section only; base .service-features/.service-feature (the
   plain checklist used for "Potential solutions" on the six problem
   pages) is untouched. Behaviour wired in js/app-shell.js. */
.app-shell {
  display: grid;
  grid-template-columns: 420px 1fr;
  max-width: 960px;
  border: 1px solid rgba(107,119,133,0.15);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
}

.app-shell-menu {
  background: var(--cloud);
  border-right: 1px solid rgba(107,119,133,0.15);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 480px;
  overflow-y: auto;
}

.app-shell-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--storm);
  transition: background var(--transition), color var(--transition);
}

.app-shell-item:hover {
  background: rgba(31,122,69,0.08);
  color: var(--ink);
}

.app-shell-item.is-active {
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.app-shell-item-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  background: rgba(107,119,133,0.12);
  flex-shrink: 0;
  transition: background var(--transition);
}

.app-shell-item.is-active .app-shell-item-icon {
  background: var(--green);
}

.app-shell-item-label {
  line-height: 1.3;
}

.app-shell-panels {
  position: relative;
  padding: 40px;
  min-height: 360px;
  display: flex;
  align-items: center;
}

.app-shell-panel {
  display: none;
}

.app-shell-panel.is-active {
  display: block;
  animation: appShellFade 0.25s ease;
}

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

.app-shell-panel-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.app-shell-panel-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  background: rgba(31,122,69,0.1);
  flex-shrink: 0;
}

.app-shell-panel-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}

.app-shell-panel-text {
  font-size: 0.95rem;
  color: var(--storm);
  line-height: 1.7;
  max-width: 520px;
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .app-shell-menu {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid rgba(107,119,133,0.15);
  }
  .app-shell-item {
    flex-shrink: 0;
    width: auto;
  }
  .app-shell-item-label {
    white-space: nowrap;
  }
  .app-shell-panels {
    padding: 24px;
  }
}

.service-visual-box {
  background: linear-gradient(135deg, var(--ink) 0%, var(--blue-dark) 100%);
  border-radius: 14px;
  padding: 40px;
  color: var(--white);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}

.visual-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(255,255,255,0.07);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
}

.visual-stat-label { font-size: 0.85rem; color: rgba(245,246,247,0.65); }
.visual-stat-value { font-size: 1rem; font-weight: 700; color: var(--green-light); }

/* =============================================
   SUCCESS / FORM STATES
   ============================================= */
.form-success {
  display: none;
  text-align: center;
  padding: 40px 20px;
}

.form-success.show { display: block; }

.form-success-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.form-success h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 8px;
}

.form-success p {
  font-size: 0.9rem;
  color: var(--storm);
}

/* =============================================
   PROOF / EXPERIENCE SECTION (about.html)
   ============================================= */
.proof-section {
  padding: 80px 0;
  background: var(--white);
  border-bottom: 1px solid rgba(107,119,133,0.12);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}

.proof-card {
  background: var(--white);
  border: 1px solid rgba(107,119,133,0.12);
  border-radius: 10px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}

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

.proof-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.proof-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
}

.proof-tag--case {
  background: rgba(31,122,69,0.1);
  color: var(--green-dark);
}

.proof-tag--exp {
  background: rgba(15,95,163,0.1);
  color: var(--blue-dark);
}

.proof-domain {
  font-size: 0.75rem;
  color: var(--storm);
  font-weight: 500;
}

.proof-title {
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.proof-body {
  font-size: 0.88rem;
  color: var(--storm);
  line-height: 1.65;
  margin: 0;
  flex-grow: 1;
}

.proof-result {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green-dark);
  background: rgba(31,122,69,0.07);
  border-left: 3px solid var(--green);
  padding: 8px 12px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0;
}

.proof-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(107,119,133,0.12);
  font-size: 0.8rem;
  color: var(--storm);
}

.proof-author-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--blue));
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .hero-inner          { grid-template-columns: 1fr; }
  .hero-card           { display: none; }
  .hero-orbit,
  .hero-lines          { display: none; } /* circle identity + connector lines hidden on mobile for now */
  .about-inner         { grid-template-columns: 1fr; gap: 40px; }
  .contact-inner       { grid-template-columns: 1fr; gap: 40px; }
  .service-detail-inner { grid-template-columns: 1fr; }
  .service-detail:nth-child(even) .service-detail-inner { direction: ltr; }
  .form-row            { grid-template-columns: 1fr; }
  .proof-grid          { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .nav-links           { display: none; }
  /* align-items: stretch overrides the base .nav-links rule's
     align-items: center, which was the root cause of the mismatched
     mobile menu - without it, every <li> shrinks to its own content
     width and centres itself instead of forming a consistent
     full-width list, so plain links, dropdown triggers and the CTA
     button all ended up different widths and alignments. */
  .nav-links.open      { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; top: 88px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid rgba(107,119,133,0.15); padding: 8px 0; box-shadow: var(--shadow); }
  .nav-links.open li   { border-bottom: 1px solid rgba(107,119,133,0.08); }
  .nav-links.open li:last-child { border-bottom: none; }
  .nav-links.open a    { display: block; width: 100%; box-sizing: border-box; padding: 14px 24px; border-bottom: none; font-size: 1rem; text-align: left; }
  .nav-toggle          { display: flex; }
  nav                  { position: relative; }
  .nav-dropdown-menu   {
    position: static;
    padding-top: 0;
    transform: none;
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .nav-dropdown.open .nav-dropdown-menu { visibility: visible; pointer-events: auto; max-height: 480px; }
  .nav-dropdown-menu-inner {
    min-width: 0;
    width: auto;
    max-width: none;
    background: var(--cloud);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .nav-dropdown-trigger { width: 100%; box-sizing: border-box; justify-content: space-between; padding: 14px 24px; font-size: 1rem; text-align: left; }
  .nav-dropdown-menu a { padding: 12px 24px 12px 36px; white-space: normal; }
  .nav-dropdown-menu .nav-dropdown-all { padding-left: 36px; }
  /* CTA gets visual emphasis as a distinct button rather than
     blending in as another list row. */
  .nav-links.open .nav-cta { display: block; width: calc(100% - 48px); box-sizing: border-box; margin: 10px 24px 6px; text-align: center; }
  .hero                { padding: 60px 0 52px; }
  section              { padding: 56px 0; }
  .about-stats         { grid-template-columns: 1fr; }
  .proof-grid          { grid-template-columns: 1fr; }
  .footer-inner        { flex-direction: column; gap: 32px; }
  .footer-bottom       { flex-direction: column; text-align: center; }
}

/* =============================================
   DIGITAL BUSINESS CARD
   Reuses brand tokens above - no new colour values
   introduced. Visual language matches .contact-method,
   .btn-primary and .strength-bullet patterns.
   ============================================= */
.vcard-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--cloud);
  padding: 24px;
}

.vcard {
  background: var(--white);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(107,119,133,0.12);
  padding: 36px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
}

.vcard-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--blue));
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 auto 18px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.vcard-name {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 4px;
}

.vcard-role {
  font-size: 0.92rem;
  color: var(--storm);
  font-weight: 500;
  margin-bottom: 2px;
}

.vcard-company {
  font-size: 0.85rem;
  color: var(--storm);
  margin-bottom: 24px;
}

.vcard-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.vcard-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid rgba(107,119,133,0.15);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 500;
  text-align: left;
  word-break: break-word;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.vcard-link:hover {
  border-color: var(--green);
  background: rgba(31,122,69,0.04);
  color: var(--ink);
}

.vcard-link-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(31,122,69,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  flex-shrink: 0;
}

.vcard-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  background: var(--green);
  color: var(--white);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.vcard-save:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
}

.vcard-state {
  color: var(--storm);
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 48px 12px;
}

/* Contact switcher - lets a visitor view a different person's
   card on the same page load without a fresh NFC tap or link.
   Sits above .vcard, styled to match .vcard-link / .vcard-save. */
.vcard-switcher {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid rgba(107,119,133,0.15);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.vcard-switcher-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--storm);
  white-space: nowrap;
}

.vcard-switcher-select {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid rgba(107,119,133,0.15);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.vcard-switcher-select:hover,
.vcard-switcher-select:focus {
  border-color: var(--green);
  outline: none;
}

@media (max-width: 480px) {
  .vcard { padding: 28px 22px; }
  .vcard-switcher { flex-direction: column; align-items: stretch; gap: 6px; }
}

/* =============================================
   PROBLEM JOURNEY - homepage "Sound familiar?" cards,
   golden-thread capstone, diagnostic CTA panel.
   Moved in from index.html's inline <style> block so the
   homepage draws from the same single stylesheet as every
   other page. Uses the brand tokens defined in :root above -
   no locally duplicated colour values.
   ============================================= */
.hero-lines { pointer-events: none; }
.hero-orbit { pointer-events: none; }
.hero-orbit .node { pointer-events: auto; }

.pj-problems { background: var(--white); }

.pj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 1100px) { .pj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .pj-grid { grid-template-columns: 1fr; } }

.pj-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(107,119,133,0.15);
  border-radius: 12px;
  padding: 28px 26px 22px;
  background: var(--white);
  transition: box-shadow var(--transition), transform var(--transition);
}
.pj-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.pj-card h3 {
  margin: 0 0 14px;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
}

.pj-symptoms {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  color: var(--storm);
  font-size: 0.95rem;
  line-height: 1.5;
}
.pj-symptoms li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
}
.pj-symptoms li::before {
  content: "-";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 600;
}

.pj-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-top: 1px solid rgba(107,119,133,0.15);
  padding-top: 14px;
  margin-top: auto;
}
.pj-stat .num {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}
.pj-stat .cap {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--storm);
}

.pj-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.pj-pillars { display: flex; gap: 6px; flex-wrap: wrap; }
.pj-pill {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pj-pill.digi { background: rgba(15,95,163,.10); color: var(--blue-dark); }
.pj-pill.excl { background: rgba(31,122,69,.10); color: var(--green-dark); }
.pj-pill.sust { background: rgba(30,45,61,.08); color: var(--storm); }

.pj-fix-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.pj-fix-link:hover { text-decoration: underline; }

/* ---------- Golden thread capstone ---------- */
.pj-thread {
  background: var(--ink);
  color: var(--white);
  padding: 72px 0;
}
.pj-thread .pj-thread-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}
.pj-thread .pj-thread-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-light);
  margin-bottom: 18px;
}
.pj-thread h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.35;
  margin: 0 0 20px;
  font-weight: 600;
}
.pj-thread h2 em {
  font-style: normal;
  color: var(--green-light);
}
.pj-thread p {
  color: rgba(245,246,247,0.75);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 auto 30px;
  max-width: 680px;
}
.pj-thread .pj-thread-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.pj-btn-green {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  padding: 12px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition);
}
.pj-btn-green:hover { background: var(--green-dark); color: var(--white); }
.pj-btn-ghost {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.35);
  color: var(--white);
  font-weight: 600;
  padding: 12px 26px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color var(--transition);
}
.pj-btn-ghost:hover { border-color: var(--white); color: var(--white); }

/* ---------- Diagnostic panel ---------- */
.pj-diagnostic {
  background: var(--white);
  padding: 72px 0;
}
.pj-diagnostic-panel {
  max-width: 880px;
  margin: 0 auto;
  background: var(--green);
  border-radius: 16px;
  padding: 52px 48px;
  text-align: center;
  color: var(--white);
}
.pj-diagnostic-panel h2 {
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 600;
  color: var(--white);
}
.pj-diagnostic-panel p {
  margin: 0 auto 28px;
  max-width: 580px;
  color: rgba(255,255,255,.88);
  font-size: 1rem;
  line-height: 1.6;
}
.pj-btn-white {
  display: inline-block;
  background: var(--white);
  color: var(--green);
  font-weight: 600;
  padding: 12px 28px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--transition);
}
.pj-btn-white:hover { background: var(--cloud); color: var(--green); }
@media (max-width: 720px) {
  .pj-diagnostic { padding: 48px 0; }
  .pj-diagnostic-panel { padding: 40px 24px; border-radius: 12px; margin-left: 16px; margin-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .pj-card, .pj-card:hover { transition: none; transform: none; }
}

/* =============================================
   PROBLEM DETAIL PAGES - one page per "Sound familiar?"
   card (/problems/*.html). Reuses .page-hero, .btn-primary/
   .btn-outline, .service-feature and .proof-card from above;
   the classes below are the pieces those pages need that
   don't already exist elsewhere on the site.
   ============================================= */
.page-hero .hero-actions { margin-top: 28px; }

.problem-crumb {
  font-size: 0.85rem;
  color: rgba(245,246,247,0.6);
  margin-bottom: 14px;
}
.problem-crumb a { color: rgba(245,246,247,0.85); font-weight: 600; }
.problem-crumb a:hover { color: var(--white); }

.problem-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.stat-box .stat-source {
  display: block;
  font-size: 0.72rem;
  color: rgba(30,45,61,0.55);
  margin-top: 8px;
  line-height: 1.4;
}

.stat-box .stat-source a {
  color: rgba(30,45,61,0.7);
  text-decoration: underline;
  text-decoration-color: rgba(30,45,61,0.3);
  text-underline-offset: 2px;
}

.stat-box .stat-source a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}

.callout {
  border-left: 3px solid var(--green);
  background: rgba(31,122,69,0.05);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 24px;
  margin-top: 40px;
}
.callout p { color: var(--storm); font-size: 0.95rem; line-height: 1.7; margin: 0; }
.callout p strong { color: var(--ink); }
.callout.callout-blue { border-left-color: var(--blue); background: rgba(15,95,163,0.05); }

.check-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.check-list li {
  padding-left: 30px;
  position: relative;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.55;
}
.check-list li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: -1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proof-card--empty {
  border-style: dashed;
  box-shadow: none;
  align-items: flex-start;
  justify-content: center;
  min-height: 160px;
}
.proof-card--empty:hover { transform: none; box-shadow: none; border-color: var(--green); }
.proof-card--empty .proof-body { color: rgba(30,45,61,0.7); }

/* Case-study template card: same proof-card layout, populated with
   bracketed placeholder copy so it can be edited in place once a real
   case study is ready. Dashed border + grey tag keep it visually
   distinct from a genuine proof-card so it never reads as a real claim. */
.proof-card--template {
  border-style: dashed;
  box-shadow: none;
}
.proof-card--template:hover { transform: none; box-shadow: none; border-color: var(--green); }
.proof-card--template .proof-domain,
.proof-card--template .proof-title,
.proof-card--template .proof-body,
.proof-card--template .proof-result,
.proof-card--template .proof-meta {
  color: rgba(30,45,61,0.6);
}
.proof-card--template .proof-result {
  background: rgba(107,119,133,0.08);
  border-left-color: rgba(107,119,133,0.4);
}
.proof-card--template .proof-author-badge {
  background: rgba(107,119,133,0.25);
}
.proof-tag--template {
  background: rgba(107,119,133,0.15);
  color: var(--storm);
}

.factsheet-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--white);
  border: 1px solid rgba(107,119,133,0.15);
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--shadow);
  max-width: 620px;
}

.factsheet-card + .factsheet-card {
  margin-top: 16px;
}

.factsheet-card--link {
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}

.factsheet-card--link:hover,
.factsheet-card--link:focus-visible {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  outline: none;
}

.factsheet-card--link:focus-visible {
  box-shadow: var(--shadow-lg), 0 0 0 2px var(--blue);
}

.factsheet-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  background: rgba(31,122,69,0.08);
  border-radius: var(--radius);
}

.factsheet-info h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.factsheet-info p {
  font-size: 0.88rem;
  color: var(--storm);
  line-height: 1.5;
  margin: 0 0 10px;
}

.factsheet-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-dark);
  background: rgba(15,95,163,0.1);
  padding: 3px 10px;
  border-radius: 20px;
}

a.factsheet-badge {
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

a.factsheet-badge:hover {
  background: var(--blue-dark);
  color: var(--white);
}

/* =============================================
   IMAGE CAROUSEL
   Vanilla, dependency-free (no external CDN per CSP).
   Single slide in view, scroll-snap track, prev/next
   buttons + dot indicators, auto-wired by js/carousel.js
   ============================================= */
.carousel {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(107,119,133,0.15);
  background: var(--cloud);
  /* Fixed aspect ratio (matches the site's landscape screenshots) so
     every slide is the same height regardless of the source image's
     orientation. Portrait images are contained within this box
     rather than stretched, so they letterbox against the background
     instead of blowing out the carousel's height. */
  aspect-ratio: 12 / 7;
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(107,119,133,0.2);
  background: var(--white);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background var(--transition), color var(--transition);
  z-index: 1;
}

.carousel-btn:hover {
  background: var(--green);
  color: var(--white);
}

.carousel-btn--prev {
  left: -21px;
}

.carousel-btn--next {
  right: -21px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(107,119,133,0.3);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}

.carousel-dot.active {
  background: var(--green);
  transform: scale(1.3);
}

@media (max-width: 700px) {
  .carousel-btn--prev {
    left: 4px;
  }
  .carousel-btn--next {
    right: 4px;
  }
}

.carousel-slide img {
  cursor: zoom-in;
}

/* Lightbox popup - click a carousel slide to view it larger.
   Single shared overlay built and reused by js/carousel.js;
   toggled with .is-open rather than mounted/unmounted so the
   fade transition has something to animate. */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,34,53,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 48px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
}

.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(245,246,247,0.12);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.lightbox-close:hover {
  background: rgba(245,246,247,0.25);
}

@media (max-width: 700px) {
  .lightbox-overlay {
    padding: 16px;
  }
  .lightbox-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }
}

/* Simple table - used by the unlisted /factsheets page to list
   downloadable links. Kept as a small reusable component rather
   than one-off inline styles in case another internal listing page
   needs the same treatment later. */
.simple-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(107,119,133,0.15);
  border-radius: var(--radius);
}

.simple-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.simple-table th,
.simple-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(107,119,133,0.15);
  vertical-align: top;
}

.simple-table tr:last-child td {
  border-bottom: none;
}

.simple-table th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--storm);
  background: var(--cloud);
}

.simple-table td {
  color: var(--ink);
}

.simple-table-link {
  font-family: monospace;
  font-size: 0.82rem;
  color: var(--blue-dark);
  word-break: break-all;
  text-decoration: none;
}

.simple-table-link:hover {
  text-decoration: underline;
}