
  :root{
    --white:#FFFFFF;
    --navy:#1F3864;
    --navy900:#16324F;
    --turq:#2EC4B6;
    --seamist:#F2F6FA;
    --slate:#595959;
    --scale:1;              /* large-text toggle multiplier */
    --base: calc(19px * var(--scale));
    --radius:14px;
    --maxw:1120px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size:var(--base);
    line-height:1.65;
    color:var(--navy);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.brandmark{
    font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--navy);
    letter-spacing:-0.01em;
    line-height:1.2;
    margin:0 0 .5em;
  }
  h1{font-size:calc(2.35rem * var(--scale));font-weight:800;}
  h2{font-size:calc(1.7rem * var(--scale));font-weight:700;}
  h3{font-size:calc(1.22rem * var(--scale));font-weight:700;}
  p{margin:0 0 1rem;}
  a{color:var(--navy);}
  a:hover{color:var(--turq);}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;}

  /* the thin turquoise rule under H2 - the document's signature */
  .h2rule{display:inline-block;}
  .h2rule::after{content:"";display:block;width:56px;height:4px;background:var(--turq);border-radius:3px;margin-top:10px;}

  /* ---------- Header ---------- */
  header.site{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(140%) blur(6px);
    border-bottom:1px solid #E4EAF2;
  }
  header.site .wrap{max-width:1240px;}
  .bar{display:flex;align-items:center;gap:14px;height:74px;}
  .logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto;}
  .logo .mark{width:auto;height:36px;flex:0 0 auto;display:block;}
  .logo .brandmark{font-size:calc(1.12rem * var(--scale));font-weight:800;color:var(--navy);line-height:1.05;}
  .logo .brandmark small{display:block;font-family:"Inter",sans-serif;font-weight:500;font-size:.62em;color:var(--slate);letter-spacing:.02em;}
  nav.main{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap;}
  nav.main button{
    font-family:inherit;font-size:calc(.8rem * var(--scale));
    background:none;border:0;color:var(--navy);cursor:pointer;
    padding:9px 9px;border-radius:9px;font-weight:600;white-space:nowrap;
  }
  nav.main button:hover{background:var(--seamist);}
  nav.main button.active{color:var(--navy);background:var(--seamist);}
  nav.main button.active::after{content:"";display:block;height:3px;background:var(--turq);border-radius:2px;margin-top:5px;}
  .txtsize{
    flex:0 0 auto;display:flex;align-items:center;gap:6px;
    border:1.5px solid var(--navy);background:var(--white);color:var(--navy);
    font-family:inherit;font-weight:700;cursor:pointer;
    border-radius:10px;padding:9px 12px;min-height:44px;font-size:calc(.8rem * var(--scale));
  }
  .txtsize[aria-pressed="true"]{background:var(--navy);color:var(--white);}
  .txtsize .aA{font-size:1.05em;line-height:1;}
  .menutoggle{display:none;}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    font-family:inherit;font-weight:700;font-size:calc(.95rem * var(--scale));
    min-height:52px;padding:14px 24px;border-radius:12px;
    text-decoration:none;cursor:pointer;border:2px solid transparent;
    transition:transform .05s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn-turq{background:var(--turq);color:#08312d;border-color:var(--turq);}
  .btn-turq:hover{background:#26b3a6;color:#08312d;}
  .btn-navyline{background:transparent;color:var(--navy);border-color:var(--navy);}
  .btn-navyline:hover{background:var(--navy);color:var(--white);}
  .btn-wide{width:100%;}
  .btnrow{display:flex;gap:14px;flex-wrap:wrap;}

  /* ---------- Page sections ---------- */
  .page{display:none;}
  .page.active{display:block;animation:fade .25s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
  section{padding:64px 0;}
  section.mist{background:var(--seamist);}
  .kicker{font-weight:700;color:var(--turq);text-transform:uppercase;letter-spacing:.12em;font-size:calc(.72rem * var(--scale));margin-bottom:10px;}
  .lead{font-size:calc(1.12rem * var(--scale));color:var(--navy);max-width:60ch;}
  .muted{color:var(--slate);}

  /* Hero */
  .hero{padding:0;}
  .hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch;}
  .hero .copy{padding:66px 44px 66px 0;}
  .hero .promise{font-size:calc(1.18rem * var(--scale));color:var(--slate);max-width:46ch;margin:0 0 26px;}
  .heroimg{
    min-height:430px;border-radius:0;
    background:
      radial-gradient(120% 90% at 80% 10%, rgba(46,196,182,.28), transparent 60%),
      linear-gradient(160deg,#1F3864 0%,#16324F 70%);
    display:flex;align-items:flex-end;justify-content:flex-start;
    color:#dbe6f5;position:relative;overflow:hidden;
  }
  .heroimg .ph{padding:20px 22px;font-size:calc(.8rem * var(--scale));background:rgba(8,20,40,.35);border-radius:10px;margin:20px;backdrop-filter:blur(2px);}
  .wave{position:absolute;inset:auto 0 0 0;height:70px;opacity:.5;}

  /* proof tiles */
  .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px;}
  .tile{background:var(--white);border:1px solid #E4EAF2;border-radius:var(--radius);padding:26px 24px;}
  .tile .ic{width:44px;height:44px;border-radius:11px;background:rgba(46,196,182,.14);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
  .tile h3{margin-bottom:6px;}
  .tile p{margin:0;color:var(--slate);font-size:calc(.94rem * var(--scale));}

  .strip{background:var(--navy900);color:#eaf1fb;}
  .strip .wrap{display:flex;gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
  .strip h2{color:#fff;}
  .strip p{color:#c6d5ea;margin:0;max-width:52ch;}

  /* generic content cards */
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:34px;}
  .cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .card{background:var(--white);border:1px solid #E4EAF2;border-radius:var(--radius);padding:26px;}
  .card.mist{background:var(--seamist);border-color:#E2EAF3;}
  ul.clean{list-style:none;padding:0;margin:0;}
  ul.clean li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid #EEF2F7;}
  ul.clean li:last-child{border-bottom:0;}
  ul.clean li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--turq);}
  .imgslot{border:1px dashed #b9c6d8;background:var(--seamist);border-radius:var(--radius);min-height:220px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--slate);font-size:calc(.85rem * var(--scale));padding:18px;}

  /* steps */
  .steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .step{background:var(--white);border:1px solid #E4EAF2;border-radius:var(--radius);padding:26px;position:relative;}
  .step .n{counter-increment:step;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-family:"Manrope";font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
  .step .n::before{content:counter(step);}

  /* hours table */
  table.hours{width:100%;border-collapse:collapse;font-size:calc(.98rem * var(--scale));}
  table.hours td{padding:13px 8px;border-bottom:1px solid #E7EDF4;}
  table.hours td:last-child{text-align:right;font-family:"Manrope";font-weight:700;font-size:calc(1.05rem * var(--scale));color:var(--navy);}
  .needpill{display:inline-block;background:#FFF4D6;color:#7a5b00;border-radius:20px;padding:2px 10px;font-size:.8em;font-weight:600;}

  /* form */
  form.enq{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  form.enq .full{grid-column:1 / -1;}
  label{display:block;font-weight:600;font-size:calc(.85rem * var(--scale));margin-bottom:6px;color:var(--navy);}
  input,select,textarea{
    width:100%;font-family:inherit;font-size:calc(.95rem * var(--scale));
    padding:13px 14px;border:1.5px solid #CBD6E4;border-radius:10px;background:var(--seamist);color:var(--navy);min-height:50px;
  }
  input:focus,select:focus,textarea:focus{outline:3px solid rgba(46,196,182,.35);border-color:var(--turq);}
  .formnote{background:#EAF7F5;border:1px solid #BEE7E1;border-radius:10px;padding:14px 16px;font-size:calc(.86rem * var(--scale));color:#1c4a45;}

  /* map card (static link-out, NOT a heavy live embed) */
  .mapcard{border:1px solid #E4EAF2;border-radius:var(--radius);overflow:hidden;}
  .mapface{min-height:230px;background:
     linear-gradient(0deg,rgba(31,56,100,.06),rgba(31,56,100,.06)),
     repeating-linear-gradient(45deg,#eef3f9 0 18px,#e7eef7 18px 36px);
     display:flex;align-items:center;justify-content:center;color:var(--slate);position:relative;}
  .pin{width:22px;height:22px;border-radius:50% 50% 50% 0;background:var(--turq);transform:rotate(-45deg);box-shadow:0 3px 8px rgba(0,0,0,.2);}

  /* footer */
  footer.site{background:var(--navy900);color:#c9d7ea;padding:52px 0 30px;}
  footer.site .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;}
  footer.site a{color:#dce7f6;}
  footer.site h4{color:#fff;font-family:"Manrope";font-size:calc(.95rem * var(--scale));margin:0 0 12px;}
  footer.site .lock{font-size:calc(.82rem * var(--scale));color:#9fb3ce;line-height:1.6;border-top:1px solid #24405f;margin-top:26px;padding-top:20px;}
  footer.site .ftnav{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
  footer.site .ftnav button{background:none;border:0;color:#dce7f6;font-family:inherit;font-size:calc(.9rem * var(--scale));cursor:pointer;padding:0;text-align:left;}
  footer.site .ftnav button:hover{color:var(--turq);}

  /* floating whatsapp */
  .wafloat{
    position:fixed;right:20px;bottom:20px;z-index:60;
    display:inline-flex;align-items:center;gap:10px;
    background:var(--turq);color:#08312d;text-decoration:none;font-weight:800;
    min-height:56px;padding:0 20px 0 16px;border-radius:32px;
    box-shadow:0 8px 24px rgba(8,49,45,.28);font-size:calc(.95rem * var(--scale));
  }
  .wafloat:hover{background:#26b3a6;color:#08312d;}
  .wafloat svg{width:26px;height:26px;flex:0 0 auto;}

  .callout{border-left:4px solid var(--turq);background:var(--seamist);padding:18px 20px;border-radius:0 12px 12px 0;}
  .disc{font-size:calc(.8rem * var(--scale));color:var(--slate);}

  /* prototype banner */
  .protobar{background:#0f2743;color:#cfe0f4;font-size:.8rem;text-align:center;padding:7px 14px;}
  .protobar b{color:#fff;}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .hero .grid{grid-template-columns:1fr;}
    .hero .copy{padding:44px 0 30px;}
    .heroimg{min-height:260px;order:-1;border-radius:0;}
    .cols,.cols3,.tiles,.steps,.strip .wrap,footer.site .grid,form.enq{grid-template-columns:1fr;}
    nav.main{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;border-bottom:1px solid #E4EAF2;padding:10px 14px;flex-direction:column;box-shadow:0 12px 24px rgba(0,0,0,.08);}
    nav.main.open{display:flex;}
    nav.main button{width:100%;text-align:left;font-size:calc(1rem * var(--scale));padding:13px 12px;}
    nav.main button.active::after{display:none;}
    .menutoggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;order:3;
      border:1.5px solid var(--navy);background:#fff;border-radius:10px;min-height:44px;min-width:48px;cursor:pointer;}
    .menutoggle svg{width:22px;height:22px;}
    .txtsize{order:2;padding:9px;min-width:48px;justify-content:center;}
    .txtsize .lbl{display:none;}
    .bar{gap:10px;}
    .logo{flex:1 1 auto;min-width:0;overflow:hidden;}
    .logo .brandmark{font-size:calc(1rem * var(--scale));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .logo .brandmark small{display:none;}
    .txtsize .aA{font-size:1em;}
  }
  @media (max-width:400px){
    .wafloat span.lbl{display:none;}
    .wafloat{padding:0;width:56px;justify-content:center;}
  }

/* multi-page nav + footer links */
nav.main a{font-family:inherit;font-size:calc(.8rem * var(--scale));background:none;border:0;color:var(--navy);cursor:pointer;padding:9px 9px;border-radius:9px;font-weight:600;white-space:nowrap;text-decoration:none;display:inline-block;line-height:1;}
nav.main a:hover{background:var(--seamist);}
nav.main a.active{color:var(--navy);background:var(--seamist);}
nav.main a.active::after{content:"";display:block;height:3px;background:var(--turq);border-radius:2px;margin-top:5px;}
footer.site .ftnav a{background:none;border:0;color:#dce7f6;font-family:inherit;font-size:calc(.9rem * var(--scale));cursor:pointer;padding:0;text-align:left;text-decoration:none;display:inline-block;}
footer.site .ftnav a:hover{color:var(--turq);}
@media (max-width:900px){
  nav.main a{width:100%;text-align:left;font-size:calc(1rem * var(--scale));padding:13px 12px;}
  nav.main a.active::after{display:none;}
}
