/* ─── HERO ─── */
        .cp-hero {
          min-height: 100vh;
          min-height: 100svh;
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
          padding-top: var(--nav-height);
        }
        .cp-hero .container-wide {
          width: 100%;
          padding: clamp(3rem, 6vh, 5rem) clamp(1.2rem, 3.2vw, 2.4rem) clamp(4rem, 8vh, 7rem);
        }
        .cp-watermark {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-family: var(--font-display);
          font-size: clamp(7rem, 26vw, 22rem);
          font-weight: 300;
          letter-spacing: -0.06em;
          color: transparent;
          -webkit-text-stroke: 1px rgba(0,0,0,0.05);
          text-transform: uppercase;
          pointer-events: none;
          white-space: nowrap;
          opacity: 0;
          transition: opacity 1.4s ease;
        }
        .cp-watermark.is-in { opacity: 1; }
        .cp-orb {
          position: absolute;
          border-radius: 50%;
          pointer-events: none;
          filter: blur(60px);
          opacity: 0;
          transition: opacity 1.4s ease;
        }
        .cp-orb.is-in { opacity: 1; }
        .cp-orb-a {
          width: min(45vw, 520px); height: min(45vw, 520px);
          top: -5%; left: -8%;
          background: radial-gradient(circle, rgba(0,0,0,0.05), transparent 70%);
        }
        .cp-orb-b {
          width: min(38vw, 440px); height: min(38vw, 440px);
          right: -6%; bottom: 5%;
          background: radial-gradient(circle, rgba(0,0,0,0.04), transparent 70%);
          transition-delay: 0.4s;
        }
        .cp-eyebrow {
          display: flex;
          align-items: center;
          gap: 1rem;
          font-family: var(--font-body);
          font-size: 0.72rem;
          font-weight: 600;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: #999;
          margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
          opacity: 0;
          transform: translateY(14px);
          transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
        }
        .cp-eyebrow.is-in { opacity: 1; transform: none; }
        .cp-eyebrow i { display: block; width: 32px; height: 1px; background: currentColor; opacity: 0.5; }

        .cp-h1 {
          margin: 0 0 clamp(2rem, 4vh, 3.5rem);
          display: flex;
          flex-direction: column;
          align-items: flex-start;
        }
        .cp-line { display: block; overflow: hidden; }
        .cp-word {
          display: inline-block;
          font-family: var(--font-display);
          font-size: clamp(4rem, 12vw, 11rem);
          font-weight: 300;
          line-height: 0.88;
          text-transform: uppercase;
          letter-spacing: -0.04em;
          color: #000;
          opacity: 0;
          transform: translateY(110%);
          transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
        }
        .cp-h1.is-in .cp-word { opacity: 1; transform: none; }
        .cp-word-ghost {
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(0,0,0,0.3);
        }
        .cp-hero-body {
          transition: transform 0.35s ease-out;
          max-width: 760px;
        }
        .cp-subhead {
          font-family: var(--font-body);
          font-size: clamp(1rem, 1.8vw, 1.3rem);
          font-weight: 500;
          color: #555;
          letter-spacing: 0.01em;
          margin: 0;
          opacity: 0;
          transform: translateY(18px);
          transition: opacity 0.9s var(--ease-out-expo) 0.55s, transform 0.9s var(--ease-out-expo) 0.55s;
        }
        .cp-subhead.is-in { opacity: 1; transform: none; }
        .cp-rule {
          width: 0; height: 1px;
          background: #000;
          margin: clamp(1.5rem, 3vh, 2.2rem) 0;
          transition: width 1s var(--ease-out-expo) 0.72s;
        }
        .cp-rule.is-in { width: min(100px, 25vw); }
        .cp-intro {
          opacity: 0;
          transform: translateY(22px);
          transition: opacity 0.95s var(--ease-out-expo) 0.88s, transform 0.95s var(--ease-out-expo) 0.88s;
        }
        .cp-intro.is-in { opacity: 1; transform: none; }
        .cp-intro p {
          font-family: var(--font-body);
          font-size: clamp(0.95rem, 1.2vw, 1.1rem);
          line-height: 1.8;
          color: #666;
          margin: 0 0 1.1rem;
        }
        .cp-intro-highlight { color: #111 !important; font-weight: 500; }
        .cp-scroll-cue {
          position: absolute;
          bottom: 2.5rem;
          left: clamp(1.2rem, 3.2vw, 2.4rem);
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 0.7rem;
          opacity: 0;
          transition: opacity 1s ease 1.3s;
        }
        .cp-scroll-cue.is-in { opacity: 1; }
        .cp-scroll-cue span {
          font-family: var(--font-body);
          font-size: 0.62rem;
          font-weight: 600;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: #aaa;
        }
        .cp-scroll-cue i {
          display: block; width: 1px; height: 40px;
          background: linear-gradient(to bottom, #000, transparent);
          animation: cpCuePulse 1.7s ease-in-out infinite;
        }
        @keyframes cpCuePulse {
          0%, 100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
          50% { opacity: 1; transform: scaleY(1); }
        }

        /* ─── SHARED KICKER ─── */
        .cp-kicker {
          display: block;
          font-family: var(--font-body);
          font-size: 0.72rem;
          font-weight: 600;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: rgba(255,255,255,0.4);
          margin-bottom: 1.6rem;
        }
        .cp-kicker-dark { color: #999; }
        .cp-section-h2 {
          font-family: var(--font-display);
          font-size: clamp(2.8rem, 6vw, 6rem);
          font-weight: 300;
          letter-spacing: -0.04em;
          line-height: 0.9;
          text-transform: uppercase;
          margin: 0;
          color: #fff;
        }
        .cp-section-h2-dark { color: #000; }
        .cp-section-desc {
          max-width: 380px;
          font-family: var(--font-body);
          font-size: clamp(0.95rem, 1.2vw, 1.1rem);
          line-height: 1.75;
          color: #666;
          margin: 0;
        }

        /* ─── SERVICES ─── */
        .cp-services {
          padding: clamp(5rem, 10vh, 8rem) 0;
          position: relative;
          overflow: hidden;
        }
        .cp-marquee-bg {
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          transform: translateY(-50%);
          opacity: 0.06;
          white-space: nowrap;
          overflow: hidden;
          pointer-events: none;
          z-index: 0;
        }
        .cp-marquee-bg-bottom {
          top: auto;
          bottom: 0;
          transform: none;
          opacity: 0.04;
        }
        .cp-marquee-track {
          display: inline-flex;
          animation: cpMarquee 30s linear infinite;
          font-family: var(--font-display);
          font-size: clamp(5rem, 14vw, 14rem);
          text-transform: uppercase;
          letter-spacing: -0.03em;
          line-height: 1;
          color: transparent;
          -webkit-text-stroke: 1px #fff;
        }
        .cp-marquee-reverse {
          animation-direction: reverse;
          -webkit-text-stroke: 1px #000;
          color: transparent;
        }
        @keyframes cpMarquee {
          from { transform: translateX(0); }
          to { transform: translateX(-50%); }
        }

        .cp-svc-row {
          display: grid;
          grid-template-columns: 3.5rem 1fr auto;
          gap: clamp(1rem, 3vw, 3rem);
          align-items: center;
          padding: clamp(1.4rem, 3vh, 2.2rem) 0;
          border-bottom: 1px solid rgba(255,255,255,0.1);
          cursor: default;
          position: relative;
          overflow: hidden;
          transition: all 0.4s var(--ease-out-expo);
        }
        .cp-svc-row-bg {
          position: absolute; inset: 0;
          background: rgba(255,255,255,0.04);
          transform: scaleY(0); transform-origin: bottom;
          transition: transform 0.4s var(--ease-out-expo);
          z-index: 0;
        }
        .cp-svc-row:hover .cp-svc-row-bg { transform: scaleY(1); transform-origin: top; }
        .cp-svc-num {
          font-family: var(--font-display);
          font-size: 0.95rem;
          color: #555;
          position: relative; z-index: 2;
          transition: color 0.4s ease;
        }
        .cp-svc-row:hover .cp-svc-num { color: #fff; }
        .cp-svc-name {
          font-family: var(--font-display);
          font-size: clamp(1.3rem, 3vw, 2.6rem);
          font-weight: 300;
          text-transform: uppercase;
          letter-spacing: -0.02em;
          color: #fff;
          position: relative; z-index: 2;
          transition: transform 0.4s var(--ease-out-expo);
        }
        .cp-svc-row:hover .cp-svc-name { transform: translateX(16px); }
        .cp-svc-arrow {
          width: clamp(44px, 5vw, 68px);
          height: clamp(44px, 5vw, 68px);
          border-radius: 50%;
          border: 1px solid rgba(255,255,255,0.2);
          display: flex; align-items: center; justify-content: center;
          position: relative; z-index: 2;
          transition: all 0.4s var(--ease-out-expo);
        }
        .cp-svc-row:hover .cp-svc-arrow {
          background: #fff;
          border-color: #fff;
          transform: scale(1.08);
        }
        .cp-svc-arrow-icon { transition: all 0.4s ease; }
        .cp-svc-row:hover .cp-svc-arrow-icon { stroke: #000; transform: rotate(45deg); }

        /* ─── WHY ─── */
        .cp-why {
          padding: clamp(5rem, 10vh, 8rem) 0;
        }
        .cp-why-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 2px;
          border: 1px solid var(--gray-100);
        }
        .cp-why-card {
          padding: clamp(2rem, 4vh, 3rem);
          border: 1px solid var(--gray-100);
          display: flex;
          flex-direction: column;
          gap: 1.5rem;
          transition: background 0.4s ease;
        }
        .cp-why-card:hover { background: #f7f7f7; }
        .cp-why-num {
          font-family: var(--font-display);
          font-size: clamp(2rem, 4vw, 3.5rem);
          font-weight: 300;
          color: #ddd;
          letter-spacing: -0.03em;
          line-height: 1;
          display: block;
        }
        .cp-why-text {
          font-family: var(--font-body);
          font-size: clamp(1rem, 1.4vw, 1.2rem);
          font-weight: 500;
          line-height: 1.6;
          color: #111;
          margin: 0;
        }

        /* ─── FORM ─── */
        .cp-form-section {
          padding: clamp(5rem, 10vh, 8rem) 0;
          position: relative;
          overflow: hidden;
        }
        .cp-field {
          position: relative;
          display: flex;
          flex-direction: column;
          padding-bottom: 0.8rem;
        }
        .cp-field label {
          font-family: var(--font-body);
          font-size: 0.72rem;
          font-weight: 600;
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: #555;
          margin-bottom: 0.8rem;
        }
        .cp-field.dark label { color: rgba(255,255,255,0.35); }
        .cp-field input, .cp-field select, .cp-field textarea {
          background: transparent;
          border: none; outline: none;
          font-family: var(--font-display);
          font-size: clamp(1.6rem, 3vw, 2.4rem);
          font-weight: 300;
          letter-spacing: -0.02em;
          color: #000;
          width: 100%;
          appearance: none;
        }
        .cp-field.dark input, .cp-field.dark select, .cp-field.dark textarea { color: #fff; }
        .cp-field.dark select option { color: #000; }
        .cp-field input::placeholder, .cp-field textarea::placeholder { color: #ccc; }
        .cp-field.dark input::placeholder, .cp-field.dark textarea::placeholder { color: rgba(255,255,255,0.2); }
        .cp-field-line {
          position: absolute; bottom: 0; left: 0;
          width: 100%; height: 1px;
          background: rgba(0,0,0,0.15);
          transform-origin: left;
          transition: transform 0.5s var(--ease-out-expo), background 0.5s ease;
        }
        .cp-field.dark .cp-field-line { background: rgba(255,255,255,0.15); }
        .cp-field:focus-within .cp-field-line { background: #000; transform: scaleY(2); }
        .cp-field.dark:focus-within .cp-field-line { background: #fff; transform: scaleY(2); }

        .cp-submit {
          display: inline-flex;
          align-items: center;
          gap: 0.8rem;
          background: #fff;
          color: #000;
          border: none;
          border-radius: 50px;
          padding: 1.1rem 2.4rem;
          font-family: var(--font-body);
          font-size: 0.82rem;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.07em;
          cursor: pointer;
          transition: all 0.4s var(--ease-out-expo);
        }
        .cp-submit:hover { background: #eee; }
        .cp-submit-arrow { transition: transform 0.4s var(--ease-out-expo); }
        .cp-submit:hover .cp-submit-arrow { transform: translate(4px, -4px); }
        .cp-submit-ghost {
          display: inline-flex;
          align-items: center;
          gap: 0.7rem;
          background: transparent;
          color: #fff;
          border: 1px solid rgba(255,255,255,0.25);
          border-radius: 50px;
          padding: 1.1rem 2.4rem;
          font-family: var(--font-body);
          font-size: 0.82rem;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.07em;
          cursor: pointer;
          transition: all 0.4s var(--ease-out-expo);
        }
        .cp-submit-ghost:hover { border-color: rgba(255,255,255,0.7); }

        /* ─── STUDIO ─── */
        .cp-studio {
          padding: clamp(5rem, 10vh, 8rem) 0;
        }
        .cp-studio-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
          gap: 4rem;
          border-top: 1px solid var(--gray-100);
          padding-top: clamp(3rem, 5vh, 4rem);
        }
        .cp-studio-label {
          display: block;
          font-family: var(--font-body);
          font-size: 0.72rem;
          font-weight: 600;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: #bbb;
          margin-bottom: 1.5rem;
        }
        .cp-contact-link {
          display: inline-block;
          font-family: var(--font-body);
          font-size: clamp(1rem, 1.5vw, 1.2rem);
          color: #111;
          font-weight: 400;
          transition: color 0.3s ease;
        }
        .cp-contact-link:hover { color: #000; }
        .cp-social-row {
          display: flex;
          align-items: center;
          gap: 1rem;
          cursor: pointer;
          transition: all 0.3s ease;
          text-decoration: none;
          color: #111;
        }
        .cp-social-row:hover { color: #000; }
        .cp-social-icon {
          width: 44px; height: 44px;
          border-radius: 50%;
          border: 1px solid var(--gray-200);
          display: flex; align-items: center; justify-content: center;
          transition: all 0.3s ease;
          flex-shrink: 0;
        }
        .cp-social-row:hover .cp-social-icon {
          background: #000;
          border-color: #000;
          color: #fff;
        }
        .cp-social-row span {
          font-family: var(--font-body);
          font-size: 1rem;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          flex: 1;
        }
        .cp-social-arrow { opacity: 0; transition: all 0.3s ease; }
        .cp-social-row:hover .cp-social-arrow { opacity: 1; transform: translate(4px, -4px); }

        /* ─── RESPONSIVE ─── */
        @media (max-width: 900px) {
          .cp-hero,
          .cp-page,
          .contact-page {
            min-height: 0 !important;
            height: auto !important;
          }
          .cp-form-section .container-wide > div { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 600px) {
          .cp-svc-name { font-size: 1.2rem; }
          .cp-field input, .cp-field select, .cp-field textarea { font-size: 1.5rem; }
        }