/* Integration only: retain the supplied reference's layout and visual tokens. */
html[data-initializing] .view{visibility:hidden}
#zintrom video{object-fit:contain!important;object-position:center!important;background:#080d16}
.civil-skip{position:absolute;right:24px;top:24px;z-index:5;border:1px solid #ffffff80;background:#0e1a2fcc;color:#fff;padding:12px 20px;border-radius:999px;font:600 14px/1.3 inherit;cursor:pointer}
#ck-next:disabled{opacity:.55;cursor:wait}
#ckmsg[role=alert]{color:#b42318}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
html[data-motion=off] .rv{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}.rv{opacity:1!important;transform:none!important}}

[data-center-hidden="true"]{display:none!important}
@media(max-width:999px){footer.ft>.mft{display:none!important}footer.ft>.mf29 .if2:not(.on):before,footer.ft>.mf29 .if2:not(.on):after{content:none!important}}
@media(max-width:999px){
#v-home:has(#areas[data-center-hidden]) .m28a .q8s:has(.q8gt),
#v-home:has(#side[data-center-hidden]) .q8sd2,
#v-home:has(#howto[data-center-hidden]) .q8hw,
#v-home:has(#lawyer[data-center-hidden]) .q8s:has(.q8lw),
#v-home:has(#guide[data-center-hidden]) .q8s:has(.q8gd),
#v-home:has(#cases[data-center-hidden]) .q8cs{display:none!important}
}

/* Desktop composition: compensate for the reference's 1920px canvas without
   changing its mobile layout or its carousel coordinate system. */
@media(min-width:1000px){
 html body #page#page#page#page#page#page .in{width:var(--civil-content,1280px)!important;max-width:var(--civil-content,1280px)!important;margin-left:auto!important;margin-right:auto!important}
 #page #hd .r1{height:calc(72px * var(--fk,1))}
 #page #hd .r2{height:calc(52px * var(--fk,1));gap:calc(28px * var(--fk,1));font-size:calc(16px * var(--fk,1));font-weight:500}
 #page #hd .logo-svg{width:calc(118px * var(--fk,1));height:calc(26px * var(--fk,1))}
 #page #hd .logo span{font-size:calc(20px * var(--fk,1));font-weight:700;letter-spacing:-.025em}
 #page #hd .r2 .cta{height:calc(36px * var(--fk,1));padding-inline:calc(18px * var(--fk,1));font-size:calc(15px * var(--fk,1));font-weight:600}
 #page #top{height:var(--civil-hero-height,800px)!important;min-height:0!important}
 #page #top .slide .tx{padding-top:calc(40px * var(--fk,1));padding-bottom:calc(100px * var(--fk,1));gap:calc(22px * var(--fk,1));justify-content:center}
 #page #top .slide .im{width:68%;height:100%;right:0}
 #page #top .slide .im:after{background:linear-gradient(90deg,#0e1a2f 0%,rgba(14,26,47,.82) 16%,rgba(14,26,47,.18) 62%,rgba(14,26,47,.08) 100%)}
 #page #top .slide .h{font-size:var(--civil-title,72px)!important;line-height:1.22!important;font-weight:700!important;letter-spacing:-.03em!important;max-width:calc(780px * var(--fk,1));text-wrap:balance}
 #page #top .slide .h span{font-weight:400!important}
 #page #top .slide .k{font-size:calc(15px * var(--fk,1));font-weight:600;letter-spacing:.02em}
 #page #top .slide .sub{font-size:calc(18px * var(--fk,1));line-height:1.8;max-width:calc(650px * var(--fk,1));color:rgba(255,255,255,.78);text-wrap:pretty}
 #page #top .acts{margin-top:calc(12px * var(--fk,1));gap:calc(12px * var(--fk,1))}
 #page #top .acts .btn{height:calc(52px * var(--fk,1));padding-inline:calc(26px * var(--fk,1));font-size:calc(16px * var(--fk,1));font-weight:600}
 #page #top .hctl{left:calc((100% - var(--civil-content,1280px))/2);bottom:calc(34px * var(--fk,1));transform:none;height:calc(36px * var(--fk,1));padding-inline:calc(12px * var(--fk,1));gap:calc(8px * var(--fk,1));font-size:calc(14px * var(--fk,1))}
 #page #top .hctl button{width:calc(28px * var(--fk,1));height:calc(36px * var(--fk,1))}
 #page #top .hctl .pr{width:calc(88px * var(--fk,1))}
 #page .sh h2,#page .ch h2,#page .faqw .l h2,#page .flow .fh h2{font-size:calc(34px * var(--fk,1))!important;font-weight:650!important;line-height:1.35!important;letter-spacing:-.025em!important}
 #page .sh p,#page .ch p{font-size:calc(17px * var(--fk,1))!important;line-height:1.75!important}
 #page .sh{margin-bottom:calc(38px * var(--fk,1))}
 #page .sec{padding-top:calc(96px * var(--fk,1))}
 #page .notice button{right:calc((100% - var(--civil-content,1280px))/2)}
}

/* Calm desktop motion: keep layout and copy still while whole slides dissolve. */
@media(min-width:1000px){
 html[data-initializing] #page{visibility:hidden}
 #page #top .slide{transition:opacity .65s ease,visibility .65s;will-change:opacity}
 #page #top .slide .tx>*{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
 #page #top .slide .im img{transform:none!important;animation:none!important;transition:none!important}
 #page .rv{transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
 #page .rv.on{transform:none}
}

/* Shared desktop rhythm: separate headings, controls, and reading content. */
@media(min-width:1000px){
 #page .view .sh{margin-bottom:calc(40px * var(--fk,1));}
 #page .view .sh h2{word-break:keep-all;text-wrap:balance}
 #page .view .sh p{max-width:calc(720px * var(--fk,1));margin:calc(16px * var(--fk,1)) auto 0;word-break:keep-all;text-wrap:pretty}
 #page .view .sh:has(.more){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:calc(32px * var(--fk,1));text-align:left;align-items:end}
 #page .view .sh:has(.more) h2,#page .view .sh:has(.more) p{grid-column:1;margin-left:0;margin-right:0}
 #page .view .sh .more{position:static!important;grid-column:2;grid-row:1/3;align-self:end;margin:0 0 calc(4px * var(--fk,1));white-space:nowrap}
 #page .view :is(.sec,.flow) .btn{min-height:calc(48px * var(--fk,1));height:auto;padding:calc(12px * var(--fk,1)) calc(22px * var(--fk,1));font-size:calc(16px * var(--fk,1));line-height:1.4;white-space:normal;text-align:center}
 #page .view :is(.bt,.bt2){flex-wrap:wrap;gap:calc(12px * var(--fk,1))}
 #page #howto .tb{gap:calc(24px * var(--fk,1));margin-bottom:calc(40px * var(--fk,1))}
 #page #howto .tb button{padding:calc(18px * var(--fk,1)) calc(12px * var(--fk,1)) calc(8px * var(--fk,1));min-width:0}
 #page #howto .tb small{font-size:calc(14px * var(--fk,1));line-height:1.5}
 #page #howto .tb b{margin-top:calc(8px * var(--fk,1));font-size:calc(18px * var(--fk,1));line-height:1.4}
 #page #howto .pn{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:calc(56px * var(--fk,1));align-items:center}
 #page #howto .ph{height:calc(360px * var(--fk,1));position:relative}
 #page #howto .bub{left:calc(24px * var(--fk,1));right:calc(24px * var(--fk,1));bottom:calc(24px * var(--fk,1));padding:calc(20px * var(--fk,1));width:auto}
 #page #howto .bub p{font-size:calc(15px * var(--fk,1));line-height:1.8;margin-top:calc(10px * var(--fk,1))}
 #page #howto .r{min-width:0;padding:calc(16px * var(--fk,1)) 0}
 #page #howto .r h3{font-size:calc(28px * var(--fk,1));line-height:1.4;margin-top:calc(12px * var(--fk,1));letter-spacing:-.025em;word-break:keep-all}
 #page #howto .r p{font-size:calc(17px * var(--fk,1));line-height:1.85;margin-top:calc(20px * var(--fk,1));word-break:keep-all}
 #page #howto .bt{margin-top:calc(32px * var(--fk,1))}
 #page .h-c2 .pn{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:calc(48px * var(--fk,1))}
 #page .h-c2 .s{font-size:calc(16px * var(--fk,1));line-height:1.8;margin-top:calc(16px * var(--fk,1))}
 #page .lw9 .pn{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:calc(48px * var(--fk,1));padding:calc(32px * var(--fk,1))}
 #page .lw9 .pn .ph{width:100%;height:auto;aspect-ratio:1;max-height:calc(420px * var(--fk,1))}
 #page .flow .fh{gap:calc(40px * var(--fk,1))}
 #page .flow .fh p{max-width:calc(680px * var(--fk,1));line-height:1.8}
 #page .flow .body{margin-top:calc(40px * var(--fk,1))}
}
@media(min-width:1000px) and (max-width:1199px){
 #page #howto .pn{gap:calc(32px * var(--fk,1))}
 #page #howto .bub{left:calc(16px * var(--fk,1));right:calc(16px * var(--fk,1));bottom:calc(16px * var(--fk,1));padding:calc(16px * var(--fk,1))}
 #page .view .sh:has(.more){grid-template-columns:1fr}
 #page .view .sh .more{grid-column:1;grid-row:auto;justify-self:start;margin-top:calc(16px * var(--fk,1))}
}

/* Keep desktop quick actions at a readable size despite the scaled canvas. */
@media(min-width:1000px){
 #page .float.fq9{right:calc(16px * var(--fk,1));bottom:calc(24px * var(--fk,1));gap:calc(12px * var(--fk,1))}
 #page .fq9>a{width:calc(76px * var(--fk,1));height:calc(76px * var(--fk,1));gap:calc(5px * var(--fk,1));flex-shrink:0}
 #page .fq9>a svg{width:calc(26px * var(--fk,1));height:calc(26px * var(--fk,1))}
 #page .fq9>a span{font-size:calc(14px * var(--fk,1));line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
 #page .fq9>a em{right:calc(88px * var(--fk,1));padding:calc(10px * var(--fk,1)) calc(16px * var(--fk,1))}
 #page .fq9 .tp{width:calc(48px * var(--fk,1));height:calc(48px * var(--fk,1))}
 #page .fq9 .tp svg{width:calc(22px * var(--fk,1));height:calc(22px * var(--fk,1))}
}
@media(min-width:1000px) and (max-width:1199px){
 #page .float.fq9{right:calc(12px * var(--fk,1))}
 #page .fq9>a{width:calc(68px * var(--fk,1));height:calc(68px * var(--fk,1))}
}

/* Preserve mobile wrapping; explicit three-line desktop practice headlines. */
.civil-pc-break{display:none}
@media(min-width:1000px){.civil-pc-break{display:initial}}

/* October 15: one desktop hero scale across home and detail pages. */
@media(min-width:1000px){
 html body #page .view .hero.sub{height:var(--civil-hero-height,800px)!important;min-height:0!important}
 html body #page .view .hero.sub .slide .tx{padding-top:calc(40px * var(--fk,1));padding-bottom:calc(100px * var(--fk,1));gap:calc(22px * var(--fk,1));justify-content:center}
 html body #page .view .hero.sub .slide .h{font-size:var(--civil-title,72px)!important;line-height:1.22!important;font-weight:700!important;letter-spacing:-.03em!important;max-width:calc(780px * var(--fk,1));text-wrap:balance}
 html body #page .view .hero.sub .slide .h span{font-weight:400!important}
 html body #page .view .hero.sub .slide .im{width:68%;height:100%;right:0}
 html body #page .view .hero.sub .slide .im img{width:100%;height:100%;object-fit:cover}
 html body #page .view .hero.sub .slide .sub{font-size:calc(18px * var(--fk,1))!important;line-height:1.8;max-width:calc(650px * var(--fk,1));color:rgba(255,255,255,.78)}
 html body #page .view .hero.sub .slide .k{font-size:calc(15px * var(--fk,1));line-height:1.6}
 html body #page .view .hero.sub .acts .btn{height:calc(52px * var(--fk,1));padding-inline:calc(26px * var(--fk,1));font-size:calc(16px * var(--fk,1))}
 /* Text switches cleanly; only the background image dissolves. */
 #page #top .slide:not(.on) .tx{visibility:hidden!important;opacity:0!important}
 #page #top .slide.on .tx{visibility:visible!important;opacity:1!important}
 html body .float.fq9>a{box-sizing:border-box;padding:14px!important;min-width:76px!important;min-height:76px!important;gap:7px!important}
 html body .float.fq9>a i{display:grid;place-items:center;width:28px!important;height:28px!important;flex:none}
 html body .float.fq9>a i svg{width:26px!important;height:26px!important}
 html body .float.fq9>a span{font-size:13px!important;line-height:1.25!important}
}
@media(min-width:1000px){
 html body #page#page .float.fq9>a{width:calc(80px * var(--fk,1))!important;height:calc(80px * var(--fk,1))!important;min-width:0!important;min-height:0!important;padding:calc(14px * var(--fk,1))!important;gap:calc(6px * var(--fk,1))!important}
 html body #page#page .float.fq9>a i{width:calc(26px * var(--fk,1))!important;height:calc(26px * var(--fk,1))!important}
 html body #page#page .float.fq9>a i svg{width:100%!important;height:100%!important}
 html body #page#page .float.fq9>a span{font-size:calc(13px * var(--fk,1))!important;line-height:1.25!important}
 html body #page#page .float.fq9{gap:calc(12px * var(--fk,1))!important;right:calc(16px * var(--fk,1))!important}
}