:root {
      --blackberry: #260F25;
      --charcoal: #404040;
      --gypsum: #FAFAFA;
      --snowball: #FEFEFE;
      --dusty: #F4F4F0;
      --neon-pink: #FF4ECD;
      --rad-blue: #85D3F2;
      --aqua: #8FD9D1;
      --lime: #A4F22E;
      --banana: #FFD84E;
      --largo-teal: #007A78;
      --grape: #4E2973;
      --navy: #2C2E59;
      --eggplant: #66457A;
      --whoops: #B31111;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--snowball);
      color: var(--blackberry);
      -webkit-font-smoothing: antialiased;
    }

    .page-wrap {
      max-width: 1440px;
      margin: 0 auto;
      background: var(--dusty);
      position: relative;
      overflow-x: hidden;
    }

    :focus-visible {
      outline: 2px solid var(--navy);
      outline-offset: 2px;
    }

    /* ── NAV ─────────────────────────────────────── */
    .nav-wrap {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 40px);
      max-width: 1000px;
      z-index: 100;
    }

    .nav-pill {
      height: 52px;
      border-radius: 26px;
      background: linear-gradient(rgba(250, 250, 250, 0.4) 10%, rgba(250, 250, 250, 0.82));
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 0.5px solid rgba(38, 15, 37, 0.09);
      box-shadow: 0 12px 12px 2px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 4px 4px 8px;
    }

    .nav-logo {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: var(--blackberry);
      text-decoration: none;
      padding: 8px 16px;
      border-radius: 21px;
      transition: background 150ms ease;
      white-space: nowrap;
    }

    .nav-logo span {
      color: var(--neon-pink);
    }

    .nav-logo:hover {
      background: var(--aqua);
    }

    .nav-logo:active {
      background: var(--banana);
    }

    .nav-buttons {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .nav-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .nav-btn {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--blackberry);
      background: transparent;
      border: none;
      border-radius: 21px;
      padding: 9px 12px;
      cursor: pointer;
      height: 42px;
      display: flex;
      align-items: center;
      transition: background 150ms ease;
      white-space: nowrap;
      text-decoration: none;
    }

    .nav-btn:hover {
      background: var(--aqua);
    }

    .nav-btn:active {
      background: var(--banana);
    }

    .nav-btn-cta {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--blackberry);
      background: transparent;
      border: none;
      border-radius: 21px;
      padding: 9px 12px;
      height: 42px;
      display: flex;
      align-items: center;
      cursor: pointer;
      transition: background 150ms ease;
      white-space: nowrap;
      text-decoration: none;
    }

    .nav-btn-cta:hover {
      background: var(--aqua);
    }

    .nav-btn-cta:active {
      background: var(--banana);
    }

    /* ── MOBILE NAV ───────────────────────────────── */
    .nav-mobile {
      display: none;
    }

    .nav-mobile-container {
      border-radius: 24px;
      background: linear-gradient(rgba(250, 250, 250, 0.4) 10%, rgba(250, 250, 250, 0.82));
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 0.5px solid rgba(38, 15, 37, 0.09);
      box-shadow: 0 20px 39px 0 rgba(79, 78, 78, 0.14);
      overflow: hidden;
    }

    .nav-mobile-bar {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 4px 4px 8px;
    }

    .nav-mobile-drawer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .nav-mobile.open .nav-mobile-drawer {
      max-height: 320px;
    }

    .nav-mobile-drawer-inner {
      border-top: 1px solid var(--largo-teal);
      padding: 6px 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }

    .nav-mobile-drawer-inner .nav-btn {
      justify-content: flex-end;
      min-width: 120px;
    }

    .nav-btn-mobile-cta {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--blackberry);
      background: transparent;
      border: none;
      border-radius: 21px;
      padding: 9px 12px;
      cursor: pointer;
      height: 42px;
      min-width: 120px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      transition: background 150ms ease;
      white-space: nowrap;
    }

    .nav-btn-mobile-cta:hover {
      background: var(--aqua);
    }

    .nav-btn-mobile-cta:active {
      background: var(--banana);
    }

    .nav-hamburger {
      width: 42px;
      height: 42px;
      border: none;
      background: transparent;
      border-radius: 21px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 150ms ease;
      position: relative;
    }

    .nav-hamburger:hover {
      background: var(--aqua);
    }

    .nav-hamburger:active {
      background: var(--banana);
    }

    .icon-hamburger,
    .icon-close {
      position: absolute;
      transition: opacity 200ms ease, transform 200ms ease;
    }

    .icon-hamburger {
      opacity: 1;
      transform: rotate(0deg);
    }

    .icon-close {
      opacity: 0;
      transform: rotate(-90deg);
    }

    .nav-mobile.open .icon-hamburger {
      opacity: 0;
      transform: rotate(90deg);
    }

    .nav-mobile.open .icon-close {
      opacity: 1;
      transform: rotate(0deg);
    }

    /* ── GREETING ─────────────────────────────────── */
    .greeting-section {
      background: var(--dusty);
      padding: 148px 120px 80px;
    }

    .greeting-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: flex-start;
      gap: 48px;
    }

    .greeting-text {
      flex: 1 1 0;
      min-width: 0;
    }

    .greeting-oh-hi {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 88px;
      line-height: 1;
      color: var(--blackberry);
      margin-bottom: 12px;
    }

    .greeting-oh-hi .pink {
      color: var(--neon-pink);
    }

    .greeting-name {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 48px;
      line-height: 1.1;
      color: var(--blackberry);
      letter-spacing: -0.5px;
      margin-bottom: 12px;
    }

    .greeting-body {
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      line-height: 24px;
      color: var(--charcoal);
      letter-spacing: -0.5px;
    }

    .greeting-portrait {
      flex: 0 0 380px;
      width: 380px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .portrait-img-wrap {
      position: relative;
      width: 380px;
      height: 371px;
      border-radius: 24px;
      overflow: hidden;
      cursor: pointer;
      background: var(--aqua);
    }

    .portrait-img-wrap img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 24px;
      transition: opacity 250ms ease;
    }

    .portrait-default {
      opacity: 1;
    }

    .portrait-hover {
      opacity: 0;
    }

    .portrait-surprise {
      opacity: 0;
    }

    .portrait-img-wrap:hover .portrait-default {
      opacity: 0;
    }

    .portrait-img-wrap:hover .portrait-hover {
      opacity: 1;
    }

    .portrait-img-wrap:active .portrait-hover {
      opacity: 0;
    }

    .portrait-img-wrap:active .portrait-surprise {
      opacity: 1;
    }

    .portrait-caption {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--blackberry);
      letter-spacing: -0.5px;
      text-align: right;
      padding: 0 8px;
    }

    /* ── CASE STUDIES ─────────────────────────────── */
    .case-studies-section {
      background: var(--aqua);
      padding: 0 120px 80px;
      position: relative;
      overflow: hidden;
    }

    .case-studies-squiggle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 110%;
      pointer-events: none;
      z-index: 1;
    }

    .case-studies-section::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0.45;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.303' numOctaves='3' seed='5993' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      background-size: 100px 100px;
      background-repeat: repeat;
      mix-blend-mode: multiply;
    }

    .case-studies-inner {
      max-width: 1200px;
      margin: 0 auto;
      position: relative;
      z-index: 3;
    }

    .case-studies-header {
      padding: 24px 0 0;
    }

    .case-studies-title {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 48px;
      color: var(--blackberry);
      letter-spacing: -0.5px;
      margin-bottom: 8px;
    }

    .case-studies-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      color: var(--blackberry);
      letter-spacing: -0.5px;
      opacity: 0.7;
      margin-bottom: 32px;
    }

    .project-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      padding-bottom: 48px;
    }

    .project-row.single {
      grid-template-columns: 1fr;
      max-width: calc(50% - 24px);
    }

    .project-card {
      background: var(--dusty);
      border-radius: 24px;
      padding: 16px 24px;
      box-shadow: 0 24px 27px 2px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-decoration: none;
      color: inherit;
      transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
      border: 2px solid transparent;
    }

    .project-card:hover {
      box-shadow: 0 37px 56px 16px rgba(0, 0, 0, 0.18);
      border-color: var(--neon-pink);
      transform: translateY(-8px);
    }

    .card-title {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 24px;
      color: var(--blackberry);
      letter-spacing: -0.5px;
      margin-bottom: 4px;
    }

    .card-company {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--blackberry);
      letter-spacing: -0.5px;
    }

    .card-company .bullet {
      color: var(--neon-pink);
    }

    /* Media — Blackberry border */
    .card-media {
      width: 100%;
      aspect-ratio: 16 / 9;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid var(--blackberry);
    }

    .card-media-fill {
      width: 100%;
      height: 100%;
      border-radius: 22px;
    }

    .card-lower {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-end;
      padding: 0 8px;
    }

    .card-tags {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: flex-end;
      width: 100%;
      padding: 4px 0;
    }

    .tag-row {
      display: flex;
      gap: 4px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    /* Base tag */
    .tag {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: 12px;
      color: var(--navy);
      letter-spacing: -0.5px;
      padding: 4px 8px;
      border-radius: 24px;
      white-space: nowrap;
    }

    /* Dark bg tags — Gypsum text */
    .tag-dark {
      color: var(--gypsum);
    }

    /* ── Link Button — View full case study ─────────── */
    .card-link {
      font-family: 'Outfit', sans-serif;
      font-size: 14px;
      font-weight: 400;
      color: var(--blackberry);
      letter-spacing: -0.5px;
      text-decoration: none;
      padding: 8px;
      border-radius: 31px;
      display: inline-flex;
      align-items: center;
      gap: 0;
      transition: background 150ms ease;
      cursor: pointer;
      border: none;
      background: transparent;
    }

    .card-link .link-text {
      text-decoration: underline;
    }

    .card-link .link-arrow {
      text-decoration: none;
      margin-left: 2px;
    }

    .card-link:hover {
      background: var(--aqua);
    }

    .card-link:active {
      background: var(--banana);
    }

    /* ── KICKER ───────────────────────────────────── */
    .kicker-section {
      position: relative;
      overflow: hidden;
      line-height: 0;
    }

    .kicker-bg-img {
      width: 100%;
      height: auto;
      display: block;
    }

    .kicker-card-wrap {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .kicker-card {
      width: min(1196px, calc(100% - 240px));
      background: rgba(239, 233, 230, 0.61);
      backdrop-filter: blur(5.4px);
      -webkit-backdrop-filter: blur(5.4px);
      border-radius: 24px;
      padding: 32px;
      box-shadow: 0 40px 82px 0 rgba(79, 78, 78, 0.47);
    }

    .kicker-quote {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 64px;
      line-height: 1.1;
      color: var(--navy);
      text-align: center;
      letter-spacing: -0.5px;
    }

    /* ── CONTACT ──────────────────────────────────── */
    .contact-section {
      background-color: var(--snowball);
      padding: 80px 120px;
      position: relative;
    }

    /* Noise overlay — pointer-events:none is critical */
    .contact-section::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 0.35;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.303' numOctaves='3' seed='5993' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      background-size: 100px 100px;
      background-repeat: repeat;
      mix-blend-mode: multiply;
    }

    /* contact-inner at 800px — aligns header + form */
    .contact-inner {
      max-width: 800px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 48px;
      position: relative;
      z-index: 1;
      /* sits above ::before noise layer */
    }

    .contact-header-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 48px;
    }

    .contact-header-left {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .contact-title {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 48px;
      line-height: 1.05;
      color: var(--blackberry);
      white-space: nowrap;
    }

    .contact-title .pink {
      color: var(--neon-pink);
    }

    .contact-subhead {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: var(--charcoal);
    }

    .email-btn {
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 16px;
      color: var(--gypsum);
      background: var(--largo-teal);
      border: none;
      border-radius: 24px;
      padding: 0 24px;
      height: 48px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      transition: background 150ms ease, color 150ms ease;
      flex-shrink: 0;
      align-self: flex-start;
      margin-top: 8px;
      position: relative;
      z-index: 2;
    }

    .email-btn .email-icon-gypsum {
      display: flex;
    }

    .email-btn .email-icon-charcoal {
      display: none;
    }

    .email-btn:hover {
      background: var(--aqua);
      color: var(--charcoal);
    }

    .email-btn:hover .email-icon-gypsum {
      display: none;
    }

    .email-btn:hover .email-icon-charcoal {
      display: flex;
    }

    .email-btn:active {
      background: var(--banana);
      color: var(--charcoal);
    }

    .email-btn:active .email-icon-gypsum {
      display: none;
    }

    .email-btn:active .email-icon-charcoal {
      display: flex;
    }

    .form-section-label {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 24px;
      color: var(--blackberry);
      letter-spacing: -0.5px;
    }

    .contact-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .form-group.full-width {
      grid-column: 1 / -1;
    }

    .form-label {
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: -0.5px;
      color: var(--blackberry);
      margin-bottom: 4px;
    }

    /* Form fields — available: Dusty bg + Charcoal border */
    .form-input,
    .form-textarea {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--blackberry);
      background: var(--dusty);
      border: 1px solid var(--charcoal);
      border-radius: 12px;
      padding: 10px 12px;
      transition: border-color 200ms, background 200ms;
      outline: none;
      width: 100%;
      resize: none;
      -webkit-appearance: none;
      position: relative;
      z-index: 2;
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
      color: var(--charcoal);
      opacity: 0.4;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
    }

    /* Inline contact focus: Gypsum bg + Eggplant border */
    .contact-form .form-input:focus,
    .contact-form .form-textarea:focus {
      background: var(--gypsum);
      border-color: var(--eggplant);
    }

    .contact-form .form-input:focus::placeholder,
    .contact-form .form-textarea:focus::placeholder {
      opacity: 0.2;
    }

    /* Modal focus: same styling */
    .modal-form .form-input:focus,
    .modal-form .form-textarea:focus {
      background: var(--gypsum);
      border-color: var(--eggplant);
    }

    .modal-form .form-input:focus::placeholder,
    .modal-form .form-textarea:focus::placeholder {
      opacity: 0.2;
    }

    .form-input.error,
    .form-textarea.error {
      border-color: var(--whoops) !important;
      box-shadow: 0 0 0 3px rgba(179, 17, 17, 0.12) !important;
    }

    .form-textarea {
      height: 111px;
      line-height: 1.6;
    }

    .char-counter {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: var(--charcoal);
      opacity: 0.5;
      text-align: right;
      margin-top: 4px;
      transition: color 150ms ease, opacity 150ms ease;
    }

    .char-counter.near-limit {
      color: var(--whoops);
      opacity: 1;
    }

    .form-footer {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 8px;
    }

    /* Submit button — all four Figma states */
    .submit-btn {
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 16px;
      color: var(--gypsum);
      background: var(--eggplant);
      border: 1px solid transparent;
      border-radius: 24px;
      padding: 0 32px;
      height: 48px;
      cursor: pointer;
      transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 100ms ease;
      display: flex;
      align-items: center;
      gap: 4px;
      position: relative;
      z-index: 2;
    }

    /* Hover — Aqua bg, Navy text + arrow */
    .submit-btn:hover:not(.sent) {
      background: var(--aqua);
      color: var(--navy);
      transform: translateY(-1px);
    }

    .submit-btn:hover:not(.sent) .btn-arrow {
      color: var(--navy);
    }

    /* Down — Banana bg, Navy text + arrow */
    .submit-btn:active:not(.sent) {
      background: var(--banana);
      color: var(--navy);
      transform: translateY(0);
    }

    .submit-btn:active:not(.sent) .btn-arrow {
      color: var(--navy);
    }

    /* Available arrow */
    .submit-btn .btn-arrow {
      color: var(--neon-pink);
      transition: color 150ms ease;
    }

    /* Sent/Disabled state */
    .submit-btn.sent {
      background: transparent;
      color: rgba(38, 15, 37, 0.4);
      border-color: rgba(38, 15, 37, 0.4);
      cursor: default;
      transform: none;
    }

    .submit-btn.sent .btn-arrow {
      display: none;
    }

    .form-success {
      display: none;
      text-align: center;
      padding: 48px 0 32px;
    }

    .form-success.visible {
      display: block;
    }

    .contact-header-row.hidden,
    .contact-form-area.hidden {
      display: none;
    }

    .success-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--lime);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
    }

    .success-title {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 32px;
      color: var(--blackberry);
      margin-bottom: 12px;
    }

    .success-body {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      color: var(--charcoal);
      line-height: 1.6;
      max-width: 380px;
      margin: 0 auto;
    }

    /* ── MODAL ────────────────────────────────────── */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(38, 15, 37, 0.35);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 250ms ease;
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .modal-glass {
      background: linear-gradient(160deg, rgba(250, 250, 250, 0.82) 0%, rgba(250, 250, 250, 0.96) 100%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 0.5px solid rgba(38, 15, 37, 0.09);
      box-shadow: 0 32px 64px rgba(38, 15, 37, 0.18), 0 8px 24px rgba(38, 15, 37, 0.08);
      border-radius: 24px;
      padding: 36px 36px 32px;
      width: 100%;
      max-width: 480px;
      transform: translateY(16px) scale(0.98);
      transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1), opacity 250ms ease;
      opacity: 0;
      position: relative;
    }

    .modal-overlay.open .modal-glass {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    .modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 150ms;
      color: var(--blackberry);
      opacity: 0.4;
    }

    .modal-close:hover {
      background: var(--aqua);
      opacity: 1;
    }

    .modal-title {
      font-family: 'Outfit', sans-serif;
      font-weight: 700;
      font-size: 28px;
      color: var(--blackberry);
      margin-bottom: 4px;
    }

    .modal-title .pink {
      color: var(--neon-pink);
    }

    .modal-intro {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      line-height: 1.6;
      color: var(--charcoal);
      opacity: 0.75;
      margin-bottom: 24px;
    }

    .modal-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .modal-form .form-group {
      gap: 4px;
    }

    .modal-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .modal-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 8px;
    }

    .modal-cancel-btn {
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      color: var(--charcoal);
      background: transparent;
      border: none;
      border-radius: 20px;
      padding: 12px 20px;
      cursor: pointer;
      opacity: 0.55;
      transition: opacity 150ms, background 150ms;
    }

    .modal-cancel-btn:hover {
      opacity: 1;
      background: rgba(38, 15, 37, 0.05);
    }

    .modal-submit-btn {
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: var(--gypsum);
      background: var(--eggplant);
      border: none;
      border-radius: 24px;
      padding: 12px 28px;
      cursor: pointer;
      transition: filter 150ms ease, transform 100ms ease;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .modal-submit-btn:hover {
      filter: brightness(1.12);
      transform: translateY(-1px);
    }

    .modal-submit-btn:active {
      filter: brightness(0.95);
    }

    .modal-submit-btn .btn-arrow {
      color: var(--neon-pink);
    }

    .modal-char-counter {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      color: var(--charcoal);
      opacity: 0.5;
      text-align: right;
      margin-top: 3px;
      transition: color 150ms ease, opacity 150ms ease;
    }

    .modal-char-counter.near-limit {
      color: var(--whoops);
      opacity: 1;
    }

    .modal-success {
      display: none;
      text-align: center;
      padding: 24px 0 8px;
    }

    .modal-success.visible {
      display: block;
    }

    .modal-form.hidden,
    .modal-title.hidden,
    .modal-intro.hidden {
      display: none;
    }

    .modal-done-btn {
      font-family: 'Outfit', sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: var(--gypsum);
      background: var(--eggplant);
      border: 1px solid transparent;
      border-radius: 24px;
      padding: 12px 36px;
      cursor: pointer;
      transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 100ms ease;
      display: inline-flex;
      align-items: center;
    }

    .modal-done-btn:hover {
      background: var(--aqua);
      color: var(--navy);
      transform: translateY(-1px);
    }

    .modal-done-btn:active {
      background: var(--banana);
      color: var(--blackberry);
      transform: translateY(0);
    }


    /* ── FOOTER ───────────────────────────────────── */
    .site-footer {
      background: var(--grape);
      padding: 24px 16px;
      text-align: center;
      width: 100%;
    }

    .site-footer p {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 12px;
      line-height: 15px;
      color: var(--dusty);
    }

    .site-footer span {
      color: var(--neon-pink);
    }

    /* ══════════════════════════════════════════════════
       TABLET  ≤1100px
    ══════════════════════════════════════════════════ */
    @media (max-width: 1100px) {
      .greeting-section {
        padding: 120px 48px 64px;
      }

      .greeting-oh-hi {
        font-size: 64px;
      }

      .greeting-name {
        font-size: 32px;
      }

      .greeting-body {
        font-size: 18px;
        line-height: 22px;
      }

      .greeting-portrait {
        flex: 0 0 260px;
        width: 260px;
      }

      .portrait-img-wrap {
        width: 260px;
        height: 254px;
      }

      .case-studies-section {
        padding: 0 48px 64px;
      }

      .project-row {
        gap: 24px;
      }

      .project-row.single {
        max-width: calc(50% - 12px);
      }

      .kicker-quote {
        font-size: 48px;
      }

      .kicker-card {
        width: calc(100% - 96px);
      }

      .contact-section {
        padding: 64px 48px;
      }

      .contact-title {
        font-size: 40px;
      }
    }

    /* ══════════════════════════════════════════════════
       MOBILE  ≤699px
    ══════════════════════════════════════════════════ */
    @media (max-width: 699px) {
      .nav-pill {
        display: none;
      }

      .nav-mobile {
        display: block;
      }

      .greeting-section {
        padding: 88px 24px 48px;
      }

      .greeting-inner {
        flex-direction: column;
        gap: 32px;
      }

      .greeting-oh-hi {
        font-size: 48px;
      }

      .greeting-name {
        font-size: 24px;
      }

      .greeting-body {
        font-size: 16px;
        line-height: 19px;
      }

      .greeting-portrait {
        flex: none;
        width: 100%;
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .portrait-img-wrap {
        width: 100%;
        max-width: 400px;
        min-width: 300px;
        height: auto;
        aspect-ratio: 1 / 1;
      }

      .portrait-caption {
        text-align: left;
      }

      .case-studies-section {
        padding: 0 24px 48px;
      }

      .case-studies-title {
        font-size: 32px;
      }

      .case-studies-subtitle {
        font-size: 16px;
      }

      .project-row {
        grid-template-columns: 1fr;
        gap: 24px;
      }

      .project-row.single {
        max-width: 100%;
      }

      .card-lower {
        align-items: flex-start;
      }

      .card-tags {
        align-items: flex-start;
      }

      .tag-row {
        justify-content: flex-start;
      }

      .kicker-card {
        width: calc(100% - 48px);
        padding: 24px;
      }

      .kicker-quote {
        font-size: 28px;
      }

      .contact-section {
        padding: 48px 24px;
      }

      .contact-header-row {
        flex-direction: column;
        gap: 16px;
      }

      .contact-title {
        font-size: 36px;
        white-space: normal;
      }

      .contact-form {
        grid-template-columns: 1fr;
      }

      .form-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
      }

      .modal-form-row {
        grid-template-columns: 1fr;
      }
    }