:root {
        --ink: #07152b;
        --navy: #0b2447;
        --blue: #188ad5;
        --sky: #e9f6ff;
        --soft: #f5f9fd;
        --muted: #5b6b7c;
        --line: #dce8f2;
        --radius: 28px;
        --shadow: 0 24px 70px rgba(7, 21, 43, 0.13);
        --shadow2: 0 14px 34px rgba(7, 21, 43, 0.1);
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        font-family:
          Inter,
          Segoe UI,
          Roboto,
          Arial,
          sans-serif;
        background: linear-gradient(180deg, #f8fcff 0, #eef7fc 100%);
        color: var(--ink);
        font-weight: 650;
      }
      a {
        text-decoration: none;
        color: inherit;
      }
      .container {
        width: min(1180px, 92vw);
        margin: auto;
      }
      .topbar {
        background: #061326;
        color: #fff;
        font-size: 0.92rem;
      }
      .topbar .container {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.55rem 0;
      }
      .topbar a {
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      .site-header {
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(18px);
        position: sticky;
        top: 0;
        z-index: 50;
        border-bottom: 1px solid rgba(220, 232, 242, 0.85);
      }
      .header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 112px;
      }
      .brand {
        display: flex;
        align-items: center;
      }
      .brand img {
        width: 245px;
        max-width: 28vw;
        height: auto;
        display: block;
        filter: drop-shadow(0 12px 22px rgba(7, 21, 43, 0.09));
      }
      .nav {
        display: flex;
        align-items: center;
        gap: 0.18rem;
        font-weight: 950;
      }
      .nav a {
        padding: 0.75rem 0.75rem;
        border-radius: 999px;
        white-space: nowrap;
      }
      .nav a:hover,
      .nav a.active {
        background: var(--sky);
        color: #075c9c;
      }
      .nav .quote {
        background: linear-gradient(135deg, var(--blue), #0b69b0);
        color: #fff;
        margin-left: 0.35rem;
        box-shadow: 0 14px 28px rgba(24, 138, 213, 0.28);
        padding: 0.9rem 1.2rem;
      }
      .mobile-menu {
        display: none;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        padding: 1rem 1.32rem;
        font-weight: 950;
        border: 2px solid transparent;
        transition: 0.18s;
      }
      .btn:hover {
        transform: translateY(-2px);
      }
      .btn-primary {
        background: linear-gradient(135deg, var(--blue), #0b69b0);
        color: #fff;
        box-shadow: 0 16px 34px rgba(24, 138, 213, 0.28);
      }
      .btn-outline {
        background: #fff;
        color: var(--ink);
        border-color: var(--line);
      }
      .hero {
        background:
          radial-gradient(
            circle at 12% 10%,
            rgba(24, 138, 213, 0.24),
            transparent 28%
          ),
          linear-gradient(135deg, #07152b 0%, #0f2c53 52%, #0b72bd 100%);
        color: #fff;
        padding: 5.2rem 0;
        overflow: hidden;
      }
      .hero-grid {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 2.4rem;
        align-items: center;
      }
      .eyebrow {
        display: inline-flex;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 999px;
        padding: 0.6rem 0.9rem;
        font-weight: 950;
        margin-bottom: 1rem;
      }
      .hero h1,
      .page-hero h1 {
        font-size: clamp(2.55rem, 6vw, 5.7rem);
        line-height: 0.94;
        letter-spacing: -0.065em;
        margin: 0 0 1.05rem;
      }
      .hero p {
        font-size: 1.14rem;
        color: rgba(255, 255, 255, 0.9);
        margin: 0;
        max-width: 730px;
      }
      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-top: 1.6rem;
      }
      .hero-points {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem;
        margin-top: 1.45rem;
      }
      .hero-points span {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 16px;
        padding: 0.82rem 0.92rem;
        font-weight: 900;
      }
      .media-stack {
        position: relative;
      }
      .feature-photo,
      .page-hero-image,
      .full-width-img {
        border-radius: 34px;
        overflow: hidden;
        box-shadow: var(--shadow);
        border: 1px solid rgba(255, 255, 255, 0.18);
        background: #fff;
      }
      .feature-photo img {
        width: 100%;
        height: 470px;
        object-fit: cover;
        display: block;
      }
      .floating-card {
        position: absolute;
        left: -24px;
        bottom: 28px;
        background: rgba(255, 255, 255, 0.96);
        color: var(--ink);
        border-radius: 24px;
        padding: 1.08rem 1.15rem;
        box-shadow: var(--shadow);
        max-width: 310px;
      }
      .floating-card strong {
        display: block;
        font-size: 1.35rem;
        line-height: 1.1;
      }
      .floating-card span {
        display: block;
        color: var(--muted);
        font-weight: 850;
      }
      .trust-strip {
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 0;
      }
      .trust-strip .container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        padding: 1.12rem 0;
      }
      .trust-item {
        padding: 1.05rem;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 8px 22px rgba(7, 21, 43, 0.04);
        text-align: center;
      }
      .trust-item strong {
        display: block;
        color: var(--ink);
        font-size: 1.1rem;
      }
      .trust-item span {
        display: block;
        color: var(--muted);
        font-weight: 850;
        font-size: 0.92rem;
      }
      section {
        padding: 4.7rem 0;
      }
      .section-head {
        max-width: 880px;
        margin-bottom: 1.8rem;
      }
      .section-head.center {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
      }
      .section-head h2 {
        font-size: clamp(2rem, 4.2vw, 3.65rem);
        line-height: 1.02;
        letter-spacing: -0.05em;
        margin: 0 0 0.75rem;
      }
      .section-head p {
        color: var(--muted);
        font-size: 1.06rem;
        margin: 0;
      }
      .kicker {
        color: #0b77c6;
        font-weight: 950;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 0.78rem;
      }
      .grid-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
      }
      .card,
      .panel,
      .ba-card,
      .work-card {
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(219, 231, 242, 0.95);
        border-radius: var(--radius);
        box-shadow: var(--shadow2);
        overflow: hidden;
      }
      .card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
      }
      .card .copy,
      .panel,
      .ba-card .copy {
        padding: 1.45rem;
      }
      .card h3,
      .panel h2,
      .panel h3,
      .work-card strong {
        margin: 0.1rem 0 0.55rem;
        color: var(--ink);
        line-height: 1.14;
      }
      .card p,
      .panel p,
      .work-card span,
      .ba-card p {
        margin: 0;
        color: var(--muted);
      }
      .link-more {
        display: inline-block;
        margin-top: 1rem;
        color: #0a7fce;
        font-weight: 950;
      }
      .split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.45rem;
        align-items: center;
      }
      .split.wide-left {
        grid-template-columns: 1.1fr 0.9fr;
      }
      .dark-panel {
        background: linear-gradient(135deg, #07152b, #123466);
        color: #fff;
        border-radius: var(--radius);
        padding: 2rem;
        box-shadow: var(--shadow);
        overflow: hidden;
      }
      .dark-panel h2,
      .dark-panel h3 {
        color: #fff;
      }
      .dark-panel p,
      .dark-panel li {
        color: rgba(255, 255, 255, 0.86);
      }
      .dark-panel a {
        color: #fff;
        text-decoration: underline;
      }
      .check-list {
        list-style: none;
        margin: 1rem 0 0;
        padding: 0;
      }
      .check-list li {
        padding-left: 1.85rem;
        position: relative;
        margin: 0.6rem 0;
        font-weight: 850;
      }
      .check-list li:before {
        content: "✓";
        position: absolute;
        left: 0;
        color: #4ce094;
        font-weight: 950;
      }
      .mosaic {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr 0.8fr;
        grid-auto-rows: 190px;
        gap: 1rem;
      }
      .mosaic figure {
        margin: 0;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: var(--shadow2);
        background: #fff;
      }
      .mosaic figure:first-child {
        grid-row: span 2;
      }
      .mosaic img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .showcase {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 1.25rem;
        align-items: start;
      }
      .video-card {
        background: #000;
        border-radius: 32px;
        overflow: hidden;
        box-shadow: var(--shadow);
        border: 1px solid rgba(7, 21, 43, 0.1);
        align-self: start;
        aspect-ratio: 16/9;
      }
      .video-card video {
        width: 100%;
        height: 100%;
        aspect-ratio: 16/9;
        min-height: 0;
        object-fit: cover;
        background: #000;
        display: block;
      }
      .project-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 32px;
        padding: 1.7rem;
        box-shadow: var(--shadow);
      }
      .project-card h2 {
        font-size: clamp(1.8rem, 3vw, 2.8rem);
        line-height: 1.02;
        margin: 0.4rem 0;
        letter-spacing: -0.04em;
      }
      .project-card p {
        color: var(--muted);
      }
      .project-meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
        margin: 1.15rem 0;
      }
      .project-meta div {
        background: var(--soft);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 0.9rem;
      }
      .project-meta strong {
        display: block;
      }
      .project-meta span {
        color: var(--muted);
        font-weight: 850;
      }
      .review-note {
        background: #fff8e7;
        border: 1px solid #e3c47d;
        border-radius: 20px;
        padding: 1rem;
        color: #4d3b0d;
        font-weight: 850;
      }
      .before-after-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
      }
      .ba-images {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
        background: #eef6fb;
        padding: 0.75rem;
      }
      .ba-images figure {
        margin: 0;
        position: relative;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid var(--line);
      }
      .ba-images figure span {
        position: absolute;
        left: 0.6rem;
        top: 0.6rem;
        background: #0b2447;
        color: #fff;
        border-radius: 999px;
        padding: 0.34rem 0.6rem;
        text-transform: uppercase;
        font-size: 0.72rem;
        font-weight: 950;
        z-index: 2;
      }
      .ba-images figure + figure span {
        background: #229457;
      }
      .ba-images img {
        width: 100%;
        height: 240px;
        object-fit: contain;
        background: #fff;
        display: block;
      }
      .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
      }
      .work-card {
        margin: 0;
        display: flex;
        flex-direction: column;
      }
      .work-card img {
        width: 100%;
        height: 300px;
        object-fit: contain;
        background: #f8fbff;
        display: block;
      }
      .work-card figcaption {
        padding: 1rem;
      }
      .work-card strong {
        display: block;
        font-size: 1.05rem;
      }
      .work-card span {
        display: block;
        margin-top: 0.25rem;
        font-weight: 750;
      }
      .page-hero {
        background: linear-gradient(180deg, #fff, #eef8ff);
        padding: 3.6rem 0 3rem;
      }
      .page-hero-grid {
        display: grid;
        grid-template-columns: 1fr 0.72fr;
        gap: 2rem;
        align-items: center;
      }
      .breadcrumb {
        margin: 0 0 1rem;
        color: var(--muted);
        font-weight: 850;
      }
      .breadcrumb a {
        color: #0a7fce;
      }
      .page-hero p {
        color: var(--muted);
        font-size: 1.12rem;
        max-width: 900px;
      }
      .page-hero-image img,
      .full-width-img img {
        width: 100%;
        height: 360px;
        object-fit: contain;
        background: #fff;
        display: block;
      }
      .full-width-img img {
        height: auto;
        max-height: 360px;
        padding: 2rem;
      }
      .areas {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
      }
      .areas a {
        display: inline-flex;
        align-items: center;
        padding: 0.72rem 1rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--line);
        font-weight: 900;
        box-shadow: 0 6px 16px rgba(7, 21, 43, 0.04);
      }
      .cta {
        background: linear-gradient(135deg, #07152b, #123466 70%, #0b77c6);
        color: #fff;
        border-radius: 34px;
        padding: 2.4rem;
        box-shadow: var(--shadow);
      }
      .cta h2 {
        margin: 0 0 0.6rem;
        font-size: clamp(1.8rem, 3.4vw, 3.25rem);
        line-height: 1;
      }
      .cta p {
        color: rgba(255, 255, 255, 0.86);
        margin: 0 0 1.1rem;
        max-width: 850px;
      }
      .contact-grid {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 1.25rem;
      }
      form {
        display: grid;
        gap: 0.9rem;
      }
      label {
        font-weight: 900;
      }
      input,
      textarea,
      select {
        width: 100%;
        padding: 1rem;
        border: 1px solid var(--line);
        border-radius: 16px;
        font: inherit;
        background: #fff;
        margin-top: 0.3rem;
      }
      textarea {
        min-height: 160px;
      }
      footer {
        background: #051226;
        color: #fff;
        padding: 2.7rem 0;
        margin-top: 3rem;
      }
      footer .container {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 1.2rem;
      }
      footer h3 {
        margin-top: 0;
      }
      footer p {
        color: rgba(255, 255, 255, 0.78);
      }
      footer a {
        color: #dcefff;
        text-decoration: underline;
        text-underline-offset: 3px;
      }
      @media (max-width: 1120px) {
        .brand img {
          width: 190px;
        }
        .nav a {
          padding: 0.64rem 0.55rem;
          font-size: 0.93rem;
        }
        .hero-grid,
        .split,
        .split.wide-left,
        .showcase,
        .contact-grid,
        .page-hero-grid,
        footer .container {
          grid-template-columns: 1fr;
        }
        .feature-photo img {
          height: 390px;
        }
        .floating-card {
          position: static;
          margin-top: 1rem;
        }
        .mosaic {
          grid-template-columns: 1fr 1fr;
        }
        .mosaic figure:first-child {
          grid-row: auto;
        }
        .video-card video {
          min-height: 0;
        }
        .page-hero-image img {
          height: 330px;
        }
      }
      @media (max-width: 900px) {
        .nav {
          display: none;
        }
        .mobile-menu {
          display: block;
          position: relative;
        }
        .mobile-menu summary {
          list-style: none;
          background: #fff;
          border: 2px solid var(--line);
          border-radius: 999px;
          padding: 0.75rem 1rem;
          font-weight: 950;
        }
        .mobile-menu summary::-webkit-details-marker {
          display: none;
        }
        .mobile-menu div {
          position: absolute;
          right: 0;
          top: calc(100% + 10px);
          background: #fff;
          border: 1px solid var(--line);
          box-shadow: var(--shadow);
          border-radius: 20px;
          padding: 0.5rem;
          min-width: 270px;
          display: grid;
          z-index: 99;
        }
        .mobile-menu a {
          padding: 0.86rem 1rem;
          border-radius: 13px;
          font-weight: 900;
        }
        .grid-3,
        .gallery,
        .before-after-grid,
        .trust-strip .container {
          grid-template-columns: 1fr 1fr;
        }
        .header-row {
          min-height: 94px;
        }
        .brand img {
          width: 190px;
          max-width: 55vw;
        }
      }
      @media (max-width: 640px) {
        .topbar .container {
          display: block;
          text-align: center;
        }
        .brand img {
          width: 160px;
          max-width: 58vw;
        }
        .header-row {
          min-height: 84px;
        }
        .hero {
          padding: 3.7rem 0;
        }
        .hero h1,
        .page-hero h1 {
          font-size: 2.75rem;
        }
        .hero-points,
        .grid-3,
        .gallery,
        .before-after-grid,
        .trust-strip .container,
        .project-meta,
        .mosaic {
          grid-template-columns: 1fr;
        }
        .hero-actions .btn {
          width: 100%;
        }
        section {
          padding: 3.2rem 0;
        }
        .feature-photo img {
          height: 310px;
        }
        .work-card img {
          height: 250px;
        }
        .ba-images {
          grid-template-columns: 1fr;
        }
        .ba-images img {
          height: 250px;
        }
        .contact-grid {
          grid-template-columns: 1fr;
        }
        .video-card video {
          min-height: 0;
        }
        .page-hero-image img {
          height: 250px;
        }
      }

      .video-card video {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
        min-height: 0;
        object-fit: contain;
        background: #000;
        display: block;
      }
      .brand img {
        width: 245px;
        max-height: 104px;
        display: block;
        object-fit: contain;
      }
      .site-header {
        z-index: 50;
      }

      .form-note {
        font-size: 0.92rem;
        color: #5b677a;
        margin: 0.75rem 0 0;
      }
      .form-note a {
        font-weight: 700;
      }

      .brand img {
        width: 120px;
        max-height: 104px;
        display: block;
        object-fit: contain;
        border-radius: 18px;
      }
      .nav {
        gap: 0.08rem;
      }
      .nav a {
        padding: 0.66rem 0.56rem;
        font-size: 0.9rem;
      }
      .nav .quote {
        padding: 0.78rem 1rem;
      }
      .hp-field {
        display: none !important;
      }
      .notice-banner {
        background: #fff8e5;
        border: 1px solid #f0d08a;
        border-radius: 18px;
        padding: 1rem;
        color: #4d3b0d;
        margin: 1rem 0;
      }
      .blog-layout {
        display: grid;
        grid-template-columns: 1fr 330px;
        gap: 1.5rem;
        align-items: start;
      }
      .post-list {
        display: grid;
        gap: 1rem;
      }
      .post-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 24px;
        padding: 1.2rem;
        box-shadow: var(--shadow2);
      }
      .post-card h2,
      .post-card h3 {
        margin: 0.15rem 0 0.5rem;
        line-height: 1.12;
      }
      .post-meta {
        color: var(--muted);
        font-size: 0.9rem;
        font-weight: 850;
        margin: 0.4rem 0;
      }
      .pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin: 0.75rem 0;
      }
      .pill {
        display: inline-flex;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 999px;
        padding: 0.45rem 0.7rem;
        font-weight: 900;
        color: #0a6da8;
      }
      .article-body {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 28px;
        padding: 1.5rem;
        box-shadow: var(--shadow2);
      }
      .article-body h2 {
        margin-top: 1.5rem;
      }
      .article-body p,
      .article-body li {
        color: #344255;
        line-height: 1.72;
      }
      .article-body ul {
        padding-left: 1.3rem;
      }
      .ad-slot {
        border: 1px dashed #b8d2e8;
        background: #f7fbff;
        border-radius: 18px;
        padding: 1rem;
        text-align: center;
        color: #5b6b7c;
        font-size: 0.9rem;
        margin: 1.2rem 0;
      }
      .question-panel {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 28px;
        padding: 1.35rem;
        box-shadow: var(--shadow2);
      }
      .faq-list {
        display: grid;
        gap: 0.8rem;
      }
      .faq-list details {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 1rem;
      }
      .faq-list summary {
        font-weight: 950;
        cursor: pointer;
      }
      .cookie-consent {
        position: fixed;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        z-index: 9999;
        background: #061326;
        color: #fff;
        border-radius: 22px;
        box-shadow: var(--shadow);
        padding: 1rem;
        display: none;
      }
      .cookie-consent.show {
        display: block;
      }
      .cookie-consent .container {
        width: min(1100px, 100%);
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
      }
      .cookie-consent p {
        margin: 0;
        color: rgba(255, 255, 255, 0.86);
        font-weight: 700;
      }
      .cookie-consent .actions {
        display: flex;
        gap: 0.55rem;
        flex-wrap: wrap;
      }
      .cookie-consent button {
        border: 0;
        border-radius: 999px;
        padding: 0.75rem 0.95rem;
        font-weight: 950;
        cursor: pointer;
      }
      .cookie-accept {
        background: #188ad5;
        color: #fff;
      }
      .cookie-reject {
        background: #fff;
        color: #061326;
      }
      .legal-links {
        font-size: 0.9rem;
        margin-top: 0.7rem;
      }
      .legal-links a {
        margin-right: 0.8rem;
      }
      .admin-link {
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.5);
      }
      @media (max-width: 1120px) {
        .brand img {
          width: 96px;
        }
        .nav a {
          font-size: 0.82rem;
          padding: 0.58rem 0.4rem;
        }
        .blog-layout {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 640px) {
        .cookie-consent .container {
          display: block;
        }
        .cookie-consent .actions {
          margin-top: 0.8rem;
        }
        .brand img {
          width: 86px;
        }
      }

      .brand img {
        width: 240px !important;
        max-width: 30vw;
        max-height: 90px;
        object-fit: contain;
        border-radius: 0 !important;
        filter: none !important;
        background: transparent !important;
      }
      .page-hero-image img[src*="jp-whyte-profile-logo"] {
        padding: 1.1rem;
        object-fit: contain;
        background: #fff;
      }
      @media (max-width: 1120px) {
        .brand img {
          width: 210px !important;
          max-width: 42vw;
          max-height: 80px;
        }
      }
      @media (max-width: 640px) {
        .brand img {
          width: 170px !important;
          max-width: 54vw;
          max-height: 68px;
        }
      }

      .card img[src*="customer-projects"],
      .work-card img[src*="customer-projects"] {
        object-fit: cover;
        background: #f8fbff;
      }
      .gallery.premium-gallery .work-card img {
        height: 320px;
        object-fit: cover;
      }
      .before-after-grid .work-card img[src*="customer-projects"] {
        height: 320px;
      }
      @media (max-width: 640px) {
        .gallery.premium-gallery .work-card img,
        .before-after-grid .work-card img[src*="customer-projects"] {
          height: 250px;
        }
      }

      .brand img {
        width: 270px !important;
        max-width: 31vw !important;
        max-height: 112px !important;
        object-fit: contain !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        filter: none !important;
      }
      .page-hero-image img[src*="jp-whyte-logo-no--hero-final"],
      .page-hero-image img[src*="jp-whyte-profile-logo"],
      .page-hero-image img[src*="jp-whyte-logo-transparent-cropped"] {
        width: 100% !important;
        height: 360px !important;
        object-fit: contain !important;
        padding: 0.25rem !important;
        background: transparent !important;
        transform: scale(1.18);
      }
      .page-hero-image {
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(
          135deg,
          rgba(238, 248, 255, 0.86),
          rgba(255, 255, 255, 0.92)
        );
      }
      @media (max-width: 1120px) {
        .brand img {
          width: 230px !important;
          max-width: 42vw !important;
          max-height: 96px !important;
        }
        .page-hero-image img[src*="jp-whyte-logo-no--hero-final"],
        .page-hero-image img[src*="jp-whyte-profile-logo"],
        .page-hero-image img[src*="jp-whyte-logo-transparent-cropped"] {
          height: 310px !important;
          transform: scale(1.12);
        }
      }
      @media (max-width: 640px) {
        .brand img {
          width: 185px !important;
          max-width: 58vw !important;
          max-height: 78px !important;
        }
        .page-hero-image img[src*="jp-whyte-logo-no--hero-final"],
        .page-hero-image img[src*="jp-whyte-profile-logo"],
        .page-hero-image img[src*="jp-whyte-logo-transparent-cropped"] {
          height: 240px !important;
          transform: scale(1.08);
        }
      }

      :root {
        --lux-ink: #041023;
        --lux-navy: #061326;
        --lux-blue: #1498ee;
        --lux-cyan: #7de3ff;
        --lux-gold: #d8b66b;
        --lux-cream: #fffaf0;
        --glass: rgba(255, 255, 255, 0.76);
        --glass-border: rgba(255, 255, 255, 0.56);
        --lux-shadow: 0 30px 90px rgba(4, 16, 35, 0.17);
      }
      html {
        scroll-behavior: smooth;
        text-rendering: optimizeLegibility;
      }
      body {
        background:
          radial-gradient(
            circle at 14% 4%,
            rgba(125, 227, 255, 0.2),
            transparent 30rem
          ),
          radial-gradient(
            circle at 86% 14%,
            rgba(216, 182, 107, 0.18),
            transparent 26rem
          ),
          linear-gradient(180deg, #fbfdff 0%, #eef7fc 36%, #f9fbff 100%) !important;
        overflow-x: hidden;
      }
      body:before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        opacity: 0.35;
        background-image:
          linear-gradient(rgba(6, 19, 38, 0.045) 1px, transparent 1px),
          linear-gradient(90deg, rgba(6, 19, 38, 0.045) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: linear-gradient(
          180deg,
          transparent,
          black 14%,
          black 75%,
          transparent
        );
      }
      .scroll-progress {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(
          90deg,
          var(--lux-gold),
          var(--lux-cyan),
          var(--lux-blue)
        );
        transform: scaleX(0);
        transform-origin: left;
        z-index: 99999;
        box-shadow: 0 0 18px rgba(20, 152, 238, 0.45);
      }
      .topbar {
        background: linear-gradient(
          90deg,
          #030a14,
          #071c38 52%,
          #030a14
        ) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .site-header {
        background: rgba(255, 255, 255, 0.72) !important;
        backdrop-filter: blur(28px) saturate(160%) !important;
        -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
        transition:
          box-shadow 0.35s ease,
          background 0.35s ease,
          border-color 0.35s ease;
        box-shadow: 0 8px 34px rgba(4, 16, 35, 0.04);
      }
      .site-header.is-scrolled {
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: 0 18px 60px rgba(4, 16, 35, 0.12);
        border-color: rgba(216, 232, 242, 0.7);
      }
      .brand img {
        transition:
          transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
          opacity 0.35s ease;
      }
      .brand:hover img {
        transform: translateY(-1px) scale(1.018);
      }
      .nav a {
        transition:
          background 0.28s ease,
          color 0.28s ease,
          transform 0.28s ease,
          box-shadow 0.28s ease;
      }
      .nav a:hover {
        transform: translateY(-1px);
      }
      .nav .quote,
      .btn-primary {
        background: linear-gradient(
          135deg,
          #061326 0%,
          #0b5f9d 47%,
          #16a7ff 100%
        ) !important;
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.22);
      }
      .nav .quote:after,
      .btn-primary:after {
        content: "";
        position: absolute;
        inset: -40% -70%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.45),
          transparent
        );
        transform: translateX(-70%) rotate(12deg);
        transition: transform 0.75s ease;
      }
      .nav .quote:hover:after,
      .btn-primary:hover:after {
        transform: translateX(70%) rotate(12deg);
      }

      .hero {
        position: relative;
        overflow: hidden;
        min-height: calc(100svh - 130px);
        display: flex;
        align-items: center;
        background:
          radial-gradient(
            circle at var(--mx, 72%) var(--my, 32%),
            rgba(125, 227, 255, 0.34),
            transparent 22rem
          ),
          radial-gradient(
            circle at 12% 18%,
            rgba(216, 182, 107, 0.18),
            transparent 24rem
          ),
          linear-gradient(
            135deg,
            #061326 0%,
            #0d2c55 46%,
            #eaf8ff 46.2%,
            #ffffff 100%
          ) !important;
      }
      .hero:before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.05),
            transparent 34%,
            rgba(255, 255, 255, 0.55) 70%,
            transparent
          ),
          radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, 0.55),
            transparent 19rem
          );
        mix-blend-mode: screen;
        opacity: 0.82;
      }
      .hero:after {
        content: "";
        position: absolute;
        inset: auto -6rem -7rem auto;
        width: 30rem;
        height: 30rem;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(20, 152, 238, 0.28),
          transparent 65%
        );
        filter: blur(10px);
        animation: luxFloat 9s ease-in-out infinite alternate;
        pointer-events: none;
      }
      .hero .container {
        position: relative;
        z-index: 1;
      }
      .hero h1 {
        letter-spacing: -0.075em;
        color: #fff;
        text-wrap: balance;
        text-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
      }
      .hero p {
        color: rgba(255, 255, 255, 0.82) !important;
      }
      .hero .eyebrow,
      .kicker {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #eaf8ff;
        border-radius: 999px;
        padding: 0.52rem 0.78rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
      }
      .page-hero .kicker,
      .section-head .kicker,
      .project-card .kicker {
        background: linear-gradient(135deg, #e9f6ff, #fff8e2);
        border: 1px solid rgba(216, 182, 107, 0.35);
        color: #075c9c;
      }
      .hero-points span {
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
        transition:
          transform 0.32s ease,
          background 0.32s ease;
      }
      .hero-points span:hover {
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.16);
      }
      .feature-photo, .page-hero-image, .video-card, .card, .work-card, .ba-card, .post-card, .article-body, .question-panel {
        transform: perspective(1100px) rotateX(var(--tilt-x, 0deg))
          rotateY(var(--tilt-y, 0deg));
        will-change: transform;
        transition:
          transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1),
          box-shadow 0.38s ease,
          border-color 0.38s ease,
          background 0.38s ease;
      }
      .feature-photo,
      .page-hero-image,
      .video-card {
        box-shadow: 0 36px 110px rgba(4, 16, 35, 0.28) !important;
        border: 1px solid rgba(255, 255, 255, 0.36) !important;
      }
      .feature-photo img, .card img, .work-card img {
        transition:
          transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
          filter 0.7s ease;
      }
      .card:hover img, .work-card:hover img {
        transform: scale(1.045);
        filter: saturate(1.06) contrast(1.03);
      }
      .card, .work-card, .post-card, .ba-card, .question-panel, .article-body {
        background: rgba(255, 255, 255, 0.82) !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-color: rgba(255, 255, 255, 0.72) !important;
      }
      .card:hover, .work-card:hover, .post-card:hover {
        box-shadow: var(--lux-shadow) !important;
        border-color: rgba(216, 182, 107, 0.38) !important;
        transform: perspective(1100px) rotateX(var(--tilt-x, 0deg))
          rotateY(var(--tilt-y, 0deg)) translateY(-6px);
      }
      .floating-card {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.64);
        animation: luxFloat 5.8s ease-in-out infinite alternate;
      }
      @keyframes luxFloat {
        from {
          transform: translateY(0);
        }
        to {
          transform: translateY(-12px);
        }
      }
      .trust-strip {
        margin-top: -1px;
        background: linear-gradient(
          90deg,
          #061326,
          #0b2447,
          #061326
        ) !important;
      }
      .trust-strip .container {
        border-radius: 0;
      }
      .trust-item {
        position: relative;
      }
      .trust-item strong {
        background: linear-gradient(90deg, #fff, #d7f5ff, #ffd98a);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .trust-item:after {
        content: "";
        position: absolute;
        right: 0;
        top: 22%;
        height: 56%;
        width: 1px;
        background: rgba(255, 255, 255, 0.16);
      }
      .trust-item:last-child:after {
        display: none;
      }
      .section-head h2,
      .project-card h2,
      .cta h2,
      .page-hero h1 {
        letter-spacing: -0.055em;
        text-wrap: balance;
      }
      .section-head.center {
        max-width: 980px;
        margin-left: auto;
        margin-right: auto;
      }
      .dark-panel {
        background: linear-gradient(
          135deg,
          #061326,
          #102f58 58%,
          #0c6cad
        ) !important;
        position: relative;
        overflow: hidden;
      }
      .dark-panel:after {
        content: "";
        position: absolute;
        inset: -2px;
        background: radial-gradient(
          circle at 82% 18%,
          rgba(125, 227, 255, 0.25),
          transparent 20rem
        );
        pointer-events: none;
      }
      .dark-panel > * {
        position: relative;
        z-index: 1;
      }
      .mosaic figure {
        overflow: hidden;
        position: relative;
      }
      .mosaic figure:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          transparent 55%,
          rgba(4, 16, 35, 0.35)
        );
        opacity: 0;
        transition: opacity 0.45s ease;
      }
      .mosaic figure:hover:after {
        opacity: 1;
      }
      .mosaic img {
        transition: transform 0.85s cubic-bezier(0.2, 0.8, 0.2, 1);
      }
      .mosaic figure:hover img {
        transform: scale(1.08);
      }
      .project-card,
      .cta {
        position: relative;
        overflow: hidden;
      }
      .project-card:before,
      .cta:before {
        content: "";
        position: absolute;
        inset: -1px;
        background:
          radial-gradient(
            circle at 85% 12%,
            rgba(125, 227, 255, 0.25),
            transparent 18rem
          ),
          radial-gradient(
            circle at 0 100%,
            rgba(216, 182, 107, 0.18),
            transparent 20rem
          );
        pointer-events: none;
      }
      .project-card > *,
      .cta > * {
        position: relative;
        z-index: 1;
      }
      .project-meta div {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.7);
      }

      .luxury-marquee {
        padding: 0 !important;
        background: #061326;
        overflow: hidden;
        border-block: 1px solid rgba(255, 255, 255, 0.09);
      }
      .luxury-marquee .marquee-track {
        display: flex;
        gap: 2rem;
        white-space: nowrap;
        animation: marquee 34s linear infinite;
        padding: 1rem 0;
        color: #fff;
        font-weight: 950;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }
      .luxury-marquee span {
        display: inline-flex;
        align-items: center;
        gap: 2rem;
        opacity: 0.86;
      }
      .luxury-marquee span:after {
        content: "•";
        color: var(--lux-gold);
      }
      @keyframes marquee {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }
      .luxury-process {
        background: linear-gradient(180deg, #f8fcff, #ffffff);
      }
      .process-timeline {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
      }
      .process-step {
        position: relative;
        background: rgba(255, 255, 255, 0.82);
        border: 1px solid rgba(220, 232, 242, 0.8);
        border-radius: 28px;
        padding: 1.35rem;
        box-shadow: var(--shadow2);
        overflow: hidden;
      }
      .process-step:before {
        content: attr(data-step);
        display: inline-flex;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #061326, #1498ee);
        color: #fff;
        font-weight: 950;
        margin-bottom: 1rem;
      }
      .process-step:after {
        content: "";
        position: absolute;
        inset: auto -20% -30% auto;
        width: 11rem;
        height: 11rem;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(20, 152, 238, 0.16),
          transparent 66%
        );
      }
      .process-step h3 {
        margin: 0.2rem 0 0.45rem;
      }
      .process-step p {
        color: var(--muted);
        line-height: 1.6;
        margin: 0;
      }

      .page-hero {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            circle at 80% 10%,
            rgba(125, 227, 255, 0.24),
            transparent 22rem
          ),
          linear-gradient(180deg, #ffffff, #eef8ff) !important;
      }
      .page-hero:after {
        content: "";
        position: absolute;
        inset: auto 7% -8rem auto;
        width: 23rem;
        height: 23rem;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(216, 182, 107, 0.18),
          transparent 70%
        );
      }
      .page-hero-image {
        background: linear-gradient(
          135deg,
          rgba(238, 248, 255, 0.86),
          rgba(255, 255, 255, 0.66)
        ) !important;
        border: 1px solid rgba(255, 255, 255, 0.7);
      }
      .page-hero-image img[src*="jp-whyte-logo-no--hero-final"],
      .page-hero-image img[src*="jp-whyte-profile-logo"],
      .page-hero-image img[src*="jp-whyte-logo-transparent-cropped"] {
        filter: drop-shadow(0 26px 36px rgba(4, 16, 35, 0.12));
      }
      .pill-row .pill, .areas a {
        transition:
          transform 0.28s ease,
          box-shadow 0.28s ease,
          background 0.28s ease;
      }
      .pill-row .pill:hover, .areas a:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(4, 16, 35, 0.1);
        background: #fff;
      }
      .ad-slot {
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.75),
          rgba(233, 246, 255, 0.7)
        );
        border-style: solid;
        border-color: rgba(20, 152, 238, 0.22);
        backdrop-filter: blur(16px);
      }

      .reveal {
        opacity: 0;
        transform: translateY(34px);
        filter: blur(10px);
        transition:
          opacity 0.78s ease var(--reveal-delay, 0ms),
          transform 0.78s cubic-bezier(0.2, 0.8, 0.2, 1)
            var(--reveal-delay, 0ms),
          filter 0.78s ease var(--reveal-delay, 0ms);
      }
      .reveal.is-visible {
        opacity: 1;
        transform: none;
        filter: blur(0);
      }
      .ba-slider-ready .ba-images {
        display: block;
        position: relative;
        height: 340px;
        overflow: hidden;
        border-radius: 24px;
        background: #061326;
      }
      .ba-slider-ready .ba-images figure {
        position: absolute;
        inset: 0;
        margin: 0;
      }
      .ba-slider-ready .ba-images figure:nth-child(1) {
        z-index: 1;
      }
      .ba-slider-ready .ba-images figure:nth-child(2) {
        z-index: 2;
        clip-path: inset(0 0 0 var(--split, 50%));
      }
      .ba-slider-ready .ba-images img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .ba-slider-ready .ba-images figure span {
        position: absolute;
        top: 0.9rem;
        z-index: 3;
        background: rgba(6, 19, 38, 0.78);
        color: #fff;
        padding: 0.42rem 0.7rem;
        border-radius: 999px;
        font-weight: 950;
        font-size: 0.78rem;
        backdrop-filter: blur(12px);
      }
      .ba-slider-ready .ba-images figure:nth-child(1) span {
        left: 0.9rem;
      }
      .ba-slider-ready .ba-images figure:nth-child(2) span {
        right: 0.9rem;
      }
      .ba-range {
        position: absolute;
        inset: 0;
        z-index: 5;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: ew-resize;
      }
      .ba-handle {
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--split, 50%);
        z-index: 4;
        width: 2px;
        background: #fff;
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.12),
          0 0 22px rgba(255, 255, 255, 0.55);
      }
      .ba-handle i {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        box-shadow: 0 14px 36px rgba(4, 16, 35, 0.26);
      }
      .ba-handle i:before,
      .ba-handle i:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        transform: translateY(-50%);
      }
      .ba-handle i:before {
        left: 12px;
        border-right: 8px solid #0b2447;
      }
      .ba-handle i:after {
        right: 12px;
        border-left: 8px solid #0b2447;
      }
      footer {
        background:
          radial-gradient(
            circle at 14% 10%,
            rgba(20, 152, 238, 0.18),
            transparent 20rem
          ),
          linear-gradient(180deg, #061326, #030a14) !important;
      }
      @media (max-width: 1120px) {
        .hero {
          min-height: auto;
        }
        .process-timeline {
          grid-template-columns: 1fr 1fr;
        }
      }
      @media (max-width: 640px) {
        .hero {
          background: linear-gradient(
            180deg,
            #061326 0%,
            #0d2c55 62%,
            #f8fcff 62.2%,
            #fff 100%
          ) !important;
        }
        .hero h1 {
          font-size: 2.65rem;
        }
        .luxury-marquee .marquee-track {
          font-size: 0.78rem;
          animation-duration: 22s;
        }
        .process-timeline {
          grid-template-columns: 1fr;
        }
        .ba-slider-ready .ba-images {
          height: 270px;
        }
        .reveal {
          transform: translateY(20px);
          filter: blur(6px);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        *,
        *:before,
        *:after {
          animation: none !important;
          transition: none !important;
          scroll-behavior: auto !important;
        }
        .reveal {
          opacity: 1 !important;
          transform: none !important;
          filter: none !important;
        }
        .scroll-progress {
          display: none;
        }
        .card, .work-card {
          transform: none !important;
        }
      }

      .page-hero-image {
        min-height: 340px;
        padding: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .page-hero-image img[src*="jp-whyte-logo-no--hero-final"],
      .page-hero-image img[src*="jp-whyte-profile-logo"],
      .page-hero-image img[src*="jp-whyte-logo-transparent-cropped"] {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 290px !important;
        object-fit: contain !important;
        padding: 0 !important;
        transform: none !important;
      }
      @media (max-width: 1120px) {
        .page-hero-image {
          min-height: 300px;
          padding: 1rem;
        }
        .page-hero-image img[src*="jp-whyte-logo-no--hero-final"],
        .page-hero-image img[src*="jp-whyte-profile-logo"],
        .page-hero-image img[src*="jp-whyte-logo-transparent-cropped"] {
          max-height: 250px !important;
        }
      }
      @media (max-width: 640px) {
        .page-hero-image {
          min-height: 240px;
          padding: 0.8rem;
        }
        .page-hero-image img[src*="jp-whyte-logo-no--hero-final"],
        .page-hero-image img[src*="jp-whyte-profile-logo"],
        .page-hero-image img[src*="jp-whyte-logo-transparent-cropped"] {
          max-height: 200px !important;
        }
      }

      @media (max-width: 640px) {
        .topbar {
          font-size: 0.88rem;
        }
        .topbar .container {
          display: flex !important;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 0.28rem;
          padding: 0.62rem 0.75rem;
          text-align: center;
        }
        .topbar span {
          display: block;
          line-height: 1.25;
        }
        .topbar span:first-child {
          max-width: 330px;
          font-weight: 900;
        }
        .topbar span:last-child {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          gap: 0.18rem 0.42rem;
          max-width: 340px;
        }
        .topbar a {
          white-space: nowrap;
        }
      }
      @media (max-width: 390px) {
        .topbar span:first-child {
          max-width: 310px;
        }
        .topbar span:last-child {
          max-width: 310px;
        }
      }

      body {
        padding-bottom: 0;
      }
      .hero {
        min-height: calc(100svh - 118px) !important;
        padding: clamp(3.2rem, 6vw, 6.5rem) 0 !important;
        background:
          radial-gradient(
            circle at 76% 16%,
            rgba(125, 227, 255, 0.22),
            transparent 24rem
          ),
          radial-gradient(
            circle at 18% 18%,
            rgba(216, 182, 107, 0.16),
            transparent 22rem
          ),
          linear-gradient(
            135deg,
            #020814 0%,
            #061326 38%,
            #0c2d56 68%,
            #07152b 100%
          ) !important;
        isolation: isolate;
      }
      .hero:before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(
            90deg,
            rgba(2, 8, 20, 0.88),
            rgba(2, 8, 20, 0.32) 58%,
            rgba(2, 8, 20, 0.72)
          ),
          radial-gradient(
            circle at 82% 38%,
            rgba(255, 255, 255, 0.15),
            transparent 18rem
          ) !important;
        mix-blend-mode: normal !important;
        opacity: 1 !important;
        z-index: 0;
      }
      .hero:after {
        opacity: 0.45 !important;
        z-index: 0;
      }
      .hero .container {
        position: relative;
        z-index: 2;
      }
      .hero-grid {
        grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.92fr) !important;
        gap: clamp(1.4rem, 3vw, 3rem) !important;
        align-items: center !important;
      }
      .hero h1 {
        max-width: 840px;
        color: #fff !important;
        text-shadow: 0 22px 55px rgba(0, 0, 0, 0.46) !important;
      }
      .hero p {
        max-width: 720px;
        color: rgba(255, 255, 255, 0.88) !important;
        text-shadow: 0 12px 34px rgba(0, 0, 0, 0.36);
        font-weight: 780;
      }
      .hero .eyebrow {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.25) !important;
        color: #fff !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.16),
          0 18px 55px rgba(0, 0, 0, 0.18);
      }
      .hero-actions .btn-outline {
        background: rgba(255, 255, 255, 0.9) !important;
        color: #061326 !important;
        border-color: rgba(255, 255, 255, 0.35) !important;
        box-shadow: 0 20px 45px rgba(4, 16, 35, 0.18);
      }
      .hero-points {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0.78rem !important;
        max-width: 940px;
      }
      .hero-points span {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.13),
          0 16px 34px rgba(0, 0, 0, 0.16);
        font-size: 0.92rem;
        line-height: 1.2;
      }
      .media-stack {
        display: grid !important;
        gap: 1rem !important;
        align-items: start;
        position: relative !important;
      }
      .hero .feature-photo {
        position: relative !important;
        border-radius: 38px !important;
        overflow: hidden !important;
        background: #061326 !important;
        box-shadow: 0 38px 120px rgba(0, 0, 0, 0.34) !important;
      }
      .hero .feature-photo:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(2, 8, 20, 0.05),
          rgba(2, 8, 20, 0.24)
        );
        z-index: 1;
        pointer-events: none;
      }
      .hero .feature-photo img {
        height: clamp(360px, 48vw, 560px) !important;
        width: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transform: none !important;
        filter: saturate(1.06) contrast(1.03);
      }
      .hero .floating-card {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.92),
          rgba(233, 246, 255, 0.82)
        ) !important;
        color: #061326 !important;
        border: 1px solid rgba(255, 255, 255, 0.72) !important;
        border-radius: 28px !important;
        animation: none !important;
        box-shadow: 0 24px 70px rgba(4, 16, 35, 0.18) !important;
      }
      .hero .floating-card strong {
        color: #061326 !important;
      }
      .hero .floating-card span {
        color: #3d4e63 !important;
      }

      @media (max-width: 640px) {
        .topbar .container {
          padding: 0.52rem 0.8rem !important;
          gap: 0.12rem !important;
        }
        .topbar span:first-child {
          display: none !important;
        }
        .topbar span:last-child {
          display: flex !important;
          gap: 0.38rem !important;
          font-size: 0.9rem;
          line-height: 1.2;
          max-width: 100% !important;
          white-space: normal;
        }
        .topbar span:last-child:before {
          content: "Call";
          font-weight: 950;
          color: #9fe6ff;
          text-decoration: none;
        }
        .topbar span:last-child a[href^="mailto"] {
          display: none !important;
        }
        .header-row {
          min-height: 86px !important;
          padding: 0.25rem 0 !important;
        }
        .brand img {
          width: 210px !important;
          max-width: 54vw !important;
          max-height: 76px !important;
        }
        .mobile-menu summary {
          padding: 0.82rem 1.05rem !important;
          box-shadow: 0 14px 34px rgba(4, 16, 35, 0.08);
        }
        .hero {
          min-height: auto !important;
          padding: 3.4rem 0 2.5rem !important;
          background: linear-gradient(
            180deg,
            #020814 0%,
            #082142 58%,
            #0b3b6d 100%
          ) !important;
        }
        .hero:before {
          background:
            radial-gradient(
              circle at 75% 24%,
              rgba(125, 227, 255, 0.22),
              transparent 16rem
            ),
            linear-gradient(180deg, rgba(2, 8, 20, 0.18), rgba(2, 8, 20, 0.45)) !important;
        }
        .hero-grid {
          grid-template-columns: 1fr !important;
          gap: 1.35rem !important;
        }
        .hero h1 {
          font-size: clamp(2.75rem, 13vw, 4.15rem) !important;
          line-height: 0.95 !important;
          letter-spacing: -0.075em !important;
        }
        .hero p {
          font-size: 1.03rem !important;
          line-height: 1.42 !important;
          color: rgba(255, 255, 255, 0.88) !important;
        }
        .hero-points {
          grid-template-columns: 1fr 1fr !important;
          gap: 0.62rem !important;
        }
        .hero-points span {
          font-size: 0.83rem !important;
          padding: 0.72rem 0.74rem !important;
        }
        .hero .feature-photo img {
          height: 280px !important;
        }
        .hero .floating-card {
          border-radius: 22px !important;
          padding: 1rem !important;
        }
      }

      .signature-projects {
        position: relative;
        overflow: hidden;
        background: linear-gradient(180deg, #ffffff 0%, #f1f8ff 100%);
      }
      .signature-projects:before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            circle at 78% 10%,
            rgba(20, 152, 238, 0.16),
            transparent 28rem
          ),
          radial-gradient(
            circle at 16% 42%,
            rgba(216, 182, 107, 0.14),
            transparent 26rem
          );
        pointer-events: none;
      }
      .signature-projects .container {
        position: relative;
        z-index: 1;
      }
      .signature-grid {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 1.1rem;
        align-items: stretch;
      }
      .signature-card {
        position: relative;
        min-height: 360px;
        border-radius: 36px;
        overflow: hidden;
        box-shadow: var(--lux-shadow);
        border: 1px solid rgba(255, 255, 255, 0.65);
        background: #061326;
        isolation: isolate;
      }
      .signature-card img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(1.05) contrast(1.04);
        transform: scale(1.02);
        transition:
          transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
          filter 0.9s ease;
      }
      .signature-card:hover img {
        transform: scale(1.08);
        filter: saturate(1.1) contrast(1.06);
      }
      .signature-card:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(2, 8, 20, 0.08),
          rgba(2, 8, 20, 0.75)
        );
        z-index: 1;
      }
      .signature-card .copy {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 1.45rem;
        color: #fff;
      }
      .signature-card .copy h3 {
        font-size: clamp(1.45rem, 2.2vw, 2.35rem);
        margin: 0.25rem 0 0.35rem;
        line-height: 0.98;
        letter-spacing: -0.04em;
      }
      .signature-card .copy p {
        color: rgba(255, 255, 255, 0.84);
        margin: 0;
        line-height: 1.5;
      }
      .signature-stack {
        display: grid;
        gap: 1.1rem;
      }
      .signature-stack .signature-card {
        min-height: calc(180px - 0.55rem);
      }

      .compare-showcase {
        background: linear-gradient(180deg, #f8fcff, #ffffff);
      }
      .compare-showcase .ba-card {
        border-radius: 34px;
        overflow: hidden;
      }
      .compare-showcase .ba-card .copy h3 {
        font-size: 1.35rem;
      }
      .compare-showcase .before-after-grid {
        align-items: stretch;
      }

      .trust-strip {
        position: relative;
        z-index: 3;
      }
      .trust-item {
        background: rgba(255, 255, 255, 0.06) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
      }
      .trust-item span {
        color: rgba(255, 255, 255, 0.72) !important;
      }
      .process-step {
        transition:
          transform 0.35s ease,
          box-shadow 0.35s ease,
          border-color 0.35s ease;
      }
      .process-step:hover {
        transform: translateY(-7px);
        box-shadow: 0 28px 80px rgba(4, 16, 35, 0.13);
        border-color: rgba(216, 182, 107, 0.42);
      }

      .mobile-sticky-cta {
        display: none;
      }
      @media (max-width: 760px) {
        body {
          padding-bottom: 76px !important;
        }
        .mobile-sticky-cta {
          position: fixed;
          left: 0.85rem;
          right: 0.85rem;
          bottom: 0.85rem;
          z-index: 99990;
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0.55rem;
          background: rgba(255, 255, 255, 0.72);
          border: 1px solid rgba(255, 255, 255, 0.72);
          box-shadow: 0 22px 60px rgba(4, 16, 35, 0.26);
          backdrop-filter: blur(22px) saturate(150%);
          -webkit-backdrop-filter: blur(22px) saturate(150%);
          border-radius: 999px;
          padding: 0.45rem;
        }
        .mobile-sticky-cta a {
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 48px;
          border-radius: 999px;
          font-weight: 950;
          text-decoration: none;
          color: #061326;
          background: #fff;
        }
        .mobile-sticky-cta a:last-child {
          background: linear-gradient(135deg, #061326, #1498ee);
          color: #fff;
        }
        .signature-grid {
          grid-template-columns: 1fr;
        }
        .signature-card {
          min-height: 300px;
        }
        .signature-stack .signature-card {
          min-height: 240px;
        }
        .signature-card .copy {
          padding: 1.15rem;
        }
        .process-timeline {
          grid-template-columns: 1fr !important;
        }
        .trust-item:after {
          display: none;
        }
      }
      @media (max-width: 390px) {
        .hero-points {
          grid-template-columns: 1fr !important;
        }
      }

      :root {
        --gold: #d8b66b;
        --ice: #eaf7ff;
        --deep: #020816;
      }
      .cinematic-hero {
        position: relative;
        min-height: calc(100vh - 112px);
        padding: clamp(3.2rem, 6vw, 6.8rem) 0 clamp(3rem, 5vw, 5rem);
        overflow: hidden;
        color: #fff;
        background:
          radial-gradient(
            circle at var(--mx, 72%) var(--my, 34%),
            rgba(42, 176, 255, 0.3),
            transparent 27%
          ),
          radial-gradient(
            circle at 18% 18%,
            rgba(216, 182, 107, 0.22),
            transparent 28%
          ),
          linear-gradient(
            135deg,
            #020816 0%,
            #08162b 35%,
            #0c2c51 68%,
            #03101f 100%
          ) !important;
        isolation: isolate;
      }
      .cinematic-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.08) 0 1px,
            transparent 1px 18px
          ),
          radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, 0.13),
            transparent 42%
          );
        opacity: 0.45;
        mix-blend-mode: screen;
        pointer-events: none;
      }
      .cinematic-hero:after {
        content: "";
        position: absolute;
        inset: auto -12% -32% -12%;
        height: 44%;
        background: linear-gradient(
          180deg,
          transparent,
          rgba(235, 248, 255, 0.18) 54%,
          rgba(235, 248, 255, 0.06)
        );
        filter: blur(18px);
        transform: skewY(-6deg);
        pointer-events: none;
      }
      .cinematic-bg,
      .cinematic-bg span {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }
      .lux-orb {
        width: 32rem;
        height: 32rem;
        border-radius: 999px;
        filter: blur(42px);
        opacity: 0.56;
        animation: luxFloat 13s ease-in-out infinite alternate;
      }
      .lux-orb-one {
        left: -10rem;
        top: 10%;
        background: rgba(24, 138, 213, 0.42);
      }
      .lux-orb-two {
        right: -9rem;
        top: 4%;
        background: rgba(216, 182, 107, 0.3);
        animation-delay: -4s;
      }
      .lux-orb-three {
        left: 45%;
        bottom: -13rem;
        background: rgba(255, 255, 255, 0.18);
        animation-delay: -8s;
      }
      .paint-ribbon {
        inset: auto;
        height: 18rem;
        width: 82rem;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.16),
          rgba(35, 163, 245, 0.22),
          rgba(216, 182, 107, 0.18),
          transparent
        );
        transform: rotate(-18deg);
        filter: blur(2px);
        opacity: 0.55;
        animation: ribbonDrift 10s ease-in-out infinite alternate;
      }
      .paint-ribbon-one {
        left: -16rem;
        bottom: 2rem;
      }
      .paint-ribbon-two {
        right: -20rem;
        top: 10rem;
        transform: rotate(-18deg) scaleY(0.58);
        opacity: 0.26;
        animation-delay: -5s;
      }
      .grain-layer {
        opacity: 0.12;
        background-image: radial-gradient(
          rgba(255, 255, 255, 0.58) 1px,
          transparent 1px
        );
        background-size: 4px 4px;
        mix-blend-mode: overlay;
      }
      .cinematic-grid {
        position: relative;
        z-index: 3;
        display: grid;
        grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
        gap: clamp(2.2rem, 5vw, 5.8rem);
        align-items: center;
      }
      .cinematic-copy {
        max-width: 760px;
      }
      .cinematic-eyebrow {
        color: #f6d88d !important;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow:
          inset 0 1px rgba(255, 255, 255, 0.18),
          0 20px 45px rgba(0, 0, 0, 0.18);
      }
      .cinematic-copy h1 {
        margin: 0.95rem 0 1.05rem !important;
        font-size: clamp(3.65rem, 7.6vw, 7.6rem) !important;
        line-height: 0.84 !important;
        letter-spacing: -0.078em !important;
        text-wrap: balance;
        color: #fff;
        text-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
      }
      .cinematic-copy p {
        max-width: 680px !important;
        font-size: clamp(1.04rem, 1.5vw, 1.28rem) !important;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.88) !important;
        text-shadow: 0 12px 30px rgba(0, 0, 0, 0.48);
      }
      .cinematic-copy > * {
        opacity: 0;
        transform: translateY(24px);
        animation: cinematicRise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      .cinematic-copy > *:nth-child(2) {
        animation-delay: 0.12s;
      }
      .cinematic-copy > *:nth-child(3) {
        animation-delay: 0.22s;
      }
      .cinematic-copy > *:nth-child(4) {
        animation-delay: 0.32s;
      }
      .cinematic-copy > *:nth-child(5) {
        animation-delay: 0.42s;
      }
      .cinematic-cta {
        position: relative;
        overflow: hidden;
        box-shadow:
          0 24px 65px rgba(24, 138, 213, 0.42),
          inset 0 1px rgba(255, 255, 255, 0.38) !important;
      }
      .cinematic-cta:after {
        content: "";
        position: absolute;
        inset: -50% -30%;
        background: linear-gradient(
          110deg,
          transparent,
          rgba(255, 255, 255, 0.42),
          transparent
        );
        transform: translateX(-70%) rotate(18deg);
        animation: buttonSheen 3.8s ease-in-out infinite;
      }
      .cinematic-ghost {
        background: rgba(255, 255, 255, 0.92) !important;
        border-color: rgba(255, 255, 255, 0.55) !important;
        color: #07152b !important;
      }
      .cinematic-proof {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
        margin-top: 1.45rem;
      }
      .cinematic-proof span {
        min-height: 86px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0.12rem;
        padding: 1rem;
        border-radius: 22px;
        background: linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.13),
          rgba(255, 255, 255, 0.06)
        );
        border: 1px solid rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        color: rgba(255, 255, 255, 0.82);
        font-weight: 900;
        box-shadow: 0 18px 55px rgba(0, 0, 0, 0.2);
      }
      .cinematic-proof strong {
        font-size: 1.18rem;
        color: #fff;
      }
      .cinematic-showcase {
        position: relative;
        min-height: 590px;
        perspective: 1200px;
        transform-style: preserve-3d;
        opacity: 0;
        animation: showcaseIn 1.1s 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
      }
      .showcase-glow {
        position: absolute;
        inset: 7% 5% 7% 2%;
        background:
          radial-gradient(
            circle at 62% 36%,
            rgba(62, 185, 255, 0.34),
            transparent 42%
          ),
          radial-gradient(
            circle at 35% 75%,
            rgba(216, 182, 107, 0.25),
            transparent 36%
          );
        filter: blur(24px);
      }
      .cinematic-window {
        position: absolute;
        overflow: hidden;
        border-radius: 34px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow:
          0 34px 100px rgba(0, 0, 0, 0.42),
          inset 0 1px rgba(255, 255, 255, 0.24);
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
      }
      .cinematic-window img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transform: scale(1.045);
        animation: slowZoom 13s ease-in-out infinite alternate;
      }
      .main-window {
        right: 1.4rem;
        top: 1rem;
        width: min(92%, 560px);
        height: 390px;
        transform: rotateY(-8deg) rotateX(3deg);
        animation:
          mainWindowReveal 1s 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both,
          windowFloat 7s 1.45s ease-in-out infinite alternate;
      }
      .window-caption {
        position: absolute;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        padding: 1rem 1.05rem;
        border-radius: 22px;
        background: linear-gradient(
          180deg,
          rgba(4, 14, 28, 0.54),
          rgba(4, 14, 28, 0.82)
        );
        border: 1px solid rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(12px);
      }
      .window-caption span {
        display: block;
        color: #f6d88d;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        font-size: 0.72rem;
        font-weight: 950;
      }
      .window-caption strong {
        display: block;
        color: #fff;
        font-size: 1.22rem;
        margin-top: 0.18rem;
      }
      .small-window {
        width: 220px;
        height: 165px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
      }
      .small-window img {
        position: absolute;
        inset: 0;
      }
      .small-window strong {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-self: flex-start;
        margin: 0.8rem;
        padding: 0.55rem 0.72rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        color: #07152b;
        font-size: 0.82rem;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
      }
      .small-window-one {
        left: 1.1rem;
        bottom: 7.2rem;
        transform: rotateY(9deg) rotateZ(-2deg);
        animation:
          miniWindowReveal 0.9s 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) both,
          windowFloat 7.5s 1.65s ease-in-out infinite alternate;
      }
      .small-window-two {
        right: 6rem;
        bottom: 1rem;
        transform: rotateY(-7deg) rotateZ(2deg);
        animation:
          miniWindowReveal 0.9s 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) both,
          windowFloat 8.2s 1.9s ease-in-out infinite alternate-reverse;
      }
      .floating-spec {
        position: absolute;
        left: 3.4rem;
        top: 4.5rem;
        max-width: 230px;
        padding: 1rem;
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.92);
        color: #07152b;
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
        z-index: 5;
        opacity: 0;
        transform: translateY(24px);
        animation: cinematicRise 0.9s 0.82s cubic-bezier(0.2, 0.8, 0.2, 1)
          forwards;
      }
      .floating-spec span {
        display: block;
        color: #0b77c6;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.7rem;
        font-weight: 950;
        margin-bottom: 0.28rem;
      }
      .floating-spec strong {
        display: block;
        font-size: 1rem;
        line-height: 1.15;
      }
      .scroll-cue {
        position: absolute;
        z-index: 5;
        left: 50%;
        bottom: 1.25rem;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 0.55rem;
        color: rgba(255, 255, 255, 0.75);
        font-weight: 900;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        font-size: 0.72rem;
      }
      .scroll-cue span {
        width: 20px;
        height: 34px;
        border: 1px solid rgba(255, 255, 255, 0.34);
        border-radius: 999px;
        position: relative;
      }
      .scroll-cue span:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 7px;
        width: 4px;
        height: 4px;
        margin-left: -2px;
        border-radius: 50%;
        background: #fff;
        animation: scrollDot 1.7s ease-in-out infinite;
      }

      .media-stack .floating-card {
        position: static !important;
        margin: 1rem 0 0 !important;
        max-width: none !important;
      }

      .dark-panel,
      .hero,
      .cinematic-hero {
        text-shadow: none;
      }

      #signature-wow-start {
        background: linear-gradient(
          90deg,
          #061326,
          #0c2c51,
          #061326
        ) !important;
        color: #fff;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      #signature-wow-start .marquee-track span {
        color: #fff !important;
      }

      @keyframes cinematicRise {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes showcaseIn {
        from {
          opacity: 0;
          transform: translateX(38px) scale(0.96);
        }
        to {
          opacity: 1;
          transform: translateX(0) scale(1);
        }
      }
      @keyframes mainWindowReveal {
        from {
          clip-path: inset(0 0 100% 0 round 34px);
          opacity: 0.2;
        }
        to {
          clip-path: inset(0 0 0 0 round 34px);
          opacity: 1;
        }
      }
      @keyframes miniWindowReveal {
        from {
          opacity: 0;
          transform: translateY(24px) scale(0.9);
        }
        to {
          opacity: 1;
        }
      }
      @keyframes slowZoom {
        from {
          transform: scale(1.02);
        }
        to {
          transform: scale(1.09);
        }
      }
      @keyframes luxFloat {
        from {
          transform: translate3d(0, 0, 0) scale(1);
        }
        to {
          transform: translate3d(3rem, -2rem, 0) scale(1.08);
        }
      }
      @keyframes ribbonDrift {
        from {
          transform: translateX(-2rem) rotate(-18deg);
        }
        to {
          transform: translateX(3rem) rotate(-14deg);
        }
      }
      @keyframes windowFloat {
        from {
          translate: 0 0;
        }
        to {
          translate: 0 -12px;
        }
      }
      @keyframes buttonSheen {
        0%,
        46% {
          transform: translateX(-70%) rotate(18deg);
        }
        74%,
        100% {
          transform: translateX(70%) rotate(18deg);
        }
      }
      @keyframes scrollDot {
        0% {
          opacity: 0;
          transform: translateY(0);
        }
        30% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translateY(13px);
        }
      }
      @media (max-width: 1120px) {
        .cinematic-hero {
          min-height: auto;
          padding: 4.4rem 0 4.8rem;
        }
        .cinematic-grid {
          grid-template-columns: 1fr;
        }
        .cinematic-showcase {
          min-height: 520px;
        }
        .main-window {
          right: auto;
          left: 50%;
          transform: translateX(-50%) rotateY(0deg) rotateX(0deg);
          width: min(100%, 650px);
        }
        .small-window-one {
          left: 0;
          bottom: 3rem;
        }
        .small-window-two {
          right: 0;
          bottom: 0;
        }
        .floating-spec {
          left: 1rem;
          top: 1rem;
        }
      }
      @media (max-width: 640px) {
        .cinematic-hero {
          padding: 2.75rem 0 4rem;
        }
        .cinematic-copy h1 {
          font-size: clamp(3.15rem, 15vw, 4.85rem) !important;
          line-height: 0.88 !important;
        }
        .cinematic-copy p {
          font-size: 1.03rem !important;
        }
        .hero-actions {
          display: grid !important;
          grid-template-columns: 1fr;
        }
        .cinematic-proof {
          grid-template-columns: 1fr;
        }
        .cinematic-proof span {
          min-height: 0;
          padding: 0.9rem 1rem;
        }
        .cinematic-showcase {
          min-height: 440px;
        }
        .main-window {
          height: 275px;
          top: 1rem;
          width: 100%;
          border-radius: 28px;
        }
        .small-window {
          width: 46%;
          height: 126px;
          border-radius: 22px;
        }
        .small-window-one {
          left: 0;
          bottom: 1rem;
        }
        .small-window-two {
          right: 0;
          bottom: 0.2rem;
        }
        .floating-spec {
          top: auto;
          left: 50%;
          bottom: 9.7rem;
          transform: translateX(-50%);
          width: min(92%, 280px);
        }
        .scroll-cue {
          display: none;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .cinematic-copy > *,
        .cinematic-showcase,
        .main-window,
        .small-window,
        .floating-spec,
        .lux-orb,
        .paint-ribbon,
        .cinematic-window img,
        .scroll-cue span:after,
        .cinematic-cta:after {
          animation: none !important;
          opacity: 1 !important;
          transform: none !important;
        }
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: 125px;
      }
      .flow-rail {
        position: fixed;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 80;
        display: grid;
        gap: 0.44rem;
        padding: 0.48rem;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 999px;
        background: rgba(6, 19, 38, 0.52);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 22px 65px rgba(0, 0, 0, 0.24);
      }
      .flow-rail a {
        position: relative;
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.78);
        font-size: 0;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.08);
        transition:
          transform 0.28s ease,
          background 0.28s ease,
          color 0.28s ease,
          border-color 0.28s ease;
      }
      .flow-rail a:before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: currentColor;
      }
      .flow-rail a:after {
        content: attr(data-flow);
        position: absolute;
        right: calc(100% + 0.7rem);
        top: 50%;
        transform: translateY(-50%) translateX(8px);
        opacity: 0;
        pointer-events: none;
        padding: 0.45rem 0.62rem;
        border-radius: 999px;
        background: rgba(6, 19, 38, 0.92);
        color: #fff;
        font-size: 0.72rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        white-space: nowrap;
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.24);
        transition: 0.24s ease;
      }
      .flow-rail a:hover,
      .flow-rail a.is-active {
        transform: scale(1.08);
        background: linear-gradient(135deg, var(--blue), #2ab0ff);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.34);
      }
      .flow-rail a:hover:after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
      }

      .guided-route {
        position: relative;
        padding: clamp(4rem, 7vw, 7rem) 0;
        background:
          radial-gradient(
            circle at 10% 20%,
            rgba(24, 138, 213, 0.16),
            transparent 32%
          ),
          radial-gradient(
            circle at 88% 0%,
            rgba(216, 182, 107, 0.18),
            transparent 35%
          ),
          linear-gradient(180deg, #f8fcff, #eef8ff);
        overflow: hidden;
      }
      .guided-route:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          110deg,
          transparent 0 22%,
          rgba(255, 255, 255, 0.58) 22% 23%,
          transparent 23% 100%
        );
        opacity: 0.72;
        pointer-events: none;
      }
      .guided-route .container {
        position: relative;
        z-index: 2;
      }
      .route-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1rem;
      }
      .route-card {
        position: relative;
        min-height: 230px;
        padding: 1.2rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        border-radius: 30px;
        overflow: hidden;
        background: linear-gradient(
          160deg,
          rgba(255, 255, 255, 0.94),
          rgba(255, 255, 255, 0.64)
        );
        border: 1px solid rgba(255, 255, 255, 0.78);
        box-shadow: 0 22px 65px rgba(7, 21, 43, 0.1);
        transform: translateY(0);
        transition:
          transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1),
          box-shadow 0.38s ease,
          border-color 0.38s ease;
      }
      .route-card:before {
        content: "";
        position: absolute;
        inset: -30% -35% auto auto;
        width: 180px;
        height: 180px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          rgba(24, 138, 213, 0.18),
          transparent 66%
        );
        transition: 0.4s ease;
      }
      .route-card:after {
        content: "";
        position: absolute;
        inset: auto 1rem 1rem 1rem;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(216, 182, 107, 0.7),
          transparent
        );
        opacity: 0.55;
      }
      .route-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 34px 90px rgba(7, 21, 43, 0.16);
        border-color: rgba(216, 182, 107, 0.55);
      }
      .route-card:hover:before {
        transform: scale(1.35);
        opacity: 0.9;
      }
      .route-card span {
        position: absolute;
        left: 1.1rem;
        top: 1rem;
        color: #0b77c6;
        font-weight: 950;
        letter-spacing: 0.14em;
        font-size: 0.82rem;
      }
      .route-card strong {
        display: block;
        margin-bottom: 0.42rem;
        font-size: 1.25rem;
        line-height: 1.08;
        color: #07152b;
      }
      .route-card em {
        display: block;
        color: #5b6b7c;
        font-style: normal;
        line-height: 1.45;
        font-weight: 800;
      }
      .route-card-primary {
        background: linear-gradient(145deg, #07152b, #0b77c6);
        color: #fff;
        box-shadow: 0 30px 90px rgba(24, 138, 213, 0.24);
      }
      .route-card-primary span,
      .route-card-primary strong,
      .route-card-primary em {
        color: #fff;
      }
      .route-card-primary em {
        color: rgba(255, 255, 255, 0.82);
      }

      .designer-flow {
        position: relative;
        background: linear-gradient(180deg, #061326, #0a1e3d);
        color: #fff;
        overflow: hidden;
      }
      .designer-flow:before {
        content: "";
        position: absolute;
        inset: -20% -10%;
        background:
          radial-gradient(
            circle at 20% 35%,
            rgba(24, 138, 213, 0.28),
            transparent 30%
          ),
          radial-gradient(
            circle at 76% 62%,
            rgba(216, 182, 107, 0.18),
            transparent 26%
          ),
          linear-gradient(
            110deg,
            transparent 0 38%,
            rgba(255, 255, 255, 0.08) 38% 39%,
            transparent 39%
          );
        animation: flowGlow 11s ease-in-out infinite alternate;
      }
      .designer-flow-grid {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 2rem;
        align-items: center;
      }
      .designer-copy h2 {
        font-size: clamp(2.3rem, 4.8vw, 4.8rem);
        line-height: 0.94;
        letter-spacing: -0.06em;
        margin: 0.4rem 0 0.9rem;
      }
      .designer-copy p {
        color: rgba(255, 255, 255, 0.78);
        font-size: 1.08rem;
        line-height: 1.65;
      }
      .flow-steps {
        display: grid;
        gap: 1rem;
      }
      .flow-steps article {
        position: relative;
        padding: 1.25rem 1.3rem 1.25rem 1.55rem;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.14);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 24px 65px rgba(0, 0, 0, 0.2);
        overflow: hidden;
      }
      .flow-steps article:before {
        content: "";
        position: absolute;
        left: 0;
        top: 1rem;
        bottom: 1rem;
        width: 4px;
        border-radius: 999px;
        background: linear-gradient(180deg, #2ab0ff, var(--gold));
      }
      .flow-steps article span {
        display: block;
        color: #f6d88d;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        font-size: 0.72rem;
        font-weight: 950;
      }
      .flow-steps article strong {
        display: block;
        font-size: 1.24rem;
        margin: 0.22rem 0 0.35rem;
      }
      .flow-steps article p {
        margin: 0;
        color: rgba(255, 255, 255, 0.76);
        line-height: 1.55;
      }
      @keyframes flowGlow {
        from {
          transform: translateX(-2%);
        }
        to {
          transform: translateX(2%);
        }
      }
      @media (max-width: 1120px) {
        .route-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .route-card-primary {
          grid-column: span 2;
        }
        .designer-flow-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 760px) {
        html {
          scroll-padding-top: 92px;
        }
        .flow-rail {
          left: 50%;
          right: auto;
          top: auto;
          bottom: 12px;
          transform: translateX(-50%);
          grid-template-columns: repeat(6, 1fr);
          width: min(94vw, 410px);
          border-radius: 999px;
          background: rgba(6, 19, 38, 0.74);
        }
        .flow-rail a {
          width: auto;
          height: 40px;
        }
        .flow-rail a:after {
          display: none;
        }
        .route-grid {
          grid-template-columns: 1fr;
        }
        .route-card,
        .route-card-primary {
          grid-column: auto;
          min-height: 150px;
        }
        .guided-route {
          padding: 3.5rem 0;
        }
        .designer-flow {
          padding-bottom: 5.5rem;
        }
      }

      :root {
        --premium-gold: #d8b66b;
        --premium-ink: #020816;
        --premium-blue: #1498ee;
        --premium-glass: rgba(255, 255, 255, 0.1);
      }
      body {
        background:
          radial-gradient(
            circle at 8% 6%,
            rgba(24, 138, 213, 0.1),
            transparent 24%
          ),
          radial-gradient(
            circle at 94% 10%,
            rgba(216, 182, 107, 0.1),
            transparent 28%
          ),
          linear-gradient(180deg, #f8fcff 0%, #eef8ff 52%, #f8fcff 100%) !important;
      }
      body:before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: -1;
        background-image: radial-gradient(
          rgba(7, 21, 43, 0.1) 1px,
          transparent 1px
        );
        background-size: 26px 26px;
        opacity: 0.12;
      }
      .site-header {
        background: rgba(255, 255, 255, 0.82) !important;
        border-bottom: 1px solid rgba(210, 227, 240, 0.78) !important;
        box-shadow: 0 18px 55px rgba(7, 21, 43, 0.08);
      }
      .site-header.is-scrolled {
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow: 0 22px 60px rgba(7, 21, 43, 0.12);
      }
      .nav a {
        transition:
          background 0.22s ease,
          color 0.22s ease,
          transform 0.22s ease;
      }
      .nav a:hover {
        transform: translateY(-1px);
      }
      main
        > section:not(.cinematic-hero):not(.luxury-marquee):not(
          .trust-strip
        ):not(.page-route) {
        position: relative;
      }
      main
        > section:not(.cinematic-hero):not(.luxury-marquee):not(
          .trust-strip
        ):not(.page-route):nth-of-type(even) {
        background:
          radial-gradient(
            circle at 88% 10%,
            rgba(24, 138, 213, 0.08),
            transparent 30%
          ),
          linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.5),
            rgba(238, 248, 255, 0.42)
          );
      }

      .page-hero {
        position: relative;
        min-height: clamp(520px, 70vh, 760px);
        display: flex;
        align-items: center;
        overflow: hidden;
        isolation: isolate;
        color: #fff !important;
        background:
          radial-gradient(
            circle at 74% 32%,
            rgba(42, 176, 255, 0.34),
            transparent 26%
          ),
          radial-gradient(
            circle at 17% 16%,
            rgba(216, 182, 107, 0.22),
            transparent 28%
          ),
          linear-gradient(
            135deg,
            #020816 0%,
            #07152b 39%,
            #0a2a50 68%,
            #020816 100%
          ) !important;
      }
      .page-hero:before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(
            116deg,
            rgba(255, 255, 255, 0.08) 0 1px,
            transparent 1px 22px
          ),
          radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, 0.12),
            transparent 46%
          );
        opacity: 0.42;
        pointer-events: none;
      }
      .page-hero:after {
        content: "";
        position: absolute;
        right: -14%;
        bottom: -28%;
        width: 70%;
        height: 55%;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.18),
          rgba(24, 138, 213, 0.14),
          transparent 66%
        );
        filter: blur(24px);
        pointer-events: none;
      }
      .page-hero .container {
        position: relative;
        z-index: 2;
      }
      .page-hero-grid {
        grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.78fr) !important;
        gap: clamp(2rem, 5vw, 5rem) !important;
      }
      .page-hero .breadcrumb,
      .page-hero .breadcrumb a {
        color: rgba(255, 255, 255, 0.75) !important;
      }
      .page-hero .kicker {
        color: #f6d88d !important;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.54rem 0.78rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
      }
      .page-hero h1 {
        max-width: 920px;
        color: #fff !important;
        font-size: clamp(3.2rem, 7vw, 7.4rem) !important;
        line-height: 0.86 !important;
        letter-spacing: -0.075em !important;
        margin: 0.9rem 0 1rem !important;
        text-shadow: 0 28px 70px rgba(0, 0, 0, 0.42);
        text-wrap: balance;
      }
      .page-hero p:not(.breadcrumb) {
        color: rgba(255, 255, 255, 0.86) !important;
        font-size: clamp(1.05rem, 1.35vw, 1.25rem) !important;
        line-height: 1.58;
        max-width: 760px;
      }
      .page-hero .btn-outline {
        background: rgba(255, 255, 255, 0.92) !important;
        color: #07152b !important;
        border-color: rgba(255, 255, 255, 0.44) !important;
      }
      .page-hero-image {
        position: relative;
        min-height: 390px !important;
        border-radius: 38px !important;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        box-shadow:
          0 36px 100px rgba(0, 0, 0, 0.36),
          inset 0 1px rgba(255, 255, 255, 0.22) !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      .page-hero-image:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.2),
          transparent 38%,
          rgba(20, 152, 238, 0.18)
        );
        z-index: 1;
        pointer-events: none;
      }
      .page-hero-image:after {
        content: "";
        position: absolute;
        inset: 1rem;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        z-index: 2;
        pointer-events: none;
      }
      .page-hero-image img {
        width: 100% !important;
        height: 440px !important;
        max-height: none !important;
        object-fit: cover !important;
        background: transparent !important;
        transform: scale(1.02);
        filter: saturate(1.07) contrast(1.04);
      }
      .page-hero-image img[src*="logo"],
      .page-hero-image img[src*="jp-whyte"] {
        object-fit: contain !important;
        padding: 1.35rem !important;
        background: rgba(255, 255, 255, 0.78) !important;
        filter: drop-shadow(0 26px 36px rgba(4, 16, 35, 0.12));
      }

      .page-route {
        position: relative;
        padding: 0 !important;
        margin-top: -42px;
        z-index: 5;
      }
      .page-route-inner {
        position: relative;
        padding: 1rem;
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: 1rem;
        align-items: center;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.72);
        background: rgba(255, 255, 255, 0.78);
        box-shadow: 0 28px 80px rgba(7, 21, 43, 0.14);
        backdrop-filter: blur(20px) saturate(145%);
        -webkit-backdrop-filter: blur(20px) saturate(145%);
      }
      .page-route-copy {
        padding: 0.65rem 0.85rem;
      }
      .page-route-copy .kicker {
        color: #0b77c6 !important;
      }
      .page-route-copy strong {
        display: block;
        margin-top: 0.28rem;
        line-height: 1.1;
        font-size: 1.25rem;
      }
      .page-route-links {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.75rem;
      }
      .page-route-links a {
        position: relative;
        min-height: 96px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        overflow: hidden;
        padding: 0.9rem;
        border-radius: 22px;
        color: #07152b;
        background: linear-gradient(
          145deg,
          rgba(255, 255, 255, 0.94),
          rgba(238, 248, 255, 0.72)
        );
        border: 1px solid rgba(255, 255, 255, 0.88);
        box-shadow: 0 14px 40px rgba(7, 21, 43, 0.08);
        transition:
          transform 0.28s ease,
          box-shadow 0.28s ease,
          border-color 0.28s ease;
      }
      .page-route-links a:before {
        content: "";
        position: absolute;
        right: -38px;
        top: -38px;
        width: 108px;
        height: 108px;
        border-radius: 999px;
        background: radial-gradient(
          circle,
          rgba(24, 138, 213, 0.18),
          transparent 66%
        );
      }
      .page-route-links a:hover {
        transform: translateY(-5px);
        border-color: rgba(216, 182, 107, 0.48);
        box-shadow: 0 22px 55px rgba(7, 21, 43, 0.14);
      }
      .page-route-links a span {
        position: relative;
        z-index: 2;
        color: #0b77c6;
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 950;
      }
      .page-route-links a strong {
        position: relative;
        z-index: 2;
        display: block;
        margin-top: 0.25rem;
        font-size: 1rem;
        line-height: 1.12;
      }

      .card, .work-card, .project-card, .panel, .question-panel, .article-body, .post-card, .ba-card, .dark-panel, .trust-item {
        border-radius: 30px !important;
        box-shadow: 0 24px 70px rgba(7, 21, 43, 0.11) !important;
      }
      .card, .work-card, .project-card, .panel, .question-panel, .article-body, .post-card, .ba-card {
        background: rgba(255, 255, 255, 0.82) !important;
        border: 1px solid rgba(255, 255, 255, 0.82) !important;
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
      }
      .section-head h2 {
        text-wrap: balance;
      }
      .section-head.center {
        max-width: 980px;
      }
      .showcase {
        align-items: stretch !important;
      }
      .video-card,
      .project-card {
        min-height: 100%;
      }
      .video-card {
        border-radius: 38px !important;
      }
      .project-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .before-after-grid .work-card,
      .gallery .work-card {
        cursor: zoom-in;
      }
      .work-card img, .card img, .signature-card img {
        transition:
          transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
          filter 0.7s ease;
      }
      .work-card:hover img, .card:hover img, .signature-card:hover img {
        transform: scale(1.055);
      }
      .ba-slider-ready .ba-images {
        border-radius: 26px;
      }

      .jp-lightbox {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: grid;
        place-items: center;
        padding: clamp(1rem, 4vw, 3rem);
        background: rgba(2, 8, 22, 0.86);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
      }
      .jp-lightbox.is-open {
        opacity: 1;
        pointer-events: auto;
      }
      .jp-lightbox figure {
        margin: 0;
        width: min(1120px, 94vw);
        max-height: 90vh;
        display: grid;
        gap: 0.9rem;
      }
      .jp-lightbox img {
        width: 100%;
        max-height: 82vh;
        object-fit: contain;
        border-radius: 28px;
        box-shadow: 0 40px 110px rgba(0, 0, 0, 0.48);
        background: #fff;
      }
      .jp-lightbox figcaption {
        color: #fff;
        text-align: center;
        font-weight: 900;
      }
      .jp-lightbox button {
        position: absolute;
        right: clamp(1rem, 3vw, 2rem);
        top: clamp(1rem, 3vw, 2rem);
        width: 48px;
        height: 48px;
        border: 0;
        border-radius: 999px;
        color: #07152b;
        background: #fff;
        font-size: 1.5rem;
        font-weight: 900;
        cursor: pointer;
      }

      .blog-layout {
        align-items: start;
      }
      .post-card {
        position: relative;
        overflow: hidden;
      }
      .post-card:before, .question-panel:before, .panel:before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.24),
          transparent 38%,
          rgba(24, 138, 213, 0.08)
        );
        opacity: 0.72;
        pointer-events: none;
      }
      .post-card > *, .question-panel > *, .panel > * {
        position: relative;
        z-index: 2;
      }
      input,
      textarea,
      select {
        border: 1px solid rgba(198, 218, 232, 0.9) !important;
        background: rgba(255, 255, 255, 0.88) !important;
        box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
      }
      input:focus,
      textarea:focus,
      select:focus {
        outline: 3px solid rgba(24, 138, 213, 0.2);
        border-color: rgba(24, 138, 213, 0.62) !important;
      }
      footer {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(
            circle at 18% 24%,
            rgba(24, 138, 213, 0.22),
            transparent 28%
          ),
          linear-gradient(135deg, #020816, #061326 55%, #0a2a50) !important;
      }
      footer:before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          rgba(255, 255, 255, 0.22) 1px,
          transparent 1px
        );
        background-size: 28px 28px;
        opacity: 0.08;
      }
      footer .container {
        position: relative;
        z-index: 2;
      }

      .luxury-js body,
      body.is-wow-ready {
        cursor: auto;
      }
      @media (max-width: 1120px) {
        .page-hero {
          min-height: auto;
          padding: 4.7rem 0 5rem !important;
        }
        .page-hero-grid {
          grid-template-columns: 1fr !important;
        }
        .page-hero-image {
          min-height: 320px !important;
        }
        .page-hero-image img {
          height: 360px !important;
        }
        .page-route-inner {
          grid-template-columns: 1fr;
        }
        .page-route-links {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }
      @media (max-width: 760px) {
        .page-hero {
          padding: 3.2rem 0 4rem !important;
        }
        .page-hero h1 {
          font-size: clamp(3rem, 13vw, 4.6rem) !important;
        }
        .page-hero-image {
          min-height: 250px !important;
          border-radius: 28px !important;
        }
        .page-hero-image img {
          height: 285px !important;
        }
        .page-route {
          margin-top: -26px;
        }
        .page-route-inner {
          padding: 0.75rem;
          border-radius: 24px;
        }
        .page-route-links {
          grid-template-columns: 1fr;
        }
        .page-route-links a {
          min-height: 76px;
        }
        .page-route-copy {
          text-align: center;
        }
        .jp-lightbox {
          padding: 1rem;
        }
        .jp-lightbox img {
          border-radius: 18px;
        }
      }

      .cookie-consent {
        z-index: 100002 !important;
        left: 1rem !important;
        right: 1rem !important;
        bottom: 1rem !important;
        max-width: 1120px;
        margin: 0 auto;
      }
      .cookie-consent .container {
        width: 100% !important;
      }
      .cookie-consent .actions {
        flex-shrink: 0;
      }
      .cookie-consent button {
        min-height: 48px;
        padding: 0.85rem 1.15rem !important;
      }
      body.cookie-open .mobile-sticky-cta {
        display: none !important;
      }
      @media (max-width: 760px) {
        .cookie-consent {
          left: 0.85rem !important;
          right: 0.85rem !important;
          bottom: 0.85rem !important;
          padding: 1rem !important;
          border-radius: 24px !important;
          box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34) !important;
        }
        .cookie-consent .container {
          display: grid !important;
          gap: 0.85rem !important;
        }
        .cookie-consent p {
          font-size: 0.98rem;
          line-height: 1.38;
        }
        .cookie-consent .actions {
          display: grid !important;
          grid-template-columns: 1fr 1fr;
          gap: 0.65rem !important;
          margin-top: 0 !important;
        }
        .cookie-consent button {
          width: 100%;
          min-height: 52px;
          border-radius: 999px !important;
        }
      }
      @media (max-width: 390px) {
        .cookie-consent .actions {
          grid-template-columns: 1fr;
        }
      }

      main > section.designer-flow,
      .designer-flow {
        background:
          radial-gradient(
            circle at 18% 28%,
            rgba(24, 138, 213, 0.28),
            transparent 30%
          ),
          radial-gradient(
            circle at 78% 66%,
            rgba(216, 182, 107, 0.18),
            transparent 28%
          ),
          linear-gradient(135deg, #020816 0%, #061326 52%, #0a2a50 100%) !important;
        color: #fff !important;
      }
      .designer-flow:before {
        opacity: 0.72 !important;
      }
      .designer-flow .container,
      .designer-flow-grid,
      .designer-copy,
      .flow-steps {
        position: relative;
        z-index: 2;
      }
      .designer-flow .kicker,
      .designer-flow .flow-steps article span {
        color: #f6d88d !important;
      }
      .designer-flow h1,
      .designer-flow h2,
      .designer-flow h3,
      .designer-flow strong {
        color: #fff !important;
        text-shadow: 0 16px 45px rgba(0, 0, 0, 0.34);
      }
      .designer-flow p,
      .designer-flow li,
      .designer-flow .designer-copy p,
      .designer-flow .flow-steps article p {
        color: rgba(255, 255, 255, 0.86) !important;
        text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      }
      .designer-flow .flow-steps article {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28) !important;
      }
      .designer-flow .flow-steps article:before {
        background: linear-gradient(180deg, #2ab0ff, #d8b66b) !important;
      }

      main > section.dark-section,
      main > section.designer-flow,
      main > section.cinematic-hero,
      main > section.luxury-marquee,
      main > section#signature-wow-start {
        color: #fff !important;
      }

      .dark-panel,
      .cta {
        background:
          radial-gradient(
            circle at 78% 22%,
            rgba(24, 138, 213, 0.22),
            transparent 34%
          ),
          linear-gradient(135deg, #020816 0%, #061326 55%, #0a2a50 100%) !important;
        color: #fff !important;
      }
      .dark-panel h1,
      .dark-panel h2,
      .dark-panel h3,
      .dark-panel strong,
      .cta h1,
      .cta h2,
      .cta h3,
      .cta strong {
        color: #fff !important;
      }
      .dark-panel p,
      .dark-panel li,
      .dark-panel a,
      .cta p,
      .cta li,
      .cta a {
        color: rgba(255, 255, 255, 0.88) !important;
      }
      .dark-panel .btn,
      .cta .btn {
        color: #fff !important;
      }

      .cookie-banner,
      .cookie-panel {
        z-index: 100000 !important;
      }
      .cookie-banner .cookie-actions,
      .cookie-panel .cookie-actions {
        display: flex !important;
        gap: 0.75rem !important;
        flex-wrap: wrap !important;
      }
      .cookie-banner button,
      .cookie-panel button,
      .cookie-actions button {
        min-height: 48px !important;
        border-radius: 999px !important;
        font-weight: 950 !important;
        padding: 0.85rem 1.15rem !important;
      }
      body:has(.cookie-banner:not(.hidden)) .mobile-sticky-cta,
      body:has(.cookie-panel:not(.hidden)) .mobile-sticky-cta {
        display: none !important;
      }

      body.cookie-open .mobile-sticky-cta {
        display: none !important;
      }

      .page-hero p,
      .cinematic-hero p {
        color: rgba(255, 255, 255, 0.9) !important;
      }
      .page-hero .breadcrumb,
      .page-hero .breadcrumb a {
        color: rgba(255, 255, 255, 0.82) !important;
      }
      .panel p, .question-panel p, .post-card p, .card p, .work-card span, .ba-card p {
        color: #4d5f72;
      }
      .post-card h3 a {
        color: #07152b !important;
      }

      @media (max-width: 760px) {
        html,
        body {
          overflow-x: hidden !important;
        }

        body {
          min-height: 100%;
        }

        main {
          overflow: hidden;
        }

        section, main > section, .designer-flow, .cinematic-hero, .page-hero, .luxury-marquee, .dark-section, .cta, .gallery-section, .advice-preview, .project-showcase, .quote-section {
          min-height: auto !important;
        }

        main > section, .designer-flow, .dark-section, .cta, .gallery-section, .advice-preview, .project-showcase, .quote-section {
          padding-top: 3rem !important;
          padding-bottom: 3rem !important;
          margin-top: 0 !important;
          margin-bottom: 0 !important;
        }

        .designer-flow {
          padding-top: 3.25rem !important;
          padding-bottom: 3.25rem !important;
        }

        .designer-flow-grid, .cinematic-grid, .project-grid, .feature-grid, .proof-grid, .route-grid, .gallery-grid, .split, .visual-grid, .flow-grid {
          gap: 1rem !important;
        }

        .designer-flow-grid {
          grid-template-columns: 1fr !important;
        }

        .flow-steps {
          gap: 1rem !important;
        }

        .flow-steps article {
          margin: 0 !important;
        }

        main,
        .site-main,
        body {
          padding-bottom: 7.5rem !important;
        }

        footer,
        .site-footer {
          padding-bottom: 8.5rem !important;
        }

        .mobile-sticky-cta,
        .sticky-cta {
          z-index: 9990 !important;
        }

        main > section:empty,
        section:empty {
          display: none !important;
        }

        .designer-copy h2,
        .page-hero h1,
        .cinematic-copy h1,
        .hero-copy h1 {
          word-break: normal;
          overflow-wrap: break-word;
        }

        .container {
          width: min(100% - 1.5rem, 1180px) !important;
        }
      }

      .flow-orb,
      .cinematic-orb,
      .hero-orb,
      .bg-orb,
      .glow-orb {
        pointer-events: none !important;
      }

      .client-reviews {
        background:
          radial-gradient(circle at 8% 5%, rgba(24, 138, 213, 0.12), transparent 30%),
          linear-gradient(180deg, #f8fcff 0%, #edf7fc 100%);
      }

      .review-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.15rem;
      }

      .review-card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        margin: 0;
        padding: clamp(1.35rem, 3vw, 2rem);
        border: 1px solid #dce8f2;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 14px 34px rgba(7, 21, 43, 0.09);
      }

      .review-stars {
        color: #d69f24;
        font-size: 1.2rem;
        font-weight: 950;
        letter-spacing: 0.13em;
        line-height: 1;
      }

      .review-card blockquote {
        flex: 1;
        margin: 1rem 0 1.35rem;
        color: #07152b;
        font-size: clamp(1.02rem, 1.5vw, 1.18rem);
        font-weight: 800;
        line-height: 1.6;
      }

      .review-card figcaption {
        display: grid;
        gap: 0.25rem;
        padding-top: 1rem;
        border-top: 1px solid #dce8f2;
      }

      .review-card figcaption strong {
        color: #07152b;
        font-size: 1.02rem;
      }

      .review-card figcaption span,
      .review-source-note {
        color: #526274;
        font-weight: 800;
      }

      .review-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem;
        margin-top: 1.4rem;
      }

      .review-source-note {
        margin: 0.9rem auto 0;
        max-width: 760px;
        text-align: center;
        font-size: 0.82rem;
        line-height: 1.5;
      }

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

        .review-card {
          border-radius: 24px;
        }

        .review-actions .btn {
          width: 100%;
        }
      }