:root {
    --ink: #0a2540;
    --slate: #536171;
    --iris: #8A5F1A;
    --iris-dark: #6e4c15;
    --mist: #e5edf5;
    --snow: #f6f9fc;
    --paper: #ffffff;
    --accent-orange: var(--iris);
    --accent-orange-dark: var(--iris-dark);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
  }

  /* The navbar is fixed and overlays content, so anchor targets need
     breathing room to avoid landing hidden behind the floating pill. */
  section[id] {
    scroll-margin-top: 104px;
  }

  body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }

  /* ---- Navigation bar ---- */
  .navbar {
    position: fixed;
    top: 16px;
    left: max(14dvw, calc((100vw - 1382px) / 2));
    right: max(14dvw, calc((100vw - 1382px) / 2));
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 68px;
    margin: 0;
    padding-left: 36px;
    padding-right: 24px;
    background: #ffffff;
    border: 1px solid var(--mist);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(10, 37, 64, 0.03), 0 12px 28px rgba(10, 37, 64, 0.08);
    transition: box-shadow 0.35s ease, border-color 0.35s ease, background 0.35s ease,
      backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
  }

  .navbar.scrolled {
    border-color: rgba(10, 37, 64, 0.16);
    box-shadow: 0 1px 0 rgba(10, 37, 64, 0.05), 0 16px 36px rgba(10, 37, 64, 0.14);
  }

  /* Desktop-only: frosted glass effect once scrolled */
  @media (min-width: 861px) {
    .navbar.scrolled {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }
  }

  .navbar-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .navbar-logo-img {
    width: 160px;
    height: auto;
    display: block;
  }

  .navbar-logo-icon { display: none; }

  .navbar-links {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    justify-content: flex-end;
  }

  .navbar-links a {
    position: relative;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--slate);
    text-decoration: none;
    white-space: nowrap;
    padding: 6px 2px;
    transition: color 0.15s ease;
  }

  .navbar-links a::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 2px;
    background: var(--iris);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
  }

  .navbar-links a:hover {
    color: var(--ink);
  }

  .navbar-links a:hover::after {
    transform: scaleX(1);
  }

  .navbar-links a.btn-primary,
  .navbar-links a.btn-primary:hover {
    color: #ffffff;
  }

  .navbar-links a.btn-primary::after {
    display: none;
  }

  .navbar .btn {
    flex-shrink: 0;
    width: auto;
    padding: 10px 20px;
    font-size: 14px;
  }

  .navbar .navbar-mobile-cta {
    display: none;
  }

  .navbar-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
    flex-shrink: 0;
  }

  .navbar-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease, width 0.25s ease;
  }

  .navbar-toggle.is-open .navbar-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .navbar-toggle.is-open .navbar-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .navbar-toggle.is-open .navbar-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  @media (max-width: 960px) {
    .navbar-links {
      display: flex;
      position: absolute;
      top: 68px;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      background: var(--paper);
      border-bottom: 1px solid var(--mist);
      padding: 0 24px;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      transform: translateY(-8px);
      transition: max-height 0.32s ease, opacity 0.25s ease, transform 0.3s ease, padding 0.32s ease;
    }
    .navbar-links.mobile-open {
      max-height: 360px;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      padding: 16px 24px 24px;
    }
    .navbar-links a { padding: 10px 0; }
    .navbar-toggle { display: flex; }
    .navbar .navbar-desktop-cta { display: none; }
    .navbar-links.mobile-open .navbar-mobile-cta {
      display: inline-flex;
      margin-top: 8px;
    }
  }

  /* Mobile keeps the original full-width flat navbar look (transparent,
     turns solid on scroll, square edges) but stays position: fixed so it
     still floats/overlays instead of pushing content down. */
  @media (max-width: 860px) {
    .navbar {
      left: 0;
      right: 0;
      top: 0;
      height: 76px;
      margin: 0;
      padding-left: 5dvw;
      padding-right: 5dvw;
      background: #ffffff;
      border: none;
      border-bottom: 1px solid var(--mist);
      border-radius: 0;
      box-shadow: 0 1px 0 rgba(10, 37, 64, 0.03), 0 8px 24px rgba(10, 37, 64, 0.04);
    }

    .navbar.scrolled {
      background: #ffffff;
      border-bottom-color: var(--mist);
      box-shadow: 0 1px 0 rgba(10, 37, 64, 0.03), 0 8px 24px rgba(10, 37, 64, 0.04);
    }

    .navbar-links { top: 76px; }

    /* Morph the wordmark logo into the compact icon on scroll */
    .navbar-logo {
      position: relative;
      width: 36px;
      height: 36px;
    }

    .navbar-logo-full,
    .navbar-logo-icon {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%) scale(1);
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .navbar-logo-full { opacity: 1; }

    .navbar-logo-icon {
      display: block;
      width: 34px;
      height: 34px;
      opacity: 0;
      transform: translateY(-50%) scale(0.6);
      pointer-events: none;
    }

    .navbar.scrolled .navbar-logo-full {
      opacity: 0;
      transform: translateY(-50%) scale(0.6);
    }

    .navbar.scrolled .navbar-logo-icon {
      opacity: 1;
      transform: translateY(-50%) scale(1);
    }
  }

  .hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(180deg, var(--snow) 0%, var(--paper) 55%);
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
  }

  /* Signature gradient mesh atmosphere */
  .hero::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -15%;
    width: 60vw;
    height: 60vw;
    max-width: 900px;
    max-height: 900px;
    background: radial-gradient(circle at 30% 30%, rgba(138, 95, 26, 0.35), rgba(244, 75, 204, 0.22) 45%, rgba(255, 187, 0, 0.12) 70%, transparent 75%);
    filter: blur(60px);
    border-radius: 50%;
    pointer-events: none;
  }

  .hero::after {
    content: "";
    position: absolute;
    bottom: -25%;
    left: -10%;
    width: 45vw;
    height: 45vw;
    max-width: 600px;
    max-height: 600px;
    background: radial-gradient(circle, rgba(138, 95, 26, 0.12), transparent 70%);
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none;
  }

  .hero-side-image {
    position: absolute;
    z-index: 1;
    width: clamp(380px, 34vw, 560px);
    height: clamp(350px, 35vw, 510px);
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(10, 37, 64, 0.18);
    pointer-events: none;
    will-change: transform;
  }

  .hero-side-image-left {
    left: -3.5vw;
    top: 38%;
    transform: translateY(-50%) translateX(0%);
  }

  .hero-side-image-right {
    right: -3.5vw;
    top: 62%;
    transform: translateY(-50%) translateX(0%);
  }

  @media (max-width: 1200px) {
    .hero-side-image { display: none; }
  }

  .hero.hero-video {
    background: #0a1f3d;
  }

  .hero.hero-video::before,
  .hero.hero-video::after {
    display: none;
  }

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

  .hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 31, 61, 0.6) 0%, rgba(10, 31, 61, 0.4) 45%, rgba(10, 31, 61, 0.65) 100%);
  }

  .hero.hero-video .hero-inner {
    position: relative;
    z-index: 2;
  }

  .hero.hero-video h1 {
    color: #ffffff;
  }

  .hero.hero-video .subhead {
    color: rgba(255, 255, 255, 0.8);
  }

  .hero.hero-video .btn-ghost {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
  }

  .hero.hero-video .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
  }

  .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
  }

  .eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--iris);
    text-transform: uppercase;
    margin-bottom: 24px;
  }

  h1 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(40px, 6vw, 68px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 24px;
  }

  .subhead {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--slate);
    max-width: 560px;
    margin: 0 0 40px;
  }

  .hero .subhead {
    margin-left: auto;
    margin-right: auto;
  }

  .cta-row {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .hero .cta-row {
    justify-content: center;
  }

  .btn {
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: -0.01em;
    text-decoration: none;
    display: inline-block;
  }

  .btn-primary {
    background: var(--iris);
    color: #ffffff;
    border: 1px solid var(--iris);
    box-shadow: 0 2px 5px rgba(138, 95, 26, 0.35), 0 8px 20px rgba(138, 95, 26, 0.15);
  }

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

  .btn-ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--mist);
  }

  .btn-ghost:hover {
    border-color: var(--slate);
    background: var(--snow);
  }

  @media (max-width: 1200px) {
    .hero { padding-left: 5dvw; padding-right: 5dvw; }
  }

  @media (max-width: 480px) {
    .cta-row { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; }

    /* Sustainability + product hero: keep the two CTA buttons side by side.
       Setting flex-direction alone was not enough — at their natural width
       the pair is wider than a phone's content box, so flex-wrap pushed the
       second one onto its own line. nowrap + an equal flex share (with
       tighter padding) makes them split the row instead. */
    .sustain-hero .cta-row,
    .page-hero .cta-row {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
    }

    .sustain-hero .cta-row .btn,
    .page-hero .cta-row .btn {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
      padding: 14px 10px;
      font-size: 15px;
      text-align: center;
      white-space: nowrap;
    }

    /* Home page hero only: same fix — keep the two CTA buttons side by
       side instead of stacking full-width. */
    .hero .cta-row { flex-direction: row; }
    .hero .cta-row .btn { width: auto; }

    /* Home page financial-impact section: same fix. */
    .impact .cta-row { flex-direction: row; }
    .impact .cta-row .btn { width: auto; }

    /* Financial-potential section: single button, keep it content-width
       instead of full-width. */
    .fin2-cta .btn { width: auto; }

    /* Product-page closing CTA: same fix. */
    .product-cta .cta-row { flex-direction: row; }
    .product-cta .cta-row .btn { width: auto; }
  }

  /* ---- Financial Impact section ---- */
  /* ===== Financial Potential — split editorial layout (alt) ===== */
  .fin2 {
    position: relative;
    background: #0a1f3d;
    color: #ffffff;
    padding: 120px max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
    isolation: isolate;
  }

  .fin2-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
  }

  .fin2-eyebrow {
    display: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FCB545;
    margin-bottom: 18px;
    padding: 6px 14px;
    border: 1px solid rgba(252, 181, 69, 0.35);
    border-radius: 999px;
    background: rgba(252, 181, 69, 0.08);
  }

  .fin2-left h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(32px, 3.8vw, 46px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
  }
  .fin2-accent { color: #ffffff; }

  .fin2-subhead {
    color: #a9b6c9;
    font-size: 17px;
    line-height: 1.6;
    max-width: 460px;
    margin: 0 0 32px;
  }

  .fin2-cta { margin-bottom: 20px; }

  .fin2-disclaimer {
    font-size: 11px;
    font-style: italic;
    color: #64748d;
    max-width: 420px;
    margin: 0;
  }

  /* Two copies of the disclaimer exist in the markup (one inside the left
     column for desktop, one after the stat box for mobile) so it can sit
     in a different visual position per breakpoint without JS. Only one is
     shown at a time. */
  .fin2-disclaimer-mobile { display: none; }

  /* Right column: one frosted box (cursor-follow glow, same treatment as
     .feature-tab-panel-wrap) containing the three stat rows, separated by
     hairline dividers. */
  .fin2-right {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 4px 28px;
    transition: border-color 0.25s ease;
  }

  .fin2-right::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .fin2-right:hover::before {
    opacity: 1;
  }

  .fin2-right:hover {
    border-color: rgba(255, 255, 255, 0.22);
  }

  .fin2-stat {
    position: relative;
    z-index: 1;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .fin2-stat:first-child { border-top: none; }

  .fin2-stat-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
  }

  .fin2-num {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(40px, 4.4vw, 56px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #ffffff;
  }

  .fin2-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7d8ba4;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    white-space: nowrap;
  }

  .fin2-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #98a6bd;
    margin: 10px 0 16px;
  }

  .fin2-bar {
    display: none;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
  }
  .fin2-bar span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #e0912a 0%, #FCB545 100%);
    transition: width 1.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .fin2.in-view .fin2-bar span { width: var(--fill); }

  /* Hero row (ROI) gets the gold treatment */
  .fin2-stat-hero .fin2-num {
    color: #ffffff;
  }

  @media (max-width: 900px) {
    .fin2-inner { grid-template-columns: 1fr; gap: 44px; }
    .fin2-disclaimer-desktop { display: none; }
    .fin2-disclaimer-mobile { display: block; margin-top: -20px; }
  }

  @media (max-width: 860px) {
    .fin2 { padding: 80px 5dvw; }
  }

  .impact {
    position: relative;
    background: #0a1f3d;
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
    isolation: isolate;
  }

  /* Contained video strip between the stats and the disclaimer, with the
     left/right edges fading into the section's background colour. */
  .impact-video-strip {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100dvw;
    height: 406px;
    /* Negative bottom margin pulls the content below up over the strip's
       faded bottom edge (~30% of its height). */
    margin-top: 0;
    margin-bottom: -122px;
    overflow: hidden;
    pointer-events: none;
  }

  .impact-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Fades on all four edges so the video melts into the section colour. */
  .impact-video-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg, #0a1f3d 0%, rgba(10, 31, 61, 0) 100%) left center / 22% 100% no-repeat,
      linear-gradient(270deg, #0a1f3d 0%, rgba(10, 31, 61, 0) 100%) right center / 22% 100% no-repeat,
      linear-gradient(180deg, #0a1f3d 0%, rgba(10, 31, 61, 0) 100%) center top / 100% 32% no-repeat,
      linear-gradient(0deg, #0a1f3d 0%, rgba(10, 31, 61, 0) 100%) center bottom / 100% 32% no-repeat;
  }

  .impact-inner {
    position: relative;
    z-index: 1;
    max-width: none;
  }

  .impact .eyebrow {
    color: #ffc266;
  }

  .impact h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(32px, 4.5vw, 48px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    max-width: 720px;
  }

  .impact .subhead {
    color: #a9b6c9;
    max-width: 560px;
    margin: 0;
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 300px));
    gap: 48px;
    padding-top: 40px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
  }

  .stat-value {
    font-size: clamp(36px, 4.2vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin-bottom: 8px;
  }

  .stat-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7d8ba4;
    line-height: 1.4;
  }

  .disclaimer {
    font-size: 11px;
    font-style: italic;
    color: #64748d;
    max-width: 640px;
    margin-bottom: 48px;
  }

  .stat-label-sub {
    font-size: 0.85em;
  }

  .impact .btn-ghost {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
  }

  .impact .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
  }

  @media (max-width: 768px) {
    .stats-grid { grid-template-columns: 1fr; gap: 32px; }
  }

  @media (max-width: 860px) {
    .impact { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
    .impact-video-strip { height: 281px; margin-top: 0; margin-bottom: -85px; }
  }

  /* ---- Core Features section ---- */
  .features {
    background: var(--paper);
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
  }

  .features-inner {
    max-width: none;
  }

  .features-header {
    max-width: 620px;
    margin-bottom: 72px;
  }

  .features-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 18px;
  }

  .features-header .subhead {
    margin: 0;
  }

  .features-grid {
    display: grid;
    grid-template-columns: minmax(400px, 480px) minmax(400px, 1fr);
    gap: 64px;
    align-items: stretch;
  }

  /* Left column: status signal cards. Width comes from the grid track
     (minmax(260px, 480px) above), which shrinks/grows smoothly as the
     window resizes; height follows from aspect-ratio so the card can never
     balloon past its track and overlap the accordion. height:auto is
     required here — align-items:stretch on the grid would otherwise force
     a definite height and make the browser ignore aspect-ratio entirely. */
  .status-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    position: sticky;
    top: 100px;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04), 0 12px 28px rgba(10, 37, 64, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease;
  }

  /* Tablet image as a real <img> (sharp base + a blurred copy clipped to
     just the screen area, so the frame stays crisp). */
  .status-stack-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
  }


  .status-stack .status-stack-list,
  .status-stack .status-stack-toggle {
    position: relative;
    z-index: 1;
  }

  .status-stack:hover {
    transform: scale(1.035);
    border-color: rgba(10, 37, 64, 0.2);
  }

  .status-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04), 0 8px 20px rgba(10, 37, 64, 0.03);
    opacity: 0;
    transform: translateY(-22px) scale(0.94);
    transition: transform 0.25s ease, border-color 0.25s ease, opacity 0.3s ease;
  }

  .status-card.in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: transform 1.1s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, opacity 0.9s ease;
  }

  .status-card.in-view:nth-child(1) { transition-delay: 0s; }
  .status-card.in-view:nth-child(2) { transition-delay: 0.3s; }
  .status-card.in-view:nth-child(3) { transition-delay: 0.6s; }

  .status-card:hover {
    transform: scale(1.035);
    border-color: rgba(10, 37, 64, 0.2);
  }

  .status-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(138, 95, 26, 0.14);
    color: var(--iris);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(138, 95, 26, 0.15);
  }

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

  .status-card span {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
  }

  /* The Core Features tablet carries longer, two-line alerts than the energy
     one, so its text runs a touch smaller to sit comfortably in the card. */
  .status-stack:not(.energy-status-stack) .status-card span {
    font-size: 11.5px;
  }

  .status-card:nth-child(2) { margin-left: 24px; margin-right: 24px; }
  .status-card:nth-child(3) { margin-left: 48px; margin-right: 48px; }

  /* ---- Collapsed "notification stack" state (like iOS lock screen) ----
     Cards always share one absolutely-positioned coordinate system, so
     expanding/collapsing is a pure spring-transform animation (like iOS),
     never a layout-mode jump. JS supplies each card's expanded offset
     (--list-y) plus both container heights, so height animates too. */
  .status-stack-list {
    position: relative;
    transition: height 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .status-stack:not(.expanded) .status-stack-list {
    height: var(--collapsed-height, 72px);
  }

  .status-stack.expanded .status-stack-list {
    height: var(--expanded-height, auto);
  }

  .status-stack .status-card {
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform-origin: 50% 0;
    transition: transform 0.55s cubic-bezier(0.34, 1.45, 0.64, 1), opacity 0.4s ease, border-color 0.25s ease;
  }

  /* Peeking (non-front) cards in the collapsed stack only reveal a thin
     edge, not their label — hide the text so a wrapped message never
     shows up as a half-cut fragment behind the front card. */
  .status-stack:not(.expanded) .status-card:not(:nth-child(1)) span,
  .status-stack:not(.expanded) .status-card:not(:nth-child(1)) .status-icon {
    opacity: 0;
  }

  /* Collapsed: front card full size, the others tucked behind it with just
     their bottom edges peeking out, dimming as they recede. */
  .status-stack:not(.expanded) .status-card.in-view:nth-child(1) { transform: translateY(0) scale(1); z-index: 3; opacity: 1; transition-delay: 0s; }
  .status-stack:not(.expanded) .status-card.in-view:nth-child(2) { transform: translateY(12px) scale(0.94); z-index: 2; opacity: 0.7; transition-delay: 0.04s; }
  .status-stack:not(.expanded) .status-card.in-view:nth-child(3) { transform: translateY(24px) scale(0.88); z-index: 1; opacity: 0.45; transition-delay: 0.08s; }

  /* Expanded: each card springs down into its slot, lightly staggered so the
     stack visibly unfurls top-to-bottom. */
  .status-stack.expanded .status-card.in-view {
    transform: translateY(var(--list-y, 0px)) scale(1);
    opacity: 1;
  }

  .status-stack.expanded .status-card.in-view:nth-child(1) { transition-delay: 0s; }
  .status-stack.expanded .status-card.in-view:nth-child(2) { transition-delay: 0.05s; }
  .status-stack.expanded .status-card.in-view:nth-child(3) { transition-delay: 0.1s; }

  .status-stack-toggle {
    display: block;
    margin: 16px auto 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    padding: 7px 18px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    cursor: pointer;
    transition: opacity 0.25s ease, background 0.15s ease;
  }

  .status-stack-toggle:hover {
    background: rgba(255, 255, 255, 0.85);
  }

  .status-stack.expanded .status-stack-toggle {
    opacity: 0;
    pointer-events: none;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: none;
  }

  /* Features-section tablet: no card frame — only the tablet image shows.
     Also shrink to 80% of the row height and centre it vertically. */
  .status-stack:not(.energy-status-stack) {
    border: none;
    box-shadow: none;
    align-self: center;
    height: 80%;
  }

  .status-stack:not(.energy-status-stack):hover {
    transform: none;
  }

  /* Right column: accordion */
  .accordion {
    border-top: 1px solid var(--mist);
  }

  .accordion-item {
    border-bottom: 1px solid var(--mist);
  }

  .accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 24px 0;
    font-family: inherit;
  }

  .accordion-item-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 9px;
    background: rgba(138, 95, 26, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--iris);
    transition: background 0.2s ease;
  }

  .accordion-item-icon svg {
    width: 20px;
    height: 20px;
  }

  .accordion-item.active .accordion-item-icon {
    background: var(--iris);
    color: #ffffff;
  }

  .accordion-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
  }

  .accordion-title-group { flex: 1; }

  .accordion-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }

  .accordion-short {
    font-size: 15px;
    color: var(--slate);
    font-weight: 400;
  }

  .accordion-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--iris);
    font-size: 18px;
    transition: transform 0.2s ease;
  }

  .accordion-item.active .accordion-icon { transform: rotate(45deg); }

  .accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  .accordion-item.active .accordion-body {
    max-height: 200px;
  }

  .accordion-body-inner {
    padding: 0 40px 24px 56px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--slate);
  }

  .accordion-item.active .accordion-title { color: var(--iris); }

  .features-footer {
    margin-top: 32px;
  }

  .footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--iris);
    text-decoration: none;
  }

  .footer-link:hover { color: var(--iris-dark); }

  /* Stack the accordion below the tablet card before the two columns get
     cramped. Both grid tracks now have a hard 400px floor (800px + 64px
     gap = 864px combined), and the section content area is ~72% of the
     viewport width, so viewport width needs to be at least ~1200px
     (864 / 0.72) for two columns to fit without either one being forced
     below its floor. Stack below that to avoid overflow. */
  @media (max-width: 1200px) {
    .features-grid { grid-template-columns: 1fr; gap: 48px; }
    .status-stack { position: relative; top: auto; }
    /* Match the card to the tablet image's own wide ratio once it's
       stacked full-width — otherwise the 1:1 square ratio (meant for the
       narrower two-column track) makes the card, and the whole section,
       balloon in height at this full single-column width. This must live
       at the same breakpoint as the stacking above, not a narrower one,
       or there's a range where the two are out of sync. */
    .status-stack:not(.energy-status-stack) {
      aspect-ratio: 3452 / 2237;
      height: auto;
    }
  }

  @media (max-width: 860px) {
    .features { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
    /* Keep a positioning context so the absolutely-placed tablet image
       (.status-stack-bg) stays inside the card instead of escaping it. */
    .status-stack { position: relative; top: auto; }
    .status-stack .status-card { left: 10%; right: 10%; }
    /* Shrink notification text for mobile. The longest alerts don't fit on
       one line at a legible size, so wrap onto two lines instead of forcing
       nowrap (which was overflowing the card and bleeding into the blur
       behind it). JS re-measures each card's height, so wrapped text still
       lays out correctly. */
    .status-stack:not(.energy-status-stack) .status-card {
      align-items: flex-start;
      padding: 11px 14px;
      gap: 9px;
    }
    .status-stack:not(.energy-status-stack) .status-icon {
      margin-top: 1px;
    }
    .status-stack:not(.energy-status-stack) .status-card span {
      font-size: 11px;
      line-height: 1.35;
      white-space: normal;
    }
  }

  /* ---- Benefits section ---- */
  .benefits {
    position: relative;
    background: #0a1f3d;
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
    isolation: isolate;
  }

  .benefits::before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -20%;
    right: -10%;
    width: 45vw;
    height: 45vw;
    max-width: 600px;
    max-height: 600px;
    background: radial-gradient(circle, rgba(138, 95, 26, 0.2), transparent 70%);
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none;
  }

  .benefits-bg-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.05;
    pointer-events: none;
  }

  /* Recolours the video's hues to the section navy while keeping its
     light/motion pattern (colour blend = hue+saturation from this layer,
     luminosity from the video underneath). */
  .benefits-video-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #0a1f3d;
    mix-blend-mode: color;
    pointer-events: none;
  }

  .benefits-inner {
    position: relative;
    z-index: 2;
  }

  .benefits-header {
    max-width: 620px;
    margin-bottom: 48px;
  }

  .benefits .eyebrow {
    color: #ffc266;
  }

  .benefits h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 0;
  }

  .tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 0;
  }

  .tab-btn {
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #7d8ba4;
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 4px;
    margin-right: 24px;
    position: relative;
    letter-spacing: -0.01em;
  }

  .tab-btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--iris);
    transform: scaleX(0);
    transition: transform 0.2s ease;
  }

  .tab-btn.active {
    color: #ffffff;
  }

  .tab-btn.active::after {
    transform: scaleX(1);
  }

  .tab-panel {
    display: none;
  }

  .tab-panel.active {
    display: grid;
  }

  .tab-panel {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .benefit-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 32px 28px;
    transition: transform 0.25s ease, border-color 0.25s ease;
  }

  .benefit-card:hover {
    transform: scale(1.035);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .benefit-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .benefit-card:hover::before {
    opacity: 1;
  }

  .benefit-card-title,
  .benefit-card-desc {
    position: relative;
    z-index: 1;
  }

  .benefit-card-title {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 12px;
  }

  .benefit-card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #a9b6c9;
  }

  @media (max-width: 860px) {
    .benefits { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
    .tab-panel { grid-template-columns: 1fr; }

    /* Keep all tabs on one line, scrollable sideways if they overflow */
    .tab-nav {
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
    }
    .tab-nav::-webkit-scrollbar { display: none; }
    .tab-btn { white-space: nowrap; flex-shrink: 0; }
  }

  @media (max-width: 480px) {
    .tab-btn { margin-right: 12px; font-size: 13px; }
  }

  /* ---- Energy & Sustainability section ---- */
  .energy {
    background: var(--paper);
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
  }

  .energy-header {
    margin-bottom: 72px;
  }

  .energy-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 680px;
    margin-bottom: 18px;
  }

  /* Runs to half the content width rather than the global 560px cap. */
  .energy-header .subhead {
    margin: 0;
    max-width: 50vw;
  }

  .energy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: stretch;
  }

  .energy-status-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    position: sticky;
    top: 100px;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04), 0 12px 28px rgba(10, 37, 64, 0.04);
    transition: transform 0.25s ease, border-color 0.25s ease;
  }

  .energy-room-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }

  .energy-status-stack .status-stack-list,
  .energy-status-stack .status-stack-toggle {
    position: relative;
    z-index: 1;
  }

  /* Notifications hidden for now on the energy room card */
  .energy-status-stack .status-stack-list,
  .energy-status-stack .status-stack-toggle {
    display: none;
  }

  .energy-status-stack:hover {
    transform: scale(1.035);
    border-color: rgba(10, 37, 64, 0.2);
  }

  /* Sustainability widget card */
  .snapshot-card {
    background: var(--snow);
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 36px;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04), 0 12px 28px rgba(10, 37, 64, 0.04);
  }

  /* The "See More" button goes full width on mobile, where an inline-block
     would otherwise leave its label sitting on the left. */
  .snapshot-card > .btn {
    text-align: center;
  }

  .snapshot-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
  }

  .snapshot-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }

  .snapshot-subtitle {
    font-size: 13px;
    color: var(--slate);
  }

  .timeframe-toggle {
    display: inline-flex;
    background: var(--paper);
    border: 1px solid var(--mist);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
  }

  .timeframe-btn {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--slate);
    background: none;
    border: none;
    border-radius: 6px;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .timeframe-btn.active {
    background: var(--iris);
    color: #ffffff;
  }

  .snapshot-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    border-top: 1px solid var(--mist);
    border-bottom: 1px solid var(--mist);
    padding: 28px 0;
    margin-bottom: 20px;
  }

  .snapshot-metric-value {
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 6px;
    transition: opacity 0.15s ease;
  }

  .snapshot-metric-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--slate);
    line-height: 1.4;
  }

  .snapshot-footnote {
    font-size: 12px;
    font-style: italic;
    color: #8a97a8;
    margin-bottom: 28px;
  }

  .snapshot-metric-calc-cell {
    display: flex;
    align-items: stretch;
  }

  .snapshot-calc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .snapshot-checklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
  }

  /* ---- Savings calculator modal ---- */
  .savings-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 35, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .savings-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* The old savings calculator is hidden for now (the snapshot button links
     to sustainability.html#calculator instead). Needed because the rule
     above sets display:flex, which would otherwise beat the hidden
     attribute. Remove the `hidden` attribute in index.html to restore it. */
  .savings-modal-overlay[hidden] {
    display: none;
  }

  .savings-modal {
    position: relative;
    width: 380px;
    max-width: 100%;
    background: var(--paper);
    border: 1px solid var(--mist);
    border-radius: 20px;
    padding: 32px;
    color: var(--ink);
    box-shadow: 0 24px 60px rgba(10, 37, 64, 0.25);
    transform: translateY(16px) scale(0.97);
    transition: transform 0.25s ease;
  }

  .savings-modal-overlay.active .savings-modal {
    transform: translateY(0) scale(1);
  }

  .savings-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--snow);
    border: 1px solid var(--mist);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
  }

  .savings-modal-close:hover {
    background: var(--mist);
  }

  .savings-modal h3 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 4px;
  }

  .savings-modal-sub {
    font-size: 13px;
    color: var(--slate);
    margin: 0 0 24px;
  }

  .savings-modal-field {
    margin-bottom: 18px;
  }

  .savings-modal-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 8px;
  }

  .savings-modal-toggle {
    display: flex;
    border: 1px solid var(--mist);
    border-radius: 8px;
    overflow: hidden;
  }

  .savings-modal-toggle-btn {
    flex: 1;
    padding: 10px 8px;
    border: none;
    border-right: 1px solid var(--mist);
    background: var(--snow);
    color: var(--slate);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }

  .savings-modal-toggle-btn:last-child {
    border-right: none;
  }

  .savings-modal-toggle-btn.active {
    background: var(--ink);
    color: #ffffff;
  }

  .savings-modal-field input {
    width: 100%;
    background: var(--snow);
    border: 1px solid var(--mist);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--ink);
    font-size: 14px;
    font-family: inherit;
  }

  .savings-modal-field input:focus {
    outline: none;
    border-color: var(--iris);
  }

  .savings-modal-calculate {
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 14px;
    margin-top: 4px;
  }

  .savings-modal-thankyou {
    text-align: center;
  }

  .savings-modal-result-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 8px;
  }

  .savings-modal-result-value {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--iris-dark);
    margin-bottom: 16px;
  }

  .savings-modal-thankyou .savings-modal-sub {
    margin-bottom: 24px;
  }

  .savings-modal-again {
    width: 100%;
  }

  .checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    color: var(--ink);
  }

  .checklist-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(138, 95, 26, 0.12);
    color: var(--iris);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
  }

  .checklist-icon svg { width: 11px; height: 11px; }

  /* Stack the snapshot below the room card before the two columns get
     cramped — the room card is a square sized by the snapshot's height, so
     at mid widths it balloons and squeezes the snapshot. Stacking keeps
     both cards at sensible sizes. */
  @media (max-width: 1080px) {
    .energy-grid { grid-template-columns: 1fr; gap: 48px; }
    /* Relative (not sticky) so the room video stays contained in the card */
    .energy-status-stack { position: relative; top: auto; }
  }

  @media (max-width: 860px) {
    .energy { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
  }

  @media (max-width: 480px) {
    .snapshot-metrics { grid-template-columns: 1fr 1fr; }
    .snapshot-card { padding: 24px; }
  }

  /* ---- Trust section ---- */
  .trust {
    position: relative;
    background: #0a1f3d;
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
    isolation: isolate;
  }

  .trust::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -15%;
    left: 30%;
    width: 40vw;
    height: 40vw;
    max-width: 550px;
    max-height: 550px;
    background: radial-gradient(circle, rgba(138, 95, 26, 0.18), transparent 70%);
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none;
  }

  /* Same wave video as the benefits section, flipped upside down */
  .trust-bg-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleY(-1);
    opacity: 0.05;
    pointer-events: none;
  }

  .trust-video-tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #0a1f3d;
    mix-blend-mode: color;
    pointer-events: none;
  }

  .trust-inner {
    position: relative;
    z-index: 2;
  }

  .trust-header {
    max-width: 620px;
    margin-bottom: 64px;
  }

  .trust-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
  }

  .trust-header .subhead { margin: 0; color: #a9b6c9; }

  .trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .trust-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 28px 24px;
    transition: transform 0.25s ease, border-color 0.25s ease;
  }

  .trust-card:hover {
    transform: scale(1.035);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .trust-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .trust-card:hover::before {
    opacity: 1;
  }

  .trust-card-icon,
  .trust-card-title,
  .trust-card-desc {
    position: relative;
    z-index: 1;
  }

  .trust-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background: rgba(138, 95, 26, 0.14);
    color: #ffc266;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

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

  .trust-card-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 10px;
  }

  .trust-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #a9b6c9;
  }

  @media (max-width: 860px) {
    .trust { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
    .trust-grid { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 480px) {
    .trust-grid { grid-template-columns: 1fr; }
  }

  /* ---- Beyond SIMO section ---- */
  .beyond {
    background: var(--paper);
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
  }

  .beyond-header {
    max-width: 680px;
    margin-bottom: 64px;
  }

  .beyond-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 18px;
  }

  .beyond-header .subhead {
    margin: 0;
    max-width: 640px;
  }

  .beyond-accordion {
    display: flex;
    flex-direction: row;
    height: 440px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--mist);
    margin-bottom: 40px;
  }

  .beyond-accordion-item {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    background: var(--snow);
    border-right: 1px solid var(--mist);
    cursor: pointer;
    overflow: hidden;
    transition: flex 0.45s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
    padding: 28px;
  }

  .beyond-accordion-item:last-child {
    border-right: none;
  }

  .beyond-accordion-item.active {
    flex: 3.2;
    background: var(--paper);
    cursor: default;
  }

  .beyond-accordion-item[data-index="0"] {
    background-image: linear-gradient(to bottom, rgba(10, 31, 61, 0) 0%, rgba(10, 31, 61, 1) 100%), url('images/p1.jpg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
  }

  .beyond-accordion-item[data-index="0"] .beyond-accordion-collapsed-label {
    color: #ffffff;
  }

  .beyond-accordion-item[data-index="0"] .beyond-accordion-number {
    color: #ffc266;
  }

  .beyond-accordion-item[data-index="0"] .beyond-accordion-title {
    color: #ffffff;
  }

  .beyond-accordion-item[data-index="0"] .beyond-accordion-body-inner {
    color: #a9b6c9;
  }

  .beyond-accordion-item[data-index="1"] {
    background-image: linear-gradient(to bottom, rgba(10, 31, 61, 0) 0%, rgba(10, 31, 61, 1) 100%), url('images/p3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .beyond-accordion-item[data-index="1"] .beyond-accordion-collapsed-label {
    color: #ffffff;
  }

  .beyond-accordion-item[data-index="1"] .beyond-accordion-number {
    color: #ffc266;
  }

  .beyond-accordion-item[data-index="1"] .beyond-accordion-title {
    color: #ffffff;
  }

  .beyond-accordion-item[data-index="1"] .beyond-accordion-body-inner {
    color: #a9b6c9;
  }

  .beyond-accordion-item[data-index="2"] {
    background-image: linear-gradient(to bottom, rgba(10, 31, 61, 0) 0%, rgba(10, 31, 61, 1) 100%), url('images/p4.jpg');
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
  }

  .beyond-accordion-item[data-index="2"] .beyond-accordion-collapsed-label {
    color: #ffffff;
  }

  .beyond-accordion-item[data-index="2"] .beyond-accordion-number {
    color: #ffc266;
  }

  .beyond-accordion-item[data-index="2"] .beyond-accordion-title {
    color: #ffffff;
  }

  .beyond-accordion-item[data-index="2"] .beyond-accordion-body-inner {
    color: #a9b6c9;
  }

  .beyond-accordion-collapsed-label {
    position: absolute;
    left: 28px;
    bottom: 28px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    white-space: nowrap;
    opacity: 1;
    z-index: 1;
    transition: opacity 0.2s ease;
  }

  .beyond-accordion-content {
    position: relative;
    z-index: 1;
  }

  .beyond-accordion-item.active .beyond-accordion-collapsed-label {
    opacity: 0;
    pointer-events: none;
  }

  .beyond-accordion-content {
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
    max-width: 440px;
  }

  .beyond-accordion-item.active .beyond-accordion-content {
    opacity: 1;
  }

  .beyond-accordion-number {
    font-size: 13px;
    font-weight: 600;
    color: var(--iris);
    letter-spacing: 0.06em;
    margin-bottom: 12px;
  }

  .beyond-accordion-title {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    white-space: normal;
  }

  .beyond-accordion-body-inner {
    font-size: 15px;
    line-height: 1.6;
    color: var(--slate);
  }

  @media (max-width: 860px) {
    .beyond { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
  }

  /* ---- Contact / Demo Request section ---- */
  .contact {
    position: relative;
    background: #0a1f3d;
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
  }

  .contact::before {
    content: "";
    position: absolute;
    top: -20%;
    left: -10%;
    width: 45vw;
    height: 45vw;
    max-width: 600px;
    max-height: 600px;
    background: radial-gradient(circle, rgba(138, 95, 26, 0.2), transparent 70%);
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none;
  }

  .contact-inner {
    position: relative;
    z-index: 1;
  }

  .contact-header {
    max-width: 620px;
    margin-bottom: 64px;
  }

  .contact-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
  }

  .contact-header .subhead { margin: 0; color: #a9b6c9; }

  .contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }

  .contact-form-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 20px;
    padding: 40px;
  }

  .cta-thankyou {
    text-align: center;
    padding: 40px 0;
  }

  .cta-thankyou h3 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 12px;
  }

  .cta-thankyou p {
    font-size: 17px;
    color: #a9b6c9;
    margin: 0;
  }

  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

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

  .form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7d8ba4;
    margin-bottom: 8px;
  }

  .form-field input,
  .form-field textarea {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 13px 16px;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  .form-field input::placeholder,
  .form-field textarea::placeholder {
    color: #5c6b83;
  }

  .form-field input:focus,
  .form-field textarea:focus {
    outline: none;
    border-color: var(--accent-orange);
    background: rgba(255, 255, 255, 0.07);
  }

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

  .contact-form .btn-cta {
    width: 100%;
    text-align: center;
    margin-top: 4px;
    background: var(--accent-orange);
    border: 1px solid var(--accent-orange);
    color: #ffffff;
  }

  .contact-form .btn-cta:hover {
    background: var(--accent-orange-dark);
    border-color: var(--accent-orange-dark);
  }

  .form-note {
    font-size: 13px;
    color: #7d8ba4;
    line-height: 1.6;
    margin-top: 4px;
    text-align: center;
  }

  .contact-info-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    padding: 24px 28px;
  }

  .info-block-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-orange);
    margin-bottom: 10px;
  }

  .info-block-text {
    font-size: 15px;
    line-height: 1.6;
    color: #d5deea;
  }

  .contact-direct {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 56px;
  }

  .contact-direct-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .contact-direct-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--accent-orange);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .contact-direct-icon svg { width: 100%; height: 100%; }

  .contact-direct a {
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
  }

  .contact-direct a:hover {
    color: var(--accent-orange);
  }

  @media (max-width: 860px) {
    .contact { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }

    /* Keep phone / email / website on one line */
    .contact-direct { flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
    .contact-direct-row { gap: 6px; min-width: 0; }
    .contact-direct-icon { width: 15px; height: 15px; }
    .contact-direct a { font-size: 12px; white-space: nowrap; }
  }

  @media (max-width: 600px) {
    .form-row { grid-template-columns: 1fr; }
    .contact-form-card { padding: 28px 24px; }
  }

  /* ---- Footer ---- */
  .site-footer {
    background: var(--paper);
    border-top: 1px solid var(--mist);
    padding: 56px max(14dvw, calc((100vw - 1382px) / 2)) 40px;
  }

  .footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
    padding-bottom: 40px;
  }

  .footer-brand-logo {
    width: 190px;
    height: auto;
    display: block;
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
  }

  .footer-nav a {
    font-size: 14px;
    font-weight: 500;
    color: var(--slate);
    text-decoration: none;
  }

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

  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 32px;
    border-top: 1px solid var(--mist);
  }

  .footer-contact-line {
    font-size: 13px;
    color: var(--slate);
  }

  .footer-copyright {
    font-size: 13px;
    color: #93a2b3;
  }

  @media (max-width: 480px) {
    .site-footer { padding: 48px 24px 32px; }
    .footer-top { flex-direction: column; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
  }

  /* ==============================================================
     Product page (product.html)
     ============================================================== */

  /* ---- Page hero (used by inner pages) ---- */
  /* row-reverse + wrap: the tablet is the first child in the DOM, so on a
     wide screen it sits on the right of the text, and the moment the two
     columns no longer fit side by side the text wraps onto its own line
     BELOW the tablet. Flex items can never overlap, so the heading can
     never end up underneath the tablet at any viewport width. */
  .page-hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    row-gap: 36px;
    overflow: hidden;
    background: linear-gradient(180deg, var(--snow) 0%, var(--paper) 55%);
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
  }

  .page-hero::before {
    content: "";
    position: absolute;
    top: -20%;
    right: -15%;
    width: 55vw;
    height: 55vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle at 30% 30%, rgba(138, 95, 26, 0.3), rgba(244, 75, 204, 0.18) 45%, rgba(255, 187, 0, 0.1) 70%, transparent 75%);
    filter: blur(60px);
    border-radius: 50%;
    pointer-events: none;
    /* Sits behind the hero content without needing the content to be
       positioned — the media column must stay unpositioned so the video's
       multiply blend can still reach the section background. */
    z-index: 0;
  }

  /* Scroll-scrubbed video filling the empty right side of the page hero */
  /* The media column is the flex item, not the video itself. The column is
     70% of the video's width, so the video deliberately overflows it. */
  .page-hero-media {
    /* Single source of truth: the video's width. It scales with the
       viewport, and both the column width (70% of it) and the column height
       (the video's own height) are derived from it — so the relationship
       holds at every screen size automatically. */
    --video-w: clamp(420px, 38vw, 720px);
    /* Deliberately NOT positioned and NO z-index: either would create a
       stacking context that isolates the video's multiply blend, leaving
       its white background visible as a solid white box. */
    flex: 0 0 calc(var(--video-w) * 0.7);
    height: calc(var(--video-w) * 649 / 770);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page-hero-video {
    /* Full width — wider than its 70% column, so it overflows evenly on
       both sides. Height matches the column exactly. */
    width: var(--video-w);
    max-width: none;
    height: 100%;
    object-fit: cover;
    /* Multiply blend makes the video's white background disappear into the
       light page background, leaving only the darker content visible. */
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  /* Mobile / tablet: stack the video above the hero text. Set to 1200px to
     match the sustainability hero's own stacking breakpoint below, so the
     two never disagree and there's no in-between zone with no padding. */
  @media (max-width: 1200px) {
    .page-hero {
      justify-content: flex-start;
      padding-top: 84px;
      padding-bottom: 58px;
    }

    .page-hero-media {
      /* Stacked: the column goes full width and the video fills it, so the
         70% overflow trick is dropped here. */
      flex: 1 1 100%;
      margin: 8dvh -5dvw 28px;
      width: calc(100% + 10dvw);
      height: auto;
    }

    .page-hero-video {
      width: 100%;
      max-width: none;
      min-width: 0;
      height: min(70vw, 420px);
      aspect-ratio: auto;
      /* contain, not cover: the full-bleed box is wider than the video's own
         ratio, so cover was cropping the tablet's edges off. The leftover
         space is invisible anyway thanks to the white bg + multiply blend. */
      object-fit: contain;
    }
  }

  .page-hero-inner {
    position: relative;
    z-index: 1;
    /* Matching flex basis: text and tablet share the row until the pair no
       longer fits, at which point the text wraps below the tablet. */
    flex: 1 1 400px;
    min-width: 300px;
    max-width: 780px;
  }

  .page-hero-inner h1 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(36px, 5.4vw, 60px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 20px;
  }

  .page-hero-inner .subhead { margin: 0 0 36px; }

  /* Sustainability page hero only: let the subhead span the same width as
     the heading instead of the default 560px cap. */
  .sustain-hero .subhead { max-width: none; }

  /* No gold/pink radial glow on this hero — the villa render brings its own
     colour, and the glow tinted its white background. Product hero keeps it. */
  .sustain-hero::before {
    display: none;
  }


  /* Sustainability page hero only: a scattered collage of live room-status
     snapshot cards sitting beside the hero copy. */
  .sustain-hero {
    display: flex;
    /* This hero has no tablet video, so it keeps the normal text-left order
       rather than the product hero's row-reverse wrap behaviour. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 56px;
    /* The villa render is the section background. It is a 16:9 image with
       the room already sitting in its right-hand third, so anchoring it to
       the right edge lines the artwork up beside the hero copy. */
    background-image: url('images/hero-villa-bg.jpg');
    background-repeat: no-repeat;
    /* Inset from the right by the same gutter the copy uses, otherwise the
       image's right edge sits flush against the viewport — and since the
       villa is already in the right third of the render, it ended up
       jammed into the corner. */
    background-position-x: right max(14dvw, calc((100vw - 1382px) / 2));
    background-position-y: center;
    /* Sized by WIDTH, not `contain`. With `contain` the image scales to the
       section's height, so on a tall or narrow window it grew right across
       the copy and the dark navy text landed on top of the trees. Capping
       the width keeps the artwork in its own half at every viewport. */
    /* +30% over the original min(46%, 820px) sizing. */
    background-size: min(59.8%, 1066px) auto;
  }

  /* Real <img> version of the villa render, used only on mobile once the
     CSS background-image is dropped below. Hidden on desktop since the
     background-image above already shows it there. */
  .sustain-hero-img {
    display: none;
  }

  .sustain-hero .page-hero-inner {
    flex: 1 1 420px;
    /* Stays clear of the artwork on the right. */
    max-width: min(620px, 44%);
  }

  .sustain-snapshot-collage {
    position: relative;
    flex-shrink: 1;
    width: clamp(420px, 42vw, 580px);
    height: clamp(420px, 44vw, 560px);
  }

  /* The collage is currently hidden in favour of the villa render. Kept as
     an explicit rule because its own width/height above would otherwise let
     it still occupy space in the hero's flex row. */
  .sustain-snapshot-collage[hidden] {
    display: none;
  }


  /* Every card uses the same fixed size as the original single card —
     only position (via the .snap-card-* modifiers below) varies. */
  .sustain-hero-snapshot {
    position: absolute;
    width: 320px;
    display: flex;
    flex-direction: column;
    background: var(--snow);
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04), 0 12px 28px rgba(10, 37, 64, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .sustain-hero-snapshot:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.06), 0 20px 40px rgba(10, 37, 64, 0.12);
  }

  /* Staggered dashboard-style placement (like a Stripe collage). Each card
     is the same 320px card, scaled via transform (which scales its font,
     padding and border together) rather than resized property-by-property. */
  .snap-card-a {
    left: 35%;
    top: 0;
    z-index: 2;
    transform: scale(0.9);
    transform-origin: top left;
  }
  .snap-card-a:hover { transform: scale(0.9) translateY(-4px); }

  .snap-card-b {
    left: 0;
    top: 20%;
    z-index: 1;
    transform: scale(0.7);
    transform-origin: top left;
  }
  .snap-card-b:hover { transform: scale(0.7) translateY(-4px); }

  .snap-card-c {
    left: 40%;
    top: 50%;
    z-index: 4;
  }

  .snap-card-d {
    left: 11%;
    top: 80%;
    z-index: 1;
    transform: scale(0.6);
    transform-origin: top left;
  }
  .snap-card-d:hover { transform: scale(0.6) translateY(-4px); }

  /* Mobile only: keep the previously-tuned smaller scale so the collage
     still fits the stacked mobile layout (desktop above reverted to its
     earlier, larger scale). */
  @media (max-width: 1200px) {
    .snap-card-a { transform: scale(0.7); }
    .snap-card-a:hover { transform: scale(0.7) translateY(-4px); }

    .snap-card-b { transform: scale(0.5); }
    .snap-card-b:hover { transform: scale(0.5) translateY(-4px); }

    .snap-card-c { transform: scale(0.8); transform-origin: top left; }
    .snap-card-c:hover { transform: scale(0.8) translateY(-4px); }

    .snap-card-d { transform: scale(0.4); }
    .snap-card-d:hover { transform: scale(0.4) translateY(-4px); }
  }

  .sustain-snapshot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--mist);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
  }

  .sustain-snapshot-live {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #16a34a;
  }

  .sustain-snapshot-live .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  }

  .sustain-snapshot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--mist);
    font-size: 14px;
    color: var(--ink);
  }

  .sustain-snapshot-row:last-child {
    border-bottom: none;
  }

  .sustain-snapshot-time {
    font-size: 13px;
    color: var(--slate);
  }

  .sustain-pill {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
  }

  .sustain-pill-neutral {
    background: var(--mist);
    color: var(--slate);
  }

  .sustain-pill-amber {
    background: rgba(252, 181, 69, 0.16);
    color: #b5760a;
  }

  .sustain-pill-green {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
  }

  @media (max-width: 1200px) {
    .sustain-hero {
      /* Stack into a column here — this used to come from .page-hero, which
         now stays a wrapping row for the product hero's tablet. */
      flex-direction: column;
      align-items: stretch;
      padding-left: 5dvw;
      padding-right: 5dvw;
    }

    /* Mobile: drop the villa CSS background-image entirely and go plain
       white — the real <img>.sustain-hero-img below stands in for it,
       placed above the heading instead. */
    .sustain-hero {
      background-image: none;
      background-color: #ffffff;
      padding-top: 84px;
    }

    .sustain-hero .page-hero-inner {
      max-width: none;
    }

    .sustain-hero-img {
      display: block;
      /* Full-bleed: break out of .sustain-hero's 5dvw side padding so the
         image spans the true viewport width. */
      width: 100dvw;
      max-width: 100dvw;
      margin: 0 -5dvw 28px;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      object-position: right center;
      border-radius: 0;
    }

    /* Keep the same scattered/scaled collage look as desktop — just
       center it above the hero copy once the hero stacks into a column.

       The width MUST be capped to the container here. Its desktop value is
       clamp(420px, 42vw, 580px), and in a column flex container the line's
       cross-size is the widest item — so a 420px collage on a ~350px phone
       stretched every sibling (heading, subhead, buttons) to 420px too, and
       .page-hero's overflow:hidden then clipped them off-screen. */
    .sustain-snapshot-collage {
      width: min(100%, 580px);
      max-width: 100%;
      margin: 5dvh auto 36px;
      order: -1;
    }
  }

  /* On genuinely narrow phones, scale the whole collage down uniformly so
     it still fits the viewport without altering the desktop layout itself. */
  @media (max-width: 480px) {
    .sustain-snapshot-collage {
      transform: scale(0.82);
      transform-origin: top center;
    }
  }

  @media (max-width: 1200px) {
    .page-hero { padding-left: 5dvw; padding-right: 5dvw; }
  }

  /* ---- Opportunity ---- */
  .opportunity {
    position: relative;
    background: #0a1f3d;
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
  }

  .opportunity::before {
    content: "";
    position: absolute;
    top: -10%;
    right: -10%;
    width: 40vw;
    height: 40vw;
    max-width: 500px;
    max-height: 500px;
    background: radial-gradient(circle, rgba(138, 95, 26, 0.22), transparent 70%);
    filter: blur(70px);
    border-radius: 50%;
    pointer-events: none;
  }

  .opportunity-inner {
    position: relative;
    z-index: 1;
  }

  .opportunity-header {
    max-width: 720px;
    margin-bottom: 56px;
  }

  .opportunity .eyebrow { color: #ffc266; }

  .opportunity-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-top: 16px;
  }

  .opportunity .stats-grid {
    margin-bottom: 56px;
  }

  .opportunity-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 40px;
  }

  .opportunity-highlight {
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }

  .opportunity-highlight-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #ffc266;
    margin-top: 2px;
  }

  .opportunity-highlight-icon svg { width: 100%; height: 100%; }

  .opportunity-highlight-icon .material-symbols-outlined {
    font-size: 22px;
    line-height: 1;
  }

  .opportunity-highlight p {
    font-size: 14px;
    line-height: 1.6;
    color: #a9b6c9;
  }

  .opportunity-highlight strong {
    color: #ffffff;
    font-weight: 600;
  }

  @media (max-width: 860px) {
    .opportunity { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
    .opportunity-highlights { grid-template-columns: 1fr; }
  }

  @media (max-width: 768px) {
    .opportunity .stats-grid { grid-template-columns: 1fr; gap: 32px; }
  }

  /* ---- How SIMO Works ---- */
  .how-it-works {
    position: relative;
    background: radial-gradient(ellipse 900px 600px at 15% 0%, rgba(138, 95, 26, 0.24), transparent 70%), radial-gradient(ellipse 700px 500px at 100% 100%, rgba(138, 95, 26, 0.14), transparent 70%), #0a1f3d;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
  }

  .how-header {
    max-width: 640px;
    margin-bottom: 64px;
  }

  .how-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 16px 0 18px;
  }

  .how-header .subhead { margin: 0; color: #a9b6c9; }

  .how-photo-wrap {
    position: relative;
  }

  /* The combined room+app artwork is a transparent PNG (room baked in, phone
     lower-left), so the frame carries no chrome — the navy section shows
     through the transparent areas. */
  .how-photo-frame {
    position: relative;
    width: 100%;
  }

  .how-photo-img {
    display: block;
    width: 100%;
    height: auto;
  }

  .how-photo-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .how-photo-lines line {
    stroke: #ffffff;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }

  .how-photo-dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--iris);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
  }

  .how-photo-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 8px 18px 8px 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    white-space: normal;
    cursor: pointer;
    width: max-content;
    max-width: 270px;
    z-index: 2;
    transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-radius 0.35s ease;
  }

  .how-photo-card.is-returning {
    transition: max-width 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, transform 0.35s ease, border-radius 0.35s ease;
  }

  .how-photo-card.expanded {
    align-items: flex-start;
    max-width: 270px;
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
    z-index: 10;
  }

  .how-photo-card-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(138, 95, 26, 0.18);
    color: var(--iris-dark);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .how-photo-card-icon .material-symbols-outlined {
    font-size: 18px;
    line-height: 1;
  }

  .how-photo-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .how-photo-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
  }

  .how-photo-card-expand {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--iris);
    font-size: 16px;
    line-height: 1;
    transition: transform 0.2s ease;
  }

  .how-photo-card.expanded .how-photo-card-expand {
    transform: rotate(45deg);
  }

  .how-photo-card-list {
    display: flex;
    list-style: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .how-photo-card.expanded .how-photo-card-list {
    max-height: 220px;
    opacity: 1;
    margin-top: 10px;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s, opacity 0.35s ease 0.1s, margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
  }

  .how-photo-card-list li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--slate);
    padding-left: 14px;
    position: relative;
    white-space: normal;
  }

  .how-photo-card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--iris);
  }

  @media (max-width: 860px) {
    .how-it-works { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
  }

  @media (max-width: 640px) {
    .how-photo-card { padding: 6px 10px 6px 6px; gap: 7px; max-width: 150px; }
    .how-photo-card.expanded { max-width: 225px; }
    .how-photo-card-icon { width: 24px; height: 24px; }
    .how-photo-card-icon .material-symbols-outlined { font-size: 14px; }
    .how-photo-card-title { font-size: 11px; }
    .how-photo-card-list li { font-size: 12px; }

    /* Mobile card positions (inline styles need the !important), mapped to
       the requested layout: Senses upper-left (red), Control Pad upper-right
       (green), Smart Devices mid-left (blue), Dashboards mid-right (pink).
       Right-side cards anchor from the right edge so they never overflow. */
    .how-photo-card[data-line="lineSenses"] { left: 26% !important; right: auto !important; top: 12% !important; }
    .how-photo-card[data-line="lineControl"] { left: auto !important; right: 8% !important; top: 25% !important; }
    .how-photo-card[data-line="lineDevices lineDevices2"] { left: 22% !important; right: auto !important; top: 45% !important; }
    .how-photo-card[data-line="lineDashboard"] { left: auto !important; right: 18% !important; top: 48% !important; }
    .how-photo-card[data-line="lineApp"] { left: 12% !important; right: auto !important; top: 25% !important; }
  }

  /* ---- Shared light info card (How SIMO Works + Roles) ---- */
  .how-grid .info-card,
  .roles-carousel-track .info-card {
    background: var(--snow);
    border: 1px solid var(--mist);
    border-radius: 14px;
    padding: 28px 24px;
    transition: transform 0.25s ease, border-color 0.25s ease;
  }

  .how-grid .info-card:hover,
  .roles-carousel-track .info-card:hover {
    transform: scale(1.02);
    border-color: var(--slate);
  }

  .how-grid .info-card-icon,
  .roles-carousel-track .info-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(138, 95, 26, 0.1);
    color: var(--iris);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .how-grid .info-card-icon svg,
  .roles-carousel-track .info-card-icon svg { width: 22px; height: 22px; }

  .how-grid .info-card-icon .material-symbols-outlined,
  .roles-carousel-track .info-card-icon .material-symbols-outlined {
    font-size: 24px;
    line-height: 1;
  }

  .how-grid .info-card h3,
  .roles-carousel-track .info-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }

  .how-grid .info-card-desc,
  .roles-carousel-track .info-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--slate);
    margin-bottom: 16px;
  }

  .how-grid .info-card-list,
  .roles-carousel-track .info-card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .how-grid .info-card-list li,
  .roles-carousel-track .info-card-list li {
    font-size: 14px;
    color: var(--slate);
    padding-left: 16px;
    position: relative;
  }

  .how-grid .info-card-list li::before,
  .roles-carousel-track .info-card-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--iris);
  }

  .how-grid .info-card .checklist,
  .roles-carousel-track .info-card .checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .how-grid .info-card .checklist li,
  .roles-carousel-track .info-card .checklist li {
    font-size: 14px;
    color: var(--ink);
    line-height: 1.5;
    padding-left: 16px;
    position: relative;
  }

  .how-grid .info-card .checklist li::before,
  .roles-carousel-track .info-card .checklist li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--iris);
  }

  /* ---- Feature Explorer ---- */
  .feature-explorer {
    position: relative;
    background: #061527;
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
  }

  .feature-explorer::before {
    content: "";
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 45vw;
    height: 45vw;
    max-width: 600px;
    max-height: 600px;
    background: radial-gradient(circle, rgba(138, 95, 26, 0.2), transparent 70%);
    filter: blur(80px);
    border-radius: 50%;
    pointer-events: none;
  }

  .feature-explorer-inner {
    position: relative;
    z-index: 1;
  }

  .feature-explorer-header {
    max-width: 640px;
    margin-bottom: 56px;
  }

  .feature-explorer .eyebrow { color: #ffc266; }

  .feature-explorer-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 16px 0 18px;
  }

  .feature-explorer-header .subhead { margin: 0; color: #a9b6c9; }

  .feature-explorer-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px;
    align-items: start;
  }

  .feature-tab-slider {
    display: flex;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
  }

  .feature-tab-arrow {
    display: none;
    flex-shrink: 0;
    align-self: center;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: #c3c7e0;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .feature-tab-arrow svg { width: 16px; height: 16px; }

  .feature-tab-arrow:hover {
    background: var(--iris);
    border-color: var(--iris);
    color: #ffffff;
  }

  .feature-tab-arrow:disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
  }

  .feature-tab-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
  }

  .feature-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: inherit;
    text-align: left;
    font-size: 14.5px;
    font-weight: 500;
    color: #c3c7e0;
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
  }

  .feature-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: inherit;
  }

  .feature-tab-icon svg {
    width: 100%;
    height: 100%;
  }

  .feature-tab:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .feature-tab.active {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e0912a;
  }

  .feature-tab-panel-wrap {
    position: relative;
    overflow: hidden;
    display: grid;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 36px;
    min-height: 360px;
    transition: border-color 0.25s ease;
  }

  .feature-tab-panel-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .feature-tab-panel-wrap:hover::before {
    opacity: 1;
  }

  .feature-tab-panel-wrap:hover {
    border-color: rgba(255, 255, 255, 0.22);
  }

  /* All panels occupy the same grid cell, so the container's height is
     always set by the tallest panel and never jumps between tabs. */
  .feature-tab-panel {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
  }

  .feature-tab-panel.active {
    opacity: 1;
    visibility: visible;
  }

  .feature-tab-panel h3 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 600;
    color: #FCB545;
    margin-bottom: 10px;
  }

  .feature-tab-panel-desc {
    font-size: 15px;
    color: #a9b6c9;
    margin-bottom: 44px;
  }

  .feature-tab-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }

  .feature-tab-item-title {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 6px;
  }

  .feature-tab-panel-grid p {
    font-size: 14px;
    line-height: 1.6;
    color: #a9b6c9;
  }

  @media (max-width: 860px) {
    .feature-explorer { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
    .feature-explorer-grid { grid-template-columns: 1fr; gap: 24px; }

    /* Turn the tab list into a horizontally scrollable slider */
    .feature-tab-list {
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
      gap: 8px;
    }
    .feature-tab-list::-webkit-scrollbar { display: none; }
    .feature-tab { white-space: nowrap; flex-shrink: 0; }

    .feature-tab-arrow { display: flex; }

    .feature-tab-panel-grid { grid-template-columns: 1fr; }
  }

  /* ---- Roles ---- */
  .roles {
    background: var(--paper);
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
  }

  .roles-header {
    max-width: 640px;
    margin-bottom: 64px;
  }

  .roles-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 16px 0 18px;
  }

  .roles-header .subhead { margin: 0; }

  .info-card-footnote {
    font-size: 9px;
    color: var(--slate);
    margin-top: 16px;
  }

  /* Arrows are absolutely positioned (not flex siblings) so JS can pin them
     to the outer edge of the outermost card rather than the section edges. */
  .roles-carousel {
    position: relative;
  }

  .roles-carousel-viewport {
    position: relative;
    overflow: visible;
  }

  .roles-carousel-track {
    position: relative;
    width: 100%;
  }

  .roles-carousel-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(220px, 24vw, 300px);
    margin-left: clamp(-150px, -12vw, -110px);
    transform-origin: center center;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, border-color 0.25s ease, box-shadow 0.4s ease;
  }

  .roles-carousel-card.is-active {
    cursor: default;
  }

  .roles-carousel-card.is-active {
    border-color: var(--iris);
    box-shadow: 0 24px 48px rgba(10, 37, 64, 0.16);
  }

  .roles-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--mist);
    background: var(--snow);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 6;
  }

  .roles-carousel-arrow svg {
    width: 20px;
    height: 20px;
  }

  .roles-carousel-arrow:hover {
    background: var(--iris);
    border-color: var(--iris);
    color: #ffffff;
  }

  @media (max-width: 860px) {
    .roles { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }

    .roles-carousel-arrow { display: none; }

    .roles-carousel-viewport {
      overflow: visible;
    }

    .roles-carousel-track {
      display: flex;
      flex-direction: column;
      gap: 20px;
      height: auto !important;
    }

    .roles-carousel-card {
      position: static;
      width: 100%;
      margin-left: 0;
      transform: none !important;
      opacity: 1 !important;
      z-index: auto !important;
    }

    .roles-carousel-card.is-active {
      border-color: var(--mist);
      box-shadow: none;
    }
  }

  /* ---- Comparison table ---- */
  .comparison {
    background: var(--paper);
    color: var(--ink);
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
  }

  .comparison-header {
    max-width: 900px;
    margin-bottom: 56px;
  }

  .comparison .eyebrow { color: var(--iris-dark); }

  .comparison-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 16px 0 0;
  }

  .comparison-table-wrap {
    overflow-x: auto;
  }

  .comparison-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
  }

  .comparison-table th {
    text-align: left;
    padding: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
    border-bottom: 1px solid var(--mist);
  }

  .comparison-table th:last-child {
    color: var(--iris-dark);
    background: rgba(138, 95, 26, 0.06);
  }

  .comparison-table td {
    padding: 18px 16px;
    font-size: 14px;
    line-height: 1.55;
    vertical-align: top;
    border-bottom: 1px solid var(--mist);
  }

  .comparison-table td:first-child {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
  }

  .comparison-table td:nth-child(2) {
    color: var(--slate);
  }

  .comparison-table td:last-child {
    color: var(--ink);
    background: rgba(138, 95, 26, 0.06);
  }

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

  @media (max-width: 860px) {
    .comparison { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
  }

  /* ---- Notable projects ---- */
  .projects {
    background: #0a1f3d;
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
  }

  .projects-header {
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
  }

  .projects-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 16px 0 0;
  }

  .projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch;
  }

  .project-card-sleeve {
    position: relative;
    width: 100%;
  }

  .project-card-vinyl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 16px 32px rgba(10, 37, 64, 0.28);
    transform: translateY(0) rotate(0deg);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 0;
    pointer-events: none;
  }

  /* Image stays put behind the card on hover (no slide-out reveal),
     consistent across desktop and mobile. */

  .project-card {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 32px;
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .project-card:hover,
  .project-card-sleeve:hover .project-card {
    transform: scale(1.035);
    border-color: rgba(255, 255, 255, 0.25);
  }

  .project-card-sleeve .project-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.75);
  }

  .project-card-sleeve .project-card h3,
  .project-card-sleeve .project-stat-value {
    color: var(--ink);
  }

  .project-card-sleeve .project-desc,
  .project-card-sleeve .project-stat-label {
    color: var(--slate);
  }

  .project-card-sleeve .project-stats {
    border-top: 1px solid rgba(10, 37, 64, 0.12);
    border-bottom: 1px solid rgba(10, 37, 64, 0.12);
  }

  .project-card-sleeve .project-tag {
    color: var(--iris-dark);
    background: rgba(138, 95, 26, 0.18);
    border: 1px solid rgba(217, 142, 20, 0.3);
  }

  .project-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--iris);
    background: rgba(138, 95, 26, 0.1);
    padding: 5px 12px;
    border-radius: 999px;
  }

  .project-card h3 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin: 18px 0 8px;
  }

  .project-desc {
    font-size: 14px;
    color: #a9b6c9;
    margin-bottom: 24px;
  }

  .project-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 0;
    margin-bottom: 20px;
  }

  .project-stat-value {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
  }

  .project-stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #a9b6c9;
    margin-top: 4px;
  }

  .project-footnote {
    font-size: 12px;
    color: #7d8ba4;
  }

  .project-card-next {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent;
    border-style: dashed;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.25);
  }

  .project-card-next:hover {
    transform: scale(1.035);
    border-color: var(--iris);
  }

  .project-next-link {
    display: inline-block;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--iris);
    text-decoration: none;
  }

  .project-next-link:hover {
    text-decoration: underline;
  }

  @media (max-width: 860px) {
    .projects { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
    .projects-grid { grid-template-columns: 1fr; }
  }

  /* ---- Product CTA ---- */
  .product-cta {
    position: relative;
    background: radial-gradient(ellipse 900px 500px at 50% 100%, rgba(138, 95, 26, 0.16), transparent 70%), #0a1f3d;
    color: #ffffff;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
    text-align: center;
  }

  .product-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
  }

  .product-cta h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
  }

  .product-cta .subhead {
    color: #a9b6c9;
    margin: 0 auto 36px;
  }

  .product-cta .cta-row {
    justify-content: center;
    margin-bottom: 32px;
  }

  .product-cta .btn-ghost {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
  }

  .product-cta .btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
  }

  .product-cta-contact {
    font-size: 13px;
    color: #7d8ba4;
  }

  @media (max-width: 860px) {
    .product-cta { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
  }

  /* ---- Sustainability page: "not a luxury anymore" rotating globe ---- */
  .sustain-globe {
    position: relative;
    background: #0a1f3d;
    color: #ffffff;
    padding: 100px 14dvw 90px;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
  }

  .sustain-globe .eyebrow,
  .sustain-globe h2,
  .sustain-globe-frame,
  .sustain-globe-dots {
    position: relative;
    z-index: 2;
  }

  .sustain-globe .eyebrow {
    color: #FCB545;
    margin-bottom: 12px;
  }

  .sustain-globe h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 auto 56px;
    max-width: 900px;
  }

  .sustain-globe-frame {
    position: relative;
    width: min(90vw, 480px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 50%;
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  }


  /* Soft, blurred light glow behind the sphere (atmospheric halo) */
  .sustain-globe-frame::before {
    content: "";
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160, 200, 255, 0.4) 0%, rgba(120, 170, 255, 0.18) 45%, transparent 72%);
    filter: blur(24px);
    z-index: 0;
    transform: scale(1);
    transform-origin: 50% 0%;
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  }

  /* The rotating Earth: a real 3D sphere (Three.js, see sustainability.html
     script) mapped with the satellite Earth texture, auto-rotating. This
     div is the mount point the canvas gets appended into. */
  .sustain-globe-sphere {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    overflow: hidden;
    transform: scale(1);
    /* Grow downward from the top edge so the enlarged sphere never rises
       into the section heading above it. */
    transform-origin: 50% 0%;
    transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
  }

  /* Later slides progressively enlarge the earth (each 40% bigger than the
     previous) while the overlay text stays put. Only the sphere layer (and
     its glow) scales, and .sustain-globe clips anything that spills past
     the section. */
  .sustain-globe-frame.zoom-2 .sustain-globe-sphere,
  .sustain-globe-frame.zoom-2::before {
    transform: scale(1.5);
  }

  .sustain-globe-frame.zoom-3 .sustain-globe-sphere,
  .sustain-globe-frame.zoom-3::before {
    transform: scale(2.1);
  }

  .sustain-globe-frame.zoom-4 .sustain-globe-sphere,
  .sustain-globe-frame.zoom-4::before {
    transform: scale(2.94);
  }

  .sustain-globe-sphere canvas {
    display: block;
  }

  .sustain-globe-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: 0 15% 15%;
    /* No scrim layer — legibility comes from a dark glow on the text itself
       (see the text-shadow rules below), so nothing can show a hard edge
       when the sphere scales past this element on the regions slide. */
    opacity: 1;
    transition: opacity 0.35s ease;
  }

  .sustain-globe-overlay[hidden] {
    display: none;
  }

  .sustain-globe-region-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
  }

  .sustain-globe-region-tab {
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    /* Same frosted panel as the SIMO Impact cards, so the pills read as
       surfaces sitting on the globe rather than bare outlines. */
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 6px 16px;
    cursor: pointer;
    text-shadow: 0 0 4px rgba(3, 12, 26, 0.95), 0 0 12px rgba(3, 12, 26, 0.8);
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  }

  .sustain-globe-region-tab:hover:not(.active):not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .sustain-globe-region-tab.active {
    color: #ffffff;
    border-color: #FCB545;
    background: rgba(252, 181, 69, 0.12);
  }

  .sustain-globe-region-tab:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .sustain-globe-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #FCB545;
    margin-bottom: 6px;
    text-shadow: 0 0 4px rgba(3, 12, 26, 0.95), 0 0 12px rgba(3, 12, 26, 0.85), 0 0 24px rgba(3, 12, 26, 0.7);
  }

  .sustain-globe-stat {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(52px, 8vw, 76px);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 8px rgba(3, 12, 26, 0.95), 0 0 22px rgba(3, 12, 26, 0.9), 0 0 46px rgba(3, 12, 26, 0.75);
  }

  .sustain-globe-desc {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 4px rgba(3, 12, 26, 0.95), 0 0 12px rgba(3, 12, 26, 0.85), 0 0 26px rgba(3, 12, 26, 0.7);
    margin: 10px 0 0;
    /* Same width as .sustain-globe-facts below it, so both wrap and align
       to the same column inside the earth circle. */
    width: 100%;
    max-width: 340px;
  }

  /* "The Planet" default overlay only: its CO2 line is short enough to
     force onto one line without overflowing the earth circle. */
  #sustainGlobeOverlayDefault .sustain-globe-desc {
    width: auto;
    max-width: none;
    white-space: nowrap;
  }

  .sustain-globe-facts {
    width: 100%;
    max-width: 340px;
    margin-top: 18px;
  }

  .sustain-globe-fact {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 0 4px rgba(3, 12, 26, 0.95), 0 0 12px rgba(3, 12, 26, 0.85), 0 0 26px rgba(3, 12, 26, 0.7);
    padding: 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  .sustain-globe-fact strong {
    font-weight: 700;
    color: #ffffff;
  }

  .sustain-globe-stat-accent {
    color: #FCB545;
  }

  .sustain-globe-restart {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 8px 18px;
    margin-top: 20px;
    cursor: pointer;
    text-shadow: 0 0 4px rgba(3, 12, 26, 0.95), 0 0 12px rgba(3, 12, 26, 0.8);
    transition: border-color 0.2s ease;
  }

  .sustain-globe-restart:hover {
    border-color: rgba(255, 255, 255, 0.5);
  }

  .sustain-globe-restart .material-symbols-outlined {
    font-size: 16px;
  }

  .sustain-globe-dots {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
  }

  .sustain-globe-dot {
    width: 28px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: background 0.25s ease;
  }

  .sustain-globe-dot.active {
    background: #FCB545;
  }

  @media (max-width: 700px) {
    .sustain-globe { padding: 80px 5dvw 70px; }
  }

  /* ---- Sustainability page: margin-protection stats (2x2 boxes) ---- */
  .sustain-margin {
    position: relative;
    background: var(--paper) url('images/landfill%201.png') center / cover no-repeat;
    color: var(--ink);
    min-height: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 120px;
    padding-bottom: 120px;
    padding-left: max(14dvw, calc((100vw - 1382px) / 2));
    padding-right: max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
    isolation: isolate;
  }

  .sustain-margin-inner {
    position: relative;
    z-index: 2;
  }

  .sustain-margin-left {
    margin-bottom: 48px;
  }

  .sustain-margin-left h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 3.6vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
  }

  .sustain-margin-accent {
    color: #ffffff;
  }

  .sustain-margin-left .subhead {
    color: #a9b6c9;
    max-width: none;
    margin: 0;
  }

  /* The stat list itself reuses .fin2-right / .fin2-stat / .fin2-num /
     .fin2-tag / .fin2-label directly (same markup + classes as the product
     page's split layout). This page only overrides the direction: its stats
     sit in a horizontal row instead of product.html's vertical stack. */
  .sustain-stats-row {
    flex-direction: row;
    padding: 0;
  }

  .sustain-stats-row .fin2-stat {
    flex: 1;
    padding: 28px;
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .sustain-stats-row .fin2-stat:first-child {
    border-left: none;
  }

  .sustain-stats-row .fin2-stat-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* ---- Sustainability page: "SIMO Impact" stat section ---- */
  .simo-impact {
    position: relative;
    background: #0a1f3d;
    color: #ffffff;
    padding: 120px max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
    isolation: isolate;
  }

  .simo-impact-header {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto 48px;
    text-align: center;
  }

  .simo-impact-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
  }

  .simo-impact-header .subhead {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 auto;
  }

  /* Flex (not grid) so a partly-filled last row stays centered instead of
     sticking to the left — 5 cards never divide evenly into 3 or 2 columns. */
  .simo-impact-grid {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }

  .simo-impact-card {
    width: calc((100% - 96px) / 5);
  }

  .simo-impact-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Tall enough that the hover description can run to 10 lines, on both
       desktop and mobile widths, without the text spilling past the card. */
    height: 460px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease;
  }

  .simo-impact-card:hover {
    transform: scale(1.035);
    border-color: rgba(255, 255, 255, 0.22);
  }

  .simo-impact-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .simo-impact-card:hover::before {
    opacity: 1;
  }

  .simo-impact-card .material-symbols-outlined,
  .simo-impact-card .simo-impact-num,
  .simo-impact-card .simo-impact-label,
  .simo-impact-card .simo-impact-desc {
    position: relative;
    z-index: 1;
  }

  .simo-impact-card .material-symbols-outlined {
    font-size: 40px;
    color: #e0912a;
    font-variation-settings: 'opsz' 24, 'wght' 400, 'FILL' 1, 'GRAD' 0;
    transition: font-size 0.25s ease;
  }

  .simo-impact-card:hover .material-symbols-outlined {
    font-size: 26px;
  }

  .simo-impact-num {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 44px;
    font-weight: 700;
    margin-top: 10px;
    transition: font-size 0.25s ease;
  }

  .simo-impact-card:hover .simo-impact-num {
    font-size: 32px;
  }

  .simo-impact-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 4px;
  }

  .simo-impact-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #e0912a;
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.25s ease;
  }

  .simo-impact-hero-body .simo-impact-desc {
    max-width: 460px;
    margin: 0 auto;
  }

  .simo-impact-card .simo-impact-desc {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 22px;
    max-height: none;
    margin-top: 0;
    transition: opacity 0.25s ease;
  }

  .simo-impact-card:hover .simo-impact-desc {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 10px;
  }

  .simo-impact-card:hover .simo-impact-desc {
    opacity: 1;
  }

  @media (max-width: 1100px) {
    .simo-impact-card { width: calc((100% - 48px) / 3); }
  }

  @media (max-width: 860px) {
    .simo-impact { padding: 80px 5dvw; }
  }

  @media (max-width: 700px) {
    .simo-impact-card { width: calc((100% - 24px) / 2); }
  }

  @media (max-width: 480px) {
    .simo-impact-card { width: 100%; max-width: 320px; }
  }

  /* ---- Sustainability page: guest-preference shift stat section ---- */
  .sustain-shift {
    position: relative;
    background: #0a1f3d;
    color: #ffffff;
    padding: 120px max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
    isolation: isolate;
    text-align: center;
  }

  .sustain-shift-inner {
    position: relative;
    z-index: 2;
  }

  .sustain-shift-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
    text-align: left;
    margin-bottom: 48px;
  }

  .sustain-shift-header {
    max-width: 560px;
    flex-shrink: 0;
  }

  .sustain-shift-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
  }

  .sustain-shift-header .subhead {
    color: #a9b6c9;
    max-width: 500px;
    margin: 0;
  }

  .sustain-shift-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 56px;
    text-align: center;
  }

  .sustain-shift-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 280px;
  }

  .sustain-shift-ring {
    position: relative;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sustain-shift-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
  }

  .sustain-shift-ring-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.14);
    stroke-width: 16;
  }

  .sustain-shift-ring-progress {
    fill: none;
    stroke: var(--iris);
    stroke-width: 16;
    stroke-linecap: round;
    stroke-dasharray: 527.79;
    stroke-dashoffset: 527.79;
  }

  .sustain-shift-ring-num {
    position: absolute;
    inset: 0;
    padding-top: 12px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 54px;
    font-weight: 700;
    color: #ffffff;
  }

  .sustain-shift-icon {
    font-size: 64px;
    color: var(--iris);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
  }

  .sustain-shift-num {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 54px;
    font-weight: 700;
    color: #ffffff;
  }

  .sustain-shift-stat-label {
    font-size: 14px;
    line-height: 1.5;
    color: #a9b6c9;
    margin: 0;
  }

  .sustain-shift-divider {
    align-self: stretch;
    width: 1px;
    background: rgba(255, 255, 255, 0.14);
  }

  .sustain-shift-footline {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 24px;
  }

  .sustain-shift-footline p {
    margin: 0;
    font-size: 15px;
    color: #a9b6c9;
  }

  @media (max-width: 900px) {
    .sustain-shift-row {
      flex-direction: column;
      text-align: center;
      gap: 40px;
    }
    .sustain-shift-header {
      max-width: 480px;
    }
    .sustain-shift-header .subhead {
      margin: 0 auto;
    }
  }

  @media (max-width: 700px) {
    .sustain-shift { padding: 80px 5dvw; }
    .sustain-shift-stats {
      flex-direction: column;
      gap: 32px;
    }
    .sustain-shift-divider {
      width: 60%;
      height: 1px;
      align-self: center;
    }
  }

  /* ---- Sustainability page: "Real data, no false claims" ---- */
  .sustain-proof {
    background: var(--paper);
    padding: 120px max(14dvw, calc((100vw - 1382px) / 2));
  }

  .sustain-proof-header {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
  }

  .sustain-proof-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 18px;
  }

  .sustain-proof-header .subhead {
    max-width: 700px;
    margin: 0 auto;
  }

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

  .sustain-proof-card {
    background: var(--snow);
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 28px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .sustain-proof-card:hover {
    transform: translateY(-4px);
    border-color: rgba(138, 95, 26, 0.35);
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04), 0 16px 32px rgba(10, 37, 64, 0.07);
  }

  .sustain-proof-card h3 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
  }

  .sustain-proof-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--slate);
    margin: 0;
  }

  @media (max-width: 860px) {
    .sustain-proof { padding: 80px 5dvw; }
    .sustain-proof-grid { grid-template-columns: 1fr; }
  }

  /* ---- Sustainability page: savings calculator ---- */
  .sustain-calc {
    position: relative;
    background: #0a1f3d;
    color: #ffffff;
    padding: 120px max(14dvw, calc((100vw - 1382px) / 2));
    overflow: hidden;
    isolation: isolate;
  }

  .sustain-calc-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 520px;
    gap: 64px;
    align-items: center;
  }

  .sustain-calc-header {
    max-width: 520px;
  }

  .sustain-calc-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 18px;
  }

  .sustain-calc-header .subhead {
    margin: 0;
    color: rgba(255, 255, 255, 0.65);
  }

  .calc-inputs {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 30px;
  }

  .calc-field { margin-bottom: 28px; }
  .calc-field:last-child { margin-bottom: 0; }

  .calc-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
  }

  .calc-labelrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
  }

  .calc-labelrow label { margin-bottom: 0; }

  .calc-valuebox {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    color: #e0912a;
    line-height: 1.1;
    margin-bottom: 10px;
  }

  .calc-field input[type=range] {
    width: 100%;
    accent-color: #e0912a;
    cursor: pointer;
  }

  .cur-toggle { display: flex; gap: 4px; }

  .cur-btn {
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
  }

  .cur-btn.active {
    border-color: #e0912a;
    color: #ffffff;
  }

  .calc-btn {
    width: 100%;
    margin-top: 6px;
    cursor: pointer;
    font-size: 15px;
  }

  /* Results modal */
  .calc-modal { position: fixed; inset: 0; z-index: 200; display: none; }
  .calc-modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 0;
  }

  .calc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 16, 32, 0.7);
    backdrop-filter: blur(2px);
  }

  .calc-modal-panel {
    position: relative;
    max-width: 760px;
    width: 100%;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5);
  }

  .calc-modal-scroll { overflow-y: auto; padding: 48px; }

  .calc-modal-scroll h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 24px;
  }

  .calc-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--mist);
    background: #ffffff;
    font-size: 20px;
    line-height: 1;
    color: var(--slate);
    cursor: pointer;
    z-index: 2;
  }

  .calc-modal-close:hover { color: var(--ink); border-color: var(--ink); }

  body.modal-open { overflow: hidden; }

  .result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
  }

  .result-card {
    background: var(--snow);
    border: 1px solid var(--mist);
    border-radius: 12px;
    padding: 20px;
  }

  .result-label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 8px;
  }

  .result-num {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .calc-disclaimer {
    font-size: 12px;
    color: var(--slate);
    margin: 18px 0 0;
    line-height: 1.6;
  }

  .calc-output { animation: calcIn 0.45s ease; }

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

  /* Lead gate: the secondary metrics are never shown, blurred or otherwise —
     only the gate-card (form, then thank-you message) is visible. Rules
     below are kept in case Simo wants the blurred-teaser behaviour back. */
  .gated { position: relative; margin-top: 24px; }
  .gated-grid { display: none; pointer-events: none; user-select: none; }
  .gated-grid .result-num { filter: blur(5px); transition: filter 0.5s ease; }
  .gated.unlocked .gated-grid .result-num { filter: none; }
  .gated.unlocked .gated-grid { pointer-events: auto; user-select: auto; }

  .gate-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 12px 0;
  }

  .gated.unlocked .gate-overlay { display: none; }

  .unlocked-cta { display: none; text-align: center; margin-top: 28px; }
  .gated.unlocked + .unlocked-cta { display: block; }

  .gate-card {
    margin: 0 auto;
    padding: 12px 0;
    max-width: 420px;
    width: 100%;
    text-align: center;
  }

  .gate-card h3 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
  }

  .gate-card p {
    font-size: 13.5px;
    color: var(--slate);
    line-height: 1.6;
    margin: 0 0 18px;
  }

  .gate-form { display: flex; flex-direction: column; gap: 9px; }

  .gate-form input {
    font-family: inherit;
    font-size: 14px;
    padding: 11px 13px;
    border-radius: 8px;
    border: 1px solid var(--mist);
    color: var(--ink);
    width: 100%;
  }

  .gate-form input:focus { outline: none; border-color: #e0912a; }

  .gate-submit { margin-top: 4px; width: 100%; cursor: pointer; font-size: 15px; }

  .gate-error {
    font-size: 12.5px;
    color: #c0392b;
    margin: 0;
    min-height: 16px;
    text-align: left;
  }

  .gate-thankyou h3 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 12px;
  }

  .gate-thankyou p {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--slate);
    margin: 0;
  }

  @media (max-width: 1000px) {
    .sustain-calc-grid {
      grid-template-columns: 1fr;
      gap: 40px;
      align-items: start;
    }
    .sustain-calc-header { max-width: none; }
  }

  @media (max-width: 860px) {
    .sustain-calc { padding: 80px 5dvw; }
    .calc-modal-scroll { padding: 32px 24px; }
  }

  /* ---- Sustainability page: before/after landfill comparison slider,
     used as the full-bleed background of the case-study section. The
     "before" image (landfill 1) is the base layer; the "after" image
     (landfill 2) sits on top, clipped to the --pos custom property so it
     only shows on the right of the divider. Dragging the invisible range
     input updates --pos, which both the clip-path and the divider read
     from directly (no JS needed to move the divider itself). ---- */
  .sustain-compare {
    /* Hidden in favour of a static landfill 1.png background on
       .sustain-margin itself (see above). Markup and rules left intact —
       flip this back to a visible value to restore the drag slider. */
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    min-height: 600px;
  }

  .sustain-compare-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
  }

  .sustain-compare-before {
    z-index: 1;
  }

  .sustain-compare-after {
    z-index: 2;
    clip-path: inset(0 0 0 var(--pos));
  }

  .sustain-compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 2px;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    /* Handle sits near the bottom, level with the Before/After pills,
       instead of the vertical center. */
    padding-bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .sustain-compare-divider-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #ffffff;
    background: rgba(10, 20, 35, 0.28);
    backdrop-filter: blur(3px);
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }

  .sustain-compare-divider-handle svg {
    display: block;
  }

  /* Native range input drives everything via --pos, made invisible but
     still fully draggable (and keyboard/touch accessible) across the
     whole section. */
  .sustain-compare-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
  }

  .sustain-compare-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
  }

  .sustain-compare-range::-moz-range-thumb {
    width: 40px;
    height: 40px;
    border: none;
  }

  /* Light scrim so the dark case-study copy stays legible over the photos. */
  .sustain-margin-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
  }

  /* ---- Sustainability page: case-study callout below the margin stats ---- */
  .sustain-case-study {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    /* Frosted-glass card over the landfill background photo. */
    padding: 40px 48px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease;
  }

  .sustain-case-study:hover {
    transform: scale(1.03);
  }

  .sustain-case-study h3 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 16px;
  }

  .sustain-case-study p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--slate);
    margin: 0 auto 20px;
    max-width: 560px;
  }

  .sustain-case-study-link {
    display: inline-block;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--iris);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
  }

  .sustain-case-study-link:hover {
    color: var(--ink);
  }

  /* ---- Sustainability page: full Bali case-study modal ---- */
  .cs-modal { position: fixed; inset: 0; z-index: 200; display: none; }
  .cs-modal.open { display: block; }

  .cs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 16, 32, 0.7);
    backdrop-filter: blur(2px);
  }

  .cs-modal-panel {
    position: relative;
    max-width: 900px;
    margin: 4vh auto;
    background: #ffffff;
    border-radius: 20px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5);
  }

  .cs-modal-scroll { overflow-y: auto; padding: 48px; }

  .cs-modal-scroll h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    max-width: 760px;
    margin: 0 0 32px;
  }

  .cs-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--mist);
    background: #ffffff;
    font-size: 20px;
    line-height: 1;
    color: var(--slate);
    cursor: pointer;
    z-index: 2;
  }

  .cs-modal-close:hover { color: var(--ink); border-color: var(--ink); }

  .case-grid {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 64px;
  }

  .case-narrative p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--slate);
    margin: 0 0 18px;
  }

  .case-narrative a {
    color: var(--iris);
    text-decoration: underline;
    text-decoration-color: rgba(138, 95, 26, 0.35);
    text-underline-offset: 2px;
  }

  .case-narrative a:hover { text-decoration-color: var(--iris); }

  .case-pain {
    background: var(--paper);
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 30px;
  }

  .case-pain-title {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 20px;
  }

  .pain-item { padding: 16px 0; border-top: 1px solid var(--mist); }
  .pain-item:first-of-type { border-top: none; padding-top: 0; }

  .pain-item h4 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--iris);
  }

  .pain-item p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--slate);
    margin: 0;
  }

  .case-sub {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 28px;
  }

  .action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    margin-bottom: 56px;
  }

  .action-card {
    background: #ffffff;
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 30px;
  }

  .action-num {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #e0912a;
    display: block;
    margin-bottom: 12px;
  }

  .action-card h4 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 10px;
  }

  .action-card p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--slate);
    margin: 0;
  }

  .case-cta {
    background: #0a1f3d;
    border-radius: 16px;
    padding: 44px;
    text-align: center;
  }

  .case-cta h3 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 10px;
  }

  .case-cta p {
    color: #a9b6c9;
    font-size: 16px;
    margin: 0 0 26px;
  }

  .case-cta .cta-row { justify-content: center; }
  .case-cta .btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.3); }
  .case-cta .btn-ghost:hover { border-color: #ffffff; }

  @media (max-width: 860px) {
    .cs-modal-scroll { padding: 32px 24px; }
    .case-grid { grid-template-columns: 1fr; gap: 32px; }
    .case-cta { padding: 32px 24px; }
  }

  /* ---- Sustainability page: "What SIMO can do" filterable cards ---- */
  .sustain-do {
    background: var(--paper);
    padding: 120px max(14dvw, calc((100vw - 1382px) / 2));
  }

  .sustain-do-header {
    max-width: 960px;
    margin: 0 auto 32px;
    text-align: center;
  }

  .sustain-do-header h2 {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 18px;
  }

  .sustain-do-header .subhead {
    max-width: 720px;
    margin: 0 auto;
  }

  .sustain-do-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
  }

  .sustain-do-filter {
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--slate);
    background: transparent;
    border: 1px solid var(--mist);
    border-radius: 999px;
    padding: 9px 20px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  .sustain-do-filter:hover {
    border-color: var(--slate);
    color: var(--ink);
  }

  .sustain-do-filter.active {
    background: var(--ink);
    border-color: var(--ink);
    color: #ffffff;
  }

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

  .sustain-do-card {
    width: calc(50% - 12px);
  }

  .sustain-do-card {
    background: var(--snow);
    border: 1px solid var(--mist);
    border-radius: 16px;
    padding: 32px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .sustain-do-card.is-hidden {
    display: none;
  }

  .sustain-do-card:hover {
    transform: translateY(-4px);
    border-color: rgba(138, 95, 26, 0.35);
    box-shadow: 0 1px 2px rgba(10, 37, 64, 0.04), 0 16px 32px rgba(10, 37, 64, 0.07);
  }

  .sustain-do-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(138, 95, 26, 0.1);
    color: var(--iris);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
  }
  .sustain-do-card-icon svg { width: 22px; height: 22px; }
  .sustain-do-card-icon .material-symbols-outlined {
    font-size: 24px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }

  .sustain-do-card-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate);
    background: var(--paper);
    border: 1px solid var(--mist);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 16px;
  }

  .sustain-do-card-title {
    font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }

  .sustain-do-card-sub {
    font-size: 14px;
    font-weight: 600;
    color: var(--iris);
    margin-bottom: 14px;
  }

  .sustain-do-card-desc {
    font-size: 15px;
    line-height: 1.65;
    color: var(--slate);
    margin: 0;
  }

  @media (max-width: 860px) {
    .sustain-do { padding: 80px 5dvw; }
    .sustain-do-card { width: 100%; }
  }

  @media (max-width: 860px) {
    .sustain-margin { padding-top: 80px; padding-bottom: 80px; padding-left: 5dvw; padding-right: 5dvw; }
    .sustain-case-study { padding: 28px 24px; }
  }

  @media (max-width: 700px) {
    .sustain-stats-row { flex-direction: column; }
    .sustain-stats-row .fin2-stat {
      border-left: none;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .sustain-stats-row .fin2-stat:first-child {
      border-top: none;
    }
  }

  /* ---- Mobile: section headings and subheads run full width ----
     Desktop caps every section header at a readable line length (560-960px,
     and 50vw on the energy section). On a phone those caps are narrower than
     the screen, so copy wrapped into a thin column with wasted space beside
     it. Below 860px the viewport is already narrow enough on its own, so
     every cap is released and the text fills the available width. */
  @media (max-width: 860px) {
    .subhead,
    .benefits-header,
    .beyond-header,
    .comparison-header,
    .contact-header,
    .energy-header,
    .energy-header h2,
    .energy-header .subhead,
    .feature-explorer-header,
    .features-header,
    .how-header,
    .opportunity-header,
    .page-hero-inner,
    .page-hero-inner h1,
    .product-cta-inner,
    .projects-header,
    .roles-header,
    .simo-impact-header,
    .sustain-calc-header,
    .sustain-do-header,
    .sustain-do-header .subhead,
    .sustain-globe h2,
    .sustain-proof-header,
    .sustain-shift-header,
    .trust-header {
      max-width: none;
    }
  }