:root{
  --bg:#F1F5F8; --surface:#E3EBF1; --text:#11222D; --muted:#496070; --line:#C4D1DB;
  --accent:#1B6FA8; --accent-ink:#FFFFFF; --tick:#1B6FA8; --empty:#D3DEE6;
  --display:"Bricolage Grotesque","Segoe UI",Arial,sans-serif;
  --body:"Public Sans","Segoe UI",Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000; --surface:#112430; --text:#E6EEF3; --muted:#9AB0BF; --line:#21394A;
    --accent:#35B6E8; --accent-ink:#04141C; --tick:#35B6E8; --empty:#183040;
  }
}
:root[data-theme="dark"]{
  --bg:#000; --surface:#112430; --text:#E6EEF3; --muted:#9AB0BF; --line:#21394A;
  --accent:#35B6E8; --accent-ink:#04141C; --tick:#35B6E8; --empty:#183040;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(96px + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--body);transition:background .25s,color .25s}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.3rem var(--display);letter-spacing:-.02em}
#logo{display:flex;align-items:center;gap:10px}
#logo svg{width:28px;height:28px;color:var(--accent)}
nav{display:flex;align-items:center;gap:22px;font-weight:500}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--text)}
#theme{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font:500 .9rem var(--body);cursor:pointer}
#theme:hover{border-color:var(--accent)}
#theme svg{width:18px;height:18px}
.i-sun{display:none}
:root[data-theme="dark"] .i-sun{display:block}
:root[data-theme="dark"] .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .i-sun{display:block}
  :root:not([data-theme="light"]) .i-moon{display:none}
}

.hero{padding:72px 0 80px}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
h1{font:800 clamp(2.6rem,6.5vw,4.6rem)/1 var(--display);letter-spacing:-.035em;margin:0 0 22px}
.lede{font-size:1.2rem;color:var(--muted);max-width:34ch;margin:0 0 30px}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font:600 1rem var(--body);padding:14px 26px;border-radius:8px;text-decoration:none}
.btn:hover{filter:brightness(1.08)}

.tracker{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.tracker h2{font:700 .95rem var(--display);margin:0 0 14px;color:var(--muted)}
.row{display:grid;grid-template-columns:76px repeat(7,1fr);gap:6px;align-items:center;margin-bottom:6px;font-size:.85rem;color:var(--muted)}
.cell{aspect-ratio:1;border-radius:6px;background:var(--empty);display:grid;place-items:center}
.cell svg{width:60%;height:60%;opacity:0;transform:scale(.4);transition:opacity .25s,transform .25s}
.cell.on{background:var(--tick)}
.cell.on svg{opacity:1;transform:none;color:var(--accent-ink)}
.tracker p{margin:14px 0 0;font-size:.85rem;color:var(--muted)}

section{padding:72px 0;border-top:1px solid var(--line)}
.sec-head h2{font:800 clamp(2rem,4.5vw,3rem)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 12px}
.sec-head p{color:var(--muted);margin:0 0 44px;max-width:52ch}

.svc {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  padding: 36px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card-bg);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  margin-bottom: 30px;
}
.svc:first-of-type{border-top:0}
.svc .n{font:700 .95rem var(--display);color:var(--accent);margin-bottom:6px}
.svc h3{font:700 1.7rem/1.15 var(--display);letter-spacing:-.02em;margin:0 0 8px}
.svc .tag{font-weight:600;color:var(--muted);margin:0}
.svc p{margin:0 0 16px}
.svc h4{font:700 1rem var(--display);margin:0 0 6px}
.svc ul{margin:0;padding-left:20px}
.svc li{margin-bottom:4px}
.svc li::marker{color:var(--accent)}
.svc .why{border-left:3px solid var(--accent);padding-left:16px;margin-bottom:20px}
.svc .why p{margin:0;color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding:18px 16px 0 0;border-top:3px solid var(--accent);font:700 1.1rem var(--display)}
.steps li::before{content:counter(s);display:block;color:var(--accent);font-size:.9rem;margin-bottom:4px}
.together-text{max-width:60ch;color:var(--muted);margin:0 0 40px}

.contact{background:var(--surface)}
.contact h2{font:800 clamp(2rem,4.5vw,3rem)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 12px}
.contact p{margin:0 0 26px;color:var(--muted)}
footer{padding:28px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

@media (max-width:820px){
  .hero{padding:44px 0 56px}
  .hero .wrap,.svc{grid-template-columns:1fr;gap:24px}
  .steps{grid-template-columns:1fr;gap:18px}
  
  .wrap{padding:0 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cell svg{transition:none}
}

.brand img{width:36px;height:36px;border-radius:8px;display:block}
header .wrap{height:auto;min-height:68px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
nav a[aria-current]{color:var(--text);font-weight:600;border-bottom:2px solid var(--accent)}
.page-hero{padding:64px 0 40px}
.page-hero h1{font-size:clamp(2.2rem,5.5vw,3.6rem)}
.page-hero .lede{max-width:44ch;margin:0}
.prose{max-width:62ch}.prose p{margin:0 0 18px}
.mv,.values{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
.mv h2,.values-h{font:800 1.8rem var(--display);letter-spacing:-.02em;margin:0 0 8px}
.mv p{margin:0;color:var(--muted)}
.values div{border-left:3px solid var(--accent);padding-left:16px}
.values h3{font:700 1.2rem var(--display);margin:0 0 4px}
.values p{margin:0;color:var(--muted)}
.ov{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;padding:16px 0;border-top:1px solid var(--line);text-decoration:none}
.ov b{font:700 1.2rem var(--display)}.ov span{color:var(--muted)}.ov:hover b{color:var(--accent)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px}
form label{display:block;font-weight:600;margin:0 0 16px}
form input,form select,form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;font:inherit;font-weight:400;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:8px}
form textarea{min-height:140px;resize:vertical}
form .opt{font-weight:400;color:var(--muted)}
form button{border:0;cursor:pointer}
.details{list-style:none;margin:0 0 36px;padding:0}
.details li{padding:12px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between}
.details span{color:var(--muted)}
.next-h{font:800 1.5rem var(--display);margin:0 0 10px}
.next{padding-left:22px;margin:0 0 20px}.next li{margin-bottom:6px}.next li::marker{color:var(--accent);font-weight:700}
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #25D366;
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.whatsapp-float span {
  font-size: 1.2rem;
}

@media (max-width: 600px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    padding: 11px 16px;
    font-size: 0.82rem;
  }
}

@media (max-width:820px){.mv,.values,.contact-grid{grid-template-columns:1fr;gap:28px}nav{gap:14px;font-size:.92rem}#theme-label{display:none}#theme{padding:8px}.page-hero{padding:44px 0 24px}}

/* ---------- Theme-aware images (light vs dark) ---------- */
img.light-img{display:block}
img.dark-img{display:none}
:root[data-theme="dark"] img.light-img{display:none}
:root[data-theme="dark"] img.dark-img{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) img.light-img{display:none}
  :root:not([data-theme="light"]) img.dark-img{display:block}
}
/* the light logo has a pure white backdrop; multiply makes it blend into the header */
.brand img.light-img{mix-blend-mode:multiply}

/* ---------- Page images ---------- */
.banner{margin:0;border-radius:16px;overflow:hidden;background:var(--surface)}
.banner img{width:100%;height:auto}
.banner .light-img, .banner .dark-img{width:100%;height:auto}
#services .banner{margin:0 0 30px}
#services .banner img{aspect-ratio:16/9;object-fit:cover}
.page-hero.split .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}

/* ---------- Dropdown menu ---------- */
.dropdown{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;font:inherit;font-weight:500;color:var(--muted);cursor:pointer}
.dd-btn:hover,.dd-btn[aria-expanded="true"]{color:var(--text)}
.dd-btn.has-current{color:var(--text);font-weight:600;border-bottom:2px solid var(--accent)}
.dd-chev{width:16px;height:16px;transition:transform .2s}
.dd-btn[aria-expanded="true"] .dd-chev{transform:rotate(180deg)}
.dd-menu{display:none;position:absolute;top:100%;left:0;margin:10px 0 0;padding:6px;list-style:none;min-width:180px;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.18);z-index:20}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dropdown.open .dd-menu{display:block}
.dd-menu a{display:block;padding:10px 14px;border-radius:8px;color:var(--text);font-weight:500}
.dd-menu a:hover{background:var(--surface)}
.dd-menu a[aria-current]{border-bottom:0;background:var(--surface);color:var(--accent);font-weight:600}

@media (max-width:820px){
  .page-hero.split .wrap{grid-template-columns:1fr;gap:28px}
}
@media (prefers-reduced-motion:reduce){
  .dd-chev{transition:none}
}

@media (max-width:820px){
  header .wrap{position:relative}
  .dropdown{position:static}
  .dd-menu{left:auto;right:20px;top:100%;margin-top:0;min-width:190px;max-width:calc(100vw - 40px)}
  .dd-menu::before{display:none}
}

/* nav for mobile */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.2rem;
  align-items: center;
  justify-content: center;
}

.menu-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 820px) {
  header .wrap {
    flex-wrap: nowrap;
  }

  .menu-toggle {
    display: flex;
    margin-left: auto;
  }

  nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 20px;
    right: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
  }

  nav.open {
    display: flex;
  }

  nav a,
  .dd-btn,
  #theme {
    padding: 12px 14px;
    width: 100%;
    text-align: left;
  }

  .dropdown {
    width: 100%;
  }
}


/* ---------- Responsive images (all screens) ---------- */
img,svg,video{max-width:100%}
img{height:auto}
.brand img{width:36px;height:36px}
.banner{max-width:100%}
.hero .tracker,.page-hero.split .wrap>*{min-width:0}

/* ---------- Jump-link target highlight ---------- */
.svc{scroll-margin-top:96px}
.svc:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent)}

/* ---------- Footer ---------- */
footer .footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 40px;align-items:start}
footer .f-brand,footer .f-contact{display:flex;flex-direction:column;gap:6px}
footer .f-social{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
footer a{text-decoration:none}
footer a:hover{color:var(--text);text-decoration:underline}
footer i{width:1.2em;text-align:center;margin-right:4px}
@media (max-width:820px){footer .footer-grid{grid-template-columns:1fr}}

/* ---------- Privacy policy ---------- */
.policy h2{font:800 1.4rem/1.2 var(--display);letter-spacing:-.02em;margin:36px 0 10px}
.policy h2:first-of-type{margin-top:28px}
.policy ul{margin:0 0 18px;padding-left:22px}
.policy li{margin-bottom:6px}
.policy li::marker{color:var(--accent)}
.policy a{color:var(--accent)}