:root {
      --grad-start: #0C1937;
      --grad-mid: #4B1B38;
      --grad-end: #9d1237;
      --text: #f8fafc;
      --muted: #b7c2d1;
      --brand: #ff4d5a;
      --maxw: 1180px;
      --body-text: #0f172a;
      --body-muted: #475569;
      --border: rgba(15, 23, 42, .12);
      --card-border: rgba(2, 6, 23, .12);
      --card-bg: #fff;
      --shadow: 0 10px 24px rgba(2, 6, 23, .06);
    }

    * {
      box-sizing: border-box
    }

    html,
    body {
      height: 100%
    }

    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", "Arial", "Noto Sans";
      color: var(--body-text);
      background: #fff;
      overflow-x: hidden
    }

    .container {
      max-width: var(--maxw);
      margin: 0 auto;
      padding-block: 6px;
      padding-inline: clamp(12px, 4vw, 50px)
    }


    /* ===== Page hero ===== */
    .cmp-hero {
      padding: clamp(48px, 8vw, 92px) 0 14px;
      border-bottom: 1px solid var(--border);
      text-align: center;
      position: relative;
      background: #fff;
      overflow: clip;
    }

    .cmp-hero::before {
      content: "";
      position: absolute;
      inset: -12% -8%;
      background:
        radial-gradient(600px 360px at 14% 12%, rgba(255, 77, 90, .10), transparent 60%),
        radial-gradient(520px 320px at 86% 85%, rgba(72, 133, 237, .10), transparent 62%);
      pointer-events: none;
      z-index: 0
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid #e5e7eb;
      background: #fff;
      font-weight: 700;
      color: var(--body-text);
    }

    .cmp-title {
      margin: 14px 0 10px;
      font-weight: 800;
      letter-spacing: -.5px;
      font-size: clamp(36px, 3vw, 72px);
      line-height: 1.06;
      background: linear-gradient(120deg, var(--grad-start) 8%, var(--grad-mid) 50%, var(--grad-end) 92%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent
    }

    .cmp-sub {
      color: var(--body-muted);
      font-size: clamp(16px, 1.8vw, 20px);
      max-width: 900px;
      margin: 0 auto
    }

    /* ===== Contact section ===== */
    .contact {
      padding: clamp(26px, 7vw, 60px) 0
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: clamp(16px, 3.5vw, 28px);
      align-items: start
    }

    @media (max-width:960px) {
      .contact-grid {
        grid-template-columns: 1fr
      }
    }

    .card {
      background: #fff;
      border: 1px solid var(--card-border);
      border-radius: 18px;
      padding: clamp(14px, 2vw, 18px);
      box-shadow: var(--shadow);
      color: var(--body-text);
    }

    .card h3 {
      margin: 0 0 8px;
      font-weight: 800
    }

    .muted {
      color: var(--body-muted)
    }

    /* form controls */
    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .form-grid .full {
      grid-column: 1 / -1
    }

    .flc-input {
      background: #fff;
      color: #0f172a;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: .9rem 1rem;
      width: 100%;
      min-width: 0
    }

    .flc-input:focus {
      outline: none;
      border-color: #60a5fa;
      box-shadow: 0 0 0 2px rgba(96, 165, 250, .25)
    }

    .flc-textarea {
      min-height: 150px;
      resize: vertical
    }

    .flc-btn {
      background: var(--brand);
      color: #fff;
      border: 0;
      border-radius: 12px;
      padding: .9rem 1.1rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 6px 16px rgba(255, 77, 90, .35)
    }

    .form-foot {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap
    }

    .form-hint {
      font-size: .9rem;
      color: #64748b;
      margin-top: 6px
    }

    .form-status {
      font-weight: 700
    }

    .field-error {
      color: #b91c1c;
      font-size: 12px;
      margin-top: 4px
    }

    /* quick contacts list */
    .qgrid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .qitem {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      padding: 12px;
      background: #f9fafb;
    }

    .qitem strong {
      display: block;
    }

    .qitem a.muted {
      display: block;
      margin-top: 4px;
      text-decoration: none;
      color: inherit;
    }

    /* map / illustration box */
    .mapbox {
      aspect-ratio: 16/9;
      border-radius: 14px;
      border: 1px solid #e5e7eb;
      overflow: hidden;
      background: #f8fafc;
      display: grid;
      place-items: center
    }

    .mapbox iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block
    }

    .flag {
      display: inline-block;
      width: 18px;
      height: 12px;
      margin-right: 6px;
      border-radius: 2px;
      background-size: cover;
      background-position: center;
      vertical-align: -1px;
    }

    /* INDIA (accurate tricolor + chakra) */
    .flag.in {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Crect width='900' height='200' y='0' fill='%23FF9933'/%3E%3Crect width='900' height='200' y='200' fill='%23FFFFFF'/%3E%3Crect width='900' height='200' y='400' fill='%23138808'/%3E%3Ccircle cx='450' cy='300' r='60' fill='none' stroke='%23000080' stroke-width='12'/%3E%3Cg stroke='%23000080' stroke-width='4'%3E%3Cline x1='450' y1='240' x2='450' y2='360'/%3E%3Cline x1='390' y1='300' x2='510' y2='300'/%3E%3Cline x1='410' y1='260' x2='490' y2='340'/%3E%3Cline x1='410' y1='340' x2='490' y2='260'/%3E%3C/g%3E%3C/svg%3E");
    }

    /* USA (accurate stripes + canton) */
    .flag.us {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7410 3900'%3E%3Crect width='7410' height='3900' fill='%23B22234'/%3E%3Cg fill='%23FFFFFF'%3E%3Crect y='300' width='7410' height='300'/%3E%3Crect y='900' width='7410' height='300'/%3E%3Crect y='1500' width='7410' height='300'/%3E%3Crect y='2100' width='7410' height='300'/%3E%3Crect y='2700' width='7410' height='300'/%3E%3Crect y='3300' width='7410' height='300'/%3E%3C/g%3E%3Crect width='2964' height='2100' fill='%233C3B6E'/%3E%3C/svg%3E");
    }

    .whatsapp-line {
      display: flex;
      align-items: center;
      gap: 6px;
    }