/* ==========================================================
   SK — WEALTH PLANNER | Turquoise / White / Charcoal
   One-page responsive landing website
   ========================================================== */
:root {
  --ink: #101c1f;
  --ink-soft: #4d6365;
  --pine: #063e3f;
  --deep: #062f31;
  --teal: #087d78;
  --mint: #22b6aa;
  --mist: #eaf7f4;
  --cream: #f7faf9;
  --line: #e1ece9;
  --white: #fff;
  --sans: "DM Sans", sans-serif;
  --display: "Plus Jakarta Sans", sans-serif;
  --radius: 20px;
  --shadow: 0 18px 70px rgba(10, 60, 60, .075);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body, input, select, textarea, button { font-size: 16px; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img, svg { max-width: 100%; }
img { display: block; }
[hidden] { display: none !important; }
::selection { background: #b5eee7; color: #052d2d; }
.container { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; top: -80px; left: 10px; background: white; color: black; padding: 10px 16px; z-index: 100; }
.skip-link:focus { top: 10px; }
:focus-visible { outline: 3px solid #1d9c95; outline-offset: 3px; }

/* NAV */
.site-header { background: rgba(255,255,255,.94); border-bottom: 1px solid rgba(19,66,64,.085); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; min-height: 82px; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-monogram { font-family:var(--display); font-size: 33px; letter-spacing: -3px; line-height: 1; font-weight:800; color:var(--deep); }
.brand-dot { color:var(--mint); }
.brand-info { display:flex; flex-direction:column; gap:4px; padding-left:11px; border-left:1px solid #ccdbd8; }
.brand-info strong { font-family:var(--display); font-size:10.5px; letter-spacing:2px; font-weight:800; white-space:nowrap; }
.brand-info small { color:#788b8b; font-size:10px; white-space:nowrap; }
.main-nav { display:flex; align-items:center; gap:34px; }
.main-nav > a:not(.nav-cta) { color:#4f6364; font-size:13px; font-weight:700; transition:color .2s; }
.main-nav > a:hover { color:var(--teal); }
.nav-cta { display:inline-flex; align-items:center; gap:18px; border-radius:999px; background:var(--pine); color:white; font-size:13px; font-weight:700; padding:13px 20px; box-shadow:0 8px 22px rgba(4,64,64,.12); transition:background .2s, transform .2s; }
.nav-cta:hover { background:var(--teal); transform:translateY(-2px); }
.menu-toggle { display:none; border:0; background:transparent; color:var(--pine); padding:8px; }

/* GLOBAL TYPE */
.eyebrow, .section-kicker { display:inline-flex; align-items:center; gap:10px; font-size:10.5px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:var(--teal); }
.eyebrow-line { display:inline-block; width:26px; height:1.5px; background:var(--mint); }
.kicker-dot { width:7px; height:7px; background:var(--mint); border-radius:50%; }
.section { padding:114px 0; }
.section h2, .contact-copy h2 { font:800 clamp(31px,4vw,49px)/1.23 var(--display); letter-spacing:-2.3px; margin:22px 0 0; }
.serif-em { color:var(--teal); }
.section p { color:var(--ink-soft); line-height:1.83; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:17px; padding:15px 23px; border-radius:8px; border:1px solid transparent; font-size:13px; font-weight:800; letter-spacing:.02em; transition:transform .2s, box-shadow .2s, background .2s; white-space:nowrap; }
.btn:hover { transform:translateY(-3px); }
.btn-primary { background:var(--pine); color:white; box-shadow:0 10px 25px rgba(4,65,61,.16); }
.btn-primary:hover { background:#096b67; box-shadow:0 14px 28px rgba(4,65,61,.22); }
.btn-outline { color:var(--pine); border-color:#bbd5d1; background:rgba(255,255,255,.65); }
.btn-outline:hover { background:white; box-shadow:0 12px 24px rgba(4,65,61,.08); }
.btn-arrow { font-size:18px; line-height:1; }

/* HERO */
.hero { min-height:680px; overflow:hidden; position:relative; background:linear-gradient(111deg, #fff 0%, #fcfefe 47%, #e6f6f3 100%); }
.hero-bg-orb { position:absolute; border-radius:50%; pointer-events:none; }
.orb-one { width:680px; height:680px; right:-300px; top:-260px; background:radial-gradient(circle,rgba(53,203,186,.18),transparent 70%); }
.orb-two { width:450px; height:450px; left:-350px; bottom:-350px; background:radial-gradient(circle,rgba(64,194,181,.11),transparent 72%); }
.hero-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:50px; align-items:center; min-height:613px; padding-top:43px; }
.hero-copy { padding:30px 0 20px; position:relative; z-index:2; }
.hero h1 { font:800 clamp(41px,4.65vw,64px)/1.14 var(--display); letter-spacing:-3.7px; margin:25px 0 21px; max-width:680px; }
.hero h1 em { font-style:normal; color:var(--teal); }
.hero-lead { max-width:530px; color:#556e6f; font-size:15.5px; line-height:1.88; margin:0 0 31px; }
.hero-actions { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.hero-promise { display:flex; align-items:center; gap:10px; margin-top:34px; color:#768d8c; font-size:12px; }
.promise-symbol { color:var(--teal); font-size:22px; }
.hero-visual { position:relative; display:flex; justify-content:flex-end; padding:26px 4px 25px 26px; align-self:stretch; align-items:center; }
.hero-photo-panel { width:min(100%,438px); height:510px; position:relative; background:linear-gradient(135deg,#d9f2ed 0%,#bbded8 100%); border-radius:230px 230px 17px 17px; overflow:hidden; isolation:isolate; box-shadow: 24px 25px 70px rgba(21,109,101,.12); }
.hero-photo-panel::before { content:""; position:absolute; width:90%; height:70%; bottom:-40%; left:-20%; border-radius:50%; background:#8fc9c0; filter:blur(20px); z-index:0; }
.hero-arc { position:absolute; border:1px solid rgba(255,255,255,.55); border-radius:50%; width:380px; height:380px; left:30px; top:20px; z-index:1; }
.hero-arc-two { width:485px; height:485px; left:-20px; top:-35px; border-color:rgba(255,255,255,.35); }
.hero-portrait { position:absolute; width:115%; height:103%; max-width:none; bottom:-13%; left:-6%; object-fit:cover; object-position:center 8%; z-index:2; mix-blend-mode:multiply; }
.photo-side-label { position:absolute; z-index:3; transform:rotate(-90deg); transform-origin:top left; top:86%; left:22px; font-size:9px; letter-spacing:2px; font-weight:800; color:rgba(4,66,62,.48); }
.hero-name-card { position:absolute; bottom:64px; left:-21px; z-index:5; padding:19px 24px; border:1px solid #e6efed; border-radius:11px; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); box-shadow:0 18px 45px rgba(7,63,60,.12); display:flex; flex-direction:column; gap:5px; min-width:245px; }
.name-line { font-size:9px; font-weight:800; letter-spacing:1.3px; color:var(--teal); display:flex; align-items:center; gap:7px; margin-bottom:3px; }
.name-card-dot { width:6px; height:6px; background:var(--mint); border-radius:50%; }
.hero-name-card strong { font:800 15px var(--display); }
.hero-name-card > span:last-child { color:#79908b; font-size:11px; }
.hero-bottom { display:flex; align-items:center; gap:18px; padding:14px 0 23px; }
.hero-bottom-rule { width:42px; height:1px; background:#bcd6d1; }
.hero-bottom > span, .hero-bottom > a { color:#78908d; font-size:9.5px; font-weight:800; letter-spacing:1.3px; }
.hero-bottom > a { margin-left:auto; }
.hero-bottom > a span { font-size:17px; margin-left:8px; }

/* INTRO BAND */
.intro-band { background:var(--pine); color:white; }
.intro-band-inner { min-height:91px; display:flex; justify-content:space-between; align-items:center; gap:30px; }
.intro-band-lead { display:flex; align-items:center; gap:15px; font-family:var(--display); font-size:14px; font-weight:700; }
.mini-star { color:#76dad0; font-size:24px; }
.intro-band-features { display:flex; align-items:center; gap:24px; color:#c6e6e2; font-size:12px; }
.intro-band-features i { display:inline-block; width:4px; height:4px; border-radius:50%; background:#5cbab1; }

/* ABOUT */
.about-grid { display:grid; grid-template-columns:.91fr 1.09fr; gap:100px; align-items:center; }
.about-picture { position:relative; max-width:460px; }
.about-picture-frame { overflow:hidden; height:540px; background:#e9f2ef; border-radius:12px 210px 12px 12px; position:relative; }
.about-picture-frame::before { content:""; position:absolute; inset:15px; border:1px solid rgba(255,255,255,.55); border-radius:7px 200px 7px 7px; z-index:1; pointer-events:none; }
.about-picture-frame img { width:100%; height:100%; object-fit:cover; object-position:center 14%; }
.about-corner-tag { position:absolute; display:flex; justify-content:space-between; align-items:center; gap:24px; left:-25px; bottom:38px; background:var(--pine); color:white; padding:17px 21px; min-width:200px; font-size:10px; font-weight:800; letter-spacing:1.6px; border-radius:5px; box-shadow:0 14px 24px rgba(1,42,40,.15); }
.about-corner-tag span { font-size:18px; font-weight:400; }
.about-copy h2 { max-width:600px; }
.about-divider { height:1px; background:#dce9e6; width:100%; margin:27px 0 24px; }
.about-copy p { font-size:14px; margin:0 0 15px; line-height:1.88; }
.about-copy .about-large { font-size:16px; color:#344d4d; }
.about-copy strong { color:#163f3e; }
.text-link { display:inline-flex; align-items:center; gap:32px; border-bottom:1px solid var(--teal); padding:8px 0 10px; margin-top:12px; color:var(--teal); font-size:13px; font-weight:800; }
.text-link span { font-size:19px; }
.agency-row { border-top:1px solid var(--line); margin-top:36px; padding-top:22px; display:flex; align-items:center; gap:20px; }
.agency-logo-holder { background:#f3f7f5; display:grid; place-items:center; height:77px; width:95px; flex-shrink:0; border:1px solid #e6eeeb; border-radius:7px; }
.agency-logo-holder img { width:82px; height:69px; object-fit:contain; }
.agency-row > span:last-child { display:flex; flex-direction:column; gap:5px; }
.agency-row small { font-size:10px; color:var(--teal); font-weight:800; letter-spacing:1.4px; }
.agency-row strong { font:700 16px var(--display); }

/* SERVICES */
.services-section { background:#f6fbfa; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:60px; margin-bottom:41px; }
.section-head > div { max-width:690px; }
.section-head h2 { margin-bottom:0; }
.section-head > p { max-width:340px; font-size:13px; margin:0 0 5px; }
.services-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }
.service-card { display:flex; flex-direction:column; background:white; padding:24px 22px 27px; border:1px solid #e5eeeb; border-radius:11px; min-height:380px; transition:transform .25s, box-shadow .25s, border-color .25s; }
.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:#b5d9d3; }
.service-number { color:#9fb7b4; display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:700; }
.service-number > span { font-size:18px; }
.service-icon { display:grid; place-items:center; background:#eaf8f4; color:var(--teal); border-radius:15px; width:68px; height:68px; margin:25px 0 20px; }
.service-icon svg { width:38px; height:38px; }
.service-card h3 { font:800 19px var(--display); margin:0 0 2px; letter-spacing:-.7px; }
.service-subtitle { font-size:11px !important; color:var(--teal) !important; margin:0 0 14px !important; font-weight:800; }
.service-card p:not(.service-subtitle) { font-size:12.5px; line-height:1.72; margin:0 0 18px; }
.service-card a { font-size:11.5px; font-weight:800; color:var(--teal); display:inline-flex; align-items:center; gap:14px; margin-top:auto; }
.service-card a span { font-size:17px; }
.services-section .service-disclaimer { color:#7c9290; font-size:11px; line-height:1.7; margin:20px 0 0; }

/* PROCESS */
.process-section { background:var(--pine); color:white; position:relative; overflow:hidden; }
.process-section::after { content:""; position:absolute; width:600px; height:600px; border:1px solid rgba(255,255,255,.08); border-radius:50%; right:-380px; top:-260px; pointer-events:none; }
.process-heading { max-width:740px; }
.kicker-light { color:#8fe1d8; }
.process-section h2 { max-width:710px; }
.process-section h2 .serif-em { color:#a5e9df; }
.process-section p { color:#b4d4d1; font-size:14px; }
.process-heading p { margin-top:16px; }
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:45px; margin-top:58px; }
.step { border-top:1px solid rgba(255,255,255,.22); padding-top:23px; position:relative; }
.step-count { color:#85cfc6; letter-spacing:1px; font-size:12px; font-weight:800; }
.step-mark { position:absolute; top:20px; right:10px; color:#c3eee9; font-size:21px; }
.step h3 { margin:23px 0 10px; font:700 19px var(--display); }
.step p { line-height:1.75; max-width:305px; margin:0; font-size:13px; }

/* FAQ */
.faq-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:95px; }
.faq-intro p { font-size:13px; max-width:335px; }
.faq-list { border-top:1px solid #dbe8e5; }
.faq-list details { border-bottom:1px solid #dbe8e5; padding:18px 0; }
.faq-list summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; font:700 14px/1.65 var(--display); }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-plus { color:var(--teal); border:1px solid #c9dfdb; width:29px; height:29px; flex-shrink:0; display:grid; place-items:center; font-size:21px; line-height:1; border-radius:50%; transition:transform .2s; font-family:var(--sans); font-weight:400; }
.faq-list details[open] .faq-plus { transform:rotate(45deg); }
.faq-list details p { margin:13px 46px 2px 0; font-size:13px; line-height:1.75; }

/* CONTACT */
.contact-section { background:linear-gradient(125deg,#e7f7f3 0%,#f3fbf9 57%,#e9f7f4 100%); padding:105px 0 112px; }
.contact-grid { display:grid; grid-template-columns:1fr .92fr; align-items:center; gap:100px; }
.contact-copy h2 { margin-top:23px; }
.contact-copy > p { font-size:14px; line-height:1.85; color:var(--ink-soft); max-width:465px; margin:24px 0 30px; }
.contact-phone { display:flex; align-items:center; gap:14px; width:max-content; max-width:100%; padding:12px 17px 12px 12px; background:white; border:1px solid #d5e9e4; border-radius:11px; box-shadow:0 8px 25px rgba(2,62,59,.07); }
.contact-phone-icon { width:45px; height:45px; border-radius:9px; background:var(--pine); color:white; display:grid; place-items:center; }
.contact-phone > span:nth-child(2) { display:flex; flex-direction:column; gap:3px; }
.contact-phone small { letter-spacing:1px; font-size:9px; font-weight:800; color:#78918d; }
.contact-phone strong { font:800 17px var(--display); }
.contact-phone > span:last-child { font-size:19px; margin-left:10px; color:var(--teal); }
.social-area { margin-top:35px; }
.social-caption { font-size:10px; letter-spacing:1.2px; font-weight:800; color:#647e7c; }
.social-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:13px; }
.social-btn { background:white; color:var(--pine); border:1px solid #bcdcd5; border-radius:5px; padding:10px 13px; font-weight:800; font-size:11px; display:flex; gap:10px; }
.social-btn:hover { border-color:var(--teal); }
.social-placeholder { margin:13px 0 0; color:#5d807b; font-size:12px; }
.social-placeholder small { display:block; font-size:10px; color:#879f9b; margin-top:4px; }
.enquiry-card { background:white; border:1px solid #e3eeeb; border-radius:16px; padding:35px 36px; box-shadow:0 24px 60px rgba(9,63,59,.08); }
.enquiry-card-header { display:flex; align-items:center; gap:14px; }
.enquiry-card-header > span { background:#e3f5f0; color:var(--teal); border-radius:11px; width:52px; height:52px; display:grid; place-items:center; font-size:24px; }
.enquiry-card-header > div { display:flex; flex-direction:column; gap:4px; }
.enquiry-card-header small { color:var(--teal); font-size:9px; font-weight:800; letter-spacing:1.2px; }
.enquiry-card-header h3 { font:800 21px var(--display); margin:0; letter-spacing:-.6px; }
.enquiry-card > p { color:#68807e; font-size:12px; line-height:1.75; margin:17px 0 25px; }
.field { margin-bottom:18px; }
.field label { display:block; color:#203d3b; font-size:12px; font-weight:800; margin-bottom:8px; }
.field label span:not(.optional) { color:var(--teal); }
.optional { font-weight:400; color:#94a6a2; }
.field input, .field select, .field textarea { display:block; width:100%; border:1px solid #d6e5e1; border-radius:7px; background:#fbfdfc; padding:13px 14px; outline:none; color:#203d3b; font-size:13px; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px #c7ece6; }
.field textarea { resize:vertical; min-height:84px; }
.field input::placeholder,.field textarea::placeholder { color:#9aafaa; }
.form-submit { width:100%; justify-content:space-between; border:0; padding:17px 19px; }
.enquiry-card .form-privacy { font-size:10px; text-align:center; color:#8fa5a0; margin:12px 0 0; line-height:1.6; }

/* FOOTER */
.footer { background:#0a2526; color:#e0f0ed; }
.footer-main { padding:65px 0 45px; display:grid; grid-template-columns:2fr .75fr .95fr; gap:55px; }
.footer .brand-monogram { color:white; }
.footer .brand-info { border-color:#416261; }
.footer .brand-info strong { color:white; }
.footer .brand-info small { color:#90ada7; }
.footer-identity p { color:#91aaa7; font-size:12px; max-width:300px; line-height:1.75; margin-top:21px; }
.footer-menu { display:flex; flex-direction:column; align-items:flex-start; gap:12px; font-size:12px; }
.footer-menu > span { color:#78d0c6; font-size:10px; letter-spacing:1.3px; font-weight:800; margin-bottom:7px; }
.footer-menu a { color:#c7d9d6; }
.footer-menu a:hover { color:white; }
.footer-menu p { margin:0; color:#9eb7b3; }
.footer-notice { border-top:1px solid #244447; padding:20px 0 22px; }
.footer-notice p { color:#89a7a1; font-size:10.5px; line-height:1.7; max-width:1050px; margin:0; }
.footer-bottom { display:flex; justify-content:space-between; gap:15px; border-top:1px solid #244447; padding:22px 0 27px; color:#779894; font-size:10.5px; }
.footer-bottom a { color:#c0dad5; }
.mobile-whatsapp { position:fixed; right:20px; bottom:20px; z-index:30; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:#087e73; color:white; box-shadow:0 8px 28px rgba(1,48,44,.3); border:3px solid rgba(255,255,255,.94); transition:transform .2s; }
.mobile-whatsapp:hover { transform:translateY(-4px); }

@media (max-width:1100px) {
  .main-nav { gap:21px; }
  .hero-grid { gap:17px; }
  .hero h1 { font-size:clamp(39px,4.65vw,56px); }
  .hero-photo-panel { height:470px; }
  .about-grid { gap:65px; }
  .contact-grid { gap:60px; }
  .service-card { padding:20px 18px 24px; }
}
@media (max-width:900px) {
  .container { width:min(100% - 40px,760px); }
  .nav-wrap { min-height:72px; }
  .menu-toggle { display:grid; place-items:center; }
  .main-nav { display:none; position:absolute; top:72px; left:0; right:0; z-index:5; padding:20px; background:white; box-shadow:0 15px 30px rgba(0,0,0,.06); border-top:1px solid #e8efed; flex-direction:column; align-items:stretch; gap:0; }
  .main-nav.open { display:flex; }
  .main-nav > a:not(.nav-cta) { padding:13px 8px; }
  .main-nav .nav-cta { margin-top:8px; justify-content:space-between; }
  .hero-grid { grid-template-columns:1.05fr .95fr; gap:10px; min-height:560px; }
  .hero h1 { font-size:43px; letter-spacing:-2.8px; }
  .hero-lead { font-size:13px; }
  .hero-visual { padding-left:8px; }
  .hero-photo-panel { height:420px; }
  .hero-name-card { left:-8px; bottom:55px; }
  .hero-bottom { padding-top:5px; }
  .intro-band-inner { flex-direction:column; justify-content:center; padding:22px 0; gap:14px; }
  .about-grid { gap:40px; }
  .about-picture-frame { height:440px; }
  .services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .service-card { min-height:350px; }
  .section-head { align-items:start; gap:25px; }
  .faq-grid { gap:35px; }
  .contact-grid { gap:30px; }
  .enquiry-card { padding:25px 22px; }
}
@media (max-width:650px) {
  html { scroll-padding-top:68px; }
  .container { width:calc(100% - 36px); }
  .section { padding:72px 0; }
  .section h2, .contact-copy h2 { font-size:clamp(30px,8.2vw,41px); letter-spacing:-1.6px; }
  .brand-monogram { font-size:31px; }
  .brand-info strong { font-size:9.5px; }
  .brand-info small { font-size:9px; }
  .hero { min-height:unset; }
  .hero-grid { display:flex; flex-direction:column; align-items:stretch; gap:0; padding-top:13px; }
  .hero-copy { padding:37px 0 10px; }
  .eyebrow { font-size:9.2px; letter-spacing:1.1px; }
  .hero h1 { font-size:clamp(39px,10.8vw,51px); letter-spacing:-2.7px; line-height:1.13; margin:21px 0 17px; max-width:540px; }
  .hero-lead { font-size:13.7px; line-height:1.79; margin-bottom:25px; }
  .hero-actions { gap:8px; }
  .btn { padding:14px 15px; font-size:11.5px; gap:10px; }
  .hero-actions .btn-primary { flex:1; }
  .hero-actions .btn-outline { flex:1; }
  .hero-promise { margin-top:20px; font-size:11px; }
  .hero-visual { padding:28px 18px 15px 18px; justify-content:center; }
  .hero-photo-panel { max-width:340px; height:380px; border-radius:190px 190px 12px 12px; }
  .hero-portrait { bottom:-11%; }
  .hero-name-card { bottom:31px; left:1px; min-width:195px; padding:13px 15px; }
  .hero-name-card strong { font-size:13px; }
  .name-line { font-size:8px; }
  .hero-bottom { padding:5px 0 20px; }
  .hero-bottom > span { font-size:8px; letter-spacing:.5px; }
  .hero-bottom > a { display:none; }
  .intro-band-lead { font-size:12px; }
  .intro-band-features { gap:11px; font-size:10px; }
  .about-grid, .faq-grid, .contact-grid { grid-template-columns:1fr; gap:34px; }
  .about-picture { width:calc(100% - 20px); max-width:380px; margin-left:10px; }
  .about-picture-frame { height:410px; border-radius:10px 160px 10px 10px; }
  .about-corner-tag { left:-10px; bottom:22px; }
  .about-copy h2 { margin-top:15px; }
  .about-copy .about-large { font-size:15px; }
  .about-copy p { font-size:13px; }
  .section-head { display:block; margin-bottom:30px; }
  .section-head > p { max-width:550px; margin-top:19px; }
  .services-grid { gap:10px; }
  .service-card { min-height:360px; padding:18px 15px 19px; }
  .service-icon { width:55px; height:55px; margin:21px 0 16px; }
  .service-icon svg { width:31px; height:31px; }
  .service-card h3 { font-size:16px; }
  .service-subtitle { font-size:10px !important; }
  .service-card p:not(.service-subtitle) { font-size:11.3px; }
  .service-card a { font-size:10.5px; }
  .process-heading p { font-size:13px; }
  .steps-grid { grid-template-columns:1fr; gap:25px; margin-top:38px; }
  .step { padding-top:15px; }
  .step h3 { margin:13px 0 6px; }
  .step p { max-width:480px; }
  .faq-grid { gap:25px; }
  .contact-section { padding:75px 0; }
  .contact-copy > p { font-size:13px; margin:20px 0 23px; }
  .enquiry-card { padding:26px 20px; }
  .footer-main { grid-template-columns:1fr 1fr; padding:48px 0 30px; gap:29px 15px; }
  .footer-identity { grid-column:1/-1; }
  .footer-bottom { flex-direction:column; padding-bottom:90px; }
}
@media (max-width:520px) {
  .services-grid { grid-template-columns:1fr; }
  .service-card { min-height:290px; padding:22px; }
  .service-card h3 { font-size:19px; }
  .service-card p:not(.service-subtitle) { font-size:13px; }
  .service-card a { font-size:12px; }
}
@media (max-width:380px) {
  .brand-info { gap:2px; }
  .brand-info strong { letter-spacing:1px; font-size:9px; }
  .brand-info small { font-size:8px; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .service-card { min-height:300px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}


/* ==========================================================
   2026 CLIENT UPDATE — DEEP NAVY / TURQUOISE REFERENCE
   Reference-inspired dotted navy / teal background.
   Proses Mudah and Soalan Lazim sections removed from HTML.
   ========================================================== */
:root { --pine:#064f58; --deep:#08293b; --teal:#087f87; --mint:#30c3bb; }
.site-header { background:rgba(6,27,44,.97); border-bottom:1px solid rgba(142,226,221,.16); }
.site-header .brand-monogram, .site-header .brand-info strong { color:#fff; }
.site-header .brand-info { border-left-color:rgba(198,237,235,.28); }
.site-header .brand-info small { color:#b8cccf; }
.site-header .main-nav > a:not(.nav-cta) { color:#d8e7ea; }
.site-header .main-nav > a:hover { color:#6ae1d6; }
.site-header .menu-toggle { color:#efffff; }
.site-header .nav-cta { background:linear-gradient(135deg,#079e9a,#0b756f); border:1px solid rgba(160,255,246,.24); box-shadow:0 7px 22px rgba(0,0,0,.18); }
.hero, .contact-section { isolation:isolate; position:relative; background:radial-gradient(ellipse at 80% 55%,rgba(0,126,132,.57),transparent 52%),radial-gradient(ellipse at 2% 90%,rgba(7,87,108,.48),transparent 55%),linear-gradient(130deg,#071c31 0%,#073043 53%,#07575f 100%); }
.hero::before, .contact-section::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:-1; background-image:radial-gradient(circle,rgba(187,228,230,.25) 1px,transparent 1.7px); background-size:28px 28px; background-position:7px 7px; opacity:.55; -webkit-mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.6)); mask-image:linear-gradient(to bottom,#000,rgba(0,0,0,.6)); }
.hero::after,.contact-section::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 45%,transparent 25%,rgba(5,22,36,.22) 100%); }
.hero .eyebrow { color:#9fece1; }
.hero h1 { color:#fff; }
.hero h1 em { color:#60e0d0; }
.hero-lead { color:#c2dadd; }
.hero-promise { color:#bbd8dc; }
.hero-promise .promise-symbol { color:#6be9d9; }
.hero-bottom-rule { background:rgba(154,220,221,.45); }
.hero-bottom > span,.hero-bottom > a { color:#b4d5d8; }
.hero .btn-outline { color:#f1ffff; background:rgba(255,255,255,.07); border-color:rgba(207,245,245,.35); backdrop-filter:blur(7px); }
.hero .btn-outline:hover { background:rgba(255,255,255,.15); }
.hero-whatsapp,.contact-phone,.form-submit { background:linear-gradient(115deg,#0bb7a8,#07827d); color:#fff; box-shadow:0 15px 35px rgba(0,13,25,.22); border:1px solid rgba(198,255,250,.35); }
.hero-whatsapp:hover,.contact-phone:hover,.form-submit:hover { background:linear-gradient(115deg,#20cabb,#0b918d); transform:translateY(-3px); box-shadow:0 20px 40px rgba(0,15,22,.25); }
.wa-mark { width:21px; height:21px; flex-shrink:0; }
.hero-photo-panel { background:linear-gradient(135deg,#b0d8d6,#7ababb); border:5px solid rgba(222,255,250,.62); box-shadow:0 30px 70px rgba(0,8,17,.31); }
.hero-arc { border-color:rgba(255,255,255,.42); }
.hero-name-card { border:1px solid rgba(255,255,255,.7); }
.intro-band { background:#082b3a; }
.contact-section .section-kicker { color:#89e6dc; }
.contact-copy h2 { color:#fff; }
.contact-copy h2 .serif-em { color:#75e0d4; }
.contact-copy > p { color:#bed9de; }
.contact-phone { padding:13px 17px 13px 12px; border-radius:17px; gap:15px; min-width:min(100%,340px); transition:transform .2s,box-shadow .2s,background .2s; }
.contact-phone-icon { background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); border-radius:12px; width:49px; height:49px; }
.contact-phone small { color:#ccf4f1; }
.contact-phone strong { font-size:17px; color:white; }
.contact-phone-number { font-size:11px; color:#d7f3ef; }
.contact-phone > span:last-child { color:white; }
.contact-arrow { margin-left:auto!important; background:rgba(255,255,255,.17); width:32px; height:32px; border-radius:50%; display:grid; place-items:center; }
.social-area { margin-top:38px; }
.social-caption { color:#9de1dc; }
.social-actions { gap:11px; margin-top:15px; }
.social-btn { min-width:125px; display:inline-flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 15px; border:1px solid rgba(204,247,246,.25); border-radius:13px; color:#fff; background:rgba(255,255,255,.09); box-shadow:0 8px 22px rgba(0,10,20,.08); font-size:12px; transition:background .2s,transform .2s,border-color .2s; }
.social-btn:hover { transform:translateY(-3px); background:rgba(35,191,183,.3); border-color:#8cebe2; }
.social-btn svg { width:20px; height:20px; flex-shrink:0; }
.social-arrow { color:#87e4db; font-size:17px; }
.social-placeholder { color:#d0e6e7; }
.enquiry-card { background:rgba(255,255,255,.98); box-shadow:0 27px 72px rgba(0,12,25,.28); border:1px solid rgba(255,255,255,.77); border-radius:22px; }
.form-submit { border:0; border-radius:12px; }
.mobile-whatsapp { background:linear-gradient(145deg,#13b9a9,#058079); }
@media(max-width:900px) { .site-header .main-nav { background:#092b3d; } }
@media(max-width:650px) {
 .hero::before,.contact-section::before { background-size:23px 23px; opacity:.38; }
 .hero-photo-panel { border-width:4px; }
 .hero .hero-whatsapp { min-width:0; }
 .contact-phone { width:100%; }
 .social-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
 .social-btn { min-width:0; padding:12px 9px; gap:5px; font-size:10px; flex-wrap:wrap; justify-content:center; }
 .social-btn svg { width:19px; height:19px; }
 .social-arrow { display:none; }
}

/* OCT 2026 REFINEMENTS — photo clear, compact contact, icon buttons */
.hero-photo-panel { background:#b4d9d7; }
.hero-photo-panel::before, .hero-arc { display:none; }
.hero-portrait {
  inset:0;
  width:100%;
  height:100%;
  max-width:100%;
  object-fit:cover;
  object-position:center 28%;
  mix-blend-mode:normal;
  filter:none;
  opacity:1;
}
.hero-photo-panel::after { content:none; }
.contact-grid { display:flex; flex-direction:column; align-items:center; gap:22px; max-width:680px; }
.contact-heading { margin:0; font:800 clamp(27px,4vw,40px)/1.25 var(--display); letter-spacing:-1.3px; text-align:center; color:#fff; }
.contact-heading span { color:#83e6d8; }
.contact-grid .enquiry-card { width:100%; }
.contact-grid .social-area { width:100%; margin-top:6px; text-align:center; }
.contact-grid .social-actions { display:flex; justify-content:center; align-items:center; gap:13px; margin-top:14px; }
.social-btn:not([hidden]) { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:144px; padding:13px 20px; border-radius:999px; border:1px solid rgba(173,249,239,.32); background:rgba(255,255,255,.12); color:white; font-size:13px; font-weight:700; box-shadow:0 7px 22px rgba(0,10,18,.16); transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
.social-btn:not([hidden]):hover { background:rgba(28,196,179,.3); transform:translateY(-3px); box-shadow:0 13px 26px rgba(0,10,18,.25); }
.social-btn svg { width:22px; height:22px; flex:none; }
.social-btn .social-arrow { display:none; }
.social-btn[hidden] { display:none !important; }
.form-submit { display:flex; justify-content:center; align-items:center; gap:12px; }
.form-submit > span { margin-left:auto; }
@media(max-width:650px) {
 .contact-grid { max-width:100%; gap:18px; }
 .contact-heading { font-size:28px; }
 .contact-grid .social-actions { display:flex; flex-wrap:wrap; }
 .social-btn:not([hidden]) { min-width:0; padding:12px 15px; font-size:12px; }
 .hero-portrait { object-position:center 25%; }
}


/* NOV 2026 — USER-REQUESTED REFINEMENTS (append-only overrides) */
.brand-agency-logo {
  display:block; width:54px; height:54px; object-fit:contain; padding:5px;
  background:#f4f8f6; border:1px solid rgba(255,255,255,.5);
  border-radius:13px; box-shadow:0 5px 15px rgba(0,0,0,.13);
}
.site-header .brand-info { padding-left:12px; }
.footer .brand-agency-logo { width:52px; height:52px; }
.hero-actions { gap:0; }
/* Four restrained service accent palettes */
.service-card { position:relative; overflow:hidden; border-width:1px; border-top-width:4px; }
.service-card.service-medical { --accent:#098a8e; --accent-bg:#e5f7f7; --accent-border:#8dcfce; background:linear-gradient(155deg,#f0fbfa 0%,#fff 65%); border-top-color:var(--accent); }
.service-card.service-hibah { --accent:#bb7890; --accent-bg:#fff0f4; --accent-border:#e9bbc9; background:linear-gradient(155deg,#fff4f7 0%,#fff 65%); border-top-color:var(--accent); }
.service-card.service-critical { --accent:#c18438; --accent-bg:#fff5e6; --accent-border:#ebd0a6; background:linear-gradient(155deg,#fffaed 0%,#fff 65%); border-top-color:var(--accent); }
.service-card.service-investment { --accent:#7461b5; --accent-bg:#f2eeff; --accent-border:#d2c6f2; background:linear-gradient(155deg,#f6f4ff 0%,#fff 65%); border-top-color:var(--accent); }
.service-card .service-icon { background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent-border); }
.service-card .service-number { color:var(--accent); }
.service-card a { color:var(--accent); }
.service-card:hover { border-color:var(--accent-border); border-top-color:var(--accent); box-shadow:0 18px 34px rgba(8,37,48,.12); }
/* Social apps live in About, not Contact */
.about-copy .social-area { width:100%; margin:24px 0 26px; text-align:left; }
.about-copy .social-caption { color:#306c6a; font-size:10px; font-weight:800; letter-spacing:1.3px; }
.about-copy .social-actions { margin-top:12px; display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-start; }
.about-copy .social-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-width:0; padding:12px 15px; background:#fff; border:1px solid #cbdedb;
  border-radius:12px; color:#173b42; box-shadow:0 7px 17px rgba(7,55,61,.07);
  font-size:12px; font-weight:800; transition:transform .2s,box-shadow .2s,border-color .2s; }
.about-copy .social-btn:hover { background:#eefaf7; border-color:#4bb9b2; color:#064c4b; transform:translateY(-3px); box-shadow:0 12px 23px rgba(7,55,61,.12); }
.about-copy .social-btn svg { width:20px; height:20px; }
.about-copy .social-btn .social-arrow { display:none; }
/* More focused centered contact card */
.contact-section { padding:92px 0 100px; }
.contact-grid { width:min(720px,calc(100% - 40px)); max-width:720px; gap:27px; }
.contact-heading { font-size:clamp(30px,4.5vw,45px); letter-spacing:-1.9px; }
.enquiry-card { padding:40px 43px; border-radius:25px; }
.enquiry-card-header { gap:15px; align-items:center; }
.enquiry-card-header .enquiry-icon { width:48px; height:48px; display:grid; place-items:center; background:#e3f7f3; border-radius:14px; color:#048b83; font-size:24px; flex-shrink:0; }
.enquiry-card-header small { display:block; font-size:10px; color:#0a8b85; margin-bottom:5px; }
.enquiry-card-header h3 { font:800 clamp(17px,2.6vw,23px)/1.35 var(--display); letter-spacing:-.7px; color:#102d33; }
.enquiry-card .enquiry-subline { margin:17px 0 27px; font-size:13px; color:#5c7879; line-height:1.7; }
.enquiry-card .field { margin-bottom:19px; }
.enquiry-card .field label { font-size:12px; }
.enquiry-card .field input,.enquiry-card .field select,.enquiry-card .field textarea { background:#f8fcfb; padding:14px 15px; border-radius:12px; font-size:14px; }
.form-submit { width:max-content; max-width:100%; margin:24px auto 0; padding:15px 27px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:10px; white-space:normal; text-align:center; }
.form-submit > span { margin-left:0; }
.enquiry-card .form-note { text-align:center; font-size:11px; margin:13px 0 0; line-height:1.65; color:#79908d; }
@media (max-width:650px) {
 .brand-agency-logo { width:44px; height:44px; padding:4px; border-radius:10px; }
 .site-header .brand-info strong { font-size:9px; }
 .site-header .brand-info small { font-size:9px; }
 .about-copy .social-actions { gap:8px; }
 .about-copy .social-btn { padding:11px 13px; font-size:11px; }
 .contact-section { padding:70px 0 78px; }
 .enquiry-card { padding:26px 20px; }
 .form-submit { width:auto; max-width:100%; padding:14px 20px; font-size:12px; }
}