:root {
      --container: 1120px;
      --height-header: 80px;
      --text-xs: 12px;
      --text-sm: 14px;
      --text-base: 16px;
      --text-md: 18px;
      --text-lg: 20px;
      --text-xl: 24px;
      --text-2xl: 32px;
      --text-3xl: 40px;
      --text-4xl: 48px;
      --suffix-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
      --fontfamily-sans: "Dax", var(--suffix-family);
      --padding-button: 15px 30px;
      --rounded-xs: 2px;
      --rounded-sm: 4px;
      --rounded: 6px;
      --rounded-md: 10px;
      --rounded-lg: 16px;
      --rounded-xl: 24px;
      --rounded-full: 999999px;
      --transparent: rgba(0, 0, 0, 0);
      --white: #fff;
      --black: #000;
      --blue: #004e74;
      --yellow: #e69d00;
      --green: #225c41;
      --dark-green: #003366;
      --midnight-green: #00193a;
      --orange: #f06632;
      --gray: #f4f7fb;
      --gray-300: #d6e0ef;
      --gray-700: #3d5a80;
      --shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
      --duration: 0.3s;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    * {
      margin: 0;
      padding: 0;
      outline: 0;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      word-break: break-word;
    }

    ::selection {
      color: #fff;
      background-color: #00193a;
      text-shadow: none;
    }

    body {
      font-family: var(--fontfamily-sans);
      color: var(--midnight-green);
      line-height: 175%;
      font-size: var(--text-base);
      font-weight: 400;
      background-color: var(--white);
      -webkit-text-size-adjust: 100%;
    }

    html {
      scroll-behavior: smooth;
    }

    .btn {
      display: inline-block;
      padding: var(--padding-button);
      border-radius: var(--rounded-full);
      font-weight: 700;
      font-size: var(--text-sm);
      line-height: 1;
      cursor: pointer;
      transition: opacity var(--duration), transform 0.15s ease, background-color var(--duration), color var(--duration);
      text-decoration: none;
      border: none;
      font-family: var(--fontfamily-sans);
    }

    .btn-orange {
      background-color: var(--orange);
      color: var(--white);
    }

    .btn-orange:hover {
      opacity: 0.88;
    }

    .btn-outline {
      background-color: transparent;
      color: var(--white);
      border: 2px solid var(--white);
    }

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

    .btn-dark {
      background-color: var(--midnight-green);
      color: var(--white);
    }

    .btn-dark:hover {
      opacity: 0.88;
    }

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

    .btn:active {
      transform: translateY(0);
    }

    .page {
      display: none;
    }

    .page.active {
      display: block;
    }

    .nav-link {
      position: relative;
      transition: color var(--duration);
    }

    .nav-link.active {
      color: var(--orange);
      font-weight: 700;
    }

    .nav-link:hover {
      color: var(--orange);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -2px;
      width: 0;
      height: 2px;
      background: var(--orange);
      transition: width 0.25s ease;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
      width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      line-height: 125%;
      font-weight: 700;
      color: var(--midnight-green);
    }

    .tag {
      display: block;
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--orange);
    }

    .card {
      cursor: pointer;
      transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .card:hover {
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
      transform: translateY(-3px);
    }

    input:focus,
    textarea:focus {
      outline: 2px solid var(--orange);
      border-color: var(--orange);
    }

    /* Logo button */
    nav button:first-child {
      transition: opacity 0.2s;
    }

    nav button:first-child:hover {
      opacity: 0.85;
    }

    /* Value icon pulse */
    .val-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--rounded-full);
      background: var(--orange);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #fff;
      font-size: 20px;
      font-weight: 800;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .val-icon:hover {
      transform: scale(1.12);
      box-shadow: 0 4px 18px rgba(240, 102, 50, 0.4);
    }

    /* Value cards */
    .val-card {
      transition: box-shadow 0.25s ease, transform 0.25s ease;
      cursor: default;
    }

    .val-card:hover {
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    /* Focus area cards */
    .focus-card {
      transition: box-shadow 0.25s ease, transform 0.25s ease;
    }

    .focus-card:hover {
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
      transform: translateY(-3px);
    }

    /* Accordion service panels */
    .svc-panel {
      transition: flex 0.45s cubic-bezier(.4, 0, .2, 1), filter 0.25s ease;
    }

    .svc-panel:hover {
      filter: brightness(1.06);
    }

    /* Work carousel arrows */
    #work-prev,
    #work-next {
      transition: background var(--duration), transform 0.15s ease;
    }

    #work-prev:hover,
    #work-next:hover {
      transform: translateY(-50%) scale(1.08);
    }

    /* Footer nav buttons */
    footer button {
      transition: color 0.2s ease;
    }

    /* Team animated widget */
    .team-img-card {
      position: absolute;
      inset: 0;
      border-radius: 24px;
      overflow: hidden;
      transform-origin: bottom center;
      transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
      will-change: transform, opacity;
    }

    .team-img-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      display: block;
    }

    @keyframes team-word-in {
      from {
        opacity: 0;
        filter: blur(6px);
        transform: translateY(4px);
      }

      to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
      }
    }

    .team-word {
      display: inline-block;
      animation: team-word-in 0.25s ease both;
    }

    /* Blog contenteditable area */
    .blog-edit-area {
      min-height: 120px;
      padding: 12px 14px;
      font-size: 15px;
      font-family: var(--fontfamily-sans);
      outline: none;
      line-height: 175%;
      color: var(--midnight-green);
    }

    .blog-edit-area ul,
    #bm-blocks ul {
      padding-left: 24px;
      margin-bottom: 12px;
    }

    .blog-edit-area ul li,
    #bm-blocks ul li {
      list-style-type: disc;
      margin-bottom: 4px;
    }

    .blog-edit-area ol,
    #bm-blocks ol {
      padding-left: 24px;
      margin-bottom: 12px;
    }

    .blog-edit-area ol li,
    #bm-blocks ol li {
      list-style-type: decimal;
      margin-bottom: 4px;
    }

    .blog-edit-area:empty::before {
      content: attr(data-placeholder);
      color: #aab8cc;
      pointer-events: none;
    }

    .blog-edit-area a,
    #bm-blocks a {
      color: var(--dark-green);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .blog-edit-area a:hover,
    #bm-blocks a:hover {
      color: var(--orange);
    }

    /* Force site font on all rendered post content */
    #bm-blocks *,
    #em-blocks * {
      font-family: var(--fontfamily-sans) !important;
    }

    /* Post page two-column layout */
    .post-layout {
      display: flex;
      gap: 48px;
      align-items: flex-start;
    }

    .post-sidebar {
      width: 200px;
      flex-shrink: 0;
      position: sticky;
      top: 80px;
    }

    .post-main {
      flex: 1;
      min-width: 0;
    }

    .post-toc-link {
      display: block;
      font-size: var(--text-xs);
      color: var(--gray-700);
      text-decoration: none;
      padding: 5px 0;
      border-left: 2px solid var(--gray-300);
      padding-left: 10px;
      margin-bottom: 2px;
      line-height: 1.4;
      transition: color .15s, border-color .15s;
    }

    .post-toc-link:hover {
      color: var(--midnight-green);
      border-left-color: var(--midnight-green);
    }

    /* Blog card summary clamp */
    .blog-card-summary {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Stat cards on project pages */
    .stat-strip {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      margin-top: 28px;
    }

    .stat-card {
      background: rgba(255, 255, 255, .1);
      border-radius: var(--rounded-md);
      padding: 14px 20px;
      text-align: center;
      min-width: 110px;
    }

    /* Principle items */
    .principle-item {
      display: flex;
      gap: 24px;
      align-items: flex-start;
      margin-bottom: 48px;
    }

    /* Services grid */
    .svc-row1,
    .svc-row2 {
      display: grid;
      gap: 20px;
    }

    .svc-row1 {
      margin-bottom: 20px;
      grid-template-columns: 1fr;
    }

    .svc-row2 {
      grid-template-columns: 1fr;
    }

    /* ── Responsive ─────────────────────────────────── */

    @media (max-width: 640px) {
      #team-widget {
        grid-template-columns: 1fr !important;
      }

      #team-img-stack {
        height: 260px !important;
      }
    }

    @media (max-width: 480px) {
      .nav-logo-svg {
        width: 40px !important;
        height: 40px !important;
      }

      .nav-wordmark {
        font-size: 18px !important;
      }
    }

    @media (max-width: 340px) {
      .nav-wordmark {
        display: none !important;
      }
    }

    @media (max-width: 640px) {
      #hero-carousel {
        height: 520px !important;
      }

      #hero-buttons {
        left: 16px !important;
        right: 16px !important;
        bottom: 56px !important;
        justify-content: center !important;
      }

      #hero-slides>div {
        padding-bottom: 120px !important;
      }
    }

    @media (max-width: 400px) {
      #hero-carousel {
        height: 520px !important;
      }

      #hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
      }

      #hero-buttons .btn {
        width: 100%;
        text-align: center;
      }

      #hero-slides>div {
        padding-bottom: 150px !important;
      }
    }

    @media (min-width: 560px) {
      .svc-row1 {
        grid-template-columns: repeat(2, 1fr);
      }

      .svc-row2 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 900px) {
      .svc-row1 {
        grid-template-columns: repeat(3, 1fr);
      }

      .svc-row2 {
        grid-template-columns: repeat(2, 1fr);
        max-width: calc(66.66% + 10px);
      }
    }

    @media (max-width: 640px) {
      #work-track {
        min-height: 420px !important;
      }

      .work-slide {
        height: 420px !important;
      }

      #work-prev,
      #work-next {
        width: 38px !important;
        height: 38px !important;
      }
    }

    @media (max-width: 420px) {
      .principle-item {
        flex-direction: column;
        gap: 12px;
      }
    }

    @media (max-width: 768px) {
      .post-layout {
        flex-direction: column;
        gap: 24px;
      }

      .post-sidebar {
        width: 100%;
        position: static;
      }

      [style*="padding:80px 24px"],
      [style*="padding:72px 24px"],
      [style*="padding:64px 24px"] {
        padding-top: 52px !important;
        padding-bottom: 52px !important;
      }

      [style*="gap:64px"] {
        gap: 32px !important;
      }
    }

    @media (max-width: 480px) {
      [style*="padding:80px 24px"],
      [style*="padding:72px 24px"],
      [style*="padding:64px 24px"] {
        padding-top: 36px !important;
        padding-bottom: 36px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
      }

      [style*="gap:64px"] {
        gap: 24px !important;
      }

      [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      #blog-posts-container,
      #evidence-container {
        grid-template-columns: 1fr !important;
      }

      #blog-modal-inner>div:last-child,
      #evidence-modal-inner>div:last-child {
        padding: 28px 20px 36px !important;
      }

      #blog-modal,
      #evidence-modal {
        padding: 16px 8px !important;
      }

      #svc-accordion .svc-active-content {
        padding: 20px 16px !important;
      }

      #svc-accordion .svc-active-content h3 {
        font-size: var(--text-base) !important;
      }

      #svc-accordion .svc-active-content p {
        font-size: var(--text-xs) !important;
      }

      .stat-card {
        min-width: 80px;
        padding: 10px 12px;
        flex: 1 1 calc(50% - 8px);
      }
    }

    @media (max-width: 640px) {
      #page-home [style*="flex:1 1 280px"],
      #page-about [style*="flex:1 1 280px"] {
        flex: 1 1 100% !important;
      }

      #page-home [style*="flex:1 1 340px"],
      #page-about [style*="flex:1 1 340px"],
      #page-about [style*="flex:1 1 300px"] {
        flex: 1 1 100% !important;
      }

      #page-home+footer [style*="display:flex"],
      footer [style*="display:flex; gap:32px"],
      footer [style*="display:flex; gap:40px"] {
        flex-direction: column !important;
        gap: 24px !important;
      }
    }

    @media (max-width: 380px) {
      #page-about [style*="grid-template-columns:repeat(auto-fill,minmax(220px"] {
        grid-template-columns: 1fr !important;
      }
    }

    @media (max-width: 400px) {
      h1,
      h2,
      h3,
      h4 {
        word-break: break-word;
        overflow-wrap: break-word;
      }

      .page {
        overflow-x: hidden;
      }
    }

    /* Accordion responsive */
    @media (max-width: 768px) {
      #svc-accordion {
        flex-direction: column !important;
        height: auto !important;
      }

      #svc-accordion .svc-panel {
        flex: none !important;
        min-height: 64px;
      }

      #svc-accordion .svc-active-content {
        position: relative !important;
        inset: auto !important;
        min-height: 220px;
      }

      #svc-accordion .svc-inactive-title {
        position: relative !important;
        inset: auto !important;
        padding: 16px 20px;
      }
    }

    @media (max-width: 480px) {
      #svc-accordion .svc-active-content {
        min-height: 180px;
        padding: 20px 16px !important;
      }

      #svc-accordion .svc-inactive-title {
        padding: 12px 16px !important;
      }

      #what-we-do {
        padding: 28px 16px !important;
      }
    }