/* ===============================
       COLOR PALETTE
       =============================== */
    :root {
      --primary-deep-teal: #0F3D3E;   /* Base color */
      --secondary-teal: #1F6F6B;
      --accent-sage: #8FBFB8;
      --background-light: #F4F9F8;
      --neutral-dark: #1E1E1E;
      --neutral-mid: #6B7280;
      --neutral-light: #E5E7EB;
      --success-soft: #5FA8A3;
                --bg: var(--background-light);
            --card:#ffffff;
            --accent: var(--secondary-teal);
            --accent-2: var(--primary-deep-teal);
            --muted:var(--neutral-mid);
      --maxw:1100px;
            --radius:12px;
            --shadow: 0 6px 20px rgba(16,24,40,0.08);
    }

    /* ===============================
       BASE TYPOGRAPHY
       =============================== */
    body {
      font-family: "Figtree", sans-serif;
      margin: 0;
      padding: 0;
      background-color: var(--background-light);
      color: var(--neutral-dark);
      line-height: 1.65;
    }

    h1, h2, h3 {
      color: var(--primary-deep-teal);
      margin-top: 0;
    }

    h1 {
      font-size: 2.5rem;
      font-weight: 700;
    }

    h2 {
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    h3 {
      font-size: 1.25rem;
      font-weight: 600;
    }

    p {
      /* max-width: 70ch; */
      margin-bottom: 1rem;
    }

    .serif-accent {
      font-family: "Source Serif 4", serif;
    }

    /* ===============================
       LAYOUT
       =============================== */
    .container {
      max-width: 1100px;
      margin: auto;
      padding: 3rem 2rem;
    }

    section {
      margin-bottom: 4rem;
    }

    .card {
      background: white;
      border-radius: 12px;
      padding: 2rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.05);
      margin-bottom: 2rem;
    }

    /* ===============================
       COLOR SWATCHES
       =============================== */
    .swatches {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1rem;
    }

    .swatch {
      border-radius: 10px;
      padding: 1.25rem;
      color: white;
      font-weight: 500;
    }

    /* ===============================
       BUTTONS & UI
       =============================== */
    .btn-primary {
      background-color: var(--primary-deep-teal);
      color: white;
      border: none;
      border-radius: 999px;
      padding: 0.75rem 1.75rem;
      font-size: 1rem;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .btn-primary:hover {
      background-color: var(--secondary-teal);
    }

    .btn-secondary {
      background-color: transparent;
      color: var(--primary-deep-teal);
      border: 2px solid var(--primary-deep-teal);
      border-radius: 999px;
      padding: 0.75rem 1.75rem;
      font-size: 1rem;
      cursor: pointer;
    }

    /* ===============================
       BRAND VOICE
       =============================== */
    .voice-list li {
      margin-bottom: 0.5rem;
    }

    /* ===============================
       FOOTER
       =============================== */
    footer {
      background: var(--primary-deep-teal);
      color: white;
      padding: 2rem;
      text-align: center;
    }
/*     
        :root{
            --bg:#f7fbfb;
            --card:#ffffff;
            --accent:#2b9aa3;
            --accent-2:#0f6b6f;
            --muted:#6b7280;
            
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
            color:#0f1724;
        } */


        *{box-sizing:border-box}
        body{
            margin:0;
            background:linear-gradient(180deg,#f3fbfb 0%,#f7fbfb 60%);
            -webkit-font-smoothing:antialiased;
            -moz-osx-font-smoothing:grayscale;
            line-height:1.45;
            padding:32px 16px;
            display:flex;
            justify-content:center;
        }
        .container{
            width:100%;
            max-width:var(--maxw);
        }
        header{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:24px;
            margin-bottom:28px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            text-decoration:none;
            color:inherit;
        }
        .logo{
            width:52px;height:52px;
            background:linear-gradient(135deg,var(--accent),var(--accent-2));
            border-radius:10px;
            display:flex;
            align-items:center;
            justify-content:center;
            color:white;
            font-weight:700;
            box-shadow: var(--shadow);
        }
        nav a{
            margin-left:16px;
            text-decoration:none;
            color:var(--muted);
            font-weight:600;
            font-size:15px;
        }
        .hero{
            display:grid;
            grid-template-columns: 1fr;
            gap:20px;
            align-items:center;
            margin-bottom:28px;
        }
        .card{
            background:var(--card);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
            padding:24px;
        }
        .hero-left h1{
            margin:0 0 8px 0;
            font-size:28px;
            letter-spacing:-0.4px;
        }
        .hero-left p{
            margin:0 0 18px 0;
            color:var(--muted);
        }
        .actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
        }
        .btn{
            border:0;
            padding:10px 16px;
            border-radius:10px;
            cursor:pointer;
            font-weight:600;
            color:white;
            background:var(--accent-2);
            text-decoration:none;
        }
        .btn.secondary{
            background:transparent;
            color:var(--accent-2);
            border:2px solid rgba(15,107,111,0.12);
        }
        .hero-right{
            display:flex;
            gap:12px;
            align-items:center;
            justify-content:center;
            padding:12px;
        }
        .stats{
            display:flex;
            gap:12px;
            margin-top:12px;
        }
        .stat{
            background:linear-gradient(180deg, rgba(43,154,163,0.06), rgba(43,154,163,0.02));
            padding:10px 12px;
            border-radius:10px;
            text-align:center;
        }
        .grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:16px;
            margin-top:20px;
        }
        .service{
            padding:16px;
            border-radius:10px;
            background:linear-gradient(180deg,#fff,#fbffff);
            border:1px solid rgba(15,107,111,0.04);
        }
        h2{font-size:20px;margin:0 0 10px 0}
        p.small{color:var(--muted);margin:0}
        main{
            margin-bottom:28px;
        }
        footer{
            text-align:center;
            color:var(--muted);
            font-size:14px;
            padding:16px 0;
        }
        .two-col{
            display:grid;
            grid-template-columns:1fr 360px;
            gap:16px;
        }
        .contact-card form{
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        label{font-size:13px;color:var(--muted)}
        input[type="text"], input[type="email"], textarea{
            padding:10px;
            border-radius:8px;
            border:1px solid rgba(12,18,22,0.06);
            font-size:14px;
            resize:vertical;
        }
        textarea{min-height:120px}
        .meta{
            display:flex;
            gap:12px;
            align-items:center;
            color:var(--muted);
            font-size:14px;
        }
        .team{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:12px;
            margin-top:12px;
        }
        .profile{
            display:flex;
            gap:12px;
            align-items:center;
            padding:12px;
            border-radius:10px;
            background:linear-gradient(180deg,#fff,#fbffff);
        }
        .avatar{
            width:64px;height:64px;border-radius:10px;background:linear-gradient(135deg,#e6f8f9,#d9f1f2);
            display:flex;align-items:center;justify-content:center;color:var(--accent-2);font-weight:700;font-size:20px;
        }
        @media (max-width:900px){
            .two-col{grid-template-columns:1fr}
            .grid{grid-template-columns:repeat(2,1fr)}
            .hero{grid-template-columns:1fr}
        }
        @media (max-width:560px){
            .grid{grid-template-columns:1fr}
            .team{grid-template-columns:1fr}
            header{flex-direction:column;align-items:flex-start;gap:12px}
        }