/* Shared UX polish for Gaet demo templates. Loaded after each template's own design system. */
:root{
  --demo-bar-h:54px;
  --demo-ink:#17130f;
  --demo-paper:#fffdf8;
  --demo-accent:#e94f24;
  --demo-focus:#a93412;
}
html{scroll-padding-top:calc(var(--demo-bar-h) + 88px)}
body.demo-polished{padding-top:var(--demo-bar-h);text-rendering:optimizeLegibility}
body.demo-polished .nav{top:var(--demo-bar-h)!important}
body.demo-polished .overlay{top:var(--demo-bar-h)!important}
.demo-skip{position:fixed;left:14px;top:8px;z-index:96;transform:translateY(-160%);padding:10px 14px;border-radius:10px;background:var(--demo-paper);color:var(--demo-ink);font:700 13px/1.2 ui-sans-serif,system-ui;box-shadow:0 8px 30px rgba(23,19,15,.22);transition:transform .18s ease}
.demo-skip:focus{transform:none}
.demo-preview-bar{position:fixed;inset:0 0 auto;z-index:90;height:var(--demo-bar-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px clamp(14px,3vw,34px);background:rgba(23,19,15,.96);color:#fff;border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);font:600 13px/1.2 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.demo-preview-bar__left,.demo-preview-bar__actions{display:flex;align-items:center;gap:10px}
.demo-preview-bar__brand{font-weight:850;letter-spacing:-.03em}.demo-preview-bar__brand i{color:#ff6a3d;font-style:normal}
.demo-preview-bar__label{color:rgba(255,255,255,.62);font-weight:500}
.demo-preview-bar a{display:inline-flex;min-height:40px;align-items:center;justify-content:center;gap:7px;border-radius:999px;padding:0 15px;color:#fff;text-decoration:none;white-space:nowrap;transition:transform .18s ease,background .18s ease,color .18s ease}
.demo-preview-bar a:hover{transform:translateY(-1px)}
.demo-preview-bar__back{background:rgba(255,255,255,.08)}.demo-preview-bar__back:hover{background:rgba(255,255,255,.15)}
.demo-preview-bar__choose{background:var(--demo-accent);font-weight:800}.demo-preview-bar__choose:hover{background:#ff6436}
.demo-preview-bar svg{width:15px;height:15px;flex:none}
.demo-embed body,.demo-embed body.demo-polished{padding-top:0}.demo-embed .demo-preview-bar,.demo-embed .demo-skip{display:none!important}.demo-embed body .nav{top:0!important}.demo-embed body .overlay{top:0!important}
.demo-polished h1,.demo-polished h2,.demo-polished h3{text-wrap:balance}.demo-polished p{text-wrap:pretty}
.demo-polished :is(a,button,input,select,textarea,summary){-webkit-tap-highlight-color:transparent}
.demo-polished :is(a,button,summary){touch-action:manipulation}
.demo-polished :is(a,button,summary):active{transform:translateY(1px)}
.demo-polished :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--demo-focus)!important;outline-offset:3px!important}
.demo-polished :is(input,select,textarea){min-height:48px}
.demo-polished textarea{min-height:112px}
.demo-polished summary{min-height:52px}
.demo-polished img{max-width:100%}
.demo-polished .fab{bottom:max(18px,env(safe-area-inset-bottom))!important}
.uni-gal{position:relative;overflow:hidden;padding:clamp(64px,9vw,112px) 0!important;background:var(--surface,var(--bg,#f7f4ee));border-block:1px solid var(--line-soft,var(--line,rgba(20,20,20,.1)))}
.uni-gal::before{content:"";position:absolute;width:34rem;height:34rem;right:-18rem;top:-18rem;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent,var(--primary,#e94f24)) 14%,transparent),transparent 68%);pointer-events:none}
.uni-gal .sec-head{position:relative;max-width:760px;margin:0 0 clamp(28px,4vw,46px)!important;text-align:left!important}
.uni-gal .sec-head h2 {max-width: 36ch}.uni-gal .sec-head p{max-width:62ch}
.uni-gal .gal-grid{position:relative;display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-auto-rows:clamp(112px,14vw,190px);gap:clamp(10px,1.4vw,18px)!important;margin-top:0!important}
.uni-gal .gal-shot{position:relative;overflow:hidden;margin:0;min-width:0;border-radius:var(--r-card,var(--radius,18px));background:var(--surface-2,rgba(127,127,127,.12));border:1px solid var(--line-soft,var(--line,rgba(20,20,20,.1)));box-shadow:0 18px 54px -38px rgba(25,20,15,.45)}
.uni-gal .gal-shot:nth-child(1){grid-column:span 6;grid-row:span 2}.uni-gal .gal-shot:nth-child(2){grid-column:span 3}.uni-gal .gal-shot:nth-child(3){grid-column:span 3}.uni-gal .gal-shot:nth-child(4){grid-column:span 3}.uni-gal .gal-shot:nth-child(5){grid-column:span 3}
.uni-gal .gal-shot img,.uni-gal .gal-grid>img{width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover!important;border:0!important;border-radius:inherit!important;transition:transform .65s cubic-bezier(.16,1,.3,1),filter .3s ease}
.uni-gal .gal-shot:hover img{transform:scale(1.035)}
.uni-gal figcaption{position:absolute;inset:auto 10px 10px;padding:9px 11px;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(15,15,15,.64);color:#fff;font:650 12px/1.25 ui-sans-serif,system-ui;backdrop-filter:blur(12px);transform:translateY(4px);opacity:.92;transition:transform .2s ease,opacity .2s ease}
.uni-gal .gal-shot:hover figcaption{transform:none;opacity:1}
.uni-gal .gal-grid>img{grid-column:span 3;min-height:180px}.uni-gal .gal-grid>img:first-child{grid-column:span 6;grid-row:span 2}
@media(max-width:760px){
  :root{--demo-bar-h:58px}
  .demo-preview-bar{gap:8px;padding-inline:10px}.demo-preview-bar__label{display:none}.demo-preview-bar__actions{gap:6px}.demo-preview-bar a{min-height:42px;padding-inline:12px;font-size:12px}
  .uni-gal .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:clamp(150px,48vw,230px)}
  .uni-gal .gal-shot,.uni-gal .gal-shot:nth-child(n),.uni-gal .gal-grid>img{grid-column:span 1;grid-row:span 1}
  .uni-gal .gal-shot:first-child,.uni-gal .gal-grid>img:first-child{grid-column:1/-1;grid-row:span 1}
}
@media(max-width:430px){
  .demo-preview-bar__brand{font-size:12px}.demo-preview-bar__back{padding-inline:10px!important}.demo-preview-bar__back span{display:none}
  .uni-gal .gal-grid{grid-template-columns:1fr!important}.uni-gal .gal-shot,.uni-gal .gal-shot:nth-child(n),.uni-gal .gal-grid>img{grid-column:1!important}
}
@media(prefers-reduced-motion:reduce){
  .demo-polished *, .demo-polished *::before,.demo-polished *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
/* Universal content contract: three services + three testimonials */
.uni-services,.uni-testi{position:relative;padding:clamp(64px,9vw,112px) 0;background:var(--surface,var(--bg,var(--paper,#fffdf8)));color:var(--ink,#17130f)}
.uni-services{border-block:1px solid var(--line-soft,var(--line,rgba(20,20,20,.1)))}
.uni-testi{background:color-mix(in srgb,var(--surface,var(--bg,var(--paper,#fffdf8))) 92%,var(--demo-gallery-accent,var(--accent,var(--primary,#e94f24))) 8%)}
.uni-section-head{max-width:760px;margin-bottom:clamp(30px,5vw,54px);text-align:left}
.uni-section-head h2{max-width: 100%;font-size:clamp(32px,5vw,58px);line-height:1.03;margin-top:14px}
.uni-section-head p{max-width:62ch;margin-top:16px;color:var(--muted,inherit)}
.uni-service-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
.uni-service{grid-column:span 3;position:relative;min-height:100%;padding:clamp(24px,3vw,38px);border-radius:var(--r-lg,var(--radius,20px));background:var(--surface-2,var(--surface,rgba(127,127,127,.08)));border:1px solid var(--line-soft,var(--line,rgba(20,20,20,.1)));box-shadow:0 22px 58px -46px rgba(20,16,12,.6);overflow:hidden}
.uni-service:first-child{grid-column:span 6}
.uni-service__no{display:block;margin-bottom:clamp(34px,6vw,72px);font:800 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;color:var(--demo-gallery-accent,var(--accent,var(--primary,#e94f24)))}
.uni-service h3{font-size:clamp(22px,3vw,34px);line-height:1.05}.uni-service p{margin-top:14px;color:var(--muted,inherit);max-width:46ch}
.uni-service ul{display:flex;flex-wrap:wrap;gap:7px;list-style:none;padding:0;margin:24px 0 0}
.uni-service li{padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--demo-gallery-accent,var(--accent,var(--primary,#e94f24))) 10%,transparent);font-size:11px;font-weight:750;line-height:1.2}
.uni-testi-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
.uni-quote{grid-column:8/span 5;position:relative;margin:0;padding:clamp(24px,3vw,36px);border-radius:var(--r-lg,var(--radius,20px));background:var(--surface,var(--bg,#fff));border:1px solid var(--line-soft,var(--line,rgba(20,20,20,.1)));box-shadow:0 20px 64px -48px rgba(20,16,12,.65)}
.uni-quote--featured{grid-column:span 7;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;background:var(--demo-gallery-accent,var(--accent,var(--primary,#e94f24)));color:#fff;border-color:transparent}
.uni-quote blockquote{margin:0;font-size:clamp(17px,2vw,22px);font-weight:650;line-height:1.55;letter-spacing:-.015em}.uni-quote--featured blockquote{font-size:clamp(24px,3.3vw,42px);line-height:1.3}
.uni-quote figcaption{position:static;display:flex;align-items:center;gap:12px;margin-top:30px;padding:0;background:none;color:inherit;border:0;opacity:1;transform:none;backdrop-filter:none}
.uni-avatar{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,currentColor 10%,transparent);font:800 12px/1 ui-sans-serif,system-ui}
.uni-quote figcaption b,.uni-quote figcaption small{display:block}.uni-quote figcaption b{font-size:13px}.uni-quote figcaption small{margin-top:3px;font-size:11px;color:var(--muted,inherit)}.uni-quote--featured figcaption small{color:rgba(255,255,255,.72)}
body[data-demo-template="service-ac"],body[data-demo-template="service-ac-02"]{--demo-gallery-accent:#18b9d5;--demo-focus:#64dff2}
body[data-demo-template="service-ac"] :is(.uni-gal,.uni-services,.uni-testi),body[data-demo-template="service-ac-02"] :is(.uni-gal,.uni-services,.uni-testi){background:#081422;color:#eefbff}
body[data-demo-template="pest-control"]{--demo-gallery-accent:#c82020}body[data-demo-template="pest-control-02"]{--demo-gallery-accent:#d69a11;--demo-focus:#f6c453}
body[data-demo-template="kontraktor"]{--demo-gallery-accent:#d8a900}body[data-demo-template="kontraktor-02"]{--demo-gallery-accent:#d95718;--demo-focus:#ff9c66}
body[data-demo-template="sedot-wc"]{--demo-gallery-accent:#1668d4}body[data-demo-template="sedot-wc-02"]{--demo-gallery-accent:#d98d08;--demo-focus:#ffc65c}
body[data-demo-template="klinik-gigi"],body[data-demo-template="klinik-gigi-02"]{--demo-gallery-accent:#087eb2}
body[data-demo-template="klinik-kecantikan"],body[data-demo-template="klinik-kecantikan-02"]{--demo-gallery-accent:#855b78}
body[data-demo-template="notaris"],body[data-demo-template="notaris-02"]{--demo-gallery-accent:#8d6b2e}
body[data-demo-template="pindahan"],body[data-demo-template="pindahan-02"]{--demo-gallery-accent:#b94c12}
.uni-gal .gal-shot:nth-child(2) img{object-position:50% 18%}.uni-gal .gal-shot:nth-child(3) img{object-position:18% 50%;transform:scale(1.08)}.uni-gal .gal-shot:nth-child(4) img{object-position:82% 50%;transform:scale(1.12)}.uni-gal .gal-shot:nth-child(5) img{object-position:50% 82%;transform:scale(1.06)}
@media(max-width:820px){.uni-service,.uni-service:first-child{grid-column:span 6}.uni-quote,.uni-quote--featured{grid-column:1/-1;grid-row:auto}}
@media(max-width:540px){.uni-service,.uni-service:first-child{grid-column:1/-1}.uni-service__no{margin-bottom:28px}.uni-section-head h2{font-size:clamp(30px,10vw,42px)}}
/* Progressive enhancement, dark-mode contract fixes, and mobile safeguards */
html:not(.demo-js) .reveal{opacity:1!important;transform:none!important;filter:none!important}
body.demo-polished .uni-gal{padding:clamp(64px,9vw,112px) 0!important;background:var(--surface,var(--bg,var(--paper,#f7f4ee)))!important;color:var(--ink,#17130f)}
body[data-demo-template="service-ac"] .uni-gal,body[data-demo-template="service-ac-02"] .uni-gal{background:#081422!important;color:#eefbff}
body[data-demo-template="pest-control-02"] .uni-gal,body[data-demo-template="kontraktor-02"] .uni-gal,body[data-demo-template="sedot-wc-02"] .uni-gal{color:#f5f7fb}
body[data-demo-template="klinik-gigi-02"]{--line-coral:rgba(244,63,94,.2);--line-mint:rgba(16,185,129,.2);--clay-sky:0 8px 20px rgba(14,165,233,.13);--clay-coral:0 8px 20px rgba(244,63,94,.12);--clay-mint:0 8px 20px rgba(16,185,129,.12)}
body[data-demo-template="klinik-gigi-02"] .hl-sky{color:var(--sky-deep)}body[data-demo-template="klinik-gigi-02"] .hl-coral{color:var(--coral-deep)}
body[data-demo-template="sedot-wc-02"] .hero :is(h1,.lead,.hero-stats,.hero-stats b,.hero-stats span){color:#fff!important}
body.demo-polished .sticky-act{bottom:max(16px,env(safe-area-inset-bottom))!important;right:max(16px,env(safe-area-inset-right))!important}
body.demo-polished :is(.hero-cta,.final-cta,.fcta) .btn{white-space:normal;text-align:center}
@media(max-width:480px){body.demo-polished footer :is(.foot-grid,.footer-grid){grid-template-columns:1fr!important}body.demo-polished :is(.hero-trust,.trust-row){flex-wrap:wrap!important;gap:12px!important}}
body[data-demo-template="service-ac"] .hero :is(h1,.lead,.hero-trust,.hero-trust b,.hero-trust span),body[data-demo-template="service-ac-02"] .hero :is(h1,.lead,.hero-trust,.hero-trust b,.hero-trust span){color:#f2fbff!important}
@media(max-width:560px){
  body.demo-polished :is(.hero-grid,.hero-copy,.hero-text,.hero-content){min-width:0!important;max-width:100%!important}
  body.demo-polished :is(.hero-cta,.final-cta,.fcta){display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important}
  body.demo-polished :is(.hero-cta,.final-cta,.fcta) .btn{width:100%!important;max-width:100%!important;justify-content:center!important}
  body.demo-polished :is(.hero-stats,.hero-trust,.trust-row,.hero-pills,.hero-metrics){display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:8px!important}
  body.demo-polished :is(.hero-stats,.hero-trust,.trust-row,.hero-pills,.hero-metrics)>*{min-width:0!important;max-width:100%!important}
}
@media(max-width:430px){
  .demo-preview-bar__choose{font-size:0!important;padding-inline:12px!important}
  .demo-preview-bar__choose::before{content:"Pilih";font-size:12px}.demo-preview-bar__choose svg{display:none}
}
/* Foundation rollout: keeps navigation usable in compact demo templates without imposing a shared brand. */
.demo-preview-bar__brand{display:inline-flex;align-items:center;gap:5px}.demo-preview-bar__brand svg{width:12px;height:18px;color:#ff6a3d}
body.demo-polished header{min-width:0}body.demo-polished .nav{min-width:0}body.demo-polished .nav a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:760px){body.demo-polished header{gap:8px}body.demo-polished .nav{flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap;gap:4px 10px}body.demo-polished .nav a{padding-inline:5px}}
/* Gaet universal design contract: golden-ratio rhythm, controlled copy wrapping, and card affordances. */
:root{--gaet-phi:1.618;--gaet-space-1:.5rem;--gaet-space-2:.8125rem;--gaet-space-3:1.3125rem;--gaet-space-4:2.125rem;--gaet-space-5:3.4375rem;--gaet-space-6:5.5625rem;--gaet-space-7:8.9375rem}
.demo-polished :is(h1,h2,h3){text-wrap:balance!important;overflow-wrap:normal;max-width:min(100%,42ch)}
.demo-polished h1{max-width:min(100%,34ch)}.demo-polished :is(p,.hero-lead,.hero-desc,.hero-subheadline,.subheadline,.subtitle,.section-copy,.sec-desc){text-wrap:pretty;overflow-wrap:break-word}
.demo-polished :is(.uni-gal,.uni-services,.uni-testi){padding-block:clamp(var(--gaet-space-6),7vw,var(--gaet-space-7))!important}
.demo-polished :is(.uni-service-grid,.uni-testi-grid,.uni-gal .gal-grid){gap:var(--gaet-space-3)!important}
.demo-polished :is(.uni-service,.uni-quote,.service,.feature,.benefit,.step,.diagnostic-item,.cycle-step,.trust-item,.pkg-card,.work-card,.archive-card){padding:var(--gaet-space-4)}
.demo-polished .gaet-card-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:var(--gaet-space-3);border:1px solid color-mix(in srgb,currentColor 24%,transparent);border-radius:13px;color:var(--demo-gallery-accent,var(--accent,var(--demo-focus,#e94f24)));background:color-mix(in srgb,currentColor 10%,transparent)}
.demo-polished .gaet-card-icon svg{width:22px;height:22px}.demo-polished [data-gaet-copy-warning]{outline:2px dashed #c94b18;outline-offset:4px}.demo-polished [data-gaet-contrast="adjusted"]{text-shadow:none}
@media(max-width:560px){.demo-polished :is(h1,h2){max-width:100%}.demo-polished :is(.uni-service,.uni-quote,.service,.feature,.benefit,.step,.diagnostic-item,.cycle-step,.trust-item,.pkg-card,.work-card,.archive-card){padding:var(--gaet-space-3)}}