/* =========================================================
       iCost motion system
       Opening sequence, hero staging, scroll reveals and parallax
       ========================================================= */
    :root {
      --icMotionEase: cubic-bezier(0.22, 1, 0.36, 1);
      --icMotionNavy: #0c3c60;
      --icMotionDark: #061827;
      --icMotionGreen: #93d52f;
      --icMotionBlue: #236fb7;
    }

    html.icostIntroPlaying,
    html.icostIntroPlaying body {
      overflow: hidden;
    }

    #icostIntro {
      display: none;
    }

    html.icostIntroGo #icostIntro {
      position: fixed;
      inset: 0;
      z-index: 100000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      isolation: isolate;
      background: var(--icMotionNavy);
    }

    .icostIntroPanels {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: flex;
    }

    .icostIntroPanel {
      position: relative;
      flex: 1 1 0;
      background:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
        radial-gradient(circle at 50% 76%, rgba(147,213,47,0.14), transparent 35%),
        var(--icMotionNavy);
      background-size: 64px 64px, 64px 64px, auto, auto;
      border-right: 1px solid rgba(255,255,255,0.08);
      transform: translateY(0);
      will-change: transform;
    }

    .icostIntroPanel::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: var(--icMotionGreen);
      transform: scaleX(0);
      transform-origin: left;
      animation: icostIntroPanelLine 1s var(--icMotionEase) 0.55s forwards;
    }

    html.icostIntroGo .icostIntroPanel {
      animation: icostIntroPanelUp 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards;
    }

    html.icostIntroGo .icostIntroPanel:nth-child(1) { animation-delay: 2.02s; }
    html.icostIntroGo .icostIntroPanel:nth-child(2) { animation-delay: 2.10s; }
    html.icostIntroGo .icostIntroPanel:nth-child(3) { animation-delay: 2.18s; }
    html.icostIntroGo .icostIntroPanel:nth-child(4) { animation-delay: 2.26s; }

    .icostIntroGlow {
      position: absolute;
      z-index: 2;
      width: min(620px, 72vw);
      aspect-ratio: 1;
      border: 1px solid rgba(147,213,47,0.16);
      border-radius: 50%;
      opacity: 0;
      transform: scale(0.76);
      box-shadow:
        0 0 0 72px rgba(147,213,47,0.025),
        0 0 0 144px rgba(35,111,183,0.025);
      animation: icostIntroGlowIn 1s var(--icMotionEase) 0.18s forwards;
      pointer-events: none;
    }

    .icostIntroContent {
      position: relative;
      z-index: 3;
      width: min(860px, 88vw);
      text-align: center;
      color: #ffffff;
      font-family: "Manrope", "Inter", sans-serif;
    }

    .icostIntroBrand {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 24px;
      opacity: 0;
      transform: translateY(14px);
      animation: icostIntroBrandIn 0.58s ease 0.08s forwards;
    }

    .icostIntroLogoWrap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      padding: 6px 10px;
      border-radius: 12px;
      background: #ffffff;
      box-shadow: 0 12px 30px rgba(0,0,0,0.18);
    }

    .icostIntroLogoWrap img {
      width: auto;
      height: 36px;
    }

    .icostIntroBrand strong {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .icostIntroLine {
      display: block;
      overflow: hidden;
      padding-bottom: 0.08em;
      margin-bottom: -0.08em;
      font-size: clamp(2.5rem, 7vw, 5.8rem);
      line-height: 0.98;
      font-weight: 900;
      letter-spacing: -0.055em;
    }

    .icostIntroLine > span {
      display: block;
      transform: translateY(118%);
    }

    .icostIntroLineAccent > span {
      color: var(--icMotionGreen);
    }

    html.icostIntroGo .icostIntroLine:nth-of-type(1) > span {
      animation: icostIntroLineUp 0.82s var(--icMotionEase) 0.30s forwards;
    }

    html.icostIntroGo .icostIntroLine:nth-of-type(2) > span {
      animation: icostIntroLineUp 0.82s var(--icMotionEase) 0.46s forwards;
    }

    .icostIntroRule {
      display: block;
      width: min(250px, 52vw);
      height: 3px;
      margin: 28px auto 0;
      background: linear-gradient(90deg, var(--icMotionGreen) 0 55%, var(--icMotionBlue) 55% 100%);
      transform: scaleX(0);
      transform-origin: left;
      animation: icostIntroRuleIn 0.72s var(--icMotionEase) 0.70s forwards;
    }

    html.icostIntroGo .icostIntroContent {
      animation: icostIntroContentOut 0.32s ease 1.78s forwards;
    }

    @keyframes icostIntroBrandIn {
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes icostIntroLineUp {
      to { transform: translateY(0); }
    }

    @keyframes icostIntroRuleIn {
      to { transform: scaleX(1); }
    }

    @keyframes icostIntroGlowIn {
      to { opacity: 1; transform: scale(1); }
    }

    @keyframes icostIntroContentOut {
      to { opacity: 0; transform: translateY(-14px); }
    }

    @keyframes icostIntroPanelUp {
      to { transform: translateY(-101%); }
    }

    @keyframes icostIntroPanelLine {
      to { transform: scaleX(1); }
    }

    /* Initial page staging */
    html.icostMotionReady .nav {
      opacity: 0;
      transform: translateY(-26px);
      transition:
        opacity 0.72s ease,
        transform 0.86s var(--icMotionEase),
        box-shadow 240ms ease;
    }

    html.icostMotionReady.icostPageLive .nav {
      opacity: 1;
      transform: translateY(0);
    }

    .hero {
      --icHeroShift: 0px;
      --icHeroCopyShift: 0px;
      background-position: 0 0, center calc(50% + var(--icHeroShift));
      will-change: background-position;
    }

    .heroInner {
      transform: translate3d(0, var(--icHeroCopyShift), 0);
      will-change: transform;
    }

    html.icostMotionReady .hero .eyebrow,
    html.icostMotionReady .hero .heroText,
    html.icostMotionReady .hero .heroActions,
    html.icostMotionReady .hero .proofItem {
      opacity: 0;
      transform: translateY(30px);
      transition:
        opacity 0.72s ease,
        transform 0.92s var(--icMotionEase);
    }

    html.icostMotionReady.icostPageLive .hero .eyebrow {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.10s;
    }

    html.icostMotionReady.icostPageLive .hero .heroText {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.52s;
    }

    html.icostMotionReady.icostPageLive .hero .heroActions {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.66s;
    }

    html.icostMotionReady.icostPageLive .hero .proofItem {
      opacity: 1;
      transform: translateY(0);
    }

    html.icostMotionReady.icostPageLive .hero .proofItem:nth-child(1) { transition-delay: 0.82s; }
    html.icostMotionReady.icostPageLive .hero .proofItem:nth-child(2) { transition-delay: 0.90s; }
    html.icostMotionReady.icostPageLive .hero .proofItem:nth-child(3) { transition-delay: 0.98s; }
    html.icostMotionReady.icostPageLive .hero .proofItem:nth-child(4) { transition-delay: 1.06s; }

    .icostWordMask {
      display: inline-block;
      overflow: hidden;
      vertical-align: bottom;
      margin-right: 0;
      margin-bottom: -0.08em;
      padding-bottom: 0.08em;
    }

    .icostWord {
      display: inline-block;
    }

    .hero h1 .icostWordMask,
    .hero h1 .icostWord {
      color: inherit;
    }

    html.icostMotionReady .hero h1 .icostWord {
      opacity: 0;
      transform: translateY(118%);
      transition:
        transform 0.92s var(--icMotionEase),
        opacity 0.5s ease;
      transition-delay: calc(0.18s + (var(--icWordIndex) * 58ms));
    }

    html.icostMotionReady.icostPageLive .hero h1 .icostWord {
      opacity: 1;
      transform: translateY(0);
    }

    html.icostMotionReady .dashboardScene {
      opacity: 0;
      transform: translate3d(64px, 28px, 0) scale(0.97);
      transition:
        opacity 0.92s ease 0.46s,
        transform 1.08s var(--icMotionEase) 0.46s;
    }

    html.icostMotionReady.icostPageLive .dashboardScene {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    html.icostMotionReady .dashboardMetricCard {
      opacity: 0;
      transform: translateY(16px);
    }

    html.icostMotionReady .dashboardScene.dashboardActive .dashboardMetricCard {
      opacity: 1;
      transform: translateY(0);
      transition:
        opacity 0.55s ease var(--dashDelay, 0ms),
        transform 0.72s var(--icMotionEase) var(--dashDelay, 0ms),
        box-shadow 220ms ease,
        border-color 220ms ease;
    }

    html.icostMotionReady .dashboardScene.dashboardActive .dashboardMetricCard:hover {
      transform: translateZ(26px) translateY(-4px);
    }

    html.icostMotionReady .dashboardChartCard,
    html.icostMotionReady .dashboardInsight {
      opacity: 0;
      transform: translateY(14px);
    }

    html.icostMotionReady .dashboardScene.dashboardActive .dashboardChartCard,
    html.icostMotionReady .dashboardScene.dashboardActive .dashboardInsight {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.65s ease 0.30s, transform 0.8s var(--icMotionEase) 0.30s;
    }

    html.icostMotionReady .donutChart {
      opacity: 0;
      transform: scale(0.72) rotate(-18deg);
    }

    html.icostMotionReady .dashboardScene.dashboardActive .donutChart {
      opacity: 1;
      transform: scale(1) rotate(0deg);
      transition: opacity 0.6s ease 0.48s, transform 0.9s var(--icMotionEase) 0.48s;
    }

    html.icostMotionReady .progressFill {
      width: 0;
    }

    html.icostMotionReady .dashboardScene.dashboardActive .progressFill {
      width: var(--progress);
      transition: width 1.05s var(--icMotionEase) var(--progressDelay, 0ms);
    }

    html.icostMotionReady .dashboardScene.dashboardActive .insightPulse {
      animation: dashboardPulse 1.9s ease-out 0.8s 3;
    }

    @keyframes dashboardPulse {
      0% { box-shadow: 0 0 0 0 rgba(147, 213, 47, 0.38); }
      70% { box-shadow: 0 0 0 9px rgba(147, 213, 47, 0); }
      100% { box-shadow: 0 0 0 0 rgba(147, 213, 47, 0); }
    }

    /* Reusable viewport reveals */
    html.icostMotionReady [data-icost-reveal] {
      opacity: 0;
      transform: translate3d(0, 64px, 0);
      transition:
        opacity 0.82s ease var(--icDelay, 0ms),
        transform 1s var(--icMotionEase) var(--icDelay, 0ms);
      will-change: opacity, transform;
    }

    html.icostMotionReady [data-icost-reveal="left"] {
      transform: translate3d(-56px, 0, 0);
    }

    html.icostMotionReady [data-icost-reveal="right"] {
      transform: translate3d(56px, 0, 0);
    }

    html.icostMotionReady [data-icost-reveal="scale"] {
      transform: scale(0.93);
    }

    html.icostMotionReady [data-icost-reveal].icostInView {
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
    }

    /* Section line treatment */
    html.icostMotionReady .sectionHeader .label::after {
      content: "";
      width: 0;
      height: 1px;
      background: currentColor;
      transition: width 0.72s var(--icMotionEase) 0.22s;
    }

    html.icostMotionReady .sectionHeader.icostInView .label::after {
      width: 52px;
    }

    /* Card motion and interaction */
    .trustCard,
    .detailCard,
    .whyCard,
    .quoteCard,
    .insightCard,
    .faqItem,
    .numberItem {
      transition:
        transform 0.3s var(--icMotionEase),
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    }

    .trustCard:hover,
    .detailCard:hover,
    .whyCard:hover,
    .quoteCard:hover,
    .insightCard:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadowSmall);
      border-color: rgba(12,60,96,0.22);
    }

    .serviceCard::after,
    .whyCard::after,
    .detailCard::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--icMotionGreen), var(--icMotionBlue));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.55s var(--icMotionEase);
    }

    .serviceCard:hover::after,
    .whyCard:hover::after,
    .detailCard:hover::after {
      transform: scaleX(1);
    }

    .whyCard,
    .detailCard {
      position: relative;
      overflow: hidden;
    }

    .numberItem::after {
      content: "";
      position: absolute;
      left: 30px;
      right: 30px;
      bottom: 20px;
      height: 1px;
      background: var(--icMotionGreen);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.72s var(--icMotionEase) var(--icDelay, 0ms);
    }

    .numberItem.icostInView::after {
      transform: scaleX(1);
    }

    .sectorCard.icostInView::after {
      content: "";
      position: absolute;
      z-index: 2;
      left: 24px;
      bottom: 20px;
      width: 48px;
      height: 2px;
      background: var(--icMotionGreen);
      animation: icostSectorLine 0.72s var(--icMotionEase) 0.25s both;
    }

    @keyframes icostSectorLine {
      from { transform: scaleX(0); transform-origin: left; }
      to { transform: scaleX(1); transform-origin: left; }
    }

    .imageFrame {
      will-change: transform;
    }

    .aboutImage,
    .insightImage,
    .sectorCard::before {
      transition: transform 0.75s var(--icMotionEase);
    }

    .aboutPanel:hover .aboutImage,
    .insightCard:hover .insightImage {
      transform: scale(1.035);
    }

    .cta {
      position: relative;
      overflow: hidden;
    }

    .cta::after {
      content: "";
      position: absolute;
      width: 520px;
      height: 520px;
      right: -150px;
      top: 50%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(147,213,47,0.14), transparent 68%);
      transform: translateY(-50%) scale(0.62);
      opacity: 0;
      transition:
        opacity 0.8s ease,
        transform 1.15s var(--icMotionEase);
      pointer-events: none;
    }

    .cta.icostSectionActive::after {
      opacity: 1;
      transform: translateY(-50%) scale(1.3);
    }

    @media (max-width: 1120px) {
      html.icostMotionReady.icostPageLive .dashboardScene {
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

    @media (max-width: 840px) {
      .icostIntroGlow {
        width: 330px;
      }

      .icostIntroLine {
        font-size: clamp(2.2rem, 11vw, 3.9rem);
      }

      .icostIntroBrand strong {
        font-size: 12px;
      }

      html.icostMotionReady [data-icost-reveal="left"],
      html.icostMotionReady [data-icost-reveal="right"] {
        transform: translate3d(0, 44px, 0);
      }

    }

    @media (prefers-reduced-motion: reduce) {
      #icostIntro {
        display: none !important;
      }

      html,
      body {
        scroll-behavior: auto !important;
      }

      html.icostMotionReady .nav,
      html.icostMotionReady .hero .eyebrow,
      html.icostMotionReady .hero .heroText,
      html.icostMotionReady .hero .heroActions,
      html.icostMotionReady .hero .proofItem,
      html.icostMotionReady .hero h1 .icostWord,
      html.icostMotionReady .dashboardScene,
      html.icostMotionReady .dashboardMetricCard,
      html.icostMotionReady .dashboardChartCard,
      html.icostMotionReady .dashboardInsight,
      html.icostMotionReady .donutChart,
      html.icostMotionReady .progressFill,
      html.icostMotionReady [data-icost-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
      }

      .cta::after,
      .numberItem::after,
      .sectorCard::after {
        display: none !important;
      }

      .dashboardFloat {
        animation: none !important;
      }
    }