/*
Theme Name: iTOL Digital
Theme URI: https://itoldigital.com
Author: iTOL Digital
Author URI: https://itoldigital.com
Description: Official agency website theme for iTOL Digital — with a WordPress-editable navigation menu, a Projects portfolio manageable from wp-admin, and a native WordPress blog. Built by iTOL Digital.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: itol-digital
*/

      :root {
        --orange: #e8601c;
        --orange-light: #fff0e6;
        --orange-mid: #f28b4d;
        --green: #17894e;
        --green-light: #e8f5ee;
        --navy: #14213d;
        --charcoal: #2b2d33;
        --body-text: #4a4a52;
        --muted: #8d8d96;
        --border: #e4e4e8;
        --surface: #f7f6f3;
        --cream: #fffdf9;
        --white: #ffffff;
        --font-display: "Instrument Serif", serif;
        --font-body: "Plus Jakarta Sans", sans-serif;
        --nav-h: 72px;
        --ease: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      }

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

      html {
        scroll-behavior: smooth;
        scroll-padding-top: var(--nav-h);
        -webkit-text-size-adjust: 100%;
      }

      body {
        font-family: var(--font-body);
        font-weight: 400;
        color: var(--body-text);
        background: var(--cream);
        line-height: 1.7;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      img {
        max-width: 100%;
        height: auto;
        display: block;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
      }
      ul {
        list-style: none;
      }
      input,
      textarea,
      select {
        font-family: inherit;
        font-size: 1rem;
      }

      h1,
      h2,
      h3,
      h4 {
        font-family: var(--font-body);
        font-weight: 800;
        line-height: 1.12;
        color: var(--navy);
        letter-spacing: -0.03em;
      }
      h2 {
        font-size: clamp(1.9rem, 2.4vw, 2.4rem);
      }
      .section-card h2,
      .about-text h2,
      .services-header h2,
      .partners-header h2 {
        margin-bottom: 20px;
      }

      .serif {
        font-family: var(--font-display);
        font-weight: 400;
        font-style: italic;
        letter-spacing: -0.01em;
      }
      .accent {
        color: var(--orange);
      }

      /* ============ UTILITIES ============ */
      .container {
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 32px;
      }
      .container-sm {
        max-width: 800px;
        margin: 0 auto;
        padding: 0 32px;
      }
      .pad-xl {
        padding: 48px 0;
      }
      .pad-lg {
        padding: 32px 0;
      }
      .pad-md {
        padding: 24px 0;
      }
      .bg-white {
        background: var(--white);
      }
      .bg-surface {
        background: var(--surface);
      }
      .bg-cream {
        background: var(--cream);
      }
      .bg-orange {
        background: var(--orange);
      }
      .bg-navy {
        background: var(--navy);
      }
      .text-center {
        text-align: center;
      }

      .label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--orange);
        margin-bottom: 16px;
      }
      .label::before {
        content: "";
        width: 8px;
        height: 8px;
        background: var(--orange);
        border-radius: 50%;
        display: inline-block;
      }
      .subtitle {
        font-size: 1.125rem;
        color: var(--muted);
        max-width: 520px;
        line-height: 1.7;
      }
      .subtitle.centered,
      .centered .subtitle {
        margin: 0 auto;
      }

      /* Buttons */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 32px;
        border-radius: 100px;
        font-weight: 700;
        font-size: 0.9rem;
        letter-spacing: 0.01em;
        transition: all 0.4s var(--ease);
        position: relative;
        overflow: hidden;
      }
      .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.15);
        transform: translateX(-100%);
        transition: transform 0.4s var(--ease);
      }
      .btn:hover::before {
        transform: translateX(0);
      }
      .btn-orange {
        background: var(--orange);
        color: var(--white);
      }
      .btn-orange:hover {
        background: #d15518;
        transform: translateY(-2px);
        box-shadow: 0 12px 36px rgba(232, 96, 28, 0.25);
      }
      .btn-dark {
        background: var(--navy);
        color: var(--white);
      }
      .btn-dark:hover {
        background: #1e3158;
        transform: translateY(-2px);
        box-shadow: 0 12px 36px rgba(20, 33, 61, 0.2);
      }
      .btn-ghost {
        background: transparent;
        color: var(--navy);
        border: 2px solid var(--border);
      }
      .btn-ghost:hover {
        border-color: var(--orange);
        color: var(--orange);
        transform: translateY(-2px);
      }
      .btn-white {
        background: var(--white);
        color: var(--orange);
      }
      .btn-white:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
      }
      .btn svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }

      /* Reveal Animation */
      .fade-up {
        opacity: 0;
        transform: translateY(40px);
        transition:
          opacity 0.8s var(--ease),
          transform 0.8s var(--ease);
      }
      .fade-up.visible {
        opacity: 1;
        transform: translateY(0);
      }
      .fade-up.d1 {
        transition-delay: 0.1s;
      }
      .fade-up.d2 {
        transition-delay: 0.2s;
      }
      .fade-up.d3 {
        transition-delay: 0.3s;
      }
      .fade-up.d4 {
        transition-delay: 0.4s;
      }
      .fade-up.d5 {
        transition-delay: 0.5s;
      }

      .partners-grid .partner-card {
        opacity: 0;
        transform: translateY(24px);
      }
      .partners-grid .partner-card.visible {
        opacity: 1;
        transform: translateY(0);
      }

      @keyframes float-gentle {
        0%,
        100% {
          transform: translateY(0px) rotate(0deg);
        }
        50% {
          transform: translateY(-14px) rotate(1deg);
        }
      }
      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      @keyframes spin-slow {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes pulse-ring {
        0% {
          transform: scale(1);
          opacity: 0.6;
        }
        100% {
          transform: scale(1.8);
          opacity: 0;
        }
      }
      @keyframes draw {
        from {
          stroke-dashoffset: 800;
        }
        to {
          stroke-dashoffset: 0;
        }
      }
      @keyframes blob {
        0%,
        100% {
          border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        }
        25% {
          border-radius: 58% 42% 30% 70% / 55% 30% 70% 45%;
        }
        50% {
          border-radius: 30% 70% 42% 58% / 70% 58% 42% 30%;
        }
        75% {
          border-radius: 70% 30% 58% 42% / 30% 70% 45% 55%;
        }
      }

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

      /* ============ NAVIGATION ============ */
      .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        min-height: var(--nav-h);
        display: flex;
        align-items: center;
        transition: all 0.5s var(--ease);
        padding: 8px 0;
      }
      .nav.scrolled {
        background: rgba(255, 253, 249, 0.85);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
      }
      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        padding: 0 32px;
      }
      .nav-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 800;
        font-size: 1.3rem;
        color: var(--navy);
        letter-spacing: -0.04em;
      }
      .logo-img {
        height: 44px;
        width: auto;
        display: block;
        transition: transform 0.3s var(--ease-spring);
      }
      .nav-logo:hover .logo-img {
        transform: scale(1.04);
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
      }
      .nav-links a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--charcoal);
        border-radius: 999px;
        transition: all 0.3s var(--ease);
        position: relative;
      }
      .nav-links a .nav-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        color: var(--orange);
        transition: transform 0.25s var(--ease), color 0.25s var(--ease);
        flex-shrink: 0;
      }
      .nav-links a .nav-icon svg {
        width: 16px;
        height: 16px;
        stroke-width: 2;
      }
      .nav-links a:not(.nav-cta):hover,
      .nav-links a:not(.nav-cta):focus-visible {
        color: var(--orange);
        background: var(--orange-light);
      }
      .nav-links a:not(.nav-cta):hover .nav-icon,
      .nav-links a:not(.nav-cta):focus-visible .nav-icon {
        transform: translateY(-1px) scale(1.05);
      }
      .nav-cta {
        background: var(--orange) !important;
        color: var(--white) !important;
        padding: 10px 20px !important;
        border-radius: 100px !important;
        font-weight: 700 !important;
        transition: all 0.3s var(--ease) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
      }
      .nav-cta .nav-icon {
        color: var(--white) !important;
      }
      .nav-cta:hover {
        background: #d15518 !important;
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(232, 96, 28, 0.25);
      }

      /* Mobile Toggle */
      .hamburger {
        display: none;
        width: 32px;
        height: 32px;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        z-index: 1001;
      }
      .hamburger span {
        display: block;
        width: 24px;
        height: 2.5px;
        background: var(--navy);
        border-radius: 2px;
        transition: all 0.35s var(--ease);
        transform-origin: center;
      }
      .hamburger.on span:nth-child(1) {
        transform: rotate(45deg) translate(4px, 6px);
      }
      .hamburger.on span:nth-child(2) {
        opacity: 0;
        transform: translateX(10px);
      }
      .hamburger.on span:nth-child(3) {
        transform: rotate(-45deg) translate(4px, -6px);
      }

      /* Mobile Menu */
      .mobile-nav {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--cream);
        z-index: 999;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 24px 20px;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s var(--ease);
      }
      .mobile-nav.open {
        opacity: 1;
        visibility: visible;
      }
      .mobile-nav a {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: min(100%, 280px);
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--navy);
        padding: 12px 16px;
        border-radius: 14px;
        opacity: 0;
        transform: translateY(24px);
        transition: all 0.4s var(--ease);
      }
      .mobile-nav a .nav-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        color: var(--orange);
        transition: transform 0.25s var(--ease);
        flex-shrink: 0;
      }
      .mobile-nav a .nav-icon svg {
        width: 18px;
        height: 18px;
        stroke-width: 2;
      }
      .mobile-nav.open a {
        opacity: 1;
        transform: translateY(0);
      }
      .mobile-nav a:nth-child(1) {
        transition-delay: 0.05s;
      }
      .mobile-nav a:nth-child(2) {
        transition-delay: 0.1s;
      }
      .mobile-nav a:nth-child(3) {
        transition-delay: 0.15s;
      }
      .mobile-nav a:nth-child(4) {
        transition-delay: 0.2s;
      }
      .mobile-nav a:nth-child(5) {
        transition-delay: 0.25s;
      }
      .mobile-nav a:nth-child(6) {
        transition-delay: 0.3s;
      }
      .mobile-nav a:hover,
      .mobile-nav a:focus-visible {
        color: var(--orange);
        background: rgba(232, 96, 28, 0.08);
      }
      .mobile-nav a:hover .nav-icon,
      .mobile-nav a:focus-visible .nav-icon {
        transform: translateX(2px);
      }
      .mobile-nav .btn {
        margin-top: 12px;
        opacity: 0;
        transform: translateY(24px);
        transition-delay: 0.35s;
      }
      .mobile-nav.open .btn {
        opacity: 1;
        transform: translateY(0);
      }

      /* ============ HERO ============ */
      .hero {
        position: relative;
        min-height: 100vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        padding-top: var(--nav-h);
        background: linear-gradient(
          165deg,
          var(--cream) 0%,
          #fff8f2 40%,
          #f0e6db 100%
        );
      }
      .hero-blob-1 {
        position: absolute;
        top: -10%;
        right: -5%;
        width: 550px;
        height: 550px;
        background: linear-gradient(
          135deg,
          rgba(232, 96, 28, 0.08),
          rgba(242, 139, 77, 0.04)
        );
        animation: blob 18s ease-in-out infinite;
        filter: blur(1px);
        pointer-events: none;
      }
      .hero-blob-2 {
        position: absolute;
        bottom: -15%;
        left: -10%;
        width: 400px;
        height: 400px;
        background: linear-gradient(
          225deg,
          rgba(20, 33, 61, 0.04),
          rgba(232, 96, 28, 0.03)
        );
        animation: blob 22s ease-in-out infinite reverse;
        pointer-events: none;
      }
      .hero-dots {
        position: absolute;
        top: 20%;
        left: 5%;
        width: 200px;
        height: 200px;
        background-image: radial-gradient(
          circle,
          var(--border) 1.2px,
          transparent 1.2px
        );
        background-size: 24px 24px;
        opacity: 0.7;
        pointer-events: none;
      }
      .hero-inner {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 60px;
        align-items: center;
        padding: 60px 0;
      }
      .hero-content {
        max-width: 620px;
      }
      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 18px;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 100px;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--body-text);
        margin-bottom: 28px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
      }
      .hero-badge .pulse-dot {
        width: 8px;
        height: 8px;
        background: var(--green);
        border-radius: 50%;
        position: relative;
      }
      .hero-badge .pulse-dot::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: var(--green);
        animation: pulse-ring 2s ease infinite;
      }
      .hero h1 {
        font-size: clamp(2.8rem, 5.5vw, 4.2rem);
        margin-bottom: 24px;
        line-height: 1.08;
      }
      .hero h1 .italic {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 400;
        color: var(--orange);
      }
      .hero p.hero-desc {
        font-size: 1.15rem;
        color: var(--body-text);
        margin-bottom: 36px;
        line-height: 1.8;
        max-width: 480px;
      }
      .hero-btns {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
      }

      /* Hero Visual */
      .hero-visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 440px;
      }
      .hero-card-main {
        background: var(--white);
        border-radius: 24px;
        padding: 40px;
        width: 100%;
        max-width: 400px;
        box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.06),
          0 1px 3px rgba(0, 0, 0, 0.04);
        border: 1px solid rgba(0, 0, 0, 0.04);
        position: relative;
        z-index: 2;
      }
      .hero-card-main .card-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 28px;
      }
      .hero-card-main .card-icon {
        width: 48px;
        height: 48px;
        background: var(--orange-light);
        border-radius: 14px;
        display: grid;
        place-items: center;
      }
      .hero-card-main .card-icon svg {
        width: 24px;
        height: 24px;
        color: var(--orange);
      }
      .hero-card-main .card-header h4 {
        font-size: 1rem;
        font-weight: 700;
      }
      .hero-card-main .card-header small {
        font-size: 0.8rem;
        color: var(--muted);
        font-weight: 500;
      }
      .section-card,
      .about-card {
        background: var(--white);
        border: 1px solid rgba(20, 33, 61, 0.12);
        border-radius: 32px;
        box-shadow: 0 24px 60px rgba(20, 33, 61, 0.08);
        padding: 40px 32px;
        overflow: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        min-width: 0;
      }
      .section-card {
        display: grid;
        gap: 20px;
      }
      .section-card .text-center {
        margin-bottom: 24px;
      }
      .section-card .services-grid,
      .section-card .partners-grid,
      .section-card .projects-grid,
      .section-card .testi-grid,
      .section-card .blog-grid,
      .section-card .contact-wrap {
        width: 100%;
      }
      .stat-bars {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .stat-bar-item {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .stat-bar-label {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--charcoal);
        width: 60px;
        flex-shrink: 0;
      }
      .stat-bar-track {
        flex: 1;
        height: 10px;
        background: var(--surface);
        border-radius: 100px;
        overflow: hidden;
      }
      .stat-bar-fill {
        height: 100%;
        border-radius: 100px;
        background: linear-gradient(90deg, var(--orange), var(--orange-mid));
        width: 0%;
        transition: width 1.5s var(--ease);
      }
      .stat-bar-val {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--navy);
        width: 40px;
        text-align: right;
      }

      .hero-float-badge {
        position: absolute;
        background: var(--white);
        border-radius: 16px;
        padding: 14px 18px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(0, 0, 0, 0.04);
        font-size: 0.82rem;
        z-index: 3;
        animation: float-gentle 5s ease-in-out infinite;
      }
      .hero-float-badge strong {
        display: block;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 2px;
      }
      .float-1 {
        top: 0;
        right: 0;
      }
      .float-1 strong {
        color: var(--green);
      }
      .float-2 {
        bottom: 10%;
        left: -10%;
        animation-delay: 1.5s;
      }
      .float-2 strong {
        color: var(--orange);
      }
      .float-3 {
        top: 35%;
        right: -15%;
        animation-delay: 3s;
      }
      .float-3 strong {
        color: var(--navy);
      }

      /* ============ MARQUEE ============ */
      .marquee-strip {
        background: var(--white);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 22px 0;
        overflow: hidden;
        position: relative;
      }
      .marquee-strip::before,
      .marquee-strip::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        z-index: 2;
        pointer-events: none;
      }
      .marquee-strip::before {
        left: 0;
        background: linear-gradient(
          90deg,
          var(--white),
          rgba(255, 255, 255, 0)
        );
      }
      .marquee-strip::after {
        right: 0;
        background: linear-gradient(
          270deg,
          var(--white),
          rgba(255, 255, 255, 0)
        );
      }
      .marquee-track {
        display: flex;
        width: max-content;
        animation: marquee 28s linear infinite;
      }
      .marquee-track span {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--navy);
        white-space: nowrap;
        padding: 0 28px;
        border-right: 1px solid var(--border);
      }
      .marquee-track span svg {
        width: 15px;
        height: 15px;
        color: var(--orange);
        flex-shrink: 0;
      }

      /* ============ ABOUT ============ */
      .about-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 24px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06);
        padding: 40px;
      }
      .about-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: start;
      }
      .about-img {
        position: relative;
        border-radius: 24px;
        overflow: hidden;
        aspect-ratio: 4 / 5;
        max-height: 460px;
        width: 100%;
        background: transparent;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .about-img-inner {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
      }
      .about-img-inner img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        border-radius: 20px;
      }
      .about-img-inner .letter {
        font-size: 7rem;
        font-weight: 800;
        color: var(--orange);
        line-height: 1;
        opacity: 0.15;
        font-family: var(--font-body);
        letter-spacing: -0.06em;
      }
      .about-img-inner .tagline {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.6rem;
        color: var(--navy);
        position: relative;
        z-index: 2;
      }
      .about-img-inner .sub {
        font-size: 0.9rem;
        color: var(--body-text);
        position: relative;
        z-index: 2;
      }

      .about-text .lead {
        font-size: 1.2rem;
        line-height: 1.8;
        color: var(--charcoal);
        margin-bottom: 20px;
      }
      .about-text p {
        margin-bottom: 16px;
        line-height: 1.8;
      }

      /* Values */
      .values-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 40px;
      }
      .val-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 32px 28px;
        transition: all 0.4s var(--ease);
        position: relative;
        overflow: hidden;
      }
      .val-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--orange);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s var(--ease);
      }
      .val-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.07);
        border-color: transparent;
      }
      .val-card:hover::before {
        transform: scaleX(1);
      }
      .val-icon {
        width: 50px;
        height: 50px;
        background: var(--orange-light);
        border-radius: 14px;
        display: grid;
        place-items: center;
        margin-bottom: 18px;
      }
      .val-icon svg {
        width: 24px;
        height: 24px;
        color: var(--orange);
      }
      .val-card h4 {
        margin-bottom: 8px;
        font-size: 1.05rem;
      }
      .val-card p {
        font-size: 0.9rem;
        line-height: 1.7;
        color: var(--muted);
      }

      /* Team */
      .team-row {
        display: grid;
        grid-template-columns: 160px 1fr;
        gap: 28px;
        align-items: center;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 24px;
        padding: 32px;
        margin-top: 24px;
        transition: box-shadow 0.4s var(--ease);
      }
      .team-row:hover {
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
      }
      .team-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--orange), var(--orange-mid));
        display: grid;
        place-items: center;
        font-size: 2.2rem;
        font-weight: 800;
        color: var(--white);
        margin: 0 auto;
        position: relative;
        overflow: hidden;
      }
      .team-avatar img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        z-index: 1;
      }
      .team-avatar span {
        position: relative;
        z-index: 0;
      }
      .team-avatar::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px dashed rgba(232, 96, 28, 0.25);
        animation: spin-slow 20s linear infinite;
        z-index: 2;
      }
      .team-info h3 {
        margin-bottom: 4px;
        font-size: 1.2rem;
      }
      .team-info .role {
        color: var(--orange);
        font-weight: 700;
        font-size: 0.9rem;
        margin-bottom: 12px;
      }
      .team-info p {
        font-size: 0.95rem;
        line-height: 1.7;
        color: var(--body-text);
      }
      .team-tags {
        display: flex;
        gap: 8px;
        margin-top: 14px;
        flex-wrap: wrap;
      }
      .team-socials {
        display: flex;
        gap: 10px;
        margin-top: 16px;
        align-items: center;
      }
      .verified-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin-left: 8px;
        border-radius: 999px;
        background: #1d9bf0;
        color: #fff;
        font-size: 0.75rem;
        font-weight: 700;
      }
      .team-tag {
        padding: 6px 14px;
        background: var(--surface);
        border-radius: 100px;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--charcoal);
      }

      /* Tag colour variety — team-tag & svc-tag cycle through a palette so tags don't all look identical */
      .team-tag:nth-child(6n + 1),
      .svc-tag:nth-child(6n + 1) {
        background: var(--orange-light);
        color: var(--orange);
      }
      .team-tag:nth-child(6n + 2),
      .svc-tag:nth-child(6n + 2) {
        background: var(--green-light);
        color: var(--green);
      }
      .team-tag:nth-child(6n + 3),
      .svc-tag:nth-child(6n + 3) {
        background: #e6f1fb;
        color: #2d7eb5;
      }
      .team-tag:nth-child(6n + 4),
      .svc-tag:nth-child(6n + 4) {
        background: #f2e9fc;
        color: #8449c9;
      }
      .team-tag:nth-child(6n + 5),
      .svc-tag:nth-child(6n + 5) {
        background: #fde9f1;
        color: #d6336c;
      }
      .team-tag:nth-child(6n + 0),
      .svc-tag:nth-child(6n + 0) {
        background: #e8ecf5;
        color: var(--navy);
      }

      /* ============ PARTNERS ============ */
      .partners-strip {
        border-top: 1px solid var(--border);
      }
      .partners-header {
        text-align: center;
        margin-bottom: 32px;
      }
      .partners-grid {
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(6, 1fr);
        gap: 20px;
      }
      .partner-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 26px 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-align: center;
        transition: all 0.4s var(--ease);
      }
      .partner-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.06);
        border-color: transparent;
      }
      .partner-mark {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: 0.9rem;
        color: var(--white);
        filter: none;
        opacity: 1;
        transition: all 0.4s var(--ease);
        position: relative;
        overflow: hidden;
      }
      .partner-card:hover .partner-mark {
        transform: scale(1.05);
      }
      .partner-mark img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        z-index: 1;
      }
      .partner-mark span {
        position: relative;
        z-index: 0;
      }
      .partner-name {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--charcoal);
      }
      .partner-mark.p1,
      .partner-mark.p2,
      .partner-mark.p3,
      .partner-mark.p4,
      .partner-mark.p5,
      .partner-mark.p6 {
        background: transparent;
      }

      /* ============ SERVICES ============ */
      .services-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
        margin-bottom: 56px;
      }
      .services-header .subtitle {
        max-width: 520px;
        margin: 0 auto;
      }
      .services-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
      .svc-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 24px;
        padding: 40px;
        transition: all 0.4s var(--ease);
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
      }
      .svc-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.07);
        border-color: transparent;
      }
      .svc-num {
        font-size: 4.5rem;
        font-weight: 800;
        color: var(--surface);
        line-height: 1;
        letter-spacing: -0.06em;
        margin-bottom: 8px;
        transition: color 0.4s var(--ease);
      }
      .svc-card:hover .svc-num {
        color: var(--orange-light);
      }
      .svc-icon {
        width: 52px;
        height: 52px;
        background: var(--orange-light);
        border-radius: 14px;
        display: grid;
        place-items: center;
        margin-bottom: 20px;
        transition: background 0.3s var(--ease);
      }
      .svc-card:hover .svc-icon {
        background: var(--orange);
      }
      .svc-icon svg {
        width: 26px;
        height: 26px;
        color: var(--orange);
        transition: color 0.3s var(--ease);
      }
      .svc-card:hover .svc-icon svg {
        color: var(--white);
      }
      .svc-card h3 {
        font-size: 1.25rem;
        margin-bottom: 10px;
      }
      .svc-card .desc {
        font-size: 0.95rem;
        line-height: 1.75;
        color: var(--body-text);
        margin-bottom: 20px;
        flex: 1;
      }
      .svc-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 24px;
      }
      .svc-tag {
        padding: 5px 12px;
        background: var(--surface);
        border-radius: 100px;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--charcoal);
        transition: all 0.3s var(--ease);
      }
      .svc-card:hover .svc-tag {
        transform: translateY(-1px);
      }
      .svc-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--orange);
        transition: gap 0.3s var(--ease);
      }
      .svc-card:hover .svc-link {
        gap: 12px;
      }
      .svc-link svg {
        width: 16px;
        height: 16px;
      }

      /* ============ PROJECTS ============ */
      .projects-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .prj-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.4s var(--ease);
      }
      .prj-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
      }
      .prj-img {
        aspect-ratio: 16/11;
        position: relative;
        overflow: hidden;
        background: var(--navy);
      }
      .prj-img::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.38);
        z-index: 1;
        pointer-events: none;
      }
      .prj-img-inner {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        font-size: 2rem;
        font-weight: 800;
        color: var(--white);
        transition: transform 0.6s var(--ease);
        position: relative;
        z-index: 2;
      }
      .prj-card:hover .prj-img-inner {
        transform: scale(1.06);
      }
      .prj-img-1 {
        background: linear-gradient(135deg, #f7934c 0%, #e8601c 100%);
      }
      .prj-img-2 {
        background: linear-gradient(135deg, #5ba4cf 0%, #2d7eb5 100%);
      }
      .prj-img-3 {
        background: linear-gradient(135deg, #4caf82 0%, #2d8b5e 100%);
      }
      .prj-tag {
        position: absolute;
        top: 14px;
        left: 14px;
        padding: 5px 12px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 100px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--navy);
      }
      .prj-tag.tag-1 {
        color: #c24c15;
      }
      .prj-tag.tag-2 {
        color: #2170a0;
      }
      .prj-tag.tag-3 {
        color: #227249;
      }
      .prj-body {
        padding: 24px;
      }
      .prj-body h3 {
        font-size: 1.1rem;
        margin-bottom: 8px;
      }
      .prj-body p {
        font-size: 0.88rem;
        color: var(--muted);
        line-height: 1.7;
        margin-bottom: 14px;
      }
      .prj-result {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 8px;
        font-size: 0.78rem;
        font-weight: 700;
      }
      .prj-result svg {
        width: 14px;
        height: 14px;
      }
      .prj-result.res-1 {
        background: var(--orange-light);
        color: #c24c15;
      }
      .prj-result.res-2 {
        background: #e6f1fb;
        color: #2170a0;
      }
      .prj-result.res-3 {
        background: var(--green-light);
        color: var(--green);
      }

      /* Clickable project card hint */
      .prj-card {
        cursor: pointer;
      }
      .prj-card:focus-visible {
        outline: 3px solid var(--orange);
        outline-offset: 3px;
      }
      .prj-img {
        position: relative;
      }
      .prj-view-hint {
        position: absolute;
        inset: 0;
        background: rgba(20, 33, 61, 0.6);
        backdrop-filter: blur(2px);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: var(--white);
        font-weight: 700;
        font-size: 0.85rem;
        letter-spacing: 0.01em;
        opacity: 0;
        transition: opacity 0.35s var(--ease);
      }
      .prj-view-hint svg {
        width: 16px;
        height: 16px;
      }
      .prj-card:hover .prj-view-hint,
      .prj-card:focus-visible .prj-view-hint {
        opacity: 1;
      }

      /* ============ PROJECT MODAL ============ */
      body.modal-open {
        overflow: hidden;
      }
      .project-modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 2000;
        background: rgba(20, 33, 61, 0.6);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.35s var(--ease),
          visibility 0.35s var(--ease);
      }
      .project-modal-overlay.open {
        opacity: 1;
        visibility: visible;
      }
      .project-modal {
        background: var(--white);
        border-radius: 28px;
        width: 100%;
        max-width: 720px;
        max-height: 88vh;
        overflow-y: auto;
        position: relative;
        transform: translateY(28px) scale(0.97);
        transition: transform 0.45s var(--ease-spring);
        box-shadow: 0 40px 120px rgba(0, 0, 0, 0.3);
      }
      .project-modal-overlay.open .project-modal {
        transform: translateY(0) scale(1);
      }
      .pm-close {
        position: absolute;
        top: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.92);
        display: grid;
        place-items: center;
        z-index: 5;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
        transition: all 0.3s var(--ease);
      }
      .pm-close:hover {
        background: var(--orange);
        transform: rotate(90deg);
      }
      .pm-close svg {
        width: 18px;
        height: 18px;
        color: var(--navy);
        transition: color 0.3s;
      }
      .pm-close:hover svg {
        color: var(--white);
      }
      .pm-hero {
        padding: 56px 40px 44px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        position: relative;
        overflow: hidden;
      }
      .pm-hero::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.16) 1px,
          transparent 1px
        );
        background-size: 18px 18px;
        pointer-events: none;
      }
      .pm-tag {
        position: relative;
        z-index: 2;
        padding: 6px 16px;
        background: rgba(255, 255, 255, 0.22);
        border-radius: 100px;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--white);
      }
      .pm-hero h2 {
        position: relative;
        z-index: 2;
        color: var(--white);
        font-size: clamp(1.5rem, 3vw, 2.1rem);
      }
      .pm-hero .pm-client {
        position: relative;
        z-index: 2;
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.95rem;
        font-weight: 600;
      }
      .pm-body {
        padding: 36px 40px 40px;
      }
      .pm-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 14px;
        margin-bottom: 30px;
      }
      .pm-stat {
        background: var(--surface);
        border-radius: 16px;
        padding: 18px;
        text-align: center;
      }
      .pm-stat strong {
        display: block;
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--navy);
        margin-bottom: 2px;
      }
      .pm-stat span {
        font-size: 0.76rem;
        color: var(--muted);
        font-weight: 600;
      }
      .pm-section {
        margin-bottom: 26px;
      }
      .pm-section h4 {
        font-size: 0.78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--orange);
        margin-bottom: 10px;
      }
      .pm-section p {
        font-size: 0.97rem;
        line-height: 1.8;
        color: var(--body-text);
      }

      /* Portfolio gallery inside the case study modal */
      .pm-gallery {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
      }
      .pm-gallery-item {
        aspect-ratio: 4/3;
        border-radius: 12px;
        overflow: hidden;
        background: var(--surface);
        border: 1px solid var(--border);
        cursor: pointer;
        position: relative;
        transition:
          transform 0.3s var(--ease),
          box-shadow 0.3s var(--ease);
      }
      .pm-gallery-item:hover,
      .pm-gallery-item:focus-visible {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
        outline: none;
      }
      .pm-gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .pm-gallery-empty {
        font-size: 0.88rem;
        color: var(--muted);
        background: var(--surface);
        border: 1px dashed var(--border);
        border-radius: 14px;
        padding: 22px;
        text-align: center;
      }
      .pm-testi {
        background: var(--orange-light);
        border-radius: 18px;
        padding: 26px;
        margin-bottom: 8px;
      }
      .pm-testi .testi-stars {
        margin-bottom: 14px;
      }
      .pm-testi blockquote {
        font-size: 0.95rem;
        line-height: 1.8;
        color: var(--charcoal);
        font-style: italic;
        margin-bottom: 16px;
      }
      .pm-cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 4px;
        padding-top: 28px;
        border-top: 1px solid var(--border);
      }
      .pm-cta p {
        font-size: 0.92rem;
        color: var(--body-text);
        margin: 0;
        font-weight: 600;
      }
      .pm-cta-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
      .pm-cta-actions .btn {
        min-width: 144px;
        justify-content: center;
      }

      @media (max-width: 600px) {
        .pm-hero {
          padding: 48px 24px 32px;
        }
        .pm-body {
          padding: 28px 24px 32px;
        }
        .pm-cta {
          flex-direction: column;
          align-items: flex-start;
        }
        .pm-cta-actions {
          width: 100%;
        }
        .pm-cta-actions .btn {
          width: 100%;
        }
      }

      /* ============ IMAGE LIGHTBOX ============ */
      body.lightbox-open {
        overflow: hidden;
      }
      .lightbox-overlay {
        position: fixed;
        inset: 0;
        z-index: 3000;
        background: rgba(10, 14, 26, 0.92);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.3s var(--ease),
          visibility 0.3s var(--ease);
      }
      .lightbox-overlay.open {
        opacity: 1;
        visibility: visible;
      }
      .lightbox-stage {
        position: relative;
        width: 100%;
        max-width: 900px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .lightbox-stage img {
        max-width: 100%;
        max-height: 80vh;
        border-radius: 14px;
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
        transform: scale(0.96);
        opacity: 0;
        transition:
          transform 0.35s var(--ease-spring),
          opacity 0.35s var(--ease);
      }
      .lightbox-overlay.open .lightbox-stage img {
        transform: scale(1);
        opacity: 1;
      }
      .lightbox-close {
        position: absolute;
        top: -18px;
        right: -18px;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--white);
        display: grid;
        place-items: center;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
        transition: all 0.3s var(--ease);
        z-index: 2;
      }
      .lightbox-close:hover {
        background: var(--orange);
        transform: rotate(90deg);
      }
      .lightbox-close svg {
        width: 18px;
        height: 18px;
        color: var(--navy);
        transition: color 0.3s;
      }
      .lightbox-close:hover svg {
        color: var(--white);
      }
      .lightbox-nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.25);
        display: grid;
        place-items: center;
        transition: all 0.3s var(--ease);
        z-index: 2;
      }
      .lightbox-nav-btn:hover {
        background: var(--orange);
        border-color: var(--orange);
      }
      .lightbox-nav-btn svg {
        width: 22px;
        height: 22px;
        color: var(--white);
      }
      .lightbox-prev {
        left: -8px;
      }
      .lightbox-next {
        right: -8px;
      }
      .lightbox-counter {
        position: absolute;
        bottom: -34px;
        left: 50%;
        transform: translateX(-50%);
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.04em;
      }
      @media (max-width: 640px) {
        .lightbox-close {
          top: -50px;
          right: 0;
        }
        .lightbox-prev {
          left: 4px;
        }
        .lightbox-next {
          right: 4px;
        }
      }

      /* ============ TESTIMONIALS ============ */
      .testi-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .testi-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 36px;
        transition: all 0.4s var(--ease);
        position: relative;
      }
      .testi-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
      }
      .testi-stars {
        display: flex;
        gap: 3px;
        margin-bottom: 16px;
      }
      .testi-stars svg {
        width: 16px;
        height: 16px;
        color: #f5a623;
        fill: #f5a623;
      }
      .testi-card blockquote {
        font-size: 0.95rem;
        line-height: 1.8;
        color: var(--body-text);
        margin-bottom: 24px;
        font-style: italic;
      }
      .testi-author {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .testi-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--orange-light);
        display: grid;
        place-items: center;
        font-weight: 800;
        font-size: 0.85rem;
        color: var(--orange);
        overflow: hidden;
        flex-shrink: 0;
      }
      .testi-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .testi-author strong {
        display: block;
        font-size: 0.9rem;
        color: var(--navy);
      }
      .testi-author span {
        font-size: 0.8rem;
        color: var(--muted);
      }

      /* ============ BLOG ============ */
      .blog-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .blog-card {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 20px;
        overflow: hidden;
        transition: all 0.4s var(--ease);
      }
      .blog-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
      }
      .blog-img {
        display: block;
        aspect-ratio: 16/9;
        position: relative;
        overflow: hidden;
      }
      .blog-img-bg {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
        transition: transform 0.6s var(--ease);
      }
      .blog-card:hover .blog-img-bg {
        transform: scale(1.06);
      }
      .blog-img-bg svg {
        width: 40px;
        height: 40px;
        color: rgba(255, 255, 255, 0.5);
      }
      .blog-img-1 {
        background: linear-gradient(135deg, #e8601c 0%, #f7a067 100%);
      }
      .blog-img-2 {
        background: linear-gradient(135deg, #14213d 0%, #35507a 100%);
      }
      .blog-img-3 {
        background: linear-gradient(135deg, #17894e 0%, #4caf82 100%);
      }
      .blog-cat {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 4px 12px;
        background: var(--white);
        border-radius: 100px;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--orange);
      }
      .blog-body {
        padding: 24px;
      }
      .blog-date {
        font-size: 0.78rem;
        color: var(--muted);
        margin-bottom: 6px;
      }
      .blog-body h3 {
        font-size: 1.05rem;
        margin-bottom: 8px;
        line-height: 1.35;
      }
      .blog-body p {
        font-size: 0.88rem;
        color: var(--muted);
        line-height: 1.7;
        margin-bottom: 14px;
      }
      .blog-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        font-size: 0.85rem;
        color: var(--orange);
        transition: gap 0.3s var(--ease);
      }
      .blog-card:hover .blog-more {
        gap: 10px;
      }
      .blog-more svg {
        width: 14px;
        height: 14px;
      }

      /* ============ VIEW MORE / VIEW ALL ============ */
      .section-more {
        display: flex;
        justify-content: center;
        margin-top: 40px;
      }
      .section-more .btn {
        padding: 14px 30px;
      }
      .section-more .btn svg {
        width: 16px;
        height: 16px;
        transition: transform 0.35s var(--ease);
      }
      .section-more .btn[aria-expanded="true"] svg {
        transform: rotate(180deg);
      }
      .section-more-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        padding: 0 6px;
        border-radius: 100px;
        background: var(--orange-light);
        color: var(--orange);
        font-size: 0.72rem;
        font-weight: 800;
      }
      .section-more .btn-ghost:hover .section-more-count {
        background: var(--orange);
        color: var(--white);
      }
      /* ============ CTA BANNER ============ */
      .cta-banner {
        background: var(--orange);
        padding: 80px 0;
        position: relative;
        overflow: hidden;
      }
      .cta-banner::before {
        content: "";
        position: absolute;
        top: -50%;
        right: -20%;
        width: 600px;
        height: 600px;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 50%;
        pointer-events: none;
      }
      .cta-banner::after {
        content: "";
        position: absolute;
        bottom: -40%;
        left: -10%;
        width: 400px;
        height: 400px;
        background: rgba(0, 0, 0, 0.06);
        border-radius: 50%;
        pointer-events: none;
      }
      .cta-inner {
        position: relative;
        z-index: 2;
        text-align: center;
      }
      .cta-inner h2 {
        color: var(--white);
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        margin-bottom: 16px;
      }
      .cta-inner p {
        color: rgba(255, 255, 255, 0.85);
        font-size: 1.1rem;
        margin-bottom: 32px;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
      }

      /* ============ CONTACT ============ */
      .contact-wrap {
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 60px;
        align-items: start;
      }
      .contact-info .lead {
        font-size: 1.1rem;
        color: var(--body-text);
        margin-bottom: 32px;
        line-height: 1.8;
      }
      .contact-methods {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-bottom: 32px;
      }
      .cm {
        display: flex;
        align-items: center;
        gap: 16px;
      }
      .cm-icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        background: var(--orange-light);
        border-radius: 12px;
        display: grid;
        place-items: center;
      }
      .cm-icon svg {
        width: 22px;
        height: 22px;
        color: var(--orange);
      }
      .cm-text strong {
        display: block;
        font-size: 0.82rem;
        color: var(--navy);
        margin-bottom: 1px;
      }
      .cm-text a,
      .cm-text span {
        font-size: 0.95rem;
        color: var(--body-text);
        transition: color 0.3s;
      }
      .cm-text a:hover {
        color: var(--orange);
      }
      .contact-socials {
        display: flex;
        gap: 10px;
      }
      .social-btn {
        width: 35px;
        height: 35px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        display: grid;
        place-items: center;
        transition: all 0.3s var(--ease);
      }
      .social-btn:hover {
        background: var(--orange);
        border-color: var(--orange);
      }
      .social-btn svg {
        width: 16px;
        height: 16px;
        color: var(--charcoal);
        transition: color 0.3s;
      }
      .social-btn:hover svg {
        color: var(--white);
      }

      /* Contact Form */
      .cf-wrap {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 24px;
        padding: 40px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
      }
      .cf-wrap h3 {
        font-size: 1.3rem;
        margin-bottom: 24px;
      }
      .fg {
        margin-bottom: 18px;
      }
      .fg label {
        display: block;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--charcoal);
        margin-bottom: 6px;
      }
      .fg input,
      .fg textarea,
      .fg select {
        width: 100%;
        padding: 13px 16px;
        background: var(--surface);
        border: 2px solid transparent;
        border-radius: 12px;
        color: var(--navy);
        font-size: 0.95rem;
        outline: none;
        transition: all 0.3s var(--ease);
      }
      .fg input::placeholder,
      .fg textarea::placeholder {
        color: var(--muted);
      }
      .fg input:focus,
      .fg textarea:focus,
      .fg select:focus {
        border-color: var(--orange);
        background: var(--white);
        box-shadow: 0 0 0 4px rgba(232, 96, 28, 0.08);
      }
      .fg textarea {
        resize: vertical;
        min-height: 120px;
      }
      .fg select {
        appearance: none;
        cursor: pointer;
      }
      .fg select option {
        background: var(--white);
        color: var(--navy);
      }
      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }
      .btn-send {
        width: 100%;
        padding: 16px;
        background: var(--orange);
        color: var(--white);
        border: none;
        border-radius: 12px;
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s var(--ease);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      .btn-send:hover {
        background: #d15518;
        transform: translateY(-2px);
        box-shadow: 0 12px 36px rgba(232, 96, 28, 0.2);
      }
      .btn-send svg {
        width: 18px;
        height: 18px;
      }
      .form-note {
        text-align: center;
        font-size: 0.78rem;
        color: var(--muted);
        margin-top: 10px;
      }

      /* ============ FOOTER ============ */
      .site-footer {
        background: var(--navy);
        color: rgba(255, 255, 255, 0.6);
        padding: 72px 0 0;
      }
      .footer-grid {
        display: grid;
        grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
        gap: 48px;
        padding-bottom: 48px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .footer-brand .nav-logo {
        margin-bottom: 16px;
        color: var(--white);
      }
      .footer-logo-img {
        height: 52px;
        width: auto;
        display: block;
      }
      .footer-brand p {
        font-size: 0.9rem;
        line-height: 1.7;
        max-width: 300px;
      }
      .footer-socials {
        display: flex;
        gap: 10px;
        margin-top: 20px;
      }
      .footer-socials .social-btn {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.08);
      }
      .footer-socials .social-btn svg {
        color: rgba(255, 255, 255, 0.6);
      }
      .footer-socials .social-btn:hover {
        background: var(--orange);
        border-color: var(--orange);
      }
      .footer-socials .social-btn:hover svg {
        color: var(--white);
      }
      .fc h4 {
        color: var(--white);
        font-size: 0.82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 20px;
      }
      .fc li {
        margin-bottom: 10px;
      }
      .fc a {
        font-size: 0.9rem;
        transition: color 0.3s;
      }
      .fc a:hover {
        color: var(--orange);
      }
      .footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 0;
        font-size: 0.8rem;
      }
      .powered-by {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .powered-by svg {
        width: 14px;
        height: 14px;
        color: var(--orange);
      }

      /* ============ WHATSAPP FAB ============ */
      .wa-fab {
        position: fixed;
        bottom: 24px;
        right: 24px;
        z-index: 900;
        width: 56px;
        height: 56px;
        background: #25d366;
        border-radius: 50%;
        display: grid;
        place-items: center;
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
        transition: all 0.3s var(--ease);
      }
      .wa-fab:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 30px rgba(37, 211, 102, 0.45);
      }
      .wa-fab svg {
        width: 28px;
        height: 28px;
        color: var(--white);
      }
      .wa-tip {
        position: absolute;
        right: 68px;
        background: var(--white);
        color: var(--navy);
        padding: 8px 16px;
        border-radius: 10px;
        font-size: 0.82rem;
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        opacity: 0;
        transform: translateX(8px);
        transition: all 0.3s var(--ease);
        pointer-events: none;
      }
      .wa-fab:hover .wa-tip {
        opacity: 1;
        transform: translateX(0);
      }

      /* ============ RESPONSIVE ============ */
      @media (max-width: 1024px) {
        .hero-inner {
          grid-template-columns: 1fr;
          text-align: center;
        }
        .hero-content {
          max-width: 100%;
        }
        .hero p.hero-desc {
          margin-left: auto;
          margin-right: auto;
        }
        .hero-btns {
          justify-content: center;
        }
        .hero-visual {
          display: none;
        }
        .about-wrap {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .about-img {
          max-width: 400px;
          margin: 0 auto;
        }
        .services-header {
          flex-direction: column;
          align-items: flex-start;
        }
        .services-grid {
          grid-template-columns: 1fr;
        }
        .projects-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .testi-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .blog-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .contact-wrap {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 32px;
        }
        .team-row {
          grid-template-columns: 1fr;
          text-align: center;
          justify-items: center;
        }
        .team-info {
          max-width: 760px;
          width: 100%;
        }
        .team-tags,
        .team-socials {
          justify-content: center;
        }
        .values-row {
          grid-template-columns: repeat(3, 1fr);
        }
        .partners-grid {
          grid-template-columns: repeat(3, minmax(180px, 1fr));
        }
      }

      @media (max-width: 1024px) {
        .nav-links {
          display: none;
        }
        .hamburger {
          display: flex;
        }
        .mobile-nav {
          display: flex;
        }
        .nav-inner {
          padding: 0 24px;
        }
      }

      @media (max-width: 768px) {
        :root {
          --nav-h: 64px;
        }
        .container,
        .container-sm {
          padding: 0 20px;
        }
        .pad-xl {
          padding: 80px 0;
        }
        .pad-lg {
          padding: 64px 0;
        }
        h1 {
          font-size: clamp(2rem, 8vw, 3rem);
        }
        h2 {
          font-size: clamp(1.6rem, 5vw, 2.2rem);
        }
        .section-card,
        .about-card {
          padding: 28px 20px;
          border-radius: 24px;
        }
        .about-wrap {
          gap: 24px;
          align-items: center;
        }
        .about-img {
          max-height: 360px;
          aspect-ratio: 4 / 5;
        }
        .about-text p {
          margin-bottom: 12px;
        }
        .values-row {
          grid-template-columns: 1fr;
          gap: 16px;
        }
        .services-grid,
        .projects-grid,
        .testi-grid,
        .blog-grid {
          gap: 16px;
        }
        .projects-grid {
          grid-template-columns: 1fr;
        }
        .testi-grid {
          grid-template-columns: 1fr;
        }
        .blog-grid {
          grid-template-columns: 1fr;
        }
        .form-row {
          grid-template-columns: 1fr;
        }
        .footer-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
        .footer-bottom {
          flex-direction: column;
          gap: 8px;
          text-align: center;
        }
        .contact-methods {
          gap: 14px;
        }
        .logo-img {
          height: 38px;
        }
        .team-row {
          padding: 24px 20px;
          gap: 20px;
        }
        .team-info {
          text-align: center;
        }
        .team-tags,
        .team-socials {
          justify-content: center;
        }
        .team-socials {
          flex-wrap: wrap;
        }
        .partners-grid {
          grid-template-columns: repeat(2, minmax(160px, 1fr));
        }
        .partner-card,
        .svc-card,
        .prj-card,
        .testi-card,
        .blog-card,
        .val-card {
          padding: 24px 20px;
        }
        .prj-body,
        .blog-body {
          padding: 20px;
        }
        .partner-card {
          min-width: 160px;
        }
      }

      @media (max-width: 640px) {
        .hero-inner,
        .about-wrap,
        .contact-wrap {
          gap: 28px;
        }
        .hero-btns {
          gap: 16px;
        }
        .partners-header {
          margin-bottom: 32px;
        }
        .partners-grid {
          grid-template-columns: repeat(6, minmax(180px, 1fr));
          overflow-x: auto;
          grid-auto-flow: column;
          scroll-snap-type: x mandatory;
          padding-bottom: 10px;
          margin-left: -20px;
          margin-right: -20px;
          width: calc(100% + 40px);
        }
        .partners-grid::-webkit-scrollbar {
          display: none;
        }
        .partners-grid {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .partner-card {
          min-width: 180px;
          scroll-snap-align: center;
        }
        .team-row {
          padding: 24px 20px;
        }
        .team-info {
          text-align: center;
        }
        .team-tags,
        .team-socials {
          justify-content: center;
        }
      }

      @media (max-width: 480px) {
        .hero-btns {
          flex-direction: column;
          align-items: center;
        }
        .hero-btns .btn {
          width: 100%;
          justify-content: center;
        }
        .cf-wrap {
          padding: 28px 20px;
        }
        .about-img {
          max-height: 320px;
        }
        .about-wrap {
          gap: 20px;
        }
        .team-row {
          grid-template-columns: 1fr;
          justify-items: center;
        }
        .team-info {
          text-align: center;
        }
        .team-tags,
        .team-socials {
          justify-content: center;
        }
        .svc-card {
          padding: 24px 20px;
        }
      }
    
/* ===========================================================
 * Single blog post (added — not in the original one-pager,
 * since "Read More" now links to a real WordPress post page)
 * =========================================================== */
.post-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + 56px) 0 40px;
  background: linear-gradient(165deg, var(--cream) 0%, #fff8f2 45%, #f0e6db 100%);
  border-bottom: 1px solid var(--border);
}
.post-hero .hero-blob-1,
.post-hero .hero-blob-2,
.post-hero .hero-dots {
  z-index: 0;
}
.post-hero .container {
  position: relative;
  z-index: 1;
}
.archive-hero {
  padding-bottom: 64px;
}
.archive-hero-inner {
  max-width: 640px;
}
.archive-hero .subtitle {
  margin-bottom: 28px;
}
.archive-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 480px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px 8px 6px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.archive-search:focus-within {
  border-color: var(--orange);
  box-shadow: 0 8px 24px rgba(232, 96, 28, 0.12);
}
.archive-search svg {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex-shrink: 0;
}
.archive-search input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: transparent;
  color: var(--body-text);
  min-width: 0;
}
.archive-search button {
  border: none;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 10px 20px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
  flex-shrink: 0;
}
.archive-search button:hover {
  background: var(--orange);
  transform: translateY(-1px);
}

/* Archive listing grid + pagination */
.archive-body {
  padding-top: 56px;
  padding-bottom: 72px;
}
.archive-grid {
  margin-bottom: 56px;
}
.archive-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.85rem;
  transition: all 0.3s var(--ease);
}
.archive-pagination .page-numbers svg {
  width: 14px;
  height: 14px;
}
.archive-pagination .page-numbers:hover {
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-2px);
}
.archive-pagination .page-numbers.current {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}
.archive-pagination .page-numbers.dots {
  border: none;
  background: transparent;
  color: var(--muted);
}

/* Empty / no-results state */
.archive-empty {
  max-width: 420px;
  margin: 40px auto;
  text-align: center;
  padding: 48px 32px;
  background: var(--white);
  border: 1px dashed var(--border);
  border-radius: 20px;
}
.archive-empty svg {
  width: 40px;
  height: 40px;
  color: var(--muted);
  margin-bottom: 16px;
}
.archive-empty h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 10px;
}
.archive-empty p {
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .archive-search {
    flex-wrap: wrap;
    border-radius: 20px;
    padding: 14px 16px;
  }
  .archive-search input {
    order: 2;
    width: 100%;
    padding: 4px 0;
  }
  .archive-search button {
    order: 3;
    width: 100%;
    padding: 12px;
    text-align: center;
  }
}
.post-hero .blog-cat {
  position: static;
  display: inline-block;
  margin-bottom: 14px;
}
.post-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--navy);
  margin-bottom: 10px;
}
.post-hero .post-meta {
  font-size: 0.85rem;
  color: var(--muted);
}
.post-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
.post-body .post-thumb {
  margin-bottom: 32px;
  border-radius: 16px;
  overflow: hidden;
}
.post-body .post-thumb img { width: 100%; height: auto; display: block; }
.entry-content {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--body-text);
}
.entry-content p { margin: 0 0 20px; }
.entry-content h2, .entry-content h3 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 32px 0 14px;
}
.entry-content blockquote {
  border-left: 3px solid var(--orange);
  margin: 24px 0;
  padding: 4px 0 4px 22px;
  font-style: italic;
  color: var(--muted);
}
.entry-content ul, .entry-content ol { padding-left: 22px; margin: 0 0 20px; }
.entry-content img { margin: 24px 0; border-radius: 12px; }
.entry-content a { color: var(--orange); text-decoration: underline; }
.post-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ===========================================================
 * COMMENTS — fully custom design (see comments.php)
 * =========================================================== */
.itol-comments {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.itol-comments-title {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--navy);
  margin-bottom: 28px;
}
.itol-comments-title span {
  color: var(--orange);
}
.itol-comments-closed {
  padding: 20px 24px;
  background: var(--surface);
  border-radius: 14px;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Comment list + threading */
.itol-comment-list,
.itol-comment-list .children {
  list-style: none;
}
.itol-comment-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}
.itol-comment-list .children {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0 0;
  padding-left: 28px;
  border-left: 2px solid var(--border);
}
.itol-comment-inner {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.itol-comment-inner:hover {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
  border-color: #d8d8de;
}
.itol-comment-avatar {
  flex-shrink: 0;
}
.itol-comment-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  display: block;
}
.itol-comment-content {
  flex: 1;
  min-width: 0;
}
.itol-comment-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 6px;
}
.itol-comment-author {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--navy);
}
.itol-comment-date {
  font-size: 0.8rem;
  color: var(--muted);
}
.itol-comment-date:hover {
  color: var(--orange);
}
.itol-comment-pending {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-light);
  padding: 3px 10px;
  border-radius: 100px;
}
.itol-comment-text {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--body-text);
  word-wrap: break-word;
}
.itol-comment-text p {
  margin: 0 0 10px;
}
.itol-comment-text p:last-child {
  margin-bottom: 0;
}
.itol-comment-actions {
  margin-top: 10px;
  display: flex;
  gap: 16px;
}
.itol-comment-reply a,
.itol-comment-edit a {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.itol-comment-reply a:hover,
.itol-comment-edit a:hover {
  text-decoration: underline;
}
.itol-comment-byuser.bypostauthor > .itol-comment-inner {
  border-color: var(--orange);
  background: var(--orange-light);
}

/* Comment pagination */
.itol-comment-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
  font-size: 0.85rem;
  font-weight: 700;
}
.itol-comment-nav a {
  color: var(--orange);
}
.itol-comment-nav a:hover {
  text-decoration: underline;
}

/* Comment form */
.itol-comment-reply-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.itol-cancel-reply a {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface);
  padding: 5px 14px;
  border-radius: 100px;
}
.itol-cancel-reply a:hover {
  color: var(--orange);
}
.itol-comment-notes {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 20px;
}
.itol-comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
}
.itol-form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.itol-form-row-half {
  width: calc(50% - 9px);
}
.itol-form-row label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
}
.itol-form-row label .req {
  color: var(--orange);
}
.itol-form-row input,
.itol-form-row textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--body-text);
  resize: vertical;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.itol-form-row input:focus,
.itol-form-row textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(232, 96, 28, 0.1);
}
.itol-form-row textarea {
  min-height: 140px;
}
.itol-form-submit {
  margin-top: 4px;
}
.itol-form-submit .btn {
  cursor: pointer;
  border: none;
  font-family: var(--font-body);
}

@media (max-width: 640px) {
  .itol-comment-list .children {
    padding-left: 16px;
  }
  .itol-comment-inner {
    padding: 16px;
    gap: 12px;
  }
  .itol-comment-avatar img {
    width: 38px;
    height: 38px;
  }
  .itol-form-row-half {
    width: 100%;
  }
  .itol-comment-form {
    padding: 20px;
  }
}

/* ===========================================================
 * Project video (added — card thumbnail + case-study player)
 * =========================================================== */
.prj-video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
  transition: transform 0.6s var(--ease);
}
.prj-card:hover .prj-video-thumb {
  transform: scale(1.06);
}
.prj-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--orange);
  display: grid;
  place-items: center;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
  pointer-events: none;
}
.prj-play-badge svg {
  width: 22px;
  height: 22px;
  margin-left: 3px;
}
.prj-card:hover .prj-play-badge {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--orange);
  color: var(--white);
}

.pm-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;
  overflow: hidden;
  background: var(--navy);
}
.pm-video-wrap video,
.pm-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}