/* ==========================================================================
   DDO — shared stylesheet
   Tokens match the visual system on the design canvas.
   ========================================================================== */

:root{
  --ink:#0D2436;
  --deep:#143A54;
  --primary:#2C6E9B;
  --primary-dark:#1B4E72;
  --accent:#4E9DB5;
  --tint:#E6EFF5;
  --tint-2:#F2F7FA;
  --surface:#FAFBFC;
  --line:#D6E2EB;
  --line-2:#E4EDF3;
  --muted:#5A7286;
  --muted-2:#7C8FA1;
  --danger:#B4553F;
  --serif:Spectral,Georgia,"Times New Roman",serif;
  --sans:Karla,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(24px,6vw,120px);
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--sans);
  background:var(--surface);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-0.01em;line-height:1.15;}
p{margin:0;}
img{max-width:100%;}

a{color:var(--primary);text-decoration:none;}
a:hover{color:var(--primary-dark);}

.wrap{max-width:1200px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
@media (min-width:1441px){ .wrap{max-width:1440px;} }

/* ------------------------------------------------------------------ nav --- */
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px var(--pad);
  border-bottom:1px solid var(--line-2);
  background:var(--surface);
  position:sticky;top:0;z-index:20;
}
.nav.on-white{background:#fff;}
.nav__logo img{height:42px;width:auto;display:block;}
.nav__links{display:flex;align-items:center;gap:34px;}
.nav__links a{font-size:15px;color:var(--muted);font-weight:500;}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink);}
.nav__links a[aria-current="page"]{font-weight:600;}
/* The call-to-action in the nav is a button, not a nav link: keep it white on
   blue. Without this the rules above win on specificity and the label turns
   grey against the blue fill. */
.nav__links a.btn,
.nav__links a.btn:hover,
.nav__links a.btn:focus{color:#fff;}
.nav__toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;}

@media (max-width:900px){
  .nav__logo img{height:34px;}
  .nav__toggle{display:flex;}
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line-2);
    padding:8px var(--pad) 20px;
  }
  .nav__links.open{display:flex;}
  .nav__links a{padding:14px 0;border-bottom:1px solid var(--line-2);font-size:16px;}
  .nav__links .btn{margin-top:16px;border-bottom:none;text-align:center;}
}

/* --------------------------------------------------------------- buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--primary);color:#fff;
  font-size:16px;font-weight:600;
  padding:15px 28px;border-radius:4px;border:1px solid var(--primary);
  cursor:pointer;font-family:var(--sans);
  min-height:48px;
}
.btn:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;}
.btn--ghost{background:#fff;color:var(--deep);border:1px solid var(--line);}
.btn--ghost:hover{background:var(--tint-2);color:var(--deep);border-color:var(--line);}
.btn--light{background:#fff;color:var(--deep);border-color:#fff;}
.btn--light:hover{background:var(--tint);color:var(--deep);border-color:var(--tint);}
.btn--sm{padding:12px 22px;font-size:15px;min-height:44px;}
.btn[disabled]{background:#DCE6ED;border-color:#DCE6ED;color:#9CAFBC;cursor:not-allowed;}

/* -------------------------------------------------------------- sections --- */
.section{padding:clamp(56px,8vw,96px) 0;}
.section--white{background:#fff;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);}
.section--deep{background:var(--deep);color:#fff;}
.section--tintTop{background:linear-gradient(180deg,var(--tint-2) 0%,var(--surface) 100%);}

.eyebrow{display:flex;align-items:center;gap:10px;}
.eyebrow span:first-child{width:28px;height:1px;background:var(--accent);display:block;flex-shrink:0;}
.eyebrow span:last-child{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}

.lede{font-size:clamp(17px,2vw,19px);line-height:1.65;color:var(--muted);max-width:56ch;text-wrap:pretty;}
.h-display{font-size:clamp(36px,5.4vw,60px);text-wrap:pretty;}
.h-section{font-size:clamp(28px,3.6vw,38px);text-wrap:pretty;}

.stack{display:flex;flex-direction:column;}
.gap-8{gap:8px;} .gap-14{gap:14px;} .gap-18{gap:18px;} .gap-22{gap:22px;} .gap-26{gap:26px;}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,80px);}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px);}
@media (max-width:900px){ .grid-2,.grid-3{grid-template-columns:minmax(0,1fr);} }

/* ------------------------------------------------------------------ hero --- */
.hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,80px);align-items:center;}
@media (max-width:900px){ .hero{grid-template-columns:minmax(0,1fr);} .hero__art{order:2;} }
.hero__art img{width:100%;max-width:460px;height:auto;display:block;margin:0 auto;}

/* ----------------------------------------------------------------- cards --- */
.card{
  display:flex;flex-direction:column;gap:16px;
  padding:clamp(24px,3vw,36px);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:6px;
}
.section--white .card{background:var(--surface);}
.card__stage{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);}
.card h3{font-size:clamp(21px,2.4vw,24px);}
.card p{font-size:16px;line-height:1.65;color:var(--muted);}
.card ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.card li{font-size:15px;color:var(--deep);}
.card .fineprint{font-size:14px;line-height:1.55;color:var(--muted-2);}

/* ----------------------------------------------------------------- steps --- */
.steps{display:flex;flex-direction:column;}
.step{display:flex;gap:22px;padding:28px 0;border-bottom:1px solid var(--line-2);}
.step:last-child{border-bottom:none;}
.step:first-child{padding-top:0;}
.step__n{flex-shrink:0;font-family:var(--serif);font-size:15px;font-weight:600;color:var(--accent);padding-top:3px;}
.step h3{font-size:20px;}
.step p{font-size:16px;line-height:1.6;color:var(--muted);}

/* ----------------------------------------------------------------- stats --- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,60px);}
@media (max-width:700px){ .stats{grid-template-columns:minmax(0,1fr);gap:28px;} }
.stat__n{font-family:var(--serif);font-size:clamp(34px,4.6vw,46px);font-weight:500;display:block;}
.stat__l{font-size:15px;}
.section--deep .stat__n{color:#fff;}
.section--deep .stat__l{color:#9DBBCE;}

/* ---------------------------------------------------------------- footer --- */
.footer{background:var(--ink);padding:clamp(40px,6vw,56px) 0 40px;}
.footer__top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.footer__chip{display:inline-flex;align-self:flex-start;padding:9px 13px;background:#fff;border-radius:6px;}
.footer__chip img{height:58px;width:auto;display:block;}
.footer p{font-size:14px;line-height:1.6;color:#7E9AAE;max-width:340px;}
.footer__cols{display:flex;gap:clamp(32px,6vw,72px);flex-wrap:wrap;}
.footer__col{display:flex;flex-direction:column;gap:10px;}
.footer__h{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);}
.footer__col a,.footer__col span{font-size:15px;color:#C4D5E0;}
.footer__col a:hover{color:#fff;}
.footer__legal{margin-top:40px;padding-top:24px;border-top:1px solid #1E4159;}
.footer__legal p{font-size:13px;line-height:1.6;color:#6B889C;max-width:76ch;}

/* ----------------------------------------------------------------- forms --- */
.field{display:flex;flex-direction:column;gap:8px;}
.label{font-size:14px;font-weight:600;color:var(--deep);}
.label .opt{font-weight:400;color:var(--muted-2);}
.help{font-size:13px;color:var(--muted-2);line-height:1.5;}
input[type=text],input[type=email],input[type=tel]{
  height:48px;padding:0 14px;
  border:1px solid var(--line);border-radius:4px;
  font-size:15px;font-family:var(--sans);color:var(--ink);background:#fff;
  width:100%;
}
input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary);}
.panel{background:#fff;border:1px solid var(--line-2);border-radius:8px;padding:clamp(24px,3vw,40px);}
.note{background:var(--tint);border-radius:6px;padding:22px;display:flex;flex-direction:column;gap:12px;}
.note p,.note li{font-size:15px;line-height:1.55;color:#47657C;}

.alert{display:none;padding:14px 16px;border-radius:6px;font-size:15px;line-height:1.55;margin-bottom:18px;}
.alert.show{display:block;}
.alert--error{background:#FBE9E7;border:1px solid #F0B3AB;color:#93412D;}

/* ------------------------------------------------------------- estimator --- */
.est{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px);align-items:start;}
@media (max-width:900px){ .est{grid-template-columns:minmax(0,1fr);} }
.pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.pill{
  display:flex;align-items:center;justify-content:center;height:50px;
  border:1px solid var(--line);background:#fff;color:var(--muted);
  border-radius:4px;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--sans);
}
.pill[aria-pressed="true"]{border:1.5px solid var(--primary);background:var(--tint-2);color:var(--deep);}
.row{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.row__text{display:flex;flex-direction:column;gap:4px;}
.row__text strong{font-size:15px;color:var(--deep);}
.row__text span{font-size:14px;line-height:1.5;color:var(--muted-2);max-width:34ch;}
.stepper{display:flex;align-items:center;flex-shrink:0;}
.stepper button{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;cursor:pointer;
}
.stepper button:first-child{border-radius:4px 0 0 4px;}
.stepper button:last-child{border-radius:0 4px 4px 0;}
.stepper output{
  width:56px;height:44px;display:flex;align-items:center;justify-content:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:17px;font-weight:600;
}
.switch{
  width:52px;height:30px;border-radius:15px;padding:3px;flex-shrink:0;
  display:flex;align-items:center;background:#C3D2DD;justify-content:flex-start;
  border:none;cursor:pointer;transition:background .15s ease;
}
.switch[aria-pressed="true"]{background:var(--primary);justify-content:flex-end;}
.switch i{width:24px;height:24px;border-radius:12px;background:#fff;display:block;}
.summary{background:var(--deep);border-radius:8px;padding:clamp(24px,3vw,36px);color:#fff;}
.summary__k{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7FB3CC;}
.summary__total{font-family:var(--serif);font-size:clamp(34px,4.4vw,46px);font-weight:500;display:block;padding:14px 0 6px;}
.summary__scope{font-size:15px;color:#9DBBCE;}
.summary hr{border:none;border-top:1px solid #26506D;margin:26px 0;}
.summary__line{display:flex;align-items:baseline;justify-content:space-between;gap:20px;}
.summary__line + .summary__line{margin-top:16px;}
.summary__line b{font-size:16px;font-weight:600;white-space:nowrap;}
.summary__line em{font-style:normal;font-size:15px;color:#E3EDF3;display:block;}
.summary__line small{font-size:13px;color:#7FA0B6;}
.summary__fine{font-size:13px;line-height:1.6;color:#8FAEC2;}

.hidden{display:none !important;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}


/* ------------------------------------------------------------ photo frame ---
   Drop a file into assets/ and it appears. If the file is missing the frame
   falls back to a labelled placeholder rather than a broken-image icon. */
.photo-frame{
  border-radius:8px;overflow:hidden;background:#fff;
  border:1px solid var(--line-2);
}
.photo-frame img{display:block;width:100%;max-width:none;height:100%;margin:0;object-fit:cover;}
.photo-frame .photo-empty{display:none;}
.photo-frame.is-empty{
  border:1.5px dashed #C3D2DD;background:#fff;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(240px,34vw,380px);
}
.photo-frame.is-empty .photo-empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:24px;text-align:center;
}
.photo-empty strong{font-size:15px;color:var(--muted);}
.photo-empty span{font-size:14px;line-height:1.5;color:#8FA3B3;max-width:34ch;}


/* --------------------------------------------------------- whatsapp float ---
   Fixed contact button. Sits clear of the 44px touch-target minimum and of
   iOS home-indicator space via env(safe-area-inset-bottom). */
.wa-float{
  position:fixed;
  right:clamp(16px,3vw,28px);
  bottom:calc(clamp(16px,3vw,28px) + env(safe-area-inset-bottom,0px));
  z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  height:56px;padding:0 20px 0 16px;
  background:#25D366;color:#fff;
  border-radius:28px;
  font-family:var(--sans);font-size:15px;font-weight:600;
  box-shadow:0 6px 20px rgba(13,36,54,.22);
  text-decoration:none;
  transition:background .15s ease,transform .15s ease;
}
.wa-float:hover{background:#1EB855;color:#fff;transform:translateY(-1px);}
.wa-float:focus-visible{outline:3px solid #143A54;outline-offset:3px;}
.wa-float svg{flex-shrink:0;}
@media (max-width:600px){
  /* Icon only on small screens, so it never covers content. */
  .wa-float{width:56px;padding:0;justify-content:center;}
  .wa-float span{display:none;}
}
@media print{ .wa-float{display:none;} }

/* ----------------------------------------------------------------- legal ---
   Terms of Use, Privacy Notice and PDPA Notice. Long-form reading text, so a
   narrower measure and quieter headings than the marketing pages. */
.legal-head{padding:clamp(40px,6vw,64px) 0 clamp(20px,3vw,28px);background:linear-gradient(180deg,var(--tint-2) 0%,var(--surface) 100%);}
.legal-head h1{font-size:clamp(30px,4vw,40px);}
.legal-head p{font-size:16px;color:var(--muted);margin-top:10px;max-width:60ch;}
.legal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.legal-tabs a{
  font-size:14px;font-weight:600;color:var(--deep);
  padding:9px 16px;border:1px solid var(--line);border-radius:20px;background:#fff;
}
.legal-tabs a:hover{border-color:var(--primary);color:var(--primary);}
.legal-tabs a[aria-current="page"]{background:var(--deep);border-color:var(--deep);color:#fff;}
.legal{
  max-width:760px;
  background:#fff;border:1px solid var(--line-2);border-radius:8px;
  padding:clamp(24px,4vw,44px);
  margin:clamp(20px,3vw,28px) 0 clamp(56px,7vw,88px);
}
.legal .doc-title{font-size:clamp(22px,2.6vw,26px);margin:0 0 6px;}
.legal .doc-meta{font-size:14px;color:var(--muted-2);margin-bottom:22px;}
.legal h2{font-size:20px;margin:34px 0 10px;color:var(--ink);}
.legal h2:first-of-type{margin-top:22px;}
.legal h3{font-size:17px;margin:22px 0 8px;color:var(--deep);}
.legal p{font-size:16px;line-height:1.7;color:#2E4557;margin:0 0 14px;}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px;}
.legal li{font-size:16px;line-height:1.65;color:#2E4557;margin-bottom:8px;}
.legal a{text-decoration:underline;text-underline-offset:2px;}
.legal hr{border:none;border-top:1px solid var(--line-2);margin:40px 0;}
.legal [id]{scroll-margin-top:96px;}

/* Short notice line under forms that collect personal data. */
.data-notice{font-size:13px;line-height:1.6;color:var(--muted-2);}
.data-notice a{text-decoration:underline;text-underline-offset:2px;}