/* ── reset & base ── */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --color-background: #f5f5f3;
      --color-foreground: #0f1115;
      --color-border: #e0ded8;
      --color-primary: #e31e25;
      --color-primary-foreground: #ffffff;
      --color-muted-foreground: #6b6b6b;
      --color-surface: #ffffff;

      --font-body: 'hermetic', sans-serif;
      --font-headings: 'hermetic', sans-serif;

      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 16px;
      --radius-xl: 24px;
      --radius-2xl: 32px;
    }

    html {
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      background: var(--color-background);
      color: var(--color-foreground);
      line-height: 1.6;
    }

    /* a {
      color: inherit;
      text-decoration: none;
    } */

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    /* ── utilities ── */
    .container {
      max-width: 1280px;
      margin-left: auto;
      margin-right: auto;
      padding-left: 2rem;
      padding-right: 2rem;
    }

    .flex {
      display: flex;
    }
    .flex-col {
      flex-direction: column;
    }
    .items-center {
      align-items: center;
    }
    .justify-between {
      justify-content: space-between;
    }
    .gap-1 {
      gap: 0.25rem;
    }
    .gap-2 {
      gap: 0.5rem;
    }
    .gap-3 {
      gap: 0.75rem;
    }
    .gap-4 {
      gap: 1rem;
    }
    .gap-5 {
      gap: 1.25rem;
    }
    .gap-6 {
      gap: 1.5rem;
    }
    .gap-8 {
      gap: 2rem;
    }
    .gap-10 {
      gap: 2.5rem;
    }
    .gap-20 {
      gap: 5rem;
    }

    .grid {
      display: grid;
    }
    .grid-cols-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .grid-cols-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .grid-cols-12 {
      grid-template-columns: repeat(12, 1fr);
    }
    .col-span-3 {
      grid-column: span 3;
    }

    .relative {
      position: relative;
    }
    .absolute {
      position: absolute;
    }

    .w-full {
      width: 100%;
    }
    .w-auto {
      width: auto;
    }
    .w-px {
      width: 1px;
    }
    .h-3 {
      height: 0.75rem;
    }
    .h-8 {
      height: 2rem;
    }
    .h-9 {
      height: 2.25rem;
    }
    .h-12 {
      height: 3rem;
    }
    .form.rounded-2xl.p-10 {
        padding: 20px;
    }
    .rounded-full {
      border-radius: 9999px;
    }
    .rounded-lg {
      border-radius: var(--radius-lg);
    }
    .rounded-xl {
      border-radius: var(--radius-xl);
    }
    .rounded-2xl {
      border-radius: var(--radius-2xl);
    }

    .border {
      border: 1px solid var(--color-border);
    }
    .border-b {
      border-bottom: 1px solid var(--color-border);
    }
    .border-none {
      border: none;
    }

    .bg-white {
      background: #fff;
    }
    .bg-surface {
      background: var(--color-surface);
    }
    .bg-primary {
      background: var(--color-primary);
    }
    .bg-\[\#111\] {
      background: #111;
    }
    .bg-\[\#f8f8f8\] {
      background: #f8f8f8;
    }
    .bg-\[\#24243b\] {
      background: #24243b;
    }
    .bg-\[\#1c1c2e\] {
      background: #1c1c2e;
    }
    .bg-\[\#fff0f0\] {
      background: #fff0f0;
    }
    .bg-\[\#22c55e\]\/10 {
      background: rgba(34, 197, 94, 0.07);
    }

    .text-white {
      color: #fff;
    }
    .text-primary {
      color: var(--color-primary);
    }
    .text-\[\#111\] {
      color: #111;
    }
    .text-\[\#555\] {
      color: #555;
    }
    .text-\[\#666\] {
      color: #666;
    }
    .text-\[\#888\] {
      color: #888;
    }
    .text-\[\#999\] {
      color: #999;
    }
    .text-\[\#22c55e\] {
      color: #22c55e;
    }
    .text-\[\#aaa\] {
      color: #aaa;
    }
    .text-muted {
      color: var(--color-muted-foreground);
    }
    .text-white\/50 {
      color: rgba(255, 255, 255, 0.5);
    }
    .text-white\/60 {
      color: rgba(255, 255, 255, 0.6);
    }
    .text-white\/35 {
      color: rgba(255, 255, 255, 0.35);
    }
    .text-white\/20 {
      color: rgba(255, 255, 255, 0.2);
    }

    .font-body {
      font-family: var(--font-body);
    }
    .font-headings {
      font-family: var(--font-headings);
    }

    .text-xs {
      font-size: 0.75rem;
      line-height: 1.5;
    }
    .text-sm {
      font-size: 0.875rem;
      line-height: 1.5;
    }
    .text-base {
      font-size: 1rem;
      line-height: 1.6;
    }
    .text-lg {
      font-size: 1.125rem;
      line-height: 1.6;
    }
    .text-xl {
      font-size: 1.25rem;
      line-height: 1.6;
    }
    .text-2xl {
      font-size: 1.5rem;
      line-height: 1.4;
    }
    .text-3xl {
      font-size: 2rem;
      line-height: 1.3;
    }
    .text-4xl {
      font-size: 2.5rem;
      line-height: 1.2;
    }
    .text-5xl {
      font-size: 3.25rem;
      line-height: 1.1;
    }

    .font-medium {
      font-weight: 500;
    }
    .font-semibold {
      font-weight: 600;
    }
    .font-bold {
      font-weight: 700;
    }

    .tracking-wider {
      letter-spacing: 0.05em;
    }
    .tracking-widest {
      letter-spacing: 0.1em;
    }
    .uppercase {
      text-transform: uppercase;
    }

    .leading-relaxed {
      line-height: 1.7;
    }

    .py-1 {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }
    .py-2 {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }
    .py-3 {
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
    }
    .py-4 {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
    .py-5 {
      padding-top: 1.25rem;
      padding-bottom: 1.25rem;
    }
    .py-8 {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
    .py-10 {
      padding-top: 2.5rem;
      padding-bottom: 2.5rem;
    }
    .py-12 {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
    .py-16 {
      padding-top: 4rem;
      padding-bottom: 4rem;
    }
    .py-20 {
      padding-top: 5rem;
      padding-bottom: 5rem;
    }
    .py-24 {
      padding-top: 6rem;
      padding-bottom: 6rem;
    }

    .px-3 {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }
    .px-4 {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .px-5 {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
    }
    .px-6 {
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }
    .px-8 {
      padding-left: 2rem;
      padding-right: 2rem;
    }
    .px-10 {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
    .px-12 {
      padding-left: 3rem;
      padding-right: 3rem;
    }
    .px-20 {
      padding-left: 5rem;
      padding-right: 5rem;
    }

    .py-1\.5 {
      padding-top: 0.375rem;
      padding-bottom: 0.375rem;
    }
    .py-2\.5 {
      padding-top: 0.625rem;
      padding-bottom: 0.625rem;
    }
    .py-3\.5 {
      padding-top: 0.875rem;
      padding-bottom: 0.875rem;
    }

    .pt-4 {
      padding-top: 1rem;
    }
    .pt-16 {
      padding-top: 4rem;
    }

    .pb-0 {
      padding-bottom: 0;
    }
    .pb-8 {
      padding-bottom: 2rem;
    }

    .mb-0\.5 {
      margin-bottom: 0.125rem;
    }
    .mb-1 {
      margin-bottom: 0.25rem;
    }
    .mb-2 {
      margin-bottom: 0.5rem;
    }
    .mb-3 {
      margin-bottom: 0.75rem;
    }
    .mb-4 {
      margin-bottom: 1rem;
    }
    .mb-5 {
      margin-bottom: 1.25rem;
    }
    .mb-6 {
      margin-bottom: 1.5rem;
    }
    .mb-8 {
      margin-bottom: 2rem;
    }
    .mb-10 {
      margin-bottom: 2.5rem;
    }
    .mb-16 {
      margin-bottom: 4rem;
    }

    .mt-0\.5 {
      margin-top: 0.125rem;
    }
    .mt-1 {
      margin-top: 0.25rem;
    }
    .mt-2 {
      margin-top: 0.5rem;
    }
    .mt-2\.5 {
      margin-top: 0.625rem;
    }
    .mt-6 {
      margin-top: 1.5rem;
    }

    .ml-3 {
      margin-left: 0.75rem;
    }
    .ml-auto {
      margin-left: auto;
    }

    .mx-auto {
      margin-left: auto;
      margin-right: auto;
    }

    .max-w-7xl {
      max-width: 80rem;
    }
    .max-w-\[560px\] {
      max-width: 560px;
    }

    .flex-shrink-0 {
      flex-shrink: 0;
    }
    .flex-1 {
      flex: 1;
    }

    .space-y-4>:not(:last-child) {
      margin-bottom: 1rem;
    }
    .space-y-5>:not(:last-child) {
      margin-bottom: 1.25rem;
    }
    .space-y-6>:not(:last-child) {
      margin-bottom: 1.5rem;
    }

    .shadow-sm {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .transition {
      transition: all 0.2s ease;
    }

    .hover\:opacity-80:hover {
      opacity: 0.8;
    }

    /* ── custom ── */
    .top-bar {
      background: #e31e25;
      height: 38px;
    }

    .navbar {
      height: 72px;
      border-bottom: 1px solid #ececec;
    }

    .hero {
      background: #111;
      color: #fff;
	  background-image: url('../../assets/image/msafe/contact-banner1.jpg');
    }

    .location-tabs .tab-active {
      color: #e31e25;
    }
    /* .location-tabs button.tab-active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 2px;
      background: #e31e25;
    } */

    .filter-pill {
      background: #fff;
      color: #555;
      border: 1px solid #dcdcdc;
      padding: 0.5rem 1.25rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .filter-pill:hover {
      border-color: #e31e25;
      color: #e31e25;
    }
    .filter-pill.active {
      background: #e31e25;
      color: #fff;
      border-color: #e31e25;
    }

    .office-card {
      background: #fff;
      border: 1px solid #ececec;
      border-radius: var(--radius-xl);
      padding: 2rem;
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .office-card.hidden {
      display: none;
    }

    .footer-gradient-bar {
      height: 3px;
      background: linear-gradient(90deg, #e31e25 0%, #e31e25 35%, rgba(227, 30, 37, 0.1) 75%, transparent 100%);
    }

    .status-badge {
      background: rgba(34, 197, 94, 0.07);
      border: 1px solid rgba(34, 197, 94, 0.15);
      padding: 0.375rem 0.75rem;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #22c55e;
    }

    .social-icon {
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
      color: rgba(255, 255, 255, 0.38);
      transition: all 0.2s ease;
    }
    .social-icon:hover {
      background: rgba(227, 30, 37, 0.15);
      border-color: rgba(227, 30, 37, 0.3);
      color: #fff;
    }

    /* .footer-link {
      color: rgba(255, 255, 255, 0.4);
      font-size: 0.875rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: color 0.2s ease;
    }
    .footer-link:hover {
      color: rgba(255, 255, 255, 0.75);
    }
    .footer-link .chevron {
      color: #e31e25;
      font-size: 10px;
    } */

    .newsletter-input {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.09);
      border-radius: var(--radius-md);
      padding: 0.625rem 0.75rem;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.22);
      flex: 1;
      outline: none;
      transition: border-color 0.2s ease;
    }
    .newsletter-input:focus {
      border-color: rgba(227, 30, 37, 0.5);
      color: rgba(255, 255, 255, 0.7);
    }

    .btn-primary {
      background: #e31e25;
      color: #fff;
      font-weight: 700;
      font-size: 0.75rem;
      padding: 0.625rem 1.25rem;
      border-radius: var(--radius-md);
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: opacity 0.2s ease;
      justify-content: center;
    }
    .btn-primary:hover {
      opacity: 0.85;
    }
    .btn-primary:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .btn-outline {
      border: 1.5px solid #e31e25;
      color: #e31e25;
      background: transparent;
      padding: 0.625rem 1.25rem;
      border-radius: var(--radius-md);
      font-weight: 500;
      font-size: 0.875rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-outline:hover {
      background: #e31e25;
      color: #fff;
    }

    .form-input {
      width: 100%;
      padding: 0.75rem 1rem;
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      background: #fff;
      font-size: 0.875rem;
      color: #111;
      outline: none;
      transition: border-color 0.2s ease;
    }
    .form-input:focus {
      border-color: #e31e25;
    }
    .form-input::placeholder {
      color: #999;
    }
    .form-input.textarea {
      min-height: 90px;
      resize: vertical;
      font-family: var(--font-body);
    }
    .form-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e31e25' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 1rem center;
      background-size: 16px;
      padding-right: 2.5rem;
      cursor: pointer;
    }

    .form-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: #555;
      display: block;
      margin-bottom: 0.5rem;
    }
    .form-label .required {
      color: #e31e25;
    }

    .icon-box {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-xl);
      background: #fff0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: #e31e25;
    }

    .icon-sm {
      width: 16px;
      height: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .icon-xs {
      width: 12px;
      height: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* ── Form Status ── */
    #formStatus {
      display: none;
      padding: 0.9rem 1.2rem;
      border-radius: var(--radius-md);
      font-size: 0.95rem;
      font-weight: 500;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
      border-left: 4px solid transparent;
      align-items: center;
      gap: 0.75rem;
    }
    #formStatus.error {
      display: flex;
      background: #fee2e2;
      color: #991b1b;
      border-left-color: #dc2626;
    }
    #formStatus.success {
      display: flex;
      background: #dcfce7;
      color: #166534;
      border-left-color: #22c55e;
    }
    #formStatus .status-icon {
      font-size: 1.4rem;
      flex-shrink: 0;
    }

    /* ── responsive ── */
    @media (max-width: 1024px) {
      .px-20 {
        padding-left: 2rem;
        padding-right: 2rem;
      }
      .grid-cols-2 {
        grid-template-columns: 1fr;
      }
      .grid-cols-3 {
        grid-template-columns: 1fr 1fr;
      }
      .grid-cols-12 {
        grid-template-columns: repeat(6, 1fr);
      }
      .col-span-3 {
        grid-column: span 3;
      }
      .gap-20 {
        gap: 2.5rem;
      }
      .text-5xl {
        font-size: 2.5rem;
      }
      .text-4xl {
        font-size: 2rem;
      }
      .top-bar .flex {
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      .top-bar {
        height: auto;
        padding: 0.5rem 1rem;
      }
      .navbar {
        height: auto;
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      .navbar .flex.items-center.gap-8 {
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
      }
      .newsletter-wrapper {
        flex-direction: column;
        min-width: unset;
        width: 100%;
      }
      .newsletter-wrapper .flex-1 {
        width: 100%;
      }
    }

    @media (max-width: 640px) {
      .px-20 {
        padding-left: 1rem;
        padding-right: 1rem;
      }
      .grid-cols-3 {
        grid-template-columns: 1fr;
      }
      .grid-cols-12 {
        grid-template-columns: 1fr;
      }
      .col-span-3 {
        grid-column: span 1;
      }
      .text-5xl {
        font-size: 2rem;
      }
      .text-4xl {
        font-size: 1.75rem;
      }
      .text-3xl {
        font-size: 1.5rem;
      }
      .top-bar .flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
      }
      .top-bar .flex.items-center.gap-6 {
        flex-wrap: wrap;
      }
      .navbar .flex.items-center.gap-8 {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
      }
      .navbar .flex.items-center.gap-3 {
        flex-wrap: wrap;
        width: 100%;
      }
      .hero .flex {
        flex-direction: column;
      }
      .location-tabs .flex {
        flex-wrap: wrap;
      }
      .office-card {
        padding: 1.5rem;
      }
      .newsletter-wrapper {
        flex-direction: column;
        gap: 0.5rem;
      }
      .newsletter-wrapper .flex-1 {
        width: 100%;
      }
      .py-20 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
      }
      .py-16 {
        padding-top: 2rem;
        padding-bottom: 2rem;
      }
      .py-12 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }
      .py-8 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }
      .gap-20 {
        gap: 2rem;
      }
      .filter-pills {
        flex-wrap: wrap;
      }
    }

	.catalogue-hero {
            

            /* background: #111; */
            color: #fff;
            padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 48px);
            background-image: linear-gradient(135deg, rgba(17, 17, 17, 0.65) 0%, rgba(26, 26, 26, 0.45) 100%), url(../../assets/image/msafe/contact-banner1.jpg);
            
            /* background: linear-gradient(135deg, rgba(10, 10, 10, 0.65) 0%, rgba(10, 10, 10, 0.55) 40%, rgba(10, 10, 10, 0.72) 100%); */
            position: relative;
            min-height: 480px;
            padding: clamp(100px, 12vw, 180px) clamp(20px, 5vw, 48px);
        
            background-color: #111;
        
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        
            color: #fff;
            overflow: hidden;
            isolation: isolate;
        }
        .catalogue-hero__inner { max-width: 1200px; margin: 0 auto; }
        .catalogue-hero__breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: #999; }
        .catalogue-hero__breadcrumb a { transition: color var(--dur) var(--ease); }
        .catalogue-hero__breadcrumb a:hover { color: var(--color-primary); }
        .catalogue-hero__breadcrumb .current { color: #fff; font-weight: 600; }
        .catalogue-hero__title {
            font-family: var(--font-headings);
            font-weight: 700;
            /* font-size: clamp(32px, 4vw, 40px); */
            letter-spacing: -0.02em;
            color: #fff;
            /* line-height: 1.1; */
            margin-bottom: 8px;
         }
        .catalogue-hero__desc { font-size: 18px; color: #fff; max-width: 600px; line-height: 1.6; }