:root{
    --navy:#26295C;
    --navy-soft:#3B3F82;
    --teal:#66CFCB;
    --teal-deep:#3FB3AE;
    --bg:#FCFCFB;
    --bg-alt:#F1F8F8;
    --ink:#26295C;
    --ink-dim:#63667F;
    --line:#DCEDEC;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  html,body{overflow-x:clip;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Poppins', sans-serif;
    font-weight:400;
    line-height:1.65;
  }
  h1,h2,h3{font-family:'Poppins', sans-serif; color:var(--navy); font-weight:600;}
  a{color:inherit; text-decoration:none;}
  img{display:block; max-width:100%;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
  .tag-script{font-family:'Caveat', 'Segoe Script', 'Bradley Hand', cursive; color:var(--navy-soft);}

  /* ---------- NAV ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(252,252,251,0.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{height:42px; width:auto;}
  nav{display:flex; gap:30px; align-items:center;}
  nav a{font-size:0.92rem; color:var(--ink); font-weight:500;}
  nav a:hover{color:var(--teal-deep);}
  .nav-cta{
    background:var(--teal); color:#fff !important; padding:10px 20px;
    border-radius:30px; font-weight:600 !important;
  }
  .nav-cta:hover{background:var(--teal-deep) !important;}
  .nav-toggle{display:none; background:none; border:none; font-size:1.6rem; color:var(--navy); cursor:pointer;}

  /* ---------- HERO ---------- */
  .hero{
    padding:80px 0 90px;
    background:
      radial-gradient(circle at 85% 15%, rgba(102,207,203,0.16) 0%, transparent 45%),
      var(--bg);
  }
  .hero-inner{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;
  }
  .eyebrow{color:var(--teal-deep); font-weight:600; font-size:0.9rem; margin-bottom:14px;}
  .hero h1{font-size:clamp(2.3rem, 4.5vw, 3.4rem); line-height:1.15;}
  .hero .tag-script{font-size:1.7rem; display:block; margin-top:16px;}
  .hero p.desc{margin-top:22px; color:var(--ink-dim); max-width:46ch; font-size:1.02rem;}
  .btn{
    display:inline-block; padding:15px 30px; border-radius:34px;
    background:var(--navy); color:#fff; font-weight:600; font-size:0.95rem;
    margin-top:30px; transition:background .25s ease, transform .25s ease;
  }
  .btn:hover{background:var(--navy-soft); transform:translateY(-1px);}
  .btn-outline{
    background:transparent; border:1.5px solid var(--navy); color:var(--navy);
  }
  .btn-outline:hover{background:var(--navy); color:#fff;}
  .btn-row{display:flex; gap:16px; flex-wrap:wrap;}
  .hero-card{
    background:var(--bg-alt); border:1px solid var(--line); border-radius:18px;
    padding:34px; text-align:center;
  }
  .hero-card img{max-width:260px; margin:0 auto 18px;}
  .hero-card p{color:var(--ink-dim); font-size:0.9rem;}

  /* ---------- AREAS STRIP ---------- */
  .areas-strip{
    background:var(--navy); color:#fff; padding:18px 0; overflow:hidden;
  }
  .areas-strip .wrap{
    display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
    font-size:0.88rem; letter-spacing:0.02em;
  }
  .areas-strip span.dot{color:var(--teal); margin:0 4px;}

  /* ---------- ABOUT ---------- */
  .about{padding:100px 0; border-bottom:1px solid var(--line);}
  .about-inner{display:grid; grid-template-columns:0.85fr 1.15fr; gap:60px; align-items:center;}
  .about-visual{
    background:var(--bg-alt); border-radius:20px; padding:40px;
    display:flex; align-items:center; justify-content:center; height:100%;
    min-height:320px;
  }
  .about-visual img{max-width:220px;}
  .section-label{color:var(--teal-deep); font-weight:600; font-size:0.9rem; margin-bottom:12px;}
  .about h2{font-size:clamp(1.7rem, 3vw, 2.3rem); margin-bottom:20px;}
  .about p{color:var(--ink-dim); margin-bottom:16px; max-width:52ch;}

  /* ---------- SERVICES ---------- */
  .services{padding:100px 0; background:var(--bg-alt);}
  .section-head{max-width:640px; margin-bottom:56px;}
  .section-head h2{font-size:clamp(1.8rem, 3.2vw, 2.5rem);}
  .section-head p{color:var(--ink-dim); margin-top:14px;}
  .service-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:28px;}
  .service-card{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding:32px;
  }
  .service-card h3{font-size:1.2rem; margin-bottom:10px; display:flex; align-items:center; gap:10px;}
  .service-card h3::before{
    content:""; width:8px; height:8px; border-radius:50%; background:var(--teal); flex-shrink:0;
  }
  .service-card p{color:var(--ink-dim); font-size:0.94rem;}

  /* ---------- RATES ---------- */
  .rates{padding:100px 0;}
  .rate-table{border-top:1px solid var(--line);}
  .rate-row{
    display:grid; grid-template-columns:1.6fr 0.9fr 0.7fr;
    padding:22px 0; border-bottom:1px solid var(--line); align-items:center; gap:16px;
  }
  .rate-row.head{color:var(--ink-dim); font-size:0.82rem; font-weight:600; padding-bottom:14px;}
  .rate-row h4{font-size:1.05rem; font-weight:500; color:var(--navy);}
  .rate-row .price{font-weight:600; color:var(--teal-deep); font-size:1.15rem; text-align:right;}
  .rate-row .duration{color:var(--ink-dim); font-size:0.92rem;}
  .rates-note{margin-top:26px; color:var(--ink-dim); font-size:0.85rem; font-style:italic;}

  /* ---------- TESTIMONIALS ---------- */
  .testimonials{padding:100px 0; background:var(--navy); color:#fff;}
  .testimonials .section-label{color:var(--teal);}
  .testimonials h2{color:#fff;}
  .test-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:50px;}
  .test-card{
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
    border-radius:16px; padding:28px;
  }
  .test-card p.line{font-size:0.98rem; line-height:1.6;}
  .test-card p.who{margin-top:18px; color:var(--teal); font-size:0.88rem; font-weight:600;}

  /* ---------- CONTACT / CTA ---------- */
  .contact{padding:110px 0; text-align:center;}
  .contact h2{font-size:clamp(1.9rem, 3.6vw, 2.7rem); max-width:16ch; margin:0 auto;}
  .contact p.desc{color:var(--ink-dim); max-width:44ch; margin:18px auto 0;}
  .contact-methods{
    display:flex; justify-content:center; gap:40px; margin-top:44px; flex-wrap:wrap;
  }
  .contact-methods .method{text-align:left;}
  .contact-methods .method span.label{display:block; color:var(--ink-dim); font-size:0.82rem; margin-bottom:4px;}
  .contact-methods .method a{font-size:1.15rem; font-weight:600; color:var(--navy);}
  .contact-methods .method a:hover{color:var(--teal-deep);}

  /* ---------- FOOTER ---------- */
  footer{
    padding:34px 0; border-top:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  }
  footer .fbrand{display:flex; align-items:center; gap:10px; font-weight:600; color:var(--navy);}
  footer .fbrand img{height:28px;}
  footer p{color:var(--ink-dim); font-size:0.82rem;}

  @media (max-width:860px){
    nav{
      position:fixed; top:70px; right:0; width:70%; height:calc(100vh - 70px);
      background:var(--bg); flex-direction:column; padding:34px;
      transform:translateX(100%); visibility:hidden;
      transition:transform .3s ease, visibility .3s;
      border-left:1px solid var(--line); box-shadow:-12px 0 30px rgba(38,41,92,0.08);
    }
    nav.open{transform:translateX(0); visibility:visible;}
    .nav-toggle{display:block;}
    .hero-inner{grid-template-columns:1fr;}
    .hero{padding:48px 0 60px;}
    .hero-card{padding:24px;}
    .hero-card img{max-width:200px;}
    .about{padding:70px 0;}
    .about-visual{display:none;}
    .services,.rates,.testimonials{padding:70px 0;}
    .contact{padding:80px 0;}
    .about-inner{grid-template-columns:1fr;}
    .service-grid{grid-template-columns:1fr;}
    .rate-row{grid-template-columns:1fr auto; row-gap:4px;}
    .rate-row.head > div:nth-child(2){display:none;}
    .rate-row h4{grid-column:1/2;}
    .rate-row .duration{grid-column:1/2;}
    .rate-row .price{grid-column:2/3;}
    .test-grid{grid-template-columns:1fr;}
    .contact-methods{flex-direction:column; align-items:center; gap:22px;}
    .contact-methods .method{text-align:center;}
    .contact-methods .method a{overflow-wrap:anywhere;}
  }
