/* Beranda /new dan halaman layanannya memakai tampilan terang. */
:root { color-scheme: only light; }
.hub-intro { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-block:clamp(20px,3.2vw,46px) 18px; }
.hub-intro p,.service-kicker { font-weight:750; font-size:.69rem; letter-spacing:.12em; text-transform:uppercase; color:#51646a; margin:0 0 5px; }
.hub-intro h1 { font-size:clamp(28px,3.2vw,48px); letter-spacing:-.048em; line-height:1.05; color:var(--navy); }
.slider-stage { position:relative; }
.slider-controls { position:absolute; inset:0; z-index:2; pointer-events:none; }
.slider-controls button { position:absolute; top:calc((100% - 63px)/2); transform:translateY(-50%); display:grid; place-items:center; border:1px solid #102d4b38; border-radius:50%; background:#fffffff2; color:#102d4b; width:44px; height:44px; font:500 34px/1 system-ui,sans-serif; box-shadow:0 2px 12px #102d4b24; pointer-events:auto; }
.slider-controls [data-previous] { left:0; }
.slider-controls [data-next] { right:0; }
.slider-controls button:hover { background:#ffcc3e; }
.slider-pagination { display:flex; align-items:center; justify-content:center; gap:8px; padding-top:3px; }
.service-choices { display:flex; gap:2px; }
.service-choices button { position:relative; width:44px; height:44px; padding:0; border:0; background:transparent; border-radius:6px; }
.service-choices button::before,.service-choices button::after { content:""; position:absolute; left:6px; right:6px; top:20px; height:4px; border-radius:3px; background:#9daab4; }
.service-choices button[aria-pressed=true]::before { background:#102d4b; }
.service-choices button::after { display:none; background:#8b650d; transform-origin:left; }
.service-choices button[aria-pressed=true]::after { display:block; animation:slide-progress 7s linear; }
.service-carousel:is(:hover,[data-paused=true],[data-dormant=true]) [data-choice]::after,.service-carousel:has(.service-track:focus-within) [data-choice]::after { animation-play-state:paused; }
.slider-play { width:44px; height:44px; background:transparent; border:0; color:#102d4b; border-radius:50%; font-size:18px; }
.slider-play:hover { background:#e8ecdf; }
@keyframes slide-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.service-carousel { margin-bottom:clamp(36px,5vw,68px); }
.service-track { position:relative; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-x:contain; border:1px solid #d2d8cc; border-radius:15px; background:#fffefa; }
.service-track::-webkit-scrollbar { display:none; }
.service-slide { min-width:0; flex:0 0 100%; scroll-snap-align:start; scroll-snap-stop:always; }
.service-slide > a { display:block; text-decoration:none; color:#102d4b; background:#fffefa; }
.service-slide > a:focus-visible { outline-offset:-5px; }
.poster-frame,.photo-frame { width:100%; aspect-ratio:2; overflow:hidden; position:relative; }
.poster-frame { display:block; background:#f6f2e5; }
.poster-frame img { width:100%; height:100%; object-fit:contain; }
.photo-frame { display:grid; grid-template-columns:46% 54%; align-items:stretch; background:repeating-linear-gradient(46deg,transparent 0 90px,#ffffff09 91px 93px,transparent 95px 172px),repeating-linear-gradient(-46deg,transparent 0 90px,#ffffff07 91px 93px,transparent 95px 172px),linear-gradient(155deg,#24718f,#10547a); }
.photo-frame > .scene { grid-column:2; grid-row:1; width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:var(--focal,center); }
.slide-logo { position:absolute; top:4%; right:2.6%; width:6.4%; height:auto; z-index:1; filter:drop-shadow(0 1px 3px #fff8); }
.photo-copy { grid-column:1; grid-row:1; align-self:center; padding:18px clamp(24px,4.3vw,66px); color:#102d4b; z-index:1; }
.photo-copy .service-kicker { color:white; }
.photo-copy h2 { color:white; text-shadow:0 2px 2px #155576; font-size:clamp(29px,4.2vw,62px); letter-spacing:-.04em; line-height:1.03; margin:8px 0 14px; }
.photo-copy p:last-child { display:inline-block; background:#fff; border-radius:8px; padding:8px 13px; font-size:clamp(16px,1.4vw,21px); line-height:1.35; max-width:29ch; margin:0; color:#124a69; font-weight:650; }
.photo-frame.center { --focal:0% 52%; }
.photo-frame.assess { --stock:#e7efe1; --focal:62% 48%; }
.slide-foot { min-height:63px; padding:9px clamp(14px,2.2vw,30px); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.slide-foot small { color:#526168; font-size:.81rem; line-height:1.35; }
.slide-open { font-size:.8rem; font-weight:650; color:#174965; }
.area-title { margin-block:25px 10px; }
.slide-cta,.hub-link { display:inline-flex; align-items:center; gap:8px; font-weight:720; }
.slide-cta { flex:none; padding:7px 13px; border-radius:7px; color:#102d4b; background:#ffcc3e; font-size:.85rem; }
.service-slide>a:hover .slide-cta { background:#f3bd27; }
.plain-services { display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; }
.hub-breadcrumb { margin-block:19px 0; font-size:.82rem; color:#516575; }
.hub-breadcrumb a,.hub-link { text-decoration:underline; text-underline-offset:4px; }
.hub-summary { padding:clamp(33px,5vw,65px) 0; border-block:1px solid #d4d9cc; }
.hub-summary .studio-shell,.assessment-lead { display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,6vw,85px); align-items:center; }
.hub-summary h2,.assessment-lead h1 { color:#102d4b; font-size:clamp(30px,3.5vw,55px); line-height:1.06; letter-spacing:-.05em; }
.hub-summary p,.assessment-lead p { margin-top:10px; max-width:58ch; }
.hub-summary .hub-link { margin-top:10px; }
.hub-photo-local { width:100%; height:auto; border-radius:10px; }
.assessment-lead { margin-block:32px 40px; }
.assessment-lead img { width:100%; border-radius:12px; }
.assessment-options-local { margin-block:28px 55px; }
.assessment-options-local .studio-shell { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.assessment-option { padding:24px 0; border-top:3px solid #e7be40; }
.assessment-option h2 { font-size:clamp(23px,2.5vw,36px); margin:5px 0 9px; }
.assessment-option p { max-width:47ch; margin-bottom:10px; }
.assessment-questions { padding-bottom:45px; }
.assessment-questions details { padding:11px 0; border-bottom:1px solid #d4d9cc; }
.assessment-questions summary { font-weight:650; }
.assessment-questions p { margin:8px 0 0; }
/* Satu navigasi dan pasangan warna untuk seluruh halaman layanan. */
.studio-page .site-header .brand small { font-size:10px; letter-spacing:.07em; }
.studio-page .site-header .brand { font-size:18px; }
.studio-page .site-menu { gap:5px; font-size:14px; }
.studio-page .site-menu>a:not(.button) { position:relative; border-radius:0; background:transparent; box-shadow:none; }
.studio-page .site-menu>a:not(.button)::after { content:""; position:absolute; inset:auto 10px 5px; height:2px; background:#ad8426; transform:scaleX(0); transform-origin:left; transition:transform .18s ease; }
.studio-page .site-menu>a:is([aria-current=page],:hover) { color:#102d4b; background:transparent; }
.studio-page .site-menu>a:is([aria-current=page],:hover)::after { transform:scaleX(1); }
.studio-page .site-menu>a[aria-current=page] { font-weight:750; }
.assessment-poster { background:#327fa0; }
.hub-breadcrumb { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.hub-breadcrumb a { min-height:44px; display:inline-flex; align-items:center; }
.studio-page .testimonials { color:var(--ink); }
.studio-page .testimonials .eyebrow,.studio-page .testimonials .section-top>p a { color:#765310; }
.studio-page .testimonials .section-top>p,.studio-page .testimonials .attribution { color:var(--muted); }
.studio-page .testimonials .story-feature { color:#fff; }
.studio-page .testimonials .story-feature .eyebrow { color:#ffdb74; }
.studio-page .testimonials .story-more { border-color:#adbcc8; }
.studio-page .testimonials .more-stories a { color:#174965; border-color:#aabac6; }
.stories-index { margin-top:28px; }
.stories-lead { margin-block:32px 42px; max-width:1240px; }
.stories-lead h1 { max-width:24ch; margin:10px 0 18px; }
.stories-lead>p:last-child { color:var(--muted); max-width:65ch; }
.story-more>h3 { padding-block:22px 8px; }
.testimonial-count { color:#526168; padding-block:15px; border-top:1px solid #d4d9cc; margin-bottom:18px; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 26px; align-items:start; }
.testimonial-grid--landscape { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:36px; }
.testimonial-player { border-radius:12px; overflow:hidden; background:#e9eeea; }
.testimonial-player video { display:block; width:100%; height:auto; }
.testimonial-caption { padding:16px 2px 0; }
.testimonial-caption .service-kicker { color:#657065; font-size:.65rem; }
.testimonial-caption h3 { margin:4px 0; font-size:1.22rem; letter-spacing:-.025em; }
.testimonial-caption>p:not(.service-kicker) { color:#526168; font-size:.85rem; }
.testimonial-caption details { margin-top:8px; border:0; background:transparent; padding:0; }
.testimonial-caption summary { color:#174965; min-height:44px; padding-block:10px; font-size:.88rem; font-weight:650; }
.testimonial-caption blockquote { font-size:.95rem; padding:0 0 0 14px; border-left:2px solid #c5a453; margin:10px 0; color:#102d4b; }
.testimonial-caption details p { color:#526168; font-size:.9rem; }
.testimonial-context { margin-top:40px; padding-top:20px; border-top:1px solid #d4d9cc; color:#526168; font-size:.82rem; max-width:88ch; }
.full-testimonials { padding-bottom:50px; }
.full-testimonials .more-stories a { color:#174965; border-color:#aabac6; }
.video-error { font-size:.85rem; padding:12px; background:#fff1d6; color:#6e4b18; }
@media(min-width:701px) and (max-width:1000px) { .testimonial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:1100px) { .studio-page .site-menu>a:not(.button) { width:fit-content; min-width:44px; } }
.assessment-questions h2 { margin-bottom:18px; }
.studio-page .assessment-questions summary { padding-block:8px; min-height:44px; }
.studio-page [id] { scroll-margin-top:110px; }
/* Keep tablet and phone arrows in the gutter; the button hit area remains 44px. */
@media(max-width:1000px){.slider-controls button{background:transparent;border:0;box-shadow:none;font-size:28px;outline-offset:1px}.slider-controls button::before{content:"";position:absolute;inset:12px;border:1px solid #102d4b38;border-radius:50%;background:#fffffff2;box-shadow:0 2px 8px #102d4b24}.slider-controls button:hover{background:transparent}.slider-controls button:hover::before{background:#ffcc3e}.slider-controls button>span{position:relative}.slider-controls [data-previous]{left:-16px}.slider-controls [data-next]{right:-16px}.slider-controls [data-previous]::before{left:4px;right:20px}.slider-controls [data-next]::before{left:20px;right:4px}.slider-controls [data-previous]>span{transform:translateX(-8px)}.slider-controls [data-next]>span{transform:translateX(8px)}}
@media(max-width:700px){
  .hub-intro{margin:22px 0 13px; align-items:center;} .hub-intro h1{font-size:clamp(24px,6.4vw,36px)}
  .hub-intro p{font-size:.65rem}.slider-controls button{top:calc((100% - 52px)/2)}
  .poster-frame,.photo-frame{aspect-ratio:1.25}.photo-frame{grid-template-columns:100%;grid-template-rows:51% 49%;}
  .testimonial-grid { grid-template-columns:1fr; gap:30px; } .testimonial-player { max-width:430px; margin-inline:auto; } .testimonial-card { min-width:0; } .testimonial-caption { max-width:430px; margin-inline:auto; } .testimonial-grid--landscape { margin-top:30px; }
  .photo-frame>.scene{grid-row:1;grid-column:1}.photo-copy{grid-row:2;grid-column:1;padding:10px 18px;}.slide-logo{width:11%;top:3%;right:4%}
  .photo-copy h2{font-size:clamp(25px,7vw,39px);margin:3px 0 5px}.photo-copy p:last-child{font-size:clamp(13px,3.4vw,17px);line-height:1.32;max-width:52ch}
  .service-kicker{font-size:.56rem;margin:0}.slide-foot{padding:8px 10px;min-height:52px}.slide-foot small{font-size:.7rem;max-width:24ch}.slide-open{font-size:.7rem;line-height:1.2}
  .slide-cta{font-size:.74rem;padding:7px 9px;gap:4px}
  .hub-summary .studio-shell,.assessment-lead,.assessment-options-local .studio-shell{grid-template-columns:1fr;gap:12px}.assessment-lead{margin:22px auto}.assessment-lead img{max-height:255px;object-fit:cover}
  .assessment-options-local{margin-block:20px 30px}.assessment-option{padding-block:16px}.hub-breadcrumb{margin-top:11px}
}
@media(prefers-reduced-motion:reduce){html,.service-track{scroll-behavior:auto}.service-choices button::after{display:none!important}.slider-play{display:none}}

/* Artikel memakai navigasi dan palet landing yang sama. */
.article-index,.article-reader{padding-bottom:64px}
.article-heading{max-width:860px;padding:38px 0 42px}
.article-heading h1{font:normal clamp(36px,5.2vw,70px)/1.08 Georgia,serif;letter-spacing:-.045em;margin:14px 0 20px;color:#102d4b}
.article-heading>p:not(.service-kicker){max-width:65ch;color:#526577;font-size:clamp(17px,1.5vw,21px);line-height:1.65}
.article-heading small{font-size:12px;color:#596b7c}
.article-teaser{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:30px 0;border-top:1px solid #cdd3ce}
.article-picture{display:block;background:#edf0e2;overflow:hidden;border-radius:5px}
.article-picture img{width:100%;height:auto;aspect-ratio:1.5;object-fit:contain;display:block}
.article-category{color:#526577;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.article-teaser h2{font:normal clamp(26px,3vw,42px)/1.14 Georgia,serif;letter-spacing:-.025em;margin:12px 0 18px}
.article-teaser h2 a{color:#102d4b;text-decoration:none}
.article-teaser h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.article-teaser>div>p:not(.article-category){color:#526577;font-size:16px;line-height:1.7;max-width:55ch}
.article-more{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.article-more .article-teaser{display:block}
.article-more .article-picture{margin-bottom:22px}
.article-more h2{font-size:30px}
.article-cover{margin:0 0 42px;max-width:900px}
.article-cover img{display:block;width:100%;max-height:470px;object-fit:contain;background:#edf0e2;border-radius:5px}
.article-cover figcaption{font-size:12px;color:#526577;margin-top:10px}
.article-reading{display:grid;grid-template-columns:230px minmax(0,690px);gap:clamp(30px,5vw,90px)}
.article-reading aside nav{position:sticky;top:125px;border-top:1px solid #af8c25;padding-top:15px}
.article-reading aside p{font-weight:700;color:#102d4b;font-size:14px}
.article-reading ol{list-style:none;padding:0;margin:0}
.article-reading li{margin:10px 0}
.article-reading aside a{display:block;font-size:14px;line-height:1.5;color:#526577;padding:5px 0;text-decoration:none}
.article-reading aside a:hover{color:#102d4b;text-decoration:underline}
.article-prose{font-size:18px;line-height:1.85;color:#253e52;min-width:0}
.article-prose section{scroll-margin-top:130px}
.article-prose h2,.article-related h2{font:normal clamp(26px,3vw,36px)/1.22 Georgia,serif;color:#102d4b;margin:0 0 20px;letter-spacing:-.025em}
.article-prose section+section{margin-top:46px}
.article-prose p{margin:0 0 22px}
.article-prose h3{font:650 21px/1.45 var(--sans);color:#102d4b;margin:30px 0 12px}
.privacy-prose{max-width:76ch;margin-inline:auto}.privacy-prose section{padding-top:12px}
.article-prose ol{padding-left:24px}.article-table{overflow-x:auto;margin:26px 0;border-block:1px solid #cdd3ce}
.article-table table{width:100%;border-collapse:collapse;font-size:16px}.article-table caption{text-align:left;padding:14px 0;font-weight:650}
.article-table th,.article-table td{text-align:left;padding:14px 16px;border-bottom:1px solid #dfe3dd;vertical-align:top}.article-table thead{background:#edf0e2;color:#102d4b}
.area-guide .article-cover{max-width:900px}.area-guide .article-cover img{aspect-ratio:16/9;object-fit:cover}
.online-content .fineprint .faq-guide{font-size:16px;margin-top:26px;line-height:1.8}

/* WhatsApp contact actions use the existing licensed mark and readable green. */
.studio-page a.wa-contact,.online-content a.wa-contact{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;max-width:100%;padding:12px 20px;background:#087c3d;color:#fff;border:1px solid #087c3d;border-radius:8px;font-family:inherit;font-weight:700;font-size:16px;line-height:1.4;text-decoration:none;text-align:center;box-shadow:none}
.studio-page a.wa-contact:hover,.online-content a.wa-contact:hover{background:#066532;border-color:#066532;color:#fff;text-decoration:none}
.studio-page a.wa-contact:focus-visible{outline:3px solid #aa8011;outline-offset:4px}
.wa-contact .wa-mark{width:24px;height:24px;flex:0 0 24px;fill:currentColor}
.online-content .launch-offer{margin:30px 0 24px;padding:26px 0;border-top:2px solid #c2a34e;border-bottom:1px solid #ced9c8;color:#102d4b}
.online-content .launch-offer .offer-label{font-family:inherit;font-weight:700;font-size:12px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;color:#346347}
.online-content .launch-offer h4{font-size:clamp(24px,3.6vw,34px);line-height:1.2;margin:12px 0 14px;letter-spacing:-.025em}
.online-content .launch-offer h4 em{font-style:normal;color:#346347}
.online-content .launch-offer dl{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}
.online-content .launch-offer dt{font-size:14px;line-height:1.5}
.online-content .launch-offer dd{margin:6px 0 0;display:flex;flex-direction:column}
.online-content .launch-offer dd span{font-size:14px;color:#54677a}
.online-content .launch-offer dd strong{font-size:52px;line-height:1.1;letter-spacing:-.04em;color:#346347}
.online-content .offer-terms{font-size:14px;line-height:1.7;color:#54677a;max-width:70ch;margin-top:16px}
.article-prose blockquote{margin:28px 0;padding:18px 24px;border-left:2px solid #ac8521;background:#edf0e2;font:italic 25px/1.45 Georgia,serif;color:#102d4b}
.article-prose ul{padding-left:22px}.article-prose li{margin-bottom:12px}
.article-prose .article-next{border-top:1px solid #cdd3ce;margin-top:38px;padding-top:24px}
.article-related{border-top:1px solid #cdd3ce;margin-top:58px;padding-top:30px;max-width:1010px}
.article-related>a{display:block;color:#102d4b;padding:12px 0;text-underline-offset:5px;line-height:1.5}
@media(max-width:900px){.article-reading{grid-template-columns:minmax(0,1fr)}.article-reading aside nav{position:static}.article-heading{padding-top:20px}.article-teaser{gap:24px}.article-more{gap:24px}}
@media(max-width:600px){.article-teaser,.article-more{grid-template-columns:1fr}.article-heading{padding-bottom:24px}.article-heading h1{font-size:39px}.article-teaser{gap:16px}.article-more .article-teaser{padding-top:25px}.article-reading{gap:28px}.article-cover{margin-bottom:28px}.article-prose{font-size:17px}.article-prose blockquote{padding:16px;font-size:23px}.article-prose section{scroll-margin-top:95px}}