/* Legalindo.id — Design System v4
   White + blue + gold. Deep blue navy from the logo pillar (#0D2A54), a
   brighter working blue (#1552A0) for links and accent text, and a real
   gold-yellow (#F2B417) from the logo monogram for highlights, buttons and
   emphasis. Backgrounds are white and a cool blue tint instead of cream, so
   nothing reads washed out. Gold is used as a surface, never as text on
   white (1.9:1); accent text uses blue or deep amber, both AA or better. */
:root{
  --t1:#1552A0;--t2:#1B63BF;--t3:#8A6100;--tbg:#F4F7FB;--tdk:#0D2A54;
  --gold:#F2B417;--gold-dk:#8A6100;--gold-lt:#FFD25E;--lm:#FFF1CC;
  --tx:#12233F;--tx2:#4A5A75;--bd:#DDE6F2;--of:#FFFFFF;
  --grad:linear-gradient(120deg,#0B2143 0%,#0D2A54 55%,#1552A0 100%);
  --sh:0 4px 20px rgba(13,42,84,.08);--sh2:0 18px 50px rgba(13,42,84,.18);--r:16px;
  --maxw:1180px;
}
*{box-sizing:border-box}
/* Skip link: off-screen until a keyboard user focuses it */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--tdk);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--tx);background:var(--of);line-height:1.65;font-size:16px;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--tdk);line-height:1.18;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:800}
h3{font-size:1.22rem;font-weight:700}
p{margin:0 0 1em;color:var(--tx2)}
a{color:var(--t2);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative}
section{padding:76px 0;position:relative}
.section-alt{background:var(--tbg)}
.section-dark{background:var(--tdk);color:#cbd3e0}
.section-dark h2{color:#fff}
.section-dark p{color:#aab4c8}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--gold-dk);font-weight:800;letter-spacing:.06em;font-size:.8rem;margin-bottom:.8em;text-transform:uppercase}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--gold);border-radius:2px;display:inline-block}
.btn{display:inline-flex;align-items:center;gap:8px;padding:15px 30px;border-radius:999px;font-weight:800;font-size:.95rem;cursor:pointer;border:2px solid transparent;transition:.2s}
.btn-primary{background:var(--gold);color:var(--tdk);box-shadow:0 10px 24px rgba(242,180,23,.42)}
.btn-primary:hover{filter:brightness(1.04);transform:translateY(-2px)}
.btn-outline{border-color:var(--tdk);color:var(--tdk)}
.btn-outline:hover{background:var(--tdk);color:#fff}
.btn-dark{background:var(--tdk);color:#fff}
.btn-dark:hover{background:#000}
.btn-sm{padding:10px 20px;font-size:.85rem}

/* Decorative shapes (inline SVG data-uri patterns / pseudo-elements) */
.shape-dots{position:absolute;width:120px;height:90px;background-image:radial-gradient(var(--gold) 2px, transparent 2.5px);background-size:14px 14px;opacity:.55;pointer-events:none}
.shape-blob{position:absolute;border-radius:50%;background:var(--gold);opacity:.14;pointer-events:none;filter:blur(1px)}
.shape-ring{position:absolute;border:3px solid var(--gold);border-radius:50%;opacity:.5;pointer-events:none}
.shape-tri{position:absolute;width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:22px solid var(--tdk);opacity:.25;pointer-events:none}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--maxw);margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.3rem;color:var(--tdk)}
.brand img{height:40px;width:auto}
nav.main-nav{display:flex;align-items:center;gap:26px}
nav.main-nav a{color:var(--tdk);font-weight:700;font-size:.94rem}
nav.main-nav a:hover{color:var(--gold-dk)}
.has-dropdown{position:relative}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;border-radius:12px;box-shadow:var(--sh2);padding:10px;min-width:260px;border:1px solid var(--bd)}
.has-dropdown:hover .dropdown{display:block}
.dropdown{min-width:300px}
.dropdown a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-weight:600;font-size:.9rem;color:var(--tdk);transition:background .18s ease,transform .18s ease}
.dropdown a:hover{background:var(--tbg);transform:translateX(3px)}
.dd-ico{width:30px;height:30px;border-radius:8px;background:var(--lm);display:flex;align-items:center;justify-content:center;flex:none}
.dd-ico svg{width:16px;height:16px;stroke:var(--gold-dk);fill:none;stroke-width:1.9}
@media (max-width:900px){.dd-ico{display:none}.dropdown a{padding-left:0}}
.lang-switch{display:flex;gap:6px;font-size:.8rem;font-weight:800}
.lang-switch a{padding:4px 9px;border-radius:6px;color:var(--tx2)}
.lang-switch a.active,.lang-switch a:hover{background:var(--tdk);color:#fff}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--tdk)}
.header-cta{display:flex;align-items:center;gap:18px}
.trust-strip{background:var(--tdk);color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.02em;text-align:center;padding:8px 16px}
.trust-strip span{color:var(--gold)}

@media (max-width:900px){
  nav.main-nav{position:fixed;inset:64px 0 0 0;background:#fff;flex-direction:column;align-items:flex-start;padding:24px;gap:6px;display:none;overflow-y:auto}
  nav.main-nav.open{display:flex}
  nav.main-nav a{width:100%;padding:12px 0;border-bottom:1px solid var(--bd)}
  .dropdown{position:static;box-shadow:none;border:none;display:block;padding:0 0 0 14px}
  .has-dropdown:hover .dropdown{display:block}
  .nav-toggle{display:block}
  .header-cta .btn-primary{display:none}
}

/* Hero */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.hero{background:var(--tdk);padding:88px 0 110px;position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 92%,0 100%)}
.hero::before{content:"";position:absolute;top:-60px;right:-60px;width:340px;height:340px;background:var(--gold);opacity:.15;border-radius:50%}
.hero::after{content:"";position:absolute;bottom:-40px;left:10%;width:180px;height:180px;background:var(--gold);opacity:.1;border-radius:50%}
.hero h1,.hero p,.hero .eyebrow{color:#fff}
.hero .eyebrow{color:var(--gold)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:.4em}
.hero h1 mark{background:var(--gold);color:var(--tdk);padding:0 .15em;border-radius:6px;font-style:normal;box-decoration-break:clone}
.hero .lead{font-size:1.15rem;max-width:52ch;color:#c3cbdc}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.6em}
.hero-badge{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px 18px;display:inline-flex;gap:8px;align-items:center;font-size:.85rem;font-weight:700;color:var(--lm)}
/* Hero visual: one centered, evenly spaced stack — badge, emblem, claim,
   stats, promise. Nothing absolutely positioned, so nothing collides. */
.hero-orbit{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:8px 0;text-align:center}
.orbit-glow{position:absolute;top:32%;left:50%;width:360px;height:360px;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--gold) 0%,transparent 68%);opacity:.26;filter:blur(46px);z-index:0;pointer-events:none}
.orbit-core{position:relative;z-index:1;max-width:380px}
.orbit-emblem{position:relative;width:120px;height:120px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center}
.orbit-emblem::before,.orbit-emblem::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(242,180,23,.34)}
.orbit-emblem::before{inset:-14px}
.orbit-emblem::after{inset:-30px;border-color:rgba(242,180,23,.18)}
.orbit-icon{width:104px;height:104px;border-radius:30px;background:linear-gradient(150deg,var(--gold-lt) 0%,var(--gold) 100%);display:flex;align-items:center;justify-content:center;box-shadow:0 22px 44px rgba(242,180,23,.34);animation:orbit-pulse 3.6s ease-in-out infinite}
.orbit-icon svg{width:52px;height:52px;stroke:var(--tdk);fill:none;stroke-width:1.4}
@keyframes orbit-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.orbit-icon{animation:none}}
.orbit-core h3{color:#fff;margin-bottom:.4em;font-size:1.35rem;line-height:1.3}
.orbit-core p{color:#C6CFE0;font-size:.93rem;margin:0 auto;max-width:34ch}
.orbit-stats{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:460px}
.orbit-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:10px 18px;color:#fff;font-size:.82rem;font-weight:600;transition:transform .25s ease,background .25s ease,border-color .25s ease}
.orbit-pill:hover{transform:translateY(-3px);background:rgba(255,255,255,.13);border-color:rgba(242,180,23,.6)}
.orbit-pill svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.8;flex:none}
.orbit-pill b{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.05rem;color:var(--gold-lt);margin:0 1px}
.orbit-badge{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--tdk);font-size:.74rem;font-weight:800;padding:9px 16px;border-radius:999px;box-shadow:0 8px 22px rgba(13,42,84,.28)}
.orbit-badge svg{width:16px;height:16px;flex:none;stroke:var(--tdk);fill:none;stroke-width:1.8}
.orbit-badge.dark{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(242,180,23,.5);box-shadow:none}
.orbit-badge.dark svg{stroke:var(--gold)}
@media (max-width:900px){.hero-orbit{gap:20px;padding-top:34px}}

/* Icon badges (SVG icons, no emoji) */
.icon-badge{width:56px;height:56px;border-radius:16px;background:var(--tdk);display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex:none}
.icon-badge svg{width:26px;height:26px;stroke:var(--gold);fill:none}
.icon-badge.gold{background:var(--gold)}
.icon-badge.gold svg{stroke:var(--tdk)}
.icon-badge.sm{width:40px;height:40px;border-radius:11px;margin-bottom:0}
.icon-badge.sm svg{width:19px;height:19px}

/* Trusted client / project showcase strip */
.trust-clients{padding:34px 0 40px;background:#fff;border-bottom:1px solid var(--bd)}
.tc-label{text-align:center;font:700 13px/1.4 'Inter',sans-serif;letter-spacing:.03em;color:var(--tx2);text-transform:uppercase;max-width:640px;margin:0 auto 26px}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.proj-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.proj-grid{grid-template-columns:1fr}}
.proj-card{display:flex;align-items:center;gap:12px;background:var(--tbg);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;transition:transform .25s ease,box-shadow .25s ease}
.proj-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(13,42,84,.10)}
.proj-tag{display:block;font:700 11px/1.3 'Inter',sans-serif;color:var(--gold-dk);text-transform:uppercase;letter-spacing:.02em}
.proj-card h4{font:700 14.5px/1.35 'Inter',sans-serif;color:var(--tdk);margin-top:2px}
.proj-logo{width:48px;height:48px;border-radius:11px;background:#fff;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;padding:5px;flex:none;overflow:hidden}
.proj-logo img{max-width:100%;max-height:100%;object-fit:contain}

/* Cards & grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:28px;box-shadow:var(--sh);height:100%;transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.card.card-accent{background:var(--tdk);border-color:var(--tdk)}
.card.card-accent h3,.card.card-accent p{color:#fff}
.card.card-accent .icon-badge{background:var(--gold)}
.card.card-accent .icon-badge svg{stroke:var(--tdk)}
.service-card{display:flex;flex-direction:column;gap:8px}
.service-card a.more{font-weight:800;color:var(--t1);margin-top:auto}
.service-card a.more:hover{color:var(--gold-dk)}

/* Category tabs (services filter, legalyn-style) */
.cat-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 8px}
.cat-tab{padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--bd);font-weight:700;font-size:.85rem;color:var(--tx2)}
.cat-tab.is-active{background:var(--tdk);color:#fff;border-color:var(--tdk)}

/* Process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step;position:relative}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-top:8px}
.step .n{width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--tdk);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:14px;font-size:1.1rem}

/* Testimonials */
.testi{position:relative;background:#fff;border-radius:18px;border:1px solid var(--bd);padding:26px 26px 22px;box-shadow:var(--sh);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;display:flex;flex-direction:column}
.testi::after{content:"\201D";position:absolute;top:6px;right:20px;font:700 4.6rem/1 'Plus Jakarta Sans',serif;color:var(--gold);opacity:.16;pointer-events:none}
.testi:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(13,42,84,.12);border-color:var(--gold)}
.testi .stars{color:var(--gold);letter-spacing:2.5px;margin-bottom:10px;font-size:1rem}
.testi p{color:var(--tx);font-size:.95rem;line-height:1.65;flex:1}
.testi footer{margin-top:18px;padding-top:16px;border-top:1px solid var(--bd);display:flex;align-items:center;gap:11px}
.testi-avatar{width:42px;height:42px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font:800 14px/1 'Plus Jakarta Sans',sans-serif;box-shadow:0 4px 10px rgba(13,42,84,.18)}
.testi-who{font-weight:800;color:var(--tdk);font-size:.92rem;line-height:1.35}
.testi-who span{display:block;font-weight:500;color:var(--tx2);font-size:.8rem;margin-top:2px}

/* FAQ accordion */
.faq-item{border-bottom:1px solid var(--bd);padding:18px 0}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:800;color:var(--tdk);gap:16px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-item.open .faq-a{max-height:400px;margin-top:10px}
.faq-q .plus{transition:.25s;font-size:1.3rem;color:var(--gold-dk)}
.faq-item.open .plus{transform:rotate(45deg)}

/* Breadcrumb */
.breadcrumb{font-size:.85rem;color:var(--tx2);margin-bottom:14px}
.breadcrumb a{color:var(--t1);font-weight:700}

/* Compact inner-page hero (service/article pages) */
.page-hero{background:var(--tdk);padding:38px 0 50px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;top:-50px;right:-50px;width:240px;height:240px;background:var(--gold);opacity:.13;border-radius:50%}
.page-hero .breadcrumb{color:#93a0bd;position:relative;z-index:1}
.page-hero .breadcrumb a{color:var(--gold)}
.page-hero .eyebrow{color:var(--gold);position:relative;z-index:1}
.page-hero h1{color:#fff;margin:.25em 0 .3em;position:relative;z-index:1}
.page-hero .lead{color:#c3cbdc;max-width:66ch;position:relative;z-index:1;font-size:1.05rem}
.page-hero .icon-badge{position:relative;z-index:1;margin-bottom:16px}
.page-hero .byline{position:relative;z-index:1}
.page-hero .byline svg.icon{stroke:#c3cbdc}
.page-hero .tag{position:relative;z-index:1}

/* Article/Service page body */
.prose h2{margin-top:1.4em}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.4em;color:var(--tx2)}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.92rem}
.prose th,.prose td{border:1px solid var(--bd);padding:10px 12px;text-align:left}
.prose th{background:var(--tbg);color:var(--tdk)}
.byline{display:flex;gap:14px;align-items:center;color:var(--tx2);font-size:.88rem;margin-bottom:1.6em}
.tag{display:inline-block;background:var(--lm);color:var(--tdk);border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:800;margin-right:6px}

/* CTA band */
.cta-band{background:var(--grad);border-radius:24px;padding:52px;text-align:center;color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:-50px;right:-50px;width:220px;height:220px;background:var(--gold);opacity:.18;border-radius:50%}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.85)}

/* Footer */
footer.site{background:var(--tdk);color:#cbd3e0;padding:56px 0 24px;margin-top:40px}
footer.site .brand img{background:#fff;border-radius:9px;padding:5px;box-sizing:content-box}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
footer.site h4{color:var(--gold);font-family:'Inter';font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:16px}
footer.site a{color:#a9b3c7;display:block;padding:5px 0;font-size:.92rem}
footer.site a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:#8b96ab}

/* WhatsApp float */
.wa-float{position:fixed;bottom:24px;right:24px;background:#25D366;color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:60;animation:wa-pulse 2.4s infinite}
.wa-float svg{width:28px;height:28px;fill:#fff}
.wa-float:hover{transform:scale(1.07)}
@keyframes wa-pulse{0%{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 8px 24px rgba(0,0,0,.3),0 0 0 0 rgba(37,211,102,0)}}

/* Blog list */
.post-card{background:#fff;border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:.2s}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.post-card .body{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card .meta{font-size:.78rem;color:var(--gold-dk);font-weight:800;text-transform:uppercase;display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;line-height:1.5}
.post-card .pc-date{white-space:nowrap;color:var(--tx2);font-weight:700}
.post-card .pc-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tbg)}
.post-card .pc-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.post-card:hover .pc-img img{transform:scale(1.05)}
.post-card .pc-cat{display:inline-block;background:var(--lm);color:var(--gold-dk);padding:2px 8px;border-radius:999px;letter-spacing:.02em}
.post-card h3{font-size:1.06rem;line-height:1.35;margin:2px 0 0}
.post-card h3 a{color:var(--tdk);text-decoration:none}
.post-card h3 a:hover{color:var(--t2)}
.post-card p{color:var(--tx2);font-size:.93rem;margin:0}
.post-card .more{margin-top:auto;font-weight:800;color:var(--t2);text-decoration:none;font-size:.9rem}
.post-card .more:hover{text-decoration:underline}

/* Blog index: count line, category filter, pagination */
.art-count{margin-top:10px;font-size:.85rem;color:var(--gold-lt);font-weight:700;letter-spacing:.02em}
.cat-filter{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.cat-chip{border:1px solid var(--bd);background:#fff;color:var(--tx2);padding:8px 15px;border-radius:999px;
  font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;transition:.18s;line-height:1.2}
.cat-chip:hover{border-color:var(--t2);color:var(--t2)}
.cat-chip.is-on{background:var(--t1);border-color:var(--t1);color:#fff}
@media(max-width:760px){
  .cat-filter{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    margin:0 -18px;padding:2px 18px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 16px),transparent 100%)}
  .cat-filter::-webkit-scrollbar{display:none}
  .cat-chip{flex:0 0 auto}
}
.cat-empty{text-align:center;color:var(--tx2);padding:36px 0;margin:0}
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:44px}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  border-radius:10px;font-weight:800;font-size:.92rem;text-decoration:none}
.pg-num,.pg-arrow{border:1px solid var(--bd);background:#fff;color:var(--tx);transition:.18s}
.pg-num:hover,.pg-arrow:hover{border-color:var(--t2);color:var(--t2);background:var(--tbg)}
.pg-num.is-cur{background:var(--t1);border-color:var(--t1);color:#fff}
.pg-arrow.is-off{opacity:.35;pointer-events:none}
.pg-gap{color:var(--tx2);min-width:22px}
.pg-info{width:100%;text-align:center;color:var(--tx2);font-weight:600;font-size:.85rem;margin-top:10px;height:auto}

/* Article page: header photo and prev/next */
.article-hero{padding-bottom:34px}
.article-hero .byline{color:#c8d3e6}
.article-figure{margin:-34px 0 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh2);border:1px solid var(--bd);background:#fff}
.article-figure img{width:100%;height:auto;display:block;aspect-ratio:2/1;object-fit:cover}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.pn-item{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border:1px solid var(--bd);border-radius:var(--r);
  background:#fff;text-decoration:none;transition:.18s}
.pn-item:hover{border-color:var(--t2);box-shadow:var(--sh)}
.pn-item span{font-size:.78rem;font-weight:800;color:var(--gold-dk);text-transform:uppercase;letter-spacing:.03em}
.pn-item b{color:var(--tdk);font-size:.95rem;line-height:1.35}
.pn-next{text-align:right;align-items:flex-end}
@media(max-width:640px){.post-nav{grid-template-columns:1fr}.pn-next{text-align:left;align-items:flex-start}}

.skip-link{position:absolute;left:-999px;top:auto}
.skip-link:focus{left:12px;top:12px;background:#fff;padding:10px;z-index:100;border-radius:8px}

/* Inline utility icons (contact cards, byline) */
.card h3 svg.icon{width:20px;height:20px;stroke:var(--gold-dk);fill:none;stroke-width:1.8;vertical-align:-4px;margin-right:6px}
.byline svg.icon{width:16px;height:16px;stroke:var(--tx2);fill:none;stroke-width:1.8;vertical-align:-3px;margin-right:2px}

/* Google rating badge (real, verifiable rating — links out to the listing) */
.office-badge{display:inline-flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--bd);border-radius:999px;padding:10px 22px 10px 12px;box-shadow:var(--sh);margin:0 auto 26px;width:fit-content;max-width:100%;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.office-badge:hover{box-shadow:var(--sh2);transform:translateY(-2px);border-color:var(--gold)}
.ob-pin{width:38px;height:38px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;flex:none}
.ob-pin svg{width:19px;height:19px;stroke:var(--tdk);fill:none;stroke-width:1.9}
.ob-text{display:flex;flex-direction:column;line-height:1.3;text-align:left}
.ob-text b{font:800 14px/1.3 'Plus Jakarta Sans',sans-serif;color:var(--tdk)}
.ob-text span{font-size:12.5px;color:var(--tx2);font-weight:600}
.ob-note{font-size:12.5px;font-weight:700;color:var(--t1);border-left:1px solid var(--bd);padding-left:14px}
@media (max-width:700px){
  .office-badge{flex-direction:column;gap:8px;border-radius:20px;padding:16px 20px;text-align:center}
  .ob-text{align-items:center;text-align:center}
  .ob-note{border-left:none;border-top:1px solid var(--bd);padding:10px 0 0}
}

/* Auto-scrolling marquee rows for the client/project showcase */
.proj-marquee{overflow:hidden;position:relative;margin-bottom:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.proj-track{display:flex;gap:14px;width:max-content;animation:proj-scroll 40s linear infinite}
.proj-track.rev{animation-direction:reverse;animation-duration:46s}
.proj-marquee:hover .proj-track{animation-play-state:paused}
@keyframes proj-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.proj-card{flex:none;width:290px}

/* Promo popup modal */
.promo-popup{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.promo-popup.open{opacity:1;pointer-events:auto}
.promo-popup .popup-overlay{position:absolute;inset:0;background:rgba(13,42,84,.6);backdrop-filter:blur(2px)}
.promo-popup .popup-card{position:relative;background:#fff;border-radius:20px;max-width:400px;width:100%;max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:14px 28px 28px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35);transform:translateY(14px) scale(.97);transition:transform .25s;z-index:1}
.promo-popup.open .popup-card{transform:translateY(0) scale(1)}
.promo-popup .popup-close{position:sticky;top:0;margin:0 -14px 4px auto;display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:#fff;border:1px solid var(--bd);border-radius:50%;font-size:20px;line-height:1;color:var(--tdk);cursor:pointer;z-index:3;box-shadow:0 2px 8px rgba(13,42,84,.12)}
.promo-popup .popup-close:hover{background:var(--tbg)}
.promo-popup .popup-icon{width:56px;height:56px;border-radius:16px;background:var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.promo-popup .popup-icon svg{width:32px;height:32px;fill:var(--tdk);stroke:none}
.promo-popup h3{margin-bottom:.4em}
.promo-popup p{font-size:.9rem;line-height:1.55;margin-bottom:14px}
.promo-popup .popup-note{font-size:.76rem;color:var(--tx2);opacity:.75;margin-top:12px;margin-bottom:0}

/* ---------------------------------------------------------------------------
   Intent finder — visitors pick their situation and get the answer in place,
   with no form to fill in. */
.finder{background:var(--tbg);border-top:1px solid var(--bd);border-bottom:1px solid var(--bd)}
.find-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px}
@media (max-width:1024px){.find-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.find-grid{grid-template-columns:1fr}}
.find-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:#fff;border:1px solid var(--bd);border-radius:16px;padding:18px 18px 20px;cursor:pointer;font:inherit;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.find-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(13,42,84,.10);border-color:var(--gold)}
.find-card:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.find-card .icon-badge{margin-bottom:6px}
.find-card.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,180,23,.34)}
.find-card.active .icon-badge{background:var(--gold)}
.find-card.active .icon-badge svg{stroke:var(--tdk)}
.find-t{font:800 1rem/1.3 'Plus Jakarta Sans',sans-serif;color:var(--tdk)}
.find-s{font-size:.82rem;color:var(--tx2);line-height:1.45}
.find-result{margin-top:20px}
.find-panel{background:#fff;border:1px solid var(--bd);border-left:5px solid var(--gold);border-radius:18px;padding:28px;box-shadow:var(--sh);animation:find-in .35s ease}
@keyframes find-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.find-panel{animation:none}}
.find-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.find-head .icon-badge{margin-bottom:0}
.find-label{display:block;font:700 11px/1.3 'Inter',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-dk)}
.find-head h3{margin:2px 0 0;font-size:1.35rem}
.find-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:22px}
.find-fact{background:var(--lm);border-radius:12px;padding:14px 16px}
.find-fact span{display:block;font:700 11px/1.3 'Inter',sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--tx2);margin-bottom:4px}
.find-fact b{font-size:.95rem;color:var(--tdk);line-height:1.45}
.find-prep h4{font-size:1rem;margin-bottom:12px}
.find-docs{list-style:none;padding:0;margin:0 0 10px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px}
@media (max-width:640px){.find-docs{grid-template-columns:1fr}}
.find-docs label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.92rem;color:var(--tx2);line-height:1.5}
.find-docs input{margin-top:3px;width:17px;height:17px;accent-color:var(--gold-dk);flex:none;cursor:pointer}
.find-docs input:checked+span{color:var(--tx2);opacity:.55;text-decoration:line-through}
.find-hint{font-size:.8rem;color:var(--tx2);opacity:.8;margin:0}
.find-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.find-actions .btn{display:inline-flex;align-items:center;gap:8px}
.find-actions .btn svg{width:18px;height:18px;fill:currentColor;stroke:none}

/* Sticky mobile action bar — the two things people actually want, always one tap away */
.mobile-cta{display:none}
@media (max-width:820px){
  .mobile-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--bd);box-shadow:0 -6px 20px rgba(13,42,84,.10)}
  .mobile-cta a{display:flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;padding:13px 8px;font-weight:800;font-size:.84rem;white-space:nowrap;text-decoration:none}
  .mobile-cta .m-wa{background:var(--gold);color:var(--tdk)}
  .mobile-cta .m-call{background:var(--tdk);color:#fff}
  .mobile-cta svg{width:18px;height:18px;fill:currentColor;stroke:none;flex:none}
  .mobile-cta .m-call svg{fill:none;stroke:currentColor;stroke-width:1.9}
  body{padding-bottom:74px}
  .wa-float{display:none}
}

/* Reading progress bar (article pages) */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--gold);z-index:70;transition:width .1s linear}

/* Back to top */
.to-top{position:fixed;left:22px;bottom:24px;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--bd);box-shadow:var(--sh2);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:55}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}
.to-top svg{width:20px;height:20px;stroke:var(--tdk);fill:none;stroke-width:2}
@media (max-width:820px){.to-top{bottom:86px;left:14px}}
/* Sticky header shouldn't cover in-page anchor targets */
:target,#cek-kebutuhan,#layanan,#services{scroll-margin-top:96px}

/* First-view spotlight on the finder — a one-time nudge, then it stops */
.finder.spotlight .find-card:first-child{animation:spot 2.4s ease-in-out 2}
@keyframes spot{0%,100%{box-shadow:0 0 0 0 rgba(242,180,23,0)}50%{box-shadow:0 0 0 6px rgba(242,180,23,.30)}}
@media (prefers-reduced-motion:reduce){.finder.spotlight .find-card:first-child{animation:none}}

/* Live office-hours status + real promo countdown */
.live-status{display:flex;align-items:flex-start;gap:9px;text-align:left;font-size:.8rem;font-weight:600;line-height:1.45;background:var(--tbg);border:1px solid var(--bd);border-radius:12px;padding:10px 13px;margin:0 0 14px;color:var(--tx2)}
.live-status .ls-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px}
.live-status.is-open{background:#EAF7EE;border-color:#BFE5CB;color:#1D5B33}
.live-status.is-open .ls-dot{background:#22A45D;box-shadow:0 0 0 4px rgba(34,164,93,.18);animation:ls-blink 2s ease-in-out infinite}
.live-status.is-closed .ls-dot{background:var(--tx2);opacity:.55}
@keyframes ls-blink{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.live-status.is-open .ls-dot{animation:none}}
.countdown{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--tdk);border-radius:14px;padding:11px 16px;margin:0 0 13px}
.cd-label{font:800 11px/1 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.cd-clock{font:800 1.6rem/1 'Plus Jakarta Sans',sans-serif;color:#fff;letter-spacing:.02em}
.cd-clock b{background:rgba(255,255,255,.1);border-radius:8px;padding:6px 8px;display:inline-block;min-width:44px}

/* Client-work carousel — real engagements, auto-scrolling */
.client-work{background:#fff;overflow:hidden}
.cw-marquee{overflow:hidden;position:relative;margin-top:34px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.cw-track{display:flex;gap:18px;width:max-content;animation:cw-scroll 58s linear infinite}
.cw-marquee:hover .cw-track{animation-play-state:paused}
@keyframes cw-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cw-track{animation:none}}
.cw-card{flex:none;width:320px;display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--bd);border-radius:18px;padding:18px;box-shadow:var(--sh);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.cw-card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--gold)}
.cw-logo{width:62px;height:62px;border-radius:14px;background:#fff;border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;padding:7px;flex:none;overflow:hidden}
.cw-logo img{max-width:100%;max-height:100%;object-fit:contain}
.cw-logo svg{width:26px;height:26px;stroke:var(--gold-dk);fill:none;stroke-width:1.8}
.cw-body{min-width:0}
.cw-body h4{font:800 15px/1.3 'Plus Jakarta Sans',sans-serif;color:var(--tdk);margin:0 0 4px}
.cw-tag{display:block;font-size:12.5px;color:var(--tx2);font-weight:600;margin-bottom:6px}
.cw-done{display:inline-flex;align-items:center;gap:5px;font:800 11px/1 'Inter',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#1D5B33;background:#EAF7EE;border:1px solid #BFE5CB;border-radius:999px;padding:5px 9px}
.cw-done svg{width:12px;height:12px;stroke:#1D5B33;fill:none;stroke-width:2}

/* Floating offer card — sits with the WhatsApp button so it never scrolls
   away, unlike the old header bar. Dismissible, and it slides in slightly
   after load so it doesn't fight the hero for attention. */
.promo-float{position:fixed;right:22px;bottom:100px;z-index:58;width:290px;max-width:calc(100vw - 32px);background:linear-gradient(155deg,var(--gold-lt) 0%,var(--gold) 100%);color:var(--tdk);border-radius:18px;padding:16px 16px 15px;box-shadow:0 18px 44px rgba(13,42,84,.28);opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.3,1)}
.promo-float.show{opacity:1;transform:none;pointer-events:auto}
.promo-float.hide{display:none}
.pf-close{position:absolute;top:8px;right:10px;background:none;border:none;font-size:1.3rem;line-height:1;cursor:pointer;color:var(--tdk);opacity:.5;padding:2px 5px}
.pf-close:hover{opacity:1}
.pf-tag{display:inline-flex;align-items:center;gap:6px;font:800 .68rem/1 'Inter',sans-serif;letter-spacing:.07em;text-transform:uppercase;background:rgba(13,42,84,.14);border-radius:999px;padding:6px 11px;margin-bottom:10px}
.pf-tag svg{width:13px;height:13px;stroke:var(--tdk);fill:none;stroke-width:2.1}
.pf-line{font:700 .84rem/1.4 'Inter',sans-serif;color:var(--tdk);margin:0 0 11px}
.countdown.cd-float{flex-direction:row;align-items:center;justify-content:center;gap:5px;background:var(--tdk);border-radius:12px;padding:9px 10px;margin:0 0 12px}
.countdown.cd-float .cd-label{display:none}
.countdown.cd-float .cd-clock{font-size:1.28rem;color:#fff;letter-spacing:.01em}
.countdown.cd-float .cd-clock b{background:rgba(255,255,255,.12);color:#fff;min-width:40px;padding:5px 6px;font-size:1.2rem}
.pf-cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--tdk);color:#fff;border-radius:999px;padding:11px 16px;font-weight:800;font-size:.87rem;transition:transform .2s ease,filter .2s ease}
.pf-cta:hover{transform:translateY(-2px);color:#fff;filter:brightness(1.15)}
.pf-cta svg{width:17px;height:17px;fill:currentColor;stroke:none;flex:none}
@media (max-width:820px){
  .promo-float{right:12px;left:auto;width:280px;bottom:84px;padding:12px 13px}
  .pf-tag{font-size:.62rem;padding:5px 9px;margin-bottom:8px}
  .pf-line{display:none}
  .countdown.cd-float{padding:7px 8px;margin-bottom:9px}
  .countdown.cd-float .cd-clock{font-size:1.1rem}
  .countdown.cd-float .cd-clock b{min-width:34px;padding:4px 5px;font-size:1rem}
  .pf-cta{padding:10px 14px;font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){.promo-float{transition:none}}

/* Comparison table — structured, quotable, scrolls on small screens */
.table-wrap{overflow-x:auto;margin-top:26px;border:1px solid var(--bd);border-radius:14px;background:#fff}
.cmp-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:720px}
.cmp-table th,.cmp-table td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--bd)}
.cmp-table thead th{background:var(--tdk);color:#fff;font:800 .84rem/1.3 'Plus Jakarta Sans',sans-serif;white-space:nowrap}
.cmp-table thead th:first-child{border-top-left-radius:13px}
.cmp-table thead th:last-child{border-top-right-radius:13px}
.cmp-table tbody td:first-child{font-weight:700;color:var(--tdk);white-space:nowrap}
.cmp-table tbody tr:last-child td{border-bottom:none}
.cmp-table tbody tr:nth-child(even){background:var(--tbg)}

/* Reviews carousel — used automatically once there are six or more reviews */
.rv-marquee{overflow:hidden;position:relative;margin-top:32px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rv-track{display:flex;gap:20px;width:max-content;animation:cw-scroll 70s linear infinite}
.rv-marquee:hover .rv-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.rv-track{animation:none}}
.rv-track .testi{flex:none;width:360px}
.rv-invite{text-align:center;margin:26px 0 0;font-size:.9rem;color:var(--tx2);font-weight:600}
.rv-invite a{color:var(--t1);font-weight:800;border-bottom:2px solid var(--gold);padding-bottom:1px}
.rv-invite a:hover{color:var(--gold-dk)}

/* Minimised offer: collapses to a small pill that still shows the countdown,
   the way the WhatsApp button sits in the corner. Click it to reopen. */
.pf-expand{position:absolute;inset:0;border:none;background:none;cursor:pointer;display:none;border-radius:inherit}
.promo-float.mini .pf-expand{display:block}
.promo-float.mini{width:auto;padding:9px 15px;border-radius:999px;display:flex;align-items:center;gap:8px;cursor:pointer}
.promo-float.mini:hover{transform:translateY(-2px)}
.promo-float.mini .pf-tag-text,
.promo-float.mini .pf-line,
.promo-float.mini .pf-cta,
.promo-float.mini .pf-close{display:none}
.promo-float.mini .pf-tag{background:none;padding:0;margin:0;border-radius:0}
.promo-float.mini .pf-tag svg{width:16px;height:16px}
.promo-float.mini .countdown{background:none;padding:0;margin:0}
.promo-float.mini .cd-clock{font-size:.95rem;color:var(--tdk)}
.promo-float.mini .cd-clock b{background:rgba(13,42,84,.14);color:var(--tdk);min-width:auto;padding:3px 5px;font-size:.9rem}
@media (max-width:820px){
  .promo-float.mini{width:auto;padding:8px 13px}
  .promo-float.mini .cd-clock{font-size:.88rem}
  .promo-float.mini .cd-clock b{padding:3px 4px;font-size:.84rem}
}
.testi-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 4px 12px rgba(13,42,84,.20)}
.rv-track.rev{animation-direction:reverse;animation-duration:78s}
.rv-marquee + .rv-marquee{margin-top:20px}

/* Social proof strip inside the offer popup */
.popup-proof{display:flex;align-items:center;gap:12px;justify-content:center;margin:0 0 13px;text-align:left}
.pp-faces{display:flex;flex:none}
.pp-faces img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-10px;box-shadow:0 2px 6px rgba(13,42,84,.18)}
.pp-faces img:first-child{margin-left:0}
.pp-text{font-size:.78rem;line-height:1.35;color:var(--tx2);font-weight:600}
.pp-text b{display:block;color:var(--gold);letter-spacing:1.5px;font-size:.85rem}
@media (max-width:560px){.rv-track .testi{width:280px;padding:20px 20px 18px}.rv-track .testi p{font-size:.9rem}}

/* Service cards with illustrated headers */
.service-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--bd);border-radius:20px;overflow:hidden;box-shadow:var(--sh);transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s ease,border-color .3s ease;height:100%}
.service-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(13,42,84,.14);border-color:var(--gold)}
.sc-art{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--tdk)}
.sc-art img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.3,1)}
.service-card:hover .sc-art img{transform:scale(1.07)}
.sc-num{position:absolute;top:12px;left:12px;background:rgba(13,42,84,.72);backdrop-filter:blur(6px);color:#fff;font:800 .72rem/1 'Plus Jakarta Sans',sans-serif;padding:7px 10px;border-radius:8px;letter-spacing:.04em}
.sc-price{position:absolute;right:12px;bottom:12px;background:var(--gold);color:var(--tdk);font:800 .76rem/1 'Inter',sans-serif;padding:8px 13px;border-radius:999px;box-shadow:0 6px 16px rgba(13,42,84,.25)}
.sc-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.sc-body h3{font-size:1.12rem;margin-bottom:.45em;color:var(--tdk)}
.sc-body p{font-size:.9rem;color:var(--tx2);margin-bottom:14px;flex:1}
.sc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.sc-tag{background:var(--tbg);border:1px solid var(--bd);color:var(--tx2);font:700 .72rem/1 'Inter',sans-serif;padding:6px 10px;border-radius:999px}
.service-card .more{margin-top:auto;color:var(--t1);font-weight:800;font-size:.88rem;display:inline-flex;align-items:center;gap:6px;transition:gap .25s ease}
.service-card:hover .more{gap:11px}

/* Quick view: size up a service without leaving the page */
.sc-quick{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);color:var(--tdk);font:800 .74rem/1 'Inter',sans-serif;padding:8px 12px;border-radius:999px;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .28s ease,transform .28s ease;box-shadow:0 6px 16px rgba(13,42,84,.22)}
.sc-quick svg{width:13px;height:13px;stroke:var(--gold-dk);fill:none;stroke-width:2.1}
.service-card:hover .sc-quick,.sc-quick:focus-visible{opacity:1;transform:none}
@media (hover:none){.sc-quick{opacity:1;transform:none}}
.quick-modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.quick-modal[hidden]{display:none}
.qv-overlay{position:absolute;inset:0;background:rgba(13,42,84,.62);backdrop-filter:blur(3px);animation:qv-fade .25s ease}
.qv-card{position:relative;background:#fff;border-radius:22px;max-width:520px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--sh2);padding:0 26px 26px;animation:qv-pop .32s cubic-bezier(.2,.8,.3,1)}
@keyframes qv-fade{from{opacity:0}to{opacity:1}}
@keyframes qv-pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qv-card,.qv-overlay{animation:none}}
.qv-close{position:absolute;top:12px;right:14px;z-index:2;background:rgba(255,255,255,.9);border:none;width:34px;height:34px;border-radius:50%;font-size:1.4rem;line-height:1;cursor:pointer;color:var(--tdk);box-shadow:var(--sh)}
.qv-art{margin:0 -26px 20px;border-radius:22px 22px 0 0;overflow:hidden;aspect-ratio:16/7}
.qv-art img{width:100%;height:100%;object-fit:cover}
.qv-card h3{font-size:1.35rem;margin-bottom:.35em}
.qv-price{display:inline-block;background:var(--gold);color:var(--tdk);font:800 .8rem/1 'Inter',sans-serif;padding:8px 14px;border-radius:999px;margin-bottom:14px}
.qv-card h4{font-size:.95rem;margin:18px 0 10px}
.qv-list{list-style:none;padding:0;margin:0 0 6px;display:grid;gap:9px}
.qv-list li{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;color:var(--tx2);line-height:1.5}
.qv-list svg{width:16px;height:16px;stroke:var(--gold-dk);fill:none;stroke-width:1.9;flex:none;margin-top:3px}
.qv-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.qv-actions .btn{flex:1;justify-content:center;min-width:180px}
.qv-actions .btn svg{width:17px;height:17px;fill:currentColor;stroke:none}

/* Staggered entrance for grid children */
.reveal.in .grid-3 > *,.reveal.in .find-grid > *{animation:stagger .55s cubic-bezier(.2,.8,.3,1) backwards}
.reveal.in .grid-3 > *:nth-child(1),.reveal.in .find-grid > *:nth-child(1){animation-delay:.02s}
.reveal.in .grid-3 > *:nth-child(2),.reveal.in .find-grid > *:nth-child(2){animation-delay:.08s}
.reveal.in .grid-3 > *:nth-child(3),.reveal.in .find-grid > *:nth-child(3){animation-delay:.14s}
.reveal.in .grid-3 > *:nth-child(4),.reveal.in .find-grid > *:nth-child(4){animation-delay:.20s}
.reveal.in .grid-3 > *:nth-child(5),.reveal.in .find-grid > *:nth-child(5){animation-delay:.26s}
.reveal.in .grid-3 > *:nth-child(6),.reveal.in .find-grid > *:nth-child(6){animation-delay:.32s}
.reveal.in .grid-3 > *:nth-child(n+7),.reveal.in .find-grid > *:nth-child(n+7){animation-delay:.38s}
@keyframes stagger{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.reveal.in .grid-3 > *,.reveal.in .find-grid > *{animation:none}}

/* "Every permit" catch-all — scrolling chips of what people actually search */
.all-permits{background:var(--tdk);overflow:hidden;color:#fff}
.all-permits .eyebrow{color:var(--gold)}
.all-permits h2{color:#fff}
.all-permits .lead{color:#C6CFE0}
.ap-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.ap-head .btn svg{width:18px;height:18px;fill:currentColor;stroke:none}
.ap-marquee{overflow:hidden;position:relative;margin-bottom:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.ap-track{display:flex;gap:10px;width:max-content;animation:cw-scroll 90s linear infinite}
.ap-track.rev{animation-direction:reverse;animation-duration:110s}
.ap-marquee:hover .ap-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.ap-track{animation:none}}
.ap-chip{flex:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 16px;font-size:.84rem;font-weight:600;color:#E4EBF5;white-space:nowrap;transition:background .25s ease,border-color .25s ease,color .25s ease}
.ap-chip:hover{background:var(--gold);border-color:var(--gold);color:var(--tdk)}
.ap-note{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;font-size:.88rem;font-weight:700;color:var(--gold)}
.ap-note svg{width:17px;height:17px;stroke:var(--gold);fill:none;stroke-width:1.9}
@media (max-width:760px){.ap-head{flex-direction:column;align-items:flex-start;gap:18px}}

/* Situation chips, merged into the services section */
.intent-bar{background:var(--tbg);border:1px solid var(--bd);border-radius:20px;padding:20px 22px;margin-top:26px}
.intent-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin-bottom:14px}
.intent-head b{font:800 1rem/1.3 'Plus Jakarta Sans',sans-serif;color:var(--tdk)}
.intent-head span{font-size:.88rem;color:var(--tx2)}
.intent-chips{display:flex;flex-wrap:wrap;gap:9px}
.intent-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--bd);border-radius:999px;padding:9px 15px;font:700 .84rem/1 'Inter',sans-serif;color:var(--tdk);cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.intent-chip:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 6px 16px rgba(13,42,84,.10)}
.intent-chip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.intent-chip svg{width:15px;height:15px;stroke:var(--gold-dk);fill:none;stroke-width:1.9;flex:none}
@media (max-width:560px){.intent-chip{font-size:.79rem;padding:8px 13px}}

/* Photos need a slightly different fit from the illustrations */
.sc-art img[src$=".jpg"]{object-position:center 42%}

/* The whole service card is the button now — make that obvious */
.service-card{cursor:pointer}
.service-card::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;box-shadow:inset 0 0 0 0 var(--gold);transition:box-shadow .25s ease}
.service-card{position:relative}
.service-card:hover::after{box-shadow:inset 0 0 0 2px var(--gold)}
.service-card:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.price-note{margin:20px 0 0;font-size:.82rem;color:var(--tx2);max-width:78ch;line-height:1.6}
.promo-popup.nudge .popup-icon{background:var(--gold)}
.promo-popup.nudge .popup-icon svg{stroke:var(--tdk);fill:none;stroke-width:2.2;width:28px;height:28px}